Presentation1

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

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

 Sebelum itu download Codeigniter dan EXTJs
 Buat struktur seperti ini

 Kita buat databasenya di phpmyadmin
CREATE 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 phonebook
function 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 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);
};

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

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

 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
{
}
}

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);
}
else
{
}
}

private function pb_delete()
{
$id = $this->input->post('id');
if (!is_null($id))
{
$this->phonebook->delete($id);
}
else
{
}
}

Presentation1

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Presentation1

Similar to Presentation1 (20)

Recently uploaded

Recently uploaded (20)

Presentation1