Your SlideShare is downloading. ×
Presentation1
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Presentation1

306
views

Published on

anggota: …

anggota:
rahadyan d g
suslianto h s
ayu swandita

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
306
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Rahadyan Dharmaparayana Gusti (30210172) Suslianto Hadi Saputra (30210213) Ayu Ekarani Swanditha (30210178)
  • 2. Ext JS adalah librari Javascript yang membuattampilan aplikasi web menjadi desktop aplikasi.
  • 3.  Sebelum itu download Codeigniter dan EXTJs Buat struktur seperti ini
  • 4.  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
  • 5.  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 */
  • 6.  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>
  • 7.  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 */
  • 8.  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} ] ) });
  • 9. 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]] }),
  • 10. 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„});
  • 11. 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
  • 12. },{ 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) } ]});
  • 13. // 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,
  • 14. 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);};
  • 15. 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,
  • 16. 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);
  • 17.  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);}
  • 18.  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}); }}
  • 19. 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}); }}