Kamis, 11 Maret 2010

Aplikasi form pemesanan makanan/minuman menggunakan dhtml dan javascript

Aplikasi form pemesanan makanan/minuman menggunakan DHTML DAN JAVASCRIPT
adapun ketentuan dari sistem pemesanan :

Field Harga, Jumlah Total, Diskon, dan Jumlah Dibayar bersifat read- only  
Jika pesan disi, maka field jumlah total secara otomatis akan menghitung totalnya, termasuk juga field jumlah dibayar.  
Rumus:  
Jumlah Total = ∑ (harga * pesan)  
Jumlah Dibayar = Jumlah Total - Diskon  
Jika pembelian lebih dari 50000, maka field diskon secara otomatis akan berisi nilai diskon sebesar 10000 (tidak berlaku kelipatannya) dan otomatis pula field jumlah dibayar akan berkurang  Jika tombol Batal diklik, maka semua field Pesan akan dibersihkan.


Berikut tampilan layout nya:<em><!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>Pondok Tulungagung</title>
    </head>
<body background ="tgs4a.jpg">
 <body>
    <script language="JavaScript" type="text/javascript">

<!--

function hitungPesan(){

var nota = document.form2;

var hargaBakso = 15000 * eval(nota.qBakso.value);

var hargaSoto = 15000 * eval(nota.qSoto.value);

var hargaMie = 10000 * eval(nota.qMie.value);

var hargaDegan = 5000 * eval(nota.qDegan.value);

var hargaCampur = 8000 * eval(nota.qCampur.value);

var jumlahTotal = hargaBakso + hargaSoto + hargaMie + hargaDegan + hargaCampur;

if (jumlahTotal > 50000){

    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>Form Pemesanan Berbasis JavaScript</h2>
 <h4><font color ="#FF33FF"><b>PONDOK TULUNGAGUNG<b/><fotn/></h4> <br/>

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

<table border="1px">

<tr>

    <th>No</th>

    <th>Makanan/Minuman</th>

    <th>Harga</th>

    <th>Pesan</th>

</tr>

<tr>

    <td width="15px">1</td>

    <td width="200px">Bakso Idola</td>

    <td width="85px"&#64; <input type="text" name="bakso" value="Rp.15000" size="10" disabled="true"/></td>

    <td width="150px"><input type="text" name="qBakso" value="0" onKeyUp="hitungPesan()"/></td>

</tr>

<tr>

    <td>2</td>

    <td>Soto Spesial</td>

    <td width="85px"&#64; <input type="text" name="soto" value="Rp.15000" size="10" disabled="true"/></td>

    <td><input type="text" name="qSoto" value="0" onKeyUp="hitungPesan()"/></td>

</tr>

<tr>

    <td>3</td>

    <td>Mie Ayam Super</td>

    <td width="85px"&#64 <input type="text" name="mie" value="Rp.10000" size="10" disabled="true"/></td>

    <td><input type="text" name="qMie" value="0" onKeyUp="hitungPesan()"/></td>

</tr>

<tr>

    <td>4</td>

    <td>Es Degan</td>

    <td width="85px"&#64 <input type="text" name="degan" value="Rp.5000" size="10" disabled="true"/></td>

    <td><input type="text" name="qDegan" value="0" onChange="hitungPesan()"/></td>

</tr>

<tr>

    <td>5</td>

    <td>Es Campur</td>

    <td width="85px"&#64 <input type="text" name="campur" value="Rp.8000" size="10" disabled="true"/></td>

    <td><input type="text" name="qCampur" value="0" onKeyUp="hitungPesan()"/></td>

</tr>

<tr bgcolor="#FF33FF">

    <td colspan="3" align="right">Jumlah Total</td>

    <td><input type="text" name="Total" disabled="true" /></td>

</tr>

<tr bgcolor="#FF33FF">

    <td colspan="3" align="right">Diskon</td>

    <td><input type="text" name="Diskon" disabled="true" /></td>

</tr>

<tr bgcolor="#FF33FF">

    <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()" />

</form>

</body>

</html></em>


SELAMAT MENCOBA ^_^

Label:

Diposting oleh yEsS di 14.27 0 komentar  

Penerapan DHTML pada kalkulator sederhana

Penerapan DHTML pada kalkulator sederhana


Pemahaman konsep dasar active web page dapat diimplementasikan dalam sebuah project kalkulator sederhana dengan teknik dinamis html (DHTML) yang menggunakan  Text Field untuk mengisi nilai dan Select (Combo Box) untuk memilih icon perhitungan, berikut tampilan sederhana dari kalkulator (dapat dikembangkan sendiri).

Adapun kode html yang digunakan pada layout diatas adalah seperti dibawah:

&lt !DOCTYPE html
PUBLIC &quot-//W3C//DTD XHTML 1.0 Transitional//EN&quot
&quothttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot&gt
&lt html xmlns=&quothttp://www.w3.org/1999/xhtml&quot lang=&quoten&quot&gt

&lt head&gt
&lt title&gtKalkulator&lt /title&gt
&lt /head&gt
&lt body&gt
&lt script language=&quotJavaScript&quot type=&quottext/javascript&quot&gt
&lt !--
function hitung(){
var x=eval(document.form1.x.value);
var y=eval(document.form1.y.value);
var pil= document.form1.opt.value;
if (pil == &quotplus&quot) {
var z = x + y;
}else if (pil == &quotmin&quot) {
var z = x - y;
} else if (pil == &quotcross&quot) {
var z = x * y;
} else if (pil == &quotdiv&quot) {
var z = x / y;
}
document.form1.hasil.value = z;
}
function resetForm(){
document.form1.reset();
}
//--&gt
&lt /script&gt

&lt form name=&quotform1&quot action=&quot#&quot&gt
&lt input type=&quottext&quot name=&quotx&quot /&gt
&lt select name=&quotopt&quot&gt
&lt option value=&quotplus&quot&gt + &lt /option&gt
&lt option value=&quotmin&quot&gt - &lt /option&gt
&lt option value=&quotcross&quot&gt * &lt /option&gt
&lt option value=&quotdiv&quot&gt / &lt /option&gt
&lt /select&gt
&lt input type=&quottext&quot name=&quoty&quot /&gt&lt br/&gt
&lt input type=&quotbutton&quot value=&quot=&quot onClick=&quothitung()&quot /&gt
&lt input type=&quottext&quot name=&quothasil&quot disabled=&quottrue&quot /&gt&lt br/&gt

&lt /form&gt
&lt /body&gt
&lt /html&gt

SELAMAT MENCOBA ^_^

Label:

Diposting oleh yEsS di 12.09 0 komentar  

Kamis, 04 Maret 2010

Desain Layout Halaman Web dengan Memanfaatkan Division

Desain Layout Halaman Web dengan Memanfaatkan  Division


Membuat halaman web dapat menggunakan Cascading Style Sheet (CSS). Dengan CSS, akan mempermudah kita dalam mendesain layout untuk web dengan lebih ringan. Untuk dapat membuat tampilan layout web seperti berikut dengan mengunakan CSS:




Langkah yang diambil :
1. Buat kode css dengan nama "clear2a.css"  (untuk nama file bisa dirubah sesuai dengan kebutuhan asal tetap dalam ekstensi file .css/ file nama diatas hanya sebagai contoh), kode css dapat dilihat dibawah ini :

#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;
}
#content1 {
float: left;
width: 544px;
height: 330px;
border: 1px solid green;
}
#top {
float: left;
width: 544px;
height: 120px;
border: 1px solid blue;
}
#content {
float: left;
width: 374px;
height: 207px;
border: 1px solid red;
}
#right {
float: right;
width: 150px;
height: 150px;
border: 1px solid orange;
}
#footer {
clear: both;
height: 50px;
border: 1px solid blue;
}



2. Setelah kode tersebut disimpan dalam kode css, dilanjutkan dengan membuat kode html dengan nama file yang sama yaitu clear2a.html, kode html dapat dilihat dibawah ini :


3. Kode css dan html telah dibuat selanjutnya lihat hasil akhir dengan masuk dalam localhost atau buka langsung dari kode html. (jika hasil yang diperoleh sesuai gambar diatas berarti anda berhasil)

SELAMAT MENCOBA ^_^ !!

Label:

Diposting oleh yEsS di 10.02 0 komentar  

Langganan: Postingan (Atom)

My Picture