Xây dựng hệ thống hỗ trợ quản lí bán vé xem phim

ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM XÂY DỰNG HỆ THỐNG HỖ TRỢ QUẢN LÍ BÁN VÉ XEM PHIM Đồ án Giảng viên hướng dẫn: ThS Nguyễn Thị Thanh Trúc Sinh viên thực hiện: 19522321 – Trần Trí Thức 19520145 – Nguyễn Khánh Linh Thành phố Hồ Chí Minh, tháng 06 năm 2022 ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM XÂY DỰNG HỆ THỐNG HỖ TRỢ QUẢN LÍ BÁN VÉ XEM PHIM Đồ án Giảng viên hướng dẫn: ThS Nguyễn Thị Thanh Trúc Sinh viên thực hiện: 19522321 – Trần Trí Thức 19520145 – Nguyễn Khánh Linh Thành phố Hồ Chí Minh, tháng 06 năm 2022 ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: XÂY DỰNG HỆ THỐNG HỖ TRỢ QUẢN LÍ BÁN VÉ XEM PHIM Cán hướng dẫn: ThS Nguyễn Thị Thanh Trúc Thời gian thực hiện: Từ ngày 21/02/2022 đến ngày 16/06/2022 Sinh viên thực hiện: 19522321 - Trần Trí Thức 19520145 - Nguyễn Khánh Linh Nội dung đề tài: Mục tiêu: Xây dựng ứng dụng website với giao diện thân thiện, màu sắc hài hòa, bố cục hợp lí; đáp ứng tính cần thiết với ngôn ngữ Javascript, công nghệ ReatcJS, ExpressJS chuẩn bảo mật JWT: - Giúp khách hàng xem thơng tin phim, bình luận phim thực thao tác đặt vé, đánh giá phim - Hỗ trợ việc tìm kiếm theo nhiều lọc khác - Có hệ thống quản lí liệu: quản lí phim, cụm rạp, nhân viên, bình luận, đơn hàng đặt, thơng tin cá nhân… - Thực kiểm duyệt bình luận phim - Hỗ trợ quản lí thống kê doanh thu, báo cáo Phạm vi: Đề xây dựng website cung cấp số tính đặt vé xem phim online với phân quyền chính: - Về phía cơng ty: - Admin người có quyền hạn cao nhất, quản lí liệu nhân viên khác - Manager người quản lí liệu phim, xuất chiếu, rạp … - Censor người kiểm duyệt đăng từ khách hàng - Về phía khách hàng: Customer người đặt vé, tốn đăng bình luận phim website Đối tượng sử dụng: - Người dùng muốn xem thơng tin phim, bình luận, có nhu cầu đặt vé xem phim - Admin quản lí nhân viên, cụm rạp; thống kê, báo cáo doanh thu - Nhân viên kiểm tra đơn hàng, giải đáp thắc mắc khách hàng - Người kiểm duyệt kiểm tra nội dung bình luận phim theo quy định Phương pháp thực hiện: - Tìm hiểu, phân tích quy trình xây dựng website cơng nghệ đề - Phân tính, đánh giá ứng dụng tương tự - Khảo sát lấy ý kiến người dùng Kết mong đợi: - Biết quy trình xây dựng website thơng qua công nghệ đề - Biết thủ tục tốn, quản lí hệ thống quản lí xem phim - Xây dựng ứng dụng website đáp ứng đủ nhu càu người dùng - Wibsite có khả mở rộng tương lai LỜI CẢM ƠN Đồ án với đề tài “XÂY DỰNG HỆ THỐNG HỖ TRỢ ĐĂT VÉ XEM PHIM” minh chứng cho q trình cố gắng khơng ngừng việc tìm tòi, học hỏi học tập trường Đại học Công nghệ Thông tin Thể khả thân việc áp dụng kiến thức chuyên môn vào giải tốn thực tế Trong q trình thực đồ án, em nhận hướng dẫn tận tình từ Một cách đặc biệt, em xin gửi lời cảm ơn chân thành đến: • Các thầy trường Đại học Cơng nghệ Thơng Tin nói chung Cơ Nguyễn Thị Thanh Trúc nói riêng tận tình truyền đạt kiến thức tới em năm học tập trường Đó tài sản quý báu giúp em hồn thành khố luận hành trang cho đường nghiệp thân sau • Em xin gửi lời cảm ơn sâu sắc tới ThS Nguyễn Thị Thanh Trúc, người trực tiếp hướng dẫn, bảo, giúp đỡ em lúc khó khăn, đưa lời khuyên bổ ích để khố luận hồn thành tiến độ đáp ứng yêu cầu đề ban đầu • Các thành viên nhóm ln nổ lực phấn đấu, lắng nghe sẵn sàng hỗ trợ suốt trình học tập thực đồ án Để đạt kết ngày hơm • Lời cuối cùng, em xin dành lời cảm ơn gửi tới gia đình, anh chị, bạn bè ln bên cạnh để động viên đóng góp ý kiến q trình hồn thành đồ án Thành phố Hồ Chí Minh, tháng 06 năm 2022 Sinh viên Sinh viên Trần Trí Thức Nguyễn Khánh Linh NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… DANH MỤC HÌNH ẢNH Hình 1.1 Bài khảo sát .17 Hình 1.2 Khảo sát độ tuổi 18 Hình 1.3 Khảo sát hình thức mua vé 18 Hình 1.4 Khảo sát độ phổ biến trang web đặt vé 19 Hình 1.5 Khảo sát ưu điểm trang web 20 Hình 1.6 Khảo sát tính cần thiết cho khách hàng .20 Hình 1.7 Khảo sát tính cần thiết cho quản lí .21 Hình 1.8 Khảo sát giao diện 22 Hình 1.9 Khảo sát màu sắc chủ đạo 22 Hình 2.1 Quy trình làm việc chatbot 27 Hình 2.2 Intent movie 29 Hình 2.3 User expression 29 Hình 2.4 Phản hồi từ chat bot 30 Hình 2.5 React logo 32 Hình 2.6 Express.js logo 33 Hình 2.7 Mogoose logo 34 Hình 2.8 Redux logo 35 Hình 2.9 Nodemailer 36 Hình 2.10 AXIOS logo 37 Hình 2.11 Dialogflow .38 Hình 2.12 Kommunicate 40 Hình 2.13 Chatbot 40 Hình 2.14 mogoDB logo 41 Hình 2.15 Cloundinary logo .42 Hình 2.16 JWT logo 43 Hình 2.17 Sơ đồ JWT .44 Hình 2.18 JWT 45 Hình 2.19 Paypal tiêu chuẩn 47 Hình 2.20 Paypal nâng cao .47 Hình 2.21 Paypal tuỳ chỉnh 48 Hình 2.22 Cách thức hoạt động giao dịch Paypal 48 Hình 2.23 Cách thức hoạt động lập hố đơn Paypal 49 Hình 3.1 Sơ đồ phân rã chức admin 52 Hình 3.2 Sơ đồ phân rã chức manager 52 Hình 3.3 Sơ đồ phân rã chức censor 53 Hình 3.4 Sơ đồ phân rã chức customer 53 Hình 3.5 Usecase toàn hệ thống .55 Hình 3.6 Usecase Đăng nhập 56 Hình 3.7 Usecase đăng kí 56 Hình 3.8 Usecase chatbot Shinema 57 Hình 3.9 Usecase chatbot 58 Hình 3.10 Usecase Quản lí suất chiếu 59 Hình 3.11 Usecase Quản lí rạp 60 Hình 3.12 Usecase Quản lí phịng 61 Hình 3.13 Usecase Quản lí đăng 62 Hình 3.14 Usecase Bình luận 63 Hình 3.15 Usecase Tìm phim 63 Hình 3.16 Usecase tìm diễn viên 64 Hình 3.17 Usecase Đặt vé 64 Hình 4.1 Sơ đồ DFD đăng nhập .66 Hình 4.2 Sơ đồ DFD đăng kí 67 Hình 4.3 Sơ đồ DFD chỉnh sửa thông tin cá nhân 67 Hình 4.4 Sơ đồ DFD tốn .68 Hình 4.5 Sơ đồ DFD tìm diễn viên 68 Hình 4.6 Sơ đồ DFD tìm phim 69 Hình 4.7 Sơ đồ DFD thêm suất chiếu 69 Hình 4.8 Sơ đồ DFD sửa suất chiếu 70 Hình 4.9 Sơ đồ DFD xố suất chiếu 70 Hình 4.10 Activity Đăng nhập 71 Hình 4.11 Activity Đăng kí 72 Hình 4.12 Activity Chatbot 73 Hình 4.13 Activity Chatbot 74 Hình 4.14 Activity Thêm suất chiếu 75 Hình 4.15 Activity Sửa suất chiếu 76 Hình 4.16 Activity Xố suất chiếu 77 Hình 4.17 Activity Bình luận 78 Hình 4.18 Activity Đặt vé 79 Hình 4.19 Activity Tìm phim 80 Hình 4.20 Activity Tìm diễn viên 80 Hình 4.21 Kiến trúc tổng thể 87 Hình 4.22 Thư mục client 88 Hình 4.23 Thư mục server .89 Hình 4.24 Sơ đồ liên kết hình admin .90 Hình 4.25 Sơ đồ liên kết hình manager 91 Hình 4.26 Sơ đồ liên kết hình censor .92 Hình 4.27 Sơ đồ liên kết hình customer 93 Hình 4.28 Màn hình .94 Hình 4.29 Màn hình .95 Hình 4.30 Màn hình .96 Hình 4.31 Màn hình .97 Hình 4.32 Màn hình chi tiết phim 98 Hình 4.33 Màn hình chi tiết phim 99 Hình 4.34 Màn hình chi tiết phim 100 Hình 4.35 Màn hình chi tiết diễn viên 101 Hình 4.36 Màn hình chi tiết diễn viên 102 Hình 4.37 Màn hình chi tiết diễn viên 103 Hình 4.38 Màn hình tốn 104 Hình 4.39 Màn hình tốn 105 Hình 4.40 Màn hình tốn 106 Hình 4.41 Màn hình toán 108 Hình 4.42 Danh sách suất chiếu .109 Hình 4.43 Màn hình thêm suất chiếu .111 Hình 4.44 Màn hình review phim 113 Hình 4.45 Màn hình review phim 113 Hình 4.46 Màn hình chatbot 114 105 NextBtn Chuyển sang bước điền thông Button tin người mua Bảng 4.31 Bảng mô tả biến cố hình STT Biến cố Chọn item Xử lí Load liệu cho timeList dateList Chọn item Load liệu cho theaterList timeList Chọn item Chọn rạp chiếu theaterList Nhấn chọn Check Kiểm tra hiển thị thông tin phịng Hình 4.39 Màn hình tốn 106 Bảng 4.32 Bảng mơ tả hình STT Kiểu Tên listRoom Ràng buộc Chức Hiển thị thông tin phịng List gồm thơng tin rạp chứa phịng đó, trạng thái ghế Bảng 4.33 Bảng mô tả biến cố hình STT Biến cố Xử lí Chọn chỗ ngồi - Chọn ghế ngồi roomList - Hiển thị button Next Hình 4.40 Màn hình tốn Bảng 4.34 Bảng mơ tả hình STT Tên nameTxt Kiểu TextField Ràng buộc Chức Nhập tên 107 contactTxt TextField Nhập số điện thoại di động emailTxt TextField Nhập email address TextField Nhập địa provinceList Select Danh sách tỉnh thành districtList Select Danh sách quận huyện wardList Select Danh sách phường xã chooseMethodBtn Button Chọn phương thức toán cashBtn RadioButton Chọn phương thức tiền mặt 10 orderBtn Button Xác nhận đặt vé Bảng 4.35 Bảng mô tả biến cố hình STT Biến cố Chọn item Xử lí Chọn tỉnh thành provinceList Chọn item Chọn quận huyện districtList Chọn item Chọn phường xã wardList Chọn Choose payment method - Kiểm tra thông tin 108 - Nếu thông tin hợp lệ, chuyển sang phương thức tốn cho người dùng chọn; ngược lại, thơng báo lỗi cho người dùng kiểm tra lại Chọn Order Hồn tất đặt vé phương thức tiền mặt Hình 4.41 Màn hình tốn Bảng 4.36 Bảng mơ tả hình STT Tên paypalRadioBtn Kiểu RadioButton Ràng buộc Chức Chọn phương thức toán Paypal paypalBtn Button Tiến hành sử dụng phương thức Paypal creditBtn Button Tiến hành toán thẻ 109 Bảng 4.37 Bảng mơ tả biến cố hình Biến cố STT Chọn radio button Xử lí Hiển thị nút Paypal Debit or Credit Card Paypal Chọn Paypal Tiến hành sử dụng phương thức Paypal Chọn Debit or Credit Thanh toán thẻ Card 4.1.6 Màn hình danh sách suất chiếu Hình 4.42 Danh sách suất chiếu STT Tên Kiểu Ràng buộc Chức movieImg Image Hiển thị poster phim titleTf Text field Hiển thị tên phim DurationTf Text field Hiển thị thời gian chiếu 110 roomTf Text field Hiển thị phòng addressTf Text field Hiển thị địa rạp listTime Text field Hiển thị danh sách suất chiếu editBtn Button Chỉnh sửa xuất chiếu deleteBtn Button Xóa suất chiếu dateSelect Select Lọc suất chiếu theo ngày newShowTimeBtn Button Thêm suất chiếu Biến cố STT Chọn ngày Xử lí Select hiển thị lịch để chọn ngày, sau người dùng chọn, danh sách suất chiếu cập nhật Nhấn Hiển thị form thêm suất chiếu newShowTimeBtn Nhấn editBtn Hiển thị form chỉnh sửa xuất chiếu Nhấn deleteBtn Hiển thị xác nhận xóa suất chiếu 111 4.1.7 Màn hình thêm suất chiếu Hình 4.43 Màn hình thêm suất chiếu STT Tên Kiểu Ràng buộc Chức movieSelect Select Khác rỗng Chọn phim theaterSelect Select Khác rỗng Chọn rạp dateSelect Select Khác rỗng Chọn ngày insertDateBtn Button Thêm ngày vào danh sách ngày TimeIp TextInput Đúng đinh Nhập danh sách thời gian dạng danh chiếu sách movieImg Image Hiển thị poster phim durationLb Label Hiển thị thời gian chiếu insertShowTimeBtn Button Thêm suất chiếu 112 STT Biến cố Xử lí Chọn phim Select hiển thị danh sách phim để chọn Chọn rạp Select hiển thị danh sách rạp để chọn Chọn phòng Select hiển thị danh sách phòng để chọn Chọn ngày Select hiển thị lịch để chọn ngày Nhấn insertDateBtn Kiểm tra thêm ngày chọn vào danh sách Nhập danh sách thời Kiểm tra thơng tin người dùng có định dạng quy định gian vào timeIp hay chưa, chưa hiển thị thông báo lỗi Người dùng nhấn Kiểm tra chọn đủ thơng tin, phim chưa có suất chiếu, thời insertShowTimeBtn gian suất chiếu chênh lệch theo quy định, phịng trống 4.1.8 Màn hình thêm review phim 113 Hình 4.44 Màn hình review phim Hình 4.45 Màn hình review phim STT Tên Kiểu Ràng buộc Chức userImg Image Hiển thị ảnh người dùng userNameLb Label Hiển thị tên người dùng emailLb Label Hiển thị email người dùng movieImg Image Hiển thị ảnh phim contentTf TextField Nhập nội dung viết movieIp Select Nhập tên phim STT Biến cố Xử lí Nhập tên phim Select hiển thị danh sách phim để chọn Nhấn lưu Kiểm tra thông tin lưu vào sở liệu 114 4.1.9 Màn hình chatbot Hình 4.46 Màn hình chatbot STT Tên Kiểu Ràng buộc Chức chatBotImg Image Hiển thị ảnh chatbo chatbotNameLb Label Hiển thị tên chatbot messageLb Label Hiển thị tin nhắn timeLb Label Hiển thị thời gian messageTf TextField Nhập nội dung chat 115 STT sendBtn Button Biến cố Nhấn gửi Gửi tin nhắn Xử lí Gửi tin nhắn đến server, nhận phản hồi hiển thị tin nhắn đến người dùng 116 Chương KẾT LUẬN, HƯỚNG PHÁT TRIỂN 5.1 Kết đạt Thơng qua việc nghiên cứu tìm hiểu công nghệ, đặc biệt công nghệ mới, nhóm em phát triển phần hệ thống hỗ trợ đặt vé xem phim Shinema Kết chạy thử cho thấy hệ thống hoạt động tốt, mở rộng, phát triển thêm tương lai Về mặt kỹ thuật, nhóm phát triển đạt kết sau: - Biết cách tạo project sử dụng framework để tiến hành code debug thiết bị thực - Tìm hiểu, áp dụng framework ExpressJS database MongoDB việc thao tác CRUD với liệu, upload file Thiết kế BE với Server: Authentication Server Database Server với tiêu chuẩn bảo mật JWT sử dụng loại token để tạo nên hệ thống ổn định, nhanh chóng hiệu suất cao - Tìm hiểu ReactJs, cơng nghệ lập trình Web Đặc biệt, sử dụng Redux Toolkit để xử lý giao tiếp components dễ dàng so với Redux Core - Tìm hiểu được quy trình hoạt động chatbot áp dụng vào ứng dụng - Tìm hiểu Cloudinary dạng Cloud lưu trữ hình ảnh video hữu ích - Học nhiều kiến thức, có thêm kinh nghiệm việc sử dụng MongoDB với Nodejs triển khai website - Học quy trình thực ứng dụng hoàn chỉnh từ lên kế hoạch, thực, kiểm thử, deploy, … - Rèn luyện kĩ nhận dạng toán, nghiên cứu khảo sát thực tế, phân tích chức thực tài liệu mô tả 117 - Nâng cao khả tìm hiểu nghiên cứu cơng nghệ, đặc biệt công nghệ - Kinh nghiệm áp dụng thực tế quy trình phát triển phần mềm V-model - Phát triển kỹ mềm cá nhân lên kế hoạch, trình bày văn bản, dự trù thời gian, … kỹ làm việc nhóm khả tranh luận, thuyết phục hỗ trợ lẫn 5.2 Thuận lợi khó khăn 5.2.1 Thuận lợi - Nhóm làm việc chung nhiều đồ án, trải qua nhiều mơn học phải nộp đồ án cuối kì nhiều cơng nghệ ngơn ngữ lập trình khác nhau, nên đa phần thành viên có kinh nghiệm debug khả tự học công nghệ ổn - Có kiến thức mơn học Kiểm chứng phần mềm, Quản lý dự án phát triển phần mềm, Thiết kế giao diện người dùng, Phương pháp phát triển phần mềm hướng đối tượng, Công nghệ Web ứng dụng phục vụ tốt cho công tác xây dụng phát triển ứng dụng 5.2.2 Khó khăn - Phải tự học nhiều, nhóm lần làm ứng dụng với công nghệ thời gian ngắn - Trong học kì nhóm đăng kí mơn chưa hợp lí nên dẫn đến khó khăn việc xếp thời gian 5.3 Hướng phát triển Đề tài cịn mở rộng phát triển thêm nhiều tính tích hợp với sở liệu trường học tối ưu hóa giá trị liệu như: - Thêm chức tích điểm cho khách hàng hưởng ưu đãi - Chức đổi ngôn ngữ - Phát triển ứng dụng với chức hỗ trợ khách hàng hệ thống thiết bị di động 118 TÀI LIỆU THAM KHẢO [1] Refsnes Data, “W3Schools”, [Online] Available: https://www.w3schools.com/ [2] © 2015–2022 Dan Abramov and the Redux documentation authors, “Redux-Toolkit Documentary” [Online] Available: Redux-Toolkit [3] Prosus, “Stack Overflow”, [Online] Available: stackoverflow [4] © 2022 Meta Platforms, Inc, “React Documentary” [Online] Avaialable: React [5] © 2022 Remix, “React Router Dom Documentary” [Online] Available : React-Router-Dom [6] © 2022 Material UI SAS, “MUI Library Documentary” [Online] Available : MUI [7] EmailEngine, “Nodemailer” [Online] Avaialable: Nodemailer [8] © 1999–2022 Paypal Pte Ltd., “Paypal Documentary” [Online] Available: Paypal [9] Cloud, “Cloundinary” [Online] Available: Cloundinary Documentation [10] MongoDB Inc., “MongoDB” [Online] Available: MongoDB: MongoDB 119 [11] StrongLoop, IBM, and other expressjs.com contributors, “Express” [Online] Available: Express [12] Valeri Karpov, Kathryn Radovan, Hafez, “Mongoose” [Online] Available: Mongoosejs [13] Pavel Sirotin, Ilya Gelfenbeyn, Artem Goncharuk, “Dialogflow” [Online] Available: Dialogflow [14] Kommunicate Developer, “Kommunicate” [Online] Available: Kommunicate ...ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM XÂY DỰNG HỆ THỐNG HỖ TRỢ QUẢN LÍ BÁN VÉ XEM PHIM Đồ án Giảng viên hướng dẫn: ThS Nguyễn Thị Thanh Trúc... JWT: - Giúp khách hàng xem thơng tin phim, bình luận phim thực thao tác đặt vé, đánh giá phim - Hỗ trợ việc tìm kiếm theo nhiều lọc khác - Có hệ thống quản lí liệu: quản lí phim, cụm rạp, nhân viên,... quy trình xây dựng website thông qua công nghệ đề - Biết thủ tục toán, quản lí hệ thống quản lí xem phim - Xây dựng ứng dụng website đáp ứng đủ nhu càu người dùng - Biết quy trình xây đựng chatbot