Aplikasi JavaScript

Aplikasi JavaScript

Akhmad Daniel Sembiring & Onno W. Purbo
Computer Network Research Group (ITB)
JavaScript merupakan bahasa pemrograman script (scripting language) guna mendukung tampilan halaman web yang lebih interaktif dibandingkan program CGI. Dengan JavaScript sebuah halaman web bersifat lebih “mandiri” terhadap servernya karena dapat memproses masukan user, tanpa harus berkomunikasi lagi dengan server, sehingga dapat mempercepat keluaran yang diinginkan user, dan menghemat bandwidth saluran komunikasi.

Tulisan ini mencoba mengemukakan sebuah contoh aplikasi JavaScript berupa kalkulator yang menjumlahkan total harga beberapa produk yang dipilih user

Tulisan ini ditujukan untuk pembaca yang ingin mempelajari JavaScript, terutama untuk webmaster penyedia jasa internet yang memeperhatikan kepuasan pelanggannya.

Kalkulator

Aplikasi ini mengambil contoh sebuah perusahaan yang menjual produknya di internet. Produk-produk itu terdiri dari beberapa kategori seperti: sepatu, celana panjang, dan pakaian. Setiap kategori produk terdiri dari beberapa merk yang masing-masing memiliki harga tertentu. User dapat memilih salah satu merk pada setiap kategori, dan dapat mengetahui total harga produk yang telah ia pilih dengan menekan tombol total.

Bentuk tampilan halaman webnya kira-kira seperti gambar di bawah ini:

Source code halaman web di atas beserta JavaScriptnya (tercetak dalam huruf bold) adalah sebagai berikut:

Baris
Code
1. <html><head>
2. <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
3. <title>Pilihan Produk</title>
4. </head>
5.
6. <h1>Pilihan Produk</h1>
7. <table border=”0″ cellpadding=”2″>
8. <tr>
9. <td align=”center” colspan=”2″ width=”15%” bgcolor=”#808080″>
10. <font color=”#FFFFFF”><strong>Kategori</strong></font></td>
11. <td align=”center” colspan=”3″ bgcolor=”#808080″>
12. <font color=”#FFFFFF”><strong>Merek</strong></font></td>
13. <td align=”center” bgcolor=”#808080″>
14. <font color=”#FFFFFF”><strong>Total</strong></font></td>
15. </font>
16. </tr>
17. <tr>
18. <form>
19. <td colspan=”2″ width=”15%” bgcolor=”#C0C0C0″>Sepatu: </td>
20. <td width=”25%” bgcolor=”#FFFF80″><input type=”radio”
21. name=”Nike” value=”nike” onclick=”form.sepatu_value.value= 90000″>
22. <strong>Nike</strong> <br><font size=”2″>Rp 90,000</font></td>
23.
24. <td width=”25%” bgcolor=”#FFFF80″><input type=”radio”
25. name=”Nike” value=”aldo” onclick=”form.sepatu_value.value= 80000″>
26. <strong>Aldo</strong> <br><font size=”2″>Rp 80,000 </font></td>
27
28. <td width=”25%” bgcolor=”#FFFF80″><input type=”radio”
29. name=”Nike” value=”addidas” onclick=”form.sepatu_value.value= 60000″>
30. <strong>Addidas</strong> <font size=”2″><br>Rp 60,000 </font></td>
31.
32. <td width=”15%” bgcolor=”#FFFF80″><input type=”text” size=”13″
33. name=”sepatu_value” value=”0″> </td>
34. </form>
35. </tr>
36. <tr>
37. <form>
38. <td colspan=”2″ width=”15%” bgcolor=”#DEDEDE”>Celana Panjang: </td>
39. <td width=”15%” bgcolor=”#FFFFD5″>
40. <p><input type=”radio” checked name=”Nike” value=”Executive99″
41. onclick=”form.celana_value.value= 40000″><strong>Executive 99</strong>
42. <font size=”2″>Rp 40,000</font></p>
43. </td>
44. <td width=”15%” bgcolor=”#FFFFD5″>
45. <p><input type=”radio” name=”Nike” value=”Marido”
46. onclick=”form.celana_value.value= 50000″><strong>Marido</strong>
47. <br><font size=”2″>Rp 50,000</font></p>
48. </td>
49. <td width=”15%” bgcolor=”#FFFFD5″>
50. <p><input type=”radio” name=”Nike” value=”Alabamas”
51. onclick=”form.celana_value.value= 35000″><strong>Alabamas</strong>
52. <font size=”2″><br>Rp 35,000 </font></p>
53. </td>
54. <td width=”15%” bgcolor=”#FFFFD5″><input type=”text” size=”13″
55. name=”celana_value” value=”0″> </td>
56. </form>
57. </tr>
58. <tr>
59. <form>
60. <td colspan=”2″ width=”15%” bgcolor=”#C0C0C0″> Pakaian: </td>
61. <td width=”15%” bgcolor=”#FFFF80″>
62. <input type=”radio” name=”Nike” value=”Van Heusen”
63. onclick=”form.pakaian_value.value= 45900″><strong>Van Heusen</strong>
64. <br><font size=”2″>Rp 45,900</font></td>
65.
66. <td width=”15%” bgcolor=”#FFFF80″>
67. <input type=”radio” name=”Nike” value=”Arrow”
68. onclick=”form.pakaian_value.value= 60000″><strong>Arrow</strong>
69. <br><font size=”2″>Rp 60,000</font></td>
70.
71. <td width=”15%” bgcolor=”#FFFF80″><font color=”#000000″>
72. <input type=”radio” name=”Nike” value=”Watch out”
73. onclick=”form.pakaian_value.value= 55950″><strong>Wacth out </strong></font>
74. <br><font size=”2″>Rp 55,950</font></td>
75.
76. <td width=”15%” bgcolor=”#FFFF80″><font color=”#000000″><input
77. type=”text” size=”13″ name=”pakaian_value” value=”0″> </font></td>
78. </form>
79. </tr>
80. <tr>
81. <td colspan=”4″></td><td valign=”top” align=”center” bgcolor=”#F2F2F2″>
82. <form>
83. <input type=button value=”Total Harga” name=”total”
84. onClick=’var total=eval(parseInt(document.forms[0].sepatu_value.value) +
85. parseInt(document.forms[1].celana_value.value) +
86. parseInt(document.forms[2].pakaian_value.value));
87. form.total_value.value=”Rp ” + total;’>
88. </td><td bgcolor=”#F2F2F2″><input type=”text” size=13 name=”total_value”>
89. </form></td>
90. </tr>
91. </table>
92 </body></html>

Langkah-langkah pengembangan aplikasi

Pertama-tama kita buat tiga buah pilihan kategori yang masing-masing terdiri dari tiga buah pilihan merek yang diwakili oleh masing-masing sebuah radio buttons. Jika user men-click salah satu dari ketiga radio buttons itu, kita harus menampilkan harganya pada text box di sebelahnya. Karena kita gunakan event handler “onClick” dari setiap radio button. Lihat pada baris 21, 25, 29, 41, 46, 51, 68, dan 73.

Kemudian kita buat sebuah button dengan label ” Total Harga ” dan sebuah textbox yang menampung harga total. Lihat baris 83.

Jika button itu di-click, jumlah total dari ketiga textbox dari ketiga kategori akan ditampilkan di textbox terakhir ini. Kita gunakan event handler “onClick” pada button, dan sebuah proses penjumlahan sederhana pada baris 84 – 86. Function “pareseInt()” kita gunakan agar jumlah total berupa angka integer dan bukan string. Jika kita tifak gunakan function ini maka hasil dari “1+2” akan sama dengan “12”. Function “eval()”, mengevaluasi string menjadi angka integer.

Terakhir, untuk menampilkan harga total dengan awalan tanda “Rp “, kita gunakan perintah sebagai berikut:

form.total_value.value=”Rp ” + total

Lihat baris 87.

Penutup

Demikian sebuah contoh aplikasi JavaScript yang memungkinkan interaksi antara server Web dengan penguna Internet.

Published in: on October 9, 2007 at 3:20 am  Leave a Comment  

The URI to TrackBack this entry is: https://miqrosoft.wordpress.com/2007/10/09/aplikasi-javascript/trackback/

RSS feed for comments on this post.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: