Studi Kasus : Membaca data dari database, menampilkan dalam JQuery UI Tab dengan AJAX.
Kebutuhan : Webserver package already installed.
File Download: 1. CodeIgniter. 2. JQuery. 3. JQuery UI Kalau belum pernah menggunakan UI ini, download saja tema yang sudah ada tanpa customize dulu. 4. Mic JQuery Template Plugin.
Skill khusus : PHP. Codeigniter.

A. Mempersiapkan Database
1. Buat database dengan nama db_tutorial.
2. Buat tabel dengan nama tb_book, dengan struktur tabel dibawah ini,

3. Insert-kan beberapa sample data dalam tb_book.
4. Buat tabel lagi dengan nama tb_member, dengan struktur tabel dibawah ini,

5. Insert-kan beberapa sample data dalam tb_member.
6. Okay, done with database.

B. Mempersiapkan folder kerja dan file – file yang dibutuhkan.
1. Persiapkan folder dengan nama ci_tutor dalam document root anda.
2. Ekstrak codeigniter dalam folder yang baru saja dibuat (disini file user_guide dalam CI saya hapus), dan atur config nya meliputi base_url, serta konfigurasi database dalam system-application-config-database.php
3. Buat tabel dengan nama cssjs, kemudian taruh file JQuery (file download 2) JQuery UI (hasil download file 3 : saya memilih template flickr), dan file Mic JQuery Template Plugin (file 4) ke dalam folder cssjs.
4. Struktur folder ci_tutor adalah seperti ini,

5. Struktur folder cssjs adalah seperti ini,

C. Model
1. Kita akan membuat model yang akan mengambil seluruh data yang ada dalam tb_book dan tb_member. Ketikkan script dibawah ini,

<?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();
        }
    }
}
?>

2. Simpan dengan nama book_model.php dan simpan dalam system-application-models.

D. Controller
1. Ketikkan script dibawah ini,

<?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() );
	}
}
?>

2. Simpan dengan nama book_con.php dan simpan dalam system-application-controllers.

E. View
1. Ketikkan script dibawah ini,

<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>

2. Simpan dengan nama book_view.php dan simpan dalam system-application-views.

F. Membuat file Javascript yang akan membaca record tabel dari server dengan AJAX.
1. Ketikkan script dibawah ini,

$( 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" );
        }
    });

});

2. Simpan dengan nama all.js dan simpan dalam folder cssjs.

G. Mengatur tampilan
1. Ketik script berikut ini dan simpan dengan nama style.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;
}

H. Testing code
1. Pergi ke browser, dan jalankan http://localhost/ci_tutor/index.php/book_con/
2. Jika sukses, anda akan melihat tampilan di bawah ini.

3. Klik pada tab Member List, maka akan ditampilkan data member dari dalam tb_member

4. Silahkan berkreasi dengan JQuery UI yang lain :D

Happy coding :D
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

5 Comments

Leave a Reply

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