All About IT : Juni 2013

AJAX

Mengapa Harus Ajax ???

Pada website tradisional biasa jika kita mengklik suatu tombol/link tertentu maka browser akan melakukan refres dimana document HTML akan di baca dari awal dan layar browser akan menjadi blank sesaat karena pada saat itu browesr sedang meminta/merequest data dari web server dan hal itulah yang membuat aplikasi website menjadi kurang interaktif dan responsif. AJAX digunakan untuk memecahkan masalah tersebut,AJAX membuat aplikasi web menjadi lebih interaktif dan responsif serta memiliki kecepatan dalam memproses request ke server. Sedah menjadi teknologi yang wajib diterapkan bagi website-website moderen (web 2.0)

Asal Mula Bahasa Pemograman AJAX

AJAX memiliki kepanjangan asynchronous javascript and XML merupakan suatu teknik baru dalam dunia web tapi bukan merupakan bahasa pemograman yang baru. Dikembangkan sekitar 2-3 tahun yang lalu, AJAX mulai dilirik oleh para web desainer dan programer. Dengan adanya AJAX,akses data ke server yang dikirim melalui client via web dapat lebih cepat daripada mekanisme biasa. Hal ini dikarenakan AJAX tidak perlu melakukan proses loading page (refresh page) atau pindah ke page yang lain. AJAX dapat diintegrasikan dengan server side programming seperti PHP,ASP,JSP dll. Perhatikan mekanisme proses ajax menggunakan PHP berikut ini :

Pada mekanisme di atas,proses berawal dari web client. Web client merequest sebuah halaman PHP ke server melalui javascript. Selanjutnya server akan merespon dan menjalankan script PHP. Script PHP akan menghasilkan respon dalam bentuk XML dan data XML tersebut akan dikirim kembali ke web client untuk diolah oleh javascript. Hasil olahan javascript tersebut akhirnya akan ditampilkan di web client sebagai output tanpa harus merefresh halaman web. Bandingkan dengan mekanisme biasa dalam menjalankan PHP seperti yang ditunjukkan pada gambar berikut :

Pada mekanisme biasa,respon yang dihasilkan oleh server HTML yang mengakibatkan halaman web akan merefresh tampilan. Dilihat dari sisi efisiensi, hal ini tentu kurang sekali. Sedangkan kekurangannya AJAX dibandingkan mekanisme biasa adalah memiliki tingkat kesukaran pemograman yang lebih tinggi, karena programer harus menguasai 4 hal yaitu HTML-(XHTML),Javascript, XML dan juga server side programing seperti PHP dan lain sebagainya.

Karakteristik :

sebuah halaman web tidak perl di-refresh setiap kali ada data baru yang ingin ditampilkan. Dengan demikian, sebuah aplikasi web akan terasa seperti aplikasi desktop saja.
kecepatan, interaktivis, fungsionalitas, dan tingkat kegunaan halaman web akan meningkat.
AJAX bekerja mengambil data dari server, user yang membuka halaman web masih tetap bisa berinteraksi dengan alaman web tersebut, di mana halaman web tidak mengalami freezing seperti halnya aplikasi web konvensional.
bersifat asynchronous artinya permintaan data tambahan dari server dan loadingnya dilakukan di background tanpa mempengaruhi tampilan dan sifat halaman web sekarang.
Ajax memiliki struktur pemrograman yang lebih mudah untuk dipahami.

f. Melakukan request ke web server dan PHP yang berada di server akan melakukan apa yang diminta olehAjax, mengirim hasilnya ke web browser dan Ajax menampilkannya kepada user.

Contoh script koneksi.php

<?php
$Host='localhost';
$User='root';
$Pass='';
$Database='data_perusahaan';
$db = mysql_connect("$Host", "$User", "$Pass") or die ("gagal: " . mysql_error());
mysql_select_db("$Database", $db) or die ("data_salah: " . mysql_error());
?>

Script di atas sebagai mengkoneksikan denagn database yang di buat seperti yang saya buat dengan nama database data_perusahaan dengan 2 tabel yaitu harga_pengiriman dan cek_pengiriman yang memiliki beberapa atribut di dalam field nya.

Contoh script index.php

<?php
include("koneksi.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XMTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Data Perusahaan</title>
<script src="select.js"></script>
</head>
<body bgcolor="gray">
<td><h3>Pilih Harga Dari Tiap Kota :<font style="italic"></td></h3>
<select name="cek_pengiriman" onChange="showData_cek(this.value)">
        <option></option>
    <?php
        $query="select * from harga_pengiriman";
        $rs = mysql_query($query);
        while($result_data = mysql_fetch_array($rs)){
            list($id_kota, $kota)=$result_data;
    ?>
        <option value="<?php echo "$id_kota"?>"><?php echo "$kota"?></option>
    <?php
    }
    ?>
    </select>
    <br/><br/>
    <div id="txtHint"></div>
</body>
</html>

Script di atas menampilkan harga dari tiap kota apabila akan melakukan pengiriman dari tiap kota yang akan di tuju contohnya jika kota yang di pilih adalah kota Jember-Lumajang maka akan tampil seperti gambar berikut :

Contoh scrpit get.php
<?php
    $q = $_GET["q"];
    include("koneksi.php");

    $sql = "SELECT * FROM cek_pengiriman WHERE id_kota = '".$q."'";
    $result = mysql_query($sql);

    $sql_b = "SELECT * FROM harga_pengiriman WHERE id_kota = '".$q."'";
    $result_b = mysql_query($sql_b);
    $row_b = mysql_fetch_assoc($result_b);

    ?>
    <tr>Harga Pengiriman : <b/><?php echo strtoupper ($row_b['kota'])?> </b></tr>
    <?php
    echo "<table bgcolor='gray' border='5'>
           <tr>
           <td><b>Id Cek</td></b>
           <td><b>Data Cek</td></b>
           </tr>";

    while($row = mysql_fetch_array($result)){
       echo "<tr>";
           echo "<td><b>" . $row['id_cek'] . "</td></b>";
           echo "<td><b>" . $row['data_cek'] . "</td></b>";
       echo "</tr>";
    }
    echo "</table>";
    ?>

Script di atas menampilkan harga pengiriman jika pilihan harga tiap kota dipilih dengan yang di butuhkan maka akan tampil gambar sebagai berikut :
misal harga pengiriman tiap kota yang dipilih adalah Jember-Lumajang maka harga pengiriman Jember-Lumajang akan tampil seperti gambar di bawah ini.

Contoh script select.js

var xmlHttp

function showCek_pengiriman(str){
    xmlHttp=GetXmlHttpObject()
    if(xmlHttp==null){
        alert("Browser anda tidak support")
        return
}
var url="get.php"

url=url+"?q="+str
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged(){
    if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
        document.getElementById("txtHint").innerHTML=xmlHttp.responseText
        }
    }

function GetXmlHttpObject(){
    var xmlHttp=null;

    try{
        xmlHttp=new XMLHttpRequest();
    }catch(e){
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xmlHttp;
    }

Demikian contoh script dari AJAX,Semoga bermanfaat !!!!

Senin, 03 Juni 2013

AJAX