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,
<?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. Save with the name book_model.php save into system-application-models.
D. Controller
1. Type the following script,
<?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. Save with the name book_con.php save into system-application-controllers.
E. View
1. Type the following script,
<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. 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,
$( 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. 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
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. 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