作品集

排版練習

內容:

html、css、RWD的排版練習，裡面總共有14個

作品連結: 排版練習

github網址: github

抓取js資料

內容:

抓取指定的 json 文件資料，再將資料進行分類後來完成排版

作品連結: 抓取js資料

github網址: github

蛋糕首頁

內容:

有首頁、公司介紹、產品介紹、產品頁面這4頁

技術:

首頁:
使用RWD技術

產品介紹:
抓取特定jason檔案來完成排版

作品連結: 蛋糕首頁

github網址: github

飲料首頁

內容:

可訂購飲料(需會員登入)，首頁登入會員後，可使用高級技術-商品訂購+管理、全部會員管理

技術:

首頁:
1.使用 wow.js 來執行排版的動畫
2.註冊後的會員密碼會進行加密
3.使用cookie頁面重新開啟也是登錄狀態

商品建檔:
監聽各種按鈕，並將資料傳回給資料庫

會員管理:
使用bootstrap製做分頁

資料庫:
註冊、登入、商品建檔+管理、會員管理技術皆有使用資料庫進行連接

作品連結: 飲料首頁

github網址: github

旅館資料

內容:

點選左邊的清單列表，右邊會出現對應的旅館資料
點擊旅館的google map按鈕會跳轉至旅館位置

技術:

資料重組進行分類:
使用資料庫抓取資料，再用jquery進行分類，而不是依靠資料庫本身進行分類

google map api code:
只要提供經緯度就可在google map獲得相應位置

作品連結: 旅館資料

github網址: github

統計圖表

內容:

總共有長條圖+圓餅圖、折線圖這2個作品
長條圖+圓餅圖 -> 使用資料庫完成
折線圖 -> 使用axios，抓取 jason檔案完成
皆用 chart.js 製作而成

作品連結: 統計圖表

github網址: github

縣市長條圖

內容:

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

技術:

使用chart.js來製造長條圖

資料重組進行分類:
使用資料庫抓取資料，再用jquery進行分類，而不是依靠資料庫本身進行分類

作品連結: 縣市長條圖

github網址: github

口罩地圖

內容:

左邊的下拉選單選擇縣市、區域，右邊會藉由地圖、水滴座標顯示對應的藥局位置

技術:

Leaflet(OMS地圖)交互式地圖:
外部插建API，顯示地圖和增加水滴座標

Leaflet.markercluster:
外部插建API，用來提升Leaflet的顯示效能，地圖縮小時會將水滴座標集合起來

作品連結: 口罩地圖

github網址: github

全台藥局

內容:

顯示全台灣的藥局位置

技術:

Leaflet(OMS地圖)交互式地圖:
外部插建API，顯示地圖和增加水滴座標

Leaflet.markercluster:
外部插建API，用來提升Leaflet的顯示效能，地圖縮小時會將水滴座標集合起來

作品連結: 全台藥局

github網址: github