javascript,css,ajax,jquery
DESCRIPTION
Makalah mengenai JavaScript,CSS,AJAX,jQueryTRANSCRIPT
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
ii
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
iii
DAFTAR ISI
PENDAHULUAN...................................................................................................ii
DAFTAR ISI............................................................................................................iii
BAB I : JAVASCRIPT...................................................................................1
1.1 Pengenalan JavaScript..........................................................................1
1.2 Syntax/ Penulisan JavaScript...............................................................2
1.3 Implementasi dan Contoh-Contoh JavaScript......................................3
1.4 Kelebihan dan Kekurangan JavaScript................................................9
BAB II : CSS....................................................................................................11
2.1 Pengenalan CSS...................................................................................11
2.2 Metode Implementasi/ Penulisan dan Sintaks CSS..............................11
2.3 Contoh-Contoh Penggunaan CSS........................................................16
2.4 Kelebihan dan Kekurangan dari CSS...................................................18
BAB III : AJAX.................................................................................................19
3.1 Pengenalan AJAX................................................................................19
3.2 Sintaks dalam AJAX............................................................................20
3.3 Implementasi AJAX.............................................................................21
3.4 Contoh Penggunaan AJAX..................................................................21
3.5 Kelebihan dan Kekurangan AJAX.......................................................26
BAB IV : JQUERY...........................................................................................28
4.1 Pengenalan jQuery...............................................................................28
4.2 Sintaks jQuery......................................................................................29
4.3 Implementasi jQuery............................................................................30
4.4 Contoh Sederhana jQuery....................................................................31
4.5 Kelebihan dan Kekurangan jQuery......................................................32
DAFTAR PUSTAKA............................................................................................33
1
BAB I
JAVASCRIPT
1.1 Pengenalan JavaScript
Ekstensi berkas .js
Jenis MIME application/javascript,
text/javascript[1]
Uniform Type Identifier com.netscape.javascript
Dikembangkan oleh Netscape Communications
Corporation, Mozilla Foundation
Rilis terbaru 1.9.3 / 2010
Jenis format Bahasa skrip
Situs web 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.
2
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
3
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>
4
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")
5
</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>
6
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
7
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 button”Call function” ditekan
*)Setelah button ditekan, fungsi aktif
8
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
9
*)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.
10
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.
11
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.
12
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 misal-
dua.css nah untuk memangginnya kita menggunkan sintaks seperti ini :
/* mengimport css */
@import url(misal-satu.css);/*jika disimpan di-folder yang
sama*/
@import url(misal-dua.css);/* jika disimpan di folder yang
sama*/
/* end */
13
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*/
14
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 2
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
15
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.
16
2.3 Contoh-Contoh Penggunaan CSS
PENULISAN PADA TAG DENGAN ATRIBUT STYLE
PENULISAN PADA HEAD
17
PENULISAN DENGAN CLASS
18
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.
19
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.
20
3.2 Sintaks dalam AJAX
3.2.1 XML Data format
XML merupakan Tag base sintaks.
Masing‐masing 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");
21
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 parameter‐parameter pada object XMLHttpRequest yang telah dibuat, kemudian
mengirimkan SEND request kepada server
3.4 Contoh Penggunaan AJAX
1. 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
2
3
4
5
6
7
8
9
10
11
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bab 1 - Pengenalan Ajax</title>
<script type="text/javascript" src="HelloAjax.js"></script>
</head>
<body onload='process()'>
Nama Anda:
<input type="text" id="myName" />
22
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 di-
load 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
3
4
5
6
7
8
9
//////////////////////////////////////////////////////////////
// $Hello
Ajax.Js //
// File untuk memanggil helloAjax.php
/////////////////////////////////////////////////////////////
var xmlHttp = createXmlHttpRequestObject();
// Create XMLHttpRequest
function createXmlHttpRequestObject()
23
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
{
var xmlHttp;
if(window.ActiveXObject){
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
xmlHttp = false;
}
}
// jika mozilla atau yang lain
else {
try{
xmlHttp = new XMLHttpRequest();
}catch (e){
xmlHttp = false;
}
}
if (!xmlHttp)
alert("Error creating the XMLHttpRequest object.");
else
return xmlHttp;
}
//Memanggil file HelloAjax.php Secara Asingkron
function process(){
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0){
name =
encodeURIComponent(document.getElementById("myName").value);
xmlHttp.open("GET", "HelloAjax.php?name=" + name,
true);
xmlHttp.onreadystatechange = handleServerResponse;
xmlHttp.send(null);
} else
setTimeout('process()', 1000);
}
//di eksekusi otomati jika pesan diterima
function handleServerResponse() {
///jika rewuest complete
if (xmlHttp.readyState == 4){
if (xmlHttp.status == 200) {
24
50
51
52
53
54
55
56
57
58
59
// extract XML yang diterima
xmlResponse = xmlHttp.responseXML;
xmlDocumentElement = xmlResponse.documentElement;
helloMessage = xmlDocumentElement.firstChild.data;
document.getElementById("divMessage").innerHTML =
'<i>' + helloMessage +
'</i>';
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
2
3
4
5
< ?php
// Output Dalam bentuk XML
header('Content-Type: text/xml');
// generate XML header
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?
25
6
7
8
9
10
11
12
13
14
15
16
>';
echo '<response>';
$name = $_GET['name'];
$userNames = array('ANDI', 'SURYA', 'NANA', 'LALA',
'HAKI','PUTRA');
if (in_array(strtoupper($name), $userNames))
echo 'Halo.. ' . htmlentities($name) . '!';
else if (trim($name) == '')
echo 'hmm... sapa ya!';
else
echo htmlentities($name) . ', gak kenal tuh!';
echo '</response>';
?>
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
3.5 Kelebihan dan Kekurangan AJAX
26
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)
Dengan Ajax, javascript akan berkomunikasi secara langsung dengan server melalui
objek javascript yaitu XMLHttpRequest tersebut.
27
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 browser-
nya, 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.
BAB IV
28
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>
29
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 }
30
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
31
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 e-
mail, 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);
});
32
$(".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.
33
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