1. 學好程式的幾個建議 1-1 安裝PHP運作環境 1-2 安裝 VSCode 開發工具 1-3 安裝 Composer 1-4 關於PHP8 1-5 上課範例及需求 1-6 研習時需要的學習心態 1-7 建立專案目錄 2. 開始動手做界面 2-1 請AI幫我們做前端界面 2-2 請AI幫我們做滑動圖輪播區 2-3 將首頁和滑動圖整併在一起 2-4 請AI製作文章發布界面 3. 精修完整界面樣板 3-1 安裝Smarty樣板引擎 3-2 建立前、後台樣板檔並套用之 3-3 將主樣板檔拆分成小樣板 3-3-1 美化頁首樣板檔 header.tpl 3-3-2 優化導覽列 nav.tpl 3-3-3 統一主內容樣式 main.tpl 3-3-4 微調一下側邊欄 3-3-5 修改頁尾 4. 讓表單開始有作用 4-1 傳入變數讓程式知道現在要做什麼 4-2 根據不同動作自動載入相對應樣板 4-3 修改編輯表單使之可以送出資料 4-4 製作共同頁首檔 header.php 5. 將資料存到資料庫 5-1 建立資料庫連線 5-2 用AI來產生表單儲存功能 5-2-1 接收表單的值 5-2-2 用PDO寫入資料庫 5-2-3 建立縮圖並產生json資料 5-2-4 檔案上傳與接收 5-3 完成整個新增流程 6. 製作顯示單一文章的功能 6-1 將資料庫取出的值帶入樣板 6-2 讓滑動圖可以真的運作 6-3 套用真實圖片到輪播圖中 7. 製作首頁列表功能 7-1 取得指定的新聞資料數 7-2 完成首頁輪播圖及新聞列表 7-3 製作文章摘要 7-4 加入文章分頁功能 7-5 完成側邊欄的近期新聞 8. 開始加入管理功能 8-1 讓系統記住是否為管理員 8-2 製作登入、登出功能 8-3 加入管理工具功能 8-4 製作編輯功能 8-5 初步完成更新功能 8-6 完成圖片管理 8-7 加入刪除功能 9. 完成各種小細節 9-1 完成點閱數功能 9-2 用影片替換輪播圖 9-3 加入搜尋功能 9-4 點擊學校可以列出該校文章 9-5 產生內嵌語法
5-2-3
建立縮圖並產生json資料
為了避免圖片太大,我們可以在上傳的過程中縮圖一下AI有幫我們設計一個縮圖的函數:
function resizeImage(string $sourcePath, string $destPath, int $targetWidth): bool
{
list($width, $height) = getimagesize($sourcePath);
$ratio = $targetWidth / $width;
$targetHeight = intval($height * $ratio);
$sourceImage = imagecreatefromstring(file_get_contents($sourcePath));
$destImage = imagecreatetruecolor($targetWidth, $targetHeight);
imagecopyresampled($destImage, $sourceImage, 0, 0, 0, 0, $targetWidth, $targetHeight, $width, $height);
$result = imagejpeg($destImage, $destPath, 90);
imagedestroy($sourceImage);
imagedestroy($destImage);
return $result;
}
在 store() 中,建立目錄後,判斷若是上傳檔案格式為圖片,那就進行縮圖,我們分別將縮圖寬度改為1024和320。
$uploadDir = "uploads/{$id}/";
if (!is_dir($uploadDir)) {
mkdir($uploadDir, 0777, true);
}
$mediaJson = [];
if ($_POST['upload_type'] === 'image' && !empty($_FILES['image_files']['name'])) {
foreach ($_FILES['image_files']['name'] as $key => $name) {
$tmpName = $_FILES['image_files']['tmp_name'][$key];
if ($_FILES['image_files']['error'][$key] === UPLOAD_ERR_OK) {
$extension = pathinfo($name, PATHINFO_EXTENSION);
$newName = uniqid() . '.' . $extension;
$destination = $uploadDir . $newName;
// 移動上傳的文件
move_uploaded_file($tmpName, $destination);
// 創建主圖(寬度800px)
$mainImage = $uploadDir . 'main_' . $newName;
resizeImage($destination, $mainImage, 1024);
// 創建縮略圖(寬度200px)
$thumbImage = $uploadDir . 'thumb_' . $newName;
resizeImage($destination, $thumbImage, 320);
// 刪除原始上傳的文件
unlink($destination);
$mediaJson[$mainImage] = $thumbImage;
}
}
}
最後,順便產生json內容,並且存入到該筆資中,如此,日後我們就可以簡單的掌握該新聞有哪些圖片了
if (!empty($mediaJson)) {
$updateSql = "UPDATE school_news SET media = ? WHERE id = ?";
$updateStmt = $pdo->prepare($updateSql);
$updateStmt->execute([json_encode($mediaJson), $id]);
}
1. 學好程式的幾個建議 1-1 安裝PHP運作環境 1-2 安裝 VSCode 開發工具 1-3 安裝 Composer 1-4 關於PHP8 1-5 上課範例及需求 1-6 研習時需要的學習心態 1-7 建立專案目錄 2. 開始動手做界面 2-1 請AI幫我們做前端界面 2-2 請AI幫我們做滑動圖輪播區 2-3 將首頁和滑動圖整併在一起 2-4 請AI製作文章發布界面 3. 精修完整界面樣板 3-1 安裝Smarty樣板引擎 3-2 建立前、後台樣板檔並套用之 3-3 將主樣板檔拆分成小樣板 3-3-1 美化頁首樣板檔 header.tpl 3-3-2 優化導覽列 nav.tpl 3-3-3 統一主內容樣式 main.tpl 3-3-4 微調一下側邊欄 3-3-5 修改頁尾 4. 讓表單開始有作用 4-1 傳入變數讓程式知道現在要做什麼 4-2 根據不同動作自動載入相對應樣板 4-3 修改編輯表單使之可以送出資料 4-4 製作共同頁首檔 header.php 5. 將資料存到資料庫 5-1 建立資料庫連線 5-2 用AI來產生表單儲存功能 5-2-1 接收表單的值 5-2-2 用PDO寫入資料庫 5-2-3 建立縮圖並產生json資料 5-2-4 檔案上傳與接收 5-3 完成整個新增流程 6. 製作顯示單一文章的功能 6-1 將資料庫取出的值帶入樣板 6-2 讓滑動圖可以真的運作 6-3 套用真實圖片到輪播圖中 7. 製作首頁列表功能 7-1 取得指定的新聞資料數 7-2 完成首頁輪播圖及新聞列表 7-3 製作文章摘要 7-4 加入文章分頁功能 7-5 完成側邊欄的近期新聞 8. 開始加入管理功能 8-1 讓系統記住是否為管理員 8-2 製作登入、登出功能 8-3 加入管理工具功能 8-4 製作編輯功能 8-5 初步完成更新功能 8-6 完成圖片管理 8-7 加入刪除功能 9. 完成各種小細節 9-1 完成點閱數功能 9-2 用影片替換輪播圖 9-3 加入搜尋功能 9-4 點擊學校可以列出該校文章 9-5 產生內嵌語法