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 MỤC LỤC BẢNG DANH MỤC TỪ VIẾT TẮT Số thứ tự Ký hiệu chữ viết tắt Từ viết đầy đủ API Application Programming Interface QR Quick Response UI User Interface JWT JSON Web Token DANH MỤC TỪ CHUYÊN NGÀNH Số thứ tự Từ Ý nghĩa Server Máy chủ Middleware Phần mềm trung gian có nhiệm vụ đơn giản hóa cho ứng dụng phân tán phức tạp đồng thời cịn hỗ trợ vơ tích cực cho tồn q trình kết nối Search field Trường tìm kiếm Regular expression Những biểu thức có nguyên tắc riêng bạn phải tn theo ngun tắc biểu thức bạn hoạt động Range queries Phạm vi truy vấn Replication Nhân rộng Indexing Chỉ mục Aggregation Tổng hợp Operation Thi hành 10 Document Dòng liệu MongoDB 11 File Tập tin 12 Mapreduce Mơ hình thiết kế độc quyền Google, có khả lập trình xử lý tập liệu lớn song song phân tán thuật toán cụm máy tính 13 Collection Bảng MongoDB 14 Client Máy khách 15 Scenario Kịch 16 Sequence Lược đồ 17 Request Yêu cầu gửi từ người dùng 10 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ư mon g đợi Qua 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 89 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 90 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 91 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 92 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” Page 93 of 93 TC_CS_0 Kiểm thử trường hợp Tạo lịch chiếu ngày chiếu bị trùng hệ thống rạp 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 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” PHIM: Thông “CHỦNG TỘC báo BẤT TỬ” “Một CỤM RẠP: rạp “CGV Hoàng khác Văn Thụ” hệ RẠP: “Rạp 4” thống NGÀY GIỜ có phim CHIẾU: 01/01/2022 lúc trùng 11:15 AM chiếu, vui lòng chọn thời gian khác” Như mong đợi Thành công 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" Thành cơng Page 94 of 93 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 Chọn cụm rạp – rạp chiếu Chọn ngày chiếu cho phim PHIM: Hiện “CHỦNG TỘC thông BẤT TỬ” báo CỤM RẠP: “Tạo “CGV Hoàng lịch chiếu Văn Thụ” thành RẠP: “Rạp 4” công” NGÀY GIỜ CHIẾU: 01/01/2022 lúc 11:50 AM Như mong đợi Thành công 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 95 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 Kết Kết kiểm thử thử mong đợi thực tế Kiểm thử Nhập tên Tên trường phim: Hiện thông Như mong Tình trạng Thành cơng Page 96 of 93 hợp phim “Vịnh Hạ Long” Tạo phim Chọn Ngày khởi chưa ngày khởi chiếu: đủ thông chiếu “22/12/2021” tin Nhập thời Tệp hình lượng ảnh:”Ha-Long51.jpg” Chọn báo đợi “**Thiế u mơ tả phim” 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 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 97 of 93 thời lượng chiếu Ngày khởi không số â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 98 of 93 Hình 65.Kết thực tế TS_CM_01 Page 99 of 93 Hình 66.Kết thực tế TS_CM_02 Page 100 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 101 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 102 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 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 [5] Video tham khảo: Khóa NodeJS & Express, https://www.youtube.com/watch? v=z2f7RHgvddc&list=PL_VfJajZj0VatBpaXkEHK_UPHL7dW6I3 Page 103 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... 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ý... Đăng ký Xem đánh giá Khách chưa có tài khoản Xem thơng tin v ề phim Xem lịch chiếu Hình Lược đồ khách Page 29 of 93 uc Ngưởi quản lý trang WEB ĐẶT VÉ XEM PHIM Đăng xuất Xem thông tin v ề phim Đăng