Rabu, 04 Januari 2012

TUTORIAL PEMBUATAN KALKULATOR SERVLET


TUTORIAL PEMBUATAN
KALKULATOR SERVLET

I.                    Pendahuluan

Servlet merupakan class yang didefinisikan dalam java dan digunakan untuk meningkatkan kemampuan web server dalam menangani request dan response client. Servlet dapat menerima request dan menghasilkan response melalui protokol komunikasi yang berbeda, tetapi sebagian besar tipe yang digunakan adalah HTTP Servlet, yang diimplementasikan dengan class java javax.servlet.httpServlet.

II.                  Tutorial Pembuatan Kalkulator Servlet dengan Java NetBeans IDE 6.9.1

Berikut akan dijelaskan mengenai pembuatan kalkulator servlet menggunakan java netbeans IDE 6.9.1 dengan langkah-langkah yang berurutan :
  1. Klik menu file, pilih New Project, kemudian pilih Java Web >> Web Application >> Klik Next

 





2. Tuliskan nama project >> klik next 

*Project name diisi sesuai keinginan pembuat , sebagai contoh dalam tutorial ini, Project Name : KalkulatorUas *


3.       Selanjutnya pada tahap Server and Setting pilih server Apache Tomcat 6.0.26, Java EE 5 dan Context path biarkan default >> klik finish
      

4.      Lalu membuat file .jsp dengan cara, klik kanan pada project >> New >> JSP, lalu isi ‘File Name’ sesuai keinginan dan biarkan yang lainnya default >> klik finish.
*dalam tutorial ini File Name : UasKalkulator*

5.       Kemudian ubah title .jsp pada tag <title> (<title> servlet calculator </title>), lalu tuliskan script berikut pada tag <head> UasKalkulator.jsp:

<script LANGUAGE="JavaScript">
function addChar(input, character) {
      if(input.value == null || input.value == "0")
                     input.value = character
           else
                     input.value += character
}

function cos(form) {
              form.display.value = Math.cos(form.display.value);
     }
function sin(form) {
              form.display.value = Math.sin(form.display.value);
      }
function tan(form) {
              form.display.value = Math.tan(form.display.value);
       }
          function sqrt(form) {
form.display.value = Math.sqrt(form.display.value);
}

function ln(form) {
form.display.value = Math.log(form.display.value);
}
function exp(form) {
form.display.value = Math.exp(form.display.value);
}
function deleteChar(input) {
 input.value = input.value.substring(0, input.value.length - 1)
}
function changeSign(input) {
  if(input.value.substring(0, 1) == "-")
    input.value = input.value.substring(1, input.value.length)
  else
    input.value = "-" + input.value
}
function compute(form) {
form.display.value = eval(form.display.value)
}
function square(form) {
form.display.value = eval(form.display.value) * eval(form.display.value)
}
function checkNum(str) {
for (var i = 0; i < str.length; i++) {
              var ch = str.substring(i, i+1)
              if (ch < "0" || ch > "9") {
if (ch != "/" && ch != "*" && ch != "+" && ch != "-" && ch != "." && ch != "(" && ch!= ")") {
                           alert("invalid entry!")
                      return false
                     }
              }
     }
     return true
}
</script>


6.       Lalu tulis code berikut pada tag <body>


<form NAME="sci-calc">
  <TABLE CELLSPACING="0" CELLPADDING="1">
   <TR>
     <TD COLSPAN="5" ALIGN="center"><INPUT NAME="display" VALUE="0" SIZE="28" MAXLENGTH="25"></TD>
   </TR>
   <TR>
     <TD ALIGN="center"><INPUT TYPE="button" VALUE=" exp " ONCLICK="if (checkNum(this.form.display.value)) { exp(this.form) }"></TD>
     <TD ALIGN="center"><INPUT TYPE="button" VALUE="  7  " ONCLICK="addChar(this.form.display, '7')"></TD>
     <TD ALIGN="center"><INPUT TYPE="button" VALUE="  8  " ONCLICK="addChar(this.form.display, '8')"></TD>
     <TD ALIGN="center"><INPUT TYPE="button" VALUE="  9  " ONCLICK="addChar(this.form.display, '9')"></TD>
     <TD ALIGN="center"><INPUT TYPE="button" VALUE="   /   " ONCLICK="addChar(this.form.display, '/')"></TD>
   </TR>

   <TR>
     <TD ALIGN="center"><INPUT TYPE="button" VALUE="   ln   " ONCLICK="if (checkNum(this.form.display.value)) { ln(this.form) }"></TD>

<TD ALIGN="center"><INPUT TYPE="button" VALUE="  4  " ONCLICK="addChar(this.form.display, '4')"></TD>

<TD ALIGN="center"><INPUT TYPE="button" VALUE="  5  " ONCLICK="addChar(this.form.display, '5')"></TD>

<TD ALIGN="center"><INPUT TYPE="button" VALUE="  6  " ONCLICK="addChar(this.form.display, '6')"></TD>

<TD ALIGN="center"><INPUT TYPE="button" VALUE="   *   " ONCLICK="addChar(this.form.display, '*')"></TD>

    </TR>

    <TR>

       <TD ALIGN="center"><INPUT TYPE="button" VALUE=" sqrt " ONCLICK="if (checkNum(this.form.display.value)) { sqrt(this.form) }"></TD>

     <TD ALIGN="center"><INPUT TYPE="button" VALUE="  1  " ONCLICK="addChar(this.form.display, '1')"></TD>

     <TD ALIGN="center"><INPUT TYPE="button" VALUE="  2  " ONCLICK="addChar(this.form.display, '2')"></TD>

     <TD ALIGN="center"><INPUT TYPE="button" VALUE="  3  " ONCLICK="addChar(this.form.display, '3')"></TD>

     <TD ALIGN="center"><INPUT TYPE="button" VALUE="   -   " ONCLICK="addChar(this.form.display, '-')"></TD>

    </TR>

   <TR>

     <TD ALIGN="center"><INPUT TYPE="button" VALUE="  sq  " ONCLICK="if (checkNum(this.form.display.value)) { square(this.form) }"></TD>

     <TD ALIGN="center"><INPUT TYPE="button" VALUE="  0  " ONCLICK="addChar(this.form.display, '0')"></TD>

     <TD ALIGN="center"><INPUT TYPE="button" VALUE="   .  " ONCLICK="addChar(this.form.display, '.')"></TD>

     <TD ALIGN="center"><INPUT TYPE="button" VALUE=" +/- " ONCLICK="changeSign(this.form.display)"></TD>

     <TD ALIGN="center"><INPUT TYPE="button" VALUE="   +  " ONCLICK="addChar(this.form.display, '+')"></TD>

    </TR>

   <TR>

     <TD ALIGN="center"><INPUT TYPE="button" VALUE="    (    " ONCLICK="addChar(this.form.display, '(')"></TD>

     <TD ALIGN="center"><INPUT TYPE="button" VALUE="cos" ONCLICK="if (checkNum(this.form.display.value))
{ cos(this.form) }"></TD>

     <TD ALIGN="center"><INPUT TYPE="button" VALUE=" sin" ONCLICK="if (checkNum(this.form.display.value))
{ sin(this.form) }"></TD>

     <TD ALIGN="center"><INPUT TYPE="button" VALUE=" tan" ONCLICK="if (checkNum(this.form.display.value))
{ tan(this.form) }"></TD>

<TD ALIGN="center"><INPUT TYPE="button" VALUE="   )   " ONCLICK="addChar(this.form.display, ')')"></TD>

    </TR>

   <TR>

     <TD ALIGN="center"><INPUT TYPE="button" VALUE="clear" ONCLICK="this.form.display.value = 0 "></TD>

     <TD ALIGN="center" COLSPAN="3"><INPUT TYPE="button" VALUE="backspace" ONCLICK="deleteChar(this.form.display)"></TD>

<TD ALIGN="center"><INPUT TYPE="button" VALUE="enter" NAME="enter" ONCLICK="if (checkNum(this.form.display.value)) { compute(this.form) }"></TD>

  </TR>

 </TABLE>

</form>

    
7. Setelah membuat file .jsp (UasKalkulator.jsp), kemudian buat MainServlet.java untuk memproses dan memanggil file KalkulatorUas.jsp ketika dijalankan: klik kanan pada project >> New >> Servlet . Isi ‘Class Name’ (contoh : MainServlet) dan ‘package’ (contoh : Servlet) >> Next, biarkan semua default (URL Pattern bebas diubah) >> klik finish




8.     Kemudian hapus code html pada class processRequests


/* TODO output your page here
 out.println("<html>");
 out.println("<head>");
 out.println("<title>Servlet MainServlet</title>"); 
 out.println("</head>");
 out.println("<body>");
 out.println("<h1>Servlet MainServlet at " + request.getContextPath () + "</h1>");
 out.println("</body>");
 out.println("</html>");
*/

Dan ganti dengan code berikut:
              response.sendRedirect("calculator.jsp");
 
9.    selesai


III.                    Tutorial Menjalankan Servlet Kalkulator

1.       Untuk menjalankan servlet, ubah web.xml dengan cara: Buka web.xml (pada folder Web Pages >> WEB INF) kemudian ubah Welcome files (yang defaultnya index.jsp) menjadi URL pattern dari file servlet kita (MainServlet)




2.      Lalu klik kanan pada project >> pilih Build atau Clean and Build. Dan klik kanan lagi pada project >> run





3.       Tampilan kalkulator servlet pada browser

Tidak ada komentar:

Posting Komentar