---
# System prepended metadata

title: 01/02 Flask組內初步討論
tags: [' final project', flask]

---

---
title: 01/02 Flask組內初步討論
tags: flask, final project
---
[TOC]
- [01/09 Hi Dance 甲乙方第一次討論](https://hackmd.io/bNdD_j3ETcK5KfcGKEL7Hw)
---
# Final project:
- PPT
  - 動機
  - 設計架構
  - 分工
  - 遇到的困難
  - Future work(version 2)
    - 管理者頁面(後台)
    - Google帳號連動
    - 已登入者的nav bar頭像以及下拉式選單
- Evercam
  - PPT 解說
  - Demo

---
# Members 
  - Phoebe
  - Angela
  - Joycelyn
  - Ruby
  - Jeffrey
  - Johnson
---
# Outline
- [PPT from 國企](https://drive.google.com/file/d/1PlQvECJZFecBnbHRcqLHDmTLeaHH5RA7/view?usp=sharing)
- 每個網頁上的欄位屬性及名稱
- 設計資料庫的 schema
- 組內成員的分工
- 進度規劃 [name= Solomon]
  - 一月中完成需求確認及 Top-Down Design
  - 一月底前把程式寫出來

- 1/22 20:00 第一次驗收
- 1/25 20:00 第二次驗收
- 1/27 21:00 最後一次驗收
- 1/28 繳交作業，show國企

---
# 網頁上的欄位屬性及名稱
## 1. Home URL: `/index`
![](https://i.imgur.com/STCIeki.jpg)
> nav bar:
> 1. 關於我們： info
> 2. 收費方式：pay
> 3. 課程專區：course
> 4. 登入： login
> 5. 加入我們: join_us
> - redirect to another pages (for all five links)
- Check
  - 收費方式擺放
## 2. Login URL: `/login`
![](https://i.imgur.com/mtktVuv.png)
> 帳號：username (form)
> 密碼：password (form)
> 登入：login (submit)
> 忘記密碼：forgot_password (button)(redirect to another page)
> 快速註冊: register (button) (redirect to another page)
> - store username in a cookie (session) (Flask ch. 8 login) (ask Solomon)
### version 2.0
> 以 google 帳號繼續 (2.0)
> pop up window 
## 3. Forgot password: /forgot
> email
> submit: send password, redirect to

## 4. check email already sent URL: /confirm
> static html info
> redirect to home page

## 5. Register URL: /register
![](https://i.imgur.com/VhILR7m.png)
> 快速登入: /login
> 信箱(account)：email (StringField?)
> 密碼：password
> 再次輸入密碼：password2
> 生日:
> 註冊：login (submit), send 驗證 email, redirect to home page
> 驗證信: 內容附上一連結like`http://hidance.com/WTF?thisissomehashcodetoverify`；該Route收到參數後做驗證
> 隱私權政策 and 使用者條款：policy and term (hyperlinks)
> 註冊驗證後信中url導入登入頁面。
## 6. Menu: 
![](https://i.imgur.com/LoCmw5Y.jpg)
> 右上Menu: menu(click 顯示下拉選單 SelectField) 
  > 帳號設定：setting (button)@Version2
  > 登出：logout (button)
- 我的課程放上個人帳號欄
- 
### version 2.0
> 頭像設定


## 7. Info URL: `/info`
![](https://i.imgur.com/LGlJD9v.png)
> (圖+介紹)/人
> check how many info do they want???? (共粗來)
- 單頁呈現

## 8. Pay URL: `/pay_info`
![](https://i.imgur.com/f7Jd7le.png)
> static html info

## 9. Course URL: `/course`
![](https://i.imgur.com/VDlI1gf.png)
> 女舞: girl
> hip-hop: hip_hop
> popping: popping
> locking: locking
> - redirect to another pages (for all four links)
> 舞風簡介提議改到各舞風頁面

## 10. Course 任一舞風點入後 URL: `/style/<string:style>`

> 馬上購買：buy (改成下一頁的確認購買) @[Ref.: Asus](https://www.asus.com/tw/Laptops/ASUS-Laptop-Series-Products/)
> 點下任一舞風後 redirect 到該舞風 page, 上面不變，底下加：
> - picture
> - intro
> - courses 

![](https://i.imgur.com/bSloqRp.png)
> 確認 -> 加入購物車 (submit)把勾選課程加入購物車，並重載頁面


## 11. Course Info
![](https://i.imgur.com/58CwGD7.png)
> Current course: (from database) 
> 下一課：next_course (from database) (a single photo? yes)
> 馬上購買：buy (button)( -> 加入購物車)
> 課程簡介：intro

### To study
how to play video on html
- a new page, 專門播影片 (base), 其他 page 繼承

### 2.0
> 回饋留言：feedback

## 12. 購物車 URL: `/cart`
- add to navigation bar
- add to cart
- delete from cart
> 確認: submit, redirect to /checkout

## 13. 結帳畫面(提議從購物車畫面連過去) URL: `/checkout`
![](https://i.imgur.com/mDvpnEE.png)
> 確認: buy (submit), redirect to 匯款資訊
> 跟他說給我多少錢
> 確認給我錢


## 14. 匯款資訊 `URL: /pay_account`
![](https://i.imgur.com/ISlH9RL.png)
> static html info


## 管理者頁面
- 圖片更改
- 上傳影片
- 觀看影片權限批准
- 統計資料
  - 

---
# 資料庫的 schema
## users (table)
- email: TEXT
- password: TEXT
    - Hash Value
- phone: TEXT
- my_course: TEXT (store a looong loooong string separate each course by comma,)
- verification TEXT
## courses (table)
- course ID
- coures name
- course URL
- course price
- course intro
## orders (table)
- order_id
- user email
- buy_courses
    - will be list
- total_cost
- deadline
- is_deal

---
# 分工
- Html part: Home page + nav bar (1)(page 1 - 6) [name=Anglea]
-  Login + Register + (survey session, in textbook) (1)(page 2 - 5) [name=Ruby]
- Info + Pay_info + database (1) (page 7 - 8): [name=Johnson]
    - database: id + num
    - 
- Course + 影片置入 + 加到購物車 (2) (page 9 - 11) [name=Jeffrey, Joycelyn]
- 購物車 + 結帳 + 匯款頁面(1) (page 12 - 14) [name=Phoebe]



## navigation bar component:
- About us
- pay
- course
- my_course
- menu
- 購物車

:::danger
**Do version control**
server: everyone push to remote server
local: do your job!!!
:::

---
# 待辦事項
- [ ] 與國企約時間進行第一輪討論
  - 釐清問題
      - @info, 要列出幾個資訊？
      - @course, 各style簡介要直接放該頁面？
          - how about on the course page, contains
              - title (舞風)
              - intro (簡介)
              - 課程列表 ()
     - Youtube影片 (非公開，not 私人)
  - 詢問後臺要看哪些報表及管理功能, 進一步把 web form 設計出來
  - 一台 server
  - Officail Mail address

## Ref.
- [hahow](https://hahow.in/group/language?page=1)
- [Asus](https://www.asus.com/tw/Laptops/ASUS-Laptop-Series-Products/)

## 01/22 Q&A

### Angela
1. Nav bar 
2. URL 
3. 

### Ruby
1. 寄驗證信的sender為何?
    - Ans: 我來跟國企要郵件信箱
2. 隱私權政策與使用者條款的內容
    - Ans:    
3. 我們有主網址嗎?
    - Ans:
### Johnson
1. 有需要讓使用者自行設置ID嗎? 還是先用email當作名稱(這是我目前的作法)
- Database request
  - courses add new column **price INT** [name=Johnson]
  - **/cart**: 透過課程id取得價錢 
  - 給style，吐一個這個style的ID(短的)的list，以及這個style的價格的list。

### Joycelyn & Jeffrey


### Phoebe
1. 加入購物車時商品(cartlist)以list暫存? 存的是商品編號?
   - Ans:
2. database 會存有該商品對應的價格嗎?
   - Ans:

---
![](https://i.imgur.com/a1AXdlA.png)

----

