TUGAS PEMROGRAMAN WEB STATIS
MAKALAH
JAVASCRIPT, CSS, AJAX, JQUERY
DISUSUN OLEH:
MIRZA ILMAWAN HAKIM
NIM : 12121151
TEKNIK INFORMATIKA SEMESTER 1
STMIK EL-RAHMA YOGYAKARTA
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.
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
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.
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.
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>
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>
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>
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
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 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.
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.
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 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*/
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; }
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 ClassSelector 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;}
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.
2.3
Contoh-Contoh Penggunaan CSS
PENULISAN PADA TAG DENGAN ATRIBUT STYLE
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.
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
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
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 < !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>
11 12
<input type="text" id="myName" /> <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 ////////////////////////////////////////////////////////////// // $Hello Ajax.Js //
// File untuk memanggil helloAjax.php
/////////////////////////////////////////////////////////////
9 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 function createXmlHttpRequestObject() { 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() {
49 50 51 52 53 54 55 56 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 + '</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.
4 5 6 7 8 9 10 11 12 13 14 15 16 // generate XML header
echo '<?xml version="1.0" encoding="UTF-8"
standalone="yes"?>'; 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
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
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 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
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.
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 :
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
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(){
$(".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