MarkDown

\[1062\] PHP7入門 =============== ### [完整範例](https://www.tad0616.net/uploads/tad_book3/file/43/reporter_6.zip) ### 一、 加入文章發布者及封面圖 1. 修改發布加入 `username` 隱藏欄位 2. 資料表結構記得修改，多一欄`username` 3. 順便加入file上傳元件，表單記得加上： ``` <pre class="brush:xml;gutter:false;"> enctype="multipart/form-data" ``` 4. 寫入時，加入username到SQL語法，並將上傳檔案複製到上傳目錄下。 5. `is_dir("uploads")`可以判斷是否為資料夾，並用`mkdir("uploads")`建立資料夾。 6. php.ini中關於檔案上傳的部份： - (1) file\_uploads=On：支持 HTTP 上傳 - (2) upload\_tmp\_dir="C:/UniServerZ/tmp"：上傳檔案的暫存目錄 - (3) upload\_max\_filesize=12M：允許上傳檔案容量的上限 - (4) max\_file\_uploads=20：允許一次上傳的最大檔案數量 - (5) post\_max\_size=12M：表單發送資料容量的上限（需>=upload\_max\_filesize） - (6) max\_execution\_time=300：設定程式被解析器終止之前允許的最大執行時間，防止程式寫得不好而耗盡伺服器資源，單位: 秒（-1 為不限制）。 - (7) memory\_limit=128M：一個 Web 請求，給予該執行緒記憶體使用量的上限。 ### 二、 首頁文章縮圖摘要列表 1. 若要限制出現數量，可在讀出所有文章的SQL語法最後加入 ``` <pre class="brush:sql;gutter:false;"> LIMIT 0,9 ``` 2. 隨機假圖：[https://picsum.photos/400/200?image={$article@index}](https://picsum.photos) 3. BS4圖片：<http://bootstrap.hexschool.com/docs/4.0/content/images/> ``` <pre class="brush:xml;gutter:false;"> {assign var="cover" value="uploads/thumb_`$article.sn`.jpg"} {if file_exists($cover)} <img src="{$cover}" alt="{$article.title} " class="cover rounded"> {else} <img src="https://picsum.photos/400/300?image={$article@index}" alt="{$article.title} " class="cover rounded"> {/if} ``` 4. 縮圖樣式部份：<https://css-tricks.com/almanac/properties/o/object-fit/> ``` <pre class="brush:css;gutter:false;"> img.cover { width: 100%; height: 200px; object-fit: cover; } ``` 5. 擷取摘要： ``` <pre class="brush:php;gutter:false;"> $all[$i]['summary'] = mb_substr(strip_tags($data['content']), 0, 60); ``` ### 三、 製作自適應選單 1. `<nav>`的class改為 ``` <pre class="brush:xml;gutter:false;"> navbar navbar-expand-md navbar-dark ``` 2. 加入縮小時的切換按鈕，其中` data-target`需對應下方選單內容 ``` <pre class="brush:xml;gutter:false;"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#menu"> <span class="navbar-toggler-icon"></span> </button> ``` 3. 加入網站logo ``` <pre class="brush:xml;gutter:false;"> <a class="navbar-brand" href="index.php"> <img alt="Brand" src="images/logo.png" class="img-fluid"> </a> ``` 4. 原有選項用以下語法包起來 ``` <pre class="brush:xml;gutter:false;"> <div class="collapse navbar-collapse" id="menu"> 選單 </div> ``` 5. 子項目若需要分左右邊，可分別再包一層 ``` <pre class="brush:xml;gutter:false;"> <div class="navbar-nav mr-auto"></div> <div class="navbar-nav"></div> ``` 6. 若需要讓選單固定住，可在`<nav>`中加上`.sticky-top` 7. <http://bootstrap.hexschool.com/docs/4.0/utilities/position/> ### 四、 固定頁尾 1. 將原本說明文字加到頁尾，頁尾可用`.fixed-bottom`來固定住。 ``` <pre class="brush:xml;gutter:false;"> <p class="mt-3 d-none d-sm-block">電腦螢幕長頁尾</p> <p class="mt-3 d-block d-sm-none">手機螢幕短頁尾</p> ``` 2. 由於固定住會浮動並遮住部份內容，故可在頁尾上方多一個空白<div>，並設定其上方邊界距離，以撐出一個空間來放置頁尾。如： ``` <pre class="brush:xml;gutter:false;"> <div class="footer"></div> ``` ``` <pre class="brush:css;gutter:false;"> .footer{ margin-top: 120px; } ``` ### 五、 加入刪除功能 1. 根據身份加入管理功能： ``` <pre class="brush:xml;gutter:false;"> {if $smarty.session.username==$article.username}管理功能{/if} ``` 2. 加入刪除及修改按鈕（可加入`class="btn btn-danger"`做成按鈕）： ``` <pre class="brush:xml;gutter:false;"> <a href="admin.php?op=delete_article&sn={$article.sn}">刪除</a> <a href="admin.php?op=article_form&sn={$article.sn}">修改</a> ``` 3. 刪除的SQL語法： ``` <pre class="brush:sql;gutter:false;"> DELETE FROM 資料表 WHERE 條件 ``` 4. 若要限制只能刪除自己的文章，可加入： ``` <pre class="brush:sql;gutter:false;"> AND username='{$_SESSION['username']}' ``` 5. 別忘記刪除圖片 ``` <pre class="brush:php;gutter:false;"> if (file_exists("uploads/cover_{$sn}.jpg")) { unlink("uploads/cover_{$sn}.jpg"); unlink("uploads/thumb_{$sn}.jpg"); } ``` ### 六、 加入修改功能 1. 根據`$op`值，多一組 `article_form`的`case`設定，記得帶入`$sn`（須先變數過濾），並根據`$sn`取出原先填入內容，並塞到樣板檔中。 2. 回復表單元件的預設值，如： ``` <pre class="brush:xml;gutter:false;"> <input type="text" name="xx" {if $article.title}value="{$article.title}"{/if} > <textarea>{if $article.content}{$article.title}{/if} ``` 3. 記得根據不同狀態，改變不同op值（更新時務必記得帶sn值） ```

  {if $article.sn}
      
      
  {else}
      
  {/if}
  ```
4. 根據`$op`值，多一組`update `的`case`設定，記得帶入`$sn`，並根據`$sn`更新內容。
5. 更新的SQL語法： ```
  
  UPDATE 資料表 SET 欄1='新值1', 欄2='新值2'  WHERE 條件
  ```
6. 更新時，建立時間及計數器一般都不需要更新。
7. 和刪除一樣，若要限制只能更新自己的文章，可加入： ```
  
  AND username='{$_SESSION['username']}'
  ```
8. 可將上傳圖片的部份獨立成一個函數，以便新增和更新時呼叫使用。