Đồ án xây dựng website đặt vé xem phim online

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN MÔN HỌC ĐỒ ÁN ĐỀ TÀI: XÂY DỰNG WEBSITE ĐẶT VÉ XEM PHIM ONLINE Giảng viên hướng dẫn: ThS Trần Thị Hồng Yến Sinh viên thực hiện: 19522090 – Vũ Nguyễn Minh Quân Thành phố Hồ Chí Minh, ngày 21 tháng 12 năm 2022 ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN MÔN HỌC ĐỒ ÁN ĐỀ TÀI: XÂY DỰNG WEBSITE ĐẶT VÉ XEM PHIM ONLINE Giảng viên hướng dẫn: ThS Trần Thị Hồng Yến Sinh viên thực hiện: 19522090 – Vũ Nguyễn Minh Quân Thành phố Hồ Chí Minh, ngày 21 tháng 12 năm 2022 LỜI CẢM ƠN Đầu tiên, nhóm em xin gởi lời cảm ơn chân thành đến tập thể quý Thầy Cô Trường Đại học Công nghệ thông tin – Đại học Quốc gia TP.HCM quý Thầy Cô khoa Công nghệ phần mềm trang bị cho nhóm kiến thức tảng để thực đề tài Đặc biệt, nhóm xin gửi lời cảm ơn lịng biết ơn sâu sắc tới Cô Trần Thị Hồng Yến, người trực tiếp tận tình hướng dẫn nhóm em suốt q trình thực đồ án Khơng gợi ý tận tâm hướng dẫn chúng em trình tìm hiểu, đọc tài liệu, Cơ cịn tận tình bảo em kĩ phân tích, khai thác tài liệu để có tư liệu phù hợp với nội dung đồ án Hơn nữa, Cơ cịn nhiệt tình việc đốc thúc trình viết báo cáo, đọc đưa nhận xét, góp ý để em hồn thành báo cáo đồ án cách tốt Nếu khơng có lời hướng dẫn, dạy bảo Cơ đồ án khó hồn thiện Một lần nữa, em xin chân thành cảm ơn Cô Đề tài nhóm thực thời gian tháng nên bước đầu vào thực tế, tìm hiểu lĩnh vực nghiên cứu khoa học, kiến thức kinh nghiệm thực tiễn em hạn chế nhiều bỡ ngỡ Do vậy, không tránh khỏi thiếu sót điều chắn, nhóm mong nhận bảo, ý kiến đóng góp quý báu quý Thầy Cô bạn học lớp để em có điều kiện bổ sung, nâng cao kiến thức lĩnh vực này, giúp hồn thiện tích lũy thêm cho thân nhiều kinh nghiệm, phục vụ tốt cho công việc thực tế sau Cuối cùng, em xin gửi đến ba mẹ, gia đình bạn bè lời cảm ơn, tri ân chân thành lòng biết ơn sâu sắc động viên, ủng hộ, giúp đỡ cổ vũ tinh thần cho em suốt trình vừa qua Chúng em xin chân thành cảm ơn! Sinh viên thực hiện: Vũ Nguyễn Minh Quân NHẬN XÉT CỦA GIẢNG VIÊN TP HCM, ngày… tháng … năm …… Giảng viên hướng dẫn ThS Trần Thị Hồng Yến ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM TRƯỜNG ĐẠI HỌC Độc Lập - Tự Do - Hạnh Phúc CÔNG NGHỆ THÔNG TIN ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: Xây dựng website đặt vé xem phim online Cán hướng dẫn: ThS Trần Thị Hồng Yến Thời gian thực hiện: Từ ngày: 5/9/2022 đến ngày 28/12/2022 Sinh viên thực hiện: Vũ Nguyễn Minh Quân - 19522090 Nội dung đề tài: Lí chọn đề tài Với lên áp dụng công nghệ đời sống - xã hội nay, cơng nghệ hóa vấn đề sống dường điều hiển nhiên Cơng nghệ hóa chìa khóa để cơng việc thực dễ dàng, hiệu quả, nhanh chóng an tồn Chính để bắt kịp xu thế, tiết kiệm thời gian tiền bạc, ngành nghề dần chuyển sang sử dụng cơng nghệ thay sức người Trong phạm vi này, nhóm nghiên cứu phát triển “Website đặt vé xem phim online” để nhằm đáp ứng nhu cầu sống, dễ dàng đặt vé lúc nơi, tiết kiệm sức lực thời gian Mục tiêu đề tài o Xây dựng website đặt vé xem phim online hoàn chỉnh chức lẫn trải nghiệm người dùng Phạm vi đề tài Đề tài tập trung xây dựng website phục vụ nhu cầu đặt vé xem phim online  Phạm vi môi trường: o Triển khai sản phẩm đề tài môi trường web  Phạm vi chức năng: o Đăng kí, đăng nhập, xác thực o Quản lý thơng tin khách hàng o Quản lý phim, thể loại phim, khung chiếu o Quản lý thông tin vé o Đặt vé Đối tượng sử dụng  Người dùng có nhu cầu đặt vé xem phim ngồi rạp  Người khơng có thời gian rạp mua trực tiếp  Nhân viên quản trị viên website Phương pháp thực  Khảo sát tìm hiểu website tương tự có thị trường, từ phân tích, xác định u cầu cụ thể đề tài  Phân tích thiết kế hệ thống xây dựng website  Tìm hiểu thiết kế UX/UI, tối đa hóa trải nghiệm người dùng Cơng nghệ sử dụng  Front-end: ReactJS  Back-end: NodeJS, ExpressJS  Database: MongoDB Kết mong đợi - Nắm bắt ứng dụng công nghệ để hoàn thiện sản phẩm đề tài - Hiểu rõ nghiệp vụ, chức website đặt vé xem phim online - Ứng dụng kiến thức học phân tích thiết kế hệ thống phần mềm vào việc xây dựng triển khai website sản phẩm đề tài - Có thể thay đổi giao diện cách linh động mở rộng thêm chức cho website sản phẩm đề tài để phù hợp với nhu cầu thực tiễn tương lai Kế hoạch thực hiện: Tuần Công việc Tuần 1, Tìm hiểu đề tài, đánh giá thị trường, xác định chức (5/9 – 18/9) hệ thống Tuần - Tìm hiểu nghiên cứu cơng nghệ (19/9 – 9/10) Tuần 6, Phân tích thiết kế hệ thống website (10/10 – 23/10) Tuần - 10 Nghiên cứu giao diện tổng thể cho website từ trang web (24/10 – 13/11) tương ứng Tuần 11 - 12 Xây dựng Backend, API cần thiết cho chức (14/10 – 27/11) quản lý Tuần 13 - 15 Xây dựng chức quản lý trang quản lý quản (28/11 – 18/12) trị viên Tuần 16 (19/12 – 25/12) Xây dựng trang đặt vé cho khách hàng Tuần 17 Sửa lỗi, cải thiện giao diện (26/12 – 28/12) Hoàn thiện tài liệu tiến hành báo cáo Xác nhận CBHD TP HCM, ngày 10 tháng năm 2022 (Ký tên ghi rõ họ tên) Sinh viên (Ký tên ghi rõ họ tên) Vũ Nguyễn Minh Quân Trần Thị Hồng Yến MỤC LỤC CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI 11 1.1 LÝ DO CHỌN ĐỀ TÀI 11 1.2 MỤC TIÊU 11 1.3 PHẠM VI 11 1.4 ĐỐI TƯỢNG SỬ DỤNG 12 1.5 KẾT QUẢ DỰ KIẾN 12 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 13 2.1 JAVASCRIPT (NODEJS) 13 2.1.1 Khái niệm 13 2.1.2 Tại nên sử dụng NodeJS 13 2.2 MONGODB 13 2.2.1 Giới thiệu 13 2.2.2 Tại nên sử dụng hệ quản trị sở liệu MongoDB 13 2.2.3 Áp dụng MongoDB vào đề tài 14 2.3 REACTJS 14 2.3.1 Giới thiệu Reactjs 14 2.3.2 Tại nên sử dụng Reactjs 15 2.4 EXPRESSJS 16 2.4.1 Giới thiệu 16 2.4.2 Một số tính 16 2.4.3 Tại nên sử dụng ExpressJS 16 CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 18 3.1 SƠ ĐỒ USE CASE TỔNG QUÁT 18 3.2 DANH SÁCH CÁC ACTOR 18 3.3 DANH SÁCH CÁC USE CASE 19 3.4 ĐẶC TẢ USE CASE 19 3.4.1 Đặc tả Use Case “Đăng nhập” 19 3.4.2 Đặc tả Use Case “Đăng ký” 20 3.4.3 Đặc tả Use Case “Đăng xuất” 21 3.4.4 Đặc tả Use Case “Thêm phim” 21 3.4.5 Đặc tả Use Case “Sửa phim” 22 3.4.6 Đặc tả Use Case “Xóa phim” 23 3.4.7 Đặc tả Use Case “Thêm rạp” 24 3.4.8 Đặc tả Use Case “Sửa rạp” 25 3.4.9 Đặc tả Use Case “Xóa rạp” 25 3.4.10 Đặc tả Use Case “Thêm chiếu” 26 3.4.11 Đặc tả Use Case “Sửa chiếu” 27 3.4.12 Đặc tả Use Case “Xóa chiếu” 27 3.4.13 Đặc tả Use Case “Đặt vé” 28 3.4.14 Đặc tả Use Case “Xem vé đặt” 29 3.5 THIẾT KẾ CƠ SỞ DỮ LIỆU 30 3.5.1 Sơ đồ logic 30 3.5.2 Mô tả chi tiết kiểu liệu sơ đồ logic 31 3.6 CÁC SƠ ĐỒ VÀ LUỒNG HOẠT ĐỘNG 33 3.6.1 Đăng nhập 33 3.6.2 Đăng kí 35 3.6.3 Đặt vé 36 3.6.4 Thêm liệu 38 3.6.5 Sửa liệu 40 3.6.6 Xóa liệu 42 CHƯƠNG 4: THIẾT KẾ GIAO DIỆN 45 4.1 DANH SÁCH MÀN HÌNH 45 4.2 HIỆN THỰC ĐỒ ÁN 46 4.1.1 Màn hình đăng nhập 46 4.1.2 Màn hình (Homepage) 47 4.1.3 Màn hình tìm kiếm phim 48 4.1.4 Màn hình thơng tin phim 49 4.1.5 Màn hình đặt vé 50 4.1.6 Màn hình lịch sử đặt vé 51 4.1.7 Màn hình QTV 52 4.1.8 Màn hình quản lý người dùng QTV 53 4.1.9 Màn hình quản lý phim QTV 54 4.1.10 Màn hình quản lý rạp QTV 55 4.1.11 Màn hình quản lý phịng chiếu QTV 56 4.1.12 Màn hình quản lý chiếu QTV 57 4.1.13 Màn hình quản lý vé QTV 58 KẾT LUẬN 59 TÀI LIỆU THAM KHẢO 61 4.1.2 Màn hình (Homepage) Hình 4.2 Màn hình “Homepage” Bảng 4.3 Danh sách chức hình “Homepage” Bước Hành động tác nhân Xử lý hệ thống Click vào phim Chuyển hướng tới trang phim chi tiết Click vào chức “Đăng nhập” Chuyển hướng tới trang đăng nhập 47 4.1.3 Màn hình tìm kiếm phim Hình 4.3 Màn hình “Tìm kiếm phim” Bảng 4.4 Danh sách chức hình “Tìm kiếm phim” Bước Hành động tác nhân Xử lý hệ thống Nhập tên phim vào tìm kiếm Hiển thị phim tương ứng Chọn thể loại phim Hiển thị phim thể loại tương ứng Click vào phim Chuyển hướng tới trang phim chi tiết 48 4.1.4 Màn hình thơng tin phim Hình 4.4 Màn hình “Thơng tin phim” Bảng 4.5 Danh sách chức hình “Thông tin phim” Bước Hành động tác nhân Xử lý hệ thống Chọn ngày Hiển thị lịch chiếu theo ngày Chọn rạp Hiển thị lịch chiếu rạp ngày Chọn thương hiệu rạp Lọc rạp thương hiệu tương ứng Click vào chiếu Chuyển hướng tới trang đặt vé 49 4.1.5 Màn hình đặt vé Hình 4.5 Màn hình “Đặt vé” Bảng 4.6 Danh sách chức hình “Đặt vé” Bước Hành động tác nhân Xử lý hệ thống Chọn ghế Đánh dấu ghế chọn Click xác nhận Xác nhận thông tin vé muốn đặt 50 4.1.6 Màn hình lịch sử đặt vé Hình 4.6 Màn hình “Lịch sử đặt vé” Bảng 4.7 Danh sách chức hình “Lịch sử đặt vé” Bước Hành động tác nhân Xử lý hệ thống Nhập thông tin cần thiết vào Hiển thị vé có thơng tin cần tìm tìm kiếm 51 4.1.7 Màn hình QTV Hình 4.7 Màn hình “Homepage Quản Lý” Bảng 4.8 Danh sách chức hình “Homepage Quản Lý” Bước Hành động tác nhân Xử lý hệ thống Chọn mục quản lý muốn truy cập Hiển thị trang quản lý tương ứng Click vào chức “Đăng xuất” Đăng xuất khỏi hệ thống 52 4.1.8 Màn hình quản lý người dùng QTV Hình 4.8 Màn hình “Quản lý người dùng” Bảng 4.9 Danh sách chức hình “Quản lý người dùng” Bước Hành động tác nhân Xử lý hệ thống Click Thêm Thêm người dùng (tài khoản) Click Xem Xem chi tiết người dùng có sẵn Chọn hàng muốn xóa bấm vào Xóa người dùng biểu tượng thùng rác 53 4.1.9 Màn hình quản lý phim QTV Hình 4.9 Màn hình “Quản lý phim” Bảng 4.10 Danh sách chức hình “Quản lý phim” Bước Hành động tác nhân Xử lý hệ thống Click Thêm Thêm phim Click Xem Xem chi tiết phim có sẵn Chọn hàng muốn xóa bấm vào Xóa phim biểu tượng thùng rác 54 4.1.10 Màn hình quản lý rạp QTV Hình 4.10 Màn hình “Quản lý rạp” Bảng 4.11 Danh sách chức hình “Quản lý rạp” Bước Hành động tác nhân Xử lý hệ thống Click Thêm Thêm rạp Click Xem Xem chi tiết rạp có sẵn Chọn hàng muốn xóa bấm vào Xóa rạp biểu tượng thùng rác 55 4.1.11 Màn hình quản lý phịng chiếu QTV Hình 4.11 Màn hình “Quản lý phịng chiếu” Bảng 4.12 Danh sách chức hình “Quản lý phòng chiếu” Bước Hành động tác nhân Xử lý hệ thống Click Thêm Thêm phòng chiếu Click Xem Xem chi tiết phịng chiếu có sẵn Chọn hàng muốn xóa bấm vào Xóa phịng chiếu biểu tượng thùng rác 56 4.1.12 Màn hình quản lý chiếu QTV Hình 4.12 Màn hình “Quản lý chiếu” Bảng 4.13 Danh sách chức hình “Quản lý chiếu” Bước Hành động tác nhân Xử lý hệ thống Click Thêm Thêm chiếu Click Xem Xem chi tiết chiếu có sẵn Chọn hàng muốn xóa bấm vào Xóa chiếu biểu tượng thùng rác 57 4.1.13 Màn hình quản lý vé QTV Hình 4.13 Màn hình “Quản lý vé” Bảng 4.14 Danh sách chức hình “Quản lý vé” Bước Hành động tác nhân Xử lý hệ thống Click Xem Xem chi tiết vé Chọn hàng muốn xóa bấm vào Xóa vé biểu tượng thùng rác 58 KẾT LUẬN 1) Đánh giá  Thuận lợi - Nhận giúp đỡ tư vấn tận tình từ giảng viên bạn bè, nhờ nhóm có hướng đắn để thực đề tài - Vận dụng kiến thức học để áp dụng vào đề tài đồ án - Nhiều tài liệu tham khảo đa dạng, phong phú hỗ trợ trình tìm hiểu, nghiên cứu cơng nghệ  Khó khăn - Cịn bỡ ngỡ tiếp cận với công nghệ React JS, ExpressJS nên gặp nhiều khó khăn việc học hỏi tốn nhiều thời gian thử nghiệm bình thường - Nhóm thành viên nên gặp khơng khó khăn q trình nghiên cứu đồ án - Khơng có q nhiều mẫu ứng dụng để tham khảo trình nghiên cứu đề tài 2) Kết luận  Kết đạt - Kết thúc môn học, nhóm tìm hiểu hồn thành ứng dụng tương đối hoàn chỉnh Với hướng dẫn từ Cô, kiến thức mà Cô cung cấp, chúng em áp dụng design pattern tốt quy chuẩn phát triển ứng dụng để có ứng dụng tốt - Trong khoảng thời gian hạn chế, nhóm phát triển phần mềm tương đối hồn thiện Phần mềm đáp ứng tốt chức trang web đặt vé xem phim online 59  Ưu điểm - Phần mềm nhẹ nhanh - Giao diện ứng dụng thân thiện, dễ sử dụng Nhóm đưa thiết kế sau tham khảo nhiều trang web thực tế khác nhau, ứng dụng phù hợp với thói quen người sử dụng - Phân chia quyền rõ ràng, đơn giản cho việc kiểm duyệt nâng cao tính bảo mật  Nhược điểm - Vẫn tồn số lỗi tiềm ẩn - Cịn nhiều điểm UI/UX cải thiện  Hướng mở rộng - Cải thiện thêm UI/UX - Hỗ trợ đa ngơn ngữ - Hồn thiện chức có, đồng thời thêm nhiều tính hỗ trợ người dùng q trình tìm kiếm phim muốn đặt 60 TÀI LIỆU THAM KHẢO [1] React JS - React Tutorial for Beginners (10/11/2022): https://www.youtube.com/watch?v=Ke90Tje7VS0 [2] Build Node.js RESTful APIs in 10 Minutes (10/11/2022): https://www.codementor.io/@olatundegaruba/nodejs-restful-apis-in-10-minutesq0sgsfhbd [3] Node.js Full Course for Beginners | Complete All-in-One Tutorial | Hours (11/11/2022): https://www.youtube.com/watch?v=f2EqECiTBL8 [4] MERN Stack Full Tutorial & Project | Complete All-in-One Course | Hours YouTube (11/11/2022): https://www.youtube.com/watch?v=CvCiNeLnZ00 [5] JavaScript Full Course for Beginners | Complete All-in-One Tutorial | Hours YouTube (11/11/2022): https://www.youtube.com/watch?v=EfAl9bwzVZk [6] Tài liệu ExpressJS (11/11/2022): https://expressjs.com/ [7] Tài liệu React (11/11/2022): https://reactjs.org/docs/getting-started.html 61 ... cứu phát triển ? ?Website đặt vé xem phim online? ?? để nhằm đáp ứng nhu cầu sống, dễ dàng đặt vé lúc nơi, tiết kiệm sức lực thời gian Mục tiêu đề tài o Xây dựng website đặt vé xem phim online hoàn chỉnh... kiếm phim Màn hình sử dụng chức tìm kiếm phim Thơng tin phim Màn hình xem thơng tin phim sau chọn phim muốn Đặt vé Màn hình đặt vé sau chọn chiếu phim Lịch sử đặt vé Màn hình lịch sử đặt vé người... thái hệ thống sau Đặt vé thành công thực use case 3.4.14 Đặc tả Use Case ? ?Xem vé đặt? ?? Bảng 3.16 Đặc tả Use Case ? ?Xem vé đặt? ?? Tên chức Xem vé đặt Tóm tắt Người dùng muốn xem vé đặt Tác nhân Khách