---
# System prepended metadata

title: 01/09 Hi Dance 甲乙方第一次討論
tags: [' final project', flask]

---

---
title: 01/09 Hi Dance 甲乙方第一次討論
tags: flask, final project
---
[TOC]

---
# 01/09 Hi Dance 甲乙方第一次討論: 細節統整

## 1. Home page URL: `/index` 
![](https://i.imgur.com/STCIeki.jpg)
- 未登入者也可看到上方白框出現查看購物車選項(a cart icon)
- 收費方式固定於上方白框
- 加入我們暫定為使用者註冊連結

## 2. Login page URL: `/login`
![](https://i.imgur.com/mtktVuv.png)
- 登入頁面以新分頁展現
- Google 帳號連動延至第二版處理

## 3. Forgot password page
- 輸入註冊時之帳號(email address)，寄出驗證信
- 驗證信內容: 提供一連結導至重新設定密碼的頁面
- 驗證信成功寄出後重新載入登入頁面

## 4. Register page URL: /register URL: `/info`
![](https://i.imgur.com/VhILR7m.png)
- 註冊頁面以新分頁展現
- 註冊後寄出驗證信，信中提供連結以啟用帳號並導至登入頁面

## 5. 登入後頁面右上角之 menu 
![](https://i.imgur.com/LoCmw5Y.jpg)
- 使用者頭像延至第二版處理
- 點選menu圖標顯示下拉選單
- 選單內容:
  - 帳號設定 (/account)
  - 我的課程 (/mycourse)
  - 購物車
  - 登出

## 6. Info page (關於我們) URL: `/info`
![](https://i.imgur.com/LGlJD9v.png)
- 以單頁呈現
- 內容包含團隊介紹，粉絲專頁連結

## 7. Pay page (收費方式) URL: `/pay_info`
![](https://i.imgur.com/f7Jd7le.png)
- 以單頁呈現

## 8. Course page URL: `/course`
![](https://i.imgur.com/VDlI1gf.png)
- 各類舞風點下出現代表照片，下滑顯示舞風簡介，再下滑顯示課程選項

### To Do
- course homepage 
- 預設圖片照片（非任一舞風）
- 四個舞風連結

## 9. Course 任一舞風下滑之課程選項 URL: `/<string:style>`
![](https://i.imgur.com/bSloqRp.png)
- 參考[ASUS網站](https://www.asus.com/tw/Laptops/ASUS-Laptop-Series-Products/)
- 顯示價錢
- 點選勾選框可用於加入購物車(每個課程下方文字提示是否已購買，已購買之課程無法做勾選)
- 點選課程縮圖可進入該課程簡介
- 確認鍵執行動作為加入購物車，把勾選課程加入購物車(已購買之課程無法加入購物車)

### To Do
- 舞風照片
- 舞風簡介
- 課程縮圖（加勾勾處）（確認 button）

## 10. Course Info page (課程簡介)
![](https://i.imgur.com/58CwGD7.png)
- 影片試看
- 顯示價錢
- 右方顯示接續的下一課程縮圖(點擊可導至下一課)
- 馬上購買鍵執行動作為加入購物車
- 課程描述
- 回饋留言(v2)



## 11. 購物車 page `URL: /cart`
- 參考[Whittard購物車](https://whittard-tw.com/ShoppingCart)
- 未登入也可加入課程到購物車
- 按結帳鍵時，若尚未登入將導至登入頁面
- 可調整購買清單(刪除)
- 顯示結算總金額
- 確認結帳鍵

## 12. 結帳畫面 page URL: `/checkout`
![](https://i.imgur.com/mDvpnEE.png)
- 顯示訂單品項
- 顯示結算總金額
- 最下方顯示付款方式
- 確認付款鍵

## 13. 匯款資訊 page `URL: /pay_account`
![](https://i.imgur.com/ISlH9RL.png)
- 提供匯款帳戶

## 14. 管理者頁面
- 以特殊帳號密碼登入
- 功能:
  - 首頁以及舞風圖片之更改
  - 上傳課程影片
  - 使用者觀看影片之權限批准
  - 統計資料 (待定)

---
# 資料庫

## 使用者資料庫
- Email(account): TEXT
- Password: TEXT
- Birthday: TEXT
- 已購Courses: TEXT

## 影片資料庫
- 影片檔存於內部伺服器
- course ID: TEXT

---
# 甲方需要做的
- [ ] 確認一支教學影片要多大Size
- [ ] 購買硬碟

# version 2.0 ToDo:
- 資料庫: 劉又聖
1. Google login
   負責人: 李佳臻
2. 頭像設定（課本有頭像的範例）、navbar呈現(JavaScript會比較好做)
   - ![](https://i.imgur.com/LoCmw5Y.jpg)
   - 負責人: 田蕙瑜、陳嘉瑋
   - 提供使用者上傳照片，若無則有一**default圖像**
   - 新增資料庫欄位: 頭像圖片路徑(在static底下開一個dir)
   - **優先限制上傳檔案大小**
       - 避免使用者上傳過大的檔案，導致系統資源不足
   - 進階:限制圖片大小(美觀)

> - 資料庫for my_info.html:
	> - picture: \<path>
	> - birthday: \<string>
	> - name: \<string>

3. 管理者帳戶、後台功能
   負責人: 劉怡君
   - 使用者資料庫增加欄位，登入時需辨識管理者身分
   - 若為管理者，頭像底下新增兩個頁面:
     - 訂單管理:(/manage_orders)
       - [x] 訂單通過
       - [x] 取消訂單
     - 上傳頁面:(/upload)
       - [x] 上傳影片(含影片文字簡介)
       - [ ] 上傳舞蹈老師簡介(含照片)
    - 資料庫需求: @Shung 
      - 無條件列出所有order(訂單管理需要)
          - Done
      - 給order_id，將該筆order取消(訂單管理需要)
          - Done
      - 給course_name，從database抓物件，修改內容(update)(上傳頁面需要)
4. 回饋留言版
   負責人: **Johnson**
   - 用影片當作留言版的ID
   - 資料庫新增 留言板資料表、留言串資料表
       - 留言板存 留言板ID(使用舞蹈ID)
       - 留言串存 留言板ID、使用者ID、留言內容
   - 從資料庫取得資料後將內容Append上去


:::danger
**Database 需求**

:::


你有沒有例子ㄚ
like: 
```python=
board_id = 
uid = session.get('user_info').get('uid')
comment = 'Ya fool'
add_comment_to_db(board_id, uid, comment)
```

```python=
board_id = girldance_1
Comments = get_comment_by_board_id(board_id)
result = ''
for Comment in Comments:
  result = result + Comment.uid + ": \n" + Comment.comment

```