THIẾT LẬP WEB: AJAX TRONG PHP

Thời gian phát triển dự án nhanh Do PHP có m ột cộng đồng lớn mạnh nên rấ t nhiều các tà i liệ u hướng dẫn, những thư viên code, thậm chí những ứng dụng hoàn thiện đều được cung cấp m iễ

Wytare Lrủdler^ipề

Trung tâm đào tạo lập trình viên quôc tê AiTi-Aptech

Trình bày: Nguyễn Thanh Nam - AiTi-Aptech Faculty

APTECH

C O M P U T E R E D U C A T I O N

aiti-aptech edu.vn

C O M P U T E R E D U C A T I O N

aiti-aptech edu.vn

© C y W O R L P

Th£%vớu tó- mữt ft£ờư Ĩ4t*ig

TRANG CHU CAU LAC BO SHOP P1CTURA KINE ALOHA

Mật kháu:

□ Ghi nhd dia chi Email

Ban quen mat khau?

CHUYEN NHA

TII365

Facebook helps you connect and share with

th e people in your life.

Web Images Video Local Shopping more ■

See th e la te s t e n v iro n m e n ta lly frie n d ly

Technology v World & Business v Science r Gaming v Lifestyle v Entertainment v Sports v Offbeat ■*

ne flu: 5 things to know

world may be on the brink of the first inza pandemic in more than 40

News, Images, Videos I op In 24 Hr 7 Days 30 Days 365 Days

f t Q i Digg Dialogg with Sir Richard Branson!

I I L Submit your questions for our next Digg Dialogg w ith Virgin Group founder Sir Richard Branson, presented by Freecreditreport ci

How Swine Flu Spreads from Pigs to Humans

image — grow a train typepas.com (Pets & Animals: mafle popular 14mln ago

5SComments Share Bury 4 * I msaleem submitted

R u n n in g W in d o w s 7 RC o n a n e tb o o k

G A M E O F Tl

UFT

IN STORE THli

M U ) W o k d P r e s s

r VWdPr&ss.can B''S: Q

COM

Home SignUp Features Blog Our Story Advanced

diggs wo9s.computerwona.com— How does Microsoft's latest Windows 7 leak Build 7100 run on a netbook, the Dell Mini 9 in specific? Here's y

what I found More, fMicrowHR

digg 22 Comments Share Bury sjvn made popular 14min ago 3558 ¡ U I The Me

2 1 4

diggs

Prom etheus C reating Saturn Ring Streamers

IMAGE — apod.nasa.gov (Space) made popular 24mm ago

Express yourself Start a blog 1 Sign Up Nowl

See our fr e e features —* 1

173,004 BLOGGERS 184,512 MEW POSTS 46,78 7,330 WORDS TODAY Preferred Language: English

Wordpress com is also available in TlÎ

"9Ÿl4'-Viral Flu: Earth’s Oldest T rojan Horse-invaders EASY READING CULTURE OF LIFE NEWS: VIRAL FLU: EARTH'S OLDEST TROJAN HORSE-INVADERS « Culture of Ufa News 2 Viruses are one of the Elder Earth Life Forms They use us as their Trojan Horses to invade new territory I was one [ ]

100

PHP là gì ?

• PHP được phát triể n từ ngôn ngữ kịch bản (scrip t) vớ i mục đích

xây dựng trang Web cá nhân (Personal Home Page) Sau đó đã

được phát triê n thành m ột ngôn ngữ hoàn chỉnh và được ưa

chuộng trên toàn thế giớ i trong việc phát triể n các ứng dụng Web

based

• PHP (PHP: H ypertext Perprocessor) là ngôn ngữ kịch bản lập

trìn h phía máy chủ (server-side) phổ biến nhất thế giớ i

C O M P U T E R E D U C A T I O N

www aiti-aptech edu.vn

APTECHTM

year* ÜÍ Leadership

• PHP thường hoạt động theo thứ tự sau:

1 Người dùng gửi yêu cầu lên máy chủ

2 M áy chủ xử lý yêu cầu (Thông dịch mã PHP và chạy chương trìn h, mã PHP có thể tru y xuất CSDL, tạo hình ảnh, đọc ghi file , tương tác vớ i máy chủ khác )

3 M áy chủ gửi dữ liệ u về cho người dùng (thường là dưới dạng

H T M L )

^ Lịch sử phát triển

yean» o i Leadership

• PHP được phát triể n năm 1994, bao gồm các macro cho trang

Web cá nhân (Personal Home Page) bởi Rasmus Le rdo rf.

• PHP 2 (1995) nâng cấp thêm m ột vài chức năng m ới hoàn thiện

hơn so vớ i phiên bản đầu tiên (H ỗ trợ Database, file upload, array, conditionals, iteration, regular expressions )

C O M P U T E R E D U C A T I O N

aiti-aptech edu.vn

APTECHTM

^ Lịch sử phát triển

yean o i Leadership

• PHP 3 (1998) được phát triể n vớ i bộ dịch m ới vớ i tốc độ nhanh

hơn và khắc phục những nhược điểm trong phiên bản trước đây

bởi Zeev Suraski và A n d i Gutmans Phiên bản này còn hỗ trợ

thêm ODBC và các hàm làm việc vớ i giao thức em ail (SMTP,

IM A P ).

• PHP 4 (2000) Nâng cấp bộ dịch hoàn thiện hơn vớ i việc hỗ trợ

nhiều tính năng bảo mật trong PHP Bộ dịch được đổi tên thành

Zend Engine.

É • PHP 5 (2004) được nâng cấp lên Zend Engine II vớ i khả năng lập

C O M P U T E R E D U C A T I O N

aiti-aptech eơu.vn

Lý do sử dụng

2 Tốc đô thưc thi • •

Zdnet S tatistics

* T7 - T Ì T T T Ì J u l y 2 0 0 1

C O M P U T E R E D U C A T I O N

aiti-aptech edu.vn

APTECHTM

Lý do sử dụng

3 Tmh khả chuỵển

PHP được th iế t kế để chạy trên nhiều nền tảng khác nhau, có thể

làm việc vớ i nhiều phần mềm máy chủ, cơ sở dữ liệ u (v í dụ: bạn

có thể phát triể n dự án trên U N IX , sau đó chuyển sang N T mà

Supported Databases: IB M D B2, In fo rm ix, InterBase,

rontBase, D ire ct M S-SQ L, M yS Q L, O DBC, Oracle .

APTECH

C O M P U T E R E D U C A T I O N

aiti-aptech edu.vn

Lý do sử dụng

4 Giá thành cạnh tranh

PHP không chỉ là phần mềm mã nguồn mở mà còn thực sự m iễn

phí (kể cả k h i bạn sử dụng cho mục đích thương m ại) Do là phần mềm mã nguồn mở, các lỗ i (bug) của PHP được công khai và

nhanh chóng được sửa chữa bởi nhiều chuyên gia do đó nó cũng

5 PHP có một cộng đồng phát triển mạnh

6 Thời gian phát triển dự án nhanh

Do PHP có m ột cộng đồng lớn mạnh nên rấ t nhiều các tà i liệ u hướng dẫn, những thư viên code, thậm chí những ứng dụng hoàn thiện đều được cung cấp m iễn phí Nên k h i phát triể n ứng dụng

sẽ giảm được rất nhiều thờ i gian.

”î “ * » g P H P

a Hơn 40 % ứng dụng Web được viết bằng PHP

b Hơn 20 triệu website sử dụng PHP

c Hơn 45% các máy chủ Apache cài đặt PHP

2 Từ khóa PHP trả về kết quả 9.380.000.000 khi tìm kiếm trên Google so với 2.550.000.000 của ASP , 634.000.000 của JSP và 75.800.000 của ASP.NET

3 Hầu hết các website nổi tiếng đều đang sử dụng code PHP như

Facebook, Wikipedia (MediaWiki), Yahoo!, My Yearbook, Digg,

WordPress và Tagged

yean» o i Leadership

Google trend

Apr 20QÔ JUI20Û8 Oci 200«

News reference volume

Cú pháp PHP

f / |

r w

yean iẨ Leadership

echo "$var, $Var"; // outputs "Aiti, //Aptech"

$4site = 'not y e t 1; //invalid

$_4site = 'not y e t 1; // valid;

$tayte = 'mansikka1; // valid; 'a' is //(Extended) ASCII 228.

? >

Cu phap PHP

t Cu phap PHP

vtan oJ Leadership

Kieu dir lieu

S Scalar : Boolean, Integer, Float, String

S Composite : Array, Object

S Special Types : Resource, N U LL

vtarh ud Lrjidkrr ship

Khai bao mang

for ($i = 1 ; $i <= 10; $i++) { for (;;) {

print "$i\n"; if ($i > 10)break;

$i++;

echo " - \n" ; }

for ($i = 1 ; ; $i++) {

if ($i > 10) break; echo " - \n" ; print "$i\n"; for ($i = 1 ; $i <= 10;

echo " - \n" ; for ($i = 1; $i<=20; $i++): print M$i\nM;

endfor

? >

/ < 2 CuphapPHP

vtan ud Lrjidkrr Jsip

Khai bao ham

<?php

function square ($num) {

return $num * $num;

C O M P U T E R E D U C A T I O N

1 Giới thiệu Ajax

2 Kiến trúc Ajax

3 Ba bước lập trình với Ajax

4 Demo ví dụ Ajax & PHP

s Toàn bộ mã CT chạy trên Desktop

s Tốc độ thực thi/Tính tương tác cao

1 Vvean irf Leadership

-RIA

Communication Technologies

APTECH

C O M P U T E R E D U C A T I O N

Aplrdl ccfcbfiiles

ị

vtan o i Leadership

AJAX

1 Giói thiệu Ajax

❖ ứng dụng Rich Internet Application

'S Adobe Flash/Flex Apps

'S Microsoft Silverlight Apps

/ < 2 ^ a j a x

o Tên của thủ đô môt nước ?

o Tên của một đội bóng ?

Aplrdl (.ctebnltes

vtan» o i Leadership

• A JA X : acronym (tò viết tắt các chữ cái đầu)

• Ajax : tên của một tổ họp công nghệ, trong đó nhấn mạnh

A = Asynchronous - Tính bất đối xứng

Desktop bằng cách loại bỏ sự Refresh của trang web Tổ họp

XHTML + css : trình diễn nội dung

DOM : hiển thị động và tương tác với các elements

XML + XSLT : định dạng dữ liệu cho trao đổi, thao tác

XMLHttpRequest : gửi và nhận Request

JAVASCRIPT: kết dính các thành phần

gổm :

APTECH

C O M P U T E R E D U C A T I O N

• ư u điểm của A j ax

• Data-driven : giảm tải cho server do chỉ cần chuyền data

• Click và Wait nhưng không refresh -> giống Desktop

• Tốc độ response nhanh hơn

• Người dùng tiếp tục làm các thao tác khác khi đợi

• Là công nghệ của Browser, độc lập với Web Server

JUST-IN-TIME

C O M P U T E R E D U C A T I O N

APTECHTM

P e r c e n t a g e of M a l c h i n g J ob P o s t i n g s

O O'!

p years OÍ Leadership

Web page

Web

page

Exit page

tvtan oJ Leadership Ajax

Traffic tich lüy

• Khi nào và ở đâu sử dụng Ajax trong ứng dụng web

• Khi cần tự động Update nhưng loại bỏ Refresh (ví dụ: Bảng tỷ số,

chứng khoán, đấu giá, dự báo thời tiết )

• Tối thiểu tần số tự động Update để giảm tải cho server, cung cấp link

refresh dễ nhận biết cho người dừng.

• Ý thức việc sử dụng Back/Forward button, hoặc chia sẻ URL của user

C O M P U T E R E D U C A T I O N

APTECHTM

• Khi nào và ở đâu sử dụng Ajax trong ứng dụng web (tiếp )

• Loại bỏ sự phụ thuộc giữa thông tin và các trang web (ví dụ Google

Maps, Ajax pagination), sử dụng XM L và raw Data

• Ket hợp Ajax với Traditional HTML để hỗ trợ tối ưu hóa máy tìm kiếm

• Đơn giản hóa các thao tác thêm, sửa, xóa, thông báo

• Giúp người sử dụng nhận biết các action đang được thực hiện (Sử

dụng Ajax indicator image : Loading/Saving/Success

oàn toàn bằng Ajax

C O M P U T E R E D U C A T I O N

APTECHTM

• Tại sao Ajax và PHP?

• Javascript và PHP có nhiều điểm chung.

• PHP là nền tảng mở ngày càng mở rộng và phổ biến

• Hỗ trợ bởi cộng đồng lớn (mã nguồn, tài nguyên, )

• Nhẹ nhàng (lightweight) và tốc độ (speed) trong xử lý.

• Hoạt động độc lập, dễ triển khai trên mọi hệ thống (OS)

thao tác với định dạng dữ liệu.

C O M P U T E R E D U C A T I O N

APTECHTM

Ba bước để tạo một ứng dụng Ajax đơn giản

v' Bước 3: Cập nhập giao diện qua DOM (HTML+CSS+JS)

✓ Bước 1: Trigger sự kiện (JAVASCRIPT EVENT)

Sự kiện trong Javascript

ApLcdi celebrates

Mo hinh dang ky su> kien

//xac dinh HTML element

var element = document.getElementByld("element_id");

//dang ky ham dieu khien su kien

s Bước 2: Thao tác với Ajax (CLIENT-SERVER)

2.1 Khởi tạo đối tượng Request (XMLHttpRequest- XHR) 2.2 Viết hàm Callback

2.3 Gửi Request tói Server

2.4 Nhận và parse dữ liệu trả về.

XMLHttp = new Acti veXObj ect(" M sxml2 XMLHTTP");

• Với IE5.6: sử dụng Microsoft.XMLHTTP

XM LH ttp = new ActiveXObject( "Microsoft X M L H T T P “);

• Với trình duyệt khác: XMLHttpRequest (W3C)

XMLHttp=new XMLHttpRequestO;

Các phưong thức củã XMLHttpRequest

Methods

open("method","url", Thiết lập request object để gửi một

send(content) Gửi request lên server, nội dung CÓ

Các thuộc tính của XMLHttpRequest

Properties

onreadystatechange Chỉ định hàm callback

readyState Trạng thái Request : O-Khởi tạo,

Đang tải, 2-Đã tải, 3-Tương tác, Hoàn tất

4-

1-responseText Dữ liệu từ server ở dạng text

responseXML Dữ liệu từ server dạng XML

status Mã trạng thái HTTP từ server cho

Created, 400-bad request, 403- forbidden, 500-internal server error

statusText Phiên bản text của mã trạng thái HTTP

Chi tiết về các trạng thái

XMLHttpRequest nhưng chưa gọi open().

send().

chưa trả lời.

APTECH

• Lấy đối tượng XHTTPRequest

var xhrObj = GetXmlHttpObject() ;

• Thiết đặt onreadystatechange tới hàm callback

xhrObj.onreadystatechange = cbHandleAjaxResponse

• Mở Request trên đối tượng XHR

xhrObj.open("method","url",asynchflag);

- asynchflag: true (nếu gửi bất đồng bộ)

• Gửi Request thông qua đối tượng XHR

APTECH

C O M P U T E R E D U C A T I O N

Chọn Method gửi Request

Method = GET nếu

Mục đich nhận dữ liệu từ server

REST (Representational State Transfer) webservices

Khi passing parameters

Các URL không thay đổi

Lượng dữ liệu gửi là nhỏ

Method = POST nếu

Thay đổi (CUD) trong CSDL

Lượng dữ liệu gửi lên server lớn

Các URL kô cố định

//get area that need updating

//stuff value to area

}

}

✓ Bước 3: Cập nhập DOM

• Một trang web có dạng cây vái quan hệ chã-con

• Cây elements được gọi là Document Object Model

• Mọi thay đổi với DOM sẽ phản ánh ngay trên trình duyệt

Mot • vi du • vê DOM

APTECH

S ử dụng DOM

• Tương tác với DOM nhờ Javascript

parentNode, chỉldNodes

createTextNode(), insertBefore()

C O M P U T E R E D U C A T I O N

APTECHTM

ApLcdi celebrates

Vi du sir dung DOM

<div id="seminar">

<div id="ajax">Hello Ajax</div>"

</div>

<script language="j avascript">

var divAjax = document.getElementByld("ajax" ) ;

Demo Ajax Music Search

5 Đỉnh dang dữ liêu JSON và XML• • o •

6 Xây dựng Widget đơn giản cho Web với Ajax

7 Ajax Toolkits

8 Vấn đề và thách thức với ứng dụng Ajax

9 Giói thỉệu các tàỉ nguyên, tham khảo.

5 Định dạng dữ liệu XML

• XML là gì ?

• extensible Markup Language

• XHTML, Webservices, XML-based Database

• X (Ajax) ~ XML và XMLHttpRequest XML

• XML liên kết với Ajax trong mọi trường họp ? -> WRONG !

• Thực tế : Không phải bất cứ ứng dụng Ajax nào cũng dùng XML

5 Định dạng dữ liệu XML

• XML là đinh ■ dang chuẩn cho các • o dich • vu Web•

• XML thực tế chậm hơn khi truyền so với Plain Text và JSON

• Cấu trúc XML dễ hiểu nhưng không đơn giản để xây dựng

• Gặp phải vấn đề tương thích trình duyệt khi parse văn bản XML

• Trong mọi trường hợp, xem xét sử dụng Plain Text, Cặp Attribute /Value hoặc JSON, sau đó mới tói XML

5 Định dạng dữ liệu JSON

JSON - Javascript Object Notion - JSON.org

• Định dạng dữ liệu “lightweight”

• Giựa trên cú pháp JavaScript (Array và Object literals)

JSON cho phép chuyến các đối tượng Javascript thành các chuỗi có thể gửi cùng http request.

JSON được hỗ trợ bỏi hầu hết các ngôn ngữ, vói PHP : JSON.php ỉà thành phần thư viện hỗ trợ encode/decode định dạng chuỗi sang PHP Object và ngược lại

Thân thiện với Developer, ổn định, được chấp nhận rộng rãi

APTECH

5 Dinh dang dir lieu JSON• • o •

var people =

{ "programmers": [

{ "firstName": "Brett", "lastName":"McLaughlin"},

{ "firstName": "Jason", "lastName":"Hunter”},

{ "firstName": "Elliotte", "lastName":"Harold” } ],

{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },

{ "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" } ]

5 Đinh dang dữ liêu JSON• • o •

• Truy cập và thay đổi dữ liệu

Demo Ajax & XML

C O M P U T E R E D U C A T I O N

www.netvibes.com

6 Ajax, Widget, và Webservices

Web 2.0 - Web là nền tảng gồm nhiều dịch yụ (Web-services)

M a p s , Search, Desktop,

Picasa, Sitemaps, Geo, OpenSocial

Adwords, Finance, Calendar,

Authentication, Ajax Search, Ajax Language, Ajax Feed, Visualization, 03D, Book, Google Earth, Blogger Data, Google Base

del.icio.us, Finance, flickr, Hot Jobs,

Maps, Merchant Solutions, Music, Design

Patterns, RSS Feeds, Search, Search

Marketing, Shopping, Travel, Traffic,

upcoming.org, Ul library, weather,

webjay,Widgets, JS Developer Center, PHP

Developer Center

H ÿ x n o o f , DEVELOPER NETWORK

G ọ p Q Ì e

Code Ơ