Xây dựng website hỗ trợ đăng thông tin tìm người sửa chữa dịch vụ trong nhà tại thành phố đà nẵng

Tên đề tài: Xây dựng website hỗ trợ đăng thông tin tìm người sửa chữa dịch vụ trong nhà tại thành phố Đà Nẵng 2.. Nội dung chính của đồ án: Quá trình xây dựng website hỗ trợ đăng thông t

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

KHOA CÔNG NGHỆ SỐ

ĐỒ ÁN TỐT NGHIỆP

ĐẠI HỌCNGÀNH: SƯ PHẠM CÔNG NGHIỆP CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN

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

KHOA CÔNG NGHỆ SỐ

ĐỒ ÁN TỐT NGHIỆP

ĐẠI HỌC NGÀNH: SƯ PHẠM CÔNG NGHIỆP

CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

Đà Nẵng, ngày tháng năm 2023 Giảng viên hướng dẫn

NHẬN XÉT CỦA NGƯỜI PHẢN BIỆN

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

Người phản biện

Khách vãng lai sau khi truy cập website có thể xem các dịch vụ của trang website,thông tin về website, phương thức liên hệ.

Khách hàng đã đăng nhập có thể đăng bài để tìm dịch vụ cần sửa chữa, xem thôngtin của thợ sửa chữa, khi thợ sửa chữa hoàn thành thì xác nhận hoàn tất sửa chữa, đánhgiá bình luận dịch vụ được sửa chữa

Thợ sửa chữa có thể tìm kiếm công việc, báo giá cho khách hàng, xác nhận hoàntất thanh toán sau khi hoàn thành công việc, tìm kiếm bài đăng sửa chữa

Quản trị viên sẽ là người quản trị cao nhất của hệ thống, quản lý tất cả các thôngtin của website như danh sách bài đăng, danh sách người dùng, bình luận,

Bài báo cáo ngoài các nội dung gồm phần mở đầu và phần kết thúc thì bố cục gồm

có 3 chương:

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

Nêu các cơ sở lý thuyết sẽ áp dụng trong hệ thống: ngôn ngữ HTML, CSS,JavaScript, ngôn ngữ lập trình PHP, hệ quản trị cơ sở dữ liệu MySQL, thư việnReactjs,

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

Trình bày các sơ đồ use case, kịch bản cho các use case, sơ đồ ERD, sơ đồ hoạtđộng của các chức năng trong hệ thống Từ những phân tích ở trên, tiến hành thiết kế

cơ sở dữ liệu cho hệ thống sẽ triển khai

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

Từ những phân tích và thiết kế về hệ thống ở trên, áp dụng xây dựng các chứcnăng hệ thống Trình bày giao diện của phần mềm triển khai

i

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

KHOA CÔNG NGHỆ SỐ CỘNG HÒA XÃ HÔI CHỦ NGHĨA VIỆT NAMĐộc lập - Tự do - Hạnh phúc

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

Giảng viên hướng dẫn: Th.S Đỗ Phú Huy

Sinh viên thực hiện: Nguyễn Thị Ý Nhi Mã SV: 1911514110114

1 Tên đề tài: Xây dựng website hỗ trợ đăng thông tin tìm người sửa chữa dịch vụ

trong nhà tại thành phố Đà Nẵng

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

https://laravel.com/docs/8.x

https://legacy.reactjs.org/

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

Quá trình xây dựng website hỗ trợ đăng thông tin tìm người sửa chữa dịch vụ trongnhà tại thành phố Đà Nẵng:

- Thu thập thông tin tài liệu liên quan và khảo sát thực tế

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

- Phân tích thiết kế cơ sơ dữ liệu

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

LỜI NÓI ĐẦU

Ngày nay, việc ứng dụng công nghệ thông tin đã trở nên phổ biến trong hầu hếtmọi cơ quan, doanh nghiệp, trường học đặc biệt là việc áp dụng các giải pháp tin họctrong công tác quản lý hoặc để xây dựng những hệ thống phục vụ cho một mục đíchnào đó

Công nghệ thông tin là một trong những lĩnh vực quan trọng hàng đầu của thếgiới.Việc thành lập các công ty, ngân hàng, các tổ chức lớn, cho đến những thànhphần nhỏhơn là doanh nghiệp, cửa hàng ít hay nhiều đều cần đến công nghệ thông tin như làmột thành phần không thể thiếu trong việc quả lý, xây dựng và phát triển về sau này.Với sự hỗ trợ đắc lực từ công nghệ thông tín, tốc độ phát triển chung của xã hội đãđược tăng lên rất nhiều lần

Hệ thống “Hỗ trợ đăng thông tin tìm người sửa chữa dịch vụ trong nhà tại thànhphố Đà Nẵng” sẽ giúp người cần sửa chữa và người thợ kết nối được với nhau Emchọn đề tài của mình với mục đích xây dựng một môi trường giúp người cần sửa chữatìm được người phù hợp với thời gian, tiền bạc đồng thời người thợ tìm kiếm làm việccông việc phù hợp với mình Hệ thống này bảo mật thông tin của khách hàng cũng như

là của người thợ, cần đăng nhập với có thể xem được cái thông tin trong hệ thống

iii

LỜI CẢM ƠN

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 đỡ emthực hiện đề tài này, đặc biệt là ThS Đỗ Phú Huy, thầy đã tận tình giúp đỡ em trongsuốt quá trình thực hiện đề tài tốt nghiệp này

Đồng thời, em cũng xin chân thành cảm ơn quý thầy cô thuộc ngành Công NghệThông Tin trường Đại học Sư phạm Kỹ thuật - Đại học Đà Nẵng đã truyền đạt nhữngkiến thức cần thiết và những kinh nghiệm quý báu cho chúng em trong suốt thời giantrên giảng đường để em thực hiện tốt đề tài này

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ên khôngthể 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 Thêm nữa là, những lời góp ý đó có thể giúp em tránh đượcnhững sai lầm sau này

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

iv

LỜI CAM ĐOAN

Em xin cam đoan đồ án “Xây dựng website hỗ trợ đăng thông tin tìm người sửa

chữa dịch vụ trong nhà tại thành phố Đà Nẵng” là một công trình nghiên cứu độc lập

dưới sự hướng dẫn của giảng viên Th.S Đỗ Phú Huy Ngoài ra không có bất cứ sự saochép nào của người khác Đề tài, nội dung báo cáo đồ án là sản phẩm mà em đã nỗ lựcnghiên cứu trong quá trình học tập tại trường Các kết quả trình bày trong báo cáo làhoàn toàn trung thực, em xin chịu hoàn toàn trách nhiệm, kỷ luật của trưởng bộ môn

và nhà trường đề ra nếu như có vấn đề xảy ra

Sinh viên thực hiện

v

MỤC LỤC

MỤC LỤC vi

DANH MỤC BẢNG BIỂU ix

DANH MỤC HÌNH ẢNH x

DANH MỤC CHỮ VIẾT TẮT xii

MỞ ĐẦU 1

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

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

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

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

b Phạm vi nghiên cứu: 2

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

5 Giải pháp công nghệ 2

6 Cấu trúc đồ án 3

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

1.1 Tổng quan về ngôn ngữ lập trình 4

1.1.1 HTML 4

1.1.2 CSS 5

1.1.3 PHP 5

1.1.4 JavaScript 6

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

1.3 Framework và thư viện hỗ trợ 7

1.3.1 Giới thiệu Laravel Framework 7

1.3.2 Thư viện ReactJS 8

1.3.3 Thư viện Bootstrap 8

1.4 Công cụ hỗ trợ xây dựng hệ thống 9

1.4.1 Visual Studio Code 9

1.4.2 Xampp 10

1.5 Lý thuyết xây dựng website 11

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

2.1 Khảo sát yêu cầu 13

2.1.1 Khảo sát hệ thống 13

vi

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

2.1.2.1 Khách vãng lai 13

2.1.2.2 Khách hàng 13

2.1.2.3 Thợ sửa chữa 13

2.1.2.4 Quản trị viên 14

2.2.1 Liệt kê Actor và Usecase 14

2.2.1.1 Khách vãng lai 14

2.2.1.2 Khách hàng 14

2.2.1.3 Thợ sửa chữa 14

2.2.1.4 Quản trị viên 14

2.3 Sơ đồ Use case 16

2.4 Đặc tả các chức năng chính 17

2.4.1 Đăng ký tài khoản thành viên 17

2.4.2 Đăng tin tìm thợ sửa chữa 17

2.4.3 Xác nhận thợ sửa chữa 18

2.4.4 Xác nhận hoàn thành sửa chữa 19

2.4.5 Đánh giá sao và nhận xét 19

2.4.6 Xem lịch sử bài đăng 20

2.4.7 Liên hệ với khách hàng 20

2.4.8 Xác nhận hoàn thành thanh toán 21

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

2.4.10 Duyệt bài đăng của khách hàng 22

2.4.11 Quản lý tài khoản 23

2.4.12 Quản lý bình luận, đánh giá 23

2.4.13 Đăng nhập 24

2.5 Sơ đồ hoạt động 25

2.5.1 Đăng ký tài khoản thành viên 25

2.5.2 Đăng tin tìm thợ sửa chữa 25

2.5.3 Xác nhận thợ sửa chữa 25

2.5.4 Xác nhận hoàn thành sửa chữa 25

2.5.5 Đánh giá sao và nhận xét 26

2.5.6 Liên hệ với khách hàng 26

vii

2.5.7 Xác nhận hoàn thành thanh toán 26

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

2.5.9 Duyệt bài đăng của khách hàng 27

2.5.10 Đăng nhập 28

2.6 Sơ đồ quan hệ 28

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

2.7.1 Đăng ký tài khoản 29

2.7.2 Cập nhật thông tin tài khoản 30

2.7.3 Thêm mới bài đăng 30

2.7.4 Liên hệ với khách hàng 31

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

3.1 Giao diện khách vãng lai và khách hàng 33

3.1.1 Giao diện trang chủ khi chưa đăng nhập 33

3.1.2 Giao diện đăng nhập tài khoản 33

3.1.3 Giao diện của khách hàng sau khi đăng nhập 34

3.1.4 Giao diện danh sách bài đăng 34

3.1.5 Giao diện thông tin sửa chữa 35

3.1.6 Giao diện đánh giá sửa chữa 35

3.1.7 Giao diện lịch sử bài đăng 36

3.2 Giao diện thợ sửa chữa 37

3.2.1 Giao diện thợ sửa chữa sau khi đăng nhập 37

3.2.2 Giao diện thông tin sửa chữa 37

3.2.3 Giao diện thông tin đánh giá sao 37

3.2.4 Giao diện cập nhật thông tin cá nhân 38

3.2 Giao diện trang quản trị 38

3.2.1 Giao diện chính của trang quản trị 38

3.2.3 Giao diện quản lý bài đăng 39

3.2.4 Giao diện quản lý người dùng 39

3.2.5 Giao diện duyệt bài đăng của khách hàng 40

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

TÀI LIỆU THAM KHẢO 43

viii

DANH MỤC BẢNG BIỂU

Bảng 2 1 Kịch bản cho use case đăng ký tài khoản thành viên 17

Bảng 2 2 Kịch bản cho use case đăng tin tìm thợ sửa chữa 18

Bảng 2 3 Kịch bản cho use case xác nhận thợ sửa chữa 18

Bảng 2 4 Kịch bản cho use case xác nhận sửa chữa 19

Bảng 2 5 Kịch bản cho use case bình luận, đánh giá sách 20

Bảng 2 6 Kịch bản cho use case xem lịch bài đăng 20

Bảng 2 7 Kịch bản cho use case liên hệ với khách hàng 21

Bảng 2 8 Kịch bản cho use case xác nhận thanh toán 21

Bảng 2 9 Kịch bản cho use case cập nhật thông tin cá nhân 22

Bảng 2 10 Kịch bản cho use case duyệt đăng tin của khách hàng 23

Bảng 2 11 Kịch bản cho use case quản lý tài khoản 23

Bảng 2 12 Kịch bản cho use case quản lý bình luận, đánh giá 24

Bảng 2 13 Kịch bản cho use case đăng nhập 24

Bảng 2 14 Bảng User 30

Bảng 2 15 Bảng Information 30

Bảng 2 16 Bảng Post 30

Bảng 2 17 Bảng Ward 31

Bảng 2 18 Bảng District 31

Bảng 2 19 Bảng Category 31

Bảng 2 20 Bảng Image 31

Bảng 2 21 Bảng ImformRepair 32

Bảng 2 22 Bảng ListRepairman 32

ix

DANH MỤC HÌNH ẢNH

Hình 1 1 Icon HTML 4

Hình 1 2 Icon CSS 5

Hình 1 3 Icon PHP 6

Hình 1 4 Icon JavaScript 6

Hình 1 5 Icon MySQL 7

Hình 1 6 Icon Laravel 7

Hình 1 7 Icon ReactJS 8

Hình 1 8 Icon Bootstrap 9

Hình 1 9 Icon Visual Studio Code 9

Hình 1 10 Ảnh minh họa Xampp 10

Hình 1 11 Ảnh minh họa mô hình JWT 12

Hình 2 1 Sơ đồ Use case 16 Hình 2 2 Sơ đồ hoạt động Đăng ký thành viên 25

Hình 2 3 Sơ đồ hoạt động Đăng tin tìm thợ sửa chữa 25

Hình 2 4 Sơ đồ hoạt động Xác nhận thợ sửa chữa 25

Hình 2 5 Sơ đồ hoạt động Xác nhận hoàn thành sửa chữa 26

Hình 2 6 Sơ đồ hoạt động Đánh giá sao và nhận xét 26

Hình 2 7 Sơ đồ hoạt động Liên hệ với khách hàng 26

Hình 2 8 Sơ đồ hoạt động Xác nhận hoàn thành thanh toán 26

Hình 2 9 Sơ đồ hoạt động Cập nhật thông tin cá nhân 27

Hình 2 10 Sơ đồ hoạt động Duyệt bài đăng của khách hàng 28

Hình 2 11 Sơ đồ hoạt động Đăng nhập 28

Hình 2 10 Sơ đồ quan hệ 29

Hình 3 1 Giao diện trang chủ khi chưa đăng nhập 33 Hình 3 2 Giao diện đăng nhập tài khoản 34

x

Hình 3 3 Giao diện khách hàng sau khi đăng nhập 34

Hình 3 4 Giao diện danh sách bài đăng 35

Hình 3 5 Giao diện thông tin sửa chữa 35

Hình 3 6 Giao diện trang thông tin sách 36

Hình 3 7 Giao diện lịch sử bài đăng 36

Hình 3 8 Giao diện thợ sửa chữa 37

Hình 3 9 Giao diện thông tin sửa chữa 37

Hình 3 10 Giao diện thông tin đánh giá sao 38

Hình 3 11 Giao diện thông tin đánh giá sao 38

Hình 3 12 Giao diện chính trang quản trị 39

Hình 3 13 Giao diện quản lý danh mục sách 39

Hình 3 14 Giao diện quản lý người dùng 40

Hình 3 15 Giao diện duyệt bài đăng của khách hàng 40

xi

DANH MỤC CHỮ VIẾT TẮT

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

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

3 CSS Cascading Style Sheets Ngôn ngữ tạo phong cách cho

website

4 PHP Hypertext Preprocessor Trình xử lý siêu văn bản

xii

Xây dựng website hỗ trợ đăng thông tin tìm người sửa chữa dịch vụ trong nhà tại thành phố Đà Nẵng

MỞ ĐẦU

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

Hiện nay, trong thành phố Đà Nẵng, có nhiều người cần sửa chữa và bảo trì cácthiết bị trong nhà, từ sửa chữa điện, nước, đến sửa chữa thiết bị gia đình khác như máylạnh, máy giặt, tivi, vv

Lúc trước, khi muốn sửa chữa một thiết bị trong nhà thì phải mang thiết bị đó đếnnơi sửa chữa rồi sau đó mang lại thiết bị đó về nếu như thiết bị đó lớn thì mất công vàthời gian cho chủ nhà Một website hỗ trợ đăng thông tin tìm người sửa chữa dịch vụtrong nhà sẽ giúp kết nối những người cần sửa chữa với những người có kỹ năng vàkinh nghiệm tương ứng Thông qua một trang web, người dùng có thể dễ dàng đăngthông tin về vấn đề cần sửa chữa và yêu cầu dịch vụ Điều này tiết kiệm thời gian vàcông sức so với việc tìm kiếm qua các phương tiện truyền thông truyền thống hoặcphải thăm các cửa hàng sửa chữa trực tiếp

Một website chất lượng có thể cung cấp thông tin chi tiết về các người sửa chữadịch vụ trong nhà, bao gồm đánh giá từ khách hàng trước đó Điều này giúp ngườidùng đưa ra quyết định thông minh về việc chọn người sửa chữa phù hợp và đảm bảochất lượng dịch vụ Không chỉ vậy xây dựng một website hỗ trợ người sửa chữa dịch

vụ trong nhà tại Đà Nẵng có thể giúp thúc đẩy hoạt động kinh doanh của các chủ thợ

và doanh nghiệp địa phương Những người sửa chữa có thể tìm thấy công việc mớithông qua website này, trong khi người dùng có thể tìm thấy những người có kỹ năngphù hợp để giải quyết các vấn đề sửa chữa trong nhà

Em quyết định thực hiện đề tài “Xây dựng website hỗ trợ đăng thông tin tìm

người sửa chữa dịch vụ trong nhà tại thành phố Đà Nẵng” Những khách hàng có

nhu cầu sửa chữa các dịch vụ trong nhà sẽ tìm được thợ phù hợp về thời gian và giá cả

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

- Mục tiêu:

Xây dựng một nền tảng kết nối giữa người cần sửa chữa và thợ sửa chữa, nhằmgiúp khách hàng tìm thấy những thợ sửa chữa phù hợp và đáng tin cậy từ danhsách các thợ đăng ký sửa chữa Hệ thống cho phép khách hàng đăng thông tincần sửa chữa và từ đó, tìm kiếm và chọn lựa thợ sửa chữa phù hợp từ danh sáchcác thợ đăng ký trên hệ thống

Đối với thợ sửa chữa, hệ thống cung cấp cơ hội để họ tìm kiếm và đăng kýnhững công việc phù hợp với năng lực và kỹ năng của mình Thợ sửa chữa cóthể tìm thấy thông tin về các công việc cần thiết trên hệ thống và đăng ký tham

Xây dựng website hỗ trợ đăng thông tin tìm người sửa chữa dịch vụ trong nhà tại thành phố Đà Nẵng

gia một cách thuận tiện Điều này giúp thợ sửa chữa tối ưu hóa thời gian làmviệc và tăng khả năng kiếm được thu nhập

Ngoài ra, hệ thống cũng cung cấp một giao diện quản trị viên cho phép quản lýtoàn diện và hiệu quả của hệ thống Quản trị viên có thể theo dõi và duyệt cáctài khoản của khách hàng và thợ sửa chữa, kiểm soát thông tin bài đăng và đánhgiá, và quản lý danh mục các chức năng và tính năng trên hệ thống Việc nàyđảm bảo rằng hệ thống được vận hành một cách chính xác và đáng tin cậy

- Nhiệm vụ:

 Nghiên cứu đề tài

 Phân tích và thiết kế hệ thống

 Thiết kế và xây dựng website

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

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

 Khách hàng là những người cần sửa chữa các thiết bị trong nhà hoặc cácdịch vụ khác

 Thợ là những người tìm việc làm hay các thợ có kinh nghiệm muốn làmthêm ngoài giờ

 Tài liệu tham khảo

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

 Website này chỉ ứng dụng trên khu vực thành phố Đà Nẵng

 Đề tài xây dựng website hỗ trợ đăng thông tin tìm người sửa chữa dịch

vụ trong nhà tại thành phố đà nẵng

 Lĩnh vực thiết kế website

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

- Tham khảo các website dịch vụ sửa chữa trên mạng

- Thiết kế cơ sở dữ liệu, sơ đồ usecase, sơ đồ hoạt động: StarUML

- Hỗ trợ soạn thảo mã nguồn: Visual Studio Code

Xây dựng website hỗ trợ đăng thông tin tìm người sửa chữa dịch vụ trong nhà tại thành phố Đà Nẵng

- Ngôn ngữ lập trình:

 Backend: PHP (Framework Laravel)

 Frontend: Reactjs

- Thư viện: Framework Laravel, Bootstrap 5, ReactJS

- Hệ quản trị CSDL: MySQL (chạy trên môi trường XAMPP)

6 Cấu trúc đồ án

Mở đầu: Giới thiệu lý do và các mục tiêu mà đề tài cần giải quyết, phạm vi

nghiên cứu của đề tài Giới thiệu tóm tắt nội dung sẽ được trình bày trong các

chương tiếp theo

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.

Tài liệu tham khảo

Xây dựng website hỗ trợ đăng thông tin tìm người sửa chữa dịch vụ trong nhà tại thành phố Đà Nẵng

CHƯƠNG 1 CƠ SỞ LÝ THUYẾT1.1 Tổng quan về ngôn ngữ lập trình

1.1.1 HTML

HTML là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web vớicác mẫu thông tin được trình bày trên World Wide Web Cùng với CSS và Javascript,HTML tạo ra bộ ba nền tảng kỹ thuật cho World Wide Web

Hình 1 1 Icon HTML

Các trình duyệt web nhận tài liệu HTML từ một web server hoặc một kho lưu trữcục bộ và render tài liệu đó thành các trang web đa phương tiện HTML mô tả cấu trúccủa một trang web về mặt ngữ nghĩa và các dấu hiệu ban đầu được bao gồm cho sựxuất hiện của tài liệu

Các phần tử HTML là các khối xây dựng của các trang HTML Với cấu trúcHTML, hình ảnh và các đối tượng khác như biểu mẫu tương tác có thể được nhúngvào trang được hiển thị HTML cung cấp một phương tiện để tạo tài liệu có cấu trúcbằng cách biểu thị ngữ nghĩa cấu trúc cho văn bản như headings, paragraphs, lists,links, quotes và các mục khác Các phần tử HTML được phân định bằng các thẻ, đượcviết bằng dấu ngoặc nhọn Các thẻ như <img /> và <input /> giới thiệu trực tiếp nộidung vào trang Các thẻ khác như <p> bao quanh và cung cấp thông tin về văn bản tàiliệu và có thể bao gồm các thẻ khác làm phần tử phụ Các trình duyệt không hiển thịcác thẻ HTML, nhưng sử dụng chúng để diễn giải nội dung của trang

HTML có thể nhúng các chương trình được viết bằng scripting như JavaScript,điều này ảnh hưởng đến hành vi và nội dung của các trang web Việc bao gồm CSSxác định giao diện và bố cục của nội dung World Wide Web Consortium (W3C),trước đây là đơn vị bảo trì HTML và là người duy trì hiện tại của các tiêu chuẩn CSS,

đã khuyến khích việc sử dụng CSS trên HTML trình bày rõ ràng kể từ năm 1997

Xây dựng website hỗ trợ đăng thông tin tìm người sửa chữa dịch vụ trong nhà tại thành phố Đà Nẵng

Xây dựng website hỗ trợ đăng thông tin tìm người sửa chữa dịch vụ trong nhà tại thành phố Đà Nẵng

1.1.4 JavaScript

JavaScript là ngôn ngữ lập trình được nhà phát triển sử dụng để tạo trang webtương tác Từ làm mới bảng tin trên trang mạng xã hội đến hiển thị hình ảnh động vàbản đồ tương tác, các chức năng của JavaScript có thể cải thiện trải nghiệm ngườidùng của trang web Là ngôn ngữ kịch bản phía máy khách, JavaScript là một trongnhững công nghệ cốt lõi của World Wide Web

Hình 1 4 Icon JavaScript

Khi ngôn ngữ này phát triển hoàn thiện, các nhà phát triển JavaScript đã thiết lậpcác thư viện, khung và cách thức lập trình cũng như bắt đầu sử dụng ngôn ngữ này bênngoài trình duyệt web Ngày nay, bạn có thể sử dụng JavaScript để thực hiện hoạtđộng phát triển cả ở phía máy khách và máy chủ. 

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

MySQL là một hệ thống quản trị cơ sở dữ liệu quan hệ (RDBMS) hoạt động theo

mô hình client-server. RDBMS là một phần mềm hay dị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

Xây dựng website hỗ trợ đăng thông tin tìm người sửa chữa dịch vụ trong nhà tại thành phố Đà NẵngMySQL là hệ quản trị cơ sở dữ liệu tự do nguồn mở phổ biến nhất thế giới vàđược các nhà phát triển rất ưa chuộng trong quá trình phát triển ứng dụng Vì MySQL

là hệ quản trị cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, có tính khả chuyển, 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ất mạnh.Với tốc độ và tính bảo mật cao, MySQL rất thích hợp cho các ứng dụng có truy cập cơ

sở dữ liệu trên internet

Hình 1 5 Icon MySQL

MySQL là một trong số các phần mềm RDBMS RDBMS và MySQL thườngđược cho là một vì độ phổ biến quá lớn của MySQL Các ứng dụng web lớn nhất nhưFacebook, Twitter, YouTube, Google, và Yahoo! đều dùng MySQL cho mục đích lưutrữ dữ liệu Kể cả khi ban đầu nó chỉ được dùng rất hạn chế nhưng giờ nó đã tươngthích với nhiều hạ tầng máy tính quan trọng như Linux, macOS, Microsoft Windows,

và Ubuntu

1.3 Framework và thư viện hỗ trợ

1.3.1 Giới thiệu Laravel Framework

Laravel là một PHP framework mã nguồn mở và miễn phí, được phát triển bởiTaylor Otwell và nhắm vào mục tiêu hỗ trợ phát triển các ứng dụng web theo kiếmtrúc model-view-controller (MVC) Những tính năng nổi bật của Laravel bao gồm cúpháp dễ hiểu – rõ ràng, sử dụng hệ thống đóng gói module, quản lý package(Composer), hỗ trợ nhiều hệ quản trị CSDL quan hệ (MySQL, SQLite, PostgeSQL…)

Hình 1 6 Icon Laravel

Xây dựng website hỗ trợ đăng thông tin tìm người sửa chữa dịch vụ trong nhà tại thành phố Đà NẵngNhững lý do khiến Laravel trở nên rộng rãi:

 Cú pháp dễ hiểu – rõ ràng

 Hệ thống đóng gói modular và quản lý gói phụ thuộc

 Nhiều cách khác nhau để truy cập vào các cơ sở dữ liệu quan hệ

 Nhiều tiện ích khác nhau hỗ trợ việc triển khai vào bảo trì ứng dụng

1.3.2 Thư viện ReactJS

ReactJS là một opensource được phát triển bởi Facebook, ra mắt vào năm 2013,bản thân nó là một thư viện Javascript được dùng để để xây dựng các tương tác với cácthành phần trên website Một trong những điểm nổi bật nhất của ReactJS đó là việcrender dữ liệu không chỉ thực hiện được trên tầng Server mà còn ở dưới Client

ReactJS là một thư viện JavaScript chuyên giúp các nhà phát triển xây dựng

giao diện người dùng hay UI Trong lập trình ứng dụng front-end, lập trình viên

thường sẽ phải làm việc chính trên 2 thành phần sau: UI và xử lý tương tác của người dùng UI là tập hợp những thành phần mà bạn nhìn thấy được trên bất kỳ một ứng

dụng nào,

Hình 1 7 Icon ReactJS

1.3.3 Thư viện Bootstrap

Bootstrap là một framework bao gồm các HTML, CSS và JavaScript template dùng

để phát triển website chuẩn responsive Bootstrap cho phép quá trình thiết kế websitediễn ra nhanh chóng và dễ dàng hơn dựa trên những thành tố cơ bản sẵn có nhưtypography, forms, buttons, tables, grids, navigation, image carousels…

Xây dựng website hỗ trợ đăng thông tin tìm người sửa chữa dịch vụ trong nhà tại thành phố Đà Nẵng

Hình 1 8 Icon BootstrapBootstrap là một bộ sưu tập miễn phí của các mã nguồn mở và công cụ dùng để tạo

ra một mẫu webiste hoàn chỉnh Với các thuộc tính về giao diện được quy định sẵn nhưkích thước, màu sắc, độ cao, độ rộng…, các designer có thể sáng tạo nhiều sản phẩmmới mẻ nhưng vẫn tiết kiệm thời gian khi làm việc với framework này trong quátrình thiết kế giao diện website

1.4 Công cụ hỗ trợ xây dựng hệ thống

1.4.1 Visual Studio Code

Visual Studio Code chính là ứng dụng cho phép biên tập, soạn thảo các đoạn code

để hỗ trợ trong quá trình thực hiện xây dựng, thiết kế website một cách nhanh chóng.Visual Studio Code hay còn được viết tắt là VS Code Trình soạn thảo này vận hànhmượt mà trên các nền tảng như Windows, macOS, Linux Hơn thế nữa, VS Code còn

cho khả năng tương thích với những thiết bị máy tính có cấu hình tầm trung vẫn có thể

Hình 1 9 Icon Visual Studio Code

Xây dựng website hỗ trợ đăng thông tin tìm người sửa chữa dịch vụ trong nhà tại thành phố Đà Nẵng

1.4.2 Xampp

XAMPP là chương trình tạo web server được ứng dụng trên các hệ điều hànhLinux, MacOS, Windows, Cross-platform, Solaris Xampp là một phần mềm cho phépgiải lập môi trường server hosting ngay trên máy tính của bạn, cho phép bạn chạydemo website mà không cần phải mua hosting hay VPS Chính vì vậy, Xampp hayđược phục vụ cho hoạt động học tập giảng dạy thự hành và phát triển web

Hình 1 10 Ảnh minh họa Xampp

Xampp được viết tắt của X + Apache + MySQL + PHP + Perl vì nó được tích hợpsẵn Apache, MySQL, PHP, FTP Server, Mail Server Còn X thể hiện cho sự đa nềntảng của Xampp vì nó có thể dùng được cho 4 hệ điều hành khác nhau: Windows,MacOS, Linus và Solaris

Xây dựng website hỗ trợ đăng thông tin tìm người sửa chữa dịch vụ trong nhà tại thành phố Đà Nẵng

1.5 Lý thuyết xây dựng website

Sử dụng Laravel làm phần back-end để xử lý logic kinh doanh, tương tác với cơ sở dữ liệu và cung cấp API cho ReactJS phía front-end

- Laravel đảm nhận vai trò xây dựng các API endpoints để xử lý yêu cầu từReactJS và trả về dữ liệu tương ứng Để làm điều này, sử dụng Laravel Route

và Controller để xác định các endpoint và xử lý các yêu cầu từ ReactJS Cácendpoint có thể trả về dữ liệu dưới dạng JSON hoặc các định dạng khác tùythuộc vào yêu cầu của ứng dụng

- ReactJS gửi yêu cầu API: Trong ReactJS, sử dụng các thư viện HTTP Axios đểgửi yêu cầu HTTP đến các API endpoints đã xác định trong Laravel Sử dụngcác phương thức như GET, POST, PUT, DELETE để tương tác với API

- Xử lý và hiển thị dữ liệu: Sau khi nhận phản hồi từ API, ReactJS xử lý dữ liệu

và hiển thị nó trên giao diện người dùng ReactJS sử dụng state và props đểquản lý và truyền dữ liệu giữa các thành phần

- Xử lý giao diện người dùng: ReactJS xây dựng giao diện người dùng tương táccho ứng dụng Nó sử dụng các thành phần React để phân chia giao diện thànhcác phần nhỏ và tái sử dụng

API Authentication

JSON Web Token (JWT) là một tiêu chuẩn mở (RFC 7519) định nghĩa một cáchnhỏ gọn và an toàn để truyền tải thông tin giữa các bên một cách an toàn dưới dạng 1đối tượng JSON Các thông tin này được xác thực và có độ tin cậy cao vì nó có chứachữ ký số (digital signature)

Trong quá trình xác thực, người dùng đăng nhập thành công bằng cách sử dụngcác thông tin của họ (email or username, password), JSON Web Token sẽ được trả lại

và phải được lưu lại dưới local (thường là trong local storage, nhưng có lúc cookiecũng có thể được sử dụng) thay vì cách truyền thống là tạo ra một session trên server

và trả lại cookie Bất cứ khi nào người dùng muốn truy cập vào route hoặc tài nguyêncần có quyền, họ phải gửi JWT trong Authorization header sử dụng Bearer schemanhư sau: Authorization: Bearer <token>

Xây dựng website hỗ trợ đăng thông tin tìm người sửa chữa dịch vụ trong nhà tại thành phố Đà Nẵng

Hình 1 11 Ảnh minh họa mô hình JWT

Xây dựng website hỗ trợ đăng thông tin tìm người sửa chữa dịch vụ trong nhà tại thành phố Đà Nẵng

CHƯƠNG 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG2.1 Khảo sát yêu cầu

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

Hiện nay, trong thành phố Đà Nẵng, có nhiều người cần sửa chữa và bảo trì các thiết

bị trong nhà, từ sửa chữa điện, nước, đến sửa chữa thiết bị gia đình khác như máy lạnh,máy giặt, tivi, vv Lúc trước, khi muốn sửa chữa một thiết bị trong nhà thì phải mang thiết bị đó đến nơi sửa chữa rồi sau đó mang lại thiết bị đó về nếu như thiết bị đó lớn thì mất công và thời gian cho chủ nhà Một website hỗ trợ đăng thông tin tìm người sửa chữa dịch vụ trong nhà sẽ giúp kết nối những người cần sửa chữa với những người

có kỹ năng và kinh nghiệm tương ứng Thông qua một trang web, người dùng có thể

dễ dàng đăng thông tin về vấn đề cần sửa chữa và yêu cầu dịch vụ Điều này tiết kiệm thời gian và công sức so với việc tìm kiếm qua các phương tiện truyền thông truyền thống hoặc phải thăm các cửa hàng sửa chữa trực tiếp

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

2.1.2.1 Khách vãng lai

- Khách vãng lai có thể đăng ký tài khoản mới trên hệ thống

- Khách vãng lai có thể xem thông tin cơ bản về các dịch vụ cần người sửachữa trên trang chủ

2.1.2.2 Khách hàng

- Khách hàng có thể đăng nhập hoặc đăng xuất khỏi tài khoản cá nhân

- Khách hàng có thể đăng tin thông báo công việc cần sửa chữa, bao gồm cácthông tin như công việc cần tìm, yêu cầu làm việc, hình ảnh liên quan

- Khách hàng có thể xem thông tin đánh giá của các thợ sửa chữa, chọn thợphù hợp và xác nhận yêu cầu sửa chữa

- Khách hàng có thể lưu lại thông tin các thợ sửa chữa yêu thích để liên hệtrong tương lai,đánh giá và bình luận về thợ sửa chữa đã hoàn thành côngviệc, có thể xem lịch sử các tin đã đăng trên hệ thống