Wednesday, October 3, 2012

Tutorial AJAX Sederhana bagian 1

Halo Selamat malam, apa kabar para programmer? Pasti kalian lagi pada on kan jam segini, atau malah belum pada on? Mungkin baru ntar malam on nya. Kali ini gw akan membahas mengenai tutorial AJAX sederhana. Sebelumnya pada tahu kan tentang AJAX? Kalo belum tahu mungkin bisa dibaca disini atau mungkin disini . Nah, oleh karena gw anggap lo semua udah tahu tentang AJAX maka berikut sedikit tutorial yang udah gw buat, yakni membuat teks dinamis dimana ketika mouse melakukan hover terhadap gambar maka akan secara otomatis akan memberikan deskripsi terhadap gambar tersebut. 

Pertama-tama yang harus dibuat adalah menyiapkan gambarnya : 
 

Masing-masing dikasih nama sebagai berikut : eraser.jpg, pen.jpg, dan pencil.jpg.

Seteleh selesai, kemudian mari kita buat deskripsinya. Sebelumnya gw kasih tw kalo sebenarnya. deskripsi ini dapat ditulis menggunakan txt ataupun html. Nah untuk contoh kali ini gw akan menggunakan .txt. Kalau mau pake html silahkan ditelisik sendiri aja, caranya tetep sama kok hehe. 

Contoh penulisan deskripsi seperti ini : 
Ini adalah penghapus -> simpan dengan nama Eraser.txt 
Ini adalah pulpen -> simpan dengan nama Pen.txt
Ini adalah pensil -> simpan dengan nama Pencil.txt
Nah, kalau sudah buat semua yang diatas kita langsung buat kodingnya hehe. Berikut penulisan kodingnya :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tutorial AJAX 1</title>
<style type="text/css">
    .box { border: 1px solid black;
             padding: 10px }
</style>
<script type="text/javascript">
    var detail="";
    function load(sumber)
    {
        try
        {
            detail = new XMLHttpRequest();
            detail.onreadystatechange = statechange;
            detail.open('GET', sumber, true);
            detail.send();
        }
        catch(exception)
        {
            alert("something missing");
        }
    }
  
    function statechange()
    {
        if (detail.readyState == 4)
        {
            document.getElementById('contentArea').innerHTML = detail.responseText;
        }
    }
  
    function clearcontent()
    {
        document.getElementById('contentArea').innerHTML = "";
    }
  
  
</script>
</head>

<body>
    <center>
        <h1>Arahkan Panah ke Mouse</h1>
        <img src="eraser.jpg" onmouseover="load('Eraser.txt');" onmouseout="clearcontent();" />
        <img src="pen.jpg" onmouseover="load('Pen.txt');" onmouseout="clearcontent();" />
        <img src="pencil.jpg" onmouseover="load('Pencil.txt');" onmouseout="clearcontent();" />
        <div class = "box" id = "contentArea">&nbsp;</div></center>
    </center>
</body>
</html>
Penjelasan mengenai kodingnya adalah ketika gambar di on mouse over maka secara otomatis akan menjalankan sebuah fungsi di javascript yang bernama load dengan mengirim parameter. Parameter yang dikirim ini akan diolah oleh fungsi AJAX yang kita buat. Ketika AJAX telah memenuhi syarat maka secara otomatis akan mengirim response text yang kita buat sebelumnya. Nah simpel bukan cara kerjanya. Mulailah mencoba sendiri dari sekarang hehe.

Lalu bagaimana dengan HTML? Coba aja sendiri, kalau bingung, tinggal komen saja disini. Saya siap membantu kok hehe

0 comments: