Bài tập lớn Thiết kế Website chủ đề quản lí web bán vé xem phim, môn thiết kế web của sinh viên, Chúng em xin gửi lời cảm ơn chân thành đến thầy Lại Mạnh Dũng giảng viên môn Thiết kế website trường Đại học Giao thông Vận tải đã trang bị giúp chúng em những kỹ năng cơ bản và kiến thức cần thiết để hoàn thành được bài báo cáo và dự án frontend này. Tuy nhiên, quá trình làm bài báo cáo tìm hiểu của chúng em còn hạn chế nên không thể tránh khỏi một vài thiếu sót khi trình bày và đánh giá vấn đề. Rất mong nhận được sự góp ý, đánh giá của các thầy cô bộ môn để bài báo cáo của chúng em thêm hoàn thiện hơn.
TRƯỜNG ĐẠI HỌC GIAO THÔNG VẬN TẢI KHOA ĐÀO TẠO QUỐC TẾ - INED - Bài tập lớn môn học THIẾT KẾ WEBSITE Đề tài: Website quản lý bán vé xem phim Giáo viên hướng dẫn : Lại Mạnh Dũng Sinh viên thực : Nguyễn Hải Nam(222621028) : Lê Tấn Tài (222621109) : Phạm Văn Hải(222621098) : Nguyễn Văn Hiếu (222622012) Lớp : Công nghệ thông tin Việt – Anh Khóa : 62 Hà Nội, 10 - 2022 LỜI CẢM ƠN Chúng em xin gửi lời cảm ơn chân thành đến thầy Lại Mạnh Dũng giảng viên môn Thiết kế website trường Đại học Giao thông Vận tải trang bị giúp chúng em kỹ kiến thức cần thiết để hoàn thành báo cáo dự án front-end Tuy nhiên, trình làm báo cáo tìm hiểu chúng em cịn hạn chế nên khơng thể tránh khỏi vài thiếu sót trình bày đánh giá vấn đề Rất mong nhận góp ý, đánh giá thầy cô môn để báo cáo chúng em thêm hoàn thiện Chúng em xin chân thành cảm ơn! MỤC LỤC LỜI CẢM ƠN MỤC LỤC DANH MỤC HÌNH ẢNH DANH MỤC BẢNG BIỂU PHẦN I: ĐỀ TÀI PHẦN II: KHẢO SÁT PHÂN TÍCH Tìm hiểu website có chủ đề a) Galacine.vn b) Netflix Trình bày đối tượng sử dụng .8 Trình bày chức cho đối tượng .9 a) Xem trailer b) Chức đặt vé 11 c) Chức toán .11 PHẦN III: THIẾT KẾ 13 Use-case diagram .13 Sitemap .14 Wireframe 15 a) Home 15 b) Cinemas 16 c) Movies 17 d) Về .18 e) Đăng nhập 19 f) Ticket 19 g) Book 19 PHẦN IV: TRIỂN KHAI 20 iMovies Cinema Page | 1 Cấu trúc thư mục dự án 20 a) Cấu trúc chung 20 b) Giải thích lý sử dụng cấu trúc .20 Giải thích giao diện thu 20 a) Layout 20 b) Home 20 c) Rạp 20 d) Phim 21 e) Ticket 21 f) Book 21 g) Đăng kí/ Đăng nhập 21 h) Responsive .21 PHẦN V: KIỂM THỬ .21 Mục tiêu phát lỗi trình thiết kế 21 a) Mục tiêu chung 21 b) Mục tiêu cụ thể 21 Cách thức xây dựng test case link, effect, data validation 21 a) Test case link 21 b) Data validation 21 PHẨN VI TỰ ĐÁNH GIÁ .21 Bảng điểm tự đánh giá 21 Bảng điểm nhóm đánh giá cho cá nhân 22 iMovies Cinema Page | DANH MỤC HÌNH Ả Hình 1 Galacine.vn Hình Galacine.vn Hình Netflix Hình Chức xem trailer 10 Hình Chức đặt vé 11 Hình Chức tốn 12 Y Hình Use-case diagram 13 Hình 2 Site map 14 Hình Wireframe home 15 Hình Wireframe cinemas .16 Hình Wireframe movies 17 Hình Wireframe about us 18 Hình Wireframe login/signup 19 Hình Wireframe ticket 19 Hình Wireframe book 19 Hình Cấu trúc thư mục dự án 20 Hình Layout 20 Hình 3 Home 20 Hình Rạp 20 Hình Phim 21 Hình Về 21 Hình Ticket 21 Hình Book 21 Hình Đăng kí/ Đăng nhập 21 iMovies Cinema Page | DANH MỤC BẢNG BIỂU Table Tự đánh giá 45 Table Nhóm đánh giá 45 iMovies Cinema Page | PHẦN I: ĐỀ TÀI Đề tài nhóm xây dựng website mua vé xem phim Dưới tóm tắt hệ thống trang web, tổ chức file mơ tả để có nhìn tổng quan dự án a) Hệ thống trang web: Trang (Home): Trang trang mà người dùng thấy truy cập website Nó cung cấp thơng tin phim chiếu, suất chiếu ngày, tin tức liên quan đến ngành công nghiệp điện ảnh Lịch chiếu (Schedule): Trang liệt kê suất chiếu phim theo ngày Người dùng tìm kiếm chọn suất chiếu theo yêu cầu họ Chọn phim (Movies): Trang chứa danh sách phim chiếu tới Người dùng xem thơng tin phim, trailer, lịch chiếu Đặt vé (Booking): Trang cho phép người dùng chọn phim, suất chiếu, số lượng vé, chỗ ngồi Sau đó, họ tốn để hoàn tất việc đặt vé Quản lý tài khoản (Account Management): Người dùng đăng nhập đăng ký tài khoản để theo dõi lịch sử mua vé, lưu thông tin cá nhân, quản lý thông tin tài khoản b) Tổ chức file liệu: Các file HTML, CSS JavaScript tổ chức cách cẩn thận để đảm bảo tính gọn gàng dễ bảo trì Sử dụng thư viện nhúng thơng qua Content Delivery Network (CDN) để tối ưu hóa hiệu suất trang web Dữ liệu phim, lịch chiếu, tài khoản người dùng tổ chức sở liệu để dễ dàng quản lý truy xuất c) Mô tả: Giao diện trang web cung cấp tùy chọn chọn chế độ giao diện light-mode dark-mode để tạo trải nghiệm tốt cho người dùng Giao diện mặc định sử dụng dark-mode, light-mode q trình phát triển Tơng màu chủ yếu phản ánh không gian điện ảnh với việc sử dụng màu đen vàng ánh kim Nghiệp vụ hệ thống: Nghiệp vụ trang web iMovies Cinema Page | cho phép người dùng mua vé xem phim Các trang web chứa chức liên quan như: Giới thiệu phim chiếu tới Cung cấp lịch chiếu cho phép người dùng tìm kiếm suất chiếu theo ngày Cho phép người dùng xem thông tin chi tiết phim, bao gồm trailer, diễn viên, đạo diễn thể loại Đặt vé cách chọn phim, suất chiếu, số lượng vé, chỗ ngồi, sau tốn Quản lý tài khoản cá nhân, bao gồm xem lịch sử mua vé, lưu trữ thông tin cá nhân thay đổi mật Mục đích yêu cầu: Yêu cầu tối thiểu xây dựng giao diện trang web tích hợp chức Đảm bảo giao diện đẹp, rõ ràng dễ sử dụng ưu tiên hàng đầu Sau đó, nâng cấp mở rộng tính trang web để cung cấp trải nghiệm người dùng tốt Hệ thống phải hoạt động nhiều loại hình khác nhau, bao gồm điện thoại di động, máy tính bảng, laptop máy tính để bàn Điều đảm bảo người dùng truy cập sử dụng trang web thiết bị Cần phải xây dựng test case để kiểm tra bảo trì hệ thống gặp lỗi Chức phải hoạt động đáng tin cậy tình tích hợp hồn hảo với giao diện để tránh cố sử dụng PHẦN II: KHẢO SÁT PHÂN TÍCH Tìm hiểu website có chủ đề Dựa vào mục đích yêu cầu chức tối thiểu trang web tìm hiểu trang web liên quan để iMovies Cinema Page | quan sát bố cục thiết kế chức để tham khảo áp dụng Để quan sát bố cục thẻ html xem thuộc tính thẻ ta sử dụng tác vụ Inspect trình duyệt (có thể ấn F12) a) Galacine.vn Giao diện giới thiệu phim Hình 1 Galacine.vn Giao diện mơ tả phim iMovies Cinema Page | Hình Galacine.vn b) Netflix Hình Netflix Trình bày đối tượng sử dụng Về phân quyền sử dụng bao gồm phân quyền admin user Admin quản trị hệ thống nắm bắt tình hình cụ thể thay đổi mặt số lượng, có quyền them phim trình chiếu, … iMovies Cinema Page |