Đồ án xây dựng website quản lý rạp chiếu phim

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỒ ÁN XÂY DỰNG WEBSITE QUẢN LÝ RẠP CHIẾU PHIM GV HƯỚNG DẪN: THS TRẦN THỊ HỒNG YẾN SV THỰC HIỆN: ĐỖ PHÚ QUANG – 20521800 VÕ ĐÌNH NGHĨA – 20521659 TP HỒ CHÍ MINH, 2023 LỜI CẢM ƠN Để hoàn thành đồ án “Xây dựng trang web quản lý rạp chiếu phim”, lời chúng em xin gửi lời cảm ơn chân thành đến cô Trần Thị Hồng Yến tận tình giúp đỡ, đưa định hướng lời khuyên quý báu cho trình phát triển đồ án chúng em Những học, kinh nghiệm cô truyền dạy hành trang vững cho trình học tập làm việc chúng em Bên cạnh đó, chúng em khơng qn gửi lời cảm ơn đến tồn thể quý thầy cô giảng dạy Trường Đại học Công nghệ thông tin giúp chúng em có tảng kiến thức vững để tìm hiểu hồn thiện sản phẩm đề Trong trình phát triển đồ án, thiếu kinh nghiệm thực tiễn việc xây dựng sản phẩm, sai sót nhóm điều khơng thể tránh khỏi Chính vậy, chúng em sẵn lịng đón nhận góp ý, đánh giá từ để tạo sản phẩm hồn thiện, chỉnh chu Lời cuối, chúng em xin kính chúc cô dồi sức khỏe, thành công nghiệp sống! TP.HCM, ngày 24 tháng 06 năm 2023 Nhóm sinh viên thực Đỗ Phú Quang – Võ Đình Nghĩa ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: XÂY DỰNG TRANG WEB QUẢN LÝ RẠP CHIẾU PHIM Cán hướng dẫn: ThS Trần Thị Hồng Yến Thời gian thực hiện: Từ ngày 27/02/2023 đến ngày 17/06/2023 Sinh viên thực hiện: Đỗ Phú Quang - 20521800 Võ Đình Nghĩa - 20521659 Nội dung đề tài: Giới thiệu Trong năm gần đây, kinh tế giới nói chung Việt Nam nói riêng có phát triển vượt bậc, kéo theo nhu cầu giải trí xã hội ngày cao Để đáp ứng nhu cầu người, nhiều ngành công nghiệp giải trí dần đẩy mạnh quy mô lẫn chất lượng, đặc biệt công nghiệp điện ảnh Trong khứ, để xem phim rạp, người xem phải đến trực tiếp điểm bán vé để mua vé, vừa phức tạp lại tốn thời gian Tuy nhiên, thời đại 4.0 với bùng nổ Internet nay, việc có phần mềm đặt vé xem phim cung cấp cho người dùng cách dễ dàng, tiện lợi nhanh chóng để đặt vé Hiểu điều đó, nhóm em định lựa chọn đề tài “Xây dựng website quản lý rạp chiếu phim”, giúp giảm thiểu thời gian nỗ lực cần thiết khách hàng để mua vé mà giúp người quản lý rạp quản lý nhân lực, tài nguyên, doanh thu cách hiệu Mô tả chi tiết mục tiêu ‒ Hiểu ReactJs, NextJs, Typescript, NodeJs, ExpressJs cách áp dụng công nghệ vào đồ án ‒ Hiểu State Management cách sử dụng thư viện Redux Toolkit, Redux Saga ‒ Xây dựng phần mềm Quản lý rạp phim với tính như: Đặt vé, Quản lý phim, Quản lý lịch chiếu,… Phạm vi o Phạm vi môi trường ‒ Triển khai sản phẩm môi trường web o Phạm vi chức ‒ Client + Xem danh sách phim chiếu, chiếu + Xem lịch chiếu + Đặt vé + Xem viết + Đánh giá phim + Xem lịch sử giao dịch + Quản lý thông tin cá nhân ‒ Admin + Đặt vé (Nhân viên quầy) + Quản lý phim + Quản lý lịch chiếu + Quản lý phòng chiếu + Quản lý menu + Quản lý diễn viên + Quản lý nhân viên + Quản lý viết + Quản lý báo cáo Đối tượng ‒ Người dùng có nhu cầu đặt vé xem phim ‒ Chủ rạp phim, quản lý nhân viên rạp Phương pháp thực ‒ Tìm hiểu công nghệ Front-end ReactJs, NextJs, Typescript, TailwindCSS, MUI ‒ Tìm hiểu cơng nghệ Back-end NodeJs, ExpressJs, MongoDB, Mongoose ‒ Tìm hiểu State Management thư viện Redux Toolkit, Redux Saga ‒ Khảo sát thực trạng trang web đặt vé xem phim thị trường CGV, Starlight, LotteCinema, GalaxyCinema,…, nghiệp vụ quản lý rạp chiếu phim từ tiến hành phân tích, xác định yêu cầu cụ thể cho đề tài ‒ Phân tích thiết kế hệ thống ứng dụng ‒ Tiến hành nghiên cứu thiết kế wireframe cho trang web ‒ Tiến hành xây dựng trang web ‒ Tiến hành triển khai kiểm thử chức Công nghệ ‒ Front-end: ReactJs, NextJs, Typescript, TailwindCSS, MUI ‒ State Management: Redux Toolkit, Redux Saga ‒ Back-end: NodeJs, ExpressJs ‒ Database: MongoDB ‒ API Documentation: Postman ‒ Source Control: Github Kết mong đợi ‒ Tìm hiểu áp dụng công nghệ việc xây dựng phần mềm Quản lý rạp chiếu phim ‒ Hiểu rõ nghiệp vụ, chức phần mềm Quản lý rạp chiếu phim ‒ Xây dựng phần mềm Quản lý rạp chiếu phim đáp ứng yêu cầu giao diện chức đề ‒ Có thể thay đổi linh hoạt giao diện, mở rộng thêm tính việc phát triển phần mềm tương lai Kế hoạch thực hiện: STT Tên công việc Thời gian dự kiến Thành viên thực Tìm hiểu đề tài, nghiên cứu 27/2/2023 – 5/3/2023 Cả nhóm 6/3/2023 – 12/3/2023 Cả nhóm phần mềm sẵn có, xác định chức nghiệp vụ phần mềm Nghiên cứu lựa chọn công nghệ sử dụng Tìm hiểu quy trình thiết kế 13/3/2023 – 26/3/2023 Cả nhóm UI/UX thiết kế wireframe cho ứng dụng Khởi tạo cài đặt cấu 27/3/2023 – 31/3/2023 Võ Đình Nghĩa hình Source Code Back-end Khởi tạo cài đặt cấu 27/3/2023 – 31/3/2023 Đỗ Phú Quang hình Source Code Front-end Xây dựng giao diện trang 1/4/2023 – 20/4/2023 Đỗ Phú Quang 1/4/2023 – 20/4/2023 Võ Đình Nghĩa Admin Xây dựng API cho trang Admin Kết nối API vào trang 21/4/2023 – 30/4/2023 Cả nhóm Admin, chỉnh sửa API cần thiết Xây dựng giao diện trang 1/5/2023 – 20/5/2023 Đỗ Phú Quang 1/5/2023 – 20/5/2023 Võ Đình Nghĩa Client 10 Xây dựng API cho trang Client 11 Kết nối API vào trang 21/5/2023 – 31/5/2023 Cả nhóm Admin, chỉnh sửa API cần thiết 12 Kiểm thử phần mềm sửa 1/6/2023 – 7/6/2023 Cả nhóm Cả nhóm lỗi 13 Hồn thiện báo cáo 8/6/2023 – 10/6/2023 14 Thời gian dự phòng 11/6/2023 – 17/6/2023 Xác nhận CBHD TP HCM, ngày 13 tháng 02 năm 2023 (Ký tên ghi rõ họ tên) Sinh viên (Ký tên ghi rõ họ tên) Đỗ Phú Quang ThS Trần Thị Hồng Yến TP HCM, ngày 13 tháng 02 năm 2023 Sinh viên (Ký tên ghi rõ họ tên) Võ Đình Nghĩa MỤC LỤC LỜI CẢM ƠN .2 ĐỀ CƯƠNG CHI TIẾT MỤC LỤC DANH MỤC HÌNH ẢNH 12 DANH MỤC BẢNG 15 Chương GIỚI THIỆU ĐỀ TÀI 17 1.1 Lý chọn đề tài 17 1.2 Phạm vi nghiên cứu 17 1.3 Đối tượng nghiên cứu 18 1.4 Phương pháp nghiên cứu 18 1.5 Khảo sát thực tế giải pháp 19 1.5.1 Khảo sát ứng dụng thị trường 19 1.5.2 Giải pháp 20 Chương CÔNG NGHỆ SỬ DỤNG 21 2.1 ReactJs 21 2.1.1 Giới thiệu .21 2.1.2 Ưu điểm 22 2.1.3 Nhược điểm .22 2.2 NextJs .22 2.2.1 Giới thiệu .22 2.2.2 Ưu điểm 23 2.2.3 Nhược điểm .23 2.3 MUI (Material UI) 23 2.3.1 Giới thiệu .24 2.3.2 Ưu điểm 24 2.3.3 Nhược điểm .24 2.4 TailwindCSS 25 2.4.1 Giới thiệu .25 2.4.2 Ưu điểm 25 2.4.3 Nhược điểm .26 2.5 NodeJs 26 2.5.1 Giới thiệu .27 2.5.2 Ưu điểm 27 2.5.3 Nhược điểm .27 2.6 ExpressJs 27 2.6.1 Giới thiệu .28 2.6.2 Ưu điểm 28 2.6.3 Nhược điểm .28 2.7 MongoDB .28 2.7.1 Giới thiệu .29 2.7.2 Ưu điểm 29 2.7.3 Nhược điểm .29 2.8 Mongoose .30 2.8.1 Giới thiệu .30 2.8.2 Ưu điểm 30 2.8.3 Nhược điểm .30 Chương PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG .32 3.1 Phân tích yêu cầu 32 3.1.1 Đăng ký 32 3.1.2 Đăng nhập .32 3.1.3 Xem trang thống kê nhanh (Trang Admin) .32 3.1.4 Đặt vé (Trang Admin + Client) .32 3.1.5 Quản lý phim (Trang Admin) 33 3.1.6 Quản lý lịch chiếu (Trang Admin) 33 3.1.7 Quản lý phòng chiếu (Trang Admin) 33 3.1.8 Quản lý đồ ăn nhẹ (Trang Admin) 34 3.1.9 Quản lý diễn viên (Trang Admin) 34 3.1.10 Quản lý nhân viên (Trang Admin) 34 3.1.11 Quản lý viết (Trang Admin) 35 3.1.12 Quản lý giao dịch (Trang Admin) 35 3.1.13 Quản lý báo cáo (Trang Admin) 35 3.1.14 Quản lý thể loại phim (Trang Admin) 35 3.1.15 Quản lý loại phòng chiếu (Trang Admin) .36 3.1.16 Quản lý thông tin cá nhân (Trang Admin) 36 3.1.17 Xem danh sách lịch chiếu (Trang Client) .36 3.1.18 Xem danh sách phim chi tiết phim (Trang Client) 36 3.1.19 Đánh giá bình luận 36 3.1.20 Xem danh sách phim chi tiết diễn viên (Trang Client) 37 3.1.21 Xem danh sách phim chi tiết viết (Trang Client) .37 3.1.22 Quản lý tài khoản 37 10 ‒ Ngồi ra, hình cịn bao gồm thơng tin khác phim chia thành phần: Thông tin (Chứa mơ tả trailer phim), Bộ ảnh (Các hình ảnh minh họa phim), Review (Đánh giá từ người dùng khác đặt vé) Bình luận ‒ Màn hình cịn hiển thị số lọc cho phép đặt vé nhanh mà không cần phải chuyển đến hình “Danh sách lịch chiếu” ‒ Cuối hình danh sách phim chiếu chiếu, nhấn vào phim danh sách dẫn người dùng đến hình “Chi tiết phim” tương ứng 137 4.2.2.9 Thể loại phim Hình 4.59 Màn hình “Thể loại phim” ‒ Màn hình hiển thị lọc “Thể loại phim” bao gồm thể loại mà rạp quản lý, lọc “Năm” gồm danh sách năm sản xuất phim “Tìm kiếm” cho phép nhâp thơng tin tìm kiếm Bên lọc danh sách phim hiển thị dựa tiêu chí từ lọc từ “Tìm kiếm” Người dùng nhấn vào phim danh sách để chuyển đến hình “Chi tiết phim” ‒ Màn hình hiển thị số lọc cho phép đặt vé nhanh mà không cần phải chuyển đến hình “Danh sách lịch chiếu” 138 4.2.2.10 Diễn viên Hình 4.60 Màn hình “Diễn viên” ‒ Màn hình hiển thị lọc “Quốc tịch” bao gồm quốc tịch diễn viên “Tìm kiếm” cho phép nhâp thơng tin tìm kiếm Bên danh sách diễn viên hiển thị dựa lọc thơng tin tìm kiếm Người dùng nhấn vào diễn viên danh sách để chuyển đến hình “Chi tiết diễn viên” ‒ Màn hình hiển thị số lọc cho phép đặt vé nhanh mà khơng cần phải chuyển đến hình “Danh sách lịch chiếu” 139 4.2.2.11 Chi tiết diễn viên Hình 4.61 Màn hình “Chi tiết diễn viên” ‒ Màn hình hiển thị thông tin diễn viên như: Họ tên, ngày sinh, quốc tịch, hình ảnh ‒ Người dùng chuyển qua lại tab như: Tiểu sử, ảnh, phim tham gia 140 4.2.2.12 Bài viết Hình 4.62 Màn hình “Bài viết” ‒ Màn hình hiển thị danh sách viết cơng khai rạp “Tìm kiếm” cho phép nhâp thơng tin tìm kiếm viết Người dùng nhấn vào viết danh sách để chuyển đến hình “Chi tiết viết” ‒ Màn hình hiển thị số lọc cho phép đặt vé nhanh mà không cần phải chuyển đến hình “Danh sách lịch chiếu” 141 4.2.2.13 Chi tiết viết Hình 4.63 Màn hình “Chi tiết viết” ‒ Màn hình hiển thị hình ảnh, thơng tin viết số thông tin tác giả, thời gian đăng bài, số lượt xem ‒ Màn hình hiển thị số lọc cho phép đặt vé nhanh mà không cần phải chuyển đến hình “Danh sách lịch chiếu” 142 4.2.2.14 Tài khoản Hình 4.64 Màn hình “Tài khoản” ‒ Màn hình hiển thị thơng tin người dùng họ tên, giới tính, số điện thoại, ngày sinh cho phép chỉnh sửa thông tin ‒ Người dùng thực số thao tác khác đổi mật khẩu, đăng xuất ‒ Màn hình hiển thị danh sách giao dịch người dùng Với giao dịch, người dùng nhấn vào để xem thơng tin chi tiết 143 4.2.2.15 Chi tiết giao dịch Hình 4.65 Màn hình “Chi tiết giao dịch” (Chưa gửi đánh giá) Hình 4.66 Màn hình “Chi tiết giao dịch” (Đã gửi đánh giá) ‒ Màn hình hiển thị thơng tin giao dịch như: Họ tên người đặt, tên phim, suất chiếu, tổng tiền, danh sách ghế, danh sách bắp nước ‒ Người dùng nhập đánh giá, chọn số điểm gửi đánh giá ‒ Khi người dùng gửi đánh giá người dùng cập nhật đánh giá 144 4.2.2.16 Đặt vé Hình 4.67 Màn hình “Đặt vé” (Chọn ghế) ‒ Ở bước chọn ghế, hình hiển thị danh sách ghế thích loại ghế như: Ghế trống, ghế chọn, ghế đặt, đường ‒ Người dùng bấm chọn ghế trống, sau bấm chọn ghế chọn chuyển sang màu đỏ ‒ Bên hiển thị tên giá ghế chọn tổng tiền ‒ Người dùng bấm nút “Chọn bắp nước” để chuyển đến bước chọn bắp nước 145 Hình 4.68 Màn hình “Đặt vé” (Chọn bắp nước) ‒ Ở bước chọn bắp nước, hình hiển thị danh sách combo có ‒ Người dùng bấm tăng giảm số lượng sản phẩm muốn chọn ‒ Người dùng bấm nút “Chọn ghế” để chuyển bước trước chọn ghế bấm nút “Thanh toán” để chuyển qua hình Thanh tốn 146 Hình 4.69 Màn hình “Đặt vé” (Thanh toán ) ‒ Ở bước toán, hình hiển thị thơng tin đặt vé bao gồm: Tên phim, suất chiếu, danh sách tên giá ghế chọn, danh sách tên, giá số lượng chọn, tổng tiền ‒ Người dùng bấm nút “Chọn bắp nước” để chuyển bước trước chọn bắp nước bấm nút “Xác nhận tốn” để hồn thành đặt vé 147 Hình 4.70 Màn hình “Đặt vé” (Thanh tốn thành công) ‒ Sau người dùng bấm nút “Xác nhận tốn” hiển thị tốn thành cơng ‒ Người dùng bấm nút “Đặt vé mới” để trở trang lịch chiếu đặt vé khác, người dùng chuyển trang chủ cách bấm nút “Về trang chủ” 148 Chương TỔNG KẾT 5.1 Ưu điểm ‒ Hoàn thành chức cần thiết theo kế hoạch nhóm đề trước Ngồi ra, nhóm thực thêm tính thơng báo thời gian thực cho chức bình luận phim, cho phép người dùng tương tác với người dùng khác cách dễ dàng, nhanh chóng ‒ Giao diện thân thiện, dễ sử dụng, có hỗ trợ responsive nhiều kích thước hình Trang admin hướng tới mục đích quản lý, thống kê chính, thiết kế tối giản Trang client nhằm phục vụ khách hàng đặt vé nên thiết kế với bố cục đa dạng, ngồi cịn cho phép người dùng thay đổi linh hoạt hai chế độ sáng tối (dark mode/light mode) Một số chức trang client cho phép người dùng sử dụng mà không cần đăng nhập nhằm phục vụ khách hàng vãng lai trang web ‒ Dễ dàng quản lý ghế có rạp Ngồi loại ghế ghế đơn, ghế đơi, trang web cịn cho phép thêm đường xong sơ đồ ghế rạp nhằm tăng tính trực quan, xác, giúp người dùng dễ hình dung trình đặt vé Đối với người quản trị (Trang admin), hệ thống cho phép kéo chọn nhiều ghế để người dùng nhanh chóng chỉnh sửa loại ghế ‒ Có hỗ trợ xuất file Excel cho báo cáo doanh thu rạp File Excel điều chỉnh bố cục phù hợp với liệu 5.2 Nhược điểm ‒ Chưa xử lý đặt vé thời gian thực, người dùng chọn ghế giống Trong trường hợp nhiều người dùng đặt vé, hệ thống xử lý đặt vé người dùng gửi yêu cầu gửi thông báo lỗi đến người dùng cịn lại Khi đó, người dùng cần tải lại trang để thấy tình trạng ghế ‒ Lượt xem viết tính theo số lượt truy cập viết Do đó, lần người dùng nhấn xem viết, lượt xem viết tăng lên dẫn đến thiếu 149 tính xác việc tính tốn Thực tế, lượt xem yếu tố quan trọng, hệ thống cần xem xét đến yếu tố khác thời lượng xem viết, định danh người dùng hay chí địa IP người dùng 5.3 Hướng phát triển ‒ Thêm chức quản lý chương trình ưu đãi cho phép người dùng áp dụng ưu đãi Điều giúp tăng cạnh tranh trang web so với sản phẩm có thị trường ‒ Xây dựng hệ thống chat trực tuyến hỗ trợ khách hàng Đây chức tiện lợi khách hàng có thời gian rảnh Khách hàng khơng cần bỏ nhiều thời gian để tìm hiểu phim phù hợp với thân lịch chiếu phim Bằng cách nhắn tin trực tiếp với nhân viên tư vấn, khách hàng dễ dàng nắm bắt thơng tin lịch chiếu phim để đặt vé cho phù hợp ‒ Tích hợp chức tốn online Đây tính quan trọng ứng dụng thương mại điện tử nói chung trang web đặt vé xem phim nói riêng ‒ Dựa vào liệu bình luận đánh giá phim để gợi ý phim phù hợp cho người dùng Hệ thống gợi ý góp phần tăng trải nghiệm sử dụng người dùng ‒ Xử lý đặt vé thời gian thực Đặt vé tính quan trọng trang web, việc triển khai chức đặt vé thời gian thực, giảm thiểu sai sót cần thiết ‒ Tối ưu hóa giao diện người dùng hiệu suất trang web Khi chức trang web đảm bảo, giao diện tốc độ xử lý trang web yếu tố quan trọng để thu hút người dùng 150 TÀI LIỆU THAM KHẢO [1] "NextJs," [Online] Available: https://nextjs.org/ [Accessed 25 2023] [2] "Material UI," [Online] Available: https://mui.com/ [Accessed 25 2023] [3] "TailwindCSS," [Online] Available: https://tailwindcss.com/ [Accessed 25 2023] [4] "NodeJs," [Online] Available: https://nodejs.org/en [Accessed 25 2023] [5] "ExpressJs," [Online] Available: https://expressjs.com/ [Accessed 25 2023] [6] "MongoDB," [Online] Available: https://www.mongodb.com/ [Accessed 25 2023] [7] "mongoose," [Online] Available: https://mongoosejs.com/ [Accessed 25 2023] [8] "CGV," [Online] Available: https://www.cgv.vn/ [Accessed 25 2023] [9] "Galaxy Cinema," [Online] Available: https://www.galaxycine.vn/ [Accessed 25 2023] [10] "React," Meta, [Online] Available: https://react.dev/ [Accessed 25 2023] [11] "BHD Star," [Online] Available: https://www.bhdstar.vn/ [Accessed 25 2023] [12] "Lotte Cinema," [Online] Available: https://www.lottecinemavn.com/LCHS/index.aspx# [Accessed 25 2023] 151