스프레드시트 스크립트편집기를 이용하여 데이터 받아오기2 - follow(4)

이전 포스팅을 통해 만든 로그인 기능을 통해 다음과 같은 기능을 구현하였다.

- 사용자의 이름과 비밀번호가 일치 할 때 다음 화면으로 이동 가능

- 웹 상에서 로그인한 사용자의 이름을 기억해둠.

 

이 때 전제조건은 리더가 로그인을 한 것이다.

위와 같은 사항을 참고하고, 정상적으로 로그인을 한 뒤 출석체크 버튼을 클릭하면 나오는 화면은 다음과 같다.

이름과 정보는 가렸다..

해당 화면에서 체크박스에 체크를 한 뒤 위쪽 완료 버튼을 누르면 해당 사람의 셀을 찾아 출석 정보를 기록한다.

이와 같은 기능을 구현한 방법과 코드를 설명하도록 하겠다.

 

우선 지난 포스팅과 중복되겠지만 리더의 조원 목록을 불러오는 코드부터 살펴보도록 하자.

(같은 기능이지만 조금은 다른 코드를 보며 좀더 이해하기 쉬울 것이다.)

자세한 세팅과 흐름은 이 전 게시물을 참고하기 바란다.

https://rollingpig.tistory.com/3

스프레드시트 스크립트편집기를 이용하여 데이터 받아오기 - follow(3)

 

우선 데이터가 어떻게 저장되어 있는지 보자.

조원들의 이름을 불러오기 위해 사용한 스프레드 시트의 개괄적인 모양새이다.

해당 파일은 약 500명이 되는 인원들의 정보를 나열한 파일이다.

코디는 리더들의 리더라고 생각하면 된다.

각각 개인의 이름, 성별, 학년, 전화번호와 함께 자신의 리더이름이 적혀져 있다.

 

해당 파일의 스크립트는 다음과 같다.

var ss = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/자신의 사이트명/edit");
 
var sheet = ss.getSheetByName('GBS'); // be very careful ... it is the sheet name .. so it should match 
 
function doGet(e){
 
var action = e.parameter.action;
 
  if(action == 'getItems'){
    return getItems(e);
  }
}
 
function getItems(e){
  
  var records={};
 
  var rows = sheet.getRange(2, 1, sheet.getLastRow() - 1,sheet.getLastColumn()).getValues();
      data = [];
 
  for (var r = 0, l = rows.length; r < l; r++) {
    var row     = rows[r],
        record  = {};
    record['leadername'] = row[1];
    record['name']=row[2];
    record['grade']=row[4];
 
    
    data.push(record);
    
   }
  records.items = data;
  var result=JSON.stringify(records);
  return ContentService.createTextOutput(result).setMimeType(ContentService.MimeType.JSON);
}

저번 게시물에서 스크립트에 대한 대략적인 설명을 하였다.

이번에는 표가 어떻게 구성되었는지와 스크립트 코드를 같이 첨부하였으니 스크립트 코드에 대해 분석하고자 하면 참고하자.

 

해당 스크립트 파일은 리더이름과 이름 학년을 통째로 return한다. (참고로 엑셀파일 내 name은 일종의 Primary Key이다. 즉, 중복값이 없다.) 이 스크립트 파일을 참조하는 함수는 다음과 같다.

 

 

 $.get("https://script.google.com/macros/s/웹으로 배포한 사이트/exec?action=getItems", {
            action : "getItems"
          }).done(function(data){
            for (var i=0; i<data.items.length;i++){
              if(name==data.items[i].leadername){
                add_div(data.items[i].name,data.items[i].grade);
                console.log("in for"+data.items[i].leadername);
                }    
              }  
              $("#loading").hide();
              $("#field").show();
          }).fail(function(data){
            console.log("Fail to load\nError code: "+ data);
          });
 

해당 함수는 이전 포스팅에서 다룬것과 같은 동작을 한다.

return 값으로 받아낸 leadername, name, grade 값을 가지고 로그인한 사람의 이름(리더가 로그인을 한다.)이 leadername인 사람 즉, 조원들의 목록을 추가한다.

참고로 add_div는 함수이다.

 

function add_div(name,grade){

//string은 학년과 이름을 표시, input은 checkbox를 생성

var br = document.createElement('br');

var string = document.createTextNode(name+" - "+grade+"학년 ");

var input = document.createElement('input');

input.setAttribute("id","list"+listid);

input.setAttribute("type","checkbox");

input.setAttribute("name","checkbox");

input.setAttribute("value",name);

input.setAttribute("class","checkboxes");

document.getElementById('field').appendChild(string);

document.getElementById('field').appendChild(input);

document.getElementById('field').appendChild(br);

console.log("name : "+name+"id : "+listid);

listid++;

}

이런 함수인데, 간략하게 설명하자면 이름과 학년 그리고 체크박스를 HTML상으로 뿌려주는 함수이다.

 

HTML 단에는 다음과 같은 부분이 있다.

<form>

<div id="field">

<button type='button' class="btn btn-default submit">완료</button>

<br></br>

</div>

</form>

해당 field라는 아이디를 참조하여 넣어준다고 생각하면 된다. 자세한 설명은 생략하도록 하겠다.

 

이렇게 만들어진 조원들의 목록들은 각각의 이름을 value로 가진 체크박스들로 인해 값을 전달할 수 있다. 전달받은 값을 통해 어떻게 해당 조원들의 칸에 쓸 수 있는지 다음 게시물을 통해 설명하도록 하겠다.