Jill 筆記 - 線上書籍

:::

PHP 從頭說
=======

### 一、檢查必填欄位

1. 加到新增、修改函數： 
  - add() 
      ```php
      function add()
      {
          global $db, $smarty;
      
          $message = '';
          if (empty($_POST['title'])) {
              $message .= '標題必填 | ';
          }
          if (empty($_POST['directions'])) {
              $message .= '描述必填 | ';
          }
      
          if (!isset($_POST['assign'])) {
              $message .= '至少指派一名';
          }
      
          if (!empty($message)) {
              echo "<script>alert('" . $message . "');history.back();</script>;";
              exit;
          }
          /************省略*****************/
      
      }
      ```
  - update() 
      ```php
      //更新清單
      function update()
      {
          global $db, $smarty;
      
          $message = '';
          if (empty($_POST['title'])) {
              $message .= '標題必填 | ';
          }
          if (empty($_POST['directions'])) {
              $message .= '描述必填 | ';
          }
      
          if (!isset($_POST['assign'])) {
              $message .= '至少指派一名';
          }
      
          if (!empty($message)) {
              // 返回上一頁並重新整理
              echo "<script>alert('" . $message . "');self.location=document.referrer;</script>;";
              exit;
          }
      
      
          /****************省略***************/
      }
      ```
 
### 二、加入所見即所得編輯器

1. 官網：<https://ckeditor.com/ckeditor-5/>
2. 參考文件：<https://ckeditor.com/ckeditor-5/demo/>
3. 下載：[https://ckeditor.com/ckeditor-5/online-builder/ ](https://ckeditor.com/ckeditor-5/online-builder/)勾選 
  - Alignment
  - Font background color、Font color、Font size、Font family
  - Highlight
  - Horizontal line
  - Indent block
  - List style
  - Table cell properties、Table properties
  - Underline
4. 在【 htdocs】內建目錄【 class 】並將檔案 [ckeditor5.zip ](http://tnjaile.com/uploads/tad_book3/file/11001php8/ckeditor5.zip)解壓到目錄【 class /ckeditor5】。 
  ```markup
  D:\xampp\htdocs> mkdir class
  ```
5. 可刪除目錄【sample】。
6. post\_form.tpl 最後引入 
  ```javascript
  <script src="/class/ckeditor5/build/ckeditor.js"></script>
  <script>ClassicEditor
      .create( document.querySelector( '#editor' ), {
        toolbar: {
          items: [
            'heading',
            '|',
            'alignment',
            'bold',
            'italic',
            'link',
            'bulletedList',
            'numberedList',
            '|',
            'outdent',
            'indent',
            '|',
            'imageUpload',
            'blockQuote',
            'insertTable',
            'mediaEmbed',
            'undo',
            'redo',
            'fontBackgroundColor',
            'fontColor',
            'fontSize',
            'fontFamily',
            'highlight',
            'underline',
            'horizontalLine'
          ]
        },
        language: 'zh',
        image: {
          toolbar: [
            'imageTextAlternative',
            'imageStyle:full',
            'imageStyle:side'
          ]
        },
        table: {
          contentToolbar: [
            'tableColumn',
            'tableRow',
            'mergeTableCells',
            'tableCellProperties',
            'tableProperties'
          ]
        },
        licenseKey: '',
  
  
      } )
      .then( editor => {
        window.editor = editor;
      } )
      .catch( error => {
        console.error( 'Oops, something went wrong!' );
        console.error( 'Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:' );
        console.warn( 'Build id: 1rgkipb73di4-u4vchuqjbqta' );
        console.error( error );
      } )
  
  .editorConfig(config=>{
      config.allowedContent = {
          script: true,
          $1: {
              // This will set the default set of elements
              elements: CKEDITOR.dtd,
              attributes: true,
              styles: true,
              classes: true
          }
      }})
  ;
  </script>
  ```
7. 設置高度
8. ```markup
  <style>
    .ck-editor__editable {
        min-height: 8rem;
    }
  </style>
  ```
9. post\_form.tpl 修改大量文字框 
  ```markup
  <textarea id="editor" class="form-control" name="directions" >{$content.directions}

``` 10. 顯示在網頁不需轉換HTML特殊符號，修改index.php函數 `find_one()` ```markup function find_one($sn = "") { global $db; /****省略***/ /**********註記以下********/ //$data['directions'] = htmlspecialchars($data['directions'], ENT_QUOTES); } ``` 11. show\_one.tpl ```markup

描述

{$content.directions}

``` ### 三、html簡易表單驗證 1. 簡單的表單驗證，可以考慮使用 HTML5 表單驗證。 2. 相關屬性 - 必填欄位：required ```markup ``` - 限定長度： maxlength、 minlength ```markup ``` - 使用正規表達式進行驗證： pattern ```markup ``` - - 限定範圍： min 與 max ```markup ``` 3. post\_form.tpl ```markup

待辦事項

到期日

``` ### 四、分頁功能 1. 下載[ PageBar fot bootstrap5 分頁物件](http://tnjaile.com/uploads/tad_book3/file/11001php8/PageBar.zip) 2. 解壓到 class/PageBar.php 3. 修改 index.php 中的 list\_all() 函數： - 必須放在原有的 $sql 和 $result 之間才行！ - ```php // 列出所有 function list_all() { global $db, $smarty, $content; include_once "class/PageBar.php"; $sql = "select * from `list` order by priority,end"; $PageBar = getPageBar($db, $sql, 10, 10); $bar = $PageBar['bar']; $sql = $PageBar['sql']; $total = $PageBar['total']; $result = $db->query($sql); if (!$result) { throw new Exception($db->error); } /**省略**/ $smarty->assign('total', $total); $smarty->assign('bar', $bar); } ``` 4. getPageBar的參數說明： - ```php getPageBar($mysqli, $sql, $show_num = 20, $page_list = 10, $to_page = "", $url_other = "") ``` - $mysqli：使用的資料庫物件名稱（必要） - $sql：欲執行的語法（必要） - $show\_num = 20：每頁顯示資料數 - $page\_list = 10：分頁工具列呈現的頁數 - $to\_page = ""：要連結到那一個頁面 - $url\_other = ""：其他額外的連結參數 5. 修改 templates/index.tpl 樣板，在表格上方加入資料數： ```markup

待辦清單（共 {$total} 個事項）

``` 6. 在表格下面加入分頁工具列： ```markup {$bar} ``` ### 五、sweet alert 1. sweet alert官網： 2. 用 npm 安裝，按 Ctrl+ ` 開啟終端機，並貼上： ```markup npm i jquery npm install --save sweetalert ``` 3. 修改刪除按鈕為 ```markup 刪除 ``` 4. 參考： (A warning message, with a function attached to the confirm message:Using promises) - 將以下語法貼到有上述連結的樣板檔案中，或者存成 templates\\sweetalert\_delete.tpl： ```javascript ``` 5. 然後在 index.tpl 引入該樣板檔即可： ```markup {include file='sweetalert_delete.tpl'} ``` 6. 移除 index.php 流程 case 'delete': 中的 echo ```php switch ($op) { case 'delete': del($sn); // 轉向 header("location:index.php"); exit; /*********** 省略 *******************/ ``` ### 六、課後練習 1. 顯示單筆待辦事項詳細資料。 ```markup ``` 2. 首頁只顯示未完成事項。 ```markup $sql = "SELECT * FROM `list` where done!=1 order by end desc" ``` 3. 做一頁已完成待辦清單。 - ```markup 1.header.php 加入導覽列 $navbar = ['home' => "回首頁", 'post' => "發布待辦事項", 'done' => "已完成清單"]; 2.navbar.tpl

{$navbar.done}

3. 根據op 在 index.php加流程，在 index.tpl加一組樣板 case 'done': done(); break; {elseif $op=="done"} {include file='done.tpl'} 4.撰寫 function done() 5.製作顯示頁done.tpl ```

MarkDown

待辦清單（共 {$total} 個事項）