Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (6.59 MB, 120 trang )
<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">
<b>ĐẠI HỌC ĐÀ NẴNG</b>
<b>TRƯỜNG ĐẠI HỌC BÁCH KHOAKHOA CÔNG NGHỆ THÔNG TIN</b>
<b>SINH VIÊN THỰC HIỆN:</b>
<b><small>ĐÀ NẴNG THÁNG 5/2024</small></b>
</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">Họ tên Nhiệm vụ Tỉ lệ
- Chức năng sửa thông tin cá nhân- Xem lịch sửa đặt hàng
- Chức năng reorder- Thiết kế giao diện - Chức năng thanh tốnPhía admin:
- Quản lí người dùng- Quản lí giá tiền ship
- Phân trang
- Hiển thị sản phẩm cho khách hàng- Thêm sản phẩm vào giỏ hàng- Chức năng thanh tốn bằng momoPhía admin:
- Quản lí thương hiệu- Quản lí sản phẩm
- Thống kê số sản phẩm của mỗi
33,33%
</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">thương hiệuNguyễn Thị Thanh
Thảo <sup>-</sup>
- Sắp xếp sản phẩm theo giá sản phẩm (từ cao tới thấp, từ thấp tới cao)
- Hiển thị sản phẩm bán chạy nhất- Hiển thị sản phẩm mới nhất- Thiết kế giao diện
- Xây dựng trang hiển thị chi tiết sản phẩm
Phía admin:
- Quản lí đơn hàng- Quản lí hố đơn
- Quản lí chi tiết hố đơn
- Thống kê số tiền bán được mỗi sảnphẩm theo ngày
- Thiết kế giao diện
33,33%
</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4"><i><b>I. GIỚI THIỆU...8</b></i>
<b><small>1.1 Lý do chọn đề tài...8</small></b>
<b><small>1.2 Giới thiệu về đề tài...8</small></b>
<i><b>II. TỔNG QUAN VỀ FLASK...9</b></i>
<b><small>2.1 Định nghĩa...9</small></b>
<small>Những lợi thế của Flask:...9</small>
<small>Sự phổ biến của Flask...10</small>
<small>Cách đặt thư viện Flask...10</small>
<b><small>2.2 Quản lý thư viện dùng trong Project...11</small></b>
<i><b>III. CÁC CHỨC NĂNG CHÍNH...12</b></i>
<b><small>1. Đăng nhập và phân quyền...12</small></b>
<b><small>2. Đăng ký tài khoản...12</small></b>
<b><small>3. Quên mật khẩu...12</small></b>
<b><small>4. Đăng xuất...12</small></b>
<b><small>5. Quản lý tài khoản...12</small></b>
<b><small>6. Quản lý thương hiệu:...13</small></b>
<b><small>7. Quản lí sản phẩm:...13</small></b>
<b><small>8. Quản lí đơn hàng:...13</small></b>
<b><small>9. Quản lí biên lai:...13</small></b>
<b><small>10. Quản lí chi tiết biên lai:...14</small></b>
<b><small>11. Quản lí giá ship tới từng thành phố:...14</small></b>
<b><small>12. Thống kê sản phẩm theo danh mục...14</small></b>
<b><small>13. Thống kê số tiền bán được của mỗi sản phẩm...14</small></b>
<b><small>14. Tìm kiếm sản phẩm:...14</small></b>
<b><small>15. Sắp xếp sản phẩm:...14</small></b>
<b><small>16. Thêm sản phẩm vào giỏ hàng và thanh toán:...15</small></b>
<b><small>17. Hiển thị các sản phẩm mới nhất và bán chạy nhất...15</small></b>
<b><small>18. Xem chi tiết sản phẩm và hiện những sản phẩm tương tự...15</small></b>
</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5"><b><small>1.1 Đặc tả use case người dùng...17</small></b>
<b><small>1.2 Đặc tả usecase quản trị viên...18</small></b>
<b><small>1.3 Đặc tả usecase chức năng quản lí người dùng...20</small></b>
<b><small>1.4 Đặc tả usecase chức năng quản lí thương hiệu...21</small></b>
<b><small>1.5 Đặc tả usecase chức năng quản lí sản phẩm...22</small></b>
<b><small>1.6 Đặc tả usecase chức năng quản lí đơn hàng...23</small></b>
<b><small>1.7 Đặc tả usecase chức năng quản lí hố đơn...24</small></b>
<b><small>1.8 Đặc tả usecase chức năng quản lí chi tiết hố đơn...25</small></b>
<b><small>1.9 Đặc tả usecase chức năng quản lí giá tiền ship...26</small></b>
<b><small>2. Biểu đồ tuần tự...27</small></b>
<b><small>2.1 Biểu đồ tuần tự đăng nhập...27</small></b>
<b><small>2.2 Biểu đồ tuần tự chức năng đăng kí...28</small></b>
<b><small>2.3 Biểu đồ tuần tự thêm sản phẩm vào giỏ hàng...30</small></b>
<b><small>2.4 Biểu đồ tuần tự lọc sản phẩm theo giá...31</small></b>
<b><small>2.5 Biểu đồ tuần tự tìm kiếm sản phẩm theo tên...31</small></b>
<i><b>V. GIAO DIỆN CHƯƠNG TRÌNH...33</b></i>
<b><small>1. Giao diện trang client...33</small></b>
<b><small>1.1 Giao diện trang chủ...33</small></b>
<b><small>1.2 Giao diện trang mua sắm...35</small></b>
<b><small>1.3 Giao diện trang đăng nhập...37</small></b>
<b><small>1.4 Giao diện trang đăng kí tài khoản...39</small></b>
<b><small>1.5 Giao diện trang cá nhân...41</small></b>
<b><small>1.6 Giao diện trang đổi mật khẩu...43</small></b>
<b><small>1.7 Giao diện xem lịch sử đặt hàng...44</small></b>
<b><small>1.8 Xem chi tiết sản phẩm...46</small></b>
</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6"><b><small>1.9 Giao diện giỏ hàng...49</small></b>
<b><small>1.10 Giao diện tiến hành thanh tốn...51</small></b>
<b><small>2. Giao diện trang quản lí...55</small></b>
<b><small>2.1 Giao diện trang đăng nhập dành cho Admin...55</small></b>
<b><small>2.2 Giao diện sau khi đăng nhập thành công bằng tài khoản Admin...56</small></b>
<b><small>2.3 Giao diện trang quản lí người dùng...57</small></b>
<b><small>2.3.1 Hiển thị danh sách...57</small></b>
<b><small>2.3.2 Thêm người dùng...59</small></b>
<b><small>2.3.3 Sửa thông tin người dùng...62</small></b>
<b><small>2.3.4 Xem chi tiết thông tin người dùng...64</small></b>
<b><small>2.3.5 Xuất file excel danh sách người dùng...65</small></b>
<b><small>2.4 Giao diện quản lí thương hiệu...66</small></b>
<b><small>2.4.1 Hiển thị danh sách thương hiệu...66</small></b>
<b><small>2.4.2 Thêm một thương hiệu mới...68</small></b>
<b><small>2.4.3 Cập nhật thông tin một thương hiệu...70</small></b>
<b><small>2.4.4 Xem thông tin chi tiết của thương hiệu...72</small></b>
<b><small>2.4.5 Xuất file excel danh sách thương hiệu...73</small></b>
<b><small>2.5 Quản lí sản phẩm...74</small></b>
<b><small>2.5.1 Hiển thị danh sách sản phẩm...74</small></b>
<b><small>2.5.2 Thêm sản phẩm mới theo danh mục...76</small></b>
<b><small>2.5.3 Sửa thông tin một sản phẩm...79</small></b>
<b><small>2.5.4 Xem thông tin chi tiết một sản phẩm...82</small></b>
<b><small>2.5.5 Xuất file excel danh sách số sản phẩm...84</small></b>
<b><small>2.6 Quản lí đơn đặt hàng...85</small></b>
<b><small>2.6.1 Giao diện hiển thị danh sách đơn đặt hàng...85</small></b>
<b><small>2.6.2 Giao diện chỉnh sửa đơn đặt hàng...87</small></b>
<b><small>2.6.3 Xuất file excel danh sách đơn đặt hàng...89</small></b>
<b><small>2.7 Quản lí hoá đơn...90</small></b>
<b><small>2.7.1 Giao diện hiển thị danh sách hoá đơn...90</small></b>
<b><small>2.7.2 Xuất file excel danh sách hố đơn...91</small></b>
<b><small>2.8 Quản lí chi tiết hoá đơn...92</small></b>
</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7"><b><small>2.8.1 Giao diện hiển thị danh sách chi tiết hoá đơn...92</small></b>
<b><small>2.8.2 Giao diện xem chi tiết hố đơn...93</small></b>
<b><small>2.9 Quản lí giá tiền ship tới từng thành phố...95</small></b>
<b><small>2.9.1 Hiển thị danh sách giá tiền ship tới các thành phố khác nhau...95</small></b>
<b><small>2.9.2 Thêm giá tiền ship tới thành phố khác...97</small></b>
<b><small>2.9.3 Sửa thông tin giá tiền hoặc thành phố...98</small></b>
<b><small>2.9.4 Xem chi tiết giá tiền ship...100</small></b>
<b><small>2.9.5 Xuất file excel danh sách chi tiết giá tiền...100</small></b>
<b><small>2.10 Thống kê danh sách sản phẩm theo danh mục...101</small></b>
<b><small>2.11 Thống kê số tiền mỗi sản phầm đã bán được...102</small></b>
<b><small>10. Quản lí hố đơn...117</small></b>
<b><small>11. Quản lí chi tiết hố đơn...118</small></b>
<b><small>12. Quản lí giá ship...119</small></b>
<i><b>VII. KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN...120</b></i>
<b><small>1. Kết luận...120</small></b>
<b><small>2. Hướng phát triển...120</small></b>
</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">Nhận thấy được sự phát triển và phổ biến của các thiết bị thơng minh thì nhu cầuđể sỡ hữu một chiếc máy tính ngày càng tăng cao. Nắm bắt được nhu cầu ngày càng tăngcao ấy, chúng em quyết định xây dựng một website cho phép người dùng có thể dễ dàngsỡ hữu cho mình một chiếc máy tính
Cơng nghệ thơng tin (CNTT) ngày càng có vai trị quan trọng trong cuộc sốnghàng ngày của chúng ta.Việc ứng dụng công nghệ thông tin vào các lĩnh vực trong đờisống giúp công việc được tiến hành nhanh chóng và hiệu quả hơn.Có rất nhiều công việcmới phát triển song song cùng với CNTT, một trong số đó là lập trình wed, một hướng đidịch vụ mang lại hiệu quả kinh tế rất lớn.
Một ứng dụng của lập trình wed khá phổ biến là wedsite ecommerce và đó là đềtài của chúng em tiến hành.Ở đề tài này chúng tôi sẽ tạo ra một wedsite để người dùng cóthể mua những chiêc laptop một cách dễ dàng. Tại đây người dùng sẽ tiếp cận được nhiềuloại máy tình đến từ nhiều hãng khác nhau và dễ dàng thanh toán
Với sự phát triển của cơng nghệ thơng tin thì bây giờ chúng ta đã có rất nhiều cơngnghệ để tạo ra một wedsite cho riêng mình, ví dụ như : JavaScrip,Python,PHP,C#,… Vàở đây chug em sẽ làm về ứng dụng Flask tạo website. Các ưu điểm của Flask như giaodiện quản trị đơn giản, thư viện hỗ trợ đầy đủ, khả năng mở rộng,.. sẽ giúp cho đồ án dễdàng và tốt hơn.Kết hợp với kiến thức về cơ sở dữ liệu SQL chúng em sẽ tạo ra mộtwedsite mua bán máy tính với đầy đủ chức năng cho người dùng và admin.
</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9"><b>Flask là một micro web framework được viết bằng Python, không yêu cầu tool hay thư </b>
viện cụ thể nào. “Micro” không có nghĩa là thiếu chức năng mà “micro” theo triết lý thiết kế là cung cấp một lõi chức năng “súc tích” nhất cho ứng dụng web nhưng người dùng cóthể mở rộng bất cứ lúc nào. Flask ln hỗ trợ các thành phần tiện ích mở rộng cho ứng dụng như tích hợp cơ sở dữ liệu, xác thực biểu mẫu, xử lý upload, các công nghệ xác thực, template, email, RESTful..., chỉ khác là khi nào bạn muốn thì bạn mới đưa vào thơi.Người dùng có thể tập trung xây dựng web application ngay từ đầu trong một khoảng thời gian rất ngắn và có thể phát triển quy mô của ứng dụng tùy theo yêu cầu.
<b>Những lợi thế của Flask:</b>
bạn gõ lệnh: pip install Flask
nhỏ, gọn nên bạn hồn tồn khơng bị bó buộc bởi bộ khung cồng kềnh, khơng gặpbất cứ khó khăn nào khi cấu hình hay tổ chức ứng dụng. Khơng những thế, Flaskcịn có các ưu điểm nổi bật như: cực kỳ linh hoạt, tối giản, dễ tìm hiểu và sử dụng,định tuyến dễ dàng, rất dễ mở rộng. Vì vậy, cơng việc chính của bạn là chỉ cần xácđịnh ý tưởng, mục tiêu, tập trung vào việc xây dựng ứng dụng web mà thôi.
hiện và triển khai, từ hướng dẫn nhanh đến hướng dẫn chi tiết. Bạn có thể dễ dàngtìm kiếm, tham khảo, học tập về lập trình web application với Flask frameworkmiễn phí trên Internet.
triển tự do tổ chức dự án theo cách họ muốn
<b>Extension ecosystem: Flask cung cấp một hệ sinh thái mở rộng (extension</b>
ecosystem) phong phú cho phép người dùng mở rộng chức năng của Flask thôngqua các extension như Flask - SQLAlchemy cho việc kết nối cơ sở dữ liệu, Flask -WTF cho việc xử lý mẫu, nhiều extension khác.
và có thể được triển khai một cách dễ dàng.
</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10"><b>Sự phổ biến của Flask</b>
Thực sự chưa có một bài thống kê cụ thể về sự phố biến các framework. Việc đánh
<b>gía hiện nay dựa vào số lượng các web phổ biến dùng Flask, số lượng người đóng góp</b>
codebase, và số lượng người phát triển cả tình nguyện lẫn được trả cơng. Thì có thể chorằng Flask là framework phổ biến.
<b>Cách đặt thư viện Flask</b>
<b>Ta sẽ cài đặt Flask bằng trình lệnh pip của Python. Bây giờ bạn mở Terminal/CMD và</b>
gõ lệnh sau:
<b>pip install Flask</b>
</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">Các thư viện trong dự án được lưu trong file requirements.txt để người sử dụngcũng như tham gia phát triển dự án có thể cài đặt một cách nhanh nhất có thể
<b>file requirements.txt trong hệ thống thư mục gốc</b>
<b>Những thư viện được đặt trong file</b>
Để thêm một thư viện vào file sau khi chúng ta cài đặt thì ta sẽ sử dụng lệnh pip
<i>freeze > requirements.txt</i>
vd: Sau khi cài đặt thư viện mysqlClient để kết nối tới mysql ta sẽ chạy lệnh pipfreeze > requirements.txt để khi người dùng hoặc người phát triển clone về có thể nhậnbiết cũng như chạy lệnh pip install -r requirements.txt để load thư viện cần dùng
Chạy lệnh pip install -r requirements.txt để load thư viện
</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12"><b>Screen</b> Giao diện đăng nhập
<b>Description</b> Cho phép người dùng đăng nhập để sử dụng các chức năng của website
<b>Screen Access</b>
<b>Nhấn vào Log in ở header</b>
<b>Screen Content</b>
User name TextField – String(30)
Users.username Người dùng nhập userame tại đây
Users.password Người dùng nhập mật khẩu tại đây
Login withGoogle
<b>Screen Action</b>
<b>Action NameDescriptionSuccessFailure</b>
name và password, sau
Chuyển đến trang chủ của website
Hiển thị thông báo đăng nhập không thành công
</div><span class="text_page_counter">Trang 38</span><div class="page_container" data-page="38">đó nhấn nút Login để xác nhận đăng nhập
tài khoản, người dùng có thể nhấp vào để tới trang đăng kí tài khoản
Chuyển đến trang đăng kí tài khoản
Trong trường hợp người dùng quên mật khẩu tài khoản,có thể nhấp vào để thay đổisang mật khẩu mới
Chuyển đến trang lấy lại mật khẩu
</div><span class="text_page_counter">Trang 39</span><div class="page_container" data-page="39"><b>Screen</b> Giao diện đăng kí tài khoản
<b>Description</b> Cho phép người dùng đăng kí tài khoản
<b>Screen Access</b>
Nhấn vào <b>Registration </b>ở header
<b>Screen Content</b>
Full Name TextField - String(30)
User Name TextField String(30)
-Users.username Người dùng nhập userame tại đây
Người dùng nhập lại mật khẩu đã ghitrước đó
</div><span class="text_page_counter">Trang 40</span><div class="page_container" data-page="40">CREATE ANACCOUNT
của tất cả các ô input trong form đăng kí
<b>Screen Action</b>
<b>Action NameDescriptionSuccessFailure</b>
CREATE ANACCOUNT
Nhập thơng tincá nhân, username và password, sau đó nhấn nút CREATE AN ACCOUNT đểđăng kí tài khoản, rồi vào email đã dùng để đăng kí để kích hoạt tài khoản
Chuyển đến trang đăng nhập
Hiển thị thơng báo đăng kí khơng thành cơng
nội dung tất cả các ơ input có trong form đăng kí
Tất cả các ô input trở về trạng thái banđầu
</div>