Web Programing

Web Programming

Memulai Web Programming

Mengkompilasi Program Java, JSP dan Servlet

Untuk mempeljari web programming berbasis java, Anda harus menginstal program java versi J2SE JDK 1.5 , J2EE 5.0 dan Jakarta Tomcat sebagai web server percobaan yang sudah terinstal pada saat instalasi editor java NetBeans. JDK 1.5 digunakan untuk membangun aplikasi level mudah dan menengah, misalnya untuk membuat applet, program console sederhana, algoritma dan lain lain. Ciri dari penggunaan java versi ini ialah mengunakan paket java.io, java.util.java.awt dll. Jadi untuk belajar java pertama kali, gunakan saja JDK 1.5. Sedangkan J2EE 5.0 untuk membangun aplikasi Web berskala besar / Enterprise menggunakan Servlet dan JSP, beserta fitur-fitur advanced lainnya seperti EJB. Ciri dari penggunaan versi ini ialah menggunakan paket javax.http. Anda dapat memperoleh versi java ini untuk platform Windows maupun linux dengan cara download di situs http://java.sun.com. Sedangkan Untuk Tomcat dan Editor Java, pilihan yang paling tepat ialah menggunakan Editor java yang disarankan oleh Sun Microsystem yaitu NetBeans 5.5 for Windows.

Instalasi Java J2SE, J2EE dan NetBeeans 5.5

Berikut langkah menginstaslasi Program Java dan NetBeans sebagai editor java dan membuat program java sederhana dan cara menjalankannya di windows, untuk di linux Anda ikuti petunjuk konfigurasi program yang tidak jauh beda.

1. Jalankan program instalasi J2SE 1.5, buat folder instalasi, Anda harus install di c:\j2se biar gampang setingnya, lalu klik next hingga finish

Instalasi awal J2SE 1.5

Widodo Budiharto D2637

http://java.sun.com/

Web Programming

1. Jalankan program instalasi J2EE 5.0, buat folder intalasi c:\j2ee lalu klik next, masukkan password J2EE, lalu klik next hingga finish.

Instalasi awal J2EE

2. Set Path di bagian Environment variables dengan cara klik kanan mouse di My Computer | Properties | Advanced |Environment Variables . Jika belum anda nama Path dapat anda tambahkan dan mohon sesuaikan dengan direktori instalasi Anda . Misal jika J2SE berada di c:\j2se, maka untuk CLASSPATH set ke c:\j2se\lib;. Jika J2EE berada di c:\j2ee, maka set classpath ke c:\j2ee\lib\j2ee.jar;. .

Seting CLASSPATH

3. Set Path ke c:\j2se\bin dan c:\j2ee\bin; , lakukan juga seting J2EE_HOME ke c:\j2ee dan JAVA_HOME ke c:\j2se


Web Programming

Seting Path

Seting J2EE_HOME

Seting JAVA_HOME

4. Jika Anda menggunakan Apache Tomcat tersendiri (bukan dari Netbeans 4.0), dapat diseting CATALINA_HOME ke foldernya misal di c:\tomcat\catalina. Selain itu jika anda menggunakan program paket /maker seperti ANT, javamail dan JAF juga perlu diseting classpathnya.

Gambar 1.14 Seting CATALINA_HOME

5. Install editor Java yaitu NetBeans-5_5-preview-windows.exe, klik Next untuk menginstal program NetBeans IDE 5.5. Kekurangan dari editor versi ini ialah


Web Programming

konsep peletakan folder classes yang agak eklusif, jika anda sudah terbiasa dengan konsep servlet model lama.

Tampilan instalasi NetBeans

6. Buat nama folder untuk NetBeans misalnya c:\NetBeans, lalu klik Next hingga tampil association panel, lalu klik next lagi.

Membuat nama folder program

7. Program harus dapat mendeteksi J2SE (jdk1.5) yang sudah terinstall di komputer, jika tidak tampil direktori J2SE, pastikan anda telah menginstal J2SE terlebih dahulu. Klik Next untuk menampilkan Association panel, klik next saja dari pilihan chekbox yang diberikan. Tampilan berikut ialah NeBeans mendeteksi J2SE versi 1.5


Web Programming

NetBeans mendeteksi versi J2SE

8. Tampilan instalasi akan berjalan sekitar beberapa menit, dimana akan diinstal file pendukung java dan Jakarta-Tomcat versi 5.0-28 juga akan otomatis diiinstal.

Memasukkan password Application server


Web Programming

Port default Application Server

Tampilan proses intalasi

9. Setelah selesai proses instalasi, Jalankan NetBean, kekurangan editor java yang ada saat ini ialah cukup beratnya menjalankan editor tersebut, anda membutuhkan komputer dengan spesifikasi Pentium III dengan RMA 128 keatas, editor lain yang bisa dijadikan alternatif ialah Eclipse, Gel dan JCreator. Jika anda menggunakan NetBeans 3.6, yang harus dilakukan pertama kali ialah menset direktori tempat file kode java disimpan, pastikan Anda membuat folder kode java terlebih dahulu. Contoh c:\Java.


Web Programming

Tampilan Program yang sedang aktif

10. Pilih menu File | Mount FileSystem lalu pilih Local Directory untuk menset directory (mounting) kode java kita, misalnya c:\Java. Untuk NetBeans 5.0, tidak perlu mouting, cukup buat folder baru.


Web Programming

Memilih direktori untuk tempat menyimpan file java.

Membuat program Java Application

Jika anda masih awam dengan java, langkah paling tepat ialah membuat program aplikasi java sederhana. Berikut langkah-langkahnya :

1. Buka NetBeans, lalu pilih menu File | New Project dan pilih Categories Standard serta pilih Projects Java Application.

Memilih Java Main Class

2. Beri nama program SelamatDatang (SelamatDatang.java) dengan Project Name J2EE, sehingga hasilnya berada di c:\SourceJava\J2EE\


Web Programming

SelamatDatang.java. Oleh karena itu pada program SelamatDatang.java, tercipta package j2ee.

Membuat Lokasi baru

3. Modifikasi kode yang tercipta sebagai berikut dengan menambahkan kode yang dicetak lebih tebal, kode tesebut akan menampilkan pesan “Selamat Belajar Panduan Lengkap J2EE dari Mr. Widodo”.

/* * SelamatDatang.java * Created on July 12, 2006, 5:54 AM */package aplikasijava;/** * * @author Widodo budiharto */public class SelamatDatang { /** Creates a new instance of SelamatDatang */ public SelamatDatang() { } public static void main(String[] args) {

// Menampilkan pesan Selamat Belajar System.out.println ("Selamat Belajar Panduan Lengkap J2EE dari Mr. Widodo"); } }

Program diatas mempunyai sebuah kelas bernama SelamatDatang, dimana pada method utama main() akan menampilkan pesan “Selamat Belajar Panduan Lengkap J2EE dari Mr. Widodo”. Method main() ialah fungsi yang pertama kali dipanggil setiap proram dijalankan. Karena fungsi main dinginkan tidak mengembalikan harga, maka digunakan tipe void, static agar dapat dipanggil langsung tanpa perlu buat objek serta bersifat public agar dapat diakses/digunakan oleh semua kelas yang membutuhkan.


Web Programming

Fungsi main juga membutuhkan 1 buah array bernama args bertipe data String. Perlu diketahui, di java String adalah suatu kelas, yang mempunyai kelebihan dibandingkan pointer atau tipe data karakter di C/C++. Simbol kurung { [] ) yang menandakan args adalah suatu array boleh diletakkan di depan atau dibelakang args.

Perlu diketahui juga, bahwa untuk kelas, setiap awal karakter dari setiap kata harus huruf besar. Program diatas membutuhkan kelas System dengan method println() untuk menampilkan pesan ke monitor dan pastikan setiap akhir baris kode diberikan titik koma (;). Setiap anda membuat kurung buka ( { ) pastikan ada segera tutup dengan kurung tutup ( } ) untuk menghindari kesalahan penulisan kurung jika program cukup kompleks.

Program yang sukses dijalankan

4. Anda sebenarnya juga dapat menulis program java di notepad dan melakukan kompilasi program .java melalui dos prompt dengan cara memberikan perintah javac SelamatDatang.java pada console untuk mengkompile menjadi SelamatDatang.class. Jalankan dengan mengetik java SelamatDatang (tidak boleh ditulis nama kelasnya), tampilan berikut jika program tersimpan di folder c:\j2se\bin. Jika anda ingin menjalankan aplikasi .class yang sudah dikompile oleh NetBeans, anda harus masuk ke folder c:\SourceJava\J2EE\Build\classes. Copy folder J2EE beserta isinya ke root c:\ baru anda dapat menjalankan melalui DOS prompt.


Web Programming

Tampilan hasil kompilasi program

Membuat form Web Menggunakan Java Server Pages (JSP)

1. Jalankan NetBeans dan buat Proyek baru dengan Memilih Categories Web dan Projects Web Application. Pilih direktori di drive D:\ misalnya, beri nama projek WebJ2EE, otomatis akan tercipta context path /WebJ2EE

Membuat projek Web.

2. Edit kode index.jsp dengan kode berikut , hasilnya seperti gambar dibawah

<%@page contentType="text/html"%><%@page pageEncoding="UTF-8"%><%--The taglib directive below imports the JSTL library. If you uncomment it,you must also add the JSTL library to the project. The Add Library... actionon Libraries node in Projects view can be used to add the JSTL 1.1 library.--%><%--<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> --%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html> <head>


Web Programming

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Page</title> </head> <body>

<h1>Selamat Datang</h1> <br/> <a href="./Welcome.do">Struts Welcome Page</a> <%-- This example uses JSTL, uncomment the taglib directive above. To test, display the page like this: index.jsp?sayHello=true&name=Murphy --%> <%-- <c:if test="${param.sayHello}">  Hello ${param.name}! </c:if> --%><font color=green><h2> Selamat Belajar JSP dari Buku Mr.Widodo Menggunakan NetBeans 5.5</h2></font><br><font color=blue ><h4> Insya Allah Berkah dan berguna bagi Anda </font></h4><font color=#34534><h5> Ikuti segera training J2EE yang kami adakan </font></h5><font color=green ><img src="widodo.jpg" width=100 height=120><h4 align=left>Coppyright WWW.Widodo.Com-2007, HP :08569887384</h4></font> </body></html>

Program diatas sebagai penanda dokumen HTML menggunakan tag <html> dan ditutup dengan tag </html>, dokumen ini akan menampilkan teks dan gambar sesuai seting yang diberikan. Tag <font> untuk mengatur model huruf dan <img src> untuk menampilkan gambar. Warna dokumen dapat dibuat dengan menggunakan nama warna dalam bahasa inggris atau menggunakan format heksadesimal menggunakan symbol #. Tag <br> digunakan untuk ganti baris. Besar karakter dimulai dari <h1> yang merupakan karakter terbesar hingga terkecil yaitu <h7>. Untuk menghasilkan dokumen HTML yang baik saya sarankan Anda mempelajari juga XHTML (Extensible Hypertext Markup Language).

Web Programming

Hasil program

Membuat Aplikasi Web menggunakan Servlet

1. Pilih menu File | New dan pilih File Types HTML, lalu klik next dan beri nama file SelamatBelajar.html(jangan ditulis .html -nya)

Membuat dokumen HTML


Web Programming

Tampilan proses intalasi

2. Edit kode sebagai berikut, aksi dari penekanan button submit ialah pemanggilan servlet /SelamatBelajar. Dimana data yang telah dimasukkan dapat diperoleh menggunakan method getParameter(). Untuk memberikan warna latar belakang digunakan fungsi bgcolor.

<html><head><title> Registrasi Training e-Technology Server</title></head><body bgcolor=silver><font color="green"><H1><marquee behavior=alternate> Daftar Training di e-Technology Center</marquee></H1></font><hr><form action="http://localhost:8084/WebJ2EE/SelamatBelajar" method="POST"><h4> Mohon masukkan data diri Anda </h4><p>Nama <input type="text" size="40" name="name"></p><p>Email <input type ="text" size="40" name="email"><br><p>Materi <select name="materi"><option value="Web Programming using J2EE"> Web Programming using J2EE<option value="Mobile Programming using J2ME"> Mobile Programming using J2ME<option value="Pemrograman Mikrokontroler ATMega8535"> Pemrograman Mikrokontroler ATMega8535<option value ="Oracle 10g PL/SQL and Form Developer">Oracle 10g PL/SQL and Form Developer<option value="Database Programming using VB.NET and SQL Server 2005"> Database Programming using VB.NET and SQL Server 2005<option value="IT Specialist">IT Specialist (Networking Win 2003 and .NET Programming)</select><br></p><p>


Web Programming

Hari Training :<input type ="checkbox" name=cb value="Sabtu Pagi" > Sabtu Pagi<input type="checkbox" name=cb value ="Sabtu Siang"> Sabtu Siang<input type="checkbox" name=cb value ="Ahad pagi"> Ahad Pagi<input type="Checkbox" name=cb value ="Ahad siang"> Ahad Siang</p><br>Pesan :<br><textarea name="pesan" rows=5 cols=50> </textarea> <br><input type="submit" value ="Submit"></p></form></body></html>

Program di atas akan menampilkan dokumen HTML dimana meminta user memasukkan data diri menggunakan <input type=”text”> dan memilih jenis training neggunakan Combobox serta pilihan hari menggunakan checkbox dengan menampung nilai yang dipilih menggunakan value..

<select name="materi"><option value="Web Programming using J2EE"> Web Programming using J2EE<option value="Mobile Programming using J2ME"> Mobile Programming using J2ME<option value="Pemrograman Mikrokontroler ATMega8535"> Pemrograman Mikrokontroler ATMega8535<option value ="Oracle 10g PL/SQL and Form Developer">Oracle 10g PL/SQL and Form Developer<option value="Database Programming using VB.NET and SQL Server 2005"> Database Programming using VB.NET and SQL Server 2005<option value="IT Specialist">IT Specialist (Networking Win 2003 and .NET Programming)</select><br></p><p>

Kode diatas untuk menampilkan cekbox, sedangkan fungsi berikut digunakan untuk menampilkan cekbox dengan nilai yang disimpan menggunakan fungsi value.

Hari Training :<input type ="checkbox" name=cb value="Sabtu Pagi" > Sabtu Pagi<input type="checkbox" name=cb value ="Sabtu Siang"> Sabtu Siang<input type="checkbox" name=cb value ="Ahad pagi"> Ahad Pagi<input type="Checkbox" name=cb value ="Ahad siang"> Ahad Siang

Ketika user mengklik button submit, maka data akan dikirim /di post ke alamat tertentu menggunakan fungsi action dan method=”POST”. Method POST ini kelebihannya dapat mengirimkan data dalam berbagai format dan lebih secure dibandingkan method GET. Karena server yang digunakan bernama localhost dan port yang digunakan oleh Tomcat 8080 serta nama folder J2EE dan nama servlet tujuan ialah SelamatBelajar, maka penulisannya sebagai berikut :

<form action="http://localhost:8080/WebJ2EE/SelamatBelajar" method="POST">


Web Programming

8. Buat file servlet dengan memilih menu new lalu pilih Servlet dan beri nama SelamatBelajar.java, lalu akan tercipta Deployment descriptor (web.xml) yang membuat URL Mapping /SelamatBelajar

Membuat Kelas SelamatBelajar

URL Maping untuk web.xml

9. Edit kode menjadi seperti berikut ini, anda harus menambahkan import java.util.* karena akan menggunakan kelas GregorianCalendar yang mempunyai berbagai method yang memudahkan kita di dalam melakukan operasi yang berhubungan dengan tanggal. Servlet yang kita buat harus turunan dari kelas HttpServlet.

import java.io.*;import java.util.*; //paket untuk kelas GregorianCalendarimport java.net.*;


Web Programming

import javax.servlet.*; //paket wajib untuk servletimport javax.servlet.http.*;//paket wajib untuk servlet

//Ciri servlet ialah biasanya turunan dari kelas HttpServletpublic class SelamatBelajar extends HttpServlet {public void init(ServletConfig config) throws ServletException {super.init(config);}public void destroy() {}protected void processRequest(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {//Ambil nilai dari textbox menggunakan getParameterString name=request.getParameter("name");String email=request.getParameter ("email");String materi =request.getParameter ("materi");String hari=request.getParameter("cb");String pesankhusus=request.getParameter("pesan");String pesan=null;GregorianCalendar calendar= new GregorianCalendar();//jika user submit data pada pagi hari / AM.if (calendar.get(Calendar.AM_PM )==Calendar.AM) {pesan="Selamat pagi :)";}else {pesan="selamat Sore";}response.setContentType("text/html");//Objek out dari kelas PrintWriter untuk mencetakPrintWriter out = response.getWriter();out.println("<html>");out.println("<body >");

out.println("<head>");out.println("<title>Selamat Bergabung dengan Kami menjadi orang Sukses!</title>");out.println("</head>");out.println("<body bgcolor=silver>");out.println("<font color=green><h1>Selamat Datang :)</h1></font>");out.println ("<p>" + pesan + ", "+ name+"</p>");out.println ("<h4> Terima kasih telah mendaftarkan email Anda: " + email + " dengan Kami</h4><br>");out.println ("<h4> Materi training yang Anda akan ambil ialah: " + materi + " </h4><br>");out.println ("<h4> Hari yang Anda pilih ialah: " + hari + " </h4><br>");out.println ("<h4> Pesan Anda ialah: " + pesankhusus +"</h4><br>" );out.println("</body>");out.println("</html>"); out.close();} protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } public String getServletInfo() { return "Short description";


Web Programming

} }

Umumnya kelas di servlet merupakan turunan dari kelas HttpServlet. Program diatas akan mengambil parameter /data yang dimasukkan ke teksbox menggunakan method getParameter(). Hasil proses akan ditampilkan dalam bentuk dokumen HTML dan dikirimkan ke browser klien.

10. Perhatikan file web.xml yang ada di dalam folder WEB-INF yang berfungsi agar apabila browser mengakses suatu situs, dapat mengenal servlet tersebut berupa alias. Informasi yang paling penting dari web.xml ialah <servlet-name> dan <url-pattern> karena mementukan alamat pemanggilan servlet tersebut. Berikut kode yang degenerate oleh NetBeans:

<?xml version="1.0" encoding="UTF-8"?><web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <servlet> <servlet-name>action</servlet-name> <servlet-class>org.apache.struts.action.ActionServlet</servlet-class> <init-param> <param-name>config</param-name> <param-value>/WEB-INF/struts-config.xml</param-value> </init-param> <init-param> <param-name>debug</param-name> <param-value>2</param-value> </init-param> <init-param> <param-name>detail</param-name> <param-value>2</param-value> </init-param> <load-on-startup>2</load-on-startup> </servlet> <servlet> <servlet-name>SelamatBelajar</servlet-name> <servlet-class>SelamatBelajar</servlet-class> </servlet> <servlet-mapping> <servlet-name>action</servlet-name> <url-pattern>*.do</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>SelamatBelajar</servlet-name> <url-pattern>/SelamatBelajar</url-pattern> </servlet-mapping> <session-config><session-timeout> 30 </session-timeout></session-config><welcome-file-list><welcome-file> index.jsp </welcome-file></welcome-file-list> <jsp-config>


Web Programming

<taglib> <taglib-uri>/WEB-INF/struts-bean.tld</taglib-uri> <taglib-location>/WEB-INF/struts-bean.tld</taglib-location> </taglib> <taglib> <taglib-uri>/WEB-INF/struts-html.tld</taglib-uri> <taglib-location>/WEB-INF/struts-html.tld</taglib-location> </taglib> <taglib> <taglib-uri>/WEB-INF/struts-logic.tld</taglib-uri> <taglib-location>/WEB-INF/struts-logic.tld</taglib-location> </taglib> <taglib> <taglib-uri>/WEB-INF/struts-nested.tld</taglib-uri> <taglib-location>/WEB-INF/struts-nested.tld</taglib-location> </taglib> <taglib> <taglib-uri>/WEB-INF/struts-tiles.tld</taglib-uri> <taglib-location>/WEB-INF/struts-tiles.tld</taglib-location> </taglib> </jsp-config> </web-app>

11. Jalankan program dengan mengklik Run atau klik kanan mouse dan pilih Run File pada file SelamatBelajar.html. Pastikan servlet SelamatBelajar.java telah anda kompile dengan klik kanan mouse pada servlet tersebut agar menghasilkan file Selamatbelajar.class yang akan tersimpan di folder classes.

Form SelamatBelajar.html yang telah dijalankan


Web Programming

Hasil response dari servlet

Demikianlah contoh aplikasi java, JSP dan servlet yang harus anda coba, jika telah berjalan dengan baik maka anda akan mudah untuk mempelajari web programming.


Web Programing

Documents

Transcript of Web Programing