Báo cáo đồ án: Website bán điện thoại môn Công nghệ phần mềm | Trường Đại học Kiến trúc Đà Nẵng

BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC KIẾN TRÚC ĐÀ NẴNG
KHOA CÔNG NGHỆ THÔNG TIN
Báo Cáo Đồ Án Công Nghệ Phần Mềm
Đề tài: Website Bán Điện Thoại
Giáo viên hướng dẫn: Phạm Thị Dung
Sinh viên thực hiện : Đoàn Thanh Tùng MSSV : 2151220256
Lớp học phần: 21 1 CT
25, tháng 5 năm 2024 MỤC LỤC
CHƯƠNG I.........................................................................................................................4
1.1 Giới thiệu đề tài.........................................................................................................4
1.2 Hướng dẫn cài đặt môi trường...................................................................................4
1.2.1 Yêu cầu hệ thống................................................................................................4
1.2.2 Công cụ và ngôn ngữ lập trình sử dụng..............................................................4
1.2.3 Quá trình tạo dự án.............................................................................................5
CHƯƠNG 2........................................................................................................................7
2.1 Biểu đồ use case........................................................................................................7
2.2 Biểu đồ tuần tự..........................................................................................................8
2.2.1 Biều đồ tuần tự đăng nhập..................................................................................8
2.2.2 Biểu đồ tuần tự đăng ký......................................................................................8
2.2.3 Biểu đồ tuần tự mua hàng...................................................................................9
2.2.4 Biểu đồ tuần tự thanh toán................................................................................10
2.2.5 Biểu đồ tuần tự lịch sử......................................................................................10
2.2.6 Biểu đồ tuần tự thêm sản phẩm........................................................................10
2.4 Các bản thiết kế đề trang demo...............................................................................11
2.4.1 Giao diện đăng nhập.........................................................................................11
2.4.2 Giao diện trang đăng kí....................................................................................11
2.4.3 Giao diện trang chủ..........................................................................................11
2.4.4 Trang giỏ hàng..................................................................................................13
2.4.5 Trang lịch sử mua hàng....................................................................................13
2.4.6 Quản lý người dùng..........................................................................................14
2.4.7 Quản lý sản phẩm.............................................................................................14
2.4.8 Thêm sản phẩm................................................................................................15
2.4.9 Quản lý lịch sử giao dịch..................................................................................15
2.4.10 Thống kê số lượng..........................................................................................16
CHƯƠNG 3......................................................................................................................17
3.1 Bảng demo thực hiện gantt_chart............................................................................17 CHƯƠNG I
1.1 Giới thiệu đề tài
Trong thời đại công nghệ số, việc mua sắm trực tuyến đã trở thành một phần
không thể thiếu của cuộc sống hiện đại. Đặc biệt, nhu cầu mua sắm điện thoại di động
đang ngày càng tăng cao do tính tiện lợi và sự phát triển nhanh chóng của công nghệ.
Để đáp ứng nhu cầu này, đề tài xây dựng website bán điện thoại được đặt ra với mục
tiêu cung cấp một nền tảng mua sắm trực tuyến chuyên nghiệp và tiện lợi cho người
tiêu dùng. Website không chỉ trưng bày các sản phẩm điện thoại đa dạng từ nhiều
thương hiệu nổi tiếng mà còn tích hợp các tính năng hỗ trợ người dùng như so sánh
sản phẩm, đánh giá và nhận xét từ người dùng, cùng với các chương trình khuyến mãi
hấp dẫn. Ngoài ra, website cũng sẽ đảm bảo tính bảo mật cao trong giao dịch và quản
lý thông tin khách hàng, giúp khách hàng yên tâm khi mua sắm. Dự án này không chỉ
giúp khách hàng dễ dàng tiếp cận với những sản phẩm điện thoại chất lượng mà còn
góp phần nâng cao hiệu quả kinh doanh và khả năng cạnh tranh của doanh nghiệp
trong lĩnh vực thương mại điện tử.
Để giải quyết những vấn đề này, em quyết định thiết kế một website mua bán
hàng trực tuyến nhằm hỗ trợ các cửa hàng kinh doanh phát triển hiệu quả hơn. Mục
tiêu của dự án là giúp các cửa hàng quản lý dễ dàng hơn, tiết kiệm chi chí và đáp ứng
được nhu cầu của khách hàng một cách tốt nhất.
1.2 Hướng dẫn cài đặt môi trường 1.2.1 Yêu cầu hệ thống Phần cứng:
• Bộ vi xử lý: Intel Core i3 hoặc cao hơn
• RAM: 4GB hoặc cao hơn Ổ cứng: 20GB dung lượng trống Phần mềm:
• Hệ điều hành: Windows, macOs, hoặc Linux
• Node.js: phiên bản 14.x hoặc cao hơn
• MongoDB: phiên bản 4x. hoặc cao hơn
• Trình duyệt web: Google Chrome, Microsoft Edge
1.2.2 Công cụ và ngôn ngữ lập trình sử dụng Ngôn ngữ lập trình: • JavaScript (ES6+) • HTML • CSS Công nghệ phía client: • React • React Router • Tailwindlwind
Công nghệ phía server: Node.js Express.js Cơ sở dữ liệu: MongoDB
1.2.3 Quá trình tạo dự án
Bước 1: Tạo thư mục Merchanza sau đó mở bằng visual studio code
Bước 2 :Trong thư mục mục `Merchanza` tạo 3 folder `fontend` và
`backend` và `admin` Merchanza fontend backend admin
Bước 3: Mở terminal của từng file lên Fronend:
npm create vite@latest . -- --template react
npm install -D tailwindcss postcss autoprefixer npx tailwindcss init –p Backend npm i init
npm i express jsonwebtoken mongoose multer cors Admin
npm create vite@latest . -- --template react
npm install -D tailwindcss postcss autoprefixer npx tailwindcss init –p
Bước 4: Triển khai chạy dự án Khởi động fontend: npm run dev Khởi động backend: npm run server Khởi động admin: npm run dev CHƯƠNG 2
2.1 Biểu đồ use case
2.2 Biểu đồ tuần tự
2.2.1 Biều đồ tuần tự đăng nhập
2.2.2 Biểu đồ tuần tự đăng ký
2.2.3 Biểu đồ tuần tự mua hàng
2.2.4 Biểu đồ tuần tự thanh toán
2.2.5 Biểu đồ tuần tự lịch sử
2.2.6 Biểu đồ tuần tự thêm sản phẩm 2.3 Dữ liệu
2.4 Các bản thiết kế đề trang demo
2.4.1 Giao diện đăng nhập
2.4.2 Giao diện trang đăng kí 2.4.3 Giao diện trang chủ 2.4.4 Trang giỏ hàng
2.4.5 Trang lịch sử mua hàng
2.4.6 Quản lý người dùng
2.4.7 Quản lý sản phẩm 2.4.8 Thêm sản phẩm
2.4.9 Quản lý lịch sử giao dịch
2.4.10 Thống kê số lượng CHƯƠNG 3
3.1 Bảng demo thực hiện gantt_chart gANTT CHART
Ngày bắt đầu Ngày kết thúc Số ngày thực hiện 5/27/2024 5/28/2024 1 5/25/2024 5/26/2024 1 5/20/2024 5/24/2024 4 5/17/2024 5/19/2024 2 5/14/2024 5/17/2024 3 5/9/2024 5/13/2024 4 5/6/2024 5/8/2024 2 4/30/2024 5/5/2024 5 4/22/2024 4/29/2024 7 4/17/2024 4/21/2024 4 4/11/2024 4/16/2024 5 4/7/2024 4/10/2024 3 4/1/2024 4/6/2024 5 3/25/2024 3/30/2024 5 3/20/2024 3/24/2024 4 3/16/2024 3/20/2024 4 2/12/2024 2/15/2024 3 2/5/2024 2/11/2024 6 2/1/2024 2/5/2024 4 1/26/2024 1/30/2024 4