Báo cáo đồ án phát triển ứng dụng web đặt vé máy bay

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN  BÁO CÁO ĐỒ ÁN MÔN PHÁT TRIỂN ỨNG DỤNG WEB ĐỀ TÀI: ĐẶT VÉ MÁY BAY Lớp: Phát triển ứng dụng Web IS207.M12 Nhóm thực hiện: Nhóm 16 Thành viên nhóm: Trần Gia Nghĩa 19521901 Nguyễn Đức Anh 19521199 Mai Đăng Khương 19521714 Nguyễn Đạt Huy Hoàng 19521536 Giảng viên hướng dẫn: ThS Võ Minh Quân TP HỒ CHÍ MINH - 12/2021 Báo cáo đồ án môn Phát triển ứng dụng Web IS207.M12 LỜI CẢM ƠN Đầu tiên, nhóm chúng em xin gửi lời cảm ơn chân thành đến quý thầy cô giảng viên Trường Đại học Công nghệ thông tin – Đại học Quốc gia TP Hồ Chí Minh q thầy khoa Hệ thống Thơng tin giúp cho nhóm chúng em có kiến thức làm tảng để thực đề tài Đặc biệt, nhóm chúng em xin gửi lời cảm ơn lòng biết ơn sâu sắc tới thầy – Ths Võ Minh Quân, người hướng dẫn cho nhóm em suốt thời gian làm đề tài Thầy trực tiếp hướng dẫn tận tình, sửa chữa đóng góp nhiều ý kiến q báu giúp nhóm em hồn thành tốt báo cáo mơn học nhóm Một lần nhóm em chân thành cảm ơn thầy chúc thầy dồi sức khỏe Trong thời gian học đề tài, nhóm chúng em vận dụng kiến thức tảng tích lũy đồng thời kết hợp với việc học hỏi nghiên cứu kiến thức từ thầy cô, bạn bè nhiều nguồn tài liệu tham tham khảo Từ đó, nhóm chúng em vận dụng tối đa thu nhập để hồn thành báo cáo đồ án tốt Tuy nhiên, kiến thức chun mơn cịn hạn chế thân cịn nhiều thiếu xót kinh nghiệm thực tiễn nên nội dung báo cáo không tránh khỏi thiếu xót, nhóm em mong nhận góp ý, bảo thêm q thầy nhằm hồn thiện kiến thức để nhóm chúng em dùng làm hành trang thực tiếp đề tài khác tương lai việc học tập làm việc sau Một lần xin gửi đến thầy cô, bạn bè lời cảm ơn chân thành tốt đẹp nhất! Thành phố Hồ Chí Minh, tháng năm Trang Báo cáo đồ án môn Phát triển ứng dụng Web IS207.M12 NHẬN XÉT CỦA GIẢNG VIÊN Trang Báo cáo đồ án môn Phát triển ứng dụng Web IS207.M12 MỤC LỤC LỜI CẢM ƠN NHẬN XÉT CỦA GIẢNG VIÊN MỤC LỤC Tổng quan đề tài I 1.1 Giới thiệu đề tài 1.2 Lý chọn đề tài Kịch thiết kế xây dựng trang web II 2.1 Kịch đặt vé 2.2 Kịch đăng ký Dịch vụ chuyến bay 2.3 Kịch kiểm tra thông tin Chuyến bay 10 2.4 Kịch Check-in Online 11 III Các công nghệ sử dụng trang web 15 3.1 FrontEnd – Bootstrap 15 3.2 BackEnd – NodeJS 16 3.3 Database – MySQL 17 IV Thiết kế liệu sơ đồ lớp 17 4.1 Bảng quan hệ lớp hệ thống 18 4.1.1 Lớp chuyenbay 18 4.1.2 Lớp vemaybay 18 4.1.3 Lớp ghengoi 19 4.1.4 Lớp khachhang 19 4.1.5 Lớp dichvuchuyenbay 20 4.2 Sơ đồ tổng quát 21 4.3 Các mối liên kết sơ đồ 21 V Nhận xét kết luận 24 5.1 Nhận xét 24 5.1.1 Kết đạt 24 Trang Báo cáo đồ án môn Phát triển ứng dụng Web IS207.M12 5.1.2 Ưu điểm 24 5.1.3 Hạn chế 25 5.2 Hướng phát triển 25 VI Tài liệu tham khảo phân công công việc 25 6.1 Tài liệu tham khảo 25 6.2 Bảng phân công công việc 26 Trang Báo cáo đồ án môn Phát triển ứng dụng Web IS207.M12 I Tổng quan đề tài 1.1 Giới thiệu đề tài - Trong thời đại phát triển mạnh mẽ Internet, website bán hàng đóng góp phần vô quan trọng đời sống người, giúp người tiếp cận dễ dàng sản phẩm thay phải trực tiếp đến gian hàng Hiện tình hình dịch bệnh tuyên giảm chuyến bay mở lại nhiều người muốn mua vé máy bay làm thủ tục trực tuyến để tiết kiệm thời gian đồng thời giữ khoảng cách phòng dịch bệnh - Trong đề tài này, nhóm chọn phát triển website bán vé máy bay trực tuyến đơn giản với chức đăng ký dịch vụ, kiểm tra thông tin làm thủ tục trực tuyến, phù hợp với nhu cầu khách hàng 1.2 Lý chọn đề tài - Với mong muốn có thêm kinh nghiệm tích luỹ thực tế để hiểu mảng lập trình phát triển dự án ứng dụng web nâng cao khả làm việc nhóm Vì vậy, thành viên đồng ý tham gia phát triển website bán vé máy bay trực tuyến - Trong khuôn khổ môn Phát triển ứng dụng web, hướng dẫn thầy đóng góp ý kiến bạn, nhóm muốn nghiên cứu phát triển website để hoàn thành đồ án môn học, hiểu thêm cách Phát triển ứng dụng web rèn luyện kỹ lập trình, nghiên cứu, tu duy, làm việc nhóm, … II Kịch thiết kế xây dựng trang web 2.1 Kịch đặt vé Trang Báo cáo đồ án môn Phát triển ứng dụng Web IS207.M12 - Khi người dùng truy cập vào website, trang chủ có giao diện hình 2.1, người dùng tìm kiếm chuyến bay chiều với thành phố mà nhóm chọn để làm bao gồm Hồ Chí Minh, Hà Nội, Đã Nẵng, Hải Phịng, Phú Quốc Nhóm tạo sở liệu chuyến bay từ địa điểm ngày từ 01/01/2022 đến ngày 20/01/2022 Trang chủ có button bao gồm CHUYẾN BAY CỦA TÔI, CHECK-IN ONLINE, DỊCH VỤ CHUYẾN BAY để người dùng điều hướng trang web sang dịch vụ liên quan Ngồi người dùng chọn địa điểm khởi hành địa điểm đến select option ngày khởi hành bấm nút tìm chuyến bay để tìm kiếm chuyến bay dựa thơng tin chọn Hình 2.1: Trang chủ website bán vé máy bay - Sau chọn chuyến chuyến bay cần tìm, người dùng bấm Tìm chuyến bay chuyển tiếp đến giao diện kết tìm kiếm chuyến bay hình 2.2 lựa chọn chuyến bay tuỳ theo khung với giá vé mong muốn Giao diện hình 2.2 bao gồm button Quay lại để người dùng trở trang chủ trước Tiếp tục để tiến hành điền thông tin cá nhân tốn Ngồi kết tìm kiếm chuyến bay cho phép người dùng xem chuyến bay nhập Trang Báo cáo đồ án môn Phát triển ứng dụng Web IS207.M12 thêm kết ba ngày để người dùng thoải mái lựa chọn ngày bay khác muốn Hình 2.2: Kết tìm kiếm chuyến bay trả theo thơng tin nhập - Một lựa chọn xong chuyến bay chọn Tiếp tục, người dùng điền thơng tin cá nhân hình 2.3 bao gồm Họ tên, số điện thoại, email, … lựa chọn hai hình thức tốn: o Thanh tốn phòng vé: Người dùng nhận vé tốn phịng vé Người dùng cần khai báo họ tên số điện thoại phòng vé để nhân viên tiến hành toán o Thanh toán địa quý khách yêu cầu: Vé gửi đến địa mà người dùng nhập nhân viên giao vé tiến hành toán tận nơi Trang Báo cáo đồ án môn Phát triển ứng dụng Web IS207.M12 Hình 2.3: Người dùng nhập thơng tin cá nhân - Khi người dùng hồn tất bước bấm button Xác nhận, trang web thông báo kết đặt vé thành công với thông tin người dùng nhập Mã đặt chỗ hình 2.4 (Người dùng cần ghi lại Mã đặt chỗ để làm thủ tục Check-in Online đặt thêm Dịch vụ chuyến bay) Trang Báo cáo đồ án môn Phát triển ứng dụng Web IS207.M12 Hình 2.4: Kết đặt vé máy bay thành công 2.2 Kịch đăng ký Dịch vụ chuyến bay - Một người dùng đăng ký chuyến bay thành công nhận Mã đặt chỗ, người dùng truy cập phần Dịch vụ chuyến bay trang chủ nhập thông tin Họ tên với Mã đặt chỗ hình 2.5 để tiếp tục tiến hành đăng ký dịch vụ kèm theo Hình 2.5: Nhập thơng tin để tiến hành đăng ký dịch vụ - Sau bấm button Tiếp theo, giao diện hình 2.6, người dùng chọn mua thêm số ký cho hành lý theo bảng giá có sẵn mua thêm suất ăn máy bay theo menu bên Tổng tiền toán hiển thị bên trang Sau hoàn tất lựa chọn, người dùng chọn Xác nhận để hoàn tất đăng ký dịch vụ toán quầy vé sân bay Trang Báo cáo đồ án môn Phát triển ứng dụng Web IS207.M12 - Người dùng truy cập phần Check-in Online để chọn ghế ngồi chuyến bay từ trang chủ Sau điền thông tin Họ tên Mã đặt chỗ hình 2.9 nhấn button Xem chuyến bay, người dùng có hệ thống, trang web chuyến đến giao diện hình 2.10 để kiểm tra thông tin nhấn button Tiếp tục tiến hành chọn ghế Nếu khơng người dùng bấm button Huỷ để trang chủ Hình 2.9: Giao diện nhập thơng tin Trang 12 Báo cáo đồ án môn Phát triển ứng dụng Web IS207.M12 Hình 2.10: Giao diện kiểm tra thơng tin cá nhân - Ở giao diện hình 2.11, người dùng chon ghế cách bấm vào checkbox theo sơ đồ hình bên bấm button Xác nhận hoàn thành thủ tục trực tuyến Khi người dùng thơng báo lần cuối thông tin chuyến bay số ghế chọn hình 2.12 bấm button Kết thúc để lại trang chủ Trang 13 Báo cáo đồ án môn Phát triển ứng dụng Web IS207.M12 Hình 2.11: Giao diện chọn ghế ngồi Trang 14 Báo cáo đồ án môn Phát triển ứng dụng Web IS207.M12 Hình 2.12: Thơng báo hồn tất thủ tục III Các cơng nghệ sử dụng trang web 3.1 FrontEnd – Bootstrap - Bootstrap framework HTML, CSS, JavaScript cho phép người dùng dễ dàng thiết kế website theo chuẩn định, tạo website thân thiện với thiết bị cầm tay điện thoại, tablet, … - Đối với giao diện FrontEnd, nhóm lựa chọn framework Bootstrap để thiết kế phần giao diện website tiện ích mà framework mang lại như: o Rất dễ để sử dụng: Nó đơn giản base HTML, CSS Javascript cẩn có kiến thức sử dụng bootstrap tốt o Responsive: Bootstrap xây dựng sẵn responsive css thiết bị Iphones, tablets, desktops Tính khiến cho người dùng tiết kiệm Trang 15 Báo cáo đồ án môn Phát triển ứng dụng Web IS207.M12 nhiều thời gian việc tạo website thân thiện với thiết bị điện tử, thiết bị cầm tay o Tương thích với trình duyệt: Nó tương thích với tất trình duyệt (Chrome, Firefox, Internet Explorer, Safari, and Opera) Tuy nhiên, với IE browser, Bootstrap hỗ trợ từ IE9 trở lên Điều vô dễ hiểu IE8 khơng hỗ trợ HTML5 CSS3 3.2 BackEnd – NodeJS - NodeJS tảng Server side xây dựng dựa Javascript Engine (V8 Engine) NodeJS phát triển Ryan Dahl năm 2009 NodeJs định nghĩa tảng (platform) dựa vào Chrome Javascript runtime để xây dựng ứng dụng nhanh, có độ lớn NodeJS sử dụng thành phần hướng kiện (eventdriven), mơ hình non-blocking I/O để tạo ứng dụng nhẹ hiệu cho ứng dụng liệu thời gian thực chạy thiết bị phân tán - Đối với phần BackEnd, nhóm lựa chọn kết hợp sở liệu MySQL với tảng NodeJS nhờ vào tiện ích công cụ này: o Không đồng hướng kiện (Event Driven): Tất các APIs thư viện NodeJS không đồng bộ, nghĩa không blocking (khóa) Nó cần thiết NodeJS khơng đợi API trả dự liệu Server chuyển sang API sau gọi có chế thông báo kiện NodeJS giúp Server nhận phản hồi từ API gọi trước o Chạy nhanh: Dựa V8 Javascript Engine Google Chrome, thư viện NodeJS nhanh trình thực code o Các tiến trình đơn giản hiệu cao: NodeJS sử dụng mơ hình luồng đơn (single thread) với kiện lặp Các chế kiện giúp Server Trang 16 Báo cáo đồ án môn Phát triển ứng dụng Web IS207.M12 trả lại phản hồi với cách khơng khóa tạo cho Server hiệu cao ngược lại với cách truyền thống tạo số lượng luồng hữu hạn để quản lý request Nodejs sử dụng chương trình đơn luồng chương trình cung cấp dịch vụ cho số lượng request nhiều so với Server truyền thống Apache HTTP Server o Không đệm: Ứng dụng NodeJS không lưu trữ liệu buffer 3.3 Database – MySQL MySQL hệ thống quản trị sở liệu mã nguồn mở (gọi tắt RDBMS) - hoạt động theo mơ hình client-server Với RDBMS viết tắt Relational Database Management System MySQL tích hợp Apache, PHP MySQL quản lý liệu thông qua sở liệu Mỗi sở liệu có nhiều bảng quan hệ chứa liệu Đối với phần Database website, nhóm lựa chọn hệ quản trị sở liệu - MySQL với mạnh tích hợp sẵn Apache PHP giảng dạy trình học đồng thời MySQL cịn có đặc điểm: o Dễ sử dụng: MySQL sở liệu tốc độ cao, ổn định, dễ sử dụng hoạt động nhiều hệ điều hành cung cấp hệ thống lớn hàm tiện ích mạnh o Độ bảo mật cao: MySQL thích hợp cho ứng dụng có truy cập CSDL Internet sở hữu nhiều nhiều tính bảo mật chí cấp cao Nhanh chóng: Việc đưa số tiêu chuẩn cho phép MySQL để làm việc hiệu tiết kiệm chi phí, làm tăng tốc độ thực thi IV Thiết kế liệu sơ đồ lớp Trang 17 Báo cáo đồ án môn Phát triển ứng dụng Web IS207.M12 4.1 Bảng quan hệ lớp hệ thống 4.1.1 Lớp chuyenbay • Thuộc tính STT Tên thuộc tính Kiểu liệu Mơ tả MaChuyenBay varchar(10) Mã chuyến bay (khóa chính) GioKhoiHanh time Giờ khởi hành GioDen time Giờ đến địa điểm NgayDi date Ngày khởi hành NoiDi varchar(20) Nơi khởi hành NoiDen varchar(20) Nơi đến • Phương thức STT Tên phương thức Mô tả Thêm chuyến bay Người quản lý thêm chuyến bay vào hệ thống Xóa chuyến bay Người quản lý xóa chuyến bay vào hệ thống Sửa chuyến bay Người quản lý sửa chuyến bay vào hệ thống Tìm kiếm chuyến bay Người dùng tìm kiếm chuyến bay hệ thống 4.1.2 Lớp vemaybay • Thuộc tính STT Tên thuộc tính Kiểu liệu MaVe varchar(10) Mơ tả Mã vé đặt (khóa chính) Trang 18 Báo cáo đồ án môn Phát triển ứng dụng Web IS207.M12 MaChuyenBay varchar(10) Mã chuyến bay (khóa ngoại) Hạng vé Có hai hạng vé hạng thường hạng varchar(10) thương gia Giá vé Tùy vào hạng vé có giá vé khác int(11) Giá vé hạng thương gia đắt 30% so với vé thường 4.1.3 Lớp ghengoi • Thuộc tính STT Tên thuộc tính Kiểu liệu MaGhe varchar(10) Mơ tả Mã ghế hành khách chuyến bay (khóa chính) Mã chuyến bay (khóa ngoại) MaChuyenBay varchar(10) 4.1.4 Lớp khachhang • Thuộc tính STT Tên thuộc tính Kiểu liệu MaDatCho varchar(10) Mơ tả Mã đặt chố (khóa chính) Sau đặt vé hành khách nhận mã đặt chỗ để chọn dịch vụ tham gia chuyến bay xem thông tin chuyến bay MaVe varchar(10) Mã vé đặt (khóa ngoại) SDT varchar(20) Số điện thoại khách hàng Trang 19 Báo cáo đồ án môn Phát triển ứng dụng Web IS207.M12 HoTen varchar(30) Họ tên khách hàng Email varchar(40) Email khách hàng 4.1.5 Lớp dichvuchuyenbay • Thuộc tính STT Tên thuộc tính Kiểu liệu MaDatCho varchar(10) Mơ tả Mã đặt chố (khóa chính) Sau đặt vé hành khách nhận mã đặt chỗ để chọn dịch vụ tham gia chuyến bay xem thơng tin chuyến bay MaDatCho varchar(10) Mã dịch vụ (thuộc tính khóa) SoKy tinyint(4) Dịch vụ số ký hành lý khách hàng mua (tương ứng với số ký danh sách, số ký số thứ tự từ xuống) LoaiDoAn varchar(30) Dịch vụ đồ ăn (tương ứng với danh sách đồ ăn, loại đồ ăn số thứ tự chọn từ xuống dưới) Trang 20 Báo cáo đồ án môn Phát triển ứng dụng Web IS207.M12 4.2 Sơ đồ tổng quát 4.3 Các mối liên kết sơ đồ • Mối liên kết bảng chuyenbay Trang 21 Báo cáo đồ án môn Phát triển ứng dụng Web IS207.M12 Sơ đồ liên kết bảng chuyenbay • Mối liên kết bảng khách hàng Sơ đồ liên kết bảng khachhang • Mối liên kết bảng vemaybay Trang 22 Báo cáo đồ án môn Phát triển ứng dụng Web IS207.M12 Sơ đồ liên kết bảng vemaybay • Mối liên kết bảng dichvuchuyenbay Sơ đồ liên kết bảng dichvuchuyenbay • Mối liên kết bảng ghengoi Trang 23 Báo cáo đồ án môn Phát triển ứng dụng Web IS207.M12 Sơ đồ liên kết bảng ghengoi V Nhận xét kết luận 5.1 Nhận xét 5.1.1 Kết đạt - Tạo website đặt vé máy bay với chức - Học hỏi nhiều kiến thức, công nghệ thực đề tài 5.1.2 Ưu điểm - Tạo website đặt vé máy bay nhóm đề xuất - Học sử dụng công nghệ làm web NodeJs - Biết cách thiết kế, xây dựng hệ thống sở liệu MySQL đẩy lên server - Hình thức: Giao diện tương đối rõ ràng thân thiện với người dùng Trang 24 Báo cáo đồ án môn Phát triển ứng dụng Web IS207.M12 - Cách sử dụng: Thao tác dễ nhanh chóng vói người sử dụng 5.1.3 Hạn chế - Vẫn chưa thực số chức nhỏ mà ban đầu nhóm đề xuất mã giảm giá, ưu đã, … - Một số chức mức tốn, đặt ghế, … nhóm học hỏi tìm hiểu để tạo nên trang web 5.2 Hướng phát triển - Nhóm hồn thiện chức cịn lại chỉnh sửa chức trình độ cao tương lai - Có thể mở rộng ứng dụng mobile để người dùng thuận tiện sử dụng - Phần mềm liên kết với khách hàng thông qua tài khoản xã hội thư điện tử để thuận tiện việc theo dõi liên lạc Cũng liên kết với tài khoản ngân hàng việc toán háo đơn VI Tài liệu tham khảo phân công công việc 6.1 Tài liệu tham khảo - Nhóm tham khảo tính trang web: https://vietjetairs.com.vn https://www.vietjetair.com/vi - Ngồi cịn tài liệu tham khảo khác để xây dựng trang web: o Tự Học Node.JS Cơ Bản Từ A Đến Z Cho Người Mới Bắt Đầu - Hỏi Dân IT – truy cập ngày 10/12/2021 o Khoá học NodeJs trọn - TK Vlogs – truy cập ngày 15/12/2021 Trang 25 Báo cáo đồ án môn Phát triển ứng dụng Web IS207.M12 o Bài - Bootstrap gì? Giới thiệu Bootstrap – Pham Thi Ngoc Mai – truy cập ngày 15/12/2021 o Node.js – VietTuts.vn – truy cập ngày 15/12/2021 o MySQL gì? Hướng dẫn toàn tập MySQL – Mắt Bão – truy cập ngày 15/12/2021 6.2 Bảng phân công công việc STT MSSV Họ tên Công việc giao 19521901 Trần Gia Nghĩa 19521199 Nguyễn Đức Anh Code: Front-end, back-end 19521714 Mai Đăng Khương Code: Front-end, báo cáo 19521536 Nguyễn Đạt Huy Hoàng Code: Front-end, back-end, báo cáo Trang 26 Code: Front-end, back-end ... trình phát triển dự án ứng dụng web nâng cao khả làm việc nhóm Vì vậy, thành viên đồng ý tham gia phát triển website bán vé máy bay trực tuyến - Trong khuôn khổ môn Phát triển ứng dụng web, hướng... án môn Phát triển ứng dụng Web IS207.M12 4.2 Sơ đồ tổng quát 4.3 Các mối liên kết sơ đồ • Mối liên kết bảng chuyenbay Trang 21 Báo cáo đồ án môn Phát triển ứng dụng Web IS207.M12 Sơ đồ liên kết... chuyến bay hệ thống 4.1.2 Lớp vemaybay • Thuộc tính STT Tên thuộc tính Kiểu liệu MaVe varchar(10) Mơ tả Mã vé đặt (khóa chính) Trang 18 Báo cáo đồ án mơn Phát triển ứng dụng Web IS207.M12 MaChuyenBay