room

1. WEB程式設計期末報告
組員：許育銓、蔡曉東、尤怡方
房
務 管 理 TITL
E
系 統

2. 2
背景資料
3
環境介紹
3
（硬體、軟體）
5
實作心得
6
附註
4
實作方法
1
作業說明
目錄
content

3. 1
Part one
作業說明

4. 作
業
說
明
此次希望以實作房務管理系統來訓練本次課
程的能力，透過新增、刪除、查詢以及介面的
美化來複習本次上課的內容，並以分工的方式
讓每個人盡可能以合作的方式完成各個部份，
在透過版本管理軟體做銜接。
預期目標為將房務管理系統的新增、刪除、
查詢功能完成，並且將網站盡可能的完善使用
者體驗，來達到最好的呈現。

5. 2
Part two
背景資料

6. 背
景
資
料
①
Python
一種易於學習、功能強大且被廣泛使用的高階
程式語言(Guido van Rossum創造)，屬於通
用型程式語言(非限定於特殊用途而設計)。
②
問題
為房務管理上提供數位系統，可新增、刪除、查
詢等功能，並以未來高擴充性以及延展性開發。
③
相關知識
需要了解敏捷
式開發以及熟
悉Vue、
Tailwind、
Flask、
BootStrap等
框架，熟悉
Python語言
並了解HTML、
CSS、
JavaScript。

7. 3
Par t three
環境介紹

8. A.
B.
環境介紹
硬體
筆記本電腦乙台，作業系統為Windows10專業版，無周邊裝置。
⚫ Flask
⚫ Heroku
⚫ Git
⚫ Python3
⚫ Vue3
⚫ Tailwind
⚫ BootStrap
軟體

9. 4
Part four
成果展示

10. 安裝Python3.7.9
步驟
使用Python3
虛擬環境建構執行環境
安裝Flask套件 開始編寫文件 透過Git分散工作
Merge各部分分支
手動測試
最終版本確定發行Release
將最終版本發行至Heroku

11. 功能清單
1.首頁概觀與房間清單(Index)
2.功能展示—登入(Login)
3.功能展示—搜尋房間(Search)
4.功能展示—新增房間(Add)
5.功能展示—刪除房間(Delete)

12. 首頁概觀(INDEX)

13. 房間資料展示:
1.名稱
2.價格
3.描述
4.預覽圖
房務功能清單與房間資料預覽(List ALL)

14. • 登入介面與使用狀態變化
功能展示—登入與登出(Login&LOGOUT)

15. 登入介紹
於用戶進入登入畫面後，
在其輸入帳號以及密碼後將其傳送至後端，
後端會先將密碼做Sha256雜湊過後在與資料庫比對是否正確，
若成功則設定Session並回傳成功，不正確則會回傳登入失敗。
圖 1 登入流程

16. 功能展示—搜尋房間(Search)

17. 房間資料輸
入:
1.名稱
2.價格
3.描述
4.預覽圖
功能展示—新增房間(ADD)

18. 實際網站https://web-finalwork.herokuapp.com/
功能展示—
刪除房間(Delete)

19. 5
Part five
實作心得

20. 實
作
心
得
第一次接觸到Flask框架，以往也僅僅只是聽說過然而並沒有
使用過，過往的經歷都是使用Django作為後端框架，然而本
次作業既然都採用Flask框架希望能於各個功能內自立自強，因
此僅僅憑印象寫出一個簡單的登入功能以及Session功能，然
後在前端方面採用以往的Vue搭配Tailwind，後端渲染模板上
也就禁止了Jinja2的功能因為與Vue相衝突。
這次作業獲益良多，除了與同學開發專案學到Git在多人開發
下如何新增分支以及合併分支，並且共同開發功能，共同分享
經驗，實在是收穫滿滿。

21. 6
Part six
附註

22. 工作分配表
許育銓
1.後端的撰寫
2.後端測試
3.後端優化
1.前端的開發
2.程式碼優化
3.前端測試
1.文件的撰寫
2.簡報的撰寫
3.網站的測試
及Bug回報

23. 謝
謝 欣 賞 TITL
E