Membuat Tabel Pemesanan Menggunakan Java Script


Berikut ini adalah kode untuk membuat tampilan tabel pemesanan seperti gambar diatas:

<em><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>aMRe's Cafe</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

<!--

.style1 {color: Pink}

.style3 {color: Blue}

.style4 {color: #FF9900}

.style5 {color: #FF0000}

.style7 {

color: #FF0000;

font-size: 9px;

font-weight: bold;

}

.style9 {

color: #A4C931;

font-weight: bold;

font-style: italic;

font-size: 9px;

}

.style10 {

color: Red;

font-weight: bold;

}

.style11 {color: #0C0082}

-->

</style>

<!fungsi matematis tabel>

<script language = "JavaScript" type="text/JavaScript">

<!--

function cafe()

{

var catat = document.formcafe;

var hargawortel = parseInt(catat.pass.value) * parseInt(catat.passwordaa.value);

var hargabayam = parseInt(catat.rok.value) * parseInt(catat.rokokaa.value);

var hargabrokoli= parseInt(catat.mb.value) * parseInt(catat.minaa.value);

var hargabawangputih = parseInt(catat.ku.value) * parseInt(catat.kueaa.value);

var hargabawangmerah= parseInt(catat.mi.value) * parseInt(catat.mieaa.value);

var total = hargapassword + hargarokok + hargaminumanbotol+ hargakue + hargamie;

if (total > 10000)

{

catat.TotalBayar.value = total;

catat.Diskon.value = 1000;

catat.JumlahBayar.value = total - parseInt(catat.Diskon.value);

}

else

{

catat.TotalBayar.value = total;

catat.Diskon.value = 0;

catat.JumlahBayar.value = total;

}

}

function start(){

document.formcafe.reset();

}

//-->

</script>

</head>

<body>

<h2 style="text-align:center; color: Blue;" class="style1" >aM_Re's Cafe Casier </h2>

<form name="formcafe" action="#">

<table width="480" border="2" align="center" style="border-">

<tr style="background-">

<th><span class="style10">No</span></th>

<th><span class="style10">Daftar Menu </span></th>

<th><span class="style10">Harga</span></th>

<th><span class="style10">Order</span></th>

</tr>

<tr>

<td width="27"><div style="text-align:center"><strong>1.</strong></div></td>

<td width="181"><strong>Wortel</strong></td>

<td width="118" ><strong>@

<input type="text" name="pass" value="5000" size="10" disabled="disabled">

</strong></td>

<td width="124" ><input name="passwordaa" type="text" onkeyup="cafe()" value="0" size="20"></td>

</tr>

<tr style="background-color:white">

<td><div style="text-align:center"><strong>2.</strong></div></td>

<td><strong>Bayam</strong></td>

<td><strong>@

<input type="text" name="rok" value="10000" size="10" disabled="disabled">

</strong></td>

<td><input name="rokokaa" type="text" onkeyup="cafe()" value="0" size="20"></td>

</tr>

<tr>

<td><div style="text-align:center"><strong>3.</strong></div></td>

<td><strong>Brokoli</strong></td>

<td><strong>@

<input type="text" name="mb" value="5000" size="10" disabled="disabled">

</strong></td>

<td><input name="minaa" type="text" onkeyup="cafe()" value="0" size="20"></td>

</tr>

<tr style="background-color:white">

<td><div style="text-align:center"><strong>4.</strong></div></td>

<td><strong>Bawang Putih</strong></td>

<td><strong>@

<input type="text" name="ku" value="2500" size="10" disabled="disabled">

</strong></td>

<td><input name="kueaa" type="text" onkeyup="cafe()" value="0" size="20"></td>

</tr>

<tr>

<td><div style="text-align:center"><strong>5.</strong></div></td>

<td><strong>Bawang Merah</strong></td>

<td><strong>@

<input type="text" name="mi" value="6000" size="10" disabled="disabled">

</strong></td>

<td><input name="mieaa" type="text" onkeyup="cafe()" value="0" size="20"></td>

</tr>

<tr style="background-color:Pink">

<td colspan="3"><div style="text-align:center">

<div align="center"><strong>Total </strong></div>

</div></td>

<td><input name="TotalBayar" type="text" style="text-align:center" disabled="disabled" value="-" size="20"></td>

</tr>

<tr style="background-color:Purple">

<td colspan="3"><div style="text-align:center">

<div align="center"><strong>Diskon )*</strong></div>

</div></td>

<td><input name="Diskon" type="text" style="text-align:center" disabled="disabled" value="-" size="20"></td>

</tr>

<tr style="background-color:Orange">

<td colspan="3"><div style="text-align:center">

<div align="center"><strong>Jumlah Pembayaran </strong></div>

</div></td>

<td><input name="JumlahBayar" type="text" style="text-align:center" disabled="disabled" value="-" size="20"></td>

</tr>

</table>

<p style="text-align:center">&nbsp;</p>

<p style="text-align:center"><span class="style14">)* </span><span class="style15">:<span class="style16"> <span class="style17">Menunjukkan Jumlah potongan dikarenakan Pemesanan telah melebihi Rp. 10.000,00. Potongan tidak berlaku kelipata</span>n</span></span> <br/>

</p>

<div id="Layer1" style="position:absolute; width:63px; height:23px; z-index:1; left: 600px; top: 326px;">

<input name="button" type="button" onclick="start()" value="N E W" size="15">

</div>

</form>

</body>

</html>

</em>

Cascading Style Sheets (CSS)

CSS adalah kepanjangan dari Cascading Style Sheets, yaitu sebuah halaman terpisah dari halaman web yang dipergunakan untuk pengaturan komponen style seperti font, warna, layout dan sebagainnya. pembuatan web seperti dibawah ini menggunakan css sebagai pengaturan diluar kode html itu sendiri.
Untuk tahap awal, kita dapat belajar membuat desain layout yang sederhana seperti contoh di bawah ini:





Kode CSSnya:

#wrapper { margin: auto;
width: 750px;
border: 1px solid red;
}

#header {
height: 80px;
border: 1px solid blue;
}

#inner {
float: left;
margin: 5px 0;
border: 1px solid black;
}

#sidebar {
float: left;
margin-right: 20px;
width: 180px;
height: 330px;
border: 1px solid red;
}

#content {
float: left;
width: 544px;
height: 330px;
border: 1px solid green;
}

#footer {
clear: both;
height: 50px;
border: 1px solid blue;
}


Kemudian untuk kode HTMLnya:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Desain Layout Sederhana</title>
<link rel="stylesheet" href="mystyle.css" type="text/css" />

</head>

<body>

<div id="wrapper">
<div id="header">
Header
</div>

<div id="inner">
<div id="sidebar">
Sidebar
</div>
<div id="content">
Content
</div>
</div>

<div id="footer">
Footer
</div>

</div>

</body>

</html>


Setelah berhasil membuat desain layout yang sederhana, kali ini kita belajar membuat desain web sederhana yang juga memanfaatkan CSS. Contoh web sederhana yang dapat dibuat adalah sebagai berikut:




Kode CSSnya:
* { margin: 0; }
body { margin:5px auto; padding:0; font:0.72em/150% arial; }
#wrapper
{ margin:auto;
width:980px;}
#header
{ height:80px;
margin:0px auto;
background:#000;}
#header-content
{height:70px;
margin:auto;
background:#fff url(orange.jpg);}
#menu-top
{ font-size:small;
height:20px;
float:right;
padding:0px 50px;
font-weight:bold;}
#logo
{ float:left;
margin:10px 10px 10px 50px;
height:50px;}
#site-title h2
{ float:left;
padding:0px 10px;
height:30px;
margin:20px 0px;
font:2.1em/100% 'Verdana';
font-weight:
bold;}
#search
{ clear:right;
float:right;
margin:20px 50px 0px auto;
height:30px;
font-weight:bold;}
#inner
{ float:left;
margin:0px;}
#footer
{ clear:both;
height:60px;
background:#99FF33;}
#footer p { text-align:center;}
#sidebar
{ float:left;
width:200px;
height:400px;
background-color:#FFCC66}
#content
{ float:right;
width:780px;
height:400px;
background:#FFF}
#content-top
{ clear:both;
margin:auto;
width:780px;
height:170px;
background-image:url(gambar.JPG)}
#content-main
{ float:left;
margin:auto;
width:480px;
height:240px;}
#content-main p, h3
{ padding: 10px 20px 0px 20px;
text-align:justify;}
.style1 {font-size:x-small}
#content-main hr{ width:440px;
color:#FF9900;
margin: 10px 20px 0px 20px;}
#content-right
{ float:right; margin:10px auto; width:260px;
border: 2px solid green; background:#99FF33}
#content-right h3{ padding: 10px 20px 0px 20px;
text-align:justify;}
#content-right ul{ padding: 10px 20px 20px 40px;
list-style:square;}
#leftmenu ul { width:200px; list-style-type:none;
padding:0; margin:0;}
#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active { padding-left:15px;
text-decoration:none;}
#leftmenu a { padding: 5px 0px 5px 15px; display:block;
background:#6cae15 no-repeat left center; margin: 0px 0px 1px; color:#000 }
#leftmenu a:hover { background:#5e9711 no-repeat left center; color:#fff}


Dan Kode HTMLnya:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Demo</title>
<link type="text/css" rel="stylesheet" href="layout.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="header-content">
<div id="menu-top">
Home | Sitemap | RSS | Contact | About Us
</div>
<div id="logo">
<img src="logo1.jpg" width="50"/>
</div>
<div id="site-title">
<h2>TEKNIK ELEKTRO</h2>
</div>
<div id="search">
Search : <input name="q" size="20" type="text"/>
</div>
</div>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News and Media</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Tips and Tricks</a></li>
<li><a href="#">Download</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="content-top">
</div>
<div id="content-main">
<h3>Presentasi dari TecQuipment Ltd, UK</h3>
<hr />
<p class="style1">
Selasa, 02 Maret 2010
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, set do tempura nan de baskai lian tia we sio kun
Lorem ipsum dolor sit amet, consectetur adipisicing elit, set do tempura nan de baskai lian tia we sio kun [...]
</p>
</div>
<div id="content-right">
<h3>Events</h3>
<ul>
<li><a href="#">Lomba Panjat Tiang Listrik</a></li>
<li><a href="#">Lomba Tarik Kabel</a></li>
<li><a href="#">Balap Karung 10 KM</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<br />
<p><b>&#169; 2010 Teknik Elektro UM. Malang, Indonesia.</b></p>
</div>
</div>
</body>
</html>


Semoga pembelajaran ini dapat bermanfaat bagi siapa saja yang membaca. Selamat mencoba…..

My Blog List

Followers

Homepage Bottom Left Widget

Homepage Bottom Middle

Homepage Bottom Right Widget