Thiết kế website bán hàng đồng hồ

VIỆN ĐẠI HỌC MỞ HÀ NỘI
KHOA CÔNG NGHỆ ĐIỆN TỬ THÔNG TIN

ĐỒ ÁN
TỐT NGHIỆP ĐẠI HỌC
Đề tài : “Thiết kế website bán hàng đồng hồ”

Giảng viên hƣớng dẫn : PGS.TS Phạm Minh Việt
Sinh viên thực hiện

: Ngô Thị Thanh Xuân

Lớp

: K16-DTTT

Khóa

: 16(2013-2017)

Hệ

: Chính quy

Hà Nội, tháng 5/2017


VIỆN ĐẠI HỌC MỞ HÀ NỘI

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

KHOA CN ĐIỆN TỬ - THÔNG TIN

Độc lập - Tự do - Hạnh phúc

ĐỀ TÀI ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC
Họ và tên sinh viên: NGÔ THỊ THANH XUÂN
Lớp: K16B

Khóa: 16 (2013 – 2017)

Ngành đào tạo: Công nghệ Kỹ thuật điện tử, Truyền thông

Hệ đào tạo: ĐHCQ

1/ Tên đồ án tốt nghiệp:
Thiết kế website bán hàng đồng hồ.
2/ Nội dung chính của đồ án:
1. TÌM HIỂU NGÔN NGỮ NỀN TẢNG TRONG LẬP TRÌNH WEB VỚI PHP ,
HTML VÀ CSS.
2. KHẢO SÁT PHÂN TÍCH ĐỀ TÀI
3. THIẾT KẾ WEBSITE BÁN HÀNG ĐỒNG HỒ VỚI PHP & MYSQL
4. TỔNG KẾT VÀ ĐÁNH GIÁ HƯỚNG PHÁT TRIỂN CỦA ĐỀ TÀI.
3/ Cơ sở dữ liệu ban đầu
4/ Ngày giao đồ án: 10/03/2017
5/ Ngày nộp đồ án: 19/05/2017

TRƢỞNG KHOA

GIÁO VIÊN HƢỚNG DẪN

(Ký, ghi rõ họ tên)

(Ký, ghi rõ họ tên)


MỞ ĐẦU
Hiện nay, dưới sự phát triển của công nghệ thông tin, con người đã thực hiện
được nhiều công việc với tốc độ nhanh hơn và chi phí thấp hơn nhiều so với các thức
truyền thống. Chính điều này, đã thúc đẩy sự hình thành và phát triển của thương mại
điện tử trên khắp thế giới, làm biến đổi đáng kể bộ mặt văn hóa , nâng cao chất lượng
cuộc sống con người.
Trong hoạt động sản xuất kinh doanh, thương mại điện tử đã khẳng định được
vai trò xúc tiến và thúc đẩy sự phát triển của doanh nghiệp. Đối với một doanh nghiệp
hay một cửa hàng, việc quảng bá và giới thiệu đến khách hàng các sản phẩm mới đáp
ứng được nhu cầu của khách hàng sẽ rất cần thiết. Lĩnh vực thương mại điện tử đã
giúp các cá nhân, doanh nghiệp có mặt hàng dễ dàng tiếp cận được với người tiêu
dùng. Vậy phải quảng bá thế nào đó là việc xây dựng được một website cho cửa hàng
hay doanh nghiệp của mình để đưa sản phẩm của mình đến với khách hàng.
Đứng trước nhu cầu thiết kế website của các cá nhân, doanh nghiệp cũng như
việc đam mê lập trình ứng dụng web. Em đã chọn đề tài : “ xây dựng website bán hàng
đồng hồ online” làm đề tài báo cáo đồ án tốt nghiệp.
Nội dung chính của đề tài gồm 4 chương :
1. Chương I: Tìm hiểu ngôn ngữ , nền tảng trong lập trình web với PHP, HTML
VÀ CSS.
2. Chương II: Khảo sát phân tích đề tài.
3. Chương III: Thiết kế website bán hàng đồng hồ với PHP và MYSQL
4. Chương IV : Tổng kết và đánh giá hướng phát triển của đề tài.
Mặc dù đã rất cố gắng thực hiện đề tài nhưng vì năng lực cũng như kiến thức còn
hạn chế nên báo cáo của em khó tránh khỏi những thiếu xót. Em rất mong thầy cô
thông cảm và chỉ bảo góp ý để đề tài của em được hoàn thiện hơn. Những góp ý của

thầy cô là bài học và hành trang để em vững bước vào cuộc sống này.
Hà Nội, ngày 15 tháng 05 năm 2017

1


LỜI CẢM ƠN
Đầu tiên , em xin cảm ơn các thầy cô giáo bộ môn cũng như các thầy cô đang
công tác tại khoa Công nghệ Điện tử - Thông tin, Viện đại học Mở Hà Nội đã tạo điều
kiện và truyền đạt cho chúng em những kiến thức trong suốt quá trình 4 năm học vừa
qua.
Đặc biệt, em xin gửi lời cảm ơn sâu sắc đến giảng viên PGS.TS Phạm Minh Việt,
người đã hết lòng hướng dẫn , chỉ bảo , giúp đỡ em trong thời gian vừa qua. Thầy đã
giúp em có những hướng đi đúng đắn đề hoàn thành tốt đề tài này. Em cũng như các
bạn rất biết ơn thầy đã truyền đạt lại cho chúng em những kinh nghiệm, kiến thức và
những kĩ năng quý báu để chúng em có thể hoàn thiện đề tài của mình một cách tốt
nhất.
Quá trình thực hiện đề tài này là cơ hội để em áp dụng, tổng hợp các kiến thức đã
học trên lớp, đồng thời đúc kết được những bài học phục vụ cho học tập và công việc
thực tế sau này.
Em xin chân thành cảm ơn !
Người thực hiện đề tài

Ngô Thị Thanh Xuân

2


NHẬN XÉT CỦA GIÁO VIÊN HƢỚNG DẪN
……………………………………………………………………………………

……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………

Hà Nội , ngày tháng 5 năm 2017
Giáo viên hƣớng dẫn

3


MỤC LỤC
DANH MỤC CÁC HÌNH ẢNH VÀ BẢNG
KÍ HỆU CÁC CỤM TỪ VIẾT TẮT
CHƢƠNG I : TÌM HIỂU NGÔN NGỮ NỀN TẢNG TRONG LẬP TRÌNH
WEB VỚI PHP, HTML VÀ CSS....................................................................... 9
1.1NGÔN NGỮ HTML (BỘ XƢƠNG WEBSITE)........................................... 9
1.1.1.

Khái niệm ............................................................................................. 9

1.1.2.

Cấu trúc trang HTML ........................................................................ 9

1.1.3.

Các thẻ HTML cơ bản ...................................................................... 10

1.2NGÔN NGỮ CSS (BỘ DA CỦA WEBSITE) ............................................. 13
1.2.1.

Khái niệm ........................................................................................... 13

1.2.2.

Nhúng CSS vào website .................................................................... 13

1.2.3.

Vùng chọn và các kiểu vùng chọn cơ bản ....................................... 14

1.2.4.

Các thuộc tính CSS cơ bản ............................................................... 15

1.3NGÔN NGỮ PHP (TRÁI TIM CỦA WEBSITE) ...................................... 18
1.3.1. Khái niệm ............................................................................................... 18
1.3.2. Biến, hằng, chuỗi và các kiểu DL trong PHP ..................................... 19
1.3.2.1 Biến .................................................................................................... 19
1.3.2.2. Hằng ................................................................................................. 20

1.3.2.3. Chuỗi ................................................................................................ 20
1.3.2.4. Các kiểu DL trong PHP .................................................................. 22
1.3.3. Toán tử trong PHP ................................................................................ 23
1.3.4 Các biểu thức điều kiện và vòng lặp trong PHP ................................. 25
1.3.5 Các kiểu dữ liệu mảng và các hàm hỗ trợ mảng trong PHP .............. 28
1.3.6 Hàm và gọi lại hàm trong PHP ............................................................. 30
1.3.7 Cookie và session trong PHP ................................................................. 31
1.3.8 Truy cập biến form................................................................................. 32
1.3.9 Lƣu trữ và truy vấn dữ liệu bằng PHP ................................................ 33
4


CHƢƠNG II : KHẢO SÁT VÀ PHÂN TÍCH ĐỀ TÀI ...................................... 35
2.1KHẢO SÁT YÊU CẦU ĐỀ TÀI................................................................... 35
2.1.1.

Mục đích chọn đề tài ......................................................................... 35

2.1.2.

Chức năng .......................................................................................... 35

2.1.3.

Yêu cầu đặt ra .................................................................................... 35

2.2CÁC KỊCH BẢN SỬ DỤNG USERCASE .................................................. 36
2.2.1. Chức năng của khách hàng .................................................................. 36
2.2.2. Chức năng của nhà quản trị ................................................................. 38
2.2.3. Phân tích hệ thống xử lý ....................................................................... 39

2.2.4. Biểu đồ phân cấp chức năng của khách hàng..................................... 41
2.2.5. Biểu đồ phân cấp chức năng quản lý nhà quản trị ............................ 41
2.3MÔ HÌNH HÓA ............................................................................................. 42
2.3.1. Biểu đồ luồng dữ liệu mức khung cảnh (mức 0)................................. 42
2.3.2. Biểu đồ luồng dữ liệu mức 1 ................................................................. 43
2.4BIỂU ĐỒ THỰC THỂ LIÊN KẾT .............................................................. 44
2.5BẢNG CƠ SỞ DỮ LIỆU............................................................................... 44
2.5.1. Bảng cơ sở dữ liệu của admin............................................................... 44
2.5.2. Bảng cơ sở dữ liệu của loại sản phẩm.................................................. 45
2.5.3. Bảng cơ sở dữ liệu hiệu sản phẩm....................................................... 46
2.5.4. Bảng cơ sở dữ liệu đăng ký ................................................................... 47
2.5.5. Bảng cơ sở dữ liệu chi tiết sản phẩm ................................................... 48
CHƢƠNG III : THIẾT KẾ WEBSITE BÁN HÀNG ĐỒNG HỒ VỚI PHP VÀ
MYSQL .............................................................................................................. 49
3.1THIẾT KẾ GIAO DIỆN TRANG CHỦ ...................................................... 49
3.2THIẾT KẾ GIAO DIỆN TRANG ĐĂNG KÝ ............................................ 49
3.3THIẾT KẾ GIAO DIỆN TRANG ĐĂNG NHẬP ...................................... 50
3.4THIẾT KẾ GIAO DIỆN TRANG HƢỚNG DẪN MUA HÀNG .............. 50
3.5THIẾT KẾ TRANG GIỎ HÀNG................................................................. 51
3.6THIẾT KẾ TRANG QUẢN TRỊ NỘI DUNG WEBSITE ........................ 52
5


3.6.1

Thiết kế trang chủ ............................................................................. 52

3.6.2

Thiết kế giao diện quản lý loại sản phẩm ........................................ 53

3.6.3

Thiết kế giao diện quản lý hiệu sản phẩm ....................................... 53

3.6.4

Thiết kế giao diện trang quản lý chi tiết sản phẩm ........................ 54

CHƢƠNG IV : TỔNG KẾT VÀ ĐÁNH GIÁ HƢỚNG PHÁT TRIỂN ĐỀ TÀI55
4.1ĐÁNH GIÁ ƢU, NHƢỢC ĐIỂM CỦA HỆ THỐNG ................................ 55
4.2PHƢƠNG HƢỚNG PHÁT TRIỂN ............................................................. 55
TÀI LIỆU THAM KHẢO ..................................................................................... 57

6


DANH MỤC CÁC HÌNH ẢNH VÀ BẢNG
Biểu đồ 1: Biểu đồ phân cấp chức năng ........................................................ 40
Biểu đồ 2: Biểu đồ phân cấp chức năng của khách hàng .............................. 41
Biểu đồ 3:Biểu đồ phân cấp chức năng admin ............................................... 42
Biểu đồ 4: Biểu đồ luồng dữ liệu mức khung cảnh ........................................ 42
Biểu đồ 5 : Biểu đồ luồng dữ liệu của khách hàng ......................................... 43
Biểu đồ 6: Biểu đồ luồng dữ liệu của nhà quản trị ........................................ 43
Biểu đồ 7: Biểu đồ thực thể liên kết ................................................................. 44
Bảng 1: Cơ sở dữ liệu của Admin .................................................................... 45
Bảng 2: Bảng sử dụng admin ........................................................................... 45
Bảng 3: Bảng CSDL loại sản phẩm ................................................................. 45
Bảng 4: Bảng sử dụng của loại sản phẩm ....................................................... 46
Bảng 5: Bảng CSDL của hiệu sản phẩm ......................................................... 46

Bảng 6: Bảng sử dụng của hiệu sản phẩm ...................................................... 46
Bảng 7: Bảng CSDL của đăng ký .................................................................... 47
Bảng 8: Bảng sử dụng của đăng ký ................................................................. 47
Bảng 9: Bảng CSDL của chi tiết sản phẩm..................................................... 48
Bảng 10: Bảng sử dụng của chi tiết sản phẩm................................................ 48
Hình ảnh 1: Trang chủ ..................................................................................... 49
Hình ảnh 2: Trang đăng ký .............................................................................. 49
Hình ảnh 3: Trang đăng nhập và thanh toán ................................................. 50
Hình ảnh 4: Trang hƣớng dẫn mua hàng ....................................................... 51
Hình ảnh 5: Trang giỏ hàng ............................................................................. 51
Hình ảnh 6: Trang đăng nhập tài khoản admin ............................................ 52
Hình ảnh 7: Trang chủ quản trị nội dung website ......................................... 52
Hình ảnh 8: Trang quản lý loại sản phẩm ...................................................... 53
Hình ảnh 9: Trang quản lý hiệu sản phẩm ..................................................... 53
Hình ảnh 10: Trang quản lý chi tiết sản phẩm............................................... 54
7


KÍ HỆU CÁC CỤM TỪ VIẾT TẮT
Ý nghĩa

Viết tắt
HTML

HyperText Markup Language : ngôn ngữ đánh dấu siêu văn
bản.

CSS

Cascading Style Sheets : ngôn ngữ định dạng website.

PHP

Hypertext Processor : ngôn ngữ kịch bản máy chủ

SQL

Structured Query Language : ngôn ngữ quản trị hệ CSDL

CSDL

Cơ sở dữ liệu

8


CHƢƠNG I : TÌM HIỂU NGÔN NGỮ NỀN TẢNG TRONG
LẬP TRÌNH WEB VỚI PHP, HTML VÀ CSS
1.1 NGÔN NGỮ HTML (BỘ XƢƠNG WEBSITE)
1.1.1. Khái niệm
HTML (HyperText Markup Language : ngôn ngữ đánh dấu siêu văn bản)
HTML là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web
với các mẩu thông tin được trình bày trên word wide web. HTML được định
nghĩa như là một ứng dụng đơn giản của SGML và được sử dụng trong các tổ
chức cần đến các yêu cầu xuất bản phức tạp. HTML đã trở thành một chuẩn
internet do tổ chức Word Wide Web consortium(W3C) duy trì. Phiên bản
chính thức mới nhất của HTML là HTML 4.01 (1999). Sau đó, các nhà phát
triển đã thay thế nó bằng XHTML. Hiện nay, HTML đang được phát triển tiếp
với phiên bản HTML5 hứa hẹn mang lại diện mạo mới cho Web.
Các trình duyệt hỗ trợ: IE (Internet Explorer), Mozzila Firefox , Google

Chorm, Safari, Opera,…
1.1.2. Cấu trúc trang HTML
Một trang HTML cơ bản bao gồm 2 phần nằm trong thẻ <html></html>:
-

Phần đầu(head): nội dung tiêu đề trang web nằm trong thẻ <head></head>

-

Phần thân(body): nội dung website nằm trong thẻ <body></body>

<!DOCTYPE html>
<html lang=”vi”> //Ngôn ngữ Tiếng Việt
<head>
<title>Nội dung tiêu đề</title>
<meta charset=”utf-8”/> //Bảng mã Tiếng Việt
</head> => Phần tiêu đề đầu.
<body>
//Phần thân, nội dung website
</body>
</html>

9


1.1.3. Các thẻ HTML cơ bản
Một số thẻ khai báo thông tin trên website (phần head)
-

<title></title> : thẻ xác định tiêu đề website

-

<meta charset=”bảng mã”/>: thẻ khai báo bảng mã

-

<meta name=”description” content=”nội dung mô tả”/>: thẻ khai báo nội dung
mô tả

-

<meta name=”author” content=”tên tác giả”/>: thẻ khai báo tên tác giả

-

<meta name=”keyword” content=”từ khóa”/>: thẻ khai báo từ khóa cho website
Các thẻ định dạng văn bản (phần body)

-

<body></body>: thẻ xác định phần thân của website
 Bgcolor : định dạng màu nền website
 Background : xác định ảnh nền
 Text : định dạng màu chữ
 Link :định dạng màu của lien kết
 Alink :định dạng màu của lien kết đang hoạt động
 Vlink :định dạng màu của liên kết đã ghé thăm
 Leftmargin:căn lề trái
 Topmargin:căn lề trên

-

<heading> :thẻ tiêu đề
 Có các thẻ

…

theo chiều kích thước giảm dần

-

: thẻ định dạng đoạn văn bản
 Align:căn chỉnh lề

-

<strong>
-

<b></b>: in đậm

-

<i></i> : in nghiêng

-

<u></u> : gạch chân

-

<s></s> : gạch ngang

-

: Đưa 1 ký tự lên trên( mũ) . AX2+ BX+C= 0 –

-

: Đưa 1 ký tự xuống dưới. H2O –

-

</pre>: Giữ nguyên đoạn văn bản( Như khi code)

-

<hv>: tạo dòng kẻ để phân đoạn ra

10


-

<font></font>: thẻ định dạng font chữ
 Color :màu chữ
 Size: kích thước

-

<img></img> :thẻ hình ảnh
 src=“url”: Đường dẫn của ảnh cần hiển thị

 border=“giá_trị”: Đường viền của ảnh
 height=“giá_trị”: Độ cao của ảnh, đơn vị pixel
 width=“giá_trị”: Độ rộng của ảnh
 alt=“”: Nội dung hiển thị thay thế khi ảnh không được hiển thị( Do sai
đường dẫn, ảnh không được tải về,… ).
 title=“” : Tiêu đề của ảnh( Khi di chuột qua ảnh sẽ hiển thị tiêu đề)
 vspace: Khoảng cách từ ảnh đến thành phần khác bên ngoài( Theo chiều
dọc)
 hspace: Khoảng cách từ ảnh đến thành phần khác bên ngoài( Theo chiều
ngang)

-

<a></a> : thẻ liên kết
 href=“url”: Đường dẫn
 target=“giá_trị”: Phương thức khi mở liên kết. Gồm các giá trị _self( mở
liên kết ở tab hiện tại), _blank( mở với 1 cửa sổ mới), _parent( mở với
frame), _top( khác với _parent, _top mở với cả trang)
 title: Tiêu đề của liên kết

-

<table></table>: thẻ tạo bảng
 width: Độ rộng của bảng, thường sử dụng giá trị kích thước có đơn vị %
hoặc px
 height: Chiều cao bảng
 bgcolor: Định màu nền của bảng
 background: Định ảnh nền của bảng
 Độ lớn đường viền của bảng
 bordercolor: Màu của đường viền

 align: Căn vị trí của bảng so với toàn website. Giá trị: left, right, center

11


 cellspacing: Định độ dày của khung
 cellpadding: Định khoảng cách từ nội dung đến đường bao của bảng
-

<tr></tr> : xác định dòng nằm trên bảng
 height: Khai báo chiều cao của dòng( độ lớn dòng)
 align: Định vị trí nội dung trong dòng( theo chiều ngang): left( trái), right(
phải), center( giữa)
 valign: Định vị trí nội dung theo chiều dọc: top( trên), middle( giữa),
bottom( dưới)

-

<td></td>: thẻ dữ liệu bảng
 width: Độ rộng của cột
 height: Chiều cao của cột
 align: Định vị trí nội dung trong cột( theo chiều ngang): left( trái), right(
phải), center( giữa)
 valign: Định vị trí nội dung theo chiều dọc: top( trên), middle( giữa),
bottom( dưới)

-

<form></form>: thẻ định dạng form
 name: Tên của form, đặt tùy ý sao cho dễ nhớ, có mối tương quan với đối

tượng form
 action: Link xử lý dữ liệu
 method: Phương thức truyền dữ liệu, có 2 giá trị là GET và POST
Thẻ tạo danh sách trong HTML

-

<ol></ol>: thẻ danh sách có trật tự
 a: Hiển thị theo kiểu ký tự thường a, b, c…
 A: Hiển thị theo dạng ký tự hoa A, B, C..
 i: Hiển thị dạng La Mã thường i, ii, iii, iv,..
 I: Hiển thị dang La Mã I, II, III, IV,..
 square: Hình ô vuông
 circle: Hình tròn màu rỗng ( màu trắng)
 disc: Hình tròn đặc( chấm tròn màu đen)

-

<ul></ul>: thẻ tạo danh sách không có sắp xếp

12


-

<dl><dd></dd></dl>: thẻ tạo danh sách có mô tả

-

Thuộc tính style


nền)”; font-size: kích thước chữ px(pixel); font-family: phông chữ; textalign: vị trí căn lề>
Để không bị xuống hàng ta thay thẻ 
 bằng thẻ <span></span>:
<span style>
1.2 NGÔN NGỮ CSS (BỘ DA CỦA WEBSITE)
1.2.1. Khái niệm
CSS viết tắt của Cascading Style Sheets được hiểu là ngôn ngữ định dạng
website hay ngôn ngữ định dạng cho các ngôn ngữ đánh dấu siêu văn bản (html,
xml, svg...), thường dùng để định dạng các thành phần của 1 website như: font
chữ, độ rộng, màu nền, vị trí,…
CSS là ngôn ngữ được dùng để miêu tả cách trình bày các tài liệu viết bằng
ngôn ngữ HTML và XHTML. Ngoài ra ngôn ngữ định kiểu theo tầng cũng có
thể dùng cho XML, SVG, XUL. Các đặc điểm kỹ thuật của CSS được duy trì
bởi World Wide Web Consortium (W3C).
Tác dụng của CSS:
-

Làm đẹp website như chia cột, thêm màu sắc, biến đổi các khối.

-

Hạn chế tối thiểu việc làm rối mã HTML của trang Web bằng các thẻ quy
định kiểu dáng (chữ đậm, chữ in nghiêng, chữ có gạch chân, chữ màu), khiến
mã nguồn của trang Web được gọn gàng hơn, tách nội dung của
trang Web và định dạng hiển thị, dễ dàng cho việc cập nhật nội dung.

-

Tạo ra các kiểu dáng có thể áp dụng cho nhiều trang Web, giúp tránh phải

lặp lại việc định dạng cho các trang Web giống nhau.
1.2.2. Nhúng CSS vào website
Có 3 cách nhúng CSS vào website:

-

"Inline Style": Áp dụng trực tiếp trên một đối tượng nhất định bằng thuộc
tính style:

13


Đoạn text cần in đậm, gạch chân, màu đỏ</span>
-

"Internal Style": Đặt CSS ở đầu trang Web để áp dụng kiểu dáng cho toàn
bộ trang ấy, khi đó chỉ cần đặt đoạn CSS vào trong cặp thẻ <style> rồi đặt
vào trong phần header của Web (giữa <head> và </head>):

<style type="text/css">
body {font-family:verdana; color:#0000FF;} /* Kiểu chữ trong trang Web là
"Verdana", màu chữ thông thường là màu xanh dương */
</style>
-

"External CSS": Đặt các thuộc tính CSS vào một tệp tin riêng biệt (*.css),
khi đó có thể tham chiếu đến từ nhiều trang Web khác nhau:
 Ví dụ về nội dung tệp style.css:


body {font-family:verdana; color:#0000FF;}
 Tham chiếu tới tệp tin CSS trên từ trang Web bằng đoạn mã (mã có thể
nằm ngoài thẻ <head>):
<link rel="stylesheet" type="text/css" href="style.css"/>

1.2.3. Vùng chọn và các kiểu vùng chọn cơ bản
Vùng chọn là 1 khu vực trong website được chỉ định áp dụng cho 1 đoạn
CSS nào đó.
Một đoạn CSS có thể áp dụng cho nhiều vùng chọn khác nhau
Các kiểu vùng chọn cơ bản
 Chọn theo thẻ HTML: Viết CSS cho toàn bộ phần tử trong một thẻ
 Chọn phần tử theo ID: Sử dụng #id viết CSS cho 1 hoặc ít phần tử
 Chọn phần tử theo Class: Sử dụng .class viết CSS cho nhiều phần tử khác
nhau

14


 Chọn thứ cấp ( chọn phần tử con)
 Chọn phần tử thứ cấp liền nhau
1.2.4. Các thuộc tính CSS cơ bản
-

Background-color:
 Là thuộc tính sử dụng để định dạng màu nền cho website
 Giá trị:
+ Màu theo tên tiếng anh: red, green, blue, white, black,..
+ Là mã màu theo hệ hex

-


Background-image
 Là thuộc tính định ảnh nền cho website background-image:
url(„liên_kết_ảnh_nền‟);

-

Background-repeat
 Xác định việc lặp lại của ảnh nền trong trường hợp ảnh nền nhỏ hơn kích
thước phần định dạng
 Giá trị:
+ Repeat: Lặp lại nếu ảnh nhỏ hơn kích thước phần cần định dạng
+ No-repeat: Không lặp.
+ Repeat-x: Lặp theo chiều ngang
+ Repeat-y: Lặp theo chiều dọc website

-

Background-position
 Định vị trí nền của website
 Giá trị:
+ Left: Bắt đầu từ bên trái
+ Right: Bắt đầu từ bên phải
+ Top: Bắt đầu từ trên.
+ Bottom: Bắt đầu từ dưới
+ Có thể dùng đơn vị % để định vị trí.

-

Font-family

 Là thuộc tính định dạng font chữ cho website
 Giá trị là tên các font chữ.

-

Font-style

15


 Định kiểu chữ: Normal( bình thường), Italic( in nghiêng), Oblique( in xiên)
-

Font-size
 Định kích thước cho chữ, giá trị là các giá trị độ dài, có thể sử dụng các đơn
vị: px, em,…

-

Font-variant
 Định dạng 1 số kiểu chữ như: small-caps, normal

-

Font-weight
 Định dạng kiểu in đậm( bold), in thường( normal) cho 1 thành phần nào đó

-

Color

 Định dạng màu chữ trong CSS
 Giá trị:
+ Tên màu tiếng Anh: gray, blue, green,…
+ Bảng mã màu hệ 16: Gồm ký tự # và chuỗi 6 ký tự liền kề

-

Text-indent
 Định khoảng thụt vào của 1 dòng bất kỳ

-

Text-align
 Định vị trí của 1 đoạn văn bản.
 Giá trị:
+ Left: Căn trái
+ Center: Căn giữa
+ Right: Căn phải.
+ Justify: Căn đều.

-

Letter-spacing
 Định khoảng cách giữa các ký tự

-

Word-spacing
 Định khoảng cách giữ các từ.


-

Text-decoration
 Underline: Chữ gạch chân.
 Line-through: Chữ gạch xiên
 Overline: Chữ có gạch ngang trên đầu

16


 Blink: Chữ nháy.
 None: Không có 4 giá trị trên
-

Text-transform
 Uppercase: Định chữ in hoa
 Lowercase: Định chữ thường
 Capitalize: Định kiểu in hoa chữ cái đầu.

-

Border- Đường viền
 Trong border chúng ta có 3 thuộc tính

a) Border-width: Độ dày của đường viền.
Cú pháp: border-width: apx bpx cpx dpx; Với: a, b, c, d lần lượt là giá trị độ dày
đường viền của các cạnh: bên trên, bên phải, bên dưới và bên trái( Theo thứ tự
chiều kim đồng hồ) Khi 1 trong 4 giá trị kia bị thiếu thì nó sẽ lấy giá trị độ dày
của cạnh đối diện nó.
b)Border-style: Kiểu đường viền

Chúng ta có 1 số giá trị về đường viền như hình bên
Không nhất thiếu phải định dạng cả 4 cạnh có viền mà có thể sử dụng 4 thuộc
tính sau: border-top-style( viền trên), border-right-style( viền phải), Borderbottom-style( viền dưới), border-left-style( viền trái).
c) Border-color: Màu đường viền - Giá trị của border là các loại mã màu.
-

Padding
Biên Là thuộc tính tạo khoảng cách đường viền và nội dung Đối với padding
chúng ta cũng có 4 thuộc tính: padding-top, padding-right, padding-bottom,
padding-left Sử dụng để căn chỉnh nội dung so với các viền tương ứng: trên,
phải, dưới, trái.

-

Float
Là thuộc tinh sử dụng để cố định thành phần của website về 1 phía: trái( left)
hay phải( right).
Thường sử dụng trong việc dàn trang, chia cột cho website.
Giá trị:
 Left: Dàn qua trái.
 Right: Dàn qua phải.

17


 None: Bình thường.
-

Clear
Là thuộc tinh sử dụng cho các thành phần đi cùng các thành phần sử dụng

float. Sử dụng để định dạng cách tràn cho thành phần này khi thành phần trước
nó đặt float và còn khoảng trống.
Giá trị:
 Left: Tràn sang trái.
 Right: Tràn phải.
 Both: Không tràn, thường dung để tránh tràn các thành phần trong
website

-

Phần tử BLOCK và INLINE
BLOCK (khối) là các phần tử html khi tạo ra nó sở hữu 1 hàng riêng biệt. Có
thể dùng tùy chỉnh kích thước của block
 VD: <div>,
...,
,<ul>,...
INLINE (nội dòng) là các phần tử html khi tạo ra nó có thể đứng trên cùng 1
hàng.
 VD: <span>,<strong>,<a>...

-

Pseudo class cơ bản: là cùng chọn để chọn 1 phần tử trong 1 trạng thái nhất
định: Bao gồm 4 loại: hover, visited, link, active.

-

Chuyển động translation:

Translation: all “thời gian hiệu ứng” “thời gian trễ” “kiểu hiệu ứng”
-


Thay đổi hình dạng đối tượng với transform

Transform: rotate (đọ xoay deg) ( số vòng turn)
skew (độ nghiêng)
scale ( độ phóng)
translate (...px, ...%)
1.3 NGÔN NGỮ PHP (TRÁI TIM CỦA WEBSITE)
1.3.1. Khái niệm
PHP (viết tắt hồi quy "PHP: Hypertext Preprocessor") là một ngôn ngữ lập trình
kịch bản hay một loại mã lệnh chủ yếu được dùng để phát triển các ứng dụng viết
cho máy chủ, mã nguồn mở, dùng cho mục đích tổng quát. Nó rất thích hợp với

18


web và có thể dễ dàng nhúng vào trang HTML. Do được tối ưu hóa cho các ứng
dụng web, tốc độ nhanh, nhỏ gọn, cú pháp giống C và Java, dễ học và thời gian
xây dựng sản phẩm tương đối ngắn hơn so với các ngôn ngữ khác nên PHP đã
nhanh chóng trở thành một ngôn ngữ lập trình web phổ biến nhất thế giới.
Mã PHP được thực thi ở phía Server, khi trình duyệt của người dùng truy cập
một trang web có chứa một đoạn mã PHP thì trình duyệt nhận được trang kết
quả đã xử lý từ Web server, người dùng sẽ không thể biết được đoạn mã viết gì.
Mã PHP được bao trong cặp dấu <?php ?> hoặc <? ?>. Tập tin PHP có phần
mở rộng là .php hoặc .php3
PHP tương tự JSP và ASP với tập thẻ lệnh dùng cho trang HTML. Điểm đặc
biệt là PHP được phát triển hoàn toàn cho nền tảng web, chính vì vậy , mà các
ứng dụng viết bằng PHP rất ngắn gọn so với VBScript hay JSP. Đây cũng chính
là điểm mạnh của PHP so với Perl.
Cú pháp PHP mượn từ nhiều ngôn ngữ khác như C, Java, Perl... PHP có thể
giao tiếp với nhiều hệ CSDL như MySQL, MS Access, Sybase, Oracle và cả

Microsoft SQL. Không chỉ có khả năng thao tác CSDL, PHP còn có nhiều khả
năng khác như IMAP, SNMP, LDAP, XML... PHP chạy trên hầu hết các nền
tảng hệ thống. Trình máy chủ phân giải mã lệnh PHP có thể tải về miễn phí từ
trang web chính thức của PHP.

1.3.2. Biến, hằng, chuỗi và các kiểu DL trong PHP
1.3.2.1 Biến
Biến được xem là vùng nhớ dữ liệu tạm thời. Và giá trị có thể thay đổi
được. Biến được bắt đầu bằng ký hiệu "$". Và theo sau chúng là 1 từ, 1 cụm
từ nhưng phải viết liền hoặc có gạch dưới. 1 biến được xem là hợp lệ khi nó
thỏa các yếu tố :
Tên của biến phải bắt đầu bằng dấu gạch dưới và theo sau là các ký tự, số
hay dấu gạch dưới.
Tên của biến không được phép trùng với các từ khóa của PHP. Trong PHP
để sử dụng 1 biến chúng ta thường phải khai báo trước, tuy nhiên đối với các
lập trình viên khi sử dụng họ thường xử lý cùng một lúc các công việc, nghĩa

19


là vừa khái báo vừa gán dữ liệu cho biến. Bản thân biến cũng có thể gãn cho
các kiểu dữ liệu khác. Và tùy theo ý định của người lập trình mong muốn
trên chúng.

Cú pháp: $_tên_biến = giá_trị_biến
VD:
$a;
$a = “ Bien a “;
echo $a;
 Xuất ra màn hình giá trị: Bien a

1.3.2.2. Hằng
Nếu biến là cái có thể thay đổi được thì ngược lại hằng là cái chúng ta không
thể thay đổi được. Hằng trong PHP được định nghĩa bởi hàm define theo cú
pháp: define (string tên_hằng, giá_trị_hằng ). Cũng giống với biến hằng được
xem là hợp lệ thì chúng phải đáp ứng 1 số yếu tố :
-

Hằng không có dấu "$" ở trước tên.

-

Hằng có thể truy cập bất cứ vị trí nào trong mã lệnh

-

Hằng chỉ được phép gán giá trị duy nhất 1 lần.

-

Hằng thường viết bằng chữ in để phân biệt với biến
Cú pháp: define ( “tên_hằng” , “giá_trị_hằng” )
VD:
define ( “NAME” , “Xuân” );
define ( “AGE” , “22” );
echo NAME;
echo AGE;

 Xuất ra màn hình giá trị hằng: Xuân 22
1.3.2.3. Chuỗi
Là một nhóm các ký tự, số, khoảng trắng, dấu ngắt được đặt trong các dấu nháy

đơn hoặc nháy kép.

20


VD1:
$chuoi_1 = “ Chuoi mot “; /* giá trị là một chuỗi */
$chuoi_2 = “ Chuoi hai “;
echo $chuoi_1;
echo “
”;
echo $chuoi_2;
 Xuất ra màn hình giá trị: Chuoi mot
Chuoi hai
Chú ý:
-

Cặp dấu nháy kép có thể hiển thị 1 chuỗi và hiểu được giá trị của biến nằm
trong dấu ngoặc kép.

VD:
$a = “ Bien a “
$chuoi_1 = “ Chuoi mot $a “;
$chuoi_2 = „ Chuoi hai $a „;
echo $chuoi_1;
echo “
”;
echo $chuoi_2;
 Xuất ra màn hình giá trị: Chuoi mot Bien a
Chuoi hai $a
-


Không dùng các cặp dấu nháy trùng nhau, nếu trùng phải sử dụng các \ khóa.
VD:
$a = “ My name “ Xuan “ “;
echo $a;
 Báo lỗi
$a = “ My name \“ Xuan \“ “;
echo $a;
 Xuất ra màn hình giá trị: My name “ Xuan “
Or $a = „ My name “ Xuan “ „
-

Nối một chuỗi với 1 biến, 1 chuỗi với 1 hằng.

Với toán tử này ta sử dụng 1 dấu chấm „.‟

21


VD:
$a = “ Xuan “;
echo “ My name is “ .$a;
 Xuất ra màn hình giá trị: My name is Xuan
Define ( “NAME” , “Xuan” );
echo “ My name is “ .NAME;
 Xuất ra màn hình giá trị: My name is Xuan
1.3.2.4. Các kiểu DL trong PHP
Bao gồm 6 kiểu dữ liệu cơ bản:
o Integer
o Double
o String

o Boolean
o Array
o Object
VD:
$a = 10; /* Kiểu số nguyên */
echo $a; -> Xuất ra màn hình giá trị 10
$a = 3.14; /* Kiểu số thực */
echo $a; -> Xuất ra màn hình giá trị 3.14
$a = “ Chuoi ”; /* Kiểu chuỗi */
echo $a; -> Xuất ra màn hình giá trị Chuoi
$a = TRUE; /* Kiểu Boolean */
echo $a; -> Xuất ra màn hình giá trị 1
$a = FALSE; /* Kiểu Boolean */
echo $a; -> Không hiển thị giá trị ra màn hình, hay có giá trị = 0
Ta dùng hàm gettype để kiểm tra kiểu DL:
VD
$a = 10; /* Kiểu số nguyên */
echo gettype($a); -> Xuất ra màn hình giá trị Integer

22


$a = 3.14; /* Kiểu số thực */
echo gettype($a); -> Xuất ra màn hình giá trị Double
$a = “ Chuoi ”; /* Kiểu chuỗi */
echo gettype($a); -> Xuất ra màn hình giá trị String
$a = TRUE; /* Kiểu Boolean */
echo gettype($a); -> Xuất ra màn hình giá trị Boolean
$a = FALSE; /* Kiểu Boolean */
echo gettype($a); -> Xuất ra màn hình giá trị Boolean

1.3.3. Toán tử trong PHP
Toán tử gán
Chúng ta đã từng tiếp xúc với toán tử này bởi việc khởi tạo 1 biến.
Nó gồm ký tự đơn là dấu =
Toán tử gán lấy giá trị của toán hạng bên phải gán nó vào toán hạng
bên trái
VD:
$a = “chuỗi”
$b = 10
Toán tử số học
Toán tử

Tên

Ví dụ

+

Cộng

$a + $b;

-

Trừ

$a - $b;

*


Nhân

$a * $b;

/

Chia

$a/$b;

%

Modules

$a%$b;

Toán tử so sánh
Phép toán

Sử dụng

Ý nghĩa so sánh

==

$a = = $b

$a bằng $b

===


$a = = = $b

$a bằng và cùng kiểu dữ liệu với
$b

23