植物紀錄網站

網頁功能

• 使用者
• 新增植物(C)
• 我的植物(RUD)
• 餐飲、口罩地圖
• 代辦事項
• 管理者
• 上述使用者功能
• 後臺管理
• 使用者資料(可更新、刪除、停權會員)
• 數據分析(包括會員相關、植物的數量及加總之報表)
• 使用者種植資料(會員植物資料及植物名字、澆花時間、放置地點之報表)
• 聯絡內部(管理者資訊)

技術說明

• 首頁
• 使用ajax實現登入及註冊功能以及串接全台各縣市鄉鎮的API
• 使用cookies留存登入資料
• 將登入的帳號加在網址後方以實現使用者觀看的獨特性，如:首頁網址＋?username=xxxxx
• 使用正規表達式讓網址後方的帳號參數永遠與所登入的帳號同步（也同時解決若把網址參數改掉可登入其他人帳號之問題）
• 使用wow.js、Font Awesome及Animate.css製作視覺效果
• 使用sweetalert提示未登入網頁
• 使用bootstrap5.2的RWD技術

• 會員中心
• 使用ajax串接API取得單一會員資訊
• 使用sweetalert串接API修改會員資料並在修改後加上setTimeout延遲幾秒後再跳回原頁面

• 餐飲地圖及口罩地圖
• 使用ajax串接餐飲和口罩資料以及台灣各縣市鄉鎮的API
• 使用leftlet完成地圖大致樣貌
• 使用MarkerClusterGroup群聚個不同大小的範圍
• 使用HTML5 Geolocation API取得目前所在位置並定位

• 後台管理-數據分析
• 使用chart.js製作報表包括
• 會員總數、啟用和停權人數
• 性別統計、居住地統計
• 單一會員植物數量比較
• 單一會員植物加總之數量比較