Menampilkan Data dari Database dengan CodeIgniter + AJAX dalam Template JQuery UI

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,

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,

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,

    
	
    


 Book & Member List
Book List
Member List

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 

Happy coding 
Hal yang juga menarik:

Posted in: Pemograman,Tutorial