(Tiểu luận) báo cáo đồ án môn học kỹ thuật phát triển hệ thống web đề tài website bán hàng

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA KHOA HỌC VÀ KỸ THUẬT THÔNG TIN *** BÁO CÁO ĐỒ ÁN MÔN HỌC KỸ THUẬT PHÁT TRIỂN HỆ THỐNG WEB ĐỀ TÀI WEBSITE BÁN HÀNG Giảng viên hướng dẫn: Võ Ngọc Tân Nhóm thực hiện: Thơng Văn Tiến– 18520417 Nhan Huỳnh Đức– 18520617 TP Hồ Chí Minh, năm 2022 LỜI CẢfM ƠN Trong sống chúng ta, có lẽ thất bại thành công, dù kết nỗ lực cá nhân tập thể Và đằng sau hỗ trợ giúp đỡ từ người Xét mặt thành công, thực tế khơng có thành cơng mà khơng có giúp đỡ, học tập Dân gian ta có câu “Khơng thầy đố mày làm nên” thật đúng, học sinh thành công khơng có giúp đỡ, truyền đạt bảo tận tình người Thầy, người Cơ Hơm nay, để hồn thành đồ án mơn học này, nhóm chúng em biết ơn Võ Ngọc Tân hỗ trợ tận tình cho chúng em Với lịng biết ơn sâu sắc nhất, nhóm chúng em xin gửi đến Thầy với tri thức tâm huyết để truyền đạt vốn kiến thức quý báu cho chúng em suốt thời gian học tập trường Thầy hướng dẫn cho chúng em cụ thể chi tiết quy trình cách làm đồ án nhiều kiến thức quý báu lời góp ý cho đồ án Ngoài ra, để đồ án hoàn thành khơng thể cám ơn người làm đó, cám ơn bạn thành viên nhóm chăm chịu khó hồn thành nhiệm vụ tiến độ Với giúp đỡ, cuối nhóm hồn thành đồ án có tên: “Website bán hàng” Trải qua thời gian học đề tài Với hướng dẫn tận tình đóng góp q báu Thầy giúp nhóm chúng em hồn thành tốt báo cáo mơn học Bên cạnh việc vận dụng kiến thức học lớp đồng thời kết hợp với việc học hỏi tìm hiểu kiến thức Từ đó, nhóm vận dụng tối đa tiếp thu để hoàn thành báo cáo đồ án tốt Tuy nhiên, trình thực hiện, khơng tránh khỏi sai sót Do đó, mong nhận góp ý từ phía Thầy nhằm giúp nhóm hồn thiện kiến thức học tập hành trang để nhóm thực tiếp đề tài khác tương lai Xin chân thành cảm ơn Thầy! Trân trọng cảm ơn Thầy NHẬN XÉT CỦA GIÁO VIÊN THƠNG TIN NHĨM Lớp : M21 Nhóm 10 STT Họ Tên Thơng Văn Tiến Nhan Huỳnh Đức MSSV Gmail SĐT 18520417 18520617 MỤC LỤC MỤC LỤC DANH MỤC BẢNG DANH MỤC HÌNH ẢNH Chương 1: GIỚI THIỆU 1.1 Lí chọn đề tài: 1.2 Mục tiêu đề tài: Chương 2: GIỚI THIỆU CÁC CÔNG NGHỆ SỬ DỤNG 10 2.1 React 10 2.2 Nodejs 10 2.3 MySQL 11 2.4 SASS 12 2.5 React router 14 Chương 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 15 3.1 Sơ đồ đặc tả Ca sử dụng (Use Case Diagram and Specification) 15 3.1.1 Sơ đồ tổng: 15 3.1.2 Sơ đồ admin: 15 3.1.3 Sơ đồ khách hàng: 16 3.1.4 Sơ đồ khách hàng vãng lai sử dụng 16 3.2 Thiết kế liệu 17 3.2.1 Dữ liệu: 17 3.2.2 Mô tả chi tiết kiểu liệu sơ đồ 17 3.3 Thiết kế giao diện 18 3.3.1 Danh sách hình 18 3.3.2 Mô tả hình 19 3.3.2.1 Màn hình đăng nhập: 19 3.3.2.2 Màn hình trang chủ: 19 3.3.2.3 Màn hình chi tiết sản phẩm 21 3.3.2.4 Màn hình đăng ký 22 3.3.2.5 Màn hình feedback 23 3.3.2.6 Màn hình comment cho sản phẩm 24 3.3.2.7 Màn hình quản lí sản phẩm 24 3.3.2.8 Chương 4: Màn hình thêm sản phẩm 25 NHẬN XÉT VÀ KẾT LUẬN 26 HƯỚNG PHÁT TRIỂN 27 TÀI LIỆU THAM KHẢO 27 DANH MỤC BẢNG Bảng 3-1: Bảng mô tả liệu .16 Bảng 3-2: Danh sách hình .17 DANH MỤC HÌNH ẢNH Hình 3-1: Sơ đồ tổng .14 Hình 3-2: Usecase admin 14 Hình 3-3: Sơ đồ khách hàng .15 Hình 3-4: Sơ đồ khách vãng lai 15 Hình 3-5: Database 16 Hình 3-6: Màn hình đăng nhập 18 Hình 3-7: Home header 18 Hình 3-8: Home center .19 Hình 3-9: Home footer .19 Hình 3-10: Chi tiết sản phẩm 20 Hình 3-11: Màn hình đăng ký .21 Hình 3-12: Màn hình feedback 22 Hình 3-13: Màn hình comment 23 Hình 3-14: Màn hình quản lý sản phẩm 23 Hình 3-15: Màn hình thêm sản phẩm .24 Chương 1: GIỚI THIỆU 1.1 Lí chọn đề tài: Trong thời đại công nghệ phát triển nhiều, với tinh hình đại dịch Covid – 19 phức tạp việc mua sắm trực tuyến điều cần thiết trở nên quan trọng nhiều Để phòng chống dịch bệnh tuân theo việc nhà yêu cầu hết từ việc học tập, giải trí làm việc online cao Việc mua sắm online xu Nó đem lại tiện lợi thông qua tất giao dịch điều thực internet Người dùng người không cần phải tiếp xúc trực tiếp dễ dàng tiếp cận với người dùng nên nhóm định tạo trang web bán hàng online 1.2 Mục tiêu đề tài: Tạo trang web bán thiết bị điện tử với đầy đủ chức năng, dịch vụ để phục vụ nhu cầu người dùng Xong nghiên cứu biết thêm vài cơng nghệ ngơn ngữ lập trình dùng cho wedsite đồng thời cố gắng thể sang tạo thân Chương 2: 2.1 GIỚI THIỆU CÁC CÔNG NGHỆ SỬ DỤNG React Reactjs thư viện Javascript mã nguồn mở hỗ trợ xây dựng thành phần giao diện nhanh gọn tiện lợi Bình thường lập trình viên nhúng javascript vào code HTML thông qua attribute AngularJS với Reactjs làm việc thư viện cho phép nhúng HTML vào javascript thơng qua JSX Qua bạn dễ dàng lồng đoạn HTML vào JSX làm cho component dễ hiểu dễ sử dụng Trong Reactjs thường dùng javascript để thiết kế bố cục cho trang web, nhược điểm cấu trúc khó Thay vào sử dụng JSX nhúng đoạn HTML vào javascript, ta thấy cú pháp dễ hiểu JSX tối ưu code biên soạn Vừa dễ cho người lập trình mà vừa tiện cho việc biên dịch 2.2 Nodejs NodeJS tảng xây dựng V8 JavaScript Engine – trình thơng dịch thực thi mã JavaScript, giúp xây dựng ứng dụng web cách đơn giản dễ dàng mở rộng NodeJS phát triển Ryan Dahl vào năm 2009 chạy nhiều hệ điều hành khác nhau: OS X, Microsoft Windows, Linux NodeJS viết JavaScript với cộng đồng người dùng lớn mạnh Nếu bạn cần hỗ trợ NodeJS, nhanh chóng có người hỗ trợ bạn Tốc độ xử lý nhanh Nhờ chế xử lý bất đồng (non-blocking), NodeJS xử lý hàng ngàn kết nối lúc mà khơng gặp khó khăn Dễ dàng mở rộng Nếu bạn có nhu cầu phát triển website tính dễ dàng mở rộng NodeJS lợi quan trọng Expressjs framework xây dựng tảng Nodejs Nó cung cấp tính mạnh mẽ để phát triển web mobile Expressjs hỗ trợ method HTTP midleware tạo API vô mạnh mẽ dễ sử dụng 10 - Khó xác định vùng chọn bạn phải tốn nhiều thời gian để xác định điều sass dùng cách thụt đầu dòng để định nghĩa - Sass tạo nhàm chán sử dụng khơng hỗ trợ nhiều plugin 2.5 React router React Router thư viện chuẩn để định tuyến React Nó cho phép điều hướng chế độ xem thành phần khác Ứng dụng React, cho phép thay đổi URL trình duyệt giữ giao diện người dùng đồng với URL Các thành phần: - BrowserRouter: BrowserRouter triển khai định tuyến sử dụng API lịch sử HTML5 (pushState, ReplaceState kiện popstate) để giữ cho giao diện người dùng bạn đồng với URL Nó thành phần mẹ sử dụng để lưu trữ tất thành phần khác - Route: Route thành phần hiển thị có điều kiện hiển thị số giao diện người dùng đường dẫn khớp với URL - Link: Link component sử dụng để tạo liên kết đến tuyến đường khác triển khai điều hướng xung quanh ứng dụng Nó hoạt động giống thẻ liên kết HTML - Switch: Switch component sử dụng để hiển thị route phù hợp với vị trí thay hiển thị tất tuyến đường phù hợp Mặc dù khơng có chức thách thức thẻ SWITCH ứng dụng thực khơng có đường dẫn LINK trùng khớp Nhưng giả sử có route (Lưu ý khơng có CHÍNH XÁC đây), sau tất thẻ Route xử lý bắt đầu '/' (tất Route bắt đầu /) Đây nơi cần câu lệnh SWITCH để xử lý câu lệnh 14 Chương 3: 3.1 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG Sơ đồ đặc tả Ca sử dụng (Use Case Diagram and Specification) 3.1.1 Sơ đồ tổng: Hình 3- 1: Sơ đồ tổng 3.1.2 Sơ đồ admin: Hình 3- 2: Usecase admin 15 3.1.3 Sơ đồ khách h_ng: Hình 3- 3: Sơ đồ khách hàng 3.1.4 Sơ đồ khách h_ng vãng lai sa dbng Hình 3- 4: Sơ đồ khách vãng lai 16 3.2 Thiết kế liệu 3.2.1 Dữ liệu: Hình 3- 5: Database 3.2.2 Mơ tả chi tiết kiểu liệu sơ đồ STT Tên bảng Chú thich user Người dùng products Sản phẩm comment Bình luận 17 producttypes Loại sản phẩm feedback Phản hồi Bảng 3- 1: Bảng mô tả liệu 3.3 Thiết kế giao diện 3.3.1 Danh sách m_n hình STT Tên m_n hình Sign in Home Destinations FeedBack Comments Thêm, xóa, sửa sản phẩm Màn hình đăng kí Loại m_n hình Màn hình đăng nhập Màn hình Màn hình chi tiết sản phẩm Màn hình thơng tin phản hồi Màn hình comment Màn hình quản lí sản phẩm Bảng 3- 2: Danh sách hình 18 3.3.2 Mơ tả m_n hình chinh 32.1.1 M_n hình đăng nhập: Giao diện Hình 3- 6: Màn hình đăng nhập 19 32.1.2 M_n hình trang chủ: Giao diện Hình 3- 7: Home header Hình 3- 8: Home center 20