Irnanto.com – Awalnya saya ingin membuat postingan mengenai pengenalan Ext JS, tetapi materinya belum saya siapakan dan source code yang sudah siap yaitu source code CRUD ExtJS. Jadi kali ini saya akan membahas mengenai Ext JS atau lebih tepatnya bagian Create, Read, Update, Delete. Untuk penjelasan lebih detailnya, saya akan menjelaskan di lain kesempatan, untuk postingan kali ini saya akan membahas penggunaan CRUD dan MVC pada Ext JS secara garis besarnya saja.
Tampilan grid tabel data mengajar di Ext js
Struktur File dan Folder Aplikasi MVC ExtJS
Ok langsung saja kita siapkan file-file dan folder-folder yang dibutuhkan seperti dibawah ini.
Struktur file dan folder mvc extjs
Folder aplikasiku2 merupakan folder induk yang menampung folder app, data, dan ext. Cukup dilihat hierarki folder dan filenya, saya rasa kalian sudah tau semua maksud dari penempatan file dan folder tersebut. Jika masih belum jelas, silahkan berkomentar yaa.
Struktur Tabel Database
Selain file dan folder seperti gambar disamping yang kita siapkan, kita juga membutuhkan sebuah database. Database yang saya gunakan dalam membuat aplikasi ExtJs ini adalah Oracle. Dalam satu database ini memiliki 3 tabel yaitu tabel dosen (field-nya : NIP dan NAMA), matakuliah (field-nya : KODE dan NAMA_MAKUL ), dan mengajar (field-nya : NIP_DOSEN dan KODE_MAKUL).
Di bawah ini gambaran struktur tabel yang digunakan dalam pembuatan aplikasi dosen mengajar yang menggunakan database oracle.
Database oracle – struktur tabel dosen
Tabel dosen memiliki dua field NIP dan NAMA, yang masing-masing memiliki type data varchar2. Primary key pada tabel dosen pada field NIP.
Database oracle – Struktur tabel matakuliah
Tabel matakuliah memiliki field KODE dan NAMA_MAKUL. Primary key pada tabel ini pada field KODE.
Database oracle – Struktur tabel mengajar
Tabel mengajar memiliki dua field yaitu : NIP_DOSEN dan KODE_MAKUL. Di tabel ini, field NIP_DOSEN dan KODE_MAKUL adalah primari key atau primary komposit. Field NIP_DOSEN adalah referensi dari NIP dari tabel dosen (constrain), sedangkan field KODE_MAKUL merupakan referensi dari KODE pada tabel matakuliah (constrain).
Ok, kita langsung membuat file pertama yaitu index.html. File index.html ini digunakan untuk menginclude style (ext-all.css), file Ext JS (ext-debug.js), dan file aplikasi (app.js). Ketik script seperti di bawah ini
<html>
<head>
<title>Dosen Mengajar – irnanto.com</title>
<link rel=”stylesheet” type=”text/css” href=”ext/resources/css/ext-all.css”>
<script type=”text/javascript” src=”ext/ext-debug.js”></script>
<script type=”text/javascript” src=”app.js”></script>
</head>
<body></body>
</html>
Selanjutnya Buat file app.js dan ketikkan skrip seperti di bawah ini
Ext.application({
requires: [‘Ext.container.Viewport’],
name: ‘AM’,
appFolder: ‘app’,
controllers: [
‘Users’
],
views: [
‘user.List’
],
launch: function() {
Ext.create(‘Ext.container.Viewport’, {
layout: ‘fit’,
items: {
xtype: ‘userlist’
}
});
},
});
File app.js digunakan untuk membuat aplikasi yang di dalamnya memanggil container viewport, memiliki properti name (nama aplikasi), appFolder (folder aplikasi), controllers (kontroller yang digunakan), views (tampilan yang digunakan), dan menjalankan fungsi menggunakan launch. di dalam fungsi tersebut dibuat sebuah container viewport yang memiliki properti layout:fit dan items berupa xtype:userlist yang di ambil dari view list.
Buatlah file model Dosen, Matakuliah dan User seperti di bawah ini. Source code yang di buat berurutan dari Dosen.js, Matakuliah.js, dan User.js. File-file model digunakan untuk membuat field-field inisialisasi sebagai penampung data yang digunakan pada store.
Dosen.js
Ext.define(‘AM.model.Dosen’, {
extend: ‘Ext.data.Model’,
fields: [‘nip’,’nama’]
});
Matakuliah.js
Ext.define(‘AM.model.Matakuliah’, {
extend: ‘Ext.data.Model’,
fields: [‘kode’,’matakuliah’]
});
User.js
Ext.define(‘AM.model.User’, {
extend: ‘Ext.data.Model’,
fields: [‘nip’, ‘nama’, ‘kode’, ‘matakuliah’, ‘nip_dosen’, ‘kode_makul’]
});
Selanjutnya membuat file Store yang digunakan untuk menyimpan data. File store yang dibuat Dosens.js, Matakuliahs.js, dan Users.js. Ikuti urutan pembuatannya sesuai dengan list pada folder store.
Dosens.js
Ext.define(‘AM.store.Dosens’, {
extend: ‘Ext.data.Store’,
model: ‘AM.model.Dosen’,
autoLoad: true,
proxy: {
type: ‘ajax’,
url : ‘/aplikasiku2/data/dosen_mengajar.php’,
extraParams:{
getdata:’dosen’
},
reader: {
type: ‘json’,
root: ‘dosen’,
successProperty: ‘success’
}
}
});
Matakuliahs.js
Ext.define(‘AM.store.Matakuliahs’, {
extend: ‘Ext.data.Store’,
model: ‘AM.model.Matakuliah’,
autoLoad: true,
proxy: {
type: ‘ajax’,
url : ‘/aplikasiku2/data/dosen_mengajar.php’,
extraParams:{
getdata:’matakuliah’
},
reader: {
type: ‘json’,
root: ‘matakuliah’,
successProperty: ‘success’
}
}
});
Users.js
Ext.define(‘AM.store.Users’, {
extend: ‘Ext.data.Store’,
model: ‘AM.model.User’,
autoLoad: true,
proxy: {
type: ‘ajax’,
url : ‘/aplikasiku2/data/dosen_mengajar.php’,
extraParams:{
getdata:’all’
},
reader: {
type: ‘json’,
root: ‘users’,
successProperty: ‘success’
}
}
});
Maksud dari source file store di atas adalah medefinisikan store dengan nama store yang terdapat pada petik pertama tiap file, dan meng-extend Ext.data.Store. Selain itu setiap store memiliki model masing-masing yang didefinisikan dengan nama model tiap-tiap strore. Autoload digunakan untuk menentukan apakah store akan di load atau tidak ketika dipanggil.Proxy digunakan oleh store untuk menangani loading dan penyimpanan data Model. Di dalam proxy ini terdapat type yang digunakan untuk menentukan cara pengambilan data. Url digunakan untuk menentukan file yang akan di load/diproses. extraParams digunakan untuk menyertakan parameter (contoh parameter yang dikirim di atas adalah getdata dengan value atau nilai yang berada setelah tanda titik dua “:”). render digunakan untuk merender data yang ditangkap. Render type ini digunakan untuk menagkap tipe data yang dikirimkan dan root adalah posisi pengambilan datanya. successProperty ini hanya properti penunjukan untuk penangkapan data sukses.
Selanjutnya kita buat file tampilannya sesuai dengan urutan pada volder view >user. Urutkan pembuatan file-nya mulai dari create.js, Edit.js, dan List.js. Isikan Kode-kode pada file tersebut seperti di bawah ini. File view ini digunakan untuk menentukan model penampilan data dan penempatan item-item di dalamnya, serta bisa di tambahkan fungsi-fungsi yang dapat dijalankan ketika event tertentu pada view tersebut.
create.js
Ext.define('AM.view.user.Create', {
extend: 'Ext.window.Window',
alias: 'widget.usercreate',
title: 'Create User',
layout: 'fit',
autoShow: true,
initComponent: function () {
this.items = [
{
xtype: 'form',
id: 'input',
items: [
{
xtype: 'combobox',
name : 'nip',
fieldLabel: 'Nama',
store:'Dosens',
displayField:'nama',
valueField:'nip'
},
{
xtype: 'combobox',
name : 'kode',
fieldLabel: 'Matakuliah',
store:'Matakuliahs',
displayField:'matakuliah',
valueField:'kode'
}
]
}
];
this.buttons = [
{
text: 'Save',
action: 'Create',
},
{
text: 'Cancel',
scope: this,
handler: this.close
},
];
this.callParent(arguments);
}
});Edit.js
Ext.define('AM.view.user.Edit', {
extend: 'Ext.window.Window',
alias: 'widget.useredit',
title: 'Edit User',
layout: 'fit',
autoShow: true,
initComponent: function() {
this.items = [
{
xtype: 'form',
id: 'input2',
items: [
{
xtype: 'hiddenfield',
name : 'nip_dosen',
},
{
xtype: 'hiddenfield',
name : 'kode_makul',
},
{
xtype: 'combobox',
name : 'nama',
fieldLabel: 'Nama',
store:'Dosens',
displayField:'nama',
valueField:'nip'
},
{
xtype: 'combobox',
name : 'matakuliah',
fieldLabel: 'Matakuliah',
store:'Matakuliahs',
displayField:'matakuliah',
valueField:'kode'
}
]
}
];
this.buttons = [
{
text: 'Save',
action: 'save',
},
{
text: 'Cancel',
scope: this,
handler: this.close
}
];
this.callParent(arguments);
}
});List.js
Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
title: 'All Users',
store: 'Users',
initComponent: function() {
this.buttons = [
{
text: 'Add',
action: 'create'
}
];
this.columns = [
{header: 'NIP', dataIndex: 'nip', flex: 1},
{header: 'Nama Dosen', dataIndex: 'nama', flex: 1},
{header: 'Kode Matakuliah', dataIndex: 'kode', flex: 1},
{header: 'Matakuliah', dataIndex: 'matakuliah', flex: 1},
{
text: 'Actions',
xtype: 'actioncolumn',
width: 50,
items: [
{
icon: 'ext/resources/ext-theme-classic/images/grid/group-by.gif',
tooltip: 'Edit',
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
var view = Ext.widget('useredit');
view.down('form').loadRecord(rec);
},
}, {
icon: 'ext/resources/ext-theme-classic/images/grid/drop-no.gif',
tooltip: 'Delete',
handler: function (grid, rowIndex, colIndex) {
show_confirm();
function show_confirm(){
var r = confirm("Are you sure you want to delete the record?");
var rec = grid.getStore().getAt(rowIndex);
var data=rec.data;
data.action='delete';
if (r == true){
Ext.Ajax.request({
type: 'ajax',
url: 'data/dosen_mengajar.php',
params: data,
success: function (response) {
var resp = Ext.decode(response.responseText, true);
Ext.Msg.alert('Info Berhasil', JSON.stringify(resp.msg));
}
});
grid.getStore().removeAt(rowIndex);
}else{
//alert("You pressed Cancel!");
}
}
}
}
]
}
];
this.callParent(arguments);
}
});Sekarang buat file Controller yaitu Users.js untuk mengontrol aplikasi yang dibuat menggunakan ExtJS. Silahkan ketik kode di bawah ini dalam file controller Users.js.
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
stores: [
'Users',
'Dosens',
'Matakuliah'
],
models: ['User','Dosen','Matakuliah'],
views: [
'user.List',
'user.Create',
'user.Edit'
],
init: function() {
this.control({
'viewport > userlist': {
itemdblclick: this.editMengajar
},
'viewport > userlist button[action=create]': {
click: this.createMengajar
},
'useredit button[action=save]': {
click: this.updateMengajar
},
'usercreate button[action=Create]': {
click: this.addMengajar
}
});
},
createMengajar: function (button) {
var view = Ext.widget('usercreate');
},
addMengajar: function (button) {
var win = button.up('window'),
form = win.down('form');
var obj = form.getValues();
obj.action = 'create';
Ext.Ajax.request({
type: 'ajax',
url: 'data/dosen_mengajar.php',
params: obj,
success: function (response) {
var resp = Ext.decode(response.responseText, true);
Ext.Msg.alert('Info Berhasil', JSON.stringify(resp.msg));
win.close();
}
});
},
editMengajar: function(grid, record) {
var view = Ext.widget('useredit');
view.down('form').loadRecord(record);
},
updateMengajar: function(button) {
var win = button.up('window'),
form = win.down('form');
var obj = form.getValues();
obj.action = 'edit';
Ext.Ajax.request({
type: 'ajax',
url: 'data/dosen_mengajar.php',
params: obj,
success: function (response) {
var resp = Ext.decode(response.responseText, true);
Ext.Msg.alert('Info Berhasil', JSON.stringify(resp.msg));
record = form.getRecord();
record.set(obj);
win.close();
}
});
this.getUsersStore().sync();
}
});Sekarang tinggal file service-nya saja yaitu file dosen_mengajar.php pada folder data. Isikan Kode-kode PHP di bawah ini di dalam file dosen_mengajar.php. File ini sebagai jembatan penghubung antara aplikasi dan database oracle. File ini juga digunakan untuk menampung data yang di ambil dari database dari hasil request dan di kembalikan ke aplikasi/respons
<?php
$host = 'localhost';
$user = 'irnanto';
$password = 'irnanto';
$port = '1521';//oracle
$koneksi = oci_connect($user, $password, $host) or die('koneksi mati');
if ($koneksi) {
switch ($_SERVER['REQUEST_METHOD']) {
case 'GET':
if ($_GET['getdata']) {
if($_GET['getdata']=='all'){
$query = oci_parse($koneksi, "select * from dosen inner join mengajar on dosen.nip=mengajar.nip_dosen inner join matakuliah on mengajar.kode_makul=matakuliah.kode");
oci_execute($query);
$data['success'] = true;
$data['users'] = array();
while ($hasil = oci_fetch_array($query)) {
$ambil['nip'] = $hasil['NIP'];
$ambil['nama'] = $hasil['NAMA'];
$ambil['kode'] = $hasil['KODE'];
$ambil['matakuliah'] = $hasil['NAMA_MAKUL'];
$ambil['nip_dosen'] = $hasil['NIP_DOSEN'];
$ambil['kode_makul'] = $hasil['KODE_MAKUL'];
array_push($data['users'], $ambil);
}
echo json_encode($data);
}elseif ($_GET['getdata']=='dosen') {
$query = oci_parse($koneksi, "select * from dosen");
oci_execute($query);
$data['success'] = true;
$data['dosen'] = array();
while ($hasil = oci_fetch_array($query)) {
$ambil['nip'] = $hasil['NIP'];
$ambil['nama'] = $hasil['NAMA'];
array_push($data['dosen'], $ambil);
}
echo json_encode($data);
}elseif ($_GET['getdata']=='matakuliah') {
$query = oci_parse($koneksi, "select * from matakuliah");
oci_execute($query);
$data['success'] = true;
$data['matakuliah'] = array();
while ($hasil = oci_fetch_array($query)) {
$ambil['kode'] = $hasil['KODE'];
$ambil['matakuliah'] = $hasil['NAMA_MAKUL'];
array_push($data['matakuliah'], $ambil);
}
echo json_encode($data);
}
}
break;
case 'POST':
$action = $_POST['action'];
switch ($action) {
case 'create':
$nip = $_POST['nip'];
$kode = $_POST['kode'];
header('Content-Type: text/javascript');
$data = oci_parse($koneksi, "INSERT INTO MENGAJAR (NIP_DOSEN, KODE_MAKUL) VALUES ('$nip', '$kode')");
if (oci_execute($data)) {
$output = '{"success" : true, "msg": "Data Berhasil ditambahkan"}';
} else {
$output = '{"success" : false, "msg": "Gagal menambah data. Pastikan data mengajar yang diisikan belum ada"}';
}
echo $output;
break;
case 'edit':
$nip = $_POST['nip_dosen'];
$nama = $_POST['nama'];
$kode = $_POST['kode_makul'];
$matakuliah = $_POST['matakuliah'];
header('Content-Type: text/javascript');
$data = oci_parse($koneksi, "UPDATE MENGAJAR SET NIP_DOSEN = '$nama', KODE_MAKUL = '$matakuliah' WHERE NIP_DOSEN = '$nip' AND KODE_MAKUL='$kode'");
if (oci_execute($data)) {
$output = '{"success" : true, "msg": "Data Berhasil dirubah"}';
} else {
$output = '{"success" : false, "msg": "Gagal merubah data. Pastikan data mengajar yang dirubah belum ada dalam list"}';
}
echo $output;
break;
case 'delete':
$nip = $_POST['nip'];
$kode = $_POST['kode'];
header('Content-Type: text/javascript');
$data = oci_parse($koneksi, "DELETE FROM MENGAJAR WHERE NIP_DOSEN = '$nip' AND KODE_MAKUL='$kode'");
if (oci_execute($data)) {
$output = '{"success" : true, "msg": "Data Berhasil dihapus"}';
} else {
$output = '{"success" : false, "msg": "Gagal menghapus data."}';
}
echo $output;
break;
}
break;
}
}
?>Hasil Output seperti di bawah ini
Tampilan grid tabel data mengajar di Ext js
Tampilan Add/create dosen mengajar
Tampilan pesan data berhasil ditambahkan di extjs
Tampilan edit data mengajar di Extjs
Tampilan dropdown combobox pemilihan data menggunakan ajax di Ext JS
Tampilan pesan data berhasil dirubah di ExtJS
Tampilan notifikasi confirm ketika data akan dihapus di ExtJS
Cukup panjang juga tutorial CRUD Extjs dengan model MVC (Model View Control). Nantikan update penjelasan lebih detailnya di halaman ini yaa. Untuk saat inisampai di sini dulu Tutorial MVC dan CRUD Ext JS. Lain waktu kita sambung lagi dengan tutorial Ext JS yang lainnya.
Merubah Warna Seleksi Teks Web Dengan CSS
source Code C++ Mengubah String Menjadi Integer
script javascript cara disable text selection
Mengatasi disk space hosting yang membengkak