báo cáo thực tập cơ sở xây dựng website bán hàng quần áo online

 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

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

 Để đá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

 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

• Tối ưu hóa hiệu suất

 Các thư viện và framework (Lavarel)

1.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ả

2 Phân tích thiết kế

hệ thống

Admin (Người quản lý hệ thống):

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

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

2.2 Biểu đồ Usecase tổng quát

2.3 Biểu đồ tuần tự của một số chức năng

14

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

2.3 Biểu đồ tuần tự của một số chức năng

16

2.3 Biểu đồ tuần tự của một số chức năng

2.4 Sơ đồ kết nối các bảng

18

3.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 Vite Bước 4: Khởi tạo môi trường phát triển API

• 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

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

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

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

3.2 Một số giao diện ứng dụng trên thiết bị di động

3.2 Một số giao diện ứng dụng trên thiết bị di động

26

3.3 Một số giao diện web admin

3.3 Một số giao diện web admin

28

KẾT LUẬN

Kết quả đạt được

30

KẾT LUẬN

Kết quả đạt được

KẾT LUẬN

Hạn chế

32

KẾT LUẬN

Hướng phát triển

NHÓM EM XIN TRÂN TRỌNG CẢM

ƠN THẦY CÔ VÀ CÁC BẠN ĐÃ CHÚ

Ý LẮNG NGHE