TIỂU LUẬN CHUYÊN NGÀNH xây DỰNG ỨNG DỤNG WEB đặt vé XEM PHIM

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO - - TIỂU LUẬN CHUYÊN NGÀNH XÂY DỰNG ỨNG DỤNG WEB ĐẶT VÉ XEM PHIM GVHD: TS Lê Văn Vinh Sinh viên thực hiện: NGUYỄN THU NGÂN NGUYỄN NHƯ BẢO PHƯƠNG Khóa: 2018 Ngành: CƠNG NGHỆ THƠNG TIN Thành phố Hồ Chí Minh, tháng 11/2021 ĐH SƯ PHẠM KỸ THUẬT TP HCM CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh Phúc KHOA ĐÀO TẠO CHẤT LƯỢNG CAO ******* ******* 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 ứng dụng web đặt vé xem phim 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 năm 2021 Giáo viên hướng dẫn ĐH SƯ PHẠM KỸ THUẬT TP HCM KHOA ĐÀO TẠO CHẤT LƯỢNG CAO (Ký & ghi rõ họ tên) CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độ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 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 năm 2021 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 để hoàn thành cách tốt nhất, thời gian hạn hẹp, khả 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 MỤC LỤC HÌNH ẢNH i MỤC LỤC BẢNG iv DANH MỤC TỪ VIẾT TẮT vii DANH MỤC TỪ CHUYÊN NGÀNH viii 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 [1] 2.1.1.Khái niệm 2.1.2.Các đặc tính NodeJS 2.2 EXPRESSJS [2] 2.2.1 Khái niệm 2.2.2 Tính 2.3 MONGODB [3] 2.3.1 Khái niệm 2.3.2 Tính 2.4 REACTJS [4] 2.4.1.Khái niệm 2.4.2 Đặc trưng 2.5 JSON WEB TOKEN [5] 2.5.1.Khái niệm 2.5.2.Cấu trúc CHƯƠNG 3: KHẢO SÁT HIỆN TRẠNG VÀ MƠ HÌNH HĨA U CẦU 11 3.1 KHẢO SÁT HIỆN TRẠNG 11 3.1.1.TIX.VN 11 3.1.2.CGV.VN 12 3.1.3.BHDSTAR.VN 13 3.1.4.GALAXYCINE.VN 14 3.1.5.CINESTAR.COM.VN 15 3.1.6.KẾT LUẬN 15 3.2 XÁC ĐỊNH YÊU CẦU 16 3.2.1 Yêu cầu chức 16 3.2.2 Yêu cầu phi chức 17 3.3 MƠ HÌNH HĨA U CẦU 17 3.3.1 Bảng chức 17 3.3.2 Lược đồ Usecase 19 3.3.3 Đặc tả Usecase 20 CHƯƠNG THIẾT KẾ PHẦN MỀM 37 4.1.LƯỢC ĐỒ LỚP 37 4.2 LƯỢC ĐỒ TUẦN TỰ 38 4.3.CHI TIẾT BẢNG DỮ LIỆU 47 4.4.SƠ ĐỒ ERD 51 4.5 GIAO DIỆN NGƯỜI DÙNG 52 4.5.1.Đăng ký 52 4.5.2.Đăng nhập 53 4.5.3.Trang chủ 53 4.5.4.Chi tiết phim 58 4.5.5.Thông tin cá nhân 59 4.5.6.Thay đổi thông tin tài khoản 60 4.5.7.Thay đổi mật 61 4.5.8.Lịch sử giao dịch 62 4.5.9.Đặt vé 63 4.5.10.Xác nhận mua vé 64 4.5.11.Danh sách khách hàng 65 4.5.12.Danh sách phim 66 4.5.13.Tạo phim 67 4.5.14.Chỉnh sửa phim 68 4.5.15.Xóa phim 69 4.15.16 Tạo lịch chiếu 70 4.5.16 Thống kê 71 4.5.17.Đổi vé 72 4.5.18.Xác nhận đổi vé 73 CHƯƠNG 5: KIỂM THỬ PHẦN MỀM 74 5.1.CÔNG CỤ DÙNG TRONG DỰ ÁN 74 5.2 CÀI ĐẶT ỨNG DỤNG 74 5.3.THỰC HIỆN KIỂM THỬ 75 5.4 KẾ HOẠCH KIỂM THỬ 75 5.4.1 Kịch kiểm thử 76 5.4.2 Kết kiểm thử 76 CHƯƠNG 6: TỔNG KẾT 93 6.1 KẾT QUẢ ĐẠT ĐƯỢC 93 6.2 ƯU ĐIỂM 93 6.3 NHƯỢC ĐIỂM 93 6.4 HƯỚNG PHÁT TRIỂN 93 CHƯƠNG 7: TÀI LIỆU THAM KHẢO 94 MỤC LỤC HÌNH ẢNH Hình Trang TIX 11 Hình 2.Trang CGV 12 Hình Trang BHD 13 Hình Trang GALAXYCINE 14 Hình Trang CINESTAR 15 Hình Lược đồ khách 19 Hình Lược đồ người quản lý trang 20 Hình 8.Lược đồ lớp 37 Hình 9.Lược đồ ĐĂNG NHẬP 38 Hình 10.Lược đồ ĐĂNG XUẤT 38 Hình 11.Lược đồ ĐĂNG KÝ 39 Hình 12.Lược đồ XEM THƠNG TIN CÁ NHÂN 39 Hình 13.Lược đồ SỬA THƠNG TIN KHÁCH HÀNG .40 Hình 14.Lược đồ THAY ĐỔI MẬT KHẨU KHÁCH HÀNG .40 Hình 15.Lược đồ ĐẶT VÉ KHƠNG DÙNG ĐIỂM THƯỞNG 41 Hình 16.Lược đồ ĐẶT VÉ DÙNG ĐIỂM THƯỞNG 42 Hình 17.Lược đồ THỐNG KÊ 42 Hình 18.Lược đồ XEM LỊCH SỬ GIAO DỊCH 43 Hình 19.Lược đồ XEM THƠNG TIN PHIM 43 Hình 20.Lược đồ XEM THƠNG TIN NGƯỜI DÙNG 44 Hình 21.Lược đồ TÌM KIẾM THƠNG TIN NGƯỜI DÙNG .44 Hình 22.Lược đồ TẠO MỚI PHIM 45 Hình 23.Lược đồ CẬP NHẬT PHIM 45 Hình 24.Lược đồ XĨA PHIM 46 Hình 25.Lược đồ TẠO LỊCH CHIẾU 46 Hình 26 Lược đồ "ĐỔI GHẾ" 47 i Hình 27 Sơ đồ ERD 51 Hình 28.Giao diện ĐĂNG KÝ 52 Hình 29 Giao diện đăng nhập 53 Hình 30 Giao diện Trang chủ 54 Hình 31 Giao diện Trang chủ sau đăng nhập 55 Hình 32 Giao diện TÌM KIẾM 55 Hình 33 Giao diện LỊCH CHIẾU 56 Hình 34 Giao diện CỤM RẠP 57 Hình 35 Giao diện THƠNG TIN PHIM 58 Hình 36 Giao diện TRANG THÔNG TIN CÁ NHÂN 59 Hình 37 Giao diện THAY ĐỔI THƠNG TIN 60 Hình 38 Giao diện THAY ĐỔI MẬT KHẨU 61 Hình 39 Giao diện LỊCH SỬ GIAO DỊCH 62 Hình 40 Giao diện ĐẶT VÉ 63 Hình 41 Giao diện XÁC NHẬN ĐẶT VÉ 64 Hình 42 Giao diện DANH SÁCH KHÁCH HÀNG 65 Hình 43 Giao diện DANH SÁCH PHIM 66 Hình 44 Giao diện TẠO THƠNG TIN PHIM 67 Hình 45 Giao diện CHỈNH SỬA PHIM 68 Hình 46 Giao diện XĨA THƠNG TIN PHIM 69 Hình 47 Giao diện TẠO LỊCH CHIẾU 70 Hình 48 Giao diện THỐNG KÊ 71 Hình 49 Giao diện ĐỔI VÉ 72 Hình 50 Giao diện XÁC NHẬN ĐỔI VÉ 73 Hình 51.Kết thực tế TC_SI_01 77 Hình 52.Kết thực tế TC_SI_02 78 Hình 53.Kết thực tế TC_SI_03 78 ii Hình 56.Kết thực tế TC_SU_02 Hình 57.Kết thực tế TC_SU_03 Page 81 of 93 Hình 58.Kết thực tế TC_SU_04 Hình 59.Kết thực tế TC_SU_05 Page 82 of 93 Mã kiểm Mô tả thử TC_CS_0 Kiểm trường hợp Tạo chiếu không điền đủ thông tin TC_CS_0 Kiểm trường hợp Tạo chiếu ngày chiếu sớm ngày chiếu TC_CS_0 Kiểm trường hợp Tạo chiếu ngày Page 83 of 93 bị trùng thống rạp TC_CS_0 Kiểm trường hợp Tạo chiếu ngày chiếu thời rạp phim khác TC_CS_0 Kiểm trường hợp Tạo chiếu thành công Page 84 of 93 Bang 54.Kiểm thử TẠO PHIM MỚI Hình 60.Kết thực tế TS_CS_01 Hình 61.Kết thực tế TS_CS_02 Page 85 of 93 Hình 62.Kết thực tế TS_CS_03 Hình 63.Kết thực tế TS_CS_04 Hình 64.Kết thực tế TS_CS_05 Mã kiểm thử Mô tả TC_CM_0 Kiểm th trường h Page 86 of 93 phim chưa thông tin TC_CM_0 Kiểm trường h phim tên phim TC_CM_0 Kiểm trường h phim Page 87 of 93 lượng âm TC_CM_0 Kiểm trường h phim thành Page 88 of 93 Hình 65.Kết thực tế TS_CM_01 Page 89 of 93 Hình 66.Kết thực tế TS_CM_02 Page 90 of 93 Hình 67.Kết thực tế TS_CM_03 Hình 68.Kết thực tế TS_CM_04 Page 91 of 93 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 - Gửi lời nhắc vào sáng vào ngày khách hàng có lịch phim đặt - Cho phép đổi vé trước tiếng 30 phút phim chiếu 6.3 NHƯỢC ĐIỂM - Chưa thể hạn chế hết tất trường hợp lỗi web - Các chức trang web đơn giản - Phần đặt vé chưa giới hạn ghế ngồi xa để đảm bảo an toàn cho khách hàng thời gian thành phố “Bình thường mới” - Chưa thể tạo nhiều lịch chiếu lần 6.4 HƯỚNG PHÁT TRIỂN - Hỗ trợ trả vé hoàn tiền trước chiếu tiếng 30 phút - Thêm ưu đãi cho thành viên VIP, VVIP - Tích hợp tính mua bắp nước - Khách hàng mua vé đánh giá bình luận phim Page 92 of 93 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 [5] 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-thenao/#JSON_Web_Token_la_gi Video tham khảo: Khóa NodeJS & Express, https://www.youtube.com/watch? v=z2f7RHgvddc&list=PL_VfJajZj0VatBpaXkEHK_UPHL7dW6I3 Page 93 of 93 ... NodeJS, ReactJS, cách gọi API -Xây dựng website đặt vé phim trực tuyến với tính bản: Đặt vé, đổi vé, xem thông tin phim, quản lý thông tin cá nhân phía người dùng; Quản lý phim, lịch chiếu, quản lý... tin phim nhanh - Tra cứu vị trí rạp Cinestar gần bạn 3.1.6.KẾT LUẬN Qua liệu khảo sát trang đặt vé xem phim phổ biến nay, chúng em tổng hợp lại yêu cầu chức cho đề tài ? ?Xây dựng ứng dụng web đặt. .. 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 ứng dụng web đặt vé xem phim Họ tên Giáo viên hướng dẫn: TS Lê Văn Vinh NHẬN XÉT Về