Xây dựng website hỗ trợ việc đặt lịch khám bệnh tại các phòng khám trong thành phố đà nẵng

Tên đề tài: Xây dựng Website hỗ trợ việc đặt lịch khám bệnh tại các phòng khám trong thành phố Đà Nẵng 2.. CAM ĐOANTôi xin cam đoan rằng đồ án tốt nghiệp “Xây dựng Website hỗ trợ việc đ

Trang 1

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

Trang 2

Đà Nẵng, tháng 6/2023

Trang 3

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

Trang 4

Đà Nẵng, tháng 6/2023

Trang 5

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

Trang 6

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

Trang 7

Sở Y Tế nhằm tăng độ uy tín cho phòng khám, tiết kiệm thời gian và công sức của cảhai bên.

Website với các chức năng chính như:

- Bệnh nhân tìm kiếm, xem thông tin phòng khám, bác sĩ, đặt lịch khám bệnh

- Nhân viên phòng khám xác nhận lịch khám bệnh

- Bác sĩ đăng ký phòng khám lên Sở Y Tế, quản lý nhân viên phòng khám

- Sở Y Tế phê duyệt thông tin phòng khám

Trang 8

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: Nguyễn Thị Cẩm Linh Mã SV: 1911514110111

1 Tên đề tài:

Xây dựng Website hỗ trợ việc đặt lịch khám bệnh tại các phòng khám trong thành phố Đà Nẵng

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

- Dựa trên nhu cầu về sức khỏe và khám bệnh của người dân tại thành phố Đà Nẵng

hiện nay

- Số liệu về nhu cầu đặt lịch khám bệnh được lấy từ bạn bè, người thân và các

thông tin bài báo trên mạng

- Các tài liệu tham khảo được lấy trên các trang báo, tài liệu báo cáo công khai do các

tổ chức uy tín xuất bản, đặc biệt là các bài báo khoa học

- Các khóa học, sách chuyên ngành liên quan được lấy từ nhiều nguồn, đa phần là

các bài viết và khóa học về lập trình trên youtube

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

Mở đầu

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

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

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

5 Thiết kế cơ sở dữ liệu

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

Trang 9

1 Công nghệ xây dựng

2 Một số giao diện chương trình

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

Trang 10

Tôi xin chân thành cảm ơn!

i

Trang 11

CAM ĐOAN

Tôi xin cam đoan rằng đồ án tốt nghiệp “Xây dựng Website hỗ trợ việc đặt lịchkhám bệnh tại các phòng khám trong thành phố Đà Nẵng” là công trình nghiên cứu độc lập dướ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ộidung 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ệm trướchội đồng cũng như kết quả đồ án của mình

Sinh viên thực hiện

Nguyễn Thị Cẩm Linh

ii

Trang 12

MỤC LỤC

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 ANH x

MỞ ĐẦU 1

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

2 Đối tượng nghiên cứu 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

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

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

5 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 JavaScript 7

1.2 React Framework 9

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

1.3.1 Visual Studio Code 11

1.3.2 Dịch vụ Cơ sở dữ liệu Firebase 13

Chương 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 16

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

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

iii

Trang 13

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

2.2 Phân tích thiết kế hệ thống 17

2.2.1 Liệt kê Actor và Usecase 17

2.3 Sơ đồ Usecase 18

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

2.4.1 Đăng ký tài khoản 18

2.4.2 Đăng nhập 19

2.4.3 Đặt lịch khám bệnh 20

2.4.4 Xem lịch sử đặt lịch khám bệnh 20

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

2.4.6 Bình luận, đánh giá phòng khám 22

2.4.7 Đăng ký thông tin phòng khám 22

2.4.8 Phê duyệt thông tin đăng ký phòng khám 23

2.4.9 Xác nhận bệnh nhân đặt lịch khám bệnh 24

2.4.10 Xác nhận trạng thái đã khám bệnh 24

2.4.11 Xem danh sách bệnh nhân đặt lịch khám 25

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

2.5.1 Đăng nhập 26

2.5.2 Đăng ký tài khoản người dùng 26

2.5.3 Đặt lịch khám bệnh 26

2.5.4 Xem lịch sử đặt lịch khám bệnh 27

2.5.5 Đánh giá, bình luận phòng khám 27

2.5.6 Xác nhận bệnh nhân đặt lịch khám 28

2.5.7 Xác nhận trạng thái đã khám 28

2.5.8 Đăng ký phòng khám 29

iv

Trang 14

2.5.9 Phê duyệt thông tin đăng ký phòng khám 29

2.6 Thiết kế bảng dữ liệu 29

2.6.1 Bảng NguoiDung 29

2.6.2 Bảng PhongKham 30

2.6.3 Bảng LichKhamBenh 30

2.6.4 Bảng BinhLuan 30

Chương 3 XÂY DỰNG CHƯƠNG TRÌNH 32

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

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

3.2.1 Giao diện Trang chủ 32

3.2.2 Giao diện Đăng ký tài khoản người dùng 32

3.2.3 Giao diện Đăng ký thông tin phòng khám 33

3.2.4 Giao diện danh sách phòng khám đã đăng ký 34

3.2.5 Giao diện Phê duyệt thông tin đăng ký phòng khám 35

3.2.6 Giao diện Đăng nhập 36

3.2.7 Giao diện Đặt lịch khám bệnh 36

3.2.8 Giao diện Xem lịch sử đặt lịch khám bệnh 38

3.2.9 Giao diện đánh giá, bình luận phòng khám 38

3.2.10 Giao diện Xác nhận bệnh nhân đặt lịch khám 39

3.2.11 Giao diện Xác nhận trạng thái đã khám 39

3.2.12 Giao diện Cấp tài khoản cho nhân viên phòng khám 40

3.2.13 Giao diện Quản lý tài khoản cho nhân viên phòng khám 41

3.2.14 Giao diện Xem danh sách bệnh nhân đặt lịch khám 41

3.2.15 Giao diện Xem chi tiết thông tin phòng khám, bác sĩ 42

3.2.16 Giao diện Xem bình luận phòng khám 42

v

Trang 15

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 43 TÀI LIỆU THAM KHẢO 44

vi

Trang 16

DANH MỤC BẢNG BIỂU

Bảng 2.1: Đặc tả chức năng Đăng ký tài khoản 19

Bảng 2.2: Đặc tả chức năng Đăng nhập 20

Bảng 2.3: Đặc tả chức năng Đặt lịch khám bệnh 20

Bảng 2.4: Đặc tả chức năng Xem lịch sử đặt lịch khám bệnh 21

Bảng 2.5: Đặc tả chức năng Cập nhật thôn tin cá nhân 21

Bảng 2.6: Đặc tả chức năng Bình luận, đánh giá phòng khám 22

Bảng 2.7: Đặc tả chức năng Đăng ký thông tin phòng khám 23

Bảng 2.8: Đặc tả chức năng Phê duyệt thông tin đăng ký phòng khám 23

Bảng 2.9: Đặc tả chức năng Xác nhận đặt lịch khám bệnh 24

Bảng 2.10: Đặc tả chức năng Xác nhận trạng thái đã khám bệnh 25

Bảng 2.11: Đặc tả chức năng Xem danh sách bệnh nhân đặt lịch khám 25

Bảng 2.12: Bảng NguoiDung 29

Bảng 2.13: Bảng PhongKham 30

Bảng 2.14: Bảng LichKhamBenh 30

Bảng 2.15: Bảng BinhLuan 31

vii

Trang 17

DANH MỤC HÌNH

Hình 1.1: Icon HTML 5

Hình 1.2 : Icon CSS 6

Hình 1.3: Icon JavaScript 8

Hình 1.4: Icon React Framework 10

Hình 1.5: Ảnh minh họa VS Code 13

Hình 1.6: Ảnh minh họa Firebase 15

Hình 2.1: Sơ đồ Usecase 18

Hình 2.2: Sơ đồ hoạt động Đăng nhập 26

Hình 2.3: Sơ đồ hoạt động Đăng ký tài khoản người dùng 26

Hình 2.4: Sơ đồ hoạt động Đặt lịch khám bệnh 26

Hình 2.5: Sơ đồ hoạt động Xem lịch sử đặt lịch khám bệnh 27

Hình 2.6: Sơ đồ hoạt động Đánh giá, bình luận phòng khám 27

Hình 2.7: Sơ đồ hoạt động Xác nhận bệnh nhân đặt lịch khám 28

Hình 2.8: Sơ đồ hoạt động Xác nhận trạng thái đã khám 28

Hình 2.9: Sơ đồ hoạt động Đăng ký phòng khám 29

Hình 2.10: Sơ đồ hoạt động Phê duyệt thông tin đăng ký phòng khám 29

Hình 3.1: Giao diện Trang chủ 32

Hình 3.2: Giao diện trang Đăng ký tài khoản người dùng 33

Hình 3.3: Giao diện trang Đăng ký thông tin phòng khám 33

Hình 3.4: Giao diện danh sách phòng khám đã đăng ký 34

Hình 3.5: Giao diện trang Phê duyệt thông tin đăng ký phòng khám 35

Hình 3.6: Giao diện trang Đăng nhập 36

Hình 3.7: Giao diện trang chọn ngày đặt lịch 36

Hình 3.8: Giao diện trang chọn phòng khám 37

Hình 3.9: Giao diện trang chọn giờ và thông tin 37

Hình 3.10: Giao diện trang Lịch sử đặt lịch khám bệnh 38

Hình 3.11: Giao diện trang Đánh giá, bình luận phòng khám 38

Hình 3.12: Giao diện trang Xác nhận bệnh nhân đặt lịch khám 39

Hình 3.13: Giao diện trang chưa xác nhận trạng thái 39

viii

Trang 18

Hình 3.14: Giao diện trang đã xác nhận trạng thái 40

Hình 3.15: Giao diện trang Cấp tài khoản cho nhân viên phòng khám 40

Hình 3.16: Giao diện trang Quản lý tài khoản nhân viên phòng khám 41

Hình 3.17: Giao diện trang Xem danh sách bệnh nhân đặt lịch khám 41

Hình 3.18: Giao diện trang xem chi tiết phòng khám 42

Hình 3.19: Giao diện trang xem bình luận phòng khám 42 Y

ix

Trang 19

DANH MỤC CHỮ VIẾT TẮT TIẾNG ANHStt Chữ viết tắt Giải nghĩa Nghĩa tiếng Việt

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

2 W3C World Wide Web Consortium Tổ chức World Wide Web

3 CSS Cascading Style Sheets Bảng kiểu theo cấp độ

4 XHTML Extensible Hypertext Markup

Language

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

mở rộng

5 DOM Document Object Model Mô hình đối tượng tài liệu

6 UI User Interface Giao diện người dùng

7 JSX JavaScript XML JavaScript XML

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

9 ERD Entity-Relationship Diagram Sơ đồ mô hình thực thể-quan hệ

10 IDE Integrated Development

Environment

Môi trường phát triển tích hợp

x

Trang 20

Xây dựng Website hỗ trợ việc đặt lịch khám bệnh tại các phòng khám trong thành phố Đà Nẵng

MỞ ĐẦU

Thế giới ngày nay đã có nhiều tiến bộ mạnh mẽ về công nghệ thông tin (CNTT)

từ một tiềm năng thông tin đã trở thành một tài nguyên thực sự, trở thành sản phẩm hàng hoá trong xã hội, tạo ra một sự thay đổi to lớn trong lực lượng sản xuất,

cơ sở hạ tầng, cấu trúc kinh tế, tính chất lao động và cả cách thức quản lý trong các lĩnh vực của xã hội

Với sự phát triển Internet nó được xem là một trong những thành tựu khoa học

kỹ thuật vĩ đại trong lịch sử loài người và là nguồn tài nguyên thông tin lớn nhất,

đa dạng nhất của thế giới hiện nay Internet giúp mọi người có thể trao đổi thông tintrong sinh hoạt hàng ngày, thu thập, tìm kiếm các thông tin mới nhất ở khắp mọi nơitrên toàn thế giới, giao dịch thương mại, cộng tác trong nghiên cứu khoa học… Vì vậy,trên con đường công nghiệp hóa, hiện đại hóa đất nước ta hiện nay, việc đưa Internetđến mọi người là một xu thế tất yếu Vấn đề đặt ra là làm sao cho Internet thực sự phục vụ cho con người một cách có hiệu quả trên mọi lĩnh vực

Việc ứng dụng công nghệ thông tin và truyền thông đã tạo ra một sự thay đổi lớntrong nhiều lĩnh vực, đặc biệt là trong lĩnh vực chăm sóc sức khỏe Với xu hướng ngày càng tăng của việc sử dụng dịch vụ y tế trực tuyến, việc xây dựng một websiteđặt

lịch khám bệnh trực tuyến là một hướng đi tất yếu của các bệnh viện và phòng khám Trong bối cảnh đó, đề tài " Xây dựng Website hỗ trợ việc đặt lịch khám bệnh tạicác phòng khám trong thành phố Đà Nẵng " được đưa ra với mục đích tạo ra một môitrường trực tuyến cho người dùng đặt lịch khám bệnh một cách thuận tiện và nhanhchóng Website này sẽ giúp cho người dùng có thể đăng ký lịch khám bệnh trực tuyến,chọn bác sĩ hoặc phòng khám phù hợp một cách nhanh chóng

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

Hiện nay, tại các phòng khám tư nhân ở thành phố Đà Nẵng, thông thường người bệnh muốn khám bệnh thường phải đến tận nơi khám bệnh để xếp hàng, ngồichờ hoặc gọi điện nhắn tin để kiểm tra bác sĩ có làm việc và có thể đặt lịch trước haykhông Tuy nhiên, với cách làm truyền thống khá mất thời gian nếu phòng khám nghỉđột xuất hoặc đông khách Bệnh nhân cũng khó có thể nắm đầy đủ thông tin nơi khámbệnh

như: giá khám bệnh, thời gian làm việc, các thay đổi lịch khám bệnh hoặc độ tin cậy của phòng khám, … Những thuận lợi thông qua việc đặt khám lịch khám bệnh online

SVTH: Nguyễn Thị Cẩm Linh 1

Trang 21

rất rõ ràng: bệnh nhân có thể đặt lịch 24/7, mọi lúc mọi nơi chỉ cần có thiết bị kết nốiInternet Sau đó xác thực thông tin đã đặt là bạn đã hoàn tất quá trình đặt lịch online

Do đó, đề tài Xây dựng Website hỗ trợ việc đặt lịch khám bệnh tại các phòngkhám trong thành phố Đà Nẵng để thuận tiện cho người khám bệnh và bác sĩ dưới sựquản lý của Sở Y Tế nhằm tăng độ uy tín cho phòng khám, tiết kiệm thời gian và côngsức của cả hai bên

Đề tài mang đến một giải pháp công nghệ số trong việc đặt lịch khám online vớicác chức năng chính như sau:

- Bệnh nhân có thể tìm kiếm, xem thông tin phòng khám, bác sĩ, đặt lịch khám bệnh và xem lịch sử khám bệnh

- Nhân viên phòng khám xác nhận lịch khám bệnh

- Bác sĩ đăng ký phòng khám lên Sở Y Tế, quản lý nhân viên phòng khám

- Sở Y Tế phê duyệt thông tin phòng khám và thống kê số lượng phòng khám,người dùng

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

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

Đề tài áp dụng cho các người bệnh muốn đặt lịch khám bệnh và các phòng khámtrong khu vực Thành phố Đà Nẵng

b Phạm vi nghiên cứu

Tìm hiểu về thị trường và nhu cầu khám bệnh ở Đà Nẵng: nghiên cứu về sốlượng người dân cần khám bệnh, các bệnh tật phổ biến, các phòng khám có mặt tạiThành phố Đà Nẵng

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

- Thu nhập thông tin qua sách, qua các tài liệu, trang web để tìm được các cơ sở

lý thuyết liên quan đến vấn đề mình nghiên cứu

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

- Tìm hiểu về công cụ hỗ trợ lập trình và cách sử dụng

- Thu tập tài liệu liên quan đến nghiệp vụ quản lý website hỗ trợ đặt lịch khám

Trang 22

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

- 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 giao diện: HTML, CSS, JavaScript

- Ngôn ngữ lập trình: JavaScript, React Framework

- Dịch vụ cơ sở dữ liệu: Firebase

5 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

Trang 23

HTML thường được sử dụng trên hầu hết các trang web đơn lẻ và đồng thời chúngcho phép các nhà thiết kế web trình bày các văn bản, hình ảnh hay video với các nội dung khác một cách dễ nhìn rõ ràng Đối với những người mới bắt đầu tiếp xúc với ngôn ngữ này, họ sẽ gặp phải một số những khó khăn nhất định trong việc tìm racách để học thêm về HTML cơ bản nhanh nhất

Một Website thông thường chứa nhiều các trang con và mỗi trang con này lại cómột tập tin HTML riêng biệt Tuy nhiên, bạn cần phải lưu ý rằng HTML không phải là

ngôn ngữ lập trình, điều này có nghĩa là nó không thể dùng thực hiện các chức năng

“động”

Hiểu theo một cách đơn giản và dễ hiểu hơn thì đây là công cụ tương tự như cácphần mềm Microsoft Word, HTML chỉ có tác dụng là giúp sắp xếp bố cục và địnhdạng trang web Bên cạnh đó HTML khi kết hợp với công cụ CSS và JavaScript thì sẽ trở thành một nền tảng càng thêm vững chắc cho không gian mạng

HTML được tạo ra bởi Tim Berners-Lee, một nhà vật lý học của trung tâm nghiêncứu CERN ở Thụy Sĩ Hiện nay, HTML đã trở thành một chuẩn Internet được tổ chứcW3C (World Wide Web Consortium) vận hành và phát triển Tình trạng mới nhất củaHTML được cập nhật tại bất kỳ thời điểm nào trên Website của W3C

Trang 24

Phiên bản đầu tiên của HTML xuất hiện năm 1991, gồm 18 tag HTML Phiên bảnHTML 4.01 được xuất bản năm 1999 Sau đó, các nhà phát triển đã thay thế HTMLbằng XHTML vào năm 2000

Đến năm 2014, HTML được nâng cấp lên chuẩn HTML5 với nhiều tag được thêmvào markup, mục đích là để xác định rõ nội dung thuộc loại là gì (ví dụ như: <article>,

<header>, <footer>…)

Hình 1.1: Icon HTML

Theo Mozilla Developer Network thì HTML Element Reference hiện nay cókhoảng hơn 140 tag Tuy nhiên một vài tag trong số đó đã bị tạm ngưng (do khôngđược hỗ trợ bởi các trình duyệt hiện hành)

HTML document có đuôi file dạng html hoặc htm Bạn có thể xem chúng bằngcác trình duyệt web hiện hành như Google Chrome, Firefox, Safari, … Nhiệm vụ củatrình duyệt là đọc những file HTML này và “biến đổi” chúng thành một dạng nội dungvisual trên Internet sao cho người dùng có thể xem và hiểu được chúng

Thông thường, một Website sẽ có nhiều HTML document (ví dụ: trang chủ, trangblog, trang liên hệ, …) và mỗi trang con như vậy sẽ có một tệp HTML riêng Mỗi tàiliệu HTML bao gồm 1 bộ tag (hay còn gọi là element) Nó tạo ra một cấu trúc tương tựnhư cây thư mục với các heading, section, paragraph, … và một số khối nội dungkhác Hầu hết tất cả các HTML element đều có một tag mở và một tag đóng với cấutrúc <tag></tag>.[ CITATION TôH22 \l 1033 ]

Trang 25

1.1.2 CSS

CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng

để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (HTML) Nói ngắn gọn hơn là ngôn ngữ tạo phong cách cho trang web Bạn có thể hiểu đơngiản rằng, nếu HTML đóng vai trò định dạng các phần tử trên website như việc tạo racác đoạn văn bản, các tiêu đề, bảng, …thì CSS sẽ giúp chúng ta có thể thêm style vàocác phần tử HTML đó như đổi bố cục, màu sắc trang, đổi màu chữ, font chữ, thay đổi cấu trúc…

CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996, vìHTML không được thiết kế để gắn tag để giúp định dạng trang web

Ta có thể hiểu đơn giản rằng, nếu HTML đóng vai trò định dạng các phần tử trênwebsite như việc tạo ra các đoạn văn bản, các tiểu đề, bảng… thì CSS sẽ giúp chúng ta

có thể thêm một chút “phong cách” vào các phần tử HTML đó như đổi màu sắc trang,đổi màu chữ, thay đổi cấu trúc, …

Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọn cóthể là tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác Sau đó là nó sẽ ápdụng các thuộc tính cần thay đổi lên vùng chọn đó

Mối tương quan giữa HTML và CSS rất mật thiết HTML là ngôn ngữ markup (nền tảng của site) và CSS định hình phong cách (tất cả những gì tạo nên giao diệnwebsite), chúng là không thể tách rời

CSS phiên bản 2 được W3C phát triển vào tháng 5 năm 1998 Với những cải tiến

từ phiên bản CSS đầu tiên và mang đến những cải tiến mới như định vị tuyệt đối, tương đối và cố định các yếu tố chỉ mục z Khái niệm về các loại phương tiện, hỗ trợcho các biểu định kiểu âm thanh và văn bản hai chiều Xuất hiện các kiểu font chữ mới

để định dạng văn bản

Trang 26

Hình 1.2 : Icon CSS

1.1.2.1 CSS 2.1

Ngoài ra, sau phiên bản 2 còn có một sự nâng cấp khác là CSS 2.1 được releasevào tháng 4 năm 2011 Nhằm mục đích sửa lỗi và loại bỏ những tính năng kém hoặckhông tương thích cho người dùng

1.1.2.2 CSS3

CSS3 là phiên bản thay thế cho CSS2 với sự thay đổi đáng chú ý là module Các module có khả năng mở rộng các tính năng được xác định trong CSS2 Nhằm duy trì khả năng tương thích ngược

Đặc biệt, CSS3 mang đến các bộ chọn (selector) và thuộc tính (properties) mới cho phép linh hoạt hơn với bố cục và trình bày trang Nhờ đó, người lập trình có thểtạo ra các hiệu ứng hình ảnh mà không cần tạo ra hình ảnh trước đó

1.1.2.3 CSS 4

CSS 4 là phiên bản kế thừa CSS 3 hiện vẫn đang được cập nhật, phát triển và được dự đoán sẽ có rất nhiều phương thức mới được thêm vào như: Mutability,Hyperlink…[ CITATION CSS \l 1033 ]

1.1.3 JavaScript

JavaScript hay còn được gọi tắt là JS, đây là một ngôn ngữ lập trình website khá phổ biến hiện nay bên cạnh HTML và CSS Về cơ bản ngôn ngữ JavaScript được tích hợp để nhúng vào HTML nhằm hỗ trợ cho trang web trở nên sống động hơn Nói

Trang 27

cách đơn giản, JS sẽ giúp cho website từ trạng thái “tĩnh” trở nên “động” với nhiều hiệu ứng và hỗ trợ giúp thu hút người dùng, khiến họ có trải nghiệm tốt hơn

Khác với CSS và HTML, JavaScript được công nhận như một ngôn ngữ lập trìnhchính thức thay vì chỉ là một ngôn ngữ Markup như 2 anh bạn kia Tuy có sự khác biệtnhưng chúng hỗ trợ cho nhau rất nhiều để hình thành nên một trang web chất lượng.JavaScript là một ngôn ngữ lập trình phổ biến được sử dụng trong webdevelopment và là một phần quan trọng của trình duyệt web JS được tạo ra vào năm

Brendan Eich khi làm việc cho Netscape Communications Corporation

JS là một ngôn ngữ lập trình đa chức năng và có thể được sử dụng cho nhiều mục đích khác nhau Nó thường được sử dụng để tạo các trang web tương tác, pháttriển ứng dụng web, phân tích dữ liệu và thậm chí là để viết ứng dụng desktop

JS có thể được sử dụng với nhiều framework và thư viện khác nhau để tạo ra các ứng dụng phức tạp Các framework JS phổ biến nhất bao gồm React, Angular vàVueJS

JS hỗ trợ những chức năng cơ bản như đối tượng, biến, điều khiển lỗi, các phép tính cơ bản và các công cụ khác để tạo ra các ứng dụng hiệu quả và có khả năng

mở rộng Với tính động và khả năng linh hoạt, JS là một trong những ngôn ngữ lậptrình được ưa chuộng nhất trên thế giới

Hình 1.3: Icon JavaScript

JavaScript cung cấp nhiều tính năng mạnh mẽ bao gồm:

Trang 28

- Tương tác với người dùng: JavaScript cho phép xử lý sự kiện như nhấp chuột,nhấn phím và di chuột, giúp tạo ra các trang web tương tác và phản hồi nhanh chóng

- Thao tác với DOM: DOM (Document Object Model) là mô hình biểu diễn cấu trúc của một trang web và cho phép JavaScript truy cập và thay đổi nộidung của trang web Bằng cách sử dụng JavaScript, bạn có thể thêm, xóa hoặcthay đổi các phần tử HTML, CSS và thậm chí tạo ra các phần tử mới

- Xử lý dữ liệu và logic: JavaScript cung cấp các cấu trúc dữ liệu và các toán tửcho phép xử lý số học, chuỗi, mảng và đối tượng Nó cũng hỗ trợ các cấu trúcđiều khiển như rẽ nhánh (if-else) và vòng lặp (for, while) để thực hiện các phép tính, kiểm tra điều kiện và lặp lại các tác vụ

- Giao tiếp mạng: JavaScript cho phép tương tác với các API và dịch vụ mạng,cho phép gửi và nhận dữ liệu từ máy chủ bằng cách sử dụng XMLHttpRequesthoặc các phương thức mới như Fetch API và Axios

- Animation và hiệu ứng: JavaScript cho phép tạo ra các hiệu ứng động,animation và chuyển động trên trang web Bằng cách thay đổi thuộc tính CSShoặc sử dụng các thư viện như jQuery hoặc GreenSock, bạn có thể tạo ra các

mượt mà và hấp dẫn

JavaScript không chỉ được sử dụng trong trình duyệt web, mà còn có thể sử dụng

để phát triển ứng dụng di động (bằng các framework như React Native hoặc Ionic) và ứng dụng máy chủ (bằng Node.js) Với cộng đồng lớn và sự phát triển liên tục,JavaScript đã trở thành một công cụ quan trọng trong việc xây dựng các ứng dụng web

đa nền tảng và tương tác.[CITATION htt22 \l 1033 ]

1.2 React Framework

React là thư viện JavaScript phổ biến nhất để xây dựng giao diện người dùng (UI)

Nó cho tốc độ phản hồi tuyệt vời khi user nhập liệu bằng cách sử dụng phương phápmới để render trang web

Components của công cụ này được phát triển bởi Facebook Nó được ra mắt nhưmột công cụ JavaScript mã nguồn mở vào năm 2013 Hiện tại, nó đã đi trước các

Trang 29

đối thủ chính như Angular và Bootstrap, hai thư viện JavaScript bán chạy nhất thời bấy giờ

Với thư viện JavaScrip nay, lập trình viên có thể nhập liệu bằng phương pháp mới

và render website nhanh chóng và dễ dàng Tốc độ phản hồi của React được đánh giárất cao Hiện nay, nó được sử dụng rộng rãi bởi hơn 1300 nhà phát triển và hơn 94000trang mạng

Với nguyên tắc tập trung vào các phần riêng lẻ React cho phép lập trình viên phá

vỡ, chia cắt các giao diện UI phức tạp thành nhiều phần nhỏ đơn giản Điều này tạođiều kiện tốt đa cho phát triển, mở rộng web

ReactJS là một trong những công nghệ đáng để doanh nghiệp lựa chọn nhằm hiệnthực mục tiêu vượt mặt đối thủ cạnh tranh ReactJS cho phép doanh nghiệp tạo ra cácứng dụng web có UI tốt hơn, qua đó nâng cao trải nghiệm của người dùng như lượttương tác, tỷ lệ click, lượt chuyển đổi

Các doanh nghiệp sử dụng ReactJS có giao diện ứng dụng tốt hơn các đơn vị sửdụng các framework khác vì ReactJS ngăn chặn việc cập nhật của DOM giúp ứngdụng nhanh và truyền tải tốt hơn UX

Hình 1.4: Icon React Framework

React coi mỗi phần của giao diện người dùng như một thành phần Các thành phần

có trạng thái, phương thức và chức năng riêng

Chúng cho phép nhà phát triển tách giao diện người dùng thành các phần cụ thể,

dễ dàng kết hợp để tạo ra các giao diện người dùng phức tạp Do đó, nếu bạn muốn tạocông cụ quản lý khách hàng, một thành phần của giao diện người dùng có thể được dành riêng để thêm khách hàng mới, trong khi một thành phần khác của cùng giao diệnngười dùng có thể được dành riêng để hiển thị danh sách khách hàng

Trang 30

Ở dạng đơn giản nhất, mỗi thành phần là một lớp hoặc hàm JavaScript Chúngnhận các giá trị đầu vào được gọi là 'props' và trả về những khía cạnh cụ thể của giaodiện người dùng dưới dạng các phần tử React Đối với một số nhà phát triển, việc xácđịnh một thành phần dưới dạng một hàm đơn giản hơn việc xác định nó như một lớp Tuy nhiên, sử dụng một trong hai phương pháp đều đạt được kết quả đầu ra như nhautrong React

Một số đặc điểm quan trọng có thể kể đến của ReactJS như là:

- React là một thư viện (library) JavaScript, chứ không phải một framework Điều này có nghĩa là bạn có thể sử dụng React để phát triển một phần của ứng dụng mà không cần sử dụng nó cho toàn bộ ứng dụng

- React được thiết kế để phục vụ cho mô hình MVC (Model-View-Controller)hay MVP (Model-View-Presenter) trong phát triển ứng dụng web Thay vì tạo

ra các template riêng biệt cho từng trang web, React cho phép bạn tạo ra cácthành phần (components) riêng biệt và tái sử dụng chúng trên nhiều trang webkhác nhau Điều này giúp giảm thiểu việc lặp lại mã và giúp cho việc bảo trì

trở nên dễ dàng hơn

- React sử dụng một ngôn ngữ gọi là JSX để viết mã HTML JSX là một syntaxmới được tạo ra bởi Facebook để cho phép lập trình viên viết mã HTML bêntrong mã JavaScript một cách dễ dàng hơn JSX cho phép bạn tạo ra các thành phần (components) bằng cách kết hợp mã HTML và JavaScript một cách tự nhiên

- React sử dụng Virtual DOM để tối ưu hiệu suất của ứng dụng Virtual DOM làmột bản sao của DOM thực sự được lưu trữ trong bộ nhớ của trình duyệt Khi

có sự thay đổi về trạng thái của ứng dụng, React sẽ so sánh Virtual DOM mớivới Virtual DOM cũ để xác định những thay đổi cần được áp dụng lên DOMthực sự Quá trình này giúp giảm thiểu thời gian phản hồi của ứng dụng và tănghiệu suất

- React cung cấp cho lập trình viên một cách tiếp cận tiện lợi để xử lý sự kiện(event handling) Bạn có thể sử dụng các phương thức xử lý sự kiện như

Trang 31

onClick, onSubmit, onChange, v.v để đáp ứng các sự kiện người dùng trêntrang web

- React cũng có thể được sử dụng để phát triển các ứng dụng di động bằng cách sử dụng React Native React Native cho phép bạn sử dụng các thành phần (components) React để phát triển các ứng dụng di động cho cả iOS

và Android.[ CITATION HàN21 \l 1033 ]

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

1.3.1 Visual Studio Code

Visual Studio Code được biết đến là một trình biên tập lập trình code miễn phí dành cho Windows, Linux và macOS Nó được phát triển bởi Microsoft là sự kết hợphoàn hảo giữa IDE và Code Editor Trình biên tập này được hỗ trợ chức năng debug,

đi kèm với Git, có syntax highlighting, tự hoàn thành mã thông minh, snippets, cùng

đó là cải tiến mã nguồn Ngoài ra, Visual Studio Code còn cho phép người dùng thay đổi theme, phím tắt, và các tùy chọn khác

Visual Studio Code là một trình biên tập mã nguồn mở và miễn phí được phát triểnbởi Microsoft Nó hỗ trợ nhiều ngôn ngữ lập trình, bao gồm C++, C#, Java, JavaScript,PHP, Python, Ruby và nhiều ngôn ngữ khác

Dưới đây là một số ứng dụng và ưu điểm của Visual Studio Code:

- Biên tập mã hiệu quả: Visual Studio Code cung cấp nhiều tính năng hữu ích

để biên tập mã như kiểm tra cú pháp, sửa lỗi, đánh dấu mã, tìm kiếm và thay thế, và cung cấp sự gợi ý code thông minh

- Debug dễ dàng: Visual Studio Code cung cấp các công cụ để debug dễ dàng,bao gồm xem trước code, breakpoint, step-through debugging và cung cấp lỗichi tiết

- Tích hợp với công cụ khác: Visual Studio Code tích hợp tốt với nhiều công cụkhác như Git, GitHub, Docker, Node.js, v.v., giúp người dùng phát triển ứng dụng một cách dễ dàng và hiệu quả

Tiêu đề	Xây dựng website hỗ trợ việc đặt lịch khám bệnh tại các phòng khám trong thành phố Đà Nẵng
Tác giả	Nguyễn Thị Cẩm Linh
Người hướng dẫn	TS. Hoàng Thị Mỹ Lệ
Trường học	Đại học Đà Nẵng
Chuyên ngành	Công nghệ thông tin
Thể loại	Đồ án tốt nghiệp đại học
Năm xuất bản	2023
Thành phố	Đà Nẵng

Định dạng
Số trang	63
Dung lượng	5,26 MB