Thiết kế và xây dựng website bán hàng mỹ phẩm

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

KHOA CÔNG NGHỆ ĐIỆN TỬ - VIỄN THÔNG
---------

ĐỒ ÁN
TỐT NGHIỆP ĐẠI HỌC
ĐỀ TÀI: “THIẾT KẾ VÀ XÂY DỰNG WEBSITE
BÁN HÀNG MỸ PHẨM”

Giáo viên hướng dẫn

:

THS. QUÁCH THỊ HẠNH

Sinh viên thực hiện

:

NGUYỄN THỊ LOAN

Lớp

:

K16A

Khóa

:

2013 - 2017

Hệ

:

ĐẠI HỌC CHÍNH QUY

Hà Nội, Tháng 5 năm 2017


BÁO CÁO ĐỒ ÁN TỐT NGHIỆP

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

CỘNG HOÀ 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: Nguyễn Thị Loan
Lớp: K16A

Khoá: 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 đề tài đồ án tốt nghiệp:
“THIẾT KẾ VÀ XÂY DỰNG WEBSITE BÁN HÀNG MỸ PHẨM”

2. Nội dung chính

-

Cơ sở lý thuyết

-

Phân tích các chức năng của website

-

Thiết kế website

-

Tổng kết

3. Cơ sở dữ liệu ban đầu

4. Ngày giao: 20 /02/2017
5. Ngày nộp: 13/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)

GVHD: ThS. QUÁCH THỊ HẠNH

SVTH: NGUYỄN THỊ LOAN


BÁO CÁO ĐỒ ÁN TỐT NGHIỆP

MỞ ĐẦU

Internet là một trong những sản phẩm có giá trị hết sức lớn lao và ngày càng trở
thành một công cụ không thể thiếu, là nền tảng chính cho sự truyền tải, trao đổi thông
tin trên toàn cầu. Giờ đây, mọi việc liên quan đến thông tin trở nên thật dễ dàng cho
người sử dụng: chỉ cần có một máy tính kết nối internet và một dòng dữ liệu truy tìm
thì gần như lập tức... cả thế giới về vấn đề mà bạn đang quan tâm sẽ hiện ra, có đầy đủ
thông tin, hình ảnh …
Cùng với đó khi công nghệ ngày càng phát triển con người có trong tay công cụ
hữu hiệu làm tăng năng suất lao động và hiệu quả công việc chính vì vậy thương mại
điện tử một trong những công cụ đó. Bill Gate đã từng nói: “Năm 2015, bạn có 2 lựa
chọn: một là kinh doanh cùng internet, 2 là bạn không kinh doanh nữa”. Thương mại
điện tử đã trở thành một phương tiện giao dịch quen thuộc của các công ty thương mại
lớn trên thế giới. Nó đang có tốc độ phát triển rất mạnh. Và hầu hết các công ty bán
hàng hiện nay đều là các công ty thương mại điện tử và mua sắm qua mạng đã trở
thành thói quen hàng ngày của nhiều người.
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 một công ty, 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. Vậy phải quảng bá thế nào đó là xây dựng được một Website cho cửa
hàng của mình quảng bá tất cả các sản phẩm của mình bán.
Để hiểu kỹ hơn về một website thương mại điện tử nên em chọn đề tài: “THIẾT
KẾ VÀ XÂY DỰNG WEBSITE BÁN HÀNG MỸ PHẨM”. Sử dụng ngôn ngữ PHP,
HTML, MYSQL,CSS, JAVASCRIPT và công cụ hỗ trợ lập trình Dreamweaver và
phần mền Xampp.
Nội dung bao đồ án gồm có 4 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 website
Chương 3: Thiết kế website
Chương 4: Tổng kết

GVHD: ThS. QUÁCH THỊ HẠNH

SVTH: NGUYỄN THỊ LOAN


BÁO CÁO ĐỒ ÁN TỐT NGHIỆP

LỜI CẢM ƠN
Lời đầu tiên em xin chân thành kính gửi đến cô Ths.Quách Thị Hạnh lời cảm ơn
chân thành và sâu sắc nhất. Em cảm ơn cô vì đã nhiệt tình, tận tinh chỉ bảo, hướng dẫn
em trong suốt quá trình làm báo cáo thực tập.
Em xin chân thành gửi lời cảm ơn đến toàn thể các thầy cô giáo trong Khoa Điện
tử - Thông tin Trường Viện Đại Học Mở Hà Nội đã cung cấp cho em đầy đủ các kiến
thức về chuyên môn cũng như các kinh nghiệm trong cuộc sống hằng ngày trong suốt
thời gian qua.
Tuy nhiên, vì thời gian có hạn cũng như kiến thức và kinh nghiệm thực tiễn của em

còn nhiều hạn chế nên em không thể tránh khỏi những thiếu xót và cũng như chưa phát
huy hết những ý tưởng, khả năng hỗ trợ của ngôn ngữ và kỹ thuật lập trình vào đề tài.
Trong quá trình xây dựng website, không thể tranh khỏi những sai xót. Vì thế, em rất
mong nhận được sự góp ý của các thầy cô và các bạn để đề tài của em được hoàn
chỉnh hơn.
Một lần nữa em xin chân thành cảm ơn!

SINH VIÊN THỰC HIỆN

Nguyễn Thị Loan

GVHD: ThS. QUÁCH THỊ HẠNH

SVTH: NGUYỄN THỊ LOAN


BÁO CÁO ĐỒ ÁN TỐT NGHIỆP

MỤC LỤC
DANH MỤC BẢNG
DANH MỤC HÌNH
DANH SÁCH CÁC THUẬT NGỮ VIẾT TẮT
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT .................................................................. 1
I. GIỚI THIỆU CHUNG................................................................................ 1
1. Khái niệm Website .................................................................................... 1
2. Tên miền (Domain) ................................................................................... 1
3. Hosting ...................................................................................................... 3
4. Mã nguồn (source code) ........................................................................... 5
5. Phân loại Website ..................................................................................... 5
II. TÌM HIỂU VỀ CÁC NGÔN NGỮ LẬP TRÌNH WEB ............................ 7

1. Tìm hiểu về HTML ................................................................................... 7
2. Tìm hiểu về CSS ...................................................................................... 16
3. Tìm hiểu về Javascrip ............................................................................. 17
4. Tìm hiểu về ngôn ngữ lập trình PHP .................................................... 31
III. HỆ CƠ SỞ DỮ LIỆU MYSQL .............................................................. 41
1. Các khái niệm cơ bản ............................................................................. 41
2. Các kiểu dữ liệu ...................................................................................... 41
3. Các lệnh thao tác với CSDL ................................................................... 43
4. Các câu lệnh truy vấn dữ liệu ................................................................ 45
5. Kết hợp PHP và MYSQL trong ứng dụng website ................................ 45
IV. QUY TRÌNH THIẾT KẾ MỘT WEBSITE .......................................... 46
1. Quy trình thiết kế website ....................................................................... 46
2. Cách thức xuất bản website.................................................................... 47
3. Lựa chọn và mua tên miền ..................................................................... 47
4. Lựa chọn và thiết lập web server............................................................ 48
5. Upload website ........................................................................................ 48
6. Cập nhật và chỉnh sửa website ............................................................... 48
7. Quảng bá ................................................................................................. 48
GVHD: ThS. QUÁCH THỊ HẠNH

SVTH: NGUYỄN THỊ LOAN


BÁO CÁO ĐỒ ÁN TỐT NGHIỆP

8. Bảo trì ...................................................................................................... 49
CHƯƠNG 2: PHÂN TÍCH CÁC CHỨC NĂNG CỦA WEB ....................... 50
I. GIỚI THIỆU CHUNG VỀ WEBSITE ................................................................ 50
1. Mục tiêu ................................................................................................... 50
2. Yêu cầu .................................................................................................... 50

II.

CHỨC NĂNG WEBSITE .............................................................................. 51

1. Những chức năng cơ bản của website ................................................... 51
2. Sơ đồ phân cấp các chức năng............................................................... 52
CHƯƠNG 3: THIẾT KẾ WEBSITE .............................................................. 58
I. CÔNG CỤ HỖ TRỢ THIẾT KẾ WEBSITE ........................................................ 58
II.

THIẾT KẾ CƠ SƠ DỮ LIỆU ......................................................................... 59

1. Tạo cơ sở dữ liệu ..................................................................................... 59
2. Thiết kế giao diện .................................................................................... 61
CHƯƠNG 4: TỔNG KẾT ................................................................................ 70
TÀI LIỆU THAM KHẢO ................................................................................ 71

GVHD: ThS. QUÁCH THỊ HẠNH

SVTH: NGUYỄN THỊ LOAN


BÁO CÁO ĐỒ ÁN TỐT NGHIỆP

DANH MỤC BẢNG
Bảng 1: các thẻ nhóm inline ........................................................................................13
Bảng 2: thuộc tính của thẻ <frameset> ......................................................................14
Bảng 3: thuộc tính của thẻ <frame> ..........................................................................15
Bảng 4: thuộc tính của thẻ <table> ............................................................................15
Bảng 5: thuộc tính của thẻ <tr> .................................................................................16

Bảng 6: thuộc tính của thẻ <td> .................................................................................16
Bảng 7: các ký tự đặc biệt và ý nghĩa của trong javascript .....................................20
Bảng 8: các thuộc tính của mảng ...............................................................................26
Bảng 9: các thuộc tính của đối tượng math ..............................................................28
Bảng 10: các phương thức của đối tượng math ........................................................28
Bảng 11: các phương thức của đối tượng string .......................................................30
Bảng 12: các nhóm phương thức của đối tượng date..............................................30
Bảng 13: các kiểu dữ liệu số của mysql .....................................................................42
Bảng 14: các kiểu dữ liệu string của mysql ...............................................................43
Bảng 15: các kiểu dữ liệu ngày tháng của mysql ......................................................43
Bảng 16: các thuộc tính của thẻ cột trong mysql ......................................................44

GVHD: ThS. QUÁCH THỊ HẠNH

SVTH: NGUYỄN THỊ LOAN


BÁO CÁO ĐỒ ÁN TỐT NGHIỆP

DANH MỤC HÌNH
Hình 1: cây phân cấp đối tượng .................................................................................27
Hình 2: quá trình thông dịch trang php ....................................................................31
Hình 3: sơ đồ luồng dữ liệu ngữ cảnh ........................................................................52
Hình 4: sơ đồ phân cấp chức năng cho khách hàng .................................................53
Hình 5: sơ đồ phân cấp chức năng của cho quản trị viên ........................................55
Hình 6: kết nối các bảng trong cơ sở dữ liệu ............................................................59
Hình 7: bảng danh mục sản phẩm .............................................................................59
Hình 8: bảng sản phẩm ...............................................................................................60
Hình 9: bảng thông tin và nội dung liên hệ của khách hàng gửi tới cửa hàng ......60
Hình 10: bảng tin tức...................................................................................................60

Hình 11: bảng đơn hàng..............................................................................................61
Hình 12: bảng thông tin đăng kí của thành viên ......................................................61
Hình 13: trang chủ.......................................................................................................62
Hình 14: khi trang chủ cuộn lên .................................................................................62
Hình 15: trang sản phẩm ............................................................................................63
Hình 16: trang chi tiết sản phẩm................................................................................64
Hình 17: trang giỏ hàng ..............................................................................................64
Hình 18: trang đặt hàng ..............................................................................................65

GVHD: ThS. QUÁCH THỊ HẠNH

SVTH: NGUYỄN THỊ LOAN


BÁO CÁO ĐỒ ÁN TỐT NGHIỆP

DANH SÁCH CÁC THUẬT NGỮ VIẾT TẮT
WWW ………………… World Wide Web
HTTP ……………….... HyperText Transfer Protocol
HTTPS………………… Hypertext Transfer Protocol Secure
HTML …………… ...

HyperText Markup Language

DHTML ………………... Dynamic HyperText Markup Language
ASP …………………..... Active Server Pages Perl
CMS …………………. Content Management System
CGI …………………… Common Gateway Interface
XHTML ……………… Extensible Hypertext Markup Language
URL ………………….. Unform Resource Locator

DNS …………………… Domain Name System
PHP …………………… Hypertext Preprocessor
CSDL ………………….. Cơ Sở Dữ Liệu
CSS ……………………. Cascading Style Sheets
SQL ………………... …. Structured Query Language

GVHD: ThS. QUÁCH THỊ HẠNH

SVTH: NGUYỄN THỊ LOAN


BÁO CÁO ĐỒ ÁN TỐT NGHIỆP

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

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

GIỚI THIỆU CHUNG

1. Khái niệm Website
Website là một tập hợp các trang web bao gồm văn bản, hình ảnh, video, …. mà
thông thường nó chỉ nằm trong một tên miền hoặc tên miền phụ được quản lý trên
World Wide Web(WWW) của internet. Một trang web bao gồm nhều tệp tin HTML
hoặc XHTML có thể truy nhập bằng giao thức HTTP, HTTPS.
Website có thể được xây dựng từ các tệp tin HTML( trang mạng tĩnh) hoặc vận
hành bằng các CMS chạy trên máy chủ(trang mạng động). Website có thể được xây
dựng bằng nhiều ngôn ngữ khác nhau (PHP,.NET, Java, Ruby and Rails,…).
Hiện nay, để một Website có thể vận hành trên môi trường WWW,cần bắt buộc
phải có 3 phần chính:

-

Tên miền (Domain)

-

Hosting

-

Mã nguồn (Source code)

2. Tên miền (Domain)
Tên miền chính là địa chỉ website, là một chuỗi các ký tự trong bảng Alphabet
được sắp xếp giống như tên riêng và có hoặc không có ý nghĩa.
2.1. Cấu tạo của tên miền

Tên miền bao gồm nhiều thành phần cấu tạo nên cách nhau bởi dấu (.).
Ví dụ: abc.com.vn
-

Thành phần thứ nhất “abc” là tên miền của máy chủ

-

Thành phần thứ 2 “com” thường gọi là tên miền thứ 2(second domain name
level) đối với các quốc gia noi chung tên miền mức 2 này do tổ chức quản lý
của quốc gia đó định nghĩa, có thể định nghĩa khác đi nhiều hay ít.

-

Thành phần cuối cùng “vn” là tên miền ở múc cao nhất (top level domain ) bao
gồm các mã quốc gia của nước tham gia internet được quy định bằng 2 chữ cái
theo tiêu chuẩn ISO-3166 như Viêt Nam là VN, Mỹ là US,… và các linh vực
dùng chung.
Dùng chung

-

COM: thương mại(COMmercial)

GVHD: THS. QUÁCH THỊ HẠNH

SVTH: NGUYỄN THỊ LOAN
1


BÁO CÁO ĐỒ ÁN TỐT NGHIỆP

-

NET: Mạng lưới (NETwork)

-

ORG : Các tổ chức(ORGnizations)

-

INFO: Thông tin(INFOmation)

-

EDU: Giáo dục(EDUcation)

-

MOBI: Điện thoại di động

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

Dùng ở Mỹ
-

MIL: Quân Sự (MILitary)

-

GOV: Nhà nước (GOVernment)

2.2. Tính chất cơ bản của một tên miền

-

Tên miền là duy nhất và được cấp phát cho một chủ thể nào đăng ký trước.

-

Tên miền bắt buộc phải có phần tên và phần đuôi.

-

Tên miền không được vượt quá 63 (ký tự bao gồm cả phần đuôi ).

-

Tên miền chỉ bao gồm các ký tự trong bảng chữ cái (a-z) các số(0-9) và dấu(-).
Khoảng trắng và các ký tự đặc biệt khác đêu không hợp lệ.

-

Không bắt đầu hoặc kết thúc tên miền bằng dấu (-).

-

Tên miền không cần bắt đầu bằng http:// hoặc www hay http://www.

2.3.Một số khái niệm khác liên quan đến tên miền
2.3.1. URL

URL ( Unform Resource Locator ) được dùng để tham chiếu tới tài nguyên trên
Internet. URL tạo nên khả năng siêu liên kết cho Website. Mỗi tài nguyên khác nhau
lưu trữ trên internet được tham chiếu tới bằng địa chỉ, đó chính là URL.
➢ Một URL gồm nhiều phần được liên kết với nhau:
▪ URL scheme là tên giao thức ( ví dụ:http,ftp,…).
▪ Tên miền ( abc.com.vn)
▪ Chỉ định thêm cổng ví dụ: 80,8080,443,..(có thể không cần)
▪ Đường dẫn tuyệt đối
▪ Các truy vấn (có thể không cần)
▪ Chỉ định mục con(có thể không cần)

2.3.2. DNS

DNS(Domain Name System) là một hệ thống cho phép thiết lập tương ứng giữa
địa chỉ IP và tên miền trên Internet. Tức là khi gõ tên miền trên trình duyệt, một tên

GVHD: THS. QUÁCH THỊ HẠNH

SVTH: NGUYỄN THỊ LOAN
2


BÁO CÁO ĐỒ ÁN TỐT NGHIỆP

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

miền sẽ được của nó chuyển đến một địa chỉ IP và sẽ báo cho máy tính biết và tìm đến
website.
3. Hosting
Hosting ( hay Web hosting) là không gian trên máy chủ dùng để chứa file, dữ liệu,
nội dung của một website. Để hoat động, website cần được lưu trữ trên một máy
chủ(Server) kết nối mạng Internet và hoạt động 24/24h mỗi ngày.
Có 3 loại hình web hosting thường được dùng :
-

Windows hosting: dựa và nền tảng hệ điều hành window của Microsoft

-

Linux hosting : dựa vào nền tảng hệ điều hành linux.

-

Email hosting

3.1. Các loại hosting

▪ Shared hosting (chia sẻ)
Là một dịch vụ lưu trữ rất nhiều trang web trên một máy chủ kết nối Internet. Mỗi
trang web được lưu trữ ở một phân vùng riêng của mình.
▪ Free web hosting
Là dịch vụ lưu trữ miễn phí. Thường được quảng cáo hỗ trợ. Free web hosting
service thường sẽ cung cấp một tên miền phụ hoặc một thư mục phụ. Ngược lại, dịch
vụ này sẽ cung cấp một tên miền cấp thứ 2 cùng với các máy chủ. Nhiều máy chủ
miễn phí sẽ không cho phép sử dụng nhiều tên miền riêng.
▪ Reseller hosting
Là một hình thức lưu trữ của máy chủ web mà chủ sở hữu tài khoản có khải năng
sử dụng tài khoản của mình để phân bố lại ổ cứng lưu trữ và băng thông để lưu trữ các
trang web này.
▪ Email hosting
Là dịch vụ thư điện tử đặc biệt khác với dịch vụ email miễn phí hỗ trợ email hay
webmail miễn phí. Email hosting cho phép tùy chỉnh cấu hình và số lượng lớn tài
khoản.
▪ Video hosting
Là dich vụ lưu trữ cho phép các cá nhân tải lên các video vào một trang web. Sau đó
sẽ lưu trữ video trên máy chủ cho phép người khác có thể xem video.
▪ Image hosting
GVHD: THS. QUÁCH THỊ HẠNH

SVTH: NGUYỄN THỊ LOAN
3

BÁO CÁO ĐỒ ÁN TỐT NGHIỆP

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

Là dich vụ lưu trữ cho phép các cá nhân tải lên các hình ảnh vào một trang web. Sau
đó sẽ lưu trữ hình ảnh đó trên máy chủ cho phép người khác có thể xem hình ảnh.
▪ File hosting
Là dịch vụ lưu trữ tập tin trực tuyến, để lưu trữ các nội dung tĩnh. Cho phép truy cập
qua giao thức FPT được tối ưu hóa phụ vụ cho nhiều người sử dụng.
▪ Windows hosting
Là dịch vụ lưu trữ rất nhiều các trang web trên một máy chủ chạy hệ điều hành
Window server kết nối internet. Mỗi trang web có phân vùng riêng của mình thường
sử dụng các phần mềm chia hosting như hosting controller, plesk.
▪ Linux hosting
Là dịch vụ lưu trữ rất nhiều các trang web trên một máy chủ chạy hệ điều hành
Linux kết nối Internet. Mỗi trang web có phân vùng riêng của mình thường sử dụng
các phần mền chia hosting như Cpanel, Direct Admin.
▪ VPS hosting (Virtual Private Server – máy chủ riêng ảo)
Là một phương pháp phân vùng một máy chủ vậy lý thành máy tính nhiều máy
chủ ảo, trên mỗi máy ảo được cài một hệ điều hành như một máy chủ thật.
▪ Dedicated server (máy chủ riêng)
Là máy chủ vật lý dành riêng cho việc lưu trữ website.
▪ Adult hosting
3.2.Các tính năng của hosting

-

Tốc độ: một máy chủ chạy dich vụ web cần phải có cấu hình đủ lớn để đảm bảo

sử lý thông suốt, phục vụ cho số lượng lớn người truy cập. phải có đường
truyền kết nối tốc độ cao để đảm bảo không bị nghẽn mạch dữ liệu.

-

Dung lượng: Dung lượng của hosting là khoảng không gian bạn được phép lưu
trữ dữ liệu trên ổ cứng của máy chủ. Để lưu trữ được đầy đủ các thông tin, dữ
liệu, hình ảnh,.. của website Hosting cần phải có dung lượng đủ lớn (một vài
GB).

-

Băng thông: Băng thông của hosting là lượng dữ liệu trao đổi giữa web với
người dùng trong 1 tháng. Nó phải đủ lớn để phục vụ các hoạt động giao dịch,
trao đổi thông tin giữa web với người sử dụng.

-

Phải hỗ trợ truy xuất máy chủ bằng giao túc FTP để truy cập thông tin.

GVHD: THS. QUÁCH THỊ HẠNH

SVTH: NGUYỄN THỊ LOAN
4


BÁO CÁO ĐỒ ÁN TỐT NGHIỆP

-

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

Hỗ trợ các ngôn ngữ lập trình, cơ sở dữ liệu hoặc các công cụ có sẵn để phục
các hoạt động trên web.

-

Có giao diện quản lý để dễ dàng quản lý, cac tài khoản FTP, Email,…

-

Phải thường xuyên được chăm sóc, bảo dưỡng nhằm tránh các rủi ro và khắc
phục kịp thời.

4. Mã nguồn (source code)
Website cần được lập trình để hiện thị hoặc xử lý thông tin cho người dùng. Việc
lập trình sẽ sử dụng các câu lệnh, truy xuất CSDL, xử lý và hiển thị cho người dùng
trên trình duyệt. Tập hợp những câu lệnh này được gọi là mã nguồn (source code).
Có rất nhiều ngôn ngữ lập trình được sử dụng để lập trình website. Phổ biến nhất
mà chúng ta thường gặp là: HTML/CSS, PHP, ASP, ASP.NET. Trong đó HTML/CSS
là 2 ngôn ngữ cơ bản tạo nên giao diện của một website, nó có thể tạo ra các trang web
tĩnh. Các ngôn ngữ còn lại thường dùng để lập trình kết nối CSDL và xử lý các yêu
cầu cao hơn; Cần phải kết hợp với HTML/CSS, và thường đi kèm cả với Javascript để
tạo ra giao diện người dùng (frontend).
Từ các ngôn ngữ lập trình cơ bản trên, hình thành các Framework với nhiều thư viên
được xây dựng sẵn. Các Frameword giúp người lập trình tiết kiệm nhiều thời gian
trong việc xây dựng website. Các PHP Framework phổ biến gồm: CodeIgniter,
CakePHP, Yii Framework, Zend Framework,…
5. Phân loại Website
Có 2 loại website : - Website tĩnh

-

Website động

5.1. Website tĩnh

Website tĩnh là những web chỉ bao gồm các trang web tĩnh và không có cơ sở dữ
liệu đi kèm. Tức là người dùng không có khả năng tương tác, không thể chỉnh sửa
hoặc thay đổi dữ liệu được.
-

Web tĩnh thường được xây dựng từ CSS, HTML, Javascript(DHTML Dynamic HTML),..

-

Dùng để thiết kế các trang web có nội dung ít cần thay đổi và cập nhật.

-

Nó chỉ bao gồm các trang web tĩnh và không có cơ sở dữ liệu đi kèm.

GVHD: THS. QUÁCH THỊ HẠNH

SVTH: NGUYỄN THỊ LOAN
5


BÁO CÁO ĐỒ ÁN TỐT NGHIỆP

-

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

Web tĩnh thích hợp với cá nhân, tổ chức, doanh nghiệp vừa và nhỏ mới làm
quen với môi trường internet.
Ưu điểm:

-

Thiết kế đồ họa đẹp:

-

Tốc độ truy cập nhanh:

-

Thân thiện hơn với máy tìm kiếm

-

Chi phí đầu tư thấp:
Nhược điểm:

-

Khó khăn trong việc thay đổi và cập nhật thông tin

-

Khó nâng cấp bảo trì

-

Mỗi khi thay đổi phải vào file HTML,CSS hoặc Javascrip để chỉnh sửa.

5.2. Website động

Website động là web có cơ sở dữ liệu và được hỗ trợ bởi các phần mềm phát triển
web. thống qhuản lý nội dung nên người dùng có thể chỉnh sửa hoặc thay đổi nội
dung được.
Thông tin hiển thị ở web động được gọi là một cơ sở dữ liệu khi người dùng truy
vấn tới một trang web.
Web động được phát triển bằng các ngôn ngữ lập trình PHP, ASP, ASP.NET, Java,
CGI, Perl, và sử dụng các cơ sở dữ liệu như Access, My SQL, MS SQL, Oracle, DB2.
Ưu điểm:
-

Dễ dàng quản lý nội dung

-

Dễ dàng nâng cấp và bảo trì

-

Tương tác với người sử dụng cao

-

Có thể xây dựng được web lớn

-

Hiện nay vẫn SEO tốt bởi ta có thể sử dụng chúc năng Rewrite URL để chuyên
URL thân thiện.
Nhược điểm:

-

Chi phí xây dựng cao.

-

Khi web lớn cần nhiều người để quản lý.

GVHD: THS. QUÁCH THỊ HẠNH

SVTH: NGUYỄN THỊ LOAN
6


BÁO CÁO ĐỒ ÁN TỐT NGHIỆP

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

II. TÌM HIỂU VỀ CÁC NGÔN NGỮ LẬP TRÌNH WEB
Website thương mại là một trang web động với mã nguồn được viết bằng các
ngôn ngữ PHP,ASP.NET, HTML,….và trang web đó có kết nối hệ cơ sở dữ liệu, có
thể cập nhật dữ liệu, truy xuất dữ liệu thường xuyên.

Để thiết kế một website hoàn chỉnh nó được hình thành bởi :
-

HTML: Xây dựng cấu trúc và định dạng siêu văn bản.

-

CSS: Định dạng các siêu văn bản được tạo ra từ HTML ở dạng thô thành một
bố cục website, có màu sắc có ảnh, ….

-

Javascript: Tạo ra các sự kiện tương tác với hành vi của người dùng

-

PHP: Ngôn ngữ lập trình để xử lý và trao đổi dữ liệu giữa máy chủ đến trình
duyệt. Là ngôn ngữ lập trình được dùng phổ biến ngoài ra còn một số ngôn ngữ
như ASP, ASP.NET, Java, CGI, Perl, ….
MySQL: Hệ quản trị cơ sở dữ liệu truy vấn có cấu trúc.

-

1. Tìm hiểu về HTML

HTML( Hyper Text Markup Language) là ngôn ngữ đánh dấu siêu văn bản được
thiết kế ra để tạo nên các trang web. Dùng để định dạng bố cục, các thuộc tính liên
quan đến cách hiển thị của một trang. Là một tập hợp các thẻ đánh dấu.
Các lênh HTML được gọi là các thẻ. Các thẻ này được dùng để điều khiển nội dung
và hình thúc trình bày của tài liệu HTML. Để bắt đầu một câu lênh ta dùng thẻ mở

“<>” và kết thúc câu lệnh dùng thẻ đóng “</>”.
Thẻ HTML gồm:
<element attribute =value>
Với :
-

element : để nhận dạng thẻ.

-

Attribute : để mô tả thẻ.

-

Value : giá trị được thiết lập cho thuộc tính

1.1.Các thuộc tính của thẻ HTML

Thuộc tính của tác động lên nội dung của văn bản. Được sử dụng để xác định đặc
trưng của một phần tử HTML.
-

Một phần tử HTML có thể không có hoặc có nhiều thuộc tính.

GVHD: THS. QUÁCH THỊ HẠNH

SVTH: NGUYỄN THỊ LOAN
7

BÁO CÁO ĐỒ ÁN TỐT NGHIỆP

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

-

Thuộc tính luôn luôn được chỉ định trong thẻ mở.

-

Thuộc tính của một phần tử HTML gồm 2 thành phần:
• Tên: là tên của thuộc tính
• Giá trị: là những gì mà bạn muốn gán cho thuộc tính và được đặt trong
các trích dẫn.
Tên và giá trị của thuộc tính không phân biệt chữ hoa hay chữ thường.

-

Quy tắc viết thuộc tính:
<tên thẻ tên thuộc tính=“giá trị”> Nội dung </tên thẻ>

Các thuộc tính cơ bản có thể sử dụng trong bất kì phần tử nào của HTML:
Thuộc tính id
Quy định một định dạng duy nhất cho một thẻ HTML. Phải tuân theo luật:
• Phải chứa ít nhất 1 kí tự
• Không có khoảng trắng
• Không phân biệt chữ hoa và chữ thường.
Cú pháp:

<tên thẻ id= “tên id”> </tên thẻ>

Thuộc tính title
Thuộc tính title chỉ định thông tin thêm về thẻ, thường được hiển thị khi di chuyển qua
phần tử đó, nó thường hiển thị dưới dạng tooktip text.
Cú pháp:

<tên thẻ title= “thông tin thêm”>

Thuộc tính style
Để trang trí nội dung hiển thị ngay trên thẻ. các tên các class.
Cú pháp :

<tên thẻ style= “ định nghĩa các kiểu trang trí”>

Thuộc tính class
Thuộc tính class cho phép sử dụng một hay nhiều class trên một thẻ. Sử dụng dấu cách
để phân cách giữa các tên các class. Phải tuân theo luật:
• Bắt đầu với kí tự chữ không phân biệt hoa hay thường.
• Bao gồm ký tự(a-z,A-Z), số(0-9), gạch ngang (-) và gạch
dưới(_).
Cú pháp:

<tên thẻ class= “tên>

GVHD: THS. QUÁCH THỊ HẠNH

SVTH: NGUYỄN THỊ LOAN
8

BÁO CÁO ĐỒ ÁN TỐT NGHIỆP

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

1.2. Cấu trúc cơ bản của HTML

Cấu trúc của HTML có dạng như sau, gồm 3 phần:
-

<!Doctype>: phần khai báo chuẩn của html.

-

<head></head>: phần đầu của html, khai báo về meta, title, css, javascript,..

-

<body></body>: phần thân chứa nội dung của trang web.

1.3. Các thẻ định dạng cấu trúc tài liệu

Thẻ html
Một tài liệu HTML luôn được bắt đầu bằng thẻ mở <html> và kết thúc bằng thẻ
</html>. Toàn bộ nội dung của tài liệu sẽ được đặt giữa cặp thẻ này.
Có cú pháp như sau:
<html>
Toàn bộ nội dung của tài liệu
</html>
Trình duyệt sẽ xem các tài liệu không sử dụng cặp thẻ này như một tệp văn bản binh
thường.

Thẻ head
Thẻ head được dùng để xác định cho phần mở đầu của tài liệu.
Có cú pháp như sau:
<head>
Phần mở đầu của tài liệu
</head>
Thẻ title
Cặp thẻ này chỉ được sử dụng trong phần mở đầu của tài liệu. là tên của trang web
được hiển thị phai trên cùng của menubar.
Có cú pháp như sau:
<head>
<title> Tiêu đề của tài liệu</title>
</head>
Thẻ body
Thẻ body hay chính là phần thân của tài liệu. trong phần thân có thể chứa các
thông tin định dạng nhất định để đặt ảnh cho tài liệu màu nền, màu văn bản siêu

GVHD: THS. QUÁCH THỊ HẠNH

SVTH: NGUYỄN THỊ LOAN
9


BÁO CÁO ĐỒ ÁN TỐT NGHIỆP

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

liên kết, đặt lề cho trang tài liệu … những thông tin này được đặt trong phần tham
số của thẻ.
Có cú pháp như sau: <body>

Phần thân của văn bản
</body>
Như vậy, cấu trúc cơ bản của html là:

<!Doctype>
<html>
<head>
<title> Tiêu đề của tài liệu</title>
</head>
<body>
Phần nội dung của tài liệu
</body>
</html>
1.4. Nhóm các thẻ block

Các thẻ block là các thẻ dùng để sắp xếp bố cục cho trang web.
Thẻ P
Thẻ

dùng để định dạng một đoạn văn bản. Thẻ này giúp trình duyệt xác định
đoạn văn bản trong trang HTML.

Nội dụng đoạn văn bản

Các thẻ định dạng tiêu đề
-

Thường được sử dụng để thể hiện cho tiêu đề của bài viết, bản tin hay các muc
cần nhấn mạnh.

-

Bao gồm các thẻ từ

đến

-

Font chữ của nội dung trong các thẻ giảm từ

đến

.

Tiêu đề 1

Tiêu đề 2

Tiêu đề 3

Tiêu đề 4

GVHD: THS. QUÁCH THỊ HẠNH

SVTH: NGUYỄN THỊ LOAN
10


BÁO CÁO ĐỒ ÁN TỐT NGHIỆP

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

Tiêu đề 5

Tiêu đề 6

Thẻ div (division – phân chia)
Thẻ div để phân chia khu vực hay vùng, giúp cho trình duyệt hiểu rõ những vùng được
bố cục trên trang web.
<div> </div>
Thẻ xác định danh sách
Sử dụng cho danh sách có các mục và có nội dung mô tả cho các mục, không sử dụng
cho danh sách không có phần nội dung mô tả. gồm có 3 thẻ:
-

<dl></dl>: (definition list) có nghĩa là xác định danh sách.

-

<dt></dt>: (defines an item) có nghĩa là xác định một mục.

-

<dd></dd>: (defines describe an item) có nghĩa là xác định một mô tả của một
mục.

3 thẻ nay phải luôn tồn tại cùng nhau không thể thiếu 1 trong 3 thẻ.
Có cấu trúc như sau:
<dl>
<dt></dt>
<dd></dd>
</dl>
Thẻ danh sách có thứ tự và không có thứ tự
• Danh sách có thứ tự
Dùng 2 cặp thẻ:
▪ <ol></ol>: (ordered list) là danh sách có thứ tự.
▪ <li></li>: (list item) là các mục của danh sách.
Cấu trúc :

<ol>
<li></li>
</ol>

• Danh sách không có thứ tự

Dùng 2 cặp thẻ:
▪ <ul></ul>: (unordered list) là danh sách không có thứ tự.
GVHD: THS. QUÁCH THỊ HẠNH

SVTH: NGUYỄN THỊ LOAN
11


BÁO CÁO ĐỒ ÁN TỐT NGHIỆP

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

▪ <li></li>: (list item) là các mục của danh sách .
Cấu trúc:

<ul>
<li></li>
</ul>

1.5. Nhóm các thẻ inline

• Nhóm các thẻ inline chỉ chứa nội dung cho text hoặc các thẻ inline khác, để
hiển thị nội dung của văn bản.
• Nhóm thẻ inline nên được bao ngoài bởi nhóm các thẻ block.
• Những thẻ trong nhóm này có thể được lồng vào nhau.
• Không được sử dụng các thẻ khác bên trong các thẻ inline.

Thẻ

Mô tả

<a></a>

Thẻ dùng để tạo một liên kết từ tràn web này sang trang
web khác, từ vị trí này sang vị trí khác hay dùng để mở
một Project nào đó như word, Excel,… có một thuộc tính
bắt buộc : href được dùng để chỉ địa chỉ hay URL của tài
liệu hoặc file liên kết.Cú pháp:
<a href = “link liên kết”> Hypertext</a>

<img/>

Dùng để nhúng một ảnh thông qua thuộc tính src, thẻ có 2
thuộc tính bắt buộc :
- src: chứa đường dẫn tham chiếu tới image
-alt được sử dụng như một văn bản thay thế khi image
không hiển thị

<b></b>

In đậm

<big></big>

Tăng kích cỡ phông chữ

<code></code>

Dùng để định dạng chữ hiện giống như mã của máy tính

<font></font>

Quy định giao diện, kích cỡ, màu sắc cho chữ

<s></s>

Dùng để gạch bỏ một đoạn văn bản

<small></small>

Hiển thị một đoạn text nhỏ

GVHD: THS. QUÁCH THỊ HẠNH

SVTH: NGUYỄN THỊ LOAN
12


BÁO CÁO ĐỒ ÁN TỐT NGHIỆP

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

<strong></strong>

Nhấn mạnh

<textarea></textarea>

Dừng để nhập nhiều dòng văn bản

<var></var>

Định nghĩa một biến

<abbr></abbr>

Dùng để mô tả mộ cum từ viết tắt

<basefont></basefont>

Định dạng kích cỡ màu sắc font cho toan bộ text trong văn
bản




Xuống dòng trong một đoạn văn

<dfn></dfn>

Dùng để mơ tả một thuật ngữ

<em></em>

Nhấn mạnh theo kiểu chữ nghiêng



Hiển thị text lệch bên dưới



Hiển thị text lệch bên trên

<span></span>

Dùng để nhóm một hay nhiều thẻ thuộc nhóm inline khác
nhau, nó không có ý nghĩa về mặt hiển thị, chỉ hỗ trợ định
dạng các inline thông qua CSS và javascript.

<cite></cite>

Dùng để trích dẫn một câu nào đó

<del></del>

Xác định vă bản bị gạch ngang

<input></input>

Dùng cho người nhập thông tin hay chon thông tin, có các
thuộc tính như text, checkbox, password,…

<i></i>

Kiểu chữ in nghiêng

<tt></tt>

Xác định văn bản kiểu máy

<label></label>

Định nghĩa cho thẻ <input>

<q></q>

Định nghĩa một đoạn trích dẫn ngắn

<samp></samp>

Định nghĩa văn bản ngôn ngữ lập trình mẫu

<select></select>

Tạo một danh sách lựa chọn

<bdo></bdo>

dùng để ghi đè lên dòng chữ hiện tại, có thuộc tính dir

<acronym></acronym> Để chỉ một tên lược danh
Bảng 1: Các thẻ nhóm Inline
1.6.Thẻ <form >

Thẻ form dùng để tạo một form trong HTML. Để thu thập thông tin từ người sử
dụng như email, tên ,tuổi,….

GVHD: THS. QUÁCH THỊ HẠNH

SVTH: NGUYỄN THỊ LOAN

13


BÁO CÁO ĐỒ ÁN TỐT NGHIỆP

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

Cú pháp: <form action= “Script URL” method= “GET|POST”>
Các phần tử font, như input,textarea,…
</form>
Các thuộc tính
-

Action: ứng dụng quản trị backend sẵn sàng sử lý từ dữ liệu người dùng.

-

Method: phương thức truyền tải dữ liệu.thường sử dụng GET và POST.

-

Accept: Thuộc tính này xác định danh sách các kiểu MIME được máy chủ nhận
ra, trong đó có chứa kịch bản (script) để xử lý biểu mẫu.
Cú pháp: ACCEPT = “Internet media type”

1.7.Frame

Trong HTML được sử dụng để phân chia cửa sổ trình duyệt thành các khu vực
khác nhau, mỗi khu vực tải một tài liệu HTML riêng. Một tập hợp các Frame trong
cửa sổ trình duyệt được biết đến như là một Frameset.

Thẻ <frameset> xác định cách chia cửa sổ thành các Framet thay thế cho thẻ cho
body. Thuộc tính rows trong thẻ này xác định chiều ngang của Frame, thuộc tính cols
xác định chiều dọc của Frame. Mỗi Frame được chỉ dẫn bởi một thẻ <frameset> và nó
xác định tài liệu nào sẽ được mở trong Frame.
Thuộc tính của thẻ <frameset>
Thuộc tính

Mô tả

Cols

Xác định số cột được chứa trong frameset và kích cỡ mỗi cột

Rows

Xác định số hàng được chứa trong frameset và kích cỡ mỗi
hàng

Border(đường

Xác định độ rộng border của mỗi frame

viền)
Frameborder

Xác định border có được hiển thị giữa các frame hay không

Framespacing

Xác định khoảng cách giữa các frame trong frameset

Bảng 2: thuộc tính của thẻ <frameset>

Thuộc tính của thẻ <frame>
Thuộc tính
Src

Mô tả
File dược tải lên

GVHD: THS. QUÁCH THỊ HẠNH

SVTH: NGUYỄN THỊ LOAN
14


BÁO CÁO ĐỒ ÁN TỐT NGHIỆP

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

Name

Tên của frame

Marginwidth

xác định độ rộng của khoảng cách giữa bên trái và phải của Border
Frame với nội dung trong Frame. Giá trị là pixel.

Marginheight xác định chiều cao của khoảng cách giữa trên và dưới của Border
Frame và nội dung của nó. Giá trị là pixel.

Noresize

ngăn cản người sử dụng đặt lại kích cỡ.

Sorclling

điều khiển sự xuất hiện của thanh cuốn xuất hiện trên Frame. Nó nhận
giá trị "yes", "no", hoặc "auto".

Longdesc

cho phép cung cấp một đường link tới trang web khác chứa một sự
miêu tả dài trong nội dung của Frame.

Bảng 3: Thuộc tính của thẻ <frame>
1.8.Thẻ <table>

Thẻ <table> dùng để tạo bảng. Thẻ <tr> được sử dụng để tạo các hàng và thẻ
<td> được sử dụng để tạo các ô.
1.8.1. Thuộc tính của thẻ<table>

Thuộc tính

Mô tả

Bgcolor

Định màu nề trên bảng

Border

Định màu cho đường viền

Bordercolordark Định màu sẫm cho phần bóng của đường viền
Bordercolorlight Định màu sẫm cho phần sáng hơn của đường viền
Cellpadding

Định rõ khoảng cách giữa nội dung và đường viền.

Frame

Hienr thị đường viền ngoài

Height

Xác định chiều cao của bảng

Rules

Hiển thị đường viền trong bảng

Width

Xác định chiều rộng của bảng
Bảng 4: Thuộc tính của thẻ <table>

GVHD: THS. QUÁCH THỊ HẠNH

SVTH: NGUYỄN THỊ LOAN
15

BÁO CÁO ĐỒ ÁN TỐT NGHIỆP

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

1.8.2. Thuộc tính của thẻ<tr>

Thuộc tính

Mô tả

Align,Vlign

Căn chỉnh nội dung theo chiều ngang và dọc

Bgcolor

Xác định màu nền
Bảng 5: Thuộc tính của thẻ <tr>

Thuộc tính của thẻ <td>

Thuộc tính

Mô tả

Align, vlign

Căn chỉnh nội dung theo chiều ngang và dọc

Bordor

Mở rộng ô qua nhiều cột

Colspan

Định màu sẫm cho phần bóng của đường viền

Nowrap

Giữ cho nội dung ô nằm trên một dòng.

Rowspan

Kéo dài ô xuống nhiều hàng

Width, heigh

Định rõ kích thước ô

Bảng 6: Thuộc tính của thẻ <td>
1.9.

Chèn âm thanh

Cú pháp:

number/infinite”>
1.10. Chèn video
Sử dụng thẻ <embed >
Cú pháp: <embed scr= “file.avi(asf,.ram…)” thuộc tính >

2. Tìm hiểu về CSS
CSS (Cascading Style Sheets) là một ngôn ngữ được sử dụng tìm và định dạng lại
các phần tử được tạo bởi các ngôn ngữ đánh dấu (ví dụ như HTML). CSS là ngôn ngữ
giúp trình duyệt hiểu được các định dạng và bố cục cho trang web, trình bày cho các
thẻ HTML như màu chữ, font chữ, chiều cao chiều rộng cho thẻ HTML,…

GVHD: THS. QUÁCH THỊ HẠNH

SVTH: NGUYỄN THỊ LOAN
16