Xây dựng công cụ hỗ trợ quảng bá sản phẩm trên facebook

LỜI CẢM ƠN
Để đạt được kết quả này, em đã hết sức nỗ lực đồng thời cũng nhận được
rất nhiều sự quan tâm, giúp đỡ và ủng hộ của thầy cô, gia đình và bạn bè.
Em xin chân thành cảm ơn Khoa Công Nghệ Thông Tin - Trường ĐH
CNTT&TT đã tạo điều kiện cho em thực hiện đồ án tốt nghiệp này. Em xin chân
thành cảm ơn quý thầy, cô giáo đã tận tình giảng dạy, trang bị cho chúng em
những kiến thức quý báu trong những năm học vừa qua.
Đặc biệt em xin chân thành cảm ơn cô Dương Thị Quy đã tận tình hướng
dẫn, giúp đỡ, chỉ bảo và đóng góp ý kiến cho em trong suốt thời gian thực hiện
đồ án.
Mặc dù em đã nỗ lực để hoàn thành đồ án song vẫn không tránh khỏi thiếu
sót kính mong sự góp ý của các thầy cô và các bạn.

Em xin chân thành cảm ơn!

Thái Nguyên, ngày 26 tháng 05 năm 2016
Sinh viên thực hiện

Vũ Công Tịnh

1


LỜI CAM ĐOAN
Em xin cam đoan đồ án tự em nghiên cứu và xây dựng dựa trên các
kiến thức được học trên trường và kinh nghiệm đi làm thực. Cùng sự hướng
dẫn của Ths. Dương Thị Quy. Các nội dung nghiên cứu, kết quả trong đề
tài này là trung thực và chưa công bố dưới bất kỳ hình thức nào trước đây.
Những kiến thức tài liệu tham khảo được ghi rõ trong mục tài liệu tham
khảo.
Nếu phát hiện có bất kỳ sự gian lận nào em xin hoàn toàn chịu trách

nhiệm về nội dung luận văn của mình. Trường đại học CNTT& TT không
liên quan đến những vi phạm tác quyền, bản quyền do em gây ra trong quá
trình thực hiện (nếu có).
Thái Nguyên, ngày 26 tháng 05 năm 2016
Sinh viên thực hiện

Vũ Công Tịnh

2


MỤC LỤC
LỜI CẢM ƠN .....................................................................................................1
LỜI CAM ĐOAN................................................................................................2
MỤC LỤC ..........................................................................................................3
DANH MỤC HÌNH ẢNH ...................................................................................5
LỜI MỞ ĐẦU .....................................................................................................6
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT ....................................................................7
1.1 Tìm hiểu về các ngôn ngữ lập trình................................................................7
1.1.1 Giới thiệu về HTML...............................................................................7
1.1.2 Giới thiệu về CSS...................................................................................9
1.1.3 Giới thiệu về Javascript ........................................................................16
1.1.4 Giới thiệu về jQuery.............................................................................17
1.1.5 Giới thiệu AJAX ..................................................................................20
1.1.6 Giới thiệu về PHP ................................................................................23
1.1.7 Tại sao phải sử dụng PHP.....................................................................24
1.1.8 Cú pháp PHP........................................................................................24
1.1.9 Các kiểu dữ liệu PHP ...........................................................................25
1.1.10 Biến trong PHP....................................................................................25
1.1.11 Lập trình hướng đối tượng (OOP)........................................................26

1.1.12 Giới thiệu về Twitter Bootstrap ...........................................................28
1.2 Tổng quan về CURL trong PHP ..................................................................31
1.2.1 CURL là gì? .........................................................................................31
1.2.2 Vai trò của CURL ................................................................................31
1.2.3 Lý thuyết cơ bản về CURL...................................................................32
CHƯƠNG 2: KHẢO SÁT VÀ PHÂN TÍCH DỮ LIỆU TRÊN FACEBOOK ...36
2.1. Khảo sát thực trạng quảng bá trên Facebook...............................................36
2.2. Phân tích yêu cầu đề tài ..............................................................................39
2.3. Yêu cầu trang web ......................................................................................40
2.4. Mô tả chức năng hệ thống...........................................................................40
2.5. Phân tích form dữ liệu của Facebook. .........................................................40

3


2.5.1 Các phương pháp xây dựng ứng dụng ..................................................40
2.5.2 Form đăng nhập....................................................................................43
2.5.3 Form tham gia nhóm ............................................................................45
2.5.4 Form đăng bài viết lên nhóm ................................................................45
2.5.5 Form mời bạn bè vào nhóm..................................................................46
CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG..........................................................48
3.1. Giao diện trang chủ.....................................................................................48
3.2. Giao diện form đăng nhập tài khoản Facebook ...........................................49
3.3. Giao diện trang tự động tham gia vào nhóm................................................50
3.4. Giao diện trang đăng bài vào nhóm.............................................................53
3.5. Giao diện trang mời bạn bè vào nhóm.........................................................55
3.6. Giao diện trang scan email thành viên trên Group Facebook.......................58
KẾT LUẬN.......................................................................................................60
TÀI LIỆU THAM KHẢO .................................................................................61

4


DANH MỤC HÌNH ẢNH

Hình 1.1: Cấu trúc thư mục của bootstrap ................................................ 29
Hình 1.2 Cài đặt Bootstrap ....................................................................... 29
Hình 1.3: Form đăng nhập sử dụng Bootstrap .......................................... 29
Hình 1.4: Ví dụ về Bootstrap.................................................................... 30
Hình 1.5: Ví dụ về Bootstrap.................................................................... 31
Hình 2.1: Cấu trúc một form dữ liệu đăng nhập ....................................... 44
Hình 2.2: Form dữ liệu đăng bài viết lên 1 nhóm ..................................... 45
Hình 2.3: Form dữ liệu mời bạn bè tham gia nhóm .................................. 46
Hình 3.1: Giao diện trang chủ .................................................................. 48
Hình 3.2 Giao diện form đăng nhập nick.................................................. 49
Hình 3.3: Đăng nhập thành công .............................................................. 50
Hình 3.4: Kết quả tìm kiếm nhóm để tham gia ......................................... 51
Hình 3.5: Giao diện toàn trang tham gia vào nhóm .................................. 52
Hình 3.6: Giao diện đăng nhập và hiển thị các nhóm đã tham gia ............ 53
Hình 3.7: Giao diện form nhập thông tin bài cần chia sẻ hoặc status muốn
chia sẻ ...................................................................................................... 54
Hình 3.8: Giao diện trang thêm thành viên vào nhóm trước khi đăng nhập .. 55
Hình 3.9: Danh sách nhóm nick chính đang tham gia............................... 56
Hình 3.10: Giao diện điền thông tin thành viên được mời ........................ 57
Hình 3.11: Giao diện trang tìm kiếm Email Facebook.............................. 58
Hình 3.12: Giao diện kết quả tìm kiếm ID và Email Facebook ..................... 59

5

LỜI MỞ ĐẦU
Trong những năm gần đây với sự phát triển vượt trội của khoa học
kỹ thuật đặc biệt là công nghệ thông tin, với những ứng dụng của công
nghệ thông tin vào các lĩnh vực đã đóng góp một phần to lớn cho sự nghiệp
phát triển của con người.
Cổng thông tin điện tử trên Internet ra đời cùng với việc Internet
đang nhanh chóng lan rộng khắp toàn cầu, nó sẽ trở thành công cụ chủ yếu
và đắc lực cho việc trao đổi, tìm kiếm thông tin trên phạm vi toàn thế giới.
Bây giờ hầu như bất cứ nhu cầu nào của bạn cũng đều có thể được đáp ứng
ngay tức khắc. Với một máy tính cá nhân có kết nối mạng, bạn có thể lướt
trên các Website của các công ty, cơ quan, các trang báo điện tử; thoải mái
tìm kiếm các thông tin mình cần ngay tại chỗ.
Việc xây dựng các ứng dụng trên nền Website đang trở thành một xu
hướng lớn trên thế giới.Nhờ đó bỏ dần các rào cản về địa lý, dễ dàng chia
sẻ dữ liệu cho nhiều máy tính chỉ với một máy tính có kết nối Internet.
Cùng với sự bùng nổ của công nghệ thông tin là sự phát triển mạnh
khỏe của thương mại điện tử, nhu cầu mua bán hàng hóa, quảng bá sản
phẩm trên Internet ngày một tăng cao.Bắt nguồn với ý tưởng này, cùng với
những gợi ý của cô Dương Thị Quy, em đã thực hiện đề tài “Xây dựng
công cụ hỗ trợ quảng bá sản phẩm trên Facebook”.Công cụ được xây dựng
trên ngôn ngữ lập trình PHP và sử dụng CURL nhằm giúp người sử dụng
dễ dàng quảng bá các sản phẩm trên Facebook một cách tự động.Em hi
vọng trong quá trình tìm hiểu xây dựng đề tài có thể giúp bản thân có thêm
nhiều kiến thức bổ ích phục vụ cho quá trình học tập và làm việc sau này.
Trong quá trình làm đề tài còn nhiều thiếu xót và hạn chế em mong
nhận được sự đóng góp ý kiến của quý thầy cô để em có thể hoàn thành tốt
nhất mọi công việc.
Em xin chân thành cảm ơn!

6

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT
1.1 Tìm hiểu về các ngôn ngữ lập trình
1.1.1 Giới thiệu về HTML

HTML (viết tắt từ HyperText Markup Language) là một ngôn ngữ
đánh dấu siêu văn bản, được thiết kế ra để xây dựng các trang web.Vậy thế
nào là ngôn ngữ đánh dấu siêu văn bản? Ta hãy cùng xem xét từng khía
cạnh một:
Siêu văn bản (HyperText): Như ta đã biết, liên kết siêu văn bản là
một từ hay một câu trong trang Web dùng để chỉ đến trang Web khác. Khi
nhấn chuột lên một trong các liên kết này, trình duyệt web (như Netscape
Navigator hoặc Internet Explorer) sẽ đưa ta tức khắc đến trang Web kia mà
không cần hỏi han gì. Vì những liên kết siêu văn bản này thật sự là tính
năng đặc trưng của World Wide Web, các trang Web thường được biết như
là những tài liệu siêu văn bản.Vì thế, HTML có từ siêu văn bản trong tên
của nó.
Đánh dấu (Markup): Có từ điển định nghĩa markup là các chỉ dẫn chi
tiết về kiểu dáng được ghi trên bản viết tay để xếp chữ in. Như vậy, chúng
ta có thể hiểu đó là các lệnh chi tiết về kiểu dáng được đánh vào tài liệu văn
bản để đưa lên WWW.
Nói chung, HTML tồn tại như là các tập tin văn bản chứa trên các
máy tính nối vào mạng Internet. Các file này có chứa thẻ đánh dấu và
thường được truyền đi trên mạng internet thông qua giao thức mạng HTTP.
Sau đó thì phần HTML của chúng sẽ được hiển thị thông qua một trình
duyệt web, một loại phần mềm trực quan đảm nhiệm công việc đọc văn bản
của trang cho người sử dụng.
Cấu trúc của một tài liệu HTML
Các tập tin HTML luôn bắt đầu bằng thẻ <HTML>.Thẻ này không

làm gì khác ngoài nhiệm vụ báo cho trình duyệt Web biết rằng nó đang đọc

7


một tài liệu có chứa các mã HTML.Tương tự, dòng cuối trong tài liệu định
dạng HTML luôn luôn là thẻ </HTML>, có tác dụng thông báo sự kết thúc
của văn bản HTML với trình duyệt.
Chi tiết kế tiếp trong catalog thẻ HTML dùng để chia tài liệu thành
hai phần: đầu và thân.
Phần đầu giống như lời giới thiệu cho trang. Các trình duyệt Web
dùng phần đầu này để thu nhặt các loại thông tin khác nhau về trang. Để
xác định phần đầu, ta sử dụng thẻ <HEAD> và thẻ </HEAD> ngay sau thẻ
<HTML>. Mặc dù ta có thể đặt một số chi tiết bên trong phạm vi phần đầu
này, nhưng phổ biến nhất là tên trang. Nếu có ai đó xem trang này trong
browser, thì tên trang sẽ xuất hiện trong dải tên của cửa sổ browser. Để xác
định tên trang, ta đặt đoạn văn bản tên đó giữa các thẻ <TITLE> và
</TITLE>.
Phần thân là nơi nhập vào các văn bản sẽ xuất hiện trên trang Web
lẫn các thẻ khác quy định dáng vẻ của trang. Để xác định phần thân, ta đặt
các thẻ <BODY> và </BODY> sau phần đầu (dưới </HEAD>).
Dưới đây là cấu trúc cơ bản của một trang web định dạng HTML:
<HTML>
<HEAD>
<TITLE> tên trang <TITLE>
Các thẻ tiêu đề khác
</HEAD>
<BODY>
Văn bản và các thẻ của trang Web
</BODY>

</HTML>

8


1.1.2 Giới thiệu về CSS

CSS là viết tắt của cụm từ "Cascading Style Sheet", nó là một ngôn
ngữ quy định cách trình bày của các thẻ html trên trang web.Là ngôn ngữ
đang được sử dụng rất nhiều trong lập trình web, có thể nói CSS ra đời đã
tạo nên một cuộc cách mạng. Đôi khi các bạn sẽ bối rối khi nhận thấy rằng
các đoạn code mình viết hiển thị không giống nhau trên các trình duyệt
khác nhau, CSS sẽ giúp các bạn giải quyết bài toán này.CSS quy định cách
hiển thị nội dung của các thẻ HTML trên các trình duyệt gần như giống
nhau, bằng cách quy định các thuộc tính cho thẻ HTML đó.
a. Tại sao phải sử dụng CSS
- Như các bạn biết. HTML cũng hỗ trợ một số thuộc tính định dạng
cơ bản cho text, picture, table,… nhưng nó không thật sự phong phú và
chính xác như nhau trên mọi hệ thống. CSS cung cấp cho bạn hàng trăm
thuộc tính trình bày dành cho các đối tượng với sự sáng tạo cao trong kết
hợp các thuộc tính giúp mang lại hiệu quả. Ngoài ra, hiện tại CSS đã được
hỗ trợ bởi tất cả các trình duyệt, nên bạn hoàn toàn có thể tự tin trang web
của mình có thể hiển thị hầu như (như nhau) dù trên một hệ thống sử dụng
Windows, Linux hay trên một máy Mac miễn là bạn đang sử dụng một
phiên bản trình duyệt mới nhất.
- Sử dụng các mã định dạng trực tiếp trong HTML tốn hao nhiều thời
gian thiết kế cũng như dung lượng lưu trữ trên đĩa cứng. Trong khi đó CSS
đưa ra phương thức “ngoại tuyến” giúp áp dụng một khuôn mẫu chuẩn từ
một file CSS ở ngoài. Nó thật sự có hiệu quả đồng bộ khi bạn tạo một
website có hàng trăm trang hay cả khi bạn muốn thay đổi một thuộc tính

trình bày nào đó.
- Hãy thử tưởng tượng bạn có một website với hàng trăm trang và
bạn muốn thay đổi font chữ hay màu chữ cho một thành phần nào đó. Đó
thật sự sẽ là một công việc buồn chán và tốn nhiều thời gian. Nhưng với

9


việc sử dụng CSS việc đó là hoàn toàn đơn giản cũng như là bạn có một trò
ma thuật nào đó.
- Ngoài ra, CSS còn cho phép bạn áp đặt những kiểu trình bày thích
hợp hơn cho các phương tiện khác nhau như màn hình máy tính, máy in,
điện thoại,…
b. Cách chèn CSS vào trang HTML
Cách 1: Chèn nội dung CSS vào trong cặp thẻ <style></style>
trong phần <head></head> của trang web:
Ví dụ:
<html>
<head>
<title>Chen CSS-Cách 1</title>
<style type="text/css">
//Nội dung CSS đặt bên trong đây
</style>
</head>
<body>
</body>
</html>
Cách 2: Chèn trực tiếp vào bên trong thẻ HTML
- Chèn trực tiếp CSS vào bên trong các thẻ mở của HTML.
- Nếu có nhiều thuộc tính cần quy định, ta ngăn cách giữa chúng

bằng khoảng trắng.
Ví dụ: Ở đây ta chèn CSS vào thẻ mở của cặp thẻ

.
<html>
<head>
<title>Chen CSS-Cách 2</title>
</head>

10


<body>

</body>
</html>
Cách 3: Liên kết với một file *.css bên ngoài
Đây là cách được dùng nhiều nhất trong sử dụng CSS vì tính tiện
dụng và linh hoạt của nó. Giả sử, bạn có một website gồm hàng trăm trang,
khi bạn muốn thay đổi một chút cách trình này của website, thay vì gạch
cạch đi gõ từng trang một, bạn chỉ cần sửa file CSS bên ngoài một chút,
hàng trăm trang web của bạn đều được thay đổi.
Cú pháp: Thực hiện liên kết bằng thẻ <link>( Không có tag đóng ),
theo cú pháp sau:
<link rel="stylesheet" href="Đường dẫn đên file .css" type="text/css" />
Tag này được đặt trong cặp tag <head></head> của trang web, và
không cần đặt trong tag <style></style>
Nếu bạn đặt file *.css cùng thư mục với trang web, thì trong thuộc
tính href bạn chỉ cần viết: href="Nếu file *.css không cùng thư mục với trang web: Bạn cần chỉ trong
đường dẫn tuyệt đối tới file *.css đó trong thuộc tính href

Ví dụ:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
</body>
</html>

11


c. Một số thuộc tính thường dùng trong css
Thuộc tính
background

border

Ví dụ

Mô tả

background:

Định dạng nền (background) cho

#ff0000;

thành phần.

border: 1px solid

Định dạng đường viền cho thành

#ff0000;

phần.
Thuộc tính border-collapse xác

border-

border-collapse:

collapse

collapse;

border-

border-spacing:

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

spacing

10px;

đường viền của các cột lân cận.

bottom

bottom: 10px;

caption-side

định đường viền củatable có tách
biệt ra hay không.

Xác định vị trí dưới cùng của
thành phần được định vị trí.

caption-side:

Xác định vị trí một chú thích

bottom;

của table.
Xác định 2 bên của phần tử (left,

clear

clear: both;

right), nơi mà phần tử float không
được cho phép.

clip

color

Xác định đoạn cho thành phần khi

clip:
rect(0,0,50px,10px);
color: #ff0000;

sử dụng thuộc tính position có giá
trị "absolute".
Xác định màu sắc cho text.
Sử dụng kèm với bộ chọn

content

content: "."

":before", ":after" để chèn nội
dung được tạo.

counter-

counter-increment:

Gia tăng một hoặc nhiều counter

12


increment
counter-reset

section;

(sắp xếp có thứ tự, có hiển thị số)

counter-reset:

Tạo hoặc reset một hoặc nhiều

subsection;

counter.

cursor

cursor: pointer;

direction

direction: ltr;

display

display: inline;

Xác định kiểu con trỏ chuột được
hiển thị.
Xác định hướng cho văn bản.
Xác định loại hiển thị của thành
phần.

Xác định có hay không có đường

empty-cells

empty-cells: hide;

viền và nền trong một cột rỗng
của table

float

font

Xác định có hay không một thành

float: left;
font:

phần được float.
12px

arial,sans-serif;

Thiết lập font cho thành phần, bao
gồm font chữ, độ rộng,...
Thiết lập chiều cao của thành

height

height: 50px;

left

left: 10px;

letter-spacing

letter-spacing: 2px;

line-height

line-height: 1.5;

Thiết lập chiều cao giữa các dòng.

list-style

list-style: decimal;

Thiết lập kiểu cho một danh sách.

margin

margin: 15px;

Canh lề cho thành phần.

max-height

max-height: 200px;

Thiết lập chiều cao tối đa của

phần.
Xác định vị trí bên trái của thành
phần định vị trí (như position)
Tăng hoặc giảm khoảng cách giữa
các ký tự trong đoạn text.

13


thành phần.
Thiết lập chiều rộng tối đa của

max-width

max-width: 900px;

min-height

min-height: 100px;

min-width

min-width: 600px;

outline

outline: dotted;

overflow

overflow: scroll;

padding

padding: 15px;

page-break-

page-break-after:

Xác định các phân chia văn bản

after

alway;

ngay sau thành phần.

page-break-

page-break-before:

Xác định các phân chia văn bản

before

alway;

ngay trước thành phần.

page-break-

page-break-inside:

Xác định các phân chia văn bản

inside

alway;

ngay bên trong thành phần.

position

position: absolute;

quotes

"‘" "’"

right

right: 10px;

thành phần.
Thiết lập chiều cao tối thiểu của
thành phần.

Thiết lập chiều rộng tối thiểu của
thành phần.
Định dạng các đường viền bao
ngoài
Xác định điều gì sẽ xảy ra nếu
một thành phần box tràn nội dung.
Thiết lập các thuộc tính padding
trong một khai báo.

Xác định loại của phương pháp
định vị trí cho thành phần.
Thiết lập các loại dấu ngoặc bao
ngoài khi nhúng một trích dẫn.
Xác định vị trí bên phải của thành
phần định vị trí (như position)

14


Thiết lập các thuật toán layout

table-layout

table-layout: fixed;

text-align

text-align: center;

text-

text-decoration:

Xác định các trang trí thêm cho

decoration

underline;

text.

text-indent

text-indent: 10px;

text-

text-transform:

Thiết lập các ký tự viết hoa cho

transform

uppercase;

văn bản.

top

top: 10px;

vertical-align

visibility

white-space

được sử dụng cho table.
Sắp xếp các nội dung theo chiều
ngang.

Ghi rõ thụt đầu dòng của dòng
đầu tiên trong một khối văn bản.

Xác định vị trí bên trên của thành
phần định vị trí (như position)

vertical-align:

Sắp xếp các nội dung theo chiều

middle;

dọc.
Xác định thành phần có được nhìn

visibility: visible;

thấy hay không.
Xác định khoảng trắng có bên

white-space:

trong thành phần được xử lý như

nowrap;

width

width: 800px;

word-spacing

word-spacing: 5px;

z-index

z-index: 100;

thế nào.
Thiết lập chiều rộng cho thành
phần.
Tăng hoặc giảm không gian giữa
các từ trong đoạn văn bản.
Thiết lập thứ tự xếp chồng nhau
của một thành phần vị trí.

15

1.1.3 Giới thiệu về Javascript

JavaScript là một ngôn ngữ lập trình kịch bản dựa trên đối tượng
đượ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, nhưng cũng được dùng để tạo khả năng viết script sử
dụng các đối tượng nằm sẵn trong các ứng dụng. 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.
Javascript là ngôn ngữ dưới dạng script có thể gắn với các file
HTML. Nó không được biên dịch mà được chương trình duyệt diễn
dịch.Không giống Java phải chuyển thành mã để trình duyệt biên dịch,
trình duyệt đọc Javascript dưới dạng mã nguồn.Chính vì vậy, ta có thể dễ
dàng học Javascript qua các ví dụ bởi ta có thể thấy cách sử dụng Javascript
trên các trang web.
Javascript có khả năng đáp ứng các sự kiện như tải hay loại bỏ các
form.Khả năng này cho phép Javascript trở thành ngôn ngữ script động.
Giống với HTML và Java, Javascript được thiết kế độc lập với hệ
điều hành.Nó có thể chạy trên bất kì hệ điều hành nào có hỗ trọ Javascript.
Ngoài ra, Javascript còn giống Java ở khía cạnh an ninh là không thể đọc
và viết vào file của người dùng.
Cũng giống như C, JavaScript không có bộ xử lý xuất/nhập
(input/output) riêng.Trong khi C sử dụng thư viện xuất/nhập chuẩn,
JavaScript dựa vào phần mềm ngôn ngữ được gắn vào để thực hiện
xuất/nhập.
Hiện nay, JavaScript được sử dụng rất nhiều trong việc thiết kế trang
web động và một số hiệu ứng Hình ảnh thông qua DOM. Ngoài ra,
JavaScript còn đượ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

16


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.
1.1.4 Giới thiệu về jQuery

Giới thiệu
Khi mà nhiều nhà phát triển chấp nhận phát triển kiểu AJAX để tạo
ra các ứng dụng tương tác mạnh hơn, họ sẽ tìm các công cụ giúp đơn giản
hóa cho công việc của mình.
jQuery là một công cụ như thế, một số người dùng nói rằng nó giúp
tạo dự án phát triển AJAX (XML và JavaScript không đồng bộ) gọn hơn
nhờ việc sử dụng JavaScript dễ dàng hơn mặc dù JavaScript nổi tiếng là
khó làm việc cùng – một nhóm chuyên gia phát biểu tại cộng đồng
Lang.Net của Microsoft hồi đầu tháng 8, tổ chức ở Redmond, Washington.
John Resig, người tạo ra jQuery, nói rằng công nghệ này có bản 1.0 vào
26/8. jQuery là kiểu thư viện JavaScript mới cần thiết cho phép các nhà
phát triển làm việc "khiêm tốn" với JavaScript.
b. Căn bản
Để làm quen với jQuery, trước tiên, bạn nên tạo một file html với nội
dung như sau:
<html>
<head>
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript"> // phan (**) </script>
</head>
<body>

<a href=" /></body>

17


</html>
Bạn cần điều chỉnh lại src (nguồn) của file jquery.js. Thí dụ, nếu như
file jquery.js bạn đặt cùng thư mục với file html bạn vừa bạn, source sẽ
giống như sau:
<script type="text/javascript" src="jquery.js></script>
Bạn có thể tải về file jquery.js ở đây
1.1. Chạy code khi tài liệu sẵn sàng
Theo cách viết javascript thông thường, coder đặt code muốn brower
xử lý tương tự như sau:
window.onload = function(){ // Your code here}
Khi sử dụng jQuery, chúng ta sẽ làm việc tương tự bằng cách sau:
$(document).ready(function(){
//phan (*)
alert("Chào mừng bạn đến với diễn đàn Web007");
});
Sử dụng jq, bạn sẽ thấy quen thuộc với cách viết code này.Bây giờ,
bạn hãy đặt đoạn code trên vào phần (**) trong file html hiện thời của bạn.
Thêm thuộc tính onclick
Bạn thêm đoạn HTML sau vào giữa thẻ body của file html hiện thời
để hiển thị một liên kết
<a href="">Diễn Đàn WEB007</a>
Đoạn code js sau vào phần (*) để thêm thuộc tính onclick cho các thẻ
"a" $("a").click(function(){ alert("Hello! How are you ?");});
Khi click vào liên kết ở trong trang web, trình duyệt sẽ hiển thị bảng
thông báo "Hello! How are you ?". Bạn có thể thêm thuộc tính onclick này

cho bất kỳ thẻ nào trong trang web của mình.

18


Thủ thuật
Thay đoạn code js trên bằng đoạn code js sau, khi click vào một liên
kết trong trang web, browser sẽ hiển thị bảng thông báo rồi im re, chứ
không chuyển sang trang web trong đoạn href
$("a").click(function(){ alert("Thank for your visit!"); return false;});
1.2. Thêm class
Ở mục này, chúng ta sẽ xét một ví dụ để xem cách thêm một class
vào một (nhiều) đối tượng DOM.
Thêm đoạn code sau vào phần header của trang web (định dạng cách
trình bày cho class 'test' của các thẻ HTML có tên 'a')
<style type="text/css">a.test { font-weight: bold; }</style>
Thay thế vùng js chính bằng đoạn code sau (xóa tất cả nội dung cũ),
với mục đích: khi trang web được tải xong, nội dung của các thẻ ‘a’ sẽ
được trình bày bằng định nghĩa ở đoạn code trên
$("a").addClass("test");
Bạn cũng có thể xóa class ra khỏi một DOM
1.3. Các hiệu ứng đặc biệt
Bây giờ bạn thử đặt đoạn code sau vào vùng js chính để thử xem
$("a").click(function(){ $(this).hide("slow"); return false;});
2. Cách gọi dây chuyền
Chúng ta xem và thử đoạn code sau để có cái nhìn sơ qua về lập trình
hướng đối tượng với jQuery:
$("p").addClass("test").show().html("web007");
Mỗi phương thức ở đoạn code trên (addClass, show, html) trả về đối
tượng jQuery; với đối tượng trả về, bạn có thể tiếp tục áp dụng các phương

thức có thể cho tập các phần tử hiện thời. Khi tương đối thành thạo jQuery,
bạn có thể sẽ thấy quen thuộc đoạn code sau:
$("a").filter(".clickme").click(function() {

19


alert("click!");
}).end().filter(".hideme").click(function() {
$(this).hide();
});
3. Callbacks, Functions và đối tượng 'this'
Callback là một hàm được thực thi sau khi một hàm cha của nó được
thực thi xong.Cách khai báo callback trong jQuery có phần khác với cách
truyền thống.
3.1 Khai báo callback không có tham số
$.get('web007.html, myCallBack);
Chú ý là tham số thứ hai ở khai báo trên là tên của một hàm chứ
không phải là một chuỗi (không đặt giữa cặp nháy đơn)
3.2 Khai báo callback với tham số
Cách khai báo sai:
$.get('web007.html', myCallBack(param1, param2));
Cách khai báo đúng:
$.get('myhtmlpage.html',

function(){

myCallBack(param1,

param2);})

1.1.5 Giới thiệu AJAX

 Định nghĩa AJAX
Khác với các phần mềm chạy độc lập ở máy khách (có khả năng
tương tác gần như tức thời với người dùng), các ứng dụng Web bị giới hạn
bởi chính nguyên lý hoạt động của nó: tất cả các giao dịch phải thực hiện
thông qua phương thức giao dịch HTTP (HyperText Transport Protocol Giao thức truyền tải qua các siêu liên kết) trong một mô hình có tên
Client/Server. Bất kỳ một tác động nào của người dùng lên ứng dụng Web
thông qua trình duyệt đều cần thời gian gửi về Server và sau khi xử lý,
Server sẽ trả về những thông tin người dùng mong đợi. Như vậy, độ trễ

20


trong trường hợp này chính là điều mà các ứng dụng Web khó có thể sánh
với như các phần mềm chạy trên máy tính đơn lẻ (đặc biệt là trong các ứng
dụng như Bản đồ trực tuyến, soạn thảo văn bản trực tuyến, sát hạch trực
tuyến có tính thời gian làm bài…).
Thuật ngữ AJAX được xuất hiện vào ngày 18/2/2005 trong một bài
báo có tên AJAX : A New Approach to Web Applications của tác giả Jesse
James Garrett, công ty AdapativePath. Ông định nghĩa và tóm gọn lại từ
cụm từ “Asynchronous JavaScript+CSS+DOM+XMLHttpRequest”.Ngay
sau đó thuật ngữ AJAX được phổ biến cực kỳ nhanh chóng trong cộng
đồng phát triển Web và cho đến nay nó là một trong những từ khóa được
tìm kiếm nhiều nhất trên Internet.
Nội dung định nghĩa của Garrett về AJAX như sau:
AJAX không phải là một công nghệ.Nó là tập hợp của nhiều công
nghệ với thế mạnh của riêng mình để tạo thành một sức mạnh mới. AJAX
bao gồm:
o Thể hiện Web theo tiêu chuẩn XHTML và CSS;

o Nâng cao tính năng động và tương tác bằng DOM (Document Object
Model);
o Trao đổi và xử lý dữ liệu bằng XML và XSLT;
o Truy cập dữ liệu theo kiểu bất đồng bộ (asynchronous) bằng
XMLHttpRequest;
o Và tất cả các kỹ thuật trên được liên kết lại với nhau bằng
JavaScript.
 Cấu trúc và cách hoạt động
Trong các thành phần cấu thành trên, điểm mấu chốt của AJAX nằm
ở XMLHttpRequest. Đây là một kỹ thuật do Microsoft khởi xướng và tích
hợp lần đầu tiên vào IE5 dưới dạng một ActiveX. Mozilla tích hợp công
nghệ này vào Mozilla 1.0/Netscape 6 sau đó (đương nhiên toàn bộ các

21


version sau này của Firefox đều có XMLHttpRequest) và hiện nay đã có
trong trình duyệt Safari 1.2 (Apple) và Opera 7 trở lên. Các vấn đề về
XMLHttpRequest và cách sử dụng nó trên các trình duyệt khác nhau sẽ
được chúng ta quay trở lại ở các phần tiếp theo. Sau đây là một số nét khác
biệt cơ bản giữa các ứng dụng Web truyền thống và ứng dụng Web sử dụng
AJAX.
Trong các ứng dụng Web truyền thống, khi người dùng có một cần
thay đổi dữ liệu trên trang Web, yêu cầu thay đổi được gửi về server dưới
dạng HTTP request (hay còn gọi postback), server sẽ xử lý yêu cầu này và
gửi trả lại trang HTML khác thay thế trang cũ. Qui trình này được mô tả là
nhấp-chờ và tải lại (click-wait-and-refresh): ví dụ người dùng sau khi nhấn
một nút “Submit” trên trang Web phải chờ cho đến khi server xử lý xong
mới có thể tiếp tục công việc. Ngược lại, trong các ứng dụng AJAX, người
dùng có thể nhấn chuột, gõ phím liên tục mà không cần chờ đợi. Nội dung

tương ứng với từng hành động của người dùng sẽ gần như ngay lập tức
được hiển thị vào vị trí cần thiết (đáp ứng gần như tức thời) trong khi trang
Web không cần phải refresh lại toàn bộ nội dụng. Để tìm hiểu kỹ hơn điều
này, ta sẽ xem xét 2 mô hình ứng dụng như [1] đã đề cập, Mô hình cổ điển
và Mô hình AJAX-based:
o Mô hình cổ điển của một ứng dụng Web
o Mô hình ứng dụng Web sử dụng AJAX
Rõ ràng điểm khác biệt là thay vì phải tải cả trang Web thì với AJAX
trình duyệt phía người dùng chỉ cần tải về phần của trang Web mà người
dùng muốn thay đổi. Điều này giúp cho ứng dụng Web phản hồi nhanh
hơn, thông minh hơn.Ngoài ra, điểm đặc biệt quan trọng trong công nghệ
AJAX nằm ở chữ A (Asynchronous) – không đồng bộ – tức là người dùng
cứ gửi yêu cầu của mình tới server và quay lại với công việc của mình mà
không cần chờ trả lời. Khi nào server xử lý xong yêu cầu của phía người

22


dùng, nó sẽ báo hiệu và người dùng có thể “thu nhận lấy” để thể hiện
những thay đổi cần thiết. Vậy tất cả cơ chế này hoạt động thực sự thế
nào?AJAX cho phép tạo ra một AJAX Engine nằm giữa giao tiếp này. Khi
đó, các yêu cầu gửi (resquest) và nhận (response) do AJAX Engine thực
hiện. Thay vì trả dữ liệu dưới dạng HTML và CSS trực tiếp cho trình
duyệt, Web server có thể gửi trả dữ liệu dạng XML và AJAX Engine sẽ
tiếp nhận, phân tách và chuyển hóa thành XHTML + CSS cho trình duyệt
hiển thị. Việc này được thực hiện trên client nên giảm tải rất nhiều cho
server, đồng thời người sử dụng cảm thấy kết quả xử lý được hiển thị tức
thì mà không cần nạp lại trang.Mặt khác, sự kết hợp của các công nghệ
Web như CSS và XHTML làm cho việc trình bày giao diện trang Web tốt
hơn nhiều và giảm đáng kể dung lượng trang phải nạp.Đây là những lợi ích

hết sức thiết thực mà AJAX đem lại. Chúng ta sẽ xem xét cụ thể các thành
phần cấu thành AJAX, nguyên lý hoạt động và việc sử dụng Javascript kết
nối chúng trong phần tiếp theo.
1.1.6 Giới thiệu về PHP

PHP(Hypertext Preprocessor) là 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. Mã PHP có thể thực thi
trên Webserver để tạo ra mã HTML và xuất ra trình duyệt web theo yêu
cầu của người sử dụng. Do được tối ưu hóa cho các ứng dụng web, tốc độ
nhanh, nhỏ gọn, 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 ngôn ngữ lập trình web
phổ biến nhất thế giới.
Ngôn ngữ PHP ra đời năm 1994 Rasmus Lerdorf sau đó được phát
triển bởi nhiều người trải qua nhiều phiên bản.Phiên bản hiện tại là PHP
5.0 đã được công bố 07/2004.

23


1.1.7 Tại sao phải sử dụng PHP

Có nhiều lý do khiến cho việc sử dụng ngôn ngữ này chiếm ưu thế,
sau đây là một số lý do cơ bản:
 Miễn phí, download dễ dàng từ Internet.
 Ngôn ngữ rất dễ học, dễ viết
 Mã nguồn mở(open sorce code)
 Mã nguồn không phải sửa lại nhiều khi viết chạy cho các hệ điều
hành từ Windows,Linnux, Unix.
 Rất đơn giản trong việc kết nối với nhiều nguồn DBMS. ví dụ như

: MySQL, Microsoft SQL Server 2000, Oracle, PostgreSQL, Adabas,
dBase, Empress, FilePro, Informix, InterBase, mSQL, Solid, Sybase,
Velocis và nhiều hệ thống CSDL thuộc Hệ Điều Hành Unix (Unix dbm)
cùng bất cứ DBMS nào có sự hổ trợ cơ chế ODBC (Open Database
Connectivity) ví dụ như DB2 của IBM.
1.1.8 Cú pháp PHP

Đoạn mã php luôn được bắt đầu và kết thúc bởi cặp thẻ theo cú pháp:
Cách 1: Cú pháp chính:
<?php Mã lệnh PHP ?>
Cách 2: Cú pháp ngắn gọn
<? Mã lệnh PHP ?>
Cách 3: Cú pháp giống với ASP.
<% Mã lệnh PHP %>
Cách 4: Cú pháp bắt đầu bằng script
<script language=php>
.....
</script>
Trong PHP để kết thúc 1 dòng lệnh chúng ta sử dụng dấu ";"

24


Để chú thích 1 đoạn dữ liệu nào đó trong PHP ta sử dụng dấu "//"
cho từng dòng. Hoặc dùng cặp thẻ "/*……..*/" cho từng cụm mã lệnh.
Đoạn mã php có thể đặt bất kỳ đâu trong tài liệu.Thông thường một
trang php bao gồm các thẻ HTML như một trang HTML nhưng có thêm các
đoạn mã php.
1.1.9 Các kiểu dữ liệu PHP

Php hỗ trợ 5 kiểu dữ liệu như sau:
+Integer: sử dụng cho giá trị có kiểu dữ liệu là số nguyên.
+ Double: sử dụng cho giá trị có kiểu dữ liệu là số thực.
+String: sử dụng cho các giá trị có kiểu dữ liệu là chuỗi và ký tự.
+Array: sử dụng cho các giá trị có kiểu dữ liệu là mảng.
+ Object: sử dụng cho các giá trị có kiểu dữ liệu là đối tượng của lớp.
1.1.10 Biến trong PHP

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.
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 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.

25