[1062] PHP7入門

6. 使用上傳物件及管理功能

完整範例

一、加入文章發布者及封面圖

修改發布加入 username 隱藏欄位
資料表結構記得修改，多一欄username
順便加入file上傳元件，表單記得加上：
```
enctype="multipart/form-data"
```
寫入時，加入username到SQL語法，並將上傳檔案複製到上傳目錄下。
is_dir("uploads")可以判斷是否為資料夾，並用mkdir("uploads")建立資料夾。
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 請求，給予該執行緒記憶體使用量的上限。

二、首頁文章縮圖摘要列表

若要限制出現數量，可在讀出所有文章的SQL語法最後加入
```
LIMIT 0,9
```
隨機假圖：https://picsum.photos/400/200?image={$article@index}

BS4圖片：http://bootstrap.hexschool.com/docs/4.0/content/images/

{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}

縮圖樣式部份：https://css-tricks.com/almanac/properties/o/object-fit/
```
img.cover  {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
```

擷取摘要：

$all[$i]['summary'] = mb_substr(strip_tags($data['content']), 0, 60);

三、製作自適應選單

<nav>的class改為
```
navbar navbar-expand-md navbar-dark
```

加入縮小時的切換按鈕，其中 data-target需對應下方選單內容

<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#menu">
<span class="navbar-toggler-icon"></span>
</button>

加入網站logo

<a class="navbar-brand" href="index.php">
    <img alt="Brand" src="images/logo.png" class="img-fluid">
</a>

原有選項用以下語法包起來

<div class="collapse navbar-collapse" id="menu">
  選單
</div>

子項目若需要分左右邊，可分別再包一層

<div class="navbar-nav mr-auto"></div>
<div class="navbar-nav"></div>

若需要讓選單固定住，可在<nav>中加上.sticky-top
http://bootstrap.hexschool.com/docs/4.0/utilities/position/

四、固定頁尾

將原本說明文字加到頁尾，頁尾可用.fixed-bottom來固定住。

<p class="mt-3 d-none d-sm-block">電腦螢幕長頁尾</p>
<p class="mt-3 d-block d-sm-none">手機螢幕短頁尾</p>

由於固定住會浮動並遮住部份內容，故可在頁尾上方多一個空白<div>，並設定其上方邊界距離，以撐出一個空間來放置頁尾。如：
```
<div class="footer"></div>
```
```
.footer{
  margin-top: 120px;
}
```

五、加入刪除功能

根據身份加入管理功能：

{if $smarty.session.username==$article.username}管理功能{/if}

加入刪除及修改按鈕（可加入class="btn btn-danger"做成按鈕）：

<a href="admin.php?op=delete_article&sn={$article.sn}">刪除</a>
<a href="admin.php?op=article_form&sn={$article.sn}">修改</a>

刪除的SQL語法：
```
DELETE FROM 資料表 WHERE 條件
```
若要限制只能刪除自己的文章，可加入：
```
AND username='{$_SESSION['username']}'
```

別忘記刪除圖片

if (file_exists("uploads/cover_{$sn}.jpg")) {
    unlink("uploads/cover_{$sn}.jpg");
    unlink("uploads/thumb_{$sn}.jpg");
}

六、加入修改功能

根據$op值，多一組 article_form的case設定，記得帶入$sn（須先變數過濾），並根據$sn取出原先填入內容，並塞到樣板檔中。

回復表單元件的預設值，如：

<input type="text" name="xx" {if $article.title}value="{$article.title}"{/if} >
<textarea>{if $article.content}{$article.title}{/if}</textarea>

記得根據不同狀態，改變不同op值（更新時務必記得帶sn值）

{if $article.sn}
    <input type="hidden" name="sn" value="{$article.sn}">
    <input type="hidden" name="op" value="update">
{else}
    <input type="hidden" name="op" value="insert">
{/if}

根據$op值，多一組update 的case設定，記得帶入$sn，並根據$sn更新內容。

更新的SQL語法：

UPDATE 資料表 SET 欄1='新值1', 欄2='新值2'  WHERE 條件

更新時，建立時間及計數器一般都不需要更新。
和刪除一樣，若要限制只能更新自己的文章，可加入：
```
AND username='{$_SESSION['username']}'
```
可將上傳圖片的部份獨立成一個函數，以便新增和更新時呼叫使用。

6. 使用上傳物件及管理功能

完整範例

一、 加入文章發布者及封面圖

二、 首頁文章縮圖摘要列表

三、 製作自適應選單

四、 固定頁尾

五、 加入刪除功能