Yoo jumpa lagi
di di T-A_Blogz , kali ini mimin akan bahas tentang Bagaimana Membuat Applikasi
Web ExtJS dengan MVC Application Architecture.Baik langsung kita mulai saja ..
oke >,<
Disini mimin akan menjelaskan
sedikit tentang MVC. Apa itu MVC ?
MVC adalah singkatan dari Models, Views, and Controllers yang masing-masing
pengertiannya adalah sebagai berikut :
- Model : Model mewakili struktur data. Biasanya model berisi fungsi-fungsi yang membantu seseorang dalam pengelolaan basis data seperti memasukkan data ke basis data, pembaruan data dan lain-lain.
- View : View adalah bagian yang mengatur tampilan ke pengguna. Bisa di katakan berupa halaman web.
- Controller : Controller merupakan bagian yang menjembatani model dan view. Controller berisi perintah-perintah yang berfungsi untuk memproses suatu data dan mengirimkannya ke halaman web.
Itu adalah sedikit penjelasan tentang MVC , dan mengapa kita harus
menggunakan struktur yang MVC ? karena alur pemrograman yang menggunakan
MVC sudah terstruktur dengan baik dan sangat memudahkan kita dalam mengerjakan
project yang dibentuk tim, karena dengan menggunakan struktur MVC ini pasti
programmer yang satu tim dengan kita tidak akan kebingungan dengan alur
pemrograman yang kita buat, dan juga ada beberapa alasan yang sangat
menganjurkan kita untuk menggunakan MVC yaitu :
- Setiap application memiliki alur Bahasa pemrograman yang sama jadi kamu hanya perlu mempelajarinya sekali saja.
- Sangat mudah untuk berbagi listing code antara beberapa aplikasi yang menggunakan struktur MVC juga , karena memiliki alur kerja Bahasa pemrograman yang sama.
- Kamu bisa menggunakan tools yang disediakan dan bisa mengoptimasi versi mu sendiri untuk keperluan produksi.
- Dengan menggunakan metode MVC maka aplikasi akan lebih mudah untuk dirawat dan dikembangkan. Namum untuk memahami metode pengembangan aplikasi menggunakan MVC diperlukan pengetahuan tentang Objek Oriented Programming(OOP).
“Pengertian diatas adalah sedikit INTERMEZZO tentang MVC Application Structure, sekarang kita akan coba mempraktekan membuat web application dengan MVC Structure.”
Struktur
File
Di dalam tata letak/struktur
MVC , semua class ditaruh didalam folder app/ , dimana nanti akan ada subfolder
lagi yaitu controllers, models, views, dan stores. Dibawah ini adalah bagaimana
struktur file untuk simple applikasi yang menggunakan mvc :
Gambar 1. Struktur File MVC
Didalam contoh ini , kita men-encapsulating semua application
didalam folder “ext-mvc-user”. File yang penting dan diperlukan dari ExtJS 4
SDK ada didalam folder extjs/. Dan dibawah ini adalah listing code untuk file
index.html :
<html>
<head>
<title>MVC Application</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/ext-theme-neptune/ext-theme-neptune-all.css">
<script type="text/javascript" src="extjs/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
Didalam folder resources , taruh folder ext-theme-neptune yang sudah ada didalam folder documentasi extjs. Kalau belum ada download folder extjs yang saya pakai saja disini
Membuat
application di dalam file app.js
Setiap applikasi ExtJS 4 dimulai dengan menggunakan
Application class. Application meliputi global setting untuk aplikasi yang kamu
buat (contohnya adalah nama aplikasi), dan Application juga merupakan referensi
untuk models, stores, dan controllers yang digunakan oleh app. Sebuah
Application juga berfungsi sebagai launch function , yang nantinya akan
berjalan otomatis setelah semua selesai diload.
Oke mari kita buat simple MVC app yang akan membantu
kita untuk mengatur data user akun. Pertama kita harus mengambil nama global
untuk aplikasi ini. Semua ExtJS applications hanya boleh menggunakan satu
global variable, dengan semua class yang ada di dalam application ini. Pastinya
kita menginginkan nama global variable yang pendek dan mudah diingat kan ?? maka dari itu kita
akan menggunakan nama “ums” , dan dibawah ini adalah listing code untuk file
app.js :
Ext.application({
requires: ['Ext.container.Viewport'],
name: 'ums',
appFolder: 'app',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'panel',
title: 'Data Pengguna',
html : 'Nantinya data para pengguna/user akan tampil disini'
}
]
});
}
});
Gambar 2. Saat applikasi dijalankan
Membuat Controller
Sesuai dengan definisi Controller diatas dapat disimpulkan bahwa
Controller adalah perekat yang mengikat applikasi bersama-sama. Controller
hanya tinggal menunggu untuk membuat event (biasanya dari view) dan membuat
beberapa tindakan/action. Untuk melanjutkan membuat applikasi ini , mari kita
buat sebuah Controller. Buat file Pengguna.js didalam folder “app/controller/Pengguna.js”
dan tambahkan listing code berikut :
Ext.define('ums.controller.Pengguna', {
extend: 'Ext.app.Controller',
init: function() {
console.log('Pengguna sukses di inisialisasi! Ini terjadi sebelum launch function application dipanggil');
}
});
Dan sekarang kita tambahkan sedikit code di dalam file
app.js untuk memanggil Controller yang telah dibuat , copy code berikut :
Kemudian jalankan di browser , kemudian klik kanan ->
inspect element -> ke tab Console , maka akan tampil log yang kita buat di
Controller
Gambar 2.1 Applikasi yang sudah diberi log di Controller
Sekarang kita ganti codingan yang di controller dengan code dibawah ini :
init: function() {
this.control({
'viewport > panel': {
render: this.onPanelRendered
}
});
},
onPanelRendered: function() {
console.log('Panel berhasil di render');
}
Maka saat kita refresh applikasi di browser tulisan "Pengguna sukses...bla..bla...bla" akan terganti dengan tulisan Panel berhasil di Render.
Kita menggunakan "this.control" di init: function() untuk mengatur listeners didalam views applikasi kita. Didalam init: function() saya menggunakan 'viewport > panel' , yang berarti "find me every Panel that is a direct child of a Viewport".
Kita menggunakan "this.control" di init: function() untuk mengatur listeners didalam views applikasi kita. Didalam init: function() saya menggunakan 'viewport > panel' , yang berarti "find me every Panel that is a direct child of a Viewport".
Sekarang mari kita buat Grid Panel untuk data pengguna.
Jika sudah mengikuti langkah diatas, refresh browser kalian masing-masing dan lihat apa yang berubah.. tadaa , kita berhasil menampilkan Grid Data Pengguna.
Membuat View
Sampai saat ini applikasi ext-mvc-user hanya terdiri dari
beberapa baris code yang ada di dua file yaitu –app.js dan app / controller /
Pengguna.js. Sekarang kita ingin menambahkan Grid untuk menampilkan semua data
pengguna, saatnya untuk berpikir menggunakan logika yang lebih baik dan mari
kita mulai membuat view.
View tidak lebih dari sebuah komponen, biasanya
didefinisikan sebagai subclass dari komponen ExtJS. Kita mulai membuat grid di
dalam folder app/view/ListUser.js , dan copy code berikut :
Ext.define('ums.view.ListUser' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.listuser',
title: 'Data Seluruh Pengguna',
initComponent: function() {
this.store = {
fields: ['name', 'email'],
data : [
{name: 'Admin', email: 'admin@trainee.com'},
{name: 'Sony', email: 'sony@code.com'}
]
};
this.columns = [
{header: 'Name', dataIndex: 'name', flex: 1},
{header: 'Email', dataIndex: 'email', flex: 1}
];
this.callParent(arguments);
}
});
Gambar 3. Menampilkan Grid
Lalu sekarang kita akan membuatkan model dan store untuk mengambil data tidak dari view tetapi dari model dan store , karena jika tidak ada model/store belum bisa dikatakan MVC.
Membuat Store
dan Model
Tanpa basa-basi lagi langsung saja buat file Penggunas.js di
app/store/, lalu copy code berikut ini :
Ext.define('ums.store.Penggunas', {
extend: 'Ext.data.Store',
fields: ['name', 'email'],
data: [
{name: 'Admin', email: 'admin@trainee.com'},
{name: 'Sony', email: 'sony@code.com'}
]
});
Sekarang kita update codingan kita di controller.
Ext.define('ums.controller.Pengguna', {
extend: 'Ext.app.Controller',
stores: [
'Penggunas'
],
...
});
Ext.define('ums.view.ListUser' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.listuser',
title: 'Data Seluruh Pengguna',
store: 'Penggunas',
initComponent: function() {
//hapus this.store hingga tutup kurung store '}' this.columns = [
...
//isi column ini biarkan tetap seperti tadi , hanya menghapus store yang diatas saja
});
Lalu buat file Penggunam.js di folder app/model , lalu copy
code berikut :
Sekarang kita update store kita karena sudah menggunakan
model.
Ext.define('ums.store.Penggunas', {
extend: 'Ext.data.Store',
model: 'ums.model.Penggunam',
data: [
{name: 'Admin', email: 'admin@trainee.com'},
{name: 'Sony', email: 'sony@code.com'}
]
});
Dan kemudian kita berikan reference untuk model dan store di
controller milik kita.
Ext.define('ums.controller.Pengguna', {
extend: 'Ext.app.Controller',
stores: [
'Penggunas'
],
models: ['Penggunam'],
...
});
Nah kita sudah membuat store dan
juga model , coba kita refresh kembali browser kita .. sebenarnya output sama
seperti yang tadi namun beda.. kalau tadi kita menaruh store di dalam view dan
itu sangat tidak efektif atau tidak mengikuti alur OOP. Maka dari itu kita
membuat model dan store.
Oke Sekian Tutorial dari mimin ..
Semoga Bermanfaat ya dan selamat mencoba >,<
Untuk full source code belum ada , nanti kalau sudah ada akan diupdate lagi , jadi jangan bosan-bosan yah main kesini :v
Semoga Berhasil~
