(Đồ án hcmute) xây dựng website đặt vé xem phim sử dụng mern stack

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN XÂY DỰNG WEBSITE ĐẶT VÉ XEM PHIM SỬ DỤNG MERN STACK GVHD: TS LÊ VĂN NINH SVTH: NGUYỄN THU NGÂN NGUYỄN NHƯ BẢO PHƯƠNG SKL010546 Tp.Hồ Chí Minh, Năm 2023 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO - - KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG WEBSITE ĐẶT VÉ XEM PHIM SỬ DỤNG MERN STACK GVHD: TS Lê Văn Vinh Sinh viên thực hiện: NGUYỄN THU NGÂN 18110161 NGUYỄN NHƯ BẢO PHƯƠNG 18110180 Khóa: 2018 Ngành: CƠNG NGHỆ THƠNG TIN Thành phố Hồ Chí Minh, tháng 12 năm 2022 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO - - KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG WEBSITE ĐẶT VÉ XEM PHIM SỬ DỤNG MERN STACK GVHD: TS Lê Văn Vinh Sinh viên thực hiện: NGUYỄN THU NGÂN 18110161 NGUYỄN NHƯ BẢO PHƯƠNG 18110180 Khóa: 2018 Ngành: CƠNG NGHỆ THƠNG TIN Thành phố Hồ Chí Minh, tháng 12 năm 2022 ĐH SƯ PHẠM KỸ THUẬT TP HCM CỘNG HÒA Xà HỘI CHỦ NGHĨA VIỆT NAM KHOA ĐÀO TẠO CHẤT LƯỢNG CAO Độc lập – Tự – Hạnh Phúc ******* ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên Sinh viên 1: Nguyễn Thu Ngân MSSV 1: 18110161 Họ tên Sinh viên 2: Nguyễn Như Bảo Phương MSSV 2: 18110180 Ngành: Công nghệ Thông tin Tên đề tài: Xây dựng website đặt vé xem phim sử dụng MERN Stack Họ tên Giáo viên hướng dẫn: TS Lê Văn Vinh NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: Tp Hồ Chí Minh, ngày tháng 12 năm 2022 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) ĐH SƯ PHẠM KỸ THUẬT TP HCM CỘNG HÒA Xà HỘI CHỦ NGHĨA VIỆT NAM KHOA ĐÀO TẠO CHẤT LƯỢNG CAO Độc lập – Tự – Hạnh Phúc ******* ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên Sinh viên 1: Nguyễn Thu Ngân MSSV 1: 18110161 Họ tên Sinh viên 2: Nguyễn Như Bảo Phương MSSV 2: 18110180 Ngành: Công nghệ Thông tin Tên đề tài: Xây dựng website đặt vé xem phim sử dụng MERN Stack Họ tên Giáo viên phản biện: thầy Nguyễn Đức Khoan NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: Tp Hồ Chí Minh, ngày tháng 12 năm 2022 Giáo viên phản biện (Ký & ghi rõ họ tên) LỜI CẢM ƠN Lời nhóm xin phép gửi lời cảm ơn chân thành sâu sắc đến với Khoa Đào Tạo Chất Lượng Cao – Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh tạo điều kiện cho nhóm chúng em học tập, phát triển tảng kiến thức sâu sắc thực đề tài Bên cạnh đó, nhóm chúng em xin gửi lời cảm ơn chân thành đến thầy Lê Văn Vinh, người tận tình bảo hướng dẫn nhóm chúng em thực đề tài Mặc dù nhóm chúng em cố gắng để hồn thành cách tốt nhất, thời gian hạn hẹp, khả cịn hạn chế nên khó tránh khỏi việc thiếu sót báo cáo Chúng em mong nhận thơng cảm, góp ý đóng góp thầy để đề tài hồn thiện hơn, để phát triển phục vụ cho tương lai Chúng em chân thành cảm ơn Nhóm thực Nguyễn Thu Ngân – 18110161 Nguyễn Như Bảo Phương – 18110180 TÓM TẮT TIẾNG VIỆT Các vấn đề nghiên cứu - Tìm hiểu hệ thống tương tự, phân tích để tìm điểm mạnh phù hợp để áp dụng - Tìm hiểu NodeJS, ExpressJS để giải vấn đề cung cấp dịch vụ API cho hệ thống đặt vé xem phim - Tìm hiểu ReactJS để tạo giao diện thực chức cho hệ thống đặt vé xem phim Các vấn đề phát sinh - Tính bảo mật website - Dùng dường dẫn ảnh trực tuyến bị lỗi hiển thị - Giải pháp hoàn tiền Paypal Các phương pháp giải vấn đề - Sử dụng JWT để cải thiện yêu cầu bảo mật cho website - Lưu ảnh local multer Kết đạt - Hệ thống Đặt vé xem phim gồm: website cho phía người dùng cuối website cho phía người quản lý trang - Giao diện dễ sử dụng với người dùng - Đáp ứng chức MỤC LỤC DANH MỤC HÌNH ẢNH I DANH MỤC BẢNG BIỂU III DANH MỤC TỪ VIẾT TẮT V DANH MỤC TỪ CHUYÊN NGÀNH VI KẾ HOẠCH THỰC HIỆN CHƯƠNG 1: PHẦN MỞ ĐẦU 1.1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1.2 ĐỐI TƯỢNG NGHIÊN CỨU 1.3 PHẠM VI NGHIÊN CỨU 1.4 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1 NODEJS 2.2 EXPRESSJS 2.3 MONGODB 2.4 REACTJS 2.5 JSON WEB TOKEN CHƯƠNG 3: KHẢO SÁT HIỆN TRẠNG VÀ MƠ HÌNH HÓA YÊU CẦU 11 3.1 KHẢO SÁT HIỆN TRẠNG 11 3.3 MƠ HÌNH HĨA U CẦU 16 CHƯƠNG THIẾT KẾ PHẦN MỀM 48 4.1 LƯỢC ĐỒ LỚP 48 4.2 LƯỢC ĐỒ TUẦN TỰ 49 4.3 CHI TIẾT BẢNG DỮ LIỆU 65 4.4 SƠ ĐỒ ERD 72 4.5 GIAO DIỆN NGƯỜI DÙNG 72 CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ PHẦN MỀM 107 5.1 CÔNG CỤ DÙNG TRONG DỰ ÁN 107 5.2 CÀI ĐẶT ỨNG DỤNG 107 5.3 THỰC HIỆN KIỂM THỬ 108 5.4 KẾ HOẠCH KIỂM THỬ 108 5.5 SO SÁNH SẢN PHẨM 122 CHƯƠNG 6: TỔNG KẾT 125 6.1 KẾT QUẢ ĐẠT ĐƯỢC 125 6.2 ƯU ĐIỂM 125 6.3 NHƯỢC ĐIỂM 125 6.4 HƯỚNG PHÁT TRIỂN 125 CHƯƠNG 7: TÀI LIỆU THAM KHẢO 126 DANH MỤC HÌNH ẢNH Hình Trang CGV 11 Hình Trang BHD 12 Hình Trang GALAXYCINE 13 Hình Trang CINESTAR 14 Hình Lược đồ khách 19 Hình Lược đồ người quản lý trang 20 Hình Lược đồ Quản lý phim 21 Hình Lược đồ Quản lý đồ ăn 22 Hình Lược đồ lớp 48 Hình 10 Lược đồ ĐĂNG NHẬP 49 Hình 11 Lược đồ ĐĂNG XUẤT 50 Hình 12 Lược đồ ĐĂNG KÝ 51 Hình 13 Lược đồ XEM THÔNG TIN CÁ NHÂN 51 Hình 14 Lược đồ SỬA THƠNG TIN KHÁCH HÀNG 52 Hình 15 Lược đồ THAY ĐỔI MẬT KHẨU KHÁCH HÀNG 52 Hình 16 Lược đồ ĐẶT VÉ KHƠNG DÙNG ĐIỂM THƯỞNG 53 Hình 17 Lược đồ ĐẶT VÉ DÙNG ĐIỂM THƯỞNG 53 Hình 18 Lược đồ XEM LỊCH SỬ GIAO DỊCH 54 Hình 19 Lược đồ “XEM THƠNG TIN NGƯỜI DÙNG” 55 Hình 20 Lược đồ “XEM THÔNG TIN PHIM” 56 Hình 21 Lược đồ “TẠO PHIM MỚI” 57 Hình 22 Lược đồ “CẬP NHẬT PHIM” 58 Hình 23 Lược đồ “XĨA PHIM SẮP CHIẾU” 58 Hình 24 Lược đồ “XEM THÔNG TIN COMBO” 59 Hình 25 Lược đồ “TẠO COMBO MỚI” 60 Hình 26 Lược đồ “CẬP NHẬT COMBO” 61 Hình 27 Lược đồ “XÓA COMBO” 61 Hình 28 Lược đồ “THỐNG KÊ DOANH THU” 62 Hình 29 Lược đồ “THỐNG KÊ SỐ LƯỢNG” 63 Hình 30 Lược đồ “XÓA LỊCH CHIẾU” 64 Hình 31 Lược đồ "THÊM LỊCH CHIẾU" 65 Hình 32 Sơ đồ ERD 72 Hình 33 Giao diện ĐĂNG NHẬP 72 Hình 34 Giao diện ĐĂNG KÝ 73 Hình 35 Giao diện TRANG CHỦ PHẦN SLIDER 74 Hình 36 Giao diện TRANG CHỦ PHẦN PHIM ĐANG CHIẾU 74 Hình 37 Giao diện TRANG CHỦ PHẦN PHIM SẮP CHIẾU 75 I Hình 68 Kết thực tế TS_AFD_03 5.4.2.2 Kiểm thử chức năng: Xem thống kê doanh thu theo quý STT TC_RQ_01 Mô tả Kiểm tra phản hồi ứng dụng người quản lý chọn quý năm Các bước kiểm thử - Chọn quý - Chọn năm - Nhấn “Lọc” - Qúy: - Năm: 2022 Dữ liệu thử Kết mong đợi Nhấn nút “Lọc” Sau nhấn nút hiển thị biểu đồ doanh thu quý năm 2022 Kết thực tế Như mong đợi Trạng thái Thông qua Trang 113 126 Bảng 75 Bảng kiểm thử “THỐNG KÊ DOANH THU THEO QUÝ TC_RQ_01” STT TC_ RQ_02 Mô tả Kiểm tra phản hồi ứng dụng người quản lý chưa chọn đủ thông tin để hiển thị Các bước kiểm thử - Chọn quý Dữ liệu thử - Qúy: Kết mong đợi Nút “Lọc” bị xám đi, hình ln hiển thị doanh số mặc định quý Kết thực tế Như mong đợi Trạng thái Thông qua Bảng 76 Bảng kiểm thử “THỐNG KÊ DOANH THU THEO QUÝ TC_RQ_02” Hình 69 Kết thực tế TS_RQ_01 Trang 114 126 Hình 70 Kết thực tế TS_RQ_02 5.4.2.3 Kiểm thử chức năng: Đăng nhập (Khách hàng) STT TC_SI_01 Mô tả Kiểm tra phản hồi ứng dụng người dùng nhập thơng tin đăng nhập xác Các bước kiểm thử Dữ liệu thử - Nhập tài khoản - Nhập mật - Nhấn nút “Đăng nhập” Tài khoản: “ngan” Mật khẩu: “123” Kết mong đợi - Người dùng đăng nhập vào trang web điều hướng đến trang chủ Trên cơng cụ có hiển thị ảnh đại diện người dùng Trang 115 126 Kết thực tế Như mong đợi Trạng thái Thông qua Bảng 77 Bảng kiểm thử “ĐĂNG NHẬP (Khách hàng) TC_SI_01” STT TC_SI_02 Mô tả Kiểm tra phản hồi ứng dụng người dùng nhập thông tin đăng nhập tài khoản khơng xác Các bước kiểm thử - Nhập tài khoản - Nhập mật Nhấn nút “Đăng nhập” Dữ liệu thử Tài khoản: “ngann” Mật khẩu: “123” Kết mong đợi Thông báo lỗi xuất hình: “Tài khoản chưa đăng ký” Kết thực tế Như mong đợi Trạng thái Thông qua Bảng 78 Bảng kiểm thử “ĐĂNG NHẬP (Khách hàng) TC_SI_02” STT TC_SI_03 Mô tả Kiểm tra phản hồi ứng dụng người dùng nhập thông tin đăng nhập mật khơng xác Các bước kiểm thử - Nhập tài khoản - Nhập mật - Nhấn nút “Đăng nhập” Dữ liệu thử Tài khoản: “ngan” Mật khẩu: “12345” Trang 116 126 Kết mong đợi Thông báo lỗi xuất hình: “Tên tài khoản mật chưa xác” Kết thực tế Như mong đợi Trạng thái Thông qua Bảng 79 Bảng kiểm thử “ĐĂNG NHẬP (Khách hàng) TC_SI_03” Hình 71 Kết thực tế TS_SI_01 Hình 72 Kết thực tế TS_SI_02 Trang 117 126 Hình 73 Kết thực tế TS_SI_03 5.4.2.4 Kiểm thử chức năng: Đặt vé không sử dụng điểm thưởng STT TC_BT_01 Mô tả Kiểm tra phản hồi ứng dụng người dùng đặt vé theo lịch chiếu chọn Các bước kiểm thử - Đăng nhập - Chọn Hệ Thống Rạp - Chọn Rạp - Chọn ngày xem - Chọn phim - Chọn khung xem phim - Chọn ghế - Nhấn đặt vé - Thanh toán - Xác nhận toán - Tài khoản: “ngan” Mật khẩu: “123” - Rạp: CGV Aeon Bình Tân Dữ liệu thử Trang 118 126 - Ngày: 22/12 Phim: Black Adam - Khung giờ: 17:05-19:15 Chọn ghế C9, C10 Nhấn “Đặt vé” - Nhấn “Có ”để xác nhận ghế chọn - Kiểm tra thông tin người dùng ghế chọn, sau xác nhấn “Thanh Tốn” - Chọn Paypal để tốn Kết mong đợi - Thanh tốn thành cơng, có mail gửi mã QR Kết thực tế Như mong đợi Trạng thái Thông qua Bảng 80 Bảng kiểm thử "ĐẶT VÉ KHÔNG SỬ DỤNG ĐIỂM THƯỞNG TC_BT_01" STT TC_BT_02 Mô tả Kiểm tra phản hồi ứng dụng người dùng đặt vé theo lịch chiếu chọn không chọn ghế Các bước kiểm thử - Đăng nhập - Chọn Hệ Thống Rạp - Chọn Rạp - Chọn ngày xem - Chọn phim - Chọn khung xem phim - Không chọn ghế - Tài khoản: “ngan” Mật khẩu: “123” Rạp: CGV Aeon Bình Tân - Ngày: 22/12 Dữ liệu thử Trang 119 126 - Phim: Black Adam Khung giờ: 17:05-19:15 - Không chọn ghế Kết mong đợi Nút đặt vé màu xám, tiến hành đặt vé bước Kết thực tế Như mong đợi Trạng thái Thông qua Bảng 81 Bảng kiểm thử "ĐẶT VÉ KHÔNG SỬ DỤNG ĐIỂM THƯỞNG TC_BT_02" Hình 74 Kết thực tế TS_BT_01 Trang 120 126 Hình 75 Kết thực tế TS_BT_02 Trang 121 126 5.5 SO SÁNH SẢN PHẨM 5.5.1 CGV.vn • Giống - Giao diện dễ sử dụng - Đặt vé nhanh chóng, tốn tiện lợi - Có hỗ trợ tích điểm sau đặt vé - Có tin tức giải trí thuộc mảng điện ảnh, khuyến • Khác ▪ Sản phẩm nhóm - Gửi lời nhắc vào tiếng trước cho khách hàng vào ngày có lịch chiếu Hỗ trợ đổi vé trước lịch chiếu 30 phút - Chưa hỗ trợ toán thẻ ngân hàng Ví điện từ Momo (chỉ tốn Paypal) ▪ Cgv.vn - Thanh tốn thẻ ngân hàng, ví điện tử Momo,… Không hỗ trợ đổi vé cho người dùng - Có ưu đãi cho thành viên 5.5.2 BHDStar.vn • Giống - Giao diện dễ sử dụng - Đặt vé nhanh chóng, tốn tiện lợi - Có hỗ trợ tích điểm sau đặt vé - Có tin tức giải trí thuộc mảng điện ảnh, khuyến • Khác ▪ Sản phẩm nhóm - Gửi lời nhắc vào tiếng trước cho khách hàng vào ngày có lịch chiếu - Hỗ trợ đổi vé trước lịch chiếu 30 phút - Chưa hỗ trợ tốn thẻ ngân hàng Ví điện từ Momo (chỉ toán Paypal) - Chỉ hỗ trợ đặt vé trực thuộc hệ thống CGV ▪ BhdStar.vn - Chỉ hỗ trợ đặt vé trực thuộc hệ thống BHDStar - Thanh tốn thẻ ngân hàng, ví điện tử Momo,… Trang 122 126 - Không hỗ trợ đổi vé cho người dùng Có ưu đãi cho thành viên 5.5.3 GalaxyCine.vn • Giống - Giao diện dễ sử dụng - Đặt vé nhanh chóng, tốn tiện lợi - Có hỗ trợ tích điểm sau đặt vé - Có tin tức giải trí thuộc mảng điện ảnh, khuyến • Khác ▪ Sản phẩm nhóm - Hỗ trợ đổi vé trước lịch chiếu 30 phút - Gửi lời nhắc vào tiếng trước cho khách hàng vào ngày có lịch chiếu - Chưa hỗ trợ tốn thẻ ngân hàng Ví điện từ Momo (chỉ toán Paypal) - Chỉ hỗ trợ đặt vé trực thuộc hệ thống CGV Chỉ có mã QR đặt vé ▪ GalaxyCine.vn - Chỉ hỗ trợ đặt vé trực thuộc hệ thống GalaxyCine - Thanh tốn thẻ ngân hàng, ví điện tử Momo,… - Khơng hỗ trợ đổi vé cho người dùng Có ưu đãi cho thành viên Có thể dùng tin nhắn lấy vé quầy quét mã QR Mục Góc Điện Ảnh có liệu phim, diễn viên đạo diễn, giúp dễ dàng chọn phim yêu thích 5.5.4 CineStar.com.vn • Giống - Giao diện dễ sử dụng - Đặt vé nhanh chóng, tốn tiện lợi - Có hỗ trợ tích điểm sau đặt vé - Có tin tức giải trí thuộc mảng điện ảnh, khuyến • Khác ▪ Sản phẩm nhóm - Gửi lời nhắc vào tiếng trước cho khách hàng vào ngày có lịch chiếu Trang 123 126 - Hỗ trợ đổi vé trước lịch chiếu 30 phút Chưa hỗ trợ toán thẻ ngân hàng Ví điện từ Momo (chỉ - tốn Paypal) Chỉ hỗ trợ đặt vé trực thuộc hệ thống CGV ▪ CineStar.com.vn - Chỉ hỗ trợ đặt vé trực thuộc hệ thống CineStar - Thanh toán thẻ ngân hàng, ví điện tử Momo,… - Khơng hỗ trợ đổi vé cho người dùng - Có ưu đãi cho thành viên Trang 124 126 CHƯƠNG 6: TỔNG KẾT 6.1 KẾT QUẢ ĐẠT ĐƯỢC - Xây dựng website đặt vé phim trực tuyến với tính - Xây dựng chức đề ra, đáp ứng nhu cầu website - Nắm bắt kiến thức vấn đề liên quan việc xây dựng Web API NodeJS ExpressJS Ứng dụng Json Web Token để bảo mật phân quyền cho API hệ thống - Nắm bắt công nghệ framework ReactJS, áp dụng vào thực tế để xây dựng UI cho đề tài 6.2 ƯU ĐIỂM - Giao diện thân thiện với người dùng, dễ sử dụng Hệ thống đáp ứng chức website đặt vé xem phim xem phim chiếu chiếu, xem chi tiết phim, xem bình luận bình - luận phim, xem lịch chiếu hệ thống cụm rạp khác nhau, đặt vé, xem lịch sử giao dịch,… Gửi lời nhắc vào tiếng trước cho khách hàng vào ngày có lịch chiếu Cho phép đổi vé trước tiếng 30 phút phim chiếu 6.3 NHƯỢC ĐIỂM - Hiệu suất trang web chậm việc quản lý xử lý liệu chưa tốt Chưa có chức gợi ý phim dựa theo lượt tìm kiếm người dùng dựa theo lượt yêu thích - Chưa thực chia thành viên khách hàng, dẫn đến thiếu ưu đãi cho mức độ thành viên 6.4 HƯỚNG PHÁT TRIỂN - Hỗ trợ cho phép trả vé hoàn tiền trước chiếu tiếng 30 phút Thêm việc phân chia danh hiệu ưu đãi cho khách hàng Thêm chức gợi ý phim cho khách hàng Cải thiện việc thiết kế sở liệu tối ưu việc xử lý liệu Trang 125 126 CHƯƠNG 7: TÀI LIỆU THAM KHẢO Đường dẫn lý thuyết: [1] HocWeb VN, NodeJS gì? Những điều cần biết NodeJS, https://hocweb.vn/nodejs-la-gi-nhung-dieu-co-ban-can-biet-ve-nodejs/ [2] longky.mobi, ExpressJS gì?, https://longky.mobi/expressjs-la-gi/ [3] Admin, Tìm hiểu MongoDB, https://itnavi.com.vn/blog/mongodb-la-gi/ [4] TopDev Blog, ReactJS – Những điều bạn cần phải biết, https://topdev.vn/blog/reactjs-nhung-dieu-ban-can-phai-biet/#dac-trung-cua-reactjs Deft, Cấu trúc JSON Web Token tạo thành nào?, https://shareprogramming.net/cau-truc-cua-json-web-token-duoc-tao-thanh-nhu-the[5] nao/#JSON_Web_Token_la_gi Video tham khảo: Khóa NodeJS & Express, https://www.youtube.com/watch?v=z2f7RHgvddc&list=PL_VfJajZj0VatBpaXkEHK _UPHL7dW6I3 Trang 126 126 S K L 0