Mục tiêu của chúng tôi là không chỉ xây dựng một giao diện trực quan và thuận tiện cho người dùng mà còn tạo ra một hệ thống quản lý linh hoạt, hiệu quả trong việc kinh doanh quần áo onl
GIỚI THIỆU ĐỀ TÀI
Lý do chọn đề tài
Thuật ngữ "Bán hàng online" đã trở nên quen thuộc với nhiều người, phản ánh sự phát triển mạnh mẽ của công nghệ số trong cuộc sống Trong bối cảnh thị trường ngày càng đa dạng và phức tạp, kinh doanh online trở thành lựa chọn hấp dẫn với nhiều cơ hội Nhóm chúng tôi chọn đề tài "Website bán quần áo" nhằm bắt kịp xu hướng công nghệ và tích lũy kinh nghiệm trong lập trình web, thiết kế giao diện, và quản lý cơ sở dữ liệu Chúng tôi tin rằng phát triển website bán quần áo không chỉ áp dụng kiến thức đã học mà còn mở rộng kỹ năng thực hành và hiểu biết.
Chúng tôi hướng đến việc phát triển một giao diện thân thiện và dễ sử dụng, đồng thời xây dựng một hệ thống quản lý linh hoạt và hiệu quả cho kinh doanh quần áo trực tuyến.
Tính cấp thiết của đồ án
Phát triển một trang web bán quần áo là bước tiến thiết yếu và chiến lược quan trọng cho doanh nghiệp thời trang Trang web này không chỉ tạo ra kênh bán hàng trực tuyến mà còn mở rộng phạm vi tiếp cận khách hàng, từ đó tăng cơ hội chuyển đổi.
Trang web bán quần áo là nền tảng quan trọng để truyền tải thông điệp thương hiệu và giới thiệu sản phẩm, giúp doanh nghiệp thể hiện phong cách, xu hướng và giá trị của mình Các tính năng như xem trước sản phẩm, đánh giá và tìm kiếm linh hoạt giúp người tiêu dùng dễ dàng tìm kiếm và lựa chọn sản phẩm phù hợp Điều này không chỉ tối ưu hóa trải nghiệm người dùng mà còn thúc đẩy quyết định mua sắm và nâng cao sự hài lòng của khách hàng.
Kết luận, phát triển một trang web bán quần áo không chỉ là một chiến lược
Website tham khảo
Nhóm đã tham khảo từ website Yody (https://yody.vn/) và Uniqlo
- Về thiết kế giao diện :
Hình 1: Giao diện Website Yody.
Hình 2: Giao diện Website Uniqlo.
+ Bố cục: Trang web có bố cục sạch sẽ và hiện đại Menu chính dễ tiếp cận với các danh mục rõ ràng.
+ Tính thẩm mỹ: Trang web sử dụng thiết kế tối giản, tập trung vào hình ảnh sản phẩm, rất phù hợp cho một trang bán hàng thời trang.
- Về tương tác và trải nghiệm người dùng:
+ Điều hướng: Trang web có hệ thống điều hướng dễ dàng Các danh mục được ghi rõ ràng, người dùng có thể dễ dàng tìm thấy các phần khác.
Sản phẩm được trình bày nổi bật với các tùy chọn xem chi tiết, mang đến trải nghiệm mua sắm tương tác tốt Thông tin về tình trạng sẵn có, chi tiết sản phẩm và giá cả cần phải dễ dàng truy cập để người tiêu dùng có thể ra quyết định nhanh chóng.
Giỏ hàng và quy trình thanh toán là những yếu tố thiết yếu trong bất kỳ trang thương mại điện tử nào Biểu tượng túi mua sắm giúp người dùng dễ dàng nhận diện giỏ hàng của mình Để nâng cao trải nghiệm khách hàng, quy trình thanh toán cần được tối giản và thân thiện, giảm thiểu số bước và thông tin cần thiết, nhằm đảm bảo giao dịch diễn ra nhanh chóng và thuận lợi.
+ Giao diện đặt hàng Yody
Hình 3: Giao diện đặt hàng Yody.
Giao diện đặt hàng Uniqlo
Hình 4: Giao diện đặt hàng Uniqlo.
Thông qua việc tiến hành thử đặt hàng, nhóm nhận thấy rằng, hai trang Web trên:
+ Quy trình trực quan, từ việc chọn sản phẩm đến thêm vào giỏ hàng và tiến hành thanh toán.
Chúng tôi cung cấp đa dạng phương thức thanh toán và cam kết đảm bảo an toàn cho mọi giao dịch Sau khi đặt hàng, khách hàng sẽ nhận được email xác nhận cùng với thông tin theo dõi, giúp nâng cao trải nghiệm người dùng.
Qua đó, nhóm nhận thấy rằng 2 trang web trên là những mẫu thiết kế tốt để định hướng phát triển trang Web của nhóm.
Mục tiêu của đồ án
Nhóm chúng em thực hiện dự án nhằm xây dựng và vận hành một trang web sử dụng các công nghệ web hiện đại như HTML, CSS, và Javascript cho phần frontend, đồng thời phát triển backend bằng Node.js và MySQL.
Hệ thống hướng đến tất cả những người có nhu cầu mua sắm quần áo trực tuyến, cho phép người dùng xem và lựa chọn các sản phẩm theo màu sắc, kích cỡ, số lượng và giá cả trước khi đặt hàng Ngoài ra, trang web còn hỗ trợ chủ cửa hàng quảng bá sản phẩm trên các nền tảng khác và quản lý sản phẩm, khách hàng một cách hiệu quả Tất cả các chức năng này đều có thể được thực hiện dễ dàng qua điện thoại di động hoặc máy tính cá nhân.
Các công cụ hỗ trợ sử dụng trong đồ án
Notion là một công cụ quản lý thông tin linh hoạt, lý tưởng cho việc tổ chức dự án nhóm thông qua việc tạo trang, lập kế hoạch và ghi chú Nó cho phép cộng tác hiệu quả, phân công nhiệm vụ và theo dõi tiến độ dự án Chính vì vậy, nhóm đã quyết định sử dụng Notion để quản lý tiến độ và phân chia công việc một cách hiệu quả.
Google Meet là công cụ hữu ích cho việc tổ chức họp nhóm trong quá trình thực hiện đồ án, giúp các thành viên dễ dàng trao đổi và giải quyết những khó khăn gặp phải.
Google Drive là dịch vụ lưu trữ đám mây của Google, giúp người dùng lưu trữ và quản lý tài liệu một cách hiệu quả Nhóm chúng tôi sử dụng Google Drive để lưu trữ toàn bộ tài liệu liên quan đến đồ án, bao gồm hình ảnh, báo cáo và video demo.
Git và GitHub là công cụ quan trọng để lưu trữ và quản lý mã nguồn Chúng tôi sử dụng GitHub để lưu trữ mã nguồn cho dự án của mình, đồng thời quản lý mọi thay đổi trong mã lệnh Nhóm cũng áp dụng Git để theo dõi các phiên bản của mã nguồn, hỗ trợ việc kéo và đẩy mã một cách hiệu quả.
- Figma: Công cụ này được nhóm chúng tôi sử dụng để phác thảo giao diện của Website (UI).
Visual Studio Code là một trình soạn thảo phổ biến được nhiều nhóm sử dụng nhờ vào tính dễ cài đặt và khả năng hỗ trợ hiệu quả cho các đồ án, giúp quá trình làm việc trở nên thuận tiện và nhanh chóng.
Xampp là một môi trường phát triển PHP phổ biến, cho phép người dùng dễ dàng tạo ứng dụng web trên máy tính cá nhân Với bản phân phối Apache miễn phí, Xampp hỗ trợ thực hiện các thao tác một cách đơn giản và hiệu quả Nhận thấy những ưu điểm vượt trội của Xampp, nhóm chúng tôi đã quyết định sử dụng công cụ này để hỗ trợ phát triển dự án, mang lại hiệu quả cao trong quá trình làm việc.
Các công nghệ và thư viện sử dụng trong đồ án
HTML, hay ngôn ngữ đánh dấu siêu văn bản, là công cụ chính để thiết kế các trang web thông qua việc sử dụng các thẻ đánh dấu Nó kết hợp siêu văn bản, cho phép xác định liên kết giữa các trang, với ngôn ngữ đánh dấu, giúp xác định cấu trúc và thao tác trên nội dung văn bản Trình duyệt sử dụng HTML để hiển thị văn bản, hình ảnh và các nội dung khác theo định dạng mà người dùng mong muốn.
CSS, viết tắt của Cascading Style Sheets, là ngôn ngữ thiết kế dùng để tạo kiểu cho trang web, cho phép áp dụng các kiểu như màu sắc, font chữ, căn lề và kích thước cho các phần tử HTML Nó giúp kiểm soát bố cục của nhiều trang web cùng lúc, tiết kiệm thời gian và công sức Bên cạnh đó, CSS còn cho phép tạo ra các hiệu ứng động và tương tác với người dùng, như chuyển động, chuyển đổi và biến đổi.
JavaScript là ngôn ngữ lập trình quan trọng giúp tạo ra các trang web tương tác và sống động Nó cho phép thay đổi nội dung, thuộc tính và kiểu dáng của các phần tử HTML, phản ứng với hành động của người dùng, cũng như gửi và nhận dữ liệu qua mạng Ngoài ra, JavaScript còn hỗ trợ tạo ra các hiệu ứng đồ họa và hoạt hình hấp dẫn.
1.6.2 Các công nghệ Back-end
Node.js là một môi trường mã nguồn mở dành cho máy chủ và ứng dụng mạng, cho phép phát triển ứng dụng web hiệu quả Với thư viện tích hợp sẵn, Node.js có khả năng hoạt động như một máy chủ web mà không cần sử dụng phần mềm bên ngoài như Nginx, Apache HTTP Server hay IIS.
MySQL là hệ quản trị cơ sở dữ liệu mã nguồn mở, cho phép người dùng dễ dàng truy cập và sử dụng Nó sử dụng ngôn ngữ truy vấn có cấu trúc (SQL) để tương tác với cơ sở dữ liệu MySQL hoạt động theo mô hình client-server, trong đó máy chủ MySQL lưu trữ và quản lý dữ liệu, trong khi các máy tính khác kết nối để thực hiện các truy vấn dữ liệu.
Quy trình làm việc
Việc lựa chọn phương pháp phát triển website là rất quan trọng trong quá trình xây dựng và thiết kế, vì nó ảnh hưởng đến hiệu suất, bảo trì, chi phí, thời gian, tài nguyên và kết quả sản phẩm.
Việc lựa chọn phương pháp phát triển website là rất quan trọng, vì vậy nhóm chúng tôi đã quyết định áp dụng mô hình thác nước (Waterfall) cho dự án của mình Mô hình này có nhiều ưu điểm, bao gồm sự phù hợp với các dự án yêu cầu ổn định và ít thay đổi, cấu trúc đơn giản và dễ hiểu Các bước phát triển được thực hiện theo trình tự tuyến tính, giúp dễ dàng quản lý và theo dõi tiến độ dự án, đồng thời đảm bảo chất lượng sản phẩm thông qua việc áp dụng các tiêu chuẩn và quy trình.
Hình 5: Mô hình thác nước.
Xây dựng và thiết kế website bán quần áo theo mô hình thác nước:
Để xây dựng một trang web bán quần áo hiệu quả, cần thu thập và phân tích rõ ràng các yêu cầu, bao gồm các chức năng cơ bản như tìm kiếm sản phẩm, đặt hàng và thanh toán Ngoài ra, cần chú trọng đến các tính năng bổ sung như quản lý tài khoản khách hàng, cũng như yêu cầu về giao diện và trải nghiệm người dùng để đảm bảo sự hài lòng và tiện lợi cho khách hàng.
Thiết kế web bao gồm việc phát triển phần mềm, lựa chọn ngôn ngữ lập trình và quản lý lưu trữ dữ liệu Quá trình này yêu cầu xây dựng một thiết kế tổng thể cho trang web, tập trung vào giao diện người dùng và cơ sở dữ liệu Ngoài ra, cần chia nhỏ thiết kế thành các phần cụ thể như trang chủ, trang sản phẩm, giỏ hàng, thanh toán và các trang chi tiết sản phẩm để đảm bảo tính khả thi và hiệu quả.
Dựa trên thiết kế đã hoàn thiện, tiến hành xây dựng website với các chức năng cơ bản như tìm kiếm, đặt hàng và thanh toán Đồng thời, kết nối với cơ sở dữ liệu để lưu trữ thông tin sản phẩm và đơn hàng một cách hiệu quả.
Kiểm thử website là quá trình kiểm tra các hoạt động, chức năng và giao diện của trang web để phát hiện và sửa chữa kịp thời các lỗi.
Sau khi hoàn thành việc tạo ra website, bước tiếp theo là triển khai nó vào môi trường thực tế để người dùng có thể sử dụng và trải nghiệm Việc đảm bảo website hoạt động hiệu quả là rất quan trọng để mang lại sự hài lòng cho người dùng.
PHÂN TÍCH HỆ THỐNG
Mô tả website
- Tên website: Website bán quần áo: G5 Shop
Trang web sẽ cung cấp tính năng hiển thị danh mục sản phẩm rõ ràng và cho phép người dùng dễ dàng tìm kiếm sản phẩm Giao diện được thiết kế thân thiện, tương thích với nhiều thiết bị, mang đến trải nghiệm mua sắm trực tuyến thuận lợi cho người dùng.
- Hệ thống sẽ được tích hợp các tính năng như giỏ hàng, theo dõi đơn hàng,tài khoản người dùng.
Yêu cầu website
Các chức năng chính của hệ thống:
1 Đăng ký: Chức năng này cho phép người dùng(User) có thể đăng ký tài khoản, cung cấp thông tin cá nhân cho hệ thống.
2 Đăng nhập: Chức năng này nhằm mục đích xác thực người dùng trước khi tương tác với hệ thống nhằm cung cấp quyền cũng như hạn chế quyền trong hệ thống Website.
3 Sửa thông tin cá nhân: Chức năng này cho phép người dùng chỉnh sửa thông tin cá nhân của mình sao cho đúng.
4 Đổi mật khẩu: Chức năng này cho phép người dùng hoặc quản trị viên thay đổi lại mật khẩu trong trường hợp nghi ngờ mật khẩu bị rò rỉ hoặc mật khẩu đã được sử dụng lâu dài cần được thay thế.
5 Đăng xuất: chức năng này cho phép đăng xuất tất cả người dùng cũng như quản trị viên trong hệ thống.
6 Xem sản phẩm: Chức năng này cho phép người dùng xem xét tổng quan về sản phẩm như chất liệu, hình ảnh, kích thước, màu sắc, miêu tả, giá
7 Mua sản phẩm/Thêm sản phẩm vào giỏ hàng: Chức năng này dùng để xác định nhu cầu người dùng, người dùng có thể mua ngay hoặc lực chọn bỏ vào giỏ hàng cá nhân để mua sau.
8 Quản lý người dùng: Chức năng này cho phép Quản trị viên quản lý người dùng, xoá người dùng.
9 Quản lý đơn hàng: Chức năng này cho phép Quản trị viên quản lý đơn
10 Quản lý sản phẩm: Chức năng này cho phép Quản trị viên quản lý sản phẩm, xóa sản phẩm, thay đổi thông tin sản phẩm cũng như thêm sản phẩm.
Tổng quan hệ thống
Bảng phân loại tác nhân
ID Tên tác nhân Mô tả
A1 Khách Là những người dùng nhưng chưa đăng nhập vào hệ thống, chưa có tài khoản.
Khách hàng A2 là những người dùng đã đăng nhập vào hệ thống và có đầy đủ thông tin tài khoản Vai trò của họ bao gồm việc đăng ký, tạo tài khoản và cung cấp thông tin như địa chỉ, email, và số điện thoại để hỗ trợ quá trình mua sắm và giao hàng.
Quản trị viên (Admin) là người chịu trách nhiệm quản lý hệ thống và cửa hàng, đóng vai trò quan trọng trong việc quản lý sản phẩm và nhân viên Họ quyết định các chiến lược kinh doanh, bao gồm việc xác định loại sản phẩm và mức giảm giá.
Bảng 1: Phân loại tác nhân.
2.3.1.2 Mối quan hệ giữa các tác nhân
Trang web của chúng tôi được quản lý bởi một quản trị viên, người chịu trách nhiệm điều hành hoạt động của cửa hàng Quản trị viên thực hiện các nhiệm vụ quan trọng như xác nhận đơn hàng, quản lý nội dung trang web và tương tác với khách hàng khi cần thiết.
Vì vậy, chúng tôi đã bước đầu định nghĩa các lớp đối tượng cho từng loại người dùng, cụ thể:
Lớp "Khách" là nhóm người dùng có ít thao tác nhất trên trang web, vì họ chỉ tham quan mà không cung cấp thông tin nào cho cơ sở dữ liệu Nhóm này thuộc về người dùng cuối và cần đăng ký để chuyển sang lớp đối tượng tiếp theo - Lớp khách hàng.
Lớp khách hàng được định nghĩa là lớp tác nhân kế thừa từ lớp “Khách”
Nghĩa là một người dùng sau khi đăng ký thì mới có thể trở thành khách hàng.
Lớp quản trị viên là lớp đối tượng trong nhánh tiếp theo của người dùng cuối.
Người dùng cuối là thuật ngữ chỉ tất cả các loại người sử dụng, không giới hạn ở một nhóm cụ thể nào Đối tượng người dùng cuối có thể bao gồm cả quản trị viên, khách hàng và khách.
- Biểu đồ mối quan hệ các lớp đối tượng:
Hình 6: Sơ đồ mối quan hệ các lớp đối tượng.
Bảng mô tả ký hiệu
STT Ký hiệu, từ viết tắt Định nghĩa Miêu tả
1 A1, A2 Actor Là những từ đại diện cho những tác nhân trong hệ thống.
2 UC1.01 Use case Đại diện cho những chức năng có trong hệ thống.
4 [Nội dung] Option Biểu diễn cho những hành động lựa chọn.
Bảng 2: Mô tả ký hiệu.
Bảng mô tả các chi tiết trong sơ đồ tuần tự
STT Chi tiết Đại diện
1 Đại diện cho tác nhân.
2 Đại diện cho giao diện mà tác nhân sẽ tương tác.
3 Đại diện cho hệ quản trị cơ sở dữ liệu.
4 Đại diện cho các thành phần khác tham gia sơ đồ.
5 Đại diện cho các thành phần model
6 Đại diện cho thành phần điều khiển.
7 Đại diện cho thời gian hoạt động của một hành động.
8 Đại diện cho các hành động có sự tương tác của tác nhân.
9 đại diện cho các hành động tự động, không cần sự can thiệp của tác nhân, được hệ thống trả về ngay sau khi yêu cầu của tác nhân được thực hiện.
10 Đại diện cho một thành phần nào đó tự gọi chính bản thân nó.
Bảng 3: Bảng mô tả các chi tiết trong sơ đồ tuần tự.
- Những use case được tổng quát hoá:
ID Chức năng Tác nhân
UC1.04 Cập nhật mật khẩu A3, A2
Bảng 4: Use case những chức năng được tổng quát hoá.
ID Chức năng Tác nhân
UC2.02 Quản lý đơn hàng A3
UC2.04 Quản lý sản phẩm A3
UC2.07 Sửa thông tin sản phẩm A3
Bảng 5: Use case quản trị viên.
ID Chức năng Tác nhân
UC3.03 Xóa sản phẩm khỏi giỏ hàng A2
UC3.04 Xem trạng thái giao hàng sản phẩm A2
UC3.05 Xem thông tin cá nhân A2
UC3.06 Sửa thông tin cá nhân A2
Bảng 6: Use case khách hàng.
2.3.3.2 Yêu cầu phi chức năng
STT Yêu cầu Mô tả
1 Giao diện người dùng Giao diện thân thiện, dễ dàng sử dụng.
2 Hiệu suất Đáp ứng khả năng truy cập cho nhiều người cùng trong một khoảng thời gian.
3 Bảo mật Đảm bảo tính toàn vẹn, riêng tư cho thông tin khách hàng Cũng như đảm bảo cho trang Web khó xâm nhập
4 Khả năng truy cập Hỗ trợ khả năng tự động phân giải tên miền và truy cập tới trang Web khi có link.
5 Hỗ trợ khách hàng Phản hồi thắc mắc, yêu cầu của khách hàng.
6 Thời gian thực Mọi thay đổi được thực hiện nhanh chóng để đồng bộ hoá hiển thị cho người dùng.
Đặc tả yêu cầu chức năng
2.4.1 Sơ đồ use-case tổng
2.4.2 Đặc tả những use case được tổng quát hoá
Tên chức năng UC1.01 - Đăng ký
Tác nhân thực hiện A3 - Quản trị viên, A1 - Khách
Mô tả Người dùng cuối thực hiện việc đăng ký tài khoản
Sau khi hoàn tất đăng ký tài khoản, người dùng cuối sẽ được xác định là khách hàng Đối với quản trị viên, việc đăng ký quyền quản trị viên sẽ được thực hiện thông qua tài khoản Gmail Điều kiện để kích hoạt tài khoản là người dùng cuối phải chọn chức năng đăng ký.
Tiền điều kiện Người dùng cuối chưa đăng ký tài khoản, cũng như chưa có thông tin lưu trên hệ thống.
Hậu điều kiện Người dùng cuối đăng ký tài khoản thành công và hệ thống có thể hiển thị thông tin về Người dùng khi cần thiết.
Luồng sự kiện chính 1 Người dùng chọn chức năng đăng ký.
2 Hệ thống gửi cho người dùng form đăng ký.
3 Người dùng nhập thông tin cá nhân, Email, mật khẩu và mật khẩu xác nhận.
4 Người dùng xác nhận đăng ký bằng cách nhấn
Bảng 8: Đặc tả use case đăng ký.
5 Hệ thống kiểm tra thông tin chi tiết(A1)[Khách] [Quản trị viên].
5.1a Ghi nhận, bảo mật thông tin và lưu thông tin vào
Cơ sở dữ liệu người dùng.
5.2a Hệ thống chuyển người dùng tới giao diện trang chủ.
5.1b Hệ thống xác thực Email(A2).
5.2b Hệ thống tiến hành thao tác bảo mật thông tin và lưu thông tin vào cơ sở dữ liệu quản trị.
5.3b Hệ thống chuyển người dùng tới giao diện quản trị viên.
6 Thông báo đăng ký thành công.
Hệ thống thông báo trong luồng sự kiện phụ A1 sẽ thông báo nếu thông tin khách hàng đã tồn tại và có tài khoản trong hệ thống Ngoài ra, hệ thống cũng sẽ cảnh báo khi mật khẩu không đủ mạnh hoặc khi mật khẩu xác nhận không khớp.
A2 - Email có định dạng đúng với định dạng của shop, nhưng không được cung cấp từ shop.
6 Thông báo đăng ký không thành công.
Hình 8: Sơ đồ tuần tự đăng ký.
Tên chức năng UC1.02 - Đăng nhập
Tác nhân thực hiện A1 - Khách, A3 - Quản trị viên
Mô tả Người dùng cuối thực hiện việc nhập tài khoản. Điều kiện kích hoạt Người dùng cuối chọn chức năng đăng nhập.
Tiền điều kiện Người dùng cuối chưa đăng nhập tài khoản.
Bảng 9: Đặc tả use case đăng nhập.
Hậu điều kiện Người dùng cuối đăng nhập tài khoản thành công. Luồng sự kiện chính 1 Người dùng chọn chức năng đăng nhập.
2 Hệ thống gửi cho người dùng form đăng nhập.
3 Người dùng nhập Email và mật khẩu.
4 Người dùng xác nhận đăng nhập bằng cách nhấn
5 Hệ thống kiểm tra thông tin Email và mật khẩu(A1) [Khách hàng(Role = 2)][Quản trị viên(Role = 1)]. [Khách hàng]
5.1a Hệ thống xác thực người dùng.
5.2a Hệ thống chuyển người dùng tới giao diện trang chủ.
5.1b Hệ thống xác thực người dùng.
5.2b Hệ thống chuyển người dùng tới giao diện quản trị viên.
6 Thông báo đăng nhập thành công
Luồng sự kiện phụ A1 - Hệ thống thông báo Email hoặc mật khẩu không khớp.
6 Thông báo đăng nhập không thành công.
Hình 9: Sơ đồ tuần tự đăng nhập.
Bảng 10: Đặc tả use case đăng xuất.
Tên chức năng UC1.03 - Đăng xuất.
Tác nhân thực hiện A3 - Quản trị viên, A2 - Khách hàng.
Mô tả Người dùng cuối thực hiện đăng xuất tài khoản. Điều kiện kích hoạt Người dùng cuối chọn chức năng đăng xuất.
Tiền điều kiện Người dùng cuối chưa đăng xuất tài khoản.
Hậu điều kiện Người dùng cuối đăng xuất tài khoản thành công. Luồng sự kiện chính 1 Người dùng trang “Tài khoản”.
2 Hệ thống hiển thị thông tin tài khoản.
3 Người dùng nhấn nút “đăng xuất”.
4 Hệ thống điều hướng người dùng tới trang chủ chưa đăng nhập.
Hình 10: Sơ đồ tuần tự đăng xuất.
Bảng 11: Đặc tả use case Cập nhật mật khẩu.
Tên chức năng UC1.04 - Cập nhật lại mật khẩu.
Tác nhân thực hiện A3 - Quản trị viên, A2 - Khách hàng.
Người dùng cuối có thể cập nhật mật khẩu khi cảm thấy mật khẩu cũ không còn an toàn hoặc sau một thời gian dài sử dụng Để thực hiện việc này, người dùng cần chọn chức năng thay đổi mật khẩu sau khi đã đăng nhập thành công vào hệ thống Kết quả là người dùng sẽ có mật khẩu mới an toàn hơn.
Luồng sự kiện chính 1 Người dùng cuối chọn chức năng thay đổi mật khẩu.
2 Hệ thống hiển thị form đổi mật khẩu.
3 Người dùng nhập mật khẩu cũ và mật khẩu mới.
4 Người dùng xác nhận đổi mật khẩu
5 Hệ thống thông báo đổi mật khẩu thành công
Luồng sự kiện phụ A1- Hệ thống thông báo mật khẩu chưa đủ mạnh hoặc mật khẩu cũ không khớp
5 Hệ thống thông báo đổi mật khẩu không thành công
Hình 11: Sơ đồ tuần tự đổi mật khẩu.
Bảng 12: Đặc tả use case tìm kiếm.
Tên chức năng UC1.05 - Tìm kiếm.
Tác nhân thực hiện A3 - Quản trị viên, A1 - Khách, A2 - Khách hàng.
Mô tả Người dùng cuối tìm kiếm sản phẩm. Điều kiện kích hoạt Người dùng cuối chọn chức năng tìm kiếm.
Tiền điều kiện Người dùng cuối truy cập vào cửa hàng.
Hậu điều kiện Người dùng cuối tìm kiếm sản phẩm thành công. Luồng sự kiện chính 1 Người dùng cuối nhấn vào ô tìm kiếm.
2 Người dùng cuối nhập tên sản phẩm cần tìm.
3 Hệ thống xác thực yêu cầu(A1).
4 Hệ thống đề xuất sản phẩm theo yêu cầu.
Luồng sự kiện phụ A1 - Hệ thống không tìm thấy sản phẩm như mô tả
4 Hệ thống xuất thông báo không tìm thấy sản phẩm phù hợp.
Hình 12: Sơ đồ tuần tự tìm kiếm.
Bảng 13: Đặc tả use case xem sản phẩm.
Tên chức năng UC1.06 - Xem sản phẩm.
Tác nhân thực hiện A3 - Quản trị viên, A1 - Khách, A2 - Khách hàng.
Người dùng cuối có thể xem chi tiết sản phẩm khi họ nhấn chọn món ăn mong muốn Điều này chỉ xảy ra khi người dùng đã truy cập vào trang web.
Hậu điều kiện Người dùng cuối xem được mọi chi tiết về sản phẩm.
Luồng sự kiện chính 1 Người dùng cuối nhấn chọn tên sản phẩm hoặc hình ảnh sản phẩm.
2 Hệ thống xác định yêu cầu.
3 Hệ thống truy xuất dữ liệu và hiển thị kết quả.Luồng sự kiện phụ
Hình 13: Sơ đồ tuần tự xem sản phẩm.
2.4.3 Đặc tả use case quản trị viên
Sơ đồ use-case Quản trị viên
Hình 14: Sơ đồ use-case Quản trị viên.
Bảng 14: Đặc tả use case quản lý người dùng.
Tên chức năng UC2.01 - Quản lý người dùng.
Tác nhân thực hiện A3 - Quản trị viên.
Quản trị viên có trách nhiệm quản lý số lượng người dùng đã đăng ký trong hệ thống Để kích hoạt chức năng này, quản trị viên cần chọn tùy chọn quản lý người dùng Điều kiện tiên quyết là quản trị viên phải đăng nhập thành công vào hệ thống.
Hậu điều kiện Quản trị viên xem được số lượng người dùng đã đăng ký.
Luồng sự kiện chính 1 Quản trị viên chọn chức năng quản lý người dùng.
2 Hệ thống xác định yêu cầu.
3 Hệ thống truy xuất dữ liệu và hiển thị kết quả.Luồng sự kiện phụ
Hình 15: Sơ đồ tuần tự quản lý người dùng.
Bảng 15: Đặc tả use case quản lý đơn hàng.
Tên chức năng UC2.02 - Quản lý đơn hàng.
Tác nhân thực hiện A3 - Quản trị viên.
Quản trị viên có trách nhiệm theo dõi số lượng và tình trạng đơn hàng Để kích hoạt chức năng quản lý đơn hàng, quản trị viên cần chọn tùy chọn tương ứng trong hệ thống Điều kiện tiên quyết là quản trị viên phải đăng nhập thành công vào hệ thống.
Hậu điều kiện Quản trị viên xem được chi tiết số lượng đơn hàng và tình trạng đơn hàng.
Luồng sự kiện chính 1 Quản trị viên chọn chức năng quản lý đơn hàng.
2 Hệ thống xác định yêu cầu.
3 Hệ thống truy xuất dữ liệu và hiển thị kết quả.Luồng sự kiện phụ
Hình 16: Sơ đồ tuần tự quản lý đơn hàng.
Tên chức năng UC2.03 - Xoá đơn hàng.
Tác nhân thực hiện A3 - Quản trị viên.
Mô tả Quản trị viên xoá những đơn hàng đã được giao thành công. Điều kiện kích hoạt Quản trị viên chọn chức năng xoá đơn hàng.
Trong quá trình quản lý đơn hàng, quản trị viên chỉ có thể xóa đơn hàng khi đơn hàng đó đã được giao thành công.
Luồng sự kiện chính 1 Quản trị viên chọn chức năng quản lý đơn hàng.
2 Hệ thống hiển thị danh sách đơn hàng.
3 Quản trị viên chọn đơn hàng cần xoá.
4 Quản trị viên nhấn “Xóa” để xóa đơn hàng(A1).
5 Hệ thống hiển thị form xác nhận xoá đơn hàng.
6 Khách hàng xác nhận xóa bằng nhấn “Xóa”.
7 Hệ thống xác nhận yêu cầu.
8 Hệ thống xoá đơn hàng và cập nhật lại dữ liệu.
9 Thông báo xóa thành công.
Luồng sự kiện phụ A1 - Hệ thống xác nhận đơn hàng đang trong trạng thái chưa giao.
9 Thông báo xoá không thành công.
Bảng 16: Đặc tả use case quản lý đơn hàng.
- Sơ đồ tuần tự xoá đơn hàng
Hình 17: Sơ đồ tuần tự xoá đơn hàng.
Bảng 17 : Đặc tả use case quản lý sản phẩm.
Tên chức năng UC2.04 - Quản lý sản phẩm.
Tác nhân thực hiện A1 - Quản trị viên.
Quản trị viên có trách nhiệm quản lý chi tiết sản phẩm trong kho và các sản phẩm đang được bán Để kích hoạt chức năng này, quản trị viên cần chọn tùy chọn quản lý sản phẩm.
Tiền điều kiện Quản trị viên đăng nhập thành công hệ thống.
Hậu điều kiện Quản trị viên xem được số lượng sản phẩm trong kho cũng như sản phẩm đang bán.
Luồng sự kiện chính 1 Quản trị viên chọn chức năng quản lý sản phẩm.
2 Hệ thống xác định yêu cầu.
3 Hệ thống truy xuất dữ liệu và hiển thị kết quả.
Hình 18: Sơ đồ tuần tự quản lý sản phẩm.
Bảng 18: Đặc tả use case thêm sản phẩm.
Tên chức năng UC2.05 - Thêm sản phẩm.
Tác nhân thực hiện A1 - Quản trị viên.
Mô tả Quản trị viên thêm sản phẩm vào kho sản phẩm đang bán. Điều kiện kích hoạt Quản trị viên chọn chức năng thêm sản phẩm.
Quản trị viên đang trong vai trò quản lý sản phẩm và có thể thêm sản phẩm vào kho bán Để thực hiện điều này, quản trị viên cần chọn chức năng thêm sản phẩm.
2 Quản trị viên điền thông tin sản phẩm vào form(A1).
3.Quản trị viên gửi yêu cầu thêm.
4 Hệ thống ghi nhận thông tin cơ sở dữ liệu.
5 Hệ thống thông báo thêm sản phẩm thành công. Luồng sự kiện phụ A1 - Thông tin sản phẩm bị trùng.
5 Hệ thống thông báo thêm sản phẩm không thành công.
Hình 19: Sơ đồ tuần tự thêm sản phẩm.
Bảng 19: Đặc tả use case xóa sản phẩm.
Tên chức năng UC2.06 - Xoá sản phẩm.
Tác nhân thực hiện A1 - Quản trị viên.
Mô tả Quản trị viên xoá sản phẩm khỏi kho sản phẩm đang bán. Điều kiện kích hoạt Quản trị viên chọn chức năng xóa sản phẩm.
Tiền điều kiện Quản trị viên đang trong chức năng quản lý sản phẩm. Hậu điều kiện Quản trị viên xoá được sản phẩm trong kho.
Luồng sự kiện chính 1 Quản trị viên chọn sản phẩm muốn xoá.
2 Quản trị viên chọn chức năng “ Xoá”.
3 Hệ thống hiển thị giao diện xác nhận xóa.
4 Quản trị viên xác nhận xóa.
5 Hệ thống xác nhận hành động.
6 Xoá thông tin sản phẩm trong cơ sở dữ liệu.
7 Hệ thống thông báo xóa sản phẩm thành công.Luồng sự kiện phụ
Hình 20: Sơ đồ tuần tự xóa sản phẩm.
2.4.3.7 Sửa thông tin sản phẩm
Bảng 20: Đặc tả use case sửa thông tin sản phẩm.
Tên chức năng UC2.07 - Sửa thông tin sản phẩm.
Tác nhân thực hiện A1 - Quản trị viên.
Quản trị viên có thể chỉnh sửa thông tin sản phẩm được bán khi chọn chức năng sửa thông tin trong giao diện quản lý sản phẩm Điều này chỉ xảy ra khi quản trị viên đang ở trong môi trường quản lý sản phẩm.
Hậu điều kiện Quản trị viên chỉnh sửa được thông tin sản phẩm trong kho.
Luồng sự kiện chính 1 Quản trị viên chọn chức năng “ Sửa” ngay đằng sau bảng thông tin sản phẩm.
2 Hệ thống hiển thị giao diện sửa sản phẩm.
3 Quản trị viên chỉnh sửa thông tin cần thiết(A1).
4 Quản trị viên gửi yêu cầu cập nhật.
5 Hệ thống cập nhật lại dữ liệu.
6 Hệ thống thông báo sửa thành công.
Hình 21: Sơ đồ tuần tự sửa thông tin sản phẩm.
2.4.4 Đặc tả use case khách hàng
Sơ đồ use case khách hàng
Hình 22: Use case Khách hàng.
Tên chức năng UC3.01 - Mua sản phẩm.
Tác nhân thực hiện A1 - Khách hàng.
Khách hàng thực hiện mua sản phẩm bằng cách nhấn vào nút “Mua ngay” khi xem chi tiết sản phẩm hoặc chọn “Mua” tại trang giỏ hàng sau khi đã tích chọn sản phẩm.
Tiền điều kiện Khách hàng truy cập vào trang Web cửa hàng.
Hậu điều kiện Khách hàng mua sản phẩm thành công.
Luồng sự kiện chính 1 Khách hàng chọn sản phẩm.
2 Khách hàng chọn “Mua ngay”.
3 Xác thực khách hàng[Đăng ký][Đăng nhập]:
3.1a Yêu cầu này được thực hiện khi khách hàng chưa có thông tin trên hệ thống UC1.01 [Đăng nhập]
3.1b Yêu cầu này được thực hiện khi khách hàng đã có tài khoản nhưng chưa đăng nhập UC1.02.
4 Khách hàng lựa chọn[Mua][Không mua]:
Bảng 21: Đặc tả use case mua sản phẩm.
4.1a Khách hàng chọn màu sản phẩm.
4.2a Khách hàng chọn kích thước sản phẩm.
4.3a.Khách hàng chọn số lượng mua.
4 4a Khách hàng nhấn chọn “Đặt hàng”(A1) 4.5a Hệ thống xác thực yêu cầu
4.6a Hệ thống ghi nhận đơn hàng [Không mua]
4.1b Khách hàng thêm vào giỏ hàng bằng nhấn chọn
Luồng sự kiện phụ A1 - Khách hàng chưa chọn màu hoặc chưa chọn kích thước sản phẩm
Hình 23: Sơ đồ tuần tự đặt hàng.
Bảng 22: Đặc tả use case giỏ hàng.
Tên chức năng UC3.02 - Giỏ hàng
Tác nhân thực hiện A1 - Khách hàng
Mô tả Khách hàng quản lý sản phẩm trong giỏ hàng Điều kiện kích hoạt Khách hàng nhấn chọn “Giỏ hàng”
Tiền điều kiện Khách hàng đã đăng nhập tài khoản
Hậu điều kiện Khách hàng quản lý sản phẩm trong giỏ hàng thành công Luồng sự kiện chính 1 Khách hàng nhấn chọn “Giỏ hàng”
2 Hệ thống xác định yêu cầu
3 Hệ thống hiển thị danh sách sản phẩm trong giỏ hàng
Hình 24: Sơ đồ tuần tự giỏ hàng.
2.4.4.3 Xoá sản phẩm khỏi giỏ hàng
Bảng 23: Đặc tả use case xoá sản phẩm khỏi giỏ hàng.
Tên chức năng UC3.03 - Xoá sản phẩm khỏi giỏ hàng.
Tác nhân thực hiện A1 - Khách hàng.
Mô tả Khách hàng thực hiện xóa sản phẩm khỏi giỏ hàng. Điều kiện kích hoạt Khách hàng nhấn chọn “Xoá”.
Tiền điều kiện Khách hàng đã đăng nhập tài khoản và đang ở trong chức năng giỏ hàng.
Hậu điều kiện Khách hàng xóa sản phẩm trong giỏ hàng thành công. Luồng sự kiện chính 1 Khách hàng tick chọn những sản phẩm muốn xoá.
2 Khách hàng nhấn chọn “Xoá”.
3 Hệ thống xác định yêu cầu.
4 Hệ thống cập nhật lại dữ liệu giỏ hàng.
Hình 25: Sơ đồ tuần tự xóa sản phẩm khỏi giỏ hàng.
2.4.4.4 Xem trạng thái đơn hàng
Bảng 24: Đặc tả use case xem trạng thái đơn hàng.
Tên chức năng UC3.04 - Xem trạng thái đơn hàng.
Tác nhân thực hiện A1 - Khách hàng.
Mô tả Khách hàng xem trạng thái giao của những đơn hàng đã đặt mua. Điều kiện kích hoạt Khách hàng.
Tiền điều kiện Khách hàng đã đặt mua sản phẩm trước đó và đã tạo đơn hàng.
Hậu điều kiện Khách hàng xem trạng thái giao của sản phẩm thành công.
Luồng sự kiện chính 1 Khách hàng chọn chức năng “ Đơn hàng của tôi” trong tài khoản cá nhân.
2 Hệ thống xác thực yêu cầu hiển thị danh sách đơn hàng.
3 Khách hàng nhấn vào đơn hàng muốn xem.
4 Hệ thống hiển thị tình trạng giao của đơn hàng.Luồng sự kiện phụ
Hình 26: Sơ đồ tuần tự xem trạng thái đơn hàng.
2.4.4.5 Xem thông tin cá nhân
Bảng 25 : Đặc tả use case xem thông tin cá nhân.
Tên chức năng UC3.05 - Xem thông tin cá nhân
Tác nhân thực hiện A1 - Khách hàng
Mô tả Khách hàng xem thông tin cá nhân của mình Điều kiện kích hoạt Khách hàng đăng ký thành công tài khoản
Khách hàng cần đảm bảo rằng họ đang đăng nhập vào tài khoản của mình để có thể xem thông tin cá nhân Sau khi hoàn thành điều kiện này, khách hàng sẽ thành công trong việc truy cập và xem thông tin cá nhân Để bắt đầu, khách hàng chỉ cần vào trang giỏ hàng của mình.
2 Hệ thống hiển thị danh sách đơn
4 Hệ thống cập nhật lại dữ liệu giỏ hàngLuồng sự kiện phụ
Hình 27: Sơ đồ tuần tự xem thông tin cá nhân.
2.4.4.6 Sửa thông tin cá nhân
Bảng 26: Đặc tả use case sửa thông tin cá nhân.
Tên chức năng UC3.06 - Sửa thông tin cá nhân
Tác nhân thực hiện A1 - Khách hàng
Mô tả Khách hàng sửa thông tin cá nhân của mình Điều kiện kích hoạt Khách hàng đăng ký thành công tài khoản
Tiền điều kiện Khách hàng đang ở trong chức năng tài khoản Hậu điều kiện Khách hàng sửa thông tin cá nhân thành công
Luồng sự kiện chính 1 Khách hàng vào trang tài khoản cá nhân
2 Hệ thống hiển thị thông tin cá nhân khách hàng
3 Khách hàng nhấn chọn “ Sửa thông tin”
4 Hệ thống xác thực yêu cầu và gửi form chỉnh sửa
5 Khách hàng chỉnh sửa thông tin cần chỉnh sửa
6 Khách hàng xác thực chỉnh sửa trong form chỉnh sửa bằng cách nhấn chọn “ Lưu lại”
7 Hệ thống ghi nhận những chỉnh sửa
8 Hệ thống trình bày lại thông tin khách hàngLuồng sự kiện phụ
Hình 28: Sơ đồ tuần tự sửa thông tin cá nhân.
2.4.4.7 Xem lịch sử đặt hàng
Bảng 27: Đặc tả use case xem lịch sử đặt hàng.
Tên chức năng UC1.11 - Xem lịch sử đặt hàng
Tác nhân thực hiện A1 - Khách hàng
Khách hàng có thể xem lại lịch sử đặt hàng của mình bằng cách chọn chức năng tương ứng trên trang cá nhân Để thực hiện điều này, khách hàng cần đã tạo tài khoản và đăng nhập vào hệ thống Sau khi hoàn tất các bước, khách hàng sẽ thành công trong việc xem lại lịch sử đặt hàng của mình.
2 Hệ thống xác thực yêu cầu
3 Truy xuất cơ sở dữ liệu
4 Hiển thị danh sách sản phẩm đã đặt
5 Kết thúcLuồng sự kiện phụ
Hình 29: Sơ đồ tuần tự xem lịch sử đặt hàng.
THIẾT KẾ HỆ THỐNG
Thiết kế cơ sở dữ liệu
Phần Back-end của hệ thống được xây dựng bằng Node.js kết hợp với MySQL, một hệ quản trị cơ sở dữ liệu quan hệ mã nguồn mở phổ biến MySQL nổi bật với hiệu suất cao, khả năng xử lý lượng lớn dữ liệu nhanh chóng và dễ dàng nhờ cú pháp SQL đơn giản Node.js, môi trường thực thi JavaScript mã nguồn mở và đa nền tảng, cho phép thực hiện mã bên ngoài trình duyệt với hiệu suất tối ưu nhờ vào IO hướng sự kiện không đồng bộ, hỗ trợ xử lý nhiều yêu cầu đồng thời và có cộng đồng người dùng rộng lớn.
Chính vì lý do đó, nhóm chúng em đã lựa chọn hệ quản trị cơ sở dữ liệu MySQL và Node.js để xây dựng website phía Back-end
Trong đồ án này, nhóm chúng em đã thiết kế 9 đối tượng như sau:
- Roles: Chứa thông tin về các vai trò người dùng.
Tên thuộc tính Kiểu dữ liệu Chú thích Ràng buộc id int Mã vai trò Khóa chính, tự tăng name varchar(20) Tên vai trò Không có
Bảng 28 : Chi tiết bảng “Roles”.
- Users: Lưu trữ thông tin người dùng, bao gồm cả vai trò của họ thông qua khóa ngoại role_id.
Tên thuộc tính Kiểu dữ liệu Chú thích Ràng buộc id int Mã người dùng Khóa chính, tự tăng fullname varchar(20) Họ và tên đầy đủ
The user data structure includes fields for email (varchar(150)), phone number (varchar(20)), address (varchar(200)), password (varchar(100)), and role ID (int), which serves as a foreign key referencing the Role table Additionally, there is a timestamp for user creation (datetime).
Không có nhật người dùng deleted int Đánh dấu xóa
Bảng 29: Chi tiết bảng “Users”.
- Categories: Định nghĩa các danh mục sản phẩm.
Tên thuộc tính Kiểu dữ liệu Chú thích Ràng buộc id int Mã danh mục Khóa chính, tự tăng name varchar(100) Tên danh mục Không có
Bảng 30: Chi tiết bảng “Categories”.
- Products: Chứa thông tin về sản phẩm, trong đó có tham chiếu đến danh mục của sản phẩm thông qua khóa ngoại category_id.
Tên thuộc tính Kiểu dữ liệu Chú thích Ràng buộc id int Mã sản phẩm Khóa chính, tự tăng category_id int Mã danh mục sản phẩm
Khóa ngoại liên quan đến bảng Category bao gồm các trường như title (tiêu đề sản phẩm) với kiểu dữ liệu varchar(250), price (giá sản phẩm) kiểu int, discount (giảm giá) kiểu int (nếu có), và thumbnail (đường dẫn hình ảnh đại diện) với kiểu dữ liệu varchar(500).
Trong bảng Product Sizes, không có trường type varchar(10) cho loại sản phẩm và trường quantity int được mặc định là 0 Mỗi khi thêm một bản ghi mới, quantity của sản phẩm tương ứng trong bảng Products sẽ tự động được cập nhật dựa trên tổng số lượng các size của sản phẩm đó Bảng này cũng bao gồm trường description longtext để mô tả sản phẩm, cùng với thời gian tạo (created_at datetime) và thời gian cập nhật (updated_at datetime) sản phẩm Cuối cùng, trường deleted int được sử dụng để đánh dấu sản phẩm đã bị xóa.
Bảng 31: Chi tiết bảng “Products”.
Tên thuộc tính Kiểu dữ liệu Chú thích Ràng buộc product_id int Mã sản phẩm liên quan Khóa chính,Khóa ngoại tham chiếu đến bảng
Product size varchar(10) Tên size Khóa chính thumbnail varchar(500) Đường dẫn hình ảnh
Bảng 32: Chi tiết bảng “ProductSizes”.
- Galeries: Lưu trữ hình ảnh của sản phẩm (giả sử là hình ảnh trong một bộ sưu tập).
Bài viết này mô tả cấu trúc của một bảng dữ liệu với các thuộc tính như sau: "id" là thuộc tính kiểu int, đại diện cho mã hình ảnh và được đánh dấu là khóa chính với tính năng tự tăng "product_id" cũng là kiểu int, dùng để lưu mã sản phẩm liên quan và là khóa ngoại tham chiếu đến bảng Product Cuối cùng, thuộc tính "thumbnail" có kiểu varchar(500), chứa đường dẫn hình ảnh.
Bảng 33: Chi tiết bảng “Galleries”.
- Orders: Lưu thông tin về các đơn đặt hàng, với thông tin người đặt hàng thông qua khóa ngoại user_id.
Bài viết mô tả cấu trúc bảng dữ liệu đơn đặt hàng với các thuộc tính sau: "id" kiểu int là mã đơn đặt, đóng vai trò là khóa chính và tự động tăng; "user_id" kiểu int là mã người dùng, là khóa ngoại tham chiếu đến bảng User; "fullname" kiểu varchar(50) lưu trữ họ và tên người đặt; "email" kiểu varchar(150) chứa địa chỉ email; "phone_number" kiểu varchar(20) ghi nhận số điện thoại; "address" kiểu varchar(200) là địa chỉ giao hàng; và "note" kiểu varchar(1000) để ghi chú đơn hàng.
Không có order_date datetime Ngày đặt hàng Không có status int Trạng thái đơn hàng
Không có total_money int Tổng giá trị đơn hàng Không có
Bảng 34: Chi tiết bảng “Orders”.
- Order_Details: Chi tiết về các sản phẩm trong mỗi đơn đặt hàng.
Tên thuộc tính Kiểu dữ liệu Chú thích Ràng buộc order_id int Mã đơn đặt hàng Khóa chính,
Khóa ngoại product_id int Mã sản phẩm Khóa chính,
Khóa ngoại tham chiếu đến bảng Product size varchar(10) Tên size Khóa ngoại tham chiếu đến
ProductSizes price int Giá sản phẩm Không có quantity int Số lượng sản phẩm
Không có total_money int Tổng giá trị Không có
Bảng 35: Chi tiết bảng “Order_Details”.
- Carts: Lưu trữ các thông tin khi người dùng thêm giỏ hàng ( Quản lý giỏ hàng)
Bài viết này mô tả cấu trúc của một bảng dữ liệu với các thuộc tính quan trọng Thuộc tính đầu tiên là user_id, kiểu dữ liệu int, đại diện cho mã người dùng và là khóa ngoại tham chiếu đến id trong bảng Users Tiếp theo là product_id, cũng kiểu int, thể hiện mã sản phẩm liên quan và là khóa ngoại tham chiếu đến bảng Product Cuối cùng, thuộc tính created_at có kiểu dữ liệu datetime, ghi lại thời gian tạo sản phẩm.
Không có quantity int Số lượng sản phẩm Không có
Bảng 36: Chi tiết bảng “Carts”.
- Sơ đồ biểu diễn mối quan hệ giữa các đối tượng.
Hình 30: Sơ đồ biểu diễn mối quan hệ giữa các đối tượng.
Sơ đồ ERD đơn giản hơn:
Hình 31: Sơ đồ ERD đơn giản.
Nhằm đáp ứng nhu cầu phát triển của hệ thống website, nhóm đã lựa chọn mô hình Client-Server Mô hình này mang lại nhiều ưu điểm:
- Tách biệt phần logic xử lý (Server) và giao diện người dùng (Client), giúp tăng tính linh hoạt và dễ bảo trì của hệ thống.
Mô hình này hỗ trợ triển khai các biện pháp bảo mật hiệu quả cho cả máy chủ và client, bao gồm xác thực người dùng, kiểm soát truy cập, và mã hóa dữ liệu khi truyền và lưu trữ, từ đó nâng cao mức độ bảo mật cho hệ thống.
Mô hình tách biệt máy chủ và client giúp nâng cao hiệu suất hệ thống bằng cách phân phối các tác vụ giữa các phần tử khác nhau, từ đó tối ưu hóa hoạt động của toàn bộ hệ thống.
Hình 32: Kiến trúc hệ thống.
+ Người dùng truy cập vào ứng dụng thông qua trình duyệt web (client).
+ Trình duyệt web tải các tài nguyên như HTML, CSS, JavaScript từ máy chủ thông qua HTTP hoặc HTTPS.
+ Sử dụng Express.js để tạo và quản lý máy chủ (Server).
+ Xử lý các yêu cầu từ Client, định tuyến (routing) và xử lý các yêu cầu GET, POST, PUT, DELETE từ Client.
+ Tương tác với cơ sở dữ liệu (nếu cần) để lấy hoặc lưu trữ dữ liệu.
+ Phản hồi lại cho Client với các dữ liệu hoặc kết quả đã được xử lý.
Trong đồ án này, nhóm chúng tôi đã sử dụng mô hình Model - View - Controller (MVC) để thiết kế hệ thống của chúng tôi
MVC là một mẫu kiến trúc phần mềm thiết kế giao diện người dùng, bao gồm ba thành phần chính: Model (Mô hình), View (Giao diện), và Controller (Bộ điều khiển).
Model là thành phần quản lý và xử lý dữ liệu trong ứng dụng, có thể bao gồm cơ sở dữ liệu, file XML, đối tượng JSON hoặc các loại dữ liệu khác Nó đóng vai trò cầu nối giữa hai thành phần View và Controller.
View là thành phần hiển thị giao diện cho người dùng, bao gồm tất cả những gì có thể nhìn thấy trên màn hình, như cửa sổ, nút, văn bản và các thành phần giao diện khác.
Controller là thành phần trung gian điều khiển sự tương tác giữa Model và View, nhận input từ người dùng và cập nhật tương ứng trên cả hai Chẳng hạn, một Controller có thể thay đổi thuộc tính của một đối tượng trong Model và đồng thời cập nhật View để hiển thị đối tượng đã được sửa đổi trên giao diện.
Mô hình MVC được áp dụng phổ biến trong các ngôn ngữ lập trình web như PHP, Java, Ruby và Python, với sự hỗ trợ từ nhiều framework như Laravel, Django và Ruby on Rails Mô hình này giúp cải thiện hiệu quả trong việc phát triển, mở rộng và bảo trì ứng dụng web.
Nhận thấy mô hình này là phù hợp và cần thiết cho dự án Vì thế nhóm chúng tôi đã sử dụng mô hình này trong thiết kế.
- Hình ảnh về áp dụng mô hình trong sơ đồ tuần tự:
Hình 33: Ví dụ sơ đồ tuần tự sử dụng mô hình MVC.
+ AccountView là đại diện cho thành phần View trong mô hình.
+ AccountController đại diện cho thành phần Controller.
+ Usermodel sẽ đại diện cho thành phần Model.
Trong quá trình hoạt động, người dùng tương tác với phần AccountView, sau đó AccountView gửi yêu cầu đến AccountController Tiếp theo, AccountController chuyển tiếp yêu cầu tới Usermodel Cuối cùng, AccountController trả kết quả theo thứ tự về AccountView để hiển thị cho người dùng.
- Hình ảnh áp dụng mô hình trong code:
Hình 34: Ví dụ về quản lý code theo mô hình MVC.
Trong hình ảnh này, các đoạn code được nhóm chúng tôi phân chia thành các thành phần khác nhau, tương ứng với từng thành phần trong mô hình MVC.
Thiết kế hệ thống
4.1 Sơ đồ Sitemap của Website
Hình 35: Sơ đồ sitemap của website.
Hình 36: Giao diện chính của website
- Giao diện danh sách sản phẩm và chân trang:
THIẾT KẾ GIAO DIỆN
Sơ đồ Sitemap của Website
Hình 35: Sơ đồ sitemap của website.
Giao diện chung
Hình 36: Giao diện chính của website
- Giao diện danh sách sản phẩm và chân trang:
Giao diện danh sách sản phẩm và chân trang của website được thiết kế chủ yếu với gam màu lạnh, mang đến cảm giác nhẹ nhàng và thanh thoát cho người dùng Thiết kế này tạo ra một trải nghiệm thân thiện, giúp người dùng dễ dàng tương tác với trang web.
- Giao diện đăng ký và đăng nhập:
+ Giao diện lựa chọn chức năng đăng ký và đăng nhập:
Giao diện đăng ký được thiết kế với đầy đủ các trường thông tin cần thiết, mang lại trải nghiệm dễ sử dụng cho người dùng.
Hình 39: Giao diện đăng ký.
+ Giao diện đăng nhập: Giao diện đăng nhập có màu chủ đạo của website, có đầy đủ thông tin.
Hình 40: Giao diện đăng nhập.
- Giao diện trang sản phẩm áo nam:
Hình 41: Giao diện trang sản phẩm áo nam.
- Giao diện trang sản phẩm quần nam:
Hình 42: Giao diện trang sản phẩm quần nam.
- Giao diện trang sản phẩm áo nữ:
Hình 43: Giao diện trang sản phẩm áo nữ.
- Giao diện trang sản phẩm quần nữ:
Hình 44: Giao diện trang sản phẩm quần nữ.
- Giao diện trang sản phẩm áo trẻ em:
Hình 45: Giao diện trang sản phẩm áo trẻ em.
- Giao diện trang sản phẩm quần trẻ em: Nhìn chung giao diện của trang phân loại có phông nền sáng, đơn giản, dễ sử dụng.
Hình 46: Giao diện trang sản phẩm quần trẻ trẻ em.
- Giao diện trang chi tiết sản phẩm: Trang chi tiết sản phẩm có giao diện đơn giản, hiển thị đầy đủ thông tin về sản phẩm.
Hình 47: Giao diện trang chi tiết sản phẩm.
Hình 48: Giao diện sản phẩm tương tự.
Giao diện tìm kiếm của trang web cho phép người dùng dễ dàng tìm kiếm sản phẩm bằng cách nhập từ khóa vào thanh tìm kiếm ở header Sau khi thực hiện tìm kiếm, trang web sẽ hiển thị danh sách các sản phẩm liên quan chứa từ khóa đã nhập.
Hình 49: Giao diện tìm kiếm.
- Giao diện thanh toán: Giao diện trang thanh toán đơn giản, có các thông tin cần thiết cho trang, có chức năng quay lại giỏ hàng.
Hình 50: Giao diện tìm kiếm.
Quản trị viên
- Bảng điều khiển (Dashboard): Hiển thị các thông tin cần thiết cho quản trị viên
Hình 51: Giao diện bảng điều khiển.
- Danh sách khách hàng: Được thiết kế phù hợp để hiển thị đầy đủ thông tin danh sách khách hàng
Hình 52: Giao diện danh sách khách hàng.
- Danh sách nhân viên: Hiển thị đầy đủ thông tin của nhân viên
Hình 53: Giao diện danh sách nhân viên.
- Quản lý sản phẩm: Được thiết kế phù hợp để hiển thị đầy đủ thông tin giúp quản lý sản phẩm dễ dàng.
Hình 54: Giao diện danh sách quản lý sản phẩm.
Khách hàng
- Hồ sơ cá nhân: Giao diện sáng, cung cấp các thông tin đầy đủ
Hình 55: Giao diện hồ sơ cá nhân.
- Giao diện đơn hàng của tôi: Hiển thị đầy đủ thông tin và rõ ràng trong đơn hàng của khách hàng.
Hình 56: Giao diện đơn hàng của tôi.
- Giao diện lịch sử mua hàng: Giao diện hiển thị các thông tin của lịch sử mua hàng của khách hàng một cách chi tiết
Hình 57: Giao diện lịch sử mua hàng.
- Giao diện đổi mật khẩu: có giao diện đơn giản, dễ hiểu và sử dụng
Hình 58: Giao diện đổi mật khẩu.
CÀI ĐẶT VÀ KIỂM THỬ
Kết quả
Bảng kết quả cài đặt và kiểm thử
STT Chức năng Mức độ hoàn thành (%) Ghi chú
- Đã có giao diện đăng ký
- Tùy chọn đã có tài khoản: Đường link
"Đã có tài khoản ? Đăng nhập ngay" cho phép người dùng đã có tài khoản nhanh chóng chuyển đến trang đăng nhập.
- Nhập thông tin đăng ký
- Hiển thị thông báo khi đăng ký thành công và chuyển sang màn hình chính.
- Đã có giao diện đăng nhập
- Nhập thông tin tài khoản và mật khẩu
Nếu bạn chưa có tài khoản, hãy nhấp vào liên kết "Chưa Có Tài Khoản? Đăng Ký Ngay" để truy cập trang đăng ký và tạo tài khoản mới.
Sau khi điền đầy đủ thông tin, người dùng chỉ cần nhấn nút "Đăng Nhập" để tiếp tục Nếu thông tin tài khoản được nhập chính xác, hệ thống sẽ chuyển hướng đến trang chủ hoặc bảng điều khiển Ngược lại, nếu thông tin không đúng, sẽ có thông báo hiển thị rằng tài khoản hoặc mật khẩu không chính xác.
- Tạo được giao diện các phòng kèm trạng thái
- Nếu phòng không trống thì sửa trạng thái
Để tạo tài khoản, nếu phòng trống, bạn cần cung cấp thông tin cơ bản như họ và tên, email và số điện thoại Đây là các thông tin cần thiết thường được yêu cầu trong quá trình đăng ký.
Quản lý tài khoản dễ dàng với menu bên trái, nơi bạn có thể truy cập Hồ sơ cá nhân, theo dõi Đơn hàng của tôi, xem Lịch sử mua hàng và thực hiện Chỉnh sửa hồ sơ.
5 Chỉnh sửa thông tin tài khoản 100
- Hiển thị thông tin cơ bản của người dùng như tên và email Người dùng có thể cập nhật thông tin của họ ở đây.
Người dùng có khả năng thay đổi mật khẩu của mình bằng cách nhập mật khẩu mới và xác nhận lại mật khẩu đó để đảm bảo tính chính xác.
- Menu bên trái cung cấp các tùy chọn như xem Hồ sơ cá nhân, Đơn hàng của tôi, Lịch sử mua hàng và Chỉnh sửa hồ sơ.
- Khi thông tin được cập nhật thành công, có vẻ như một thông báo màu xanh lá cây sẽ hiển thị để xác nhận điều đó.
- Có thể tiến hành thanh toán
- Khi thanh toán thành công, hiển thị thông báo đã thanh toán.
- Có thể thêm được sản phẩm vào giỏ hàng, có thể tính được tiền trước khi tiến hành thanh toán
- Khi đã có sản phẩm trong giỏ thì hiển thị thông báo đã có sản phẩm trong giỏ
8 Xem giỏ hàng 100 - Tạo được giao diện xem thông tin giỏ hàng
Danh sách sản phẩm hiển thị các mặt hàng mà người dùng đã thêm vào giỏ hàng, bao gồm hình ảnh, tên sản phẩm, màu sắc, kích cỡ và mã sản phẩm.
- Cập nhật số lượng: Người dùng có thể tăng hoặc giảm số lượng sản phẩm trực tiếp trong giỏ hàng bằng các nút "+" và
- Hiển thị giá sản phẩm: Mỗi sản phẩm có giá tiền riêng được liệt kê cùng với tổng tiền tương ứng với số lượng đã chọn.
Phần tổng kết giỏ hàng nằm ở bên phải, hiển thị tổng giá trị mà người dùng cần thanh toán, giúp họ nắm rõ số tiền cần chi trả.
- Xóa sản phẩm: Người dùng có thể loại bỏ sản phẩm khỏi giỏ hàng bằng cách nhấp vào biểu tượng thùng rác bên cạnh mỗi sản phẩm.
- Thanh toán: Nút "Thanh toán" cho phép người dùng tiến hành quá trình thanh toán cho các mặt hàng đã chọn.
- Tiếp tục mua sắm: Nút "Tiếp tục mua sắm" cho phép người dùng quay lại trang mua sắm để thêm sản phẩm vào giỏ hàng nếu họ muốn.
9 Danh mục sản phẩm nam 100 - Tạo được giao diện xem thông tin danh mục sản phẩm nam
Danh mục sản phẩm nằm ở bên trái, bao gồm các loại sản phẩm như "Áo" và "Quần", giúp người dùng dễ dàng tìm kiếm và lọc sản phẩm theo từng loại.
Dưới mỗi hình ảnh sản phẩm, người dùng sẽ tìm thấy thông tin chi tiết bao gồm tên và giá của sản phẩm Thông tin này giúp người dùng dễ dàng nắm bắt giá cả và các đặc điểm cơ bản liên quan đến sản phẩm.
- Giao diện người dùng thân thiện: Trang tâm.
Danh mục sản phẩm nữ
- Tạo được giao diện xem thông tin danh mục sản phẩm nữ
Danh mục sản phẩm nằm ở bên trái, giúp người dùng dễ dàng tìm kiếm và lọc các loại sản phẩm như "Áo" và "Quần".
Dưới mỗi hình ảnh sản phẩm, người dùng sẽ tìm thấy thông tin chi tiết bao gồm tên và giá cả, giúp họ nắm bắt được giá trị và các thông tin cơ bản về sản phẩm một cách dễ dàng.
Giao diện người dùng thân thiện với thiết kế sạch sẽ và dễ nhìn, sử dụng màu sắc và bố cục rõ ràng, giúp người dùng dễ dàng tìm kiếm và lựa chọn sản phẩm phù hợp với nhu cầu của họ.
11 Danh mục sản phẩm trẻ em 100 - Tạo được giao diện xem thông tin danh mục sản phẩm trẻ em.
Danh mục sản phẩm nằm ở bên trái trang, bao gồm các loại sản phẩm như "Áo" và "Quần", giúp người dùng dễ dàng tìm kiếm và lọc sản phẩm theo loại một cách nhanh chóng và hiệu quả.
Dưới mỗi hình ảnh sản phẩm, người dùng sẽ tìm thấy thông tin cụ thể bao gồm tên và giá cả Điều này giúp họ nắm bắt được giá tiền cũng như một số chi tiết cơ bản về sản phẩm.
Giao diện người dùng thân thiện với thiết kế sạch sẽ và dễ nhìn, cùng với màu sắc và bố cục rõ ràng, giúp người dùng dễ dàng tìm kiếm và lựa chọn sản phẩm mà họ quan tâm.
12 Xem lịch sử mua hàng 100
- Hiển thị tổng số đơn hàng mà người dùng đã mua
- Mỗi đơn hàng được hiển thị với thông tin chi tiết như tên sản phẩm, số lượng, size, mã sản phẩm, màu sắc, trạng thái đơn hàng.
- Menu bên trái cung cấp các tùy chọn như xem Hồ sơ cá nhân, Đơn hàng của tôi, Lịch sử mua hàng và Chỉnh sửa hồ sơ.
Bảng 37: Bảng tổng kết cài đặt và thử nghiệm website
