Minggu, 06 Maret 2011

Tugas di Rumah 5

Tampilan pemesanan menu makan & minum
Nie tag HTML nya, gw kasi dah.....


< br>

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<script language="JavaScript" type="text/javascript">
<!--
function rst(){
  var mf=document.form1;
  mf.jm1.value="0";  mf.jm2.value="0";  mf.jm3.value="0";
  mf.jm4.value="0";  mf.jm5.value="0";  mf.jt.value="0";
  mf.dsc.value="0";  mf.bayar.value="0";
}

function proc(){
  var mf=document.form1;
  var hrg1=parseInt(mf.hg1.value) * parseInt(mf.jm1.value);
  var hrg2=parseInt(mf.hg2.value) * parseInt(mf.jm2.value);
  var hrg3=parseInt(mf.hg3.value) * parseInt(mf.jm3.value);
  var hrg4=parseInt(mf.hg4.value) * parseInt(mf.jm4.value);
  var hrg5=parseInt(mf.hg5.value) * parseInt(mf.jm5.value);

  mf.jt.value=hrg1+hrg2+hrg3+hrg4+hrg5;
  if (parseInt(mf.jt.value)>50000)
    mf.dsc.value="10000";
  mf.bayar.value=parseInt(mf.jt.value) - parseInt(mf.dsc.value);
}
//-->
</script>

<form name="form1" action="#" >
<table width="600" border="1">
  <tr>
    <th width="10%">No.</td>
    <th width="40%">Makanan/Minuman</td>
    <th width="30%">Harga</td>
    <th width="20%">Pesan</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Bakso Istimewa </td>
    <td>@ <input name="hg1" type="text" id="hg1" value="12000" readonly="true" /></td>
    <td><input name="jm1" type="text" id="jm1"  value="0" onchange="proc(); " /></td>
  </tr>
  <tr>
    <td>2</td>
    <td>Soto Sepesial </td>
    <td>@ <input name="hg2" type="text" id="hg2" value="10000" readonly="true" /></td>
    <td><input name="jm2" type="text" id="jm2" value="0" onchange="proc(); " /></td>
  </tr>
  <tr>
    <td>3</td>
    <td>Mie Ayam Super </td>
    <td>@ <input name="hg3" type="text" id="hg3" value="15000" readonly="true" /></td>
    <td><input name="jm3" type="text" id="jm3" value="0" onchange="proc(); " /></td>
  </tr>
  <tr>
    <td>4</td>
    <td>Es Degan</td>
    <td>@ <input name="hg4" type="text" id="hg4" value="5000" readonly="true" /></td>
    <td><input name="jm4" type="text" id="jm4" value="0" onchange="proc(); " /></td>
  </tr>
  <tr>
    <td>5</td>
    <td>Es Campur </td>
    <td>@ <input name="hg5" type="text" id="hg5" value="7000" readonly="true" /></td>
    <td><input name="jm5" type="text" id="jm5" value="0" onchange="proc(); " /></td>
  </tr>
  <tr>
    <td colspan="3" align="right">Jumlah Total </td>
    <td><input name="jt" type="text" id="jt" value="0" readonly="true" /></td>
  </tr>
  <tr>
    <td colspan="3" align="right">Diskon</td>
    <td><input name="dsc" type="text" id="dsc" value="0" readonly="true" /></td>
  </tr>
  <tr>
    <td colspan="3" align="right">Jimlah Dibayar </td>
    <td><input name="bayar" type="text" id="bayar" value="0" readonly="true" /></td>
  </tr>
</table>
<br>
<input type="submit" name="Submit" value="Batal" onclick="rst()" />
</form>
</body>
</html>
Read more!

Membuat Calculator #1

Membuat Calculator #1









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

<head>
<title>Hitung</title>
</head>
<body>

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

<!--
function hitung(){
  var mf=document.form1;

  if (mf.op.value == "+")
    mf.bil3.value=parseFloat(mf.bil1.value) + parseFloat(mf.bil2.value);
  else if (mf.op.value == "-")
    mf.bil3.value=parseFloat(mf.bil1.value) - parseFloat(mf.bil2.value);
  else if (mf.op.value == "*")
    mf.bil3.value=parseFloat(mf.bil1.value) * parseFloat(mf.bil2.value);
  else
    mf.bil3.value=parseFloat(mf.bil1.value) / parseFloat(mf.bil2.value);
}
//-->
</script>

<form name=form1 action="#">
<input type=text name=bil1>

<select name="op">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>

<input type=text name=bil2>

<input type="button" value="=" onClick="hitung()" />

<input type=text name=bil3>

</form>
</body>
</html>

Read more!

Kasus 4

Membuat layout sederhana...


HTML

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

<head>
<title>Studi Kasus</title>
<link rel="stylesheet" href="style.css" type=text/css />
</head>
<body>
<header>Header...</header>

<nav>
<button>button 1</button>
<button>button 2</button>
<button>button 3</button>
<button>button 4</button>

Nav...</nav>

<section>

<article>Article...</article>
<aside>Aside...</aside>

Section...</section>

<footer>Footer...</footer>

</body>
</html>

--------

file css

body{
  margin:1px auto;
  width:750px;
  border:1px solid green;
}

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

header{
  height:80px;
  border:1px solid green;
}

nav{
  width:730px;
  height:25;
  border:1px solid blue;
  padding:10px 10px 10px 10px;
}
section{
  clear:both;
  width:750px;
  height:450px;
  border:1px solid red;
}

article{
  margin:20px;
  float:left;
  width:450px;
  height:370px;
  border:1px dashed red;
}

aside{
  margin:20px;
  float:right;
  width:200px;
  height:370px;
  border:1px dashed black;
}

footer{
  clear:both;
  height:20px;
  border:1px solid green;
}

button -input{
  width:75;
  height:25px;
  border:1px solid red;
}
Read more!