線上書籍

Home

[1032]PHP入門

一、 安裝jquery
  1. bootstrap和所見即所得編輯器都需要jquery(需多功能也都需要)
  2. jquery官網:http://jquery.com/download/
  3. 找到jquery下載連結,直接按滑鼠右鍵,選「另存鏈結」即可下載jquery的js檔。
  4. 存至eznews下即可。接著在</head>之前加入以下語法: <!-- 加入 jQuery --> <script src="jquery-1.11.1.min.js"></script>
二、 讓BootStrap3離線也可以執行(直接下載
  1. 英文官網:http://getbootstrap.com/getting-started/#download
  2. 中文官網:http://v3.bootcss.com/getting-started/#download
  3. 解壓縮後,請將dist改名為bootstrap3以方便辨識。
  4. 在jquery之後加入以下語法: <!-- 加入Bootstrap --> <link href="bootstrap3/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js 是給 IE8 可以支援部份 HTML5 元件用的 --> <!-- 注意:若是用點兩下的方式(即file://)開啟此檔,那 Respond.js 是不會運作的--> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <!-- 引入一些 加入Bootstrap 外掛(plugins) --> <script src="bootstrap3/js/bootstrap.min.js"></script>
三、 安裝font-awesome
  1. 免費的向量圖示,可放大縮小,並且可以套顏色,編輯器會用到(否則按鈕會沒圖示)
  2. 官網:http://fortawesome.github.io/Font-Awesome
  3. 解壓縮後,請將font-awesome-4.2.0改名為font-awesome以方便辨識。
  4. 在bootstrap之後加入以下語法: <!-- 引入 font-awesome 向量圖示--> <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
四、 Summernote編輯器
  1. 官網:http://hackerwins.github.io/summernote/
  2. 解壓後,將裡面的dist資料夾複製到eznews下,並改名為 summernote
  3. 語系下載:https://github.com/HackerWins/summernote/tree/master/lang
  4. 點進summernote-zh-TW.js,在「Raw」按鈕上按滑鼠右鍵,將鏈結另存新檔,並存至 summernote目錄下即可,注意副檔名必須保持為.js。
  5. 在font-awesome之後加入以下語法: <!-- 引入 summernote 的 css 和 js 檔--> <link href="summernote/summernote.css" rel="stylesheet"> <script src="summernote/summernote.min.js"></script> <!-- 載入 summernote 中文語系 --> <script src="summernote/summernote-zh-TW.js"></script> <script> $(document).ready(function() { $('#summernote').summernote({ height: 300 , lang: 'zh-TW' }); }); </script>
  6. 接著在<textarea>中加入id="summernote"就大功告成了!
  7. 利用所見即所得編輯器,顯示時不再需要nl2br()。
  8. 由於該編輯器會將圖檔直接存到資料庫,故news_content的種類可能要從原本的text改為longtext,以避免圖檔太大存不進去。
五、 加個日期挑選器
  1. 官網:http://www.bootcss.com/p/bootstrap-datetimepicker/
  2. 解壓縮後,請將目錄改名為bootstrap-datetimepicker以方便辨識。
  3. 刪除不必要目錄,只留下js和css即可。
  4. 在引入編輯器之後加入: <!-- 載入 bootstrap-datetimepicker --> <link href="bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet"> <script type="text/javascript" src="bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script> <script type="text/javascript" src="bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-TW.js" charset="UTF-8"></script>
  5. 在jquery設定中加入: $('#datetimepicker').datetimepicker({ format: 'yyyy-mm-dd hh:ii', language: 'zh-TW' });
  6. 用PHP抓取現在日期時間:date("Y-m-d H:i:s")
  7. date() 函數完整用法:http://php.net/manual/en/function.date.php
六、 建立一個分類資料表eznews_cate
  1. 分類編號(cate_sn )、分類標題(cate_title)即可。
  2. 新聞的資料表也記得要加入分類編號(cate_sn ),如此才能關聯起來。
  3. 並請重新匯出SQL檔。
  4. 在發布新聞的表單建立一個分類輸入框
  5. 儲存(或更新)時,若輸入框有內容則儲存至此資料表,並抓取存入的流水編號: $cate_sn=mysql_insert_id();
  6. 接著讀出所有eznews_cate中的分類資料,製作一個下拉選單。
  7. 將此選單置入發布新聞的表單中,和新增分類的欄位並存。
  8. 之後,只要挑選分類選單即可,除非有填寫新增分類的欄位。
七、 行動裝置上看起來的樣子

八、安裝 WebDeveloper 附加元件
  1. WebDeveloper 附加元件:https://addons.mozilla.org/zh-tw/firefox/addon/web-developer/
  2. WebDeveloper 1.2.5 正體中文包,修改自 http://blog.yanwen.org/archives/1406.html
  3. 其中幾個很實用的功能:
    • 表單:顯示表單細節
    • 其他功能:顯示尺標
    • 標記:標記表格:標記表格單元格
    • 查看源代碼:查看處理後的源代碼
九、好文推薦