지난번에 게시판 모듈 스킨(특히, 스케치북)을 이용해 서명 그리기를 끼워넣는 팁을 소개해드린 바 있습니다. (아래 링크 참조)
https://www.xetown.com/lakepark/520085
해당 게시물에서 보시는 바와 같이 @웹지기님을 통해 서명 패드가 (1) 복수로 존재하거나 (2) 필수가 아닐 수도 있는 경우 등에 대해 피드백을 받기도 했습니다.
그래서 이 두 가지 경우를 우선적으로 고려해서 반복문과 기타 구문들을 활용해서 코드를 다시 짜봤습니다.
(오늘 낮술부터 시작해서 정신이 몽롱한 관계로 지난번처럼 자세한 설명을 못드리는 점 양해 부탁드리겠습니다)
1. 준비물 구하기
- 앞선 게시물에도 쓰긴 했지만, 다시 한번 말씀 드리겠습니다.
- 일단 http://www.jqueryscript.net/other/Smooth-Signature-Pad-Plugin-with-jQuery-Html5-Canvas.html 로 갑니다.
- Download 받으세요.
- jquery.signaturepad.css 파일은 css 폴더에 저장해줍니다. (스케치북 스킨의 css 폴더를 말하는 거예요)
- numeric-1.2.6.min.js, bezier.js, jquery.signaturepad.js, js/json2.min.js 등의 파일은 js 폴더에 저장해줍니다. (마찬가지로 스케치북 스킨의 js 폴더)
- 그러면, 확장변수를 만들어보겠습니다.
2. 확장변수 만들기
- 게시판 관리 > 사용자 정의 > 추가로 들어가서 확장변수를 만듭니다.
- 여기서 '사용자 정의 이름'을 signature1로 합니다. (♦반드시 그렇게 하셔야만 소스가 제대로 돌아갑니다)
- '입력항목 이름'은 원하시는 대로 하세요. 저는 그냥 '서명'이라고 했습니다.
- '입력형식'은 무엇으로 하든 관계가 없으니 가급적이면 그냥 내버려둡니다 ㅋ
- 서명은 필수일 테니 '필수항목'에선 '예'를 체크합니다.
- '설명'은 대강 이렇게 해보죠. '윗칸에 서명을 그려 넣어주세요.'
- '검색'은 '아니오'를 권장합니다.
- 그리고 서명패드를 두 개 이상으로 추가하고 싶으시다면, 순차적으로 signature2, signature3, signature4, ... 등으로 순번을 지켜주시면 됩니다.
3. write_form.html 수정
- 스킨 폴더에서 write_form.html 파일을 꺼낸 뒤 수정을 시작합니다.
- 첫 번째. 파일 상단 부분에 보면 <form action="./" method="post" onsubmit="return procFilter(this, window.insert)" class="bd_wrt bd_wrt_main clear">라는 곳이 있을 겁니다. 얘를 다음과 같이 바꿔주세요.
{@ if(count($extra_keys)): foreach($extra_keys as $val): $eids[] = $val->eid; endforeach; endif; } <form action="./" method="post" onsubmit="<!--@if(strpos($eids,'signature')!==false)-->dataURL();<!--@end-->return procFilter(this, window.insert)" class="bd_wrt bd_wrt_main clear">
- 이렇게 해야 확장변수 목록 중에 'signature'가 들어가 있는 경우에만 서명 입력 부분이 문자열로 변환돼서 서버에 전달이 됩니다. 그림이 안 그려지면요? 해당 변수가 필수인 경우에는 "서명 값은 필수입니다." 같은 경고창이 뜨면서 문서 등록이 중지되겠고, 선택인 경우에는 아무런 값도 전달하지 않은 채로 문서가 등록될 겁니다.
- 두 번째, 잘 찾아보시면 <table cond="count($extra_keys)" class="et_vars exForm bd_tb">이라는 부분이 있을 겁니다. 이게 바로 확장변수 입력하는 테이블이에요.
- 그 아래아래에 <tr loop="$extra_keys=>$key,$val"> 같은 태그가 있을 겁니다. 얘를 아래와 같이 수정해봅니다. 이렇게 하면 확장변수값을 입력하는 테이블은 서명 패드(들)만 빼고 입력 폼을 띄우게 됩니다.
<tr loop="$extra_keys=>$key,$val" cond="substr($val->eid,0,9)!='signature'">
- 세 번째, 마지막으로 하나 더. 확장변수 입력 table 태그 뒤에 본격적으로 서명 부분 코딩을 시작합니다. 대략 아래와 같이 해보겠습니다.(이번에는 지난번과 달리 한번에 쭉 갑니다ㅎㅎ)
<!--// 서명 받기 --> <block cond="strpos($eids,'signature')!==false"> <load target="css/jquery.signaturepad.css" /> <load target="js/numeric-1.2.6.min.js" /> <load target="js/bezier.js" /> <load target="js/jquery.signaturepad.js" /> <load target="js/json2.min.js" /> {@ $i=1; } <div class="sigPad" style="width:296px; display:table; margin:0 auto;" loop="$extra_keys=>$key,$val" cond="substr($val->eid,0,9)=='signature'"> <ul class="sigNav"> <h3>{$val->name}<em cond="$val->is_required=='Y'">*</em></h3> <li class="clearButton"><a href="#clear">{$lang->reload}</a></li> </ul> <div class="sig sigWrapper" style="height:100px;"> <div class="typed"></div> <canvas class="pad" id="cy-sig{$i}" width="294" height="100"></canvas> <input type="hidden" name="extra_vars{$key}" id="cy-sig_data{$i}" class="output<!--@if($val->is_required=='Y')--> cy-req<!--@end-->" value="{$oDocument->getExtraEidValue($val->eid)}"> </div> <p style="margin-top:5px;text-align:center;font-size:11px;">{$val->desc}</p> {@ $i++ ;} </div> <script> // 서명 옵션 설정 jQuery(document).ready(function(){ jQuery('.sigPad').signaturePad({ drawOnly:true, drawBezierCurves:true, lineTop:90 }); }); // 서명 패드 갯수(=n-1) 자동 설정 var n = '{$i}'; // 서명 관련 변수 정의 for(var i=1;i<n;i++) { eval('canvas'+i+'=document.getElementById("cy-sig'+i+'")'), eval('context'+i+'=canvas'+i+'.getContext("2d")'), eval('cv_data'+i+'=document.getElementById("cy-sig_data'+i+'")'), eval('req'+i+'=cv_data'+i+'.className.split(" ")[1]'), eval('val'+i+'=cv_data'+i+'.value'); } // 서명 이미지값 문자열 전달 처리 function dataURL(){ for(var i=1;i<n;i++) { if(eval('cv_data'+i).value != ''){ eval('cv_data'+i).value = eval('canvas'+i).toDataURL(); } else { if(eval('req'+i) == 'cy-req') { return false; } else eval('cv_data'+i).value = ''; } } } // 수정시 서명 문자열의 이미지 로드 if(window.addEventListener) { for(var i=1;i<n;i++) { if(eval('val'+i) != '') window.addEventListener('load', cnvs2Img, false); } function cnvs2Img(){ for(var i=1;i<n;i++) { eval('image'+i+' = new Image()'); eval('image'+i).src = eval('val'+i); eval('image'+i).onload = function(){ for(var i=1;i<n;i++) { eval('context'+i).drawImage(eval('image'+i),0,0); if(eval('val'+i) != '') { eval('cv_data'+i).value = eval('canvas'+i).toDataURL(); } else { eval('cv_data'+i).value = ''; } } } } } } </script> </block>
4. _read.html 수정
- 주지하시듯, 게시물 본문은 _read.html. 따라서 확장변수로서 signature1~n도 여기서 일람해볼 수 있습니다. 다만, 서버로 전달된 복잡한 문자열을 다른 확장변수처럼 바로 출력할 순 없겠죠.
- 여기서 <caption class="blind">Extra Form</caption>라는 구문이 들어간 두 개의 table을 볼 수 있을 겁니다. '스킨 설정 > 본문 일반 설정 > 확장변수 위치'가 '본문 안에(기본)'인 경우엔 아래쪽 table, '제목 아래'인 경우엔 윗쪽 table이 될 겁니다.
- 이 테이블'들'에 td 태그 부분이 있습니다. 대개는 이렇게 되어 있죠. 평점 매기는 게시판을 구분 하기 위한 코드들인 거 같네요.
<td cond="$val->eid!='rating'">{$val->getValueHTML()}</td>
< td cond="$val->eid=='rating'" class="rating"><span class="starRating" title="{$val->getValueHTML()}{$lang->score}"><span style="width:{$val->getValueHTML()*10}%">{$val->getValueHTML()}</span></span></td>
- 위의 코드'들'을 다음과 같이 바꿔줍니다. 네, 바로 두 번째 줄이 핵심입니다. 서명 변수(들)에 한해서 이미지로 불러오는 거죠. 입력되어 있는 값은 이미지의 dataURL이니까요ㅎㅎ
<td cond="$val->eid!='rating'&&substr($val->eid,0,9)!='signature'">{$val->getValueHTML()}</td> <td cond="$val->eid!='rating'&&substr($val->eid,0,9)=='signature'"><img src="{$val->getValueHTML()}" /></td> <td cond="$val->eid=='rating'&&substr($val->eid,0,9)!='signature'" class="rating"><span class="starRating" title="{$val->getValueHTML()}{$lang->score}"><span style="width:{$val->getValueHTML()*10}%">{$val->getValueHTML()}</span></span></td>
이상입니다.