Membuat JSP dan Servlet Sederhana - tobuku.comtobuku.com/docs/Membuat JSP dan Servlet...

www.tobuku.com

JVA-FD-09002 – MEMBUAT JSP DAN SERVLET SEDERHANA 1

Membuat JSP dan Servlet Sederhana

Juli 2009 Tingkat: √

Oleh : Feri Djuandi Pemula Menengah Mahir

Untuk memulai latihan ini, pastikan pada komputer Anda terinstall Eclipse dan Apache Tomcat. Program

Tomcat yang digunakan pada penjelasan ini adalah versi 6.0, namun Anda dapat juga menggunakan

versi yang lain.

• JSP adalah adalah halaman web dinamis berdasarkan kode-kode HTML yang disisipkan dengan

kode-kode program Java.

• Servlet adalah adalah program Java yang berjalan di sisi server. Ada korelasi yang erat antara JSP

dan servlet dimana JSP lebih berperan pada lapisan presentation, sementara servlet berperan

pada lapisan logic atau middle.

• Apache Tomcat disebut juga sebagai servlet container, yaitu sebuah aplikasi server yang

berfungsi untuk menjalankan servlet saat terjadi request dari sisi client.

1. Menyiapkan Projek Web Jalankan Eclipse

Buat sebuah projek Java baru dengan menu File �� New �� Project. Dari wizard yang tersedia, pilihlah

Web��Dynamic Web Project.

Klik Next untuk melanjutkan.

www.tobuku.com


Pada tampilan berikutnya, beri nama projek yang baru ini sebagai web-exercise01.

Selanjutnya Anda diminta untuk memilih Target runtime. Target runtime pada dasarnya adalah server

yang digunakan untuk menjalankan projek ini. Pada tutorial ini kita akan menggunakan Apache Tomcat.

Silakan klik listbox tersebut untuk melihat apakah pilihan itu tersedia. Jika ini adalah pertama kalinya

Anda membuat sebuah projek web, kemungkinan daftar tersebut kosong sehingga Anda harus membuat

sebuah server untuk projek ini dengan menekan tombol New.

www.tobuku.com


Pilihlah Apache Tomcat dengan versi yang sesuai pada instalasi computer Anda. Klik Next untuk

melanjutkan.

Masukkan lokasi instalasi Tomcat pada kolom “Tomcat installation directory” dan klik Finish untuk

menambahkan konfigurasi server tersebut dan menutup window.

www.tobuku.com


Saat kita kembali pada window sebelumnya, tampilannya akan sedikit berubah dimana kolom Target

runtime sudah terisi dengan sebuah nilai.

Klik Finish untuk mengakhiri pembuatan projek web tersebut.

www.tobuku.com


Saat projek web ini sudah terbentuk, pada view Project Explorer akan tampak struktur seperti di bawah

ini.

Untuk mensimulasikan cara kerja JSP dan servlet, kita akan membuat sebuah aplikasi web sederhana

yang terdiri dari dua komponen:

� index.jsp

� GreetingServlet

Halaman index.jsp akan ditampilkan terlebih dahulu yang meminta user memasukkan nama depan dan

nama belakangnya. Saat halaman ini dikirim, ia akan diproses oleh Java Servlet dan selanjutnya servlet

akan mengembalikan outputnya kembali kepada user.

www.tobuku.com


2. Membuat halaman index.jsp Sekarang saatnya membuat file index.jsp. Klik kanan pada projek web-exercise01 dan pilih New ��

Other .

Pilih Web �� JSP. Klik Next untuk melanjutkan.

www.tobuku.com


Beri nama file JSP tersebut sebagai index.jsp dan pastikan folder penempatannya adalah WebContent.

Klik Finish untuk mengakhiri.

Saat file index.jsp terbentuk, editor akan menambahkan beberapa kode HTML standar sebagai kerangka

dari halaman web tersebut seperti bagian head, title dan body. Silakan ketikkan kalimat “Helo World!”

pada bagian body seperti tampak pada gambar di bawah ini. Simpan file ini.

Sebelum file index.jsp ini dicoba untuk dijalankan, ada hal penting yang harus Anda lakukan. Perhatikan

pada bagian layar di bawah editor tampak beberapa view seperti Marker, Properties, Server dan

seterusnya. Klik view Server, maka terihat sebuah Tomcat server yang mungkin berada dalam keadaan

www.tobuku.com


stop. Tampilan seperti ini akan tampak jika Anda melakukan instalasi Tomcat dan mengikuti langkah-

langkah awal tutorial ini dengan benar.

Silakan klik tombol bergambar panah warna hijau untuk menyalakan Tomcat hingga tulisan [Stopped]

berubah menjadi [Started].

Setelah service Tomcat berhasil dinyalakan, maka halaman index.jsp bisa dijalankan. Klik tombol

bergambar panah hijau pada toolbar, kemudian ikuti langkah-langkah berikutnya hingga tulisan “Hellow

World!” muncul dengan sukses.

Selamat! Anda sudah berhasil membuat file JSP yang pertama. Walaupun ini bukanlah output yang

hendak kita buat, namun kita sudah menyelesaikan bagian awal yang penting untuk menguji apakah

Tomcat dan komponen-komponen lainnya sudah terinstal dengan baik. Sekarang kita akan memodifikasi

file index.jsp ini dengan kode-kode program yang sesungguhnya. Silakan menutup view output ini dan

kita kembali kepada kode program index.jsp di layar editor.

Hapus tulisan “Hello World!” pada bagian body dan gantikan dengan skrip di bawah ini:

<form action=" " method="POST">

First Name: <input type="text" name="firstName" size="20"><br>

Surname: <input type="text" name="surname" size="20">

<br><br>

<input type="submit" value="Submit">

</form>

www.tobuku.com


Simpan perubahan tersebut dan coba jalankan lagi file ini. Jika yang tampak pada layar adalah masih

tulisan “Hello World!” seperti pada tampilan sebelumnya, itu berarti layar output perlu di-refresh

terlebih dahulu. Silakan klik tombol Refresh yang ditunjukkan pada gambar di bawah ini.

Setelah di-refresh, maka layar akan menampilkan output yang seharusnya.

Kode program ini sudah berjalan dengan baik walaupun saat ini ia belum menjalankan aksi apapun saat

tombol Submit di-klik. Kita akan menambahkan aksi pada program sederhana ini pada komponen

servlet, bukan pada halaman index.jsp ini. Ada alasan yang bagus mengapa kita perlu memisahkan

peletakan kode-kode program baik pada sisi halaman JSP maupun servlet:

1. Halaman JSP lebih diutamakan sebagai presentation layer, atau lapisan yang berhubungan

dengan antar muka dengan seperti layar yang memungkinkan pengguna berinteraksi dengan

aplikasi. Jadi pada halaman JSP kita lebih fokus untuk membuat tampilan yang menarik atau

intuitif.

Sementara itu, business logic yang sesungguhnya atau kode-kode program inti dari aplikasi

diletakkan pada servlet yang berjalan di latar belakang dan non-visual. Pemisahan ini sangat

penting untuk kepentingan pemeliharaan aplikasi supaya kode program tidak bercampur baur

antara yang berhubungan dengan presentation layer dan business logic.

2. Dengan diletakkannya kode program business logic pada servlet, maka eksekusi program yang

lebih optimal dan unjuk kerjanya akan lebih baik.

www.tobuku.com


3. Membuat GreetingServlet Saat ini kita akan melanjutkan dengan pembuatan sebuah servlet untuk menulis business logic aplikasi

web ini.

Pada window Project Explorer, klik kanan pada nama projek web-exercise01 kemudian pilih New ��

Servlet.

www.tobuku.com


Pada wizard pembuatan Servlet, masukkan informasi sebagai berikut:

Java package : org.exercise01.web

Class name : GreetingServlet

Klik Next.

www.tobuku.com


Klik Next.

Klik Finish.

Secara otomatis Eclipse akan membuat sebuah package bernama org.exercise01.web dengan sebuah

file bernama GreetingServlet.java di dalamnya. Eclipse juga akan menuliskan beberapa kode program

standar di dalam sebuah servlet, yaitu sebuah constructor (dalam hal ini adalah GreetingServlet) berikut

dua buah method doPost dan doGet - sesuai dengan pilihan-pilihan yang ditandai pada window wizard

sebelumnya. Tugas kita sekarang adalah menuliskan kode-kode program di dalam constructor dan

method tersebut.

www.tobuku.com


Sebelum bekerja lebih lanjut dengan GreetingServlet, kita kembali dulu kepada index.jsp sebentar untuk

melakukan sedikit modifikasi pada kode HTML nya. Pada bagian form, ketikkan GreetingServlet seperti

di bawah ini supaya saat tombol Submit ditekan maka komponen GreetingServlet dipanggil untuk

menjalankan sebuah aksi tertentu.

<form action="GreetingServlet" method="POST">

First Name: <input type="text" name="firstName" size="20"><br>

Surname: <input type="text" name="surname" size="20">

<br><br>

<input type="submit" value="Submit">

</form>

Perhatikan bahwa metode yang digunakan pada form di dalam index.jsp ini adalah POST, sejalan itu

maka salah satu method di dalam GreetingServlet yang harus ditambahkan kode programnya adalah

doPost.

www.tobuku.com


Baik itu GET maupun POST, Setiap metode memiliki kelebihan dan kekurangan. GET memiliki

keterbatasan panjang dalam informasi yang dikirimkan namun cara pengirimannya cukup mudah yaitu

hanya perlu menambahkannya pada URL dari Servlet yang dipanggil. Contoh:

http://localhost:7001/MyFirstServlet/GreetingServlet?firstName=david&surname=test

Sebaliknya POST tidak memiliki batas panjang informasi yang dikirim dan kelebihannya adalah informasi

itu tidak tampak pada URL. Pada POST yang tampak hanya seperti ini:

http://localhost:7001/MyFirstServlet/GreetingServlet

Nyata bahwa GET mengandung potensi bahaya dalam hal keamanan dimana orang bisa dengan mudah

melihat informasi yang dikirim kepada Servlet. POST bisa menjadi pilihan yang lebih baik, tetapi ada

situasi dimana kita perlu memakai GET untuk alasan kemudahan.

Karena pada contoh ini kita memakai metode POST, maka mari kita menambahkan kode program pada

method doPost di dalam GreetingServlet.

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws

ServletException, IOException {

response.setContentType("text/html;charset=UTF-8");

PrintWriter out = response.getWriter();

String firstName = request.getParameter("firstName").toString();

String surname = request.getParameter("surname").toString();

out.println("<html>");

out.println("<head>");

out.println("<title>Servlet GreetingServlet</title>");

out.println("</head>");

out.println("<body>");

out.println("<h1>Servlet GreetingServlet at " + request.getContextPath () + "</h1>");

out.println("<p>Welcome " + firstName + " " + surname + "</p>");

out.println("</body>");

out.println("</html>");

out.close();

}

Jika Anda mendapatkan sebuah peringatan dari compiler bahwa class PrintWriter tidak dikenal seperti di

bawah ini, maka itu artinya ada package tertentu yang harus di-import ke dalam kode program ini.

Silakan arahkan penunjuk mouse pada kotak kecil berwarna merah kemudian klik dan pilih “Import

PrintWriter (java.io)”.

www.tobuku.com


Secara otomatis pada bagian atas kode program akan ditambahkan sebaris perintah “import

java.io.PrintWriter”.

Simpan perubahan ini, dan kita jalankan kembali index.jsp. Jangan lupa untuk me-refresh lagi supaya

perubahan yang terakhir tampak pada halaman web tersebut. Silakan isi kolom First Name dan Surname

kemudian klik Submit.

Hasil pemanggilan GreetingServlet tampak seperti gambar di bawah ini.

Hasil ya bagus, bukan?

www.tobuku.com


4. Men-deploy aplikasi pada Tomcat Untuk men-deploy sebuah aplikasi web ke dalam Tomcat, hal pertama yang harus dilakukan adalah

meng-export projek web dari Eclipse menjadi sebuah file dengan ekstensi WAR.

Pada window Project Explorer, klik kanan pada nama projek web-exercise01 kemudian pilih Export ��

War file.

Tentukan nama file dan lokasi penyimpanan file WAR. Klik Finish.

www.tobuku.com


Masuk ke dalam Apache Tomcat dengan mengetikan alamatnya pada program browser, misalnya

http://localhost:8080. Alamat ini bisa saja berbeda dengan yang Anda gunakan, tergantung dari

instalasinya.

Klik Tomcat Manager, dan isi User Name serta Password.

www.tobuku.com


Jika otentikasi berhasil, Anda akan mesuk ke dalam halaman Tomcat Web Application Manager.

Turun ke bagian bawah dari halaman tersebut sampai Anda menemukan bagian Deploy. Gunakan

tombol Browse untuk memasukkan nama file WAR yang di-export tadi ,lalu klik Deploy.

www.tobuku.com

JVA-FD-09002 – MEMBUAT JSP DAN SERVLET SEDERHANA

Pastikan aplikasi web itu ter-deploy dengan baik ditandai dengan munculnya nama aplikasi di dalam

daftar aplikasi.

Jalankan aplikasi web tersebut dengan menggunakan program browser seperti di bawah ini.

MEMBUAT JSP DAN SERVLET SEDERHANA

deploy dengan baik ditandai dengan munculnya nama aplikasi di dalam


19

deploy dengan baik ditandai dengan munculnya nama aplikasi di dalam


Membuat JSP dan Servlet Sederhana - tobuku.comtobuku.com/docs/Membuat JSP dan Servlet...

Documents

Transcript of Membuat JSP dan Servlet Sederhana - tobuku.comtobuku.com/docs/Membuat JSP dan Servlet...