Ajax Jquery

A. Ajak

Ajax merupakan kepanjangan dari Asynchronous JavaScript + XML dan bukan merupakan bahasa pemrograman baru tetapi suatu metode/teknik baru yang menggunakan teknologi yang telah ada. Ajax menggunakan teknologi lama yaitu Javascript yang melakukan request ke server untuk meminta data dalam bentuk Text/XML. Coba anda bandingkan diagram proses suatu website keserver pada website konvensional dan website yang menggunakan Ajax.

Sekarang bandingkan dengan website yang menggunakan Ajax:

Jika anda lihat pada website yang menggunakan Ajax, proses request ke server dilakukan oleh Javascript. Sehingga tampilan pada browser client tidak mengalami perubahan (refresh). Kemudian hasilnya akan dikirim oleh server dalam bentuk Text/XML dan ditampilkan dibrowser client.

Ajax merupakan penggabungan teknologi-teknologi berikut ini:

· Javascript

· HTML/XHTML

· XML

· CSS

B. JQuery

JQuery adalah sebuah framework/library JavaScript yang dapat membantu kita mempermudah dan mempercepat pengolahan DOM pada halaman web.
Dengan jQuery kita dapat membuat web lebih menarik dan interaktif dengan mudah. jQuery sudah mengautomasi pekerjaan-pekerjaan yang umum dan mempersimple code yang kompleks. Library ini sangat kecil dan mempunyai banyak pluggin yang dapat mempermudah kita.

Adapun fitur-fitur yang ditawarkan oleh jQuery adalah

·Mempermudah akses dan manipulasi ke bagian page tertentu. jQuery menawarkan sebuah selector yang robust dan efesien untuk mengambil bagian tertentu pada dokumen yang selanjutnya bisa dimanipulasi.

·Mempermudah perubahan tampilan dokumen. jQuery dapat mengubah tampilan CSS dengan mudah.

·Merespon interaksi user dengan webpage. jQuery mempunyai cara yang sangat-sangat elegan untuk memasukkan sebuah even ke dalam salah satu bagian dari webpage.

·Menambah animasi. Kita dapat memberi animasi pada webpage kita dengan jQuery

·Mempermudah AJAX.

A. Membuat Pertanyaan Konfirmasi

Dalam memebuat program ada kalanya kita ingin agar data yang diinputkan tidak salah. Teknik Validasi yang anda terapkan pun, misalnya validasi nama tidak boleh angka terkadang tidak maksimal. Kalau misalnya kita salah ngetik nama “Irul” dengan “irung”, pasti nama akan langsung tersimpan bukan? Bukan hanya itu, biasanya seorang user tidak sengaja menekan tombol enter. Padahal belum selesai mengetik. Ada cara untuk mengatasi hal tersebut, yakni dengan membuat pertanyaan konfirmasi. Pertanyaan konfirmasi berfungsi untuk menampilkan pertanyaan “ok” dan “cancel”. Ini untuk memastikan apakah data yang diinputkan sudah benar dengan melakukan pengecekan ulang.

Pertanyaan konfirmasi seperti diatas dengan javascript.

Contoh:

Pertanyaan.js

function pertanyaan ()

{

if(confirm('Anda yakin yang ingin anda posting ini sudah benar?'))

{

return true;

}

else

{

return false;

}

Index.html

<html>

<body>

<a href=# onclick="return pertanyaan ()">Tes membuat pertanyaan...</a>

</body>

</html>

Tampilannya:

Pada pertanyaan.js, dibuat perintah confirm untuk menampilkan kotak peesan ok dan cancel. Karena menggunakan function, kita gunakan return true jika benar dan return False jika salah. Lalu pada bagian yang ingin dimunculkan pertanyaan,tambahkan perintah onclick. Maksudnya ketika diklik, event apa yang terjadi.

B. Membuat Acordionstabs

Accordion Menu adalah menu dengan beberapa efek animasi. Ini memiliki beberapa item menu baris atas yang saat diklik matikan untuk membuka sub menu pilihan. Ketika menu lain tingkat atas dipilih, menu lain yang terbuka secara otomatis akan runtuh dan menyimpan area layar berguna

Script html

<html>

<head>

rel="stylesheet" />

src="jquery.tools.js"></script>

$(document).ready(function() {

$("#accordion").tabs("#accordion div.pane", {tabs:'h2',effect:'slide',initialIndex:null});

});

</script>

</head>

<body>

<h2 class="current">Bagian Web Designer</h2>

<h3>Web Designer</h3>

<p><strong>Web Designer bertugas sebagai juru gambar, yaitu mendesign website.</strong></p>

Web designer biasanya memiliki kemampuan mengolah gambar menggunakan photoshop.

Disamping itu, dia juga memiliki kemampuan memngatur layout menggunakan Dreamweaver, HTML,CSS, Javascript (jQuery).</p>

</div>

<h2>Bagian Web Programmer</h2>

<h3>Web Programmer</h3>

<p>Web programmer bertugas sebagai juru coding, yaitu melakukan pemrograman website.</p>

</div>

<h2>Bagian Web Administrator</h2>

<h3>Web Administrator</h3>

<p>Web administrator bertugas sebagai juru maintence,yaitu melakukan pemeliharaan dan penjagaan website.</p>

</div>

</body>

</html>

Dibuat file yang dilengkapi css,js, gambar dan bahan yang disertakan.

Tampilannya

Menggunakan efek jQuery untuk menghidupkan menu akordeon. jQuery menyediakan Fade In / Fade Out efek , tapi menu akordeon terlihat lebih realistis jika kita menggunakan Slide In / Out Slide efek.

C. Membuat Detepicker

a. Buat sebuah folder di dalam dokumen root web Anda, misalkan saja nama foldernya adalah kalender.

b. Lalu buat folder css dan js di dalam folder kalender. Kemudian copykan file jquery-1.4.4.js dan folder ui dari folder development-bundle ke dalam folder js Anda

c. Copykan juga file jquery.ui.all.css, jquery.ui.base.css, jquery.ui.datepicker.css, dan jquery.ui.theme.css dari folder development-bundle\themes\ui-lightness serta file demos.css dari folder development-bundle\demos ke dalam folder css Anda.

d. Dan yang terakhir copy folder images dari folder development-bundle\themes\ui-lightness ke dalam folder css Anda.

Dibuat file yang dilengkapi css,js, gambar dan bahan yang disertakan.

Script Html

<hrml>

 <head>

  <link type="text/css" href="ui.all.css" rel="stylesheet" />

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

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

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

  <script type="text/javascript">

   $(document).ready(function(){

    $("#tanggal").datepicker();

});

  </script>

   </head>

   <body style="font-size:65%;">

       MASUKKAN TANGGAL: <input id="tanggal" type="text">

   </body>

   </html>

Tampilannya:

Datepicker merupakan salah satu solusi untuk memilih/input tanggal yang biasanya digunakan dalam suatu form, misalnya form pengisian tanggal lahir. Solusi yang lain mungkin dapat dengan menggunakan combo box yang menampilkan tanggal (1-31), semua bulan, dan range tahun. Menurut saya solusi yang kedua kurang elegan dan kurang enak dilihat

. Jika menggunakan datepicker, dari segi tampilan jauh lebih menarik. Datepicker dapat dibuat dengan menggunakan Javascript. Akan tetapi saat ini sudah ada yang lebih mudah, yaitu dengan menggunakan JQuery

. Oleh karena itu kali ini saya akan menulis bagaimana membuat datepicker menggunakan JQuery.

D. Membuat Form Lengkap dengan tool tip

Tooltip adalah tampilan informasi dalam bentuk teks (bisa juga gambar) yang muncul ketika kita melakukan mouse over ke dalam suatu item di website. Biasanya Tooltip berbentuk kotak kecil yang melayang di atas item tersebut.

Cara termudah membuat Tooltip adalah dengan memanfaatkan properties tag HTML “title” seperti berikut :

<span
title="Ini adalah Tooltip sederhana hihihi">Sentuh
saya!</span>

Hasilnya ini : Sentuh saya!

Nah karena Tooltip di atas terlalu sederhana dan hanya bisa memuat informasi berbentuk teks saja, maka untuk membuat Tooltip yang lebih keren kita bisa memanfaatkan plugins jQuery.

Dibuat file yang dilengkapi css,js,jquery 1.4, gambar dan bahan yang disertakan.

Script html

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />

    <link rel="stylesheet" type="text/css" media="screen" href="css/jquery.ketchup.css" />

    <link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />

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

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

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

    <script type="text/javascript">

    $(document) .ready(function() {

    $('#contoh') .ketchup();

});

    </script>

</head>

<body>

  <form action="" id="contoh">

<div>

  <label for="username">Username</label>

  <input type="text" id="username" class="validate(required)" />

</div>

<div>

  <label for="password">Password</label>

  <input type="password" id="password" class="validate(required, minlength(5))" />

</div>

<div>

  <label for="cpassword">Ulangi Password</label>

  <input type="password" id="cpassword" class="validate(required, match(#password))" />

</div>

<div>

  <label for="keahlian">Keahlian</label>

  <p><input type="checkbox" name="cek" value="jquery" /> jQuery</p>

  <p><input type="checkbox" name="cek" value="ajax" /> Ajak</p>

    <p><input type="checkbox" name="cek" value="php" /> PHP</p>

    <p><input type="checkbox" name="cek" value="other" class="validate(rangeselect(1,3))" /> Lainnya</p>

    <div class="clear"></div>

</div>

<div>

  <label for="riwayat">Riwayat Pendidikan</label>

    <textarea id="riwayat" class="validate(rangelength(10,140))"></textarea>

</div>

  <div class="submit">

  <input type="submit" value="Proses" />

</div>

</form>

</body>

</html>

Tampilannya:

E. Membuat Overlay Galery

Script html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

</script>

</head>

<body>

</div>

<p>Bob Ho (Jackie Chan), seorang ahli mata-mata CIA memutuskan menyudahi karirnya untuk menata hidupnya bersama tetangga sekaligus kekasihnya, Gillian (Amber Valletta).</p>

<p>Namun Bob masih mempunyai satu misi yang harus ia selesaikan sebelum Gillian bersedia menikahinya, yaitu memenangkan hati anak-anaknya yang keras kepala dan tidak merestui hubungan mereka berdua.</p>

</div>

<p>Film dimulai saat seorang anak, Rizwan Khan (Tanay Chheda), seorang muslim yang mengidap sindrom Asperger, hidup bersama ibunya (Zarina Wahab) di wilayah Borivali di Mumbai.</p>

<p>Saat ia dewasa (Shahrukh Khan), Rizwan pindah ke San Fransisko dan hidup bersama adik dan iparnya.

Selama disana, ia jatuh cinta pada Madira (kajol). Mereka menikah dan memulai usaha disana.

Saat peristiwa 9/11, barulah konflik film dimulai.</p>

</div>

</body>

</html>

Tampilannya:

Kesimpulan

Manfaat Jquery adalah untuk memperindah tampilan website dengan animasi.

tag kode diatas berfungsi untuk mengimport file jquery, kode diatas pasti dibutuhkan apabila anda ingin menggunakan jquery pada website anda, setelah menambahkan tag kode diatas, tag kode selanjutnya adalah

ript>
function coba() {
$(document).ready(function(){
$(”#button1″).click(function(){
$(”#coba”).fadeOut(’slow’);
});
});
}
</script>

Penjelasannya adalah sebagai berikut :

· $(document).ready(function(){ berfungsi untuk menjalankan semua perintah dibawah kode tersebut apabila dokumen html selesai di load semua. script ini menurut saya diperlukan dalam menggunakan jquery agar jquery dapat berjalan sempurna

· $(”#button1″).click(function(){ script ini mempunyai arti bawah untuk komponen yang mempunyai ID dengan nama button1 dan dilakukan klik pada komponen tersebut maka akan menjalankan perintah di bawahnya.

· $(”#coba1″).fadeOut(’slow’); script ini mempunyai fungsi untuk memberikan efek animasi fade out pada komponen yang mempunyai ID dengan nama coba1.

diatas ada tanda # setelah nama komponen, apa artinya? artinya untuk mengakses komponen yang diberi nama dengan menggunakan tag “ID” maka untuk mengakses nya diberi tanda “#” baru nama komponen, untuk komponen yang diberi class pada css maka untuk mengakses nya diberi tanda “.” baru nama class nya. contohnya pemberian nama dengan tag ID seperti berikut :

<input type=”text” Id=”coba”> << komponen di samping ini telah diberi nama coba.

Lihat

Jumat, 21 Oktober 2011

Ajax Jquery

0 komentar:

Posting Komentar

Popular posts

Blog Archive