Báo cáo Xây dựng Website bán quần áo môn Lập trình Web | Học viện Công Nghệ Bưu Chính Viễn Thông

lOMoAR cPSD| 58737056
HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG
KHOA CÔNG NGHỆ THÔNG TIN 1
------------------------------------ BÀI TẬP LỚN MÔN LẬP TRÌNH WEB
(Website bán quần áo) Swe Store Giảng viên hướng dẫn : Lê Văn Vịnh Nhóm : 04 Họ và tên : Nguyễn Mạnh Tuấn Mã sinh viên : B22DCCN760
Hà Nội, tháng 5 năm 2025 lOMoAR cPSD| 58737056
Chương I: MÔ TẢ, KHẢO SÁT VÀ XÁC ĐỊNH YÊU CẦU BÀI TOÁN
Chương II: KIẾN THỨC ÁP DỤNG
2.1 Phân tích và thiết kế hệ thống
- Biều đồ phân cấp chức năng (BFD – Bussiness Function Diagram):
2.2 Cơ sở dữ liệu Bảng Collections Tên cột Kiểu dữ liệu Ràng buộc _id ObjectId Primary Key lOMoAR cPSD| 58737056 title String Required, Unique description String image String Required products Array of ObjectId References Product createdAt Date Default: Date.now updateAt Date Default: Date.now Bảng Customer Tên cột Kiểu dữ liệu Ràng buộc _id ObjectId Primary Key clerkId String name String email String orders Array of ObjectId References Order createdAt Date Default: Date.now Tên cột Kiểu dữ liệu Rảng buộc updateAt Date Default: Date.now Bảng Order Tên cột Kiểu dữ liệu Ràng buộc _id ObjectId Primary Key customerClerkId String fullName String Email String phoneNumber String products Array of Objects products.product ObjectId References Product products.color String products.size String lOMoAR cPSD| 58737056 products.quantity Number shippingAddress Object shippingAddress.address String shippingAddress.city String shippingAddress.state String
shippingAddress.postalCode String shippingAddress.country String shippingMethod String paymentMethod String totalAmount Number createdAt Date Default.Date.now Bảng Product Tên cột Kiểu dữ liệu Ràng buộc _id ObjectId Primary Key title String description String media Array of String category String COLLECTIONS Array of ObjectId References Collection TAGS Array of String SIZES Array of String COLORS Array of String PRICE Decimal128 EXPENSE Decimal128 CREATEDAT Date Default: Date.now UPDATEAT Date Default: Date.now Bảng Users lOMoAR cPSD| 58737056 Tên cột Kiểu dữ liệu Ràng buộc _id ObjectId Primary Key title String Required, Unique description String image String Required products Array of ObjectId References Product createdAt Date Default: Date.now
2.3 Ngôn ngữ lập trình
- MongoDB: Được lựa chọn để lưu trữ dữ liệu do tính linh hoạt và khả năng mở rộng
tốt. MongoDB phù hợp với các ứng dụng có yêu cầu thay đổi dữ liệu thường xuyên
và cần xử lý lượng dữ liệu lớn.
- Next.js kết hợp với TypeScript:
+ Next.js: là 1 framework React phổ biến, hỗ trợ cả phía frontend và backend.
Next.js giúp tối ưu hóa SEO và cung cấp khả năng render server-side, rất
quan trọng cho các ứng dụng thương mại điện tử.
+ TypeScript: Được sử dụng để tăng cường khả năng kiểm tra lỗi trong quá trình
phát triển, giúp mã nguồn rõ ràng và dễ bảo trì hơn.
- Các thư viện được sử dụng:
+ Radix-ui: Được sử dụng để tạo các UI cần thiết với khả năng tùy biến cao và tuân thủ.
+ Lucide-react: Cung cấp bộ icon phong phú và dễ dàng tích hợp vào ứng dụng
React, giúp giao diện thêm sinh động và trực quan.
+ Next-cloudinary: Sử dụng để lưu trữ và quản lý hình ảnh, giúp tối ưu hóa việc
lưu trữ và truy xuất hình ảnh từ Cloudinary.
+ Tailwind Css: Một utility-first CSS framework, giúp tạo các style nhanh chóng
và dễ dàng mà không cần viết CSS từ đầu. lOMoAR cPSD| 58737056
+ Clerk: Dùng để tạo chức năng đăng nhập, đăng ký và quản lý người dùng, giúp
đơn giản hóa việc triển khai các chức năng xác thực.
+ Recharts: Thư viện tạo biểu đồ đơn giản và dễ sử dụng, giúp hiển thị dữ liệu
bán hàng, doanh thu trực quan và sinh động.
Chương III: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
3.1 Phân tích thiết kế CSDL
3.2 Phân tích thiết kế chức năng
Actor Admin User Use case Đăng nhập X X Đăng kí X X Tìm kiếm sản phẩm X X
Thêm sản phẩm vào giỏ hàng X Đặt hàng X Xem chi tiết sản phẩm X X Đổi mật khẩu X X Đăng nhập trang admin X
Quản lý User: xem danh sách, xóa user X
Quản lý sản phẩm: thêm, sửa, xóa X
Quản lý danh mục: thêm, sửa, xóa X
Quản lý đơn hàng đã đặt X Xem thống kê X
Xem các đơn hàng đã được user đặt X
3.3 Các chức năng chưa làm được
- Chưa tích hợp được với Chatbot
- Chưa có chức năng cập nhật trạng thái đơn hàng: đã vận chuyển, đang giao, đãgiao lOMoAR cPSD| 58737056
- Chưa ứng dụng bảo mật Website
- Chưa có số lượng đơn hàng còn
Chương IV: CÀI ĐẶT VÀ HƯỚNG DẪN SỬ DỤNG
4.1 Cài đặt môi trường server hosting
- Website được chạy trên localhost:3000: admin và localhost:3001: user 4.2 Giao diện Users
- Website được sử dụng thư viện Clerk để đăng nhập, phương thức hỗ trợ đăngnhập
bằng facebook và google hoặc là chúng ta có thể tự tạo tài khoản bằng email và
password riêng. Sau đó thì lấy id của clerk vào CSDL.
- Ở phần thêm ảnh sử dụng thêm thư viện next-cloud là một thư viện hỗ trợ mạnhmẽ
trong việc tạo ảnh. Nó có chức năng thêm ảnh từ hệ thống, kéo ảnh từ ngoài vào.
Nó có thể lưu nhiều ảnh một lúc lên cloud và sẽ tải link ảnh và lưu vào CSDL. Nó
cũng hỗ trợ ảnh từ rất nhiều nguồn như web, camera, …
- Giao diện trang chủ:
- Giao diện Collections: lOMoAR cPSD| 58737056
- Giao diện Products:
- Giao diện chi tiết Collections: lOMoAR cPSD| 58737056
- Giao diện trang chi tiết sản phẩm:
- Giao diện trang sản phẩm thêm vào phần ưu thích: lOMoAR cPSD| 58737056
- Giao diện trang tìm kiếm:
- Giao diện trang đăng ký tài khoản:
- Giao diện trang đăng nhập: lOMoAR cPSD| 58737056
- Quản lý tài khoản:
- Giao diện trang giỏ hàng:
- Giao diện trang thanh toán: lOMoAR cPSD| 58737056
- Giao diện trang đơn hàng đã đặt: 4.3 Giao diện Admin
- Quản lý tài khoản:
- Giao diện trang chủ (Giao diện trang thống kê doanh thu): lOMoAR cPSD| 58737056
- Giao diện đăng nhập phần admin:
- Giao diện trang danh mục sản phẩm:
- Giao diện trang thêm danh mục mới: lOMoAR cPSD| 58737056
-Giao diện trang sửa thông tin danh mục:
- Giao diện trang sản phẩm:
- Giao diện thêm sản phẩm mới: lOMoAR cPSD| 58737056
- Giao diện trang sửa thông tin sản phẩm:
- Giao diện trang đơn đặt hàng:
- Giao diện trang chi tiết đơn đặt hàng: lOMoAR cPSD| 58737056
- Giao diện trang khách hàng:
- Giao diện tải ảnh lên từ việc tạo mới dnah mục, sản phẩm, …:
4.4 Ứng dụng bảo mật Website (chưa có) lOMoAR cPSD| 58737056
4.5 Các công nghệ (Chatbot, …) KẾT LUẬN
- Giao diện: Trang web có một giao diện thân thiện, dễ dàng cho người sử dụng.
- Đăng nhập/ Đăng ký: Người dùng có thể tạo tài khoản mới hoặc đăng nhập vào
hệ thống để truy cập vào các chức năng và tính năng của hệ thống.
- Hiển thị sản phẩm và danh mục: Các sản phẩm và danh mục sẽ được hiển thị rõ
ràng và dễ dàng tìm kiếm cho người sử dụng.
- Tìm kiếm sản phẩm: Người dùng có thể tìm kiếm sản phẩm theo từ khóa hoặc áp
dụng bộ lọc để thu hẹp kết quả tìm kiếm.
- Chi tiết sản phẩm: Người dùng có thể xem thông tin chi tiết về sản phẩm, bao
gồm hình ảnh, mô tả, giá cả, thông số kỹ thuật, …
- Đơn đặt hàng: Các đơn hàng đã được người dùng đặt sẽ được hiển thị rõ ràng các
mã, ngày đặt, số lượng sản phẩm trong từng đơn. HƯỚNG PHÁT TRIỂN
- Tối ưu hiệu suất, còn khá chậm do chưa tối ưu công nghệ nextjs - Thêm chức
năng trạng thái đơn hàng.