Membuat Kalkulator Dengan JSP
Upcoming SlideShare
Loading in...5
×
 

Membuat Kalkulator Dengan JSP

on

  • 385 views

Laporan ini tentang bagaimana membuat Kalkulator yang selanjutnya dapat ...

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

Statistics

Views

Total Views
385
Views on SlideShare
318
Embed Views
67

Actions

Likes
0
Downloads
1
Comments
0

1 Embed 67

http://ibrahimnaki.wordpress.com 67

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Membuat Kalkulator Dengan JSP Membuat Kalkulator Dengan JSP Document Transcript

  • LAPORAN UAS PBO KALKULATOR.JSP OLEH: IBRAHIM NAKI DESI DJAFAR FEBRIYANTO DJAFAR FATMAH PAJIRI
  • 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 LAPORAN UAS PBO | IBRAHIM NAKI digunakan sebagai alat bantu perhitungan sederhana. Pembuatan kalkulator ini 1 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
  • Buat project baru dengan cara klik file > pilih project Pilih Dynamic web Project dan pilih Next LAPORAN UAS PBO | IBRAHIM NAKI Maka akan muncul tampilan seperti berikut 2
  • 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. LAPORAN UAS PBO | IBRAHIM NAKI Dengan cara, klik kanan pada webcontent > New > Folder 3 Kemudian beri nama untuk polder projek yang akan digunakan
  • Setelah itu buat projek di dalam polder yang telah diabuat tadi seperti berikut: LAPORAN UAS PBO | IBRAHIM NAKI Kemudian beri nama untuk projek yang akan dibuat yang pada laporan ini saya membuat projek dengan nama kalkulator.jsp 4
  • LAPORAN UAS PBO | IBRAHIM NAKI dengan koding berikut: 5 <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,
  • 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="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=" ) " LAPORAN UAS PBO | IBRAHIM NAKI 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=" ( " 6
  • <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> Koding ini untuk membetuk kumpulan buton untuk membuat tampilan kalkulator, LAPORAN UAS PBO | IBRAHIM NAKI yang tampilanya akan menjadi berikut: 7 Buton ini belum berfugsi sebagaimana kalkulator pada umumnya, agar dapat berfungsi menjadi alat hitung, kita tambahkan scrip untuk mendeklarasikanya,
  • 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); 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++) { LAPORAN UAS PBO | IBRAHIM NAKI } function exp(form) { 8
  • 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> Untuk mengubah agar tataletak butan menjadi lebih rapi kita tambahkan koding berikut sebelum html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> LAPORAN UAS PBO | IBRAHIM NAKI Sehingga tampilanya menjadi seperti berikut: 9 Sekian kalkulator.jsp siap digunakan