Tải bản đầy đủ (.docx) (120 trang)

báo cáo cuối kì môn lập trình python đề tài website quản lí và bán máy tính

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>Lê Thanh Việt MSSV: 102210287</b>

<b>Hoàng Chiến Thắng MSSV: 102210277Nguyễn Thị Thanh Thảo MSSV: 102210278</b>

BÁO CÁO CUỐI KÌMơn: Lập trình Python

NHĨM 7

<b>Đề tài: Website quản lí và bán máy tính</b>

GVHD: Nguyễn Văn Hiếu

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

<b>PHÂN CHIA CÔNG VIỆC</b>

Họ tên Nhiệm vụ Tỉ lệ

Lê Thanh Việt- Thiết kế cơ sở dữ liệuPhía client:

- Đăng kí và xác thực email

-

Đăng nhập người dùng

- Chức năng đổi mật khẩu

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

Thiết kế cơ sở dữ liệu

Phía client:

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

<b>MỤC LỤC</b>

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

<b>I. GIỚI THIỆU1.1 Lý do chọn đề tài</b>

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

<b>1.2 Giới thiệu về đề tài </b>

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>II. TỔNG QUAN VỀ FLASK</b>

<b>2.1 Định nghĩa</b>

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

<b>2.2 Quản lý thư viện dùng trong Project </b>

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>III. CÁC CHỨC NĂNG CHÍNH</b>

<b>1. Đăng nhập và phân quyền</b>

- Mỗi user có 1 quyền nhất định. Tài khoản quản trị viên sẽ có tất cả các quyền. Tàikhoản khách hàng thì chỉ xem được các sản phẩm và thơng tin cá nhân của mình, có thể đặt hàng.

- Nếu người dùng đăng nhập với vai trị là admin thì có thể đi tới trang quản lí từ phía trang dành cho người dùng bằng ADMIN DASHNOARD

<b>2. Đăng ký tài khoản</b>

-Mặc định đăng ký tài khoản thành cơng thì sẽ trao cho tài khoản đăng ký là khách hàng. Sau khi đăng kí thành cơng thì sẽ có một email gửi đến theo email mà người đã điền trước đó để kích hoạt tài khoản. Trong trường hợp link expried thì người dùng có thể nhờ Admin kích hoạt tài khoản giùm.

-Tài khoản quản trị viên có thêm thêm tài khoản khác với đầy đủ quyền truy cập.

<b>5. Quản lý tài khoản</b>

- Quản trị viên có thể xem thơng tin của tất cả tài khoản trong hệ thống- Admin có thể tự thêm tài khoản

- Xuất file excel

- Xoá một hoặc nhiều tài khoản đã chọn- Sửa thông tin tài khoản

- Tìm kiếm theo tên, email, điện thoại, username của người dùng

- Yêu cầu: người dùng phải đăng nhập với vai trò Admin

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

<b>6. Quản lý thương hiệu:</b>

- Thêm thương hiệu vào cơ sở dữ liệu- Xem thông tin của thương hiệu- Sửa thông tin thương hiệu

- Xoá một hoặc nhiều thương hiệu cùng một lúc- Tìm kiếm theo tên thương hiệu

- Xuất file excel

- Yêu cầu: người dùng phải đăng nhập với vai trò Admin

<b>7. Quản lí sản phẩm:</b>

- Xem, sửa thơng tin sản phẩm.

- Thêm một sản phẩm theo danh mục.- Xoá một hoặc cùng lúc nhiều sản phẩm.

- Tìm kiếm sản phẩm theo tên, cân nặng sản phẩm, giá thành sản phẩm ,các bộ phận của sản phẩm như: chip, màn hình máy tín, ram, rom.

- Xuất file excel

- Yêu cầu: người dùng phải đăng nhập với vai trò Admin

- Yêu cầu: người dùng phải đăng nhập với vai trị Admin

<b>9. Quản lí biên lai:</b>

- Xem, sửa thơng tin biên lai

- Xố một hay nhiều biên lai cùng lúc

- Tìm kiếm đơn hàng theo tên của người dùng đã đặt hàng

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

- Xuất file excel

- Yêu cầu: người dùng phải đăng nhập với vai trị Admin

<b>10. Quản lí chi tiết biên lai:</b>

- Xem, sửa chi tiết biên lai

- Xoá một hay nhiều chi tiết biên lai cùng lúc

- Tìm kiếm chi tiết biên lai theo số lượng sản phẩm, giá, sản phẩm- Xuất file excel

- Yêu cầu: người dùng phải đăng nhập với vai trị Admin

<b>11. Quản lí giá ship tới từng thành phố:</b>

- Xem, sửa chi tiết giá ship của từng thành phố- Xoá một hay nhiều giá ship cùng lúc

- Thêm thông tin giá ship tới thành phố- Xuất file excel

- Yêu cầu: người dùng phải đăng nhập với vai trò Admin

<b>12. Thống kê sản phẩm theo danh mục</b>

- Yêu cầu: người dùng phải đăng nhập với vai trò Admin

<b>13. Thống kê số tiền bán được của mỗi sản phẩm</b>

- Yêu cầu: người dùng phải đăng nhập với vai trò Admin

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

<b>16. Thêm sản phẩm vào giỏ hàng và thanh toán:</b>

- Cho phép thêm sản phẩm vào giỏ hàng, hoặc bỏ ra khỏi giỏ hàng và sau đó có thểthanh tốn. Khi thanh tốn hóa đơn sẽ được lưu lại và khách hàng có thể chọn thanh toán online hoặc thanh toán khi nhận hàng. Tuy nhiên, khách hàng phải đăngnhập mới có thể sử dụng được chức năng này

<b>17. Hiển thị các sản phẩm mới nhất và bán chạy nhất</b>

<b>18. Xem chi tiết sản phẩm và hiện những sản phẩm tương tự</b>

- Người dùng click vào tên sản phẩm để xem chi tiết sản phẩm đó, đồng thời cũng gợi ý những sản phẩm cùng danh mục

<b>19. Quản lý giỏ hàng</b>

- Tăng hoặc giảm số lượng sản phẩm- Xem tổng tiền

- Tiến hành đặt hàng

- Hiển thị số sản phẩm có trong giỏ hàng

- Hiển thị các thông tin liên quan đến sản phẩm như hình ảnh, tên, mơ tả, số lượng, giá sản phẩm

<b>20. Xem lại lịch sử đặt hàng</b>

- Yêu cầu: người dùng phải đăng nhập

<b>21. Viết review cho sản phẩm22. Phân trang sản phẩm</b>

- Mỗi trang sẽ có 9 sản phẩm

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

<b>IV. PHÂN TÍCH HỆ THỐNG</b>

<b>1. Biểu đồ usecase sử dụng</b>

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

<b>1.1 Đặc tả use case người dùng </b>

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

<b>1.2 Đặc tả usecase quản trị viên</b>

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

<b>1.3 Đặc tả usecase chức năng quản lí người dùng</b>

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

<b>1.4 Đặc tả usecase chức năng quản lí thương hiệu</b>

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

<b>1.5 Đặc tả usecase chức năng quản lí sản phẩm</b>

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

<b>1.6 Đặc tả usecase chức năng quản lí đơn hàng</b>

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

<b>1.7 Đặc tả usecase chức năng quản lí hố đơn</b>

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

<b>1.8 Đặc tả usecase chức năng quản lí chi tiết hoá đơn</b>

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

<b>1.9 Đặc tả usecase chức năng quản lí giá tiền ship</b>

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">

<b>2. Biểu đồ tuần tự</b>

<b>2.1 Biểu đồ tuần tự đăng nhập </b>

</div><span class="text_page_counter">Trang 28</span><div class="page_container" data-page="28">

<b>2.2 Biểu đồ tuần tự chức năng đăng kí</b>

</div><span class="text_page_counter">Trang 30</span><div class="page_container" data-page="30">

<b>2.3 Biểu đồ tuần tự thêm sản phẩm vào giỏ hàng</b>

</div><span class="text_page_counter">Trang 31</span><div class="page_container" data-page="31">

<b>2.4 Biểu đồ tuần tự lọc sản phẩm theo giá</b>

<b>2.5 Biểu đồ tuần tự tìm kiếm sản phẩm theo tên </b>

</div><span class="text_page_counter">Trang 33</span><div class="page_container" data-page="33">

<b>V. GIAO DIỆN CHƯƠNG TRÌNH</b>

<b>1. Giao diện trang client1.1 Giao diện trang chủ</b>

</div><span class="text_page_counter">Trang 35</span><div class="page_container" data-page="35">

<b>1.2 Giao diện trang mua sắm</b>

</div><span class="text_page_counter">Trang 37</span><div class="page_container" data-page="37">

<b>1.3 Giao diện trang đăng nhập</b>

<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>1.4 Giao diện trang đăng kí tài khoản</b>

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

×