第12次作業（模擬期中考的前測練習範例）
1.題目：建立前端網頁+後端網頁，並從前端傳遞參數到後端網頁（PHP），並上傳到bytehost網站空間：
（1）自行用Bootstrap
5寫網頁（不用模板）
（2）修改網站的title，編碼，標題，
（1）首頁，index.html
必須用bootstrap5的排版方法，建立8個超連結，如下：
（2）第1題a1.html： 玩家，莊家，玩撲克牌
請下載poker並放到hw12的目錄裡面
執行結果如下：
排版設定
1.兩個row:
<div class=”container”>
<div
class=”row”>
<div
class=”row”>
……
……
2.控制圖片位置
<img
class=”col-3 offset-1“
<img
class=”col-3 offset-4“
col-3：表示元件寬度3格
offset-1：表示與前面偏移1格
3.javascript的變數有2種：
區域變數n1
全域變數 var n1
（3）第2題a2.html à 傳遞數據到雲端p2.php去計算，並顯示
設計畫面如下：
結果如下所示：
（4）第3題a3.html à 傳遞數據到雲端p3.php去計算，並顯示
設定畫面如下：
結果如下：
（5）第4題a4.html à 傳遞數據到雲端p4.php去讀取mysql資料庫
請修改連線主機的資訊如下：
|
主機:
ccw-mysql.mysql.database.azure.com 帳號: user1 密碼: 123@Ntut Port number: 3306 資料庫名稱: firstdb 資料表：books |
設定畫面如下：
結果如下所示
（6）第5題a5.html ：設計一個bootstap 5的元件：bootstrap元件：手風琴，Flush
設定畫面如下：
請自行到bootstrap 5的官網，尋找『手風琴，Flush』元件，複製程式碼來修改
其中的顯示水果內容文字如下：
蘋果的好處
蘋果是一種營養價值豐富的水果，含有豐富的維生素 C、鉀、膳食纖維等營養成分。蘋果的好處包括：
降低膽固醇：蘋果中的膳食纖維可以幫助降低膽固醇水平，降低心臟病的風險。
預防癌症：蘋果中的多酚可以幫助預防癌症，例如結腸癌、肺癌、胰腺癌等。
改善消化：蘋果中的膳食纖維可以幫助促進消化，預防便秘。
增強免疫力：蘋果中的維生素 C 可以幫助增強免疫力，抵禦疾病。
葡萄的好處
葡萄是一種營養豐富的水果，含有豐富的維生素 C、鉀、膳食纖維、花青素等營養成分。葡萄的好處包括：
抗氧化：葡萄中的花青素具有強大的抗氧化作用，可以幫助保護細胞免受自由基的傷害。
預防心臟病：葡萄中的多酚可以幫助降低膽固醇水平，降低心臟病的風險。
預防癌症：葡萄中的多酚可以幫助預防癌症，例如結腸癌、肺癌、乳腺癌等。
改善視力：葡萄中的花青素可以幫助改善視力，預防黃斑變性等眼部疾病。
柳丁的好處
柳丁是一種營養豐富的水果，含有豐富的維生素 C、鉀、膳食纖維等營養成分。柳丁的好處包括：
增強免疫力：柳丁中的維生素 C 可以幫助增強免疫力，抵禦疾病。
預防感冒：柳丁中的維生素 C 可以幫助預防感冒。
預防心血管疾病：柳丁中的鉀可以幫助降低血壓，降低心血管疾病的風險。
預防癌症：柳丁中的維生素 C 和多酚可以幫助預防癌症，例如結腸癌、肺癌、乳腺癌等。
（7）第6題a6.html ：à 傳遞數據到雲端p6.php去讀取mysql資料庫，並作關鍵字查詢
請修改連線主機的資訊如下：
|
主機:
ccw-mysql.mysql.database.azure.com 帳號: user1 密碼: 123@Ntut Port number: 3306 資料庫名稱: firstdb 資料表：books |
設定畫面如下：
結果如下所示：
（7）第7題a7.html ：bootstrap元件：圖片輪流播放，有說明字幕(Carousel)
設定畫面如下：
請自行到bootstrap 5的官網，尋找『圖片輪流播放，有說明字幕(Carousel)』元件，複製程式碼來修改
下載3張風景圖片，請下載並放到hw12的目錄裡面：
設定3張圖片輪流播放時，顯示的字幕如下：
第1張圖片
在南極的夏天，海天一色
第2張圖片
夕陽西下，景色很漂亮
第3張圖片
夏天在公園，把帽子放在草地上
（5）上傳到byethost網站（可以處理後端網頁，php）
（6）網址上傳到zuvio的作業區，完成作業