2. Ext JS adalah librari Javascript yang membuat
tampilan aplikasi web menjadi desktop aplikasi.
3.
4.
5. Sebelum itu download Codeigniter dan EXTJs
Buat struktur seperti ini
6. Kita buat databasenya di phpmyadmin
CREATE TABLE IF NOT EXISTS `phonebook`
(`ID` int(11) NOT NULL
AUTO_INCREMENT,`NAME` varchar(255) NOT
NULL,`ADDRESS` varchar(255) NOT
NULL,`PHONE` varchar(20) NOT NULL,`TYPE`
tinyint(1) NOT NULL DEFAULT '0',`STATUS`
tinyint(1) NOT NULL DEFAULT '0',PRIMARY
KEY (`ID`))
kemudian ubah konfigurasi pada
application/config/database.php
7. Kemudian masuk ke “model”, buat file phonebook_model.php
<?php
if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Phonebook_model extends CI_Model {
function __construct(){
parent::__construct();
} // mengambil data phonebook
function get($start, $limit){
$rows = $this->db->get('phonebook', $limit, $start);
if ($this->count() > 0){
foreach ($rows->result() as $row){
$item = array('ID' => $row->ID,
'NAME' => $row->NAME,
'ADDRESS' => $row->ADDRESS,
'PHONE' => $row->PHONE,
'TYPE' => $row->TYPE,
'STATUS' => $row->STATUS);
$items[] = $item;
}
$data = json_encode($items);
return $data;
}
return NULL;
}
function insert($data){
}
function update($id, $data){
}
function delete($id){
} // menghitung jumlah data di table phonebook
function count()
{
return $this->db->count_all('phonebook');
}
}/* End of file phonebook_model.php *//* Location: ./application/models/phonebook_model.php */
8. Kemudian kita masuk ke View, ganti isi welcome_message.php menjadi seperti
ini:
<!DOCTYPE html><html lang="en">
<head><title>Welcome to CodeIgniter</title>
<link rel="stylesheet" type="text/css“ href="extjs/resources/css/ext-all.css" />
<style type="text/css" media="screen">
.menu {
background-image: url(images/preview.png) !important;
}
#about-title {
font-size:16px;
padding-bottom: 20px;
display:block;
}
#about-content {
border-top: 1px solid #ccc;
}
</style>
<script type="text/javascript">
var base_url = <?php echo '"'.base_url().'"„;?>;
</script>
</head>
<body>
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="js/home.js"></script>
</body>
</html>
9. Kemudian kita masuk ke Controller buat welcome.php
<?php
if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Welcome extends CI_Controller {
function __construct(){
parent::__construct();
$this->load->model('phonebook_model', 'phonebook'); }
function index(){
$this->load->view('welcome_message');
}
function task(){
switch ($this->input->post('task')) {
case 'get':
$this->pb_get();
break;
case 'create':
$this->pb_create();
break;
case 'update':
$this->pb_update();
break;
case 'delete':
$this->pb_delete();
break;
default:
break;
}
}
private function pb_get(){
$start = 0;
$limit = 10;
if ($this->input->post('start') && $this->input->post('limit')){
$start = $this->input->post('start');
$limit = $this->input->post('limit');
}
$cnt = $this->phonebook->count();
if ($cnt > 0){
$data = $this->phonebook->get($start, $limit);
echo '({"total":"'.$cnt.'", "results":'.$data.'})';
}
else{
echo '({"total":"0", "results":""})';
}
}
private function pb_create(){
;}
private function pb_update(){
;}
private function pb_delete(){
;}
}/* End of file welcome.php *//* Location: ./application/controllers/welcome.php */
10. Kemudian kita buat home.js dimasukan ke folder js,
isinya:
Ext.ns('Phonebook','Phonebook.fn', 'Phonebook.data');
Phonebook.data.dataStore = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : base_url + 'index.php/welcome/task/',
method: 'POST„
}),
baseParams:{task: "get"},
reader : new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total„
}, [
{name: 'ID', mapping: 'ID'},
{name: 'NAME', mapping: 'NAME'},
{name: 'ADDRESS', mapping: 'ADDRESS'},
{name: 'PHONE', mapping: 'PHONE'},
{name: 'TYPE', mapping: 'TYPE'},
{name: 'STATUS', mapping: 'STATUS'}
]
)
});
11. var fm = Ext.form;
Ext.util.Format.comboRenderer = function(combo){
return function(value){
var record = combo.findRecord(combo.valueField, value);
return record ? record.get(combo.displayField) :
combo.valueNotFoundText;
};
};
Phonebook.data.txtName = new fm.TextField({
allowBlank: false
});
Phonebook.data.txtAddress = new fm.TextField({
allowBlank: false
});
Phonebook.data.txtPhone = new fm.TextField({
allowBlank: false
});
Phonebook.data.comboStatus = new fm.ComboBox({
typeAhead: true,
triggerAction: 'all',
store:new Ext.data.SimpleStore({
fields:['id', 'status'],
data: [['0','Inactive'],['1','Active']]
}),
20. Kembali ke phonebook_model.php pada folder module
ganti insert,update dan delete
function insert($data)
{
$this->db->insert("phonebook", $data);
}
function update($id, $data)
{
$this->db->where('ID', $id);
$this->db->update('phonebook', $data);
}
function delete($id)
{
$this->db->where('ID', $id);
$this->db->delete('phonebook');
}
21. Berikut method pb_create, pb_update,
dan pb_delete pada welcome.php pada folder view
private function pb_create()
{
$data = array ("NAME" => $this->input->post('NAME'),
"ADDRESS" => $this->input->post('ADDRESS'),
"PHONE" => $this->input->post('PHONE'),
"TYPE" => $this->input->post('TYPE'),
"STATUS" => $this->input->post('STATUS')
);
if (!empty($data))
{
$this->phonebook->insert($data);
echo '({"status":1})';
}
else
{
echo '({"status":0})';
}
}