ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC BÁCH KHOA KHOA KHOA HỌC & KỸ THUẬT MÁY TÍNH LẬP TRÌNH WEB Thiết kế và xây dựng các tính năng cơ bản cho Website bán Laptop GVHD: Nguyễn Hữu Hiếu Lớp: L04 - L06 SV thực hiện: Trần Quốc Thái - 2010616 Kha Sang – 2010576 Liễu Minh Vương – 2015108 Lê Quang Tuấn Hào – 2013048 Email: sang. Hồ Chí Minh, Tháng 12/2022 Trường Đại Học Bách Khoa Tp.Hồ Chí Minh Khoa Khoa Học & Kỹ Thuật Máy Tính Mục lục 1 Nhiệm vụ, vai trò của từng thành viên trong nhóm 4 2 Giới thiệu đề tài 5 2.1 Tính cấp thiết của đề tài .3 Các chức năng của trang web .1 Các yêu cầu chức năng .2 Các yêu cầu phi chức năng .1 Các công nghệ sử dụng .2 Kiến trúc Model - View - Controller .3 Các lỗ hổng bảo mật trong ứng dụng web .4 Tăng độ tin cậy của website với SEO. 12 4 Thiết kế ứng dụng 14 4.11 Bảng Cart_item .2 Cấu trúc mã nguồn .1 Các thư mục giao diện - Client .2 Các thư mục xử lý và truy vấn dữ liệu - Server .3 Các tính năng được xây dựng .1 Các tính năng của khách (chưa đăng nhập) .2 Các tính năng của thành viên (đã đăng nhập) .3 Các tính năng của quản trị viên .2 Tìm kiếm 1 sản phẩm .3 Tính năng đăng ký & đăng nhập của thành viên & admin .6 Thông tin 1 sản phẩm .7 Tính năng bình luận một sản phẩm .8 Tính năng xem lịch sử đơn hàng .9 Tính năng giỏ hàng. 42 Đề tài Bài tập lớn môn Lập trình Web - Học kì 221 Trang 1/57 Trường Đại Học Bách Khoa Tp.Hồ Chí Minh Khoa Khoa Học & Kỹ Thuật Máy Tính 5.11 Bảng điều khiển của Admin .12 Bảng quản lý tài khoản .1 Xem chi tiết tài khoản .2 Cấm tài khoản .13 Bảng quản lý sản phẩm .1 Xem chi tiết 1 sản phẩm .2 Sửa chi tiết 1 sản phẩm .14 Bảng quản lý đơn hàng .15 Bảng quản lý bình luận .1 Xem chi tiết bình luận .2 Xác nhận phản hồi .16 Bảng quản lý tin tức .1 Xem chi tiết 1 tin tức .2 Sửa chi tiết 1 tin tức .17 Bảng quản lý tài nguyên.
54 6 Cài đặt ứng dụng 56 References 57 Đề tài Bài tập lớn môn Lập trình Web - Học kì 221 Trang 2/57 Trường Đại Học Bách Khoa Tp.Hồ Chí Minh Khoa Khoa Học & Kỹ Thuật Máy Tính Danh sách hình vẽ 1 ReactJS. 10 5 Mô tả mô hình MVC. 11 6 Search Engine Optimization. 13 7 Tìm kiếm theo từ khóa.
29 8 Tìm kiếm theo phân loại. 29 9 Tìm kiếm theo bộ lọc. 30 10 Truy cập trang đăng kí hoặc đăng nhập. 30 11 Trang đăng nhập.
31 12 Đăng nhập bị lỗi. 31 13 Đăng nhập khách hàng thành công. 32 14 Đăng nhập admin thành công. 33 16 Kiểm tra đăng kí bị sai từ phía client.
33 17 Kiểm tra đăng kí bị sai từ phía server. 34 18 Đăng nhập thành công. 34 19 Giới thiệu chung. 35 20 Danh sách thành viên.
35 21 Hệ thống cửa hàng. 36 22 Trang tin tức. 37 23 Trang tin tức chi tiết. 37 24 Trang chi tiết sản phẩm.
38 25 Trang chi tiết cấu hình sản phẩm. 38 26 Trang tin tức chi tiết. 39 27 Thêm vào giỏ hàng thông qua nút mua ở thẻ sản phẩm. 41 28 Thêm vào giỏ hàng thông qua nút mua hoặc nút thêm vào giỏ hàng ở trnag chi tiết sản phẩm.
41 29 Truy cập trang giỏ hàng. 42 30 Trang giỏ hàng. 42 31 Trang thanh toán. 43 32 Thanh toán qua quét mã QR.
43 33 Xác nhận đã thanh toán. 44 34 Đặt hàng thành công. 44 35 Giao diện duyệt đơn hàng. 50 36 Giao diện hủy bỏ đơn hàng.
50 37 Trang chủ - Giao diện trên Tablet. 54 38 Trang chủ - Giao diện trên Mobile. 55 Đề tài Bài tập lớn môn Lập trình Web - Học kì 221 Trang 3/57 Trường Đại Học Bách Khoa Tp.Hồ Chí Minh Khoa Khoa Học & Kỹ Thuật Máy Tính 1 Nhiệm vụ, vai trò của từng thành viên trong nhóm Họ tên Nhiệm vụ Kha Sang Tính năng Quản lý thành viên Tính năng Quản lý bình luận Tính năng Quản lý sản phẩm Tính năng Quản lý tin tức Tính năng Quản lý tài nguyên Giao diện Trang chủ và Tìm kiếm sản phẩm Soạn Báo cáo các phần liên quan Liễu Minh Vương Tính năng Quản lý đơn hàng và Chi tiết đơn hàng Tính năng Giỏ hàng Tính năng Xem chi tiết sản phẩm Tính năng Thanh toán Soạn Báo cáo các phần liên quan Trần Quốc Thái Thiết kế Database + Tạo dữ liệu Giao diện tin tức Tính năng đăng kí/ đăng nhập Soạn Báo cáo các phần liên quan Lê Quang Tuấn Hào Giao diện thông tin liên hệ + Chính sách mua bán Giao diện Về chúng tôi Quản lí tài khoản cá nhân + Lịch sử mua bán Tính năng thêm bình luận Soạn Báo cáo các phần liên quan Đề tài Bài tập lớn môn Lập trình Web - Học kì 221 Trang 4/57 Trường Đại Học Bách Khoa Tp.Hồ Chí Minh Khoa Khoa Học & Kỹ Thuật Máy Tính 2 Giới thiệu đề tài 2.1 Tính cấp thiết của đề tài Trong thời đại công nghệ 4.0, các thiết bị điện tử cá nhân đã trở nên quan trọng hơn bao giờ hết đối với con người. Từ chiếc điện thoại thông minh, máy tính bảng, máy tính cá nhân, tất cả đều phải được người dùng chọn lựa kỹ càng sao cho vừa phù hợp với nhu cầu sử dụng cũng như tài chính.
Hiện nay, trên thị trường có rất nhiều nhãn hiệu thiết bị cũng như các đại lý bán hàng. Mỗi các hãng thiết bị hoặc các đại lý đều có các trang web bán hàng của riêng mình. Tuy các trang web này đều có những ưu điểm của riêng mình, song cũng tồn tại những những khuyết điểm rất lớn. Thông qua Bài tập lớn lần này, nhóm hi vọng sẽ tạo ra được một trang web mẫu cho một công ty mà có thể kế thừa các ưu điểm và khắc phục những khuyết điểm của các trang web hiện tại.2 Sơ lược đề tài Tên trang web: Playzone Thể loại trang web: Trang web bán hàng Tên công ty tham khảo: Memory Zone Loại hàng hóa: Máy tính cá nhân và các linh kiện máy tính để bàn 2.3 Các chức năng của trang web 2.1 Các yêu cầu chức năng • Khách hàng – Có thể xem thông tin chi tiết các mặt hàng được bán tại Playzone – Có thể so sánh các thông số giữa các mặt hàng cùng loại – Tạo tài khoản (để trở thành thành viên) và sử dụng tài khoản trong các vấn đề: ∗ Thay đổi, cập nhật các thông tin cá nhân để phục vụ cho việc giao nhận hàng ∗ Đặt hàng, thành toán online ∗ Theo dõi tình trạng đơn hàng ∗ Lưu giữ lịch sử đơn hàng ∗ Tích điểm thưởng và lưu các voucher khuyến mãi ∗ Bảo hành sản phẩm ∗ Đánh giá mặt hàng (đánh giá sao) ∗ Nhận xét, bình luận về mặt hàng, đơn hàng – Xem các thông tin liên quan đến công ty (địa chỉ, giấy phép kinh doanh, mã số thuế, tài khoản ngân hàng, .) – Xem các tin tức mới nhất về các hãng và sản phẩm được bán tại trang Playzone – Chat với nhân viên tư vấn thông qua Messenger, Zalo, Email • Quản trị viên trang web – Quản lý các tài khoản khách hàng đã taoj – Kiểm duyệt bình luận của các thành viên – Đăng tải các thông tin và bài báo cập nhật liên quan đến các sản phẩm công nghệ liên quan – Thêm, xóa, thay đổi các sản phẩm đang bán tại Playzone – Kiểm duyệt đơn hàng và cập nhật tình trạng đơn hàng Đề tài Bài tập lớn môn Lập trình Web - Học kì 221 Trang 5/57 Trường Đại Học Bách Khoa Tp.Hồ Chí Minh Khoa Khoa Học & Kỹ Thuật Máy Tính 2.2 Các yêu cầu phi chức năng Type 1: Usability/ Tính khả dụng 1.1 Người dùng có thể sử dụng toàn bộ hệ thống sau 15 phút hướng dẫn.2 Responsive website với kích thước dao động từ điện thoại cho đến màn hình tivi 4K.3 Việc sử dụng tương tự như các trang bán hàng thông dụng hiện tại với các tính năng tương tự, có thể dễ dàng làm quen và sử dụng ở nhiều thiết bị.4 Giao diện bắt mắt, các danh mục chính đều nằm trong vùng màn hình đầu tiên - không phải cuộn xuống để hiện đầy đủ các danh mục.5 Giao diện không gây lỗi render trên các trình duyệt phổ biến (Chrome 43.
Type 2: Security/ Tính bảo mật 2.1 Thông tin của người dùng được bảo mật kĩ dưới nhiều dạng/ lớp mã hoá (ví dụ như SHA256 encoder cho mật khẩu).2 Gợi ý người dùng đặt mật khẩu khó (trên 8 kí tự, trong đó bao gồm cả chữ, số và kí tự đặc biệt). Không cho đăng nhập trong 5 phút nếu nhập mật khẩu sai 5 lần trong 30s liên tục.3 Hệ thống bảo mật không bị ảnh hưởng khi thay đổi công nghệ hệ thống hoặc bởi những tác nhân khác ngoài chính người dùng đó. Type 3: Reliability/ Tính tin cậy 3.1 Downtime của website mỗi tháng không quá 1 giờ.2 Ứng dụng có thể xử lý khoảng 1000 giao dịch trong 1 giờ với xác suất thành công là trên 90%. Type 4: Performance/ Hiệu năng 4.1 Thời gian chuyển trang không quá 2s trong điều kiện kết nối bình thường.2 Thời gian phản hồi của 80% transaction dài không quá 1500 mili giây kể từ lúc user gửi yêu cầu.3 Thời gian load các component trong trang cũng như giữa các Routers nhanh (1-2s).
Type 5: Availability/ Tính có sẵn 5.1 Trang web đảm bảo hoạt động ổn định 24/7, kể cả ngày lễ và giờ cao điểm. Type 6: Extensibility/ Tính mở rộng 6.1 Dễ dàng thêm các module chức năng mới mà không thay đổi cấu trúc cũ của chương trình.2 Có thể thêm chức năng phụ trợ vào những chức năng sẵn có, và về sau có khả năng nâng cao hiệu suất của chúng. Đề tài Bài tập lớn môn Lập trình Web - Học kì 221 Trang 6/57 Trường Đại Học Bách Khoa Tp.Hồ Chí Minh Khoa Khoa Học & Kỹ Thuật Máy Tính 3 Cơ sở lý thuyết 3.1 Các công nghệ sử dụng Trong phần này, nhóm sẽ trình bày về các công nghệ sử dụng lập trình giao diện Front-End (ReactJS + Bootstrap 5), tương tác server Back-End (PHP) và hệ quản trị cơ sở dữ liệu (MySQL).1 ReactJS ReactJS là một thư viện của Javascript, giúp cho lập trình viên có thể tạo ra các giao diện phức tạp bằng việc định nghĩa các component nhỏ, đơn giản hơn với sự hỗ trợ đến từ ReactJS.