ĐỒ án WEBSITE GIỚI THIỆU và đặt vé XEM 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 HUỲNH TẤN HOÀNG – 17520508 NGUYỄN DUY TÂN – 17521014 ĐỒ ÁN WEBSITE GIỚI THIỆU VÀ ĐẶT VÉ XEM PHIM GIẢNG VIÊN HƯỚNG DẪN THẦY HUỲNH NGUYỄN KHẮC HUY TP HỒ CHÍ MINH, 2021 LỜI CẢM ƠN Lời đầu tiên, chúng em xin bày tỏ lòng biết ơn sâu sắc đến thầy Huỳnh Nguyễn Khắc Huy – Giảng viên hướng dẫn chúng em thực đề tài môn Đồ án 2, thầy đồng hành tận tình hướng dẫn cho chúng em qua giai đoạn đồ án Nhờ có giúp đỡ nhiệt tình thầy mà chúng em có thể hoàn thành được đồ án cách tốt Vì kiến thức chúng em vẫn cịn hạn hẹp nên khơng thể tránh khỏi thiếu sót trình thực đồ án Tuy nhiên, chúng em cố gắng hoàn thành hạn hạn chế lỗi nhiều có thể Nhóm chúng em mong đợi nhận ý kiến đóng góp quý báu từ thầy qua đó có thể rút kinh nghiệm, tự sửa chữa, hồn thiện thân tinh thần nghiêm túc, tự giác học hỏi Trong trình làm đề tài báo cáo, tránh khỏi thiếu sót, mong nhận phản hồi từ thầy bạn để góp phần làm cho báo cáo thêm hoàn thiện Chân thành cảm ơn thầy! MỤC LỤC Chương MỞ ĐẦU .1 1.1 Lí chọn đề tài 1.2 Mục tiêu nghiên cứu .1 1.3 Phương pháp nghiên cứu .2 1.4 Đối tượng hướng đến Chương GIỚI THIỆU REACTJS .3 2.1 Tổng quan ReactJS 2.1.1 Giới thiệu 2.1.2 Các đặc trưng ReactJs 2.1.2.1 JSX 2.1.2.2 Component 2.1.2.3 State 2.2 Lí chọn lựa Chương MỘT SỐ THƯ VIỆN SỬ DỤNG .5 3.1 Bootstrap 3.1.1 Giới thiệu 3.1.2 Ưu điểm 3.2 Redux: 3.2.1 Khái niệm: 3.2.2 Cấu trúc: .6 3.2.3 Nguyên lý hoạt động Redux: 3.2.4 nguyên tắc Redux: 3.3 Hook: 3.3.1 Giới thiệu React Hooks: 3.3.2 Basic Hooks: .7 3.3.3 Additional Hooks 3.4 Axios: 3.4.1 Khái niệm: 3.4.2 Đặc điểm Axios: 3.4.3 Các thao tác với Request sử dụng Axios: Chương XÂY DỰNG WEBSITE ĐẶT VÉ XEM PHIM 11 4.1 Phạm vi ứng dụng .11 4.2 Các chức 11 4.2.1 Về phía Admin 11 4.2.2 Về phía người mua vé 11 4.3 Phân tích thiết kế 11 4.3.1 Lược đồ phân tích chức 11 4.3.2 Bảng mô tả chức 12 4.3.3 Sơ đồ Use Case 13 4.3.3.1 Use case Admin 13 4.3.3.2 Use case người dùng 14 4.3.4 Lược đồ API cho Website: 15 4.4 Các hình cho chức 15 4.4.1 Giao diện cho Admin .15 4.4.2 Mô tả cho hình Admin 16 4.4.3 Giao diện cho User thông thường 20 4.4.3.1 Màn hình chính: 20 4.4.3.2 Màn hình đăng nhập: 21 4.4.3.3 Màn hình đăng ký tài khoản 22 4.4.3.4 Màn hình chọn lịch chiếu phim .23 4.4.3.5 Màn hình đặt ghế ngồi 23 4.4.3.6 Màn hình lịch sử đặt vé: 24 4.4.4 Mơ tả hình chức 24 4.4.4.1 Màn hình 24 4.4.4.2 Màn hình đăng nhập 27 4.4.4.3 Màn hình đăng ký tài khoản: 27 4.4.4.4 Màn hình chọn lịch chiếu 28 4.4.4.5 Màn hình chọn ghế ngồi 29 4.4.4.6 Màn hình xem lịch sử đặt vé: 30 Chương CÀI ĐẶT 30 5.1 Hướng dẫn cài đặt 30 Chương KẾT LUẬN 31 6.1 Phân công công việc 31 6.2 Kết thu 31 6.3 Khó khăn gặp phải 32 6.4 Hướng phát triển tương lai 32 DANH MỤC HÌNH Hình 4.1 Sơ đồ phân cấp chức 12 Hình 4.2 Use case Admin 13 Hình 4.3 Sơ đồ Use case cho khách hàng 14 Hình 4.4 Giao diện quản lý thông tin người dùng 15 Hình 4.5 Giao diện thêm phim 15 Hình 4.6 Giao diện cho chức Quản lý lịch chiếu phim 16 Hình 4.7 Phần đặt vé nhanh danh sách phim 20 Hình 4.8 Header hình 20 Hình 4.9 Phần liên hệ hỗ trợ, Copyright,… 21 Hình 4.10 Phần giới thiệu phim chiếu .21 Hình 4.11 Màn hình đăng nhập .22 Hình 4.12 Màn hình đăng ký 22 Hình 4.13 Màn hình chọn lịch chiếu phim 23 Hình 4.14 Màn hình đặt ghế ngồi 23 Hình 4.15 Màn hình sau đặt ghế 24 Hình 4.16 Màn hình xem lịch sử đặt vé 24 DANH MỤC BẢNG Bảng 4.1 Mô tả chức website 13 Bảng 6.1 Phân công công việc .31 Chương MỞ ĐẦU 1.1 Lí chọn đề tài Trong sống bận bịu nay, nhu cầu giải trí khơng thể thiếu với người dân Có nhiều hình thức giải trí khác khu vui chơi giải trí, trị chơi điện tử, xem phim, nghe nhạc,… Mỡi hình thức có tầm quan trọng riêng tuỳ thuộc vào sở thích nhu cầu giải trí khác mỗi người Trong đó nhu cầu xem phim giải trí vơ phổ biến nhiều người chọn mỗi họ có dịp nghỉ ngơi thư giãn người thân, bạn bè,… Với việc kỹ xảo, kỹ thuật điện ảnh ngày phát triển tương lai việc xem phim ngày thu hút nhiều người Và qua đó rạp chiếu phim, hãng phim, trang web đặt vé ngày phát triển theo Trong tương lai với tầm quan trọng phát triển loại hình giải trí xem phim kéo theo khả phát triển website liên quan đến việc hỡ trợ hình thức cho loại hình giải trí đặt vé xem phim,… Nhận điều đó nên nhóm chúng em định chọn đề tài là: “Website giới thiệu đặt vé xem phim” với mục đích giúp đỡ người dùng có thể tham khảo lịch chiếu phim mà họ mong muốn xem, phim chiếu, tin tức phim để người có thể tham khảo đặt vé rạp phim theo lịch mong muốn để có thời gian thư giãn cho thân với gia đình, người thân họ 1.2 Mục tiêu nghiên cứu Dựa vào thư viện phát triển phổ biến tương lai cho thư viện phát triển Website sau đó ReactJS, phát triển quan trọng Website hỗ trợ đặt vé thông tin phim cho người dùng Mục tiêu đồ án tìm hiểu thư viện ReactJS để phát triển Website hỗ trợ đặt vé giới thiệu phim với khả cập nhật thông tin vé cung cấp thông tin phim cách nhanh chóng xác đến người dùng Nhóm chúng em dựa vào thư viện có ReactJS để dựng giao diện tận dụng API cung cấp để có thể lấy liệu Website Cụ thể em dùng thành phần ReactJS Function Component Class Component để xây dựng giao diện tận dụng thư viện Bootstrap làm CSS cho giao diện, sử dụng số thư viện JS để quản lý state Redux,… Và thông qua API cung cấp để lấy data cho trang Web 1.3 Phương pháp nghiên cứu Để hoàn thành đồ án nhóm chúng em tham khảo kiến thức thư viện ReactJS thông qua diễn đàn, trang chia sẻ kiến thức document thư viện ReactJS để có lượng kiến thức cần thiết để hoàn thành đồ án Ngoài nhóm chúng em tham khảo trang Web giới thiệu đặt vé xem phim thị trường để có thể rút thiếu sót, kinh nghiệm chức có trang Web giới thiệu đặt vé xem phim để có thể vận dụng cho đồ án Sau đó nhóm chúng em tiến hành lên kế hoạch cho đồ án cách thiết kế sơ đồ, thiết kế API cho sở liệu tiến hành thực hoá đồ án 1.4 Đối tượng hướng đến Đối tượng hướng đến đồ án rạp chiếu phim có cung cấp API cho bên phát triển bên để phát triển trang Web giới thiệu đặt vé xem phim có thể phát triển dự án để giúp cho khách hàng rạp phim có thể tìm vé nhiều nơi khác Đây hướng phát triển phổ biến nhiều bên phát triển Website giới thiệu đặt vé xem phim sử dụng với kinh phí sử dụng API không cao thông qua API Website có thể lấy đầy đủ thông tin cần thiết để cung cấp khả đặt vé cho người dùng quảng bá lịch chiếu phim rạp phim rộng rãi hơn, giúp người dùng có nhiều lựa chọn muốn tìm đặt vé xem phim Chương GIỚI THIỆU REACTJS 2.1 Tổng quan ReactJS 2.1.1 Giới thiệu ReactJS thư viện JavaScript phát triển Facebook nhằm để xây dựng giao diện người dùng (UI) theo kiến trúc components ReactJS xây dựng theo chuẩn SPAs (Single Page Application) nghĩa trang web không bị load lại có chuyển đổi qua lại component 2.1.2 Các đặc trưng ReactJs 2.1.2.1 JSX Nó phần mở rộng cú pháp cho JavaScript, jsx cho phép kết nối HTML JavaScript source 2.1.2.2 Component Các đặc điểm component: - Hoạt động giống hàm trả thành phần HTML - Các component thành phần độc lập có thể tái sử dụng lại nhiều lần - Các component thực công việc giống functions JavaScript chúng độc lập nhiệm vụ trả HTML thơng qua hàm render Có loại component: - Stateless Component (functional component): thực chất function có nhiệm vụ return đoạn mã HTML hiển thị giao diện - Stateful Component (class component): class có chứa phương thức render() Khi component gọi, hàm render chạy trả nội dung HTML bên 4.4.3 Giao diện cho User thơng thường 4.4.3.1 Màn hình chính: Hình 4.7 Header hình Hình 4.8 Phần đặt vé nhanh danh sách phim 21 Hình 4.9 Phần giới thiệu phim chiếu Hình 4.10 Phần liên hệ hỗ trợ, Copyright,… 4.4.3.2 Màn hình đăng nhập: 22 Hình 4.11 Màn hình đăng nhập 4.4.3.3 Màn hình đăng ký tài khoản Hình 4.12 Màn hình đăng ký 4.4.3.4 Màn hình chọn lịch chiếu phim Hình 4.13 Màn hình chọn lịch chiếu phim 23 Hình 4.15 Màn hình sau đặt ghế 4.4.3.5 Hình 4.14 Màn hình đặt ghế ngồi Màn hình đặt ghế ngồi 24 4.4.3.6 Màn hình lịch sử đặt vé: Hình 4.16 Màn hình xem lịch sử đặt vé 4.4.4 Mơ tả hình chức 4.4.4.1  Màn hình Phần Header: - Đây hình xuất người dùng mở trang Web MovieStar - Trên phần header với logo trang Web nằm phía tay trái, phần góc phải phần hiển thị tên đăng nhập (nếu người dùng có đăng nhập) kế bên dropdown button để người dùng có thể chọn thao tác xem lịch sử đặt vé logout tài khoản - Phía góc phải menu gồm phần là: + Home + News + What’s On + Login 25 + Signup - Phần Home điều hướng người dùng quay trở lại trang chủ Website - Phần News điều hướng đến phần xem tin tức phim chiếu trang chủ - Phần What’s On để điều hướng người dùng đến danh sách phim có lịch chiếu trang chủ Website - Phần Login để điều hướng người dùng đến trang đăng nhập để người dùng đăng nhập vào tài khồn tạo để có thể thực thao tác đặt vé Nếu người dùng Login phần bị disable - Phần Signup dùng để điều hướng người dùng đến trang đăng ký tài khoản để người dùng tạo tài khoản đăng nhập vào Website để có thể thực thao tác đặt vé  Phần What’s On: - Phần What’s On (New in) trang chủ nơi hiển thị phim có lịch chiếu rạp phim - Thông tin chia thành hàng với nội dung xếp theo lịch chiếu từ đến cũ Phần nội dung bao gồm tên phim hình ảnh để poster phim Người dùng có thể sử dụng nút mũi tên để cỏ thể di chuyển danh sách phim tìm phim cần đặt vé - Nếu tìm phim người dùng có thể rê chuột vào ô phim có tuỳ chọn ô đó bao gồm: + Ngày khởi chiếu + Nút để mở trailer phim + Nút đặt vé - Ngày khởi chiếu cung cấp cho người dùng ngày phim rạp để người dùng có thể canh đặt vé 26 - Khi ấn vào nút mở trailer phim có popup để người dùng có thể xem đoạn trailer giới thiệu phim - Khi ấn nút đặt vé người dùng điều hướng đến trang đặt vé để có thể tiến hành chọn rạp, lịch chiếu để tiến hành đặt vé  Phần News (Coming soon): - Đây phần hiển thị thông tin, poster phim mắt để người dùng có thể xem thông tin - Trong phần giao diện phần bao gồm phần: + Phần thông tin phim + Phần video trailer phim + Các poster phim - Phần thông tin phim cung cấp cho người dùng thông tin liên quan đến phim như: Ngày khởi chiếu, tên phim,… - Phần trailer phim người dùng ấn vào popup phần định danh trailer phim danh sách lịch chiếu để người dùng có thể xem - Phần poster phim cung cấp hình ảnh poster thức để giới thiệu cho phim mắt  Phần Contact – Support: - Hiện người dùng có thể contact qua số điện thoại Website để có thể phản hồi thông tin góp ý hay hỏi đáp dịch vụ - Và bên có số thông tin thêm giới thiệu Website, contact, Copyright,… để người dùng liên lạc, xem thơng tin Website,… 27 4.4.4.2 - Màn hình đăng nhập Đây hình điều hướng đến người dùng chưa đăng nhập ấn chọn phần Login header trang chủ - Khi người dùng điều hướng đến trang có form đăng nhập để người dùng điền thông tin đăng nhập, người dùng đăng nhập theo tài khoản mà tạo Website Thông tin đăng nhập bao gồm phần là: + Username: Là phần tên tài khoàn đăng ký phần đăng ký tài khoản + Password: Là phần mật tài khoản đăng ký phần đăng ký tài khoản - Sau điền đầy đủ thơng tin người dùng có thể ấn nút Login điều hướng quay trở lại trang chủ, thông tin đăng nhập người dùng hiển thị góc phải hình trang chủ 4.4.4.3 - Màn hình đăng ký tài khoản: Đây hình người dùng ấn vào phần Signup header trang chủ Sử dụng người dùng chưa có tài khoản muốn đăng ký tài khoản - Khi người dùng direct đến trang đăng ký thấy form có thể điền thông tin cần thiết để tạo tài khoản đăng nhập - Các thông tin form bao gồm: + Tên tài khoản + Mật + Họ tên + Email 28 + Số điện thoại - Tên tài khoản phần Password thông tin dùng cho form đăng nhập - Họ tên, email số điện thoại thông tin cần thiết để kiểm tra thông tin, nhận phản hồi liện hệ cho người dùng có việc cần - Phần form dạng đăng ký tài khoản thông qua dạng tài khoản mạng xã hội hướng phát triển tương lai cho người dùng để có thể đa dạng lựa chọn tạo tài khoản cho người dùng 4.4.4.4 - Màn hình chọn lịch chiếu Đây hình direct đến người dùng ấn vào nút “Buy” ô phim trang chủ - Màn hình gồm phần chính: + Poster phim + Các thông tin phim + Bảng lịch chiếu để người dùng có thể chọn rạp phim lịch chiếu, ngày xem - Phần Poster phim hình ảnh Poster thức phim để có thể hiển thị cho người dùng xem - Phần mô tả phim gồm thông tin cần thiết để người dùng có thể đọc thông tin liên quan đến phim Các thông tin bao gồm: + Tên phim + Mô tả cho phim + Ngày khởi chiếu 29 - Với thơng tin người dùng có thể nắm đầy đủ thơng tin cần biết phim dự định đặt vé - Bảng thông tin lịch chiếu gồm phần chính: + Phần chọn rạp chiếu phim + Sau chọn rạp người dùng có thể chọn ngày xem + Sau chọn ngày xem người dùng có thể chọn lịch chiếu theo khung hiển thị phần bên phải bảng - Sau chọn lịch chiếu mà người dùng muốn xem người dùng điều hướng đến trang chọn ghế - Người dùng có thể ấn vào logo góc trái Header để có thể điều hướng quay ngược lại trang chủ 4.4.4.5 - Màn hình chọn ghế ngồi Đây hình direct đến sau người dùng hoàn thành việc chọn lịch chiếu hình chọn lịch chiếu - Trong hình gồm phần chính: + Phần bên trái phần để người dùng có thể chọn ghế muốn đặt + Phần bên phải thơng tin để người dùng có thể xem như: Tổng tiền, tên rạp chọn, ngày xem lịch chiếu, ghế, button để đặt ghế - Trong phần chọn ghế người dùng có thể chọn loại ghế vip ghế thường Ghế vip tô màu vàng ghế thường có màu đen - Các ghế có người đặt có màu đỏ dấu x để đánh dấu người dùng chọn ghế - Phần tổng tiền lên tổng tiền theo số ghế đặt theo giá ghế Ghế thường có giá 75k, ghế vip 90k 30 - Sau người dùng chọn xong ghế người dùng có thể ẩn nút “Đặt vé” để có thể chốt vé toán vé đặt Sau đặt tốn thành cơng có popup lên để thông báo cho người dùng đặt vé thành công - Sau hồn thành việc đặt vé ghế mà người dùng chọn chuyển thành màu đỏ có chữ “x” ký hiệu Và đồng thời người dùng chọn lại ghế đó - Và điều quan trọng người dùng phải đăng nhập có thể đặt ghế, người dùng không đăng nhập khơng thể đặt ghế 4.4.4.6 - Màn hình xem lịch sử đặt vé: Đây hình điều hướng tới người dùng đăng nhập chọn phần “Booking history” phần Dropdown button hiển thị sau đăng nhập - Trong trang có bảng để hiển thị thông tin cho người dùng có thể xem lại lịch sử đặt vé mà đặt trước Lịch xếp theo thứ tự từ cũ đến - Trong bảng bao gồm thông tin như: + ID: Là mã để nhận diện lịch sử + Ngày đặt vé: Đây ô hiển thị thông tin ngày mà người dùng đặt tương ứng với ID + Tên phim: Đây ô chứa tên phim người dùng đặt vé tương ứng với ID + Tổng tiền tốn: Đây chứa giá trị tổng số tiền mà người dùng toán tương ứng với số vé đặt giá vé theo loại ghế đặt + Độ dài phim: Đâ ô chứa thông tin độ dài phim tương ứng với phim mà người dùng đặt vé 31 + Danh sách ghế đặt: Đây ô hiển thị danh sách ghế mà người dùng đặt với thông tin bao gồm: Rạp chiếu, số ghế Chương CÀI ĐẶT 5.1 Hướng dẫn cài đặt - B1: Clone code máy với link: - https://github.com/hoang17520508/reactmovie B2: Trong folder reactmovie gõ lệnh “npm install” để cài đặt - module B3: Dùng lệnh “npm start” để run web localhost B4: Trải nghiệm ứng dụng trình duyệt Chương KẾT LUẬN 6.1 Phân công công việc Công việc Thực Tìm hiểu kiến thức cần thiết sử dụng Cả nhóm cho đồ án Thiết kế giao diện website Cả nhóm Giao diện phần header Tân Giao diện phần footer Tân Giao diện danh sách phim Tân Silde giới thiệu phim Hoàng Phim chiếu Hoàng Giao diện trang đăng nhập, đăng ký Tân Giao diện thông tin lịch chiếu Hoàng Giao diện trang lịch sử đặt vé Tân Giao diện trang đặt ghế Hoàng Giao diện trang admin Tân, Hồng Xử lí chức Hồng Bảng 6.2 Phân công công việc 32 6.2 Kết thu Qua trình nhóm chúng em làm việc để phát triển đồ án môn học Website giới thiệu đặt vé xem phim nhóm em thu số kết định - Về phần tìm hiểu: Nhóm em biết thêm thư viện mạnh tương lai phát triển Javascript đó ReactJS Đồng thời nhóm em biết thêm nghiệp vụ trang Web giới thiệu đặt vé xem phim thực tế để có thể rút kinh nghiệm học tập sử dụng cho sau - Về phần ứng dụng: Nhóm em nắm cách làm việc với project React sử dụng API, Component để thiết lập giao diện, tương tác database cho Website - Về phần vận dụng: Nhóm em nắm cách để sử dụng component ReactJS biết số thư viện có React Javascript Hooks, Redux, Axios, Formik,… Ngồi nhóm cịn biết nơi tận dụng API thực thi thao tác với data backend để lấy thông tin phim vé xem phim cho Website 6.3 - Khó khăn gặp phải Do nhóm có thành viên lần tiếp xúc với thư viện ReactJS nên bỡ ngỡ với cú pháp làm việc với Component - Do lần đầu tiếp xúc nên vẫn chưa biết nhiều việc tìm, đọc hiểu tài liệu, thư viện Ngồi khó khăn việc vận dụng tài liệu đọc vào ứng dụng cho đồ án - Vị trí địa lý thành viên xa nên khó khăn việc liên lạc để giúp đỡ đồ án 33 - Một số hỗ trợ từ cộng đồng, diễn đàn chưa hiệu khiến cho có lỡi nhóm tìm hiểu nguyên nhân cách khắc phục gặp nhiều trở ngại 6.4 Hướng phát triển tương lai Hoàn thiện Website giới thiệu đặt vé xem phim: + Cải thiện tốc độ phản hồi từ Website + Nâng cấp giao diện ngày đẹp phù hợp với thời điểm + Quảng bá rộng rãi đến rạp phim người dùng khác để có thể trở thành Website uy tín hướng đến Website độc quyền thức cho việc giới thiệu đặt vé xem phim cho rạp phim + Kết nối với đa dạng cổng toán khác để người dùng có nhiều lựa chọn mua vé Website + Tự hoàn thiện quản trị hệ thống database Website + Nâng cấp server tốt để đáp ứng tốt nhu cầu người dùng + Phát triển thêm ứng dụng tảng di động để người có thể dễ dàng sử dụng có nhiều nơi để đặt vé + Cho phép người dùng có thể đánh giá phim sau xem xong + Thêm tính đặt vé nhanh để người dùng có thể đặt vé nhanh chóng giảm thao tác đặt vé + Cho phép người dùng đăng nhập từ dạng tài khoản Google, Facebook,… + Mở rộng thêm kênh để người dùng có thể phản hồi thông tin thông qua thêm nhiều mạng xã hội, email,… 34 TÀI LIỆU THAM KHẢO Nhóm chúng em có tham khảo từ trang Document ReactJS, diễn đàn nước Viblo, Medium Ngồi nhóm cịn tham khảo solution, source code từ trang Stackoverflow, Github https://stackoverflow.com https://viblo.asia https://github.com https://reactjs.org https://medium.com 35 ... hoàn thành đồ án Ngồi nhóm chúng em cịn tham khảo trang Web giới thiệu đặt vé xem phim thị trường để có thể rút thiếu sót, kinh nghiệm chức có trang Web giới thiệu đặt vé xem phim để có... Chương XÂY DỰNG WEBSITE ĐẶT VÉ XEM PHIM 4.1 Phạm vi ứng dụng Website chúng em hướng đến việc làm trung gian rạp chiếu phim người mua vé Hỗ trợ người dùng đặt vé xem phim rạp chiếu phim người dùng... phát triển website liên quan đến việc hỗ trợ hình thức cho loại hình giải trí đặt vé xem phim, … Nhận điều đó nên nhóm chúng em định chọn đề tài là: ? ?Website giới thiệu đặt vé xem phim? ?? với