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 =)

0 komentar

Belajar Web Programming : Studi Kasus Modul 5 - Kalkulator Sederhana

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

Selamat malam =)
Setelah kemarin kita bermain dengan CSS sekarang kita mempelajari web dinamis alias web yang jauh lebih interaktif. Nah, untuk web dinamis kita bisa menggunakan DHTML dan JavaScript. Untuk contoh saya akan berikan web kalkulator. Cekidot ya gan :cendolbig:

Untuk file javascript - simpan dengan nama calculator.js

function proses(){

var myForm=document.form_kalkulator;

if (myForm.operasi.value == "+"){
myForm.hasil.value = parseInt(myForm.bil1.value) + parseInt(myForm.bil2.value);
}
else if (myForm.operasi.value == "-"){
myForm.hasil.value = parseInt(myForm.bil1.value) - parseInt(myForm.bil2.value);
}
else if (myForm.operasi.value == "*"){
myForm.hasil.value = parseInt(myForm.bil1.value) * parseInt(myForm.bil2.value);
}
else if (myForm.operasi.value == "/"){
myForm.hasil.value = parseInt(myForm.bil1.value) / parseInt(myForm.bil2.value);
}
}

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

elemen.bil1.value = "";
elemen.bil2.value = "";
elemen.hasil.value = "";
}

function cetak()
{
var myForm = document.form_kalkulator;
if (myForm.bil1.value=="[Masukkan bilangan 1]" || myForm.operasi.value=="[Pilih Operator]" || myForm.bil1.value=="[Masukkan bilangan 2]")
{
alert("Input masih ada yang kosong atau Anda belum memilih operator, cek lagi!");
}
else
{
alert("Nilai dari " + myForm.bil1.value + " " + myForm.operasi.value + " " + myForm.bil2.value + " = " + myForm.hasil.value);
}
}

Untuk file HTML simpan dengan nama calculator.html

<!DOCTYPE html>
<html lang="en">

<head>
<title>KalkulatorMINI ™ - Studi Kasus Modul 5 - ajungpangi</title>
<script language="JavaScript" type="text/javascript" src="calculator.js"></script>
<style type="text/css">
<!--
.huruf_header{
font-family: cambria;
font-size: 24px;
text-align: center;
color: blue;
float:center;
}
-->
</style>
<link rel="icon" type="image/x-icon" href="ajungpangi.jpg">
</head>

<body bgcolor="aqua">
<center>
<table bgcolor="white" border=0 align="justify" cellspacing=0 cellpadding=5>
<tr>
<td width="1600"><div class="huruf_header">KalkulatorMINI ™</div></td>
</tr>
</table>
<br/>

<form name=form_kalkulator action="#">

<table border ="0">
<tr>
<td><input type="text" name="bil1" value="[Masukkan bilangan 1]"/></td>
<td><select name="operasi" >
<option>[Pilih Operator]</option>
<option value="+">+ (ADD BY)</option>
<option value="-">- (SUBSTRACT)</option>
<option value="*">* (MULTIPLIED)</option>
<option value="/">/ (DIVIDE BY)</option>
</select></td>
<td><input type="text" name="bil2" value="[Masukkan bilangan 2]"/></td>
<td><input type="button" value="Proses Sekarang!" onclick="proses()" /></td>
<td><input type="text" name="hasil"/></td>
<td><input type="button" value="Hapus" onclick="reset()" /></td>
<td><input type="button" value="Cetak" onclick="cetak()" /></td>
</tr>
</table>

</form>
</center>

</body>
</html>


Untuk Screenshoot awal

Untuk Screenshoot saat kita masukkan bilangan dan klik "PROSES SEKARANG"

ScreenShoot saat kita klik "CETAK"

ScreenShoot saat kita klik "HAPUS"

ScreenShoot saat kita klik "PROSES SEKARANG" tetapi belum kita inputkan bilangan


Harap komentar yaa, kritik sehat sangat ditunggu =)

0 komentar
Langganan: Postingan (Atom)

TInggalkan Komentar