Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Rahadyan Dharmaparayana Gusti (30210172)         Suslianto Hadi Saputra (30210213)         Ayu Ekarani Swanditha (30210178)
Ext JS adalah librari Javascript yang membuattampilan 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`    (`ID` int(11) NOT NULL    AUTO_INCREM...
   Kemudian masuk ke “model”, buat file phonebook_model.php    <?php    if ( ! defined(BASEPATH)) exit(No direct script a...
   Kemudian kita masuk ke View, ganti isi welcome_message.php menjadi seperti    ini:    <!DOCTYPE html><html lang="en"> ...
   Kemudian kita masuk ke Controller buat welcome.php    <?php    if ( ! defined(BASEPATH)) exit(No direct script access ...
   Kemudian kita buat home.js dimasukan ke folder js,    isinya:    Ext.ns(Phonebook,Phonebook.fn, Phonebook.data);    Ph...
var fm = Ext.form;    Ext.util.Format.comboRenderer = function(combo){    return function(value){        var record = comb...
mode: local,  forceSelection: true,  displayField: status,  valueField: id,  lazyRender:true,  listClass: x-combo-list-sma...
Phonebook.data.columnModel = new Ext.grid.ColumnModel({defaults : {      sortable: true  }, columns : [      { header: ID,...
},{              header: PHONE,              dataIndex: PHONE,              width: 100,              editor: Phonebook.dat...
// grid untuk menampilkan dataPhonebook.data.dataGrid = new Ext.grid.EditorGridPanel({    store: Phonebook.data.dataStore,...
modal: true,       layout: fit,       items: [Phonebook.data.dataGrid]     });     // load data ke dalam datastore     Pho...
Phonebook.app = function(){  return {     init: function(){        // menu        var toolbar = new Ext.Toolbar({         ...
handler: Phonebook.fn.showAbout                             }]                        })                   }]             ...
   Kembali ke phonebook_model.php pada folder module    ganti insert,update dan delete    function insert($data)    {    ...
   Berikut method pb_create, pb_update,    dan pb_delete pada welcome.php pada folder view    private function pb_create(...
private function pb_update(){   $id = $this->input->post(ID);   $data = array ("NAME" => $this->input->post(NAME),        ...
Presentation1
Presentation1
Presentation1
Upcoming SlideShare
Loading in …5
×

Presentation1

421 views

Published on

anggota:
rahadyan d g
suslianto h s
ayu swandita

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Presentation1

  1. 1. Rahadyan Dharmaparayana Gusti (30210172) Suslianto Hadi Saputra (30210213) Ayu Ekarani Swanditha (30210178)
  2. 2. Ext JS adalah librari Javascript yang membuattampilan aplikasi web menjadi desktop aplikasi.
  3. 3.  Sebelum itu download Codeigniter dan EXTJs Buat struktur seperti ini
  4. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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}); }}

×