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

<?php
 
/**
    * @file IDAL.php
    * @brief 設定 DAL 標準該有的介面
    * @author watson
    * @version 1.0
    * @date 2012-10-05
 */
interface IDAL
{
    /**
        * @brief 設定要操作的資料庫
        *
        * @param $id    要操作的資料庫
        *
        * @return 無回傳值
     */
    public function setDB($fdb);
     
    /**
        * @brief 藉由table 的唯一主 key 來刪除特定資料
        *
        * @param $id    要刪除資料的 key 值
        *
        * @return 成功回傳 'true', 失敗回傳 錯誤信息
     */
    public function delete($id);
     
    /**
        * @brief 更新資料，資料從 $_REQUEST 取得，索引名稱需與 資料庫 table 的欄位名稱一致
        *
        * @return 成功回傳 'true', 失敗回傳 錯誤信息
     */
    public function update();
     
    /**
        * @brief 新增資料，資料從 $_REQUEST 取得，索引名稱需與 資料庫 table 的欄位名稱一致
        *
        * @return 成功回傳 'true', 失敗回傳 錯誤信息
     */
    public function insert();
     
    /**
        * @brief 取得目前資料的總筆數
        *
        * @return 回傳資料的總筆數
     */
    public function getTotalCount();
     
    /**
        * @brief 藉由查詢條件 criValues 來取得資料
        *
        * @param $criValues 該網頁資料處理對應的 DAL
        *
        * @return 回傳資料集陣列
     */
    public function getData($criValues);
}
 
?>

接下来，当然就是 要对上面定义的介面来实现 各个 table 对应的 DAL 来处理资料。
这部分的实现，并不复杂，但跟技术比较有关西，为了避免偏离原先要讲架购的主题，还请读者自行去实做，只要能实现上述界面所要功能就可以了。

DAL 这部分用好后，在来就是思考，如何来应用在 UI 层了，这部分需要思考几个问题，第一，是希望程式的档案数要能减少，最好是一支程式就能完成。
第二，UI 层 牵涉到 DAL 的呼叫，也就是 MVC 中的控制部分，也要能标准化起来，如此后面每一支系统程式，就不用每一支都要来去控制 DAL 的呼叫，尽量把会重复使用的控制跟操作的方法，封装起来，藉此简化，后面应用时的复杂度，而能在应用时专心该系统要解决的问题上就好。

在这，一條小龍 把控制 DAL 的程式码，封装成一个 DG_Page 的 class 来处理，如此， UI 层 就只需要在简单来呼叫使用即可。
这部分程式码，如下所示：

DG_Page.php

<?php
 
/**
    * @file DG_Page.php
    * @brief 基本檔網頁的資料處理
    * @author watson
    * @version 1.0
    * @date 2012-10-05
 */
class DG_Page 
{
    var $db;
    var $dal;
     
    /**
        * @brief 建構式
        *
        * @param $fdal  該網頁資料處理對應的 DAL
        *
        * @return 
     */
    public function __construct(IDAL $fdal)
    {
        require_once("..\..\db\DB_config.php");
        require_once("..\..\db\DB_class.php");
         
        //if (!empty($fdal))
        //{
            //return die(get_class($this)."->".__FUNCTION__." => DAL not define");
        //}
         
        $this->db = new DB();
        $this->db->connect_db($_DB['host'], $_DB['username'], $_DB['password'], $_DB['dbname']);
         
        $this->dal = $fdal;
        $this->dal->setDB($this->db);
    }
     
    /**
        * @brief 處理 Post 回來的資料，$_REQUEST['type'] 不能為空
        *
        * @return Type=Insert, Update 成功 回傳 array('success'=>true)
        *   Type=Data 回傳 EasyUI 用的資料集
        *   Type=Qry 回傳 JSON 資料集
     */
    public function dealPost()
    {
        $result = false;
             
        $type = $_REQUEST['type'];
        $msg = "";
         
        if (!empty($_REQUEST["forKey"]))
        {
            $_REQUEST[$this->dal->Foreignkey] = $_REQUEST["forKey"];
        }
         
        if($type == "del")
        {
            $id = $_REQUEST['id'];
            $result = $this->dal->delete($id);
         
        }else if($type == "data"){
             
            $res = array();
             
            $res["total"] = $this->dal->getTotalCount();
             
            $items = $this->dal->getData($_REQUEST);
 
            $res["rows"] = $items;
             
            echo json_encode($res); 
        }else if($type == "qry"){
 
            $items = $this->dal->getData($_REQUEST);
 
            echo json_encode($items); 
     
        }else{
             
            if (!empty($_REQUEST['id']) ) {
                $result = $this->dal->update();
            }else{ // is add
                $result = $this->dal->insert();
            }
        }
         
        if($type != "data" && $type != "qry")
        {
            if ($result == "true"){
                echo json_encode(array('success'=>true));
            } else {
                 
                echo json_encode(array('msg'=>'had errors occured. ' . $result));
            }
        }
    }
}
?>

由程式码，可以看到一條小龍，把 在 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

<?php
    require_once("..\..\db\DAL\STDAL.php");
 
    $prgName = "User";  
    $dal = DALFactory::getInstance($prgName);
     
    $LoginPath = "datagrid.php";
     
    if (!empty($_REQUEST['type']) )
    {
        require_once("..\..\util\DG_Page.php");
         
        $myPage = new DG_Page($dal);
         
        $myPage->dealPost();
    }else{
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>一條小龍 easyUI datagrid</title>
     
 
    <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/JS/EasyUI/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/JS/EasyUI/themes/icon.css">
     
    <script type="text/javascript" src="http://www.cnblogs.com/JS/jquery.js"></script>
    <script type="text/javascript" src="http://www.cnblogs.com/JS/EasyUI/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="http://www.cnblogs.com/JS/EasyUI/easyui-lang-zh_CN.js"></script>
     
    <style type="text/css">
        #fm{
            margin:0;
            padding:10px 30px;
        }
        .ftitle{
            font-size:14px;
            font-weight:bold;
            color:#666;
            padding:5px 0;
            margin-bottom:10px;
            border-bottom:1px solid #ccc;
        }
        .fitem{
            margin-bottom:5px;
        }
        .fitem label{
            display:inline-block;
            80px;
        }
    </style>
     
    <script type="text/javascript">
        <?php
            echo "post_prg = '$LoginPath';";
            echo "primay_key = '$dal->PrimaryKey';";
        ?>
        var url;
         
        $(function(){
            furl = post_prg+ '?type=data';
            $('#myDG').datagrid({
                url:furl
            });
        });
 
        function newUser(){
            $('#dlg').dialog('open').dialog('setTitle','New User');
            $('#fm').form('clear');
            url = post_prg + '?type=add';
        }
        function editUser(){
            var row = $('#myDG').datagrid('getSelected');
            if (row){
                 
                if(typeof(row.UNum) !== 'undefined')
                {
                    $('#dlg').dialog('open').dialog('setTitle','Edit User');
                    $('#fm').form('load',row);
                    url = post_prg + '?type=mod&id='+row.UNum;
                }else{
                    alert("undefined");
                }
            }
        }
        function saveUser(){
            $('#fm').form('submit',{
                url: url,
                onSubmit: function(){
                    //alert('sub :'+ url);
                    return $(this).form('validate');
                },
                success: function(result){
                    var result = eval('('+result+')');
                    //alert(result.success);
                    if (result.success){
                        $('#dlg').dialog('close');      // close the dialog
                        $('#myDG').datagrid('reload');  // reload the user data
                    } else {
                        $.messager.show({
                            title: 'Error',
                            msg: result.msg
                        });
                    }
                }
            });
        }
        function removeUser(){
            var row = $('#myDG').datagrid('getSelected');
            if (row){
                $.messager.confirm('Confirm','Are you sure you want to remove this user?',function(r){
                    if (r){
                        //alert(row.UNum);
                        $.post(post_prg, {type:'del', id:row.UNum}, function(result){
                            if (result.success){
                                $('#myDG').datagrid('reload');  // reload the user data
                            } else {
                                $.messager.show({   // show error message
                                    title: 'Error',
                                    msg: result.msg
                                });
                            }
                        },'json');
                    }
                });
            }
        }
    </script>
</head>
<body>
    <h2>一條小龍 easyUI datagrid url 存取測試2</h2>
     
    <table id="myDG" class="easyui-datagrid" style="700px;height:450px"
            toolbar="#toolbar"
            title="Load Data" iconCls="icon-save" pagination="true"
            toolbar="#toolbar" rownumbers="true" fitColumns="true" singleSelect="true">
        <thead>
            <tr>
                <th field="STUID" width="120">User ID</th>
                <th field="Password" width="80" align="right">Password</th>
                <th field="Birthday" width="80" align="right">Birthday</th>
                <th field="Nickname" width="200">Nickname</th>
                <th field="DBSTS" width="60" align="center">DBSTS</th>
            </tr>
        </thead>
    </table>
    <div id="toolbar">
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()">Remove User</a>
    </div>
     
    <div id="dlg" class="easyui-dialog" style="400px;height:350px;padding:10px 20px"
            closed="true" buttons="#dlg-buttons">
        <div class="ftitle">User Information</div>
        <form id="fm" method="post" novalidate>
            <div class="fitem">
                <label>User ID:</label>
                <input name="STUID" class="easyui-validatebox" required="true">
            </div>
            <div class="fitem">
                <label>Password:</label>
                <input name="Password" class="easyui-validatebox" required="true">
            </div>
            <div class="fitem">
                <label>Nickname:</label>
                <input name="Nickname">
            </div>
            <div class="fitem">
                <label>Birthday:</label>
                <input name="Birthday" class="easyui-validatebox" validType="email">
            </div>
        </form>
    </div>
    <div id="dlg-buttons">
        <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
    </div>
     
</body>
</html>
 
<?php
 
    }
     
?>

在这支程式中，UI 层还可以在用一个 Layout 来处理，把 整各画面的排版方式，用一支 Layout 的 php or html 档，来描述好再给这支程式来呼叫使用即可，如此就可让 程式人员减少接触太多的 HTML，并把 Layout 可以给专业网页开发人员来处理，来达到前后台分离开发的目的。

结果画面，如下所示：