Tutorial Pembuatan Kalkulator Dengan Servlet

Arif Nur Rahman 109091000021 SE5D
Prak. Web Programming

http://arstrois.blogspot.com
arstrois@gmail.com
Tutorial Pembuatan Kalkulator

(dengan menggunakan servlet pada netbeans)
[2011]
A. Bagian 1: 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).
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++.
B. Bagian 2: Tutorial Pembuatan Kalkulator

Pada bagian ini akan dibahas bagaimana membuat suatu kalkulator
dengan menggunakan servlet. 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 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 calculator.jsp (nama file terserah anda) dengan cara, klik
kanan pada project => New => JSP, kemudian isikan nama file (missal
calculator) dan biarkan yang lainnya default => klik finish
6. Kemudian ubah tulis title .jsp pada tag <title> (<title> servlet calculator </title>),
lalu tuliskan script berikut pada tag <head> calculator.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>
7. Kemudian tuliskan sytanx berikut ini 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="
/
"
ONCLICK="addChar(this.form.display, '/')"></TD>
</TR>
<TR>
ln
"
ln(this.form) }"></TD>

*
"
ONCLICK="addChar(this.form.display, '*')"></TD>
</TR>
<TR>
<TD ALIGN="center"><INPUT TYPE="button" VALUE=" sqrt "
sqrt(this.form) }"></TD>
"
ONCLICK="addChar(this.form.display, '-')"></TD>
</TR>
<TR>
<TD ALIGN="center"><INPUT TYPE="button" VALUE=" sq "
square(this.form) }"></TD>
. "
ONCLICK="addChar(this.form.display, '.')"></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE=" +/- "
ONCLICK="changeSign(this.form.display)"></TD>
+ "
ONCLICK="addChar(this.form.display, '+')"></TD>
</TR>
<TR>
(
" ONCLICK="addChar(this.form.display, '(')"></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="cos"
cos(this.form) }"></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE=" sin"
sin(this.form) }"></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE=" tan"
tan(this.form) }"></TD>

)
"
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
8. Setelah kita membuat calculator.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
9. 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>");
*/
10. Dan ganti dengan syntax berikut:
response.sendRedirect("calculator.jsp");
* Penjelasan: 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 calculator.jsp adalah nama file pengalihan
requestnya.
11. 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).
C. Bagian 3: Tutorial Menjalankan Servlet

Kalkulator
Pada bagian ini akan dijelaskan bagaimana cara menjalankan servlet yang
telah kita buat, berikut tutorialnya:
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 (MainServlet)
2. Setelah itu klik kana pada project, pilih Build atau Clean and Build:
3. Setelah itu klik kanan lagi pada project, pilih run dan tunggu proses running
berjalan. Nantinya hasil running akan diperlihatkan pada browser yang ada
miliki:
4. Hasil Running MainServlet.java, jika tampilan dibrowser seperti ini maka kita
telah berhasil membuat kalkulator dengan servlet:

Tutorial Pembuatan Kalkulator Dengan Servlet

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Tutorial Pembuatan Kalkulator Dengan Servlet

Diunggah oleh

Hak Cipta:

Format Tersedia

Arif Nur Rahman 109091000021 SE5D

Prak. Web Programming

Tutorial Pembuatan Kalkulator

B. Bagian 2: Tutorial Pembuatan Kalkulator

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

7. Kemudian tuliskan sytanx berikut ini pada tag <body>:

<TD ALIGN="center"><INPUT TYPE="button" VALUE=" 4 "

<TD ALIGN="center"><INPUT TYPE="button" VALUE="

8. Setelah kita membuat calculator.jsp, barulah kita buat mainServlet.java untuk

9. Kemudian hapus syntax html pada class processRequest:

10. Dan ganti dengan syntax berikut:

C. Bagian 3: Tutorial Menjalankan Servlet

Anda mungkin juga menyukai