(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

- Khi người dùng truy cập vào website, trang chủ sẽ có giao diện như hình 2.1,người dùng có thể tìm kiếm chuyến bay một chiều với 5 thành phố mà nhóm đã chọn đểlàm bao gồm Hồ Chí Minh, H

MINH TRƯỜNG ĐẠI HỌC CÔNG

Giảng viên hướng dẫn: ThS Võ Minh Quân

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 và quý thầy cô khoa Hệ thống Thông tin đã giúp cho nhóm chúng em cónhững kiến thức cơ bản làm nền tảng để thực hiện đề tài này

Đặc biệt, nhóm chúng em xin gửi lời cảm ơn và lòng biết ơn sâu sắc nhất tớithầ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 và đóng góp nhiều ý kiếnquý báu giúp nhóm em hoàn thành tốt báo cáo môn học của nhóm Một lần nữanhóm em chân thành cảm ơn thầy và chúc thầy dồi dào sức khỏe

Trong thời gian một học kỳ thực hiện đề tài, nhóm chúng em đã vận dụng những kiếnthức nền tảng đã tích lũy đồng thời kết hợp với việc học hỏi và nghiên cứu những kiến thứcmới từ thầy cô, bạn bè cũng như 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 những gì đã thu nhập được để hoàn thành một báo cáo đồ án tố tnhất Tuy nhiên, vì kiến thức chuyên môn còn hạn chế và bản thân còn nhiều thiếu xótkinh nghiệm thực tiễn nên nội dung của báo cáo không tránh khỏi những thiếu xót, nhóm

em rất mong nhận được sự góp ý, chỉ bảo thêm của quý thầy cô nhằm hoàn thiện nhữngkiến thức của mình để nhóm chúng em có thể dùng làm hành trang thự c hiện tiếp các đềtài khác trong tương lai cũng như là trong việc học tập và làm việc sau này

Một lần nữa xin gửi đến thầy cô, bạn bè lời cảm ơn chân thành và tốt đẹp nhất!

Thành phố Hồ Chí Minh, tháng năm

NHẬN XÉT CỦA GIẢNG VIÊN

MỤC LỤC

LỜI CẢM ƠN 1

NHẬN XÉT CỦA GIẢNG VIÊN 2

MỤC LỤC 3

I Tổng quan đề tài 5

1.1 Giới thiệu đề tài 5

1.2 Lý do chọn đề tài 5

II Kịch bản và thiết kế xây dựng trang web 5

2.1 Kịch bản đặt vé 5

2.2 Kịch bản đăng ký Dịch vụ chuyến bay 9

2.3 Kịch bản kiểm tra thông tin ở Chuyến bay của tôi 10

2.4 Kịch bản Check-in Online 11

III Các công nghệ sử dụng trong trang web 15

3.1 FrontEnd – Bootstrap 15

3.2 BackEnd – NodeJS 16

3.3 Database – MySQL 17

IV Thiết kế dữ liệu bằng sơ đồ lớp 17

4.1 Bảng quan hệ các lớp trong 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 trong sơ đồ 21

V Nhận xét và kết luận 24

5.1 Nhận xét 24

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 và 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

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ẽ của Internet, những website bán hàng đóng gópmột phần vô cùng quan trọng trong đời sống của mọi người, giúp con người tiếp cận dễdàng hơn đối với những sản phẩm thay vì phải trực tiếp đi đến những gian hàng Hiện naytình hình dịch bệnh đã tuyên giảm và những chuyến bay cũng đã được mở lại nhưngnhiều người vẫn muốn mua vé máy bay và 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 một website bán vé máy bay trực tuyếnđơn giản cùng với những chức năng như đăng ký dịch vụ, kiểm tra thông tin và làm thủtục trực tuyến, phù hợp với nhu cầu của khách hàng hiện nay

1.2 Lý do chọn đề tài

- Với mong muốn có thêm những kinh nghiệm tích luỹ thực tế để hiểu hơn vềmảng lập trình và phát triển một dự án ứng dụng web cũng như nâng cao khả nănglàm việc nhóm Vì vậy, các thành viên đều đồng ý tham gia phát triển một websitebán vé máy bay trực tuyến

- Trong khuôn khổ môn Phát triển ứng dụng web, được sự hướng dẫn của thầy vàđóng góp ý kiến của các bạn, nhóm muốn nghiên cứu và phát triển website này để hoànthành đồ án môn học, hiểu thêm về cách Phát triển ứng dụng web cũng như rèn luyệncác kỹ năng lập trình, nghiên cứu, tu duy, làm việc nhóm, …

II Kịch bản và thiết kế xây dựng trang web 2.1 Kịch bản đặt vé

- Khi người dùng truy cập vào website, trang chủ sẽ có giao diện như hình 2.1,người dùng có thể tìm kiếm chuyến bay một chiều với 5 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 hiện tại chỉ tạo

cơ sở dữ liệu các chuyến bay từ 5 địa điểm trên trong các ngày từ 01/01/2022 đến ngày20/01/2022 Trang chủ hiện có các button bao gồm CHUYẾN BAY CỦA TÔI, CHECK-INONLINE, DỊCH VỤ CHUYẾN BAY để người dùng điều hướng trang web sang các dịch

vụ liên quan Ngoài ra người dùng có thể chọn địa điểm khởi hành và địa điểm đến ở cácselect option cũng như ngày khởi hành và bấm nút tìm chuyến bay để tìm kiế m chuyếnbay dựa trên thông tin đã chọn

Hình 2.1: Trang chủ website bán vé máy bay

- Sau khi chọn chuyến chuyến bay cần tìm, người dùng bấm Tìm chuyến bay và sẽ

được chuyển tiếp đến giao diện kết quả tìm kiếm chuyến bay ở hình 2.2 và có thể lựa chọnchuyến bay tuỳ theo khung giờ với giá vé mong muốn Giao diện như ở hình 2.2 bao gồm

button Quay lại để người dùng trở về trang chủ trước đó hoặc Tiếp tục để tiến hành điền

thông tin cá nhân và thanh toán Ngoài ra kết quả tìm kiếm chuyến bay còn cho phépngười dùng xem cùng một chuyến bay đã nhập và

thêm kết quả của ba ngày tiếp theo để người dùng thoải mái lựa chọn ngày bay khác nếu muốn.

Hình 2.2: Kết quả tìm kiếm chuyến bay trả về theo thông tin đã nhập

- Một khi lựa chọn xong chuyến bay và chọn Tiếp tục, người dùng sẽ điền

những thông tin cá nhân như hình 2.3 bao gồm Họ và tên, số điện thoại, email, … vàlựa chọn một trong hai hình thức thanh toán:

o Thanh toán tại phòng vé: Người dùng sẽ nhận vé và thanh toán tạiphòng vé Người dùng chỉ cần khai báo họ tên và số điện thoại tại phòng vé đểđược nhân viên tiến hành thanh toán

o Thanh toán tại địa chỉ quý khách yêu cầu: Vé sẽ được gửi đến địa chỉ

mà người dùng đã nhập và sẽ được nhân viên giao vé tiến hành thanh toán tậ nnơi

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 các bước trên và bấm button Xác nhận, trang web sẽ thông

báo kết quả đặt vé thành công cùng với những thông tin người dùng đã nhập và Mã đặtchỗ như hình 2.4 (Người dùng cần ghi lại Mã đặt chỗ để có thể làm những thủ tục nhưCheck-in Online hoặc đặt thêm các Dịch vụ chuyến bay)

Hình 2.4: Kết quả đặt vé máy bay thành công

2.2 Kịch bản đăng ký Dịch vụ chuyến bay

- Một khi người dùng đã đăng ký chuyến bay thành công và nhận được Mãđặt chỗ, người dùng có thể truy cập phần Dịch vụ chuyến bay ở trang chủ và nhậpthông tin Họ tên cùng với Mã đặt chỗ như hình 2.5 để tiếp tục tiến hành đăng kýcác 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 khi bấm button Tiếp theo, ở giao diện như hình 2.6, người dùng có thể

chọn mua thêm số ký cho hành lý theo bảng giá có sẵn hoặc mua thêm các suất ăntrên máy bay theo menu bên dưới Tổng tiền thanh toán sẽ hiển thị bên dưới trang

Sau khi hoàn tất lựa chọn, người dùng sẽ chọn Xác nhận để hoàn tất đăng ký dịch

vụ và thanh toán tại quầy vé ở sân bay

Hình 2.6: Giao diện các dịch vụ đặt thêm

2.3 Kịch bản kiểm tra thông tin ở Chuyến bay của tôi

- Người dùng muốn kiểm tra lại thông tin cá nhân và chuyến bay của mìnhcũng như những Dịch vụ đã đăng ký có thể truy cập phần Chuyến bay của tôi và nhậpthông tin Họ tên và Mã đặt chỗ như hình 2.7.

Hình 2.7: Giao diện nhập thông tin

- Sau khi nhấn button Tìm kiếm, nếu người dùng có trong cơ sở dữ liệu, những

thông tin chi tiết mà người dùng đã khai báo sẽ được hiển thị như hình 2.8

Hình 2.8: Kết quả kiểm tra thông tin Chuyến bay của tôi

- Người dùng có thể truy cập phần Check-in Online để chọn ghế ngồi của chuyến baymình từ trang chủ Sau khi điền các thông tin Họ tên và Mã đặt chỗ như hình 2.9 và nhấn

button Xem chuyến bay, nếu người dùng có trong hệ thống, trang web sẽ được chuyến đến giao diện như hình 2.10 để kiểm tra thông tin và nhấn button Tiếp tục tiến hành chọn ghế Nếu không người dùng có thể bấm button Huỷ để về trang chủ

Hình 2.9: Giao diện nhập thông tin

Hình 2.10: Giao diện kiểm tra thông tin cá nhân

- Ở giao diện như hình 2.11, người dùng có thể chon ghế bằng cách bấm vào các

checkbox theo sơ đồ như hình bên và bấm button Xác nhận hoàn thành thủ tục trực tuyến.

Khi đó người dùng sẽ được thông báo lần cuối về thông tin chuyến bay và số ghế đã

chọn như hình 2.12 và bấm button Kết thúc để về lại trang chủ.

Hình 2.11: Giao diện chọn ghế ngồi

Hình 2.12: Thông báo hoàn tất thủ tục

III Các công nghệ sử dụng trong trang web

3.1 FrontEnd – Bootstrap

- Bootstrap là một framework HTML, CSS, và JavaScript cho phép ngườidùng dễ dàng thiết kế website theo một chuẩn nhất định, tạo các website thân thiệnvới các thiết bị cầm tay như đ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 của website vì những tiện ích mà framework này mang lại như:

o Rất dễ để sử dụng: Nó đơn giản vì nó được base trên HTML, CSS và

Javascript chỉ cẩn có kiến thức cơ bản về 3 cái đó là có thể sử dụng bootstrap tốt

o Responsive: Bootstrap xây dựng sẵn responsive css trên các thiết bị Iphones, tablets, và desktops Tính năng này khiến cho người dùng tiết kiệm được rất

nhiều thời gian trong việc tạo ra một website thân thiện với các 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 cả các trình duyệt(Chrome, Firefox, Internet Explorer, Safari, and Opera) Tuy nhiên, với IE browser,Bootstrap chỉ hỗ trợ từ IE9 trở lên Điều này vô cùng dễ hiểu vì IE8 không hỗ trợHTML5 và CSS3

- Đối với phần BackEnd, nhóm lựa chọn kết hợp cơ sở dữ liệu MySQL cùng với nền tảng NodeJS nhờ vào những tiện ích của công cụ này:

o Không đồng bộ và hướng sự kiện (Event Driven): Tất các các APIs của thưviện NodeJS đều không đồng bộ, nghĩa là không blocking (khóa) Nó rất cần thiết vìNodeJS không bao giờ đợi một API trả về dự liệu Server chuyển sang một API sau khi gọi

nó và có cơ chế thông báo về sự kiện của NodeJS giúp Server nhận được phản hồi từ cácAPI gọi trước đó

o Chạy rất nhanh: Dựa trên V8 Javascript Engine của Google Chrome, thư viện NodeJS rất nhanh trong các quá trình thực hiện code

o Các tiến trình đơn giản nhưng hiệu năng cao: NodeJS sử dụng một mô hình luồng đơn (single thread) với các sự kiện lặp Các cơ chế sự kiện giúp Server

trả lại các phản hồi với một cách không khóa và tạo cho Server hiệu quảcao ngược lại với các cách truyền thống tạo ra một số lượng luồng hữuhạn để quản lý request Nodejs sử dụng các chương trình đơn luồng

và các chương trình này cung cấp các dịch vụ cho số lượng requestnhiều hơn so với các Server truyền thống như Apache HTTP Server

o Không đệm: Ứng dụng NodeJS không lưu trữ các dữ liệu buffer

3.3 Database – MySQL

- MySQL là một hệ thống quản trị cơ sở dữ liệu mã nguồn mở (gọi tắt làRDBMS) hoạt động theo mô hình client-server Với RDBMS là viết tắt của RelationalDatabase Management System MySQL được tích hợp Apache, PHP MySQL quản

lý dữ liệu thông qua các cơ sở dữ liệu Mỗi cơ sở dữ liệu có thể có nhiều bảng quan

hệ chứa dữ liệu

- Đối với phần Database của website, nhóm đã lựa chọn hệ quản trị cơ sở dữ liệuMySQL với thế mạnh đã tích hợp sẵn Apache và PHP đã được giảng dạy trong quátrình học đồng thời MySQL còn có những đặc điểm:

o Dễ sử dụng: MySQL là cơ sở dữ liệu tốc độ cao, ổn định, dễ sử dụng vàhoạt động trên nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện ích rấtmạnh

o Độ bảo mật cao: MySQL rất thích hợp cho các ứng dụng có truy cập CSDLtrên Internet khi sở hữu nhiều nhiều tính năng bảo mật thậm chí là ở cấp cao

Nhanh chóng: Việc đưa ra một số tiêu chuẩn cho phép MySQL để làm việc rất hiệu quả và tiết kiệm chi phí, do đó nó làm tăng tốc độ thực thi

IV Thiết kế dữ liệu bằng sơ đồ lớp

4.1 Bảng quan hệ các lớp trong hệ thống

4.1.1 Lớp chuyenbay

• Thuộc tính

1 MaChuyenBay varchar(10) Mã chuyến bay (khóa chính)

• Phương thức

1 Thêm chuyến bayNgười quản lý có thể thêm chuyến bay vào hệ thống

2 Xóa chuyến bayNgười quản lý có thể xóa chuyến bay vào hệ thống

3 Sửa chuyến bay Người quản lý có thể sửa chuyến bay vào hệ thống

4 Tìm kiếm chuyến bay Người dùng có thể tìm kiếm chuyến bay trên hệ thống

Mô tả

Mã vé đặt (khóa chính)

2 MaChuyenBay varchar(10) Mã chuyến bay (khóa ngoại).

3 Hạng vé varchar(10) Có hai hạng vé là hạng thường và hạng

thương gia

4 Giá vé int(11) Tùy vào hạng vé sẽ có giá vé khác nhau

Giá vé hạng thương gia sẽ đắt hơn 30% sovới vé thường

4.1.3 Lớp ghengoi

• Thuộc tính

1 MaGhe varchar(10) Mã ghế hành khách trên chuyến bay (khóa

chính)

2 MaChuyenBay varchar(10) Mã chuyến bay (khóa ngoại)

4.1.4 Lớp khachhang

• Thuộc tính

1 MaDatCho varchar(10) Mã đặt chố (khóa chính) Sau khi đặt vé

hành khách sẽ nhận được mã đặt chỗ để cóthể chọn dịch vụ khi tham gia chuyến baycũng như xem thông tin chuyến bay củamình

2 MaVe varchar(10) Mã vé đặt (khóa ngoại)

3 SDT varchar(20) Số điện thoại khách hàng

4 HoTen varchar(30) Họ tên khách hàng.

4.1.5 Lớp dichvuchuyenbay

• Thuộc tính

1 MaDatCho varchar(10) Mã đặt chố (khóa chính) Sau khi đặt vé

hành khách sẽ nhận được mã đặt chỗ để cóthể chọn dịch vụ khi tham gia chuyến baycũng như xem thông tin chuyến bay củamình

2 MaDatCho varchar(10) Mã dịch vụ (thuộc tính khóa)

3 SoKy tinyint(4) Dịch vụ số ký hành lý khách hàng mua

(tương ứng với số ký trong danh sách, số ký

sẽ là số thứ tự từ trên xuống)

4 LoaiDoAn varchar(30) Dịch vụ đồ ăn (tương ứng với danh sách đồ

ăn, loại đồ ăn sẽ là số thứ tự các món đượcchọn từ trên xuống dưới)

IS207.M12 4.2 Sơ đồ tổng quát

4.3 Các mối liên kết trong sơ đồ

• Mối liên kết bảng chuyenbay

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

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

Sơ đồ liên kết bảng ghengoi

V Nhận xét và kết luận 5.1 Nhận xét

5.1.1 Kết quả đạt được

- Tạo được một website đặt vé máy bay với các chức năng cơ bản

- Học hỏi được nhiều kiến thức, công nghệ mới khi thực hiện đề tài này

5.1.2 Ưu điểm

- Tạo được một website đặt vé máy bay như nhóm đã đề xuất

- Học và sử dụng công nghệ làm web NodeJs

- Biết cách thiết kế, xây dựng một hệ thống cơ sở dữ liệu cơ bản bằng MySQL và đẩy lênserver

- Hình thức: Giao diện tương đối rõ ràng và thân thiện với người dùng

- Cách sử dụng: Thao tác dễ và nhanh chóng vói người sử dụng.

5.1.3 Hạn chế

- Vẫn chưa thực hiện được một số chức năng nhỏ mà ban đầu nhóm đề xuất như

mã giảm giá, ưu đã, …

- Một số chức năng chỉ ở mức cơ bản như thanh toán, đặt ghế, … vì nhóm chỉ mới học hỏi và tìm hiểu để tạo nên một trang web cơ bản

5.2 Hướng phát triển

- Nhóm sẽ hoàn thiện các chức năng còn lại và có thể chỉnh sửa các chức năng ở một trình độ cao hơn trong tương lai

- Có thể mở rộng trên ứng dụng mobile để người dùng có thể thuận tiện sử dụng

- Phần mềm có thể liên kết với khách hàng thông qua các tài khoản xã hội hoặc thưđiện tử để thuận tiện trong việc theo dõi và liên lạc Cũng như liên kết với tài khoảnngân hàng trong việc thanh toán háo đơn

VI Tài liệu tham khảo và phân công công việc

6.1 Tài liệu tham khảo

- Nhóm đã tham khảo các tính năng của trang web: https://vietjetairs.com.vn và

https://www.vietjetair.com/vi

- Ngoài ra còn những 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