7/21/2019 JavaServerFaces
http://slidepdf.com/reader/full/javaserverfaces 1/14
Bab 2. JavaServer Faces
2.1 Tentang JavaServer Faces
JavaServer Faces adalah framework Java berbasis web yang berfungsi untuk memudahkan dalam
pengembangan integrasi interface aplikasi berbasis web. JavaServer Faces merupakan sebuah
framework web berbasis MVC yang memudahkan membuat User Interface ( U! dari aplikasi
berbasis server dengan menggunakan komponen " komponen yang telah disediakan.
JavaServer Faces menyediakan fasilitas koneksi widget " widget dengan data source dan
server-side event handler. Spesifikasi JSF mendefinisikan komponen U standard an
menyediakan Application Programming Interface #$%! untuk mengembangkan komponen yang
ada.
2.2 Siklus Kerja dan Arsitektur
Untuk membangun aplikasi berbasis web& JavaServer Faces menggunakan metode MVC # Model
– View – Controller !. Metode MVC sendiri adalah pembuatan aplikasi dimana data # Model !
terpisah dari tampilannya #View!& lalu melakukan pemanggilan #Controller ! data " data yang
terkait.
Model adalah semacam struktur data yang dipakai dalam aplikasi tersebut. Contohnya
adalah memasukan data ke dalam basis data& perubahan data& dan sebagainya. View merupakan
tampilan #interface! dari aplikasi web yang dibangun. 'alam view ini dapat diatur sedemikian
rupa agar interface dari aplikasi tersebut menarik. (iasanya dalam view ini menggunakan tag "
tag )*M+ dan ,uga bisa menambahakan JavaScript agar lebih dinamis. ontroller dapat
dikatakan sebagai -,embatan antara model dan view. Controller berisi perintah " perintah
pemanggilan basis data lalu ditampilkan ke dalam interface.
7/21/2019 JavaServerFaces
http://slidepdf.com/reader/full/javaserverfaces 2/14
/ambar 0.1 $rsitektur JavaServer Faces
JSF memiliki elemen Servlet yang berfungsi sebagai controller . Servlet bertanggung
,awab untuk menerima re2uest dari client dan men,alankan operasi yang diperlukan untuk
menghasilkan response. 3perasi yang dimaksud adalah menyiapkan komponen " komponen U
yang dibutuhkan untuk re2uest& meng4update status komponen& memanggil action handler yangdibutuhkan dan komponen " komponen U hasil render yang merupakan bagian dari response.
(erikut contoh script4nya 5
6servlet7
6servlet4name7FacesServlet68servlet4name7
6servlet4class7,ava9.faces.webapp.FacesServlet68servlet4class7
6load4on4startup7168load4on4startup7
68servlet7
:
6servlet4mapping7
6servlet4name7FacesServlet68servlet4name7
7/21/2019 JavaServerFaces
http://slidepdf.com/reader/full/javaserverfaces 3/14
6url4pattern7;.,sf68url4pattern7
68servlet4mapping7
/ambar 0.0 Siklus <er,a JavaServer Faces
2.! "nstalasi
Untuk membuat JSF& dibutuhkan beberapa perangkat lunak # software! pendukung& seperti 5
4 J'< #Java 'evelopment <it!
4 =clipse '=
4 *omcat #bisa menggunakan >$M%% [email protected]!
2.!.1 J#K $Java #evelo%&ent Kit'
J'< berfungsi sebagai compiler dari Java. Untuk membangun aplikasi JSF& J'< yang
diperlukan minimal versi 1.?. Untuk J'<4nya sendiri bisa didownload dari
http588www.oracle.com8technetwork8,ava8,avase8downloads8inde9.html. setelah mendownload
dan instalasi J'<& lakukan verifikasi apakah sudah terinstall atau belum. (erikut cara verifikasi
berdasarkan masing 4 masing 3S 5
7/21/2019 JavaServerFaces
http://slidepdf.com/reader/full/javaserverfaces 4/14
Contoh output untuk 3S Aindows 5
/ambar 0.B Verifikasi nstalasi J'< di Aindows
Setelah melakukan verifikasi& langkah selan,utnya adalah mengatur path yang meru,uk ke
direktori instalasi J'<& agar program ,ava yang dibuat dapat dicompile. %ada dasarnya& file 4 file
,ava tersebut di dalam folder JavaversiD,dkbin agar dapat dicompile. Eamun ,ika sudah
mengatur path yang meru,uk ke direktori tersebut& maka file ,ava dapat dicompile di direktori
lain. (erikut cara mengatur path pada Aindows 5
4 <lik kanan My Computer → Properties& lalu pilih Advanced S(ste&
Settings
7/21/2019 JavaServerFaces
http://slidepdf.com/reader/full/javaserverfaces 5/14
4 %ada tab Advanced& pilih )nviron&ent Variables
4 %ada S(ste& Variables& pilih Eew& lalu isi masing 4 masing field sebagai berikut 5
7/21/2019 JavaServerFaces
http://slidepdf.com/reader/full/javaserverfaces 6/14
%ada field Variable Value& sesuaikan dengan direktori instalasi J'< dan versi J'< yang
diintstall. <lik 3<.
4 Selan,utnya cari variabel *at+ pada System Variables& pilih )dit& lalu tambahkan
,-JAVA/0M)-bin, dalam field Variable Value& klik 3< ,ika sudah selesai
2.!.2 )cli%se "#)
Setelah J'< berhasil diinstall& langkah selan,utnya adalah menginstall =clipse '=.
'ownload file instalasinya pada http588www.eclipse.org8downloads8 lalu pilih OS yang
sesuai (misal : Windows) → Eclipse IDE For Java EE Developers
/ambar 0. File nstalasi =clipse '=
Setelah file berhasil didownload& file tersebut berupa rar atau Gip. =kstract file ke direktori yang
diinginkan& lalu pilih eclipse.e9e untuk men,alankan =clipse '=.
7/21/2019 JavaServerFaces
http://slidepdf.com/reader/full/javaserverfaces 7/14
=clipse akan meminta direktori workspace untuk menyimpan pro,ect dari =clipse '=& misalkan
penyimpanannya di '5%ro,ect J0==& lalu pilih 3<
2.!.! To&cat
Untuk instalasi *omcat terdapat 0 cara& yaitu standalone #download file instalasi dan
setting path! dan berupa plugin pada >$M%%. Untuk lebih mudah dapat menggunakan cara
kedua. 'ownload terlebih dahulu file >$M%% pada
https588www.apachefriends.org8download.html& namun sebelum mendownload pastikan terlebih
dahulu apakah >$M%% tersebut memiliki plugin *omcat atau tidak.
/ambar 0.? Cara Mengetahui si %lugin 'ari >$M%%
Setelah file berhasil didownload& install seperti biasa& lalu buka >$M%% Control %anel ,ika
proses instalasi sudah selesai. Jika >$M%% memiliki plugin *omcat& maka tampilan Control
%anel4nya adalah sebagai berikut 5
7/21/2019 JavaServerFaces
http://slidepdf.com/reader/full/javaserverfaces 8/14
/ambar 0.@ >$M%% Control %anel
2. Facelets
Facelets adalah halaman deklarasi yang berfungsi untuk membangun komponen U dari
JavaServer Faces #JSF!. /aya bahasa yang digunakan dalam facelet adalah )*M+. Facelet
sangat powerfull tetapi tetap ringan. )al itu yang mendasari facelet sering digunakan sebagai
template dalam pembuatan JSF. %ada dasarnya& template default yang dimiliki JSF adalah JS%
# ava!erver Page". Fitur 4 fitur yang dimiliki facelet meliputi 5
1. %enggunaan >)*M+ untuk membuat halaman web.
0. Mendukung penggunaan faceletes tag li#raries& disamping JSF dan JS*+ tag
li#raries.B. Memiliki dukungan untuk $%pression &anguage #=+!.
. Mampu sebagai template untuk komponen dan halaman.
Facelet ,uga disebut sebagai template engine untuk JSF. <euntungan menggunakan
Facelets dibanding JS% adalah dengan Facelets& desain tampilan dapat diker,akan oleh web
designer. JSF dengan JS% akan banyak sekali menggunakan taglib yang tidak akan muncul di
Macromedia 'reamweaver atau editor )*M+ lainnya. (erikut taglib yang dimiliki oleh JSF 5
7/21/2019 JavaServerFaces
http://slidepdf.com/reader/full/javaserverfaces 9/14
/ambar 0.B *ag+ib dari JSF
Meskipun JSF memiliki taglib& JSF menggunakan dasar 4 dasar )*M+& sehingga
argumen yang digunakan adalah bahasa )*M+. $da beberapa tag 4 tag dasar JSF yang sering
digunakan untuk membangun U& seperti pembuatan te9tbo9& label& checkbo9& te9t area& dansebagainya. (erikut tag 4 tag dasar tersebut 5
*ag <egunaan
h5input*e9t untuk membuat *e9t(o9 dengan tipe te9t
h5inputSecret untuk membuat *e9t(o9 dengan tipe password
h5input)idden untuk membuat *e9t(o9 dengan tipe hidden
h5input*e9tarea untuk membuat *e9t$rea
h5select(ooleanCheckbo9 untuk membuat sebuah checkbo9
h5selectManyCheckbo9 untuk membuat sekumpulan checkbo9
h5select3neHadio untuk membuat sebuah radio button
7/21/2019 JavaServerFaces
http://slidepdf.com/reader/full/javaserverfaces 10/14
h5select3ne+istbo9 untuk membuat sebuah list bo9
h5selectMany+istbo9 untuk membuat beberapa list bo9
h5select3neMenu untuk membuat combo bo9
h5output*e9t untuk mencetak hasil inputan
h5outputFormat untuk mencetak hasil inputan dengan parameter
h5graphicmage untuk menampilkan8menyisipkan gambar
h5outputStylesheet untuk meng4import file CSS
h5outputScript untuk meng4import file )*M+
h5command(utton untuk membuat button
h5+ink
untuk menyisipkan hyperlink h5command+ink
h5output+ink
h5panel/rid untuk menyisipkan tabel
(erikut contoh pembuatan aplikasi JSF sederhana 5
3 Js45agi.java
package com.cobaI
public class Jsf+agi
private String nameI
private String npm& kelas& ,ur& fakI
public String getEame #!
return nameI
K
public void setEame #final String name!
7/21/2019 JavaServerFaces
http://slidepdf.com/reader/full/javaserverfaces 11/14
this.name L nameI
K
public String getEpm #!
return npmI
K
public void setEpm #final String npm!
this.npm L npmI
K
public String get<elas #!
return kelasI
K
public void set<elas #final String kelas!
this.kelas L kelasI
K
public String getJur #!
return ,urI
K
public void setJur #final String ,ur!
7/21/2019 JavaServerFaces
http://slidepdf.com/reader/full/javaserverfaces 12/14
this.,ur L ,urI
K
public String getFak #!
return fakI
K
public void setFak #final String fak!
this.fak L fakI
K
K
3 login.6+t&l
6'3C*N%= html %U(+C O488ABC88'*' >)*M+ 1.P *ransitional88=EO
Ohttp588www.wB.org8*H89html18'*'89html14transitional.dtdO7
6html 9mlnsLOhttp588www.wB.org81QQQ89htmlO
9mlns5uiLOhttp588,ava.sun.com8,sf8faceletsO
9mlns5hLOhttp588,ava.sun.com8,sf8htmlO
9mlns5fLOhttp588,ava.sun.com8,sf8coreO7
6ui5composition templateLO8A=(4EF8templates8(asic*emplate.9htmlO7
6ui5define nameLOcontentO7
6h5form7
7/21/2019 JavaServerFaces
http://slidepdf.com/reader/full/javaserverfaces 13/14
6h5panel/rid rowsLO?O7
6h5output*e9t valueLOMasukkan E%MO768h5output*e9t7
6h5input*e9t valueLOR,sf+agi.npmKO768h5input*e9t7
6h5output*e9t valueLOMasukkan EamaO768h5output*e9t7
6h5input*e9t valueLOR,sf+agi.nameKO768h5input*e9t7
6h5output*e9t valueLOMasukkan <elasO768h5output*e9t7
6h5input*e9t valueLOR,sf+agi.kelasKO768h5input*e9t7
6h5output*e9t valueLOMasukkan JurusanO768h5output*e9t7
6h5input*e9t valueLOR,sf+agi.,urKO768h5input*e9t7
6h5output*e9t valueLOMasukkan FakultasO768h5output*e9t7
6h5input*e9t valueLOR,sf+agi.fakKO768h5input*e9t7
68h5panel/rid7
6h5command(utton valueLOSimpanO actionLOSubmitO768h5command(utton7
68h5form7
68ui5define7
68ui5composition7
68html7
3 welco&e.6+t&l
6'3C*N%= html %U(+C O488ABC88'*' >)*M+ 1.P *ransitional88=EO
Ohttp588www.wB.org8*H89html18'*'89html14transitional.dtdO7
6html 9mlnsLOhttp588www.wB.org81QQQ89htmlO
9mlns5uiLOhttp588,ava.sun.com8,sf8faceletsO
7/21/2019 JavaServerFaces
http://slidepdf.com/reader/full/javaserverfaces 14/14
9mlns5hLOhttp588,ava.sun.com8,sf8htmlO
9mlns5fLOhttp588,ava.sun.com8,sf8coreO7
6ui5composition templateLO8A=(4EF8templates8(asic*emplate.9htmlO7
6ui5define nameLOcontentO7
6h5panel/rid rowsLO?O7
6h5output+abel valueLOE%M 5 R,sf+agi.npmKO768h5output+abel7
6h5output+abel valueLOEama 5 R,sf+agi.nameKO768h5output+abel7
6h5output+abel valueLO<elas 5 R,sf+agi.kelasKO768h5output+abel7
6h5output+abel valueLOJurusan 5 R,sf+agi.,urKO768h5output+abel7
6h5output+abel valueLOFakultas 5 R,sf+agi.fakKO768h5output+abel7
68h5panel/rid7
68ui5define7
68ui5composition7
68html7