Xây dựng hệ thống website đặt chỗ bãi đỗ xe ô tô trên địa bàn thành phố đà nẵng

Đồ án với đề tài hệ thống website đặt chỗ bãi đỗ ô tô trên địa bàn thành phốĐà Nẵng được xây dựng bằng ngôn ngữ lập trình PHP sử dụng HTML/CSS3, sửdụng hệ quản trị cơ sở dữ liệu MySQL cù

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

Đà Nẵng, 06/2022

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

Đà Nẵng, 06/2022

Đồ án với đề tài hệ thống website đặt chỗ bãi đỗ ô tô trên địa bàn thành phố

Đà Nẵng được xây dựng bằng ngôn ngữ lập trình PHP sử dụng HTML/CSS3, sửdụng hệ quản trị cơ sở dữ liệu MySQL cùng các công cụ hỗ trợ như JQuery, Ajax

Đề tài “ Xây dựng hệ thống website đặt chỗ bãi đỗ xe ô tô trên địa bàn thànhphố Đà nẵng ” cho phép người dùng đặt chỗ bãi đỗ xe ô tô tại các bãi xe theo từngkhu vực trong thành phố dễ dàng và nhanh chóng tiết kiệm nhiều thời gian so vớiviệc đỗ xe bằng cách thủ công Giúp cho Sở giao thông vận tải Tp.Đà Nẵng dễ dàngkiểm soát các vấn đề về giao thông hiện nay

Website với các chức năng chính như: Người dùng tìm kiếm, xem thông tincác bãi đỗ xe, đặt chỗ bãi đỗ xe, xem thông tin đặt chỗ, thanh toán online thuận tiện

và dễ dàng Chủ bãi xe dễ dàng đăng ký các bãi xe, thống kê được doanh thu củacác bãi xe,vv… Quản trị hệ thống xét duyệt bãi đỗ xe, quản lý tài khoản người dùng, thống kê số lượng xe đăng ký

NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP

Giảng viên hướng dẫn: TS Hoàng Thị Mỹ Lệ

Sinh viên thực hiện: Trương Thanh Bình Mã SV: 1811505310403

1 Tên đề tài:

- Xây dựng hệ thống website đặt chỗ bãi đỗ xe ô tô trên địa bàn thành phố Đà Nẵng

2 Các số liệu, tài liệu ban đầu:

- Thu thập dữ liệu bãi xe qua các chủ bãi có nhu cầu muốn cho thuê bãi làm chỗ đậu xe

- Thu thập dữ liệu thông tin tại các bãi xe trên địa bàn thành phố

- Các tài liệu tham khảo được lấy từ nhiều nguồn , từ các bài viết và các khoá học về lập trình ở youtube

3 Nội dung chính của đồ án:

Quá trình xây dựng hệ thống website đặt chỗ bãi đỗ xe ô tô bao gồm các công việc:

- Khảo sát nghiệp vụ thực tế

- Phân tích thiết kế các chức năng của hệ thống

- Thiết kế giao diện cho các chức năng

- Xây dựng cơ sơ dữ liệu

LỜI NÓI ĐẦU

Lời đầu tiên, em xin gửi lời cảm ơn chân thành đến quý thầy cô đã giúp đỡchúng em thực hiện đề tài này Đặc biệt em xin gửi lời chân thành và sâu sắc đến cô

TS Hoàng Thị Mỹ Lệ đã hướng dẫn và tận tình giúp đỡ em trong suốt quá trìnhthực hiện đề tài tốt nghiệp này

Đồng thời, em cũng xin cảm ơn quý thầy cô thuộc ngành Công nghệ thôngtin – khoa Công nghệ số, trường Đại học Sư phạm Kỹ thuật - Đại học Đà Nẵng đãtruyền đạt những kiến thức cần thiết và những kinh nghiệm quý báu cho chúng emtrong suốt thời gian 4 năm trên giảng đường để em có thể thực hiện tốt đề tài này

Em xin gởi lời cảm ơn chân thành tới ThS Đỗ Phú Huy - giáo viên chủnhiệm lớp 18T4 đã giúp đỡ em rất nhiều trong quá trình học tập và công việc

Xin chân thành cảm ơn tất cả bạn bè đã động viên, giúp đỡ chúng em trong thời gian học tập và hoàn thành đồ án.

Trong quá trình thực hiện đề tài, do kiến thức và thời gian còn hạn chế nênkhông thể tránh khỏi những sai sót Vì vậy em mong quý thầy, cô thông cảm và góp

ý để em có thể hoàn thiện đề tài Và những lời góp ý đó có thể giúp em có thể tránhđược những sai lầm sau này

Em xin chân thành cảm ơn!

Đà Nẵng, ngày tháng năm 2022

Sinh viên thực hiện

i

LỜI CAM ĐOAN

Tôi xin cam đoan rằng đồ án tốt nghiệp “Xây dựng hệ thống website đặt chỗbãi đỗ xe ô tô trên địa bàn thành phố Đà Nẵng” là công trình nghiên cứu độc lậpdưới sự hướng dẫn của giảng viên TS.Hoàng Thị Mỹ Lệ Những tài liệu tham khảo

đã được liệt kê tại phần tài liệu tham khảo Các nội dung nghiên cứu và kết quảtrong đề tài này là hoàn toàn trung thực

Nếu phát hiện có bất kỳ sự gian lận nào tôi xin hoàn toàn chịu trách nhiệmtrước hội đồng cũng như kết quả đồ án của mình

Sinh viên thực hiện

ii

MỤC LỤC

MỤC LỤC iii

DANH MỤC BẢNG BIỂU vii

DANH MỤC HÌNH VẼ viii

DANH MỤC CHỮ VIẾT TẮT TIẾNG VIỆT ix

DANH MỤC CHỮ VIẾT TẮT TIẾNG ANH x

MỞ ĐẦU 11

1 Mục tiêu đề tài 11

2 Đối tượng nghiên cứu và phạm vi nghiên cứu 11

a) Đối tượng nghiên cứu 11

b) Phạm vi nghiên cứu 11

3 Phương pháp nghiên cứu 11

4 Giải pháp công nghệ 12

5 Cấu trúc đồ án 12

CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 13

1.1 Ngôn ngữ lập trình PHP 13

1.1.1 PHP là gì? 13

1.1.2 Lịch sử phát triển 13

1.2 Javascript 14

1.2.1 Tổng quan về Javascript 14

1.3 Tổng quan về hệ quản trị cơ sở dữ liệu MySQL Server 14

1.4 Giới thiệu về XAMPP 14

1.5 JQuery và Ajax 15

1.5.1 JQuery 15

1.5.2 Ajax 15

CHƯƠNG 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 17

2.1 Khảo sát hệ thống 17

2.1.1 Khảo sát thực tế 17

2.1.2 Khảo sát người dùng 17

2.2 Đặc tả yêu cầu nghiệp vụ 17

2.2.1 Người dùng chưa là thành viên 17

2.2.2 Khách hàng 17

2.2.3 Chủ bãi xe 18

2.2.4 Quản trị viên(Sở GTVT Đà Nẵng) 18

iii

2.3 Đặc tả yêu cầu phần mềm 18

2.3.1 Xác định các tác nhân 18

2.3.2 Các yêu cầu chức năng 18

2.3.3 Yêu cầu phi chức năng 19

2.4 Biểu đồ Use Case 20

2.4.1 Biểu đồ tổng quát 20

2.5 Kịch bản cho Use Case 21

2.5.1 Use-case “Đăng ký” 21

2.5.2 Use-case “Đăng nhập” 21

2.5.3 Use-case “Cập nhật thông tin cá nhân” 21

2.5.4 Use-case “Xem danh sách Bãi đỗ xe” 22

2.5.5 Use-case “Tìm kiếm Bãi đỗ xe” 22

2.5.6 Use-case “Lọc danh sách Bãi đỗ xe” 24

2.5.7 Use-case “Đặt chỗ Bãi đỗ xe” 24

2.5.8 Use-case “Thống kê Bãi xe đăng ký” 25

2.5.9 Use-case “Xem phiếu đặt chỗ Bãi đỗ xe” 25

2.5.10 Use-case “Duyệt Bãi đỗ xe” 26

2.5.11 Use-case “Thống kê phiếu đặt xe của bãi” 27

2.5.12 Use-case “Đăng ký thông tin Bãi xe” 27

2.6 Sơ đồ hoạt động 28

1.6.1 Đăng ký 28

1.6.2 Đăng nhập 29

1.6.3 Cập nhật thông tin cá nhân 30

1.6.4 Tìm kiếm bãi đỗ xe 31

1.6.5 Thêm bãi đỗ xe 32

1.6.6 Đặt bãi đỗ xe 32

1.6.7 Duyệt bãi đỗ xe 34

1.6.8 Thống kê bãi xe đăng ký 35

1.6.9 Quản lý tài khoản 36

1.6.10 Xem trạng thái gửi xe 37

2.7 Sơ đồ lớp 38

2.8 Sơ đồ ERD 39

2.9 Thiết kế bảng cơ sở dữ liệu 40

2.10.1 Bảng Tài Khoản 40

iv

2.10.2 Bảng Loại Tài Khoản 40

2.10.3 Bảng Chủ Bãi Xe 40

2.10.4 Bảng Khách Hàng 41

2.10.5 Bảng Bãi Xe 41

2.10.6 Bảng Khu Vực 42

2.10.7 Bảng Vị Trí 42

2.10.8 Bảng Phiếu Gửi Xe 42

2.10.9 Bảng Loại Xe 43

2.10.10 Bảng Trạng Thái Thanh Toán 43

2.10.11 Bảng Trạng Thái Phiếu Gửi Xe 43

2.10.12 Bảng Trạng Thái Vị Trí 43

2.10.13 Bảng Trạng Thái Bãi Xe 44

CHƯƠNG 3 XÂY DỰNG CHƯƠNG TRÌNH 45

3.1 Công cụ xây dựng chương trình 45

3.2 Giao diện chương trình 45

3.2.1 Màn hình trang chủ 45

3.2.2 Màn hình đăng ký 46

3.2.3 Màn hình đăng nhập 47

3.2.4 Màn hình cập nhật thông tin cá nhân 47

3.2.5 Màn hình danh sách bãi đỗ xe ô tô 48

3.2.6 Màn hình tìm kiếm bãi đỗ xe ô tô 48

3.2.7 Màn hình cập nhật thông tin bãi xe 49

3.2.8 Màn hình đặt chỗ bãi đỗ xe 49

3.2.9 Màn hình thống kê doanh thu bãi 50

3.2.10 Màn hình thanh toán hoá đơn 50

3.2.11 Màn hình xem trạng thái phiếu gửi xe 51

3.2.12 Màn hình xác nhận thanh toán 51

3.2.13 Màn hình quản lý danh sách phiếu 52

3.2.14 Màn hình danh sách vị trí đỗ xe 52

3.2.15 Màn hình đăng ký bãi xe 53

3.2.16 Màn hình trang quản trị viên 54

3.2.17 Màn hình trang quản lý tài khoản 54

3.2.18 Màn hình thống kê bãi xe đăng ký 54

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 56

v

TÀI LIỆU THAM KHẢO 57

vi

DANH MỤC BẢNG BIỂU

Bảng 2.5.1 Use-case “Đăng ký” 21

Bảng 2.5.2 Use-case “Đăng nhập” 21

Bảng 2.5.3 Use-case “Cập nhật thông tin cá nhân” 21

Bảng 2.5.4 Use-case “Xem danh sách Bãi đỗ xe” 22

Bảng 2.5.5 Use-case “Tìm kiếm Bãi đỗ xe” 22

Bảng 2.5.6 Use-case “Lọc danh sách bãi đỗ xe” 24

Bảng 2.5.7 Use-case “Đặt chỗ Bãi đỗ xe” 24

Bảng 2.5.8 Use-case “Thống kê Bãi xe đăng ký” 25

Bảng 2.5.9 Use-case “Xem phiếu đặt chỗ Bãi đỗ xe” 25

Bảng 2.5.10 Use-case “Duyệt bãi đỗ xe” 26

Bảng 2.5.11 Use-case “Thống kê phiếu đặt xe của bãi” 27

Bảng 2.5.12 Use-case “Đăng ký thông tin bãi xe” 27

Bảng 2.10.1 Tài Khoản 40

Bảng 2.10.2 LoaiTaiKhoan 40

Bảng 2.10.3 ChuBaiXe 40

Bảng 2.10.4 KhachHang 41

Bảng 2.10.5 BaiXe 41

Bảng 2.10.6 KhuVuc 42

Bảng 2.10.7 ViTri 42

Bảng 2.10.8 PhieuGuiXe 42

Bảng 2.10.9 LoaiXe 43

Bảng 2.10.10 TrangThaiThanhToan 43

Bảng 2.10.11 TrangThaiPhieuGuiXe 43

Bảng 2.10.12 TrangThaiViTri 43

Bảng 2.10.13 TrangThaiBaiXe 44

vii

DANH MỤC HÌNH VẼ

Hình 2.4.1 Use case tổng quát 20

Hình 2.6.1 Activity “Đăng ký tài khoản” 28

Hình 2.6.2 Activity “Đăng nhập” 29

Hình 2.6.3 Activity “Cập nhật thông tin cá nhân” 30

Hình 2.6.5 Activity “Tìm kiếm Bãi đỗ xe” 31

Hình 2.6.6 Activity “Thêm bãi đỗ xe” 32

Hình 2.6.7 Activity “Đặt bãi đỗ xe” 33

Hình 2.6.8 Activity “Duyệt bãi đỗ xe” 34

Hình 2.6.9 Activity “Thông kê” 35

Hình 2.6.10 Activity “Quản lý tài khoản” 36

Hình 2.6.11 Activity “Xem trạng thái gửi xe” 37

Hình 2.8.1 Sơ đồ lớp 38

Hình 2.9.1 Sơ đồ ERD 39

Hình 3.2.1 Màn hình “Trang Chủ” 45

Hình 3.2.2 Màn hình “Đăng ký” 46

Hình 3.2.3 Màn hình “Đăng nhập” 47

Hình 3.2.4 Màn hình “Cập nhật thông tin cá nhân” 47

Hình 3.2.5 Màn hình “Danh sách bãi đỗ xe ô tô” 48

Hình 3.2.6 Màn hình “Tìm kiếm” 48

Hình 3.2.7 Màn hình “Cập nhật thông tin bãi xe” 49

Hình 3.2.8 Màn hình “Đặt chỗ bãi đỗ xe” 49

Hình 3.2.9 Màn hình “Thống kê doanh thu bãi” 50

Hình 3.2.10 Màn hình “Thanh Toán” 50

Hình 3.2.11 Màn hình “Trạng Thái Phiếu Gửi Xe” 51

Hình 3.2.12 Màn hình “Xác Nhận Thanh Toán” 51

Hình 3.2.13 Màn hình “Quản Lý Danh Sách Phiếu Gửi Xe” 52

Hình 3.2.14 Màn hình “Danh Sách Vị Trí Đỗ Xe” 52

Hình 3.2.15 Màn hình “Đăng Ký Bãi Xe” 53

Hình 3.2.16 Màn hình “Trang Quản Trị Viên” 54

Hình 3.2.17 Màn hình “Quản Lý Tài Khoản” 54

Hình 3.2.18 Màn hình “Thống Kê Bãi Xe Đăng Ký” 55

viii

DANH MỤC CHỮ VIẾT TẮT TIẾNG VIỆT

ix

DANH MỤC CHỮ VIẾT TẮT TIẾNG ANH

1 HTML Hypertext Markup

Language Ngôn ngữ đánh dấu siêu văn bản

2 CSS Cascading Style Sheets Ngôn ngữ định dạng các phần tử được tạo rabởi ngôn ngữ đánh dấu (HTML)

3 IE9 Internet Explorer 9 Trình duyệt Internet Explorer phiên bản 9

4 XML Extensible Markup

Language Ngôn ngữ đánh dấu mở rộng

6 PHP Hypertext Preprocessor Ngôn ngữ lập trình kịch bản

x

Xây dựng hệ thống website đặt chỗ bãi đỗ xe ô tô trên địa bàn thành phố Đà Nẵng

MỞ ĐẦU

Trong những năm gần đây với sự phát triển của kinh tế xã hội của nước ta,lượng phương tiện giao thông đã tăng một cách nhanh chóng Phương tiện cá nhântăng lên, đòi hỏi diện tích đất dành cho bãi đỗ xe cũng phải tăng theo, cơ sở hạ tầnggiao thông và bãi đỗ xe phát triển hiện nay không đủ sức đối phó với lượng phươngtiện lưu thông trên đường Một số thực trạng là hiện nay tại các khu vực trung tâmcủa thành phố Đà Nẵng phần lớn số ô tô đỗ trên vỉa hè, lòng đường gây cản trở giaothông, lạm dụng thu phí tại các địa điểm khu vui chơi giải trí, gây mất cảnh quan đôthị.Với hình thức kinh doanh truyền thống, những khách hàng muốn đỗ xe phải trựctiếp lái xe tới chỗ bãi, tự tay đăng ký phiếu giữ xe và phải thanh toán trực tiếp Điềunày thực sự bất tiện đối với những trường hợp khi bãi xe hết chỗ để xe, hoặc kháchhàng mong muốn thanh toán trực tuyến,

Với mong muốn giải quyết các vấn đề trên, em đã chọn đề tài, em đã chọn đềtài “Xây dựng hệ thống website đặt chỗ bãi đỗ xe ô tô trên địa bàn thành phố ĐàNẵng” để có thể áp dụng mô hình bãi giữ xe trực tuyến dưới sự quản lý của Sở Giaothông vận tải tại TP Đà Nẵng

1 Mục tiêu đề tài

Từ những lý do đã nêu trên,đề tài hướng đến xây dựng hệ thống website đặt chỗbãi đỗ xe ô tô trên địa bàn Thành Phố Đà Nẵng nhằm:

 Giảm thiểu vấn đề cản trở giao thông

 Tiết kiệm chi phí khi đỗ xe tại các địa điểm bãi xe thu phí

 Xây dựng lịch khám linh hoạt và hiệu quả cho các bác sĩ

 Dễ dàng tìm kiếm nhanh chóng

 Thanh toán online tiện ích, giảm thời gian chờ soát vé

 Thống kê doanh số xe đỗ mỗi ngày tại các bãi

2 Đối tượng nghiên cứu và phạm vi nghiên cứu

a) Đối tượng nghiên cứu

 Các khu vực trên địa bàn thành phố Đà Nẵng

b) Phạm vi nghiên cứu

 Đề tài áp dụng cho các khách hàng là tài xế, chủ xe hoặc người sử dụng

có nhu cầu tìm kiếm đỗ các loại xe ô tô tại các bãi đỗ trên địa bàn thành phố ĐàNẵng

3 Phương pháp nghiên cứu

SVTH: Trương Thanh Bình GVHD: TS.Hoàng Thị Mỹ Lệ 11

Xây dựng hệ thống website đặt chỗ bãi đỗ xe ô tô trên địa bàn thành phố Đà Nẵng

- Nghiên cứu lý thuyết: thu thập thông tin qua sách, các tài liệu, trang

mạng xã hội để tìm hiểu được các cơ sở lý thuyết liên quan vấn đề cầnnghiên cứu

- Triển khai thực nghiệp: xây dựng hệ thống Website.

4 Giải pháp công nghệ

 Ngôn ngữ lập trình: PHP, HTML/CSS3, Javscript, jQuery, Ajax

 Hệ quản trị cơ sở dữ liệu: MySQL

 Công cụ hỗ trợ: Visual Studio Code, MySQL, Xampp, Postman

5 Cấu trúc đồ án

 Mở đầu

 Chương 1: Cơ sở lý thuyết

 Chương 2: Phân tích thiết kế hệ thống

 Chương 3: Xây dựng chương trình

 Kết luận và hướng phát triển

-SVTH: Trương Thanh Bình GVHD: TS.Hoàng Thị Mỹ Lệ 12

Xây dựng hệ thống website đặt chỗ bãi đỗ xe ô tô trên địa bàn thành phố Đà Nẵng

CHƯƠNG 1 CƠ SỞ LÝ THUYẾT

PHP chạy trên môi trường Webserver và lưu trữ dữ liệu thông qua hệ quảntrị cơ sở dữ liệu nên PHP thường đi kèm với Apache, MySQL và hệ điều hànhLinux (LAMP)

 Apache là một phần mềm web server có nhiệm vụ tiếp nhận request từtrình duyệt người dùng sau đó chuyển giao cho PHP xử lý và gửi trả lạicho trình duyệt

 MySQL cũng tương tự như các hệ quản trị cơ sở dữ liệu khác(Postgress, Oracle, SQL server ) đóng vai trò là nơi lưu trữ và truy vấn

dữ liệu

 Linux: Hệ điều hành mã nguồn mở được sử dụng rất rộng rãi cho cácwebserver Thông thường các phiên bản được sử dụng nhiều nhất làRedHat Enterprise Linux, Ubuntu [1]

1.1.2 Lịch sử phát triển

Lúc đầu PHP được tạo ra bởi Rasmus Lerdorf vào năm 1994 sau đó đượchoàn hiện hơn bởi nhóm nghiên cứu PHP Bược ngoặt được Rasmus Lerdorf viếtmột số chương trình giao diện CGI bằng ngôn ngữ lập trình C Một tập lệnh là mộttập hợp các hướng dẫn lập trình được diễn giải trong thời gian chạy Ngôn ngữscript là ngôn ngữ diễn giải các script trong thời gian chạy Các tập lệnh thườngđược nhúng vào các môi trường phần mềm khác

Xây dựng hệ thống website đặt chỗ bãi đỗ xe ô tô trên địa bàn thành phố Đà Nẵng

Cho đến thời điểm hiện tại, Javascript đã phát triển và hoạt động trên hầukhắp mọi trình duyệt và trên các thiết bị di động đến máy tính bàn Chỉ trong hơn 20năm, Javascript từ một ngôn ngữ lập trình riêng trở thành một công cụ quan trọngnhất trên bộ công cụ của các chuyên viên lập trình web [2]

1.3 Tổng quan về hệ quản trị cơ sở dữ liệu MySQL Server

 MySQL là một hệ thống quản trị cơ sở dữ liệu mã nguồn mở (RelationalDatabase Management System, viết tắt là RDBMS) RDBMS là một phần mềm haydịch vụ dùng để tạo và quản lý các cơ sở dữ liệu (Database) theo hình thức quản lýcác mối liên hệ giữa chúng

 MySQL là một trong số các phần mềm RDBMS RDBMS và MySQLthường được cho là một vì độ phổ biến quá lớn của MySQL Các ứng dụng web lớnnhất như Facebook, Twitter, YouTube, Google, và Yahoo! đều dùng MySQL chomục đích lưu trữ dữ liệu Kể cả khi ban đầu nó chỉ được dùng rất hạn chế nhưng giờ

nó đã tương thích với nhiều hạ tầng máy tính quan trọng như Linux, macOS,Microsoft Windows, và Ubuntu [3]

1.4 Giới thiệu về XAMPP

 Xampp là một chương trình được sử dụng để tạo máy chủ web (web

server) được tích hợp sẵn với FTP Server, Apache, PHP, MySQL và phpMyAdmin.

Xampp có giao diện tương đối dễ hiểu và tiện lợi, tạo điều kiện cho người dùngtrong việc bật tắt hay khởi động lại dịch vụ máy chủ

 Xampp là một mã nguồn mở web server đa nền bao gồm Apache HTTPServer, Interpreters và MariaDB database chủ yếu dành cho các đối tượng sử dụng

SVTH: Trương Thanh Bình GVHD: TS.Hoàng Thị Mỹ Lệ 14

Xây dựng hệ thống website đặt chỗ bãi đỗ xe ô tô trên địa bàn thành phố Đà Nẵng

các ngôn ngữ lập trình như Perl hay là PHP có thể dễ dàng tạo ra máy chủ web localvới mục đích kiểm tra và triển khai website

 Xampp được thiết lập, phát triển dựa trên cơ sở mã nguồn mở, là công cụhoàn hảo để thiết kế và phát triển website Hiện chương trình này được ứng dụngtrên khá nhiều hệ điều hành như Windows, Linux, MacOS, Cross-platform, Solaris

 Với khả năng tương thích, hoạt động trên nhiều hệ điều hành và sự tích hợpnhiều công cụ, tính năng, Xampp được ứng dụng nhiều trong lĩnh vực công nghệ

Cụ thể:

 Xampp dùng trong xây dựng, phát triển website bằng ngôn ngữ lập trìnhPHP

 Nghiên cứu, phát triển trang web thông qua localhost máy tính cá nhân

 Học tập, nâng cấp và thử nghiệm các website

 Những ứng dụng rộng rãi này cũng là nguyên nhân khiến Xampp ngày càngđược biết đến và sử dụng rộng rãi [2]

1.5 JQuery và Ajax

1.5.1 JQuery

- JQuery là một thư viện JavaScript được thiết kế đơn giản hoá thao tácHTML DOM, cũng như xử lý sự kiện, hoạt ảnh CSS, và Ajax Nó là phần mềm mãnguồn mở, miễn phí sử dụng giấy phép MIT License Tính đến tháng 5 năm 2019,jQuery được 73% trong số 10 triệu trang web phổ biến nhất sử dụng Phân tích webchỉ ra rằng jQuery là thư viện JavasScript được triển khai rộng rãi nhất với tỷ suấtlợi nhuận lớn, có mức sử dụng nhiều hơn ít nhất ba đến bốn lần so với bất kỳ thưviện JavaScript nào khác

- JQuery được chính thức cho ra đời “chào sân” vào tháng 1 năm 2006 bởi

“cha đẻ” là John Resig tại BarCamp NYC Tính đến nay, nó vẫn được duy trì vàngày càng phát triển mạnh mẽ nhờ vào một nhóm đội ngũ các nhà phát triển phầnmềm của Google, đứng đầu là ông Timmy Wilson jQuery ngày càng được phổ biến

sử dụng rộng rãi đặc biệt là trên các website nổi tiếng [6]

1.5.2 Ajax

- Ajax (tiếng Anh: "Asynchronous JavaScript and XML" - nghĩa là

"JavaScript và XML không đồng bộ") là một nhóm các công nghệ phát triển webđược sử dụng để tạo các ứng dụng web động hay các ứng dụng giàu tính Internet(rich Internet application) Từ Ajax được ông Jesse James Garrett đưa ra và dùnglần đầu tiên vào tháng 2 năm 2005 để chỉ kỹ thuật này, mặc dù các hỗ trợ cho Ajax

đã có trên các chương trình duyệt từ 10 năm trước Ajax là một kỹ thuật phát triểnweb có tính tương tác cao bằng cách kết hợp các ngôn ngữ: HTML (hoặc XHTML)SVTH: Trương Thanh Bình GVHD: TS.Hoàng Thị Mỹ Lệ 15

Xây dựng hệ thống website đặt chỗ bãi đỗ xe ô tô trên địa bàn thành phố Đà Nẵng

với CSS trong việc hiển thị thông tin, Mô hình DOM (Document Object Model),được thực hiện thông qua JavaScript, nhằm hiển thị thông tin động và tương tác vớinhững thông tin được hiển thị, …

- Giống như DHTML, LAMP hay SPA, Ajax tự nó không phải là một côngnghệ mà là một thuật ngữ mô tả việc sử dụng kết hợp một nhóm nhiều công nghệvới nhau Trong đó, HTML và CSS được kết hợp với nhau để đánh dấu và địnhkiểu thông tin DOM và JavaScript kết hợp lại để hiển thị thông tin động và chophép người dùng tương tác với các thông tin này JavaScript cùng với đối tượngXMLHttpRequest hỗ trợ việc trao đổi dữ liệu bất đồng bộ giữa trình duyệt và máychủ nhằm hạn chế việc tải lại nguyên trang [5]

SVTH: Trương Thanh Bình GVHD: TS.Hoàng Thị Mỹ Lệ 16

Xây dựng hệ thống website đặt chỗ bãi đỗ xe ô tô trên địa bàn thành phố Đà Nẵng

CHƯƠNG 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG

2.1 Khảo sát hệ thống

2.1.1 Khảo sát thực tế

Hiện nay, tình trạng đổ xe không đúng quy định đang là một vấn đề,đa sốngười dùng ô tô khi đến 1 nơi nào đó, muốn dừng ô tô nhưng không biết để đâu, tìmđược bãi đỗ xe nhưng đã quá đầy hoặc không có chỗ Website đặt chỗ bãi đỗ xe ô tôtrên địa bàn TP Đà nẵng giúp giải quyết vấn đề trên Chủ bãi xe có thể đăng kíthông tin bãi đỗ xe trên hệ thống để mọi người có thể nhìn thấy và tiến hành đặtchỗ, chủ bãi xe còn quản lý được số lượng xe có trong bãi Đối với người dùng ô tô,website giúp họ tìm kiếm bãi đỗ gần nơi họ muốn đến nhất, đặt chỗ và thanh toántrực tiếp trên hệ thống

2.1.2 Khảo sát người dùng

Với hình thức hình thức đặt chỗ và thanh toán online tiện lợi của nghiệp vụ

hệ thống phù hợp với nhu cầu sử dụng của người dùng thuận tuận cho việc dichuyển và tìm kiếm các bãi đỗ xe phù hợp mà không gặp nhiều khó khăn

Các chủ bãi xe có thể dễ dàng đăng ký và quản lý bãi xe của mình rất đơngiản và nhanh chóng

2.2 Đặc tả yêu cầu nghiệp vụ

2.2.1 Người dùng chưa là thành viên

 Đăng kí tài khoản

 Cập nhật thông tin cá nhân

 Tìm kiếm bãi đỗ xe , lọc theo các khu vực

 Đặt chỗ bãi đỗ xe

 Xem phiếu đặt chỗ bãi đỗ xe

 Xem thông tin bãi đỗ xe

 Xem danh sách các bãi đỗ xe

 Thanh toán online

Xây dựng hệ thống website đặt chỗ bãi đỗ xe ô tô trên địa bàn thành phố Đà Nẵng

 Cập nhật thông tin cá nhân

 Cập nhật tình trạng xe ra vào bãi

 Đăng ký bãi đỗ xe

 Cập nhật thông tin bãi đỗ xe

 Thống kê doanh thu của bãi

2.2.4 Quản trị viên(Sở GTVT Đà Nẵng)

 Đăng nhập hệ thống

 Đăng xuất hệ thống

 Kiểm duyệt đăng ký bãi đỗ

 Quản lý tài khoản và phân quyền tài khoản

 Xem danh sách bãi đỗ xe

 Thống kê số lượng bãi xe đăng ký

2.3.2 Các yêu cầu chức năng

 Người dùng chưa là thành viên

 Xem danh sách bãi đỗ xe, xem chi tiết thông tin bãi đỗ xe

 Tìm kiếm bãi đỗ xe (lọc theo khu vực)

 Đăng ký tài khoản

- Xem phiếu đặt chỗ bãi đỗ xe

- Thanh toán online

Xây dựng hệ thống website đặt chỗ bãi đỗ xe ô tô trên địa bàn thành phố Đà Nẵng

 Cập nhật thông tin cá nhân

 Cập nhật tình trạng xe ra vào bãi

 Đăng ký bãi đỗ xe

 Cập nhật thông tin bãi đỗ xe

 Thống kê doanh thu của bãi

 Quản trị viên

 Đăng nhập hệ thống

 Đăng xuất hệ thống

 Kiểm duyệt đăng ký bãi đỗ

 Quản lý tài khoản và phân quyền tài khoản

 Xem danh sách bãi đỗ xe

 Thống kê số lượng bãi xe đăng ký

2.3.3 Yêu cầu phi chức năng

- Giao diện, đẹp mắt, đơn giản, dễ sử dụng

- Tốc độ xử lý nhanh chóng, đảm bảo tính bảo mật, an toàn

SVTH: Trương Thanh Bình GVHD: TS.Hoàng Thị Mỹ Lệ 19

Xây dựng hệ thống website đặt chỗ bãi đỗ xe ô tô trên địa bàn thành phố Đà Nẵng

2.4 Biểu đồ Use Case

2.4.1 Biểu đồ tổng quát

Hình 2.4.1 Use case tổng quát

SVTH: Trương Thanh Bình GVHD: TS.Hoàng Thị Mỹ Lệ 20

Xây dựng hệ thống website đặt chỗ bãi đỗ xe ô tô trên địa bàn thành phố Đà Nẵng

2.5 Kịch bản cho Use Case

2.5.1 Use-case “Đăng ký”

Bảng 2.5.1 Use-case “Đăng ký”

Mô tả Người dùng đăng ký tài khoản trên hệ thống

Đầu ra Hệ thống thông báo đăng ký thành công

Các bước thực hiện Bước 1:Actor chọn nút Đăng nhập trên thanh Header

Bước 2:Actor chọn Đăng kí tài khoảnBước 3:Actor nhập tên đăng nhập ,mật khẩu, email ,SĐT,

Bước 4:Actor chọn loại tài khoảnBước 5:Nhấn nút đăng ký

Bước 6:Hệ thống kiểm tra và thông báo thành công

 Kết thúc usercase

Các bước phát sinh Người dùng quay về trang chủ, kết thúc usercase

Các trường hợp động

ngoại lệ

Tên đăng nhập đã tồn tại,mật khẩu không đủ 8 ký tự

1 chữ hoa và 1 chữ thường => quay lại bước 3

2.5.2 Use-case “Đăng nhập”

Bảng 2.5.2 Use-case “Đăng nhập”

Đầu ra Hệ thống thông báo đăng ký thành công

Các bước thực hiện Bước 1: Actor Chọn đăng nhập

Bước 2: Actor nhập tên đăng nhập và mật khẩu Bước 3: Actor bấm nút đăng nhập

Bước 4:Hệ thống thông báo đăng nhập thành công =>

Kết thúc usecase

Các bước phát sinh Người dùng quay về trang chủ => Kết thúc usecase

Các trường hợp

động ngoại lệ Actor nhập sai tên đăng nhập hoặc mật khẩu => quay về bước 2

SVTH: Trương Thanh Bình GVHD: TS.Hoàng Thị Mỹ Lệ 21

Xây dựng hệ thống website đặt chỗ bãi đỗ xe ô tô trên địa bàn thành phố Đà Nẵng

2.5.3 Use-case “Cập nhật thông tin cá nhân”

Bảng 2.5.3 Use-case “Cập nhật thông tin cá nhân”

Tên Usecase Cập nhật thông tin cá nhân

Các bước thực

hiện

Bước 1: Actor chọn mục Thông tin tài khoản Bước 2: Hệ thống hiển thị thông tin cá nhân người dùng

Bước 3: Actor nhập thông tin cá nhân cần cập nhật Bước 4: Hệ thống thông báo cập nhật thông tin thành công  Kết thúc usecase

2.5.4 Use-case “Xem danh sách Bãi đỗ xe”

Bảng 2.5.4 Use-case “Xem danh sách Bãi đỗ xe”

Các bước thực hiện Bước 1: Actor truy cập hệ thống

Bước 2: Actor xem danh sách các bãi đỗ xe trong trang chủ

Bước 4: Hệ thống trả kết quả Kết thúc usecase

Các bước phát sinh Người dùng quay về  Kết thúc usecase

Các trường hợp

động ngoại lệ

SVTH: Trương Thanh Bình GVHD: TS.Hoàng Thị Mỹ Lệ 22

Xây dựng hệ thống website đặt chỗ bãi đỗ xe ô tô trên địa bàn thành phố Đà Nẵng

2.5.5 Use-case “Tìm kiếm Bãi đỗ xe”

Bảng 2.5.5 Use-case “Tìm kiếm Bãi đỗ xe”

Các bước thực hiện Bước 1: Actor chọn mục địa điểm

Bước 2: Actor nhập từ khoá vào ô Tìm kiếm Bước 3: Actor nhấn nút Tìm kiếm

Bước 4: Hệ thống kiểm tra và hiển thị danh sách tìm kiếm

Các bước phát sinh Bước 5: Người dùng quay về trang chủ  kết thúc

2.5.6 Use-case “Lọc danh sách Bãi đỗ xe”

Bảng 2.5.6 Use-case “Lọc danh sách bãi đỗ xe”

Tên Usecase Lọc danh sách bãi xe

Mô tả Người dùng xem danh sách bãi xe theo khu vực

Actors Người dùng chưa là thành viên, Khách hàng , admin

Đầu vào Danh sách các khu vực trên hệ thống

Đầu ra Danh sách bãi đỗ xe theo từng khu vực

Các bước thực hiện Bước 1: Actor chọn mục địa điểm

Bước 2: Actor chọn ComboBox “Chọn nơi bạn cầnđỗ?”  ComboBox sổ xuống danh sách khu vực

Bước 3: Actor chọn khu vực cần tìm bãi đỗ xeBước 4: Hệ thống kiểm tra và hiển thị danh sách tìmkiếm

Các bước phát sinh Bước 5: Người dùng quay về trang chủ  kết thúc

Xây dựng hệ thống website đặt chỗ bãi đỗ xe ô tô trên địa bàn thành phố Đà Nẵng

2.5.7 Use-case “Đặt chỗ Bãi đỗ xe”

Bảng 2.5.7 Use-case “Đặt chỗ Bãi đỗ xe”

Tên Usecase Đặt chỗ bãi đỗ xe

Mô tả Người dùng đặt chỗ bãi đỗ xe

Thông tin bãi đỗ xe

Đầu ra Hệ thống thông báo đặt bãi thành công

Các bước thực

hiện Bước 1: Actor chọn bãi đỗ xe cần đặt chỗBước 2: Hệ thống hiển thị thông tin bãi đỗ xe

Bước 3: Actor chọn vị trí cần đỗ xeBước 4: Actor chọn ngày vào bãi và ngày rời bãiBước 5: Actor chọn vào nút tiến hành đặt chỗBước 4: Hệ thống thông báo đặt chỗ thành công  Kết thúc usecase

Vị trí đỗ xe đã có người đặt chỗ  quay lại bước 3

2.5.8 Use-case “Thống kê Bãi xe đăng ký”

Bảng 2.5.8 Use-case “Thống kê Bãi xe đăng ký”

Tên Usecase Thống kê bãi xe đăng ký

Mô tả Quản trị viên thống kê bãi xe đăng ký đến ngày hiện tại

Đầu ra Hệ thống hiển thị thống kê số bãi xe đăng ký

Các bước thực hiện Bước 1: Actor chọn mục thống kê

Bước 2: Hệ thống hiển thị thống kê số bãi xe đăng ký tính đến ngày hiện tại thành công  Kết thúc usecase

Các bước phát sinh Quản trị viên quay trở về  Kết thúc usecase

Các trường hợp

động ngoại lệ

Không có kết quả  quay lại bước 4

2.5.9 Use-case “Xem phiếu đặt chỗ Bãi đỗ xe”

Bảng 2.5.9 Use-case “Xem phiếu đặt chỗ Bãi đỗ xe”

Tên Usecase Xem phiếu đặt chỗ bãi đỗ xe

Mô tả Quản trị viên quản lý tài khoản của người dùng

SVTH: Trương Thanh Bình GVHD: TS.Hoàng Thị Mỹ Lệ 24

Xây dựng hệ thống website đặt chỗ bãi đỗ xe ô tô trên địa bàn thành phố Đà Nẵng

Đầu vào Thông tin phiếu đặt chỗ bãi đỗ xe

Đầu ra Hệ thống hiển thị thông tin phiếu đặt chỗ bãi đỗ xe

Các bước thực hiện Bước 1: Actor chọn mục phiếu của tôi

Bước 2: Hệ thống hiển thị danh sách các phiếu gửi xeBước 3: Actor xem thông tin phiếu gửi

 Chọn Xác nhận đơn nếu đơn gửi xe chưa xácnhận

 Chọn Huỷ đơn nếu muôn huỷ đơn gửi xeBước 4: Actor chọn Xem chi tiết phiếu đặt chỗ Bước 4: Hệ thống hiển thị thông báo  Kết thúcusecase

Các bước phát sinh Người dùng quay về trang chủ  Kết thúc usecase

Các trường hợp động

ngoại lệ Phiếu gửi xe không hợp lêj  quay lại bước 3

2.5.10.Use-case “Duyệt Bãi đỗ xe”

Bảng 2.5.10 Use-case “Duyệt bãi đỗ xe”

Tên Usecase Duyệt bãi đỗ xe

Mô tả Quản trị viên duyệt bãi đỗ xe

Đầu vào Thông tin chủ bãi

Thông tin bãi đỗ xe

Đầu ra Hệ thống thông báo duyệt bãi xe thành công

Các bước thực

hiện Bước 1: Actor chọn mục duyệt bãi đỗ xeBước 2: Hệ thống hiển thị mục duyệt bãi đỗ xe

Bước 3: Actor chọn xem thông tin bãi đỗ xe

 Actor chọn cho phép hoạt động nếu bãi xe phù hợp

 Actor chọn không cho phép hoạt động nếu bãi xekhông phù hợp

Bước 4: Hệ thống thông báo cập nhật thành công  Kết thúc usecase

Các bước phát

sinh

Quản trị viên nhấn nút quay về  Kết thúc usecase

Các trường hợp

động ngoại lệ Bãi xe không tồn tại  Kết thúc usecase

SVTH: Trương Thanh Bình GVHD: TS.Hoàng Thị Mỹ Lệ 25