RSS

Selamat Datang di Blog AGUNG PANJI SASMITO

Sabtu, 05 Maret 2011

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

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

Belajar Web Programming : Studi Kasus Modul 5 - Kalkulator Sederhana

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

Sabtu, 26 Februari 2011

Belajar Web Programming : Tugas Praktikum Modul 4 - Desain Web CSS

Selamat malam teman-teman =)
Nah, kali ini sudah sampai ke modul 4, di mana kita dituntut mampu membuat sebuah halaman web dengan menggunakan CSS.
Nah, mau tahu bagaimana caranya?

body {
margin: 10px auto;
width: 850px;
}

header,nav,section,footer {
display:block;
}

button input{
height:30px;
width:50px;
border: 1px solid black;
}

menukanan :hover{
color : blue;
background-color : white;
text-align : center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

header{
background-image: url(desa.png);
height:250px;
}

nav{
background-image : url(menubarcolor.jpg);
height: 32px;
padding-top: 10px;
padding-left: 10px;
border: 1px solid blue;
font-family: Arial;
font-size: 15px;
color: white;
}

menukiri {
float: left;
margin-left: 2px;
}

menukanan{
float: right;
margin-right: 15px;
}

section{
float:left;
background-image : url(peta.jpg);
height:380px;
width: 240px;
border: 1px solid red;
}

article, aside{
padding-left: 10px;
font-family: Arial;
font-size: 15px;
color: blue;
border: 1px dashed blue;
}

article{
background-image : url(artikelbgcolor.jpg);
float:right;
width:595px;
height:250px;
line-height: 20px;
}

aside{
background-image : url(asidebgcolor.jpg);
float:right;
width:595px;
height:129px;
}

footer{
background-image : url(footercolor.jpg);
clear:both;
padding:12px;
border: 1px solid blue;
height: 26px;
font-family: Arial Rounded mt bold;
font-size: 15px;
color: white;
line-height: 20px;
}


Untuk sintaks HTMLnya
<!DOCTYPE HTML>
<html lang="en">

<head>
<title>Selamat Datang di Situs Desa Pesanggrahan</title>
<link rel="stylesheet" href="Mod4TgsPrak.css" type="text/css" />
<link rel="icon" type="image/x-icon" href="batu.jpg">
</head>

<body>

<header>

</header>

<nav>
<menukiri>
Cari di Situs Ini <input type="text">
</menukiri>
<menukanan>
<button>
Beranda
</button>
<button>
Tentang Kami
</button>
<button>
Layanan
</button>
<button>
Hubungi Kami
</button>
</menukanan>
</nav>

<section>
</section>
<article>
<strong>Pesanggrahan</strong>, pada zaman dahulu adalah sebuah tempat dimana para Petinggi Kerajaan beristirahat.
Konon para Raja, Ratu, Adipati dan Punggawa Kerajaan antara lain Raja Mataram bersama para Istri selirnya sering mandi di sumber mata air panas Songgoriti dan beristirahat atau “Mesanggrah” (bersinggah) di tempat yang sekarang ini orang menyebut <strong>Desa Pesanggrahan</strong>. <br />
Desa Pesanggrahan berlokasi tepat pada lereng gunung Panderman persis berada pada lereng sebelah utara gunung panderman.
Wilayah Pesanggrahan yang karena letaknya di bawah lereng Gunung Panderman, panoramanya yang indah serta hawanya yang sangat sejuk menjadi daya tarik tersendiri bagi orang dari luar untuk beristirahat di tempat ini, disamping itu tempat ini sudah menjadi salah satu tempat di mana banyak Petinggi Kerajaan beristirahat pada zaman itu, maka pada akhirnya wilayah ini dinamakan Desa Pesanggrahan.
</article>
<aside>
<br/><strong>Berita terkait:</strong>
<ul>
<li><a href="coba.html">Sejarah Desa Pesanggrahan</a><br/></li>
<li><a href="coba.html">Struktur Desa Pesanggrahan</a><br/></li>
<li><a href="coba.html">Data Penduduk</a><br/></li>
<li><a href="coba.html">Organisasi Desa</a><br/></li>
</ul>
</aside>



<footer>
<marquee direction="alternate">©2011 by Agung Panji Sasmito - Tugas Praktikum Modul 4 - Dedicated for My Homeland</marquee>
</footer>

</body>
</html>
;

Screenshoot
Untuk demo bisa klik di sini.

TInggalkan Komentar