Tutorial Pembuatan Aplikasi Kalkulator
(Menggunakan Servlet)
A. Pengenalan
Servlet adalah program kecil yang ditulis dengan bahasa Java yang dibuat
untuk berjalan di atas web server. Kata Servlet memiliki kemiripan dengan Applet.
Perbedaannya adalah applet berjalan disisi klien (client-side) sedangakan Servlet
berjalan disisi server (server-side).
B. Tutorial Pembuatan Aplikasi Kalkulator
Pembuatan kalkulator ini tidak sepenuhnya menggunakan servlet te api digabungankan dengan file .jsp sebagai form kalkulatornya, sedangkan
servlet digunakan sebagai pemanggil dari file .jsp tersebut, berikut tutorial pembuatan aplikasi kalkulatornya:1. Klik menu file, pilih New Project, kemudian pilih Java Web => Web Application
=> Klik Next 
2. Tuliskan nama project (misalkan Aplikasi_kalkulator) => klik next
3. Pilih server Apache Tomcat 7.0.140, Java EE 5, Context path biarkan default =>
klik finish.
4. Kemudian buat file kalkulator.jsp (nama file terserah ) dengan cara, klik kanan pada project => New => JSP, kemudian isikan nama file (missal kalkulator) dan biarkan yang lainnya default => klik finish
5. Kemudian tuliskan script berikut pada tag <head> calculator.jsp:
| <%-- Document : kalkulator Created on : Jan 3, 2012, 4:41:21 PM Author : Acer --%> <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Page</title> <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> </head> <body> <h1><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=" 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> <TD ALIGN="center"><INPUT TYPE="button" VALUE="clear" ONCLICK="this.form.display.value = 0 "></TD> </TR> <TR> <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> <TD ALIGN="center" COLSPAN="3"><INPUT TYPE="button" VALUE="backspace" ONCLICK="deleteChar(this.form.display)"></TD> </TR> <TR> <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> <TD ALIGN="center"><INPUT TYPE="button" VALUE=" ) " ONCLICK="addChar(this.form.display, ')')"></TD> </TR> <TR> <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> <TD ALIGN="center"><INPUT TYPE="button" VALUE="=" NAME="enter" ONCLICK="if (checkNum(this.form.display.value)) { compute(this.form) }"></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> </TR> </TABLE> </form </body> </html> |
6. Setelah membuat calculator.jsp, baru kita buat KalkulatorServlet.java untuk
memproses dan memanggil file Kalkulator.jsp agar dapat dijalankan: klik kananpada project => New => Servlet => klik Next, biarkan semua default => klik finish
7. yang terakhir adalah run file Kalkulator.Jsp nya.
