Kategori
PHP

Get the Data from Database with Codeigniter and Show it with JQuery UI Tab

Studi Kasus : Read data from the database, show it in the JQuery UI Tab with AJAX.
Kebutuhan : Webserver package already installed.
File Download: 1. CodeIgniter. 2. JQuery. 3. JQuery UI If you’ve never used this UI, just download a theme that already exist without the customized first. 4. Mic JQuery Template Plugin.
Special Skill : PHP. Codeigniter.

A. Prepare the Database
1. Create a database with the name db_tutorial.
2. Create a table named tb_book, with the structure of the table below,

3. Insert some sample data into tb_book.
4. Again create a table named tb_member, with the structure of the table below,…

5. Insert some sample dta into tb_member.
6. Okay, done with database.

B. Prepare job folders and files – the files needed.
1. Prepare a folder with the name ci_tutor in your document root.
2. CodeIgniter extract in the folder you just created (here user_guide file in my CI delete), and set its cover base_url config, as well as the configuration database in system-config-application-database.php
3. Create a table named cssjs, then put your jQuery file (download file 2) jQuery UI (the downloaded file 3: I choose the template flickr), and files Mic jQuery Plugin Template (file 4) into the folder cssjs.
4. Ci_tutor folder structure is like this,

5. The cssjs folder’s structure is like picture below,

C. Model
1. We will create a model that will take all the data available in tb_book and tb_member. Type the following script,

[sourcecode language=”php”]
<?php
class Book_model extends Model {

public function getBook() {
$query = $this->db->get( ‘tb_book’ );
if( $query->num_rows() > 0 ) {
return $query->result();
} else {
return array();
}
}

public function getMember() {
$query = $this->db->get( ‘tb_member’ );
if( $query->num_rows() > 0 ) {
return $query->result();
} else {
return array();
}
}
}
?>
[/sourcecode]

2. Save with the name book_model.php save into system-application-models.

D. Controller
1. Type the following script,

[sourcecode language=”php”]
<?php
class Book_con extends Controller {
public function __construct() {
parent::__construct();
$this->load->model(‘book_model’);
}
public function index() {
$this->load->view(‘book_view’);
}
public function readBook() {
echo json_encode( $this->book_model->getBook() );
}
public function readMember() {
echo json_encode( $this->book_model->getMember() );
}
}
?>
[/sourcecode]

2. Save with the name book_con.php save into system-application-controllers.

E. View
1. Type the following script,

[sourcecode language=”php”]
<html>
<head>
<title>ITX.WEB.ID</title>
<base href="<?php echo base_url(); ?>" />
<link type="text/css" rel="stylesheet" href="cssjs/flick/jquery-ui-1.8.2.custom.css" />
<link type="text/css" rel="stylesheet" href="cssjs/styles.css" />
</head>
<body>
<center><h2> Book & Member List</h2></center>
<div id="tabs">

<ul>
<li><a href="#read">Book List</a></li>
<li><a href="#read2">Member List</a></li>
</ul>

<div id="read">
<table id="tabel"></table>
</div>

<div id="read2">
<table id="tabel2"></table>
</div>

</div>

<script type="text/javascript" src="cssjs/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="cssjs/jquery-ui-1.8.2.min.js"></script>
<script type="text/javascript" src="cssjs/jquery-templ.js"></script>

<script type="text/template" id="readTemp">
<tr>
<td>${id}</td>
<td>${title}</td>
<td>${author}</td>
</tr>

</script>

<script type="text/template" id="readTemp2">
<tr>
<td>${no}</td>
<td>${name}</td>
<td>${address}</td>
</tr>

</script>

<script type="text/javascript" src="cssjs/all.js"></script>
</body>
</html>
[/sourcecode]

2. Save with the name book_view.php save into system-application-views.

F. Create Javascript file that will read table records from sever with Ajax.
1. Type the following script,

[sourcecode language=”javascript”]
$( function() {
$( ‘#tabs’ ).tabs({
fx: { height: ‘toggle’, opacity: ‘toggle’ }
});

$.ajax({
url: ‘index.php/book_con/readBook’,
dataType: ‘json’,
success: function( response ) {
$( ‘#readTemp’ ).render( response ).appendTo( "#tabel" );
}
});

$.ajax({
url: ‘index.php/book_con/readMember’,
dataType: ‘json’,
success: function( response ) {
$( ‘#readTemp2’ ).render( response ).appendTo( "#tabel2" );
}
});

});
[/sourcecode]

2. Save with the name all.js and save into cssjs folder.

G. Arrange the view
1. Type the following script and save with the name style.css

[sourcecode language=”css”]
body {
font-family: Arial, Helvetica, sans-serif;
}

#tabs {
font-size: .9em;
margin: 0 auto;
width: 800px;
}

.ui-widget-content {
font-size: .8em;
}

#tabel, #tabel2 {
font-size: 1.3em;
width: 100%;
}

#tabel tr:nth-child(2n) {
background: #EAEAEA;
}

#tabel tr:hover {
background: #CCCCCC;
}

#tabel td {
padding: 6px;
margin: 8px;
}
[/sourcecode]

H. Testing code
1. Go to the browser, and run http://localhost/ci_tutor/index.php/book_con/
2. If successful, you will see picture below.

3. Click on the Member List tab, so it will display member data from tb_member.

4. Be creative with another Jquery UI 😀

Happy coding 😀

Kategori
PHP

Tutorial to Create Simple Tabs-AJAX with AJAX and PHP

Case Study : Create Simple Ajax Application (Ajax Tabs) with PHP
Requirements : Webserver Package, already installed.

Step 1 : Make Work Folder Structure

  1. Create a folder named simpleajax in your documentroot.
  2. Save this gif file below in simpleajax folder (save gif with : right-click and save as). This image used for loader animation, that is image that will showed when doing ajax transactions.
  3. Save all this file in this tutorial on this folder.

Step 2 : Create Index File

  1. Type the following script,
    [sourcecode language=”php”]
    <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>
    [/sourcecode]
  2. Save with name index.php
  3. Explanation : Index.php is the main file in this application. The most important for implementing Ajax is in rows 9-14. Each tab has a link on each – each a value attribute href and the onclick event handler, as in the script below,
    [sourcecode language=”php”]<a href="fallback1.php" id="tab1" class="tab" onclick="return handleOnClick(1);"> News 1</a>[/sourcecode]

    In this case, AJAX initialized when user activated the tab by clicking on it.
    When successfully executed AJAX transactions = handleOnClick function () returns false so that it will cancel the click event. AJAX and then control the process of updating the document and the href is not followed.
    When the AJAX transaction failed (XMLHttpRequest object can not be diinstansiasi, in other words, the browser does not support AJAX) = handleOnClick Function returns true and the href is followed, navigate the document in a new document pages (ie fallback pages).

    Why application provides each onClick event handler and a href URLs for each tab?

    This is to overcome if the browser of the device that is used does not support AJAX. So if the device supports AJAX, AJAX transaction to display the contents will be done . However, if not support, the news still displayed but with the lead the new web page (fallback page) contains the same news from the pages generated by the transaction AJAX.

Step 3 : Create ajax.js File

  1. Type the following script,
    [sourcecode language=”javascript”]
    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;
    }
    [/sourcecode]
  2. Save with the name ajax.js
  3. Penjelasan : The primary key of AJAX is the XMLHttpRequest object. The object lies in the browser so that each browser has its own way to create the object. Function getXHR() on ajax.js script above is a function to create an instance of the XMLHttpRequest (XHR), which will be used in AJAX (Note: for IE, ajax support via ActiveX objects, rather than XHR). updateContent function() is a function that will update content of the tab via AJAX, this function will returns true if the AJAX transaction succeeded, and false if it fails.
    After that the function will create a Http get request and check the progress of the update with the onreadystatechange event. onreadystatechange event to run 3 things,

    a. If the asynchronous web request is in progress, then the loading animation will be displayed.
    b. If the AJAX request completed, then the body of the response will be used as web content of the element.
    c. If the AJAX request terminated with an error, the error will be displayed on the user, ie “Could not retrieve data”

    Transactions using the document.getElementById and element.innerHTML AJAX to update the dynamic parts of the document (in this case is the news as a dynamic part of the web).

    Function handleOnClick () is a function of event handler when the tab is clicked. This function uses the parameter index, according to the index of the tab is clicked by the user. This function will update the styling of tabs (to distinguish active tabs and inactive) and update the contents of the div content. The contents of the div content is news files according to the tab the user clicked. Content is obtainable from URL var url = “http://localhost/simpleajax/getNews” + index + “.php”;
    So the script is going to retrieve a page from getNews (index) using AJAX, in accordance with the index of the tab is clicked by the user.

Step 4 : Create get News File

  1. Type the following script,
    [sourcecode language=”php”]
    <?php
    sleep(2);
    echo "News 1";
    echo "Ini adalah isi berita 1";
    ?>
    [/sourcecode]
  2. Save with the name getNews1.php
  3. Then type the following script,
    [sourcecode language=”php”]
    <?php
    sleep(2);
    echo "News 2";
    echo "Ini adalah isi berita 2";
    ?>
    [/sourcecode]
  4. Save with the name getNews2.php
  5. Explanations : Two of these files is the original link (which is executed via AJAX) from the first and second tabs (tab berindex 1 and 2). So getNews1.php and getNews2.php will be executed when the user clicks on the tab index 1 and 2, and the browser used supports AJAX.

Step 5 : Create the fallback File

  1. Type the following script,
    [sourcecode language=”php”]
    <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>
    [/sourcecode]
  2. Save with the name fallback1.php
  3. Then type the following script,
    [sourcecode language=”php”]
    <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>
    [/sourcecode]
  4. Save with the name fallback2.php
  5. Explanation : File fallback1.php and fallback2.php a static webpage files that will be executed when user clicks on the tab index 1 and 2, and the browser used does NOT support AJAX. So the news is still displayed but in a different way (not using AJAX).

Step 6 : Testing Code

  1. Go to http://localhost/simpleajax/
  2. Then index.php file will be showed, like the picture below,
  3. Click on one tab, so of the browser supports AJAX, loader animation will be showed. See picture.
  4. After the loading done, maka isi dari tab tersebut akan ditampilkan (dari getNews.php)
  5. Try to turnoff AJAX support in the browser (that is with non-activated javascript browser – For Firefox, it is with tools – options – content – remove the check mark on activated javascript ). See picture below.
  6. Try again with click on another tab.
  7. The news will be showed without loader animation (without AJAX) from fallback.php

Okay, be creative with AJAX 🙂 Happy AJAX-ing 🙂

Kategori
PHP

Tutorial Membuat AJAX-Tab Sederhana dengan AJAX dan PHP

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,
    [sourcecode language=”php”]
    <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>
    [/sourcecode]
  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,
    [sourcecode language=”php”]<a href="fallback1.php" id="tab1" class="tab" onclick="return handleOnClick(1);"> News 1</a>[/sourcecode]

    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,
    [sourcecode language=”javascript”]
    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;
    }
    [/sourcecode]
  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,
    [sourcecode language=”php”]
    <?php
    sleep(2);
    echo "News 1";
    echo "Ini adalah isi berita 1";
    ?>
    [/sourcecode]
  2. Simpan dengan nama getNews1.php
  3. Kemudian ketiikan script berikut,
    [sourcecode language=”php”]
    <?php
    sleep(2);
    echo "News 2";
    echo "Ini adalah isi berita 2";
    ?>
    [/sourcecode]
  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,
    [sourcecode language=”php”]
    <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>
    [/sourcecode]
  2. Simpan dengan nama fallback1.php
  3. Kemudian ketiikan script berikut,
    [sourcecode language=”php”]
    <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>
    [/sourcecode]
  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 🙂

Kategori
WordPress

Menggabungkan jQuery dan blog WordPress kita:

Tentunya kita sudah mengenal jQuery sebagai salah satu tool (biasa disebut JavaScript Library) untuk membuat interaksi website kita lebih oke dengan programming yang lebih simple dibanding javascript biasa. Sangat sesuai dengan slogannya yaitu write less do more. Untuk menambahkan fungsi jquery ke dalam halaman web kita, cara yang biasa dilakukan adalah menambahkan baris sbb:

<script type="text/javascript" src="/path/ke/file/jquery.js"></script>

Hal ini hanya jika file jquery.js kita taruh di hosting kita bersama-sama dengan file-file yang lain. Dalam contoh di atas terdapat pada folder /path/ke/file/ . File jquery.js ini dapat pula kita dapatkan tanpa perlu menaruhnya di hosting kita. Caranya adalah dengan menggunakan file yang dihost di g00gle misalnya:

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

atau bisa juga:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.4.2");
</script>

atau yang dihost di Micr0s0ft:

<script type="text/javascript"
src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>

Dengan ini kita tak perlu mendownload lalu menguploadnya ke hostingan kita. Mudah bukan?!

jQuery di WordPress

jQuery sudah dimasukkan dalam script standar WordPress tapi tidak dimuat secara default. Dengan kata lain library ini sudah termasuk dalam file instalasi WordPress. Untuk memuatnya kita perlu mengedit template WordPress kita sehingga memanggil fungsi wp_enqueue_script(), contohnya sbb:

<?php wp_enqueue_script('jquery') ?>

Fungsi itu bisa dipanggil berapa kalipun di halaman template manapun dan tak perlu takut akan dobel-dobel, karena WordPress cuma akan memuatnya satu kali saja. Jika kita tengok source hasil keluarannya akan nampak kurang lebih sbb:

<script type='text/javascript'
src='http://itx.web.id/wp-includes/js/jquery/jquery.js?ver=1.3.2'></script>

Baris itu akan otomatis tertampil di dalam tag <head> sesuai dengan halaman di mana script itu dipanggil dengan fungsi wp_enqueue_script() . Jika ingin tampil di semua halaman, panggil saja di halaman template header.php atau footer.php. Mudah bukan?! Selain jQuery core, WordPress (pada versi 2.9.2) juga menyertakan script lain yang dapat dipanggil dengan wp_enqueue_sript() yaitu:

Nama Script dipanggil dengan:
Scriptaculous Root scriptaculous-root
Scriptaculous Builder scriptaculous-builder
Scriptaculous Drag & Drop scriptaculous-dragdrop
Scriptaculous Effects scriptaculous-effects
Scriptaculous Slider scriptaculous-slider
Scriptaculous Sound scriptaculous-sound
Scriptaculous Controls scriptaculous-controls
Scriptaculous scriptaculous
Image Cropper cropper
SWFUpload swfupload
SWFUpload Degarade swfupload-degrade
SWFUpload Queue swfupload-queue
SWFUpload Handlers swfupload-handlers
jQuery jquery
jQuery Form jquery-form
jQuery Color jquery-color
jQuery UI Core jquery-ui-core
jQuery UI Tabs jquery-ui-tabs
jQuery UI Sortable jquery-ui-sortable
jQuery UI Draggable jquery-ui-draggable
jQuery UI Droppable jquery-ui-droppable
jQuery UI Selectable jquery-ui-selectable
jQuery UI Resizable jquery-ui-resizable
jQuery UI Dialog jquery-ui-dialog
jQuery Interface interface
jQuery Schedule schedule
jQuery Suggest suggest
ThickBox thickbox
jQuery Hotkeys jquery-hotkeys
Simple AJAX Code-Kit sack
QuickTags quicktags
ColorPicker colorpicker
Tiny MCE tiny_mce
Prototype Framework prototype
Autosave autosave
WordPress AJAX Response wp-ajax-response
List Manipulation wp-lists
WP Common common
WP Editor editor
WP Editor Functions editor-functions
AJAX Cat ajaxcat
Admin Categories admin-categories
Admin Tags admin-tags
Admin custom fields admin-custom-fields
Password Strength Meter password-strength-meter
Admin Comments admin-comments
Admin Users admin-users
Admin Forms admin-forms
XFN xfn
Upload upload
PostBox postbox
Slug slug
Post post
Page page
Link link
Comment comment
Admin Gallery admin-gallery
Media Upload media-upload
Admin widgets admin-widgets
Word Count word-count
WP Gears wp-gears
Theme Preview theme-preview

Enaknya lagi,  jika kita memanggil suatu script yang tergantung pada script lain, maka otomatis semua dependencies akan dipanggil. Misalnya kita memanggil jQuery UI Dialog yang hanya bisa berjalan dengan adanya script jQuery dan jQuery UI Core  dengan menggunakan fungsi sbb:

<?php wp_enqueue_script('jquery-ui-dialog') ?>

Maka kita tak perlu lagi memanggil script jQuery ataupun jQuery UI Core karena keduanya otomatis terpanggil. Mudah bukan?!

Menggunakan jQuery di WordPress

Misalnya kita akan membuat suatu link berubah warna jika mouse dihover di atasnya, lalu warnanya memudar secara perlahan jika mouse ditarik keluar. Hasilnya dapat dilihat di theme Albizia pada link di bagian navigasi, sidebar, dan footer. Scriptnya sbb:

$(function(){
  $('#sidebars a,#footbar a,#menu a').hover(
     function(){$(this).stop().animate({'color':'red'},20)},
     function(){$(this).stop().animate({'color':'white'},500)})
});

Script tersebut, jika dijalankan  pada halaman web pada umumnya, maka akan jalan, tapi tidak di WordPress. Karena library jQuery yang dipanggil oleh WordPress menggunakan mode “no conflict”. Hal ini diperlukan oleh WordPress untuk menghindari konflik dengan library-library lain yang mungkin juga menggunakan shortcut tanda ‘$’. Agar kita bisa menggunakan shortcut ‘$’ untuk jQuery, kita bisa menggunakan wrapper sbb:

jQuery(document).ready(function($) {
    // $() bisa digunakan sebagai alias dari jQuery() di dalam fungsi ini
});

Wrapper tersebut akan membuat script dalam fungsi tersebut dieksekusi setelah halaman selesai dimuat. Jika oleh karena satu dan lain hal kita ingin script dieksekusi segera (tanpa menunggu DOM ready), maka kita dapat memakai wrapper sbb:

(function($) {
    // $() bisa digunakan sebagai alias dari jQuery() di dalam fungsi ini
})(jQuery);

Jadi kita akan melihat script berikut dapat dijalankan di WordPress dengan benar:

(function($) {
  $(function(){
    $('#sidebars a,#footbar a,#menu a').hover(
       function(){$(this).stop().animate({'color':'red'},20)},
       function(){$(this).stop().animate({'color':'white'},500)})
  });
})(jQuery);

Mudah bukan?!