2014年12月18日 星期四

用 jQuery EasyUI 打造輕量級 CMS (三)

在前兩篇文章中, 我們已完成打版與虛擬主機申請, 接下來要規劃資料庫結構與撰寫架站系統的功能. 前兩篇參考 :

用 jQuery EasyUI 打造輕量級 CMS (一)
用 jQuery EasyUI 打造輕量級 CMS (二)

基本上我是將之前用 jQuery UI 寫的 AmyPHP 大部分移植過來, 因為去年寫那系統時早已將輪子造好, 也就是一些常用的 Library, 例如 mysql.php 專門處理資料庫存取, parse.php 負責文字處理與資料剖析等等. 但那時沒時間詳細記錄撰寫過程, 因此趁著移植機會複習一下也好.

函式庫 mysql.php 主要的目的就是簡化我們對 MySQL 的存取而已, 首先是定義資料庫參數 :

define('MYSQL_ADDRESS','sql313.a000.biz');
define('MYSQL_USERNAME','a000b_12345678');
define('MYSQL_PASSWORD','blabla');
define('DATABASE','a000b_12345678_easyuicms');

然後定義資料庫連線函式 get_connection() :

function get_connection($address=MYSQL_ADDRESS, $username=MYSQL_USERNAME,
                        $password=MYSQL_PASSWORD) {
  @$conn=mysql_connect($address, $username, $password); //抑制錯誤顯示
  //設定查詢所用之字元集為 utf-8
  if ($conn) {mysql_query("SET NAMES 'utf8'");}
  else {
      if (SHOW_ERROR) {
          echo "無法建立 MySQL 資料庫連線, 請檢查 dbsettings.php 設定!<br>";
          }
      } //end of else
  return $conn;
  }

若連線成功, 此函式會傳回連線物件. 接著定義 find_table() 函式, 用來尋找指定的資料表 :

function find_table($table, $database=DATABASE) {
  $conn=get_connection(); //取得 MySQL 資料庫連線
  if (!$conn) {return FALSE;} //無法取得連線傳回 FALSE
  $result=mysql_select_db($database, $conn); //開啟資料庫
  if (!$result) {return FALSE;} //選擇資料庫失敗傳回 FALSE
  $SQL="SHOW TABLES;";
  $result=mysql_query($SQL, $conn); //顯示資料表
  while ($data=mysql_fetch_row($result)) {
      if ($data[0]==$table) {
          mysql_free_result($result);
          mysql_close($conn);
          return TRUE;
          } //end of if
      } //end of while
  mysql_free_result($result);
  mysql_close($conn);
  return FALSE;
  }

此函式利用上面所定義的 get_connection() 函式來建立資料庫連線. 傳入參數為所要尋找的資料表名稱, 利用 SHOW TABLES 指令取得資料庫中的所有資料表, 再用迴圈與傳入參數比對, 一找到符合的名稱就傳回 TRUE, 否則傳回 FALSE.

把上面兩個函式連同常數定義存成 mysql.php, 放在 lib 目錄下, 就可以開始寫初次連線的首頁程式 index.php 了. 我們原先打好的首頁版面要改為 home.htm (之後可能要改為 home.php).

首先勾畫一下系統運作邏輯. 當使用者連線網站時 (index.php), 程式要先判斷系統是否已存在 (搜尋資料庫中是否有 sys_settings 資料表), 如果已經存在, 表示網站系統已安裝過, 就顯示登入視窗; 否則表示系統尚未安裝, 就顯示系統資料庫設定視窗, 如下所示 :

$installed=find_table("sys-settings");
if ($installed===FALSE) { //系統尚未安裝
   //顯示系統安裝對話框
  }
else { //系統已安裝
  //顯示系統登入對話框
  }

這裡的對話框使用 Dialog 元件, 參考下面這篇的範例 4 :

# jQuery EasyUI 測試 : 對話框

所以, 我們的 index.php 需要用 if else 分別製作兩張對話框, 一個是系統安裝對話框, 另外是登入對話框.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="jquery/themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="jquery/themes/icon.css">
  <script type="text/javascript" src="jquery/jquery.min.js"></script>
  <script type="text/javascript" src="jquery/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="jquery/locale/easyui-lang-zh_TW.js"></script>
</head>
<body>
<?php
require_once("lib/mysql.php"); //匯入資料庫函式
$installed=find_table("sys_settings"); //檢查資料庫是否已安裝
$installed=FALSE; //檢查資料庫是否已安裝
if ($installed===FALSE) { //系統尚未安裝, 先安裝系統資料表
  //設定資料庫參數
$username="a000b_12345678";
$password="blabla";
$address="sql313.000a.biz";
$db="a000b_12345678_easyuicms";
?>
  <div id="install-dialog" class="easyui-dialog" title="系統安裝" style="width:370px;height:290px;padding:10px" buttons="#install-button">
    <div class="form-title" style="margin:5px;border-bottom:1px solid #ccc;">
      <p>請輸入 MySQL 資料庫伺服器管理員帳號密碼安裝</p>
      <p>若無管理員帳號, 請先以 phpMyAdmin 建立資料庫</p>
    </div>
    <form id="install-form" method="post" style="padding:5px 10px;">
      <div style="margin:5px">
        <label style="width:80px;display:inline-block;">MySQL 位址 : </label>
        <input name="address" type="text" class="easyui-textbox" required="true" data-options="missingMessage:'此欄位為必填'" style="width:220px" value="<?php echo $address?>">
      </div>
      <div style="margin:5px">
        <label style="width:80px;display:inline-block;">MySQL 帳號 : </label>
        <input name="username" type="text" class="easyui-textbox" required="true" data-options="missingMessage:'此欄位為必填'" style="width:220px" value="<?php echo $username?>">
      </div>
      <div style="margin:5px">
        <label style="width:80px;display:inline-block;">MySQL 密碼 : </label>
        <input name="password" type="text" class="easyui-textbox" required="true" data-options="missingMessage:'此欄位為必填'" style="width:220px" value="<?php echo $password?>">
      </div>
      <div style="margin:5px">
        <label style="width:80px;display:inline-block;">資料庫名稱 : </label>
        <input name="database" type="text" class="easyui-textbox" required="true" data-options="missingMessage:'此欄位為必填'" style="width:220px" value="<?php echo $db?>">
      </div>
    </form>
  </div>
  <div id="install-button" style="padding-right:15px;">
    <a href="#" id="install" class="easyui-linkbutton" iconCls="icon-ok" style="width:90px">安裝</a>
  </div>
  <script type="text/javascript">
    $(document).ready(function(){
      $("#install").bind("click",function(){
        $("#install-form").submit();
        });
      $("#install-form").form({
        url:"install.php",
        success:function(data){
          var data=eval('(' + data + ')');   //將 JSON 轉成物件
          if (data.success) {
            $("#install-dialog").dialog("close");
            var msg=data.msg;
            }
          else {var msg="安裝失敗!"}
          $.messager.alert("訊息",msg,"info");
          }
        });
      });
  </script>
<?php
    } //end of if:uninstalled
else { //系統已安裝
?>
  <div id="login-dialog" class="easyui-dialog" title="系統登入" style="width:370px;height:230px;padding:10px" buttons="#login-buttons">
    <div style="margin:5px;border-bottom:1px solid #ccc;">
      <p>請輸入帳號密碼</p>
    </div>
    <form id="login-form" method="post" style="padding:10px 30px;">
      <div style="margin:5px">
        <label style="width:60px;display:inline-block;">帳號 : </label>
        <input name="account" type="text" class="easyui-textbox" required="true" data-options="iconCls:'icon-man',missingMessage:'此欄位為必填'"  style="width:200px">
      </div>
      <div style="margin:5px">
        <label style="width:60px;display:inline-block;">密碼 : </label>
        <input name="password" type="password" class="easyui-textbox" required="true" data-options="iconCls:'icon-lock',missingMessage:'此欄位為必填'" style="width:200px">
      </div>
    </form>
  </div>
  <div id="login-buttons" style="padding-right:15px;">
    <a href="#" id="login-cancel" class="easyui-linkbutton" iconCls="icon-cancel" style="width:90px">取消</a>
    <a href="#" id="login" class="easyui-linkbutton" iconCls="icon-ok" style="width:90px">登入</a>
  </div>
  <script type="text/javascript">
    $(document).ready(function(){
      $("#login").bind("click",function(){
        $("#login-form").submit();
        });
      $("#login-form").form({
        url:"login.php",
        success:function(data){
          var data=eval('(' + data + ')');  //將 JSON 轉成物件
          if (data.success) {
            $("#install-dialog").dialog("close");
            var msg=data.msg;
            }
          else {var msg="帳號或密碼錯誤!"}
          $.messager.alert("訊息",msg,"info");
          }
        });
      });
  </script>
<?php
    } //end of else:installed
?>
</body>
</html>

這裡有兩個 Ajax 呼叫執行的後端程式,  分別是安裝系統的 install.php 與登入系統用的 login.php, 我們暫時簡單地回傳成功即可, 傳回值是一個如下的 JSON 字串 :

{"success":true,"msg":"\u7cfb\u7d71\u5b89\u88dd\u5b8c\u6210!"}

它會傳回給表單的 success 回呼函式的參數 data, 利用 eval('(' + data + ')') 即可將 JSON 字串轉成物件了.

install.php 內容如下 :

<?php
header('Content-Type: text/html;charset=UTF-8');
$arr["success"]=true;
$arr["msg"]="系統安裝完成!";
echo json_encode($arr);
?>

而 login.php 內容如下 :

<?php
header('Content-Type: text/html;charset=UTF-8');
$arr["success"]=true;
$arr["msg"]="您已登入系統!";
echo json_encode($arr);
?>

這兩個簡單程式只是為了要測試 index.php 的兩個對話框排版是否正確, 以及邏輯是否正常而已, 真正的 install.php 需在資料庫中插入系統表單, 以及填入預設資料; 而 login.php 則要驗證帳密是否符合.



把 index.php 中的 $installed 直接改成 FALSE, 就可以測試登入對話框了 :



可見兩個對話框版面都 OK, 但是光是花在調 style 就花了一整天時間捏. 我把目前為止的結果壓縮成 easyuicms-1.zip 備考.

範例 1 : http://mybidrobot.allalla.com/easyuitest/easyuicms-1.zip 

這只是紀錄移植過程中的檔案, 程式還要繼續改.



沒有留言:

張貼留言