Mempercantik Web Dengan AJAX dan Jquery Framework

Transkripsi

1 Mempercantik Web Dengan AJAX dan Jquery Framework By : Departemen Ristek Himpunan Mahasiswa Teknik Informatika

2 BAB 1 Mengenal AJAX dan JavaScript Apa itu Ajax Ajax (Asynchronous Javascript and XML) sesungguhnya bukanlah suatu bahasa pemrograman, melainkan hanya suatu teknik yang memungkinkan untuk membuat aplikasi web yang interaktif. Dengan menggunakan Ajax, aplikasi web dapat berinteraksi dengan server di latar belakang sehingga tidak mempengaruhi halaman web secara keseluruhan. Apa yang bisa Dilakukan Ajax Ajax memberikan pengaruh yang luar biasa dalam membangun sebuah aplikasi web. Sebelum kehadiran ajax, kebanyakan aplikasi mengandalkan formulir untuk berinteraksi dengan server. Pemakai harus mengklik suatu tombol Submit untuk mengirim atau mendapatkan informasi dari server. Dengan menggunakan Ajax, berbagai kejadian pada objek formulir dapat digunakan dengan untuk berinteraksi dengan server, misalnya menvalidasi masukan pemakai terhadap isi database atau menampilkan data sesuai dengan isi suatu kotak kombo.

3 Kelemahan Ajax Tentunya tidak ada yang sempurna di dunia ini. Walaupun ajax menawarkan keunggulan bila dibandingkan dengan aplikasi web tradisional. Namun, tetap saja ada kelemahannya. Berikut ini adalah kelemahan atau masalah yang potensial yang sering terjadi apabila kita menggunakan ajax. 1. Mesin pencari (search engine) bisa jadi tidak dapat mengindeks seluruh bagian dalam halaman web. 2. Tombol Back pada browser menjadi tidak berfungsi. 3. Tidak semua browser mendukung Ajax. 4. Ajax menjadi tidak berfungsi kalau klien mematikan JavaScript Apa itu JavaScript JavaScript adalah bahasa skrip (bahasa yang kodenya ditulis menggunakan teks biasa) yang ditempelkan pada dokumen HTML dan diproses pada sisi klien. Dengan menggunakan JavaScript dimungkinkan untuk memvalidasi masukan masukan pada formulir sebelum formulir dikirim ke server. Selain itu, juga dimungkinkan untuk mengimplementasikan tugas yang bersifat interaktif tanpa berhubungan dengan server. Beberapa contoh yang bisa dilakukan melalui JavaScript : 1. Menampilkan jam lokal pada halaman web 2. Mengatur warna latar belakang halaman web 3. Mengganti gambar ketika pemakai menempatkan penunjuk mouse ke suatu gambar 4. Memvalidasi keabsahan data yang dimasukkan oleh pemakai 5. Menandai semua data yang akan dihapus dengan cara memberi tanda centang pada kotak cek. Hal seperti ini biasa disediakan pada pembaca berbasis web.

4 BAB 2 Pemrograman AJAX Mengenal XMLHttpRequest XMLHttpRequest merupakan object yang dirancang untuk memungkinkan prmrogram melakukan permintaan HTTP dari suatu aplikasi. Objek XMLHttpRequest inilah yang membuat JavaScript bisa meminta layanan ke server HTTP secara asinkron, menerima tanggapan dari server, dan memperbaharui isi sebagian halaman web. Pada Internet Explorer 6 dan sebelumnya, objek XMLHttpRequest dibentuk melalui pernyataan : xmlhttp = new ActiveXObject( Microsoft.XMLHTTP ); Pada browser lain (misalnya Firefox dan Opera), objek XMLHttpRequest diciptakan dengan cara seperti berikut : xmlhttp = new XMLHttpRequest(); Agar skrip yang kita buat bisa berjalan pada berbagai jenis browser, kedua hal tersebut harus ditangani. Hal itu bisa dilakukan dengan memanfaatkan pernyataan try..catch. Pernyataan try..catch mempunyai kaidah seperti berikut : try //kode yang bisa menghasilkan eksepsi(yang menimbulkan kesalahan) catch(e) //Kode yang akan dijalankan hanya kalau terjadi eksepsi pada bagian try ajax1.html <title>mengenal Objek XMLHttpRequest</title> var xmlhttp = null; try xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); catch(e) try xmlhttp = new XMLHttpRequest();

5 catch(e) //Cek isi xmlhttp if(xmlhttp == null) document.write("browser tidak mendukung XMLHttpRequest"); else document.write("browser mendukung XMLHttpRequest"); Tampilan pada Firefox : Mengenal Metode getelementbyid() Metode ini berguna untuk mendapatkan sebuah elemen yang berada dalam dokumen HTML. Metode ini mensyaratkan elemen yang dicari memiliki suatu ID. myid.html <title>contoh Penggunaan ID</title> textjs: <input type="text" name="textjs" id="id_js" value="javascript" /> <br /> textphp: <input type="text" name="textphp" id="id_php" value="php" /> <br /> <br /> Info: <br /> var obj = document.getelementbyid("id_js"); document.write("name = " + obj.name + "<br />"); document.write("id = " + obj.id + "<br />"); document.write("type = " + obj.type + "<br />"); document.write("value = " + obj.value + "<br />");

6 Mengenal Properti innerhtml innerhtml merupakan properti milik objek DOM yang digunakan untuk menampilkan teks yang berasal dari server. Penggunaannya : objek.innerhtml = teks; jam.html <title>contoh innerhtml</title> function tampilkaninfo() var sekarang = new Date(); var jam = sekarang.gethours(); var menit = sekarang.getminutes(); var detik = sekarang.getseconds(); if (jam < 10) jam = "0" + jam; if (menit < 10) mnit = "0" + menit; if (detik < 10) detik = "0" + detik; var pesan = "Anda mengklik terakhir kali jam " + jam + ":" + menit + ":" + detik; var obj = document.getelementbyid("id_info"); obj.innerhtml = pesan; <form> <input type="button" value="klik Saya"

7 onclick="tampilkaninfo()" /> </form> <div id="id_info">kalau Anda mengklik tombol di atas suatu info muncul di sini</div>

8 Membuat Aplikasi Ajax info.txt File ini berasal dari server. Jika Anda menjumpai tulisan ini, Berarti aplikasi Ajax Anda sudah bekerja ajax.html <title>contoh Ajax</title> var xmlhttp = buatobjekxmlhttp(); function buatobjekxmlhttp() var obj = null; if (window.activexobject) obj = new ActiveXObject("Microsoft.XMLHTTP"); else if (window.xmlhttprequest) obj = new XMLHttpRequest(); // Cek isi xmlhttp if (obj == null) document.write( "Browser tidak mendukung XMLHttpRequest"); return obj; function ambildata(sumber_data, id_elemen) if (xmlhttp!= null) var obj = document.getelementbyid(id_elemen); xmlhttp.open("get", sumber_data); xmlhttp.onreadystatechange = function () if (xmlhttp.readystate == 4 && xmlhttp.status == 200) obj.innerhtml = xmlhttp.responsetext; xmlhttp.send(null); <input type="button" value="klik Saya" onclick="ambildata('info.txt', 'id_info')" /> <div id="id_info">kalau Anda mengklik tombol di atas suatu info muncul di sini</div>

9 PHP dan Ajax ajax.js var xmlhttp = buatobjekxmlhttp(); function buatobjekxmlhttp() var obj = null; if (window.activexobject) obj = new ActiveXObject("Microsoft.XMLHTTP"); else if (window.xmlhttprequest) obj = new XMLHttpRequest(); // Cek isi xmlhttp if (obj == null) document.write( "Browser tidak mendukung XMLHttpRequest"); return obj; function ambildata(sumber_data, id_elemen)

10 if (xmlhttp!= null) var obj = document.getelementbyid(id_elemen); xmlhttp.open("get", sumber_data); xmlhttp.onreadystatechange = function () if (xmlhttp.readystate == 4 && xmlhttp.status == 200) obj.innerhtml = xmlhttp.responsetext; xmlhttp.send(null); kirimvar.html <title>contoh Mengirimkan Variabel</title> <script type="text/javascript" src="ajax.js"> function prosesdata(sumber_data, id_elemen) var elemen_nama = document.getelementbyid("nama"); var nama_user = elemen_nama.value; var url = sumber_data + "?nama=" + nama_user; ambildata(url, id_elemen); <form> Nama Anda: <input type="text" name="textnama" id="nama"/> <br /> <input type="button" value="klik Saya" onclick="prosesdata('ucapan.php', 'id_info');" /> </form> <div id="id_info">kalau Anda mengklik tombol di atas suatu info muncul di sini</div> ucapan.php <?php header("cache-control: no-cache, must-revalidates"); header("expires: Mon, 26 Jul :00:00 GMT"); $nama = $_GET["nama"]; if (!empty($nama)) print("hai, $nama. Selamat belajar"); else print("hai. Tolong isi nama Anda, ya!");?>

11

12 BAB 3 Jquery Framework Apa itu Jquery jquery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. Untuk bisa menggunakan jquery terlebih dahulu kita tempelkan library jquery ke dalam program kita, contoh penggunaannya seperti berikut : <script type="text/javascript" src="lib/jquery min.js"> Write Less, Do More Itulah prinsip jquery. Jquery memiliki pemrograman Ajax yang simpel namun sangat kuat. Berikut sintaks untuk meload data dari server atau dengan kata lain pemrograman ajax dengan jquery : $(selector).load(url,data,callback) Keterangan : (selector) Elemen HTML yang akan digunakan (url) alamat url dari data yang akan di load (data) variabel dan nilainya yang akan dikirimkan ke server (url) (callback) Fungsi yang akan di eksekusi ketika data server telah selesai di proses dan di unduh. ajax_jquery.html <title>contoh Ajax dengan Jquery</title> <script type="text/javascript" src=" jquery min.js "> function prosesdata() $("#id_info").load("info.txt"); <input type="button" value="klik Saya" onclick="prosesdata();" /> <div id="id_info">kalau Anda mengklik tombol di atas suatu info muncul di sini</div>

13 Mengirimkan Variabel dengan Jquery Untuk mengirimkan suatu variabel dari klien ke server dalam aplikasi web ada dua cara yaitu secara GET atau POST. Dalam jquery pun juga terdapat method tersebut yang berfungsi untuk mengakses suatu file atau mengirimkan variabel ke server. Untuk sintaksnya sebagai berikut : $.get(url,data,callback,type) $.post(url,data,callback,type) Contoh program : kirimvar_jquery.html <title>contoh Kirim Variabel Ajax JQuery</title> <script type="text/javascript" src=" jquery min.js "> function prosesdata() var name = $("#nama").val(); $.get("ucapan.php",nama: name, function(data) $("#id_info").html(data); );

14 <form> Nama Anda: <input type="text" name="textnama" id="nama"/> <br /> <input type="button" value="klik Saya" onclick="prosesdata();" /> </form> <div id="id_info">kalau Anda mengklik tombol di atas suatu info muncul di sini</div> Penanganan Formulir dengan Jquery Mungkin akan ribet penulisan skripnya jika kita harus menambahkan banyak variabel yang dikirimkan ke server ketika menghadapi formulir, misal pada registrasi. Pada registrasi, tentunya kita harus mengirimkan variabel seperti nama, alamat, tanggal lahir, no. Telepon, dan lain lain. Akan sangat merepotkan ketika kita harus mengetik skrip berikut : var name = $("#nama").val(); var alamat = $("#addr").val();

15 var tgl = $("#tgl").val(); var no = $("#no").val(); $.get("ucapan.php",nama: name, addr: alamat, tgl: tgl, nomor: no, function(data) $("#id_info").html(data); ); Dalam jquery mempunyai sebuah tag yang dapat menghandel semua variabel dalam form dengan mengetikkan 1 tag, yaitu : $('form').serialize() Efek Animasi dengan Jquery Jquery sendiri menyediakan beberapa efek untuk memperindah tampilan web. Berikut ini adalah beberapa efek dari jquery yang akan kita bahas : Efek Keterangan $(selector).hide() Menyembunyikan elemen HTML yang dipilih $(selector).show() Memunculkan elemen HTML yang dipilih $(selector).slidedown() Slide Down(show) elemen HTML yang dipilih $(selector).slideup() Slide Up(hide) elemen HTML yang dipilih $(selector).fadein() Menimbulkan efek Fade in pada elemen HTML yang dipilih $(selector).fadeout() Menimbulkan efek Fade out pada elemen HTML yang dipilih $(selector).fadeto() Menimbulkan efek Fade out dengan opacity yang dikirimkan (sebagai parameter) pada elemen HTML yang dipilih jquery Hide dan Show jquery_hideshow.html <script type="text/javascript" src="jquery min.js"> $(document).ready(function() $("#hide").click(function() $("p").hide(); ); $("#show").click(function() $("p").show(); ); ); <p>if you click on the "Hide" button, I will disappear.</p> <button id="hide">hide</button> <button id="show">show</button>

16 jquery Slide - slidedown, slideup jquery_slidedown.html <script type="text/javascript" src="jquery min.js"> $(document).ready(function() $(".flip").click(function() $(".panel").slidedown("slow"); ); ); <style type="text/css"> div.panel,p.flip margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; div.panel height:120px; display:none; </style> <div class="panel"> <p>because time is valuable, we deliver quick and easy learning.</p> <p>at W3Schools, you can study everything you need to learn, in an accessible and handy format.</p> </div> <p class="flip">show Panel</p> jquery_slideup.html <script type="text/javascript" src="jquery min.js"> $(document).ready(function() $(".flip").click(function() $(".panel").slideup("slow"); ); ); <style type="text/css"> div.panel,p.flip margin:0px;

17 padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; div.panel height:120px; </style> <div class="panel"> <p>because time is valuable, we deliver quick and easy learning.</p> <p>at W3Schools, you can study everything you need to learn, in an accessible and handy format.</p> </div> <p class="flip">hide Panel</p> jquery Fade - fadein, fadeout, fadeto jquery_fadein.html <script type="text/javascript" src="jquery min.js"> $(document).ready(function() $("p").hide(); $("div").click(function() $("p").fadein(4000); ); ); <div>click ME AWAY!</div> <p>if you click on the box above, it will be removed.</p> jquery_fadeout.html <script type="text/javascript" src="jquery min.js"> $(document).ready(function() $("div").click(function() $(this).fadeout(4000); ); ); <div style="background:yellow;width:200px">click ME AWAY!</div>

18 <p>if you click on the box above, it will be removed.</p> jquery_fadeto.html <script type="text/javascript" src="jquery min.js"> $(document).ready(function() $("button").click(function() $("div").fadeto("slow",0.25); ); ); <div style="background:yellow;width:300px;height:300px"> <button>click to Fade</button> </div>

19 Referensi Abdul Kadir, Mastering Ajax dan PHP, Andi, Yogyakarta, W2Schools, Jquery Tutorials,