職訓局期間，製作的html+php，總共有14個排版練習和5個作品
SQL資料夾裡放置作品所需的資料表

網頁範例連結

注意!因為用免費的網站上架，所以頁面讀取會比較慢，需要等待或再執行一次
連結 : https://hsd325.github.io/html-php/

首頁 index.html

• 有使用RWD技術

排版練習

• 總共有14個練習

---

1.抓取js資料

前端畫面

作品技術

• jquery抓取jason檔資料，再使用資料排版

使用工具

• Bootstrap v5.2.3
• jQuery v3.7.1

---

2.蛋糕首頁

前端畫面

首頁，右上角有公司介紹、產品介紹的連結

公司介紹

產品介紹頁面，查看按鈕按下會跳轉產品細節

產品細節，單純排版無功能

作品技術

首頁

• RWD功能，畫面縮小會改變排版

公司介紹

• css的before元素來排版

產品細節

• 抓取jason檔案的資料來使用

使用工具

• Bootstrap v5.2.3
• jQuery v3.7.1

---

3.飲料首頁

前端畫面

首頁未登入時，無法使用高級功能

登入後右邊會顯示登入帳號，並且可使用高級功能(商品建檔、商品瀏覽、會員管理)

商品建檔，可建造商品，如果未登入進入商品建檔會跳轉回首頁

商品瀏覽，更新按鈕可更改商品名字和價格

會員管理，下面有分頁按鈕

作品技術

所有頁面皆有使用jquery的ajax功能和資料表互動

首頁

• WOW和Animate外部插件製作物件動畫
• 運用cookie來讓網頁持續登入，就算網頁關閉，重開還是登入狀態
• jquery的監聽元件功能進行監聽和動作

會員管理

• bootstrap和陣列製作分頁
• jquery的監聽元件功能進行監聽和動作

使用工具

• Bootstrap v5.2.3
• jQuery v3.7.1
• wow.js
• animate v4.0.0

---

4.旅館資料

前端畫面

按下Google Map按鈕會跳到旅館的地圖位置

作品技術

• jQuery和陣列執行資料重組，而不是使用資料表的分類來完成

使用工具

• Bootstrap v5.2.3
• jQuery v3.7.1

---

5.統計資料

前端畫面

長條圖+圓餅圖，滑鼠移到圖表上會出現相應資訊

折線圖，滑鼠移到圖表上會出現相應資訊

作品技術

• chart.js外部插件製作統計圖表

使用工具

• Bootstrap v5.2.3
• jQuery v3.7.1
• chart.js

---

6.縣市長條圖

前端畫面

點選左邊縣市清單，右邊會出現縣市對應的旅館分布長條圖

作品技術

• axios外部插件和資料表的連接
• chart.js外部插件製作統計圖表
• jquery的監聽元件功能進行監聽和動作

使用工具

• Bootstrap v5.2.3
• jQuery v3.7.1
• axios v1.6.7
• chart.js

---

7.口罩地圖

前端畫面

左邊下拉清單可選取縣市和區域，選好後地圖和左邊清單會出現水滴座標、藥局資料

點選左邊清單或水滴座標，皆會在地圖顯示藥局資料

滑鼠中鍵滾輪可調整地圖大小，縮小時水滴座標會集合起來變成數字，放大時會重新顯現水滴座標

點選集和數字，地圖會移動到集和數字位置，並調整到適合的大小，且會顯示集合數字包含的所有水滴座標

作品技術

• axios外部插件和資料表的連接
• jquery的監聽元件功能進行監聽和動作
• Leaflet外部插件，為OMS交互式地圖，可顯示地圖和加入水滴座標
• Leaflet.markercluster外部插件，用來提升Leaflet的顯示效能，地圖縮小到一定程度水滴會隱藏並變成集合數字

使用工具

• Bootstrap v5.2.3
• jQuery v3.7.1
• axios v1.6.7
• Leaflet V1.9.4
• Leaflet.markercluster.js

---

8.全台地圖

前端畫面

可看見全台灣的藥局分布

作品技術

• axios外部插件和資料表的連接
• Leaflet外部插件，為OMS交互式地圖，可顯示地圖和加入水滴座標
• Leaflet.markercluster外部插件，用來提升Leaflet的顯示效能，地圖縮小到一定程度水滴會隱藏並變成集合數字

使用工具

• Bootstrap v5.2.3
• jQuery v3.7.1
• axios v1.6.7
• Leaflet V1.9.4
• Leaflet.markercluster.js