Tad 教材網 - 線上書籍

:::

\[1032\]PHP入門
=============

[![](http://tad0616.net/uploads/dl.gif)](http://www.tad0616.net/uploads/tad_book3/file/1032/6.pdf)

### 一、 安裝jquery

1. bootstrap和所見即所得編輯器都需要jquery（需多功能也都需要）
2. jquery官網：<http://jquery.com/download/>
3. 找到jquery下載連結，直接按滑鼠右鍵，選「另存鏈結」即可下載jquery的js檔。
4. 存至eznews下即可。接著在</head>之前加入以下語法： ```
  <pre class="brush:xml;">
  
  <script src="jquery-1.11.1.min.js"></script>
  ```
 
### 二、 讓BootStrap3離線也可以執行（[直接下載](http://www.tad0616.net/uploads/tad_book3/file/1032/bootstrap3.zip)）

1. 英文官網：<http://getbootstrap.com/getting-started/#download>
2. 中文官網：<http://v3.bootcss.com/getting-started/#download>
3. 解壓縮後，請將dist改名為bootstrap3以方便辨識。
4. 在jquery之後加入以下語法： ```
  <pre class="brush:xml;">
  
  <link href="bootstrap3/css/bootstrap.min.css" rel="stylesheet">
  
  
  
  
  <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之後加入以下語法： ```
  <pre class="brush:xml;">
  
  <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之後加入以下語法： ```
  <pre class="brush:xml;">
  
  <link href="summernote/summernote.css" rel="stylesheet">
  <script src="summernote/summernote.min.js"></script>
  
  <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. 在引入編輯器之後加入： ```
  <pre class="brush:xml;">
  
  <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設定中加入： ```
  <pre class="brush:xml;">
  $('#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. 儲存（或更新）時，若輸入框有內容則儲存至此資料表，並抓取存入的流水編號： ```
  <pre class="brush:php;">
  $cate_sn=mysql_insert_id();
  ```
6. 接著讀出所有eznews\_cate中的分類資料，製作一個下拉選單。
7. 將此選單置入發布新聞的表單中，和新增分類的欄位並存。
8. 之後，只要挑選分類選單即可，除非有填寫新增分類的欄位。
 
### 七、 行動裝置上看起來的樣子

![](http://www.tad0616.net/uploads/tad_book3/image/1032/2014-11-20%2023.02.18.png) ![](http://www.tad0616.net/uploads/tad_book3/image/1032/2014-11-20%2023.11.51.png) ![](http://www.tad0616.net/uploads/tad_book3/image/1032/2014-11-20%2023.11.58.png)

### 八、安裝 WebDeveloper 附加元件

1. WebDeveloper 附加元件：<https://addons.mozilla.org/zh-tw/firefox/addon/web-developer/>
2. [WebDeveloper 1.2.5 正體中文包](http://www.tad0616.net/modules/tad_uploader/index.php?op=dlfile&cfsn=724&cat_sn=65&name=webdeveloper1.2.5_zh_tw.xpi)，修改自 http://blog.yanwen.org/archives/1406.html
3. 其中幾個很實用的功能： 
  - 表單：顯示表單細節
  - 其他功能：顯示尺標
  - 標記：標記表格：標記表格單元格
  - 查看源代碼：查看處理後的源代碼
 
### 九、好文推薦

- [OMG～只過了一個月，我居然看不懂當初自己寫的程式](http://buzzorange.com/techorange/2014/11/20/why-your-code-is-so-hard-to-understand/)

:::