JavaServerFaces

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.



/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



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

http://www.oracle.com/technetwork/java/javase/downloads/index.html

http://www.oracle.com/technetwork/java/javase/downloads/index.html



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



4 %ada tab Advanced& pilih )nviron&ent Variables

4 %ada S(ste& Variables& pilih Eew& lalu isi masing 4 masing field sebagai berikut 5



%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 '=.

http://www.eclipse.org/downloads/

http://www.eclipse.org/downloads/



=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

https://www.apachefriends.org/download.html

https://www.apachefriends.org/download.html



/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



/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



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!



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!



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



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



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

JavaServerFaces

Documents