북마크 모듈 만들어 보기 (예제)

북마크 모듈을 만들어 보는 것을 예제로 하여 모듈 제작을 위한 일반적인 상황에 대해서 소개드립니다.

예제 다운 받기 : bookmark.tar

북마크 기능을 위한 DB Schema 작성

북마크 모듈의 경우 게시판 모듈등고 다르게 북마크 기능을 위한 별도의 DB 테이블을 이용하도록 합니다.

먼저 원하는 DB Schema를 작성해 봅니다.

column	type	index
bookmark_srl	int(11)	primary key
link	varchar(255)
title	varchar(255)
description	longtext

단순히 제목, 링크, 설명만 이용할 것이라 위와 같은 schema로 table을 작성합니다.

 

 

모듈을 만들기 위한 기본 뼈대 만들기

북마크 모듈의 경우 스킨이나 관리 기능이 없이 매우 간단하게 만들것이라 다음과 같은 파일들이 필요합니다.

 

modules

• bookmark

  • conf

    • info.xml : 모듈의 정보
    • module.xml : 모듈의 Action 명세

  • queries

    • getBookmarkList.xml : bookmark table에서 북마크 정보를 가져오는 XML Query
    • insertBookmark.xml : bookmark table에 북마크 정보를 입력하는 XML Query

  • schemas

    • bookmark.xml : bookmark table schema가 선언된 XML Query

  • tpl

    • filter

      • insert_bookmark.xml : 북마크를 등록하기 전에 실행되는 JS Filter

    • js

      • bookmark.js : 북마크가 등록후 사용될 callback_func 정의 javascript 파일
  • bookmark.controller.php : 북마크의 등록 Action이 구현된 파일
  • bookmark.class.php : 북마크의 상위 클래스
  • bookmark.view.php : 북마크 목록을 보고 입력폼을 보여줄 파일

모듈의 정보 출력 - conf/info.xml

위와 같이 conf/info.xml 파일을 생성하면 모듈의 정보를 관리자는 쉽게 파악할 수 있습니다.

 

모듈의 Action 명세 - conf/module.xml

위의 그림에서 dispBookmarkList 라는 Action을 정의해 놓았습니다.

이 dispBookmarkList Action은 view type 이고 모듈 호출시 index로 동작하고 모듈의 mid 가 없어도 동작할 수 있는 특징을 가지도록 선언되어 있습니다.

 

bookmark 테이블 schema의 XE XML Query로 작성

위에서 작성한 테이블 schema는 아래와 같이 XML Query문으로 작성할 수 있습니다.

위 XML 파일을 ./modules/bookmark/schemas/테이블이름.xml 파일로 저장하면 XE의 설치시 혹은 XE 모듈 관리 페이지에서 이 XML 을 지정된 DBMS의 table 로 생성하여 줍니다.

mysql에서는 위와 같은 XML Query가 아래와 같이 생성이 됩니다.

 

북마크 목록을 가져오는 Query 작성

위에서 생성한 테이블에서 select query를 수행하는 XE의 XML Query입니다.

특히 navigation이라는 지시어를 통해서 페이징을 쉽게 수행할 수 있게 되어 있습니다.

 

북마크 정보를 bookmark 테이블이 입력하는 Query 작성

위의 XML Query는 bookmark테이블에 제목, 링크, 설명을 입력하는 쿼리문을 작성하는 XML Query입니다.

물론 북마크의 고유 번호인 bookmark_srl도 입력을 합니다.

참고로 XE에서는 getNextSequence()를 통해서 절대 고유한 sequence값을 이용하고 이 값을 모든 정보의 고유 번호로 사용하여 서로 다른 모듈일지라도 겹치지 않도록 하고 있습니다.

 

bookmark.class.php 제작

bookmark 모듈의 최상위 클래스이자 bookmark모듈의 설치나 차후 업그레이드가 있을 경우 업그레이드 기능등이 있는 bookmark.class.php파일을 제이 먼저 제작해야 합니다.

예제로 만드는 북마크 모듈은 설치/ 업데이트/ 캐시파일 청소/ 권한 설정등의 아무런 동작이 없습니다.

다만 checkUpdate() 의 경우 모듈 관리시 무조건 호출하는 method이기에 선언만 해 놓은 상황입니다.

 

bookmark.view.php 제작 테스트

북마크 모록을 보여주고 입력폼도 보여주는 view class를 제작합니다.

아직은 테스트를 위해 간단히 bookmark_list.html 이라는 템플릿 파일만 지정하는 코드만 만들어 봅니다.

bookmarkView::dispBookmarkList()라는 method는 ./conf/module.xml에 Action으로 정의 되어 있어야 합니다.

Action 이름과 동일한 method가 실행이 됩니다.

 

./tpl/bookmark_list.html 제작

bookmark view class의  dispBookmarkList()에서 지정한 bookmark_list 파일을 생성합니다.

1. <p>hello world!</p>

./tpl/bookmark_list.html 파일에 간단히 위의 내용만 입력하여 호출을 해보았습니다.

(위의 seungyeop.kr 도메인은 이 문서를 제작한 XE 프로젝트 매니저중 한분인 한승엽님의 개인 사이트입니다)

hello world! 라는 문구가 브라우저에서 나타나면 제대로 제작하고 있는 것입니다.

 

bookmark.view.php에 DB Query를 추가하여 실제 동작 코드 완성

위에서 제작한 getBookmarkList.xml 이라는 XML Query를 이용하여 결과를 구해 Context::set() 하는 코드가 포함되어 있습니다.

 

./tpl/bookmark_list.html의 북마크 목록 완성

일단 모듈 개발 예제이기 때문에 다국어 기능을 사용하지 않았습니다.

 

./tpl/bookmark_list.html의 북마크 등록 폼 추가

등록을 위한 XE의 XML Js Filter와 Callback Function이 정의된 js 파일을 import 하는 템플릿 문법을 사용합니다.

간단히 table 안에 form문을 추가하였습니다.

 

insert_bookmark.xml 필터 제작

XE에서 XML JS Filter는 폼(form)을 검수하고 form내에서 필요한 변수들을 이용하여 AJAX 통신을 통해 controller를 호출하는 용도로 쓰입니다.

간편하게 폼 검수 및 AJAX 연동이 되는 편리한 기능입니다.

 

북마크 등록후 호출된 Javascript Callback Function 제작

보통 XML Js Filter를 이용해 AJAX로 서버 요청을 하게 되면 결과의 처리는 Javascript function으로 마무리를 합니다.

insert_bookmark.xml 필터에서 callback_func으로 정의된 javascript 함수를 XE는 호출을 하기에 이 함수를 선언해 놓습니다.

서버에서 전송한 메세지를 출력하고 페이지 리로드 하는 기능입니다.

 

bookmark.controller.php에서 북마크 등록

이제 form과 XML JS Filter를 통해 bookmark테이블에 데이터를 입력하는 controller class를 구현할 차례입니다.

위에서 정의한 insertBookmark.xml 이라는 XML Query로 쉽게 입력할 수 있습니다.

 

예제 마무리

북마크 모듈을 예제로 만들어 보았는데 사실 설명을 많이 달지 못했습니다.

첨부된 bookmark.tar을 다운받으시고 하나 하나 위의 설명과 비교하시면서 XE의 모듈 제작에 대한 감을 잡기를 바랍니다.

이 예제는 XE 오픈 소스 프로젝트의 매니저중 1인인 한승엽님(haneul03)님께서 2008년 7월 28일 XE 1차 모임때 발표하셨던 자료를 옮긴 것입니다.

    * 발표 내용 동영상 보기 : http://www.xpressengine.com/17103019

 

출처 xe 메뉴얼