Membuat JSP dan Servlet Sederhana

www.tobuku.com
Membuat JSP dan Servlet Sederhana
Juli 2009
Oleh : Feri Djuandi
Tingkat:
√
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.
JVA-FD-09002 – MEMBUAT JSP DAN SERVLET SEDERHANA
1
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.
JVA-FD-09002 – MEMBUAT JSP DAN SERVLET SEDERHANA
2
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.
JVA-FD-09002 – MEMBUAT JSP DAN SERVLET SEDERHANA
3
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.
JVA-FD-09002 – MEMBUAT JSP DAN SERVLET SEDERHANA
4
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.
JVA-FD-09002 – MEMBUAT JSP DAN SERVLET SEDERHANA
5
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.
JVA-FD-09002 – MEMBUAT JSP DAN SERVLET SEDERHANA
6
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
JVA-FD-09002 – MEMBUAT JSP DAN SERVLET SEDERHANA
7
www.tobuku.com
stop. Tampilan seperti ini akan tampak jika Anda melakukan instalasi Tomcat dan mengikuti langkahlangkah 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>
JVA-FD-09002 – MEMBUAT JSP DAN SERVLET SEDERHANA
8
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.
JVA-FD-09002 – MEMBUAT JSP DAN SERVLET SEDERHANA
9
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.
JVA-FD-09002 – MEMBUAT JSP DAN SERVLET SEDERHANA
10
www.tobuku.com
Pada wizard pembuatan Servlet, masukkan informasi sebagai berikut:
Java package : org.exercise01.web
Class name : GreetingServlet
Klik Next.
JVA-FD-09002 – MEMBUAT JSP DAN SERVLET SEDERHANA
11
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.
JVA-FD-09002 – MEMBUAT JSP DAN SERVLET SEDERHANA
12
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.
JVA-FD-09002 – MEMBUAT JSP DAN SERVLET SEDERHANA
13
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)”.
JVA-FD-09002 – MEMBUAT JSP DAN SERVLET SEDERHANA
14
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?
JVA-FD-09002 – MEMBUAT JSP DAN SERVLET SEDERHANA
15
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.
JVA-FD-09002 – MEMBUAT JSP DAN SERVLET SEDERHANA
16
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.
JVA-FD-09002 – MEMBUAT JSP DAN SERVLET SEDERHANA
17
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.
JVA-FD-09002 – MEMBUAT JSP DAN SERVLET SEDERHANA
18
www.tobuku.com
deploy dengan baik ditandai dengan munculnya nama aplikasi di dalam
Pastikan aplikasi web itu ter-deploy
daftar aplikasi.
Jalankan aplikasi web tersebut dengan menggunakan program browser seperti di bawah ini.
JVA-FD-09002 – MEMBUAT JSP DAN SERVLET SEDERHANA
19