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 
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
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=" 8 "
- ONCLICK="addChar(this.form.display, '8')"></TD>
- <TD ALIGN="center"><INPUT TYPE="button" VALUE=" 9 "
- ONCLICK="addChar(this.form.display, '9')"></TD>
- <TD ALIGN="center"><INPUT TYPE="button" VALUE=" / "
- ONCLICK="addChar(this.form.display, '/')"></TD>
- </TR>
- <TR>
- <TD ALIGN="center"><INPUT TYPE="button" VALUE=" ln "
- ONCLICK="if (checkNum(this.form.display.value)) {
- ln(this.form) }"></TD>
- <TD ALIGN="center"><INPUT TYPE="button" VALUE=" 4 "
- ONCLICK="addChar(this.form.display, '4')"></TD>
- <TD ALIGN="center"><INPUT TYPE="button" VALUE=" 5 "
- ONCLICK="addChar(this.form.display, '5')"></TD>
- <TD ALIGN="center"><INPUT TYPE="button" VALUE=" 6 "
- ONCLICK="addChar(this.form.display, '6')"></TD>
- <TD ALIGN="center"><INPUT TYPE="button" VALUE=" * "
- ONCLICK="addChar(this.form.display, '*')"></TD>
- </TR>
- <TR>
- <TD ALIGN="center"><INPUT TYPE="button" VALUE=" sqrt "
- ONCLICK="if (checkNum(this.form.display.value)) {
- sqrt(this.form) }"></TD>
- <TD ALIGN="center"><INPUT TYPE="button" VALUE=" 1 "
- ONCLICK="addChar(this.form.display, '1')"></TD>
- <TD ALIGN="center"><INPUT TYPE="button" VALUE=" 2 "
- ONCLICK="addChar(this.form.display, '2')"></TD>
- <TD ALIGN="center"><INPUT TYPE="button" VALUE=" 3 "
- ONCLICK="addChar(this.form.display, '3')"></TD>
- <TD ALIGN="center"><INPUT TYPE="button" VALUE=" - "
- ONCLICK="addChar(this.form.display, '-')"></TD>
- </TR>
- <TR>
- <TD ALIGN="center"><INPUT TYPE="button" VALUE=" sq "
- ONCLICK="if (checkNum(this.form.display.value)) {
- square(this.form) }"></TD>
- <TD ALIGN="center"><INPUT TYPE="button" VALUE=" 0 "
- ONCLICK="addChar(this.form.display, '0')"></TD>
- <TD ALIGN="center"><INPUT TYPE="button" VALUE=" . "
- ONCLICK="addChar(this.form.display, '.')"></TD>
- <TD ALIGN="center"><INPUT TYPE="button" VALUE=" +/- "
- ONCLICK="changeSign(this.form.display)"></TD>
- <TD ALIGN="center"><INPUT TYPE="button" VALUE=" + "
- ONCLICK="addChar(this.form.display, '+')"></TD>
- </TR>
- <TR>
- <TD ALIGN="center"><INPUT TYPE="button"
- VALUE=" ( " ONCLICK="addChar(this.form.display,
- '(')"></TD>
- <TD ALIGN="center"><INPUT TYPE="button" VALUE="cos"
- ONCLICK="if (checkNum(this.form.display.value)) {
- cos(this.form) }"></TD>
- <TD ALIGN="center"><INPUT TYPE="button" VALUE=" sin"
- ONCLICK="if (checkNum(this.form.display.value)) {
- sin(this.form) }"></TD>
- <TD ALIGN="center"><INPUT TYPE="button" VALUE=" tan"
- ONCLICK="if (checkNum(this.form.display.value)) {
- tan(this.form) }"></TD>
- <TD ALIGN="center"><INPUT TYPE="button" VALUE=" ) "
- 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 memanggilfile Kalkulator.jsp ketika
dijalankan: klik kana 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 => 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).
12. Setelah itu klik kana pada
project, pilih Build atau Clean and Build:
13. Setelah itu klik kana pada
project, pilih Build atau Clean and Build:
14. Setelah itu klik kanan lagi pada
project, pilih run dan tunggu proses
running berjalan. Nantinya hasil running akan diperlihatkan pada browser yang
ada miliki:
15. Hasil Running MainServlet.java,
jika tampilan dibrowser seperti ini maka kita
telah berhasil membuat kalkulator dengan
servlet:
Tidak ada komentar:
Posting Komentar