Selamat Datang di Blog AGUNG PANJI SASMITO

Sabtu, 05 Maret 2011

Belajar Web Programming : Tugas praktikum Modul 5 - Desain Halaman Pemesanan Makanan

Posted in , | 3/05/2011 09:55:00 PM | by Agung P. Sasmito | @ajungpangi

Selamat malam semua =)
Setelah tadi kita mempelajari pembuatan kalkulator dengan rumus matematis dalam javascript, sekarang kita buat implementasi dari java script dan DHTML beserta fungsi matematis dalam form pemesanan makanan. Ayo kita pelajari bersama!

Untuk file CSS kita simpan dengan TgsPrak5.css
body {
margin: 10px auto;
width: 580px;
}

header,section,footer{
display:block;
border:1px solid red;
}

header{
font-family: Arial;
font-size: 15px;
font-weight:bold;
text-align: center;
color: white;
float:center;
height:100px;
background : red;
}

section{
padding: 10px;
height:350px;
}

footer{
clear:both;
height:20px;
background : red;
font-family: Arial;
font-size: 15px;
font-weight:bold;
color: white;
}

.huruf_tabelatas{
font-family: Arial;
font-size: 15px;
font-weight:bold;
text-align: center;
color: red;
float:center;
}

.huruf_tabelisi{
font-family: Arial Narrow;
font-size: 15px;
text-align: center;
color: black;
float:left;
}

.huruf_tabelbawah{
font-family: arial;
font-size: 15px;
font-weight:bold;
text-align: center;
color: red;
float:right;
}

Untuk file Java Script kita simpan dengan TgsPrak5.js
function JumlahTotal(){

var myForm=document.form_pujas;
var total1;
var total2;
var total3;
var total4;
var total5;

total1 =parseInt(myForm.harga1.value) * parseInt(myForm.pesan1.value);
total2 =parseInt(myForm.harga2.value) * parseInt(myForm.pesan2.value);
total3 =parseInt(myForm.harga3.value) * parseInt(myForm.pesan3.value);
total4 =parseInt(myForm.harga4.value) * parseInt(myForm.pesan4.value);
total5 =parseInt(myForm.harga5.value) * parseInt(myForm.pesan5.value);

myForm.JumTotal.value=total1+total2+total3+total4+total5;
}

function potongan(){
var myForm=document.form_pujas;

if (myForm.JumTotal.value < 50000){
myForm.Diskon.value = 0;
}
else{
myForm.Diskon.value = 10000;
}
}

function JumlahBayar(){
var myForm=document.form_pujas;

myForm.JumBayar.value = myForm.JumTotal.value - myForm.Diskon.value ;
}

function proses(){
JumlahTotal();
potongan();
JumlahBayar();
reset();
}

function reset(){
var elemen = document.pemesanan;

elemen.pesan1.value = "";
elemen.pesan2.value = "";
elemen.pesan3.value = "";
elemen.pesan4.value = "";
elemen.pesan5.value = "";
elemen.total.value = "";
elemen.diskon.value = "";
elemen.bayar.value = "";
}

function pesan_sekarang()
{
var myForm = document.form_pujas;
if (myForm.JumBayar.value=="" || myForm.JumBayar.value==0)
{
alert("Anda belum memesan apapun, silakan pilih menu terlebih dahulu!");
}
else
{
alert("Terima kasih, total biaya yang harus dibayar sebesar Rp" + myForm.JumBayar.value + " dapat Anda bayarkan di meja kasir. Selamat menikmati!");
}
}

Untuk file HTML kita simpan dengan TgsPrak5.html
<!DOCTYPE HTML>
<html lang="en">

<head>
<title>Pemesanan Menu Pujasera UM - Tugas Praktikum Modul 5</title>
<script language="JavaScript" type="text/javascript" src="TgsPrak5.js"></script>
<link rel="stylesheet" href="TgsPrak5.css" type="text/css" />
</head>

<body>

<header>
<h1 align="center">Depot Makanan Oriental<br/>Pujasera UM</h1>
</header>

<section>
<form name="form_pujas" action="#">
<table border=1 cellpadding=3>
<tr>
<th><div class="huruf_tabelatas">No.<div></th>
<th width = 350px ><div class="huruf_tabelatas">Makanan / Minuman </div></th>
<th width = 120px ><div class="huruf_tabelatas">Harga</div></th>
<th width = 100px><div class="huruf_tabelatas">Jumlah</div></th>
</tr>

<tr>
<td><div class="huruf_tabelisi">1</div></td>
<td><div class="huruf_tabelisi">Nasi Goreng Seafood </div></td>
<td><div class="huruf_tabelisi">@ Rp <input type="text" name="harga1" value="8000" size="6" style="text-align:right" readonly /></div></td>
<td><div class="huruf_tabelisi"><input type="text" name="pesan1" value="0" size="3" onChange ="proses()"/> porsi</div></td>
</tr>

<tr>
<td><div class="huruf_tabelisi">2</div></td>
<td><div class="huruf_tabelisi">Nasi Hokyan </td>
<td><div class="huruf_tabelisi">@ Rp <input type="text" name="harga2" value="7000" size="6" size="6" style="text-align:right" readonly /></div></td>
<td><div class="huruf_tabelisi"><input type="text" name="pesan2" value="0" size="3" onChange ="proses()" /> porsi</div></td>
</tr>

<tr>
<td><div class="huruf_tabelisi">3</div></td>
<td><div class="huruf_tabelisi">Fuyunghai </div></td>
<td><div class="huruf_tabelisi">@ Rp <input type="text" name="harga3" value="15000" size="6" style="text-align:right" readonly /></div></td>
<td><div class="huruf_tabelisi"><input type="text" name="pesan3" value="0" size="3" onChange ="proses()" /> porsi</div></td>
</tr>

<tr>
<td><div class="huruf_tabelisi">4</div></td>
<td><div class="huruf_tabelisi">Yoghurt (all taste) </div></td>
<td><div class="huruf_tabelisi">@ Rp <input type="text" name="harga4" value="3000" size="6" style="text-align:right" readonly /></div></td>
<td><div class="huruf_tabelisi"><input type="text" name="pesan4" value="0" size="3" onChange ="proses()" /> gelas</div></td>
</tr>

<tr>
<td><div class="huruf_tabelisi">5</div></td>
<td><div class="huruf_tabelisi">Fruit Punch </div></td>
<td><div class="huruf_tabelisi">@ Rp <input type="text" name="harga5" value="5000" size="6" style="text-align:right" readonly /></div></td>
<td><div class="huruf_tabelisi"><input type="text" name="pesan5" value="0" size="3" onChange ="proses()" /> gelas</div></td>
</tr>

<tr>
<td colspan=3><div class="huruf_tabelbawah">Jumlah</div></td>
<td><div class="huruf_tabelbawah">Rp <input type="text" size="6" style="text-align:right" name="JumTotal" readonly /></div></td>
<tr>

<tr>
<td colspan=3><div class="huruf_tabelbawah">Diskon</div></td>
<td><div class="huruf_tabelbawah">Rp <input type="text" size="6" style="text-align:right" name="Diskon" readonly /></div></td>
<tr>

<tr>
<td colspan=3><div class="huruf_tabelbawah">Jumlah Dibayar</div></td>
<td><div class="huruf_tabelbawah">Rp <input type="text" size="6" style="text-align:right" name="JumBayar" readonly /></div></td>
<tr>

</table>

<br>
<!--<input type="button" value="Proses" onclick="proses()" />-->
<input type="button" name="batal" value="Batalkan Pesanan" onclick="reset()"/>
<input type="submit" value="Pesan Sekarang" onclick="pesan_sekarang()" />
</form>
</section>

<footer>
©2011 by ajungpangi ™
</footer>

</body>
</html>

ScreenShoot saat kita masukkan jumlah makanan yang ingin kita pesan.

ScreenShoot saat kita menekan tombol "PESAN SEKARANG"
ScreenShoot saat kita menekan tombol "BATALKAN PESANAN"

Saran dan kritik harap komentar yaa =)

Tidak ada komentar:

Posting Komentar

Jangan lupa memberi komentar pada setiap postingan saya!

Langganan: Posting Komentar (Atom)

TInggalkan Komentar