Pada artikel sebelum nya saya sudah memberikan semacam tutorial bagaimana Cara Membuat Form Login Menggunakan JSP Dan Servlet . Pada kesempatan kali ini saya akan melanjutkan review tentang tugas mata kuliah Pemrograman Lanjut yaitu dengan membuat Kalkulator Sederhana Menggunakan JSP dan Servlet.
Sekedar mengingatkan saja dari postingan saya sebelumnya bahwa pada JSP ekstensi filennya berupa .jsp yang bahasanya menggunakan sintag HTML, sedangkan Servlet file nya berekstensi .java yang bahasanya menggunakan bahasa Java.
File .jsp ini nantinya berfungsi hanya untuk memberikan tampilan grafis kepada user atau pengguna dan semua proses controller dan proses perhitungan dari kalkulator sederhana ini akan di proses di Servlet yang filenya berekstensi .java.
File .jsp hanya akan meminta request ke file .java dan file .java akan memberikan response ke file .jsp untuk ditampilkan ke user.
Langkah pertama kita membuat project baru beri nama Kalkulator, lalu silahkan buat file .jsp nya dengan cara klik kanan project Kalkulator >>new >> JSP >> lalu beri nama index.jsp.
Kita butuh sebuah form dengan actionnya nanti memanggil atau meminta request ke file .java dengan method Post. Ketikkan syntax dibawah ini.
<form action="proses2" method="POST">
</form>
Selanjutnya kita butuh tabel agar tampilan lebih rapi dengan mengetikkan syntax kurang lebih seperti dibawah ini
<table border="1" cellspacing="1" cellpadding="1">
<tbody>
<tr>
<td>Masukkan Angka 1</td>
<td>
<input type="text" name="angka1" value="" />
</td>
</tr>
<tr>
<td>Masukkan Angka 2</td>
<td>
<input type="text" name="angka2" value="" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="radio" name="rboperasi" value="1"/>Tambah
<input type="radio" name="rboperasi" value="2"/>Kurang
<input type="radio" name="rboperasi" value="3"/>Kali
<input type="radio" name="rboperasi" value="4"/>Bagi
</td>
</tr>
<tr>
<td>
<input type="submit" value="Hitung" />
</td>
<td></td>
</tr>
<tr>
<td>Hasil</td>
<td>
<input type="text" name="hasil" value="<% if(request.getAttribute("hasil")!=null){ out.println(""+request.getAttribute("hasil"));}%>" readonly="readonly" />
</td>
</tr>
</tbody>
</table>
Pada syntax tabel diatas terdapat syntax <tr></tr> ini adalah syntax table row yang berfungsi untuk membuat baris tabel. Sedangkan syntax <td></td> yang berarti table column berfunsi untuk membuat kolom tabel. Agar garis garis pada tabel tidak terlihat atau transparan isikan angka "0" pada sintax <table border="0"
Bisa dilihat dari syntax diatas, disitu terdapat 5 baris yang setiap baris nya terdapat 2 kolom dan ada yang baris nya hanya 1 kolom.
Di dalam kolom kolom tersebut terdapat sintax untuk membuat textfiel, radio button dan Submit. Jadi untuk membuat operasi aritmatika tambah, kurang, kali, bagi saya menggunakan radio button. Lalu hasil dari peritungannya akan di cetak di text field yang telah disediakan dengan cara melakukan request.getAtttibute dan readonly berarti user tidak bisa merubah rubah hasil sesukanya.
Ini adalah sintax lengkap index.jsp
Selanjutnya kita membuat file .java nya dengan cara klik kanan project>>new >> Servlet>>lalu beri nama proses2.
Untuk memberi peringatan apabila angka belum diinputkan oleh user tapi sudah di klik submit atau hitung gunakan perintah dibawah ini.
RequestDispatcher redis2;
String angka01 = request.getParameter("angka1");
String angka02 = request.getParameter("angka2");
try{
float ang1= Float.parseFloat(request.getParameter("angka1"));
float ang2= Float.parseFloat(request.getParameter("angka2"));
}catch(Exception e){
redis2=request.getRequestDispatcher("kalkulator.jsp");
redis2.include(request, response);
out.println("Silahkan Masukkan Angka.");
}
Dengan kodingan diatas apabila user belum memasukkan angka atau mallah memasukkan huruf akan muncul peringatan "Silahkan Masukkan Angka".
Selanjutnya untuk menghitung angka yang sudah diinputkan menggunakan perintah if else dan switch case atau percabangan seperti dibawah ini
float ang1= Float.parseFloat(request.getParameter("angka1"));
float ang2= Float.parseFloat(request.getParameter("angka2"));
String operasi = request.getParameter("rboperasi");
if(null != operasi)switch (operasi) {
case "1":{
float hasil=ang1+ang2;
request.setAttribute("hasil", hasil);
redis2=request.getRequestDispatcher("kalkulator.jsp");
redis2.include(request, response);
break;
}
case "2":{
float hasil=ang1-ang2;
request.setAttribute("hasil", hasil);
redis2=request.getRequestDispatcher("kalkulator.jsp");
redis2.include(request, response);
break;
}
case "3":{
float hasil=ang1*ang2;
request.setAttribute("hasil", hasil);
redis2=request.getRequestDispatcher("kalkulator.jsp");
redis2.include(request, response);
break;
}
case "4":{
if(ang2==0){
redis2=request.getRequestDispatcher("kalkulator.jsp");
redis2.include(request, response);
out.print("Tidak Bisa Diibagi Dengan Nol");
} else{
float hasil=ang1/ang2;
request.setAttribute("hasil", hasil);
redis2=request.getRequestDispatcher("kalkulator.jsp");
String text="Hasil Pengurangan : ";
request.setAttribute("text", text);
redis2.include(request, response);
break;
}
}
}else {
redis2=request.getRequestDispatcher("kalkulator.jsp");
redis2.include(request, response);
out.print("Operasi Aritmatika belum dipilih !!");
}
Nanti hasil operasi tersebut akan disimpan pada atribut Hasil lalu di setAtribut agar bisa di request atau dipanggil di file index.jsp yang sebelumnya sudah dibuat.
Untuk pembagannya juga sudah dikasih exception atau peringatan bahwa angka tidak bisa dibagi dengan angka nol. Pabila user membagi dengan bilangan nol maka akan muncul peringatan "Tidak Bisa Dibagi Dengan Nol"
Dan operasi aritmatikanya belum dipilih oleh user tapi sudah klik Hitung maka akan muncul peringatan "Operasi Aritmatika Belum Dipilih".
Untuk kodingan lengkapnya anda bisa lihat dibawah ini.
Hasil apabila aplikasi kalkulator dijalankan dengan cara klik kanan project kalkulator>>lalu pilih Run maka akan jadi seperti ini
Nah sekian dari saya untuk cara membuat kalkulator sederhana menggunakan jsp dan servlet. Anda bisa menggabungkan aplikasi kalkulator ini dengan form login yang sebelumnya dibuat hanya membutuhkan sedikit perubahan. Ubahlah nama index.jsp menjadi kalkulator.jsp.
Semoga bermanfaat. :-)
(o) thanks infonya gan
ReplyDelete