Senin, 07 Maret 2011

TUGAS MODUL 5

<html>
<head>
<title>tugas modul 5</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
function hitungPesan(){
var nota = document.form2;
var hargaBakso = 12000 * eval(nota.qBakso.value);
var hargaSoto = 10000 * eval(nota.qSoto.value);
var hargaMie = 15000 * eval(nota.qMie.value);
var hargaDegan = 5000 * eval(nota.qDegan.value);
var hargaCampur = 7000 * 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>

<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="15">1</td>
<td width="200">Bakso Istimewa</td>
<td width="90">Rp.<input id="n123" type="text" name="bakso" value="12000" size="n6" disabled="true"/></td>
<td width="110"><input type="text" name="qBakso" size="n14" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>2</td>
<td>Soto Spesial</td>
<td>Rp. <input type="text" name="soto" value="10000" size="6" disabled="true"/></td>
<td><input type="text" name="qSoto" size="14" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>3</td>
<td>Mie Ayam Super</td>
<td>Rp. <input type="text" name="mie" value="15000" size="6" disabled="true"/></td>
<td><input type="text" name="qMie" size="14" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>4</td>
<td>Es Degan</td>
<td>Rp. <input type="text" name="degan" value="5000" size="6" disabled="true"/></td>
<td><input type="text" name="qDegan" size="14" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>5</td>
<td>Es Campur</td>
<td>Rp. <input type="text" name="campur" value="7000" size="6" disabled="true"/></td>
<td><input type="text" name="qCampur" size="14" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td colspan="3" align="right">Jumlah Total</td>
<td>Rp.<input type="text" name="Total" size="10" disabled="true" /></td>
</tr>
<tr>
<td colspan="3" align="right">Diskon</td>
<td>Rp.<input type="text" name="Diskon" size="10" disabled="true" /></td>
</tr>
<tr>
<td colspan="3" align="right">Jumlah Dibayar</td>
<td>Rp.<input type="text" name="Bayar" disabled="true" size="10" align="right"/></td>
</tr>
</table><br/>
<input type="button" value="Reset" onClick="resetForm()" />
</form>
</body>
</html>


Diposting oleh di Tidak ada komentar:

Studi Kasus Modul 5

<html>
<head>
<title>Studi Kasus Modul 5</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
function hitung(){
var x=eval(document.form1.x.value);
var y=eval(document.form1.y.value);
var pil= document.form1.opt.value;

if (pil == "tambah") {
var z = x + y;
}
else if (pil == "kurang") {
var z = x - y;
}
else if (pil == "kali") {
var z = x * y;
}
else if (pil == "bagi") {
var z = x / y;
}
document.form1.hasil.value = z;
}
function resetForm(){
document.form1.reset();
}
//-->
</script>

<form name="form1" action="#">
<input type="text" name="x" />
<select name="opt">
<option value="tambah"> + </option>
<option value="kurang"> - </option>
<option value="kali"> * </option>
<option value="bagi"> / </option>
</select>
<input type="text" name="y" />
<input type="button" value="=" onClick="hitung()" />
<input type="text" name="hasil" disabled="true" /><br/>
<input type="button" value="Reset" onClick="resetForm()" />
</form>
</body>
</html>
Diposting oleh di Tidak ada komentar:

Senin, 28 Februari 2011

STUDI KASUS MODUL 4

INI ADALAH CSS:

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

header,nav,section,footer{
display:block;
border:1px solid red;
}
header{
height:80px;
}

logo{
float: left;
padding-left: 750px;
padding-top: 80px;
border:1px dashed blue;


}
nav{
height:30px;
}

ul{
margin: 0;
padding: 0;
list-style: none;
}
ul li {
position:relative;
float:left;
width: 100px;
}
li ul{
position: absolute;
top: 30px;
display: none;
}
ul li{
display: block;
text-decoration: none;
line-height: 20px;
color:#FFCC00;
padding: 5px;
background:#FFFF00;
margin: 0 2px;
}
ul li a:haver {background: #66F;}
li:hover ul,li.over ul {display:block;}

section{
height:370px;
}

#article{
float:left;
margin: 10px;
width: 200px;
height: 300px;
border:1px dashed blue;
}
#arside{
float:right;
margin: 10px;
width: 500px;
height: 300px;
border:1px dashed blue;

}

footer{
clear:both;
height:20px;
}

INI ADALAH HTML

<html>
<head>
<title>Desain layout sederhana HTML5</title>
<link rel="stylesheet" href="studikasus.css" type="text/css" />
</head>

<body>
<header>
<logo>
</logo>
</header>

<nav>

<ul id="nav">
<li><a href="">Home</a></li>
<li><a href="">Profile</a>
<ul>
<li><a href="">web design</a></li>
<li><a href="">Program</a></li>
</ul>
</li>

<li><a href="">contact</a>
<ul>
<li><a href="">Home</a></li>
<li><a href="">mobile</a></li>
</ul>
</li>

<li><a href="">Galeri</a>
<ul>
<li><a href="">Program</a></li>
<li><a href="">Web</a></li>
<li><a href="">Multimedia</a></li>
</ul>
</li>
</ul>
</nav>

<section>
<div id="article">
<div>articleee
</div>
</div>
<div id="arside">
arside
</div>
<p>section
</p>
</section>

<footer>
footer
</footer>

</body>
</html>

Diposting oleh di Tidak ada komentar:

Tugas Pratikum Modul 4

 INI ADALAH CSS
  
body {
margin:5px auto;
padding:0;
font:0.72em/150% Calibri;
}

#wrapper {
margin:auto;
width:980px;
}

#header {
height:80px;
margin:0px auto;
background:#0000;
}

#header-content{
height:70px;
margin:auto;
background-image:url(../pratikum4/image/header.jpg)
}

#menu-top {
font-size:small;
height:20px;
float:right;
padding:0px 50px;
font-weight:bold;
}

#site-title h2{
float:left;
padding:0px 10px;
height:30px;
margin:20px 0px;
font:2.1em/100% 'ravie';
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:#FF3300;
}

#footer p {
text-align:center;
}

#sidebar {
float:left;
width:200px;
height:400px;
background-color:#FF9900;
}

#content {
float:right;
width:780px;
height:400px;
background:#FFFF00;
}

#content-top {
clear:both;
margin:auto;
width:780px;
height:140px;
background-image:url(TopBg.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 black;
background:#CCCC00;
}

#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:#FF6600 no-repeat left center;
margin: 0px 0px 1px; color:#0000FF;
}

#leftmenu a:hover {
background:#FFCC99 no-repeat left center;
color:#0033FF;
}



ini adalah HTML

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Tugas Praktikum Modul 4</title>
<link rel="stylesheet" href="praktikumModul4.css" type="text/css" />
</head>
<body bgcolor=black>
<div id="wrapper">
<div id="header">
<div id="header-content">
<div id="menu-top">
Home | Sitemap | RSS | Contact | About Us
</div>

<div id="site-title">
</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</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Tips and Tricks</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="content-top">

</div>
<div id="content-main">
<h3>Materi Desain Header Web</h3>
<hr />
<p>
Untuk lebih jelasnya liat modul pratikum 4.

</p>
</div>
<div id="content-right">
<h3>Events</h3>
<ul>
<li><a href="#">Pembelajaran Web</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<br />
<p><b>E-mail: Jack.delphy@yahoo.co.id</b></p>
</div>
</div>
</body>
</html>









Diposting oleh di Tidak ada komentar:

Senin, 14 Februari 2011

Tugas Pratikum 3

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

<head>
<title>Keset Welcome</title>
<link rel ="shortcut icon" href="fM.jpg">
<style type="text/css">
<!--

.box1 {
float: right;
padding: 5px;
height: 100px;
}
.box2 {
float: right;
padding: 5px;
height: 100px;
}
#header{
height: 120px;
background:#fa8a1a;
}
#logo{
float: left;
padding-left: 100px;
padding-top: 20px;
}

.box3 {
}
.box4 {
width: 1300px;
height: 18px;
background: #4169E1;
text-align:left;
font-size:8px;
color:blue
}
#tengah {
float: left;
}
#kiri {
float: left;
width: 780px;
height: 380px;
}
#subkiri{
width: 300px;
height: 200px;
padding: 50px;
color: #4169E1;
}
#kanan {
float: left;
padding: 5px;
width: 370px;
height: 380px;
color: #4169E1;
}
#bottom {
clear: both;
height: 20px;
background: #4169E1;
font-size:6px;
color: #bde0e6;
}

-->
</style>
</head>

<body>
<div id="logo">
<img src="dhelok.jpg">
</div>


<div id="header">
<div class="box2">
<br><input type="button" value="Ublem">
<br>
</div>

<div class="box1">
Ojok Kondo-kondo<br><input type="text" size="25">
<br>lali tah?
</div>

<div class="box1">
Email opo HP<br><input type="text" size="25">
<br><input type="checkbox">Langsung Ublem
</div>
</div>

<form>
<div id="tengah">
<div id="kiri">
<div id="subkiri">

<font size="12">Ndelokanmu iki tok g ngarap tugas!!</font>
</div></form>
</div>
<div id="kanan">
<h2>Yang bergabung Orang Yg beriman!!</h2>
Ora Mbayar.
<hr/>
<form>
<table>
<tr><td>Jeneng Ngarep</td><td><input type="text" size="20"></td></tr>
<tr><td>Jeneng Mburi</td><td><input type="text" size="20"></td></tr>
<tr><td>Email Anda</td><td><input type="text" size="20"></td></tr>
<tr><td>Masukkan Ulang Email</td><td><input type="text" size="20"></td></tr>
<tr><td>Kata Sandi Baru</td><td><input type="text" size="20"></td></tr>
<tr><td>Saya Seorang</td><td>
<select name="kelamin">
<option value="wanita" selected>Wanita
<option value="pria">Pria
<option value="Waria">Waria
<option value="Bencong">Bencong
</select></td></tr>
</table>
</form>
<br><input type="button" value="DAFTAR">
</div>

</div>

</body>
</html>

Diposting oleh di 1 komentar:

Studi kasus modul 3

<html>
<head>
<title>Studi Kasus Modul 3</title>
<style type="text/css">
    <!--
        .lingkaran{
            display: block;
            height: 100em;
            width: 10em;
            font-weight:300;
            border: 0.2em solid #888943;
            background-color: #CACC7F;
            -moz-border-radius: 5em;
            -webkit-border-radius: 5em;
            -khtml-border-radius: 5em;
            border-radius: 5px;
            text-align: center;
        }
        .lingkaran2{
            width:100px;
            height:100px;
            border-radius:50px;
            -moz-border-radius:50px;
            -webkit-border-radius:50px;
            background:#0099FF;
            text-align:center;
            font-size:20px;
            color:#0033FF
        }
        .text-lingkaran{
            padding-top: 37px;
        }
        .border1{
            width:200px;
            text-align:center;
            padding:10px;
            background:#000000;
            color: red;
            font-weight: bold;
            -moz-border-radius: 2em 0;
            -webkit-border-top-left-radius: 30px;
            -webkit-border-bottom-right-radius: 30px;
        }
        .border2{
            font-weight: bold;
            border: 3px solid red;
        }
        .shadow {
            width: 150px;
            box-shadow: 6px 6px 8px #blue;
            -moz-box-shadow: 5px 5px 7px #111;
            -webkit-box-shadow: 6px 6px 6px #111;
        }
    -->
</style>
</head>
<body>
    <div class="lingkaran2">
        <span class="text-lingkaran">
            bunder-bunder
        </span>
    </div>
    <p>
    <div class="border1">
        border biasa sudut tidak sama
    </div>
   
    <div class="shadow">
        <p class="border2">punya bayangan
    </div>
</body>
</html>
Diposting oleh di Tidak ada komentar:

Senin, 07 Februari 2011

STUDI KASUS





Grafik Berbasis Tabel Pengelompokan











PERBANDINGAN FITUR
NO Fitur Enterprise Pro Free
1Garansi Seumur HidupX--
2MultiuserX--
3Update otomatisXX-
4Cetak LaporanXX-
5Notifikasi ErrorXXX
6Ubah temaXXX
7Try ikonXXX

Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)