php on ajax

134
By Ford AntiTrust <?PHP ?> onAJAX

Upload: ford-antitrust

Post on 10-May-2015

2.934 views

Category:

Technology


5 download

TRANSCRIPT

Page 1: PHP on AJAX

By Ford AntiTrust

<?PHP ?> on AJAX

Page 2: PHP on AJAX

About Trainer | Annop Suwattanapisat

� Education� 2004-2007, Bachelor of Science (Computer Science), Naresuan

University, Thailand

� 1991-2003, High School and Junior High School, La Salle ChotiraviNakhonsawan, Thailand

� Work� Work� Database Administrator and Web Developer Consult at BBMT-

BKK, Thailand

� Freelances of Database Analyze, Web Application Developer and Software Design Consult, Thailand

� 2nd Founder, Web Technical Consult and Editor at Siampod.com

� Thaiadmin Global Staff, Writer and Developer at Thaiadmin.org

� Blogger at Ford AntiTrust’s Blog, http://www.fordantitrust.com

� Writer for OOP in PHP part 1-3, ThaiAdmin Magazine V.1-3, 2007

Page 3: PHP on AJAX

Skill

� XHTML (XML and DOM)

� CSS

� JavaScript

� HTTP Protocol (for XMLHttpRequest Object)

� Server Side Script (this course use PHP)

� Object Oriented Programming

� Database Management System

(this course use MySQL)

Page 4: PHP on AJAX

Tools

� Web Browser� Mozilla Firefox 2.x with FireBug

� IE (6.x and IE 7.x)

� Opera 9.x

� Safari

� IDE or Editor� Edit+� Edit+

� Eclipse + Zend PHP Developer Tools

� HTTP Packet Filter � The Proxomitron

� FireBug

� Server Tools� AppServ (Apache 2, PHP 5, MySQL 5)

� Database Tools� phpMyAdmin

� MySQL GUI Tools (MySQL Administrator and MySQL Query Browser)

� fabFORCE DBDesigner

Page 5: PHP on AJAX

Outline

� PHP Basic Concept (OOP, Zend Certification)

� PHP Manual

� PEAR Package/Frameworks

� Hypertext Transfer Protocol (HTTP)� Hypertext Transfer Protocol (HTTP)

� XHTML, DOM, CSS and JavaScript in Basic

� AJAX in Basic

� Debug AJAX

� MySQL Basic

� XAJAX Framework

Page 6: PHP on AJAX

Reference

� PHP Manual, http://www.php.net, January 2007

� Zend PHP 5 Certification Study Guide, ZendTechnologies, 2006

� Concepts of Programming Languages (7th Edition), Robert W. Sebesta, April 2005Robert W. Sebesta, April 2005

� Core CSS: Cascading Style Sheets, 2nd Edition, Keith Schengili-Roberts, 2003

� Accessible XHTML and CSS Web Sites Problem -Design – Solution, Jon Duckett, 2005

� Mozilla Developer Center, http://developer.mozilla.org/, 2007

� Ajax in Action, Manning, 2006

Page 7: PHP on AJAX

AJAX CONCEPT

Page 8: PHP on AJAX

Classic VS. AJAX Request/Response

http://www.adaptivepath.com/publications/essays/archives/000385.php

Page 9: PHP on AJAX

Classic VS. AJAX Request/Response

http://www.adaptivepath.com/publications/essays/archives/000385.php

Page 10: PHP on AJAX

Classic VS. AJAX Request/Response

http://www.adaptivepath.com/publications/essays/archives/000385.php

Page 11: PHP on AJAX

Classic VS. AJAX Data Flow

http://www.adaptivepath.com/publications/essays/archives/000385.php

Page 12: PHP on AJAX

BACK TO BASIC

Page 13: PHP on AJAX

PHP BASIC CONCEPT

Page 14: PHP on AJAX

PHP Basic Concept

� PHP Tag

� Code Indentation Style

� GoPHP5

� Object Oriented Programming in PHP

Page 15: PHP on AJAX

PHP Tag

<?php

… code

?>

<script language=“php”>

… code

</script>

XML Style

<?

… code

?>

<?= $var ?>

<%

… code

%>

Page 16: PHP on AJAX

PHP Tag

<?php

… code

?>

<script language=“php”>

… code

</script>

Script Style

<?

… code

?>

<?= $var ?>

<%

… code

%>

Page 17: PHP on AJAX

PHP Tag

<?php

… code

?>

<script language=“php”>

… code

</script><?php echo $var; ?> = <?= $var ?>

<?

… code

?>

<?= $var ?>

<%

… code

%>

Short Style

Page 18: PHP on AJAX

PHP Tag

<?php

… code

?>

<script language=“php”>

… code

</script>

<?

… code

?>

<?= $var ?>

<%

… code

%>

ASP Style

Page 19: PHP on AJAX

PHP Tag

<?php

… code

?>

<script language=“php”>

… code

</script>

XML Style

<?

… code

?>

<?= $var ?>

<%

… code

%>

Page 20: PHP on AJAX

Basic Concept

� PHP Tag

� Code Indentation Style

� GoPHP5

� Object Oriented Programming in PHP

Page 21: PHP on AJAX

Code Indentation Style

� Use Tab to Space

� 1 Tab = 4 Space

� Use 1 Tab between two braces in Code Block

{

………}

Page 22: PHP on AJAX

Code Indentation Style

if(condition) {

... Code;

} elseif(condition) {

... Code;

} else {

if(condition) {

... Code;

}

elseif(condition) {

... Code;} else {

... Code;

}

... Code;

}

else {

... Code;

}

Page 23: PHP on AJAX

Code Indentation Style

if(condition) {

... Code;

}

elseif(condition) {

... Code;

for($i=0; $i< $x ; $i++) {

... Code;

}

do {... Code;

}

else {

... Code;

}

do {

... Code;

} while (condition)

while(condition) {

… Code;

}

Page 24: PHP on AJAX

Code Indentation Style

function function_name ([parameter]) {

............;

}

class class_name {

............;

}

Page 25: PHP on AJAX

Basic Concept

� PHP Tag

� Code Indentation Style

� GoPHP5

� Object Oriented Programming in PHP

Page 26: PHP on AJAX

GoPHP5

� Use PHP 5.2+

� Developing robust

� Feature-rich software faster and easier

� Include fast & easy XML support � Include fast & easy XML support

(improved web services)

� Better timezone handling

� Vastly improved database tools

� Input tools make PHP applications more secure

� Other

Page 27: PHP on AJAX

PHP V.Trends

Page 28: PHP on AJAX

MySQL V.Trends

Page 29: PHP on AJAX

Software Development Market War !!!

Page 30: PHP on AJAX

Basic Concept

� PHP Tag

� Code Indentation Style

� GoPHP5

� Object Oriented Programming in PHP

Page 31: PHP on AJAX

OOP (Basic concept)

I thought of objects being like biological cells and/or

individual computers on a network, only able to communicate

with messages

OOP to me means only messaging, local retention and

protection and hiding of state-process, and extreme late-protection and hiding of state-process, and extreme late-

binding of all things. It can be done in Smalltalk and in LISP.

There are possibly other systems in which this is possible, but

I'm not aware of them.

Dr. Alan KayOn the Meaning of “Object-Oriented Programming, E-Mail as of 2003-07-23”

Page 32: PHP on AJAX

OOP (Basic concept)

I thought of objects being like biological cells and/or

individual computers on a network, only able to communicate

with messages

OOP to me means only messaging, local retention and

protection and hiding of state-process, and extreme late-protection and hiding of state-process, and extreme late-

binding of all things. It can be done in Smalltalk and in LISP.

There are possibly other systems in which this is possible, but

I'm not aware of them.

Dr. Alan KayOn the Meaning of “Object-Oriented Programming, E-Mail as of 2003-07-23”

Page 33: PHP on AJAX

OOP (Basic concept)

I thought of objects being like biological cells and/or

individual computers on a network, only able to communicate

with messages

OOP to me means only messaging, local retention and

protection and hiding of state-process, and extreme late-protection and hiding of state-process, and extreme late-

binding of all things. It can be done in Smalltalk and in LISP.

There are possibly other systems in which this is possible, but

I'm not aware of them.

Dr. Alan KayOn the Meaning of “Object-Oriented Programming, E-Mail as of 2003-07-23”

Page 34: PHP on AJAX

OOP (Basic concept)

I thought of objects being like biological cells and/or

individual computers on a network, only able to communicate

with messages

OOP to me means only messaging, local retention and

protection and hiding of state-process, and extreme late-protection and hiding of state-process, and extreme late-

binding of all things. It can be done in Smalltalk and in LISP.

There are possibly other systems in which this is possible, but

I'm not aware of them.

Dr. Alan KayOn the Meaning of “Object-Oriented Programming, E-Mail as of 2003-07-23”

Page 35: PHP on AJAX

OOP (Basic concept)

I thought of objects being like biological cells and/or

individual computers on a network, only able to communicate

with messages

OOP to me means only messaging, local retention and

protection and hiding of state-process, and extreme late-protection and hiding of state-process, and extreme late-

binding of all things. It can be done in Smalltalk and in LISP.

There are possibly other systems in which this is possible, but

I'm not aware of them.

Dr. Alan KayOn the Meaning of “Object-Oriented Programming, E-Mail as of 2003-07-23”

Page 36: PHP on AJAX

OOP (Basic concept)

I thought of objects being like biological cells and/or

individual computers on a network, only able to communicate

with messages

OOP to me means only messaging, local retention and

protection and hiding of state-process, and extreme late-protection and hiding of state-process, and extreme late-

binding of all things. It can be done in Smalltalk and in LISP.

There are possibly other systems in which this is possible, but

I'm not aware of them.

Dr. Alan KayOn the Meaning of “Object-Oriented Programming, E-Mail as of 2003-07-23”

Page 37: PHP on AJAX

OOP (Basic concept)

I thought of objects being like biological cells and/or

individual computers on a network, only able to communicate

with messages

OOP to me means only messaging, local retention and

protection and hiding of state-process, and extreme late-protection and hiding of state-process, and extreme late-

binding of all things. It can be done in Smalltalk and in LISP.

There are possibly other systems in which this is possible, but

I'm not aware of them.

Dr. Alan KayOn the Meaning of “Object-Oriented Programming, E-Mail as of 2003-07-23”

Page 38: PHP on AJAX

On the Meaning by Alan Kay

� Biological cells (Abstract Data in computer to real world)

� Communicate with messages | Messaging (Send & Receive Data)(Send & Receive Data)

� Local retention (Information Hiding and Encapsulation )

� Hiding of state-process (Action and Encapsulation )

� Binding (Properties)

Page 39: PHP on AJAX

On the Meaning Today (Addon)

� Inheritance

� Polymorphism

Why !!!• Enterprise Software Application (Java or .NET)

•Maintenance • Solve Complex Structure

Page 40: PHP on AJAX

OOP (StarCraft II Concept)

Object

Page 41: PHP on AJAX

OOP (StarCraft II Concept)

Message

Page 42: PHP on AJAX

OOP (StarCraft II Concept)

Properties

Page 43: PHP on AJAX

OOP (StarCraft II Concept)

Action

Page 44: PHP on AJAX

OOP (StarCraft II Concept)

Method

Properties Action

Page 45: PHP on AJAX

OOP <?PHP ?>(Basic)

� OOP style like C and Java

� But easy than Java Language � Because PHP is dynamic language no strong typing.

� Developer don’t focus to casting between 2…n type.� Developer don’t focus to casting between 2…n type.

� PHP not pure OOP Language

� Don’t strict structure OOP code

� Not compile to native or byte-code

(PHP is interpret code at run time)

� Less learning curve

Page 46: PHP on AJAX

OOP <?PHP ?> (Prototype Coding)

<?php

class classname {

}

?>

Page 47: PHP on AJAX

OOP <?PHP ?> (Prototype Coding)

<?php

class classname {

function methodname([parameter]) {

………………….;

}

}

?>

Page 48: PHP on AJAX

OOP <?PHP ?> (Example Coding & Flow)

<?php

class human{

function talkAction() {

echo “Hello World !!!”;

Class

echo “Hello World !!!”;

}

}

$Alan = new human();

$Alan->talkAction();

?>

Page 49: PHP on AJAX

OOP <?PHP ?> (Example Coding & Flow)

<?php

class human{

function talkAction() {

echo “Hello World !!!”;

Class

echo “Hello World !!!”;

}

}

$Alan = new human();

$Alan->talkAction();

?>

Reference Variebles

Object

Page 50: PHP on AJAX

OOP <?PHP ?> (Example Coding & Flow)

<?php

class human{

function talkAction() {

echo “Hello World !!!”;

Class

Hello World !!!

echo “Hello World !!!”;

}

}

$Alan = new human();

$Alan->talkAction();

?>

Reference Variebles

Object

talkAction

Page 51: PHP on AJAX

OOP <?PHP ?> (Example Coding & Flow)

<?php

class human{

var $text = “Hello World !!!”;

function talkAction() {

Class

function talkAction() {

echo $this->text;

}

}

$Alan = new human();

$Alan->talkAction();

?>

Page 52: PHP on AJAX

OOP <?PHP ?> (Example Coding & Flow)

<?php

class human{

var $text = “Hello World !!!”;

function talkAction() {

Class

function talkAction() {

echo $this->text;

}

}

$Alan = new human();

$Alan->talkAction();

?>

Reference Variebles

Object

Page 53: PHP on AJAX

OOP <?PHP ?> (Example Coding & Flow)

<?php

class human{

var $text = “Hello World !!!”;

function talkAction() {

Class

Hello World !!!

function talkAction() {

echo $this->text;

}

}

$Alan = new human();

$Alan->talkAction();

?>

Reference Variebles

Object

talkAction

Page 54: PHP on AJAX

Constructors and Destructors

� Call to common method “__construct()” for constructor

� Call to common method “__destruct()” for destructor

Page 55: PHP on AJAX

Visibility & Method Visibility

� public (default) - The resource can be accessed fromany scope.� public $public = ‘Public’;

� protected - The resource can only be accessed from within the class where it is defined and its within the class where it is defined and its descendants.� protected $protected = ‘Protected’;

� private - The resource can only be accessed from within the class where it is defined.� private $private = ‘Private’;

� final - The resource is accessible from any scope, but cannot be overridden in descendant classes.� final $final = ‘Final’;

Page 56: PHP on AJAX

Other OOP Concept <?PHP ?>

� Static Method

� Class Constants

� Interfaces & Abstract Classes

� Determining An Object’s Class

� Exceptions and Throwing Exceptions

� Lazy Loading

� Reflection

Page 57: PHP on AJAX

DEMO CODE

By Source Code (part 1)

Page 58: PHP on AJAX

PHP MANUAL

Page 59: PHP on AJAX
Page 60: PHP on AJAX

Review in Desktop | Web BrowserDesktop | Web Browser

Page 61: PHP on AJAX

PEAR PACKAGE & FRAMEWORKS

Page 62: PHP on AJAX

PEAR ?

� PHP Extension and Application Repository

� Community-driven project governed by its

developers

� PEAR project was founded in 1999 by Stig S. � PEAR project was founded in 1999 by Stig S.

Bakken

� http://pear.php.net/

Page 63: PHP on AJAX

Framework ?

� Reusable design

� Application programming interface and Code

libraries

� Helper scripting program for build software � Helper scripting program for build software

application

� Standard structure

� Top layer on Software Developer Technology

Stack

Page 64: PHP on AJAX

Why ?

� High productivity (Speed++)

� Good Standard Code & Standard Structure

� Smooth team support

� Easy maintenance and long term support� Easy maintenance and long term support

� Don't repeat yourself (DRY)DRY is a core principle of Andy Hunt and Dave Thomas's book The Pragmatic Programmer.

� You Ain't Gonna Need It

Page 65: PHP on AJAX

Example

� Object-relational mapping (ORM)

� Compiled Native Interface (CNI)

� Component-based Architecture

� Automate-based Architecture � Automate-based Architecture

Page 66: PHP on AJAX

Review in Desktop | Web BrowserDesktop | Web Browser

Page 67: PHP on AJAX

HYPERTEXT TRANSFER PROTOCOL (HTTP)

Page 68: PHP on AJAX

What ?

� Application layer in TCP/IP model

� Publish and retrieve HTML hypertext pages

� Development by W3C (World Wide Web Consortium) and the IETF (Internet Consortium) and the IETF (Internet Engineering Task Force)

� Request/Response clients <-> servers

� Accessed by Uniform Resource Identifiers (URIs or, more specifically, URLs)

� HTTP/1.1 (Now)

Page 69: PHP on AJAX

How to ?

� Network port 80 by default

� HTTP/1.1 200 OK

� Request Messages

� Request line (GET /images/logo.gif HTTP/1.1 )(which requests the file logo.gif from the /images directory)

Headers (� Headers (Accept-Language: en)

� An empty line

� An optional message body

� Response Messages

� Status codes (HTTP/1.1 200 OK)

� Content-Type (Content-Type: text/html; charset=UTF-8)

� Date (Date: Sat, 04 Aug 2007 17:57:51 GMT)

� Size (Content-length: 0)

� Connection: close

Page 70: PHP on AJAX

HTTP:Flow

Client

Serverrequest packet

Client response packet

Page 71: PHP on AJAX

HTTP:Header Request/Response

1. GET / HTTP/1.1

2. Host: www.google.co.th

3. User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; th-TH; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

4. Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5

5. Accept-Language: th,en-us;q=0.7,en;q=0.3

6. Accept-Encoding: gzip, deflate

7. Accept-Charset: TIS-620,utf-8;q=0.7,*;q=0.7

8. Keep-Alive: 3009. Connection: keep-alive9. Connection: keep-alive

Page 72: PHP on AJAX

HTTP:Header Request/Response

1. GET / HTTP/1.1

2. Host: www.google.co.th

3. User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; th-TH; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

4. Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5

5. Accept-Language: th,en-us;q=0.7,en;q=0.3

6. Accept-Encoding: gzip, deflate

7. Accept-Charset: TIS-620,utf-8;q=0.7,*;q=0.7

8. Keep-Alive: 3009. Connection: keep-alive9. Connection: keep-alive

Page 73: PHP on AJAX

HTTP:Header Request/Response

1. GET / HTTP/1.1

2. Host: www.google.co.th

3. User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; th-TH; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

4. Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5

5. Accept-Language: th,en-us;q=0.7,en;q=0.3

6. Accept-Encoding: gzip, deflate

7. Accept-Charset: TIS-620,utf-8;q=0.7,*;q=0.7

8. Keep-Alive: 3009. Connection: keep-alive9. Connection: keep-alive

Page 74: PHP on AJAX

HTTP:Header Request/Response

1. GET / HTTP/1.1

2. Host: www.google.co.th

3. User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; th-TH; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

4. Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5

5. Accept-Language: th,en-us;q=0.7,en;q=0.3

6. Accept-Encoding: gzip, deflate

7. Accept-Charset: TIS-620,utf-8;q=0.7,*;q=0.7

8. Keep-Alive: 3009. Connection: keep-alive9. Connection: keep-alive

Page 75: PHP on AJAX

HTTP:Header Request/Response

1. GET / HTTP/1.1

2. Host: www.google.co.th

3. User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; th-TH; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

4. Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5

5. Accept-Language: th,en-us;q=0.7,en;q=0.3

6. Accept-Encoding: gzip, deflate

7. Accept-Charset: TIS-620,utf-8;q=0.7,*;q=0.7

8. Keep-Alive: 3009. Connection: keep-alive9. Connection: keep-alive

1. HTTP/1.1 200 OK

2. Content-Type: text/html; charset=UTF-8

3. Content-Encoding: gzip

4. Server: GWS/2.1

5. Content-Length: 17196. Date: Sat, 04 Aug 2007 17:57:47 GMT

Page 76: PHP on AJAX

HTTP:Request methods

� HEAD

� GET

� POSTStandard Method Form

� PUT

� DELETE

� TRACE

� OPTIONS

� CONNECT

Page 77: PHP on AJAX

HTTP:Header Request GET

Page 78: PHP on AJAX

HTTP:Header Request GET

Page 79: PHP on AJAX

HTTP:Header Request GET1. GET /search?hl=th&q=google&btnG=%E0%B8%84%E0%B9%89%E0%B8%99%E0%B8%AB%E0%B8%B2%E0%B9%82%E0%B8%94%E0%B8

%A2+Google&meta= HTTP/1.1

2. Host: www.google.co.th

3. User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; th-TH; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

4. Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*; q=0.5

5. Accept-Language: th,en-us;q=0.7,en;q=0.3

6. Accept-Encoding: gzip, deflate

7. Accept-Charset: TIS-620,utf-8;q=0.7,*;q=0.7

8. Keep-Alive: 300

9. Referer: http://www.google.co.th/search?hl=th&q=google&btnG=%E0%B8%84%E0%B9%89%E0%B8%99%E0%B8%AB%E0%B8%B2%E0

%B9%82%E0%B8%94%E0%B8%A2+Google&meta=

10. Cookie: PREF=ID=5c76d15b0c0ba5d2:LD=th:NR=100:NW=1:TM=1179429690:LM=1179487113:S=H-gIMFJah r_JoHOV11. Connection: keep-alive11. Connection: keep-alive

Page 80: PHP on AJAX

HTTP:Header Request POST

Page 81: PHP on AJAX

HTTP:Header Request POST1. POST /smf/index.php?action=login2 HTTP/1.1

2. Host: changkhui.com

3. User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; th-TH; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

4. Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png, */*;q=0.5

5. Accept-Language: th,en-us;q=0.7,en;q=0.3

6. Accept-Encoding: gzip, deflate

7. Accept-Charset: TIS-620,utf-8;q=0.7,*;q=0.7

8. Keep-Alive: 300

9. Referer: http://changkhui.com/smf/index.php?action=login2

10. Cookie: __utmz=180216950.1179469444.1.1.utmccn=(direct)|utmcsr=(direct)|utmcmd=(none); SMFCookie1

0=a%3A4%3A%7Bi%3A0%3Bs%3A2%3A%2221%22%3Bi%3A1%3Bs%3A40%3A%2262a1bc3b3137e59a7e3cc5e815d501dc5021

a380%22%3Bi%3A2%3Bi%3A1371322526%3Bi%3A3%3Bi%3A0%3B%7D; __utma=18021 a380%22%3Bi%3A2%3Bi%3A1371322526%3Bi%3A3%3Bi%3A0%3B%7D; __utma=18021

6950.1081300034.1179469444.1186115727.1186330468.38

11. Content-Type: application/x-www-form-urlencoded

12. Content-Length: 98

13. Connection: keep-alive

14. Posting 98 bytes...

15. user=Ford+AntiTrust

16. passwrd=********

17. cookielength=-1

18. hash_passwrd=db5ec25d1b43f3366606caf2ed4a6ec4fe5a8bcc

Page 82: PHP on AJAX

HTTP:Header Request POST1. POST /smf/index.php?action=login2 HTTP/1.1

2. Host: changkhui.com

3. User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; th-TH; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

4. Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png, */*;q=0.5

5. Accept-Language: th,en-us;q=0.7,en;q=0.3

6. Accept-Encoding: gzip, deflate

7. Accept-Charset: TIS-620,utf-8;q=0.7,*;q=0.7

8. Keep-Alive: 300

9. Referer: http://changkhui.com/smf/index.php?action=login2

10. Cookie: __utmz=180216950.1179469444.1.1.utmccn=(direct)|utmcsr=(direct)|utmcmd=(none); SMFCookie1

0=a%3A4%3A%7Bi%3A0%3Bs%3A2%3A%2221%22%3Bi%3A1%3Bs%3A40%3A%2262a1bc3b3137e59a7e3cc5e815d501dc5021

a380%22%3Bi%3A2%3Bi%3A1371322526%3Bi%3A3%3Bi%3A0%3B%7D; __utma=18021 a380%22%3Bi%3A2%3Bi%3A1371322526%3Bi%3A3%3Bi%3A0%3B%7D; __utma=18021

6950.1081300034.1179469444.1186115727.1186330468.38

11. Content-Type: application/x-www-form-urlencoded

12. Content-Length: 98

13. Connection: keep-alive

14. Posting 98 bytes...

15. user=Ford+AntiTrust

16. passwrd=********

17. cookielength=-1

18. hash_passwrd=db5ec25d1b43f3366606caf2ed4a6ec4fe5a8bcc

Page 83: PHP on AJAX

ONE MORE THINGS

Page 84: PHP on AJAX

One More Things

� path file

� echo VS. print

� include VS. require (_once)

� error level

� page encode | data encode

Page 85: PHP on AJAX

path file

� Always use / as delimiter and not \, even under windows.� $upImage = "C:\\Images\\books\\book11.jpg";

� $upImage = "C:/Images/books/book11.jpg";

� Linux like all unix like systems does not know drive � Linux like all unix like systems does not know drive letters like c: or d: or so All files are relative to the root your directory tree (i.e. /)

� Example� if your include_path is “.”, current working directory is

/www/, you included “include/a.php” and there is include "b.php" in that file, “b.php” is first looked in “/www/” and then in “/www/include/”. If filename begins with “./” or “../”, it is looked only in include_path (.) relative to the current working directory.

Page 86: PHP on AJAX

echo VS. print

� echo can take multiple expressions

(as in "echo $string1,$string2,$string3;")

� print behaves like a function

(you can do “$ret = print "Hello World";”)(you can do “$ret = print "Hello World";”)

� print returns its success as a boolean

� If you never check for anything use echo

because it is faster than print.

� If you check for return values use print.

Page 87: PHP on AJAX

include VS. require (once)

� require - if you want missing file to halt processing of the

script and show error message.

� include - if you want missing file to continue processing of

the script and show warning message.

� In serious case, import other file use require.

� Suffix-name in function include and require is “_once” do

same operation with include and require but the code

from a file has already been included, it will not be included again.

Page 88: PHP on AJAX

error level

Page 89: PHP on AJAX

page encode | data encode

� Unicode VS. ASCII

� Unicode -> Multi-language support

� ASCII -> Save drive space

� Unicode� Unicode

� UTF-7, UTF-8, UTF-16/UCS-2 and UTF-32/UCS-4

� CESU-8

� UTF-EBCDIC

� SCSU

� Punycode (IDN/IDNA)

� GB 18030

Page 90: PHP on AJAX

Why ? UTF-8

� AJAX used UTF-8 by Standard

(same XML used UTF-8 by Standard)

� Supported all major language.

� Communicated to any AJAX App’ & Web Services by easy.� Communicated to any AJAX App’ & Web Services by easy.

(Don’t convert character from ASCII to Unicode)

� UTF-8 used disk space from 1 byte to 4 bytes/character

(Used disk space followed by character table)

� In Thai language character stored 3bytes/character.

Page 91: PHP on AJAX

Unicode Language Support

Arabic

Armenian

Bengali

Braille embossing patterns

Canadian Aboriginal Syllabics

Cherokee

Coptic

Cyrillic

Khmer (Cambodian)

Kannada

Lao

Latin

Limbu

Malayalam

Mongolian

Myanmar (Burmese)Cyrillic

Devanagari

Ethiopic

Georgian

Greek

Gujarati

Gurmukhi (Punjabi)

Han (Kanji, Hanja, Hanzi)

Hangul (Korean)

Hebrew

Hiragana and Katakana (Japanese)

International Phonetic Alphabet (IPA)

Myanmar (Burmese)

N'Ko

Oriya

Osmanya

Siloti Nagri

Syriac

Tamil

Telugu

Thai

Tibetan

Tifinagh

YiZhuyin (Bopomofo)

Page 92: PHP on AJAX

Unicode Language Support

Arabic

Armenian

Bengali

Braille embossing patterns

Canadian Aboriginal Syllabics

Cherokee

Coptic

Cyrillic

Khmer (Cambodian)

Kannada

Lao

Latin

Limbu

Malayalam

Mongolian

Myanmar (Burmese)

Cuneiform

Deseret

Linear B

Kharoshti

Ogham

Old Italic (Etruscan)

Old Persian

PhoenicianCyrillic

Devanagari

Ethiopic

Georgian

Greek

Gujarati

Gurmukhi (Punjabi)

Han (Kanji, Hanja, Hanzi)

Hangul (Korean)

Hebrew

Hiragana and Katakana (Japanese)

International Phonetic Alphabet (IPA)

Myanmar (Burmese)

N'Ko

Oriya

Osmanya

Siloti Nagri

Syriac

Tamil

Telugu

Thai

Tibetan

Tifinagh

YiZhuyin (Bopomofo)

Phoenician

Runic

Shavian

Ugaritic

Page 93: PHP on AJAX

Selected encode in Edit+

Page 94: PHP on AJAX

XHTML, DOM, CSS AND JAVASCRIPT IN BASIC

Page 95: PHP on AJAX

Forward to XHTML

SGML

HTML

XML

XHTML

SVG

WML

Page 96: PHP on AJAX

XHTML DOCTYPE = XHTML DTD

� XHTML 1.0 Strict� <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

� XHTML 1.0 Transitional� <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" � <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

� XHTML 1.0 Frameset� <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset //EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

� XHTML 1.1� <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Page 97: PHP on AJAX

XHTML DOCTYPE = XHTML DTD

� XHTML 1.0 Strict� <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

� XHTML 1.0 Transitional� <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" � <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

� XHTML 1.0 Frameset� <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset //EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

� XHTML 1.1� <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Page 98: PHP on AJAX

HTML | n Source to n Destinations

HTML|PCData

HTML|Mobile

HTML|Printer

Data

Data

Page 99: PHP on AJAX

CSS (Cascading Style Sheets)

� Stylesheet Language

(Describe the presentation of a document

written in HTML or XML)

� Avoid duplication� Avoid duplication

� Make maintenance easier

� Use content with different styles for different purposes (PC, Mobile or Printer)

Page 100: PHP on AJAX

XHTML & CSS | 1 Source to n Destinations

CSS|Mobile

CSS|PC

CSS|Mobile

CSS|Printer

XHTMLData

Page 101: PHP on AJAX

DOM (Document Object Model)

� Platform- and language-independent standard

object model for representing HTML or XML

and related formats

� Accessed repeatedly or out of sequence order� Accessed repeatedly or out of sequence order

Page 102: PHP on AJAX

Hierarchy of Objects in the DOM

http://en.wikipedia.org/wiki/Image:DocumentObjectModel.png

Page 103: PHP on AJAX

Example DOM @ Google

Page 104: PHP on AJAX

CSS | coding style

� Inline<html>

<head>

</head>

<body>

<p style=”font-size: 0.9em; width: 200px;

border: solid 1px #000000”>Black Border</p> border: solid 1px #000000”>Black Border</p>

</body></html>

Page 105: PHP on AJAX

CSS | coding style

� Inline

� Internal

<html>

<head>

<style type="text/css">

P {

font-size: 0.9em;

width: 200px; width: 200px;

border: solid 1px #000000;

}

</style>

</head>

<body>

<p>Black Border</p>

</body></html>

Page 106: PHP on AJAX

CSS | coding style

� Inline

� Internal

� External

<html>

<head>

<link rel="stylesheet" href="externalcss.css"

type="text/css" />

</head></head>

<body>

<p>Black Border</p>

</body></html>

P {

font-size: 0.9em;

width: 200px;

border: solid 1px #000000;}

Page 107: PHP on AJAX

How to creating a stylesheet in Basic

style.css index.html

strong {color: red;} <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN” "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Sample document</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<p>

<strong>C</strong>ascading

<strong>S</strong>tyle

<strong>S</strong>heets

</p>

</body>

</html>

Cascading Style Sheets

Page 108: PHP on AJAX

CSS | selector { property: value;}

Ref : http://www.thaicss.com/main/css_selector_property_value.html

Page 109: PHP on AJAX

CSS | selector { property: value;}

Ref : http://www.thaicss.com/main/css_selector_property_value.html

Page 110: PHP on AJAX

CSS | selector { property: value;}

Ref : http://www.thaicss.com/main/css_selector_property_value.html

Page 111: PHP on AJAX

DEMO CODE

By Source Code (part 2)

Page 112: PHP on AJAX

JavaScript

� ECMAScript standard by Netscape Communications

Corporation (Mozilla Foundation)

� JavaScript is not Java (But JavaScript registered trademark

of Sun Microsystem) or JScript by Microsoft

� Object Oriented Programming

� Dynamic language, weakly typed, prototype-based

language

� Syntax like Java

Page 113: PHP on AJAX

Example

Code in HTML

x = 0; // A global variable

var y = 'Hello!'; // Another global

function f(){

<script type="text/javascript">

<!--

……. Code;function f(){

var z = 'foxes'; // A local variable

twenty = 20; // Global var

return x; // use x from global

}

// The value of z is no longer available

……. Code;

//-->

</script>

Page 114: PHP on AJAX

Example

Code in HTML

x = 0; // A global variable

var y = 'Hello!'; // Another global

function f(){

<script type="text/javascript">

<!--

……. Code;

<script type="text/javascript">

<!--

x = 0; // A global variable

var y = 'Hello!'; // Another global variable

function f(){ function f(){

var z = 'foxes'; // A local variable

twenty = 20; // Global var

return x; // use x from global

}

// The value of z is no longer available

……. Code;

//-->

</script>

function f(){

var z = 'foxes'; // A local variable

twenty = 20; // Global because keyword var is not used

return x; // We can use x here because it is global

} // The value of z is no longer available

//-->

alert(x);

alert(y);

alert(f());

</script>

Page 115: PHP on AJAX

tag JavaScript Event in XHTML (1)

� Window Events

� onload, Run when a document loads

� onunload, Run when a document unloads

� Form Element Events

� onchange, Run when the element changes

� onsubmit , Run when the form is submitted

� onreset, Run when the form is reset

� onselect, Run when the element is selected

� onblur, Run when the element loses focus

� onfocus, Run when the element gets focus

Page 116: PHP on AJAX

tag JavaScript Event in XHTML (2)

� Keyboard Events� onkeydown, Do when key is pressed

� onkeypress, Do when key is pressed and released

� onkeyup, Do when key is released

� Mouse Events� onclick, Do on a mouse click� onclick, Do on a mouse click

� ondblclick, Do on a mouse doubleclick

� onmousedown, Do when mouse button is pressed

� onmousemove, Do when mouse pointer moves

� onmouseover, Do when mouse pointer moves over an element

� onmouseout, Do when mouse pointer moves out of an element� onmouseup, Do when mouse button is released

Page 117: PHP on AJAX

Example

<script language="JavaScript“>

function change(text){

document.getElementById('textshow').innerHTML = text;

}

</script></script>

<div id="textshow">No Click</div><br />

<a href="#" onclick="change(‘<h1>H1</h1>');">H1 Show</a><br />

Page 118: PHP on AJAX

innerHTML & tag attribute

� document.getElementById('textshow').innerHTML = “data”;

<div id=“textshow”>……..</div>

� document.getElementById(textbox ').value= data;<input type="text" id="textbox" value=“…….”/>

Page 119: PHP on AJAX

DEMO CODE

By Source Code (part 3)

Page 120: PHP on AJAX

XMLHttpRequest (XHR) | History

� XMLHttpRequest concept was originally developed by Microsoft as part of Outlook Web Access 2000.

� The Microsoft implementation is called XMLHTTP and support since Internet Explorer 5.+

� The Mozilla project incorporated the first compatible native implementation of XMLHttpRequest in Mozilla 1.0 in 2002 and support Apple since Safari 1.2, Konqueror, Opera Software since Opera 8.0 and iCab since 3.0b352.Konqueror, Opera Software since Opera 8.0 and iCab since 3.0b352.

� The World Wide Web Consortium published a Working Draft specification for the XMLHttpRequest object's API on 5 April 2006

� API that can be used by JavaScript

� Transfer XML and other text data to and from a web server using HTTP

� XMLHttpRequest can be used to fetch data in other formats such as HTML, JSON or plain text.

� XMLHttpRequest include Google's Gmail service, Meebo, Google Maps, Windows Live's Virtual Earth, the MapQuest dynamic map interface, Facebook and many others.

http://en.wikipedia.org/wiki/Xmlhttprequest

Page 121: PHP on AJAX

XMLHttpRequest.Method

http://en.wikipedia.org/wiki/Xmlhttprequest

Page 122: PHP on AJAX

XMLHttpRequest.Property

http://en.wikipedia.org/wiki/Xmlhttprequest

Page 123: PHP on AJAX

XMLHTTP VS. XMLHttpRequest

� XMLHTTP is implementation by Microsoft

� XMLHttpRequest is implementation by Mozilla project

incorporated (Mozilla Foundation)

� XMLHttpRequest and XMLHTTP object in a JavaScript � XMLHttpRequest and XMLHTTP object in a JavaScript

wrapper.

Page 124: PHP on AJAX

AJAX | Flow (Details)

https://mabon.dev.java.net/doc/introduction.html

Page 125: PHP on AJAX

How to | new XMLHTTP Object

function newXmlHttp(){

var xmlhttp = false;

try{

xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch(e){

try{try{

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}catch(e){ xmlhttp = false; }

}

if(!xmlhttp && document.createElement){

xmlhttp = new XMLHttpRequest();

}

return xmlhttp;

}

Page 126: PHP on AJAX

Example | Using XMLHTTP Object

function num2text(){

var id = document.getElementById('id').value;

var url = "num2txt.php?id="+id;

xmlhttp = newXmlHttp();xmlhttp = newXmlHttp();

xmlhttp.open("GET", url, false);

xmlhttp.send(null);

document.getElementById("numtxt").innerHTML =

xmlhttp.responseText;

}

Page 127: PHP on AJAX

DEMO CODE

By Source Code (part 4)

Page 128: PHP on AJAX

XAJAX PHP CLASS LIBRARY

XAJAX Frameworks

Page 129: PHP on AJAX

XAJAX PHP class library | Frameworks

� Open source PHP class library implementation of AJAX

� XAJAX is designed to allow the programmer to have no

prior knowledge of JavaScript.

� System Requirements� System Requirements

� Server-side xajax runs on any PHP 4.3.x and PHP 5.x

Apache or IIS server.

� Client-side xajax runs on (but is not limited to) Support Internet Explorer 6+, Firefox, Opera 8.0+.

Page 130: PHP on AJAX

How to | Add XAJAX to PHP App (1)

1. Include the xajax class library.require_once("xajax_core/xajax.inc.php");

2. Instantiate the xajax object$xajax = new xajax();

3. Register the names of the PHP functions you want to be able to call through xajax.$xajax->registerFunction(“myFunction”);

4. Write the PHP functions you have registered and use the xajaxResponse object to return XML commands from them

Page 131: PHP on AJAX

How to | Add XAJAX to PHP App (2)

function myFunction($arg)

{

// do some stuff based on $arg like query data from a database and

// put it into a variable like $newContent

$respData = "Value of \$arg: ".$arg;

// Instantiate the xajaxResponse object// Instantiate the xajaxResponse object

$objResponse = new xajaxResponse();

// add a command to the response to assign the innerHTML attribute of

// the element with id="SomeElementId" to whatever the new content is

$objResponse->assign(“HTMLElementId”,”innerHTML”, $respData);

//return the xajaxResponse object

return $objResponse;

}

Page 132: PHP on AJAX

How to | Add XAJAX to PHP App (3)

5. Before your script sends any output, have xajax handle any requests.$xajax->processRequest();

6. Between your tags, tell xajax to generate the 6. Between your tags, tell xajax to generate the necessary JavaScript.<?php $xajax->printJavascript(); ?>

7. Call the function from a JavaScript event or function in your application.<div id="HTMLElementId"></div> <button onclick="xajax_myFunction('It worked!');“>

Page 133: PHP on AJAX

DEMO CODE

By Source Code (part 5)

Page 134: PHP on AJAX

<?PHP ?> ON AJAX | FAQ

MSN/E-Mail : [email protected]