HTML 5 學習心得

#第六週

連接資料庫

概念流程

  1. 發布一個Google Sheet
  2. 用程式通過網絡來讀取文件
  3. 將文件導入我們的網頁當中
  4. 創建一個鏈接/按鈕來跳轉畫面
  5. 用上週學的方法，從網址中獲得指令，投放相對應的畫面

發布一個Google Sheet

這是Online Google Sheet 的例子

>>>>網址<<<<

# 如果是使用Google Sheet的話，記得要將網頁發布（Publish） 到網絡中，這樣程式才能找到我們的資料

#Google Sheet裡的第一ROW只能用英文，不然程式不能成功讀取資料

發佈到網絡以後，要回到原來的編輯頁面內。將網址複製並保存起來，這個網址要保留到待會兒使用

如此，我們第一步準備資料的工作就完成了，在這裡只是做一個示範的例子，內容可以根據自己的需求做更換。『換湯不換藥』，接下來教的方法，根據自己的需求進行修正即可

用程式通過網絡來讀取文件

套用網絡套件--Tabletop.JS

網絡套件 tabletop.js 是一個用來讀取Google Sheet 的個程式，我們提供網址（上一部分保留下來的），程式便可從網址中獲得Sheet中資料

#將我們上一部分保留的網址，粘貼複製在第11排

Call back

  • Call Back 在程式中類似一個回傳的功能，跟服務器要資料並不能保證服務器能第一時間回傳給我們
  • Call Back的概念就像：當服務器（可能是Google Sheet等等）找到資料以後，通過我們所留下的聯繫方式（Call Back）把資料回傳給我們避免我們在線上一直等回复，而浪費資源
  • 第13-17行，是tabletop.js 裡的指令集，使用方法和概念如圖顯示

完成！！！現在程式有了基本的讀取（從網絡讀取資料）並回傳（CallBack)資料的能力，下一步是要將資料整合進我們的系統，按設定呈現出來

將文件導入我們的網頁當中

#假設想要表示“標題3”，我們就設定data[2].title，就能表示出“標題3”了

到了這步，資料導入的部分就完成了，下一步是跟據我們個人的需求來運用資料庫裡的資料

創建一個鏈接/按鈕來跳轉畫面

  • 在例子當中，我設置兩套裝置，兩套的效果皆為跳轉畫面，一個是用href 來跳轉，一個是button 來跳轉
  • 當我點擊“日期四”時，畫面會跳轉到一個新的畫面，並顯示有關日期四個訊息

這部分會分成Part 1跟Part 2 來處理

Part 1：

  1. 設置href 及 button
  2. 給它們設定好跳轉畫面的方向

#設成一個file


Part 2：

  1. 根據跳轉指令，投放相對應的畫面
  2. 兩個表示法：一個是用<p>，一個是<h>

#設成一個file

畫面一

點擊“日期四”

畫面二

點擊“日期四”後的畫面

PART 1

#30.10.19.html 只是一個文件名,是自定義的(要設定成第 2Part的檔案名

為什麼到了31排才導入資料,而不是一開始就導入資料???

  • 因為每個服務器的響應速度(反應速度)不同;有的服務器快,有的服務器慢,越慢的服務器我們需要等更多的時間才能收到我們要的資料
  • 為了避免當我們跟Google拿資料時，後半段的程式卻因需要Google的資料才能處理而暫停工作，我們先將後續的步驟處理完畢，才將Google的資料導入進來
  • 以便應付網頁反應速度慢的網站

PART 2

從網址中獲得指令，投放相對應的畫面

這一Part會用到上期學的知識點,建議先回顧上期內容再回來了解這一部分

跟上一個PART 內容相似,但我們這回要套用上期用的方程式

將網址中的參數decode出來,將參數套入程式中,最後再連上資料庫,放出相對應的資料/畫面

用getElemnet的方法將內容放入網頁

處理流程

  1. 連上資料庫 >>
  2. 顯出href 或button >>
  3. 網頁遊覽者點擊選項 >>
  4. 跳轉網頁 >>
  5. 從網頁中讀取參數 >>
  6. 投放相對應的畫面>>


附加文件

  • 文件一『文檔名：30.10.19_2.html』；第一Part的部分
  • 文件二『文檔名：30.10.19.html』；第二Part的部分

這一期的心得報告花了好長好長時間才寫完，接下來要開始篩選期中作業的題目跟內容了。上到這裡以後，雖然對網頁切換有更深一步的理解，但是目前所做的版本都是比較初階的版本，想看看下高級的網頁工程師如何從開始到結束設計一個網頁