View of STUDI POLA PENGEMBANGAN WEB DINAMIS DENGAN ARSITEKTUR MVC: IMPLEMENTASI PADA JAVASERVER FACES (JSF)
INFOMATEK
Volume 18 Nomor 2 Desember 2016
STUDI POLA PENGEMBANGAN WEB DINAMIS DENGAN ARSITEKTUR
MVC: IMPLEMENTASI PADA JAVASERVER FACES (JSF)
Hendra Komara
*)
Program Studi Teknik Informatika
Fakultas Teknik – Universitas Pasundan
Abstrak: Perangkat lunak berbasis web dinamis (PLBWD) melakukan pengubahan informasi melalui
pengubahan data, bukan melalui pengubahan kode program. Teknologi pengembang PLBWD terus merilis dan
memutakirkan kakas pengembang PLBWD dengan keunggulan masing-masing. Dari sisi arsitektur, desaian
MVC menawarkan PLBWD yang memisahkan tanggung jawab dari tiap lapisan aplikasi dan kegunaulangan.
Banyaknya platform untuk mengembangkan PLBWD, melahirkan kompleksitas dan biaya besar pada peringkat
teknis. Para pemrogram memerlukan usaha besar untuk mengenali dan memahami teknologi, arsitektur, teknik,
perilaku, lingkungan dari tiap platform. Pada penelitian ini dikembangkan pola umum PLBWD untuk meredam
kompleksitas dari detail tiap platform, sehingga dapat meningkatkan produktivitas pemrogram. Teknik analisis
pola PLBWD pada tiap platform dilakukan dengan cara eksperimen pada beragam aplikasi yang sudah jadi.
Hasil analisis direkam, dievaluasi secara iteratif, sehingga pola PLBWD akan terus berevolusi. Pada penelitian ini
teknologi dari masing-masing platform yang diteliti : Java EE : JSF; .NET : .NET Framework; PHP : YII. Untuk
menguji pola PLBWD, dikembangkan sebuah kakas generator. Kakas tersebut dapat membangkitkan kode
program dengan mengimplementasikan pola PLBWD yang sudah dibuat. Pada penelitian ini, implementasi
hanya dilakukan pada platform Java EE dengan mengunakan teknologi JSF.
Kata kunci: PLBWD, pola, platform, MVC.
I. PENDAHULUAN
1
Untuk meredam kompleksitas perkembangan
1.1 Latar Belakang
dan perubahan,
Penggunaan web dinamis yang meluas dan
harus
kebutuhan
mampu
yang
meningkat
melahirkan
maka rancangan aplikasi
bersifat modular.
mengurangi
Aplikasi modular
coupling
diantara
kompleksitas dari web dinamis itu sendiri.
komponen [1]. Komponen adalah entitas yang
Diperlukan teknik dan teknologi untuk dapat
memilki fungsi tertentu dan dapat diguna
membangun aplikasi web dinamis yang dapat
ulang (reuseable) (Caytiles [2]). Pengaksesan
mempermudah
user
komponen hanya melalui interface, sedangkan
interface (UI) kompleks, adaptif terhadap
detail dari komponen itu sendiri tersembunyi
perubahan, kemudahan dalam perawatan dan
(encapsulation) [1].
dalam
penyusunan
pengembangan (Burns [1]).
*)
hendra.komara@unpas.ac.id
Infomatek Volume 18 Nomor 2 Desember 2016 : 65 - 76
Salah satu kendala pembangunan perangkat
Pola yang dihasilkan mampu adaptif untuk
lunak
semua platform. Dihasilkannya pola yang
yang
mendasar
adalah
tuntutan
menghasilkan produk yang berkualitas dengan
adaptif
batas waktu pengerjaan singkat (Jiang [3]).
meningkatkan produktivitas pemrogram, meski
Dari sisi pemrogram, ketika harus mempelajari
harus berganti platform dan teknologi dalam
teknologi baru
pengembangan PLBWD.
dari sebuah platform secara
pada
berbagai
platform
dapat
rinci dan teknis, memerlukan usaha besar, hal
tersebut
dapat
pemrogram
menghambat
yang
produktivitas
berdampak
pada
pengembangan aplikasi secara kesuluruhan.
Untuk memvalidasi pola yang dibuat, dibuat
aplikasi generator untuk membangkitkan kode
program,
dimana
desain
aplikasi
yang
dihasilkan oleh kode generator mengacu pada
Penelitian ini bertujuan untuk menghasilkan
pola
pengembangan
dari
tiga
pola PLBWD yang dikembangkan.
platform
pengembang PLBWD, yaitu Java EE, .NET,
1.2 Identifikasi Masalah
PHP. Dari tiap platform dipilih satu teknologi
Berdasarkan latar belakang yang dipaparkan,
untuk diteliti, yaitu 1) : PHP dipilih teknologi
didapatkan
YII. Alasanya adalah karena YII membantu
berikut :
pengembang
web
1. Apakah dapat dibuat pola PLBWD yang
kompleks secara cepat sehingga delivery
adaptif pada beragam platform (Java EE,
pada pelanggan dapat tepat waktu; 2) Java
NET, dan PHP)?
EE
dipilih
menawarkan
membangun
JSF.
Alasanya
solusi
aplikasi
identifikasi
masalah
sebagai
adalah
JSF
2. Apakah
dapat
diimplementasikan
pembangunan
web
PLBWD
yang
dikembangkan
dinamis dengan kombinasi arsitektur desain
pola
tersebut
untuk beragam platoform dan teknologi?
MVC yang powerfull dan penyusunan UI yang
berbasis komponen terstandar Java EE [1]; 3)
1.3 Tujuan Penelitian
.NET
Berikut ini merupakan tujuan dari penelitian
dipilih
.NET
Framework.
Alasan
pemilihan .NET karena semua teknologi yang
yang dilakukan:
dikembangkan Microsoft meski berbayar relatif
1. Memodelkan pola PLBWD yang adaptif
matang
dan
memiliki
kemudahan
dalam
penggunaan serta memiliki dukungan penuh
pada hal help desk.
terhadap berbagai platform.
2. Membuat
generator
yang
membangkitkan kode program dari pola
PLBWD yang dikembangkan?
66
mampu
Studi Pola Pengembangan Web Dinamis dengan Arsitektur MVC :
Implementasi pada JavaServer Faces (JSF)
II. ANALISIS DAN PERANCANGAN POLA
teknologi, dan perilaku. Mengidentifikasi
PLBWD
modul, paket, kelas, dan library yang pada
2.1. Analisis Penyelesaian Masalah
iterasi selanjutnya akan dianalisis lebih
Untuk menyelesaikan analisis pola PLBWD,
dalam.
dibutuhkan acauan untuk mendefiniskan tiap
2. Analisis dan Pemodelan Pola PLBWD
fase yang pada akhirnya sampai pada hasil
Menganalisis kode program dan elemen
analisis. Pada penelitian ini, acuan yang akan
dari aplikasi. Kode program dianalisis,
digunakan
direkam dan dimodelkan meski belum
adalah
mengadaptasi
model
proses Prototyping. Model proses protyping
dipahami
merupakan model proses yang berdiri sendiri,
didapatkan pada iterasi-iterasi selanjutnya.
tetapi dapat digunakan untuk konteks tertentu
secara
utuh.
Pola
utuh
3. Pengarsiapan Pola PLBWD
dimana masih belum ada pemahaman yang
Melakukan inventarisir pada kode-kode
jelas dari apa yang hendak dikembangkan
aplikasi yang dianalisis. Kode tesebut
(Pressman [4]). Berikut representasi model
dikomparasi dengan kode pada aplikasi
proses Prototyping pada Gambar 1.
lain. Komprasi dari kode-kode tersebut
diabstraksi
untuk
mendapatkan
pola
PLBWD yang bersifat generik.
4. Evaluasi Pola PLBWD
Mengecek
sebelumnya,
hasil
analisis
kemudian
pada
iterasi
mengindetifikasi
dan menggabungkan dengan hasil analisis
terbaru. Mencocokan pola generik terbaru
dengan literatur.
2.2. Resume Hasil Analisis Pola PLBWD
untuk Tiap Lapisan MVC
Gambar 1
Model proses hasil adaptasi dari Prototyping [4].
Berikut resume hasil analisis dari tiap lapisan
MVC, direpresentasikan pada Tabel 1, 2 dan
Dari representasi pada Gambar 1 di atas,
3.
Tabel 1
berikut paparan dari tiap fase :
1. Identifikasi Spesifikasi
Mengenali dan berinteraksi dengan aplikasi
untuk mendapatkan spesikasi, arsitektur,
Lapisan View
No
1
View
Script
language
JSF
Razor
YII
JSF
Razor
PHP
67
Infomatek Volume 18 Nomor 2 Desember 2016 : 65 - 76
No
2
3
4
5
6
7
8
9
10
11
View
HTML
support
Direktori
View layer
Tempale
Framework
JSF
Razor
YII
Ya
Ya
Ya
WebContent
Views
views
Facelete
Razor
Twig
Validasi
Ya
Ya
Ya
Ekstensi
default
Penerapan
Clean code
Direktori
penyimapa
nan
aset/source
(CSS,
JavaScript)
Template
anatarmuk
a
Teknologi
interaksi
antarmuka
dengan
controller
Internation
alizati dan
localization
.html
.cshtml
.php
Ya
Tidak
Tidak
WebContent/
CSS
WebContent/
Script
WEBINF/Template
Content
Scripts
Views/Sha
red
No
web/css
web/ass
ets
View
JSF
Razor
YII
dan
lain-lain
2
Bahasa
Java
C#
PHP
3
Paradigma
Obejact
Oriented
Object
Oriented
Object
Oriente
d
4
Direktori
lapisan
controller
WEB-INF/lib
Controllers
controll
ers
5
Front
controller
FacesServlet
.java
RouteConfi
g.cs
YIIAplic
ationCo
ntroller.
php
6
Validasi
antarmuka
(return)
Ya
Ya
Ya
web.xml
AuthConfig.
cs,
BundleConf
ig.cs,
FilterConfig
.cs
RouterConf
ig.cs
webApiCon
fig.cs
Config.
php
WEB-INF/lib
packages
vendor
WEBINF/facesconfig.xml
Views/Web
.config.xml
Paginat
ion.php
Tidak
Ya
Ya
Twig
7
Expresi
Language
(EL)
@
character
-
Ya
Ya
Ya
8
9
Pada Tabel 1 dipaparkan hasil analisis dari
lapisan view untuk semua platform. Dapat
10
Penaganan
konfigurasi
aplikasi
Direktori
libary
Konfigurasi
navigasi
halaman
Variable
global
dilihat detail implementasi, pendekatan, dan
teknologi
yang
digunakan
berbeda-beda.
Pada Tabel 2 dipaparkan hasil analisis dari
Selanjutnya dari perbedaan tersebut akan
lapisan
abstraksi
Lapisan controller yang dipilih pada peneltian
untuk
mendapatkan
pola
yang
controller
adaptif untuk lapisan view dan interaksi
ini
untuk
tiap
dengan controller.
menggunakan
untuk
semua
platform,
JSF,
yaitu
.NET
platform.
Java
EE
menggunakan
Framework .NET, dan PHP menggunakan YII.
Tabel 2
Sama dengan lapisan view, pada lapisan
Lapisan Controller
No
1
68
View
JSF
Razor
Framework
Alternatif
Spring MVC,
Struts2, dan
lain-lain
-
controller detail implementasi, pendekatan,
YII
Laravel,
CI,
Cake
PHP,
dan teknologi yang digunakan berbeda-beda,
karena
dibangun
pendekatan
yang
dengan
platform
berbeda.
dan
Selain
Studi Pola Pengembangan Web Dinamis dengan Arsitektur MVC :
Implementasi pada JavaServer Faces (JSF)
mengabstraksi pada lingkungan controller,
Jika menggunakan framework mandiri, maka
diperhatikan
memiliki
juga
keseragaman
dari
efek,
yaitu
adanya
mekanisme
mekasnisme interaksi dengan lapisan lain.
konfigurasi untuk menjembatani spesifikasi
Keseragaman
controller
controller dengan model. Pola PLBWD yang
menggunakan
dikembangkan harus mampu adaptif terhadap
Interfacing
berbagai framework dari model yang mandiri
dengan
interaksi
lapisan
pendekatan
antara
lain
interfacing.
mendefiniskan interaksi secara seragam dan
tersebut.
Keunggulan
dari
menggunakan
tidak terbebas dari spesikasi platform dan
framework adalah efisiensi dan produktivitas
teknologi (Hao [5]).
pengembangan
dan
pemanfaatan
kemampuan dari framework tersebut untuk
Tabel 3
berbagai hal terkait penanganan data dan
Lapisan Model
No
View
1
Alternarif
Framework
2
Bahasa
3
Paradigma
4
5
6
7
Direktori
lapisan
model
Penerapan
Persistence
Konfigurasi
aplikasi
dengan
database
Deklarasi
Anotasi
interaksi antara aplikasi dengan basis data
JSF
Eclipselink,
Ibatis, dan
lain-lain
Razor
YII
DAO
Framework
Eloquent
Java
C#
PHP
Obejact
Oriented
Java
Resources/
src
Object
Oriented
Object
Oriented
Fase berikutnya adalah fase perancangan dari
Models
models
platform. Fase ini dilakukan dengan membuat
Native
Native
Third
party
model arsitektur PLBWD dari tiap platform.
Src/hiberna
te.cfg.xml
Web.config
.xml
config/db
.php
@entity
[HttpPost]
(Xia [6]).
2.3 Rancangan Pola PLBWD
pola
PLBWD
Deskripsi
berbasis
perancangan
memodelkan
arsitektur
MVC
untuk
dilakukan
tiap
dengan
berdasarkan
hasil
analisis. Dikembangkannya model dari tiap
platform
PLBWD
dapat
membantu
produktivitas pemrogram ketika harus pindah
Pada Tabel 3 dipaparkan hasil analisis dari
dari
lapisan model untuk semua platform. Detail
Berdasarkan
implementasi, pendekatan, dan teknoogi yang
pandang abstrak, model arsitektur PLBWD
digunakan berbeda-beda. Pada platform Java
yang menerapkan MVC memiliki arsitektur dan
EE dan .NET lapisan model menggunakan
alur proses yang identik. Berikut rancangan
framework spesifik, yaitu Hibernate dan Entity
pola PLBWD untuk tiap platform.
Framework, Sedangkan pada
menggunakan
framework,
satu
platform
ke
plarform
hasil
analisis,
dari
lain.
sudut
PHP tidak
lapisan
model
1. Model konseptual Pola PLBWD pada .NET
dikelola secara terintegrasi oleh teknologi YII.
69
Infomatek Volume 18 Nomor 2 Desember 2016 : 65 - 76
Controller
Controller
.NET Framework
.NET Framework
RouteConfig.cs
Klien
Request (1)
Klien
HTTP Routing
HTTP Handler
Perambah
Perambah
Kelas-kelas
Controler
Response
View
YII Aplication
Router.php
Request (1)
Kelas-kelas
Controller.php
Response
View
Renderer
HTML
Renderer
HTML
Model
Model
UI Razor
Entity
Entity
UI Twig
Entity
Entity
Framework
Framework
Active Record
DAO
Basisdata
Basisdata
Gambar 2
Gambar 3
Model konseptual Pola PLBWD pada .NET
Model Konseptual Pola PLBWD pada PHP
Dari representasi Gambar 2 dapat paparkan
c. Front
controller
berada
pada
lapisan
sebagai berikut:
controller.
Penanganan
front
a. UI Diletakan pada direktori Views. Secara
dilakukan
oleh
RouteConfig.cs.
default di dalam direktori Views terdapat
RouteConfig.cs didaftrakan pada direktori
direktori-direktori
App_Start.
lain
yang
sama
RouteConfig
yang
penamaannya dengan nama kelas action di
bertanggunag jawab memetakan request
kelas controller, kecuali direktori Shared.
pada kelas controller atau action dari kelas
Direktori Shared berisi berkas-berkas UI
controller
yang menjadi template yang digunakan
merupakan direktori yang bersisi semua
untuk semua halaman web.
konfigurasi yang dijalankan pada saat
b. Untuk berinterasksi antara view (tag Razor)
dengan
controler
(Bahasa
menggunakan teknologi @.
C#)
yan
sesuai.
App_Start
inisiasi aplikasi. Contoh pemetaan request
dengan
kelas
akademik/nilai/123040.
merupakan
70
kelas
controller
kelas
controller
:
Akademik
controller,
nilai
Studi Pola Pengembangan Web Dinamis dengan Arsitektur MVC :
Implementasi pada JavaServer Faces (JSF)
merupakan action, dan 23040 merupakan
didefinisakan public. Akses ke basis data
id.
dapat menggunakan beragam teknik dan
d. Bersifat action centris : dimana setiap
teknologi seperti framework ADO, Entiry
request akan ditangani oleh sebuah objek
Framework,
logical berupa Controller.
menggunakan simbol [ ]. Regitrasi basis
NO
SQL.
Anotasi
2. Model Konseptual Pola PLBWD pada PHP
data, didaftarkan dan dipetakan pada
Dari representasi gambar 3 dapat paparkan
berkas WebConfig.cs.
sebagai berikut:
a. Lapisan view ditempatkan pada direktori
views. YII memiliki sekumpulan library
3. Model Konseptual Pola PLBWD pada Java EE
Controller
antarmuka UI yang siap pakai yang
disebut
widget.
Untuk
JSF
melakukan
komunikasi
dengan
controller
memerlukan
teknologi
khusus,
Faces-config.xml
tidak
Face
Servlet
karena
Action Handler &
Action Listener
Request (1)
lapisan
dari
keduanya
menggunakan
bahasa PHP. Kecuali jika UI menggunakan
bahasa selain PHP, seperti Java Script,
maka memerlukan teknologi penghubung
Klien
Model
Hibernate
JSF
Perambah
seperti JSON.
b.
Front controller
berada
pada
lapisan
controller. Front controller ditanagi oleh
Config.php.
Front
controller
bertugas
memetakan request ke kelas controller
yang sesauai. Front controller pada YII
bersifat
berfungsi
action
page.
menerima
URL
Bean
Response
View
Renderer
HTML
Entity
DAO
Komponen
JSF
Manager
requst
dari
Basisdata
Application, secara teknis URL Manager
yang melakukan pemetaan pada kelas
controller.
c.
Lapisan model berada pada direktori
Models. Secara umum pola dasar dari
kelas entity didefinisikan sebagai Plain Old
CLR Object (POCO). Visibility atribut
Gambar 4
Model Konseptual Pola PLBWD pada Java EE
Dari representasi Gambar 4 dapat paparkan
sebagai berikut:
a. Front controller diletakan pada direktori
Web Content. UI menggunakan konsep
71
Infomatek Volume 18 Nomor 2 Desember 2016 : 65 - 76
berbasis
komponen.
Setiap
komponen
Dari
paparan
tiap
platform
kemudian
pada JSF dapat ditangani oleh kelas bean
diabstraksi
secara mandiri.
pengembangan PBWD sebagai berikut :
b. Tidak mengijinkan penangangan logika di
halaman
JSF,
sehingga
kode
dijamin
kebersihannya.
c. Menggunakan
template
facet
untuk
penanganan templating.
untuk
mendefinisikan
pola
a. Front Controller : Berada Pada lapisan
controller.
Bertanggung
menerima
request
melakukan
pemetaan
controller,
menjalankan
jawab
dari
klien
untuk
dan
terhadap
kelas
operasi
yang
d. Untuk berinterasksi antara view (JSF)
diperlukan untuk menghasilkan response.
dengan bean (bahasa Java) menggunakan
Semua request dari klien harus melewati
teknologi Expression Language (EL).
front controller.
e. Front
controller
kelas
b. Controller : Bagian yang menjembatani
didaftarkan
antara lapisan yang lain. Pola controller
pada kelas web.xml. Untuk memetakan
harus mampu adaptif pada keberagaman
path requst ditangani oleh faces-config.xml
platform dan teknologi di lapisan yang lain.
FacesServlet.
Ditangani
FacesServlet
oleh
atau anotasi yang sesuai dengan kelas
View
merupakan
bagian
yang
bean. Untuk dapat dikenali kelas bean
bertanggung jawab menangani UI. UI yang
harus dipetakan dengan halaman JSF.
dimaksud
FacesServlet selain dapat menunjuk ke
ditayangkan pada sebuah perambah. View
faces-config.xml,
menangani bagaimana sebuah informasi
juga
dapat
ActionEvent/Listener
menunjuk
jika
requset
membutuhkan action.
disajikan
adalah
HTML
kepada
yang
pengguna
akan
melalui
perambah.
f. Lapisan model berada pada direktori src.
d. Model: Lapisan yang berinteraksi dengan
Identitas letak kelas entiry berdasarkan
basisdata.
penamaan paket. Secara umum pola dasar
merupakan
dari kelas entity didefinisikan sebagai Plain
relasional, dan setiap atribut entity sesuai
Old Java Object (POJO). Interaksi dengan
dengan kolom(field) pada tabel. Tugas
basisdata
model
Relation
menggunakan
Model
teknik
(ORM).
Object
Anotasi
pemetaan
sebagainya.
ditangani
4. Model konseptual pola PLBWD
oleh
tabel
sebuah
dalam
dan
DAO)
entity
basisdata
bervariasi
:
melakukan query ke basisdata, mengolah
data
basisdata
Biasanya
(entity
menggunakan karakter @. Registrasi dan
Hibernate.cfg.xml.
72
c. UI:
menurut
logika
bisnis,
dan
Berikut model konseptual pola umum PLBWD
direpresentasikan pada Gambar 5.
Studi Pola Pengembangan Web Dinamis dengan Arsitektur MVC :
Implementasi pada JavaServer Faces (JSF)
menggunakan
framework
Pembangkitan
Controller
controller
Hibernate.
dan
UI
akan
kode
UI
pada
kembangkan sendiri.
Klien
Front Controller
Request (1)
3.2 Pembangkitan kode UI
Perambah
Proses
Kelas-kelas
Controller
Response
membangkitkan
penelitian
ini
FreeMarker.
View
Renderer
HTML
menggunakan
Secara
membangkitkan
Model
umum
antarmuka
proses
menggunakan
FreeMarker melibatkan template, kelas entity,
Entity
Entity
UI
template
dan
DAO
konfigurasi
FreeMarker.
Proses
pembangkitan UI menggunakan FreeMarker
direpresentasikan pada Gambar 6.
Template
FreeMarker
Basisdata
Kelas Entiry
Gambar 5
Model konseptual pola PLBWD
Antarmuka JSF
FreeMarker
Engine
III. IMPLEMENTASI KODE GENERATOR
PLBWD
Komponen JSF
3.1 Analisis dan Desain
Bagian ini,
memaparkan proses analisis,
perancangan
menguji
hingga
Pola
MVC
implementasi
PLBWD
untuk
Gambar 6
dengan
Arsitektur Pembangkit kode program
mengembangkan sebuah aplikasi pembangkit
kode program. Aplikasi yang dikembangkan
3.3 Kompoen UI JSF
hanya dengan platform Java EE. Aplikasi
Komponen
diberi nama aplikasi Generator Antarmuka
memungkinkan komponen JSF untuk dapat
Pengguna
mampu
dikembangkan.
dan controller,
menambahkan
(GAP).
Aplikasi
membagkitkan lapisan
UI
akan
JSF
bersifat
extensibe,
Pengembang
fitur-fitur
yang
ini
dapat
dibutuhkan.
sedangkan untuk pembangkitan lapisan model
Contoh
akan menggunakan kakas dari framework
pengguna JSF pada sebuah halaman facelets
penerapan
komponen
antarmuka
Hibernate. Proses pembangkitan kelas model
73
Infomatek Volume 18 Nomor 2 Desember 2016 : 65 - 76
beserta
hirarki
dari
komponen
UI
yang
merupakan kelas yang mewakili tabel pada
diciptakan, direpresentasikan pada Gambar 7.
basisdata relasional, setiap penciptaan objek
dari kelas entity merupakan satu baris data
pada sebuah tabel, dan setiap atribut pada
kelas entity merupakan atribut pada sebuah
tabel. Untuk membuat sebuah kelas entity,
pada penelitian ini menggunakan fungsi yang
dimiliki
oleh
framework
Hibenate,
yaitu
Hibernate Mapping Files and POJOs from
Database, fungsi ini menghasilkan kelas entity
yang didapat dari
hasil pemetaan dengan
tabel yang ada pada basisdata; 2) pengikat
Komponen JSF : Mengikat komponen JSF
dengan
kelas
entity
menciptakan
keterhubungan antara halaman persentasi
dengan lapisan model. Mengikat komponen UI
dengan kelas entity dapat diartikan bahwa
setiap pengubahan nilai yang terjadi pada
Gambar 7
Contoh alur pemrosesan kode UI pada JSF
komponen
UI
akan
berpengaruh
atau
dipengaruhi oleh kelas entity yang terkait.
Terlihat bahwa komponen dan
Untuk dapat megikat komponen JSF dengan
berasal dari kelas komponen
kelas entity adalah dengan melalui kelas
yang sama yaitu Kelas UI Input. Namun, yang
managed bean, dimana kelas managed bean
membedakan adalah kelas yang me-rendering
tersebut memiliki atribut bertipe kelas entity.
komponen
Managed bean adalah kelas Java yang
tersebut,
dimana
di-rendering
htmlInputText,
sedangkan
dirender
komponen
oleh
kelas
komponen
oleh
kelas
HtmlInputSecret.
terdaftar pada JSF, hanya kelas yang terdaftar
sebagai
managed
bean
yang
dapat
berinterkasi secara langsung dengan halaman
JSF. Managed bean dapat berisi method
getter dan setter, logika bisnis atau bahkan
Pada peneltian ini terdapat dua fungsi utama
dari kelas entity, yaitu kelas entity sebagai 1)
representasi
74
basisdata:
Kelas
entity
backing bean.
Studi Pola Pengembangan Web Dinamis dengan Arsitektur MVC :
Implementasi pada JavaServer Faces (JSF)
IV. PENGUJIAN APLIKASI
Setelah
Setelah apliksai GAP dibuat, maka akan
selanjutnya dilakukan komparasi pola PLBWD
dilakukan pengujian pembangkitan kode UI
hasil perancangan dengan pola PLBWD hasil
menggunakan studi kasus. Pengujian aplikasi
pembangkitan GAP. Cara membandingkan
dilakukan
arsitektur dari keduanya adalah dengan cara
dengan
(comformance)
uji
dibangkitkan,
melihat struktur project masing-masing dan
PLBWD dengan hasil pembangkitan kode
melihat secara rinci kode program hasil
program
pembangkitan GAP.
dilakukan
aplikasi
dengan
rancangan
program
pola
dari
antara
kesesuaian
kode
GAP.
Pengujian
membangkitkan
kode
program dari basisdata. Setelah dibangkitkan
VI. KONKLUSI DAN PENELITIAN
kode program oleh GAP, selanjutnya dilihat
LANJUTAN
arsitektur aplikasi hasil pembagkitan tersebut
Berdasar
dengan arsitektur perancangan yang telah
sebelumnya dapat ditarik beberapa simpulan
dibuat.
sementara dalam penelitian ini, yaitu :
pembahasan
pada
bab-bab
1. Telah dihasilkan model pola PLBWD
Tampilan
UI
hasil
pembangkitan
untuk tiga platform (Java EE, .NET, PHP)
GAP,
direpresentasikan pada Gambar 8.
dari hasil analisis, sehingga pola yang
dihasilkan dapat membantu pemrogram
pada saat harus berpindah platform.
2. Telah dibuat aplikasi GAP pada platform
JAVA EE menggunakan teknologi JSF
untuk menguji pola PLBWD yang telah
didefiniskan. PLBWD yang dihasilkan dari
aplikasi GAP sudah dievaluasi dengan
cara mencocokan pola PLBWD pada hasil
Gambar 8
perancangan dengan pola PLBWD yang
UI hasil pembangkitan GAP.
dihasilkan dari aplikasi GAP.
V. EVALUASI
Berdasar studi kasus yang telah dipaparkan
DAFTAR PUSTAKA
sebelumnya, menunjukkan bahwa untuk dapat
[1]
Burns,
E.
and
mengetahui pola PLBWD dengan kakas GAP,
JavaServerFaces
maka harus dilakukan pembangkitan kode
McGraw-Hill, 2009.
program
terlebih
dahulu
dari
2.0,
Schalk.
New
C.,
York:
basisdata.
75
Infomatek Volume 18 Nomor 2 Desember 2016 : 65 - 76
[2]
Caytiles. R. D., and Lee. S., "A Review
of an MVC Framework based Software
[3]
Hao. H. M., and Jaafar. A., "Tracing User
Interface
Software
Its
Generate Interface Design Specification,"
Applications, vol. 8, pp. 213 - 220,
Electrical Engineering and Informatics,
2014.
2009, vol. 1, pp. 287 - 292, 2009.
Jiang.
Y.,
Engineering
Cheng,
Albert,
and
Zou
and
[6]
Design
Pre-requirement
to
Xia. C., Yu. G., and Tang. M., "Efficient
Xingliang, "Schedulability Analysis for
Implement of ORM (Object/Relational
Real-Time P-FRP Tasks under Fixed
Mapping)
Priority
Scheduling,"
Computing
Use
in
J2EE
Framework:
Computational
Intelligence
Embedded
and
Hibernate,"
Systems
and
and Software Engineering, 2009. CiSE
Applications (RTCSA) IEEE, 2015.
2009. International Conference on , pp. 1-
Pressman. R. S., Software Engineering:
3, 2009.
A Practitioner Approach 7th Edition, New
76
[5]
Development," International Journal of
Real-Time
[4]
York: McGraw-Hill., 2012.
Volume 18 Nomor 2 Desember 2016
STUDI POLA PENGEMBANGAN WEB DINAMIS DENGAN ARSITEKTUR
MVC: IMPLEMENTASI PADA JAVASERVER FACES (JSF)
Hendra Komara
*)
Program Studi Teknik Informatika
Fakultas Teknik – Universitas Pasundan
Abstrak: Perangkat lunak berbasis web dinamis (PLBWD) melakukan pengubahan informasi melalui
pengubahan data, bukan melalui pengubahan kode program. Teknologi pengembang PLBWD terus merilis dan
memutakirkan kakas pengembang PLBWD dengan keunggulan masing-masing. Dari sisi arsitektur, desaian
MVC menawarkan PLBWD yang memisahkan tanggung jawab dari tiap lapisan aplikasi dan kegunaulangan.
Banyaknya platform untuk mengembangkan PLBWD, melahirkan kompleksitas dan biaya besar pada peringkat
teknis. Para pemrogram memerlukan usaha besar untuk mengenali dan memahami teknologi, arsitektur, teknik,
perilaku, lingkungan dari tiap platform. Pada penelitian ini dikembangkan pola umum PLBWD untuk meredam
kompleksitas dari detail tiap platform, sehingga dapat meningkatkan produktivitas pemrogram. Teknik analisis
pola PLBWD pada tiap platform dilakukan dengan cara eksperimen pada beragam aplikasi yang sudah jadi.
Hasil analisis direkam, dievaluasi secara iteratif, sehingga pola PLBWD akan terus berevolusi. Pada penelitian ini
teknologi dari masing-masing platform yang diteliti : Java EE : JSF; .NET : .NET Framework; PHP : YII. Untuk
menguji pola PLBWD, dikembangkan sebuah kakas generator. Kakas tersebut dapat membangkitkan kode
program dengan mengimplementasikan pola PLBWD yang sudah dibuat. Pada penelitian ini, implementasi
hanya dilakukan pada platform Java EE dengan mengunakan teknologi JSF.
Kata kunci: PLBWD, pola, platform, MVC.
I. PENDAHULUAN
1
Untuk meredam kompleksitas perkembangan
1.1 Latar Belakang
dan perubahan,
Penggunaan web dinamis yang meluas dan
harus
kebutuhan
mampu
yang
meningkat
melahirkan
maka rancangan aplikasi
bersifat modular.
mengurangi
Aplikasi modular
coupling
diantara
kompleksitas dari web dinamis itu sendiri.
komponen [1]. Komponen adalah entitas yang
Diperlukan teknik dan teknologi untuk dapat
memilki fungsi tertentu dan dapat diguna
membangun aplikasi web dinamis yang dapat
ulang (reuseable) (Caytiles [2]). Pengaksesan
mempermudah
user
komponen hanya melalui interface, sedangkan
interface (UI) kompleks, adaptif terhadap
detail dari komponen itu sendiri tersembunyi
perubahan, kemudahan dalam perawatan dan
(encapsulation) [1].
dalam
penyusunan
pengembangan (Burns [1]).
*)
hendra.komara@unpas.ac.id
Infomatek Volume 18 Nomor 2 Desember 2016 : 65 - 76
Salah satu kendala pembangunan perangkat
Pola yang dihasilkan mampu adaptif untuk
lunak
semua platform. Dihasilkannya pola yang
yang
mendasar
adalah
tuntutan
menghasilkan produk yang berkualitas dengan
adaptif
batas waktu pengerjaan singkat (Jiang [3]).
meningkatkan produktivitas pemrogram, meski
Dari sisi pemrogram, ketika harus mempelajari
harus berganti platform dan teknologi dalam
teknologi baru
pengembangan PLBWD.
dari sebuah platform secara
pada
berbagai
platform
dapat
rinci dan teknis, memerlukan usaha besar, hal
tersebut
dapat
pemrogram
menghambat
yang
produktivitas
berdampak
pada
pengembangan aplikasi secara kesuluruhan.
Untuk memvalidasi pola yang dibuat, dibuat
aplikasi generator untuk membangkitkan kode
program,
dimana
desain
aplikasi
yang
dihasilkan oleh kode generator mengacu pada
Penelitian ini bertujuan untuk menghasilkan
pola
pengembangan
dari
tiga
pola PLBWD yang dikembangkan.
platform
pengembang PLBWD, yaitu Java EE, .NET,
1.2 Identifikasi Masalah
PHP. Dari tiap platform dipilih satu teknologi
Berdasarkan latar belakang yang dipaparkan,
untuk diteliti, yaitu 1) : PHP dipilih teknologi
didapatkan
YII. Alasanya adalah karena YII membantu
berikut :
pengembang
web
1. Apakah dapat dibuat pola PLBWD yang
kompleks secara cepat sehingga delivery
adaptif pada beragam platform (Java EE,
pada pelanggan dapat tepat waktu; 2) Java
NET, dan PHP)?
EE
dipilih
menawarkan
membangun
JSF.
Alasanya
solusi
aplikasi
identifikasi
masalah
sebagai
adalah
JSF
2. Apakah
dapat
diimplementasikan
pembangunan
web
PLBWD
yang
dikembangkan
dinamis dengan kombinasi arsitektur desain
pola
tersebut
untuk beragam platoform dan teknologi?
MVC yang powerfull dan penyusunan UI yang
berbasis komponen terstandar Java EE [1]; 3)
1.3 Tujuan Penelitian
.NET
Berikut ini merupakan tujuan dari penelitian
dipilih
.NET
Framework.
Alasan
pemilihan .NET karena semua teknologi yang
yang dilakukan:
dikembangkan Microsoft meski berbayar relatif
1. Memodelkan pola PLBWD yang adaptif
matang
dan
memiliki
kemudahan
dalam
penggunaan serta memiliki dukungan penuh
pada hal help desk.
terhadap berbagai platform.
2. Membuat
generator
yang
membangkitkan kode program dari pola
PLBWD yang dikembangkan?
66
mampu
Studi Pola Pengembangan Web Dinamis dengan Arsitektur MVC :
Implementasi pada JavaServer Faces (JSF)
II. ANALISIS DAN PERANCANGAN POLA
teknologi, dan perilaku. Mengidentifikasi
PLBWD
modul, paket, kelas, dan library yang pada
2.1. Analisis Penyelesaian Masalah
iterasi selanjutnya akan dianalisis lebih
Untuk menyelesaikan analisis pola PLBWD,
dalam.
dibutuhkan acauan untuk mendefiniskan tiap
2. Analisis dan Pemodelan Pola PLBWD
fase yang pada akhirnya sampai pada hasil
Menganalisis kode program dan elemen
analisis. Pada penelitian ini, acuan yang akan
dari aplikasi. Kode program dianalisis,
digunakan
direkam dan dimodelkan meski belum
adalah
mengadaptasi
model
proses Prototyping. Model proses protyping
dipahami
merupakan model proses yang berdiri sendiri,
didapatkan pada iterasi-iterasi selanjutnya.
tetapi dapat digunakan untuk konteks tertentu
secara
utuh.
Pola
utuh
3. Pengarsiapan Pola PLBWD
dimana masih belum ada pemahaman yang
Melakukan inventarisir pada kode-kode
jelas dari apa yang hendak dikembangkan
aplikasi yang dianalisis. Kode tesebut
(Pressman [4]). Berikut representasi model
dikomparasi dengan kode pada aplikasi
proses Prototyping pada Gambar 1.
lain. Komprasi dari kode-kode tersebut
diabstraksi
untuk
mendapatkan
pola
PLBWD yang bersifat generik.
4. Evaluasi Pola PLBWD
Mengecek
sebelumnya,
hasil
analisis
kemudian
pada
iterasi
mengindetifikasi
dan menggabungkan dengan hasil analisis
terbaru. Mencocokan pola generik terbaru
dengan literatur.
2.2. Resume Hasil Analisis Pola PLBWD
untuk Tiap Lapisan MVC
Gambar 1
Model proses hasil adaptasi dari Prototyping [4].
Berikut resume hasil analisis dari tiap lapisan
MVC, direpresentasikan pada Tabel 1, 2 dan
Dari representasi pada Gambar 1 di atas,
3.
Tabel 1
berikut paparan dari tiap fase :
1. Identifikasi Spesifikasi
Mengenali dan berinteraksi dengan aplikasi
untuk mendapatkan spesikasi, arsitektur,
Lapisan View
No
1
View
Script
language
JSF
Razor
YII
JSF
Razor
PHP
67
Infomatek Volume 18 Nomor 2 Desember 2016 : 65 - 76
No
2
3
4
5
6
7
8
9
10
11
View
HTML
support
Direktori
View layer
Tempale
Framework
JSF
Razor
YII
Ya
Ya
Ya
WebContent
Views
views
Facelete
Razor
Twig
Validasi
Ya
Ya
Ya
Ekstensi
default
Penerapan
Clean code
Direktori
penyimapa
nan
aset/source
(CSS,
JavaScript)
Template
anatarmuk
a
Teknologi
interaksi
antarmuka
dengan
controller
Internation
alizati dan
localization
.html
.cshtml
.php
Ya
Tidak
Tidak
WebContent/
CSS
WebContent/
Script
WEBINF/Template
Content
Scripts
Views/Sha
red
No
web/css
web/ass
ets
View
JSF
Razor
YII
dan
lain-lain
2
Bahasa
Java
C#
PHP
3
Paradigma
Obejact
Oriented
Object
Oriented
Object
Oriente
d
4
Direktori
lapisan
controller
WEB-INF/lib
Controllers
controll
ers
5
Front
controller
FacesServlet
.java
RouteConfi
g.cs
YIIAplic
ationCo
ntroller.
php
6
Validasi
antarmuka
(return)
Ya
Ya
Ya
web.xml
AuthConfig.
cs,
BundleConf
ig.cs,
FilterConfig
.cs
RouterConf
ig.cs
webApiCon
fig.cs
Config.
php
WEB-INF/lib
packages
vendor
WEBINF/facesconfig.xml
Views/Web
.config.xml
Paginat
ion.php
Tidak
Ya
Ya
Twig
7
Expresi
Language
(EL)
@
character
-
Ya
Ya
Ya
8
9
Pada Tabel 1 dipaparkan hasil analisis dari
lapisan view untuk semua platform. Dapat
10
Penaganan
konfigurasi
aplikasi
Direktori
libary
Konfigurasi
navigasi
halaman
Variable
global
dilihat detail implementasi, pendekatan, dan
teknologi
yang
digunakan
berbeda-beda.
Pada Tabel 2 dipaparkan hasil analisis dari
Selanjutnya dari perbedaan tersebut akan
lapisan
abstraksi
Lapisan controller yang dipilih pada peneltian
untuk
mendapatkan
pola
yang
controller
adaptif untuk lapisan view dan interaksi
ini
untuk
tiap
dengan controller.
menggunakan
untuk
semua
platform,
JSF,
yaitu
.NET
platform.
Java
EE
menggunakan
Framework .NET, dan PHP menggunakan YII.
Tabel 2
Sama dengan lapisan view, pada lapisan
Lapisan Controller
No
1
68
View
JSF
Razor
Framework
Alternatif
Spring MVC,
Struts2, dan
lain-lain
-
controller detail implementasi, pendekatan,
YII
Laravel,
CI,
Cake
PHP,
dan teknologi yang digunakan berbeda-beda,
karena
dibangun
pendekatan
yang
dengan
platform
berbeda.
dan
Selain
Studi Pola Pengembangan Web Dinamis dengan Arsitektur MVC :
Implementasi pada JavaServer Faces (JSF)
mengabstraksi pada lingkungan controller,
Jika menggunakan framework mandiri, maka
diperhatikan
memiliki
juga
keseragaman
dari
efek,
yaitu
adanya
mekanisme
mekasnisme interaksi dengan lapisan lain.
konfigurasi untuk menjembatani spesifikasi
Keseragaman
controller
controller dengan model. Pola PLBWD yang
menggunakan
dikembangkan harus mampu adaptif terhadap
Interfacing
berbagai framework dari model yang mandiri
dengan
interaksi
lapisan
pendekatan
antara
lain
interfacing.
mendefiniskan interaksi secara seragam dan
tersebut.
Keunggulan
dari
menggunakan
tidak terbebas dari spesikasi platform dan
framework adalah efisiensi dan produktivitas
teknologi (Hao [5]).
pengembangan
dan
pemanfaatan
kemampuan dari framework tersebut untuk
Tabel 3
berbagai hal terkait penanganan data dan
Lapisan Model
No
View
1
Alternarif
Framework
2
Bahasa
3
Paradigma
4
5
6
7
Direktori
lapisan
model
Penerapan
Persistence
Konfigurasi
aplikasi
dengan
database
Deklarasi
Anotasi
interaksi antara aplikasi dengan basis data
JSF
Eclipselink,
Ibatis, dan
lain-lain
Razor
YII
DAO
Framework
Eloquent
Java
C#
PHP
Obejact
Oriented
Java
Resources/
src
Object
Oriented
Object
Oriented
Fase berikutnya adalah fase perancangan dari
Models
models
platform. Fase ini dilakukan dengan membuat
Native
Native
Third
party
model arsitektur PLBWD dari tiap platform.
Src/hiberna
te.cfg.xml
Web.config
.xml
config/db
.php
@entity
[HttpPost]
(Xia [6]).
2.3 Rancangan Pola PLBWD
pola
PLBWD
Deskripsi
berbasis
perancangan
memodelkan
arsitektur
MVC
untuk
dilakukan
tiap
dengan
berdasarkan
hasil
analisis. Dikembangkannya model dari tiap
platform
PLBWD
dapat
membantu
produktivitas pemrogram ketika harus pindah
Pada Tabel 3 dipaparkan hasil analisis dari
dari
lapisan model untuk semua platform. Detail
Berdasarkan
implementasi, pendekatan, dan teknoogi yang
pandang abstrak, model arsitektur PLBWD
digunakan berbeda-beda. Pada platform Java
yang menerapkan MVC memiliki arsitektur dan
EE dan .NET lapisan model menggunakan
alur proses yang identik. Berikut rancangan
framework spesifik, yaitu Hibernate dan Entity
pola PLBWD untuk tiap platform.
Framework, Sedangkan pada
menggunakan
framework,
satu
platform
ke
plarform
hasil
analisis,
dari
lain.
sudut
PHP tidak
lapisan
model
1. Model konseptual Pola PLBWD pada .NET
dikelola secara terintegrasi oleh teknologi YII.
69
Infomatek Volume 18 Nomor 2 Desember 2016 : 65 - 76
Controller
Controller
.NET Framework
.NET Framework
RouteConfig.cs
Klien
Request (1)
Klien
HTTP Routing
HTTP Handler
Perambah
Perambah
Kelas-kelas
Controler
Response
View
YII Aplication
Router.php
Request (1)
Kelas-kelas
Controller.php
Response
View
Renderer
HTML
Renderer
HTML
Model
Model
UI Razor
Entity
Entity
UI Twig
Entity
Entity
Framework
Framework
Active Record
DAO
Basisdata
Basisdata
Gambar 2
Gambar 3
Model konseptual Pola PLBWD pada .NET
Model Konseptual Pola PLBWD pada PHP
Dari representasi Gambar 2 dapat paparkan
c. Front
controller
berada
pada
lapisan
sebagai berikut:
controller.
Penanganan
front
a. UI Diletakan pada direktori Views. Secara
dilakukan
oleh
RouteConfig.cs.
default di dalam direktori Views terdapat
RouteConfig.cs didaftrakan pada direktori
direktori-direktori
App_Start.
lain
yang
sama
RouteConfig
yang
penamaannya dengan nama kelas action di
bertanggunag jawab memetakan request
kelas controller, kecuali direktori Shared.
pada kelas controller atau action dari kelas
Direktori Shared berisi berkas-berkas UI
controller
yang menjadi template yang digunakan
merupakan direktori yang bersisi semua
untuk semua halaman web.
konfigurasi yang dijalankan pada saat
b. Untuk berinterasksi antara view (tag Razor)
dengan
controler
(Bahasa
menggunakan teknologi @.
C#)
yan
sesuai.
App_Start
inisiasi aplikasi. Contoh pemetaan request
dengan
kelas
akademik/nilai/123040.
merupakan
70
kelas
controller
kelas
controller
:
Akademik
controller,
nilai
Studi Pola Pengembangan Web Dinamis dengan Arsitektur MVC :
Implementasi pada JavaServer Faces (JSF)
merupakan action, dan 23040 merupakan
didefinisakan public. Akses ke basis data
id.
dapat menggunakan beragam teknik dan
d. Bersifat action centris : dimana setiap
teknologi seperti framework ADO, Entiry
request akan ditangani oleh sebuah objek
Framework,
logical berupa Controller.
menggunakan simbol [ ]. Regitrasi basis
NO
SQL.
Anotasi
2. Model Konseptual Pola PLBWD pada PHP
data, didaftarkan dan dipetakan pada
Dari representasi gambar 3 dapat paparkan
berkas WebConfig.cs.
sebagai berikut:
a. Lapisan view ditempatkan pada direktori
views. YII memiliki sekumpulan library
3. Model Konseptual Pola PLBWD pada Java EE
Controller
antarmuka UI yang siap pakai yang
disebut
widget.
Untuk
JSF
melakukan
komunikasi
dengan
controller
memerlukan
teknologi
khusus,
Faces-config.xml
tidak
Face
Servlet
karena
Action Handler &
Action Listener
Request (1)
lapisan
dari
keduanya
menggunakan
bahasa PHP. Kecuali jika UI menggunakan
bahasa selain PHP, seperti Java Script,
maka memerlukan teknologi penghubung
Klien
Model
Hibernate
JSF
Perambah
seperti JSON.
b.
Front controller
berada
pada
lapisan
controller. Front controller ditanagi oleh
Config.php.
Front
controller
bertugas
memetakan request ke kelas controller
yang sesauai. Front controller pada YII
bersifat
berfungsi
action
page.
menerima
URL
Bean
Response
View
Renderer
HTML
Entity
DAO
Komponen
JSF
Manager
requst
dari
Basisdata
Application, secara teknis URL Manager
yang melakukan pemetaan pada kelas
controller.
c.
Lapisan model berada pada direktori
Models. Secara umum pola dasar dari
kelas entity didefinisikan sebagai Plain Old
CLR Object (POCO). Visibility atribut
Gambar 4
Model Konseptual Pola PLBWD pada Java EE
Dari representasi Gambar 4 dapat paparkan
sebagai berikut:
a. Front controller diletakan pada direktori
Web Content. UI menggunakan konsep
71
Infomatek Volume 18 Nomor 2 Desember 2016 : 65 - 76
berbasis
komponen.
Setiap
komponen
Dari
paparan
tiap
platform
kemudian
pada JSF dapat ditangani oleh kelas bean
diabstraksi
secara mandiri.
pengembangan PBWD sebagai berikut :
b. Tidak mengijinkan penangangan logika di
halaman
JSF,
sehingga
kode
dijamin
kebersihannya.
c. Menggunakan
template
facet
untuk
penanganan templating.
untuk
mendefinisikan
pola
a. Front Controller : Berada Pada lapisan
controller.
Bertanggung
menerima
request
melakukan
pemetaan
controller,
menjalankan
jawab
dari
klien
untuk
dan
terhadap
kelas
operasi
yang
d. Untuk berinterasksi antara view (JSF)
diperlukan untuk menghasilkan response.
dengan bean (bahasa Java) menggunakan
Semua request dari klien harus melewati
teknologi Expression Language (EL).
front controller.
e. Front
controller
kelas
b. Controller : Bagian yang menjembatani
didaftarkan
antara lapisan yang lain. Pola controller
pada kelas web.xml. Untuk memetakan
harus mampu adaptif pada keberagaman
path requst ditangani oleh faces-config.xml
platform dan teknologi di lapisan yang lain.
FacesServlet.
Ditangani
FacesServlet
oleh
atau anotasi yang sesuai dengan kelas
View
merupakan
bagian
yang
bean. Untuk dapat dikenali kelas bean
bertanggung jawab menangani UI. UI yang
harus dipetakan dengan halaman JSF.
dimaksud
FacesServlet selain dapat menunjuk ke
ditayangkan pada sebuah perambah. View
faces-config.xml,
menangani bagaimana sebuah informasi
juga
dapat
ActionEvent/Listener
menunjuk
jika
requset
membutuhkan action.
disajikan
adalah
HTML
kepada
yang
pengguna
akan
melalui
perambah.
f. Lapisan model berada pada direktori src.
d. Model: Lapisan yang berinteraksi dengan
Identitas letak kelas entiry berdasarkan
basisdata.
penamaan paket. Secara umum pola dasar
merupakan
dari kelas entity didefinisikan sebagai Plain
relasional, dan setiap atribut entity sesuai
Old Java Object (POJO). Interaksi dengan
dengan kolom(field) pada tabel. Tugas
basisdata
model
Relation
menggunakan
Model
teknik
(ORM).
Object
Anotasi
pemetaan
sebagainya.
ditangani
4. Model konseptual pola PLBWD
oleh
tabel
sebuah
dalam
dan
DAO)
entity
basisdata
bervariasi
:
melakukan query ke basisdata, mengolah
data
basisdata
Biasanya
(entity
menggunakan karakter @. Registrasi dan
Hibernate.cfg.xml.
72
c. UI:
menurut
logika
bisnis,
dan
Berikut model konseptual pola umum PLBWD
direpresentasikan pada Gambar 5.
Studi Pola Pengembangan Web Dinamis dengan Arsitektur MVC :
Implementasi pada JavaServer Faces (JSF)
menggunakan
framework
Pembangkitan
Controller
controller
Hibernate.
dan
UI
akan
kode
UI
pada
kembangkan sendiri.
Klien
Front Controller
Request (1)
3.2 Pembangkitan kode UI
Perambah
Proses
Kelas-kelas
Controller
Response
membangkitkan
penelitian
ini
FreeMarker.
View
Renderer
HTML
menggunakan
Secara
membangkitkan
Model
umum
antarmuka
proses
menggunakan
FreeMarker melibatkan template, kelas entity,
Entity
Entity
UI
template
dan
DAO
konfigurasi
FreeMarker.
Proses
pembangkitan UI menggunakan FreeMarker
direpresentasikan pada Gambar 6.
Template
FreeMarker
Basisdata
Kelas Entiry
Gambar 5
Model konseptual pola PLBWD
Antarmuka JSF
FreeMarker
Engine
III. IMPLEMENTASI KODE GENERATOR
PLBWD
Komponen JSF
3.1 Analisis dan Desain
Bagian ini,
memaparkan proses analisis,
perancangan
menguji
hingga
Pola
MVC
implementasi
PLBWD
untuk
Gambar 6
dengan
Arsitektur Pembangkit kode program
mengembangkan sebuah aplikasi pembangkit
kode program. Aplikasi yang dikembangkan
3.3 Kompoen UI JSF
hanya dengan platform Java EE. Aplikasi
Komponen
diberi nama aplikasi Generator Antarmuka
memungkinkan komponen JSF untuk dapat
Pengguna
mampu
dikembangkan.
dan controller,
menambahkan
(GAP).
Aplikasi
membagkitkan lapisan
UI
akan
JSF
bersifat
extensibe,
Pengembang
fitur-fitur
yang
ini
dapat
dibutuhkan.
sedangkan untuk pembangkitan lapisan model
Contoh
akan menggunakan kakas dari framework
pengguna JSF pada sebuah halaman facelets
penerapan
komponen
antarmuka
Hibernate. Proses pembangkitan kelas model
73
Infomatek Volume 18 Nomor 2 Desember 2016 : 65 - 76
beserta
hirarki
dari
komponen
UI
yang
merupakan kelas yang mewakili tabel pada
diciptakan, direpresentasikan pada Gambar 7.
basisdata relasional, setiap penciptaan objek
dari kelas entity merupakan satu baris data
pada sebuah tabel, dan setiap atribut pada
kelas entity merupakan atribut pada sebuah
tabel. Untuk membuat sebuah kelas entity,
pada penelitian ini menggunakan fungsi yang
dimiliki
oleh
framework
Hibenate,
yaitu
Hibernate Mapping Files and POJOs from
Database, fungsi ini menghasilkan kelas entity
yang didapat dari
hasil pemetaan dengan
tabel yang ada pada basisdata; 2) pengikat
Komponen JSF : Mengikat komponen JSF
dengan
kelas
entity
menciptakan
keterhubungan antara halaman persentasi
dengan lapisan model. Mengikat komponen UI
dengan kelas entity dapat diartikan bahwa
setiap pengubahan nilai yang terjadi pada
Gambar 7
Contoh alur pemrosesan kode UI pada JSF
komponen
UI
akan
berpengaruh
atau
dipengaruhi oleh kelas entity yang terkait.
Terlihat bahwa komponen dan
Untuk dapat megikat komponen JSF dengan
berasal dari kelas komponen
kelas entity adalah dengan melalui kelas
yang sama yaitu Kelas UI Input. Namun, yang
managed bean, dimana kelas managed bean
membedakan adalah kelas yang me-rendering
tersebut memiliki atribut bertipe kelas entity.
komponen
Managed bean adalah kelas Java yang
tersebut,
dimana
di-rendering
htmlInputText,
sedangkan
dirender
komponen
oleh
kelas
komponen
oleh
kelas
HtmlInputSecret.
terdaftar pada JSF, hanya kelas yang terdaftar
sebagai
managed
bean
yang
dapat
berinterkasi secara langsung dengan halaman
JSF. Managed bean dapat berisi method
getter dan setter, logika bisnis atau bahkan
Pada peneltian ini terdapat dua fungsi utama
dari kelas entity, yaitu kelas entity sebagai 1)
representasi
74
basisdata:
Kelas
entity
backing bean.
Studi Pola Pengembangan Web Dinamis dengan Arsitektur MVC :
Implementasi pada JavaServer Faces (JSF)
IV. PENGUJIAN APLIKASI
Setelah
Setelah apliksai GAP dibuat, maka akan
selanjutnya dilakukan komparasi pola PLBWD
dilakukan pengujian pembangkitan kode UI
hasil perancangan dengan pola PLBWD hasil
menggunakan studi kasus. Pengujian aplikasi
pembangkitan GAP. Cara membandingkan
dilakukan
arsitektur dari keduanya adalah dengan cara
dengan
(comformance)
uji
dibangkitkan,
melihat struktur project masing-masing dan
PLBWD dengan hasil pembangkitan kode
melihat secara rinci kode program hasil
program
pembangkitan GAP.
dilakukan
aplikasi
dengan
rancangan
program
pola
dari
antara
kesesuaian
kode
GAP.
Pengujian
membangkitkan
kode
program dari basisdata. Setelah dibangkitkan
VI. KONKLUSI DAN PENELITIAN
kode program oleh GAP, selanjutnya dilihat
LANJUTAN
arsitektur aplikasi hasil pembagkitan tersebut
Berdasar
dengan arsitektur perancangan yang telah
sebelumnya dapat ditarik beberapa simpulan
dibuat.
sementara dalam penelitian ini, yaitu :
pembahasan
pada
bab-bab
1. Telah dihasilkan model pola PLBWD
Tampilan
UI
hasil
pembangkitan
untuk tiga platform (Java EE, .NET, PHP)
GAP,
direpresentasikan pada Gambar 8.
dari hasil analisis, sehingga pola yang
dihasilkan dapat membantu pemrogram
pada saat harus berpindah platform.
2. Telah dibuat aplikasi GAP pada platform
JAVA EE menggunakan teknologi JSF
untuk menguji pola PLBWD yang telah
didefiniskan. PLBWD yang dihasilkan dari
aplikasi GAP sudah dievaluasi dengan
cara mencocokan pola PLBWD pada hasil
Gambar 8
perancangan dengan pola PLBWD yang
UI hasil pembangkitan GAP.
dihasilkan dari aplikasi GAP.
V. EVALUASI
Berdasar studi kasus yang telah dipaparkan
DAFTAR PUSTAKA
sebelumnya, menunjukkan bahwa untuk dapat
[1]
Burns,
E.
and
mengetahui pola PLBWD dengan kakas GAP,
JavaServerFaces
maka harus dilakukan pembangkitan kode
McGraw-Hill, 2009.
program
terlebih
dahulu
dari
2.0,
Schalk.
New
C.,
York:
basisdata.
75
Infomatek Volume 18 Nomor 2 Desember 2016 : 65 - 76
[2]
Caytiles. R. D., and Lee. S., "A Review
of an MVC Framework based Software
[3]
Hao. H. M., and Jaafar. A., "Tracing User
Interface
Software
Its
Generate Interface Design Specification,"
Applications, vol. 8, pp. 213 - 220,
Electrical Engineering and Informatics,
2014.
2009, vol. 1, pp. 287 - 292, 2009.
Jiang.
Y.,
Engineering
Cheng,
Albert,
and
Zou
and
[6]
Design
Pre-requirement
to
Xia. C., Yu. G., and Tang. M., "Efficient
Xingliang, "Schedulability Analysis for
Implement of ORM (Object/Relational
Real-Time P-FRP Tasks under Fixed
Mapping)
Priority
Scheduling,"
Computing
Use
in
J2EE
Framework:
Computational
Intelligence
Embedded
and
Hibernate,"
Systems
and
and Software Engineering, 2009. CiSE
Applications (RTCSA) IEEE, 2015.
2009. International Conference on , pp. 1-
Pressman. R. S., Software Engineering:
3, 2009.
A Practitioner Approach 7th Edition, New
76
[5]
Development," International Journal of
Real-Time
[4]
York: McGraw-Hill., 2012.