Presentation1

Rahadyan Dharmaparayana Gusti (30210172)Suslianto Hadi Saputra (30210213)Ayu Ekarani Swanditha (30210178)

Apa itu Ext JS??

Ext JS adalah librari Javascript yang membuat tampilan aplikasi web menjadi desktop aplikasi.

Librari extjs

Librari extjs adalah librari JavaScript yang dikembangkan untuk memudahkan pembuatan user interface. Librari ini awalnya adalah extension dari librari Yahoo User Interface (YUI/yui), awalnya dikenal sebagai yui-ext (http://www.yui-ext.com).

extjs adalah nama baru dari yui-ext. extjs dikembangkan pertama kali oleh Jack Slockum, sebagai librari khusus dari yui.

Kini extjs bukanlah librari khusus untuk yui saja, tetapi merupakan librari JavaScript yang bisa digunakan oleh banyak librari dan framework lainnya, seperti JQuery, Prototype, atau Scriptaculous (extension dari Prototype).Kini pemrogram web dapat dengan mudah membuat tampilan aplikasi berbasis web. tampilan tidak seperti halaman HTML, tetapi lebih mirip seperti aplikasi berbasis Windows.

Kita dapat memiliki sebuah div atau iframe, yang dapat didrag (geser) atau diubah ukurannya (resize) dengan mudah. Kita juga dapat memiliki model menu seperti menu pada aplikasi Windows (menu bar atau pun toolbar); tanpa harus bersusah payah membuat program dengan JavaScript.Librari extjs sangat memudahkan kita untuk membuat tampilan, dan menggunakan teknik pemrograman AJAX, sehingga aplikasi berbasis web yang dihasilkan menjadi seperti aplikasi Windows pada umumnya.

http://www.yui-ext.com/

LisensiLibrari extjs ini memiliki lisensi:komersialopensource

Lisensi komersial memiliki skema harga berdasarkan jumlah pengembang web yang akan mengembangkan aplikasi dengan menggunakan extjs. Suatu perusahaan dapat membeli lisensi komersial ini, dari seharga $249 untuk 1 developer, $850 untuk 5 developer, dan sekitar $2000 untuk 25 developer.

Lisensi opensource LGPL disediakan oleh tim extjs, jika kita ingin mengembangkan aplikasi yang memanfaatkan librari ini, dan akan dilepaskan sebagai aplikasi opensource juga yang memiliki lisensi LGPL. Akan tetapi extjs juga bisa diperoleh secara cuma-cuma, apabil apabila aplikasi yang kita kembangkan ini digunakan secara komersial, tetapi kita sebagai developer tidak melakukan layanan dukungan atas aplikasi yang dihasilkan.Bagi yang ingin berjualan, extjs memungkinkan kita untuk menjadi reseller dari librari extjs ini. Ini peluang bagi yang ingin berjualan saja.

Sebelum itu download Codeigniter dan EXTJs

Buat struktur seperti ini

Membuat Phonebook

Kita buat databasenya di phpmyadminCREATE TABLE IF NOT EXISTS `phonebook` (ÌD` int(11) NOT NULL AUTO_INCREMENT,`NAME` varchar(255) NOT NULL,ÀDDRESS` 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 (ÌD`))

kemudian ubah konfigurasi pada application/config/database.php

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 phonebookfunction count(){

return $this->db->count_all('phonebook');}

}/* End of file phonebook_model.php *//* Location: ./application/models/phonebook_model.php */

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>

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 */

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

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

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

// grid untuk menampilkan dataPhonebook.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 gridPhonebook.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 ApplicationPhonebook.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);};

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

Contoh tampilan

Kembali ke phonebook_model.php pada folder moduleganti insert,update dan deletefunction 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');}

Berikut method pb_create, pb_update, dan pb_delete pada welcome.php pada folder viewprivate 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})'; }}

Presentation1

Technology

Transcript of Presentation1