membuat kalkulator dengan jsp
DESCRIPTION
Laporan ini tentang bagaimana membuat Kalkulator yang selanjutnya dapat digunakan sebagai alat bantu perhitungan sederhana. Pembuatan kalkulator ini menggunakan file .jsp sebagai form kalkulatornya, yang kemudian dilengkapi dengan scrip untuk mendeklarikan hasil dari data yang di inputkan. Untuk lebih jelas berikut laporan pembuatan kalkulator jspTRANSCRIPT
OLEH:
IBRAHIM NAKI
DESI DJAFAR
FEBRIYANTO DJAFAR
FATMAH PAJIRI
LAPORAN UAS PBO
KALKULATOR.JSP
1
LA
PO
RA
N U
AS
PB
O |
IB
RA
HIM
NA
KI
LAPORAN UAS PBO
KALKULATOR.JSP
JSP adalah suatu teknologi web berbasis bahasa pemrograman Java dan
berjalan di Platform Java, serta merupakan bagian teknologi J2EE (Java 2
Enterprise Edition). JSP sangat sesuai dan tangguh untuk menangani presentasi di
web. Sedangkan J2EE merupakan platform Java untuk pengembangan sistem
aplikasi enterprise dengan dukungan API (Application Programming Inteface)
yang lengkap dan portabilitas serta memberikan sarana untuk membuat suatu
aplikasi yang memisahkan antara business logic (sistem), presentasi dan data.
Java Server Pages (JSP) adalah bahasa scripting untuk web programming
yang bersifat server side seperti halnya PHP dan ASP. JSP dapat berupa gabungan
antara baris HTML dan fungsi-fungsi dari JSP itu sendiri. Berbeda dengan Servlet
yang harus dikompilasi oleh USER menjadi class sebelum dijalankan, JSP tidak
perlu dikompilasi oleh USER tapi SERVER yang akan melakukan tugas tersebut.
Makanya pada saat user membuat pertama kali atau melakukan modifikasi
halaman dan mengeksekusinya pada web browser akan memakan sedikit waktu
sebelum ditampilkan
Laporan ini tentang bagaimana membuat Kalkulator yang selanjutnya dapat
digunakan sebagai alat bantu perhitungan sederhana. Pembuatan kalkulator ini
menggunakan file .jsp sebagai form kalkulatornya, yang kemudian dilengkapi
dengan scrip untuk mendeklarikan hasil dari data yang di inputkan. Untuk lebih
jelas berikut laporan pembuatan kalkulator jsp.
Dengan langkah awal membuat projek untuk data koding ini , yang
projeknya akan kita buat dengan nama kalkulator.jsp
2
LA
PO
RA
N U
AS
PB
O |
IB
RA
HIM
NA
KI
Buat project baru dengan cara klik file > pilih project
Maka akan muncul tampilan seperti berikut
Pilih Dynamic web Project dan pilih Next
3
LA
PO
RA
N U
AS
PB
O |
IB
RA
HIM
NA
KI
Setelah kita memilih next maka akan muncul tampilan berikut, yaitu tampilan
untuk membuat standalone dari dynamic web project. Beri nama project yang akan
anda buat yang pada kesempatan ini saya menggunakan nama UAS
Kemudian pilih Finish untuk melanjutkan project. Kemudian akan muncul layer
untuk project kita yang ada di samping kiri. Setelah itu buat folder di dalam
WebContent.
Dengan cara, klik kanan pada webcontent > New > Folder
Kemudian beri nama untuk polder projek yang akan digunakan
4
LA
PO
RA
N U
AS
PB
O |
IB
RA
HIM
NA
KI
Setelah itu buat projek di dalam polder yang telah diabuat tadi seperti berikut:
Kemudian beri nama untuk projek yang akan dibuat yang pada laporan ini saya
membuat projek dengan nama kalkulator.jsp
5
LA
PO
RA
N U
AS
PB
O |
IB
RA
HIM
NA
KI
dengan koding berikut:
<html><head><title>Kalkulator</title></head> <body> <%-- Oleh: > Ibrahim Naki > Desi Jafar > Febriyanto Djafar > Fatmah Pajiri --%> <center> <h1>UAS PBO</h1> <h1>TEKNIK INFORMATIKA</h1> <form NAME="sci-calc"> <TABLE bgcolor="#838383" border="1"> <TR> <TD COLSPAN="5" bgcolor="#DFDFDF"><INPUT NAME="display" VALUE="0" SIZE="40" MAXLENGTH="25"></TD> </TR> <TR> <TD bgcolor="#DFDFDF"><INPUT TYPE="button" size="5" VALUE=" exp " ONCLICK="if (checkNum(this.form.display.value)) { exp(this.form) }"></TD> <TD bgcolor="#DFDFDF"><INPUT TYPE="button" VALUE=" 1 " ONCLICK="addChar(this.form.display, '1')"></TD> <TD bgcolor="#DFDFDF"><INPUT TYPE="button" VALUE=" 2 " ONCLICK="addChar(this.form.display, '2')"></TD> <TD bgcolor="#DFDFDF"><INPUT TYPE="button" VALUE=" 3 " ONCLICK="addChar(this.form.display, '3')"></TD> <TD bgcolor="#DFDFDF"><INPUT TYPE="button" VALUE=" / " ONCLICK="addChar(this.form.display, '/')"></TD> </TR> <TR> <TD bgcolor="#DFDFDF"><INPUT TYPE="button" VALUE=" ln " ONCLICK="if (checkNum(this.form.display.value)) { ln(this.form) }"></TD> <TD bgcolor="#DFDFDF"><INPUT TYPE="button" VALUE=" 4 " ONCLICK="addChar(this.form.display, '4')"></TD> <TD bgcolor="#DFDFDF"><INPUT TYPE="button" VALUE=" 5 " ONCLICK="addChar(this.form.display, '5')"></TD> <TD bgcolor="#DFDFDF"><INPUT TYPE="button" VALUE=" 6 " ONCLICK="addChar(this.form.display, '6')"></TD> <TD bgcolor="#DFDFDF"><INPUT TYPE="button" VALUE=" * " ONCLICK="addChar(this.form.display,
6
LA
PO
RA
N U
AS
PB
O |
IB
RA
HIM
NA
KI
ONCLICK="addChar(this.form.display, '*')"></TD> </TR> <TR> <TD bgcolor="#DFDFDF"><INPUT TYPE="button" VALUE=" sqrt " ONCLICK="if (checkNum(this.form.display.value)) { sqrt(this.form) }"></TD> <TD bgcolor="#DFDFDF"><INPUT TYPE="button" VALUE=" 7 " ONCLICK="addChar(this.form.display, '7')"></TD> <TD bgcolor="#DFDFDF"><INPUT TYPE="button" VALUE=" 8 " ONCLICK="addChar(this.form.display, '8')"></TD> <TD bgcolor="#DFDFDF"><INPUT TYPE="button" VALUE=" 9 " ONCLICK="addChar(this.form.display, '9')"></TD> <TD bgcolor="#DFDFDF"><INPUT TYPE="button" VALUE=" - " ONCLICK="addChar(this.form.display, '-')"></TD> </TR> <TR> <TD bgcolor="#DFDFDF"><INPUT TYPE="button" VALUE=" sq " ONCLICK="if (checkNum(this.form.display.value)) { square(this.form) }"></TD> <TD bgcolor="#DFDFDF"><INPUT TYPE="button" VALUE=" 0 " ONCLICK="addChar(this.form.display, '0')"></TD> <TD bgcolor="#DFDFDF"><INPUT TYPE="button" VALUE=" . " ONCLICK="addChar(this.form.display, '.')"></TD> <TD bgcolor="#DFDFDF"><INPUT TYPE="button" VALUE=" +/- " ONCLICK="changeSign(this.form.display)"></TD> <TD bgcolor="#DFDFDF"><INPUT TYPE="button" VALUE=" + " ONCLICK="addChar(this.form.display, '+')"></TD> </TR> <TR> <TD bgcolor="#DFDFDF"><INPUT TYPE="button" VALUE=" ( " ONCLICK="addChar(this.form.display, '(')"></TD> <TD bgcolor="#DFDFDF"><INPUT TYPE="button" VALUE="cos" ONCLICK="if (checkNum(this.form.display.value)) { cos(this.form) }"></TD> <TD bgcolor="#DFDFDF"><INPUT TYPE="button" VALUE=" sin" ONCLICK="if (checkNum(this.form.display.value)) { sin(this.form) }"></TD> <TD bgcolor="#DFDFDF"><INPUT TYPE="button" VALUE=" tan" ONCLICK="if (checkNum(this.form.display.value)) { tan(this.form) }"></TD> <TD bgcolor="#DFDFDF"><INPUT TYPE="button" VALUE=" ) "
7
LA
PO
RA
N U
AS
PB
O |
IB
RA
HIM
NA
KI
Koding ini untuk membetuk kumpulan buton untuk membuat tampilan kalkulator,
yang tampilanya akan menjadi berikut:
Buton ini belum berfugsi sebagaimana kalkulator pada umumnya, agar dapat
berfungsi menjadi alat hitung, kita tambahkan scrip untuk mendeklarasikanya,
<TD bgcolor="#DFDFDF"><INPUT TYPE="button" VALUE=" ) " ONCLICK="addChar(this.form.display, ')')"></TD> </TR> <TR> <TD bgcolor="#DFDFDF"><INPUT TYPE="button" VALUE="Del" ONCLICK="this.form.display.value = 0 "></TD> <TD bgcolor="#DFDFDF" COLSPAN="3"><INPUT TYPE="button" VALUE="backspace" ONCLICK="deleteChar(this.form.display)"></TD> <TD bgcolor="#DFDFDF"><INPUT TYPE="button" VALUE="=" NAME="enter" ONCLICK="if (checkNum(this.form.display.value)) { compute(this.form)}"></TD> </TR> </TABLE> </form> </center> </body> </html>
8
LA
PO
RA
N U
AS
PB
O |
IB
RA
HIM
NA
KI
yang diletakan pada bagian atas atau diatara <head> scrip </head>. Yang kodinya
kurang lebih seperti berikut ini:
<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++) {
9
LA
PO
RA
N U
AS
PB
O |
IB
RA
HIM
NA
KI
Untuk mengubah agar tataletak butan menjadi lebih rapi kita tambahkan koding
berikut sebelum html
Sehingga tampilanya menjadi seperti berikut:
Sekian kalkulator.jsp siap digunakan
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("Bolo Maapu Ja mo Wali!") return false } } } return true } </script>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">