Tutorial Pembuatan Kalkulator (dengan menggunakan servlet pada netbeans) Tugas UAS praktikum web programming

Servlet adalah teknologi Java untuk aplikasi web. Teknologi servlet merupakan salah satu teknologi penting dari J2EE karena juga menjadi landasan dari teknologi JSP(Java Server Pages). Teknologi Java dapat dikatakan mendominasi teknologi enterprise atau server side karena teknologi ini terbukti tangguh dan stabil dalam aplikasi enterprise (J2EE). Teknologi Java memperkenalkkan Servlet sebagai alternatif lain dari program CGI (Common Gateway Interface). CGI merupakan program yang dikembangkan untuk membuat halaman web menjadi lebih dinamis. CGI memungkinkan adanya interaksi antara user dengan web server, misalkan user input data pribadi melalui form HTML, kemudian data di proses di web server. Program CGI banyak ditulis dalam bahasa Perl atau C++.

Tutorial sederhana ini tentang bagaimana membuat Kalkulator yang selanjutnya dapat dipasang pada web anda sebagai alat bantu perhitungan sederhana untuk pengunjung website anda. Dalam membuat Form kalkulasi dapat menggunakan kalkulator ini sebagai alternatif terutama pada website html/php yang bersifat statis. Cara pembuatan Calculator dengan code pemrograman Javascript Pembuatan kalkulator ini sebenarnya bukan sepenuhnya menggunakan servlet tetapi digabungankan dengan file .jsp sebagai form kalkulatornya, sedangkan servlet digunakan sebagai pemanggil dari file .jsp tersebut, berikut tutorial pembuatannya:

1. Klik menu file, pilih New Project, kemudian pilih Java Web => Web Application

=> Klik Next

2. Tuliskan nama project (misalkan: uas_kalkulator) => klik next

3. Pilih server Apache Tomcat 6.0.26, Java EE 5, Context path biarkan default => klik finish

4. Jika belum terinstal server Apache Tomcatnya, pilih Add => Chose Server

Tomcat 6.0 => Klik Next => isi server location dengan cara klik browse dan cari folder Apache tomcatnya (download terlebih dahulu di http://tomcat.apache.org/ , kemudian extraxt setelah didownload) => Klik Open => Finish => Finish

5. Kemudian buat file kalkulator.jsp (nama file terserah anda) dengan cara, klik kanan pada project => New => JSP, kemudian isikan nama file (misal

kalkulator) dan biarkan yang lainnya default => klik finish

5. Kemudian ubah title .jsp pada tag <title> (<title> SITI ERMILA SUCIASIH </title>), lalu tuliskan script berikut pada tag <head> kalkulator.jsp:

<%--

Document : kalkulator

Created on : Jan 2, 2012, 1:14:45 PM

Author : ACE

--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>SITI ERMILA SUCIASIH</title>

</head>

<body>

<h1>109091000042 Siti Ermila Suciasih SE5D</h1>

<h1>Praktikum Web Programming</h1>

<form name="Keypad" action>

<table border="1" bgcolor="#838383">

<tr>

<td colspan="5" bgcolor="#DFDFDF">

<input name="ReadOut" type="Text" size="30" value="0">

</td>

</tr>

<tr>

<td bgcolor="#DFDFDF">

<input name="btnSeven" type="Button" value=" 7 " onClick="NumPressed(7)">

</td>

<td bgcolor="#DFDFDF">

<input name="btnEight" type="Button" value=" 8 " onClick="NumPressed(8)">

</td>

<td bgcolor="#DFDFDF">

<input name="btnNine" type="Button" value=" 9 " onClick="NumPressed(9)">

</td>

<td bgcolor="#DFDFDF"><input name="btnNeg" type="Button" value=" +/- " onClick="Neg()"></td>

<td bgcolor="#DFDFDF"><input name="btnPercent" type="Button" value=" % " onClick="Percent()"></td>

</tr>

<tr>

<td bgcolor="#DFDFDF">

<input name="btnFour" type="Button" value=" 4 " onClick="NumPressed(4)">

</td>

<td bgcolor="#DFDFDF">

<input name="btnFive" type="Button" value=" 5 " onClick="NumPressed(5)">

</td>

<td bgcolor="#DFDFDF">

<input name="btnSix" type="Button" value=" 6 " onClick="NumPressed(6)">

</td>

<td bgcolor="#DFDFDF"><input name="btnPlus" type="Button" value=" + "

onClick="Operation('+')"></td>

<td bgcolor="#DFDFDF"><input name="btnMultiply" type="Button" value=" * "

onClick="Operation('*')"></td>

</tr>

<tr>

<td bgcolor="#DFDFDF">

<input name="btnOne" type="Button" value=" 1 " onClick="NumPressed(1)">

</td>

<td bgcolor="#DFDFDF">

<input name="btnTwo" type="Button" value=" 2 " onClick="NumPressed(2)">

</td>

<td bgcolor="#DFDFDF">

<input name="btnThree" type="Button" value=" 3 " onClick="NumPressed(3)">

</td>

<td bgcolor="#DFDFDF"><input name="btnMinus" type="Button" value=" - "

onClick="Operation('-')"></td>

<td bgcolor="#DFDFDF"><input name="btnDivide" type="Button" value=" / "

onClick="Operation('/')"></td>

</tr>

<tr>

<td bgcolor="#DFDFDF">

<input name="btnZero" type="Button" value=" 0 " onClick="NumPressed(0)">

</td>

<td bgcolor="#DFDFDF">

<input name="btnDecimal" type="Button" value=" . " onClick="Decimal()">

</td>

<td colspan="3" bgcolor="#797979">

<input name="btnClear" type="Button" value=" C " onClick="Clear()">

<input name="btnClearEntry" type="Button" value=" CE " onClick="ClearEntry()">

<input name="btnEquals" type="Button" value=" = " onClick="Operation('=')"></td>

</tr>

</table>

</form><script LANGUAGE="JavaScript">

var FKeyPad = document.Keypad;

var Accum = 0;

var FlagNewNum = false;

var PendingOp = "";

function NumPressed (Num) {

if (FlagNewNum) {

FKeyPad.ReadOut.value = Num;

FlagNewNum = false;

}

else {

if (FKeyPad.ReadOut.value == "0")

FKeyPad.ReadOut.value = Num;

else

FKeyPad.ReadOut.value += Num;

}

function Operation (Op) {

var Readout = FKeyPad.ReadOut.value;

if (FlagNewNum && PendingOp != "=");

else

{

FlagNewNum = true;

if ( '+' == PendingOp )

Accum += parseFloat(Readout);

else if ( '-' == PendingOp )

Accum -= parseFloat(Readout);

else if ( '/' == PendingOp )

Accum /= parseFloat(Readout);

else if ( '*' == PendingOp )

Accum *= parseFloat(Readout);

else

Accum = parseFloat(Readout);

FKeyPad.ReadOut.value = Accum;

PendingOp = Op;

}

function Decimal () {

var curReadOut = FKeyPad.ReadOut.value;

if (FlagNewNum) {

curReadOut = "0.";

FlagNewNum = false;

}

else

{

if (curReadOut.indexOf(".") == -1)

curReadOut += ".";

}

FKeyPad.ReadOut.value = curReadOut;

}

function ClearEntry () {

FKeyPad.ReadOut.value = "0";

FlagNewNum = true;

}

function Clear () {

Accum = 0;

PendingOp = "";

ClearEntry();

}

function Neg () {

FKeyPad.ReadOut.value = parseFloat(FKeyPad.ReadOut.value) * -1;

}

function Percent () {

FKeyPad.ReadOut.value = (parseFloat(FKeyPad.ReadOut.value) / 100) * parseFloat(Accum);

}

</script>

</body>

</html>

6. Setelah kita membuat kalkulator.jsp, barulah kita buat MainServlet.java untuk memproses dan memanggil file Kalkulator.jsp ketika dijalankan: klik kanan pada project => New => Servlet (jika tidak ada pilih other => web => servlet => klik Next) isikan class name (misal MainServlet) dan package (misal Servlet) => klik Next, biarkan semua default (tetapi jika ingin mengganti URL Patternnya silakan saja) => klik finish

7. Kemudian hapus syntax html pada class processRequest:

/* 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>");

8. Dan ganti dengan syntax berikut:

response.sendRedirect("calculator.jsp");

method sendRedirect merupakan method yang berfungsi sebagai pengalihan response, method tersebut dapat ditemukan dalam object HttpServletResponse. Dengan memanggil method sendRedirect (String relativePath), kita akan mengalihkan response ke relative path tertentu. Method ini secara efektif memerintahkan browser untuk mengirim request yang lain ke relative path-nya. Sedangkan “kalkulator.jsp” adalah nama file pengalihan requestnya.

package servlet;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class kalkulator_uasmila extends HttpServlet {

protected void processRequest(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setContentType("text/html;charset=UTF-8");

PrintWriter out = response.getWriter();

try {

response.sendRedirect("kalkulator.jsp");

} finally {

out.close();

}

// <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on the + sign on the left to edit the code.">

/**

* Handles the HTTP <code>GET</code> method.

* @param request servlet request

* @param response servlet response

* @throws ServletException if a servlet-specific error occurs

* @throws IOException if an I/O error occurs

@Override

protected void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

processRequest(request, response);

}

/**

* Handles the HTTP <code>POST</code> method.

* @param request servlet request

* @param response servlet response

* @throws ServletException if a servlet-specific error occurs

* @throws IOException if an I/O error occurs

@Override

protected void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

processRequest(request, response);

}

/**

* Returns a short description of the servlet.

* @return a String containing servlet description

@Override

public String getServletInfo() {

return "Short description";

}// </editor-fold>

9. Jika Semua langkah tersebut sudah dilakukan maka calculator.jsp sudah

selesai dan siap untuk dijalankan (tapi jika pas dijalankan masih ada beberapa

yang mengalami error, periksa kembali script dan syntax htmlnya).

MENJALANKAN SERVLET KALKULATOR

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