2014年12月17日 星期三

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

昨天搞定新版工作日誌要用的迷你 CMS 的主要版面後, 今天接著要重新設計資料庫與檔案系統. 上篇文章參考 :

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

為了不干擾目前所使用的測試伺服器, 打算找個免費虛擬主機來測試 CMS. 當然用本機的 localhost 也是 OK, 但是要先安裝 Apache + MySQL (這我當然有), 而且系統終究是要架到主機上跑, 直接上架可以在開發階段就找到可能的問題.

我找了 000a.biz 這家, 兩年前申請的帳號目前都還有效, 可見公司營運 OK, 而且不會隨便砍帳號. 申請新帳號很簡單, 只要有 email 就可以了, 首先到其首頁按下 SIGNUP :


然後填寫 E-mail, 網址與密碼, 選擇網站類型與語言, 輸入圖示安全碼 :


按 Register, 順利的話即顯示  :

An activation email has now been sent to abc@blabla.com.tw, please click the activation link in the email to activate this account

然後去收認證信, 點信中所附的超連結即開始設定網站環境 :


完成後顯示下列網頁, 表示網站已開通 :


這張表要記下來保存, 注意, cPanel, MySQL, 以及 FTP 的帳號密碼都是一樣的. 完成申請後, 它會再寄一封新帳號相關訊息的信, 主要是後台登入帳號與申請時所填的密碼, FTP 與 POP 伺服器位址, 這比上面網頁多了 POP 收信主機位址, 也要記下來保存 :


然後就可以用信中的帳密登入 cPanel 進行後台管理了 :

cpanel.000a.biz


進入後台第一件事情當然是設定 MySQL 資料庫 :


在 create new database 欄中填入資料庫末尾名稱, 按 Create Database 即可 :


這樣在 "您現有的資料庫" 列表中就會出現此新增的資料庫 :


這裡必須將 MySQL DB Name 與 MySQL Host Name 抄記下來, 以備寫 PHP 資料庫存取程式之用. 由上可知, 000a.biz 提供 400 個資料庫給免費使用者.

資料庫設定完成後, 按左上角的 "Home" 就可以回 cPanel 主畫面. 接下來就可以將我們在 part-1 所打好的版面網頁上傳到伺服器了. 上傳檔案要用 Files 底下的檔案管理員 :


首先到根目錄下, 這裡有提醒不要將網頁上傳到此目錄下, 而是要點 htdocs 進去, 可見系統已經預先放了 index2.html 首頁在此, 可以先將其刪除 :


然後將我們在 part-1 打好的版 easyui-cms-7.htm 改名成 index.htm, 點左方的 upload 鈕來上傳 :


點選好檔案後, 一定要按左上角的勾勾才會執行上傳. 傳完後按左箭頭可回到檔案列表 :


瀏覽網頁, 結果如下 :


原因是 ~~~ 我們還沒布置 jQuery EasyUI 的執行環境 ! 所以先連到 EasyUI 網站, 發現 EasyUI 已經從 1.4 版升級為 1.4.1 版 :

# 下載 jQuery EasyUI 1.4.1 版

下載 GPL 版的 zip 檔後解壓縮, 然後在專案根目錄下建立一個子目錄 jquery, 將下列解開的 2 個檔案與 2 個目錄複製到 jquery 目錄下 :



然後回到根目錄下修改 index.htm 的 js 與 css 路徑 :

  <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>

這樣就可以把專案上傳到 000a.biz 了, 當然, 若要一個個傳檔可不得了, 因為 EasyUI 檔案非常多, cPanel 的檔案管理器支援 zip 上傳再解壓縮的功能, 因此在根目錄下將 index.htm 與 jquery 目錄全部壓縮為 easyuicms.zip :


然後將此 zip 檔上傳到 htdocs 下 :


然後勾選 easyuicms.zip, 按 Unzip 鈕解壓縮 :



這樣就大功告成了, 這時重新載入 index.htm, 果然正常顯示版面 :


接下來就可以開始撰寫登入畫面了.


沒有留言 :