Hệ thống website bán hàng quần áo là hệ thống cho phép người sử dụng truy cập vào website để xem thông tin về quần áo và cho phép đặt hàng.. Ở đây hệ thống sẽ lưu trữ thông tin cơ bản
Trang 1XÂY DỰNG WEBSITE BÁN HÀNG QUẦN ÁO ONLINE
HỌC VIỆN KỸ THUẬT MẬT MÃ
BÁO CÁO THỰC TẬP CƠ SỞ
ĐỀ TÀI:
KHOA CÔNG NGHỆ THÔNG TIN
Giảng viên hướng dẫn: ThS Nguyễn Văn Phác
Trang 4 Để đáp ứng được nhu cầu mua sắm trực tuyến ngày càng tăng, do sự tiện lợi phát triển nhanh chóng và đa dạng về mẫu mã giá cả.
Mang đến cho khách hàng trải nghiệm mua sắm trực tuyến tiện lợi, nhanh chóng và an toàn
1.1 Lí do chọn đề tài
4
Trang 5 Hệ thống website bán hàng quần áo là hệ thống cho phép người sử dụng truy cập vào website để xem thông tin về quần áo và cho phép đặt hàng Ở đây hệ thống sẽ lưu trữ thông tin cơ bản của người dùng, các loại quần áo, thông tin của mỗi loại quần áo
Các hoạt động nghiệp vụ cơ bản của hệ thống gồm:
• Người dùng có thể đăng ký và đăng nhập tài khoản ở bất cứ nơi đâu, bất cứ khi nào.
• Người quản lý có thể đăng thông tin lên
1.2 Mục tiêu đề tài
Trang 6Hỗ trợ đa ngôn ngữ lập trình• Tính năng ACID
• Tính năng sao lưu và phục hồi• Hỗ trợ khóa ngoại
• Tối ưu hóa hiệu suất
Các thư viện và framework (Lavarel)
Trang 71.3 Các công nghệ sử dụng
Môi trường phát triển (VSCode)
Visual Studio Code chính là ứng dụng cho phép biên tập, soạn thảo
các đoạn code để hỗ trợ trong quá trình thực hiện xây dựng, thiết kế website một cách nhanh chóng Visual Studio Code hay còn được viết tắt là VS Code
Những ưu điểm nổi bật của Visual Studio Code:
Ngôn ngữ, giao diện tối giản, thân thiện, giúp các lập trình viên dễ dàng định hình nội dung
Các tiện ích mở rộng rất đa dạng và phong phú
Tích hợp các tính năng quan trọng như tính năng bảo mật (Git), khả
Trang 82 Phân tích thiết kế hệ thống
Trang 9Hệ thống gồm 3 tác nhân chính: Admin (Người quản lý hệ thống) Khách hàng
Thành viên (user)
2.1 Phân rã chức năng của hệ thống
Trang 10Admin (Người quản lý hệ thống): Quản lý đơn đặt hàng
Quản lý danh sách thành viên Quản lý sản phẩm
Quản lý danh mục Quản lý sản phẩm
2.1 Phân rã chức năng của hệ thống
10
Trang 11Khách hàng
Đăng kí làm thành viên Xem thông tin sản phẩm Xem thông tin giỏ hàng Chọn sản phẩm cần mua
Thêm, bớt sản phẩm trong giỏ hàng Thực hiện việc mua hàng
Thanh toán
2.1 Phân rã chức năng của hệ thống
Trang 12Thành viên (user): Đăng nhập
Xem thông tin cá nhân
Sửa đổi thông tin cá nhân
2.1 Phân rã chức năng của hệ thống
12
Trang 132.2 Biểu đồ Usecase tổng quát
Trang 142.3 Biểu đồ tuần tự của một số chức năng
14
Trang 152.3 Biểu đồ tuần tự của một số chức năng
b Biểu đồ tuần tự chức năng đặt lịch xem phòng
Trang 162.3 Biểu đồ tuần tự của một số chức năng
16
Trang 172.3 Biểu đồ tuần tự của một số chức năng
Trang 182.4 Sơ đồ kết nối các bảng
18
Trang 203.1 Quá trình triển khai hệ thống
3.1.1 Cài đặt môi trường và khởi tạo dự án
Bước 1: Cài đặt NodeJs
Bước 2: Khởi tạo dự án React-Native với Expo
Bước 3: Khởi tạo dự án ReactJs (web admin) với ViteBước 4: Khởi tạo môi trường phát triển API
Trang 21• 3.1 Quá trình triển khai hệ thống
3.1.2 Xây dựng API cho hệ thống
Bước 1: Cài đặt thư viện mongoose là một ODM hỗ trợ kết nối cũng như cung cấp các hàm thực hiện giao tiếp với mongodb băng câu lệnh: npm install mongoose
Bước 2: Tạo file database.config.ts để config db cho dự án
Trang 22• 3.1 Quá trình triển khai hệ thống
3.1.2 Xây dựng API cho hệ thống
Bước 1: Tạo file interface lưu trữ kiểu dữ liệu của đối tượng đang thao tác trong module lưu trữ trong database.
Bước 2: Tạo file model để ánh xạ đến database.
Bước 3: Tạo file service để thực hiện logic và thao tác lấy hoặc lưu trữ dữ liệu trong database theo các method và endpoint tương ứng.
Sau khi kết nối với database, để tạo một module API ta thực hiện các bước như sau:
Bước 4: Tạo file routes thực hiện tạo các enpoint và method tướng ứng theo từng service được tạo ở bước trên để bên phía ứng dụng có thể gọi vào.
Trang 23• 3.1 Quá trình triển khai hệ thống
3.1.3 Xây dựng ứng dụng với React-Native và ReacJs
Bước 1: Tạo file screen là file thực thi sử lý hiển thị của màn hình đó.
Bước 2: Tạo các thành phần giao cho màn hình.
Sau khi kết nối với database, để tạo một module API ta thực hiện các bước như sau:
Trang 24• 3.1 Quá trình triển khai hệ thống
3.1.3 Xây dựng ứng dụng với React-Native và ReacJs
Bước 1: Cài đặt Redux-tookit.
Bước 2: Tạo file config api với Readux-tookit.Bước 3: Tạo các service để thao tác với API
Ngoài ra để một hệ thống có thể động ta cần thực hiện tích hợp API vào hệ thống Để tích hợp Api ta cần thực hiện các bước như sau:
Bước 4: Gọi các hàm thao tác với API vừa tạo ở trên tại các file component.
Trang 253.2 Một số giao diện ứng dụng trên thiết bị di động
Trang 263.2 Một số giao diện ứng dụng trên thiết bị di động
26
Trang 273.3 Một số giao diện web admin
Trang 283.3 Một số giao diện web admin
28
Trang 30KẾT LUẬN
Kết quả đạt được
30
Trang 31KẾT LUẬN
Kết quả đạt được
Trang 32KẾT LUẬN
Hạn chế
32
Trang 33KẾT LUẬN
Hướng phát triển
Trang 34NHÓM EM XIN TRÂN TRỌNG CẢM ƠN THẦY CÔ VÀ CÁC BẠN ĐÃ CHÚ
Ý LẮNG NGHE