TRƯỜNG ĐẠI HỌC QUẢNG NAM
KHOA TOÁN – TIN
----------

KOMMANY KONGKIVONGSA

THIẾT KẾ VÀ XÂY DỰNG WEBSITE QUẢN LÝ
CỬA HÀNG CÀ PHÊ TRỰC TUYẾN

KHÓA LUẬN TỐT NGHIỆP ĐẠI HỌC

Quảng Nam, tháng 05 năm 2021

TRƯỜNG ĐẠI HỌC QUẢNG NAM
KHOA TOÁN – TIN
----------

KHÓA LUẬN TỐT NGHIỆP ĐẠI HỌC

Tên đề tài:

THIẾT KẾ VÀ XÂY DỰNG WEBSITE QUẢN LÝ
CỬA HÀNG CÀ PHÊ TRỰC TUYẾN

Sinh viên thực hiện
KOMMANY KONGKIVONGSA

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

KHÓA 2018 – 2022

Cán bộ hướng dẫn
TS. HUỲNH TẤN KHẢI

MSCB: 1245

Quảng Nam, tháng 05 năm 2022

LỜI CẢM ƠN

Để hoàn thành khóa luận của mình, em xin chân thành cảm ơn giáo viên hướng
dẫn là thầy Huỳnh Tấn Khải, giảng viên Trường Đại Học Quảng Nam, đã hướng dẫn
tận tình, giúp em tìm ra hướng đi đúng của đề tài, tạo điều kiện thuận lợi cho em về
thời gian và vấn đề tìm tài liệu có liên quan để giúp em hoàn thành đề tài nhanh nhất
và tốt nhất.

Em là du học sinh đến từ một đất nước xa xôi, dĩ nhiên là không tránh khỏi những
khó khăn nhất định, đặc biệt về mặt ngơn ngữ dẫn đến khả năng lĩnh hội bài giảng của
thầy cô cũng gặp nhiều vấn đề. Tuy nhiên, em rất vui mừng tự hào khi được sống và học
tập dưới mái Trường Đại Học Quảng Nam, một môi trường đào tạo về ngành IT chuyên
nghiệp và đặc biệt, dưới sự bảo bọc dạy dỗ tận tình của nhà trường, của các q thầy cơ,
đến nay em đã tích lũy cho mình những vốn kiến thức vơ cùng q giá, làm hành trang
cho cuộc sống sau này của em. Em tự tin rằng, sau khi về lại đất nước Lào yêu thương
của mình, em sẽ vận dụng tất cả kiến thức được đào tạo để truyền đạt lại cho những thế
hệ đàn em đi sau, vận dụng kiến thức vào công việc kinh doanh làm giàu chính đáng và
góp phần xây dựng đất nước Lào ngày càng giàu đẹp hơn.

Một lần nữa, em xin tỏ lòng biết ơn chân thành đến thầy Huỳnh Tấn Khải. Em chúc
thầy luôn khỏe và thành đạt.

“Việt – Lào hai nước chúng ta

Tình sâu hơn nước Hồng Hà, Cửu Long”

MỤC LỤC

PHẦN 1. MỞ ĐẦU ........................................................................................................1
1.1. Lý do chọn đề tài..................................................................................................1
1.2. Mục tiêu ...............................................................................................................2
1.3. Lịch sử nghiên cứu...............................................................................................2
1.4. Phương pháp nghiên cứu .....................................................................................2
1.5. Cấu trúc đề tài ......................................................................................................2

Phần 2. NỘI DUNG.......................................................................................................3
Chương 1. CƠ SỞ LÝ THUYẾT .................................................................................3

1.1. Lý thuyết về ngôn ngữ HTML.............................................................................3
1.1.1. Tổng quan về ngôn ngữ HTML .................................................................3
1.1.2. Các thẻ trong HTML ..................................................................................4
1.1.3. Cấu trúc của một trang HTML ...................................................................4
1.1.4. Các phần tử HTML (HTML element)........................................................5
1.1.5. Form trong HTML......................................................................................6
1.1.6. Sử dụng đa phương tiện trong HTML........................................................7

1.2. Lý thuyết ngôn ngữ CSS......................................................................................8
1.2.1. Tổng quan về CSS......................................................................................8
1.2.2. Cách chèn mã CSS vào trang HTML.........................................................8
1.2.3. Cú pháp CSS ..............................................................................................9
1.2.4. Thẻ chọn trong CSS ...................................................................................9

1.3. Lý thuyết về ngôn ngữ JavaScript .....................................................................11
1.3.1. Tổng quan về ngôn ngữ JavaScript ..........................................................11

1.3.2. Cách nhúng mã JavaScript vào trang HTML...........................................12
1.3.3. Mơ hình đối tượng tài liệu DOM .............................................................13
1.3.4. Mô hình đối tượng trình duyệt BOM .......................................................13

1.4. Lý thuyết ngôn ngữ PHP....................................................................................15
1.4.1. Tổng quan về ngôn ngữ PHP ...................................................................15
1.4.2. Cú pháp cơ bản của PHP ..........................................................................17
1.4.3. Một số lưu ý khi sử dụng PHP .................................................................17
1.4.4. Biến trong PHP.........................................................................................17

1.5. Lý thuyết về MySQL .........................................................................................18
1.5.1. Tổng quan về MySQL ..............................................................................18
1.5.2. PHP kết nối với MySQL ..........................................................................19
1.5.3. Mục đích sử dụng cơ sở dữ liệu ...............................................................20

1.6. Giới thiệu về phần mềm tạo máy chủ web XAMPP..........................................20
1.6.1. Tổng quan về XAMPP .............................................................................20
1.6.2. Thông tin cơ bản Xampp..........................................................................21
1.6.3. Phần mềm được tích hợp với xampp là gì?..............................................22
1.6.4. XAMPP được dùng làm gì? .....................................................................23
1.6.5. Ưu điểm và nhược điểm của XAMPP là gì?............................................23
1.6.6. Hướng dẫn cài đặt XAMPP......................................................................24

Chương 2. PHÂN TÍCH CÁC CHỨC NĂNG CỦA HỆ THỐNG .........................26
2.1. Đặc tả bài toán ...................................................................................................26
2.2. Phân tích hệ thống..............................................................................................26
2.2.1. Yêu cầu giao diện của website .................................................................26
2.2.2. Các tác nhân của hệ thống........................................................................27
2.3. Mơ hình biển đồ Use case của hệ thống ............................................................27
2.4. Thiết kế hệ thống ...............................................................................................31

2.4.1. Đầu tiên là đăng nhập...............................................................................31
2.4.2. Đối với trang chủ của chương trình sẽ có ................................................31
2.4.3. Đối với sản phẩm trong cửa hàng.............................................................31
2.4.4. Đối với nhân viên trong của hàng ............................................................32
2.4.5. Đối với hóa đơn của cửa hàng sẽ tách ra thành hai phần ......................32
2.4.6. Đối với vấn đề thống kê doanh thu của cửa hàng ....................................33
2.4.7. Đối với khách hàng của cửa hàng ............................................................33
2.4.8. Đối với đăng nhập ....................................................................................33
2.5. Lược đồ thiết kế Cơ sở dữ liệu ..........................................................................33
2.6. Dữ liệu bảng.......................................................................................................34
2.6.1. Bảng hóa đơn...........................................................................................34
2.6.2. Bảng sản phẩm .........................................................................................34
2.6.3. Bảng sự thay đổi lịch................................................................................35
2.6.4. Bảng nhà cung cấp ...................................................................................35

2.6.5. Bảng nhân viên .........................................................................................35
Chương 3. TRIỂN KHAI XÂY DỰNG WEBSITE .................................................36

3.1. Giao diện trang Thống kê ..................................................................................36
3.2. Giao diện trang chủ............................................................................................36
3.3. Giao diện trang đăng nhập .................................................................................38
3.4. Giao diện trang Quản lý Sản phẩm ....................................................................38
3.5. Giao diện trang Quản lý Nhân Viên ..................................................................39
3.6. Giao diện trang Quản lý Lịch làm việc..............................................................40
3.7. Giao diện trang Quản lý Tiền lương ..................................................................40
Phần 3. KẾT LUẬN ....................................................................................................41
1. Kết quả đạt được ................................................................................................41
2. Hạn chế của đề tài ..............................................................................................41
3. Hướng phát triển của đề tài ................................................................................41
Phần 4. TÀI LIỆU THAM KHẢO ............................................................................42


PHẦN 1. MỞ ĐẦU
1.1. Lý do chọn đề tài

Trên thế giới cũng như ở Việt Nam, công nghệ thông tin trở thành một công
nghệ mũi nhọn, nó là ngành khoa học kỹ thuật khơng thể thiếu trong việc áp dụng
vào các hoạt động xã hội như: xây dựng website cửa hàng cafe, kinh tế, thông tin,
kinh doanh và mọi hoạt động trong lĩnh vực nghiên cứu,…

Việc tiếp thị và xây dựng các chiến dịch tiếp tị trực tuyến vô cùng quan trọng,
có thể nói nó tác động trực tiếp đến mức độ và hiệu quả kinh doanh cảu nhiều công
ty, doanh nghiệp hiện nay.

Các doanh nghiệp ln muốn sở hữu một trang web hồn hảo, dễ dàng tiếp cận
các khách hàng tiềm năng và tăng độ phổ biến rộng rãi đến nhiều tầng lớp đối tượng
trong xã hội. Mục đích của việc thiết kế web chính là có thể giúp bạn quảng bá thương
hiệu khơng giới hạn với chi phí quảng cáo thấp nhưng mang về nguồn lợi hiệu quả.
Do đó, nhiều doanh nghiệp khi mới thành lập đã tiến hành thiết kế website, một mặt
để đảy mạnh các hoạt động kinh doanh, mặt khác để khẳng định thương hiệu của
mình trên thị trường.

Ở nước ta hiện nay, để đáp ứng được nhu cầu và sở thích của con người trong
việc mua bán đồ uống giải khát qua mạng. Ngoài những cửa hàng quán cafe trên thị
trường, để có thể phục vụ tại chỗ mà khơng cần đi lại, khơng tốn thời gian thì con
người chỉ cần ngồi và order nhanh.

Quản lý cửa hàng café trực tuyến giúp phục vụ việc tìm hiểu và tra cứu các
thông tin liên quan đến thức uống của con người. Hiện nay trên nhiều trang mạng có
rất nhiều trang quảng cáo về các sản phẩm cho qn đồ uống của mình, cũng như có
các lời tư vấn về các loại nước và đặc biệt là cà phê. Để giúp đỡ trong việc lựa chọn

của các khách hàng một cách tốt nhất, khơng lãng phí thời gian và được sản phẩm có
chất lượng cao.

Vì các lý do trên, em lựa chọn thiết kế và xây dựng website quản lý cửa hàng
cà phê trực tuyến

1

1.2. Mục tiêu
Em chọn đề tài “Thiết kế và xây dựng website quản lý cửa hàng cà phê trực

tuyến” nhằm dựa vào việc xây dựng một website quản lý các đồ uống, quảng bá sản
phẩm, các mặt hàng có trên trang. Thơng qua đó nâng cao năng lực sử dụng các ngôn
ngữ HTML, CSS, JS, PHP, MySQL.
1.3. Lịch sử nghiên cứu

Đã có nhiều người nghiên cứu về phần mềm quản ký website café trực tuyến.
Em đã chọn đề tài :” Thiết kế và xây dựng website quản lý cửa hàng cà phê trực
tuyến “. Em đã dành thời gian nghiên cứu trong vòng 5 tháng kể từ tháng 11 năm 2021
đến tháng 4 năm 2022.
1.4. Phương pháp nghiên cứu
- Phương pháp nghiên cứu tài liệu
-Phương pháp nghiên cứu thực nhiệm
1.5. Cấu trúc đề tài
Bài báo cáo gồm 3 chương:
Chương 1: CƠ SỞ LÝ THUYẾT
Chương 2: PHÂN TÍCH CÁC CHỨC NĂNG CỦA HỆ THỐNG
Chương 3: TRIỂN KHAI XÂY DỰNG WEBSITE

2


Phần 2. NỘI DUNG
Chương 1. CƠ SỞ LÝ THUYẾT

1.1. Lý thuyết về ngôn ngữ HTML
1.1.1. Tổng quan về ngôn ngữ HTML

Ngôn ngữ HTML là ngôn ngữ dùng để mô tả cấu trúc nội dung các tài liệu Web
(Web document) hay trang Web (Web page). HTML viết tắt của cụm từ HyperText
Markup Language. Tài liệu được mô tả bởi các thẻ HTML (HTML tags). Mỗi thẻ HTML
mô tả nội dung tài liệu khác nhau.

Để phổ biến thông tin trên tồn cục, cần một ngơn ngữ phổ biến và dễ hiểu, một
kiểu việc phổ biến tiếng mẹ đẻ mà tồn bộ các máy tính có thể hiểu được. Ngôn ngữ phổ
biến dùng bởi World Wide Web là HTML (Hyper Text Markup Language). HTML cho
tác giả các ý nghĩa để:

• Phổ biến các tài liệu trực tuyến với các heading, văn bản, bảng, danh sách,
ảnh,..v.v…

• Truy tìm thông tin trực tuyến theo các liên kết siêu văn bản bằng việc kích vào
một nút.

• Thiết kế các định dạng cho việc kiểm soát các giao dịch (transaction) với các
thiết bị từ xa, đối với người dùng trong việc tìm kiếm thơng tin, tạo các sản
phẩm, đặt hàng, v.v…

• Bao gồm spread-sheets, video clips, sound clips, và các ứng dụng trực tiếp khác
trong các tài liệu của họ.


Các trang Web đầy sinh động mà bạn thấy trên World Wide Web là các trang siêu
văn bản được viết bằng ngôn ngữ đánh dấu siêu văn bản hay HTML - HyperText Markup
Language. HTML cho phép bạn tạo ra các trang phối hợp hài hịa văn bản thơng thường
với hình ảnh, âm thanh, video, các mối liên kết đến các trang siêu văn bản khác...

Tên gọi ngôn ngữ dánh dấu siêu văn bản phản ánh đúng thực chất của cơng cụ này:
• Đánh dấu (Markup): HTML là ngôn ngữ của các thẻ đánh dấu - Tag. Các thẻ

này xác định cách thức trình bày đoạn văn bản tương ứng trên màn hình.

3

• Ngơn ngữ (Language): HTML là một ngôn ngữ tương tự như các ngôn ngữ lập
trình, tuy nhiên đơn giản hơn. Nó có cú pháp chặt chẽ để viết các lệnh thực hiện
việc trình diễn văn bản. Các từ khố có ý nghĩa xác định được cộng đồng
Internet thừa nhận và sử dụng. Ví dụ b = bold, ul = unordered list, ...

• Văn bản (Text): HTML đầu tiên và trước hết là để trình bày văn bản và dựa trên
nền tảng là một văn bản. Các thành phần khác như hình ảnh, âm thanh, hoạt
hình.. đều phải cắm neo vào một đoạn văn bản nào đó.

• Siêu văn bản (Hyper): HTML cho phép liên kết nhiều trang văn bản rải rác khắp
nơi trên Internet. Nó có tác dụng che dấu sự phức tạp của Internet đối với người
sử dụng. Người dùng Internet có thể đọc văn bản mà khơng cần biết đến văn
bản đó nằm ở đâu, hệ thống được xây dựng phức tạp như thế nào. HTML thực
sự đã vượt ra ngồi khn khổ khái niệm văn bản cổ điển.

1.1.2. Các thẻ trong HTML
Các thẻ HTML là các từ khóa được bao bọc bởi cặp dấu ngoặc nhọn. Cú pháp như


sau:
<tên thẻ> NỘI DUNG </tên thẻ>

Trong đó: thẻ đầu tiên gọi là thẻ mở và thẻ thứ hai gọi là thẻ đóng. Thẻ đóng được
viết giống như thẻ mở nhưng thêm vào dấu xuyệt (/) ở phía trước.

1.1.3. Cấu trúc của một trang HTML
Dưới đây là mô tả cấu trúc của một trang HTML
<html>
<head>
<title>Tiêu đề của trang</title>
</head>
<body>
<head>Đây là phần mở rộng</head>

Đây là một đoạn

Đây là một đoạn khác

</body>
</html>

4

Cấu trúc của HTML rất đơn giản và logic, với bố cục từ trên xuống dưới, từ trái
qua phải, với 2 phần chính là HEAD và BODY. Các website viết bằng HTML đều tuân
theo cấu trúc cơ bản như sau:

- Mọi trang HTML đều phải khai báo DOCTYPE (định nghĩa chuẩn văn bản) ngay
từ dòng đầu tiên.

- Thẻ <html> cho trình duyệt biết mở đầu và kết thúc của trang HTML.
- Thẻ <head> chứa tiêu đề và các thông tin khai báo, các thông tin ẩn khác.

- Thẻ <body> sẽ hiển thị nội dung của trang web. Đây là phần thông tin mà người

dùng sẽ nhìn thấy khi trình duyệt đọc các mã HTML.
- Thẻ <title>cho biết tiêu đề của tài liệu. Tiêu đề sẽ không hiển thị trong tài liệu

nhưng chúng xuất hiện trong thẻ trình duyệt (browser tab)
- Mọi kí tự nằm giữa dấu <!– và –> sẽ được xem là thẻ comment và sẽ bị trình

duyệt bỏ qua, không xử lý và không hiển thị.
Một file HTML có phần mở rộng là .html hoặc .htm.
1.1.4. Các phần tử HTML (HTML element)
- Một tài liệu HTML tạo nên từ nhiều thành phần HTML. Một thành phần HTML

được đánh dấu bằng một cặp thẻ mở và thẻ đóng.
- Các thành phần HTML có thể cấu trúc phân cấp hình cây, thành phần mẹ chứa

nhiều thành phần con khác lồng bên trong nó.
- Có thành phần rỗng, chỉ có thẻ mở.
- Để soạn thảo tài liệu HTML đúng cú pháp, cần nắm vững cấu trúc của từng thành

phần HTML.
Khơng giống như khi lập trình, nếu bạn mắc lỗi cú pháp HTLM sẽ khơng có một
thơng báo lỗi nào báo cho biết mà trình duyệt sẽ hiểu lầm và trình bày trang Web khơng
như bạn muốn mà thôi.

5

1.1.5. Form trong HTML

Phần tử <form> trong HTML được sử dụng để thu thập thông tin của người dùng

nhập vào. Được định nghĩa như sau:

<form>
Các phần tử trong form

</form>

Các phần tử trong form bao gồm các phần tử input, checkbox, radio button, submit
button, …

1.1.5.1. Các thuộc tính trong <form>

Một phần tử <form> với các thuộc tính được thiết lập có dạng như sau:

acceptcharset=”UTF-8” enctype=”application/x-www-form-urlencoded”
autocomplete=”off” novalidate>

Các phần tử trong form
</form>

Các thuộc tính của form bao gồm: action, accept-charset, enctype, method, name,
target.

Lưu ý: Thuộc tính method mơ tả phương thức HTML sử dụng để gửi dữ liệu từ
form. Hai phương thức được sử dụng là POST và GET. Khi sử dụng phương thức GET,
dữ liệu từ form sẽ được hiển thị trên thanh địa chỉ (address) do vậy khơng có tính bảo
mật. Đây là phương thức mặc định.

Trong trường hợp thông tin trên form là quan trọng, cần được bảo mật (như

password) thì ta sử dụng phương thức POST, lúc này dữ liệu được gởi đi sẽ không hiển
thị trên thanh address.

1.1.5.2. Các phần tử trong <form>

- Phần tử <input>: Đây là phần tử quan trọng nhất trong form. Phần tử này có nhiều
biến thể phụ thuộc vào thuộc tính type

- Phần tử <select>: Phần tử <select> định nghĩa một danh sách thả xuống.

- Phần tử <textarea>: Phần tử <textarea> định nghĩa một trường nhập văn bản trên
nhiều dịng. Trong đó, thuộc tính rows, cols cho biết số dịng và số cột của ô nhập.

6

- Phần tử <datalist>: Phần tử <datalist> định nghĩa một danh sách các tùy chọn đã
được xác định trước trong phần tử <input>. Người dùng sẽ thấy một danh sách sổ xuống
các tùy chọn đã được xác định trước. Thuộc tính list của phần tử <input> ám chỉ thuộc
tính id của phần tử <datalist>.

- Phần tử <keygen>: Mục đích của phần tử <keygen> là cung cấp một cách an tồn
để xác thực người dùng. Phần tử <keygen> mơ tả một trường tạo khóa trong một form.
Khi một form được gửi, hai khóa sẽ được tạo ra, một khóa private và một khóa public.

Khóa private được lưu trữ máy client, và khóa public được gửi đén server.

Các khóa public có thể sử dụng để tạo một chứng chỉ khách hàng để xác thực người
dùng trong tương lai.

1.1.6. Sử dụng đa phương tiện trong HTML

Thuật ngữ “Đa phương tiện” (multimedia) trên web được hiểu là âm thanh, nhạc,

phim ảnh, hoạt hình trên trang web đó.

- Chèn Video: Trước HTML5, một video có thể được chạy trên trình duyệt với một
plug-in (như flash). Trong HTML5, sử dụng thẻ <video> để nhúng 1 file video
vào trong trang web.

Văn bản nằm giữa cặp thẻ <video> sẽ xuất hiện trên trình duyệt trong trường hợp
trình duyệt khơng hỗ trợ phần tử <video>.

- Chèn Audio: HTML5 sử dụng phần tử <audio> để chèn 1 file audio vào trang
web.

- Chèn Plug-ins: Plug-ins là các chương trình máy tính dùng để mở rộng các chức
năng tiêu chuẩn của một trình duyệt web, ví dụ như Java applet, PDF readers,
Flash Players…

Plug-ins có thể được thêm vào trang web bằng phần tử <object> hoặc <embed>.
Plug-ins có thể được sử dụng cho nhiều mục đích như: hiển thị bản đồ,scan vius,
xác thực mã ngân hàng,…

- Chèn Video từ Youtube: Bằng cách sử dụng một trong các phần tử: <iframe>,

<object> hoặc <embed> ta đều có thể chèn một file video từ Youtube vào trang
web mình.

7

1.2. Lý thuyết ngôn ngữ CSS

1.2.1. Tổng quan về CSS

CSS (Cascading Style Sheet) là một ngơn ngữ định kiểu mơ tả cách trình bày một
tài liệu HTML hoặc XML.CSS mô tả cách các phần tử được xuất ra trên màn hình, trên
giấy hoặc trên các phương tiện truyền thông.

HTML được tạo ra để mô tả nội dung của trang web, nhưng khơng thể định dạng
cách trình bày một trang web. Còn CSS được sử dụng để định nghĩa kiểu dáng cho trang
web, bao gồm cả việc thiết kế, bố trí và các thay đổi khi hiển thị cho các thiết bị và kích
cỡ màn hình khác nhau. CSS có thể điều chỉnh bố cục của nhiều trang web cùng một
lúc.
1.2.2. Cách chèn mã CSS vào trang HTML

Khi trình duyệt đọc một bảng định kiểu (stylesheet), nó sẽ định dạng tài liệu HTML
theo các thơng tin trong bảng định kiểu đó. Có ba cách chèn mã CSS vào trang HTML:

- CSS ngoại tuyến (external CSS)
- CSS nội tuyến (internal CSS)
- CSS cục bộ (inline CSS)
1.2.2.1. CSS ngoại tuyến
Với CSS ngoại tuyến, ta có thể thay đổi tồn bộ giao diện trang web bằng cách chỉ
thay đổi một tập tin. Lúc này bảng định dạng sẽ được khai báo trong một tập tin có phần
mở rộng là .css. Mỗi trang HTML phải chứa một tham chiếu đến tập tin CSS này. Địa
chỉ của tập tin CSS sẽ được khai báo trong phần tử <link>.
Lưu ý: Một file CSS có thể được viết bằng bất kỳ một trình soạn thảo nào. Trong
tập tin CSS khơng chứa bất kỳ một thẻ HTML nào, và tập tin CSS có phần mở rộng là
.css
1.2.2.2. CSS nội tuyến
Với CSS nội tuyến, ta chỉ có thể định dạng kiểu dáng cho trang web hiện hành. Để
sử dụng CSS nội tuyến, ta khai báo nội dung định dạng trong phần tử <style> trong phần

<head> của trang HTML hiện hành.

8

1.2.2.3. CSS cục bộ
CSS cục bộ được sử dụng để tác động đến kiểu dáng của một phần tử HTML bất

kỳ. Để sử dụng CSS cục bộ, ta thêm thuộc tính style vào phần tử chịu tác động. Thuộc
tính style này có thể chứa bất kỳ thuộc tính CSS nào.

Lưu ý: Khi có nhiều hơn một khai báo định dạng trong 1 trang HTML, thì thứ tự
ưu tiên sẽ được thực hiện như sau:

1. CSS cục bộ
2. CSS nội tuyến và ngoại tuyến (theo thứ tự khai báo trong phần <head>, nếu có

hai khai báo của cùng một phần tử thì khai báo sau thì sẽ được sử dụng trước)
3. CSS mặc định của trình duyệt
1.2.3. Cú pháp CSS
Cú pháp của CSS bao gồm thẻ chọn (selector) và khối khai báo (declaration block):

Thẻ chọn{
Thuộc tính 1: Giá trị 1;
Thuộc tính 2: Giá trị 2;

}

Trong đó:
- Thẻ chọn chứa phần tử HTML cần định dạng
- Khối khai báo chứa nhiều khai báo được ngăn cách bởi dấu ;

- Mỗi khai báo bao gồm tên một thuộc tính CSS và một giá trị tương ứng, ngăn
cách nhau bởi dấu:
- Khối khai báo được đặt trong cặp dấu {}

1.2.4. Thẻ chọn trong CSS
1.2.4.1. Thẻ chọn phần tử HTML

Thẻ chọn phần tử HTML lựa chọn các phần tử dựa trên tên của phần tử HTML.
1.2.4.2. Thẻ chọn id

9

Thẻ chọn id sử dụng thuộc tính id của phẩn tử HTML, id của một phần tử là duy
nhất trong một trang, nên thẻ chon id được sử dụng để chọn một phần tử duy nhất. Khi
khai báo ta sử dụng dấu thăng (#) phía trước thẻ chọn.

Cách khai báo như sau:
[]#<thẻ chọn>(<khối khai báo>)

Trong đó: là tùy chọn. Lúc này trong phần tử sử dụng ta khai
báo thuộc tính id=”<thẻ chọn>”.

1.2.4.3. Thẻ chọn Class

Thẻ chọn class lựa chọn các phần tử HTML dựa vào thuộc tính class. Thẻ chọn
class có thể được sử dụng để chọn nhiều phần tử trên cùng một trang. Khi khai báo, ta
sử dụng dấu chấm (.) phía trước tên thẻ chọn:

[].<thẻ chọn>(<khối khai báo>)

Trong đó: là tùy chọn. Lúc này trong phần tử sử dụng ta khai
báo thuộc tính class=”tên thẻ chọn” Tại sao sử dụng CSS?

Đây là ba lợi ích chính của CSS:
 Giải quyết một vấn đề lớn
Trước khi có CSS, các thẻ như phông chữ, màu sắc, kiểu nền, các sắp xếp phần tử,
đường viền và kích thước phải được lặp lại trên mọi trang web. Đây là một q trình rất
dài tốn thời gian và cơng sức. Ví dụ: Nếu bạn đang phát triển một trang web lớn nơi
phông chữ và thông tin màu được thêm vào mỗi trang, nó sẽ trở thành một q trình dài
và tốn kém. CSS đã được tạo ra để giải quyết vấn đề này. Đó là một khuyến cáo của
W3C.

Nhờ CSS mà source code của trang Web sẽ được tổ chức gọn gàng hơn, trật tự
hơn. Nội dung trang web sẽ được tách bạch hơn trong việc định dạng hiển thị. Từ đó,
q trình cập nhập nội dung sẽ dễ dàng hơn và có thể hạn chế tối thiểu làm rối cho mã
HTML.

 Tiết kiệm rất nhiều thời gian
Định nghĩa kiểu CSS được lưu trong các tệp CSS bên ngồi vì vậy có thể thay đổi
toàn bộ trang web bằng cách thay đổi chỉ một tệp. Sử dụng CSS sẽ giúp bạn không cần

10

thực hiện lặp lại các mô tả cho từng thành phần. Từ đó, bạn có thể tiết kiệm được tối đa
thời gian làm việc với nó, làm code ngắn lại giúp kiểm sốt dễ dàng hơn các lỗi khơng
đáng có.CSS tạo ra nhiều style khác nhau nên có thể được áp dụng với nhiều trang web,
từ đó giảm tránh việc lặp lại các định dạng của các trang web giống nhau.

 Cung cấp thêm các thuộc tính

CSS cung cấp các thuộc tính chi tiết hơn HTML để định nghĩa giao diện của trang
web. CSS giúp người dùng nhiều styles trên một trang web HTML nên khả năng điều
chỉnh trang của bạn trở nên vô hạn.

1.3. Lý thuyết về ngôn ngữ JavaScript

1.3.1. Tổng quan về ngôn ngữ JavaScript

JavaScript là một trong ba ngôn ngữ mà các nhà phát triển web phải học. Với
HTML và CSS ta đã biết cách tạo ra trang web, tuy nhiên chỉ mới ở mức biểu diễ thông
tin chứ chưa phải là các trang web động có khả năng đáp ứng các sự kiện từ phía người
dùng. Việc sử dụng JavaScript giúp biểu diễn hành vi của trang web phản hồi với những
tương tác từ phía người sử dụng.

JavaScript là ngôn ngữ dưới script coa thể gắn với các file HTML. Noa không được
biên dịch mà được trình duyệt diễn dịch. Khơng giống java phải chuyển thành các mã
để biên dịch, trình duyệt đọc javaScript dưới dạng mã nguồn. Chính vì vậy ta có thể dễ
dàng học JavaScript qua các ví dụ.

JavaScript là ngơn ngữ lập trình dựa trên đối tượng, có nghĩa là bao ggoomf nhiều
kiểu đối tượng. Tuy vậy javaScript không phải là ngôn ngữ lập trình hướng đối tượng
như C++ hay java do khơng hỗ trợ các lớp hay tính thừa kế. JavaScript có thể đáp ứng
các sự kiện như tải hay loại bỏ các form. Khả năng này cho phép JavaScript trở thành
một ngôn ngữ script động.

Giống với HTML va java, JavaScript được thiết kế độc lập với hệ điều hành. Nó
có thể chạy trên bất kỳ điều hành nào có trình duyệt hỗ trợ JavaScript. Ngồi ra
JavaScript giống java ở khía cạnh an ninh: JavaScript khơng thể đọc và viết vào file của
người dùng.

Các trình duyệt web hiện nay có thể hiển thị những câu lệnh JavaScript được nhúng
vào trang HTML. Khi trình duyệt yêu cầu một trang, server sẽ gửi đầy đủ nội dung của

11

trang đó, bao gồm cả HTML và các câu lệnh JavaScript qua mạng tới Client. Client sẽ
đọc trang đó từ đầu đến cuối, hiển thị các kết quả cảu HTML và xử lý các câu lệnh
JavaScript bất cứ nơi nào chúng xuất hiện.

Các câu lệnh JavaScript được nhúng trong một trang HTML có thể trả lời cho các
sự kiện của người sử dụng như kích chuột, nhập vào một form và điều hướng trang. Ví
dụ ta có thể kiểm tra các giá trị thơng tin mà người sử dụng đưa vào mà không cần đến
bất cứ một quá trình truyền trên mạng nào. Trang HTML mà JavaScript được nhúng vào
sẽ kiểm tra các giá trị được đưa vào và sẽ thông báo với người sử dụng khi giá trị đưa
vào là không hợp lệ.

1.3.2. Cách nhúng mã JavaScript vào trang HTML
Ta có thể nhúng JavaScript vào một file HTML theo một trong các cách sau đây:

- Sử dụng các câu lệnh và các hàm trong cặp thẻ <script>

- Sử dụng các file JavaScript bên ngoài

1.3.2.1. Sử dụng thẻ <script>

Script được đưa vào file HTML bằng cách sử dụng cặp thẻ <script>. Các thẻ
<script> có thể xuất hiện trong phần <head> hay <body> của file HTML hoặc ở cả hai
nơi. Nếu đặt trong phần văn bản được tải.

Lưu ý: Cách tốt nhất là đặt các script ở phần dưới cùng của thẻ <body>. Điều này
có thể cải thiện việc tải trang bởi vì việc hiển thị trang HTML khơng bị chặn bởi các
script.

1.3.2.2. Sử dụng file JavaScript bên ngoài
Các script có thể được đặt ở các tập tin bên ngoài. Việc sử dụng file JavaScript

bên ngồi có thể được áp dụng cho nhiều trang web khác nhau. File JavaScript có phần
mở rộng là .js

Để sử dụng một file JavaScript bên ngoài, ta khai báo đường dẫn đến file JavaScript
trong thuộc tính src của thẻ <script>.

Lưu ý: Ta có thể khai báo file JavaScript trong phần <head> hoặc bất cứa vị trí nào
trong phần <body>. Và kịch bản trong file js không nằm trong cặp thẻ <script>

12

1.3.3. Mơ hình đối tượng tài liệu DOM
Khi một trang web được tải (load) trình duyệt sẽ tạo ra một Mơ hình đối tượng tài

liệu (Document Object Model – DOM). Với HTML DOM, JavaScript có thể truy cập
và thay đổi tất cả phần tử của một tài liệu HTML DOM. Mơ hình HTML DOM được
tạo bởi một cây các đối tượng .

Với mơ hình đối tượng, JavaScript có tất cả sức mạnh để tạo ra một trang HTML
động.
1.3.3.1. HTML DOM là gì?

HTML DOM là một mơ hình đối tượng tài liệu chuẩn và là một giao diện laapj

trình cho HTML. HTML DOM có các chức năng:

- Xem các phần tử HTML là những đối tượng
- Định nghĩa các thuộc tính của các phần tử HTML
- Định nghĩa các phương thức để truy cập các phần tử HTML
- Định nghĩa các sự kiện cho HTML
Trong đó, các phương thức HTML DOM là những hoạt động có thể thực hiện dựa
trên các phần tử HTML. Các thuộc tính HTML DOM là các giá trị của phần tử HTML
mà ta có thể thiết lập hoặc thay đổi.
HTML DOM có thể được truy cập bởi JavaScript và bởi các ngôn ngữ lập trình
khác.
1.3.3.2. Đối tượng document
Đối tượng document biểu diễn trang web HTML, nếu ta muốn truy cập vào bất kỳ
phần tử trong một trang HTML, ta luôn bắt đầu với việc tiếp cận các đối tượng document.
1.3.4. Mơ hình đối tượng trình duyệt BOM
1.3.4.1. HTML BOM là gì?
Mơ hình đối tượng trình duyệt (Broser Object Model- BOM) mô tả các phương
thức và giao diện để tương tác với trình duyệt. Khơng có một chuẩn chính thức dành cho
BOM vì vậy mỗi trình duyệt sở hữu những cài đặt riêng của nó.
1.3.4.2. Đối tượng Window

13

Đối tượng window được hỗ trợ bởi tất cả các trình duyệt, là đối tượng cao nhất của
mơ hình BOM, nó biểu diễn cửa sổ của trình duyệt. Các đối tượng, hàm, biến trong
JavaScript tự động chuyển thành các phần tử của đối tượng window

- Các biến toàn cục là các thuộc tính của đối tượng window
- Các hàm toàn cục là các phương thức của đối tượng window
- Đối tượng document (của HTML DOM) là một thuộc tính của đối tượng

window. Hai cách viết dưới đây tương tự nhau:
window.document.getElementByld(“header”);
Document.getElementByld(“header”);

Ứng dụng của JavaScript là gì?
Hiện nay, JavaScript được đánh giá cao bởi là trình thơng dịch ngơn ngữ lập trình
chính thức được nhúng bên trong trình duyệt web. Chính vì vậy, lập trình viên có thể
thực hiện được tất cả mọi thao tác mà ngôn ngữ này cho phép như sau:
• Thực hiện khai báo biến.
• Tiến hành lưu trữ và truy xuất cho các giá trị.
• Có thể xác định các lớp.
• Thực hiện tải và sử dụng những mơ-đun ở bên ngồi.
• Thực hiện xác định và gọi cho các hàm.
• Tiến hành viết trình xử lý cho các sự kiện để có thể đáp ứng với tất cả người

dùng và những sự kiện khác.
• Tiến hành thêm bớt các tính tương tác khác vào cho trang web.
• Thực hiện tạo cho các trị chơi dựa vào trình duyệt web.
• Thực hiện phát triển cho những ứng dụng di động có nhu cầu.
• Hỗ trợ, thực hiện phát triển web.
Những một trong những lý do hàng đầu giúp cho JavaScript dần trở thành loại
ngôn ngữ lập trình phổ biến nhất trên thế giới đó là vì:
• Nó có thể cung cấp tích hợp siêu đầy đủ với HTML / CSS.

14