線上書籍

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. 其中幾個很實用的功能：
    • 表單：顯示表單細節
    • 其他功能：顯示尺標
    • 標記：標記表格：標記表格單元格
    • 查看源代碼：查看處理後的源代碼
九、好文推薦