(Tiểu luận) báo cáo đồ án môn phát triển ứng dụng web đề tài đặ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 quý 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 I Tổng quan đề tài 1.1 Giới thiệu đề tài 1.2 Lý chọn đề tài II Kịch thiết kế xây dựng trang web 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 Thiết kế liệu sơ đồ lớp 17 IV 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 cịn 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 hoà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 hồ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 (event-driven), 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 Không đệm: Ứng dụng NodeJS không lưu trữ liệu buffer o 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 q trình học đồng thời MySQL cịn có đặc điểm: Dễ sử dụng: MySQL sở liệu tốc độ cao, ổn định, dễ sử dụng o 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 Độ bảo mật cao: MySQL thích hợp cho ứng dụng có truy cập CSDL o 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 Tên thuộc tính Kiểu liệu 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 STT • Mơ tả Phương thức STT Tên phương thức Mô tả Thêm chuyến bayNgười quản lý thêm chuyến bay vào hệ thống Xóa chuyến bayNgườ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é varchar(10) Có hai hạng vé hạng thường hạng 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 Mơ tả Kiểu liệu MaGhe varchar(10) MaChuyenBay varchar(10) Mã ghế hành khách chuyến bay (khóa chính) Mã chuyến bay (khóa ngoại) 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 chố (khóa chính) Sau đặt vé Mô tả 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