Studi Kasus : Membuat contoh aplikasi AJAX sederhana (Tab Ajax) dengan PHP

Kebutuhan : Webserver Package, already installed.

Step 1 : Membuat struktur folder kerja

  1. Siapkan folder dengan nama simpleajax pada folder document root anda.
  2. Simpan file gif berikut ini pada folder simpleajax (simpan gambar dengan cara : klik pada gambar dan save as). Gambar ini akan digunakan sebagai loader animation, yaitu gambar yang akan ditampilkan ketika transaksi ajax sedang dilakukan.
  3. Simpan semua file pada praktikum hari ini pada folder ini.

Step 2 : Membuat file Index

  1. Ketikkan script berikut,
    <html>
    <head>
    <title></title>
    <script type="text/javascript" src="ajax.js"></script>
    </head>
    <body>
    <center>
    <h3> Simple AJAX Tabs</h3>
    <div id="tabs">
    <a href="fallback1.php" id="tab1" class="tab" onclick="return handleOnClick(1);"> News 1</a>
    <a href="fallback2.php" id="tab2" class="tab" onclick="return handleOnClick(2);">News 2</a>
    </div>
    <br>
    <div id="content">Klik pada tab untuk mengaktifkannya.</div>
    </center>
    </body>
    </html>
    
  2. Simpan dengan nama index.php
  3. Penjelasan : Index.php adalah file utama dalam aplikasi ini. Bagian yang paling penting untuk implementasi Ajax adalah pada baris 9 – 14. Setiap link pada tab memiliki masing – masing sebuah atribut value href dan onclick event handler, seperti pada script dibawah,
    <a href="fallback1.php" id="tab1" class="tab" onclick="return handleOnClick(1);"> News 1</a>

    Pada kasus ini, AJAX diinisiasi ketika user mengaktifkan tab dengan meng-kliknya.

    Ketika transaksi AJAX berhasil dieksekusi = fungsi handleOnClick() mengembalikan nilai false sehingga akan membatalkan event klik. AJAX kemudian mengontrol proses update pada dokumen dan href tidak diikuti.
    Ketika transaksi AJAX gagal (XMLHttpRequest objek tidak dapat diinstansiasi, dengan kata lain browser tidak support AJAX) = Fungsi handleOnClick mengembalikan nilai true dan href diikuti, menavigasi dokumen pada halaman dokumen baru (yaitu halaman fallback).

    Kenapa aplikasi menyediakan masing-masing event handler onClick dan sebuah href URL untuk setiap tab?

    Hal ini untuk mengatasi apabila browser dari device yang digunakan tidak mensupport AJAX. Jadi apabila device mensupport AJAX, transaksi AJAX untuk menampilkan berita akan dilakukan. Namun apabila tidak support, berita tetap ditampilkan tetapi dengan mengarahkannya pada halaman web baru (halaman fallback) berisi berita yang sama dari halaman yang dihasilkan oleh transaksi AJAX.

Step 3 : Membuat file ajax.js

  1. Ketikkan script berikut,
    var req = null;
    // Function to obtain an instance of XMLHttpRequest used in an AJAX request
    function getXHR() {
    if (window.XMLHttpRequest) {
    return new XMLHttpRequest();
    }
    else try {
    return new ActiveXObject('Msxml2.XMLHTTP');
    } catch(e) {
    try {
    return new ActiveXObject("Microsoft.XMLHTTP");
    } catch(e) {
    return null;
    }
    }
    }
    // Use AJAX to update the page content.
    // Returns true if the AJAX request succeeded, or false otherwise.
    function updateContent(url, id) {
    req = getXHR();
    if (req != null) {
    // Create a HTTP get request
    req.open('GET', url);
    // Anonymous callback function to handle state changes for the web request
    req.onreadystatechange = function() {
    // State "4" is response received.
    if (req.readyState == 4) {
    // Check for HTTP 200 - successful response from web server
    if (req.status == 200) {
    document.getElementById(id).innerHTML = req.responseText;
    } else {
    document.getElementById(id).innerHTML = 'Could not retrieve data.';
    }
    }
    // For all other states, show an animated gif indicating that content is loading
    else {
    document.getElementById(id).innerHTML = '<img id="loading" src="flickr-loader.gif"/>'; //result of download step 1
    }
    return false;
    }
    // Start the AJAX transaction
    req.send('');
    } else {
    return false;
    }
    return true;
    }
    // This is the onClick event handler for the tab links
    // index - the zero-based index of the tab that was clicked
    function handleOnClick(index) {
    // Construct the ID of the clicked tab
    var tabId = "tab" + index;
    // Update the style of the active tab.
    document.getElementById(tabId).setAttribute('class', 'activeTab');
    // Update the styles of the inactive tabs. This could also be achieved in a for loop.
    if (index != 1) {
    document.getElementById("tab" + 1).setAttribute('class', 'tab');
    }
    if (index != 2) {
    document.getElementById("tab" + 2).setAttribute('class', 'tab');
    }
    // Use AJAX to update the "content" div.
    // Construct the URL to use to retrieve the updated content
    var url = "http://localhost/helloMobile/getNews"+index+".php";
    // If the AJAX request succeeded, do not follow the original link
    if (updateContent(url, "content")) {
    return false;
    }
    // If we are here, then the AJAX transaction failed.
    // Follow the link and load the static page.
    return true;
    }
    
  2. Simpan dengan nama ajax.js
  3. Penjelasan : Kunci utama dari AJAX adalah objek XMLHttpRequest. Objek tersebut terletak pada browser sehingga masing – masing browser memiliki cara tersendiri untuk membuat objek tersebut. Function getXHR() pada script ajax2.js diatas adalah fungsi untuk menciptakan instance dari XMLHttpRequest (XHR) yang akan digunakan pada AJAX (Catatan : untuk IE, mensupport ajax via ActiveX objects, bukan XHR).Function updateContent() merupakan fungsi yang akan mengupdate content dari tab via AJAX, fungsi ini akan mengembalikan nilai true apabila transaksi AJAX berhasil, dan false jika gagal.
    Setelah itu fungsi akan menciptakan Http get request dan mengecek progress dari update dengan onreadystatechange event.
    onreadystatechange event menjalankan 3 hal,
    a. Jika asynchronous web request sedang dalam progress, maka animasi loading akan ditampilkan.
    b. Jika AJAX request completed, maka body dari web response akan digunakan sebagai content dari elemen.
    c. Jika AJAX request terminate dengan sebuah eror, maka eror akan ditampilkan pada user, yaitu “Could not retrieve data”Transaksi AJAX menggunakan document.getElementById dan element.innerHTML untuk mengupdate bagian dinamis dari dokumen (dalam kasus ini adalah berita sebagai bagian dinamis dari mobile web).

    Function handleOnClick() merupakan fungsi event handler ketika tab di klik. Fungsi ini menggunakan parameter index, sesuai dengan index dari tab yang diklik oleh user. Fungsi ini akan mengupdate style dari tab (untuk membedakan tab yang aktif dan yang tidak aktif) dan mengupdate isi dari div content. Isi dari div content merupakan file berita sesuai dengan tab yang diklik user. Content ini didapat dari URL var url = “http://localhost/simpleajax/getNews”+index+”.php”;
    Jadi script tersebut akan me-retrieve halaman dari getNews(index) dengan menggunakan AJAX, sesuai dengan index dari tab yang diklik oleh user.

Step 4 : Membuat file get News

  1. Ketikkan script berikut,
    <?php
    sleep(2);
    echo "News 1";
    echo "Ini adalah isi berita 1";
    ?>
    
  2. Simpan dengan nama getNews1.php
  3. Kemudian ketiikan script berikut,
    <?php
    sleep(2);
    echo "News 2";
    echo "Ini adalah isi berita 2";
    ?>
    
  4. Simpan dengan nama getNews2.php
  5. Penjelasan : Dua file ini merupakan original link (yang dijalankan via AJAX) dari tab pertama dan kedua (tab berindex 1 dan 2). Jadi getNews1.php dan getNews2.php akan dijalankan apabila user meng-klik tab index 1 dan 2, serta browser yang digunakan mensupport AJAX.

Step 5 : Membuat file fallback

  1. Ketikkan script berikut,
    <html>
    <head>
    <title></title>
    <script type="text/javascript" src="ajax.js"></script>
    </head>
    <body>
    <center>
    <h3> Simple AJAX Tabs</h3>
    <div id="tabs">
    <a href="fallback1.php" id="tab1" class="tab" onclick="return handleOnClick(1);"> News 1</a>
    <a href="fallback2.php" id="tab2" class="tab" onclick="return handleOnClick(2);">News 2</a>
    </div>
    <div id="content">
    <?php echo "News 1";
    echo "Ini adalah isi berita 1";
    ?>
    </div>
    </center>
    </body>
    </html>
    
  2. Simpan dengan nama fallback1.php
  3. Kemudian ketiikan script berikut,
    <html>
    <head>
    <title></title>
    <script type="text/javascript" src="ajax2.js"></script>
    </head>
    <body>
    <center>
    <h3> Simple AJAX Tabs</h3>
    <div id="tabs">
    <a href="fallback1.php" id="tab1" class="tab" onclick="return handleOnClick(1);"> News 1</a>
    <a href="fallback2.php" id="tab2" class="tab" onclick="return handleOnClick(2);">News 2</a>
    </div>
    <div id="content">
    <?php echo "News 2";
    echo "Ini adalah isi berita 2";
    ?>
    </div>
    </center>
    </body>
    </html>
    
  4. Simpan dengan nama fallback2.php
  5. Penjelasan : File fallback1.php dan fallback2.php merupakan file webpage statis yang akan dijalankan apabila user meng-klik tab index 1 dan 2, serta browser yang digunakan TIDAK mensupport AJAX. Jadi berita tetap ditampilkan namun dengan cara yang berbeda (tidak menggunakan AJAX).

Step 6 : Testing Code

  1. Pergi ke http://localhost/simpleajax/
  2. Maka file index.php akan ditampilkan, seperti gambar dibawah ini,
  3. Klik pada salah satu tab, maka jika browser anda support ajax, animasi loading akan ditampilkan. Lihat gambar dibawah.
  4. Setelah loading selesai, maka isi dari tab tersebut akan ditampilkan (dari getNews.php)
  5. Coba matikan ajax pada browser anda (dengan me-nonaktifkan javascript browser – untuk browser Firefox, caranya adalah dengan klik tools – options – content – hilangkan tanda centang pada activated javascript ). Lihat gambar dibawah.
  6. Coba lagi dengan mengklik salah satu tab.
  7. Maka berita akan ditampilkan tanpa animasi loading (without AJAX) dari file fallback.php

Okay, silahkan berkreasi dengan AJAX :) Happy AJAX-ing :)
Hal yang juga menarik:

Hak Cipta

Semua skrip dan teknik dalam artikel di itx.web.id boleh digunakan sebagaimana kehendakmu tanpa perlu mencantumkan sumber. Kamu tidak boleh mengkopi seluruh artikel, dalam Bahasa Indonesia ataupun diterjemahkan ke dalam bahasa lain.

Pencarian ke sini:

This post is also available in: English


Related Articles:

: PHP

About the author

obviously, a girl. with sweet smile, off course. turning her 21 years trapped on Informatics departement and just started to having some crush with it lately. she uses wordpress. she loves php. she lo

7 Comments

  • belalangtue says:

    makasih om,,mau nanya nih om,? klo bikin tampilan profil user gimana y om,?
    seandainya gini,?

    kita dah buat form pendaftaran user,login n logoutnya,,disitu tersedia layanan public tanpa login, user harus login, admin udh pasti login,
    kemuadian setiap user yg login akan tampil profilnya di halaman profil punya user itu sendiri,? itu gimana buatnya y om,? mohon pencerahannya y om,,,,,

  • herik says:

    (heart) (heart_beat) (doh) (angry) (annoyed) (applause) (banana_ninja)

  • ardhan says:

    mba, mw tanya, cara membuat skrip ajax yang akan me-retrieve data RSS dari CNN, gimana?

    mohon bantuannya. :-D

  • Ahma Indraki says:

    Asyik nich inponya. tinggal edit2 biar lebih menarik. (banana_cool)

  • Ahmad Taufiq says:

    script ajaxnya ada kelemahan gan,
    function handleOnClick(index) {
    var tabId = “tab” + index;
    document.getElementById(tabId).setAttribute(‘class’, ‘activeTab’);
    if (index != 1) {
    document.getElementById(“tab” + 1).setAttribute(‘class’, ‘tab’);
    }
    if (index != 2) {
    document.getElementById(“tab” + 2).setAttribute(‘class’, ‘tab’);
    }
    var url = “http://localhost/helloMobile/getNews”+index+”.php”;
    fungsi ajax tersebut berfungsi jika 2 halaman getNews tersebut dipanggil (ditampilkan )semua dalam halaman index, akan tetapi jika hanya 1 saja yang ditampilkan dalam index, ajaxnya tidak berfungsi.
    mohon solusinya dari momod ….
    thanks before

  • mpuskita says:

    min kenapa tidak bisa memanggil file gif nya, dan isi dari news nya?? mohon pencerahannya.

Leave a Reply

Your email address will not be published. Required fields are marked *