PROGRAM APLIKASI FORM PEMESANAN MAKANAN/MINUMAN MENGGUNAKAN JAVASCRIPT

Banyak program aplikasi yang dapat dibuat menggunakan Javascript. Salah satunya adalah  program aplikasi form pemesanan makanan/minuman. Program alikasi ini dapat dimanfaatkan oleh berbagai warung atau rumah makan untuk memudahkan pelayanan terhadap customer

Adapun program aplikasi pemesanan makanan/minuman yang dibuat memiliki spesifikasi antara lain:

  • Field Harga, Jumlah Total, Diskon, dan Jumlah Dibayar bersifat read-only
  • Jika  pesan  disi,  maka  field  jumlah  total  secara  otomatis  akan menghitung totalnya, termasuk juga field jumlah dibayar.
  • Rumus:

Jumlah Total = ∑ (harga * pesan)

Jumlah Dibayar = Jumlah Total – Diskon

  • Jika  pembelian  lebih  dari  50000,  maka  field  diskon  secara  otomatis akan  berisi  nilai  diskon  sebesar  10000  (tidak  berlaku  kelipatannya) dan otomatis pula field jumlah dibayar akan berkurang
  • Jika tombol Batal diklik, maka semua field Pesan akan dibersihkan

Tampilan program aplikasi pemesanan makanan/minuman tampak seperti gambar dibawah ini:

Sebelum memulai membuat program aplikasi ini, sebaiknya terlebih dahulu mengetahui tentang Javascript.

1. Active Web Page

Sebagaimana  diketahui,  HTML  merupakan  model  dokumen  yang  statis,begitu ditampilkan tidak akan berubah sampai ada aktivitas navigasi. Adapun untuk  menjadikan  HTML  sebagai  halaman  dinamis  atau  aktif,  kita  bisa memanfaatkan bahasa scripting.

2. DHTML dan JavaScript

Scripting  merupakan  jenis  lain  dari  pemrograman,  yang  umumnya  lebih mudah  dipahami.  Script  dapat  disisipkan  ke  dalam  dokumen  HTML  dengan menggunakan  tag  <script>.  Tidak  seperti  style  sheet,  script  bisa  terlihat  di dalam <head> ataupun <body>.

DHTML  (Dynamic  HTML)  merupakan  suatu  teknik  untuk  menciptakan halaman  web  yang interaktif  dengan  cara  mengombinasikan  elemen-elemen seperti HTML, style sheet, dan scripting. Jadi, DHTML bukanlah suatu jenis bahasa  pemrograman  melainkan  hanya  sekadar  istilah  saja.  Pada  bagian  ini, pembuatan DHTML akan dilakukan dengan memanfaatkan JavaScript.

3. Elemen Dasar JavaScript

Sebagaimana  bahasa  pemrograman  umumnya,  JavaScript  terbentuk  atas elemen-elemen fundamental. Di sini kita tidak akan mengulas elemen-elemen tersebut,  melainkan  langsung  membahas  beberapa  komponen  dasar  yang kerap digunakan saat bekerja dengan JavaScript.

Kotak Dialog

Dukungan Scripting

Merujuk Elemen

Event

Linked Scripting

4. Me-retrieve Nilai

Saat  bekerja  dengan  elemen-elemen  masukan—seperti  text  field,  select,  dan check  box—HTML,  kita  bisa  memanfaatkan  JavaScript  untuk  operasi validasi.  Adapun  langkah  penting  terkait  dengan  elemen-elemen  ini  adalah pengambilan nilai.

Text Field

Select (Combo Box)

Check Box

5. Memilih Item Check

Agar  pemilihan  item  check  box  bisa  lebih  efisien,  kita  dapat  menggunakan

pendekatan check/uncheck all.

6. Window

Menciptakan Window Di  dalam  window  aktif,  kita  juga  bisa  menciptakan  window  baru  melalui method window.open().

Script dari program aplikasi pemesanan makanan/minuman adalah seperti tampak di bawah ini

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;

<html>

<head>

<title>Warung Spesial</title>

</head>

<body>

<!–Letakkan Listing Code JavaScript disini–>

<h3>Form Pemesanan Berbasis JavaScript</h3>

<form action=”#”>

<table border=”1px”>

<tr bgcolor=”pink”>

<th>No</th>

<th>Makanan/Minuman</th>

<th>Harga</th>

<th>Pesan</th>

</tr>

<tr>

<td width=”15px”>1</td>

<td width=”200px”>Bakso Istimewa</td>

<td width=”85px” bgcolor=”pink”>@ <input name=”bakso” value=”12000″ size=”6″ disabled=”true”/></td>

<td width=”150px”><input name=”qBakso” value=”0″ onChange=”hitungPesan()”/></td>

</tr>

<tr>

<td>2</td>

<td>Soto Spesial</td>

<td bgcolor=”pink”>@ <input name=”soto” value=”10000″ size=”6″ disabled=”true”/></td>

<td><input type=”text” value=”0″ onChange=”hitungPesan()”/></td>

</tr>

<tr>

<td>3</td>

<td>Mie Ayam Super</td>

<td bgcolor=”pink”>@ <input name=”mie” value=”15000″ size=”6″ disabled=”true”/></td>

<td><input type=”text” value=”0″ onChange=”hitungPesan()”/></td>

</tr>

<tr>

<td>4</td>

<td>Es Degan</td>

<td bgcolor=”pink”>@ <input name=”degan” value=”7000″ size=”6″ disabled=”true”/></td>

<td><input type=”text” value=”0″ onChange=”hitungPesan()”/></td>

</tr>

<tr>

<td>5</td>

<td>Es Campur</td>

<td bgcolor=”pink”>@ <input value=”7000″ size=”6″ disabled=”true”/></td>

<td><input type=”text” value=”0″ onChange=”hitungPesan()”/></td>

</tr>

<td colspan=”3″ align=”right”>Jumlah Total</td>

<td><input type=”text” disabled=”true” /></td>

</tr>

<td colspan=”3″ align=”right”>Diskon</td>

<td><input type=”text” disabled=”true” /></td>

</tr>

<td colspan=”3″ align=”right”>Jumlah Dibayar</td>

<td><input type=”text” disabled=”true” align=”right”/></td>

</tr>

</table><br/>

<input value=”BATAL” onClick=”resetForm()” />

</form>

</body>

</html>

-SELAMAT MENCOBA-

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

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: