Membuat JSP dan Servlet Sederhana

Transkripsi

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. JVA-FD MEMBUAT JSP DAN SERVLET SEDERHANA 1

2 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 MEMBUAT JSP DAN SERVLET SEDERHANA 2

3 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 MEMBUAT JSP DAN SERVLET SEDERHANA 3

4 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 MEMBUAT JSP DAN SERVLET SEDERHANA 4

5 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 MEMBUAT JSP DAN SERVLET SEDERHANA 5

6 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 MEMBUAT JSP DAN SERVLET SEDERHANA 6

7 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 MEMBUAT JSP DAN SERVLET SEDERHANA 7

8 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 MEMBUAT JSP DAN SERVLET SEDERHANA 8

9 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 MEMBUAT JSP DAN SERVLET SEDERHANA 9

10 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 MEMBUAT JSP DAN SERVLET SEDERHANA 10

11 Pada wizard pembuatan Servlet, masukkan informasi sebagai berikut: Java package : org.exercise01.web Class name : GreetingServlet Klik Next. JVA-FD MEMBUAT JSP DAN SERVLET SEDERHANA 11

12 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 MEMBUAT JSP DAN SERVLET SEDERHANA 12

13 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 MEMBUAT JSP DAN SERVLET SEDERHANA 13

14 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: 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: 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 MEMBUAT JSP DAN SERVLET SEDERHANA 14

15 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 MEMBUAT JSP DAN SERVLET SEDERHANA 15

16 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 MEMBUAT JSP DAN SERVLET SEDERHANA 16

17 Masuk ke dalam Apache Tomcat dengan mengetikan alamatnya pada program browser, misalnya Alamat ini bisa saja berbeda dengan yang Anda gunakan, tergantung dari instalasinya. Klik Tomcat Manager, dan isi User Name serta Password. JVA-FD MEMBUAT JSP DAN SERVLET SEDERHANA 17

18 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 MEMBUAT JSP DAN SERVLET SEDERHANA 18

19 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. JVA-FD MEMBUAT JSP DAN SERVLET SEDERHANA 19