Báo cáo thực hành web

Báo Cáo Web Bán Hoa Tươii

LỜI CẢM ƠN
Để hoàn thành báo cáo lần này trước hết chúng em xin gửi đến quý Thầy, Cô
giáo trong khoa Công nghệ thông tin của trường lời cảm ơn chân thành.
Đặc biệt, chúng em xin gửi đến cơ , người đã tận tình hướng dẫn và giúp đỡ chúng
em để hoàn thành báo cáo này lời cảm ơn sâu sắc.
Em cũng xin chân thành cảm ơn các thầy cơ giáo trong Trường nghiệp nói chung,
các thầy cơ trong Bộ mơn Lập Trình Web nói riêng đã dạy, hướng dẫn cho em kiến
thức về các môn đại cương cũng như các môn chuyên ngành, giúp em có được cơ sở lý
thuyết vững vàng và tạo điều kiện giúp đỡ em trong suốt quá trình học tập.
Một lần nữa, em xin cảm ơn gia đình và bạn bè, thầy cơ, … Vì sự giúp đỡ tận
tình, động viên, quan tâm, những lời góp ý chân thành, hữu ích trong suốt thời gian
học tập và thực hiện đồ án.
Cuối cùng em kính chúc q Thầy, Cơ lời chúc sức khỏe và đạt được nhiều thành
công tốt đẹp trong công việc.
Em xin chân thành cảm ơn tất cả!!
Hà Nội, 2 tháng 12 năm 2023
Nhóm sinh viên thực hiện

Hà Nội - 2023

Web bán hoa tươii

Page 1


Báo Cáo Web Bán Hoa Tươii
MỤC LỤC
LỜI CẢM ƠN................................................................................................................. i
MỤC LỤC..................................................................................................................... ii

DANH MỤC BẢNG BIỂU..........................................................................................iv
DANH MỤC HÌNH ẢNH.............................................................................................v
MỞ ĐẦU....................................................................................................................... 1
CHƯƠNG I. CƠ SỞ LÝ THUYẾT............................................................................3
1.1. TỔNG QUAN...................................................................................................3
1.1.1. Internet là gì?................................................................................................3
1.1.2. Website là gì?...............................................................................................4
1.2. CÁC CƠNG NGHỆ ĐƯỢC SỬ DỤNG...........................................................6
1.2.1. Các ngôn ngữ phần thiết kế giao diện...........................................................6
1.2.2. Các thư viện, framework............................................................................10
1.2.3. Tổng quan ngơn ngữ lập trình PHP............................................................11
1.2.4. Hệ quản trị cơ sở dữ liệu My SQL..............................................................16
1.2.5. Tổng quan phần mềm XAMPP...................................................................17
1.2.6. Tổng quan phần mềm Visual Studio Code.................................................18
CHƯƠNG II. PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG.....................................21
2.1. PHÂN TÍCH YÊU CẦU.................................................................................21
2.1.1. Mơ tả đối tượng..........................................................................................21
2.1.2. Đặc tả chức năng chính...............................................................................21
2.2. SƠ ĐỒ, MƠ HÌNH TỔNG QUAN CỦA HỆ THỐNG...................................23
2.2.1. Mơ hình hệ thống của admin......................................................................23
2.2.2. Mơ hình hệ thống của khách hàng..............................................................24
2.3. PHÂN TÍCH THIẾT KẾ HỆ THỐNG...........................................................25
2.3.1. Cơ sơ dữ liệu..............................................................................................25
2.3.2. Mối quan hệ giữa các bảng cơ sở dữ liệu....................................................27
2.3.3. Biểu đồ UseCase.........................................................................................27
2.3.4. Biểu đồ lớp.................................................................................................30
2.3.5. Biểu đồ hoạt động.......................................................................................30
Web bán hoa tươii

Page 2

Báo Cáo Web Bán Hoa Tươii
2.3.6. Biểu đồ tuần tự...........................................................................................33

Web bán hoa tươii

Page 3


Báo Cáo Web Bán Hoa Tươii
CHƯƠNG III. THIẾT KÊ VÀ XÂY DỰNG WEBSITE BÁN HÀNG BẰNG PHP
.......................................................................................................................................34
3.1. GIAO DIỆN ỨNG DỤNG CHO NGƯỜI DÙNG..........................................34
3.2. GIAO DIỆN QUẢN LÝ CỦA ADMIN..........................................................38
KIẾN NGHỊ VÀ KẾT LUẬN...................................................................................44
DANH MỤC TÀI LIỆU THAM KHẢO.....................................................................46
DANH MỤC BẢNG BIỂU
Bảng 2.1. Bảng nhanvien.............................................................................................25
Bảng 2.2. Bảng khachang............................................................................................25
Bảng 2.3. Bảng sanpham.............................................................................................25
Bảng 2.4. Bảng tinhtrangdonhang................................................................................26
Bảng 2.5. Bảng loaisanpham.......................................................................................27
Bảng 2.6. Bảng dondathang.........................................................................................27
Bảng 2.7. Bảng chitietdondathang...............................................................................27

Web bán hoa tươii

Page 4

Báo Cáo Web Bán Hoa Tươii
DANH MỤC HÌNH ẢNH

Hình 1.1. Giao diện phần mềm XAMPP.........................................................................17
Hình 1.2. Giao diện phần mềm Visual Studio Code........................................................18
Hình 2.1. Mơ hình hệ thống admin..................................................................................23
Hình 2.2. Mơ hình hệ thống của khách hàng...................................................................24
Hình 2.3. Mối quan hệ giữa các bảng cơ sở dữ liệu.........................................................27
Hình 2.4. Biểu đồ UseCase tổng quát..............................................................................28
Hình 2.5. Biểu đồ UseCase admin...................................................................................28
Hình 2.6. Biểu đồ UseCase khách hàng...........................................................................29
Hình 2.7. Biểu đồ UseCase quản lý sản phẩm.................................................................29
Hình 2.8. Biểu đồ UseCase quản lý đơn đặt hàng...........................................................30
Hình 2.9. Biểu đồ UseCase thanh tốn............................................................................30
Hình 2.10. Biểu đồ hoạt động chức năng đăng nhập.......................................................31
Hình 2.11. Biểu đồ hoạt động chức năng đặt hàng..........................................................32
Hình 2.12. Biểu đồ hoạt động chức năng duyệt đơn hàng...............................................33
Hình 2.13. Biểu đồ hoạt động thống kê...........................................................................33
Hình 2.14. Biểu đồ tuần tự chức năng đăng nhập............................................................34
Hình 3.1. Giao diện trang chủ cho người dùng................................................................35
Hình 3.2. Giao diện danh mục sản phẩm.........................................................................36
Hình 3.3. Giao diện trang xem chi tiết sản phẩm.............................................................37
Hình 3.4. Giao diện trang giỏ hàng..................................................................................37
Hình 3.5. Giao diện trang đặt hàng..................................................................................38
Hình 3.6. Giao diện trang đăng nhập vào admin.............................................................38
Hình 3.7. Giao diện trang chủ của trang admin...............................................................39
Hình 3.8. Giao diện trang danh sách tài khoản admin.....................................................39
Hình 3.9. Giao diện trang cập nhật tài khoản..................................................................40
Web bán hoa tươii

Page 5


Báo Cáo Web Bán Hoa Tươii
Hình 3.10. Giao diện trang thơng tin tài khoản................................................................40
Hình 3.11. Giao diện trang danh sách sản phẩm..............................................................41
Hình 3.12. Giao diện trang thêm loại sản phẩm...............................................................42
Hình 3.13. Giao diện trang thêm sản phẩm.....................................................................42
Hình 3.14. Giao diện trang xem đơn hàng.......................................................................43

Web bán hoa tươii

Page 6


Thiết kế và xây dựng website bán hàng bằng PHP

MỞ ĐẦU
Thời đại Công nghệ 4.0 tập trung vào sự phát triển của cơng nghệ. Tức là tất cả
những gì liên quan đến hệ thống vật lý không gian mạng Internet. Như chúng ta đều có
thể cảm nhận được, cơng nghệ đang và sẽ tạo ảnh hưởng to lớn lên tất cả các ngành và
lĩnh vực đời sống. Kỷ nguyên khác biệt này tạo ra tốc độ phát triển sản xuất, xã hội
siêu nhanh chóng, phá bỏ các truyền thống trước đây.
1. Lý do chọn đề tài
Ngày nay, ứng dụng công nghệ thơng tin và việc tin học hóa được xem là một
trong những yếu tố mang tính quyết định trong hoạt động của các chính phủ, tổ chức,
cũng như của các cơng ty, nó đóng vai trị hết sức quan trọng, có thể tạo ra những bước
đột phá mạnh mẽ.
Trong hoạt động sản xuất, kinh doanh, giờ đây, 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 cửa hàng
hay shop, 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ẽ là cần thiết.
Ngày nay, với sự phát triển cơng nghệ thơng tin mà máy tính đã được sử dụng
rộng rãi trong các cơ quan, nhà máy, trường học... giúp cho công việc được tốt hơn. Và
bn bán hàng hóa cũng được áp dụng bởi cơng nghệ. Cho dù đã có khá nhiều website
bán hàng khá đẹp mắt nhưng vẫn chưa được người dùng ưa chuộng. Nên em quyết
định chọn đề tài “Thiết kế và xây dựng website bán hoa tươi bằng PHP”. với mong
muốn giúp cho việc quản lý được dễ dàng, thuận tiện và tránh sai sót.
2. Mục đích của đề tài
Tạo ra một website bán hàng trực tuyến để khách hàng có thể tiếp cận được
những sản phẩm từ các shop hoa uy tín. Nhằm mang đến những sản phảm chất lượng
và giá cả ổn định. Mọi người chỉ cần xem sản phẩm mình ưng ý và đặt hàng là có thể
có ngay sản phẩm chất lượng .
Các chức năng được hoàn thiện, bổ sung cho website bao gồm:
 Giao diện dễ sử dụng, có tính thẩm mỹ cao và có thể co giản phù hợp với mọi
thiết bị và trên mọi màn hình.
 Cho phép khách hàng đặt hàng nhanh chóng đảm bảo bí mật thơng tin.
 Thơng tin sản phẩm phong phú, đa dạng.
 Luôn cập nhật, giới thiệu các sản phẩm mới nhất.
WEB Bán Hoa

Page 1


 Giúp người quản trị dễ dàng trong việc thay đổi, cập nhật thông tin sản phẩm,
quản lý hiệu quả khách hàng và các đơn đặt hàng, tính doanh thu hàng tháng.
 Quản lý hoa nhập trả lại, tránh nhầm lẫn và thất thoát cho chủ cửa hàng.
3. Đối tượng và phạm vi nghiên cứu
 Về lý thuyết:

Tìm hiểu quá trình xem sản phẩm, đặt và mua hàng của khách hàng. Lưu ý
những hạn chế khi thực hiện đặt hàng trực tuyến. Thống kê các loại sản phẩm còn lại,
áp dụng những phương pháp tốt nhất để dễ dàng quản lý cũng như cải tiến.
 Về ứng dụng:
Xây dựng các chức năng cơ bản cần thiết cho một website bán hoa và dựa theo
những chức năng của các website quản lý bán hàng khác hiện nay còn đang thiếu hoặc
đã có nhưng chưa được tối ưu.
4. Phương pháp thực hiện
Phương pháp thu thập thông tin: sử dụng những thông tin đã sẵn có từ các nguồn
sách, báo, internet khác nhau cũng như thu thập trực tiếp.
Phương pháp phân tích và tổng thích hợp thuyết: tổng hợp các lý thuyết về lập
trình.
 Nắm vững kiến thức về phân tích và thiết kế hệ thống thơng tin.
 Có kiến thức vững về CSDL: Tổ chức dữ liệu, phân tích, thiết kế CSDL.
 Nắm vững và có khả năng sử dụng thành thạo PHP, HTML, CSS, Javascript,...
 Nắm vững, sử dụng kết hợp một cách hợp lý các kỹ thuật lập trình.
5. Ý nghĩa khoa học và thực tiễn
Thiết kế và xây dựng để tạo ra được website bán hàng đáp ứng và phụ vụ nhu cầu
của con người, có thể mua hàng mọi lúc, mọi nơi,.. Qua đó, có thể nâng cao kiến thức,
kỹ năng lập trình của mình, đồng thời hồn thành đồ án tốt nghiệp.
6. Cấu trúc đề tài
Ngoài phần mở đầu và kết luận thì đề tài có ba chương:
– Chương 1. Cơ sở lý thuyểt
– Chương 2. Phân tích và thiết kế hệ thống
– Chương 3. Thiết kế và xây dựng website bán hàng bằng PHP

WEB Bán Hoa

Page 2

CHƯƠNG I. CƠ SỞ LÝ THUYẾT
1.1. TỔNG QUAN
1.1.1. Internet là gì?
Internet hay Mạng là một hệ thống thơng tin tồn cầu có thể được truy nhập cơng
cộng gồm các mạng máy tính được liên kết với nhau. Hệ thống này truyền thơng tin
theo kiểu nối chuyển gói dữ liệu (packet switching) dựa trên một giao thức liên
mạng đã được chuẩn hóa (giao thức IP). Hệ thống này bao gồm hàng ngàn mạng máy
tính nhỏ hơn của các doanh nghiệp, của các viện nghiên cứu và các trường đại học, của
người dùng cá nhân và các chính phủ trên tồn cầu, được liên kết bởi một loạt các
công nghệ mạng điện tử, không dây và mạng quang. Internet mang theo một loạt các
tài nguyên và dịch vụ thông tin, chẳng hạn như các tài liệu và ứng dụng siêu văn bản
được liên kết với nhau của World Wide Web (WWW), thư điện tử, điện thoại và
chia sẻ file.
Nguồn gốc của Internet bắt nguồn từ sự phát triển của chuyển mạch gói và
nghiên cứu do Bộ Quốc phòng Hoa Kỳ ủy quyền thực hiện vào những năm 1960 để
cho phép chia sẻ thời gian của máy tính. Mạng tiền thân chính, ARPANET, ban đầu
đóng vai trị là xương sống để kết nối các mạng lưới học thuật và quân sự khu vực
trong những năm 1970. Việc tài trợ cho Mạng lưới Quỹ Khoa học Quốc gia như một
xương sống mới trong những năm 1980, cũng như tài trợ tư nhân cho các phần mở
rộng

thương mại khác, dẫn đến sự tham gia trên tồn thế giới trong việc phát triển

các cơng nghệ mạng mới và sáp nhập nhiều mạng. Sự liên kết của các mạng thương
mại và doanh nghiệp vào đầu những năm 1990 đã đánh dấu sự khởi đầu của quá trình
chuyển đổi sang Internet hiện đại, và tạo ra sự tăng trưởng theo cấp số nhân khi các thế
hệ máy tính cá nhân, cá nhân và di động được kết nối với mạng. Mặc dù Internet được
sử dụng rộng rãi bởi các học viện trong những năm 1980, việc thương mại hóa Internet
đã kết hợp các dịch vụ và cơng nghệ của nó vào hầu hết mọi khía cạnh của cuộc sống

hiện đại.
Hầu hết các phương tiện truyền thông truyền thống, bao gồm điện thoại, đài phát
thanh, truyền hình, thư giấy và báo chí được định hình lại, xác định lại hoặc thậm chí
bỏ qua Internet, khai sinh các dịch vụ mới như email, VoIP, truyền hình Internet, âm
nhạc trực tuyến, báo kỹ thuật số và các trang web truyền phát video. Báo, sách và xuất
WEB Bán Hoa

Page 3


bản in khác đang thích ứng với cơng nghệ trang web hoặc được định hình lại thành
blog, web feed và tổng hợp tin tức trực tuyến. Internet đã cho phép và tăng tốc các
hình thức tương tác cá nhân mới thông qua tin nhắn tức thời, diễn đàn Internet và
mạng xã hội. Mua sắm trực tuyến đã tăng theo cấp số nhân cho cả các nhà bán lẻ lớn
và các doanh nghiệp nhỏ và doanh nhân, vì nó cho phép các công ty mở rộng sự hiện
diện "gạch và vữa" của họ để phục vụ thị trường lớn hơn hoặc thậm chí bán hàng hóa
và dịch vụ hồn tồn trực tuyến. Các dịch vụ từ doanh nghiệp đến doanh nghiệp và tài
chính trên Internet ảnh hưởng đến chuỗi cung ứng trên tồn bộ các ngành cơng nghiệp.
1.1.2. Website là gì?
Website còn gọi là trang web hoặc trang mạng, và nội dung liên quan được xác
định bằng một tên miền chung và được xuất bản trên ít nhất một máy chủ web. Các ví
dụ đáng chú ý là các website wikipedia.org, google.com và amazon.com.
Tất cả các trang web có thể truy cập cơng khai đều tạo thành World Wide Web.
Cũng có những trang web riêng tư chỉ có thể được truy cập trên mạng riêng, chẳng hạn
như trang web nội bộ của công ty dành cho nhân viên của công ty.
Các trang web thường dành riêng cho một chủ đề hoặc mục đích cụ thể, chẳng
hạn như tin tức, giáo dục, thương mại, giải trí hoặc mạng xã hội. Siêu liên kết giữa các
trang web hướng dẫn điều hướng của trang web, thường bắt đầu với trang chủ.
Người dùng có thể truy cập các trang web trên nhiều loại thiết bị, bao gồm máy
tính để bàn, máy tính xách tay, máy tính bảng và điện thoại thơng minh. Ứng

dụng được sử dụng trên các thiết bị này được gọi là trình duyệt web.
Các trang web có thể được sử dụng theo nhiều kiểu khác nhau: trang web cá
nhân, trang web công ty cho cơng ty, trang web chính phủ, trang web tổ chức, v.v. Các
trang web có thể là sản phẩm của một cá nhân, một doanh nghiệp hoặc tổ chức khác và
thường dành riêng cho một chủ đề hoặc mục đích cụ thể. Bất kỳ trang web nào cũng
có thể chứa một siêu liên kết đến bất kỳ trang web nào khác, do đó, sự phân biệt giữa
các trang web riêng lẻ, theo nhận thức của người dùng, có thể không rõ ràng.
Một số trang web yêu cầu người dùng đăng nhập hoặc đăng ký để truy cập nội
dung. Ví dụ về các trang web đăng ký bao gồm nhiều trang web kinh doanh, trang web
tin tức, trang web tạp chí học thuật, trang web trị chơi, trang web chia sẻ tệp, bảng

WEB Bán Hoa

Page 4


tin , email dựa trên web, trang web mạng xã hội, trang web cung cấp dữ liệu thị trường
chứng khoán theo thời gian thực, cũng như các trang web cung cấp nhiều dịch vụ khác.
Trong khi "web site" là cách viết gốc của tiếng Anh (đôi khi được viết hoa "Web
site", vì "Web" là danh từ riêng khi đề cập đến World Wide Web), biến thể này đã trở
nên hiếm khi được sử dụng và "website" đã trở thành cách viết chuẩn.
 Website tĩnh
Trang web tĩnh là trang web có các trang web được lưu trữ trên máy chủ ở định
dạng được gửi đến trình duyệt web của khách hàng. Nó chủ yếu được mã hóa bằng
Hypertext Markup Language (HTML); Cascading Style Sheets (CSS) được sử dụng để
kiểm soát giao diện ngồi HTML cơ bản. Hình ảnh thường được sử dụng để tạo ra sự
xuất hiện mong muốn và là một phần của nội dung chính. Âm thanh hoặc video cũng
có thể được coi là nội dung "tĩnh" nếu nó phát tự động hoặc nói chung là khơng tương
tác. Loại trang web này thường hiển thị cùng một thông tin cho tất cả khách truy cập.
Tương tự như việc phát một tập tài liệu in cho khách hàng hoặc khách hàng, một trang

web tĩnh nói chung sẽ cung cấp thơng tin chuẩn, nhất quán trong một khoảng thời gian
dài. Mặc dù chủ sở hữu trang web có thể cập nhật định kỳ, nhưng đây là một quy trình
thủ cơng để chỉnh sửa văn bản, ảnh và nội dung khác và có thể yêu cầu các kỹ năng và
phần mềm thiết kế trang web cơ bản. Các biểu mẫu đơn giản hoặc ví dụ tiếp thị của
trang web, chẳng hạn như trang web cổ điển, trang web năm trang hoặc trang web tài
liệu quảng cáo thường là trang web tĩnh, vì chúng trình bày thơng tin tĩnh, được xác
định trước cho người dùng. Điều này có thể bao gồm thơng tin về một công ty và các
sản phẩm và dịch vụ của công ty thông qua văn bản, ảnh, ảnh động, âm thanh/video và
menu điều hướng.
Các trang web tĩnh vẫn có thể sử dụng Server Side Includes (SSI) như một tiện
ích chỉnh sửa, chẳng hạn như chia sẻ một thanh menu chung trên nhiều trang. Vì hành
vi của trang web đối với người đọc vẫn là tĩnh nên đây không được coi là trang web
động.
 Website động
Trang web động là trang web tự động thay đổi hoặc tùy chỉnh thường xuyên và tự
động. Các trang động phía máy chủ được tạo "nhanh chóng" bởi mã máy tính tạo ra

WEB Bán Hoa

Page 5


HTML (CSS chịu trách nhiệm về giao diện và do đó, là các tệp tĩnh). Có một loạt các
hệ thống phần mềm, chẳng hạn như CGI, Java Servlet và Java Server Pages (JSP),
Active Server Pages và ColdFusion (CFML) có sẵn để tạo hệ thống web động và trang
web động. Các khung ứng dụng web và hệ thống mẫu web khác nhau có sẵn cho các
ngơn ngữ lập trình thơng dụng như Perl, PHP, Python và Ruby để giúp tạo các trang
web động phức tạp nhanh hơn và dễ dàng hơn.
Một trang web có thể hiển thị trạng thái hiện tại của cuộc đối thoại giữa những
người dùng, theo dõi tình hình thay đổi hoặc cung cấp thơng tin theo một cách nào đó

được cá nhân hóa theo yêu cầu của từng người dùng. Ví dụ: khi trang đầu của một
trang tin tức được yêu cầu, mã chạy trên máy chủ web có thể kết hợp các đoạn HTML
được lưu trữ với các tin bài được truy xuất từ cơ sở dữ liệu hoặc một trang web khác
qua RSS để tạo ra một trang bao gồm thông tin mới nhất. Các trang web động có thể
tương tác bằng cách sử dụng các biểu mẫu HTML, lưu trữ và đọc lại cookie của trình
duyệt hoặc bằng cách tạo một loạt các trang phản ánh lịch sử các lần nhấp trước đó.
Một ví dụ khác về nội dung động là khi một trang web bán lẻ có cơ sở dữ liệu về
các sản phẩm truyền thông cho phép người dùng nhập một yêu cầu tìm kiếm, ví dụ
như đối với từ khóa Beatles. Đáp lại, nội dung của trang web sẽ thay đổi một cách tự
nhiên như trước đây, và sau đó sẽ hiển thị danh sách các sản phẩm của Beatles như
CD, DVD và sách. HTML động sử dụng mã JavaScript để hướng dẫn trình duyệt web
cách sửa đổi nội dung trang một cách tương tác. Một cách khác để mô phỏng một loại
trang web động nhất định trong khi tránh mất hiệu suất khi khởi chạy động cơ trên cơ
sở mỗi người dùng hoặc mỗi kết nối là việc tự động tạo lại một loạt lớn các trang tĩnh
theo định kỳ.
1.2. CÁC CÔNG NGHỆ ĐƯỢC SỬ DỤNG
Website được sử dụng các ngôn ngữ chuẩn cho 1 trang web như: HTML, CSS,
Javascript, PHP; các thư viện, framework như: jQuey, Bootstrap và Hệ quản trị CSDL
MySQL. Kèm theo đó là sử dụng Xampp làm môi trường WebServer hỗ trợ sẵn
Apache và MySQL.
1.2.1. Các ngôn ngữ phần thiết kế giao diện
 HTML (HyperText Markup Language – Ngôn ngữ đánh dấu siêu văn bản)

WEB Bán Hoa

Page 6


HTML (HyperText Markup Language – Ngôn ngữ đánh dấu siêu văn bản) 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 World Wide Web. Cùng với CSS và JavaScript, HTML tạo ra bộ
ba nền tảng kỹ thuật cho các website. 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úc củ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úc
HTML, hình ảnh và các đối tượng khác như biểu mẫu tương tác có thể được nhúng
và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úc
bằ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 tags, được
viết bằng dấu ngoặc nhọn. Các tags như <img /> và <input /> giới thiệu trực tiếp
nội dung vào trang. Các tags khác như

bao quanh và cung cấp thông tin về văn
bản tài liệ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 là một ngôn ngữ đánh dấu mà các trình duyệt web sử dụng để giải thích
và soạn văn bản, hình ảnh và các tài liệu khác thành các trang web trực quan hoặc
nghe được. Các đặc điểm mặc định cho mọi mục của đánh dấu HTML được xác định
trong trình duyệt và các đặc điểm này có thể được thay đổi hoặc nâng cao bằng cách sử
dụng thêm CSS của nhà thiết kế trang web. Nhiều thành phần văn bản được tìm thấy
trong báo cáo kỹ thuật 1988 ISO TR 9537 Techniques for using SGML, lần lượt đề cập
đến các tính năng của các ngơn ngữ định dạng văn bản ban đầu, chẳng hạn như được
sử dụng bởi lệnh RUNOFF được phát triển vào đầu những năm 1960 cho hệ điều hành
CTSS (Compatible Time-Sharing System): các lệnh định dạng này bắt nguồn từ các
lệnh được sử dụng bởi các bộ sắp chữ để định dạng tài liệu theo cách thủ công. Tuy
nhiên, khái niệm SGML về đánh dấu tổng quát dựa trên các phần tử (các phạm vi được
chú thích lồng nhau với các thuộc tính) chứ khơng chỉ đơn thuần là các hiệu ứng in, với
sự phân tách của cấu trúc và đánh dấu, HTML đã được chuyển dần theo hướng này
với CSS.
WEB Bán Hoa

Page 7


Cấu trúc cơ bản của một file HTML:

WEB Bán Hoa

Page 8


<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<H1>Tiêu đề</H1>
...
</BODY>
</HTML>
 CSS (Cascading Style Sheets)
CSS là viết tắt của Cascading Style Sheets. Ngơn ngữ lập trình này chỉ ra cách
các yếu tố HTML của trang web thực sự sẽ xuất hiện trên giao diện của trang. Nếu
HTML cung cấp các công cụ thô cần thiết để cấu trúc nội dung trên một trang web thì
CSS sẽ giúp định hình kiểu nội dung này để trang web xuất hiện trước người dùng theo
một cách đẹp hơn. Bạn có thể hiểu là nếu HTML là tường gạch thơ thì CSS là sơn để
trang trí cho tường gạch đó. Các ngơn ngữ này được giữ riêng biệt để đảm bảo các
trang web được xây dựng chính xác trước khi chúng được định dạng lại.
 JavaScript
JavaScript theo phiên bản hiện hành, là một ngơn ngữ lập trình thơng dịch được
phát triển từ các ý niệm nguyên mẫu. Ngôn ngữ này được dùng rộng rãi cho các trang

web (phía người dùng) cũng như phía máy chủ (với Nodejs). Nó vốn được phát trển
bởi Brendan Eich tại Hãng truyền thông Netscape với cái tên đầu tiên Mocha, rồi sau
đó đổi tên thành LiveScript, và cuối cùng thành JavaScript. Giống Java, JavaScript
có cú pháp tương tự C, nhưng nó gần với Self hơn Java. .js là phần mở rộng thường
được dùng cho tập tin mã nguồn JavaScript.
Phiên bản mới nhất của JavaScript là ECMAScript 7. ECMAScript là phiên bản
chuẩn hóa của JavaScript. Trình duyệt Mozilla phiên bản 1.8 beta 1 có hỗ trợ khơng
đầy đủ cho E4X - phần mở rộng cho JavaScript hỗ trợ làm việc với XML, được chuẩn
hóa trong ECMA-357.
Cùng thời điểm Netscape bắt đầu sử dụng Java trên trình duyệt Netscape,
LiveScript đã được đổi tên thành JavaScript để được chú ý hơn bởi ngôn ngữ lập
WEB Bán Hoa

Page 9


trình Java lúc đó đang được coi là một hiện tượng. JavaScript được bổ sung vào trình
duyệt Netscape bắt đầu từ phiên bản 2.0b3 của trình duyệt này vào tháng 12 năm 1995.
Trên thực tế, JavaScript không được phát triển dựa từ Java. Do đó JavaScript chỉ dựa
trên các cách đặt tên của Java. Java Script gồm 2 mảng là client-server thực hiện lệnh
trên máy của end-user và web-server. Sau thành công của JavaScript, Microsoft bắt
đầu phát triển JScript, một ngơn ngữ có cùng ứng dụng và tương thích với JavaScript.
JScript được bổ sung vào trình duyệt Internet Explorer bắt đầu từ Internet Explorer
phiên bản 3.0 được phát hành tháng 8 năm 1996.
DOM (Document Object Model), một khái niệm thường được nhắc đến với
JavaScript trên thực tế không phải là một phần của chuẩn ECMAScript, DOM là một
chuẩn riêng biệt có liên quan chặt chẽ với XML.
Trên trình duyệt, rất nhiều trang web sử dụng JavaScript để thiết kế trang web
động và một số hiệu ứng hình ảnh thơng qua DOM. JavaScript được dùng để thực hiện
một số tác vụ không thể thực hiện được với chỉ HTML như kiểm tra thơng tin nhập vào,

tự động thay đổi hình ảnh,... Ở Việt Nam, JavaScript còn được ứng dụng để làm bộ
gõ tiếng Việt giống như bộ gõ hiện đang sử dụng trên trang Wikipedia tiếng Việt. Tuy
nhiên, mỗi trình duyệt áp dụng JavaScript khác nhau và không tuân theo chuẩn W3C
DOM, do đó trong rất nhiều trường hợp lập trình viên phải viết nhiều phiên bản của
cùng một đoạn mã nguồn để có thể hoạt động trên nhiều trình duyệt. Một số công nghệ
nổi bật dùng JavaScript để tương tác với DOM bao gồm DHTML, Ajax và SPA.
Bên ngồi trình duyệt, JavaScript có thể được sử dụng trong tập tin PDF của
Adobe Acrobat và Adobe Reader. Điều khiển Dashboard trên hệ điều hành Mac OS X
phiên bản 10.4 cũng có sử dụng JavaScript. Công nghệ kịch bản linh động (active
scripting) của Microsoft có hỗ trợ ngơn ngữ JScript làm một ngôn ngữ kịch bản dùng
cho hệ điều hành. JScript.NET là một ngơn ngữ tương thích với CLI gần giống JScript
nhưng có thêm nhiều tính năng lập trình hướng đối tượng.
Từ khi Nodejs ra đời vào năm 2009, Javascript được biết đến nhiều hơn là một
ngôn ngữ đa nền tảng khi có thể chạy trên cả mơi trường máy chủ cũng như môi
trường nhúng.

WEB Bán Hoa

Page 10


Mỗi ứng dụng này đều cung cấp mơ hình đối tượng riêng cho phép tương tác với
môi trường chủ, với phần lõi là ngơn ngữ lập trình JavaScript gần như giống nhau.
1.2.2. Các thư viện, framework
 jQuery
jQuery là thư viện được viết từ Javascript, jQuery giúp xây dựng các chức năng
bằng Javascript dễ dàng, nhanh và giàu tính năng hơn. jQuery được sử dụng đến 99%
trên tổng số website trên thế giới hiện nay.Website kinh doanh giày online 7. Khi bạn
đã có kiến thức javascript căn bản thì học jQuery sẽ rất nhanh, bởi chúng ta chỉ học
cách sử dụng các thư viện jQuery API. còn cấu trúc và cú pháp lập trình thì khơng khác

gì Javascript. jQuery khơng phải là một ngơn ngữ lập trình riêng biệt mà hoạt động
liên kết với JavaScript. Với jQuery, bạn có thể làm được nhiều việc hơn mà lại tốn ít
cơng sức hơn. jQuery cung cấp các API giúp việc duyệt tài liệu HTML, hoạt ảnh, xử
lý sự kiện và thao tác AJAX đơn giản hơn. jQuery hoạt động tốt trên nhiều loại trình
duyệt khác nhau. Một trong những đối thủ nặng ký của jQuery đó là JS Framework.
jQuery được phát hành vào tháng 1 năm 2006 bởi John Resig tại BarCamp NYC. Nó
được duy trì và phát triển bởi một nhóm các nhà phát triển của Google đứng đầu là
Timmy Wilson.
jQuery đơn giản hóa việc duyệt tài liệu HTML, xử lý sự kiện, hoạt ảnh và tưưng
tác Ajax để phát triển web nhanh chóng. Các phân tích web đã chỉ ra rằng, jQuery là
thư viện JavaScript được triển khai rộng rãi nhất.
jQuery là một bộ công cụ JavaScript được thiết kế để đơn giản hóa các tác vụ
khác nhau bằng cách viết ít code hơn. Dưới đây liệt kê một số tính năng tối quan trọng
được hỗ trợ bởi jQuery:
– Thao tác DOM − jQuery giúp dễ dàng lựa chọn các phần tử DOM để traverse
(duyệt) một cách dễ dàng như sử dụng CSS, và chỉnh sửa nội dung của chúng bởi sử
dụng phương tiện Selector mã nguồn mở, mà được gọi là Sizzle.
– Xử lý sự kiện − jQuery giúp tương tác với người dùng tốt hơn bằng việc xử lý
các sự kiện đa dạng mà không làm cho HTML code rối tung lên với các Event
Handler.
– Hỗ trợ AJAX − jQuery giúp bạn rất nhiều để phát triển một site giàu tính năng
và phản hồi tốt bởi sử dụng cơng nghệ AJAX.
WEB Bán Hoa

Page 11


– Hiệu ứng động − jQuery đi kèm với rất nhiều hiệu ứng động đẹp mà bạn có thể
sử dụng cho các website của mình.
– Gọn nhẹ − jQuery là thư viện gọn nhẹ - nó chỉ có kích cỡ khoảng 19KB

(gzipped).
– Được hỗ trợ hầu hết bởi các trình duyệt hiện đại − jQuery được hỗ trợ hầu hết
bởi các trình duyệt hiện đại, và làm việc tốt trên IE 6.0+, FF 2.0+, Safari 3.0+, Chrome
và Opera 9.0+.
– Cập nhật và hỗ trợ các công nghệ mới nhất − jQuery hỗ trợ CSS3 Selector và
cú pháp XPath cơ bả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 q trình thiết kế
website diễ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… Bootstrap
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 hồ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ẩm mớ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.2.3. Tổng quan ngơn ngữ lập trình PHP
PHP thường được viết tắt thành PHP 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 qt. Nó rất thích hợp với 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.
Ngơn ngữ, các thư viện, tài liệu gốc của PHP được xây dựng bởi cộng đồng và có
sự đóng góp rất lớn của Zend Inc., công ty do các nhà phát triển cốt lõi của PHP lập
nên nhằm tạo ra một môi trường chuyên nghiệp để đưa PHP phát triển ở quy mô doanh
nghiệp.
WEB Bán Hoa

Page 12


Nó được chạy ở phía server nhằm sinh ra mã html trên client. Nhờ vậy mà nó tạo
ra các ứng dụng web chạy trên máy chủ. Mã lệnh PHP có thể được chúng vào trong
HTML nhờ sử dụng cặp thẻ PHP <?php ?>.
 PHP/FI
PHP được phát triển từ một sản phẩm có tên là PHP/FI. PHP/FI do Rasmus
Lerdorf tạo ra năm 1994, ban đầu được xem như là một tập con đơn giản của các mã
kịch bản Perl để theo dõi tình hình truy cập đến bản sơ yếu lý lịch của ơng trên mạng.
Ơng đã đặt tên cho bộ mã kịch bản này là 'Personal Home Page Tools'. Khi cần đến
các chức năng rộng hơn, Rasmus đã viết ra một bộ thực thi bằng C lớn hơn để có thể
truy vấn tới các cơ sở dữ liệu và giúp cho người sử dụng phát triển các ứng dụng web
đơn giản. Rasmus đã quyết định công bố mã nguồn của PHP/FI cho mọi người xem, sử
dụng cũng như sửa các lỗi có trong nó đồng thời cải tiến mã nguồn.
PHP/FI, viết tắt từ "Personal Home Page/Forms Interpreter", bao gồm một số các
chức năng cơ bản cho PHP như ta đã biết đến chúng ngày nay. Nó có các biến kiểu như
Perl, thông dịch tự động các biến của form và cú pháp HTML nhúng. Cú pháp này
giống như của Perl, mặc dù hạn chế hơn nhiều, đơn giản và có phần thiếu nhất quán.
Vào năm 1997, PHP/FI 2.0, lần viết lại thứ hai của phiên bản C, đã thu hút được
hàng ngàn người sử dụng trên toàn thế giới với xấp xỉ 50.000 tên miền đã được ghi
nhận là có cài đặt nó, chiếm khoảng 1% số tên miền có trên mạng Internet. Tuy đã có
tới hàng nghìn người tham gia đóng góp vào việc tu chỉnh mã nguồn của dự án này thì
vào thời đó nó vẫn chủ yếu chỉ là dự án của một người.
PHP/FI 2.0 được chính thức công bố vào tháng 11 năm 1997, sau một thời gian
khá dài chỉ được công bố dưới dạng các bản beta. Nhưng khơng lâu sau đó, nó đã được
thay thế bởi các bản alpha đầu tiên của PHP 3.0.
 PHP 3
PHP 3.0 là phiên bản đầu tiên cho chúng ta thấy một hình ảnh gần gũi với các
phiên bản PHP mà chúng ta được biết ngày nay. Nó đã được Andi Gutmans và Zeev

Suraski tạo ra năm 1997 sau khi viết lại hồn tồn bộ mã nguồn trước đó. Lý do chính
mà họ đã tạo ra phiên bản này là do họ nhận thấy PHP/FI 2.0 hết sức yếu kém trong
việc phát triển các ứng dụng thương mại điện tử mà họ đang xúc tiến trong một dự án
của trường đại học. Trong một nỗ lực hợp tác và bắt đầu xây dựng dựa trên cơ sở
WEB Bán Hoa

Page 13


người dùng đã có của PHP/FI, Andi, Rasmus và Zeev đã quyết định hợp tác và công
bố PHP 3.0 như là phiên bản thế hệ kế tiếp của PHP/FI 2.0, và chấm dứt phát triển
PHP/FI 2.0.
Một trong những sức mạnh lớn nhất của PHP 3.0 là các tính năng mở rộng mạnh
mẽ của nó. Ngồi khả năng cung cấp cho người dùng cuối một cơ sở hạ tầng chặt chẽ
dùng cho nhiều cơ sở dữ liệu, giao thức và API khác nhau, các tính năng mở rộng của
PHP 3.0 đã thu hút rất nhiều nhà phát triển tham gia và đề xuất các mơ đun mở rộng
mới. Hồn tồn có thể kết luận được rằng đây chính là điểm mấu chốt dẫn đến thành
công vang dội của PHP 3.0. Các tính năng khác được giới thiệu trong PHP 3.0 gồm có
hỗ trợ cú pháp hướng đối tượng và nhiều cú pháp ngơn ngữ nhất qn khác.
Ngơn ngữ hồn tồn mới đã được cơng bố dưới một cái tên mới, xóa bỏ mối liên
hệ với việc sử dụng vào mục đích cá nhân hạn hẹp mà cái tên PHP/FI 2.0 gợi nhắc. Nó
đã được đặt tên ngắn gọn là 'PHP', một kiểu viết tắt hồi quy của "PHP: Hypertext
Preprocessor".
Vào cuối năm 1998, PHP đã phát triển được con số cài đặt lên tới hàng chục ngàn
người sử dụng và hàng chục ngàn Web site báo cáo là đã cài nó. Vào thời kì đỉnh cao,
PHP 3.0 đã được cài đặt cho xấp xỉ 10% số máy chủ Web có trên mạng Internet.
PHP 3.0 đã chính thức được cơng bố vào tháng 6 năm 1998, sau thời gian 9 tháng
được cộng đồng kiểm nghiệm.
 PHP 4
Vào mùa đông năm 1998, ngay sau khi PHP 3.0 chính thức được cơng bố, Andi

Gutmans và Zeev Suraski đã bắt đầu bắt tay vào việc viết lại phần lõi của PHP. Mục
đích thiết kế là nhằm cải tiến tốc độ xử lý các ứng dụng phức tạp, và cải tiến tính mơ
đun của cơ sở mã PHP. Những ứng dụng như vậy đã chạy được trên PHP 3.0 dựa trên
các tính năng mới và sự hỗ trợ khá nhiều các cơ sở dữ liệu và API của bên thứ ba,
nhưng PHP 3.0 đã không được thiết kế để xử lý các ứng dụng phức tạp như thế này
một cách có hiệu quả.
Một động cơ mới, có tên 'Zend Engine' (ghép từ các chữ đầu trong tên của Zeev
và Andi), đã đáp ứng được các nhu cầu thiết kế này một cách thành công, và lần đầu
tiên được giới thiệu vào giữa năm 1999. PHP 4.0, dựa trên động cơ này, và đi kèm với
hàng loạt các tính năng mới bổ sung, đã chính thức được cơng bố vào tháng 5
WEB Bán Hoa

Page 14