Untuk antar muka ada yang punya ide? Ada beberapa yang bisa jadi alternatif, seperti jQuery Mobile, Sencha Touch untuk piranti layar sentuh, dll. Mungkin saya lebih tertarik pada jQuery Mobile. Seperti biasa, akan saya buat berseri dan diakhir seri akan saya berikan link untuk mengunduh file lengkapnya, tapi saya harap Anda bisa mengikuti dari awal sehingga Anda sendiri bisa mengeksplor lebih banyak.

Mari kita belajar bersama..

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');
}

Kemudian untuk Controller, kita juga tambahkan baris program untuk memproses data yang dikirimkan oleh user, yang kemudian diteruskan ke Model untuk disimpan ke Database, tampilkan statusnya berhasil atau tidak. Berikut method pb_create, pb_update, dan pb_delete pada welcome.php

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})';
	}
}

private function pb_update()
{
	$id = $this->input->post('ID');
	$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 (!is_null($id) && !empty($data))
	{
		$this->phonebook->update($id, $data);
		echo '({"status":1})';
	}
	else
	{
		echo '({"status":0})';
	}
}

private function pb_delete()
{
	$id = $this->input->post('id');
	if (!is_null($id))
	{
		$this->phonebook->delete($id);
		echo '({"status":1})';
	}
	else
	{
		echo '({"status":0})';
	}
}

Terakhir kita tambahkan file home.js kita dengan baris program untuk menangani update, delete dan input data baru. Untuk lebih menghemat, saya jelaskan tambahan dari home.js tanpa baris programnya, Anda dapat mengunduhnya melalui link di bawah. Intinya, kita menambahkan fungsi-fungsi untuk menangani update, delete, create data, kemudian menyediakan window baru untuk input dan validasi data baru, menambahkan tombol Tambah dan Hapus.
Silahkan download di sini, aplikasi phonebook sederhana menggunakan CI + ExtJS.

Note: sesuaikan konfigurasi database dan yang lain sesuai dengan settingan di server Anda.

Berikut adalah file home.js yang berisi kode Javascript untuk membuat tampilan aplikasi kita. Disajikan per bagian untuk penjelasan dan disediakan file lengkap untuk dapat didownload.

Baris paling atas, kita mendefinisikan namespace (istilah saya, nama untuk pengelompokan object). ‘Phonebook’ untuk object umum, ‘Phonebook.fn’ untuk object fungsi, ‘Phonebook.data’ untuk object yang digunakan untuk mendefinisikan data.

Ext.ns('Phonebook','Phonebook.fn', 'Phonebook.data');

Selanjutnya kita definisikan DataStore. DataStore digunakan untuk me-load data dari database, pada DataStore ini didefinisikan nama kolom-kolom sesuain dengan table database kita.

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'}
		]
	)
});

Berikutnya, kita mendefinisikan editor data yang mana editor ini nantinya ditempelkan di grid, jadi grid yang kita gunakan untuk menampilkan data, juga kita gunakan untuk mengedit data (untuk menyimpan data dibagian berikutnya)

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']]
    }),
    mode: 'local',
    forceSelection: true,
    displayField: 'status',
    valueField: 'id',
    lazyRender:true,
    listClass: 'x-combo-list-small'
});

Phonebook.data.comboType = new fm.ComboBox({
    typeAhead: true,
    triggerAction: 'all',
    store:new Ext.data.SimpleStore({
 	   fields:['id', 'type'],
 	   data: [['0','Phone'],['1','Mobile']]
    }),
    mode: 'local',
    forceSelection: true,
    displayField: 'type',
    valueField: 'id',
    lazyRender:true,
    listClass: 'x-combo-list-small'
});

Kemudian kita perlu ColumnModel. ColumnModel mendefinisikan kolom-kolom dalam grid dan merelasikan dataIndex dengan name pada datastore sesuai data yang akan ditampilkan

Phonebook.data.columnModel = new Ext.grid.ColumnModel({
	defaults : {
		sortable: true
	}, columns : [
		{	header: 'ID', 
			dataIndex: 'ID',
			width: 30,
		},{	
			header: 'NAME', 
			dataIndex: 'NAME',
			width: 200,
			editor: Phonebook.data.txtName
		},{	
			header: 'ADDRESS', 
			dataIndex: 'ADDRESS',
			width: 290,
			editor: Phonebook.data.txtAddress
		},{	
			header: 'PHONE', 
			dataIndex: 'PHONE',
			width: 100,
			editor: Phonebook.data.txtPhone
		},{	
			header: 'TYPE', 
			dataIndex: 'TYPE',
			width: 75,
			editor: Phonebook.data.comboType,
			renderer: Ext.util.Format.comboRenderer(Phonebook.data.comboType)
		},{	
			header: 'STATUS', 
			dataIndex: 'STATUS',
			width: 75,
			editor: Phonebook.data.comboStatus,
			renderer: Ext.util.Format.comboRenderer(Phonebook.data.comboStatus)
		}
	]
});

Berikutnya adalah DataGrid untuk menampilkan data dalam bentuk grid dengan DataStore dan ColumnModel yang kita buat, kemudian menampilkan dalam Window yang akan ditampilkan ketika kita menekan menu.

// grid untuk menampilkan data
Phonebook.data.dataGrid = new Ext.grid.EditorGridPanel({
	store: Phonebook.data.dataStore,
	cm: Phonebook.data.columnModel,
	autoScroll: true,
	style: {padding: 5},
	id: 'merkGrid',
	selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),	
	bbar: new Ext.PagingToolbar({
        pageSize: 20,
        store: Phonebook.data.dataStore,
        displayInfo: true
    })
});

// window untuk menampung grid
Phonebook.fn.showData = function() {	
	// window data
	var windowData = new Ext.Window({
		title: 'Phonebook',
		closable:true,
		closeAction: 'hide',
		width:800,
		height:350,
		border: false,
		plain:true,
		modal: true,
		layout: 'fit',
		items: [Phonebook.data.dataGrid]
	});
	// load data ke dalam datastore
	Phonebook.data.dataStore.reload();
	windowData.show(this);
};

//untuk memunculkan window About Application
Phonebook.fn.showAbout = function() {
	var htmlAbout = '<div id="about-title">Application v0.1</div>';
	htmlAbout += '<div id="about-content">brief description about the application</div>'
	
	var windowAbout = new Ext.Window({
		title: 'About Application',
		closable:true,
		resizable: false,
		width:250,
		height:150,
		border: false,
		plain:true,
		layout: 'fit',
		padding: '3',
		html: htmlAbout,
		items: []
	});
	
	windowAbout.show(this);
};

Code berikut untuk membuat frame luar dan menu sebagai frame yang menampung object-object yang kita buat terdahulu.

Phonebook.app = function(){
	
	return {
		init: function(){
			// menu 
			var toolbar = new Ext.Toolbar({
				height: 30,
				items: [{					
					iconCls: 'menu',
					text: 'Applications',
					menu: new Ext.menu.Menu({
						items:[{
							text: 'Phonebook',
							handler: Phonebook.fn.showData
						}]
					})
				},'-',{
					iconCls: 'menu',
					text: 'Help',
					menu: new Ext.menu.Menu({
						items:[{
							text: 'About Aplication',
							handler: Phonebook.fn.showAbout
						}]
					})
				}]
			});
			
			// frame paling luar
			var viewport = new Ext.Viewport({
				layout:'border',
				items:[
					new Ext.BoxComponent({
						region: 'north',
						height: 25,
						autoEl: {
							tag: 'div',
							style: 'padding: 5px 10px; color: #ff0000;',
							html:'<p><b>PHONEBOOK</b></p>'
						}
					}),{
						region:'center',
						margins:'2 2 2 2',
						items: toolbar
					}
				]
			});
		}
	};
}();

Ext.onReady(Phonebook.app.init, Phonebook.app);

Untuk file lengkap home.js dapat didownload di sini.

Hasil tampilan aplikasi Phonebook kita :

Selamat mencoba

Kita mulai dari sisi server, saya menggunakan CodeIgniter 2.0. File PHP pertama kita adalah Model, berikut adalah 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 */

File Model ini adalah file yang kita gunakan untuk melakukan koneksi secara langsung ke database (ingat konsep MVC). Untuk tahap awal kita hanya menampilkan data phonebook terlebih dahulu, selanjutnya akan kita tambahkan dengan insert, update, delete data phonebook.

File selanjutnya adalah View, yang digunakan untuk menampilkan data. Berikut adalah file welcome_message.php

<!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>

File welcome_message.php terlihat sangat sederhana karena interface aplikasi akan kita tangani dengan javascript.

File ketiga di server kita punya Controller, berikut adalah file 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 */

File Controller adalah file yang diakses dari url, file ini yang melakukan penerimaan dan penyaringan permintaan dan kemudian menampilkan hasilnya dengan memanggil file View. Untuk tahap awal kita hanya menampilkan data, jadi fungsi yang digunakan adalah fungsi pb_get, sedangkan yang lain akan kita implementasi nanti.

Sekian untuk tahap 3, tahap selanjutnya adalah kita akan membuat file Javascript, yang menangani tampilan aplikasi Phonebook kita..

Tampilan Awal

Komponen yang kita gunakan adalah:

• Sebagai container/tameng luar tampilan kita menggunakan komponen Ext.Viewport, kenapa menggunakan komponen ini karena dengan Ext.Viewport kita bisa menempatkan komponen lain di dalamnya dengan membagi ke region(north, south, east, west) dengan mudah.
• Ext.Toolbar, kita gunakan untuk menampung semua toolbar seperti menu, dll.
• Ext.Panel dan Ext.Window untuk container menampilkan semacam pop up window yang nanti kita gabung dengan grid untuk menampilkan dan mengedit data.

Kemudian untuk struktur folder aplikasi kita sebagai berikut:

ini bertujuan supaya aplikasi yang kita jalankan sama sehingga ketika menunjuk ke suatu folder tidak salah nama dan tempatnya Sekedar keterangan folder extjs untuk menyimpan file ExtJS(semua file yang kita dapatkan dari men-downlaod dari ExtJS kita masukkan dalam folder ini), images untuk menyimpan file gambar, js untuk menyimpan file javascript yang kita buat sendiri.

Selanjutnya kita persiapkan database. Database yang kita gunakan adalah MySQL dan berikut DDL untuk table phonebook sederhana:

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`)
)

Jika sudah, kemudian silahkan Anda configurasi CI untuk bisa terkoneksi dengan database. Masukkan host, username, database di file application/config/database.php.

Okey, selanjutnya kita akan masuk ke bagian yang paling menyenangkan : Coding…

CodeIgniter(CI), apakah ada yang belum kenalan sama CI?? CI adalah sebuah Web Application Framework untuk PHP yang cukup terkenal karena menawarkan berbagai kemudahan bagi programmer PHP untuk membangun aplikasi web, juga karena banyaknya programmer yang sudah menggunakannya, maka dengan mudah kita menemukan berbagai macam tutorial dan tips yang bisa kita pelajari dan ambil sesuai dengan kebutuhan di aplikasi yang kita bangun. CI mengusung Model View Controller (MVC) – bagi yang belum paham apa itu MVC mohon googling mandiri .

Yang kedua ExtJS adalah Rich Internet Application Framework yang dasarnya adalah Javascript. ExtJS memudahkan kita untuk membangun desain antarmuka pengguna sehingga lebih mudah digunakan oleh pengguna. Dalam kasus ini, ExtJS akan menangani semua yang berurusan dengan tampilan antarmuka(front-end side) sedangkan untuk berhubungan dengan database(server side) kita menggunakan PHP dengan framework CI.

Baiklah untuk memulai latihan ini silahkan unduh CodeIgniter dan ExtJS terlebih dahulu, kemudian coba untuk pahami dasar penggunaannya secara mandiri. Untuk CI silahkan baca di user guide atau berbagai literatur internet yang lain, sedangkan untuk ExtJS silahkan eksplorasi contoh yang diberikan untuk memahami cara membuat komponen demi komponen desain antarmuka. Dalam artikel selanjutnya, kita langsung pada aplikasi CI dan ExtJS untuk membangun sistem pencatatan buku telepon sederhana. Selamat mencoba..

Semoga blog ini dapat bermanfaat bagi kita semua, selamat membaca..