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 :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.


Related Articles:

Artikel terkait:

: 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

1 Comment

Tinggalkan Balasan

Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

x( X-( B-) ;-) :wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :D :?: :-| :-x :-o :-P :-D :-? :-)) :-) :-( :-& :) :( :!: 8-O 8-) 8) (Русский) (yahoo) (worship) (woot) (wave) (unsure) (tongue) (thinking) (tears) (taser) (smileydance) (sleeping) (sick) (scenic) (rofl) (rock) (party) (panic) (okok) (nottalking) (ninja) (music) (muscle) (muhaha) (money) (mmm) (lonely) (lol) (lmao) (idiot) (hungry) (highfive) (heart_beat) (heart) (headspin) (hassle) (haha) (gym) (griltongue) (goodluck) (girlkiss) (funkydance) (fish_hit) (eyeroll) (evilsmirk) (evil_grin) (drinking) (doh) (devil) (dance) (cry) (cozy) (coffee) (brokenheart) (bringit) (blush) (bigeyes) (beer) (banana_rock) (banana_ninja) (banana_cool) (applause) (annoyed) (angry) (K) (: