三小時做出「會存資料」的網站

課程大綱(8 大部分)

老師的話

如果你已能依照下面的流程,配合市面上的 AI 工具,順利做出「按送出就會保存」的網頁,恭喜你!建議直接報名進階班,我們會帶你做驗證、搜尋、匯出與簡易權限等更進一步的功能。

如果你曾經試過、卻常卡在連線設定、錯誤排查或無法上線,那這堂入門班就是為你設計的:三小時一次走完,現場驗證「能用」。

自我檢核:你是否已經會做以下三步?
  • 知道為什麼資料會消失,並能建立一個線上「資料倉庫」。
  • 做出表單畫面,並把它與資料倉庫連起來,送出就保存。
  • 會用 AI 產出可直接貼上的內容,把作品放到網路上,手機也能用。
  • 小動畫:一眼看懂流程

  • 用 AI 產生一個「看起來完成」的表單。
  • 實測:按送出→重整,資料沒有被保存。
  • 重點:沒有「資料倉庫」,資料就無處可去。

  • 註冊並登入服務(提供免費試用)。
  • 新增一個「資料表」,先放 3 個欄位:姓名、Email、留言。
  • 取得「連線資訊」(像門禁卡),稍後讓網頁知道要存到哪裡。

  • 建立一個頁面,加入姓名、Email、留言與送出按鈕。
  • 放一個「資料列表」區塊,之後用來顯示已保存的資料。
  • 預覽頁面,確認手機上也好填。

  • 把剛才取得的「連線資訊」填到頁面設定。
  • 告訴系統要把哪些欄位(姓名、Email、留言)存進資料表。
  • 測試一次:送出→顯示成功→列表看得到新資料。

  • 清楚描述目標與欄位名稱,要求「能直接貼上」的做法。
  • 遇到錯誤,把錯誤訊息貼給 AI,請它修正到能跑。
  • 安全提醒:不要把連線私鑰公開,只放在需要的地方。
範例提問「我要一個有姓名/Email/留言三欄的表單,按送出後把資料保存到我的線上資料表,並在下方顯示最新清單。請給我可直接貼上的做法與步驟。」

  • 發佈你的頁面到線上;系統會給你一個暫用網址。
  • 課程內含:實際為你申請 www.yourpersonaldomain.idv.tw 作為你的專屬網址,並協助完成 DNS 指向與 HTTPS 設定。
  • 用手機打開,測試「填寫→送出→立刻出現在列表」,再把專屬網址分享給同事朋友。

  • 新增你需要的欄位(電話、分類、日期…)。
  • 調整欄位順序與必填規則,讓填表更順手。
  • 加上資料列表的查詢/排序,快速找到需要的資料。

  • 選一個情境:單字練習、活動報名、記帳、意見收集…
  • 把欄位重新命名與分組,對應你的用途。
  • 加入提醒寄信或下載 Excel 的功能(選配)。

說明:本課以流程與成果為主,使用白話解說與已驗證範例,確保 3 小時內完成「送出即保存」。