이런저런 폼을 사용할 일이 많은데, 그 때마다 프로그램을 만들기는 어렵겠더라구요.
여러 사람이 이용할 일도 많고, 사용하는 단체도 다양한데 그걸 언제 하나하나 호스팅을 구하고, 권한을 설정하고 하겠어. 혹시나 하고 검색해보니 바로 나오네요. 역시 누군가는 생각했을줄 알았지.
방법이 아주 간단해서, 원문을 읽고 바로 따라하실수 있을거예요.
간단히 순서만 요약하자면
1. 스프레드시트 생성.
2. 첫 줄에 필드명 입력 (후에 입력폼에서 사용하니 대소문자 구문 필수)
3. 저장 후 도구 - 스크립트에디터
4. 입력되어있는 값은 모두 삭제하고 하단 박스의 내용 덮어씌우기
// original from: http://mashe.hawksey.info/2014/07/google-sheets-as-a-database-insert-with-apps-script-using-postget-methods-with-ajax-example/
// original gist: https://gist.github.com/willpatera/ee41ae374d3c9839c2d6
function doGet(e){
return handleResponse(e);
}
// 데이터가 입력될 시트명 (대소문자 구분)
var SHEET_NAME = "Sheet1";
var SCRIPT_PROP = PropertiesService.getScriptProperties();
function handleResponse(e) {
var lock = LockService.getPublicLock();
lock.waitLock(30000);
try { // 붉은 글씨에 문서의 키값을 바로 입력해도 됩니다.
var doc = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("key"));
var sheet = doc.getSheetByName(SHEET_NAME);
var headRow = e.parameter.header_row || 1;
var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
var nextRow = sheet.getLastRow()+1; // get next row
var row = [];
for (i in headers){
if (headers[i] == "Timestamp"){
// special case if you include a 'Timestamp' column
row.push(new Date());
} else { // else use header name to get data
row.push(e.parameter[headers[i]]);
}
}
// more efficient to set values as [][] array than individually
sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
// return json success results
return ContentService
.createTextOutput(JSON.stringify({"result":"success", "row": nextRow}))
.setMimeType(ContentService.MimeType.JSON);
} catch(e){
// if error return this
return ContentService
.createTextOutput(JSON.stringify({"result":"error", "error": e}))
.setMimeType(ContentService.MimeType.JSON);
} finally { //release lock
lock.releaseLock();
}
}
function setup() {
var doc = SpreadsheetApp.getActiveSpreadsheet();
SCRIPT_PROP.setProperty("key", doc.getId());
}5. 스크립트를 저장합니다. 디스켓 버튼을 누르셔도 됩니다.
6. 버그 아이콘 옆 셀렉트박스에서 setup을 선택 후 run 버튼 클릭.
권한을 묻는 창이 나오면 허용하고 넘어갑니다.
허용이 바로 보이지 않으면 고급 버튼을 눌러야할 수도 있어요.
7. 배포 - 웹 앱으로 배포
8. 실행자는 본인의 아이디로 두고 접근 권한은 누구나(익명허용)으로 둡니다. deploy.
9. 웹 앱 url을 복사해둡니다.
까지 하면 구글 쪽에서 할 일은 끝.
이제 html을 만들 차례입니다. 저는 귀찮아서 호스팅은 따로 받지 않고 티스토리의 html 수정을 활용해서 만들었어요.
<head>
<meta charset="UTF-8">
<!--[if lte IE 8]>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<![endif]-->
<!--[if gte IE 9]>
<!-->
<script src="//t1.daumcdn.net/tistory_admin/lib/jquery-2.1.4.min.js"></script>
<!--
<![endif]-->
<script src="https://s1.daumcdn.net/svc/original/U03/cssjs/jquery/jquery-1.11.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>어떻게 설명하는게 좋을까 하다 그냥 제가 사용중인 소스를 긁어왔어요.
초록 글씨 부분이 head 태그 사이에 들어갈, ajax, jquery 호출부입니다.
<div id="postFormData">
<table border=0 cellpadding=5 cellspacing="5">
<tr valign=top>
<td width=100>이름</td>
<td>
<input type="text" id="name" style="width:280px" />
</td>
<tr>
<tr valign=top>
<td width=100>특이사항</td>
<td>
<textarea id="memo" style="width:300px;height:100px;"></textarea>
</td>
</tr>
<tr>
<td colspan=2 align=center>
<input type="button" value="등록 (버튼을 누르고 3 초만 기다려주세요 ^^)" onclick="postFormData();">
</td>
</tr>
</table>
</div>입력폼의 ID, 폼의 ID를 설정합니다. 저는 DIV 자체에 ID를 걸었어요.
스크립트의 수정부는 각 컬러를 맞춰주세요. 폼 이름, 각각의 데이터 ID.
마지막으로 ############################# 부분은 앞의 글에서 복사해두었던 웹URL입니다.
<script>
function postFormData (){
var name = document.getElementById("name").value;
var memo = document.getElementById("memo").value;
$.ajax({
url: "https://script.google.com/macros/s/#############################/exec",
data: {
name: name+"",
memo: memo+""
},
type: "POST",
success:function(){
alert("등록되었습니다.\n감사합니다.");
} });
}
</script>설명할게 너무 없어서 민망하네요;;
'꿈꾸는 어린 양 > 공부해요' 카테고리의 다른 글
| 스프레드시트 활용 - 구글 설문지 결과를 메일로 백업하는 스크립트 (0) | 2019.03.30 |
|---|