IMPLEMENTASI ARSITEKTUR MODEL VIEW CONTROLLER

DALAM WEB APPLICATION SMAN 8 PADANG MENGGUNAKAN

FRAMEWORK EXT-GWT

ARTIKEL

Oleh
GEOVANNE FARELL
NIM 06456

PENDIDIKAN TEKNIK INFORMATIKA

JURUSAN ELEKTRONIKA
FAKULTAS TEKNIK
UNIVERSITAS NEGERI PADANG
2012
 ABSTRAK

GEOVANNE FARELL : Implementasi Arsitektur Model View

Controller Dalam Web Application SMAN
8 Padang Menggunakan Framework Ext-
GWT

Kebutuhan akan informasi dan penggunaan komputer yang semakin

banyak mendorong terbentuknya jaringan komputer yang mampu melayani
berbagai pengguna informasi, sehingga pengolahan informasi dapat dilakukan
secara cepat dan terstruktur.Kebiasaan pengguna dengan sistem pengisian data
yang di manja dengan kemudahan dengan tampilan spreadsheet sangat
bertentangan dengan web application yang ada sekarang. web application
sekarang memerlukan adaptasi yang mengharuskan pengguna mengisi data
satu demi satu sesuai form yang ada, di tambah dengan penggunaan waktu
yang banyak ketika sebuah web application mengambil seluruh data dari
server satu halaman.
Berdasarkan hal tersebut perlu adanya pembuatan web application yang
bersifat friendly dengan pengguna dan tidak mengambil waktu yang banyak
dalam memproses data. Web application yang akan di buat menggunakan
arsitektur MVC yang dapat menata struktur program sehingga lebih efektif
dalam pembuatan web application. Pada kasus sekarang penulis juga
membuat web application menggunakan framework Ext-GWT yang dapat
membantu dalam mengontrol library-library kebutuhan web yang akan di
buat.
Sesuai dengan judul yang di sampaikan , maka rancangan web
application yang akan di buat dapat membantu sekolah dalam pengolahan
data siswa, data guru, data mata diklat, dan data kelas yang pada kasus ini, di
ambil SMAN 8 PADANG sebagai sekolah yang akan di jadikan tempat
pengambilan data.
Kata Kunci : Web Application framework Spreadsheet MVC
I. PENDAHULUAN Latar Belakang
 Penemuan berbagai macam hal tersebut perlu adanya
teknologi yang mendukung pembuatan web application yang
informasi menyebabkan bersifat friendly dengan pengguna
perkembangan teknologi dan tidak mengambil waktu yang
informasi yang demikian pesat, banyak dalam memproses data.
dimana setiap informasi yang ada SMAN 8 Padang adalah
di dunia ini bisa kita dapatkan sebuah institusi yang masih
dalam waktu yang relatif menggunakan cara manual dalam
singkat.Teknologi informasi juga menangani pengolahan data. Data
dipandang sebagai hal yang sangat dikumpulkan dalam map arsip,
penting dalam perluasan mengelompokkannya, memberi
kesempatan belajar serta penomoran dengan pola tertentu,
perolehan informasi masyarakat di lalu menempatkan arsip-arsip
dunia. tersebut didalam lemari
Kebutuhan akan informasi penyimpanan. Namun, bila arsip
dan penggunaan komputer yang yang disimpan sudah cukup
semakin banyak mendorong banyak, maka sulit dan butuh
terbentuknya jaringan komputer waktu lama untuk menemukan
yang mampu melayani berbagai data yang diinginkan. Disamping
pengguna informasi, sehingga itu, sangat besar kemungkinan
pengolahan informasi dapat data tersebut rusak dikarenakan
dilakukan secara cepat dan penyimpanan yang masih
terstruktur. Kebiasaan pengguna konvensional.
dengan sistem pengisian data yang Penemuan teknologi yang
dimanja dengan kemudahan paling baru sekarang adalah
tampilan spreadsheet sangat framework Ext-GWT yang dapat
bertentangan dengan web membuat website menjadi lebih
application yang ada sekarang. tepat sasaran dengan tujuan
Web application sekarang pembuataannya, karena teknologi
memerlukan adaptasi yang Ext-Gwt membuat library-library
mengharuskan pengguna mengisi web menjadi lebih variatif dan
data satu demi satu sesuai form mudah untuk dikembangkan.
yang ada, ditambah dengan Apabila teknologi ini dipadukan
penggunaan waktu yang banyak dengan arsitektur programming
ketika sebuah web application yang terstruktur dan fleksibel,
mengambil seluruh data dari seperti arsitektur model view
server satu halaman. Berdasarkan controller maka akan tercipta
 sebuah web application yang
sangat mudah di gunakan, serta
memanjakan penggunanya seperti
bekerja di komputer stand alone
dengan fitur-fitur yang ada.
Perkembangan teknologi
khususnya dalam teknologi
informatika dan adanya penerapan
penggunaan aplikasi berbasis web
dalam pengolahan data di sekolah
menjadikan pengolahan data lebih
terstruktur dan terorganisir dengan
baik sehingga dalam penyampaian
informasi akan bisa lebih cepat.
Sesuai dengan kebutuhan
itu, maka perlu rancangan web
application yang dapat membantu
sekolah dalam pengolahan data
siswa, data guru, data mata diklat,
dan data kelas dengan judul
Implementasi Arsitektur Model
View Controller Dalam Web
application SMAN 8 Padang
Menggunakan Framework Ext-
GWT.
II. PEMECAHAN PENDEKATAN
MASALAH
Web application
Sebuah aplikasi web
menurut Alex (2000:1) adalah
sebuah aplikasi yang diakses
melalui jaringan seperti Internet
atau intranet . Istilah ini juga
dapat berarti sebuah aplikasi
perangkat lunak komputer yang
dikodekan dalam bahasa yang
didukung browser (seperti
JavaScript , dikombinasikan
dengan browser yang diberikan
markup languange seperti HTML)
dan bergantung pada browserweb
umum untuk membuat aplikasi
dieksekusi. Aplikasi Web yang
populer karena multiplatform dan
kenyamanan menggunakan web
browser sebagai klien, atau
disebut juga thin client.
Kemampuan untuk memperbarui
dan memelihara aplikasi web
tanpa mendistribusikan dan
menginstal perangkat lunak pada
ribuan komputer klien merupakan
alasan utama untuk popularitas
mereka, seperti dukungan yang
melekat untuk cross-platform.
Dalam model komputasi
sebelumnya, misalnya di client-
server, beban untuk aplikasi
dibagi antara kode pada server
dan kode diinstal pada setiap klien
lokal. Dengan kata lain, aplikasi
memiliki klien sendiri program
yang menjabat sebagai antarmuka
pengguna dan harus secara
terpisah diinstal pada setiap
pengguna komputer pribadi.
Upgrade ke kode server sisi
aplikasi biasanya akan juga
memerlukan upgrade ke kode sisi
klien diinstal pada setiap
workstation pengguna, menambah
dukungan biaya dan penurunan
produktivitas.
Sebaliknya, aplikasi web
menggunakan dokumen-dokumen
web ditulis dalam format standar
seperti HTML dan JavaScript,
yang didukung oleh berbagai
browserweb. Aplikasi web dapat
dianggap sebagai varian tertentu
dari client-server perangkat lunak
dimana perangkat lunak client
didownload ke mesin client ketika
mengunjungi halaman web yang
relevan, dengan menggunakan
prosedur standar.
Arsitektur Model View
Controller
Model-View-Controller atau
MVC menurut Barnes (2006)
adalah sebuah metode untuk
membuat sebuah aplikasi dengan
memisahkan data (Model) dari
tampilan (View) dan cara
bagaimana memprosesnya
(Controller). Dalam
implementasinya kebanyakan
framework dalam aplikasi website
adalah berbasis arsitektur MVC.
MVC memisahkan pengembangan
aplikasi berdasarkan komponen
utama yang membangun sebuah
aplikasi seperti manipulasi data,
antarmuka pengguna, dan bagian
yang menjadi kontrol dalam
sebuah aplikasi web.
MVC ini sering terlihat pada
HTML atau XHTML yang
dihasilkan oleh sebuah web
application. Controller menerima
GET atau POST input dan
memutuskan apa yang harus
dilakukan dengan hal itu,
menyerahkan ke obyek domain
yaitu model yang berisi busines
rules dan tahu bagaimana
melaksanakan tugas-tugas khusus
seperti pengolahan perintah baru
dan menghasilkan komponen
seperti mesin template, XML, Ajax
callback.
Model pada MVC berupa
logika bisnis dan domain yang
dibutuhkan untuk memanipulasi
data dalam sebuah aplikasi.
Banyak aplikasi menggunakan
mekanisme penyimpanan
persisten seperti database untuk
menyimpan data. MVC tidak
secara khusus menyebutkan
lapisan akses data karena
dipahami sebagai bawah atau
dienkapsulasi oleh model.
Framework
Framework secara artian
namanya adalah kerangka
kerja.Framework dalam wikipedia
(2010) juga dapat diartikan
sebagai kumpulan script
(terutama class dan function) yang
dapat membantu developer atau
programmer dalam menangani
berbagai masalah-masalah dalam
pemrograman seperti koneksi ke
database, pemanggilan variabel,
file, sehingga developer lebih
fokus dan lebih cepat membangun
aplikasi. Bisa juga dikatakan
Framework adalah komponen
pemograman yang siap re-use
kapan saja, sehingga programmer
tidak harus membuat scrip yang
sama untuk tugas yang sama.
Misalkan saat anda membuat
aplikasi web berbasis ajax yang
setiap kali harus melakukan XML
Http Request, maka ajax telah
mempermudahnya untuk anda
dengan menciptakan sebuah objek
khusus yang siap digunakan untuk
operasi Ajax berbasis PHP.
Itu adalah salah satu contoh
kecil, selebihnya framework jauh
lebih luas dari itu. Secara
sederhana bisa dijelaskan bahwa
framework adalah kumpulan
fungsi (libraries), maka seorang
programmer tidak perlu lagi
membuat fungsi-fungsi (biasanya
disebut kumpulan library) dari
awal, programmer tinggal
memanggil kumpulan library atau
fungsi yang sudah ada didalam
framework, tentunya cara
menggunakan fungsi-fungsi itu
sudah ditentukan oleh framework.
Beberapa contoh fungsi-
fungsi standar yang telah tersedia
dalam suatu framework adalah
fungsi paging, enkripsi, email,
SEO, session, security, kalender,
bahasa, manipulasi gambar, grafik,
tabel bergaya zebra, validasi,
upload, captcha, proteksi terhadap
XSS(XSSfiltering), template,
kompresi, XML dan lain-lain.
Ext-GWT
Menurut Grant (2010: 2)
Ext-GWT atau sering disingkat
GXT adalah sebuah framework
yang dapat mengkompilasikan
bahasa pemograman JAVA ke
dalam JavaScript dan
dikombinasikan dengan HTML
serta CSS untuk menghasilkan
aplikasi web mandiri. GXT
sendiri dikembangkan oleh sebuah
perusahaan ExtJS. GXT
menambah variasi kelas seperti
widget interaktif, layout, kelas
template, model data yang
lengkapdan menyimpan cache.
Di mulai sebagai proyek open
source bernama MyGWT,
kemudian bergabung pengembang
proyek ExtJS dan lebih
memperluas library, serta menulis
ulang kembali framework asli.
Sekarang yang paling baru diversi
2.4, GXT menawarkan fitur yang
dirancang untuk jalur cepat dalam
pengembangan RIA. Pembuatan
web dengan GXT dilakukan
 menggunakan bahasa
pemrograman Java. Sementara
GXT ini cocok untuk
pengembangan web, Anda tidak
membutuhkan pengetahuan yang
luas tentang HTML, Cascading
style sheet (CSS), atau JavaScript.

1. Unified Model Languange

a. Use case Diagram

Gambar 2Class DiagramWeb Base

Di dalam class diagram di
atas terdapat rincian mengenai
hubungan-hubungan class-class
yang terdapat pada web
application SMAN 8 Padang.
Pada class diagram juga terdapat
atribut-atribut penyusun class
yang dapat dilihat di bagian
bawah.
c. Package Diagram
Gambar 1.Use case Diagram Web
Base
Pada Use case diagram di
atas terlihat ketiga aktor yang
berhubungan dengan sistem secara
langsung dalam memproses data.
Masing-masing aktor mempunyai
proses sendiri yang berada pada
sistem.
b. Class Diagram
 Gambar 3.Package DiagramWeb Gambar 4.Component
Base DiagramWeb Base
Pada gambar Package Pada component diagram
Diagram di atas, pada webbase itu di atas, dijelaskan component-
di butuhkan keterampilan khusus component yang terlibat didalam
JAVA, HTML, CSS, ORDBMS. sistem, yang saling berhubungan
Seluruhnya memiliki untuk mendukung sebuah sistem.
ketergantungan. Pada package Hubungan component dengan
database, dibutuhkan suatu class bahwa component
manajemen data dan keterampilan merupakan subsistem berisi class-
membuat model, memiliki sifat class yang bekerja sama
bebas. Lalu pada packageuser, di merealisasikan antar muka yang
bangun secara remote team. diinstruksikan.
Sedangkan package search, e. Deployment Diagram
dibutuhkan suatu kemampuan
dengan teknologi search engine
dan bersifat subsistem local.
Kemudian editing, terdiri dari
dasar panel editing untuk
penerbitan pertama, N-Editing
untuk release berikutnya, dan y-
editing untuk permintaan client.

d. Component Digram

Gambar 5.Deployment
DiagramWeb Base
Model diagram
deployment di atas terlihat
hubungan bagian-bagian
perangkat lunak pada sistem
dengan elemen perangkat keras
yang akan mengeksrekusinya.
f. Statechart Diagram
 Gambar 6.Statechart DiagramWeb
Base
Diagram statechart di atas
menggambarkan perilaku sistem
perangkat lunak serta perilaku
class, subsistem dan seluruh
aplikasi.
g. Activity Diagram
h. Sequence Diagram
Gambar 7.Activity DiagramWeb
Base
Diagram activity di atas
lebih memfokuskan pada eksekusi
dan alur sistem. Sistem yang
digambarkan di beri awalan
lambang start dimana proses
pertama di mulai. Kemudian di
akhiri dengan lambang finish,
dimana proses sistem berakhir.

Gambar 8.Sequence DiagramWeb
Base
Sequence diagram di atas
menunjukan proses pengaktifan
eksekusi pada sistem sesuai
dengan timming yang ada.
Halaman Login merupakan
halaman yang menggambarkan
proses masuk agar bisa mengakses
halaman Menu Utama. Login
dilengkapi dengan sebuah panel
window yang dapat di drag and
drop, di atur ukurannya sesuai
keinginan user. Pada halaman
login juga terdapa tiga buah label
dan dua buah textfield yang
berfungsi sebagai tempat kita
memasukan username dan
password. Kemudian juga terdapat
satu buah combo box untuk
memilih tema WebBase.
Gambaran halaman Login adalah
sebagai berikut.

III HASIL DAN

PEMBAHASAN

Hasil Rancangan Tampilan

Hasil rancangan tampilan
merupakan rancangan antarmuka Gambar 4.1. Halaman Login
WebBase. Tampilan rancangan
inilah yang merealisasikan
terjadinya interaksi antara 2 Halaman Menu Utama
manusia dengan komputer. Hasil 39
Halaman Menu Utama
rancangan tampilan dapat merupakan halaman awal
dijelaskan di dalam poin-poin WebBase SMAN 8 Padang yang
berikut ini. memiliki tiga jenis user, yaitu
1 Halaman Login guru, siswa, dan admin. Perbedaan
 halaman utama di antara user
adalah ketersediaan tombol pada
panel tree yang ada di sebelah
kanan halaman, jika user masuk
sebagai guru, maka sistem hanya
akan memperbolehkan user
mengakases tiga buah tombol,
sedangkan jika user masuk
sebagai siswa, maka sistem akan
memperbolehkan dua tombol saja,
dan jika user masuk sebagai
admin, maka sistem akan
memunculkan delapan tombol
akses. Gambaran halaman Menu
Utama dapat dilihat pada gambar
berikut ini.
Gambar 4.2. Halaman Menu
Utama
Tombol navigasi di halaman
Menu Utama berfungsi masing- c
masing tombol dijelaskan pada
poin-poin berikut ini.
a Tombol Entry user, berfungsi d
sebagai memunculkan panel untuk
menambah user.
b Tombol Entry data guru, berfungsi
sebagai memunculkan panel untuk
menambah data guru.
c Tombol Entry data siswa, befungsi
sebagai memunculkan panel untuk
menambah data siswa.
d Tombol Entry data kelas,
berfungsi sebagai memunculkan
panel untuk menambah data kelas.
e Tombol Entry mata diklat,
berfungsi sebagai meunculkan
panel untuk menambah mata
diklat.
f Tombol data guru, berfungsi
sebagai memunculkan panel untuk
melihat data guru.
g Tombol data mata diklat,
berfungsi sebagai memunculkan
panel untuk melihat mata diklat.
h Tombol data kelas, berfungsi
sebagai memunculkan panel untuk
melihat data kelas.
Tombol pada setiap panel terdiri
dari sebagai berikut:
a Tombol refresh, berfungsi untuk
mengambil data ke database untuk
memunculkan di grid panel.
b Tombol add, berfungsi untuk
menambah data kedalam database.
Tombol save, berfungsi untuk
menyimpan data kedalam
database.
Tombol delete, berfungsi untuk
menghapus data yang didalam
database.
e Pada panel data kelas terdapat dua
buah combo box yang berfungsi
 untuk memilih tahun ajar dan Panel guru merupakan panel
kelas. yang berfungsi untuk
memunculkan dan memproses
Pada toolbar main menu data guru. Tampilan panel guru
terdapat satu buah combo box adalah sebagai berikut.
untuk memilih tema pada aplikasi,
kemudian juga terdapat satu buah
button untuk Logout dari sistem,
lalu juga terdapat satu buah button
untuk memunculkan panel about.
Setiap panel mempunyai fitur Sort
Ascending dan Sort Descending
untuk menyusun record yang ada
pada grid panel, kemudian juga
terdapat pengaturan jumlah kolom
yang dimunculkan.
Gambar 4.4. Panel Guru
3 Panel User 5 Panel siswa
Panel User merupakan panel Panel siswa merupakan panel
yang berisikan informasi untuk yang berfungsi untuk
menambahkan user pada sistem. memunculkan dan memproses
Tampilan panel user adalah data siswa. Tampilan panel siswa
sebagai berikut. sebagai berikut.

Gambar 4.3. Panel User

4 Panel Guru Gambar 4.5. Panel Siswa
6 Panel kelas
 Panel kelas merupakan panel
yang berfungsi untuk
memunculkan dan memproses
data kelas. Tampilan panel kelas
adalah sebagai berikut.
A. Hasil Rancangan Program
Gambar 4.6. Panel Kelas
7 Panel entry mata diklat
Panel mata diklat merupakan
panel yang berfungsi
memunculkan dan memproses
mata diklat. Tampilan panel entry
mata diklat adalah sebagai berikut.
1 Rancangan Panel Login
Gambar 4.7. Panel Mata Diklat
Hasil rancangan program
dijelaskan melalui aplikasi eclipse
helios, postgreSQL dan tomcat
server. Hasil ini dideskripsikan
sesuai dengan file-file pembangun
webbase. Adapun hasil rancangan
program tersebut adalah sebagai
berikut.
Rancangan panel Login
didesain dengan menggunakan
aplikasi eclipse helios. Panel login
tersimpan di dalam file Sisfo.java.
Hasil run dari file Sisfo.java akan
memunculkan gambaran sebagai
berikut.
 Gambar 4.9. Rancangan Halaman
Menu Utama

III. KESIMPULAN

Gambar 4.8. Rancangan File A. Kesimpulan

sisfo.java Kesimpulan yang diambil
2 Rancangan Panel Menu Utama setelah melakukan perancangan
(Home) dan pembuatan Webbase ini
Rancangan panel Menu Utama dijelaskan di dalam poin-poin
didesain dengan menggunakan berikut ini.
aplikasi eclipse helios. Panel 1. Arsitektur Model View Controller
home tersimpan di dalam file dapat membantu perancangan
Sisfo.java, folder menu tengah, sistem web application yang
banner, dan treemenucont. terstruktur sesuai kebutuhan
Gambaran hasil rancangan proses yang di lakukan sistem.
tersebut dapat dilihat pada gambar 2. Teknologi EXT-GWT dapat
berikut ini. membuat sistem lebih friendly
dengan user di karenakan library-
library yang tersediadapat
menjadikan sistem sangat mudah
di gunakan sesuai kebutuhan yang
di inginkan.
3. Webbase dapat menjadi awal
sistem informasi yang dapat di
gunakan dimana saja dan ramah
dengan kebutuhan jaringan, ini di
karenakan proses asyncron yang
di lakukan, sehingga sistem tidak
memerlukan proses terus menerus
memakan bandwdith dengan
keperluan yang tidak di perlukan.