PHP – EasyUI DataGrid 资料存取标准化
延续上篇 PHP – EasyUI DataGrid 资料存的方式 ，本篇将上篇其中资料存取的 dal_user.php 予以标准化，藉由标准化的 dal 才能将知识传承下去并可将程式撰写的方式标准化下来。一般我们要将程式撰写的方式标准化，都会撰写程式撰写规范文件的方式，来告诉开发人员要如何来撰写程式。
接下来，要来定义 DAL 的 interface，也就是设定 DAL 标准该有的介面有哪些（有关本文所讲述 DAL 的概念，读者 可参阅 PHP – 架構設計 Data Access Layer 篇，看过以后会更容易了解本文所说的概念），介面说明如下。
首先，要能实现之前在 PHP – EasyUI DataGrid 资料存的方式 中 type 所定义的四个动作
add 新增
mod 修改
del 删除
data 取得资料
这些 都要能有对应的资料处理介面，而这四个动作，也都跟业务逻辑没有关联，所以算是很单纯的资料存取，很容易就能写出，标准化介面如下所示：
IDAL.php
View Code
1 <?php
2
3 /**
4 * @file IDAL.php
5 * @brief 設定 DAL 標準該有的介面
6 * @author watson
7 * @version 1.0
8 * @date 2012-10-05
9*/
10 interface IDAL
11 {
12 /**
13 * @brief 設定要操作的資料庫
14 *
15 * @param $id 要操作的資料庫
16 *
17 * @return 無回傳值
18 */
19 public function setDB($fdb);
20
21 /**
22 * @brief 藉由table 的唯一主 key 來刪除特定資料
23 *
24 * @param $id 要刪除資料的 key 值
25 *
26 * @return 成功回傳 'true', 失敗回傳 錯誤信息
27 */
28 public function delete($id);
29
30 /**
31 * @brief 更新資料，資料從 $_REQUEST 取得，索引名稱需與 資料庫 table 的欄位名稱一致
32 *
33 * @return 成功回傳 'true', 失敗回傳 錯誤信息
34 */
35 public function update();
36
37 /**
38 * @brief 新增資料，資料從 $_REQUEST 取得，索引名稱需與 資料庫 table 的欄位名稱一致
39 *
40 * @return 成功回傳 'true', 失敗回傳 錯誤信息
41 */
42 public function insert();
43
44 /**
45 * @brief 取得目前資料的總筆數
46 *
47 * @return 回傳資料的總筆數
48 */
49 public function getTotalCount();
50
51 /**
52 * @brief 藉由查詢條件 criValues 來取得資料
53 *
54 * @param $criValues 該網頁資料處理對應的 DAL
55 *
56 * @return 回傳資料集陣列
57 */
58 public function getData($criValues);
59 }
60
61 ?>
接下来，当然就是 要对上面定义的介面来实现 各个 table 对应的 DAL 来处理资料。
这部分的实现，并不复杂，但跟技术比较有关西，为了避免偏离原先要讲架购的主题，还请读者自行去实做，只要能实现上述界面所要功能就可以了。
DAL 这部分用好后，在来就是思考，如何来应用在 UI 层了，这部分需要思考几个问题，第一，是希望程式的档案数要能减少，最好是一支程式就能完成。
第二，UI 层 牵涉到 DAL 的呼叫，也就是 MVC 中的控制部分，也要能标准化起来，如此后面每一支系统程式，就不用每一支都要来去控制 DAL 的呼叫，尽量把会重复使用的控制跟操作的方法，封装起来，藉此简化，后面应用时的复杂度，而能在应用时专心该系统要解决的问题上就好。
在这，一條小龍 把控制 DAL 的程式码，封装成一个 DG_Page 的 class 来处理，如此， UI 层 就只需要在简单来呼叫使用即可。
这部分程式码，如下所示：
DG_Page.php
View Code
1 <?php
2
3 /**
4 * @file DG_Page.php
5 * @brief 基本檔網頁的資料處理
6 * @author watson
7 * @version 1.0
8 * @date 2012-10-05
9*/
10 class DG_Page
11 {
12 var $db;
13 var $dal;
14
15 /**
16 * @brief 建構式
17 *
18 * @param $fdal該網頁資料處理對應的 DAL
19 *
20 * @return
21 */
22 public function __construct(IDAL $fdal)
23 {
24 require_once("..\..\db\DB_config.php");
25 require_once("..\..\db\DB_class.php");
26
27 //if (!empty($fdal))
28 //{
29 //return die(get_class($this)."->".__FUNCTION__." => DAL not define");
30 //}
31
32 $this->db = new DB();
33 $this->db->connect_db($_DB['host'], $_DB['username'], $_DB['password'], $_DB['dbname']);
34
35 $this->dal = $fdal;
36 $this->dal->setDB($this->db);
37 }
38
39 /**
40 * @brief 處理 Post 回來的資料，$_REQUEST['type'] 不能為空
41 *
42 * @return Type=Insert, Update 成功 回傳 array('success'=>true)
43 * Type=Data 回傳 EasyUI 用的資料集
44 * Type=Qry 回傳 JSON 資料集
45 */
46 public function dealPost()
47 {
48 $result = false;
49
50 $type = $_REQUEST['type'];
51 $msg = "";
52
53 if (!empty($_REQUEST["forKey"]))
54 {
55 $_REQUEST[$this->dal->Foreignkey] = $_REQUEST["forKey"];
56 }
57
58 if($type == "del")
59 {
60 $id = $_REQUEST['id'];
61 $result = $this->dal->delete($id);
62
63 }else if($type == "data"){
64
65 $res = array();
66
67 $res["total"] = $this->dal->getTotalCount();
68
69 $items = $this->dal->getData($_REQUEST);
70
71 $res["rows"] = $items;
72
73 echo json_encode($res);
74 }else if($type == "qry"){
75
76 $items = $this->dal->getData($_REQUEST);
77
78 echo json_encode($items);
79
80 }else{
81
82 if (!empty($_REQUEST['id']) ) {
83 $result = $this->dal->update();
84 }else{ // is add
85 $result = $this->dal->insert();
86 }
87 }
88
89 if($type != "data" && $type != "qry")
90 {
91 if ($result == "true"){
92 echo json_encode(array('success'=>true));
93 } else {
94
95 echo json_encode(array('msg'=>'had errors occured. ' . $result));
96 }
97 }
98 }
99 }
100 ?>
由程式码，可以看到一條小龍，把 在 PHP – EasyUI DataGrid 资料存的方式 中 type 所定义的四个动作，DG_Page 在实做一次，跟 DAL 层不同的是这边重点，主要在把 DAL 取出的资料，予以处理，将其格式调整成 UI 控件，在这范例中，也就是 EasyUI DataGrid 能接受的资料格式。
如此，后面需要更换 控件时，就只需改写 这个 class 即可，而且 DAL 的部分，它的功能也比在前篇的 dal_user class 更加明确，如此一来，本文的 dal 只单纯在做资料处理，应用范围就会更宽广。
最后，为了应用，前面写的两支程式，需在改写 datagrid.php 这支程式，让其在后面应用上，EasyUI DataGrid 都只需要呼叫自己本身来处理即可，不需在像前篇PHP – EasyUI DataGrid 资料存的方式 中所述，还需要 呼叫另外一支 dal_user.php 的程式，如此一来，可大大 减少后须维护的程式相关档案的数量，不用为了维护一支程式要找好几支档案来处理。
datagrid.php
View Code
1 <?php
2 require_once("..\..\db\DAL\STDAL.php");
3
4 $prgName = "User";
5 $dal = DALFactory::getInstance($prgName);
6
7 $LoginPath = "datagrid.php";
8
9 if (!empty($_REQUEST['type']) )
10 {
11 require_once("..\..\util\DG_Page.php");
12
13 $myPage = new DG_Page($dal);
14
15 $myPage->dealPost();
16 }else{
17 ?>
18 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
19 <html>
20 <head>
21 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
22 <title>一條小龍 easyUI datagrid</title>
23
24
25 <link rel="stylesheet" type="text/css" href="http://www.iyunv.com/JS/EasyUI/themes/default/easyui.css">
26 <link rel="stylesheet" type="text/css" href="http://www.iyunv.com/JS/EasyUI/themes/icon.css">
27
28 <script type="text/javascript" src="http://www.iyunv.com/JS/jquery.js"></script>
29 <script type="text/javascript" src="http://www.iyunv.com/JS/EasyUI/jquery.easyui.min.js"></script>
30 <script type="text/javascript" src="http://www.iyunv.com/JS/EasyUI/easyui-lang-zh_CN.js"></script>
31
32 <style type="text/css">
33 #fm{
34 margin:0;
35 padding:10px 30px;
36 }
37 .ftitle{
38 font-size:14px;
39 font-weight:bold;
40 color:#666;
41 padding:5px 0;
42 margin-bottom:10px;
43 border-bottom:1px solid #ccc;
44 }
45 .fitem{
46 margin-bottom:5px;
47 }
48 .fitem label{
49 display:inline-block;
50 width:80px;
51 }
52 </style>
53
54 <script type="text/javascript">
55 <?php
56 echo "post_prg = '$LoginPath';";
57 echo "primay_key = '$dal->PrimaryKey';";
58 ?>
59 var url;
60
61 $(function(){
62 furl = post_prg+ '?type=data';
63 $('#myDG').datagrid({
64 url:furl
65 });
66 });
67
68 function newUser(){
69 $('#dlg').dialog('open').dialog('setTitle','New User');
70 $('#fm').form('clear');
71 url = post_prg + '?type=add';
72 }
73 function editUser(){
74 var row = $('#myDG').datagrid('getSelected');
75 if (row){
76
77 if(typeof(row.UNum) !== 'undefined')
78 {
79 $('#dlg').dialog('open').dialog('setTitle','Edit User');
80 $('#fm').form('load',row);
81 url = post_prg + '?type=mod&id='+row.UNum;
82 }else{
83 alert("undefined");
84 }
85 }
86 }
87 function saveUser(){
88 $('#fm').form('submit',{
89 url: url,
90 onSubmit: function(){
91 //alert('sub :'+ url);
92 return $(this).form('validate');
93 },
94 success: function(result){
95 var result = eval('('+result+')');
96 //alert(result.success);
97 if (result.success){
98 $('#dlg').dialog('close'); // close the dialog
99 $('#myDG').datagrid('reload');// reload the user data
100 } else {
101 $.messager.show({
102 title: 'Error',
103 msg: result.msg
104 });
105 }
106 }
107 });
108 }
109 function removeUser(){
110 var row = $('#myDG').datagrid('getSelected');
111 if (row){
112 $.messager.confirm('Confirm','Are you sure you want to remove this user?',function(r){
113 if (r){
114 //alert(row.UNum);
115 $.post(post_prg, {type:'del', id:row.UNum}, function(result){
116 if (result.success){
117 $('#myDG').datagrid('reload');// reload the user data
118 } else {
119 $.messager.show({ // show error message
120 title: 'Error',
121 msg: result.msg
122 });
123 }
124 },'json');
125 }
126 });
127 }
128 }
129 </script>
130 </head>
131 <body>
132 <h2>一條小龍 easyUI datagrid url 存取測試2</h2>
133
134 <table id="myDG" class="easyui-datagrid"
135 toolbar="#toolbar"
136 title="Load Data" iconCls="icon-save" pagination="true"
137 toolbar="#toolbar" rownumbers="true" fitColumns="true" singleSelect="true">
138 <thead>
139 <tr>
140 <th field="STUID" width="120">User ID</th>
141 <th field="Password" width="80" align="right">Password</th>
142 <th field="Birthday" width="80" align="right">Birthday</th>
143 <th field="Nickname" width="200">Nickname</th>
144 <th field="DBSTS" width="60" align="center">DBSTS</th>
145 </tr>
146 </thead>
147 </table>
148 <div id="toolbar">
149 <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true">New User</a>
150 <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true">Edit User</a>
151 <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true">Remove User</a>
152 </div>
153
154 <div id="dlg" class="easyui-dialog"
155 closed="true" buttons="#dlg-buttons">
156 <div class="ftitle">User Information</div>
157 <form id="fm" method="post" novalidate>
158 <div class="fitem">
159 <label>User ID:</label>
160 <input name="STUID" class="easyui-validatebox" required="true">
161 </div>
162 <div class="fitem">
163 <label>Password:</label>
164 <input name="Password" class="easyui-validatebox" required="true">
165 </div>
166 <div class="fitem">
167 <label>Nickname:</label>
168 <input name="Nickname">
169 </div>
170 <div class="fitem">
171 <label>Birthday:</label>
172 <input name="Birthday" class="easyui-validatebox" validType="email">
173 </div>
174 </form>
175 </div>
176 <div id="dlg-buttons">
177 <a href="#" class="easyui-linkbutton" iconCls="icon-ok">Save</a>
178 <a href="#" class="easyui-linkbutton" iconCls="icon-cancel">Cancel</a>
179 </div>
180
181 </body>
182 </html>
183
184 <?php
185
186 }
187
188 ?>
在这支程式中，UI 层还可以在用一个 Layout 来处理，把 整各画面的排版方式，用一支 Layout 的 php or html 档，来描述好再给这支程式来呼叫使用即可，如此就可让 程式人员减少接触太多的 HTML，并把 Layout 可以给专业网页开发人员来处理，来达到前后台分离开发的目的。
结果画面，如下所示：
页:
[1]