Toggle main menu visibility
下載輕鬆架
套件下載
使用手冊
發問討論
網站地圖
:::
登入
登入
帳號
密碼
登入
:::
所有書籍
「用AI學PHP8」目錄
MarkDown
2. 開始動手做界面
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 產生內嵌語法
2-2 請AI幫我們做滑動圖輪播區
用AI學PHP8 ======== 1. 試過許多免費AI，寫程式能力最強的莫過於 <https://claude.ai> 2. 大部份免費AI都有限額，限額用完了，就需停止幾個小時才能繼續用，萬一claude用完了，可以到這裡繼續使用： <https://www.coze.com/search/Sonnet?entityType=1> 3. 請貼上以下的提示詞（並<kbd>Ctrl</kbd>+<kbd>V</kbd>貼上圖片）： ```markup 請用Bootstrap 5.3 設計一個響應式的學校新聞網站。 主要元素包括： 頂部有一個藍色背景的頁眉，包含網站標題'校園藝文活動新聞'。 下方有一個簡單的導航欄，包含'回首頁'、'內嵌語法'、'發布新聞'等選項，右邊有搜尋框。 主體部分分為兩列： 左側寬列用於顯示主要新聞內容，包括大圖和文字描述，大小佔 9/12。 右側窄列用於顯示側邊欄，包含最新消息列表，大小佔 3/12。 每則新聞項目應包含： 標題 發布日期和作者 相關圖片：置於左邊，大小佔 4/12。 簡短描述：置於右邊，大小佔 8/12。 在底部添加一個簡單的分頁導航。 頁腳包含版權信息和聯繫方式。 整體設計應保持簡潔、專業的學術風格，主色調使用藍色和白色。確保網站在桌面和移動設備上均能良好顯示。 ``` [並貼上此圖片（點擊後複製圖檔即可）](https://campus-xoops.tn.edu.tw/uploads/tad_book3/file/55/schoolnews.png) 4. 得到的結果如下，請開新檔，存成 `index.html`： ```markup <html lang="zh-Hant"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>南市校園藝文活動新聞</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <style> .header { background-color: #e6f3ff; background-image: url('https://fakeimg.pl/2000x200/e6f3ff/909090?text=Header+Background'); background-size: cover; padding: 20px 0; } </style> </head> <body> <header class="header mb-4"> <div class="container"> <h1 class="text-center">南市校園藝文活動新聞</h1> </div> </header> <div class="container"> <div class="row"> <nav class="col-md-12 mb-3"> <ul class="nav nav-tabs"> <li class="nav-item"><a class="nav-link active" href="#">首頁</a></li> <li class="nav-item"><a class="nav-link" href="#">校園地圖</a></li> <li class="nav-item"><a class="nav-link" href="#">產學合作網站</a></li> </ul> </nav> </div> <div class="row"> <main class="col-md-9"> <article class="mb-4"> <h2>犀牛上顎與白堊化石有看頭</h2> <div class="row mb-3"> <div class="col-md-8"> <img src="https://fakeimg.pl/800x400/cccccc/909090?text=Main+Image" class="img-fluid" alt="主要圖片"> </div> <div class="col-md-4"> <img src="https://fakeimg.pl/400x200/cccccc/909090?text=Image+1" class="img-fluid mb-2" alt="圖片1"> <img src="https://fakeimg.pl/400x200/cccccc/909090?text=Image+2" class="img-fluid" alt="圖片2"> </div> </div> <p>2024-06-29記者某某/台南報導 石膏化石展區「台灣古生物剪影區」特展二十九日收攤囉喔，由國立工業生產中心的「犀牛上顎頭骨標本」...[內容省略]</p> </article> <article class="mb-4"> <h2>跨越國界的音樂情緣-橋中管樂團與日本開智未來高校吹奏部攜手野球應援</h2> <img src="https://fakeimg.pl/800x400/cccccc/909090?text=Orchestra+Image" class="img-fluid mb-3" alt="管樂團圖片"> <p>光武國小體育館內發出悠揚音樂，只見指揮在台前揮灑，音樂優雅且意味深長...[內容省略]</p> </article> <article> <h2>臺南慈中暑期醫院志工 看見病苦中綻放最美笑容</h2> <div class="row"> <div class="col-md-4 mb-3"> <img src="https://fakeimg.pl/400x300/cccccc/909090?text=Image+1" class="img-fluid" alt="圖片1"> </div> <div class="col-md-4 mb-3"> <img src="https://fakeimg.pl/400x300/cccccc/909090?text=Image+2" class="img-fluid" alt="圖片2"> </div> <div class="col-md-4 mb-3"> <img src="https://fakeimg.pl/400x300/cccccc/909090?text=Image+3" class="img-fluid" alt="圖片3"> </div> </div> <p>炎炎夏日當中，正當大家都一窩蜂地報名各種才藝班、夏令營時...[內容省略]</p> </article> <nav aria-label="Page navigation" class="mt-4"> <ul class="pagination justify-content-center"> <li class="page-item"><a class="page-link" href="#">«</a></li> <li class="page-item active"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">4</a></li> <li class="page-item"><a class="page-link" href="#">5</a></li> <li class="page-item"><a class="page-link" href="#">»</a></li> </ul> </nav> </main> <aside class="col-md-3"> <div class="list-group mb-4"> <a href="#" class="list-group-item list-group-item-action">回上方神按鈕</a> <a href="#" class="list-group-item list-group-item-action">快速登入</a> </div> <div class="card mb-4"> <div class="card-header">近期新聞</div> <ul class="list-group list-group-flush"> <li class="list-group-item">2024-07-31 【南市新聞】酷暑高溫...</li> <li class="list-group-item">2024-07-30 【臺南新聞】大臺南...</li> <li class="list-group-item">2024-07-20 【活動訊息】府城歸...</li> </ul> </div> </aside> </div> </div> <footer class="bg-light mt-4 py-3"> <div class="container text-center"> <p>系統設計：網你設計，電話：(06) xxxxxxxx (服務時間)</p> <p>Copyright © 2011 臺南市政府教育局資訊中心 All Rights Reserved.</p> </div> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> </body> </html> ``` </body></html>
:::
書籍目錄
展開
|
闔起
快速登入
所有討論區
Tad Search 資料查詢
懶人框架討論區
實戰PHP7+MySQL
XOOPS輕鬆架快速上手
校園網站輕鬆架一般討論區
Booking Helper 預約助手
es_stud_sign 班級報名
es charge 學生收費管理
E-Stud import 學生名冊管理
es_after_school 課後照顧報名
es_exam 學生作業繳交
ES_panel 校務行政面板
es_timetable 課表
ES_youtube 本校影音
info_whats 網路設備記錄
jill booking 場地預約
jill_notice 臨時公告
jill query 簡易查詢
jill receipt 領據填報
kw club 社團報名
kw device 設備借用管理系統
ntpc_oprnid 新北市 OpenID 登入
TinyD嵌入內容模組
ugm contact us 聯絡我們
ugm page 自訂頁面
ugm table 萬用表格
Yaoh Servicelearning 服務學習管理系統
dummy 自訂模組
soone_submit 投稿模組
Tad Adm 站長工具箱
Tad Assignment 作業上傳展示模組
Tad Blocks 進階區塊管理
Tad Book3 線上書籍
Tad Cal 行事曆
Tad Cbox 即時留言簿
Tad Discuss 討論區模組
Tad Embed 崁入模組
Tad Evaluation 評鑑檔案管理
Tad Form 萬用表單模組
Tad FAQ 常見問答
Tad Google 相簿
Tad Gallery 電子相簿
Tad Guide 安裝精靈
Tad Honor 榮譽榜
Tad idioms 背背成語
Tad Link 好站連結
Tad Login 快速登入
Tad Lunch3 午餐資訊
Tad Lunch2 營養午餐公告
Tad Meeting 會議系統
Tad Merage 線上合併套印
Tad News 本站消息
Tad Player 影音播放
Tad RSS 友站新聞
Tad Repair 維修通報
Tad SiteMap網站地圖
Tad Timeline 重要紀事
Tad Themes 佈景管理
Tad Tools 工具包
Tad TV 直播電視
Tad Uploader 檔案上傳模組
Tad Users 大量會員管理
Tad Web 多人網頁模組
MyTabs 我的頁籤
Random Quote 隨機小語
LogCounterX 網站流量統計
Yaoh light 多區塊多層次跑馬燈模組
校園網站輕鬆架功能建議區
佈景討論區
即時留言簿
search
進階搜尋
計數器
今天：
昨天：
總計：
2. 開始動手做界面
