Panduan Lengkap PHP Ajax jQuery.pdf

http://blog.codingwear.com PHP Ajax Javascript Javascript jQuery Tutorial Tutorial Indonesia

1


"#$%&$'() *+,

www.coding !"#$ .com .com -./0 1.$&%+. #'$2'.33('

2


!"#$"% '(' 67

H7

I7

87

?7

3

4.5.3.%

77777777777 77777777777777777777777 77777777777777777777777 7777777777777777777777777777777 7777777777777777777777777777777 7777777777777777777777777 777777777777777777777 77777777 )*+,*+"-"+ ./"0 77777777777777777777777

8

9#. :.%2 4.'0& 9%). ;(<.=0> 77777777777777777777777777 7777777777777 77777777777777777777777777 7777777777777777777777777 7777777777777777777777777 7777777777777777777777777777 7777777777777777777 7777

?

9#.1.= 9/.@ 77777777777777777777777 7777777777 77777777777777777777777777 77777777777777777777777777 77777777777777777777777777 7777777777777777777777777 7777777777777777777777777 7777777777777777777777777777 777777777777777777777777777 77777777777777

?

ABC4<<#D(E0(&< 7777777777777777777777777 777777777777 777777777777777777777777777 777777777777777777777777777 7777777777777777777777777 7777777777777777777777777 7777777777777777777777777777 7777777777777777777777777777 7777777777777

?

;$30%>1.&> )(%2.% "('F(' 777777777777777777777777777 7777777777777 77777777777777777777777777 7777777777777777777777777 7777777777777777777777777 777777777777777777777777777 77777777777777777777777777 77777777777

G

1234$$56*78*($ 9:/*;$ 777777777777777777777777777777777777777777777777777777777777777777777777777

6I

J'$#('<> .<.0 9<'>-0< 7777777777777777777777777 777777777777 77777777777777777777777777 77777777777777777777777777 7777777777777777777777777 7777777777777777777777777 7777777777777777777777777777 77777777777777777777777777 77777777777

68

77777777777 77777777777777777777777 77777777777777777777777 7777777777777777777777777777777 777777777777777777777777777777 77777777777 <=%>"$ !"$" 6*(5=+ ./"0 77777777777777777777777

HK

L"MN 77777777777777777777777777 777777777777 777777777777777777777777777 7777777777777777777777777 7777777777777777777777777 7777777777777777777777777 7777777777777777777777777 7777777777777777777777777777 777777777777777777777777777 777777777777777777777777 777777777777

HG

9494 77777777777777777777777 7777777777777777777777777 7777777777777 7777777777777777777777777 7777777777777777777777777 7777777777777777777777777 7777777777777777777777777777 7777777777777777777777777777 777777777777777777777777 77777777777

8O

ABC 77777777777777777777777 77777777777 777777777777777777777777 7777777777777777777777777777 77777777777777777777777777777 7777777777777777777777777 7777777777777777777777777 7777777777777777777777777777 777777777777777777777777777 777777777777777777777777 777777777777

88

7777777777777 777777777777777777777777777 77777777777777777777777777 7777777777777777777777777 7777777777777777777777777 7777777777777777777777777 7777777777777777 )*+,*+"-"+ /?8*%@ 777777777777777777777777777

8K

9#. ><0 /P0('+ 77777777777777777777777777 777777777777 777777777777777777777777777 7777777777777777777777777 7777777777777777777777777 7777777777777777777777777 777777777777777777777777777 7777777777777777777777777777 77777777777777777777 7777777

8G

">%<.1& /P0('+ 7777777777777777777777777 7777777777777 777777777777777777777777777 777777777777777777777777777 7777777777777777777777777 7777777777777777777777777 777777777777777777777777777 7777777777777777777777777777 77777777777777777777 7777777

8Q

/P0('+ "(5(R<$' 77777777777777777777777 77777777777 777777777777777777777777777 777777777777777777777777777 7777777777777777777777777 7777777777777777777777777 777777777777777777777777777 7777777777777777777777777777 77777777777777777777 7777777

8Q

/P0('+ SF(%<& 777777777777777777777777 777777777777 7777777777777777777777777777 7777777777777777777777777777 7777777777777777777777777 7777777777777777777777777 777777777777777777777777777 7777777777777777777777777777 77777777777777777777 7777777

?O

ST(1U(T(1 )(%2.% /P0('+ 777777777777777777777777 777777777777 777777777777777777777777777 777777777777777777777777777 7777777777777777777777777 7777777777777777777777777 7777777777777777777777777777 77777777777777777777

?6

B.%>#05.&> 4VBC )(%2.% /P0('+ 7777777777777777777777777 77777777777 77777777777777777777777777 7777777777777777777777777 7777777777777777777777777 777777777777777777777777777 777777777777777

?W

B.%>#05.&> X"" )(%2.% /P0('+ 77777777777777777777777777 777777777777 777777777777777777777777777 7777777777777777777777777 7777777777777777777777777 7777777777777777777777777777 7777777777777777777 7777

KI

Y(- V.- "R'$55 X$%<(%< ZX$%<$=[ 777777777777777777777777 777777777777 7777777777777777777777777 7777777777777777777777777 7777777777777777777777777 7777777777777777777777777777 777777777777777

KG

7777777777 77777777777777777777777 77777777777777777777777 7777777777777777777777777777777 7777777777777777777777777777777 7777777777777777777777777 7777777777777777777777777777 777777777777777777777 777777 /?8*%@ ./"0 7777777777777777777777

GO

\0%2&>UT0%2&> 9/.@ /P0('+ 77777777777777777777777777 777777777777 77777777777777777777777777 7777777777777777777777777 7777777777777777777777777 777777777777777777777777777 7777777777777777777777777777 7777777777777

G6

]%&('<^ _(5(<(^ `#).<( ).% 9%>3.&> C$.)>%2 777777777777777777777777 777777777777 7777777777777777777777777 7777777777777777777777777 77777777777777777777777 77777777777

GI

http://blog.codingwear.com PHP Ajax Javascript jQuery Tutorial Indonesia

" #$%&$%'('% )*)+

4


"#$ %$&' ($)*+ $&,$ -./$(*0 ,$-$(./ '%0' /$/.('1 -$('2'3 #4# )*)+ '%0' 5'3.6 6.0'5 /$/7.%8'1 7$%&$9'5.'% 0'6'3 /$%&$%'1 : "; 4<=> ?; *'@'6A3179 B; #4# ,1('5C'% /$/-'A' -.C. '9'. 0'31 1%9$3%$9 .%9.C /$/7$('2'31 4<=>D *'@'6A3179 0'% #4#

"#$-$( "1"2 )*)+ '0'('5 61%&C'9'% 0'31 )68%A53E%E.6 *'@',A3179 '%0 +=>; )*)+D 9$30131 0'31 4<=>D *'@'6A3179D F4<=> 0'% FG= 8'%& C$/ .01'% 01&'-.%&C'% 0$%&'% -'5'6' 7$/E&3'/'% H$- 01 6161 6$3@$3 6$7$391 #4# 0'% ),#D 6$51%&&' /$/-$%9.C 6.'9. '7(1C'61 -$3-'616 H$- 8'%& 1%9$3'C91I; )*)+ -.C'%('5 -'5'6' 7$/E&3'/'% -'3.D 9$9'71 '0'('5 9$C%1C -'3. .%9.C /$/-.'9 '7(1C'61 H$($-15 -'1CD ($-15 A$7'9 0'% ($-15 1%9$3'C91I; F$%&'% )*)+D *'@'6A3179 0'7'9 ('%&6.%& -$3CE/.%1C'61 0$%&'% 6$3@$3 0$%&'% /$%&&.%'C'% E-2$C !"#$%%&'()*(+%; F$%&'% E-2$C 1%1D 2'@'6A3179 0'7'9 /$('C.C'% 93'%6'C61 0'9' 0$%&' 6$3@$3 H$-D 9'%7' 5'3.6 /$J!"#$%&'() 5'('/'% H$- 9$36$-.9 6$A'3' C$6$(.3.5'%; K$31C.9 '0'('5 9$C%E(E&1 8'%& 9$3/'6.C 0'('/ '7(1C'61 )*)+ : •

•

•

•

4<=> 8'%& 01&.%'C'% .%9.C /$/-.'9 L$- IE3/6 0'% /$%&1%0$%91I1C'61C'% I1($0JI1$(0 8'%& 'C'% '%0' &.%'C'% 0'('/ '7(1C'61; *'@',A3179 '0'('5 CE0$ 1%91 .%9.C /$%2'('%C'%'7(1C'61 )2'M 0'% .%9.C /$/-'%9. /$/I'61(19'61 CE/.%1C'61 0$%&'% '7(1C'61 ; F4<=>D '9'. F8%'/1A 4<=>D /$/-'%9. '%0' .%9.C /$/-.'9 IE3/ '9'. H$- '%0' 01%'/16; )%0' 'C'% /$%&&.%'C'% ,-./0D ,+&120 0'% $($/$% 4<=> 01%'/16 ('1%8'; FG=D FEA./$%9 G-2$A9 =E0$(D 'C'% 01&.%'C'% N/$('(.1 CE0$ *'@',A3179O .%9.C -$C$32' 0$%&'% C$0.' 693.C9.3 0'31 4<=> 0'% +=> '%0' 8'%& 0'('/ -$-$3'7' C'6.6 -$3'6'( 0'31 6$3@$3;

2345//#6.7*.+/ G-2$C 7$39'/' 8'%& 5'3.6 '%0' /$%&$391 '0'('5 +=>4997P$Q.$69D /.%&C1% -'&1 '%0' 9$30$%&'3 6$6.'9. 8'%& -'3.; R%1 '0'('5 E-2$C 2'@'6A3179 0'% /$/-.'9%8' 6$0$35'%' 6$7$391 019.%2.CC'% 01 CE0$ " 01 -'H'5 1%1 :

89,. :; 3.<=*$/ 9=>.- 2345//#6.7*.+/; <script language="javascript" type="text/javascript"> var xmlHttp = new XMLHttpRequest();

5


S%9.C /$%0'7'9C'% 0'% /$%&131/ 0'9' 0'31TC$ 6.'9. 0'9'-'6$ '9'. I1($ 01 6$3@$3 /$%&&.%'C'% 2'@'6A3179 93'0161E%'(D /'C' '%0' 5'3.6 /$/-.'9 4<=> UE3/; F'% .6$3 5'3.6 /$%&C(1C 9E/-E( V6.-/19W .%9.C /$%&131/T/$%0'7'9C'% 1%IE3/'61D /$%.%&&. 3$67E% 0'31 6$3@$3D C$/.01'% 5'('/'% 8'%& -'3. -$3.7' 5'61(%8' 'C'% 01J(E'0; X'3$%' 6$3@$3 6$('(. /$/-$31C'% 5'('/'% -'3. 6$91'7 .6$3 9$C'% 9E/-E( 6.-/19D '7(1C'61 H$- 6$0$35'%' 'C'% -$32'('% ('/-'9 0'% 'C'% C.3'%& .6$3JI31$%0(8;

?$<=$) @; #.)=$&,0'$& A.= $#B0-$+0 /)$,0+09&$B ,.&'$& ">$C

F$%&'% )2'MD 2'@'6A3179 'C'% -$3CE/.%1C'61 6$A'3' ('%&6.%& 0$%&'% 6$3@$3 /$('(.1 E-2$C 2'@'6A3179 8'19. !"#$%%&'()*(+% 9$36$-.9; F$%&'% E-2$C !"#$%%&'()*(+%D 6.'9. 5'('/'% H$- 0'7'9 /$/-.'9 3$Q.$69 C$D 0'% /$%0'7'9C'% 3$67E% 0'31 6$3@$3 H$- 9'%7' /$J3$(E'0 5'('/'% 6$A'3' C$6$(.3.5'%; S6$3 'C'% 6$('(. 9$9'7 0$%&'% 5'('/'% 8'%& 6'/'; K'5C'% .6$3 910'C 'C'% 9'5. C'('. '0' 0'9' 8'%& 01C131/ 0'% 019$31/' 0'31 6$3@$3D C'3$%' 2'@'6A3179 /$('C.C'% 93'%6'C61 0'9' 01 -'(1C ('8'3; K'&.6%8' ('&1 7$3/1%9''% 01C131/ !"#$%&'($()"D 8'%& -$3'391 -'5H' CE0$ *'@',A3179 N0'% 7$%&&.%'O 910'C /$%.%&&. 7'0' 6$3@$3 .%9.C /$3$67E%; ,$51%&&' 7$%&&.%' 0'7'9 9$3.6 /$/'6.CC'% 0'9'D -$3&.(13 6$C19'3D 0'% /$%&&.%'C'% '7(1C'61;

6


XE0$ *'@',A3179 -'5C'% -16' /$%0'7'9C'% 0'9'D /$('C.C'% 7$3519.%&'%D 0'% /$%&131/ 7$3/1%9''% ('1%D 6$/.' 9'%7' A'/7.3 9'%&'% 7$%&&.%'Y R%1 '0'('5 C$C.'9'% 0'31 !"#$%%&'()*(+%; 4'( 1%1 0'7'9 -1A'3' -E('CJ-'(1C 0$%&'% 6$3@$3 6$/.' 8'%& 011%&1%C'%D 9'%7' 7$3%'5 9'5. 7$%&&.%' 9$%9'%& '7' 8'%& 6$-$%'3%8' 9$32'01; 4'61(%8' '0'('5D 01%'/16 3$67E%61ID 7$%&'('/'% 8'%& 6'%&'9 1%9$3'C91I 6$7$391 '7(1C'61 0$6C9E7D 9'71 0$%&'% 6$/.' C$C.'9'% R%9$3%$9 01 -$('C'%&%8'; G-2$C !"#$%%&'()*(+% 016.77E39 5'/713 6$/.' -3EH6$3 NR%9$3%$9 ZM7(E3$3D U13$IEMD [53E/$D G7$3'D 0'% ,'I'31O; S%9.C /$/-.'9 E-2$C !"#$%%&'()*(+% 6.7'8' -16' 010.C.%& E($5 -$-$3'7' -3EH6$3 '0'('5 6$-'&'1 -$31C.9 :

89,. @; 3.<=*$/ 9=>.- 2345//#6.7*.+/ *&/*- =.=.)$#$ =)9A+.); 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"); }

89<*&0-$+0 D.&'$& E.)F.) GC$D 0'31 7'0' -1%&.%&J-1%&.%& 0$%&'% 7$%2$('6'% 01 '9'6D /'31 C19' (15'9 AE%9E5 -$31C.9D -'&'1/'%' A'3' /$/-.'9 E-2$C '2'M 0'% -'&'1/'%' A'3'%8' -$3CE/.%1C'61 0$%&'% 6$3@$3; X$91C' )2'M /$('C.C'% CE/.%1C'61 0'% 93'%6'C61 0'9' 0$%&'% 6$3@$3D -$3'391 '%0' 5'3.6 /$/7.%8' 6.'9. 73E&3'/ H$- 8'%& -$32'('% 01 6161 6$3@$3; )0' -'%8'C -'5'6' 7$/E&3'/'% 8'%& -$32'('% 01 6161 6$3@$3D 6$7$391 #4#D ),# 0'% 6$-'&'1%8'; #'0' AE%9E5 -$31C.9 C19' 'C'% /$%&&.%'C'% -'5'6' #4#; #'0' AE%9E5 -$31C.9 C19' 'C'% /$/-.'9 6.'9. 73E&3'/ 8'%& /$%&'/-1( 0'9' 8'%& C19' ($9'CC'% 01 0'('/ 0'9'-'6$ =8,\>; *'01 /16'( C19' 7.%8' 9'-$(F'9'C'38'H'% 01 0'9'-'6$ =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


K$31C.9 '0'('5 161 0'31 9'-$(F'9'X'38'H'% 9$36$-.9

GHI ]]^_à

G$<$ F$631b'(

J<$0B 03bcI/1;AE/

]]^_`d

e.3/1 f.(19'

%.3/1cI/1;AE/

]â`_B

K.01 4'39E%E

-.01cI/1;AE/

"B$<$/ ,93$$9 ""[ %E; BB?D <$/-'&'7.3'D #'7.' <$3'6 Z69'9$ eE; ?B_D <$/-'&'7.3'D #'7.' K'3'C \ P10&$ A'/7

>'(. C19' /$/-.'9 5'('/'% 4<=> .%9.C /$%'/71(C'% 0'9' 9$36$-.9D /$%&&.%'C'% 6$/'A'/ 03E7J0EH% -EMD 8'%& C'('. 01C(1C /'C' 'C'% /$%&'/-1( 0'9' 01 =8,\> 0'% /$%'/71(C'%%8' 01 5'('/'% C'38'H'%;59/( 9'%7' 5'3.6 /$J3$(E'01%& C$6$(.3.5'% 5'('/'%

89,. K; ,$/$-$)%$A$&;(/ <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){ return new XMLHttpRequest(); } if (window.ActiveXObject){ return new ActiveXObject("Microsoft.XMLHTTP"); } 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 = ""; } } } Nama :

8


Alamat :
Pada contoh berikut anda akan memilih nama dan mengambil data alamat di database
berdasarkan nama tersebut dan menampilkannya di halaman ini tanpa harus me-reload
keseluruhan halaman

#'0' CE0$ 01 '9'6D 7'0' -'316 CE0$ -$31C.9 : var url="ambildata.php";

)%0' 'C'% /$('C.C'% 93'%6'C61 0'9' 0$%&'% 6$3@$3 0$%&'% -'%9.'% 73E&3'/ #4# 8'%& -$3%'/' $<=0B,$/$;#(#D .%9.C 19. /'31 C19' -.'9 CE0$ .%9.C I1($ $<=0B,$/$;#(#;

89,. L; $<=0B,$/$;#(#

K$31C.9 9'/71('% 0'31 ,$/$-$)%$A$&;(/
9


?$<=$) @; M$<#0B$& ,$/$-$)%$A$&;(/ Nama :

Alamat :

XE0$ 01 '9'6 C19' /$/-.'9 IE3/ 4<=> -1'6'D 01 /'%' C19' 'C'% /$/-.'9 03E7J0EH% -EM %'/'J %'/' C'38'H'%; #'0' $($/$% ,+(4(5%0 9$30'7'9 CE0$ 6257128(91:;.4-1%1<%7.+=/14*(>, 8'%& '391%8' '7'-1(' '0' $@$%9 7$3.-'5'% 9$35'0'7 AE/-E -EMD 0$%&'% A'3' /$/1(15 6'('5 6'9. E791E%D /'C' 6$&$3' $C6$C.61 I.%&61 1:;.4-1%1<2.&> 8'%& 9$30'7'9 01 2'@'6A3179D 0'% CE0$ %7.+=/14*( -$3I.%&61 .%9.C /$%&'/-1( %1('1 0'31 E791E% 8'%& 0171(15; X$/.01'%D /'31 C19' (15'9 CE0$ 2'@'6A3179; 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); }

U.%&61 1:;.4-1%1<2.&) 'C'% 01$C6$C.61 6$91'7 .6$3 /$/1(15 %'/' C'38'H'% 7'0' AE/-EM;

10


•

•

•

•

•

•

•

1?1@A* 9 ;*1%1?1@<>B C19' /$/-.'9 E-2$C !"#$%%&'()*(+% 0$%&'% A'3' /$%2'('%C'% I.%&61 ;*1%1?1@<>B 01 /'%' 7'0' I.%&61 9$36$-.9 9$30'7'9 CE0$ .%9.C /$/-.'9 E-2$C !"#$%%&'()*(+%. /1C *C49D1:;.4-1%1=&7&DB X19' /$%&J6$9 I1($ #4# 8'%& 'C'% -$C$32' 01 6161 6$3@$3; *C49*C4EDF)9DE2.&, C19' /$/'6.CC'% %1('1 %17D 8'%& 01'/-1( 0'31 03E7J0EH% -EM C$ 0'('/ @'31'-$( Q *C49*C4EDG+.-9DE"1%7=C12-6:<>B C19' /$/'6.C'% '%&C' 3'%0E/ C$ 0'('/ @'31'-$( 610D 5'( 1%1 -$3&.%' .%9.C /$%A$&'5 6$3@$3 /$%&&.%'C'% A5'A5$0 I1($ '9'. /$%A$&'5 0'9' 8'%& 01-$31C'% '0'('5 0'9' 8'%& ('/'; 1?1@A*=62C(1-H+%1%(57128(9+%1%(I7128(-, 6$91'7 9$32'01 7$3.-'5'% 9$35'0'7 73E7$391 3$'08,9'9$D 'C'% 6$&$3' /$%2'('%C'% I.%&61 +%1%(I7128(-<>; 1?1@A*=6&(2, /$/-.C' E-2$C !"#$%%&'()*(+% 0$%&'% /$9E0$ gZ< 0'% SP> 8'%& 'C'% /$('C.C'% 'A91E% 01 6161 6$3@$3; 1?1@A*=+(2-<2*44>B /$%&131/ 4<<# 3$Q.$69 C$ 6$3@$3;

U.%&61 ;*1%1?1@<> -$3&.%' .%9.C /$/-.'9 +=>4997P$Q.$69D 7$%2$('6'%%8' -16' '%0' (15'9 01 CE0$ ?; =$/-.'9 E-2$C +=>4997P$Q.$69 .%9.C -$-$3'7' -3EH6$3; 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 = ""; } } } •

•

U.%&61 +%1%(I7128(-<> -$3&.%' .%9.C /$%'%&'%1 21C' 9$32'01 7$3.-'5'% 73E7$391 3$'08,9'9$D AE-' (15'9 CE0$ 1?1@A*=62C(1-H+%1%(57128(9+%1%(I7128(-= 1?1@A*=C(1-HM%1%(99N, *1C' %1('1 73E7$391 3$'08,9'9$ '0'('5 6'/' 0$%&'% _ N_ '391%8' '0'('5 3$67E% 0'31 6$3@$3 6.0'5 CE/7($9OD /'C' C19' /$%&'/-1( 9$C6TE.97.9 8'%& 015'61(C'% E($5 73E&3'/ #4# N'/-1(0'9';757O

*1C' C19' (15'9 E.97.9 8'%& 015'61(C'% 73E&3'/ #4# $<=0B,$/$;#(# '0'('5 7'0' -'316 CE0$ (576 O-PQ141:1%QRS •

-65*:(2%=8(%K4(:(2%THU-=/14*( 9 -1%1, >'(. %1('1 '9'. E.97.9 8'%& 015'61(C'% 0'31 $<=0B,$/$;#(# 9$36$-.9D C19' /'6.CC'% C$ 0'('/ $($/$% %(@%1C(1 8'%& /$/7.%8'1 10 V'('/'9W;

#$%2$('6'% .%9.C CE0$ $<=0B,$/$;#(# : •

•

11

=$('C.C'% CE%$C61 C$ 0'9'-'6$ =8,\> =$%&'/-1( %1('1 @'31'-$( Q 0$%&'% /$9E0$ gZ

12

•

=$('C.C'% Q.$38 .%9.C /$%&'/-1( '('/'9 8'%& 6$6.'1 %17;

•

>'(. /$/-$31C'% E.97.9 '('/'9 8'%& 010'7'9 0$%&'% /$%&&.%'C'% (576=


? +=>4997P$Q.$69 G-2$A9

13


#'0' K'- 1%1 C19' 'C'% /$%&$%'( ($-15 ('%2.9 0$%&'% E-2$C !"#$%%&'()*(+%; ,$-'&'1 6$-.'5 E-2$CD /'C' !"#$%%&'()*(+% /$/1(1C1 73E7$391J73E7$391 0'% 2.&' /$9E0$ /$9E0$ 01 0'('/%8';

I)9#.)/0 $/$* "/)0=*/ K$31C.9 '0'('5 #3E7$391 0'31 E-2$C !"#$%%&'()*(+%

I)9#.)/% AE%693.A9E3 3$'08,9'9$ 3$67E%6$KE08 3$67E%6$<$M9 3$67E%6$+=> 69'9.6 69'9.6<$M9 91/$E.9

D.+N)0#/09& =$%&5'61(C'% 3$I$3$%61 C$ *$(+,!-*,$! 6.'9. E-2$C; =$%&'/-1( +,%," 6''9 1%1 0'31 6.'9. !".-"+,; =$%&'/-1( !"+/$(+" 1$&2 6$-'&'1 6.'9. '33'8; =$%&'/-1( !"+/$(+" 1$&2 6$-'&'1 6.'9. 6931%&; =$%&'/-1( !"+/$(+" 1$&2 6$-'&'1 6.'9. 345 6$*-7"(, 819"*, 4$&"# :684; $19"*,; =$%&'/-1( CE0$ 69'9.6 4<<# 0'31 6.'9. !".-"+,; =$%&'/-1( 69'9.6 I31$%0(8 4<<# 0'31 6.'9. 3$Q.$69; =$%0'7'9C'% '9'. /$%J6$9 %1('1 91/$JE.9;

K$31C.9 '0'('5 Z@$%96 0'31 E-2$C !"#$%%&'()*(+% V JF.&/ D.+N)0#/09& E%3$'0869'9$A5'%&$

=$%J6$9 '9'. /$%&'/-1( $@$%9 5'%0($3 .%9.C 6.'9. 3$Q.$69 '61%C3E%;

E%91/$E.9

)C'% 9$37'%&&1( C$91C' '0' $3E3 91/$E.9;

K$31C.9 '0'('5 =$9E0$ 0'31 E-2$C !"#$%%&'()*(+% V 3./(9, D.+N)0#/09& '-E39

=$%&JA'%A$( <==> !".-"+,;

&$9)((P$67E%6$4$'0$36 =$%&5'61(C'% 0'I9'3 CE/7($9 0'31 3$67E% ?"%&"!+; &$9P$67E%6$4$'0$3

=$%&5'61(C'% 3$67E% 5$'0$3 8'%& 0167$61I1CC'%;

E7

%$=$%&J'661&% /$9E0$D SP> 9.2.'% D '931-.9 ('1%%8' 0'31 3$Q.$69 8'%& 'C'% 01C131/;

6$%0

=$%&131/ 4<<# 3$Q.$69 C$ 6$3@$3 0'% /$%$31/' 6.'9. 3$67E%6;

6$9P$Q.$694$'0$3

=$%'/-'5 4<<# 5$'0$36 8'%& 016$6.'1C'% C$ 3$Q.$69;

14


).$,%E/$/. E%&/$C object.readyState == nState

G0B$0 !"#$#% e1('1 0'31 3$'08,9'9$ -$3.7' 1%9$&$3D 8'19. : 0 (Uninitialized)

G-2$C 6.0'5 01-.'9D 9'71 -$(./ 01<5$ E-2$A9 5'6 -$$% A3$'9$0D 9$9'71 910'C 011%161'(16'61 N/$9E0$ 9#.& -$(./ 017'%&&1(O; 1 (Open)

G-2$C 6.0'5 01-.'9D 9$9'71 /$9E0$ +.&, -$(./ 017'%&&1(; 2 (Sent)

=$9E0$ +.&, 6.0'5 017'%&&1(; ).+#9&+.M.C/ 0'% ).+#9&+.O9,% -$(./ -16' 017'%&&1(' 3 (Receiving)

K$-$3'7' 0'9' 6.0'5 019$31/'' ).+#9&+.M.C/ 0'% ).+#9&+.O9,% -$(./ -16' 017'%&&1(' 4 (Loaded)

,$/.' 0'9' 6.0'5 019$31/'' ).+#9&+.M.C/ 0'% ).+#9&+.O9,% 6.0'5 -16' 017'%&&1(' 3$'08,9'9$ -$361I'9 3$'0JE%(8D 910'C /$/1(1C1 %1('1 &"@%-#,;

P$/$/$& )%0' 910'C -16' /$/'%&&1( 73E7$391 ).+#9&+.O9,% 0'% ).+#9&+.M.C/ .%9.C /$%0'7'9 5'61( 0'31 6.'9. 3$Q.$69 8'%& C19' C131/; *1C' /$/'%&&1( ).+#9&+.O9,% '9'. ).+#9&+.M.C/ 'C'% /$%&5'61(C'% $33E3D C'3$%' 3$67E%6 -$(./ 019$31/' 6 $A'3' C$6$(.3.5'%; X19' 5'3.6 /$%.%&&. 6'/7'1 6$/.' 0'9' 019$31/' N3$'08,9'9$ hh _O; ).$,%E/$/. 017$3C$%'(C'% 01 R%9$3%$9 ZM7(E3$3 d;

P9&/9( Q function stateChanged(){ var data; if (ajaxku.readyState==4){ data=ajaxku.responseText; } }

15


+/$/*+ E%&/$C object.status == nStatus

G0B$0 !"#$#()

*+,% )#$#() -../ 0$!1 ,2#%324$ 5%3(6$ 7!#%1%3'

G*<=.)

D.+N)0#/09&

"ii

[E%91%.$

"i"

,H19A51%& 73E9EAE(6

?ii

GX

?i"

[3$'9$0

?i?

)AA$79$0

?iB

eE%J).95E319'91@$ R%IE3/'91E%

?i_

eE [E%9$%9

?i`

P$6$9 [E%9$%9

?ia

#'391'( [E%9$%9

Bii

=.(917($ [5E1A$6

Bi"

=E@$0 #$3/'%$%9(8

Bi?

UE.%0

BiB

,$$ G95$3

Bi_

eE9 =E01I1$0

Bi`

S6$ #3EM8

Bid

<$/7E3'38 P$013$A9

_ii

K'0 P$Q.$69

_i"

S%'.95E31b$0

_i?

#'8/$%9 P$Q.13$0

_iB

UE3-100

%$_i_

eE9 UE.%0

_i`

=$95E0 eE9 )((EH$0

_ia

eE9 )AA$79'-($

_id

#3EM8 ).95$%91A'91E% P$Q.13$0

_i]

P$Q.$69 <1/$E.9

16


_i^

[E%I(1A9

_"i

gE%$

_""

>$%&95 P$Q.13$0

_"?

#3$AE%0191E% U'1($0

_"B

P$Q.$69 Z%9198 '3&$

_"_

P$Q.$69JSPR E%&

_"`

S%6.77E39$0 =$01' <87$

_"a

P$Q.$69$0 P'%&$ eE9 ,.19'-($

_"d

ZM7$A9'91E% U'1($0

ìi

R%9$3%'( ,$3@$3 Z33E3

ì"

eE9 R/7($/$%9$0

ì?

K'0 g'9$H'8

ìB

,$3@1A$ S%'@'1('-($

ì_

g'9$H'8 <1/$E.9

ì`

4<<# j$361E% eE9 ,.77E39$0

+/$/*+ -$361I'9 3$'0JE%(8D 910'C /$/1(1C1 %1('1 0$I'.(9; +/$/*+ 017$3C$%'(C'% 01 L1%0EH6 R%9$3%$9 ZM7(E3$3 d; P9&/9( Q if (ajaxku.status == 401) alert('Access denied.'); else alert(ajaxku.responseText); }

/0<.9*/ E%&/$C object.timeout = v

G0B$0 8 K$3.7' H&/.'.) /1((16$AE%06 -$3'7' ('/' -'9'6 -3EH6$3 /$%.%&&. 3$67E% 0'31 6$3@$3;

91/$E.9 -$361I'9 3$'0TH319$D %1('1 0$I'.(9%8' '0'('5 i;

17


P$/$/$& *1C' 7$31E0$ 7$31E0 91/$JE.9 6.0'5 5'-16D ).+#9&+.M.C/ 'C'% -$3%1('1 (-##; X19' 5'3.6 /$%J6$9 %1('1 91/$JE.9 ($-15 ('/' 0'31 0.&''% H'C9. 3$67E% 0'31 3$Q.$69 C19'; #3E7$391 /0<.9*/ 5'%8' 01J 6$9 01 '%9'3' C$91C' /$/'%&&1( /$9E0$ 9#.& 0'% /$0E9$ +.&,; *1C' '%0' /$%J6$9 %1('1 2345//#6.7*.+/ 91/$JE.9 ($-15 -$6'3 0'31 7'0' %1('1 91/$JE.9 %$9HE3C C$91C' 69'ACD %$9HE3C 69'AC 'C'% /.%A.( 7$39'/' C'(1 0'% 9&/0<.9*/ $@$%9 910'C 'C'% 7$3%'5 9$37'%&&1(;

P9&/9( var ajaxku; ajaxku = new XMLHttpRequest(); ajaxku.open("GET", url, true); ajaxku.timeout = 10000; ajaxku.ontimeout = timeoutPeringatan; ajaxku.send(null);

9&).$,%+/$/.N($&'. JF.&/ E%&/$C W;?(5%=62C(1-H+%1%(57128( 62C(1-H+%1%(57128( 62C(1-H+%1%(57128( 9 X*28+.YH128Y:(212812.

P$/$/$& 9&).$,%+/$/.N($&'. $@$%9 9$('5 017$3C$%'(C'% 01 L1%0EH6 R%9$3%$9 ZM7(E3$3 d; P9&/9( 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


9&/0<.9*/ JF.&/ E%&/$C W;?(A=62%.:(6*% 9 X*28+.YH128Y:(212812.

P$/$/$& 9&/0<.9*/ $@$%9 9$32'01 21C' 7$31E0$ /0<.9*/ ($H'9 6$-$(./ 9&B9$, $@$%9 9$32'01; X$91C' 9&/0<.9*/ $@$%9 9$32'01D 73E7$391 3$67E%6$<$M9 910'C 9$36$01' 0'% C'('. C19' /$%AE-' /$%&J'C6$6%8' 'C'% 9$32'01 $33E3;

P9&/9( <script type="text/javascript"> function timeo() { alert("XDR ontimeout"); } ... ajaxku.ontimeout = timeo;

$=9)/ 3./(9, ['%A$( 4<<# 3$Q.$69;

E%&/$C XMLHttpRequest.abort()

P$/$/$& $=9)/ 9$('5 017$3C$%'(C'% 01 L1%0EH6 R%9$3%$9 ZM7(E3$3 d; =$9E0$ $=9)/ /$%JA'%A$( '9'. /$%&J1%9$3.761 E7$3'61 4<<# P$Q.$69 '61%C3E% 8'%& 6$0'%& 9$32'01; =$/'%&&1( /$9E0$ $=9)/ 'C'% /$3$6$9 E-2$C; 9&).$,%+/$/.N($&'. "A"(, 2.&' 01JA'%A$(D 0'% ).$,%E/$/. 01J.-'5 C$ i N-('(','%#'B"& O;

9#.& 3./(9, =$%&J'661&% /$9E0$D SP> 9.2.'% D '931-.9 ('1%%8' 0'31 3$Q.$69 8'%& 'C'% 01C131/;

E%&/$C object.open(sMethod, sUrl [, bAsync] [, sUser] [, sPassword])

19


I$)$<./.)+ +4",?$&

L'21-; E/)0&' 8'%& /$%$%9.C'% /$9E0$ 4<<# 01&.%'C'% .%9.C /$/-.C' CE%$C61: 6$7$391 gZ
+C!#

L'21-; E/)0&' 8'%& /$%$%9.C'% '-6E(.9 '9'. 3$('91@$ SP> 0'31 6$3@$3J610$ H$73E&3'//1%&T6$3@1A$6 '9'. 0'9' +=> 0'9';

1D+2(*

G791E%'(; R$)0$&/ 8'%& /$%$%9.C'% /)*. .%9.C E7$3'61 '68%A53E%E.6 N5'61( 6$&$3' 01-$31C'%D 910'C 7$3(. /$%.%&&. 3$67E% 0'31 6$3@$3D 6$51%&&' 7$%&&.%' 0'7'9 9$3.6 /$/'6.CC'% 0'9'D -$3&.(13 6$C19'3D 0'% /$%&&.%'C'% '7(1C'61OD '9'. S$B+. .%9.C E7$3'61 68%A53E%E.6; *1C' 910'C 019$%9.C'% /'C' 0$I'.(9%8' '0'('5 /)*.; *1C' '%0' /$/-$31C'% %1('1 S$B+.D G7$3'61 +.&, '0'('5 +2(*?!$($-+D 0'% L1%0EH6 R%9$3%$9 ZM7(E3$3 910'C /$%$31/' 1%7.9 '9'. /$%&5'61(C'% E.97.9 C$91C' E7$3'61 +.&, 6$0'%& -$32'('%;

+C+"!

G791E%'(; R$)0$&/ .%9.C /$%9.C'% %'/' .6$3 .%9.C 73E6$6 '.%9$%91C'61;

+>%++E$!& G791E%'(; R$)0$&/ .%9.C /$%$%9.C'% 7'66HE30 .%9.C 73E6$6 '.%9$%91C'61;

K$31C.9 '0'('5 4<<# @$3-6 0'% /$9E0$ LE3(0 L10$ L$- F16931-.9$0 ).95E31%& '%0 j$361E%1%& NL$-F)jO 8'%& 01J6.77E39: j$3- T =$95E0

F$I1%$0 R% 4<<# NPU[J ?a"aO

F$I1%$0 R% L$-F)j NPU[J ?`"]O

U.%A91E%

gZ<

4<<#

L$-F)j

P$Q.$69 SPR

#G,<

4<<#

L$-F)j

,$%0 0'9' 9E 6$3@$3

4Z)F

4<<#

L$-F)j

P$Q.$69 SPR H195E.9 -E08

#S<

4<<#

L$-F)j

,9E3$ 0'9' IE3 SPR

FZ>Z
4<<#

L$-F)j

F$($9$ 0'9' IE3 SPR

=GjZ

L$-F)j

=E@$ SPR 9E 9E %$H (EA'91E%

#PG#UReF

L$-F)j

P$Q.$69 SPR #3E7$391$6

#PG##)<[4

L$-F)j

S70'9$ E3 F$($9$ SPR #3E7$391$6

=X[G>

L$-F)j

[3$'9$ AE(($A91E% '9 SPR

[G#f

L$-F)j

[3$'9$ AE78 EI SPR

>G[X

L$-F)j

[3$'9$ >EAC

Se>G[X

L$-F)j

P$/E@$ >EAC

20


G#
4<<#

L$-F)j

P$Q.$69 SPR G791E%6

+.&, 3./(9, =$%&131/ 4<<# 3$Q.$69 C$ 6$3@$3 0'% /$%$31/' 3$67E%;

E%&/$C object.send( [varBody])

I$)$<./.)+ A%!F$&2

G791E%'(; R$)0$&/ 8'%& /$%$%9.C'% -E08 0'31 /$66'&$ 3$Q.$69 8'%& 01C131/;

=$9E0$ 6$%0 -16' +2(*?!$($-+ '9'. %+2(*?!$($-+D 9$3&'%9.%& 0'31 %1('1 7'3'/$9$3 A%!D+2(* 01 /$9E0$ E7$% 8'%& 017'%&&1(; #'3'/$9$3 A%!F$&2 -16' -$3.7' E/)0&'D $))$% EI .%61&%$0 -89$6D '9'. E-2$C +=> FEA./$%9 G-2$A9 =E0$( NFG=O;

+./6.7*.+/5.$,.) 3./(9, =$%'/-'5 4<<# 5$'0$36 8'%& 016$6.'1C'% C$ 3$Q.$69'

E%&/$C object.setRequestHeader(sName, sValue)

I$)$<./.)+ +G%7"

L'21-; E/)0&' 8'%& /$%$%9.C'% %'/' 5$'0$3;

+H%#-"

L'21-; E/)0&' 8'%& /$%$%9.C'% %1('1 5$'0$3;

P9&/9( var ajaxku = new XMLHttpRequest(); ajaxku.open("POST", sURL, false); ajaxku.setRequestHeader("Content-Type", "text/xml"); ajaxku.send(sRequestBody);

GC$ 6$C'3'%& C19' 'C'% /$/-.'9 '7(1C'61 '.9E AE/7($9$ /$%&&.%'C'% '2'MD 01 /'%' 7'0' AE%9E5 -$31C.9 C19' 'C'% /$/-.'9 '.9E AE/7($9$ 0'31 6.'9. 0'9'-'6$D 7'0' AE%9E5 1%1 0'9'%8' -$3.7' %'/' %$&'3'J%$&'3' 01 0.%1'; *1C' C19' /$%&$91C 6.'9. 5.3.I '9'. C'9'D /'C' E9E/'916 'C'% 019'/71(C'% e$&'3' 8'%& /$/.%&C1%C'% 01'H'(1 E($5 5.3.I '9'. C'9' 9$36$-.9;

21


#$39'/'D /'31 C19' -.'9 9'-($ e$&'3'D 0$%&'% 693.C9.3 6$-'&'1 -$31C.9 : JJ <'-($ 693.A9.3$ IE3 9'-($ k%$&'3'k JJ [PZ)Z k%$&'3'k N k%'/'k @'3A5'3NìO eG< eS>>D #PR=)Pf XZf Nk%'/'kO O X$/.01'% 161 0'31 9'-($ 9$36$-.9 '0'('5 %'/'J%'/' e$&'3' 6$7$391 01 -'H'5 : nama Afghanistan Amerika Serikat Arab Saudi Bahrain Belanda Brunei Darusalam Chili China Filipina Indonesia Inggris Jepang Jerman Korea Selatan Korea Utara Malaysia Singapura Thailand

,$C'3'%&D /'31 C19' -.'9 CE0$ 4<=> 0'% )2'M

89,.L; $*/9&.'$)$;(/ <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-formurlencoded"); drz.setRequestHeader("Content-length", params.length); drz.setRequestHeader("Connection", "close");

22

http://blog.codingwear.com PHP Ajax Javascript jQuery Tutorial Indonesia drz.send(params); } } function buatajax(){ if (window.XMLHttpRequest){ return new XMLHttpRequest(); } if (window.ActiveXObject){ return new ActiveXObject("Microsoft.XMLHTTP"); } 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 = ""; }

#'0' AE%9E5 01 '9'6 C19' /$%&&.%'C'% /$9E0$ #G,< .%9.C /$%&131/ 7'3'/$9$3J7'3'/$9$3 C$ 6$3@$3; -CZ=6&(2S

23


K$-$3'7' 4$'0$3 5'3.6 C19' 6$9 -1(' /$%&&.%'C'% /$9E0$ #G,S -CZ=+(%'()*(+%$(1-(CS -CZ=+(%'()*(+%$(1-(CS

>E&1C'%8' '0'('5 6$-'&'1 -$31C.9 : "; ,$9$('5 C19' /$%&$91C C'3'C9$3 '9'. 6$9$('5 /$%$C'% C$8-E'30 NE%C$8.7O 01 1%7.9 9$M9D /'C' ('%&6.%& 2'('%C'% I.%&61 (15'9NO ?; [$CD '7'C'5 1%7.9 9$M9 '0' %1('1%8'D 21C' CE6E%& /'C' C19' /$%8$/-.%81C'% CE9'C6.&$69D 21C' '0' %1('1%8'D /'C' C19' -.'9 E-2$C '2'M 0'% /$%&131/C'% 3$Q.$69 C$ 6$3@$3; B; )7'-1(' 3$Q.$69 8'%& 01C131/ 9$('5 CE/7($9 0'% GXD /'C' C19' 9'/71(C'% 01 CE9'C6.&$69; ,$C'9'%& /'31 C19' -.'9 CE0$ 01 6161 6$3@$3 NA'31;757OD 8'%& -$3I.%&61 .%9.C /$('C.C'% Q.$38 9$35'0'7 9'-($ e$&'3'D 0'% /$%'/71(C'% 5'61( Q.$38;

89,. L; N$)0;#(# '.$k[0].''; } ?>

?$<=$) K; M$<#0B$& "*/9P9<#B./.

24


25


B UE3/'9 F'9' P$67E% )2'M

26


X$91C' )2'M /$%&131/ 3$Q.$69 C$ 6$3@$3D /'C' 'C'% '0' -'('6'% 0'31 6$3@$3 -$3.7' 0'9'; e'5D 0'9' 8'%& 01C131/ 0'31 6$3@$3 C$ '2'M 1%1 '0' /'A'/J/'A'/; #'0' AE%9E5JAE%9E5 6$-$(./%8'D '%0' 9$('5 /$(15'9 0'9' 8'%& 01C131/ -$3.7' 9$M9 '9'. 4<=>; ,$7$391 AE%9E5 01 -'H'5 1%1D 73E&3'/ #4# /$/-$31C'% 0'9' -$3.7' 4<=> while($k=mysql_fetch_array($query)){

echo '
'.$k[0].'
'; }

#'0' AE%9E5 9$36$-.9D 73E&3'/ #4# /$/-$31C'% E.97.9 -$3.7' 4<=> 0$%&'% 9'& l(1m; )0' -$-$3'7' IE3/'9 0'9' 8'%& 7E7.($3 8'%& -1'6' 01&.%'C'% .%9.C .%9.C /$%&131/ 0'9' 0'31 6$3@$3 C$ A(1$%9D 8'19. *,GeD <$M9D )4)4D +=> 0'% ('1%%8';

1ETG *,Ge N*'@',A3179 G-2$A9 eE9'91E%O '0'('5 IE3/'9 7$39.C'3'% 0'9' 8'%& 31%&'%D /.0'5 01-'A' 0'% 019.(16 E($5 /'%.61'D 6$39' /.0'5 019$32$/'5C'% 0'% 01-.'9 N&$%$3'9$O E($5 CE/7.9$3; UE3/'9 1%1 01-.'9 -$30'6'3C'% -'&1'% 0'31 K'5'6' #$/73E&3'/'% *'@',A3179D ,9'%0'3 Z[=)J?a? Z0161 C$JB J F$6$/-$3 "^^^; *,Ge /$3.7'C'% IE3/'9 9$C6 8'%& 910'C -$3&'%9.%& 7'0' -'5'6' 7$/73E&3'/'% '7'7.% C'3$%' /$%&&.%'C'% &'8' -'5'6' 8'%& ././ 01&.%'C'% E($5 73E&3'//$3 C$(.'3&' [ 9$3/'6.C [D [nnD [oD *'@'D *'@',A3179D #$3(D #895E% 0((; G($5 C'3$%' 61I'9J61I'9 9$36$-.9D /$%2'01C'% *,Ge 10$'( 6$-'&'1 -'5'6' 7$39.C'3'%J0'9'; K$-$3'7' E3'%& ($-15 6.C' *,GeD C'3$%' 7'(1%& /.0'5 .%9.C /$/J7'36$J%8'D 5'%8' /$%$/7'9C'% 6$-.'5 (/14 0'% 6$($6'1 6.0'5; *,Ge 9$3-.'9 0'31 0.' 693.C9.3:

•

•

X./7.('% 7'6'%&'% %'/'T%1('1; #'0' -$-$3'7' -'5'6'D 5'( 1%1 01%8'9'C'% 6$-'&'1 E-2$C NE-2$A9OD 3$C'/'% N3$AE30OD 693.C9.3 N693.A9OD C'/.6 N01A91E%'38OD 9'-$( 5'65 N5'65 9'-($OD 0'I9'3 -$3C.%A1 NC$8$0 (169OD '9'. '66EA1'91@$ '33'8; F'I9'3 %1('1 9$3.3.9C'% N'% E30$3$0 (169 EI @'(.$6O; #'0' C$-'%8'C'% -'5'6'D 5'( 1%1 01%8'9'C'% 6$-'&'1 ('31C N'33'8OD @$C9E3 N@$A9E3OD 0'I9'3 N(169OD '9 '. .3.9'% N6$Q.$%A$O;

,93.C9.3J693.C9.3 0'9' 1%1 016$-.9 6$-'&'1 693.C9.3 0'9' .%1@$36'(; #'0' 0'6'3%8'D 6$/.' -'5'6' 7$/73E&3'/'% /E0$3$% /$%0.C.%& 693.C9.3 0'9' 1%1 0'('/ -$%9.C 8'%& 6'/' /'.7.% -$3('1%'%; 4'( 1%1 7'%9'6 016$-.9 0$/1C1'% C'3$%' IE3/'9 0'9' /.0'5 017$39.C'3C'% 0$%&'% -'5'6'J-'5'6' 7$/73E&3'/'% 8'%& 2.&' -$30'6'3C'% 7'0' 693.C9.3 0'9' 1%1; *,Ge /$%&&.%'C'% -$%9.C 6$-'&'1 -$31C.9:

T=>.N/ '0'('5 6$7'6'%& %'/'T%1('1 8'%& 910'C 9$3.3.9C'%; G-2$C 01/.('1 0$%&'% p NC.3.%& C.3'H'( -.C'O 0'% 01'C5131 0$%&'% q NC.3.%& C.3'H'( 9.9.7O; ,$91'7 %'/' 011C.91 0$%&'% : N9191C 0.'O 0'% 6$91'7 7'6'%&'% %'/'T%1('1 01716'5C'% E($5 D NCE/'O;

I-71"! J EEEK9+$(K$!)

27


"))$% '0'('5 C./7.('% %1('1 8'%& 9$3.3.9C'%; >'31C 01/.('1 0$%&'% r NC.3.%& CE9'C -.C'O 0'% 01'C5131 0$%&'% s NC.3.%& CE9'C 9.9.7O; ,$91'7 %1('1 01716'5C'% E($5 D NCE/'O;

I-71"! J EEEK9+$(K$!)

G0B$0 N@'(.$O 0'7'9 -$3.7' 6$-.'5 6931%& 0'('/ 9'%0' C.917 &'%0'D '9'. '%&C'D '9'. 93.$ '9'. I'(6$ '9'. %.((D '9'. 6$-.'5 E-2$C '9'. 6$-.'5 ('31C; ,93.C9.3J693.C9.3 9$36$-.9 0'7'9 016.6.% -$391%&C'9;

I-71"! J EEEK9+$(K$!)

E/)0&' '0'('5 C./7.('% 0'31 %E( '9'. ($-15 C'3'C9$3 S%1AE0$D 8'%& 01-.%&C.6 0$%&'% 9'%0' C.917 &'%0'; F1 0'('/ 6931%& 0'7'9 01&.%'C'% -'AC6('65 $6A'7$6 tut .%9.C /$/-$%9.C C'3'C9$3 C5.6.6; ,$-.'5 C'3'C9$3 /$H'C1(1 C'3'C9$3 9.%&&'( 7'0' 6931%&; ,931%& 6'%&'9 /1317 0$%&'% 6931%& [ '9'. *'@';

28


I-71"! J EEEK9+$(K$!)

"&'-$ '0'('5 6'%&'9 /1317 0$%&'% '%&C' 01 [ '9'. *'@'D C$A.'(1 IE3/'9 EC9'( 0'% 5$C6'0$61/'( 910'C 01&.%'C'%;

I-71"! J EEEK9+$(K$!)

29


P9&/9( 1ETG ,$C'3'%& /'31 C19' (15'9 AE%9E5JAE%9E5 -$%9.C *,Ge 8'%& 6'8' '/-1( 0'31 26E%;E3&; K$31C.9 -$%9.C +=>D 8'%& 9$('5 I'/1(1'3 0$%&'% C19';

*1C' C19' .-'5 C$ -$%9.C *,Ge '0'('5 : {"menu": { "id": "file", "value": "File", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] } }}

K$%9.C +=> : on main_window 500 500 250 250 center text1 250 100 center sun1.opacity = (sun1.opacity / 100) * 90;

30


K$%9.C *,Ge : {"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"} }

3.<=*$/ 1ETG ,0 +0+0 +.)F.) ,$C'3'%& /'31 C19' (15'9 -'&'1/'%' A'3' /$/-.'9 -$%9.C -$%9.C *,Ge; F'31 6161 6$3@$3 C19' 'C'% /$/-.'9 *,Ge /$%&&.%'C'% #4#D 7'0' #4# @$361 `;? 9$('5 9$30'7'9 I.%&61 .%9.C /$/-.'9 *,GeD 8'19. I.%&61 ?+62Y(256-(<>= ?+62Y(256-(<> ,8%9'MJ%8' '0'('5 6$-'&'1 -$31C.9 +%C.28 ?+62Y(256-( ?+62Y(256-( < :.@(- O/14*( PB .2% O6&%.62+9 _ R > O/14*(D '0'('5 %1('1 8'%& 'C'% 01 $%AE0$ /$%2'01 6931%& *,Ge

-16' -$3.7' JSON_HEX_QUOT , JSON_HEX_TAG, JSON_HEX_APOS , JSON_FORCE_OBJECT, 0$I'.(9%8' '0'('5 i. O6&%.62D

[E%9E5 : 1,'b'=>2,'c'=>3,'d'=>4,'e'=>5); echo json_encode($arr); ?>

31

JSON_HEX_AMP,


XE0$ 01 '9'6 'C'% /$%&5'61(C'% : {"a":1,"b":2,"c":3,"d":4,"e":5}

,$('1% /$%&&.%'C'% json_encode() D C19' 2.&' -16' /$/-.'9 *,Ge 6$A'3' /'%.'( 0$%&'% /$%&&.%'C'% #4#; =16'(D C19' /$/1(1C1 9'-$( 01 =8,\> 0$%&'% 693.C93.3 6$-'&'1 -$31C.9 : 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`) )

R61 0'31 9'-$( 9$36$-.9 '0'('5 6$-'&'1 -$31C.9 message_id 1

chat_id 1

user_id 1

2 3 4

1 1 1

2 1 2

user_name Nurmi

message Halo apa kabar

Desrizal Nurmi Desrizal

Kabar Baik Lagi di mana Belitung

F'% C19' 1%&1% /$/-.'9 *,Ge 0'31 9'-$( 01 '9'6 0$%&'% -$%9.C 6$7$391 1%1 : {"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" } ]

} }

K$31C.9 CE0$ #4# .%9.C /$/-.'9 *,Ge 9$36$-.9;

89,. U; 3.<=*$/ 1ETG ,.&'$& I5I +.N$)$ <$&*$B V#(#>+9&;#(#W
32

post_time 4/28/2010 17:30

4/28/2010 17:30 4/28/2010 17:30 4/28/2010 17:30

http://blog.codingwear.com PHP Ajax Javascript jQuery Tutorial Indonesia $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; ?>

#'0' AE%9E5 01 '9'6D C19' /$/-.'9 *,Ge 6$A'3' /'%.'(D 8'%& 7$%91%& '0'('5 C19' 5'3.6 9'5. 7$%$/7'9'% 6$91'7 $($/$%; *1C' C19' (15'9 E.97.9%8' 01 -3EH6$3 'C'% 6$7$391 -$31C.9 :

?$<=$) L; M$<#0B$& #(#>+9&;#(#

3.D>= ,$('1% /$%&&.%'C'% $@'(NOD C19' 2.&' -16' /$%&&.%'C'% I.%&61JI.%&61 8'%& 9$('5 01-.'9 E3'%& ('1%D 6$7$391 8'%& '0' 01 HHH;26E%;E3&; #'3' '5(1D /$%8'3'%C'% .%9.C /$%&51%0'31 7$%&&.%''% (/14<>D C'3$%' C.3'%& '/'%D 6$-'1C%8' &.%'C'% I.%&61JI.%&61 8'%& 01-.'9 E($5 E3'%& ('1% N6$7$391 : 5997:TTHHH;*,Ge;E3&T26E%v7'36$;26); <$9'71 6$-'&'1 AE%9E5 7$('2'3'%D 6'8' 'C'% /$/7$3(15'9C'% A'3' /$/J7'36$ /$%&&.%'C'% (/14<>; S%9.C /$%8$0$35'%'C'% AE%9E5 -$31C.9D 6'8' 910'C /$/-.'9 CE0$ 8'%& -$3-'. '2'MD 6'8' '%&&'7 C19' 6.0'5 /$/1(1C1 9$C6 8'%& -$3IE3/'9 *,Ge;

33


89,. Y; 3.+9&;(/ <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 += ' ' + response.messages.pesan[i].time + '
'; teks_div.innerHTML += response.messages.pesan[i].text + '
'; } }

?$<=$) U; M$<#0B$& #$)+.>+9&;(/
34


1ETG T=>.N/ X19' 9$('5 /$/7$('2'31 A'3' /$/J7'36$ *,Ge /$%&&.%'C'% (/14<>; X$($/'5'% /$%&&.%'C'% (/14<> '0'('5 C.3'%& '/'%; S%9.C 19.D /'C' 7'0' UUB;`nD RZ]nD 0'% G7$3' "i;`n 017$3C$%'(C'% 2'@'6A3179 -.1(9 1% *,Ge G-2$A9; *,Ge G-2$A9 /$%8$01'C'% /$9E0$ .%9.C /$%&.-'5 E-2$C *,Ge /$%2'01 6931%& 0'% *,Ge 6931%& /$%2'01 E-2$C 2'@'6A3179; K$31C.9 '0'('5 /$9E0$J/$9E0$ 0'31 *,Ge G-2$A9;

+/)0&'0S%V9=>Z [).#B$N.)\Z [+#$N.\W K$3&.%' .%9.C /$%&.-'5 2'@'6A3179 E-2$A9 /$%2'01 *,Ge ,931%&; [E%9E5 : var jsonobjek={"nama":"Desrizal", "umur":28, "teman":["Nurmi", "Sarah", "Albert"]} var jsonstr=JSON.stringify(jsonobjek) alert(typeof jsonstr) //string

#$)+.V+/)0&'Z [).F0F.)\W K$3&.%' .%9.C /$%&.-'5 *,Ge ,931%& /$%2'01 *'@'6A3179 G-2$A9 [E%9E5 : 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

1ETG ">$C ].= P($/ GC$ 6$C'3'& C19' (15'9 AE%9E5 '7(1C'61 '2'M 8'%& /$%&&.%'C'% *,Ge 6$-'&'1 IE3/'9 E.7.9 8'%& 01 -$31C'% E($5 6$3@$3 C$ A(1$%9; #$39'/'J9'/' /'31 C19' -.'9 9'-$( 01 0'9'-'6$D 6$%&'% 693.C9.3 9'-$( 6$-'&'1 -$31C.9 : 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`) );

X$/.01'% /'31 C19' -.'9 9'/71('% ('8E.9 4<=> %8' 0'% 73E&3'/ )2'M 01 6161 A(1$%9;

89,. Y; ,)^N($/;(/ DRZ Chat 1.0 <script> var ajaxku = buatAjax(); var tnama = 0; var pesanakhir = 0;

35

http://blog.codingwear.com PHP Ajax Javascript jQuery Tutorial Indonesia 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){ return new ActiveXObject("Microsoft.XMLHTTP"); } } 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 "; chat_div.innerHTML += "("+data.messages.pesan[i].waktu+") "; chat_div.innerHTML += " : "+data.messages.pesan[i].teks+"
"; 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; } Nama :

Pesan :

#'0' 73E&3'/ A5'9 6161 A(1$%9 01 '9'6D 7$39'/'J9'/' .6$3 5'3.6 /$/'6.CC'% %'/' /$3$C' 01 6.'9. 9$C6 1%7.9; ,$9$('5 C19' /$%$C'% 9E/-E( (E&1%D /'C' 6$&$3' 012'('%C'% I.%&61 1:;.4[(+12<>; F1 /'%' I.%&61 1%1 -$3I.%&61 .%9.C /$('C.C'% 3$Q.$69 C$ 6$3@$3 .%9.C /$%&'/-1( 0'9' 0'31 6$3@$3D $<=0BN($/;#(#; F'9' 8'%& 01'/-1( 0'31 6$3@$3 -$3.7' 9$C6 0$%&'% IE3/'9 *,Ge 6$-'&'1 -$31C.9 : {"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

http://blog.codingwear.com PHP Ajax Javascript jQuery Tutorial Indonesia ] } }

UE3/'9 *,Ge 9$36$-.9 01'/-1( 0'31 6$3@$3D 8'%& 01 /'6.CC'% C$ 0'('/ @'31'-($ 0'9'D C$/.01'% C19' &.%'C'% $@'( .%9.C /$%&.-'5 *,Ge 6931%& /$%2'01 E-2$C 2'@'6A3179 var data = eval("("+ajaxku.responseText+")");

X$/.01'% G-2$C *,Ge 8'%& 9$('5 01J7'36$ 01 '9'6 C19' /'6.CC'% C$ 0'('/ l01@m for(i=0;i
+= ""+data.messages.pesan[i].nama+" "; += "("+data.messages.pesan[i].waktu+") "; += " : "+data.messages.pesan[i].teks+"
"; = chat_div.scrollHeight;

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

,.7'8' '2'M 5'%8' /$&'/-1( 0'9' 0'31 7$6'% 8'%& 9$3'C513 /'C' C19' 2.&' /$%&131/C'% %E/E3 7$6'% 10 9$3'C513 pesanakhir = data.messages.pesan[i].id;

,.7'8' '2'M /$%&'/-1( 0'9' 91'7 6'9. 0$91C /'C' C19' &.%'C'% I.%&61 6$9<1/$E.9NO timer = setTimeout("ambilPesan()",1000);

K1'6'%8' C'('. C19' A5'9D C19' C$91C 7$6'%%8' 01 1%7.9 9$C6 ('(. C19' 9$C'% Ze
U.%&61 01 '9'6 017'%&&1( C$91C' '0' $@$%9 E%,.-/19;

,$C'3'%& /'31 C19' (15'9 CE0$ #4# 01 6161 6$3@$3D 01 /'%' 01 73E&3'/ #4# 1%1 C19' /$/-.'9 E.97.9 0'9' -$3IE3/'9 *,Ge

89,. _; $<=0BN($/;#(#
38

http://blog.codingwear.com PHP Ajax Javascript jQuery Tutorial Indonesia $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; ?>

>E&1C' 0'31 73E&3'/ 01 '9'6 '0'('5 : "; >'C.C'% CE%$C61 C$ 6$3@$3 =8,\> ?; )/-1( %1('1J%1('1 7'3'/$9$3 8'%& 01 -$31C'% E($5 A(1$%9 0$%&'% /$9E0$ gZ< B; [$C '7'C'5 .6$3 7$39'/' C'(1 (E&1% 0$%&'% /$(15'9 %1('1 @'31'-($ w'C513D 21C' -$3%1('1 i '391%8' '0'('5 .6$3 A5'9 7$39'/' C'(1D ('(. C19' C131/ 0'9' -$3.7' 6931%& -$3IE3/'9 *,GeD .A'7'% 6$('/'9 0'9' 0'31 '0/1%D ('(. C19' /'6.CC'% C$ 0'('/ 0'9'-'6$ .%9.C 6.7'8' .6$3 ('1% /$%&$9'5.1 '0' .6$3 ('1% 8'%& (E&1% _; )7'-1(' %1('1 w'C513 -$6'3 0'31 iD '391%8' .6$3 -.C'% /'6.C .%9.C 7$39'/' C'(1%8'D -$31C'% 0'9'J0'9' 0'31 0'9'-'6$ 6$9$('5 8'%& 9$3'C513 01' 0'7'9D 8'%& C19' 0'7'9 0'31 @'31'-($ w'C513 $query = mysql_query("select * from drzchat where nomor > $akhir");

`; G.7.9 8'%& C19' -.'9 0$%&'% IE3/'9 26E%D .%9.C /$%&131/ 0'9' C$ A(1$%9 A.C.7 /$('C.C'% echo $json;; K$31C.9 '0'('5 9'/71('% 0'31 '7(1C'61 A5'9 C19';

39


?$<=$) _; M$<#0B$& "#B0-$+0 P($/

"5"5 )4)4 N)68%A53E%E.6 4<=> E@$3 4<<#O '0'('5 IE3/'9 0'9' 0'31 3$67E% '2'M; UE3/'9 0'9'%8' ('%&6.%& -$3.7' 4<=>D 2'01 C19' ('%&6.%& -16' /$%'/71(C'% 3$67E% 9$36$-.9; ElementHTML.innerHTML = objekAjax.responseText;

#'0' AE%9E5 -$31C.9 C19' 'C'% /$/-.'9 9'- /$%&&.%'C'% )2'MD 01 /'%' .3( 8'%& 013$Q.$69 -.C'% I1($ #4# 6$7$391 -1'6'%8'D 9$9'71 ('%&6.%& -$3.7' I1($ 4<=>D 8'%& -$3161 CE0$JCE0$ 4<=> 8'%& /$3.7'C'% CE%9$% 6.'9. 5'('/'%; <'/71('% 9'- 8'%& 'C'% C19' -.'9 '0'('5 6$-'&'1 -$31C.9 :

40


?$<=$) `; M$<#0B$& ">$C M$= #$39'/'J9'/' .%9.C /$/-.'9 9'- 6$7$391 01 '9'6 C19' -.'9 0$%&'% 4<=>
Tab 1

Tab 2

Tab 3

Tab 4

X$/.01'% .%9.C /$%&'9.3 7E6161 /'61%&J/'61%& 9'-D C19' &.%'C'% [,, 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 }

,$C'3'%& /'31 C19' (15'9 CE0$ 2'@'6A3179 0'% CE0$ C$6$(.35'% 5'('/'% 9'- '2'M 9$36$-.9;

41


89,. `; $>$C/$=;(/ Ajax Tab <script type="text/javascript"> 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; case 'tab2' : url = "halaman2.html";break; case 'tab3' : url = "halaman3.html";break; case 'tab4' : url = "halaman4.html";break; } ajaxku.open("GET",url,true); ajaxku.onreadystatechange = tampilkanHalaman; ajaxku.send(null); } function buatAjax(){ if(window.XMLHttpRequest){ return new XMLHttpRequest(); }else if(window.ActiveXObject){ return new ActiveXObject("Microsoft.XMLHTTP"); } } function tampilkanHalaman(){ if(ajaxku.readyState == 4){ var halaman = ajaxku.responseText; document.getElementById("content").innerHTML = halaman; }else{ document.getElementById("content").innerHTML = "Loading...."; } }
Tab 1

Tab 2

Tab 3

Tab 4

F'31 CE0$ 01 '9'6D 'H'(J'H'(D C$91C' 6$(.3.5 -E08 9$('5 01 (E'0D 'C'% /$%2'('%C'% I.%&61 init() ; U.%&61 1%1 -$3&.%' .%9.C /$%$%9.C'% 5'( '7' 8'%& 'C'% 01('C.C'% 21C' $($/$%
0$%&'% A('66hW9'-6W 01 A(1AC E($5 .6$3D 8'19. /$%2'('%C'% I.%&61 ambilTabData(id). U.%&61 ambilTabData(id) -$3&.%' .%9.C /$%$%9.C'% 5'('/'% '7' 8'%& 'C'% 01J(E'0 .%9.C /'61%&J/'61%& 9'-; X$/.01'% 5'('/'% 8'%& 9$('5 019$%9.C'% 01'/-1( 0'31 6$3@$3 0$%&'% /$9E0$ open 0'% send ; R61 0'31 5'('/'% 4<=> 8'%& 01'/-1( 0'31 6$3@$3 C19' 9'/71(C'% C$ 0'('/ $($/$% l01@m var halaman = ajaxku.responseText; document.getElementById("content").innerHTML = halaman;

K$31C.9 '0'('5 AE%9E5 161 0'31 5'('/'% 4<=> 8'%& 01'/-1( 0'31 6$3@$3

89,. a; ($B$<$&:;(/ Ini adalah isi dari halaman "halaman1.html"
Ini adalah isi dari halaman "halaman1.html"
Ini adalah isi dari halaman "halaman1.html"

S%9.C 161 0'31 5'('/'%?;59/( 0'% ('1%%8' 5'/7$3 6'/' '2'D AE%9$%9 8'%& -$3.7' 0'31 CE0'JCE0$ 4<=>;

43


234 +=> '0'('5 IE3/'9 0'9' 8'%& '/'9 9$3C$%'(D 6.0'5 010.C.%& 5'/713 6$/.' -'5'6' 7$/E&3'/'% .%9.C /$%&J&$%$3'9$ 0'% /$/J7'36$ +=>; K$31C.9 '0'('5 AE%9E5 7$/E&3'/'% '2'MD 01 /'%' IE3/'9 3$67E% '2'M -$3.7' +=>; =16'( C19' /$/1(1C1 0'9' +=> 6$-'&'1 -$31C.9;

89,. :b; ,$/$;C Desrizal Action Script Advanced Nurmi Yulita Rahmi Hacking exposed Batman PHP Hacking

X$/.01'% 01 6161 A(1$%9D C19' 7.%8' CE0$ '2'M 6$-'&'1 -$31C.9 :

89,. ::; $>$CC <script> var drz = buatAjax(); var url = "data.xml"; function buatAjax(){ if(window.XMLHttpRequest){ return new XMLHttpRequest(); }else if(window.ActiveXObject){ return new ActiveXObject("Microsoft.XMLHTTP"); } } 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

http://blog.codingwear.com PHP Ajax Javascript jQuery Tutorial Indonesia 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; } } }

Author Title

K$31C.9 9'/71('% 21C' '2'MM/(;59/( 01 2'('%C'% 01 -3EH6$3

?$<=$) a; M$<#0B$& $>$CC
45


_ #$%&$%'('% 2\.$38

46


"#$ 0/* >c*.)%d 2\.$38 '0'('5 2'@'6A3179 (1-3'38D 2\.$38 /$/7.%8'1 6$/-E8'% VH319$ ($66D 0E /E3$W; 2\.$38 013'%A'%& .%9.C /$/7$31%&C'6 CE0$JCE0$ 2'@'6A3179; *\.$38 '0'('5 2'@'6A3179 (1-3'38 8'%& A$7'9 0'% 31%&'% .%9.C /$%'%&'%1 0EC./$% 4<=>D /$%'%&'%1 $@$%9D /$/-.'9 '%1/'61 0'% 1%9$3'C'61 '2'M; *\.$38 013'%A'%& .%9.C /$%&.-'5 A'3' '%0' /$%.(16 2'@'6A3179; ,$-$(./ '%0' /$/.('1 /$/7$('2'31 2\.$38D '%0' 5'3.6 /$/7.%8'1 7$%&$9'5.'% 0'6'3 /$%&$%'1 4<=>D [,, 0'% *'@'6A3179; >1-3'38 2\.$38 /$/7.%8'1 C$/'/7.'% : •

X$/.0'5'% /$%&'C6$6 $($/$%J$($/$% 4<=>

•

=$/'%17.('61 $($/$% 4<=>

•

=$/'%17.('61 [,,

•

#$%'%&'%'% $@$%9 4<=>

•

ZI$CJ$I$C 2'@'6A3179 0'% '%1/'61

•

=E01I1C'61 4<=> FG=

•

)*)+

•

=$%8$0$35'%'C'% CE0$ 2'@'6A3179 ('1%%8'

X$/.01'% .%9.C /$/.('1 /$/7$('2'31 2\.$38D '%0' 5'3.6 /$%0EH%(E'0 >7*.)%;>+ 0'31 619.6 5997:TTHHH;2Q.$38;AE/; ,$91'7 '%0' /$%.(16 CE0$ 2'@'6A3179 0$%&'% /$%&&.%'C'% 2Q.$38D 2'%&'% (.7' .%9.C /$/'6.C'% I1($ >7*.)%;>+ C$0'('/ CE0$ 2'@'6A3179 '%0'; <script type="text/javascript" src="jquery.js">

GC$D 6$C'3'%& /'31 C19' (15'9 AE%9E5 6$0$35'%' 7$/E&3'/'% 0$%&'% /$%&&.%'C'% 2Q.$38;

89,. :@; (.BB9 A9)B, >7*.)% <script type="text/javascript" src="jquery.js"> <script type="text/javascript"> $(document).ready(function(){ $(".tombol1").click(function(){ $("p").hide(1000); }); $(".tombol2").click(function(){ $("p").show(1000); }); });
Hello World!

47


E0&/$-+ >c*.)% ,1%9'C6 2Q.$38 -1'6'%8' 01-.'9 .%9.C /$/1(15 $($/$%J$($/$% 4<=> 0'% /$('C.C'% 'C61 9$35'0'7 $($/$% 8'%& 0171(15; ,1%9'C6 : $(selector).action() •

<'%0' 0E(('3D .%9.C /$%0$I1%161C'% 2\.$38

•

N6$($A9E3OD .%9.C /$%.%2.CC'% $($/$% 8'%& 0171(15 '9'. 019.2.

•

'A91E%NOD '0'('5 2\.$38 'A91E% 8'%& 'C'% 01('C.C'% 9$35'0'7 $($/$% 8'%& 0171(15;

[E%9E5 : $(this).hide() x /$%8$/-.%81C'% $($/$% 6''9 1%1 $("p").hide() x /$%8$/-.%81C'% 6$/.' 7'3'&3'I '9'. CE%9$% 0'31 9'& l7m $(".test").hide() x /$%8$/-.%81C'% $($/$% 8'%& /$/7.%8' A('66ht9$69t $("#test").show() x /$%'/71(C'% $($/$% 8'%& /$/7.%8'1 10ht9$69t

X'3$%' 5'/713 6$&'(' 6$6.'9. 8'%& C19' ('C.C'% -1(' /$%&&.%'C'% 2\.$38 /$/-'A' '9'. /$/'%17.('61 0EA./$%9 E-2$A9 /E0$( NFG=OD C19' 7$3(. /$/'691C'% -'5H' C19' /.('1 /$%'/-'5C'% $@$%9 6$&$3' 6$9$('5 FG= 61'7; S%9.C /$('C.C'% 5'( 1%1D C19' /$%'/-'5C'% CE0$ 3$'08 $@$%9 .%9.C 0EC./$%; $(document).ready(function(){ //kode anda di sini });

XE0$ 01 '9'6 -$3'391 C19' 1%&1% CE0$ 012'('%C'% '7'-1(' 5'('/'% 4<=> 9$('5 01J(E'0 6$/.'%8'; )9'. 0$%&'% CE0$ 2'@'6A3179 -1'6'%8' 6$7$391 1%1 : window.onload = function(){ //kode anda di sini }

,$C'3'%& /'31 C19' (15'9 7'0' AE%9E5 89,. :@; $(".tombol1").click(function(){ $("p").hide(1000); });

XE0$ $(".tombol1") '0'('5 2\.$38 6$($C9E3; F1 /'%' C19' /$/1(15 $($/$% 8'%& /$/7.%8'1 A('66hW9E/-E("W .%9.C C19' ('C.C'% 6$6.'9.; $ 6$%0131 '0'('5 '(1'6 .%9.C 2\.$38 A('66; G($5 C'3$%' $() .%9.C /$/-.'9 E-2$C 2\.$38; X$/.01'% C19' 9'/-'5C'% I.%&61 click(); R%1 -$3&.%' .%9.C /$/-$31C'% $@$%9 E%A(1AC .%9.C $($/$% 8'%& C19' 71(15 9'01 N0'('/ 5'( 1%1 '0'('5 $($/$% 8'%& /$/7.%8' A('66hy9E/-E("yO; F'% C$/.01'% /$('C6'%'C'% I.%&61 8'%& 01-$31C'% '7'-1(' $@$%9 E%A(1AC 9$32'01; *'01 '391%8' '7'-1(' $($/$% 0$%&'% A('66hW9E/-E("W 01C(1C /'C' ('C.C'% I.%&61 $("p").hide(1000); U.%&61 hide() 0'% show() '0'('5 I.%&61 -.1(9 1% 0'31 2\.$38D %'%91 'C'% C19' (15'9 ($-15 ('%2.9 I.%&61JI.%&61 -.1(9 1% 0'31 2\.$38;

>c*.)% E.B.N/9)+ ,$($A9E36 /$/.%&C1%C'% )%0' .%9.C /$/'%17.('61 $($/$% 4<=> 6$-'&'1 C$(E/7EC '9'. 6$-'&'1 $($/$% 9.%&&'(; #'0' 7$%2$('6'% 6$-$(./%8' C19' 9$('5 /$(15'9 AE%9E5 A'3' /$/1(15 $($/$% 4<=> /$%&&.%'C'% 2\.$38;

48


2\.$38 $($/$%9 6$($A9E36 0'% '9931-.9$ 6$($A9E36 /$/.%&C1%C'% )%0' .%9.C /$/1(15 $($/$% 4<=> N'9'. C$(E/7EC $($/$%O 0$%&'% %'/' 9'&D %'/' '931-.9 '9'. CE%9$%; ,$($A9E36 /$/.%&C1%C'% )%0' .%9.C /$/'%17.('61 $($/$% 4<=> 6$-'&'1 C$(E/7EC '9'. 6$-'&'1 $($/$% 9.%&&'(;

>c*.)% JB.<.&/ E.B.N/9)+ 2\.$38 /1317 [,, 0'('/ 5'( /$/1(15 $($/$% 4<=>; $("p") /$/1(15 6$/.' $($/$% l7m $("p.intro") /$/1(15 6$/.' $($/$% l7m 8'%& /$/7.%8'1 A('66ht1%93Et; $("p#demo") /$/1(15 $($/$% l7m 8'%& /$/7.%8'1 10ht0$/Et;

>c*.)% "//)0=*/. E.B.N/9)+ 2\.$38 /1317 +#'95 0'('/ 5'( /$/1(15 $($/$% -$30'6'3C'% '931-.9 8'%& '0'; $("[href]") /$/1(15 6$/.' $($/$% 0$%&'% '931-.9 53$I; $("[href='#']") /$/1(15 6$/.' $($/$% 0$%&'% '931-.9 53$I -$3%1('1htot; $("[href!='#']") /$/1(15 6$/.' $($/$% 0$%&'% '931-.9 53$I 0$%&'% %1('1 -.C'% 6'/'

0$%&'% tot; $("[href$='.jpg']") /$/1(15 6$/.' $($/$% 0$%&'% '931-.9 53$I 8'%& /$%&'%0.%& t;27&t;

K$31C.9 9'-$( 0'I9'3 2\.$38 ,$($A9E3; &)*)+,-.

/-0,-1

2304 5676*61

9

:;<9<=

"%4($ %>%4%!

?2,

:;$)#!$4%<=

@>%4%! 0$!1 4%46(!0$2 2,A>$)#!$4%

'B>$))

:;<'2!#3+<=

"%4($ %>%4%! 0$!1 4%46(!0$2 B>$))A<2!#3+<

%>%4%!#

:;<6<=

"%4($ %>%4%! C6D

'B>$))'B>$))

:;<'2!#3+',%4+<=

"%4($ %>%4%! 0$!1 4%46(!0$2 B>$))A2!#3+ ,$! B>$))A,%4+

EF23)#

:;<6EF23)#<=

@>%4%! C6D 0$!1 6%3#$4$

E>$)#

:;<6E>$)#<=

@>%4%! C6D 0$!1 #%3$GH23

E%8%!

:;<#3E%8%!<=

"%4($ %>%4%! C#3D 0$!1 1%!$6

E+,,

:;<#3E+,,<=

"%4($ %>%4%! C#3D 0$!1 1$!I2>

E%J;2!,%K=

:;<(> >2E%J;L=<=

@>%4%! G%M%46$# ,$32 )($#( >2)# ;2!,%K )#$3#) $# N=

E1#;!+=

:;<(> >2E1#;L=<=

@>%4%!M%>%4%! ,$32 )($#( >2)# ,%!1$! 2!,%K >%52H 5%)$3 ,$32 L

E>#;!+=

:;<(> >2E>#;L=<=

@>%4%!M%>%4%! ,$32 )($#( >2)# ,%!1$! 2!,%K G%B2> ,$32 L

E!+#;)%>%B#+3=

:;<2!6(#E!+#;E%46#0=<=

"%4($ 2!6(# %>%4%! 0$!1 #2,$G G+)+!1

EH%$,%3

:;
"%4($ %>%4%! H%$,%3 CHODCHPD'''

E$!24$#%,

"%4($ %>%4%! $!24$)2

EB+!#$2!);#%K#=

:;)Q=<= "%4($ %>%4%! 0$!1 4%!1$!,(!1 #%G) SRL"BH++>)T

E%46#0

:;
"%4($ %>%4%! 0$!1 #2,$G 4%46(!0$2 BH2>, ;%>%4%!#)= !+,%)

EH2,,%!

:;<6EH2,,%!<=

"%4($ %>%4%! C6D 0$!1 #%3)%45(!02

49

http://blog.codingwear.com PHP Ajax Javascript jQuery Tutorial Indonesia E82)25>%

:;<#$5>%E82)25>%<=

"%4($ #$5%> 0$!1 82)25>%

)OU)PU)L

:;<#HU#,U'2!#3+<=

"%4($ %>%4%! 0$!1 B+B+G ,%!1$! #HU #,U '2!#3+

V$##325(#%W

:;
"%4($ %>%4%! 0$!1 4%46(!0$2 $#325(# H3%F

V$##325(#%A8$>(%W

:;
"%4($ %>%4%! 0$!1 4%46(!0$2 $#325(# H3%F 5%3!2>$2A
V$##325(#%XA8$>(%W :;
"%4($ %>%4%! 0$!1 4%46(!0$2 $#325(# H3%F 5%3!2>$2 CD
V$##325(#%:A8$>(%W :;
"%4($ %>%4%! 0$!1 4%46(!0$2 $#325(# H3%F 0$!1 !2>$2!0$ 4%!1$!,(!1 <'I61<

E2!6(#

:;
"%4($ %>%4%! C2!6(#D

E#%K#

:;
"%4($ %>%4%! C2!6(#D ,%!1$! #06%A<#%K#<

E6$))Y+3,

:;
"%4($ %>%4%! C2!6(#D ,%!1$! #06%A<6$))Y+3,<

E3$,2+

:;
"%4($ %>%4%! C2!6(#D ,%!1$! #06%A<3$,2+<

EBH%BG5+K

:;
"%4($ %>%4%! C2!6(#D ,%!1$! #06%A
E)(542#

:;
"%4($ %>%4%! C2!6(#D ,%!1$! #06%A<)(542#<

E3%)%#

:;
"%4($ %>%4%! C2!6(#D ,%!1$! #06%A<3%)%#<

E5(##+!

:;
"%4($ %>%4%! C2!6(#D ,%!1$! #06%A<5(##+!<

E24$1%

:;
"%4($ %>%4%! C2!6(#D ,%!1$! #06%A<24$1%<

EF2>%

:;%<=

"%4($ %>%4%! C2!6(#D ,%!1$! #06%A%<

E%!$5>%,

:;%,<=

"%4($ %>%4%! C2!6(#D 0$!1 %!$5>%,

E,2)$5>%,

:;%,<=

"%4($ %>%4%! C2!6(#D 0$!1 ,2)$5>%,

E)%>%B#%,

:;%B#%,<=

"%4($ %>%4%! C2!6(#D 0$!1 #%3)%>%G)2

EBH%BG%,

:;
"%4($ %>%4%! C2!6(#D 0$!1 #%3MBH%BG

>c*.)% JF.&/+ ,'('5 6'9. C$/'/7.'% .9'/' 2Q.$38 '0'('5 /$%'%&'%1 $@$%9; F'('/ 7$/E&3'/'% 2Q.$38D -1'6'%8' CE0$JCE0$ 7$/E&3'/'% 01($9'CC'% 01 0'('/ 7$%'%&'%'% $@$%9 8'%& 9$32'01 7'0' 6.'9. '9'. C$(E/7EC $($/$% 8'%& 0171(15; 4'/713J5'/713 /1317 0$%&'% j16.'( K'61AD -1'6'%8' 6.'9. CE0$ 012'('%C'% '7'-1(' '0' 6$6.'9. 8'%& 9$32'01 N$@$%9O 7'0' 6.'9. $($/$%; =16'(%8'D C'('. '0' 9E/-E( 01 C(1CD /'C' 'A91E% '9'. CE0$ '7' 8'%& 012'('%C'%D '7'-1(' '0' AE/-EM 0171(15D CE0$ '7' 8'%& 012'('%C'%D 7'0' AE%9E5 2Q.$38 6$-$(./%8' : $(".tombol1").click(function(){ $("p").hide(1000); });

XE0$ 01 '9'6 -$3'391 '7'-1(' 9$32'01 $@$%9 /$%&C(1C $($/$% 8'%& /$/7.%8'1 A('66hy9E/-E("yD /'C' ('C.C'% I.%&61 510$NO 9$35'0'7 6$/.' $($/$%9 l7m; K$31C.9 0'I9'3 $@$%9J$@$%9 8'%& 0'7'9 9$32'01 0'31 $($/$% 4<=>;

JF.&/ S*&N/09& wN0EA./$%9O;3$'08NI.%A91E%O wN6$($A9E3O;-(.3NI.%A91E%O wN6$($A9E3O;A5'%&$NI.%A91E%O

50


wN6$($A9E3O;A(1ACNI.%A91E%O wN6$($A9E3O;0-(A(1ACNI.%A91E%O wN6$($A9E3O;$33E3NI.%A91E%O wN6$($A9E3O;IEA.6NI.%A91E%O wN6$($A9E3O;C$80EH%NI.%A91E%O wN6$($A9E3O;C$873$66NI.%A91E%O wN6$($A9E3O;C$8.7NI.%A91E%O wN6$($A9E3O;(E'0NI.%A91E%O wN6$($A9E3O;/E.6$0EH%NI.%A91E%O wN6$($A9E3O;/E.6$$%9$3NI.%A91E%O wN6$($A9E3O;/E.6$($'@$NI.%A91E%O wN6$($A9E3O;/E.6$/E@$NI.%A91E%O wN6$($A9E3O;/E.6$E.9NI.%A91E%O wN6$($A9E3O;/E.6$E@$3NI.%A91E%O wN6$($A9E3O;/E.6$.7NI.%A91E%O wN6$($A9E3O;3$61b$NI.%A91E%O wN6$($A9E3O;6A3E((NI.%A91E%O wN6$($A9E3O;6$($A9NI.%A91E%O wN6$($A9E3O;6.-/19NI.%A91E%O wN6$($A9E3O;.%(E'0NI.%A91E%O

JS.-XJS.- ,.&'$& >c*.)% ,'('5 6'9. C$/'/7.'% 2Q.$38 '0'('5D '0'%8' I.%&61JI.%&61 $I$C 8'%& 61'7 7'C'1; K1'6'%8' .%9.C /$/-.'9 $I$C /$/.0'3 01 2'@'6A3179D C19' 5'3.6 /$/-.'9 CE0$ 8'%& (./'8'% 7'%2'%&; <'71 0$%&'% /$%&&.%'C'% 2Q.$38 A.C.7 /$%&&.%'C'% I.%&61 $(selector).fadeIn() K$31C.9 '0'('5 $I$CJ$I$C 61'7 7'C'1 8'%& 016$01'C'% E($5 2Q.$38;

>c*.)% +(9AVW JSS.N/ K$3&.%' .%9.C /$%'/71(C'% $($/$% 8'%& 9$36$/-.%81; S%9.C /$%&'9.3 $($/$% 8'%& 9$36$/-.%81 /$('(.1 [,, '0'('5 display:none N-.C'% visibility:hidden O; ,1%9'C6 : $(selector ).show(speed,callback )

I$)$<./.)

D.+-)0#+0

67$$0

G761E%'(; =$%$%9.C'% C$A$7'9'% $($/$% /.%A.( 0'31 5100$% C$ @161-($; F$I'.(9%8' '0'('5 i; e1('1%8' -16' -$3.7': • • • •

A'((-'AC

51

/1((16$AE%06 NAE%9E5 : "ìiO t6(EHt t%E3/'(t tI'69t

G761E%'(; ,.'9. I.%&61 8'%& 'C'% 012'('%C'%% '7'-1(' $I$C 65EH 6$($6'1 012'('%C'%;


[E%9E5 :

89,. :K; P9&/9( +(9AVW <script type="text/javascript" src="jquery.js"> <script type="text/javascript"> $(document).ready(function(){ $(".tombol1").click(function(){

$("p").show(1000,tampilkanAlert); }); }); function tampilkanAlert(){ alert("Paragraf sekarang muncul"); }
Ini adalah paragraph tersembunyi.

>c*.)% (0,.VW JSS.N/ K$3I.%&61 .%9.C /$%8$/-.%81C'% $($/$% 8'%& 0171(15; ,1%9'C6 : $(selector ).hide(speed,callback )

S%9.C 7'3'/$9$3 67$$0 0'% A'((-'AC '0'('5 6'/' 0$%&'% 65EHNO $II$A9; [E%9E5 : $(".tombol1").click(function(){ $("p").hide(); });

>c*.)% /9''B.VW JSS.N/ )0'('5 &'-.%&'% I.%&61 510$ 0'% 65EH; *'01 9E&&($NO -$3I.%&61 /$%'/71(C'% 8'%& 9$36$/-.%81D /$%8$/-.%81C'% 8'%& 9'/7'C; ,1%9'C6 : $(selector ).toggle(speed,callback,switch )

I$)$<./.)

D.+-)0#+0

67$$0

G761E%'(; =$%$%9.C'% C$A$7'9'% $($/$% /.%A.( 0'31 5100$% C$ @161-($; F$I'.(9%8' '0'('5 i; e1('1%8' -16' -$3.7': • • • •

52



A'((-'AC

G761E%'(; ,.'9. I.%&61 8'%& 'C'% 012'('%C'%% '7'-1(' $I$C 65EH 6$($6'1 012'('%C'%;

6H19A5

G761E%'(; K$3%1('1 KEE($'% • •

<3.$D 5'%8' .%9.C /$%'/71(C'% 6$/.' $($/$% U'(6$D 5'%8' /$%8$/-.%81C'% 6$/.' $($/

%$*1C' 7'3'/$9$3 1%1 016$9D 7'3'/$9$3 67$$0 0'% A'((-'AC 7'3'/$9$36 910'C -16' 01&.%'C'%; [E%9E5 :

89,. :L; P9&/9( /9''B.VW <script type="text/javascript" src="jquery.js"> <script type="text/javascript"> $(document).ready(function(){ $(".tombol1").click(function(){ $("p").toggle(true); }); });
Ini adalah paragraf

Ini adalah paragraf lainnya yang belum muncul

Jika bernilai true hanya berfungsi menampilkan, kalau false hanya menyembunyikan

>c*.)% +B0,.D9A&VW JSS.N/ =$%'/71(C'% $($/$% 8'%& 9$36$/-.%81D 6$A'3' $I$C 6(101%&; ,1%9'C6 : $(selector ).slideDown( speed,callback )

S%9.C 7'3'/$9$3 67$$0 0'% A'((-'AC '0'('5 6'/' 0$%&'% I.%&61 65EHNO; [E%9E5: $(".tombol1").click(function(){ $("p").slideDown(); });

>c*.)% +B0,.e#VW JSS.N/ =$%8$/-.%81C'% $($/$% 6$A'3' $I$C 6(101%&; ,1%9'C6 : $(selector ).slideUp( speed,callback )

S%9.C 7'3'/$9$3 67$$0 0'% A'((-'AC '0'('5 6'/' 0$%&'% I.%&61 65EHNO;

53


[E%9E5: $(".tombol1").click(function(){ $("p").slideUp(); });

>c*.)% +B0,.M9''B.VW JSS.N/ g'-.%&'% '%9'3' 6(10$FEH%NO 0'% 6(10$S7NO; =$%8$/-.%81C'% $($/$% 21C' 0'('/ C$'0''% @161-($D /$%'/71(C'% $($/$% 21C' 0'('/ C$0''% 5100$%; ,1%9'C6 : $(selector ).slideToggle( speed,callback )

S%9.C 7'3'/$9$3 67$$0 0'% A'((-'AC '0'('5 6'/' 0$%&'% I.%&61 65EHNO; [E%9E5:

89,. :U; P9&/9( +B0,.M9''B.VW <script type="text/javascript" src="jquery.js"> <script type="text/javascript"> $(document).ready(function(){ $("#contact").click(function(){ $("#contact-box").slideToggle("slow"); }); });
Contact

Nama :
Email :
Komentar :

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.
Sebelum anda memulai mempelajari jQuery, anda harus mempunyai pengetahuan dasar mengenai HTML, CSS dan Javascript.

54


>c*.)% S$,.H&VW JSS.N/ =$%'/71(C'% $($/$% 8'%& 0171(15 21C' 9$36$/-.%81D 6$A'3' $I$C /$/.0'3; ,1%9'C6 : $(selector ).fadeIn( speed,callback )

S%9.C 7'3'/$9$3 67$$0 0'% A'((-'AC '0'('5 6'/' 0$%&'% I.%&61 65EHNO; [E%9E5: $(".tombol1").click(function(){ $("p"). fadeIn(); });

>c*.)% S$,.T*/VW JSS.N/ =$%8$/-.%81C'% $($/$% 8'%& 0171(15D 6$A'3' $I$C /$/.0'3; ,1%9'C6 : $(selector ).fadeOut( speed,callback )

S%9.C 7'3'/$9$3 67$$0 0'% A'((-'AC '0'('5 6'/' 0$%&'% I.%&61 65EHNO; [E%9E5:

89,. :Y; P9&/9( S$,.T*/VW <script type="text/javascript" src="jquery.js"> <script type="text/javascript"> $(function(){ $('.fadeOut_box').click(function(){ $('#box').fadeOut("slow"); }); $('.fadeIn_box').click(function(){ $('#box').fadeIn("slow"); }); }); fadeOut() fadeIn()

55


>c*.)% S$,.M9VW JSS.N/ =$%&'9.3 91%&C'9 C$7.0'3'% $($/$% 9$371(15 /$%.2. 91%&C'9 E7'A198 8'%& 019$%9.C'%; ,1%9'C6 : $(selector ).fadeTo( speed,opacity,callback )

S%9.C 7'3'/$9$3 67$$0 0'% A'((-'AC '0'('5 6'/' 0$%&'% I.%&61 65EHNO; S%9.C 7'3'/$9$3 E7'A198 -16' -$3%1('1 i 6'/7'1 "; [E%9E5 : $(".tombol1").click(function(){ $("p"). fadeTo(1000,0.6); });

>c*.)% $&0<$/.VW JSS.N/ =$%&.-'5 6.'9. $($/$% 0'31 6'9. C$'0''% C$ C$'0''% 8'%& ('1%%8'; X$'0''% 8'%& 01.-'5 1%1 -$30'6'3C'% [,,; e1('1 73E7$391 [,, 8'%& -$3.-'5 6$A'3' -$3'%&6.3J'%&6.3D 5'( 1%1 .%9.C /$%A179'C'% $I$C '%1/'61; e1('1 73E7$391 [,, 8'%& -16' 01.-'5 '0'('5 %1('1 -$3917$ '%&C'D -'1C 6'9.'%%8' 71M$( '9'. 7$36$% z; S%9.C 917$ 6931%& 910'C -16' 01'%1/'61C'%; ,1%9'C6 : $(selector ).animate( styles,speed,easing,callback )

I$)$<./.)

D.+-)0#+0

698($6

L'21-; =$%$%9.C'% 73E7$391 [,, 0'% %1('1%8' 8'%& 'C'% 01J'%1/'61; #3E7$391 [,, 8'%& -16' 01J'%1/'61 : • • • • • • • • • • • • • • • • • • • •

56

-'AC&3E.%0#E6191E% -E30$3L1095 -E30$3KE99E/L1095 -E30$3>$I9L1095 -E30$3P1&59L1095 -E30$3$I9 /'3&1%P1&59 /'3&1%$I9 7'001%&P1&59 7'001%&

• • • • • • • • • • • • • •

67$$0

/'M4$1&59 /'ML1095 /1%4$1&59 /'ML1095 IE%9 IE%9,1b$ -E99E/ ($I9 31&59 9E7 ($99$3,7'A1%& HE30,7'A1%& (1%$4$1&59 9$M9R%0$%9

G761E%'(; =$%$%9.C'% C$A$7'9'% $($/$% /.%A.( 0'31 5100$% C$ @161-($; F$I'.(9%8' '0'('5 i; e1('1%8' -16' -$3.7': • • • •

$'61%&


G761E%'(; =$%$%9.C'% I.%&61 $'61%& 8'%& 016$9 7'0' 67$$0 '%1/'61; K.1(9 1% I.%&61 $'61%& '0'('5: • •

A'((-'AC

6H1%& (1%$'3

G761E%'(; ,.'9. I.%&61 8'%& 'C'% 012'('%C'%% '7'-1(' $I$C 65EH 6$($6'1 012'('%C'%;

[E%9E5 :

89,. :_; P9&/9( $&0<$/.VW <script type="text/javascript" src="jquery.js"> <script type="text/javascript"> $(document).ready(function() { $(".tombol1").click(function(){ $("#box").animate({height:"300px"}); }); $(".tombol2").click(function(){ $("#box").animate({height:"100px"}); }); });

57


>c*.)% +/9#VW JSS.N/ =$%&5$%91C'% '%1/'61 8'%& 6$0'%& -$32'('%; ,1%9'C6 : $(selector ).stop(stopAll,goToEnd )

I$)$<./.)

D.+-)0#+0

69E7)((

G761E%'(; K$3%1('1 -EE($'%D /$%$%9.C'% '7'C'5 /$%&5$%91C'% 6$/.' '%1/'61D 9$3/'6.C 8'%& %&'%931 .%9.C 012'('%C'% 7'0' $($/$% 8'%& 0171(15 '9'. 910'C;

&E
G761E%'(; K$3%1('1 KEE($'%D /$%$%9.C'% '7'C'5 '%1/'61 8'%& 6$0'%& 2'('% 01CE/7($9C'% '9'. 910'C; #'3'/$9$3 1%1 5'%8' -16' 01&.%'C'% 21C' 7'3'/$9$3 69E7)(( 01J6$9;

[E%9E5 :

89,. :`; P9&/9( +/9#VW <script type="text/javascript" src="jquery.js"> <script type="text/javascript"> $(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); }); });

58


fV+.B.N/9)W;,.B$%VW K$3&.%' .%9.C /$%J6$9 0$('8 .%9.C 6$/.' I.%&61 8'%& /'615 %&'%931 .%9.C $($/$% 8'%& 0171(15; ,1%9'C6 : $(selector ).delay()

fV+.B.N/9)W;,.7*.*.VW =$%2'('%C'% I.%&61 -$31C.9%8' 8'%& ('&1 %&'%931 .%9.C $($/$% 8'%& 0171(15; ,1%9'C6 : $(selector ).dequeue()

fV+.B.N/9)W;7*.*.VW =$%'/71(C'% I.%&61 8'%& %&'%931 .%9.C $($/$% 9$371(15; ,1%9'C6 : $(selector ).queue()

>c*.)% NB.$)c*.*.VW JSS.N/ =$%&5$%91C'% 6$/.' I.%&61 8'%& ('&1 %&'%931 0'% -$(./ 012'('%C'%; ,1%9'C6 : $(selector ).stop(queueName)

#'3'/$9$3 queueName '0'('5 %'/' '%931'% 8'%& 'C'% 015$%91C'%; [E%9E5 : $("#stop").click(function(){ $("#box").clearQueue(); });

3$&0#*B$+0 5M34 ,.&'$& >c*.)% 2\.$38 /$/7.%8'1 C$/'/7.'% 8'%& 7EH$3I.(( 0'('/ 5'( /$/'%17.('61D /$%&'/-1( '9'. /$%'/-'5 CE%9$%D 0'% 6$-'&'1%8' 9$35'0'7 4<=>;

(/O 0'31 $($/$% 4<=> 8'%& 0171(15 C19' &.%'C'% $(selector).html(content) ; )7'-1(' 7'3'/$9$3 *$(,"(, 910'C C19' 9$%9.C'% /'C' I.%&61 59/(NO -$3&.%' .%9.C /$%0'7'9C'% CE%9$% 0'31 4<=>; [E%9E5 :

89,. :a; P9&/9( (/ <script type="text/javascript" src="jquery.js"> <script type="text/javascript">

59

http://blog.codingwear.com PHP Ajax Javascript jQuery Tutorial Indonesia $(function(){ $("#lihat").click(function(){ var isinya = $("#paragraf").html(); alert(isinya); }); $("#isikan").click(function(){ var isilagi = $("#isi").val(); alert(isilagi); $("#paragraf").html(isilagi); }); });
jQuery mempunyai kemampuan yang powerfull dalam hal memanipulasi, mengambil atau menambah konten, dan sebagainya terhadap HTML
Teks :

F$BVW #'0' AE%9E5 01 '9'6 C19' (15'9 '0' CE0$ var isilagi = $("#isi").val();

XE0$ 1%1 -$3'391 C19' /$%&'/-1( %1('1 0'31 l1%7.9 987$h9$M9 10h161m 0'% /$/'6.CC'%%8' C$ @'31'-$( isilagi ; ,'/' 0$%&'% I.%&61 59/(NOD '7'-1(' C19' /'6.CC'% %1('1 0'31 @'(NOD /'C' '391%8' C19' /$J6$9 %1('1 0'31 $($/$% 8'%& 0171(15; K1'6'%8' @'(NO 01&.%'C'% 7'0' $($/$%J$($/$% 4<=> l1%7.9mD AE%9E5 : $(“#isi”).val(“hallo apa kabar”);

XE0$ 01 '9'6 -$3'391 C19' /$J6$9 %1('1 0$%&'% V5'((E '7' C'-'3W;

$//)VW F$%&'% /$%&&.%'C'% I.%&61 '993NOD 1%1 /$/-.'9 /.0'5 -'&1 C19' .%9.C /$%0'7'9C'% %1('1 0'31 6.'9. 73E7$391 $($/$% 4<=> 8'%& C19' 71(15; ,1%9'C6 : $(selector).attr(properties,nilai);

#'3'/$9$3 73E7$391$6 '0'('5 %'/' 73E7$391 8'%& 1%&1% C19' '/-1( '9'. 6$9; [E%9E5 73E7$391 /16'(%8' : 10D A('66D 919($D 63AD 53$I 0'% 6$-'&'1%8'; #'3'/$9$3 %1('1D '7'-1(' C19' 161 '391%8' C19' /$J6$9 %1('1 73E7$391 8'%& C19' 9$9.C'%D '7'-1(' CE6E%& '391%8' C19' /$%&'/-1( %1('1 73E7$391 8'%& C19' 9$%9.C'%;

[E%9E5 :

60


89,. @b; P9&/9( $//)VW <script type="text/javascript" src="jquery.js"> <script type="text/javascript"> $(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); }); }); link

$,,PB$++VW K$3&.%' .%9.C /$%'/-'5C'% '9'. /$%&.-'5 A('66 .%9.C $($/$% 8'%& 0171(15; ,1%9'C6 : $(selector).addClass(namakelas)

[E%9E5 :

89,. @:; P9&/9( $,,PB$++VW <script type="text/javascript" src="jquery.js"> <script type="text/javascript"> $(function(){ $('.ubahclass').click(function(){ $(".besar").addClass("kecil"); }); }); Klik
www.desrizal.com

61


)0' -'%8'C I.%&61JI.%&61 ('1%%8' .%9.C /$/'%17.('61 4<=> :

3$&0#*B$+0

D.+N)0#/09&

wN6$($A9E3O;59/(NAE%9$%9O

,$9 CE%9$% N1%%$3 4<=>O 0'31 $($/$% 8'%& 0171(15

wN6$($A9E3O;9$M9N9$M9O

,'/' 6$7$391 59/(NOD 9'71 9'& 'C'% 01J"+*%/"

wN6$($A9E3O;'993N'993D@'(.$O

,$9 '931-.9 0'% %1('1%8' 0'31 $($/$% 8'%& 0171(15

wN6$($A9E3O;@'(N@'(.$O

,$9 %1('1 0'31 $($/$% 8'%& 0171(15

?.//0&' P9&/.&/+ wN6$($A9E3O;59/(NO

=$%&'/-1( CE%9$% N1%%$3 4<=>O 0'31 $($/$% 8'%& 0171(15

wN6$($A9E3O;9$M9NO

=$%&'/-1( CE%9$% 9$C6 0'31 $($/$% 8'%& 0171(15

wN6$($A9E3O;'993N'993O

=$%&'/-1( %1('1 0'31 6.'9. '931-.9 $($/$% 8'%& 0171(15;

wN6$($A9E3O;@'(NO

=$%&'/-1( %1('1T@'(.$ 0'31 $($/$% 8'%& 0171(15;

",,0&' P9&/.&/ wN6$($A9E3O;'I9$3NAE%9$%9O

=$%'/-'5 CE%9$% 6$9$('5 $($/$% 0171(15;

wN6$($A9E3O;-$IE3$NAE%9$%9O

=$%'/-'5 CE%9$% 6$-$(./ $($/$% 0171(15;

wN6$($A9E3O;1%6$39)I9$3N6$($A9E3O

=$%'/-'5 $($/$% 8'%& 019$%9.C'% 6$9$('5 $($/$% 8'%& 0171(15;

wN6$($A9E3O;1%6$39K$IE3$N6$($A9E3O =$%'/-'5 $($/$% 8'%& 019$%9.C'% 6$-$(./ $($/$% 8'%& 0171(15;

3$&0#*B$/. PEE

D.+N)0#/09&

wN6$($A9E3O;'00[('66NAE%9$%9O

=$%'/-'5 '9'. /$%&.-'5 A('66 $($/$% 8'%& 0171(15;

wN6$($A9E3O;3$/E@$[('66NAE%9$%9O =$%&51('%&C'% A('66 0'31 $($/$% 8'%& 0171(15 wN6$($A9E3O;9E&&($[('66NAE%9$%9O

wN6$($A9E3O;5'6[('66NAE%9$%9O

[$C '7'C'5 $($/$% /$/1(1C1 A('66;

",,0&' H&&.) P9&/.&/ wN6$($A9E3O;'77$%0NAE%9$%9O

=$%'/-'5C'% CE%9$% C$ 0'('/ CE%9$% 0'3 $($/$% 8'%& 0171(15

wN6$($A9E3O;73$7$%0NAE%9$%9O

t#3$7$%0t CE%9$% C$ 0'('/ CE%9$% 0'3 $($/$% 8'%& 0171(15

wNAE%9$%9O;'77$%0
=$%'/-'5C'% $($/$% C$ 0'('/ CE%9$% 0'31 $($/$% 8'%& 0171(15;

wNAE%9$%9O;73$7$%0
t#3$7$%0t $($/$% C$ 0'('/ CE%9$% 0'31 $($/$% 8'%& 0171(15;

])$##0&' wN6$($A9E3O;H3'7NAE%9$%9O

L3'7 $($/$% 8'%& 0171(15 0'('/ 6$-.'5 CE%9

%$wN6$($A9E3O;H3'7)((NAE%9$%9O

L3'7 6$/.' $($/$% 8'%& 0171(15 /$%2'01 6'9. CE%9

%$wN6$($A9E3O;H3'71%%$3NAE%9$%9O

L3'7 CE%9$% 1%%$3 A51(0 8'%& 0171(15

wN6$($A9E3O;.%H3'7NO

P$/E@$ 0'% 3$7('A$ 7'3$%96 0'31 $($/$% 8'%& 0171(15

P9#%Z 6.#B$N.Z 6.<9F. wNAE%9$%9O;3$7('A$)((N6$($A9E3O

=$%.C'3 $($/$% 8'%& 0171(15 0$%&'% $($/$% 8'%& 019$%9.C'%

wN6$($A9E3O;3$7('A$L195NAE%9$%9O =$%.C'3 $($/$% 8'%& 0171(15 0$%&'% CE%9$% 8'%& -'3.

62


wN6$($A9E3O;$/798NO

P$/E@$ 6$/.' CE%9$% 0'% A51(0 $($/$%96 0'31 $($/$% 8'%& 0171(15

wN6$($A9E3O;3$/E@$NO

P$/E@$ $($/$% 8'%& 0171(15

wN6$($A9E3O;3$/E@$)993N'993O

P$/E@$ '931-.9 8'%& 019$%9.C'% 0'31 $($/$% 8'%& 0171(15

wN6$($A9E3O;A(E%$NO

[(E%$ $($/$% 8'%& 0171(15

wN6$($A9E3O;0$9'A5NO

P$/E@$ $($/$% 8'%& 0171(15 0'31 FG=

3$&0#*B$+0 PEE ,.&'$& >c*.)% 3$&0#*B$+0 #)9#.)/0 PEE 2\.$38 2.&' /$/7.%8'1 C$/'/7.'% 0'('/ 5'( /$/'%17.('61 [,,; )0' B I.%&61 .9'/' 0'('/ 2\.$38 .%9.C /$('C.C'% /'%17.('61 •

$(selector).css(name,value)

•

$(selector).css({properties})

•

$(selector).css(name)

U.%&61 css() -$3&.%' .%9.C /$%0'7'9C'% '9'. 6$9 6$-.'5 73E7$391 [,, '9'. ($-15 .%9.C $($/$% 8'%& 0171(15; *1C' 7'3'/$9$3 &$<. 0'% F$B*. 01161D '391%8' C19' /$J6$9 %1('1 0'31 73E7$391 [,,; S%9.C /$J6$9 %1('1J%1('1 .%9.C 73E7$391 [,, ($-15 0'31 6'9.D -16' &.%'C'% g#)9#.)/0.+h *1C' 5'%8' .%9.C /$%0'7'9 %1('1 0'31 73E7$391 [,, 8'%& 011%&1%C'% 0'31 $($/$% 8'%& 0171(15 A.C.7 161 7'3'/$9$3 &$<. 6'2'; [E%9E5 :

89,. @@; P9&/9( N++VW <script type="text/javascript" src="jquery.js"> <script type="text/javascript"> $(document).ready(function(){ $("#tombol1").click(function(){ $(".p1").css("color","red"); $(".p2").css({"color":"white","backgroundcolor":"#ff8954","font-family":"Arial","fontsize":"20px","padding":"5px"}); }); $("#tombol2").click(function(){ var nilai = $(".p1").css("color"); alert(nilai); }); });
Paragraf ini cuma berubah satu properti CSS

63

Paragraf ini cuma berubah banyak properti CSS

3$&0#*B$+0 PEE E0^. S%9.C /$/'%17.('61 .C.3'% 0'31 $($/$% 8'%& 0171(15 N91%&&1 0'% ($-'3OD /'C' '0' 0.' I.%&61 .%9.C 5'( 1%1D 8'19. : •

$(selector).height(value)

•

$(selector).width(value)

*1C' '%0' /$%&161 7'3'/$9$3 @'(.$D /'C' '391%8' '%0' /$J6$9 %1('1 5$1&59 '9'. H1095 0'31 $($/$% 8'%& '%0' 71(15; *1C' '%0' /$%&E6E%&C'% 7'3'/$9$3 @'(.$D /'C' '391%8' '%0' /$%&'/-1( %1('1 5$1&59 '9'. H1095 0'31 $($/$% 8'%& 0171(15; [E%9E5 :

89,. @K; P9&/9( PEE +0^. <script type="text/javascript" src="jquery.js"> <script type="text/javascript"> $(document).ready(function(){ $("#tombol1").click(function(){ $("#kotak").width("300px"); $("#kotak").height("300px"); }); $("#tombol2").click(function(){ var nilai = $("#kotak").width(); alert(nilai); }); });
Hello

64


3$&0#*B$+0 I9+0+0 S%9.C /$('C.C'% /'%17.('61 7E6161 0'31 6.'9. $($/$% 4<=>D -$31C.9 -$-$3'7' I.%&61 2\.$38 .%9.C /$('C.C'%%8';

9SS+./VW S%9.C /$%0'7'9C'% '9'. /$J6$9 EII6$9 0'31 $($/$% 8'%& 0171(15; P$('91I 9$35'0'7 0EC./$%; ,1%9'C6 : $(selector ).offset( coordinates)

#'3'/$9$3

AEE301%'9$6

-16'

-$3.7'

CEE301%'9

0'31

$($/

%$8'%&

0171(15D

AE%9E5

:

offset({top:100,left:0})

*1C' C19' /$%&E6E%&C'% 7'3'/$9$3 AEE301%'9$6D '391%8' C19' /$%&'/-1( %1('1 EII6$9 0'31 $($/$% 8'%& C19' 71(15; U.%&61 EII6$9NO 'C'% /$%&5'61( E-2$C 8'%& /$/7.%8'1 ? 73E7$391 8'19. 9E7 0'% ($I9; [E%9E5 :

89,. @L; P9&/9( 9SS+./VW <script type="text/javascript" src="jquery.js"> <script type="text/javascript"> $(document).ready(function(){ $("#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); }); });
Hello World!
x =
y =

65


9SS+./I$).&/VW S%9.C /$%0'7'9C'% $($/$%9 7'3$%9 9$30$C'9 0$%&'% 7E6161 8'& 9$('5 019$%9.C'%; ,1%9'C6; $(selector ).offset()

[E%9E5 :

89,. @U; P9&/9( 9SS+./I$).&/VW <script type="text/javascript" src="jquery.js"> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").offsetParent().css("background-color","green"); }); });

Klik tombol untuk set background color untuk elemen parent terdekat dari paragraf ini

#9+0/09&VW 4'/713 6'/' 0$%&'% EII6$9NOD 8'19. .%9.C /$%0'7'9C'% '9'. /$%$%9.C'% 7E6161 0'31 $($/$%D 9$9'71 3$('91I 9$35'0'7 7'3$%9; U.%&61 7E6191E%NO 'C'% /$%&5'61( E-2$C 8'%& /$/7.%8'1 ? 73E7$391 8'19. 9E7 0'% ($I9; ,1%9'C6 : $(selector ).position()

[E%9E5 : $(".tombol").click(function(){ x=$("p").position(); $("#div1").text(x.left); $("#div2").text(x.top); });

+N)9BB4.S/VW S%9.C /$%0'7'9C'% '9'. /$%$%9.C'% 6A3E(( ($I9 EII6$9 0'31 $($/$% 8'%& 0171(15; ,1%9'C6 : $(selector ).scrollLeft( offset)

66


#'3'/$9$3 EII6$9 '0'('5 %1('1 0'('/ 71M$( $($/$% 'C'% 01 6A3E(( 0'31 7E6161 C131 $($/$% 9$36$-.9; *1C' 7'3'/$9$3 EII6$9 01CE6E%&C'%D /'C' '391%8' C19' /$%&'/-1( %1('1 EII6$9 0'31 6A3E(( ($I9 $($/$% 9$36$-.9; [E%9E5 : $(".tombol").click(function(){ $("div").scrollLeft(300); });

+N)9BBM9#VW S%9.C /$%0'7'9C'% '9'. /$%$%9.C'% 6A3E(( 9E7 EII6$9 0'31 $($/$% 8'%& 0171(15; ,1%9'C6 : $(selector ).scrollTop( offset)

#'3'/$9$3 EII6$9 '0'('5 %1('1 0'('/ 71M$( $($/$% 'C'% 01 6A3E(( 0'31 7E6161 '9'6 $($/$% 9$36$-.9; *1C' 7'3'/$9$3 EII6$9 01CE6E%&C'%D /'C' '391%8' C19' /$%&'/-1( %1('1 EII6$9 0'31 6A3E((
].= M$= EN)9BB P9&/.&/ ,$C'3'%& /'31 C19' (15'9 AE%9E5 H$-619$D /$%&&.%'C'% 2Q.$38; F1 /'%' H$- 1%1 /$%&&.%'C'% 9'-J9'-D 8'%& /$J(E'0 CE%9$% 0$%&'% /$('C.C'% '%1/'61 6A3E(( 9$35'0'7 CE%9$% 8'%& C19' 6$/-.%81C'%;

89,. @Y; P9&/9( +N)9BBM9#VW <script type="text/javascript" src="jquery.js"> <script> $(document).ready(function(){ $("#home").click(function(){ $("#konten").animate({ scrollTop: 0},"slow"); }); $("#about").click(function(){ $("#konten").animate({ scrollTop: 500},"slow"); }); $("#contact").click(function(){ $("#konten").animate({ scrollTop: 1000},"slow"); }); }); Home About Contact

Home

Selamat Datang

About Me
Hi,namaku Desrizal

Lahir di Pekanbaru tahun 1981

Punya hobi otak atik komputer

Contact

68

Nama :

Emai :

Komentar :

S%9.C /$%&51('%&C'% 6A3E(( 01 l01@ 10hCE%9$%9m C19' /$%&&.%'C'% [,, overflow:hidden;

X$91C' C19' /$%&C(1C 6'('5 6'9. 9'-D /'C' C19' /$/-.'9 '%1/'61 6A3E((1%& /$%&&.%'C'% CE0$ : $("#konten").animate({ scrollTop: 500},"slow");

4'61( 0'31 CE0$ 01 '9'6 '0'('5 6$-'&'1 -$31C.9 :

?$<=$) :b; M$<#0B$& A.=+0/. M$= +N)9BB N9&/.&/

69


` 2\.$38 )*)+

70


#'0' K'- 6$-$(./%8' C19' 9$('5 /$%&$%'( '7' 0'% -'&'1/'%' 2Q.$38; ,''9%8' C19' /$/7$('2'31 ($-15 ('%2.9 -'&'1/'%' /$/-.'9 '7(1C'61 )2'M /$%&&.%'C'% 2\.$38; >1-3'38 2\.$38 /$/7.%8'1 I.%&61JI.%&61 C5.6.6 .%9.C 7$/-.'9'% )2'M; F$%&'% /$%&&.%'C'% 2\.$38D C19' 0'7'9 /$('C.C'% 3$Q.$69 0'9' <+D +=> -'5C'% *,Ge 0'31 6$3@$3 /$%&&.%'C'% /$9E0$ gZ< '9'. #G,<;

i*&'+0Xi*&'+0 "1"2 >c*.)% K$31C.9 '0'('5 I.%&61JI.%&61 8'%& 016$01'C'% E($5 2\.$38 8'%& -$3C'19'% 0$%&'% )2'M;

B9$,VW =$%&'/-1( 0'9' 0'31 6$3@$3 0'% /$%$/7'9C'%%8' C$ 0'('/ $($/$% 4<=>; ,1%9'C6 : $(selector ).load(url,data,callback)

#'3'/$9$3 *)B '0'('5 '('/'9 '9'. %'/' I1($ 01 6$3@$3 8'%& 'C'% C19' '/-1( '9'. 7'%&&1( #'3'/$9$3 ,$/$ -$361I'9 E761E%'(D '0'('5 7'6'%&'% C$8 0'% @'(.$ 8'%& 01C131/ C$ 6$3@$3; #'3'/$9$3 N$BB=$N- -$361I'9 E761E%'(D '0'('5 I.%&61 8'%& 01$C6$C.61 21C' 0'9' 01'/-1(; [E%9E5 : =16'( C19' 7.%8' I1($ ,$/$;/C/D 8'%& 161%8' : Hai ini adalah konten dari file data.txt

>'(. C19' -.'9 CE0$ '2'M .%9.C /$J(E'0 CE%9$% 0'31 0'9';9M9

89,. @_; N9&/9(B9$,;(/ <script type="text/javascript" src="jquery.js"> <script type="text/javascript"> $(document).ready(function(){ $("#tombol").click(function(){ $('#teks').load('data.txt'); }); });

F'31 AE%9E5 01 '9'6D '7'-1(' C19' /$%&C(1C 9E/-E( X(1C R%1D /'C' 'C'% 6$&$3' /$%2'('%C'% I.%&61 (E'0 I1($ ,$/$;/C/ 0'% /$/'6.CC'%%8' C$ 0'('/ 1%%$34<=>
; ,$C'3'%& /'31 C19' (15'9 AE%9E5 21C' /$/'%&&1( I1($ -$3.7' #4# 0'% /$%&131/ C'% -$-$3'7' 0'9' '9'. 7'3'/$9$3 .%9.C 01E('5 01 6161 6$3@$3;

71


89,. @`; N9&/9(B9$,@;(/ <script type="text/javascript" src="jquery.js"> <script type="text/javascript"> $(document).ready(function(){ $("#tombol").click(function(){ $('#teks').load("data.php","[email protected]",beritah u()); }); }); function beritahu(){ alert("sudah diambil datanya"); }

#'0' AE%9E5 01 '9'6 C19' /$('C.C'% 3$Q.$69 C$ 6$3@$3 .%9.C /$/'%&&1( I1($ #4# 0'9';757 0'% /$%&131/C'% 7'3'/$9$3J7'3'/$9$3 0'% %1('1%8' 0$%&'% /$9E0$ gZ<; X$/.01'% /$%&J$C6$C.61 fungsi beritahu();

89,. @a; ,$/$;#(# ".$_GET['nama']."
"; echo "Email : ".$_GET['email']."."; ?>

72


jQuery.ajax() Sintaks : $.ajax(settingan)

i*&'+0 Q .%9.C /$('C.C'% '68%A53E%E.6 4<<# N)2'MO 3$Q.$69; K$31C.9 '0'('5 -$-$3'7' +.//0&'$& 7$%91%& .%9.C I.%&61 $.ajax() type

f'19. 917$ /$9E0$ 3$Q.$69 0'9'D 8'19. #G,< '9'. gZ
,931%& 8'%& /$3.7'C'% SP> '9'. I1($ 01 6$3@$3D 9.2.'% C19' /$%&131/ 3$Q.$69 data

F'9' 8'%& 1%&1% C19' C131/ C$ 6$3@$3 .%9.C 0173E6$6D A'3' 7$%.(16'%%8' "data1=value1&data2=value2" cache

K16' -$3%1('1 93.$ '9'. I'(6$; *1C' -$3%1('1 I'(6$D 0'9' 8'%& 013$Q.$69 910'C 'C'% 01A'A5$ E($5 -3EH6$3 success

U.%&61 8'%& C19' 2'('%C'% 21C' 3$Q.$69 9$('5 6.C6$6 012'('%C'% S%9.C 6$991%&'% ('1%%8' -16' 01(15'9 01 5997:TT'71;2Q.$38;AE/TA'9$&E38T'2'MT

P9&/9( Q $.ajax({ url: "proses.php", data: "[email protected]&sex=Male", cache: false, success: function(msg){ $("#teks").html(msg); } });

"#B0-$+0 H&#*/Z e#,$/. ,$& D.B./. ,$C'3'%& /'31 C19' -.'9 '7(1C'61 6$0$35'%' /$%&&.%'C'% 2Q.$38 0'% #4# .%9.C 7$/3E6$6'% 01 6161 6$3@$3; #'0' AE%9E5JAE%9E5 8'%& 'C'% 6'8' -$31C'%D C19' 'C'% -'%8'C /$%&&.%'C'% I.%&61JI.%&61 2Q.$38 6$7$391 val(), html(), show(), hide() 0'% ('1%%8'; S%9.C 9.9E31'( /$%&$%'1 I.%&61 9$36$-.9D 61('5C'% -'A' 01 7$%&$%'('% 2Q.$38; 2Q.$38; #'0' AE%9E5 -$31C.9 C19' 'C'% /$/-.'9 '7(1C'61 0'9' C'38'H'%

E/)*-/*) M$=.B ,$/$-$)%$A$& ,0 3%Ec4

73


#$39'/' /'31 C19' -.'9 0.(. 9'-$( 0'9'C'38'H'% 01 0'9'-'6$ =8,\> 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', '[email protected]', 'Jakarta'), ('FI885245', 'Budix', '[email protected]', 'USA'), ('FI889456', 'Desrizal', '[email protected]', 'Tembagapura');

89,. 5M34 ,$& >c*.)% ='31 C19' /.('1 /$/-.'9 CE0$ 4<=> 0'% 2\.$38D -.'9 I1($ 59/(D C19' -$31 %'/' 0&,.C;(/ Ajax jQuery by Desrizal <script type="text/javascript" src="jquery-1.4.3.min.js"> <script> var nik; var nama; var email; var alamat; var datanya; $(document).ready(function(){ //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, success: function(msg){ //karna di server pembatas setiap data adalah | //maka kita split dan akan membentuk array data = msg.split("|"); //masukkan ke masing-masing textfield

74

http://blog.codingwear.com PHP Ajax Javascript Javascript jQuery Tutorial Tutorial Indonesia $("#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 nik = $("#nik").val(); 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..."); $("#loading").show(); $.ajax({ url: "proses.php", data: "op=update"+datanya, cache: false, success: function(msg){ if(msg=="sukses"){ $("#status").html("Update Berhasil..."); }else{ $("#status").html("ERROR.."); } $("#loading").hide(); } }); }); //jika tombol DEL diklik $("#tdelete").click(function(){ nik = $("#nik").val(); if(nik=="Pilih NIK"){ alert("Pilih dulu NIK"); exit(); } $("#status").html("Lagi didelete..."); $("#loading").show(); $.ajax({ url: "proses.php", data: "op=delete&nik="+nik, cache: false,

75

http://blog.codingwear.com PHP Ajax Javascript jQuery Tutorial Indonesia success: function(msg){ if(msg=="sukses"){ $("#status").html("Delete Berhasil..."); }else{ $("#status").html("ERROR.."); } $("#nama").val(""); $("#email").val(""); $("#alamat").val(""); $("#loading").hide(); $("#nik").load("proses.php","op=ambiloption"); } }); }); //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..."); $("#loading").show(); $.ajax({ url: "proses.php", data: "op=tambah"+datanya, cache: false, success: function(msg){ if(msg=="sukses"){ $("#status").html("Berhasil ditambah..."); }else{ $("#status").html("ERROR.."); } $("#loading").hide(); $("#nik").load("proses.php","op=ambiloption"); $("#formnik").hide(); $("#nik2").val(""); }

76

http://blog.codingwear.com PHP Ajax Javascript jQuery Tutorial Indonesia }); }); }); Nomor Induk Karyawan :
Tambah Data Karyawan
NIK :

Nama :

Email :

Alamat :

89,. I5IZ I.<)9+.+$& D0 E0+0 E.)F.) #'0' CE0$ 2Q.$38 01 '9'6D '2'M /$('C.C'% 3$Q.$69 C$ I1($ #)9+.+;#(# Pilih NIK\n"; while($op = mysql_fetch_array($option)){ echo "\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

Panduan Lengkap PHP Ajax jQuery.pdf

Recommend Documents