WEB PROGRAMMING

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>

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>

<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 kanan
pada project => New => Servlet => klik Next, biarkan semua default => klik finish

7. yang terakhir adalah run file Kalkulator.Jsp nya.

Cara membuat data base.

Pertama akktifkan xampp di mysql xampp control. Kemudian buka localhost/phpmyadmin di browser untuk membuat data base baru atau data base yang sudah ada.

Pada pembahsan ini kita akan membuat data base SEKOLAH, yang didalamnya terdiri dari 5 table yg berelasi antara table satu dengan table yang lainnya.

- Table siswa

- Table mata pelajaran

- Table nilai

- Table jenis kelamin

- Table guru

Cara membuat data base baru.

Create databasePrint screen create data base baru SEKOLAH

Gambar ini adalah contoh tampilan mysql disaat kita ingin membuat create database. Data base yang kita buat cuam harus ada satu atau tidak ada duplikasinya, karena data base yang akan di create tidak boleh sama dengan data base yang telah ada.

1. Create table

- Table siswa