TUGAS PEMROGRAMAN WEB STATIS MAKALAH

JAVASCRIPT, CSS, AJAX, JQUERY

DISUSUN OLEH:

MIRZA ILMAWAN HAKIM

NIM : 12121151

TEKNIK INFORMATIKA SEMESTER 1

STMIK EL-RAHMA YOGYAKARTA

2012

PENDAHULUAN

Alhamdulillah saya ucapkan kehadirat Allah SWT karena dengan izin-Nya lah makalah ini bisa terselesaikan. Perkembangan teknologi komputer dan internet semakin beragam. Web sebagai media informasi juga mengalami perkembangan yang signifikan. Sehingga munculah teknologi pemrograman web yang mengandalkan JavaScript, CSS, AJAX, dan jQuery. Hal ini dikarenakan fungsinya yang membuat sebuah halaman web menjadi ringan memori, cepat diakses, dan sangat interaktif. Makalah mengenai JavaScript, CSS, AJAX, dan jQuery ini disusun untuk memenuhi tugas Mata Kuliah Pemrograman Web Statis. Tentu saja makalah ini masih jauh dari sempurna, untuk itu saya mengharap kritik dan saran dari pembaca sekalian, untuk perbaikan makalah ini.

PENYUSUN

ii

DAFTAR ISI

PENDAHULUAN.................................................................................................... ii DAFTAR ISI ............................................................................................................ iii BAB I 1.1 1.2 1.3 1.4 BAB II 2.1 2.2 2.3 2.4 BAB III 3.1 3.2 3.3 3.4 3.5 BAB IV 4.1 4.2 4.3 4.4 4.5 : JAVASCRIPT ................................................................................... 1 Pengenalan JavaScript .......................................................................... 1 Syntax/ Penulisan JavaScript ................................................................ 2 Implementasi dan Contoh-Contoh JavaScript ...................................... 3 Kelebihan dan Kekurangan JavaScript ................................................. 9 : CSS ..................................................................................................... 11 Pengenalan CSS .................................................................................... 11 Metode Implementasi/ Penulisan dan Sintaks CSS .............................. 11 Contoh-Contoh Penggunaan CSS ......................................................... 16 Kelebihan dan Kekurangan dari CSS ................................................... 18 : AJAX.................................................................................................. 19 Pengenalan AJAX ................................................................................. 19 Sintaks dalam AJAX............................................................................. 20 Implementasi AJAX ............................................................................. 21 Contoh Penggunaan AJAX ................................................................... 21 Kelebihan dan Kekurangan AJAX ....................................................... 26 : JQUERY ............................................................................................ 28 Pengenalan jQuery ................................................................................ 28 Sintaks jQuery....................................................................................... 29 Implementasi jQuery ............................................................................ 30 Contoh Sederhana jQuery ..................................................................... 31 Kelebihan dan Kekurangan jQuery ...................................................... 32

DAFTAR PUSTAKA ............................................................................................. 33

iii

BAB I

JAVASCRIPT

1.1

Pengenalan JavaScript
Ekstensi berkas Jenis MIME Uniform Type Identifier Dikembangkan oleh
.js application/javascript, text/javascript[1]

com.netscape.javascript Netscape Communications

Corporation, Mozilla Foundation Rilis terbaru Jenis format Situs web 1.9.3 / 2010 Bahasa skrip Mozilla Developer Center

1.1.1 Adalah
JavaScript adalah bahasa skrip yang populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web(ditempelkan pada kode HTML) menggunakan tag SCRIPT. Dengan bahasa ini, kemampuan HTML menjadi lebih luas.

1.1.2 Sejarah
JavaScript pertama kali dikembangkan oleh Brendan Eich dari Netscape dibawah nama Mocha, yang nantinya namanya diganti menjadi LiveScript, dan akhirnya menjadi JavaScript. Navigator sebelumnya telah mendukung Java untuk lebih bisa dimanfaatkan para programmer yang non-Java. Maka dikembangkanlah bahasa pemrograman bernama LiveScript untuk mengakomodasi hal tersebut.[ Bahasa pemrograman inilah yang akhirnya berkembang dan diberi nama JavaScript, walaupun tidak ada hubungan bahasa antara Java dengan JavaScript. JavaScript bisa digunakan untuk banyak tujuan, misalnya untuk membuat efek rollover baik di gambar maupun teks, dan yang penting juga adalah untuk membuat AJAX. JavaScript adalah bahasa yang digunakan untuk AJAX.

1.2

Syntax/ Penulisan JavaScript

Syntax JavaScript mengacu pada seperangkat aturan yang menentukan bagaimana

bahasa tersebut akan ditulis (oleh pemrogram/ brainware) dan diterjemahkan (oleh browser). Sintaks JavaScript bersifat case sensitive, artinya huruf kecil dan huruf besar adalah berbeda. Setiap baris kode javascript dipisahkan baris baru atau bisa juga titik koma (;). Komentar dalam javascript di awali dengan // atau ditulis diantara /* dan */
<html> <body> Percobaan memakai javascript:<br> <script language = "javascript"> <!-document.write("selamat mencoba javascript<br>"); document.write("semoga sukses!"); //--> </script> </body> </html>

Perhatikan bahwa coding di atas tidaklah asing bagi anda, kecuali mungkin bagian:
<script language = "javascript"> <!-document.write("selamat mencoba javascript<br>"); document.write("semoga sukses!"); //--> </script>

Kode di atas itulah yang dinamakan dengan JavaScript JavaScript diawali dengan tag <SCRIPT> dan diakhiri dengan tag </SCRIPT> Di dalam tag <SCRIPT> terdapat atribut LANGUAGE yang diisi dengan value JavaScript. Tag tersebut oleh browser akan dikenali sebagai JavaScript dengan menerjemahkan kode di antara <SCRIPT> </SCRIPT> Tanda <! dan //> disertakan dengan tujuan agar sekiranya browser tidak mendukung JavaScript maka bagian tersebut akan diperlakukan sebagai komentar/remarks. Kode di atas disebut sebagai pernyataan

 Pernyataan adalah sebuah perintah pada JavaScript yang berdiri sendiri dan menghasilkan suatu tindakan. Pada pernyataan di atas, JavaScript akan berfungsi menampilkan string pada bagian ..

document.write("selamat mencoba javascript<br>"); document.write("semoga sukses!");

Jika terdapat lebih satu pernyataan, maka antara pernyataan yang satu dengan pernyataan yang lain harus dipisahkan dengan tanda titik-koma (;) JavaScript di atas terdiri dari 2 (dua) pernyataan untuk menampilkan string selamat mencoba javascript dan teks semoga sukses pada baris selanjutnya.

NOTE: hasil kerja dapat dites dengan menyimpannya dengan format (*.html), kemudian hasilnya dapat kita lihat dengan membuka file tersebut menggunakan web browser.

1.3

Implementasi dan Contoh-Contoh JavaScript

Implementasi JavaScript secara umum adalah untuk membuat laman web semakin interaktif. Karena jika pengkodean berbagai fungsi hanya dilakukan menggunakan bahasa HTML, akan sangat sulit dan tidak efisien bahkan tidak bisa dan akhirnya hanya tampilan web yang statis yang ada. Maka digunakanlah javascript sebagai tambahan untuk menangani hal tersebut. Di bawah ini adalah beberapa sampel penggunaan JavaScript yang disispkan pada tag HTML :

1. Menuliskan teks <html> <body> <script type="text/javascript"> document.write("Hello World!") </script> </body> </html>

2. Memformat teks dengan tag HTML <html> <body> <script type="text/javascript"> document.write("<h1>Hello World!</h1>") </script> </body> </html>

3. JavaScript yang diletakkan pada bagian HEAD <html> <head> <script type="text/javascript"> function message() { alert("This alert box was called with the onload event") } </script> </head> <body onload="message()"> </body> </html>

4. JavaScript yang diletakkan pada bagian BODY <html> <head> </head> <body> <script type="text/javascript">

document.write("This message is written when the page loads") </script> </body> </html>

5. JavaScript eksternal/ terpisah <html> <head> </head> <body> <script src="xxx.js"> </script> <p> The actual script is in an external script file called "xxx.js". </p> </body> </html>

6. Deklarasi variabel, memberi nilai, dan menampilkannya <html> <body> <script type="text/javascript"> var name = "Hege" document.write(name) document.write("<h1>"+name+"</h1>") </script> <p>This example declares a variable, assigns a value to it, and then displays the variable.</p> <p>Then the variable is displayed one more time, only this time as a heading.</p> </body></html>

7. Fungsi <html> <head> <script type="text/javascript"> function myfunction() { alert("HELLO") } </script> </head> <body> <form> <input type="button" onclick="myfunction()" value="Call function"> </form> <p>By pressing the button, a function will be called. The function will alert a message.</p> </body> </html>

*)Button Call function belum ditekan

*)Setelah ditekan, fungsi aktif

8. Fungsi dengan argumen <html> <head> <script type="text/javascript"> function myfunction(txt) { alert(txt) } </script> </head> <body> <form> <input type="button" onclick="myfunction('Hello')" value="Call function"> </form> <p>By pressing the button, a function with an argument will be called. The function will alert this argument.</p> </body> </html>

*)Sebelum buttonCall function ditekan

*)Setelah button ditekan, fungsi aktif

9. Fungsi dengan argumen (lagi) <html> <head> <script type="text/javascript"> function myfunction(txt) { alert(txt) } </script> </head> <body> <form> <input type="button" onclick="myfunction('Good Morning!')" value="In the Morning"> <input type="button" onclick="myfunction('Good Evening!')" value="In the Evening"> </form> <p> When you click on one of the buttons, a function will be called. The function will alert the argument that is passed to it. </p> </body> </html>

*)Sebelum ada button yang ditekan

*)Setelah In The Morning ditekan

*)Setelah In The Evening ditekan

Masih banyak contoh-contoh penggunaan JavaScript yang lain. Saat ini sudah banyak postingan mengenai JavaScript di internet. Sehingga jika menemukan kesulitan dalam latihan JavaScript dapat dengan mudah kita menemukan berbagai pembahasan dan tutorialnya di internet.

1.4

Kelebihan dan Kekurangan JavaScript

a. Kelebihan Javascript
1. Ukuran file kecil Script dari javascript memiliki ukuran yang kecil sehingga ketika web yang memiliki javascript ditampilkan di browser maka akses tampilannya akan lebih cepat dibandingkan ketika browser membuka suatu web yang tidak memiliki script java. Hal ini juga sangat berkepentingan dengan daya kerja server. Semakin kecil space suatu web yang disimpan dalam suatu server maka daya kerja server ketika di browsing oleh user di internet akan tidak terlalu berat, selain itu sifat javascript client side yang tidak perlu lagi di olah oleh server ketika browser memanggil web dari sebuah server. 2. Mudah untuk dipelajari Javascript merupakan bahasa semi pemograman yang merupakan gabungan antara bahasa pemograman java dengan bahasa kode HTML sehingga disebut bahasa hybrid. Walaupun javascript merupakan turunan dari java namun javascript tidak memiliki aturan yang serumit java. 3. Terbuka Javascript tidak terikat oleh hardware maupun software tertentu bahkan system operasi seperti windows maupun unix. Karena ia bersifat terbuka, maka ia dapat dibuat maupun dibaca di semua jenis komputer.

b. Kekurangan Javascript
1. Script tidak terenkripsi Karena javascript bersifat client side, maka script yang kita buat di text editor dan telah dijadikan web di server, ketika user merequest web dari server tersebut maka sintak javascript akan langsung ditampilkan di browser. User bisa melihat dan menirunya dari sourcenya.

2. Kemampuan terbatas Walaupun javascript mampu membuat bentuk web menjadi interaktif dan dinamis, namun javascript tidak mampu membuat program aplikasi sendiri seperti java.

3. Keterbatasan Objek Javascript tidak mampu membuat kelaskelas yang bisa menampung objekobjek tambahan seperti java karena javascript teleh memiliki objek yang builtin pada sturktur bahasanya.

10

BAB II

CSS (CASCADING STYLE SHEET)

2.1 Pengenalan CSS

CSS yang memiliki kepanjangan Cascade Style Sheet ini digunakan para web designer untuk mengatur style halaman web mereka, mulai dari memformat text, sampai memformat layout. Tujuan dari penggunaan CSS ini adalah supaya diperoleh kekonsistenan style pada elemen tertentu. Perkembangan CSS sendiri diawali pada tahun 1996, di mana W3C (World Wide Web Consortium), sebuah konsorsium untuk standarisasi web, menyusun draft proposal untuk membuat CSS ini dan akhirnya dapat berjalan. Selanjutnya pada pertengahan tahun 1998, W3C mengembangkan CSS2 yang diperbarui untuk kepentingan media lain (tidak hanya untuk PC web browser). Akhirnya mulai pada tahun 2000, telah dikembangkan CSS3 oleh W3C yang sampai saat ini masih terus diperbarui lagi.

2.2

Metode Implementasi/ Penulisan dan Sintaks CSS

2.2.1 Metode Penulisan CSS

didalam css, kita mengenal 4 metode penulisan, diantaranya inline style, internal style, external style, import style, berikut keteranganya NOTE!: Tulisan yang diapit slash bintang dan bintang slash, seperti ini>> /* adalah sebuah komentar dan bukanlah bagian dari pengkodean */ ,

a. Inline Style inline style : inti dari penulisan inline style ini ialah css-nya langsung ditulis bersamaan dengan tag html, contoh <span style='color:pink;'>warna pink.</span> Dan property dan value cssnya ditulis didalam value atribut html.

11

b. Internal Style internal style : metode internal style maksudnya ialah style css-nya digabung atau ditulis bersamaan dengan tag-tag html, namun penempatan style css-nya harus didalam tag <style type="text/css"> /*disini*/ </style> dan harus diletakan di element head <head> <style type="text/css"> /*disini*/ </style> </head> c. Eksternal Style External style ini ialah metode penulisan css, dimana source style-nya terpisah dengan document html, dan untuk memangilnya kita menggunakan ini <link rel="stylesheet"

type="text/css" href="lokasi_file_css.css"> dimana value dari href adalah lokasi_file_css-nya d. Import Style Hampir sama dengan external style, document html dan source css-nya terpisah. bedanya kita memanggil source css-nya dengan sintaks seperti ini /* misal */ @import url(lokasi_file_css-nya); /* end */ dan penempatanya bisa di internal style maupun external style. keunikan dari import style ini ialah, kita bisa mengimport beberapa file css sekaligus dan didalam import tadi masih bisa diimpor lagi maksudnya, misal kita membuat file css dengan nama misal-satu.css dan misaldua.css nah untuk memangginnya kita menggunkan sintaks seperti ini : /* mengimport css */ @import sama*/ @import sama*/ /* end */ url(misal-dua.css);/* jika disimpan di folder yang url(misal-satu.css);/*jika disimpan di-folder yang

12

Seperti yang terurai diatas, didalam file yang di import tadi kita bisa mengimport lagi, contohnya : isi dari file misal-satu.css seperti ini /* misal */ @import url(nama_folder/import_lagi.css); /* end */ dengan demikian, selain mengimport misal-satu.css, kita juga mengimport import_lagi.css terletak didalam nama_folder

2.2.2 Sintaksis CSS

Pengelompokan dalam sintaks CSS kurang lebih seperti ini: a. Selector = Terdiri dari tag,class,ID

b. Declaration = Mendeskripsikan property dan value

*)dalam coding: tag_html/* atau */ selector_id/* atau */ selector_class/* atau */ { property: value; property_lain: value; property_lain_lagi : value; } /* atau */ p{ font-family:arial; } .warna_merah{ color:red; } #id_unik{/* selector id diawali dengan # *pager * */ text-align:left; font-size:40px; } /* kurang lebih seperti itulah sintaksnya*/

13

KETERANGAN

diawali dengan selector, atau tag lalu { (buka kurung karawal) diikuti dengan property setelah peroperty, tambahkan : (titik dua) kemudian masukan value dari peroperty itu, dan setiap value diakhiri dengan ; (titik koma/ semicolon) untuk mengakhiri ditutup dengan } (tutup kurung karawal) /* selesai */

2.2.3 Selector ID dan Class

a. Selector Class Selector class : seperti yang terurai diatas, penulisan css selector class adalah seperti ini .nama_class{/* diawali dengan dot lalu nama class */ color:red;} Agar style ini bisa berjalan kita harus menambahkan atribut class pada tag html dan valuenya diisi dengan nama_class contoh <span class='nama_class'>aaaaaaa</span> <div class='nama_class'>bbbbbbb</div> dengan demikian tag html yang diberi atribut class dengan value nama_class akan memiliki style sesuai dengan property yang kita tulis *contoh diatas akan mambuat text aaaaaa dan bbbbbbb berwarna merah atau red* contoh Tambahkan style ini .sideleft{ background:black; color:white; font-weight:bold;} tepat dibawah <style type="text/css"> nantinya sidebar kanan akan memiliki style warna-latar hitam, warna text putih dan hurufnya tebal
14

b. Selector ID Hampir sama dengan selector class, hanya saja id ini harus unik, jadi untuk pemakainya hanya boleh sekali misal css-nya seperti ini #nama_id{ /* misal */background:black; } dan pada penulisan HTML, ID-nya pun harus ditulis sekali <div id="nama_id"> misal </div> dan jika ditulis lebih dari sekali, maka itu salah! c. Property dan Value Anggap saja property dalam css itu adalah style perintah, misal color, font, background dll. property css ini sudah memiliki value khusus dengan kata lain property dan value dalam css tidak boleh dicampur aduk. contoh : color, karena property-nya adalah color maka valuenya harus warna pula, misal red, blue, silver, black, yellow dll. bisa juga dengan hex color, rgb, rgba, hsv. Jadi, jika kita menulis property color lalu valuenya adalah misal(arial, margin, left, 13px) itu salah besar. sama halnya jika kita menulis property font lalu valuenya misal red.

15

2.3

Contoh-Contoh Penggunaan CSS

PENULISAN PADA TAG DENGAN ATRIBUT STYLE

PENULISAN PADA HEAD

16

PENULISAN DENGAN CLASS

17

PENULISAN DENGAN ID

2.4

Kelebihan dan Kekurangan dari CSS

a. Kelebihan
1. Memisahkan desain dengan konten halaman web. 2. Mengatur desain seefisien mungkin. 3. Jika kita ingin mengubah suatu tema halaman web, cukup modifikasi pada css saja. 4. Menghadirkan sesuatu yang tidak dapat dilakukan oleh HTML. 5. Lebih mudah didownload karena lebih ringan ukuran filenya. 6. Satu CSS dapat digunakan banyak halaman web. 7. dan masih banyak lagi.

b. Kekurangan
1. Tampilan pada browser berbeda-beda. 2. Kadang juga terdapat browser yang tidak support CSS (browser lama). 3. Harus tahu cara menggunakannya. 4. dibutuhkan waktu lebih lama dalam membuatnya. 5. Belum lagi ada bug/error dalam CSS.

18

BAB III

AJAX
3.1 Pengenalan AJAX

3.1.1

Adalah

AJAX adalah singkatan dari Asynchronous JavaScript and XML. AJAX, terdiri dari HTML, Javascript, DHTML dan DOM yang kemudian digabkungkan dengan bahasa pemograman web di sisi server seperti PHP dan ASP, sehingga membentuk suatu aplikasi berbasis web yang interaktif. AJAX bukanlah bahasa pemograman baru, tetapi adalah teknik baru untuk membuat aplikasi web lebih baik, lebih cepat dan lebih interaktif. Dengan AJAX, Javascript dapat langsung berkomunikasi dengan server dengan menggunakan objek XMLHttpRequest. Dengan objek ini, javascript dapat melakukan transaksi data denga server web, tanpa harus me-reloading halaman web tersebut secara keseluruhan.

Berikut adalah teknologi yang termasuk dalam aplikasi AJAX : HTML yang digunakan untuk membuat Web forms dan mengindentifikasikan filed-field yang akan anda gunakan dalam aplikasi. JavaScript adalah kode inti untuk menjalankanaplikasi Ajax dan untuk membantu memfasilitasi komunikasi dengan aplikasi . DHTML, atau Dynamic HTML, membantu anda untuk membuat form atau web anda dinamis. Anda akan menggunakan <div>, <span> dan elemen HTML dinamis lainya. DOM, Document Object Model, akan digunakan (melalui kode JavaScript) untuk bekerja dengan kedua struktur dari HTML dan XML anda yang dalam beberapa kasus berasal dari server.

3.1.2

Sejarah Singkat

Tehnik komunikasi Asynchronous dengan server sendiri pertama kali dikembangkan oleh microsoft pada tahun 1997, kemudian pertama kali XMLHttpRequest Object diperkenalkan pada IE5 (circa 1998) dan kemudian dipergunakan secara luas pada Outlook web access. Jesse James Garrett's kemudian memberikan istilah AJAX untuk tehnik Asynchronous ini pada salah satu tulisannya di tahun 2005. Dan hingga saat ini telah banyak yang mengimplementasikan tehnik ini dalam pengembangan web.

19

3.2

Sintaks dalam AJAX 3.2.1

XML Data format

XML merupakan Tag base sintaks. Masingmasing tag dalam XML diawali dengan tag pembuka dan diakhiri dengan tag penutup.contoh <data> ... </data> Attribut harus dituliskan pada bagian tag pembuka dan diapit oleh tanda .. atau '.. ' contoh: <tagName attr=value> Comment dalam XML dbuat didalam tanda <! komentar disini >, bagian comment ini tidak akan diproses sebagai data dalam XML

3.2.2

Membuat objek XMLHttpRequest.

Objek pertama yang harus anda mengerti adalah XMLHttpRequest, mungkin bagi anda terdengar sesuatu yang baru. Ini adalah objek javascript dan membuatnya sederhana seperti ditunjukkan di bawah ini : <script language="javascript" type="text/javascript"> var xmlHttp = new XMLHttpRequest(); </script>

3.2.3

Membuat objek XMLHttpRequest untuk beberapa browser.

Objek XMLHttpRequest disupport hampir semua browser (Internet Explorer, Firefox, Chrome, Opera, dan Safari). Untuk membuat objek XMLHttpRequest supaya bisa didukung oleh beberapa browser adalah sebagai berikut : /*yang berwarna hijau adalah komentar*/ 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");

20

3.3

Implementasi AJAX

Untuk dapat mengembangkan aplikasi web dengan tehnik AJAX ini kita perlu mengkombinasikan beberapa hal berikut: Javascript untuk membuat object XMLHttpRequest yang kita gunakan untuk berkomunikasi dengan server secara behind the scene. DOM (Document Object Model), hasil proses yang diterima akan kita tampilkan dengan memanipulasi object DOM yang telah kita persiapkan sebelumnya untuk menampilkan data hasil proses yang diberikan server. XML (eXtensible Markup Language) format data yang dikembalikan oleh server, data XML ini siap dibaca dan ditampilkan untuk mengupdate content pada halaman web. Di bawah ini adalah sekilas cara penggunaan/ implementasi AJAX :

1. Buat object XMLHttpRequest 2. Membuka komunikasi dengan server dengan menafaatkan method OPEN dari XMLHttpRequest yang telah dibuat 3. Menyiapkan function untuk menerima respon dari server dengan menafaatkan event ONREADYSTATECHANGE 4. Mengisi parameterparameter pada object XMLHttpRequest yang telah dibuat, kemudian mengirimkan SEND request kepada server

3.4
1.

Contoh Penggunaan AJAX

Membuat halaman web antarmuka (index.html)

Yang dilakukan pertama kali adalah membuat file HTML yang nantinya akan digunakan sebagai halaman web AJAX. Dalam contoh ini, yang digunakan adalah file index.html. Halaman inilah yang akan dijadikan interface untuk membuat object XHR dan memanggil data ke server

1 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 2 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml13 transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head> 6 <title>Bab 1 - Pengenalan Ajax</title> 7 <script type="text/javascript" src="HelloAjax.js"></script> 8 </head> 9 <body onload='process()'> 10 Nama Anda:

21

11 <input type="text" id="myName" /> 12 <div id="divMessage" /> </body> </html> Dalam halaman ini, file JavaScript yang digunakan sebagai AJAX adalah script HelloAjax.js. Dalam body halaman ini, didefinisikan event onload=process(), sehingga ketika halaman ini diload maka akan selalu memanggil fungsi process() yang terletak di file HelloAjax.js tersebut.

2.

Membuat client-side script JavaScript untuk AJAX dengan objek XMLHttp (HelloAjax.js)

Langkah pertama untuk menggunakan objek XMLHttp, adalah membuatnya terlebih dahulu. Karena Microsoft mengimplementasikan dengan kontrol ActiveX, maka harus digunakan kelas ActiveXObject di JavaScript, dengan melewatkan signature kontrol XMLHttp: var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") Ada juga beberapa versi baru yang dikeluarkan sesuai dari library MSXML yang dikeluarkan dengan kestabilan dan kecepatan yang makin baik. Beberapa signature lain tersebut adalah: MSXML2.XMLHttp MSXML2.XMLHttp.3.0 MSXML2.XMLHttp.4.0 MSXML2.XMLHttp.5.0 Untuk provider lain digunakan objek yang dideklarasikan sebagai berikut: var xmlHttp = new XMLHttpRequest() Contoh lengkapnya untuk membuat objek XMLHttp adalah sebagai berikut: 1 ////////////////////////////////////////////////////////////// 2 // $Hello Ajax.Js 3 // 4 // File untuk memanggil helloAjax.php 5 ///////////////////////////////////////////////////////////// 6 7 var xmlHttp = createXmlHttpRequestObject(); 8 // Create XMLHttpRequest

22

9 function createXmlHttpRequestObject() 10 { 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 //Memanggil file HelloAjax.php Secara Asingkron 34 function process(){ 35 36 38 39 true); 40 41 42 43 44 } 45 //di eksekusi otomati jika pesan diterima 46 function handleServerResponse() { 47 48 ///jika rewuest complete if (xmlHttp.readyState == 4){ xmlHttp.onreadystatechange = handleServerResponse; xmlHttp.send(null); } else setTimeout('process()', 1000); if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0){ name = xmlHttp.open("GET", "HelloAjax.php?name=" + name, } else return xmlHttp; } if (!xmlHttp) alert("Error creating the XMLHttpRequest object."); } } // jika mozilla atau yang lain else { try{ xmlHttp = new XMLHttpRequest(); }catch (e){ xmlHttp = false; } } var xmlHttp; if(window.ActiveXObject){ try{ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); catch (e) { xmlHttp = false;

37 encodeURIComponent(document.getElementById("myName").value);

23

49 50 51 52 53 54 55 56 '</i>'; 57 58 59 } } }

if (xmlHttp.status == 200) { // extract XML yang diterima xmlResponse = xmlHttp.responseXML; xmlDocumentElement = xmlResponse.documentElement; helloMessage = xmlDocumentElement.firstChild.data; document.getElementById("divMessage").innerHTML = '<i>' + helloMessage + setTimeout('process()', 1000); } else { alert("ERROR: " + xmlHttp.statusText);

Setelah objek XMLHttp dibuat, maka dipanggil method open() untuk inisialisasi objek dengan 3 parameter:

Tipe Request : string yang mengindikasikan tipe dari request, umumnya GET atau POST. URL : string yang berisi URL yang akan dikirimkan. Async : nilai boolean yang mengindikasikan apakah request dibuat secara asynchronous atau tidak.

Contoh untuk membuat request asynchronous GET untuk HelloAjax.php?name= adalah sebagai berikut: 36 xmlHttp.open("GET", "HelloAjax.php?name=" + name, true); Kemudian definisikan event handler onreadystatechange. Objek XMLHttp mempunyai properti readyState yang berubah ketika request dikirim dan response diterima.Setiap kali properti ini berubah, maka event onreadystatechange akan dipanggil. Karena perbedaan implementasi browser, maka nilai readyState yang cross-browser adalah 0, 1, dan 4. 3. Membuat server-side script dengan PHP (HelloAjax.php) Script PHP inilah yang diminta oleh request XMLHttp sebagai response dalam bentuk format XML yang nanti di-parsing oleh client JavaScript. 1 < ?php 2 // Output Dalam bentuk XML 3 header('Content-Type: text/xml');

24

4 // generate XML header 5 echo '<?xml version="1.0" encoding="UTF-8" 6 standalone="yes"?>'; 7 echo '<response>'; 8 $name = $_GET['name']; 9 $userNames = array('ANDI', 'SURYA', 'NANA', 'LALA', 10 'HAKI','PUTRA'); 11 if (in_array(strtoupper($name), $userNames)) 12 14 15 else 16 ?> Dalam contoh AJAX sederhana ini, ketika user diminta untuk mengetikkan nama user, server selalu mengirim response. Ketika user sedang mengetikkan, server dipanggil secara asynchronous, pada selang waktu tertentu (dalam contoh 1000 ms), sehingga menjelaskan kenapa tidak diperlukannya tombol untuk memberitahukan bahwa kita telah selesai mengetik dan mengirimkannya ke server. Untuk beberapa nama tertentu yang diketikkan, pesan yang ditampilkan pada halaman akan berbeda. Pesan yang berbeda tersebut terletak di element <div> dengan id=divMessage, jadi ketika response datang kemudian diparsing, maka pesan yang didapat dari response akan ditampilkan di element ini. Sehingga untuk menampilkan suatu bagian dari halaman web yang bersifat dinamis diperlukan element, dalam contoh ini <div>, yang digunakan oleh JavaScript untuk dapat dimanipulasi echo htmlentities($name) . ', gak kenal tuh!'; echo '</response>'; echo 'Halo.. ' . htmlentities($name) . '!'; echo 'hmm... sapa ya!'; 13 else if (trim($name) == '')

25

3.5

Kelebihan dan Kekurangan AJAX

a. Kelebihan
High Interactivity, Aplikasi AJAX lebih interaktif dibanding dengan aplikasi web konvensional. High Usability, Update data tidak me-reload keseluruhan halaman, melainkan hanya yang relevan. High Speed, Aplikasi AJAX lebih cepat dibanding dengan aplikasi web konvensional.

Proses dalam model web Synchronous

Proses dalam model Asynchronous (menggunakan AJAX)

26

Dengan Ajax, javascript akan berkomunikasi secara langsung dengan server melalui objek javascript yaitu XMLHttpRequest tersebut. Dengan objek XMLHttpRequest, suatu halaman web dapat membuat request ke, dan mendapatkan respon dari server web tanpa me-reload halaman secara keseluruhan. User akan selalu tetap dengan halaman yang sama. Bahkan user tidak akan tahu kalau ada data yang dikirim dan diterima dari server, karena javascript melakukan transaksi data di balik layar. Bagusnya lagi permintaan dikirim asynchronous, yang berarti bahwa kode JavaScript (dan pengguna) tidak menunggu pada server untuk merespon. Sehingga pengguna dapat terus memasukkan data, bergulir sekitar, dan menggunakan aplikasi.

b. Kekurangan
1. Integrasi browser: Karena konten halaman menganut prinsip asinkron, di mana data bisa di-update tanpa halaman di-refresh, maka perubahan tampilan tidak tercatat di bagian history dari browser. Jadi ketika Anda mengklik tombol Back, yang muncul bukan tampilan seperti sebelum mengeksekusi kode AJAX, namun malah halaman sebelumnya. 2. Kekurangan lainnya adalah kesulitan bagi seorang user untuk melakukan bookmark/ favorite pada bagian tertentu dari halaman web. 3. Waktu respon yang kemungkinan bisa membingungkan user yang tidak berpengalaman menggunakan aplikasi AJAX. Jika setting waktu respon tidak tepat, user bisa mengira halaman yang diaksesnya sedang hang. 4. Search engine optimization: Karena konten di-generate menggunakan JavaScript, search engine tidak bisa mengindeksnya sehingga mengurangi efektivitas halaman ditinjau dari SEO. 5. Terlalu mengandalkan JavaScript: AJAX menggunakan JavaScript, yang kadang diimplementasikan secara berbeda di berbagai browser atau verse tertentu dari sebuah browser. Karena. itu sering kale sebuah website yang mengandung JavaScript harus dites menggunakan berbagai jenis browser untuk memastikan tampilannya tidak ada yang salah, begitu juga dengan AJAX. Namun mengingat browser sekarang seperti Mozilla dan IE 7 menggunakan lapisan abstraksi semisal JavaScript Framework, maka kekurangan ini sepertinya bisa ditanggulangi di masa depan. 6. Alat bantu pemrograman berupa IDE (integrated development environment) untuk JavaScript sangatlah jarang dan langka. Anda bisa menggunakan beberapa tool, seperti Firebug, IE Developer toolbar, dan Venkman. 7. Termasuk kelemahan JavaScript adalah apabila user men-disable JavaScript di browsernya, maka AJAX tidak akan bisa digunakan. 8. Web analytics: Berbagai solusi web analytic biasanya memiliki anggapan bahwa sebuah halaman barn di-loading tiap kali konten di-update ke user. Mengingat AJAX mengubah paradigma seperti ini, maka programmer harus mengatur peletakan kode web analytic sehingga proses tracking akan lebih baik.

27

BAB IV

JQUERY
4.1 Pengenalan jQuery

jQuery adalah javascript library, jQuery mempunyai semboyan write less, do more. jQuery dirancang untuk memperin gkas kode-kode javascript. JQuery adalah javascript library yang cepat dan ringan untuk menangani dokumen HTML, menangani event, membuat animasi dan interaksi ajax. JQuery dirancang untuk mengubah cara anda menulis javascript. Sebelum anda memulai mempelajari jQuery, anda harus mempunyai pengetahuan dasar mengenai HTML, CSS dan Javascript. Library jQuery mempunyai kemampuan : Kemudahan mengakses elemen-elemen HTML Memanipulasi elemen HTML Memanipulasi CSS Penanganan event HTML Efek-efek javascript dan animasi Modifikasi HTML DOM AJAX Menyederhanakan kode javascript lainnya Kemudian untuk memulai mempelajari jQuery, anda harus mendownload jquery.js dari situs http://www.jquery.com. Setiap anda menulis kode javascript dengan menggunakan jquery, jangan lupa untuk memasukan file jquery.js kedalam kode javascript anda.

<script type="text/javascript" src="jquery.js"></script>

28

4.2

Sintaks jQuery

Sintaks jquery biasanya dibuat untuk memilih elemen-elemen HTML dan melakukan aksi terhadap elemen yang dipilih. Berikut adalah sintaks jQuery : $(selector).action() Tanda dollar, untuk mendefinisikan jQuery (selector), untuk menunjukkan elemen yang dipilih atau dituju action(), adalah jQuery action yang akan dilakukan terhadap elemen yang dipilih. Contoh : $(this).hide() menyembunyikan elemen saat ini $("p").hide() menyembunyikan semua paragraf atau konten dari tag <p> $(".test").hide() menyembunyikan elemen yang mempunya class=test $("#test").show() menampilkan elemen yang mempunyai id=test Karena hampir segala sesuatu yang kita lakukan bila menggunakan jQuery membaca ataumemanipulasi document object model (DOM), kita perlu memastikan bahwa kita mulai menambahkan event segera setelah DOM siap. Untuk melakukan hal ini, kita menambahkan kode ready event untuk dokumen. $(document).ready(function(){ //kode anda di sini }); Kode di atas berarti kita ingin kode dijalankan apabila halaman HTML telah di-load semuanya. Atau dengan kode javascript biasanya seperti ini : window.onload = function(){ //kode anda di sini }

29

Sekarang mari kita lihat pada contoh $(".tombol1").click(function(){ $("p").hide(1000);}); Kode $(.tombol1) adalah jQuery selektor. Di mana kita memilih elemen yang mempunyai class=tombol1 untuk kita lakukan sesuatu. $ sendiri adalah alias untuk jQuery class. Oleh karena $() untuk membuat objek jQuery. Kemudian kita tambahkan fungsi click(). Ini berguna untuk memberikan event onclick untuk elemen yang kita pilih tadi (dalam hal ini adalah elemen yang mempunya class=tombol1). Dan kemudian melaksanakan fungsi yang diberikan apabila event onclick terjadi. Jadi artinya apabila elemen dengan class=tombol1 diklik maka lakukan fungsi $(p).hide(1000); Fungsi hide() dan show() adalah fungsi built in dari jQuery.

4.3

Implementasi jQuery

Kemudahan atau kenapa orang banyak menggunakan framework javascript ini adalah karena banyaknya plugin aplikasi yang siap jadi atau siap digunakan. Plugin adalah semacam fungsi atau fitur tambahan yang digabungkan ke dalam sebuah JQuery mempercepat atau memudahkan dalam pembangunan sebuah website. Dibawah ini adalah beberapa plugin jquery yang sering digunakan oleh beberapa web developer dalam membuat atau membangun sebuah website, diantaranya:

Drop-Down-Menu Jika dalam sebuah website terdiri dari beberapa menu, dan dari menu tersebut ada sub menu lagi, maka cocok menggunakan drop down menu. Drop down menu ini juga mendukung multi level menu (menjadi sub-sub menu yang lebih banyak), selain itu menu dropdown ini juga dilengkapi dengan fasilitas timeout effect. Timeout effect ini digunakan ketika lama waktu mouse over atau mouse out. Screenshot dapat dilihat di Web Site : http://javascript-array.com

Tool-Tips Tool tips adalah bubble/gelembung atau semacam kotak informasi digunakan untuk menginformasikan sesuatu ketika mouse didekatkan pada sebuah teks, gambar, tombol atau elemen lain dalam sebuah web yang muncul diatas elemen tersebut. Biasanya informasi yang disuguhkan adalah informasi yang pendek. Cara kerjanya adalah ketika mouse didekatkan, maka akan muncul bubble. Fasilitas lebih dari bubble ini adalah desainnya yang cantik, seperti fasilitas tombol close, background shadow, dll. Screenshot dapat dilihat di Web Site : http://www.mopstudio.jp
30

Autocomplete-Search Plugin ini digunakan untuk melakukan pencarian secara real time, dimana ketika kita memasukan kata atau huruf dalam sebuah teks input dalam sebuha web, secara otomatis hasil pencarian akan muncul seusai dengan yang kita masukan secara real time. Plugin ini mirip seperti pencarian pada website facebook, sehingga sangat menarik untuk dicoba. Screenshot dapat dilihat di Web Site : http://loopj.com

Validasi-Form Plugin ini digunakan untuk melakukan validasi data dalams sebuah form, seperti pengecekan email, pengecekan password, username dan input lainnya secara real time (tidak menekan tombol submit). Jadi ketika user memasukan teks atau huruf, maka plugin ini akan melakukan validasi terhadap inputan user. Screenshot dapat dilihat di Web Site : http://www.willjessup.com

jQuery-Cycle-Plugin Plugin ini digunakan untuk animasi image dalam sebuah website, plugin ini menggantikan fungsi flash sebagai animasi. Jadi dengan plugin ini, kita bisa menganimasikan image yang ada menjadi sebuah animasi seperti fade in, fade out, slide show, scroll dan banyak lagi efek yang lainnya. Screenshot dapat dilihat di Web Site : http://malsup.com

Teks-Berjalan Plugin ini digunakan untuk memannipulasi teks, sehingga teks yang kita tampilkan kelihatan menarik, seperti berjalan dari kiri ke kanan atau sebaliknya atau dari atas ke bawah, mirip fungsi marquee dalam tag HTML, tetapi dengan plugin ini, teks berjalan lebih lembut dan lebih banyak variasi. Screenshot dapat dilihat di Web Site : http://remysharp.com

4.4

Contoh Sederhana jQuery

Hello word jQuery: <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".tombol1").click(function(){ $("p").hide(1000); });
31

$(".tombol2").click(function(){ $("p").show(1000); }); }); </script> </head> <body> <p>Hello World!</p> <button class="tombol1">Sembunyikan</button> <button class="tombol2">Tampilkan</button> </body> </html>

4.5

Kelebihan dan Kekurangan jQuery

a. Kelebihan
Menyederhanakan penggunaan javascript, karena kita cukup menggunakan fungsi dari library javascript yang telah ada. Termasuk mempercepat coding javascript dalam sebuah website. Dibandingkan kita harus mulai sebuah script javascript dari nol.

Fungsi-fungsi yang disediakan didokumentasikan dengan baik beserta contoh penggunaannya, baca di situs http://jquery.com hal ini mempermudah dalam

pembelajaran jquery.

Support terhadap CSS1-3 selector, untuk fleksibilitas desain antar muka halaman website dan interaksinya.

Website yang dibangun dengan jquery akan lebih interaktif dan menarik.

b. Kekurangan

Meskipun diklaim jquery memiliki beban kerja yang ringan (load CPU dan RAM) untuk browser, tetap saja lebih ringan (cepat di-load) website yang tidak menggunakan jquery, alias HTML murni.

Dari sisi server hosting pun, CPU dan RAM harus mengalokasikan resource yang mereka miliki untuk menangani request terhadap jquery. Pada level tertentu request yang sangat banyak (sangat-sangat banyak) akan membebani server. Solusi: host jquery pada situs lain, seperti Google yang menyediakan request jquery dari servernya.

32

DAFTAR PUSTAKA
http://id.wikipedia.org Pengantar JavaScript, http://www.ilmukomputer.com Javascript Guide, http://www.codingwear.com Modul Pemrograman Web PPPG Kesenian Yogyakarta,

http://www.pppgkes.com CSS Tutorial, http://www.rosihanari.net Belajar Dasar-Dasar HTML/CSS, http://www.margasatrya.com/category/css/ Tutorial Cascading Style Sheet (CSS), http://www.ilmukomputer.com Jerry Peter, Berkenalan dengan AJAX, http://www.ilmukomputer.com Desrizal, 2010, Panduan Lengkap PHP AJAX & JQuery,

www.blog.codingwear.com Desrizal, Pengenalan jQuery, http://www.desrizal.com

33