技術 實際應用HTML / CSS 製作表單、卡片、導覽列及響應式畫面Python 處理使用者輸入、資料驗證與業務邏輯Flask 建立網址路由、接收表單、回傳...
一個完整的專案不只是程式碼，還要讓其他人知道它是做什麼的，以及如何在自己的電腦執行。步驟 1：建立 README.md在專案根目錄建立 README.md，填入...
今天不再新增功能，而是像真正開發軟體一樣，逐一測試每個功能，確保網站不是「剛好可以使用」，而是遇到錯誤輸入時也能合理處理。步驟 1：建立測試清單在專案中建立 T...
功能越多，app.py 就會越長。今天先把重複的程式碼與檔案整理好。步驟 1：確認最終專案結構my-media-library/├── app.py├── da...
今天不新增複雜功能，而是讓網站更像一個完整產品。步驟 1：在所有頁面顯示 Flash 訊息打開 templates/base.html，在 裡、{% bloc...
今天讓使用者能下載自己的收藏清單，方便用 Excel 或其他試算表軟體查看。步驟 1：在 app.py 匯入模組在最上方加入：import csvimport...
封面能讓作品卡片更有辨識度。今天先讓使用者輸入圖片網址，不做圖片上傳，避免增加檔案儲存與安全管理的複雜度。步驟 1：確認資料庫欄位Day 8 已經在 media...
今天將數字變成圖表，讓使用者知道自己的收藏主要集中在哪些分類。步驟 1：在 stats() 中取得分類資料在 app.py 的 stats() 中，加入以下查詢...
今天要讓統計頁面顯示實際資料，而不是只有一段介紹文字。步驟 1：修改 stats() 路由在 app.py 中，把原本的 stats() 函式替換成：@app....
今天不是再加一個獨立功能，而是確認前面幾天的功能能同時使用。步驟 1：統一查詢參數電影與遊戲路由都應該讀取：keyword = request.args.get...
今天要讓收藏網站具有「回憶錄」的功能，不只是作品列表。步驟 1：新增資料庫欄位在根目錄建立 migrate_day20.py：from database imp...
Day 12 已經有 1–10 分的評分欄位。今天要把它變成更容易閱讀的評分顯示，並新增依評分排序的功能。步驟 1：在作品卡片上顯示評分在 collection...
Day 17 可以搜尋名稱，今天則讓使用者依照分類找作品，例如科幻電影或動作遊戲。步驟 1：修改電影與遊戲路由在兩個路由中新增：genre = request....
今天要加入搜尋框，讓使用者輸入部分作品名稱，就能找到相符的收藏。步驟 1：修改電影與遊戲路由在 Day 16 的兩個路由中，先新增：keyword = requ...
今天要讓使用者能只查看想看的電影、已看的電影，或目前正在玩的遊戲。步驟 1：修改 movies() 與 games() 路由在 app.py 中，把這兩個路由替...
前面已經有電影頁與遊戲頁，但新增作品後，使用者必須自己選擇正確的作品類型。今天要讓表單更直覺，並讓不同類型顯示適合自己的狀態。步驟 1：修改 templates...
今天完成整個網站最重要的一組功能。步驟 1：建立編輯路由在 app.py 中加入：@app.route("/media/int:media_id/ed...
現在作品列表有名稱、年份和評分，但還不能點進去查看完整內容。今天要為每一筆作品建立獨立的詳細頁面。步驟 1：在 app.py 加入路由@app.route(&q...
今天把 Day 11 的暫時版本改成真正新增資料。步驟 1：替換 add_media() 函式在 app.py 找到原本的 add_media()，將整個函式替...
今天先做一個可以輸入作品資訊的表單。表單會包含作品名稱、類型、年份、分類、狀態、評分、心得。步驟 1：在 app.py 加入 request 和 redirec...
Day 6 的網站還是從 sample_media 讀取資料。今天要正式把它改成從資料庫查詢，這樣後續新增作品才會自動出現在頁面。步驟 1：修改 app.py將...
今天要讓資料庫真的存放作品，而不是只有空表格。步驟 1：建立 seed.py這個檔案負責放入一開始的示範資料，方便後續開發與測試。from database i...
前面幾天的收藏資料都寫在 sample_media 裡。這有一個問題：每次新增作品都得修改 Python 程式碼，而且重新啟動後，程式中手動修改的內容也不方便管...
Day 6 已加入響應式網格，今天要實際驗證並改善使用體驗。步驟 1：使用瀏覽器開發者工具 開啟網站。 按 F12。 點選裝置工具列，或按 Ctrl + Sh...
今天先不用資料庫，使用 Python 清單產生作品卡片。明天再改善手機版排版，之後才把測試資料換成 SQLite。步驟 1：在 app.py 加入測試資料在 a...
步驟 1：建立 static/style.css把以下程式碼完整放進檔案： :root {color-scheme: dark;--bg: #10131a;--...
今天的目標讓首頁、電影收藏、遊戲收藏和統計頁面都有自己的網址，而且可以透過導覽列切換。步驟 1：修改 app.py將 app.py 整份替換成以下程式碼：fro...
昨天我們直接在 Python 中回傳 HTML。這種方式適合測試，但網站越來越複雜時，把所有網頁內容塞進 Python 就會很難維護。 今天要將 HTML 放到...
今天開始正式寫程式。 確認 Python 是否安裝在 VS Code 上方選單選擇「終端機 → 新增終端機」，輸入：python --version 如果電...
今天要完成什麼？先確定網站要解決的問題，並建立一個之後可以持續擴充的專案。 我們把網站取名為 My Media Library，也就是「我的影音與遊戲收藏庫...
iThome鐵人賽
看影片追技術