php on ajax

Post on 10-May-2015

2.935 Views

Category:

Technology

5 Downloads

Preview:

Click to see full reader

TRANSCRIPT

By Ford AntiTrust

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

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)

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

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

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

AJAX CONCEPT

Classic VS. AJAX Request/Response

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

Classic VS. AJAX Request/Response

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

Classic VS. AJAX Request/Response

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

Classic VS. AJAX Data Flow

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

BACK TO BASIC

PHP BASIC CONCEPT

PHP Basic Concept

� PHP Tag

� Code Indentation Style

� GoPHP5

� Object Oriented Programming in PHP

PHP Tag

<?php

… code

?>

<script language=“php”>

… code

</script>

XML Style

<?

… code

?>

<?= $var ?>

<%

… code

%>

PHP Tag

<?php

… code

?>

<script language=“php”>

… code

</script>

Script Style

<?

… code

?>

<?= $var ?>

<%

… code

%>

PHP Tag

<?php

… code

?>

<script language=“php”>

… code

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

<?

… code

?>

<?= $var ?>

<%

… code

%>

Short Style

PHP Tag

<?php

… code

?>

<script language=“php”>

… code

</script>

<?

… code

?>

<?= $var ?>

<%

… code

%>

ASP Style

PHP Tag

<?php

… code

?>

<script language=“php”>

… code

</script>

XML Style

<?

… code

?>

<?= $var ?>

<%

… code

%>

Basic Concept

� PHP Tag

� Code Indentation Style

� GoPHP5

� Object Oriented Programming in PHP

Code Indentation Style

� Use Tab to Space

� 1 Tab = 4 Space

� Use 1 Tab between two braces in Code Block

{

………}

Code Indentation Style

if(condition) {

... Code;

} elseif(condition) {

... Code;

} else {

if(condition) {

... Code;

}

elseif(condition) {

... Code;} else {

... Code;

}

... Code;

}

else {

... Code;

}

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;

}

Code Indentation Style

function function_name ([parameter]) {

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

}

class class_name {

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

}

Basic Concept

� PHP Tag

� Code Indentation Style

� GoPHP5

� Object Oriented Programming in PHP

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

PHP V.Trends

MySQL V.Trends

Software Development Market War !!!

Basic Concept

� PHP Tag

� Code Indentation Style

� GoPHP5

� Object Oriented Programming in PHP

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”

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”

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”

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”

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”

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”

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”

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)

On the Meaning Today (Addon)

� Inheritance

� Polymorphism

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

•Maintenance • Solve Complex Structure

OOP (StarCraft II Concept)

Object

OOP (StarCraft II Concept)

Message

OOP (StarCraft II Concept)

Properties

OOP (StarCraft II Concept)

Action

OOP (StarCraft II Concept)

Method

Properties Action

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

OOP <?PHP ?> (Prototype Coding)

<?php

class classname {

}

?>

OOP <?PHP ?> (Prototype Coding)

<?php

class classname {

function methodname([parameter]) {

………………….;

}

}

?>

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

<?php

class human{

function talkAction() {

echo “Hello World !!!”;

Class

echo “Hello World !!!”;

}

}

$Alan = new human();

$Alan->talkAction();

?>

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

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

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();

?>

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

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

Constructors and Destructors

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

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

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’;

Other OOP Concept <?PHP ?>

� Static Method

� Class Constants

� Interfaces & Abstract Classes

� Determining An Object’s Class

� Exceptions and Throwing Exceptions

� Lazy Loading

� Reflection

DEMO CODE

By Source Code (part 1)

PHP MANUAL

Review in Desktop | Web BrowserDesktop | Web Browser

PEAR PACKAGE & FRAMEWORKS

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/

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

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

Example

� Object-relational mapping (ORM)

� Compiled Native Interface (CNI)

� Component-based Architecture

� Automate-based Architecture � Automate-based Architecture

Review in Desktop | Web BrowserDesktop | Web Browser

HYPERTEXT TRANSFER PROTOCOL (HTTP)

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)

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

HTTP:Flow

Client

Serverrequest packet

Client response packet

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

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

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

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

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

HTTP:Request methods

� HEAD

� GET

� POSTStandard Method Form

� PUT

� DELETE

� TRACE

� OPTIONS

� CONNECT

HTTP:Header Request GET

HTTP:Header Request GET

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

HTTP:Header Request POST

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

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

ONE MORE THINGS

One More Things

� path file

� echo VS. print

� include VS. require (_once)

� error level

� page encode | data encode

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.

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.

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.

error level

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

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.

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)

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

Selected encode in Edit+

XHTML, DOM, CSS AND JAVASCRIPT IN BASIC

Forward to XHTML

SGML

HTML

XML

XHTML

SVG

WML

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

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

HTML | n Source to n Destinations

HTML|PCData

HTML|Mobile

HTML|Printer

Data

Data

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)

XHTML & CSS | 1 Source to n Destinations

CSS|Mobile

CSS|PC

CSS|Mobile

CSS|Printer

XHTMLData

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

Hierarchy of Objects in the DOM

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

Example DOM @ Google

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>

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>

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;}

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

CSS | selector { property: value;}

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

CSS | selector { property: value;}

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

CSS | selector { property: value;}

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

DEMO CODE

By Source Code (part 2)

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

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>

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>

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

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

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

innerHTML & tag attribute

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

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

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

DEMO CODE

By Source Code (part 3)

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

XMLHttpRequest.Method

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

XMLHttpRequest.Property

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

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.

AJAX | Flow (Details)

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

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;

}

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;

}

DEMO CODE

By Source Code (part 4)

XAJAX PHP CLASS LIBRARY

XAJAX Frameworks

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

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

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;

}

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!');“>

DEMO CODE

By Source Code (part 5)

<?PHP ?> ON AJAX | FAQ

MSN/E-Mail : annop@thaicyberpoint.com

top related