Membuat JSP dan Servlet Sederhana

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.

java-servlet-sederhana01

Klik Next untuk melanjutkan.

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

java-servlet-sederhana02

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.

java-servlet-sederhana03

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

java-servlet-sederhana04

Masukkan lokasi instalasi Tomcat pada kolom “Tomcat installation directory” dan klik Finish untuk menambahkan konfigurasi server tersebut dan menutup window.

Saat kita kembali pada window sebelumnya, tampilannya akan sedikit berubah dimana kolom Target runtime sudah terisi dengan sebuah nilai.

java-servlet-sederhana05

Klik Finish untuk mengakhiri pembuatan projek web tersebut.

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

java-servlet-sederhana06

Untuk mensimulasikan cara kerja JSP dan servlet, kita akan membuat sebuah aplikasi web sederhana yang terdiri dari dua komponen:

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

 

2. Membuat halaman index.jsp

Sekarang saatnya membuat file index.jsp. Klik kanan pada projek web-exercise01 dan pilih New à Other .

java-servlet-sederhana07

Pilih Web –> JSP. Klik Next untuk melanjutkan.

java-servlet-sederhana08

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.

java-servlet-sederhana09

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 stop. Tampilan seperti ini akan tampak jika Anda melakukan instalasi Tomcat dan mengikuti langkah-langkah awal tutorial ini dengan benar.

java-servlet-sederhana10

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.
java-servlet-sederhana11
java-servlet-sederhana12
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:

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.

java-servlet-sederhana13

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

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.

  1. Dengan diletakkannya kode program business logic pada servlet, maka eksekusi program yang lebih optimal dan unjuk kerjanya akan lebih baik.

 

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.
java-servlet-sederhana15

Pada wizard pembuatan Servlet, masukkan informasi sebagai berikut:

Java package : org.exercise01.web

Class name : GreetingServlet
java-servlet-sederhana16

Klik Next.

java-servlet-sederhana17

Klik Next.

java-servlet-sederhana18

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.

java-servlet-sederhana19

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.

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.

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.

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.

java-servlet-sederhana20

Silakan arahkan penunjuk mouse pada kotak kecil berwarna merah kemudian klik dan pilih “Import PrintWriter (java.io)”.

java-servlet-sederhana21

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.

java-servlet-sederhana22

Hasil pemanggilan GreetingServlet tampak seperti gambar di bawah ini.

java-servlet-sederhana23

Hasil ya bagus, bukan?

 

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.

java-servlet-sederhana24

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

java-servlet-sederhana25

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.

java-servlet-sederhana26

Klik Tomcat Manager, dan isi User Name serta Password.

java-servlet-sederhana27

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

java-servlet-sederhana28

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.

java-servlet-sederhana29

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

java-servlet-sederhana30

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

java-servlet-sederhana31

java-servlet-sederhana32

 

tobuku-logo

Leave a Reply

Your email address will not be published. Required fields are marked *