Panduan Lengkap PHP Jquery Ajax

http://blog.codingwear.
com
PHP Ajax Javascript jQuery Tutorial Indonesia
1
http://blog.codingwear.com
www.coding .com
2
!"# $ %
& '
( )
*
) (+
, -. ('
/
!"#
+
0 '
0 1
0 2 1
0 3& /
34 5 4 0
" 6"# 0 7
" 8 0 +)
9 6 2 8 :8 ; +'
'/
< 54 0 '
= >? >@ # ')
3
4
!
"
# ! # # $ !
# ! % % !
$ $ ! $& &' # #
% ( $ # #
( # )
# % $ # # # # (
#$ ! # )
& $ ! #% # # % #
& % # $ ! # # #
( $ * ( ! #
+ # # %% # #
• # # , )% )# # ) *)
# # #
• ! #% # # # - #
) #% # #
• & $ & ! $ # )% (
# # $
• &' $ &%! ' ! % $ # # . #% ! / # #
# # #
' # 0 1 $ #
2 % # ! ##
#% (
<script language="javascript" type="text/javascript">

var xmlHttp = new XMLHttpRequest();
</script>
5
3 # # 4# ) #
! % $ # 5% & # # % %
6 7 # 4 # )% $ % $#
# *% 8 #
# % % $ # ( # # #
*)
! " " #
& -$ ! # #% # ! % #
!
& % # $ ( 1 # $
# % ( * % ! # 3 #
+ # # # # #
$# ! # # # #
+ # $ ( #% ! .
/ # # %
## $ # $ # #
6
8% ! # # $ # # $
$ ! 92 # #
! % #* # # $
$ % )$
# ) # #% $ # # 2
#
' # % %( .2 :- % $5 )%-$ ; % $
' $ ) /
3 # % # # % %(
#
if (window.XMLHttpRequest)
{
// kode untuk IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// kode untuk IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
$ % &
'# $ * $ # !% % # $
! % # - ! #% #
8 # - # # #% # # $
% ( # %
$ $ !% % # # #
#
!% % # # # % # ##
< # & # ( <
-- Table structure for table `tabelDataKaryawan`

--
CREATE TABLE `tabeldatakaryawan` (

`NIP` int(10) NOT NULL,
`Nama` varchar(50) NOT NULL,
Èmail` varchar(50) NOT NULL,
Àlamat` tinytext NOT NULL,
PRIMARY KEY (`NIP`)
)
7
+ # & 8 (
'() ' * " "

==>?@A & B BC) !% ; % "" $ $
==>?@D E F C) !% : E% "?$ $
=>A@?" + % % C) !% + #<0 !
# # # $ # !
% * %( %-$ # # # # # < #
# ( * % #
+ ! "
<html>
<head>
<script>
var ajaxku;
function ambildata(nip){
ajaxku = buatajax();
var url="ambildata.php";
url=url+"?q="+nip;
url=url+"&sid="+Math.random();
ajaxku.onreadystatechange=stateChanged;
ajaxku.open("GET",url,true);
ajaxku.send(null);
}
function buatajax(){
if (window.XMLHttpRequest){
}
if (window.ActiveXObject){
}
return null;
}
function stateChanged(){
var data;
if (ajaxku.readyState==4){
data=ajaxku.responseText;
if(data.length>0){
document.getElementById("alamat").value = data
}else{
document.getElementById("alamat").value = "";
}
}
}
</script>
</head>
<body>
Nama :
8
<select size="1" name="karyawan" id="karyawan"

onchange=ambildata(this.value)>
<option selected>--Pilih Karyawan--</option>
<option value="889456">Desrizal</option>
<option value="889457">Nurmi Yulita</option>
<option value="896543">Budi Hartono</option>
</select>
</p>
<p>
Alamat : <textarea rows="4" id="alamat" name="alamat"
cols="42"></textarea>
</p>
Pada contoh berikut anda akan memilih nama dan mengambil data alamat di
database<br>
berdasarkan nama tersebut dan menampilkannya di halaman ini tanpa harus
me-reload<br>
keseluruhan halaman
</body>
</html>
#% $ #% #
# # # # %
" $ # # #% #) "
, "
<?php
mysql_connect("localhost","root","");
mysql_select_db("test");
$nip = $_GET['q'];
if($nip){
$query = mysql_query("select alamat from tabelDataKaryawan where
nip=$nip");
while($d = mysql_fetch_array($query)){
echo $d['alamat'];
}
}
?>
+ # ! "
9
- " ! " !
;% % * %( %- $ # % % #
+ # # #% ! "
<body>
Nama :
<select size="1" name="karyawan" id="karyawan"
onchange=ambildata(this.value)>
<option selected>--Pilih Karyawan--</option>
<option value="889456">Desrizal</option>
<option value="889457">Nurmi Yulita</option>
<option value="896543">Budi Hartono</option>
</select>
</p>
<p>
Alamat : <textarea rows="4" id="alamat" name="alamat"
cols="42"></textarea>
8% # )% $ # # % * %( %- *
# ( #%
,
!% % %-$ ! % % $ # # # )
! $ #% ) #
% %
8 $ # #% !
function ambildata(nip){
ajaxku = buatajax();
url=url+"?q="+nip;
url=url+"&sid="+Math.random();
ajaxku.onreadystatechange=stateChanged;
ajaxku.send(null);
}
5 ) # # # # ( !% %-
10
• ! " # % # !
# ) " ) #% #
% # .
• # # $ $" 8 * ) # #
• # # %$& $% , # ## $ % * %( %- #
1
• # # %$' $% # " # # # % #
$ # ! # ! ! )
! #
• ! # ( ) ,
% $ # # ) )
• ! $*+,$" # " # , # % #
% G: 30 # # # ! %
• ! " 1 #
5 # 0 1 $
#% % # 0 1 # %(
var data;
if(data.length>0){
document.getElementById("alamat").value = data
}else{
document.getElementById("alamat").value = "";
}
}
}
• 5 ) # # %
$ !% #% ! # ( )
• ! # (- ., # % ? .?
% #% /$ # # # 4%
# % % . /
# # % # % " #%
/ 01 123
• + 4(5 $ $ , %
# " $# ## # #
6 7
# #% "
• # # #% # # <
• 1 % G: $ # - 1
% G: $ ## # /
11
• # # 1 #
• # % #
12
0 1 ' !
13
+ # # % #
% #$ # # % * % % %
)
+ # % % #
) $ .
!% ! %
# ) # % #
% +%
% -
#%
-
) 1
%
# * *%
+ # : % # 6
*& $ .
% ! * # 1 #%
% % # # # % %
+ # % % # 6
$ .
% *! !
0 % # ) #% %
0 % # % ) ##
% * % $ 30 $ 1 #
#
1 # %
0 1 # # 1
14
%
% #
object.readyState == nState
'"
E $
0 (Uninitialized)
' # $ % ! ! $ #
. % /
1 (Open)
' # $ %
2 (Sent)
% - # /
3 (Receiving)
+ - # /
4 (Loaded)
- # /
) *% $ # #
# % / - # #
1 # # # / - # #
# % $# % ! # 8
. HH ?/ % # # 2 :- % D
0 1
var data;
}
}
15
% #
object.status == nStatus
'"
' $ .
II ;%
I ( ! % %!%
II '8
I ;
I !!
I" E% * % 2 )% %
I? E% ;%
I@ 0 ;%
IA ;%
"II ; %!
"I %
"I 5%
"I" '
"I? E% % )
"I@ 3 %-
"ID % 0 !
?II + 0 1
?I 3 % B
?I 0 1
?I" 5%
?I? E% 5%
?I@ % E% %(
?IA E% !!
?ID %- ! % 0 1
?I= 0 1 %
16
?I> ;% ) !
? I G%
? 0 1
? !% % 5
? " 0 1 : %%
? ? 0 1 *302 %% %
? @ 3 %
? A 0 1 0 E%
? D :- ! % 5
@II 2 : %
@I E% 2
@I + G (
@I" ! 3
@I? G ( %
@I@ J % E% %
) *% $ # # ) # # , %( 2
:- % D
0 1
if (ajaxku.status == 401)
alert('Access denied.');
else
alert(ajaxku.responseText);
}
% #
object.timeout = v
'"
+ ( !% %( %
% ) 4( $ ) I
17
# % % *% $ - # # 8 *
*% ( # % 1 # % *
# # % %
# * *% *% (% #
# # !#$ (% # !# # ! # # #
var ajaxku;
ajaxku = new XMLHttpRequest();
ajaxku.open("GET", url, true);
ajaxku.timeout = 10000;
ajaxku.ontimeout = timeoutPeringatan;
ajaxku.send(null);
. *&
% #
7 # ( 8 9( 9
. # # , %( 2 :- % D
var ajaxku = new XMLHttpRequest();

ajaxku.onreadystatechange = reportStatus;
ajaxku.open("GET", "http://localhost/test.xml", true);
ajaxku.send();
function reportStatus()
{
if (ajaxku.readyState == 4 /* complete */) {
if (ajaxku.status == 200 || ajaxku.status == 304) {
alert('Transfer complete.');
}
else {// terjadi error
}
}
}
18
*&
% #
7 ! 8 9( 9
# % ( "
8 # $ % % - # # # !%
* # # %
<script type="text/javascript">
function timeo()
{
alert("XDR ontimeout");
}
...
ajaxku.ontimeout = timeo;
; ! 1
% #
XMLHttpRequest.abort()
# # , %( 2 :- % D
% *! ! * % 0 1 #%
% # % # . ! *! ! $
% * # I. " /
* % $ 30 $ 1 # #
% #
object.open(sMethod, sUrl [, bAsync] [, sUser] [, sPassword])
19
, % # % # # # #% #
G: $ ' $ : & #! *
# , % # % 30 * (
% 4 !
$ ' % 2 # #% ! % % .
# $ # % $
## $ # $ # # /$ 3 " #
% ! % % # # # # )
# # 3 " $' $ , %(
2 :- % # # % # # %
# ' % 2 # # # % #
% ' % 2 # # (% # % #
+ # % ,% , , & % J %
., & J/ * %
J 4 & ) 2 .05;* & ) 2 , & J .05;* 5 ! %

% A A/ @ =/
G: , & J 0 1 302
' , & J %
: & , & J 0 1 302 ( % %

3 , & J % )% 302
&: : : , & J & )% 302

'J: , & J % 302 % % ( %! %
0' 52E& , & J 0 1 302 %

0' ; , & J 3 % & 302
%
8;' , & J ; !% ! % 302
;' F , & J ; !% %) 302
';8 , & J ; %!#
3E ';8 , & J 0 % %!#
20
' 2'E , & J 0 1 302 ' %
1 # %
% #
object.send( [varBody])
! & ' % 2 # % 1 #
% $ ! $
% %
! & % $ %) $ % # &%! ' !

% .&' /
# # 1
% #
object.setRequestHeader(sName, sValue)
' , % #
( , % #
var ajaxku = new XMLHttpRequest();

ajaxku.open("POST", sURL, false);
ajaxku.setRequestHeader("Content-Type", "text/xml");
ajaxku.send(sRequestBody);
'# # # # # % !% # -$ !% %
# # # % !% $ !% %
* # # # ) # $ # % % #
# E # # ( % ) #
21
$ # E $ # #
** ! )% K K
**
;0: : + : K K.
K K ! .@I/ E' E3 $
02 0F 8:F .K K/
/
8 * E (
nama
Afghanistan
Amerika Serikat
Arab Saudi
Bahrain
Belanda
Brunei Darusalam
Chili
China
Filipina
Indonesia
Inggris
Jepang
Jerman
Korea Selatan
Korea Utara
Malaysia
Singapura
Thailand
# $ # #% -
, "
<html>
<head>
<script>
var drz;
function lihat(kata){
if(kata.length==0){
document.getElementById("kotaksugest").style.visibility =
"hidden";
}else{
drz = buatajax();
var url="cari.php";
drz.onreadystatechange=stateChanged;
var params = "q="+kata;
drz.open("POST",url,true);
//beberapa http header harus kita set kalau menggunakan POST
drz.setRequestHeader("Content-type", "application/x-www-form-
urlencoded");
drz.setRequestHeader("Content-length", params.length);
drz.setRequestHeader("Connection", "close");
22
drz.send(params);
}
function buatajax(){
if (window.XMLHttpRequest){
}
if (window.ActiveXObject){
}
return null;
}
var data;
if (drz.readyState==4 && drz.status==200){
data=drz.responseText;
if(data.length>0){
document.getElementById("kotaksugest").innerHTML = data;
document.getElementById("kotaksugest").style.visibility = "";
}else{
document.getElementById("kotaksugest").innerHTML = "";
document.getElementById("kotaksugest").style.visibility =
"hidden";
}
}
}
function isi(kata){
document.getElementById("kata").value = kata;
document.getElementById("kotaksugest").style.visibility = "hidden";
document.getElementById("kotaksugest").innerHTML = "";
}
</script>
</head>
<body>
<form>
<div>
<input type=text id=kata name=kata onkeyup=lihat(this.value)>
</div>
<div id=kotaksugest style="position:absolute;top:36;left:15;background-
color:lightblue;width:200;visibility:hidden;z-index:100">
</div>

</center>
</form>
</body>
</html>
!% % # # % ' # * #
#: $;7-,$" # " # 3
23
+ # # % ' $ %
#
#: # $) < ( $" $ = <>>><8 # <
# $ 3
#: # $) < $" # 3
#: # $) $" $ $ 3
% # #
# ## # # # % .% # / - $
# # ) ./
; #$ # - $ # #% % # # # #% # $
# $ # # % # - # 1 #
" 1 # #% '8$ # # # #% #
# # #% .! /$ ) # # # 1
E $ # 1
, .
<?php
$kata = $_POST['q'];
$query = mysql_query("select nama from negara where nama like '$kata%'
limit 10");
while($k=mysql_fetch_array($query)){
echo '<li onClick="isi(\''.$k[0].'\');"
style="cursor:pointer">'.$k[0].'</li>';
}
?>
+ - " 0 "
24
25
"
5% & 0 % -
26
8 # - 1 # $ # # E $
# # - ! * ! !% % *!% % $
# - !% % ( $
% #
while($k=mysql_fetch_array($query)){
echo '<li onClick="isi(\''.$k[0].'\');"
style="cursor:pointer">'.$k[0].'</li>';
}
!% % $ % # % L M
)% % # # #
# ! $ 'E$ - $ $
%4'
'E . ! ' ! E% % / )% # $ !
% $ # . / % #% 5%
# + % ! $ :; * A : # *"
* & >>> 'E # )% # #
% # # # % %
# ; # ;$ ;NN$ ;O$ $ ! $ $ % ' # ) * )
$ # 'E # *
+ % # 'E$ # # * * $
#
'E #
• 8 4 $ # % #
.% ! /$ # . !% /$ # . ! /$ # . ! % /$ . /$
) # ! .# /$ %!
• & ) # . % %) / # # $
# #. /$ #% . ! % /$ ) . /$ . 1 ! /
# * # # $
% % # # #
# # )% # # *
% # #
'E # # #
4 . 4 # # ' # P .#
# ( # / # Q .# # ( / # . #
/ 4 # % $ .#% /
) * %%%+ +
27
# # # R .# #% # # /
# S .# #% # / # % $ .#% /
) * %%%+ +
'" . / # $ # $
) $ % # # # * #
#
) * %%%+ +
% # % # # 3 !% $ # #
& # !# ! TUT # ## # #
# # ( # # # ;
28
) * %%%+ +
# ; $# ! )% %# #
# #
) * %%%+ +
29
0 %4'
# # !% % *!% % # 'E % % + # #
$ ) #
<menu id="file" value="File">

<popup>
<menuitem value="New" onclick="CreateNewDoc()" />
<menuitem value="Open" onclick="OpenDoc()" />
<menuitem value="Close" onclick="CloseDoc()" />
</popup>
</menu>
# # # # 'E
{"menu": {
"id": "file",
"value": "File",
"popup": {
"menuitem": [
{"value": "New", "onclick": "CreateNewDoc()"},
{"value": "Open", "onclick": "OpenDoc()"},
{"value": "Close", "onclick": "CloseDoc()"}
]
}
}}
+ #
<widget>
<debug>on</debug>
<window title="Sample Konfabulator Widget">
<name>main_window</name>
<width>500</width>
<height>500</height>
</window>
<image src="Images/Sun.png" name="sun1">
<hOffset>250</hOffset>
<vOffset>250</vOffset>
<alignment>center</alignment>
</image>
<text data="Click Here" size="36" style="bold">
<name>text1</name>
<hOffset>250</hOffset>
<vOffset>100</vOffset>
<alignment>center</alignment>
<onMouseUp>
sun1.opacity = (sun1.opacity / 100) * 90;
</onMouseUp>
</text>
</widget>
30
+ # 'E
{"widget": {
"debug": "on",
"window": {
"title": "Sample Konfabulator Widget",
"name": "main_window",
"width": 500,
"height": 500
},
"image": {
"src": "Images/Sun.png",
"name": "sun1",
"hOffset": 250,
"vOffset": 250,
"alignment": "center"
},
"text": {
"data": "Click Here",
"size": 36,
"style": "bold",
"name": "text1",
"hOffset": 250,
"vOffset": 100,
"alignment": "center",
"onMouseUp": "sun1.opacity = (sun1.opacity / 100) * 90;"
}
}}
< xx yy='nn'>< /xx> { "xx": {"yy":"nn"} }
%4' &
# # ! # # 'E & # #
'E # $ @ ) #
'E$ ) 9
-* #
# 9 / 0" / ? 2
/ $ # !% 'E
/ $ JSON_HEX_QUOT, JSON_HEX_TAG, JSON_HEX_AMP,
JSON_HEX_APOS, JSON_FORCE_OBJECT, ) I.
;% %
<?php
$arr = array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
echo json_encode($arr);
?>
31
8% # #
{"a":1,"b":2,"c":3,"d":4,"e":5}
# json_encode()$ # 'E !
#
$# # < # #
CREATE TABLE `message` (
`message_id` INT(11) NOT NULL AUTO_INCREMENT,
`chat_id` INT(11) NOT NULL DEFAULT '0',
ùser_id` INT(11) NOT NULL DEFAULT '0',
ùser_name` VARCHAR(64) DEFAULT NULL,
`message` TEXT,
`post_time` DATETIME DEFAULT NULL,
PRIMARY KEY (`message_id`)
)
2 #
message_id chat_id user_id user_name message post_time
1 1 1 Nurmi Halo apa kabar 4/28/2010 17:30
2 1 2 Desrizal Kabar Baik 4/28/2010 17:30
3 1 1 Nurmi Lagi di mana 4/28/2010 17:30
4 1 2 Desrizal Belitung 4/28/2010 17:30
& # 'E #
{"messages":
{"pesan":[
{"id": "1",
"user": "Nurmi",
"text": "Halo apa kabar",
"time": "4/28/2010 17:30"
},{"id": "2",
"user": "Desrizal",
"text": "Kabar Baik",
"time": "4/28/2010 17:30"
},{"id": "3",
"user": "Nurmi",
"text": "Lagi di mana",
"time": "4/28/2010 17:30"
},{"id": "4",
"user": "Desrizal",
"text": "Belitung",
"time": "4/28/2010 17:30"
} ]
}
}
+ # #% # 'E
5 %4' ) ) . "6 7
<?php
32
$json = '{"messages": {';

$query = mysql_query("select * from message");
$json .= '"pesan":[ ';
while($x =mysql_fetch_array($query)){
$json .= '{';
$json .= '"id": "' . $x['message_id'] . '",
"user": "' . htmlspecialchars($x['user_name']) . '",
"text": "' . htmlspecialchars($x['message']) . '",
"time": "' . $x['post_time'] . '"
},';
}
//hilangkan koma (,) di akhir

$json = substr($json,0,strlen($json)-1);
//lengkapi penutup format JSON

$json .= ']';
$json .= '}}';
echo $json;
?>
!% % $ # 'E ! $ #
# # % %( # #
, - "
8 %4' ."
'# $ # ! % )% 'E$ #
# ! # )% 'E # !
3 # # 4 * 'E # ) $ $ %
! % $ $
# ./$ # # ) *) %
$ ((( % %
$ # # $# # $ #
# ) *) % % .
44((( 'E % 4 % V )
!% % $ # # ! * #
3 # # !% % # $ # #% -$
# # # )% 'E
33
9 8 %4' 6 "7
<html>
<head>
<script>
function tes(){
json = '{"messages": {"pesan":[ {"id": "1", "user": "Nurmi", "text":
"Halo apa kabar", "time": "2010-04-28 17:30:26" },{"id": "2", "user":
"Desrizal", "text": "Kabar Baik", "time": "2010-04-28 17:30:34" },{"id":
"3", "user": "Nurmi", "text": "Lagi di mana", "time": "2010-04-28
17:30:42" },{"id": "4", "user": "Desrizal", "text": "Belitung", "time":
"2010-04-28 17:30:51" }]}}'
var teks_div = document.getElementById('divteks');

var response = eval("(" + json + ")");
for(i=0;i < response.messages.pesan.length; i++) {
teks_div.innerHTML += response.messages.pesan[i].user;
teks_div.innerHTML += ' <font size=1>' +
response.messages.pesan[i].time + '</font><br />';
teks_div.innerHTML += response.messages.pesan[i].text + '<br />';
}
}
</script>
</head>
<body onload=tes()>
<div id=divteks>
</div>
</body>
5 - " "
34
%4' 4 .
8 ! * 'E # 8 #
# 3 # $ # 55" @N$ 2:=N$ ' I @N # #
! 'E ' !
'E ' ! # % # % # 'E 'E
% # ! + # % * % 'E ' !
3 6 :; " . <: ; . <7
+ # ! % ! 'E
;% %
var jsonobjek={"nama":"Desrizal", "umur":28, "teman":["Nurmi", "Sarah",
"Albert"]}
var jsonstr=JSON.stringify(jsonobjek)
alert(typeof jsonstr) //string
6 :; && <7
+ # 'E ! ' !
;% %
var jsonstr='{"nama":"Desrizal", "umur":28, "teman":["Nurmi", "Sarah",

"Albert"]}'
var george=JSON.parse(jsonstr) //convert JSON string into object
alert(george.age) //alerts 28
%4' #= 0
'# # # !% % # - # 'E )% %
# % # !
* # $ # #
CREATE TABLE `drzchat` (
`nomor` int(3) NOT NULL auto_increment,
`nama` varchar(20) NOT NULL,
`pesan` varchar(200) NOT NULL,
`waktu` varchar(10) NOT NULL,
PRIMARY KEY (`nomor`)
);
8 # % % - !
9 >. "
<html>
<head>
<title>
DRZ Chat 1.0
</title>
<script>
var ajaxku = buatAjax();
var tnama = 0;
var pesanakhir = 0;
35
var timer;
function taruhNama(){
if(tnama==0){
document.getElementById("nama").disabled = "true";
tnama = 1;
}else{
document.getElementById("nama").disabled = "";
tnama = 0;
}
ambilPesan();
}
function buatAjax(){
if(window.XMLHttpRequest){
}else if(window.ActiveXObject){
}
}
function ambilPesan(){
namaku = document.getElementById("nama").value
if(ajaxku.readyState == 4 || ajaxku.readyState == 0){
ajaxku.open("GET","ambilchat.php?akhir="+pesanakhir+"&nama="+namaku+"&sid
="+Math.random(),true);
ajaxku.onreadystatechange = aturAmbilPesan;
ajaxku.send(null);
}
}
function aturAmbilPesan(){
if(ajaxku.readyState == 4){
var chat_div = document.getElementById("div_chat");
var data = eval("("+ajaxku.responseText+")");
for(i=0;i<data.messages.pesan.length;i++){
chat_div.innerHTML += "<font
color=red>"+data.messages.pesan[i].nama+"</font> ";
chat_div.innerHTML += "<font
size=1>("+data.messages.pesan[i].waktu+")</font> ";
chat_div.innerHTML += " :
"+data.messages.pesan[i].teks+"<br>";
chat_div.scrollTop = chat_div.scrollHeight;
pesanakhir = data.messages.pesan[i].id;
}
}
timer = setTimeout("ambilPesan()",1000);
}
function kirimPesan(){
pesannya = document.getElementById("pesan").value
namaku = document.getElementById("nama").value
if(pesannya != "" && document.getElementById("nama").value !=""){
36
ajaxku.open("GET","ambilchat.php?akhir="+pesanakhir+"&nama="+namaku+"&pes
an="+pesannya+"&sid="+Math.random(),true);
ajaxku.onreadystatechange = aturAmbilPesan;
ajaxku.send(null);
document.getElementById("pesan").value = "";
}else{
alert("Nama atau pesan masih kosong");
}
}
function aturKirimPesan(){
clearInterval(timer);
ambilPesan();
}
function blockSubmit() {
kirimPesan();
return false;
}
</script>
</head>
<body>
Nama : <input type=text name=nama id=nama>
<input type=button value=login id=tmbl_login onclick=taruhNama()><p>
<div id="div_chat" style="height: 300px; width: 500px; overflow: auto;
background-color: lightyellow; border: 1px solid #555555;">
</div>
<form onSubmit="return blockSubmit();">
Pesan : <input type=text name=pesan id=pesan size=50>
<input type=button value="kirim" onclick="kirimPesan()">
</form>
</body>
</html>
% ! ! $ * ## #
# # # % % % $ # # )
; & ) ) # # # 1 # #
$ ".
& # )% 'E #
{"messages":
{"pesan":[
{"id":"35",
"nama":"Batman",
"teks":"halo Nurmi",
"waktu":"16:31" },
{"id":"36",
"nama":"Nurmi",
"teks":"halo juga",
"waktu":"16:31" },
{"id":"37",
"nama":"desrizal",
"teks":"hai apa kabar",
"waktu":"16:47" }
37
]
}
}
5% 'E $ ## # $#
# # # 'E % # !
var data = eval("("+ajaxku.responseText+")");
8 ' # 'E * # ## # L M
for(i=0;i<data.messages.pesan.length;i++){
chat_div.innerHTML += "<font color=red>"+data.messages.pesan[i].nama+"</font> ";
chat_div.innerHTML += "<font size=1>("+data.messages.pesan[i].waktu+")</font> ";
chat_div.innerHTML += " : "+data.messages.pesan[i].teks+"<br>";
chat_div.scrollTop = chat_div.scrollHeight;
}
- # # # # % %
#
- # # # # ) % ./
timer = setTimeout("ambilPesan()",1000);
+ # # ! $# # # # # # :E :0$ #
)% # :E :0 # % % * # # 3 # !
* # # # $ # # %# # ) #
function aturKirimPesan(){
clearInterval(timer);
ambilPesan();
}
5 # # %
<form onSubmit="return blockSubmit();">
# # #% $ % # %
)% 'E
? ".
<?php
$nama = $_GET['nama'];
$pesan = $_GET['pesan'];
$waktu = date("H:i");
$akhir = $_GET['akhir'];
$json = '{"messages": {';

if($akhir==0){
$nomor = mysql_query("select nomor from drzchat order by nomor desc
limit 1");
$n = mysql_fetch_array($nomor);
$no = $n['nomor'] + 1;
38
$json .= '"pesan":[ {';

$json .= '"id":"'.$no.'",
"nama":"Admin",
"teks":"Selamat datang di chatting room",
"waktu":"'.$waktu.'"
}]';
$masuk = mysql_query("insert into drzchat values(null,'Admin','$nama
bergabung dalam chat','$waktu')");
}else{
if($pesan){
$masuk = mysql_query("insert into drzchat
values(null,'$nama','$pesan','$waktu')");
}
$query = mysql_query("select * from drzchat where nomor > $akhir");
$json .= '"pesan":[ ';
while($x = mysql_fetch_array($query)){
$json .= '{';
$json .= '"id":"'.$x['nomor'].'",
"nama":"'.htmlspecialchars($x['nama']).'",
"teks":"'.htmlspecialchars($x['pesan']).'",
"waktu":"'.$x['waktu'].'"
},';
}
$json = substr($json,0,strlen($json)-1);
$json .= ']';
}
$json .= '}}';
echo $json;
?>
% # %
# # #% # # <
* # % ! % G:
" ; # # # % W # $ # I
! # $ # # )% 'E$
! $ # ## # #
%
? W # I$ # # # # $
# * # $ #
W #
$query = mysql_query("select * from drzchat where nomor > $akhir");
@ ' # )% % $ # # ! ! #
# # echo $json;
+ # # ! #
39
? - " " 0
. ! % % % / )% % - 5%
$ # # %
ElementHTML.innerHTML = objekAjax.responseText;
!% % # # # # -$ 1 #
) $ ) $ #% *#%
# #%
# # #
40
@ - " #-
* # #
<li class="tabs" id="tab1">Tab 1</li>
<div id="content" style="overflow:auto">
</div>
8 # % * $# # ;
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.tabs {
list-style-type: none;
width:50px;
margin-right:5px;
padding:4px;
text-align:center;
float:left;
cursor:pointer;
border:1px solid #ccc;
border-bottom:0;
background: white url(shade.gif) top left repeat-x;
}
#content {
width:500px;
height: 250;
clear:both;
padding : 3px
}
# # #% ! #% # -
41
@ # "
<html>
<head>
<title>Ajax Tab</title>
var ajaxku = buatAjax();
function init (){
var tabs = document.getElementsByClassName('tabs');
for (var i = 0; i < tabs.length; i++) {
tabs[i].onclick = function () {
ambilTabData(this.id);
}
}
}
function ambilTabData(id) {
var url;
switch(id){
case 'tab1' : url = "halaman1.html";break;
}
ajaxku.onreadystatechange = tampilkanHalaman;
ajaxku.send(null);
}
}
function tampilkanHalaman(){
if(ajaxku.readyState == 4){
var halaman = ajaxku.responseText;
document.getElementById("content").innerHTML = halaman;
}else{
document.getElementById("content").innerHTML = "Loading....";
}
}
</script>
<style type="text/css">
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.tabs {
list-style-type: none;
42
width:50px;
margin-right:5px;
padding:4px;
text-align:center;
float:left;
cursor:pointer;
border-bottom:0;
background: white url(shade.gif) top left repeat-x;
}
#content {
width:500px;
height: 250;
clear:both;
padding : 3px
}
</style>
</head>
<body onload=init()>
<div id="content" style="overflow:auto">
</div>
</body>
</html>
& #% $ ( * ( $ # # % % $# # )
init() 5 # # # # # # <li>
! H7 7 ! !# % $ # ) ambilTabData(id).
5 ambilTabData(id) # # # *% #
* 8 # %
open send
2 # # # L M
var halaman = ajaxku.responseText;
document.getElementById("content").innerHTML = halaman;
+ # !% %
A " "
<font color=red>
Ini adalah isi dari halaman "halaman1.html"<br />
</font>
3 # $ !% #% *#%
43
)% # $ # %
# * * + # !% % % -$
)% % -
# # #
B # "
<books>
<book>
<author>Desrizal</author>
<title>Action Script Advanced</title>
</book>
<book>
<author>Nurmi Yulita Rahmi</author>
<title>Hacking exposed</title>
</book>
<book>
<author>Batman</author>
<title>PHP Hacking</title>
</book>
</books>
8 ! $# #% - #
## " "
<html>
<head>
<script>
var drz = buatAjax();
var url = "data.xml";
}
}
function ambilXMLDoc(){
drz.open("GET",url+"?sid="+Math.random(),true);
drz.onreadystatechange = prosesData;
drz.send(null);
}
function prosesData(){
if(drz.readyState == 4){
var dtable = document.getElementById( 'tabel' );
var nl = drz.responseXML.getElementsByTagName( 'book' );
for( var i = 0; i < nl.length; i++ ) {
var nli = nl.item( i );
var elAuthor = nli.getElementsByTagName( 'author' );
var author = elAuthor.item(0).firstChild.nodeValue;
44
var elTitle = nli.getElementsByTagName( 'title' );

var title = elTitle.item(0).firstChild.nodeValue;
var elTr = dtable.insertRow( -1 );
var elAuthorTd = elTr.insertCell( -1 );
elAuthorTd.innerHTML = author;
var elTitleTd = elTr.insertCell( -1 );
elTitleTd.innerHTML = title;
}
}
}
</script>
</head>
<body onload=ambilXMLDoc()>
<table cellspacing="0" cellpadding="3" border=1>
<tbody id="tabel">
<tr>
<th width="20%">Author</th>
<th width="80%">Title</th>
</tr>
</tbody>
</table>
</body>
</html>
+ # # -- # %(
A - " ## " "
45
?
<
46
C D
< ! $ < % 6( $ % % 7 <
! # # #% *#% ! < ! !
# %# $ $ #
- < ! # ! !
< $
$; !
< #
• 8 # *
•
• ;
•
• :) #* ) # !
• % )# &'
•
• # #% !
8 # < $ %( %
44((( 1 !% #% ! # 1 $
# # ) # #% !
<script type="text/javascript" src="jquery.js"></script>
'# $ # # !% % % # 1
"" ! "
<html>
<head>
$(document).ready(function(){
$(".tombol1").click(function(){
$("p").hide(1000);
});
$("p").show(1000);
});
});
</script>
</head>
<body>
<p>Hello World!</p>
<button class="tombol1">Sembunyikan</button>
<button class="tombol2">Tampilkan</button>
</body>
</html>
47
% C
# 1 # * # # #
#
$(selector).action()
• % $ # ) # <
• . ! % /$ # ##
• ! % ./$ < ! % # # #
;% %
$(this).hide() X #
$("p").hide() X # ) #% L M
$(".test").hide() X # ! HT T
$("#test").show() X # HT T
8 # # # # < !
%! % ! % .&' /$ # # ( #
# &'
3 # # # $# # #% # %#
//kode anda di sini
});
8% # #% # *%
#% !
window.onload = function(){ //kode anda di sini }
# # !% %
$("p").hide(1000);
});
8% $(".tombol1") < #% & #
! H7 % % 7 # # # # $ # < ! '
# $() # % # < 8 # # ) click() 2
# # % ! !# # # .
! HY % % Y/ & # # # ) #
% ! !# ! H7 % % 7 # # # # #
) $("p").hide(1000);
5 hide() show() ) < $ # #
) *) <
C % " .
!% # # # # % %#
# !% % !
# <
48
< !% !% # # #
. # % %# / $ #% !%
# # # # % %#
C *" % " .
< ;
$("p") L M
$("p.intro") L M ! HT %T
$("p#demo") L M HT %T
C % " .
< #
$("[href]") )
$("[href='#']") ) HTOT
$("[href!='#']") ) #
TOT
$("[href$='.jpg']") ) T T
+ # ) < !%
!
" " !
# $
" " " !
" !
%& %& # $
% % # $ '(
% % # $
% % # $ )
% * + % * , ' - + .
% % , - + (
,
% % , - +' "
,
% " % % ''
%( %( ( #(/$#(0$
%
%" + %" 12, "( 1 ' 32, "( 4
% % ' "(
%( %( # $
49
% %
/5 05 , (5 5 " " ' (5 5
6 7 6( &7 ( &
6 ! 7 6( &!1 17 ( &
!
6 8! 7 6( &8!1 17 ( &
#$
6 ! 7 6( & !1 ) 17 ( &
)
% % # $
% + % + # $ ! +
% 9 % 9 # $ ! 9
% % # $ !
%"( "' + %"( "' + # $ ! "( "' +
% % # $ !
% % # $ !
% % # $ !
% % # $ !
%& %& # $ ! &
% % # $
% % # $
% " % " # $ '
%"( "' %"( "' # $ -"( "'
C *&
# 1 & % 1 $
#% *#% % ##
# % %#
* J + !$ #% #
. / $ # % % # #$ # ! %
#% # $ !% %- $ #% # $ !% %
1
$("p").hide(1000);
});
8% # # ! HY % % Y$
# # # ) ./ L M
+ # ) *
*& 3 .
W. %! / .) ! % /
W. !% / .) ! % /
W. !% /! .) ! % /
50
W. ! % / ! !#.) ! % /
W. ! % / ! !#.) ! % /
W. ! % / % .) ! % /
W. ! % / )%! .) ! % /
W. ! % / # %( .) ! % /
W. ! % / # .) ! % /
W. ! % / # .) ! % /
W. ! % / % .) ! % /
W. ! % / % %( .) ! % /
W. ! % / % .) ! % /
W. ! % / % .) ! % /
W. ! % / % % .) ! % /
W. ! % / % % .) ! % /
W. ! % / % % .) ! % /
W. ! % / % .) ! % /
W. ! % / B .) ! % /
W. ! % / ! % .) ! % /
W. ! % / ! .) ! % /
W. ! % / .) ! % /
W. ! % / % .) ! % /
*3 8*3 C
# 1 $ ) *) ) # # + #
) # ! $ # #%
# 1 ! # # ) $(selector).fadeIn()
+ # ) #* ) # # # % 1
C !67 *33 .
+ # # 3 #
; display:none . # visibility:hidden/
#
$(selector).show(speed,callback)
) $
' % # # ! ! # & )
I
E
• !% .!% % @II/
• T %(T
• T % T
• T) T
! !# ' % ) # # ) # %( #
51
;% %
+ 0 !67
<html>
<head>
$("p").show(1000,tampilkanAlert);
});
});
function tampilkanAlert(){
alert("Paragraf sekarang muncul");
}
</script>
</head>
<body>
<p style=”display:none”>Ini adalah paragraph tersembunyi.</p>
<button class="tombol1">Show</button>
</body>
</html>
C 67 *33 .
+ ) # #
#
$(selector).hide(speed,callback)
3 # ! !# %(./ )) !
;% %
$("p").hide();
});
C " 67 *33 .
) %( % ./ ) # $
# #
#
$(selector).toggle(speed,callback,switch)
) $
' % # # ! ! #
& ) I
E
• !% .!% % @II/
• T %(T
• T % T
• T) T
52
! !# ' % ) # # ) # %(
#
( ! ' % + +%%
• $ # #
• 5 $ #
# $ ! !# #
#
;% %
, 0 " 67
<html>
<head>
$("p").toggle(true);
});
});
</script>
</head>
<body>
<p>Ini adalah paragraf</p>
<p style="display:none">Ini adalah paragraf lainnya yang belum muncul</p>
<p>Jika bernilai true hanya berfungsi menampilkan, kalau false hanya
menyembunyikan</p>
<button class="tombol1">Tampilkan semua elemen</button>
</body>
</html>
C " $ ! 67 *33 .
# $ ! ) #
#
$(selector).slideDown(speed,callback)
3 # ! !# ) %(./
;% %
$("p").slideDown();
});
C " E 67 *33 .
# ! ) #
#
$(selector).slideUp(speed,callback)
3 # ! !# ) %(./
53
;% %
$("p").slideUp();
});
C " - " 67 *33 .
G &%( ./ 3 ./ # # # $
# # #
#
$(selector).slideToggle(speed,callback)
3 # ! !# ) %(./
;% %
5 0 " - " 67
<html>
<head>
$("#contact").click(function(){
$("#contact-box").slideToggle("slow");
});
});
</script>
</head>
<body>
<p><span id="contact" style="cursor:hand;background-

color:#ababab;padding:3;font-family:Verdana">Contact</span></p>
<div id="contact-box"
style="background:#98bf21;height:200px;width:300px;position:relative;disp
lay:none;padding:10">
<form>
Nama : <input type=text><p>
Email : <input type=text><p>
Komentar :<textarea rows=5></textarea><p>
<input type=submit value=kirim>
</div>
<p>
jQuery adalah javascript library, jQuery mempunyai semboyan "write less,
do more".
jQuery dirancang untuk memperingkas kode-kode javascript. JQuery adalah
javascript
library yang cepat dan ringan untuk menangani dokumen HTML, menangani
event, membuat animasi
dan interakasi ajax. JQuery dirancang untuk mengubah cara anda menulis
javascript.
<p>Sebelum anda memulai mempelajari jQuery, anda harus mempunyai
pengetahuan dasar mengenai HTML, CSS dan Javascript.
</body>
</html>
54
C 3 ( 67 *33 .
# # $ ! ) #
#
$(selector).fadeIn(speed,callback)
3 # ! !# ) %(./
;% %
$("p"). fadeIn();
});
C 3 4 67 *33 .
# $ ! ) #
#
$(selector).fadeOut(speed,callback)
3 # ! !# ) %(./
;% %
9 0 3 4 67
<html>
<head>
<style>
#box
{
background-color:#96BC43;
border:solid 3px #333333;
height:160px;
margin-top:30px;
}
</style>
$(function(){
$('.fadeOut_box').click(function(){
$('#box').fadeOut("slow");
});
$('.fadeIn_box').click(function(){
$('#box').fadeIn("slow");
});
});
</script>
<body>
<a href="#" class="fadeOut_box">fadeOut()</a>
<a href="#" class="fadeIn_box">fadeIn()</a>
<div id="box"></div>
</body>
</html>
55
C 3 - 67 *33 .
# # # % ! #
#
$(selector).fadeTo(speed,opacity,callback)
3 # ! !# ) %(./
3 # % ! I
;% %
$("p"). fadeTo(1000,0.6);
});
C 67 *33 .
# # # 8
# ;
E % ; ! * $ # ! # ) #
E % ; # $ # -
Z 3 # # #
#
$(selector).animate(styles,speed,easing,callback)
) $
, # % ; # *
% ; *
• !# % % %
• % ,
• % +% % ,
• % ) ,
• % 0 ,
• % % ,
• % !
•
• +% %
• )
• 0
• %
• % ,
•
• +% %
• )
• 0
• %
•
• (
56
• -
• -,
•
• -,
• )%
• )% B
• % %
• )
•
• %
• !
• (% !
•
• - 2
' % # # ! ! #
& ) I
E
• !% .!% % @II/
• T %(T
• T % T
• T) T
' % # )
+ )
• (
•
! !# ' % ) # # ) # %(
#
;% %
? 0 67
<html>
<head>
$(document).ready(function()
{
$("#box").animate({height:"300px"});
});
$("#box").animate({height:"100px"});
});
});
</script>
57
</head>
<body>
<div id="box"
style="background:#98bf21;height:100px;width:100px;margin:6px;">
</div>
<button class="tombol1">Animasi</button>
<button class="tombol2">Reset</button>
</body>
</html>
C 67 *33 .
#
#
$(selector).stop(stopAll,goToEnd)
) $
% ' % + %% $ # # #
$ # # #
#
% %: ' % + +%% $ # #
#% # #
# # % *
;% %
@ 0 67
<html>
<head>
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
$("#stop").click(function(){
$("#box").stop(false,true);
});
});
</script>
</head>
<body>
<p><button id="start">Start Animasi</button><button id="stop">Stop

Animasi</button></p>
<div id="box"
style="background:#ababab;height:100px;width:100px;position:relative">
58
</div>
</body>
</html>
F6 " . 7 " 67
+ # * # ) #
#
$(selector).delay()
F6 " . 7 67
# ) # #
#
$(selector).dequeue()
F6 " . 7 67
# ) #
#
$(selector).queue()
C ." C 67 *33 .
# ) #
#
$(selector).stop(queueName)
queueName # #
;% %
$("#stop").click(function(){
$("#box").clearQueue();
});
" - C
< # %( ) $
#% $
"67
3 # * #% . # / # #
$(selector).html(content) # # # # )
./ # # #%
;% %
A 0 "67
<html>
<head>
59
$(function(){
$("#lihat").click(function(){
var isinya = $("#paragraf").html();
alert(isinya);
});
$("#isikan").click(function(){
var isilagi = $("#isi").val();
alert(isilagi);
$("#paragraf").html(isilagi);
});
});
</script>
<body>
<button id=lihat>Lihat</button>
<p id=paragraf>
jQuery mempunyai kemampuan yang powerfull dalam hal memanipulasi,
mengambil atau menambah konten, dan sebagainya terhadap HTML
</p>
Teks :
<input type=text id=isi>
<p>
<button id=isikan>Isikan</button>
</body>
</html>
& "67
!% % # #%
var isilagi = $("#isi").val();
8% # L H - H M ## #
isilagi ) ./$ # ## ./$ #
# * + ./ # *
L M$ !% %
$(“#isi”).val(“hallo apa kabar”);
8% # * <input type=text id=isi> 6 % # 7
67
& # ) ./$ # # #
% #
#
$(selector).attr(properties,nilai);
% % # ;% % %
$! $ $ !$ )
$ # # * % # # $
#% % # % # #
;% %
60
B 0 67
<html>
<head>
$(function(){
$('.link').click(function(){
var id=$(this).attr("id");
var class=$(this).attr("class");
var href=$(this).attr("href");
alert(id);
alert(class);
alert(href);
});
});
</script>
<a href="http://www.desrizal.com" class="link" id="13">link</a>
</body>
</html>
0" 67
+ # # ! #
#
$(selector).addClass(namakelas)
;% %
0 0" 67
<html>
<head>
<style>
.besar
{
font-size:106px;
}
.kecil
{
font-size:12px;
}
</style>
$(function(){
$('.ubahclass').click(function(){
$(".besar").addClass("kecil");
});
});
</script>
<a href="#" class="ubahclass" >Klik </a>
<div class="besar">www.desrizal.com</div>
</body>
</html>
61
#) *) #
" $ .
W. !% / .!% / #% . /
W. !% / - . - / ./$ # *
W. !% / . $ /
W. !% / . /
0
W. !% / ./ #% . /
W. !% / - ./ #% #
W. !% / . /
W. !% / ./ 4
0
W. !% / ) .!% / #%
W. !% / )% .!% / #%
W. !% / ) . !%/ #
W. !% / + )% . !% / #
" 0%% $ .
W. !% / ; .!% / !
W. !% / % ; .!% / # !
W. !% / % ; .!% / % !
W. !% / ; .!% / ; # # # !
( 0
W. !% / .!% / # #% # #%
W. !% / .!% / T T #% # #%
W.!% / %. ! %/ # # #%
W.!% / %. !%/ T T # #%
=
W. !% /( .!% / , #%
W. !% /( .!% / , #%
W. !% /( .!% / , #% !
W. !% / ( ./ 0 % !
0 : " . : &
W.!% / ! . ! %/ # #
W. !% / ! , .!% / # #%
62
W. !% / ./ 0 % #% !
W. !% / % ./ 0 %
W. !% / % . / 0 % #
W. ! % /!% ./ ;%
W. !% / ! ./ 0 % &'
" 0%% C
" 0%%
< # ; " )
< # # #
• $(selector).css(name,value)
• $(selector).css({properties})
• $(selector).css(name)
5 css() # # % ; #
# & " $ # * % ;
3 # * * # % ; $ # G H
# # % ; # ! #
;% %
0 . 67
<html>
<head>
$("#tombol1").click(function(){
$(".p1").css("color","red");
$(".p2").css({"color":"white","background-
color":"#ff8954","font-family":"Arial","font-
size":"20px","padding":"5px"});
});
var nilai = $(".p1").css("color");
alert(nilai);
});
});
</script>
</head>
<body>
<p class="p1">Paragraf ini cuma berubah satu properti CSS</p>
63
<p class="p2">Paragraf ini cuma berubah banyak properti CSS</p>

<button id="tombol1">ubah CSS paragraf</button>
<button id="tombol2">Ambil nilai CSS paragraf 1</button>
</body>
</html>
" 0%% % >
3 # # . /$ # )
# $
• $(selector).height(value)
• $(selector).width(value)
# $ # * (
# % % # $ # (
;% %
+ 0 0%% >
<html>
<head>
$("#kotak").width("300px");
$("#kotak").height("300px");
});
var nilai = $("#kotak").width();
alert(nilai);
});
});
</script>
</head>
<body>
<div id=kotak style="background-color:pink;width:100px;height:100px;">
Hello
</div>
<p>
<button id="tombol1">ubah ukuran kotak</button>
<button id="tombol2">Ambil nilai ukuran kotak</button>
</body>
</html>
64
" )
3 # # # % $ # ) <
# # #
33 67
3 # # * %)) 0 ) %#
#
$(selector).offset(coordinates)
!%% #%% $ !% %
offset({top:100,left:0})
# # % % # !%% $ # %))
#
5 %)) ./ # % # % % )
;% %
, 0 33 67
<html>
<head>
<style>
#div1{
background-color : yellow;
width : 100px;
height : 100px;
position : relative;
left : 300;
}
</style>
$("#tombol").click(function(){
posisi=new Object();
posisi.left=$("#x").val();
posisi.top=$("#y").val();
$("#div1").offset(posisi);
pos = $("#div1").offset();
alert("x="+pos.left+",y="+pos.top);
});
});
</script>
</head>
<body>
<div id=div1>
Hello World!
</div>
x = <input type=text size=4 id=x><br>
y = <input type=text size=4 id=y><br>
<button id=tombol>Set Offset</button>
</body>
</html>
65
33 ) 67
3 # # # % #
#
$(selector).offset()
;% %
5 0 33 ) 67
<html>
<head>
$("button").click(function(){
$("p").offsetParent().css("background-color","green");
});
});
</script>
</head>
<body>
<div style="width:70%;position:absolute;left:100px;top:100px">
<div style="margin:50px;background-color:yellow">
<p>Klik tombol untuk set background color untuk elemen parent terdekat
dari paragraf ini</p>
<div>
</div>
<button>ubah warna latar</button>
</body>
</html>
67
%)) ./$ # # # % $
)
5 % % ./ # % # % % )
#
$(selector).position()
;% %
$(".tombol").click(function(){
x=$("p").position();
$("#div1").text(x.left);
$("#div2").text(x.top);
});
. "" 3 67
3 # # # !% ) %))
#
$(selector).scrollLeft(offset)
66
%)) - # !% % #
# %)) #% % # $ # # %)) !% )
;% %
$("div").scrollLeft(300);
});
. ""- 67
3 # # # !% % %))
#
$(selector).scrollTop(offset)
%)) - # !% %
# %)) #% % # $ # # %)) !% %
;% %
$("div").scrollTop(300);
});
= - %. "" 0
# # !% % ( $ # 1 & ( #
* $ *% #% # # !% #% #
#
9 0 . ""- 67
<html>
<head>
<script>
$("#home").click(function(){
$("#konten").animate({ scrollTop: 0},"slow");
});
$("#about").click(function(){
});
$("#contact").click(function(){
});
});
</script>
<style>
#konten{
height : 500px;
overflow: hidden;
background-color : yellow;
67
}
.box{
height : 500px;
margin:0;
padding : 0;
}
.link{
cursor : pointer;
background-color : lightyellow;
padding : 3;
}
body{
overflow:hidden;
}
#home{
background-color : green;
}
#about{
background-color : red;
}
#contact{
background-color : blue;
}
.aboutme{
background-color : black;
color : white;
font-size : 26pt;
font-family : garamond;
}
</style>
</head>
<body>
<span class=link id=home>Home</span>
<span class=link id=about>About</span>
<span class=link id=contact>Contact</span>
<div id=konten>
<div id=home class=box>
<br><b>Home</b><p>
<center>
<font size=7>Selamat Datang</font></center>
</div>
<div id=about class=box>
<br><b>About Me</b>
<p>
<span class=aboutme>Hi,namaku Desrizal</span>
</p>
<p>
<span class=aboutme>Lahir di Pekanbaru tahun 1981</span></p>
<p>
<span class=aboutme>Punya hobi otak atik komputer</span></p>
</div>
<div id=contact class=box>
<br><b>Contact</b>
68
<form method="POST" action="--WEBBOT-SELF--" style="padding:10">

<p>
Nama :<br>
<input type="text" name="T1" size="20"><br>
Emai : <br>
<input type="text" name="T2" size="20"><br>
Komentar :<br>
<textarea rows="6" name="S1" cols="24"></textarea><br>
<input type="submit" value="Submit" name="B1"><input type="reset"
value="Reset" name="B2"></p>
</form>
</div>
</div>
</body>
</html>
3 # # !% L H#% M# # ;
overflow:hidden;
8 # # # # $ # # !% # #%
#% #
B - " ! - . "" .
69
@
<
70
+ # 1 #
# - # < <
) *) # # -
& # < $# # # 1 $ $ # 'E
# % G: '
I 8I C
+ # ) *) # % < # -
" 67
# #
#
$(selector).load(url,data,callback)
" ) # #
) % % $ # # #
. "" . ) % % $ ) # # #
;% %
# ) # $
Hai ini adalah konten dari file data.txt
# #% - # *% #% -
? . " "
<html>
<head>
$('#teks').load('data.txt');
});
});
</script>
</head>
<body>
<div id="teks">
</div>
<button id="tombol" type="button">Klik Ini</button>
</body>
</html>
& !% % $ # # # % % 8 #2 $ # # # )
% ) # ## # <div id=”teks”>
# # !% % # ) #
# %
71
@ . " "
<html>
<head>
$('#teks').load("data.php","nama=desrizal&email=drz@desrizal.com",beritah
u());
});
});
function beritahu(){
alert("sudah diambil datanya");
}
</script>
</head>
<body>
<div id="teks">
</div>
<button id="tombol" type="button">Click Me</button>
</body>
</html>
!% % # # # 1 # # )
# * % G: 8 * # #
fungsi beritahu()
A
<?php
echo "Anda mengirim parameter nama dengan nilai :
<b>".$_GET['nama']."</b> <p>";
echo "Email : <b>".$_GET['email']."</b>.";
?>
72
jQuery.ajax()
Sintaks :
$.ajax(settingan)
I 1 # # # ! % % . -/ 1
+ # #) $.ajax()
type
F % 1 $ ' G: $ ) G:
url
# 30 ) $ # 1
data
& # # # # % $!
"data1=value1&data2=value2"
cache
+ ) # ) $ 1 # # ! ! %
%(
success
5 # # # 1 # #
3 # 44 1 !% 4! % 4 -4
0 1
$.ajax({
url: "proses.php",
data: "nama=desrizal&email=desrizal@yahoo.com&sex=Male",
cache: false,
success: function(msg){
$("#teks").html(msg);
}
});
" ( :E $ "
# # # # 1 # %
!% % *!% % # # $# # # # ) *)
1 val(), html(), show(), hide() 3 # % )
$ # ! 1 !% % # # # #
# (
% - " ! %C
73
# # ( <
CREATE TABLE `datakaryawan` (

`nik` varchar(10) NOT NULL,
`nama` varchar(50) NOT NULL,
èmail` varchar(50) NOT NULL,
àlamat` varchar(200) NOT NULL,
PRIMARY KEY (`nik`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `datakaryawan` (`nik`, `nama`, èmail`, àlamat`) VALUES

('FI786578', 'Bagaskara Antara', 'bagas@yahoo.com', 'Jakarta'),
('FI885245', 'Budix', 'budi@gmail.com', 'USA'),
('FI889456', 'Desrizal', 'drz@desrizal.com', 'Tembagapura');
- C
# #% < $ ) $# # "
<html>
<head><title>Ajax jQuery by Desrizal</title>
<script type="text/javascript" src="jquery-1.4.3.min.js">
</script>
<script>
var nik;
var nama;
var email;
var alamat;
var datanya;
//meloading option NIK dari database
$("#nik").load("proses.php","op=ambiloption");
//jika ada event onchange ambil data dari database

$("#nik").change(function(){
//ambil nilai nik dari form
nik = $("#nik").val();
//tampilkan status loading dan animasinya

$("#status").html("Loading...");
$("#loading").show();
//lakukan pengiriman dan pengambilan data

$.ajax({
url: "proses.php",
data: "op=ambildata&nik="+nik,
cache: false,
//karna di server pembatas setiap data adalah |
//maka kita split dan akan membentuk array
data = msg.split("|");
//masukkan ke masing-masing textfield
74
$("#nama").val(data[0]);
$("#email").val(data[1]);
$("#alamat").val(data[2]);
//hilangkan status dan animasi loading
$("#status").html("");
$("#loading").hide();
}
});
});
//jika tombol update diclick

$("#tupdate").click(function(){
//ambil nilai-nilai dari masing-masing input
if(nik=="Pilih NIK"){
alert("Pilih dulu NIK");
exit();
}
nama = $("#nama").val();
email = $("#email").val();
alamat = $("#alamat").val();
datanya = "&nik="+nik+"&nama="+nama+"&email="+email;
datanya = datanya+"&alamat="+alamat;
//tampilkan status Updating dan animasinya
$("#status").html("Lagi diupdate...");
$.ajax({
url: "proses.php",
data: "op=update"+datanya,
cache: false,
if(msg=="sukses"){
$("#status").html("Update Berhasil...");
}else{
$("#status").html("ERROR..");
}
}
});
});
//jika tombol DEL diklik

$("#tdelete").click(function(){
if(nik=="Pilih NIK"){
alert("Pilih dulu NIK");
exit();
}
$("#status").html("Lagi didelete...");
$.ajax({
url: "proses.php",
data: "op=delete&nik="+nik,
cache: false,
75
if(msg=="sukses"){
$("#status").html("Delete Berhasil...");
}else{
}
$("#nama").val("");
$("#email").val("");
$("#alamat").val("");
}
});
});
//jika link Tambah Data Karyawan diklik

$("#formtambah").click(function(){
$("#formnik").show();
$("#nik2").val("");
$("#nama").val("");
$("#email").val("");
$("#alamat").val("");
});
//jika tombol TAMBAH diklik

$("#ttambah").click(function(){
//ambil nilai-nilai dari masing-masing input
nik = $("#nik2").val();
if(nik==""){
alert("NIK belum diisi\nKlik Tambah Data Karyawan");
exit();
}
nama = $("#nama").val();
email = $("#email").val();
alamat = $("#alamat").val();
datanya = "&nik="+nik+"&nama="+nama+"&email="+email;
datanya = datanya+"&alamat="+alamat;
$("#status").html("Lagi ditambah...");
$.ajax({
url: "proses.php",
data: "op=tambah"+datanya,
cache: false,
if(msg=="sukses"){
$("#status").html("Berhasil ditambah...");
}else{
}
$("#formnik").hide();
$("#nik2").val("");
}
76
});
});
});
</script>
</head>
<body>
Nomor Induk Karyawan :
<select id="nik"></select>
<br>
<a id="formtambah" style="cursor:pointer;color:red">
<u>Tambah Data Karyawan</u></a>
<p style="display:none" id="formnik">
NIK :<br>
<input type="text" id="nik2">
</p>
<p>
Nama :<br>
<input type="text" id="nama"><p>
Email :<br>
<input type="text" id="email"><p>
Alamat :<br>
<input type="text" id="alamat" size="30"><p>
<button id="tupdate">UPDATE</button>
<button id="tdelete">DEL</button>
<button id="ttambah">TAMBAH</button>
<br>
<span id="status"></span>
<img src="loading.gif" id="loading" style="display:none">
</body>
</html>
) ): ) $ % % &
#% 1 $ - # # 1 # )
<?php
$op = $_GET['op'];
if($op == "ambiloption"){
$option = mysql_query("SELECT nik FROM datakaryawan");
echo "<option>Pilih NIK</option>\n";
while($op = mysql_fetch_array($option)){
echo "<option>".$op['nik']."</option>\n";
}
}else if($op == "ambildata"){
$nik = $_GET['nik'];
$data = mysql_query("SELECT * FROM datakaryawan WHERE nik='$nik'");
$d = mysql_fetch_array($data);
echo $d['nama']."|".$d['email']."|".$d['alamat'];
77
}else if($op == "update"){

$nama = htmlspecialchars($_GET['nama']);
$email = htmlspecialchars($_GET['email']);
$alamat = htmlspecialchars($_GET['alamat']);
$update = mysql_query("UPDATE datakaryawan
SET nama='$nama',
email='$email',
alamat='$alamat'
WHERE nik='$nik'");
if($update){
echo "sukses";
}else{
echo "error";
}
}else if($op == "delete"){
$del = mysql_query("DELETE FROM datakaryawan WHERE nik='$nik'");
if($del){
echo "sukses";
}else{
echo "error";
}
}else if($op == "tambah"){
$nama = htmlspecialchars($_GET['nama']);
$email = htmlspecialchars($_GET['email']);
$alamat = htmlspecialchars($_GET['alamat']);
$tambah = mysql_query("INSERT INTO datakaryawan
VALUES('$nik','$nama','$email','$alamat')");
if($tambah){
echo "sukses";
}else{
echo "ERROR";
}
}
?>
78

Panduan Lengkap PHP Jquery Ajax

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Panduan Lengkap PHP Jquery Ajax

Uploaded by

Copyright:

Available Formats

http://blog.codingwear.

<script language="javascript" type="text/javascript">

-- Table structure for table `tabelDataKaryawan`

CREATE TABLE `tabeldatakaryawan` (

'() ' * " "

<select size="1" name="karyawan" id="karyawan"

var ajaxku = new XMLHttpRequest();

object.open(sMethod, sUrl [, bAsync] [, sUser] [, sPassword])

J 4 & ) 2 .05;* & ) 2 , & J .05;* 5 ! %

: & , & J 0 1 302 ( % %

&: : : , & J & )% 302

0' 52E& , & J 0 1 302 %

' 2'E , & J 0 1 302 ' %

! & % $ %) $ % # &%! ' !

var ajaxku = new XMLHttpRequest();

<menu id="file" value="File">

< xx yy='nn'>< /xx> { "xx": {"yy":"nn"} }

$json = '{"messages": {';

//hilangkan koma (,) di akhir

//lengkapi penutup format JSON

var teks_div = document.getElementById('divteks');

var jsonstr='{"nama":"Desrizal", "umur":28, "teman":["Nurmi", "Sarah",

$json = '{"messages": {';

$json .= '"pesan":[ {';

var elTitle = nli.getElementsByTagName( 'title' );

A - " ## " "

<p><span id="contact" style="cursor:hand;background-

<p><button id="start">Start Animasi</button><button id="stop">Stop

<p class="p2">Paragraf ini cuma berubah banyak properti CSS</p>

<form method="POST" action="--WEBBOT-SELF--" style="padding:10">

CREATE TABLE `datakaryawan` (

INSERT INTO `datakaryawan` (`nik`, `nama`, `email`, `alamat`) VALUES

//jika ada event onchange ambil data dari database

//tampilkan status loading dan animasinya

//lakukan pengiriman dan pengambilan data

//masukkan ke masing-masing textfield

//jika tombol update diclick

//jika tombol DEL diklik

//jika link Tambah Data Karyawan diklik

//jika tombol TAMBAH diklik

}else if($op == "update"){

You might also like