www.tobuku.

com

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.

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 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>

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