main이 되는 Frame 화면의 메뉴 부분을 함수로 만드는 부분은 사실 효용성이 크지 않을 수 있다. 왜냐하면 frame은 한 사이트 내에서 대부분 하나 정도만 차지하고 tree menu와 같이 반복적인 부분은 그렇게 많지 않기 때문이다.
사이트의 내용이 정보 조회가 많은 금융 사이트인 경우 조회되는 대부분의 내용은 grid, chart 등으로 화면에 표시한다. 이 때 grid와 chart를 하나씩 개발하는 경우 많은 인력과 시간이 소요되며 유사한 grid를 여러 페이지에 걸쳐서 복사&붙여넣기(Copy&Pate)하는 것 또한 쉬운 일은 아니다.
이런 경우 역시 php로 공통함수를 개발함으로써 복잡한 문제를 일정부분 쉽게 해결할 수 있다.
먼저 common.php란 공통 파일을 하나 만든다. grid.php나 chart.php로 분리해서 따로따로 만들어도 상관없다. 어짜피 화면에는 호출한 함수 부분만 포함되기 때문이다.
common.php
<?php
// grid를 화면에 뿌려주는 함수
// gridName : Unique한 gridName
// dataURL : ajax로 데이터를 호출하기 위한 URL 주소(실제 데이터는 당연히 ajax로 받아와야 한다)
// header1 : grid의 header(컬럼명) 1은 가장 윗줄
// header2 : grid의 두번째 header(컬럼명), 첫번째와 두번째가 동일하면 하나의 cell로 merge된다. header2가 null이면 두번째 컬럼은 보이지 않는다.
// columnWidth : 배열형태로 받는 각 컬럼의 넓이
// datafield : 서버로부터 수신해서 첫번째 컬럼별부터 보여줄 field명 (json형태로 데이터를 받을 것이므로 field명을 반드시 써야한다.)
// align : 배열형태로 받는 각 컬럼별 정렬 방식(left, center, right)
// targetid : grid를 화면에 위치하기 위한 element id. 해당 element에 overriding한다.
// gridHeight : grid 전체의 높이
// autoload : 처음 grid생성시 데이터를 loading할 것인지 여부. string형태.
function GridType1($gridName, $dataURL, $header1, $header2, $columnWidth, $datafield, $align, $targetid, $gridHeight, $autoload="false")
{
?>
Ext.onReady(function(){
Ext.define('<?=$gridName?>',{
extend: 'Ext.data.Model',
proxy: {
type: 'ajax',
reader: 'json'
},
fields: [ <?
$arr_count = count($datafield);
for ( $i = 0; $i < $arr_count; $i++ ) {
echo "'". $datafield[$i] . "'";
if ( $i < $arr_count - 1) echo ","; } ?> ]
});
// create the Data Store
var store = Ext.create('Ext.data.Store', {
model: '<?=$gridName?>',
autoLoad: <?=$autoload?>,
proxy: {
type: 'ajax',
url: '<?=$dataURL?>',
reader: {
type: 'json'
}
}
});
// create the grid
Ext.create('Ext.grid.Panel', {
id: '<?=$gridName?>',
store: store,
columnLines: true, // check....
font: '10px',
cls: 'grid-row-span',
columns: [ <?
if ( count($header1) == count($header2) ) {
$header_count = count($header1);
for ( $i = 0; $i < $header_count; $i++ ) { if ( strcmp($header1[$i], $header2[$i] ) != 0 || ($i > 0 && strcmp($header1[$i-1], $header1[$i] ) == 0) ||
($i+1 < $header_count && strcmp($header1[$i+1], $header1[$i] ) == 0 )) { echo "{text: '{$header1[$i]}',\n"; echo " columns: [\n"; while ( $header_count > $i && strcmp($header1[$i+1], $header1[$i]) == 0) {
echo "{text: '{$header2[$i]}', style:'text-align:center', align:'".$align[$i]."', width:{$columnWidth[$i]}, minWidth:{$columnWidth[$i]}, autoSizeColumn: true, dataIndex:'{$datafield[$i]}'}";
if ( $header_count > $i+1 && strcmp($header1[$i+1], $header1[$i]) == 0 )
echo ",";
$i++;
}
echo "{text: '{$header2[$i]}', style:'text-align:center', align:'".$align[$i]."', width:{$columnWidth[$i]}, minWidth:{$columnWidth[$i]}, autoSizeColumn: true, dataIndex:'{$datafield[$i]}'}";
echo "]\n";
echo "}\n";
}
else {
echo "{text: '{$header1[$i]}', style:'text-align:center', align:'".$align[$i]."', width:{$columnWidth[$i]}, minWidth:{$columnWidth[$i]}, autoSizeColumn: true, dataIndex:'{$datafield[$i]}'}";
}
if ( $i < $header_count - 1 ) echo ",\n";
}
}
else if (count($header2) == 0 ) {
$header_count = count($header1);
for ( $i = 0; $i < $header_count; $i++ ) {
echo "{text: '{$header1[$i]}', style:'text-align:center', align:'".$align[$i]."', width:{$columnWidth[$i]}, minWidth:{$columnWidth[$i]}, autoSizeColumn: true, dataIndex:'{$datafield[$i]}'}";
if ( $i < $header_count - 1 ) echo ",\n"; } } ?>
],
renderTo:'',
height: ,
layout: 'fit',
viewConfig: { /* check... */
stripeRows: true,
listeners: {
refresh: function(dataview) {
Ext.each(dataview.panel.columns, function(column) {
if (column.autoSizeColumn === true)
column.autoSize();
})
}
}
}
});
});
<? }
?>
실제로 grid는 표현하는 데이터에 따라서 약간씩 모양이 달라질 수 있으므로 하나의 grid만 사용할 수는 없다. 따라서 gridType1, 2, 3 등으로 서로 다른 이름을 주었다.
이제 이렇게 공통으로 정의된 library를 화면 파일에서 호출만 하면 된다.
SGAMS_1230_SUB.php
<?
include 'AMS_top.php';
include '../lib/mssql.php';
include '../lib/common.php';
$conn_ms = ms_dbconn();
?>
<script type="text/javascript">
<?
$header1 = array('일자', '운용규모', '운용규모','운용규모', '기간수익률', '기간수익률'); $header2 = array('일자', '매수', '매도','평가금액', '수익률', '누적수익률');
$columnWidth = array(150, 150, 150, 150, 150, 150 );
$datafield = array('field0', 'field1', 'field2', 'field3', 'field4', 'field5');
$align = array('center', 'right', 'right', 'right', 'right', 'right');
$dataUrl1 = "reply.php?peGrp=A&FromDate=2013-01-04";
// Grid함수를 호출하는 부분
GridType1('Grid2', $dataUrl1, $header1, $header2, $columnWidth, $datafield, $align, 'grid-main2', 200);
?>
function onClick();
...
이 grid는 가로 또는 세로로 헤더 내에 동일한 텍스트가 있으면 merge가되는 구조로 되어 있어서 header가 2개의 array로 정의되어 있다. 그리고 각 column width도 array로 입력 받도록 하였으며, 각 셀별 정렬기준인 align도 array로 입력 받는다.
여기서 datafield array가 있는데 이는 각 grid의 실제 내용을 ajax로 조회해서 조회 결과를 grid내 column에 뿌릴 때 column들과 ajax의 json 구조와 일치시키기 위한 부분이다. 즉, server side에서 조회된 결과가 json으로 화면에 뿌려지는데 이 때 조회 결과의 json header와 각 column을 매치시키기 위해 사용한다.
이 때 서버측(ajax에 응답하는 서버)
client server presentation layer : grid(column1, column2, column3...) data layer : data model(field1, field2, field3...) dbms(field1, field2, field3...) data : ajax(json: field1, field2, field3...) <-----------------> reply.php(json : field1, field2, ...)
reply.php 결과
[{"id":"RISKA001","field1":"전체자금(잡비포함)","field2":"N","field3":"2010-01-01","field4":"2013-12-31","field5":"","field6":"","field7":0,"field8":""},
{"id":"RISKA002","field1":"전체자금(잡비제외)","field2":"N","field3":"2010-01-01","field4":"2013-12-31","field5":"","field6":"","field7":0,"field8",""},
{"id":"RISKA003","field1":"수입","field2":"N","field3":"2010-01-01","field4":"2013-12-31","field5":"","field6":"","field7":0,"field8":""},
{"id":"RISKA004","field1":"매출","field2":"N","field3":"2010-01-01","field4":"2013-12-
서버측에서 데이터를 보내주는 프로그램은 데이터를 json으로 보내준다.
즉 서버 -> json -> 전송 -> web brower -> json -> ajax 엔진 -> javascript -> grid 의 흐름을 보인다.
json은 php에 구현되어 있는 기본 기능이며 string으로 데이터를 보낼 수 있는 경량화된 좋은 프로토콜이다. 단, 숫자와 문자열에 대한 구분을 혼동하지 않도록 해야 한다.
개념이 조금 어려울 수도 있는데 직접 구현해서 실행한 다음 화면에서 소스보기를 선택해서 보면 grid의 field array 파라미터가 화면에 어떻게 매핑되는 지 쉽게 확인할 수 있다.