티스토리에 오류 제보하기 버튼을 만들어보자 - 구글 스프레드 시트를 데이터베이스로 이용하기
이 글은 구글 스프레드 시트를 데이터베이스로 이용하기 시리즈의 응용편 - "내 블로그에 오류 제보하기 버튼을 만들어보자" 편 입니다.
블로그에 글을 쓰다보면 가끔 잘못된 정보가 전달되는 경우가 있습니다.
혹은 시간이 지나서 정보가 바뀐 경우도 있죠.
또한 스킨을 바꿀 경우에, 이미 작성한 글의 레이아웃이 깨지는 경우도 있습니다.
작성한 포스트 갯수가 적은경우에는 블로그 운영자가 직접 하나하나 확인해볼 수 있지만,
포스트 갯수가 많아질수록 일일히 확인하기는 거의 불가능해지게됩니다.
이 작업을 검색을 통한 방문자들에게 맡길 수는 없을까요?
방문자들이 글을 읽다가 잘못된 정보나, 레이아웃이 깨진 글을 발견하게되면 이를 제보할 수 있게 하는겁니다.
물론 댓글로 제보해주시는 분들도 있지만, 자신의 닉네임이 남아서, 로그인하기 귀찮아서 그냥 지나쳐가는 경우도 많기 때문에
로그인없이, 클릭두번만 부탁드리는겁니다!
댓글창 위의 오류제보하기 버튼을 클릭하면
체크박스와 기타의견을 남길 수 있는 글상자가 나타나고, 보내기버튼을 누르면
메시지와 함께
이 것이 미리 지정한 구글 스프레드시트에 기록됩니다.
어떤 체크박스를 클릭했는지, 어떤 내용을 남겼는지 기록되게됩니다.
※이 글에서 테스트 해보셔도 좋으나 글상자에 테스트라고 써주세요~ 안그러면 자꾸 검토해봐야하니까요 ^^
https://docs.google.com/spreadsheets/d/1vB3M4Qpujc6VT7-WT4AFYz9R74d6jwsstm4IaYFzFpI/pubhtml
여기서 테스트 내용을 확인할 수 있습니다
를 참조하여, 오류 제보를 받을 스프레드시트를 미리 준비하고, 웹 앱 게시 URL을 준비합니다.
스프레드시트 1행은 A열부터 Timestamp, path, memo를 순서대로 입력해놓습니다. (header)
오류 제보하기 버튼 만들기
1.skin.html에서 '오류제보 버튼'을 삽입할 위치를 찾아 다음을 붙여넣습니다.
<div id="sendComment">
<p>오류 제보하기</p>
<div>
<input type="checkbox" value="내용상 오류가 있음"/>내용상 오류가 있음<br/>
<input type="checkbox" value="표시에 문제가 있음"/>표시에 문제가 있음<br/>
<input type="checkbox" value="기타 수정이 필요함"/>기타 수정이 필요함<br/>
<textarea placeholder="구체적 내용이나 기타 의견을 남겨주세요."></textarea><br/>
<input type="button" value="보내기" onclick="sendComment();">
<a href="http://nubiz.tistory.com/551">(?)</a>
</div>
</div>
<div style="clear:both"></div>
체크박스는 원하는대로 추가/삭제하셔도 작동합니다.
2.style.css에 다음을 추가합니다. 버튼의 스타일을 지정하는 코드이니, 원하는대로 수정하셔도 좋습니다.
#sendComment {
width:140px;
background:#eee;
padding:10px;
border:#999 solid 1px;
font-size:0.8em;
float:right;
}
#sendComment p {
line-height:2em;
padding:0; margin:0;
}
#sendComment div {
display:none;
}
#sendComment a {
text-decoration:none;
color:#aaa;
margin-left:65px;
}
3. skin.html의 </body> 윗줄에 다음 스크립트를 붙여넣습니다.
파란색 표시한 곳에 준비한 웹 앱 게시URL을 넣으시면 됩니다.
<script>
//오류제보하기 - http://nubiz.tistory.com/551
$("#sendComment>p").click(function(){
$("#sendComment>div").toggle(300);
});
function sendComment (){
$("#sendComment *").attr("disabled","");
var errors = []
$("#sendComment :checkbox:checked").each(function(i){
errors[i] = $(this).val();
});
var comment = $("#sendComment textarea").val();
$.ajax({
url: "https://script.google.com/macros/s/###############################/exec",
data: {
path: decodeURIComponent(location.pathname),
memo: errors+" / "+comment
},
type: "POST",
success:function(){
alert("빠른 시일 내에 검토해보겠습니다.\n감사합니다.");
$("#sendComment :disabled").removeAttr("disabled");
$("#sendComment textarea").val('');
$("#sendComment :checkbox").prop("checked",false);
}
});
}
</script>
※본 스크립트는 jQuery를 사용합니다. 스크립트가 작동하지 않는다면 스크립트 윗줄에 다음을 추가해주세요.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!--[if lte IE 8]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <![endif]-->
업데이트 -
