###### tags: `網頁設計`
# 埔里美食地圖
- [網設筆記](https://hackmd.io/0Ker5OCGSRK3mdfPdTCgog?)
- [JavaScript筆記](https://hackmd.io/@jdID03HWTSSzZTQFfkQVCQ/rJWrU1uv_/%2FDvrLdvC9RN2D-z5pkAdNhQ#undefined)
## HTML5
- https://html.com/
- https://html.com/wp-content/uploads/html-cheat-sheet.pdf
#### 實作:自介表/履歷表
- 範例:https://www.codeseek.co/preview/womJzx
- `<meta content = "width = device-width">` 因應裝置調整網頁大小
- `<title>` 網頁標籤
- `h1、h2...h6` 標題大小
- `p` 段落
- `<br>` 換行


## CSS
https://www.csstutorial.net/
https://www.w3schools.com/css

## Material design

[Google Material design](https://material.io/resources)
[使用教學](https://google.github.io/material-design-icons/)

其他 icon:
[Font Awesome](https://fontawesome.com/)
[Social Icon](https://www.iconfinder.com/iconsets/free-social-icons)

front-end toolkit:
[Bootstrap](https://getbootstrap.com/)
[Bootstrap中文](https://bootstrap5.hexschool.com/)
[mdbootstrap](https://mdbootstrap.com/)

Admin Template:
[CoreUI](https://coreui.io/)

#### <meta name=”viewport” > 設定
https://medium.com/frochu/html-meta-viewport-setting-69fbb06ed3d8

#### 實作:
1. 加入CSS重新設計自我介紹頁面
2. RWD(Responsive Web Design)練習
- 挑選自己喜歡的卡牌，在特大螢幕時1 row顯示4張、大螢幕時顯示 3張、中螢幕顯示2張、小螢幕顯示1張(使用[Bootstrap Grid system](https://getbootstrap.com/docs/4.0/layout/grid/))
- 挑一張圖片，使其在螢幕寬度超過1000px 時，圖片寬度為700px；螢幕寬度介於600px與1000px 時，圖片寬度為450px；螢幕寬度小於600px 時，圖片寬度為300px、圖片高度為230px ([使用css 之 @media](https://www.runoob.com/cssref/css3-pr-mediaquery.html))
- [@media使用方法(html、css)](https://www.oxxostudio.tw/articles/201810/css-media-queries.html)
3. 在第2點的頁面中加入導覽列 (Navbar)
- [導覽列](https://bootstrap.hexschool.com/docs/4.0/components/navbar/#containers)
- `submit` 將數據提交到後端/伺服器?
- `reset` 讓按鈕重置初始質
- `button` 按鈕 按下去執行設定的活動
- 導覽列中的下拉式選單(加上javascript的插件才可以使用)
- [導覽列外觀](https://www.cyberbiz.io/helpcenter/?p=1426)

## JavaScript
https://javascript.info/
https://www.tutorialspoint.com/javascript/index.htm

[JavaScript 基本認識](http://test.domojyun.net/MEMO/JavaScript/index.html)

[Javascript 入門 {學習筆記}](https://medium.com/tkd-giant/javascript-%E5%85%A5%E9%96%80-84c4cb12d083)

[Youtube教學影片](https://www.youtube.com/playlist?list=PLEfh-m_KG4dYbxVoYDyT_fmXZHnuKg2Fq)

線上測試工具: [codepen](https://codepen.io/)
Cloud based debugger: [Google Apps Script](https://www.oxxostudio.tw/articles/201805/backend-apps-script.html#_self)

## 開發者工具
https://developers.google.com/web/tools/chrome-devtools

https://tw.alphacamp.co/blog/debug-using-chrome-devtools

https://dotblogs.com.tw/milkgreenteaprograme_c_sharp/2018/01/01/064152

https://5xruby.tw/posts/how-to-use-chrome-devtools

## CORS
[CORS 是什麼? 如何設定 CORS?](https://shubo.io/what-is-cors/)

chrome 測試時工具:
https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=zh-TW

Firefox 測試時工具:
https://addons.mozilla.org/zh-TW/firefox/addon/access-control-allow-origin/

#### 實作:
1. 使用 [Canvas](https://www.w3schools.com/html/html5_canvas.asp) 畫一張圖 ([參考資料](https://luffy.website/categories/HTML/))
2. 使用 Fetch API 取得 Open Data ([參考資料](https://www.oxxostudio.tw/articles/201908/js-fetch.html)、[什麼是API?](https://www.youtube.com/watch?v=zvKadd9Cflc))
3. 使用 [Chart.js](https://www.chartjs.org/) 呈現第2點所取得之資料，例如以柱狀圖從[局屬氣象站-現在天氣觀測報告](https://opendata.cwb.gov.tw/dataset/observation/O-A0003-001)取得的資料中呈現5個城市的相對濕度。

## Database

[SQL/NoSQL是什麼？認識資料庫管理系統DBMS](https://tw.alphacamp.co/blog/sql-nosql-database-dbms-introduction)
- 關聯式資料庫（Relational Database Menagement System, RDBMS）
- 一個或多個資料庫(table)存放
- 資料之間有明確關係
- 以 SQL 語言操作
- NoSQL 非關聯式資料庫
- 不需要即時更新UI介面
- [NoSQL資料庫設計概念導讀](https://medium.com/%E7%A7%91%E6%8A%80%E7%A0%94%E7%A9%B6%E9%99%A2/nosql%E8%B3%87%E6%96%99%E5%BA%AB%E8%A8%AD%E8%A8%88%E6%A6%82%E5%BF%B5%E5%B0%8E%E8%AE%80-113811b8f6f3)
- 法定人數架構
- CAP(consistency一致性,avaliability可用性,Partition tolerance分隔容錯)
> 有Partition tolerance才能視為NoSQL ->組合通常為PA、PC
- Base定理
- [快速認識4類主流NoSQL資料庫](https://www.ithome.com.tw/news/92507)
- 文件資料庫：ODM (Object Document Mapper)
> 將資料存放成文件(document) -> 再組合成集合(collection)
- 鍵值資料庫(Key-value)
- 記憶體資料庫(in-memory)
- 圖學資料庫(Graph)

RDBMS:
[SQLite](https://www.sqlite.org/index.html)
[MariaDB](https://mariadb.org/)
[PostgreSQL](https://www.postgresql.org/)

NoSQL:
[MongoDB](https://www.mongodb.com/)
[Redis](https://redis.io/)

資料庫操作軟體:
[DBeaver](https://dbeaver.io/)

## PHP
[How to Use PHP in HTML](https://code.tutsplus.com/tutorials/how-to-use-php-in-html-code--cms-34378)
[PHP Tutorial for Beginners: Learn in 7 Days](https://www.guru99.com/php-tutorials.html)
https://www.tutorialrepublic.com/php-tutorial/
- 將其他文件包含在PHP文件中
1. **include()** 發生錯誤腳本繼續且會發出警告
2. **include_once()**
3. **require()** 發生錯誤腳本停止且不會發出警告
4. **require_once()**
#### 實作:
1. 用 php myadmin 建立資料庫並新增一個名為"User"的Table，其中有4個欄位(id, name, username, password)，並設id為流水號且為主鍵。
2. 用 php 在 html中使用列表動態呈現"User"中所有資料。
3. 製作"User"之 [CRUD](https://zh.wikipedia.org/wiki/增刪查改) 4個API ([什麼是RESTful API?](https://medium.com/itsems-frontend/api-是什麼-restful-api-又是什麼-a001a85ab638))，並用 [Postman](https://www.postman.com/) 測試([參考資料](https://tw.alphacamp.co/blog/postman-api-tutorial-for-beginners))。
4. 配合 table、form、button 與 Javascript 完成新增、修改、刪除之功能。
- [實作CRUD](https://ithelp.ithome.com.tw/articles/10206076)
- [實作API](https://zx2515296964.medium.com/api%E7%AD%86%E8%A8%98-%E7%94%A8%E6%9C%80%E5%AF%A6%E9%9A%9B%E7%9A%84%E4%BE%8B%E5%AD%90%E5%B8%B6%E4%BD%A0%E5%BF%AB%E9%80%9F%E4%BA%86%E8%A7%A3api%E5%8F%8Arestful%E7%90%86%E5%BF%B5-%E7%B0%A1%E5%96%AE%E5%AF%A6%E4%BD%9Capi%E6%96%B9%E6%B3%95-71ea541f766b)
- [Form -> GET&post差別](https://blog.toright.com/posts/1203/%E6%B7%BA%E8%AB%87-http-method%EF%BC%9A%E8%A1%A8%E5%96%AE%E4%B8%AD%E7%9A%84-get-%E8%88%87-post-%E6%9C%89%E4%BB%80%E9%BA%BC%E5%B7%AE%E5%88%A5%EF%BC%9F.html)

## System Analysis and Design (SAD)
[系統分析與設計](http://web.nchu.edu.tw/~jlu/classes/sa.shtml)
[系統分析與設計常用圖](http://www.infolight.com.tw/WebClient/SuccessDetail.aspx?DocumentID=NDI2)

其他圖：
[Activity Diagram 簡介](http://puremonkey2010.blogspot.com/2013/11/uml-uml.html)
[Flow Chart Tutorial](https://creately.com/blog/diagrams/flowchart-guide-flowchart-tutorial/)

#### 實作:
1. 製作美食地圖 Use Case Diagram ([參考資料](https://drawio-app.com/uml-use-case-diagrams-with-draw-io/))
2. 製作美食地圖系統架構圖([參考資料：學習物件導向系統開發的六門課p45圖8](http://rapid.lib.ncu.edu.tw:8080/eDB/database/%E5%AD%B8%E7%BF%92%E7%89%A9%E4%BB%B6%E5%B0%8E%E5%90%91%E7%B3%BB%E7%B5%B1%E9%96%8B%E7%99%BC%E7%9A%84%E5%85%AD%E9%96%80%E8%AA%B2v16_PDF.pdf))
([Tool: draw.io](https://app.diagrams.net/))
3. 製作 User Flow Diagram ([參考資料：A Guide to Understanding (and Utilizing) User Flow](
https://www.springboard.com/blog/user-flow/))
User Flow Tool: https://flowmapp.com/
Wireframe Tool: https://wireframe.cc/
4. 設計美食地圖資料庫並製作 Entity-relationship diagram ([Tool: draw.io](https://app.diagrams.net/))

### 20210404
1. 在 github 上開一個 private 的 repo，並將相關系統圖push上去。
2. 共同討論系統架構圖、Userflow(Sitemap)、ERD 與 Wireframe

### 20210425
前端：
1. 截 google map 埔里地區當作測試用
2. 查找 marker tool 並進行測試。
- 點擊圖片時，讀取該位置ＸＹ值。
- 放大縮小圖片。
- 透過一定的資料結構自動呈現marker。
- 點擊marker 有popup功能

範例：https://github.com/NoticeVengus/ZoomMarker

後端：
1. 使用 wordpress 在本機架一個網站，並用 php 讀取 user table 資料。
2. 依據 ERD 建立 table 在 wordpress 資料庫中。

### 20210502
作業系統: Ubuntu

地圖 marker 資料結構（JSON）:

[{
    id:
    name:
    x:
    y:
    photo_url:
    business_hours:
    phone_number:
    score:
    blog_url:
},{
  ...
}]

#### 前端：
1. 設計登入頁面/Modal
2. 設計地圖頁面(Map 與右方表格)，並用預設資料顯示Location在地圖上(Use Leaflet)
(參考資料：[收縮欄功能](https://hsuchihting.github.io/css/20200525/1233449136/))

#### 後端：
[後端基礎](https://yakimhsu.com/project/project_w9_PHP_SQL.html)
1. 讀取 WordPress wp_users 資料表資料設計登入/登出API (參考資料: [PHP登入機制教學](https://dreamtails.pixnet.net/blog/post/23583385))
- [PHP Session](https://www.runoob.com/php/php-sessions.html)
- 在 wp_users 中新增一個欄位(欄位名稱可以自訂)存密碼，登入比對密碼時，比對該新增欄位的資料

2. 使用地圖 marker 資料結構設計下方 API
- create Location
- 需身份驗證
- read Location
- list all
- delete Location by id
- 需身份驗證

### 20210508

1. 開repo
2. 使用兩個分支 `front-end` , `back-end`

#### 前端：
- 串接後端 READ api
- 設計首頁並實作
- 首頁背景來源:亮亮畫的
- 人物來源:https://699pic.com/tupian-400798168.html
- 設計管理人員編輯 Location 之頁面

#### 後端：
- udpate Location by id
- 需身份驗證
- Use PATCH Method (參考資料: [HTTP Method](https://progressbar.tw/posts/53))

- 設計具有篩選功能之 READ API，包含呼叫 Google route API
- [取得距離](https://cloud.google.com/maps-platform/routes)
- https://developers.google.com/maps/documentation?hl=zh-tw

#### 參考資料
* [Boostrap modal](https://getbootstrap.com/docs/4.0/components/modal/)

### 20210516

[關於 LICENSE](https://www.ewdna.com/2012/02/open-source-licensegpl-lgpl-bsd-apache.html)
#### 前端
1. 用瀏覽器取得使用者經緯度(GPS) [參考資料](https://www.w3schools.com/html/html5_geolocation.asp)
- 前端取得使用者位置經緯度傳至後端，後端使用 Google Routes 用餐廳地址計算路線距離與行車時間，回傳資料給前端
2. 串接 Login API
3. 實作管理人員編輯 Location 之頁面並串接 Location CRUD API

#### 後端
1. 編寫目前之 API 說明文件
2. 閱讀 [TCP/IP 的網路層相關封包與資料](http://linux.vbird.org/linux_server/0110network_basic.php#tcpip_network) (2.3.1 -> 2.3.3)
3. 練習使用手機連至本機 server
4. 整合目前前後端程式碼並於 github 上 Merge 兩個分支
5. 使用 ssh 登入 VM 並將本機端程式上傳

### 20210523
[免費圖庫](https://pixabay.com)

[PHP md5 加密](https://www.w3schools.com/php/func_string_md5.asp)

#### 煥銘補充
* [指令直接 merge 解決衝突的方法](https://gitbook.tw/chapters/branch/fix-conflict.html)