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.

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

9 Comments

  • francesco says:

    Hello,
    your tutorial doesn’t work…
    When I click Book List or Member List, it’s doesn’t work. Nothing happen.

  • ya says:

    ga jalan program lo, boss.. , kasih sample nya yg bisa didownload donk, jadi ngasih tutorial gak nanggung2

  • kharisma says:

    nice tutorial, keep sharing (drinking)

  • Lukil says:

    di unggah aja mas biar gak binggung…

  • H.SINURAT says:

    maf ya mas… terus terang saya masih bingung sama sekali gunakan blog ini.
    tapi yang jelas saya sangat tertarik untuk ikut menulis. klau bisa diperjelas donk, trims

  • Бързи заеми и всички видове бързи кредити
    Сайт за бързи заеми и потребителски кредити в България
    Пари назаем до 24 часа с бърз кредит
    В този уеб сайт ще намерите списък на
    фирми предлагащи бърз заем,
    в които получавате парите до 24 часа, предложения за бърз потребителски кредит над 399 лв, както и актуални промоции , списък с офисите
    на компаниите по градове, микрокредити за малкия бизнес, удобен филтър
    за бързо намиране на най-добрата
    оферта, калкулатор, услуги с изцяло онлайн процес за кандидатстване и взимане на парите,
    полезна информация.

  • Example says:

    What i don’t understood is iff truth bee told
    how you are not really much more smartly-preferred than you might be right now.
    You’re verfy intelligent. You know thus considerably wioth regards to this matter, made me in my opinion consider iit from so many various angles.
    Its like men and women don’t seem to be involved except it is one thing to accomplish with Lady gaga!
    Your individual stuffs nice. Always take care of it up!

  • It’s amazing to pay a visit this web site and reading the views of all mates about this piece of writing, while
    I am also keen of getting know-how.

Leave a Reply

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

دانلود آهنگ خرید vpn خرید vpn