Untuk kali ini kita akan belajar membuat aplikasi kalkulator dan pemesanan makanan menggunakan html dan java script, sebelumnya kita akan bahas tentang java script terlebih dahulu....
Java merupakan sebuah bahasa pemrograman yang mirip dengan bahasa C. Tetapi dengan Java kita bisa membuat tampilan halaman sebuah web menjadi lebih menarik. Contoh penggunaan Java adalah pada fungsi Mouseover, scrolling marquees, tampilan tanggal dan waktu, kalkulator, dan lain-lain. Terdapat dua tupe Java yaitu Java applet dan Java Script.
JAVA APPLETS
Java merupakan bahasa pemrograman yang dikembangkan oleh Sun Microsystems dan merupakan bahasa pemrograman yang berorientasi obyek. Java bisa digunakan untuk membuat suatu aplikasi yang berdiri sendiri atau pun sebuah aplikasi mini yang biasa disebut applet. Applet biasa digunakan pada halaman web supaya terlihat lebih dinamis. Terdapat banyak sekali aplikasi/applet yang ada.
JAVA SCRIPT
JavaScript dikembangkan oleh Netscape, yang merupakan bahasa pemrograman yang "sederhana" karena tidak bisa digunakan untuk membuat suatu aplikasi atau pun applet. Java Script merupakan sebuah bahasa scripting yang dikembangkan oleh Netscape.Dengan Java Script kita bisa dengan mudah membuat sebuah halaman web yang interaktif. Program Java Script dituliskan pada file HTML (*.htm atau *.html) dengan menggunakan tag kontainer . Dengan kata lain, Anda tidak perlu menuliskan program JavaScript pada file terpisah (walaupun Anda juga bisa melakukannya).
berikut script dari aplikasi kalkulator :Java merupakan bahasa pemrograman yang dikembangkan oleh Sun Microsystems dan merupakan bahasa pemrograman yang berorientasi obyek. Java bisa digunakan untuk membuat suatu aplikasi yang berdiri sendiri atau pun sebuah aplikasi mini yang biasa disebut applet. Applet biasa digunakan pada halaman web supaya terlihat lebih dinamis. Terdapat banyak sekali aplikasi/applet yang ada.
JAVA SCRIPT
JavaScript dikembangkan oleh Netscape, yang merupakan bahasa pemrograman yang "sederhana" karena tidak bisa digunakan untuk membuat suatu aplikasi atau pun applet. Java Script merupakan sebuah bahasa scripting yang dikembangkan oleh Netscape.Dengan Java Script kita bisa dengan mudah membuat sebuah halaman web yang interaktif. Program Java Script dituliskan pada file HTML (*.htm atau *.html) dengan menggunakan tag kontainer . Dengan kata lain, Anda tidak perlu menuliskan program JavaScript pada file terpisah (walaupun Anda juga bisa melakukannya).
<html>
<title>Kalkulator sederhana</title>
<SCRIPT LANGUAGE="JavaScript">
function tambah()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a+b
form.hasil.value = c
}
function kurang()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a-b
form.hasil.value=c
}
function kali()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a*b
form.hasil.value=c
}
function bagi()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a/b
form.hasil.value = c
}
function pangkat()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=Math.pow(a, b)
form.hasil.value = c
}
function kosong()
{
form.a.focus()
form.a.value=""
form.b.value=""
form.hasil.value=""
}
</SCRIPT>
<body onload=kosong()>
<CENTER>
<h1><font color="blue" face="Snap ITC">Kalkulator Sederhana</font></h1>
<hr width="600" size="3" color="#000066">
<FORM name="form">
<pre>
</font> <input type="text" name="a"> <select name="operator" onchange="getSelectedValue();">
<option value="+" onClick="tambah()">+</option>
<option value="-" onClick="kurang()">-</option>
<option value="*" onClick="kali()">*</option>
<option value="/" onClick="bagi()">/</option>
<option value="^" onClick="pangkat()">^</option>
<input type="text" name="b"> = <input type "text" name="hasil" disabled="true">
<font color="red"><input type="button" value="DELETE" onClick="kosong()">
</pre>
<br>
<font color="blue" face="Snap ITC" size="3">ulfa-fauziah.blogspot.com</font><br>
</FORM>
</CENTER>
</body>
</html>
save dengan nama kalkulator.html dan hasilnya seperti gambar di bawah......
Berikutnya kita akan bahas tentang aplikasi form pemesanan makanan dan minuman, berikut script nya,,,,,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Form Pemesanan</title>
</head>
<body>
<!--Letakkan Listing Code JavaScript disini-->
<script language="JavaScript" type="text/javascript">
<!--
function hitungPesan(){
var nota = document.form2;
var hargaBakso = 12000 * eval(nota.uBakso.value);
var hargaSoto = 10000 * eval(nota.uSoto.value);
var hargaMie = 15000 * eval(nota.uMie.value);
var hargaDegan = 5000 * eval(nota.uDegan.value);
var hargaCampur = 7000 * eval(nota.uCampur.value);
var jumlahTotal = hargaBakso + hargaSoto + hargaMie + hargaDegan + hargaCampur;
if (jumlahTotal > 100000){
nota.Total.value = jumlahTotal;
nota.Diskon.value = 10000;
nota.Bayar.value = jumlahTotal - eval(nota.Diskon.value);
} else {
nota.Total.value = jumlahTotal;
nota.Diskon.value = 0;
nota.Bayar.value = jumlahTotal - eval(nota.Diskon.value);
}
}
function resetForm(){
document.form2.reset();
}
//-->
</script>
<h2><font color="blue" face="Snap ITC">Form Pemesanan <br>Berbasis JavaScript</font></h2>
<form name="form2" action="#">
<table border="1px">
<tr bgcolor="#33FFFF">
<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" >@ <input type="text" name="bakso" value="12000" size="6" disabled="true"/></td>
<td width="150px"><input type="text" name="uBakso" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>2</td>
<td>Soto Spesial</td>
<td>@ <input type="text" name="soto" value="10000" size="6" disabled="true"/></td>
<td><input type="text" name="uSoto" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>3</td>
<td>Mie Ayam Super</td>
<td>@ <input type="text" name="mie" value="15000" size="6" disabled="true"/></td>
<td><input type="text" name="uMie" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>4</td>
<td>Es Degan</td>
<td>@ <input type="text" name="degan" value="7000" size="6" disabled="true"/></td>
<td><input type="text" name="uDegan" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>5</td>
<td>Es Campur</td>
<td>@ <input type="text" name="campur" value="7000" size="6" disabled="true"/></td>
<td><input type="text" name="uCampur" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr bgcolor="white">
<td colspan="3" align="right">Jumlah Total</td>
<td><input type="text" name="Total" disabled="true" /></td>
</tr>
<tr bgcolor="white">
<td colspan="3" align="right">Diskon</td>
<td><input type="text" name="Diskon" disabled="true" /></td>
</tr>
<tr bgcolor="#33FFFF">
<td colspan="3" align="right">Jumlah Dibayar</td>
<td><input type="text" name="Bayar" disabled="true" align="right"/></td>
</tr>
</table><br/>
<input type="button" value="BATAL" onClick="resetForm()" />
<br>
<font color="blue" face="Snap ITC" size="3">ulfa-fauziah.blogspot.com</font></br>
</form>
</body>
</html>
save dengan nama form pemesanan.html dan hasilnya seperti di bawah ini.....
sekian dulu semoga bermanfaat......
trimakasih........
0 komentar:
Posting Komentar