메뉴 건너뛰기

xe 현 화면에서 각 모듈의 fuction 활용하기

Average Rating:
9.0/10 1명 참여
Rate this page:
익명 (9)  
평점 한줄평 글쓴이 작성날짜
9
0 (-50939) 02/02 19:27

xe는 다양한 모듈이 조합되어 하나의 화면을 표현해 냅니다.


일반적으로 화면의 변화는 각 모듈의 view.php에 브라우저 페이지 주소의 변수에 의해 결정됩니다.

즉, 리프레시(화면전환)를 해야합니다.

이런 방식이라면 각 모듈의 php 파일을 열어서 일부 코드를 살짝 변경하여 원하는 화면이 출력되도록 하면 됩니다.

그러나 현재 페이지에서 자바스크립트(JQuery)의 append() 함수나 html() 함수를 사용한다면 화면전환이라는 과정을 건너 뛸 수 있습니다.


모니터에 xe 게시판의 글목록 1페이지 화면을 보고 있다고 가정합니다.

이때 마우스 스크롤 휠을 아래로 휙휙 돌리면 2페이지의 화면이 화면전환 없이 현재화면의 아래에 연결되어 나온다면 어떨까요?

구글 앨범이나 유투브에서 흔히 보는 기능이죠.


이런 식으로 확실히 특별한 기능을 추가하기 위해서는

시작과 과정 그리고, 결과의 과정이 있어야 합니다.

하나하나 그림을 그려 봅시다.





현재의 화면에서 화면전환 없이 어떤 동작을 실행하려면 javascript의 도움 외에는 길이 없습니다!!!!!


즉, 현재 화면이 표시되는 곳에 원하는 자바스크립트 함수를 하나 만들어 두어야 합니다.


평범함 버튼 형식이든 키보드와 마우스를 통하든 아래와 같은 함수를 실행합니다.


get_book_record.js


function get_book_record(bn){

}


그 다음 위의 함수는 xe/modules/ 폴더에 있는 여러 모듈에서 어떤 기능을 사용하겠다는 내용을 코딩합니다.

이때 PHP의 함수를 사용하게 될텐데 자바스크립트의 ajax 기능을 통해서 변수값을 주고 받아야 합니다.


자바스크립트의 어떤 함수를 실행 -> php파일(단독 또는 모듈 등)에 변수값 전송 -> php 실행후 결과값을 처음의 자바스크립트 함수에게 리턴 -> 자바스크립트 함수로 리턴값을 황용




get_book_record.js


function get_book_record(bn){

 var search_url = 'http://google.com';
 var formData = {search_url:search_url, var1,'1samonline'}; // 포스트로 php에 건네줄 배열형식의 변수 목록
  var request = jQuery.ajax({ //ajax 기능 시작!!!
  url: './modules/sample/book.php', //변수값을 받을 php파일
  type: 'POST',
  dataType: 'json', //리턴되어 올 값의 형식
  data: formData, // php파일에 보낼 변수 목록
  success: function(result){ //result 변수에는, php파일의 실행후 그 결과값이 있으면 json형식으로 리턴됩니다.
    jQuery("#result").html(result.ok); // 각종 원하는대로 후처리
    jQuery('.collapse').collapse();
   },
  global:false,
  cache:false,
  headers: { "cache-control": "no-cache","pragma": "no-cache" },
  async:false,
  async:false,
  error: function(){ alert(result);} // 본 함수가 php와 제대로 전송이 이루어지지 않았을 경우
 });

}



이제 book.lib.php 파일이 무엇을 하는 것인지 알아보겠습니다.


<?php

define('__XE__', true); //이 줄과 다음 줄은 필요가 없으나 순수한 외부 페이지일 경우에는 필요할 것 같음.
include_once '/config/config.inc.php';

$oContext = &Context::getInstance(); //이 줄과 다음 줄을 포함하면 제대로 변수 호출이 가능함.
$oContext->init();


$url = Context::get('search_url'); // ajax를 통해 건너오는 변수명의 값을 받아옴.

$name = Context::get('var1');


위와 같이 xe 스크립트 함수를 활용하여 변수값을 받아올 수 있습니다.

변수값을 주고 받는 것이 불필요할 수도 있습니다.

xe의 다양한 모듈 중에 위의 Context::get() 코드가 들어 있는 함수가 있다면, 그 기능을 바로 활용할 수 있겠죠.

그런데 xe모듈 대부분이 초기화 함수인 init() 함수가 php 각 파일에 포함되어 있고 또한 실행되어야 제대로 작동합니다.


대부분 DB의 값을 불러온다든지 DB에 값을 저장하는 기능을 많이 선호할 것 같습니다.


뭐 여기까지 이해하셨다면 나머지는 식은죽먹기나 다름 없죠.


 echo json_encode(array('ok' => $output));


마지막에 위와 같이 echo로 마무리합니다.

자바스크립트 함수는 이 echo값을 result로 받습니다.

그런데 왜 return이 아닐까요? 그건 ajax의 값 송수신 방식이기 때문입니다.

이 부분만 주의하면 됩니다.



이리하여 처음의 자바스크립트 함수는 php가 돌려준 값을 이용할 수 있습니다.

그리고 그 값을 재편집하여 jQuery의 append() 또는 html()로 현재 화면에 반영합니다.

제목 날짜
Star Rating 별점 위젯 업데이트 정보   2014.03.09
modules/editor/tpl.js/uploader.js  
Zeroclipboard 적용하기   file
    10
xe jQuery 최신버전 사용하기 CDN  
    10
http://www.bootstrapcdn.com/   file
태그 목록