PHP on AJAX
-
Upload
ford-antitrust -
Category
Technology
-
view
2.935 -
download
5
Transcript of PHP on AJAX
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 : [email protected]