--- 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) ----