# 用 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
這只是紀錄移植過程中的檔案, 程式還要繼續改.
沒有留言:
張貼留言