Mobile Web

Piranti bergerak atau mobile sudah sangat lekat dengan kehidupan kita sekarang ini, mulai dari tablet, smartphone, sampai ponsel biasa juga bisa akses ke internet, yang membuat kebutuhan untuk web versi mobile juga akan meningkat(pendapat pribadi saya). Akhir-akhir ini saya sedang tertarik untuk satu topik ini, Mobile Web..hmm bagaimana kalau kita belajar bersama tentang programming web untuk piranti mobile?

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

CodeIgniter dan ExtJS (5) – End

Kita lanjutkan ke tahap selanjutnya, yaitu untuk Create, Update, Delete yang sekaligus seri terakhir dari CI + ExtJs ini. Pertama kita menyiapkan dari sisi server dahulu, kita akan menambahkan script pada Model dan Controller.
Tambahkan baris program berikut pada phonebook_model.php method insert, update, dan delete yang sudah kita siapkan sebelumnya,

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

CodeIgniter dan ExtJS (4)

Sekarang kita masuk ke bagian presentasi antar muka aplikasi yaitu dengan menggunakan ExtJs. pada bagian ini kita akan menampilkan data yang kita dapatkan dari server ke dalam bentuk grid. Komunikasi ke server akan kita lakukan dengan menggunakan Ajax dan kita akan berkomunikasi dengan Controller di server.

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)

CodeIgniter dan ExtJS (3)

Oke, mari kita lanjutkan untuk menyelesaikan aplikasi sederhana ini. Maaf jika terlalu lama update dikarenakan kesibukan yang tidak bisa ditinggalkan..

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

CodeIgniter dan ExtJS (2)

Baiklah untuk meneruskan dari artikel terdahulu, sekarang kita akan membuat desain antar muka aplikasi sederhana yang akan kita  bangun. Seperti kita sepakati sebelumnya, desain antar muka aplikasi akan kita buat dengan menggunakan ExtJS. Berikut tampilan antar muka aplikasi 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.

CodeIgniter dan ExtJS (1)

Salam hangat buat teman-teman semuanya.. baru sempat update blog lagi neh..
Oke baiklah sekarang kita bahas pembicaraan tentang judul artikel kali ini yang mana sudah mulai memasuki yang namanya pemrograman, coding dan kawan-kawannya. Kita bahas satu persatu saja,

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

Hello World!

Hello World! Kata pertama yang terkenal saat kita belajar bahasa pemrograman dan kata ini juga yang menjadi pembuka blog ini. Latihan Pemrograman adalah blog saya yang rencananya akan berisikan latihan-latihan kecil yang saya pernah kerjakan, dasar-dasar pemrograman atau tips dan trik yang pernah saya kerjakan.

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