第八次上次心得

今日繼續學習google 表單的使用

當網頁要讓用戶輸入資料，如果直接顯示Google表單，畫面會顯得非常奇怪，所以我們會把表單的元素抽出來，用自己定義的form來讓用戶輸入資料。

所以我們需要使用<form>...</form>，form的input type 有很多，例如是text,submit,password,checkbox

我們可以用參數的形式，把在網頁中的資料寫到Google表單上面。

首先，我們要取得預先填入的連結，把網址的&之後的entry名字放到自己的程式裡面。再綁定試算表，就可以把用戶所輸入的資料從自己的網頁傳到Google試算表裡面。

在網頁中，form裡面的action改成JavaScript的程式，這代表由程式接手處理資料。

而程式裡面的document的是代表整個html檔，要取出裡面forms的其中一個值就需要寫成:

document.forms[“form name”][“name”].value

再用字串的相加，把網頁跟資料相加，再用window.open把網址執行。

因為這樣的頁面還是太醜，所以要用materialize來美化網頁。

在materialize找到forms的程式碼後，就把自己的程式碼修改。

之後為了開發頁面相似，內容只有一點點不一樣，我們可以使用傳參數的方法，從表單抓資料，傳回網頁，再把資料顯示在網頁上，就不用重覆寫幾10個網頁，那是用一個網頁就可以顯示出想顯示的所有資料。

decodeURIComponent是把百分比的東西轉回去原本的字，不會把收不到原來的字。

第七次上課心得

今日繼績使用materialize來製作網頁，

在網頁封面可能需要會讓用戶選擇不同的功能，有些可能會用九宮格的頁面，也有可能是使用集合的方式顯示。

所以materialize提供一個Collection的功能，可以把我們所需要的功能列表顯示出來。

另外，現在不少APP會有快速的選單，所以網頁也可以增加側欄選單，materialize也有SideNav的程式碼，而它需要用到jQuery，而且jQuery的程式碼要放在html碼後面，不然會出現問題。

把程式碼放到html檔後，就可以修改程式碼，把side nav改成適合自己網頁的風格。

SideNav跟navbar一樣，也是使用<li></li>的元素，透過修改<li>...</li>的程式碼，把裡面的元素改成自己想要的功能。

要在網頁中顯示側欄選單，就需要用到<i>...</i>。而且不一定會在全屏幕的網頁版顯示出來，可能要縮少頁面的大小才會顯示。如果要在網頁版顯示側欄選單，就要在class裡面加上show-on-large。

另外，我們也會使用collapsible來顯示內容，這個功能也是使用<li>...</li>，而動態的效果需要javaScript來支持。值得注意的是，靜態顯示可以不用javaScript，但如果是需要寫取其他資料，是動態顯示資料的話就需要用到javaScript。

網頁也會用到頁數，因此，materialize有頁數顯示的功能。如果我們需要讀取大量資料，就會需要這個功能，但這個功能是不會寫死的，會根據資料庫資料的數目來動態計算需要多少頁數，再顯示在網頁上。

有時候，我們需要讀取資料庫的資料，但需要一些時間，所以一開始要Preload，當資料拿到手，到達網頁的時候，便可以把preload的程式碼覆蓋，顯示所需的資料，這個功能便可以提示使用者先等一下，資料會馬上顯示出來。

使用以上跟之前的功能就可以完成一個行動式網頁，也可以用其他方法把網頁包成APP，就可以為不同東西進行開發。

第六次上課心得

今日上課也是在延續資料庫的部份。

除了寫網頁的人可以對資料庫增加資料，用戶也可以增加資料，所以我們可以用Google表單來讓用戶填資料。但直接讓人進入資料庫就會很容易把之前的資訊外洩出去，也會被人看到，所以用表單讓用戶輸入是一個好方法。

Google表單並沒有跟試算表連在一齊，所以要在表單裡新增一個試算表，而且欄位是要英文，因為是中文的話，在寫程式上會有困難。

有表單之後就可以把表單美化，可以把banner換掉，也可以有不同形式的選項(核取方塊格、單選、簡答)。Google表單也可以新增圖片、說明文字、影片到表單裡面。

做好表單後，可以分享給別人，把回應的試算表共用，但是只能讓別人檢視。就可以讓別人新增複本，也不會更改到之前的資料。

—————————————————————

那現在就可以用試算表跟網頁連在一齊。

把這次的表單跟之前作業的試算表連接在一起，但記得要改「發佈到網路」的選項，要改成特定的表單。不然Tabletop.js就不能讀取資料，就會出現undfined的狀況。
這個是這次作業的程式碼：https://jsfiddle.net/oeft0pp9/1/
這是它的Google表單：https://docs.google.com/forms/d/12vDUGhJmcMbHiiuQt3SROU0fcbA_6axTU4u-Gyc8qnM/edit?usp=sharing
這是它的試算表：https://drive.google.com/open?id=1Sh_5cfcrXhROC642JTo9bD85jp1jD_HmptDZ6wdPwPU