dW's Camp: Membuat Kalkulator dengan Servlet

Lima Langkah

Membuat Kalkulator dengan Servlet

Software yang digunakan :

Netbean IDE 7.01
Apache Tomcat 7.0.14.0
XAMPP 1.7.2

Kalkulator merupakan Program perhitungan yang umum digunakan dalam ilmu Matematika, Berikut adalah cara membuat sebuah kalkulator dalam program Servlet.

Apa itu Sevlet ? cek di postingan sebelumnya ( link )

Berikut penjabaran langkah dalam membuat Kalkulator dengan Servlet :

Langkah 1 :

Setelah mengaktifkan Software Netbean dan Xampp. Buat sebuah Projek baru pada Netbean,

1. New Project,

2. Masuk ke Steps: Choose Project. Pilih Kategori, Java Web. Lalu, Pilih Project, Web Application, (lihat gambar 01)

gambar01

3. Next,

4. Masuk ke Steps: Name and Location. Beri nama projek Anda, disini saya memberi nama ‘KalkulatorServlet’. Biarkan lokasi projek sesuai dengan yang tertera langsung, (lihat gambar 02)

gambar02

5. Next,

6. Masuk ke Steps: Server and Setting. Pastikan Server yang tertera adalah Apache Tomcat 7.0.14.0. Java EE Version = Java EE 5. Sedangkan untuk Context Path terisi dengan nama yang sama dengan nama projek Anda di atas, (lihat gambar 03)

gambar03

7. Next,

8. Masuk ke Steps: Framework. Framework yang tertera tidak perlu ada yang dicentang,

9. Finis,

10. Pastikan projek tersebut dapat tersambung dengan Tomcat. Dengan cara melakukan Clean and Build projek, dan pastikan akan muncul penampangan berikut : (lihat gambar 04)

gambar04

Langkah 2 :

Buat kelas Servlet Baru, sebagai page untuk halaman utama dari web,

1. Klik kanan pada folder Project yang telah dibuat diatas,

2. Pilih New, pilih tipe Servlet (karena kita akan membuat file berformat servlet), lihat gambar 05 berikut,

3. Masuk ke Steps: Name and Location. Isi nama kelas pada kolom Class Name, saya mengisinya dengan nama “Kalkulator”, (lihat gambar 06)

gambar 06

4. Next,
5. Masuk ke Steps: Configure Servlet Deployment. Pastikan Servlet Name sama dengan nama kelas tersebut dan URL Pattern(s) berisikan /-namaKelas-, disini saya mengisinya dengan /Kalkulator, (lihat gambar07)

gambar 07

6. Finis. Maka tampilan Source akan muncul,
7. Isikan pada method ‘processRequest’. Di dalam try{...}, terdapat tempat untuk menentukan isi dari Output projek tersebut. Isikan dengan kode di bawah ini :
(kode)

   oout.println("<html>");
out.println("<head>");
out.println("<title>Servlet Kalkulator</title>");
out.println("</head>");
out.println("<body bgcolor=Lightpink>");
out.println("<table border='0' width='800'>");

/** Judul Kalkulator **/
out.println("<tr align='center'><td><h1><font size='7'>Kalkulator Servlet</font></h1></td></tr>");
out.println("</table>");
out.println("");
out.println("<table border='0' width='800'>"+

/** Kalkulator Aritmatika **/
"<tr>"+
"<form method='post' action='hitung'><td width='350' bgcolor=Lightskyblue>"+
"<fieldset>"+
"<center><h2>Kalkulator Aritmatika</h2></center>"+
"<table border='0' align='center'>"+
"<tr><td colspan='4'>"+
"Bilangan 1 : "+"<input type='text' name='first' value='0'/>"+
"</td></tr><tr><td colspan='4'>&nbsp;</td></tr>"+
"<tr><td colspan='4'>"+
"Bilangan 2 : "+"<input type='text' name='second' value='0'/>"+
"</td></tr><tr><td colspan='4'>&nbsp;</td></tr>"+
"<tr>"+
"<td align='center'><input type='submit' value='+' name='tambah'/></td>"+
"<td align='center'><input type='submit' value='-' name='kurang'/></td>"+
"<td align='center'><input type='submit' value='x' name='kali'/></td>"+
"<td align='center'><input type='submit' value='/' name='bagi'/></td>"+
"</tr></tr><tr><td colspan='4'>&nbsp;</td></tr>"+
"<tr>"+
"<td></td>"+
"<td align='center'><input type='submit' value='%' name='mod'/></td>"+
"<td align='center'><input type='submit' value='^' name='pangkat'/></td>"+
"<td></td>"+
"</tr><tr><td colspan='4'>&nbsp;</td></tr>"+
"<tr><td colspan='4'>"+
"Hasil : "+"<input type='text' name='hasil' value=''/>"+"</br></br>" +
"</td></tr>"+
"</table>"+
"</fieldset></td></form>"+

/** Kalkulator Scientific **/
"<td width='100'>&nbsp;&nbsp;&nbsp;&nbsp;</td>"+
"<form method='post' action='hitung2'><td width='350' valign='top' bgcolor=Lightskyblue>"+
"<fieldset>" +
"<center><h2>Kalkulator Scientific</h2></center>"+
"<table border='0' align='center'>"+
"<tr><td colspan='4'>"+
"Bilangan : "+"<input type='text' name='third' value='0'/>"+
"</td></tr><tr><td colspan='4'>&nbsp;</td></tr>"+
"<tr>"+
"<td align='center'><input type='submit' value='sin' name='sin'/></td>"+
"<td align='center'><input type='submit' value='cos' name='cos'/></td>"+
"<td align='center'><input type='submit' value='tan' name='tan'/></td>"+
"<td align='center'><input type='submit' value='akar' name='akar'/></td>"+
"</tr></tr><tr><td colspan='4'>&nbsp;</td></tr>"+
"<tr>"+
"<td></td>"+
"<td align='center'><input type='submit' value='log' name='log'/></td>"+
"<td align='center'><input type='submit' value='exp' name='exp'/></td>"+
"<td></td>"+
"</tr><tr><td colspan='4'>&nbsp;</td></tr>"+
"<tr><td colspan='4'>"+
"Hasil : "+"<input type='text' name='hasil2' value=''/>"+
"</td></tr>"+
"<tr><td colspan='4'>&nbsp;</td></tr>"+
"</table>"+
"</fieldset></td></form></tr></table>");

//nama kelompok
out.println("<table border='0' width='800'>");
out.println("<tr align='center'><td><h3><br>KELOMPOK SERVLET KAMI </h3>"+
        "<font size='5' face='Comic Sans MS' color='Lightseagreen'><b>"+
        "10909100059 - Dwinda Faradita <br>"+
        "10909100069 - Ardini Fitria <br>"+
        "10909100073 - Anissa Siti Rahma <br>"+
        "10909100094 - Afifah Fauziah </b></font><br><br>"+"</td></tr>");
out.println("</table>");

out.println("</body>");
out.println("</html>");

Langkah 3 :

Buat kelas Servlet Baru, sebagai page untuk halaman selanjutnya dari web, halaman ini diperuntukkan untuk mengkalkulasi kalkulator yang bersifat Aritmatika.

1. Dengan melakukan langkah yang sama dengan langkah 2.

2. Untuk nama kelas pada kolom Class Name, saya mengisinya dengan Class Name “hitung” dan URL Pattern(s) berisikan ‘/hitung’.

3. Isikan pada method ‘processRequest’. Di dalam try{...}, terdapat tempat untuk menentukan isi dari Output projek tersebut. Isikan dengan kode di bawah ini :

(kode)

bhjdouble firstn = Double.parseDouble(first);
double secondn = Double.parseDouble(second);

double result = 0;


/**Melakukan Perhitungan**/
if(request.getParameter("tambah") != null) {
result = firstn + secondn;
}

else if(request.getParameter("kurang") != null) {
result = firstn - secondn;
}

else if(request.getParameter("kali") != null) {
result = firstn * secondn;
}

else if(request.getParameter("bagi")!= null) {
result = firstn / secondn;
}

else if(request.getParameter("mod") != null) {
result = firstn % secondn;
}

else if(request.getParameter("pangkat") != null) {
result = Math.pow(firstn, secondn);
}

out.println("<html>");
out.println("<head>");
out.println("<title>Servlet Kalkulator</title>");
out.println("</head>");
out.println("<body bgcolor=Lightpink>");
out.println("<table border='0' width='800'>");
out.println("<tr align='center'><td><h1>Kalkulator Servlet</h1></td></tr>");
out.println("</table>");
out.println("");
out.println("<table border='0' width='800'>"+
"<tr>"+
"<form method='post' action='hitung'><td width='350' bgcolor=Lightskyblue>"+
"<fieldset>"+
"<center><h2>Kalkulator Aritmatika</h2></center>"+
"<table border='0' align='center'>"+
"<tr><td colspan='4'>"+
"Bilangan 1 : "+"<input type='text' name='first' value='0'/>"+
"</td></tr><tr><td colspan='4'>&nbsp;</td></tr>"+
"<tr><td colspan='4'>"+
"Bilangan 2 : "+"<input type='text' name='second' value='0'/>"+
"</td></tr><tr><td colspan='4'>&nbsp;</td></tr>"+
"<tr>"+
"<td align='center'><input type='submit' value='+' name='tambah'/></td>"+
"<td align='center'><input type='submit' value='-' name='kurang'/></td>"+
"<td align='center'><input type='submit' value='x' name='kali'/></td>"+
"<td align='center'><input type='submit' value='/' name='bagi'/></td>"+
"</tr></tr><tr><td colspan='4'>&nbsp;</td></tr>"+
"<tr>"+
"<td></td>"+
"<td align='center'><input type='submit' value='%' name='mod'/></td>"+
"<td align='center'><input type='submit' value='^' name='pangkat'/></td>"+
"<td></td>"+
"</tr><tr><td colspan='4'>&nbsp;</td></tr>"+
"<tr><td colspan='4'>"+
"Hasil : "+"<input type='text' name='hasil' value='"+result+"'/>"+"</br></br>" +
"</td></tr>"+
"</table>"+
"</fieldset></td></form>"+
"<td width='100'>&nbsp;&nbsp;&nbsp;&nbsp;</td>"+
"<form method='post' action='hitung2'><td width='350' bgcolor=Lightskyblue>"+

"<fieldset>" +

"<center><h2>Kalkulator Scientific</h2></center>"+
"<table border='0' align='center'>"+
"<tr><td colspan='4'>"+
"Bilangan : "+"<input type='text' name='third' value='0'/>"+
"</td></tr><tr><td colspan='4'>&nbsp;</td></tr>"+
"<tr>"+
"<td align='center'><input type='submit' value='sin' name='sin'/></td>"+
"<td align='center'><input type='submit' value='cos' name='cos'/></td>"+
"<td align='center'><input type='submit' value='tan' name='tan'/></td>"+
"<td align='center'><input type='submit' value='akar' name='akar'/></td>"+
"</tr></tr><tr><td colspan='4'>&nbsp;</td></tr>"+
"<tr>"+
"<td></td>"+
"<td align='center'><input type='submit' value='log' name='log'/></td>"+
"<td align='center'><input type='submit' value='exp' name='exp'/></td>"+
"<td></td>"+
"</tr><tr><td colspan='4'>&nbsp;</td></tr>"+
"<tr><td colspan='4'>"+
"Hasil : "+"<input type='text' name='hasil2' value=''/>"+
"</td></tr>"+
"<tr><td colspan='4'>&nbsp;</td></tr>"+
"</table>"+
"</fieldset></td></form></tr></table>");

//nama kelompok
out.println("<table border='0' width='800'>");
out.println("<tr align='center'><td><h3><br>KELOMPOK SERVLET KAMI </h3>"+
        "<font size='5' face='Comic Sans MS' color='Lightseagreen'><b>"+
        "10909100059 - Dwinda Faradita <br>"+
        "10909100069 - Ardini Fitria <br>"+
        "10909100073 - Anissa Siti Rahma <br>"+
        "10909100094 - Afifah Fauziah </b></font><br><br>"+"</td></tr>");
out.println("</table>");

out.println("</body>");
out.println("</html>");

Ket:

· Servlet membaca parameter yang dilemparkan dari kelas Kalkulator dengan menggunakan kode dibawah ini :

String first = request.getParameter("first");

String second = request.getParameter("second");

(peletakkan kode di bawah PrintWriter dan sebelum try{...} )
· First dan second merupakan variabel yang digunakan untuk menyimpan inputan nilai yang akan dihitung

Langkah 4 :

Buat kelas Servlet Baru, sebagai page untuk halaman selanjutnya dari web, halaman ini diperuntukkan untuk mengkalkulasi kalkulator yang bersifat Scientific.

1. Dengan melakukan langkah yang sama dengan langkah 2.

2. Untuk nama kelas pada kolom Class Name, saya mengisinya dengan Class Name “hitung2” dan URL Pattern(s) berisikan ‘/hitung2’.

3. Isikan pada method ‘processRequest’. Di dalam try{...}, terdapat tempat untuk menentukan isi dari Output projek tersebut. Isikan dengan kode di bawah ini :
(kode)

bhj double thirdn = Double.parseDouble(third);
double result2 = 0;

if(request.getParameter("sin") != null) {
//    thirdn = Degrees(Radians(thirdn));
result2 = Math.sin(thirdn);
}
else if(request.getParameter("cos") != null) {
result2 = Math.cos(thirdn);
}
else if(request.getParameter("tan") != null) {
result2 = Math.tan(thirdn);
}
else if(request.getParameter("akar") != null) {
result2 = Math.sqrt(thirdn);
}
else if(request.getParameter("log") != null) {
result2 = Math.log(thirdn);
}
else if(request.getParameter("exp") != null) {
result2 = Math.exp(thirdn);
}

out.println("<html>");
out.println("<head>");
out.println("<title>Servlet Kalkulator</title>");
out.println("</head>");
out.println("<body bgcolor=Lightpink>");
out.println("<table border='0' width='800'>");
out.println("<tr align='center'><td><h1>Kalkulator Servlet</h1></td></tr>");
out.println("</table>");
out.println("");
out.println("<table border='0' width='800'>"+
"<tr>"+
"<form method='post' action='hitung'><td width='350' bgcolor=Lightskyblue>"+
"<fieldset>"+
"<center><h2>Kalkulator Aritmatika</h2></center>"+
"<table border='0' align='center'>"+
"<tr><td colspan='4'>"+
"Bilangan 1 : "+"<input type='text' name='first' value='0'/>"+
"</td></tr><tr><td colspan='4'>&nbsp;</td></tr>"+
"<tr><td colspan='4'>"+
"Bilangan 2 : "+"<input type='text' name='second' value='0'/>"+
"</td></tr><tr><td colspan='4'>&nbsp;</td></tr>"+
"<tr>"+
"<td align='center'><input type='submit' value='+' name='tambah'/></td>"+
"<td align='center'><input type='submit' value='-' name='kurang'/></td>"+
"<td align='center'><input type='submit' value='x' name='kali'/></td>"+
"<td align='center'><input type='submit' value='/' name='bagi'/></td>"+
"</tr></tr><tr><td colspan='4'>&nbsp;</td></tr>"+
"<tr>"+
"<td></td>"+
"<td align='center'><input type='submit' value='%' name='mod'/></td>"+
"<td align='center'><input type='submit' value='^' name='pangkat'/></td>"+
"<td></td>"+
"</tr><tr><td colspan='4'>&nbsp;</td></tr>"+
"<tr><td colspan='4'>"+
"Hasil : "+"<input type='text' name='hasil' value=''/>"+"</br></br>" +
"</td></tr>"+
"</table>"+
"</fieldset></td></form>"+
"<td width='100'>&nbsp;&nbsp;&nbsp;&nbsp;</td>"+
"<form method='post' action='hitung2'><td width='350' bgcolor=Lightskyblue>"+
"<fieldset>" +

"<center><h2>Kalkulator Scientific</h2></center>"+
"<table border='0' align='center'>"+
"<tr><td colspan='4'>"+
"Bilangan : "+"<input type='text' name='third' value='0'/>"+
"</td></tr><tr><td colspan='4'>&nbsp;</td></tr>"+
"<tr>"+
"<td align='center'><input type='submit' value='sin' name='sin'/></td>"+
"<td align='center'><input type='submit' value='cos' name='cos'/></td>"+
"<td align='center'><input type='submit' value='tan' name='tan'/></td>"+
"<td align='center'><input type='submit' value='akar' name='akar'/></td>"+
"</tr></tr><tr><td colspan='4'>&nbsp;</td></tr>"+
"<tr>"+
"<td></td>"+
"<td align='center'><input type='submit' value='log' name='log'/></td>"+
"<td align='center'><input type='submit' value='exp' name='exp'/></td>"+
"<td></td>"+
"</tr><tr><td colspan='4'>&nbsp;</td></tr>"+
"<tr><td colspan='4'>"+
"Hasil : "+"<input type='text' name='hasil2' value='"+result2+"'/>"+
"</td></tr>"+
"<tr><td colspan='4'>&nbsp;</td></tr>"+
"</table>"+
"</fieldset></td></form></tr></table>");

//nama kelompok
out.println("<table border='0' width='800'>");
out.println("<tr align='center'><td><h3><br>KELOMPOK SERVLET KAMI </h3>"+
        "<font size='5' face='Comic Sans MS' color='Lightseagreen'><b>"+
        "10909100059 - Dwinda Faradita <br>"+
        "10909100069 - Ardini Fitria <br>"+
        "10909100073 - Anissa Siti Rahma <br>"+
        "10909100094 - Afifah Fauziah </b></font><br><br>"+"</td></tr>");
out.println("</table>");

out.println("</body>");
out.println("</html>");

Ket:

· Servlet membaca parameter yang dilemparkan dari kelas Kalkulator dengan menggunakan kode dibawah ini:

String third = request.getParameter(" third ");

(peletakkan kode di bawah PrintWriter dan sebelum try{...} )

· third merupakan variabel yang digunakan untuk menyimpan inputan nilai yang akan dihitung\

Langkah 5 :

Atur Setting Welcome Files.

1. Buka WEB-INF pada folder ‘WEB Pages’ di dalam Projek tersebut,

2. Klik double web.xml, maka akan mucul seperti pada gambar,

gambar 08

3. Pada kolom ‘Welcome Files’ tertera index.jsp. Ganti kolom tersebut dengan Kalkulator, sebagai kelas utama yang akan di panggil pertama kali saat projek di Run, seperti gambar

gambar 09

4. Lalu tutup langsung halaman web ini, kita tinggal mencoba menjalankannya.

**Cara menjalankan program servlet, cek postingan berikut (link).

"Tugas UAS membuat Servlet yang dikerjakan secara berkelompok.”

dW's Camp

Laman

Label

Rabu, 04 Januari 2012

Membuat Kalkulator dengan Servlet

Tidak ada komentar:

Posting Komentar