Panduan Lengkap PHP Ajax jQuery

(1)

(2)

2

(3)

3 !"#

$ %

&

'

(

)

*

)

(+

, -.

('

/

!"#

+

0 '

0

1

0

2

1

0 3&

/

34 5 4

0 "

6"#

0

7 "

8

0 +)

9

6

2

8 :8

;

+'

'/

<

54

0 '

(4)

(5)

5

!

"

# ! # # $ !

# ! % % !

$ $ ! $ & &' # #

% ( $ # #

( # )

# % $ # # # # (

#$ ! # )

& $ ! #% # # % #

& % # $ ! # # #

( $ * ( ! #

+ # # % % # #

• # # , )% ) # # ) *)

# # #

• ! #% # # # - #

) #% # #

• & $ & ! $ # )% (

# # $

• &' $ &%! ' ! % $ # # . #% ! / # #

# # #

' # 0 1 $ #

2 % # ! ##

#% (

(6)

6

3 # # 4# ) #

! % $ # 5% & # # % %

6 7 # 4 # )% $ % $ #

# * % 8 #

# % % $ # ( # # #

*)

! " " #

& -$ ! # #% # ! % #

!

& % # $ ( 1 # $

# % ( * % ! # 3 #

+ # # # # #

$ # ! # # # #

+ # $ ( #% ! .

/ # # %

(7)

7

8% ! # # $ # # $

$ ! 9 2 # #

! % #* # # $

$ % )$

# ) # # % $ # # 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, `Email` varchar(50) NOT NULL, `Alamat` tinytext NOT NULL, PRIMARY KEY (`NIP`)

(8)

8

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){ return new XMLHttpRequest(); }

if (window.ActiveXObject){

return null; }

(9)

9

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

#% $ #% #

var url="ambildata.php";

# # # # %

" $ # # #% # ) "

, "

<?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'];

} } ?>

(10)

10

- " ! " !

;% % * %( %- $ # % % #

+ # # #% ! "

<body> Nama :

<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(); var url="ambildata.php"; url=url+"?q="+nip;

url=url+"&sid="+Math.random();

ajaxku.onreadystatechange=stateChanged; ajaxku.open("GET",url,true);

ajaxku.send(null); }

(11)

%-11

(12)

12

• # # 1 #

(13)

13

(14)

14

+ # # % #

% #$ # # % * % % %

)

+ # % % #

) $ .

!% ! % _# ₎ _# _% _#

% +%

%

-%

#%

-) 1

% _# _* _*%

+ # : % # 6

*& $ .

% ! * # 1 # %

% % # # # % %

+ # % % # 6

$ .

% *! !

0 % # ) #% %

0 % # % ) ##

% * % $ 30 $ 1 #

#

1 # %

(15)

15 %

% #

object.readyState == nState

' "

E $

0 (Uninitialized)

' # $ % ! ! $ #

. % /

1 (Open)

' # $ %

2 (Sent)

% - # /

3 (Receiving)

+ - # /

4 (Loaded)

- # /

) *% $ # #

0

# % / - # #

1 # # # / - # #

# % $ # % ! # 8

. HH ?/ % # # 2 :- % D

0 1

function stateChanged(){ var data;

if (ajaxku.readyState==4){ data=ajaxku.responseText; }

(16)

16

% #

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

(17)

17

?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

' "

+ ( !% %( %

(18)

18

0

# % % *% $ - # # 8 *

*% ( # % 1 # % *

# # % %

# * *% *% (% #

# # !#$ (% # !# # ! # # #

0

var ajaxku;

ajaxku = new XMLHttpRequest(); ajaxku.open("GET", url, true); ajaxku.timeout = 10000;

ajaxku.ontimeout = timeoutPeringatan; ajaxku.send(null);

.

*&

% #

7 #### (((( 8 9( 9

0

. # # , %( 2 :- % D

0

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 }

(19)

19 *&

% #

7 ! 8 9( 9

0

# % ( "

8 # $ % % - # # # !%

* # # %

0

{

alert("XDR ontimeout"); }

...

ajaxku.ontimeout = timeo;

; ! 1

% #

XMLHttpRequest.abort()

0

# # , %( 2 :- % D

% *! ! * % 0 1 # %

% # % # . ! *! ! $

% * # I . " /

* % $ 30 $ 1 # #

% #

(20)

20

)

, % # % # # # #% #

G: $ ' $ : & # ! *

# , % # % 30 * (

% 4 !

$ ' % 2 # # % ! % % .

# $ # % $

## $ # $ # # /$ 3 " #

% ! % % # # # # )

# # 3 " $ ' $ , %(

2 :- % # # % # # %

# ' % 2 # # # % #

% ' % 2 # # (% # % #

+ # % ,% , , & % J %

., & J/ * %

J 4

%

& ) 2 .05;* A A/

& ) 2 , & J .05;* @ =/

5 ! %

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 ; %!#

(21)

21

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

1 # %

% #

object.send( [varBody])

)

! & ' % 2 # % 1 #

% $ ! $

% %

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

% .&' /

# # 1

% #

object.setRequestHeader(sName, sValue)

)

' , % #

( , % #

0

var ajaxku = new XMLHttpRequest(); ajaxku.open("POST", sURL, false);

ajaxku.setRequestHeader("Content-Type", "text/xml"); ajaxku.send(sRequestBody);

'# # # # # % !% # -$ !% %

# # # % !% $ !% %

* # # # ) # $ # % % #

(22)

22

Amerika Serikat Arab Saudi Bahrain Belanda

Brunei Darusalam Chili Korea Selatan Korea Utara Malaysia

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

(23)

23

drz.send(params); }

}

function buatajax(){

if (window.XMLHttpRequest){ return new XMLHttpRequest(); }

if (window.ActiveXObject){

return null; }

function stateChanged(){ 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 = "";

}

</div>

(24)

24

+ # # % ' $ %

#

#: # $) < ( $" $ = <>>><8 # <

# $ 3

#: # $) < $" # 3

#: # $) $" $ $ 3

% # #

# # # # # # % .% # / - $

# # ) ./

; #$ # - $ # #% % # # # #% # $

# $ # # % # - # 1 #

" 1 # #% '8$ # # # #% #

# # #% .! /$ ) # # # 1

E $ # 1

, .

<?php

mysql_connect("localhost","root",""); mysql_select_db("test");

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

?>

(25)

(26)

26

"

(27)

-27

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 # % $ .#% /

(28)

28

# # # R .# #% # # /

# S .# #% # / # % $ .#% /

) * %%%+ +

' " . / # $ # $

) $ % # # # * #

#

) * %%%+ +

% # % # # 3 !% $ # #

& # !# ! TUT # # # # #

(29)

29

) * %%%+ +

# ; $ # ! )% %# #

# #

(30)

30

0 %4'

# # !% % *!% % # 'E % % + # #

$ ) #

</menu>

# # # # 'E

{"menu": { "id": "file", "value": "File", "popup": {

"menuitem": [

{"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ]

} }}

+ #

<window title="Sample Konfabulator Widget"> <name>main_window</name>

<alignment>center</alignment> </image>

<alignment>center</alignment> <onMouseUp>

sun1.opacity = (sun1.opacity / 100) * 90; </onMouseUp>

(31)

31

+ # 'E

{"widget": {

"debug": "on",

< xx yy='nn'>< /xx>

{ "xx": {"yy":"nn"} }

%4'

&

/ $ 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);

(32)

32

CREATE TABLE `message` (

`message_id` INT(11) NOT NULL AUTO_INCREMENT, `chat_id` INT(11) NOT NULL DEFAULT '0',

`user_id` INT(11) NOT NULL DEFAULT '0', `user_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",

(33)

33

$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 # # !% % # $ # #% -$

(34)

34

9 8 %4' 6 "7

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>

(35)

35

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`)

var ajaxku = buatAjax(); var tnama = 0;

(36)

36

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){

return new 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 += " :

timer = setTimeout("ambilPesan()",1000); }

function kirimPesan(){

pesannya = document.getElementById("pesan").value namaku = document.getElementById("nama").value

(37)

37

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

Nama : <input type=text name=nama id=nama>

</div>

Pesan : <input type=text name=pesan id=pesan size=50> <input type=button value="kirim" onclick="kirimPesan()"> </form>

{"messages": {"pesan":[

{"id":"35", "nama":"Batman", "teks":"halo Nurmi", "waktu":"16:31" }, {"id":"36",

"nama":"Nurmi", "teks":"halo juga", "waktu":"16:31" }, {"id":"37",

(38)

38

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;

pesanakhir = data.messages.pesan[i].id; }

- # # # # % %

#

pesanakhir = data.messages.pesan[i].id;

- # # # # ) % ./

timer = setTimeout("ambilPesan()",1000);

+ # # ! $ # # # # # # :E :0$ #

)% # :E :0 # % % * # # 3 # !

* # # # $ # # %# # ) #

function aturKirimPesan(){ clearInterval(timer); ambilPesan();

}

5 # # %

# # #% $ % # %

$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");

(39)

39

$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 = substr($json,0,strlen($json)-1); $json .= ']';

$query = mysql_query("select * from drzchat where nomor > $akhir");

@ ' # )% % $ # # ! ! #

# # echo $json;

(40)

40

? - " " 0

. ! % % % / )% % - 5%

$ # # %

ElementHTML.innerHTML = objekAjax.responseText;

!% % # # # # -$ 1 #

) $ ) $ #% *#%

# #%

(41)

41

@ - " #

-* # #

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;

border:1px solid #ccc; padding : 3px

}

(42)

-42

@ # "

function init (){

var tabs = document.getElementsByClassName('tabs'); for (var i = 0; i < tabs.length; i++) {

function ambilTabData(id) { var url;

ajaxku.onreadystatechange = tampilkanHalaman; ajaxku.send(null);

}

function buatAjax(){

}

function tampilkanHalaman(){ if(ajaxku.readyState == 4){

var halaman = ajaxku.responseText;

document.getElementById("content").innerHTML = halaman; }else{

document.getElementById("content").innerHTML = "Loading...."; }

}

</script>

(43)

43

var halaman = ajaxku.responseText;

document.getElementById("content").innerHTML = halaman;

+ # !% %

A " "

Ini adalah isi dari halaman "halaman1.html"<br /> Ini adalah isi dari halaman "halaman1.html"<br /> Ini adalah isi dari halaman "halaman1.html"<br /> </font>

(44)

44

<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> var url = "data.xml"; function buatAjax(){

}

function ambilXMLDoc(){

drz.open("GET",url+"?sid="+Math.random(),true); drz.onreadystatechange = prosesData;

drz.send(null); }

function prosesData(){

(45)

45

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>

<tr>

<th width="20%">Author</th> <th width="80%">Title</th> </tr>

</tbody> </table> </body> </html>

+ # # -- # %(

(46)

46

?

(47)

47

'# $ # # !% % % # 1

"" ! "

$(document).ready(function(){

$(".tombol1").click(function(){ $("p").hide(1000);

});

$(".tombol2").click(function(){ $("p").show(1000);

<p>Hello World!</p>

<button class="tombol1">Sembunyikan</button> <button class="tombol2">Tampilkan</button> </body>

(48)

48 %

C

# 1 # * # # #

#

$(selector).action()

• % $ # ) # <

• . ! % /$ # ##

• ! % ./$ < ! % # # #

;% %

$(this).hide()X #

$("p").hide()X # ) #% L M

$(".test").hide()X # ! HT T

$("#test").show()X # HT T

8 # # # # < !

%! % ! % .&' /$ # # ( #

# &'

3 # # # $ # # #% # %#

$(document).ready(function(){ //kode anda di sini });

8% # #% # * %

#% !

window.onload = function(){ //kode anda di sini }

# # !% %

$(".tombol1").click(function(){ $("p").hide(1000);

});

8% $(".tombol1") < # % & #

! H7 % % 7 # # # # $ # < ! '

# $() # % # < 8 # # ) click() 2

# # % ! !# # # .

! HY % % Y/ & # # # ) #

% ! !# ! H7 % % 7 # # # # #

) $("p").hide(1000);

5 hide() show() ) < $ # #

) *) <

C

% " .

! % # # # # % %#

# !% % !

(49)

49

< ! % ! % # # #

. # % %# / $ #% ! %

# # # # % %#

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

% % ' "(

(50)

(51)

51

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

(52)

52

;% %

+ 0 !67

$(".tombol1").click(function(){

$("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 # ! !# %(./ )) !

$(selector).toggle(speed,callback,switch)

(53)

53

$(document).ready(function(){ $(".tombol1").click(function(){ $("p").toggle(true);

<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 # ! !# ) %(./

;% %

$(".tombol1").click(function(){ $("p").slideDown();

});

C

"

E 67 *33 .

# ! ) #

#

$(selector).slideUp(speed,callback)

(54)

54

;% %

$(".tombol1").click(function(){ $("p").slideUp();

});

C

"

-

" 67 *33 .

G &%( ./ 3 ./ # # # $

# # #

#

$(selector).slideToggle(speed,callback)

3 # ! !# ) %(./

;% %

5 0 " - " 67

$("#contact").click(function(){

$("#contact-box").slideToggle("slow"); });

});

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

(55)

55 C

3 ( 67 *33 .

# # $ ! ) #

#

$(selector).fadeIn(speed,callback)

3 # ! !# ) %(./

$(selector).fadeOut(speed,callback)

3 # ! !# ) %(./ 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>

(56)

56 C

3 - 67 *33 .

# # # % ! #

#

$(selector).fadeTo(speed,opacity,callback)

3 # ! !# ) %(./

3 # % ! I

;% %

$(".tombol1").click(function(){ $("p"). fadeTo(1000,0.6); });

$(selector).animate(styles,speed,easing,callback)

(57)

57

$(document).ready(function() {

$("#box").animate({height:"300px"}); });

$("#box").animate({height:"100px"}); });

});

(58)

58

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

) $

$(document).ready(function(){ $("#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"

(59)

59

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

(60)

60

$(function(){

$("#lihat").click(function(){

var isinya = $("#paragraf").html(); alert(isinya);

});

$("#isikan").click(function(){ var isilagi = $("#isi").val();

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

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

(61)

61

B 0 67

$(function(){

$(function(){

$('.ubahclass').click(function(){ $(".besar").addClass("kecil"); });

});

</script>

<a href="#" class="ubahclass" >Klik </a> <div class="besar">www.desrizal.com</div> </body>

(62)

62

# ) *) #

" $ .

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. ! % / ( ./ 0 % !

0 : " . : &

W.!% / ! . ! % / # #

(63)

63

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

$("#tombol1").click(function(){ $(".p1").css("color","red");

$(".p2").css({"color":"white","background-

color":"#ff8954","font-family":"Arial","font-size":"20px","padding":"5px"}); });

$("#tombol2").click(function(){

var nilai = $(".p1").css("color"); alert(nilai);

}); });

(64)

64

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

$("#tombol1").click(function(){ $("#kotak").width("300px"); $("#kotak").height("300px"); });

$("#tombol2").click(function(){

var nilai = $("#kotak").width(); alert(nilai);

}); });

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

(65)

65

$(selector).offset(coordinates)

!%% #%% $ !% %

background-color : yellow; width : 100px;

height : 100px; position : relative; left : 300;

}

</style>

$(document).ready(function(){ $("#tombol").click(function(){ posisi=new Object();

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

(66)

66

33 ) 67

3 # # # % #

#

$(selector).offset()

;% %

5 0 33 ) 67

$(document).ready(function(){ $("button").click(function(){

$("p").offsetParent().css("background-color","green"); });

});

<p>Klik tombol untuk set background color untuk elemen parent terdekat dari paragraf ini</p>

<button>ubah warna latar</button> </body>

$(selector).position()

;% %

$(".tombol").click(function(){ x=$("p").position();

$("#div1").text(x.left); $("#div2").text(x.top); });

. "" 3 67

3 # # # ! % ) %))

#

(67)

67

%)) - # ! % % #

# %)) #% % # $ # # %)) ! % )

;% %

$(".tombol").click(function(){ $("div").scrollLeft(300); });

. ""- 67

3 # # # ! % % %))

#

$(selector).scrollTop(offset)

%)) - # ! % %

# %)) #% % # $ # # %)) ! % %

;% %

$(".tombol").click(function(){ $("div").scrollTop(300); });

$(document).ready(function(){ $("#home").click(function(){

$("#konten").animate({ scrollTop: 0},"slow"); });

$("#about").click(function(){

$("#konten").animate({ scrollTop: 500},"slow"); });

$("#contact").click(function(){

(68)

68

background-color : lightyellow; padding : 3;

<span class=link id=home>Home</span> <span class=link id=about>About</span> <span class=link id=contact>Contact</span> <div id=konten>

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

(69)

69

Nama :<br>

<input type="text" name="T2" size="20"><br> Komentar :<br>

</form> </div> </div> </body> </html>

3 # # ! % L H#% M # # ;

overflow:hidden;

8 # # # # $ # # ! % # #%

$("#konten").animate({ scrollTop: 500},"slow");

#% #

(70)

70

@

(71)

71

$(selector).load(url,data,callback)

" ) # #

) % % $ # # #

. "" . ) % % $ ) # # #

;% %

# ) # $

Hai ini adalah konten dari file data.txt

# #% - # * % #%

? . " "

$(document).ready(function(){ $("#tombol").click(function(){ $('#teks').load('data.txt');

(72)

72

@ . " "

$(document).ready(function(){ $("#tombol").click(function(){

$('#teks').load("data.php","nama=desrizal&email=drz@desrizal.com",beritah u());

}); });

function beritahu(){

alert("sudah diambil datanya"); }

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

(73)

73 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 !% % # # # #

# (

(74)

74

# # ( <

CREATE TABLE `datakaryawan` ( `nik` varchar(10) NOT NULL, `nama` varchar(50) NOT NULL, `email` varchar(50) NOT NULL, `alamat` varchar(200) NOT NULL, PRIMARY KEY (`nik`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `datakaryawan` (`nik`, `nama`, `email`, `alamat`) 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>

//meloading option NIK dari database

$("#nik").load("proses.php","op=ambiloption");

//jika ada event onchange ambil data dari database $("#nik").change(function(){

(75)

75

$("#tupdate").click(function(){

//ambil nilai-nilai dari masing-masing input

datanya = "&nik="+nik+"&nama="+nama+"&email="+email; datanya = datanya+"&alamat="+alamat;

(76)

76

$("#formtambah").click(function(){ $("#formnik").show(); $("#ttambah").click(function(){

//ambil nilai-nilai dari masing-masing input

(77)

77

Nomor Induk Karyawan : <select id="nik"></select> <br>

<a id="formtambah" style="cursor:pointer;color:red"> <u>Tambah Data Karyawan</u></a>

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

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

(78)

78

}else if($op == "update"){ $nik = $_GET['nik'];

$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"){ $nik = $_GET['nik'];

$del = mysql_query("DELETE FROM datakaryawan WHERE nik='$nik'"); if($del){

echo "error"; }

}else if($op == "tambah"){ $nik = $_GET['nik'];

$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 "ERROR"; }