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 code1. 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:
ref : http://itx.web.id/php/menampilkan-data-dari-database-dengan-codeigniter-ajax-dalam-template-jquery-ui/
Tidak ada komentar:
Posting Komentar