Kategori
PHP

Get the Data from Database with Codeigniter and Show it with JQuery UI Tab

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,

[sourcecode language=”php”]
<?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();
}
}
}
?>
[/sourcecode]

2. Save with the name book_model.php save into system-application-models.

D. Controller
1. Type the following script,

[sourcecode language=”php”]
<?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() );
}
}
?>
[/sourcecode]

2. Save with the name book_con.php save into system-application-controllers.

E. View
1. Type the following script,

[sourcecode language=”php”]
<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>
[/sourcecode]

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,

[sourcecode language=”javascript”]
$( 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" );
}
});

});
[/sourcecode]

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

[sourcecode language=”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;
}
[/sourcecode]

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 😀