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 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 11/2021 Đ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 ứ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 Tên đề tài: Xây dựng ứng dụng web đặt vé xem phim Họ tên Giáo viên phản biện: 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 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ả 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 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 .3 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 .5 2.1 NODEJS [1] 2.1.1.Khái niệm .5 2.1.2.Các đặc tính NodeJS .5 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 .7 2.4 REACTJS [4] .8 2.4.1.Khái niệm .8 2.4.2 Đặc trưng .8 2.5 JSON WEB TOKEN [5] .9 2.5.1.Khái niệm .9 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 YÊ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 nhập thông tin đăng ký với tên tài khoản tạo trước TC_S U_05 Kiểm tra phản hồi ứng dụng người dùng nhập thông tin đăng ký Mật Nhập lại mật không khớp - Nhập lại mật Nhập lại mật khẩu:”123456” - Nhập email - Nhập số điện thoại Nhập email: mocmoc191091@g mail.com - Nhập họ tên - Nhấn nút “Đăng ký” - Nhập tài khoản Tài khoản: “banhgao” - Nhập mật Mật khẩu: “123456” - Nhập lại mật Nhập lại mật khẩu:”123” - Nhập email - Nhập số điện thoại Nhập email: mocmoc191091@g mail.com - Nhập họ tên - Nhấn nút “Đăng ký” Nhập số điện thoại: “0933620683” sử dụng” hiển thị phía nút “Đăng ký” Nhập họ tên: “Bánh Gạo” Thông báo lỗi “Mật không trùng khớp” Như Qua mon g đợi Nhập số điện thoại: “0933620683” Nhập họ tên: “Bánh Gạo” Bảng 53.Kiểm thử ĐĂNG KÝ Page 79 of 93 Hình 54.Kết thực tế TC_SU_01(hinh a) Hình 55.Kết thực tế TC_SU_01 (hình b) Page 80 of 93 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ử Các bước Dữ liệu kiểm thử Kết Kết kiểm thử mong đợi thực tế Tình trạng TC_CS_0 Chọn phim định tạo lịch chiếu Thành công Kiểm thử trường hợp Tạo lịch chiếu không điền đủ thông tin PHIM: Không Như “CHỦNG TỘC thể tạo mong BẤT TỬ” nhấn đợi CỤM RẠP: nút Chọn cụm “CGV Thủ Đức” “Tạo lịch rạp NGÀY GIỜ chiếu” Chọn CHIẾU: ngày 25/12/2021 lúc chiếu cho 12:20 PM phim Nhấn “Tạo lịch chiếu” TC_CS_0 Kiểm thử trường hợp Tạo lịch chiếu ngày chiếu sớm ngày khởi chiếu Chọn phim định tạo lịch chiếu Chọn cụm rạp – rạp chiếu Chọn ngày chiếu cho phim PHIM: Xuất Như “CHỦNG TỘC thông mong BẤT TỬ” báo đợi CỤM RẠP: “Không “CGV Thủ Đức” thể tạo ngày RẠP: “Rạp 4” chiếu NGÀY GIỜ sớm CHIẾU: 01/12/2021 lúc ngày khởi 12:20 PM chiếu” Thành công Nhấn “Tạo lịch chiếu” TC_CS_0 Kiểm trường Tạo chiếu ngày thử hợp lịch Chọn phim định tạo lịch chiếu PHIM: Thông “CHỦNG TỘC báo BẤT TỬ” “Một CỤM RẠP: rạp Chọn cụm “CGV Hoàng khác Như mong đợi Thành công Page 83 of 93 chiếu bị trùng hệ thống rạp rạp – rạp Văn Thụ” chiếu RẠP: “Rạp 4” Chọn NGÀY GIỜ ngày CHIẾU: chiếu cho 01/01/2022 lúc phim 11:15 AM Nhấn “Tạo lịch chiếu” TC_CS_0 Kiểm thử trường hợp Tạo lịch chiếu ngày chiếu thời gian rạp có phim khác Chọn phim định tạo lịch chiếu Chọn cụm rạp – rạp chiếu Chọn ngày chiếu cho phim Nhấn “Tạo lịch chiếu” TC_CS_0 Kiểm thử trường hợp Tạo lịch chiếu thành công Chọn phim định tạo lịch chiếu hệ thống có phim trùng chiếu, vui lòng chọn thời gian khác” PHIM: Hiện Như “CHỦNG TỘC thông mong BẤT TỬ” báo đợi CỤM RẠP: "Khơng “CGV Hồng thể tạo lịch Văn Thụ” chiếu RẠP: “Rạp 2” cho NGÀY GIỜ phim rạp CHIẾU: 01/01/2022 lúc có lịch 11:50 AM chiếu khác" PHIM: Hiện “CHỦNG TỘC thông BẤT TỬ” báo CỤM RẠP: “Tạo Chọn cụm “CGV Hoàng lịch chiếu rạp – rạp Văn Thụ” thành chiếu RẠP: “Rạp 4” công” Chọn Như mong đợi Thành công Thành công Page 84 of 93 ngày NGÀY GIỜ chiếu cho CHIẾU: phim 01/01/2022 lúc 11:50 AM Nhấn “Tạo lịch chiếu” Bảng 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ã thử kiểm Mô tả TC_CM_0 Các bước Dữ liệu kiểm thử thử Kiểm thử Nhập tên Tên trường hợp kiểm Kết Kết mong đợi thực tế phim: Hiện thơng Như mong Tình trạng Thành công Page 86 of 93 Tạo phim chưa đủ thông tin phim “Vịnh Hạ Long” báo đợi Chọn Ngày khởi “**Thiế u mô tả ngày khởi chiếu: phim” chiếu “22/12/2021” Nhập thời Tệp hình lượng ảnh:”Ha-Long51.jpg” Chọn hình ảnh Trailer:” cho SpOWgms2uto” Phim Thời Nhập mã lượng:”120” trailer phim TC_CM_0 Kiểm thử trường hợp Tạo phim trùng tên phim Nhập tên Tên phim: Hiện Như phim “chủng tộc bất thông mong tử” báo đợi Chọn ngày khởi Mô tả: “Mô tả “Tên phim chiếu cho phim” sử Nhập mô Ngày khởi dụng” tả chiếu: Nhập thời “25/12/2021” lượng Thành cơng Tệp hình ảnh:”SKY.jpg” Chọn hình ảnh Trailer:” cho SpOWgms2uto” Phim Thời Nhập mã lượng:”120” trailer phim TC_CM_0 Kiểm thử trường hợp Tạo phim thời Nhập tên Tên phim: Hiện phim “Vịnh Hạ Long” thông Chọn Mô tả: “Mô tả báo “Thời ngày khởi cho phim” lượng Như mong đợi Thành công Page 87 of 93 lượng số chiếu Ngày khởi không âm bé Nhập mô chiếu: “25/12/2021” 0” tả hình Nhập thời Tệp ảnh:”Ha-Longlượng 51.jpg” Chọn hình ảnh Trailer:” SpOWgms2uto” cho Thời lượng:”Phim 120” Nhập mã trailer phim TC_CM_0 Kiểm thử trường hợp Tạo phim thành công Nhập tên Tên phim: Thông phim “Vịnh Hạ Long” báo Chọn Mô tả: “Mô tả “Tạo phim ngày khởi cho phim” chiếu Ngày khởi thành Nhập mô chiếu: công” tả “25/12/2021” Như mong đợi Thành cơng Nhập thời Tệp hình lượng ảnh:”Ha-Long51.jpg” Chọn hình ảnh Trailer:” cho SpOWgms2uto” Phim Thời Nhập mã lượng:”120” trailer phim Bảng 55.Kiểm thử TẠO LỊCH CHIẾU CHO PHIM 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 ... rộng Khơng có Bảng 10.Kich ĐẶT VÉ KHÔNG DÙNG ĐIỂM THƯỞNG 3.3.3.8.Usecase “ĐẶT VÉ ĐẶT VÉ DÙNG ĐIỂM THƯỞNG” Tên ĐẶT VÉ ĐẶT VÉ DÙNG ĐIỂM THƯỞNG Mô tả nhanh Thực đặt vé cho phim, chọn chỗ ngồi khung... 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. .. 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ý