<h3>북마크 모듈 만들어 보기 (예제)</h3>
<p>북마크 모듈을 만들어 보는 것을 예제로 하여 모듈 제작을 위한 일반적인 상황에 대해서 소개드립니다.</p>
<p>예제 다운 받기 : <a href="http://www.xpressengine.com/?module=file&act=procFileDownload&file_srl=18180605&sid=6e85c42bdee7720efce6d30a225fa408" title="bookmark.tar" class="attachment">bookmark.tar</a></p>
<h3>북마크 기능을 위한 DB Schema 작성</h3>
<p>북마크 모듈의 경우 게시판 모듈등고 다르게 북마크 기능을 위한 별도의 DB 테이블을 이용하도록 합니다.</p>
<p>먼저 원하는 DB Schema를 작성해 봅니다.</p>
<table class="datatable">
<thead>
<tr>
<th>column</th>
<th>type</th>
<th>index</th>
</tr>
</thead>
<tbody>
<tr>
<td>bookmark_srl</td>
<td>int(11)</td>
<td>primary key</td>
</tr>
<tr>
<td>link</td>
<td>varchar(255)</td>
<td> </td>
</tr>
<tr>
<td>title</td>
<td>varchar(255)</td>
<td> </td>
</tr>
<tr>
<td>description</td>
<td>longtext</td>
<td> </td>
</tr>
</tbody>
</table>
<p>단순히 제목, 링크, 설명만 이용할 것이라 위와 같은 schema로 table을 작성합니다.</p>
<p> </p>
<p> </p>
<h3>모듈을 만들기 위한 기본 뼈대 만들기</h3>
<p>북마크 모듈의 경우 스킨이나 관리 기능이 없이 매우 간단하게 만들것이라 다음과 같은 파일들이 필요합니다.</p>
<p> </p>
<p><strong>modules</strong></p>
<ul class="arrowListType">
<li>
<p><strong>bookmark</strong></p>
<ul>
<li>
<p><strong>conf</strong></p>
<ul class="pageListType">
<li><strong>info.xml</strong> : 모듈의 정보</li>
<li><strong>module.xml</strong> : 모듈의 Action 명세</li>
</ul>
</li>
<li>
<p><strong>queries</strong></p>
<ul class="pageListType">
<li><strong>getBookmarkList.xml</strong> : bookmark table에서 북마크 정보를 가져오는 XML Query</li>
<li><strong>insertBookmark.xml</strong> : bookmark table에 북마크 정보를 입력하는 XML Query</li>
</ul>
</li>
<li>
<p><strong>schemas</strong></p>
<ul class="pageListType">
<li><strong>bookmark.xml</strong> : bookmark table schema가 선언된 XML Query</li>
</ul>
</li>
<li>
<p><strong>tpl</strong></p>
<ul>
<li>
<p><strong>filter</strong></p>
<ul class="pageListType">
<li><strong>insert_bookmark.xml</strong> : 북마크를 등록하기 전에 실행되는 JS Filter</li>
</ul>
</li>
<li>
<p><strong>js</strong></p>
<ul class="pageListType">
<li><strong>bookmark.js</strong> : 북마크가 등록후 사용될 callback_func 정의 javascript 파일</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="pageListType">
<li><strong>bookmark.controller.php</strong> : 북마크의 등록 Action이 구현된 파일</li>
<li><strong>bookmark.class.php</strong> : 북마크의 상위 클래스</li>
<li><strong>bookmark.view.php</strong> : 북마크 목록을 보고 입력폼을 보여줄 파일</li>
</ul>
</li>
</ul>
<h3>모듈의 정보 출력 - conf/info.xml</h3>
<p><img title="info.xml.png" class="attachment" src="./files/attach/images/18093223/602/180/018/999766_info.xml.png" alt="info.xml.png" /></p>
<p>위와 같이 conf/info.xml 파일을 생성하면 모듈의 정보를 관리자는 쉽게 파악할 수 있습니다.</p>
<p> </p>
<h3>모듈의 Action 명세 - conf/module.xml</h3>
<p><img title="module.xml.png" class="attachment" src="./files/attach/images/18093223/602/180/018/999772_module.xml.png" alt="module.xml.png" /></p>
<p>위의 그림에서 dispBookmarkList 라는 Action을 정의해 놓았습니다.</p>
<p>이 dispBookmarkList Action은 view type 이고 모듈 호출시 index로 동작하고 모듈의 mid 가 없어도 동작할 수 있는 특징을 가지도록 선언되어 있습니다.</p>
<p> </p>
<h3>bookmark 테이블 schema의 XE XML Query로 작성</h3>
<p>위에서 작성한 테이블 schema는 아래와 같이 XML Query문으로 작성할 수 있습니다.</p>
<p><img title="schema.xml.png" class="attachment" src="./files/attach/images/18093223/602/180/018/999776_schema.xml.png" alt="schema.xml.png" /></p>
<p>위 XML 파일을 ./modules/bookmark/schemas/테이블이름.xml 파일로 저장하면 XE의 설치시 혹은 XE 모듈 관리 페이지에서 이 XML 을 지정된 DBMS의 table 로 생성하여 줍니다.</p>
<p>mysql에서는 위와 같은 XML Query가 아래와 같이 생성이 됩니다.</p>
<p><img title="schema.png" class="attachment" src="./files/attach/images/18093223/602/180/018/999778_schema.png" alt="schema.png" /></p>
<p> </p>
<h3>북마크 목록을 가져오는 Query 작성</h3>
<p><img title="getBookmarklist.xml.png" class="attachment" src="./files/attach/images/18093223/602/180/018/999780_getBookmarklist.xml.png" alt="getBookmarklist.xml.png" /></p>
<p>위에서 생성한 테이블에서 select query를 수행하는 XE의 XML Query입니다.</p>
<p>특히 navigation이라는 지시어를 통해서 페이징을 쉽게 수행할 수 있게 되어 있습니다.</p>
<p> </p>
<h3>북마크 정보를 bookmark 테이블이 입력하는 Query 작성</h3>
<p><img title="insertBookmark.png" class="attachment" src="./files/attach/images/18093223/602/180/018/999782_insertBookmark.png" alt="insertBookmark.png" /></p>
<p>위의 XML Query는 bookmark테이블에 제목, 링크, 설명을 입력하는 쿼리문을 작성하는 XML Query입니다.</p>
<p>물론 북마크의 고유 번호인 bookmark_srl도 입력을 합니다.</p>
<p>참고로 XE에서는 getNextSequence()를 통해서 절대 고유한 sequence값을 이용하고 이 값을 모든 정보의 고유 번호로 사용하여 서로 다른 모듈일지라도 겹치지 않도록 하고 있습니다.</p>
<p> </p>
<h3>bookmark.class.php 제작</h3>
<p>bookmark 모듈의 최상위 클래스이자 bookmark모듈의 설치나 차후 업그레이드가 있을 경우 업그레이드 기능등이 있는 bookmark.class.php파일을 제이 먼저 제작해야 합니다.</p>
<p><img title="bookmark.class.png" class="attachment" src="./files/attach/images/18093223/602/180/018/999786_bookmark.class.png" alt="bookmark.class.png" /></p>
<p>예제로 만드는 북마크 모듈은 설치/ 업데이트/ 캐시파일 청소/ 권한 설정등의 아무런 동작이 없습니다.</p>
<p>다만 checkUpdate() 의 경우 모듈 관리시 무조건 호출하는 method이기에 선언만 해 놓은 상황입니다.</p>
<p> </p>
<h3>bookmark.view.php 제작 테스트</h3>
<p>북마크 모록을 보여주고 입력폼도 보여주는 view class를 제작합니다.</p>
<p><img title="bookmark.view.png" class="attachment" src="./files/attach/images/18093223/602/180/018/999788_bookmark.view.png" alt="bookmark.view.png" /></p>
<p>아직은 테스트를 위해 간단히 bookmark_list.html 이라는 템플릿 파일만 지정하는 코드만 만들어 봅니다.</p>
<p>bookmarkView::dispBookmarkList()라는 method는 ./conf/module.xml에 Action으로 정의 되어 있어야 합니다.</p>
<p>Action 이름과 동일한 method가 실행이 됩니다.</p>
<p> </p>
<h3>./tpl/bookmark_list.html 제작</h3>
<p>bookmark view class의 dispBookmarkList()에서 지정한 bookmark_list 파일을 생성합니다.</p>
<ol class="code">
<li><p>hello world!</p></li>
</ol>
<p>./tpl/bookmark_list.html 파일에 간단히 위의 내용만 입력하여 호출을 해보았습니다.</p>
<p><img title="tpl_test.png" class="attachment" src="./files/attach/images/18093223/602/180/018/999796_tpl_test.png" alt="tpl_test.png" /></p>
<p>(위의 seungyeop.kr 도메인은 이 문서를 제작한 XE 프로젝트 매니저중 한분인 한승엽님의 개인 사이트입니다)</p>
<p>hello world! 라는 문구가 브라우저에서 나타나면 제대로 제작하고 있는 것입니다.</p>
<p> </p>
<h3>bookmark.view.php에 DB Query를 추가하여 실제 동작 코드 완성</h3>
<p><img title="bookmark.view2.png" class="attachment" src="./files/attach/images/18093223/602/180/018/999798_bookmark.view2.png" alt="bookmark.view2.png" /></p>
<p>위에서 제작한 getBookmarkList.xml 이라는 XML Query를 이용하여 결과를 구해 Context::set() 하는 코드가 포함되어 있습니다.</p>
<p> </p>
<h3>./tpl/bookmark_list.html의 북마크 목록 완성</h3>
<p><img title="view.html.png" class="attachment" src="./files/attach/images/18093223/602/180/018/999802_view.html.png" alt="view.html.png" /></p>
<p>일단 모듈 개발 예제이기 때문에 다국어 기능을 사용하지 않았습니다.</p>
<p> </p>
<h3>./tpl/bookmark_list.html의 북마크 등록 폼 추가</h3>
<p>등록을 위한 XE의 XML Js Filter와 Callback Function이 정의된 js 파일을 import 하는 템플릿 문법을 사용합니다.</p>
<p><img title="insert1.png" class="attachment" src="./files/attach/images/18093223/602/180/018/999810_insert1.png" alt="insert1.png" /></p>
<p>간단히 table 안에 form문을 추가하였습니다.</p>
<p><img title="insert2.png" class="attachment" src="./files/attach/images/18093223/602/180/018/999812_insert2.png" alt="insert2.png" /></p>
<p> </p>
<h3>insert_bookmark.xml 필터 제작</h3>
<p>XE에서 XML JS Filter는 폼(form)을 검수하고 form내에서 필요한 변수들을 이용하여 AJAX 통신을 통해 controller를 호출하는 용도로 쓰입니다.</p>
<p>간편하게 폼 검수 및 AJAX 연동이 되는 편리한 기능입니다.</p>
<p><img title="filter.png" class="attachment" src="./files/attach/images/18093223/602/180/018/999816_filter.png" alt="filter.png" /></p>
<p> </p>
<h3>북마크 등록후 호출된 Javascript Callback Function 제작</h3>
<p>보통 XML Js Filter를 이용해 AJAX로 서버 요청을 하게 되면 결과의 처리는 Javascript function으로 마무리를 합니다.</p>
<p>insert_bookmark.xml 필터에서 callback_func으로 정의된 javascript 함수를 XE는 호출을 하기에 이 함수를 선언해 놓습니다.</p>
<p><img title="callback.png" class="attachment" src="./files/attach/images/18093223/602/180/018/999818_callback.png" alt="callback.png" /></p>
<p>서버에서 전송한 메세지를 출력하고 페이지 리로드 하는 기능입니다.</p>
<p> </p>
<h3>bookmark.controller.php에서 북마크 등록</h3>
<p>이제 form과 XML JS Filter를 통해 bookmark테이블에 데이터를 입력하는 controller class를 구현할 차례입니다.</p>
<p><img title="insert.controller.png" class="attachment" src="./files/attach/images/18093223/602/180/018/999822_insert.controller.png" alt="insert.controller.png" /></p>
<p>위에서 정의한 insertBookmark.xml 이라는 XML Query로 쉽게 입력할 수 있습니다.</p>
<p> </p>
<h3>예제 마무리</h3>
<p>북마크 모듈을 예제로 만들어 보았는데 사실 설명을 많이 달지 못했습니다.</p>
<p>첨부된 <a href="http://www.xpressengine.com/?module=file&act=procFileDownload&file_srl=18180605&sid=6e85c42bdee7720efce6d30a225fa408" title="bookmark.tar" class="attachment">bookmark.tar</a>을 다운받으시고 하나 하나 위의 설명과 비교하시면서 XE의 모듈 제작에 대한 감을 잡기를 바랍니다.</p>
<p>이 예제는 XE 오픈 소스 프로젝트의 매니저중 1인인 <a href="http://www.seungyeop.kr" class="external newWindow" title="http://www.seungyeop.kr">한승엽님(haneul03)</a>님께서 2008년 7월 28일 XE 1차 모임때 발표하셨던 자료를 옮긴 것입니다.</p>
<ul>
<li>발표 내용 동영상 보기 : <a href="http://www.zeroboard.com/17103027"></a><a href="http://www.zeroboard.com/17103027"></a><a href="http://www.zeroboard.com/17103027" class="external newWindow" title="http://www.zeroboard.com/17103027">http://www.zeroboard.com/17103027</a></li>
</ul>
<p> </p>
<p> </p>