Rabu, 14 Maret 2012

Aplikasi Web Dalam Java EE dengan Netbeans IDE


I.          PENDAHULUAN
Tutorial ini adalah seri pertama dari rangkaian tulisan mengenai pengembangan aplikasi Java EE (Java Enterprise Edition) yang akan penulis sampaikan.
Untuk diketahui bahwa arsitektur aplikasi Java EE adalah seperti pada gambar 1.1 dibawah. Java EE mengimplementasi arsitektur Three Tier.
Gambar 1.1. Arsitektur Java EE
Sedangkan pendekatan layer untuk pengembangan aplikasi JEE yang diusulkan oleh Derek C. Ashmore dapat digambarkan seperti pada gambar 1.2 dibawah.
Gambar 1.2. Software Layer for JEE Applications.
Dalam tutorial ini  akan didemonstrasikan membuat aplikasi web, mendeploy ke server dan menampilkannya dalam sebuah browser menggunakan NetBeans IDE sekaligus mencoba membuat aplikasi melalui cara ‘drag and drop’ layaknya pemrograman visual menggunakan IDE semacam Visual Basic, Delphi, dan lainnya.
Aplikasi akan menggunakan JavaServer Page (JSP) yaitu index.jsp untuk meminta input nama dan program JSP yang kedua yaitu response.jsp untuk merespon aksi request /submit dari user. Aplikasi juga menggunakan komponen JavaBeans yaitu NameHandler.class untuk menyimpan data yang akan ditampung didalam atribut ‘name’ selama proses HTTP session, dan juga untuk me-retrieve isi dari name yang di kirimkan ke program JSP kedua tersebut.
Adapun sumber daya software yang digunakan untuk pengembangan aplikasi ini adalah:
·    NetBeans IDE – Java version
·    Java Development Kit (JDK) – version 6
·    GlassFish Server versi 3.x
Rancangan deployment aplikasi ini adalah seperti pada gambar 1.3 dibawah.
Gambar 1.3. Deployment diagram aplikasi.
Dalam tutorial ini penulis belum menggunakan database untuk menyimpan data (name) tetapi menggunakan Java Bean dengan atribut name untuk menyimpan data.
Sedangkan gambaran interaksi antar object/komponen aplikasi dapat digambarkan dalam diagram sequence seperti pada gambar 1.4.
Gambar 1.4. Sequence diagram aplikasi.
Untuk singkatnya mungkin kita bisa segera mulai membuat aplikasinya.
II.          MEMBUAT PROYEK APLIKASI WEB
Buka NetBeans IDE anda dan kita akan membuat Proyek baru untuk aplikasi web.
1.  Pilih File > New Project (Ctrl-Shift-N) dari main menu. Pada window yang terbuka maka pada kolom Categories, pilih Java Web. Pada kolom Projects, pilih Web Application selanjutnya klik Next.
2.  Pada tahap 2, isi Project Name dengan HelloWeb pada text box yang ada.
3.  Tentukan lokasi direktori untuk menyimpan proyek di komputer anda. Kalau penulis menyimpannya di direktori D:/ ProgramTry /JavaEE. Gunakan tombol ‘Browse’ untuk memilih direktori keinginan anda.
4.  Tahap ini adalah optional jika anda ingin mencentang checkbox untuk ‘Use Dedicated Folder for Storing Libraries’ yang berarti anda akan Sharing Project Libraries. Jika mencentang maka tentukan lokasi folder libraries.
5.  Klik next, maka panel ‘The Server and Setting terbuka. Pilih versi Java EE yang diinginkan. Penulis memilih versi Java EE 6.0.
6.  Pilih server untuk men-deploy aplikasi anda. Hanya server yang telah teregistrasi di IDE anda yang akan tampil di list. Dalam tutorial ini penulis menggunakan server GlassFish 3.1. Tampak bahwa Context Path server menjadi /HelloWeb, dimana berasal dari nama proyek yang anda berikan pada tahap sebelumnya.
7.  Klik next. Kemudian didalam panel Framework, klik Finish untuk membuat proyek.
IDE akan membuat folder D:/ ProgramTry /JavaEE/HelloWeb. Folder proyek berisi semua source dan metadata, seperti halnya project’s Ant build script. Pryek HelloWeb terbuka didalam IDE. Halaman index.jsp terbuka di editor kode sumber pada window utama. Anda dapat melihat struktur proyek dalam tab window Files (Ctrl-2), dan struktur logik dalam window Project (Ctrl-1).
Gambar 2.1. Struktur Proyek
III.            MEMBUAT DAN MENGEDIT FILE KODE SUMBER APLIKASI WEB
Membuat dan mengedit file kode sumber adalah fungsi utama dari IDE. Pada tahap ini mungkin akan menyita sebagian besar waktu dalam pengembangan aplikasi. IDE mnyediakan kakas-kakas yang lumayan banyak untuk mendukung personel pengembang dari berbagai style (cara) menyusun program, apakah dilakukan secara manual (scratch from zero) atau IDE yang membuatkan kode untuk anda (drag and drop visual components).
III.1. Membuat Sebuah Paket Java dan File Kode Sumber Java
1.  Dalam window proyek, expand node Source Package. Catatan node Source Package berisi kosong sebagai default node package.
2.  Klik kanan pada node Source Package dan pilih New > Java Class. Isikan nama Class dengan NameHandler pada text box yang tersedia dan ketik org.mypackage.hello didalam combo box Package. Klik Finish. Tampil bahwa file baru NameHandler.java akan terbuka di bagian Editor kode sumber.
3.  Didalam Editor kode sumber, deklarasikan variabel bertipe String dengan mengetikkan baris kode berikut di dalam deklarasi class.
String name;
4.  Tambahkan constructor berikut ke class:
Public NameHandler() {  }
5.  Tambahkan baris berikut didalam constructor NameHandler() :
name = null;
III.2. Membangkitkan Kode Sumber Method Getter dan Setter
1.  Klik kanan field name didalam Editor kode sumber dan pilih Refactor > Encapsulate Fields. Maka Encapsulate Fields dialog terbuka, menampilkan field name. Terlihat Field Visibility nya secara default adalah private, dan Accessors Visibility nya adalah public, menandakan bahwa access modifier untuk deklarasi variabel class akan diset sebagai private, sedangkan method getter dan setter akan dibangkitkan dengan modifier sebagai public dan private berurutan.
Gambar 3.1. Dialog Encapsulate Fields
2.  Pada dialog Encapsulate Fields tersebut klik Rafctor. Maka kode method getter dan setter akan dibuat dengan modifier public. Kode java class selengkapnya akan seperti berikut dibawah.

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package org.mypackage.hello;

/**
 *
 * @author Aryo
 */
public class NameHandler {
    private String name;
   
    public NameHandler(){
        name=null;
    }

    /**
     * @return the name
     */
    public String getName() {
        return name;
    }

    /**
     * @param name the name to set
     */
    public void setName(String name) {
        this.name = name;
    }
}
III.3. Mengedit File Default JavaServer Page
1.  Pindahkan fokus ke file index.jsp dengan mengklik tab nya yang tampil pada panel Source Editor.
2.  Tekan bersamaan Ctrl+Shift+8 maka akan muncul Palette disebelah kanan Source Editor, expand HTML Forms dan drag item Form ke posisi setelah tag < h1> didalam Source Editor.
Gambar 3.2. Palette komponen JSP
3.  Isikan beberapa nilai berikut (seperti Gambar 3.3):
·    Action: response.jsp
·    Method: GET
·    Name: Name Input Form
Klik OK. Sebuah tag HTML form ditambahkan ke file index.jsp.
Gambar 3.3. Isian parameter Insert Form
4.  Drag item Text Input dari Palette ke posisi tepat sebelum tag < /form>, kemudian isikan nilai berikut:
·    Name: name
·    Type: text
Klik OK. Sebuah tag HTML -input- ditambahkan diantara tag < form>. Hapus atribut value dari tag ini.
5.  Drag item Button dari Palette ke posisi tepat sebelum tag < /form>. Isikan nilai berikut:
·    Label: OK
·    Type: submit
Klik OK. Sebuah button ditambahkan diantara tag < form>.
6.  Ketik ‘Enter your name:’ tepat sebelum tag < input> pertama, kemudian rubah default text ‘Hello World!’ diantara tag < h1> sampai Entry Form.
7.  Klik kanan didalam Source Editor dan pilih Format (Alt-Shift-F) untuk merapikan format kode anda. File index.jsp anda mestinya akan tampak seperti dibawah ini.

< %--
    Document   : index
    Created on : 06 Mar 12, 14:23:45
    Author     : Aryo
--%>

< %@page contentType="text/html" pageEncoding="UTF-8"%>
< !DOCTYPE html>
< html>
    < head>
        < meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        < title>Index Page
    < /head>
    < body>
        < h1>Entry Form< /h1>
        < form name="Name Input Form" action="response.jsp">
            Type your name :
            < input type="text" name="name" value="" />
            < input type="submit" value="OK" />
        < /form>
    < /body>
< /html>
III.4. Membuat File JavaServer Page
1.  Didalam window Project, klik kanan pada node proyek HelloWeb dan pilih New > JSP. Wizard file baru JSP akan terbuka. Isikan nama file dengan response, dan klik Finish. Tampak bahwa node file response.jsp tampil didalam window proyek dibawah index.jsp, dan didalam Source Editor terbuka file kode sumber baru untuk response.jsp.
2.  Pada Palette disebelah kanan Source Editor, expand JSP dan drag item Use Bean ke posisi tepat dibawah tag < body> pada Source Editor. Maka terbuka dialog Insert Use Bean. Isikan nilai seperti ditunjukkan pada gambar 2.5 dibawah.
Gambar 3.4. Isian Insert Use Bean
·  ID: mybean
·  Class: org.mypackage.hello.NameHandler
·  Scope: session
Klik OK. Tampak bahwa tag < jsp:useBean> ditambahkan dibawah tag < body>.
3.  Drag item Set Bean Property dari Palette ke posisi tepat sebelum tag < h1> dan klik OK. Didalam tag < jsp:setProperty> yang ada, hapus attribut value yang kosong dan edit seperti baris kode dibawah. Hapus attribut value jika IDE membuatnya! Kalau tidak, ia akan menimpa nilai variabel name yang anda passing dari index.jsp.

< jsp:setProperty name=”mybean” property=”name” />
Seperti dijelaskan dalam dokumentasi < jsp:setProperty>, anda dapat men-set nilai property dalam berbagai cara. Dalam kasus ini user menginput dari index.jsp yang menjadi pasangan name/value yang di passing ke objek request. Ketika anda men-set property menggunakan tag , anda dapat menentukan nilai (value) berkaitan dengan nama dari property yang telah terisi dalam objek request (pasangan variabelName/value). Oleh karena itu dengan men-setting property ke name, anda dapat me-retrieve nilai yang ditentukan oleh user peng-input (yang telah disimpan di variabel name di JavaBean).
4.  Rubah text diantara tag < h1> sehingga terlihat seperti dibawah ini.
     < h1>Hello, !< /h1>

5.  Drag item Get Bean Property dari Palette dan letakkan setelah tanda koma diantara tag < h1>. Isikan nilai berikut didalam dialog Insert Get Bean Property
·    Bean Name: mybean
·    Property Name: name
Klik OK. Tampak bahwa tag sekarang ditambahkan diantara tag < h1>.
Perhatian: nama Property adalah case-sensitive. Property “name” harus sama persis dalam response.jsp dan dalam form input index.jsp.
6.  Klik kanan didalam Source Editor dan pilih Format (Alt-Shift-F) untuk merapikan format kode sumber anda. Badan tag < body> dari file response.jsp anda seharusnya seperti berikut:

< %--
    Document   : response
    Created on : 06 Mar 12, 14:59:52
    Author     : Aryo
--% >

< %@page contentType="text/html" pageEncoding="UTF-8" % >
< !DOCTYPE html>
< html>
    < head>
        < meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        < title>response page< /title>
    < /head>
    < body>
        < jsp:useBean id="mybean" scope="session" class="org.mypackage.hello.NameHandler" />
        < jsp:setProperty name="mybean" property="name" />
        < h1>Hello, < jsp:getProperty name="mybean" property="name" />!< /h1>
    < /body>
< /html>
IV.            MENJALANKAN PROYEK APLIKASI WEB
IDE menggunakan Ant build script untuk mem-build dan me-run aplikasi web anda. IDE akan membuat build script berdasarkan pilihan-pilihan yang anda tentukan dalam wizard Poryek baru, demikian pula pada dialog box Project Property proyek (dalam window Proyek, pilihan properti dari menu klik kanan pada node proyek).
1.  Dalam window Proyek, klik kanan node proyek HelloWeb dan pilih Run (F6). Ketika anda me-running aplikasi web, IDE melakukan beberapa tahap:
·  Building dan Compiling kode aplikasi (lihat catatan dibawah). Anda dapat melakukan tahap ini secara terpisah (isolation) dengan memilih Build atau Clean and Build dari menu konteks node proyek kemudian pilih Run.
·  Menjalankan server.
·  Men-deploy aplikasi ke server. Anda dapat melakukan tahap ini secara terpisah (isolation) dengan memilih Deploy dari konteks menu node proyek.
·  Menampilkan aplikasi didalam sebuah window browser.
Catatan: secara default, IDE otomatis melakukan Compile proyek ketika fitur Save dijalankan, sehingga anda tidak perlu meng-compile kode anda lebih dulu untuk menjalankan aplikasi di IDE. Untuk lebih jelasnya mengenai fitur ini anda dapat lihat di www.netbeans.org pada petunjuk bagian Creating, Importing, and Configuring Java Project.
2.  IDE akan membuka output window yang menunjukkan kemajuan proses running aplikasi. Lihat pada tab HelloWeb pada Output window. Pada tab ini, anda dapat mengikuti semua tahap yang IDE lakukan. Jika ada masalah, IDE menampilkan informasi error di window ini.
Gambar 4.1. Informasi progress running
3.  IDE membuka output window yang menampilkan status server. Lihat pada tab Output window dengan nama dari server anda.
Penting: jika server GlassFish gagal untuk start, start server tersebut secara manual dan run lagi proyek. Anda dapat men-start server secara manual dari window Services, dengan klik kanan pada node server dan pilih Start.
Tip: output window server sangat informatif menampilkan masalah running aplikasi web anda. Log (catatan informasi) server juga dapat membantu. Mereka dilokalisasi dalam direktori domain server yang bersangkutan. Anda juga dapat melihat log IDE, dicapai dengan memilih View > IDE Log.
Gambar 4.2. Informasi progress Server
4.  Halaman index.jsp otomatis membuka di browser. Catatan bahwa window browser mungkin membuka sebelum IDE menampilkan output server.
Gambar 4.3. Tampilan index.jsp di browser
5.  Ketik nama anda di text box, kemudikan klik button OK. Halaman response.jsp tampil, menampilkan ‘selamat datang’.
Gambar 4.4. Tampilan response.jsp di browser
V.            MODIFIKASI APLIKASI JAVA BEAN
Pada bagian ini saya ingin sedikit memodifikasi aplikasi JavaBean kita (NameHandler.java). Dalam hal ini saya ingin menunjukkan bahwa JavaBean berperan sebagai business logic dari keseluruhan aplikasi web kita dalam Java EE.
Disini saya menginginkan policy bahwa jika diinput nama dengan nilai ‘aryo’ maka akan menampilkan pesan bahwa nama ‘aryo’ tersebut masuk dalam blacklist.
Adapun perubahan kode di NameHandler.java adalah seperti berikut dibawah.

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package org.mypackage.hello;

/**
 *
 * @author Aryo
 */
public class NameHandler {
    private String name;
    private String blockName="aryo";
   
    public NameHandler(){
        name=null;
    }

    /**
     * @return the name
     */
    public String getName() {
        if(name.equals(blockName)){
            return name="Maaf nama " +name+" di blacklist";
        } else {
            return name;
        }
        //return name;
    }

    /**
     * @param name the name to set
     */
    public void setName(String name) {
        this.name = name;
    }
}
Running kembali aplikasi anda maka akan menampilkan seperti dibawah jika nama ‘aryo’ diinput.
Gambar 5.1. Tampilan response.jsp di browser
DAFTAR PUSTAKA
·       www.netbeans.org
·       The J2EE Architec’s Handbook, Derek C. Ashmore, DVT Press, 2004.

1 komentar: