013

Selasa, 08 Maret 2011

MODUL 6

Studi Kasus

1. Tampilan :

Syntax PHP:

2. Tampilan :

Syntax HTML :

Syntax PHP :

TUGAS PRAKTIKUM

1. Tampilan Byvalue :

Tampilan ByRef :

Syntax By value :

Syntax By Ref :

Selasa, 01 Maret 2011

Kode Program Tugas Form Menu Makanan

<!DOCTYPE html>
<html lang="en">
<html>
<head>
<title>warung KOIBITO</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">

</script>
<h3>FORM DAFTAR HARGA MENU MAKANAN</h3>
<form name="form1" action="#">
<table border="1" cellspacing= 0 cellpadding=10>
<tr>
<th>No</th>
<th>Makanan/Minuman</th>
<th>Harga</th>
<th>Pesan</th>
<th>Total</th>

</tr>
<tr>
<td width="15">1</td>
<td width="400">Bakso Urat Super Besar istimewa(1 porsi)</td>
<td width="150">@<input type="text" name="baksourat" value="14000" size="15" disabled="true"/></td>
<td width="150"><input type="text" name="menu1" value="0" onChange="hitungPesan()"/></td>
<td width="150" align="right"><input type="text" name="bayar1" disabled="true"/></td>
</tr>
<td>2</td>
<td>Bakso Urat Super Besar(1 porsi)</td>
<td>@<input type="text" name="baksosuper" value="8000" size="15" disabled="true"/></td>
<td><input type="text" name="menu2" value="0" onChange="hitungPesan()"/></td>
<td><input type="text" name="bayar2" disabled="true"/></td>
<tr>
<td>3</td>
<td>Soto Spesial</td>
<td>@<input type="text" name="soto" value="10000" size="15" disabled="true"/></td>
<td><input type="text" name="menu3" value="0" onChange="hitungPesan()"/></td>
<td><input type="text" name="bayar3" disabled="true"/></td>
</tr>
<tr>
<td>4</td>
<td>Mie Ayam Super</td>
<td>@<input type="text" name="mie" value="15000" size="15" disabled="true"/></td>
<td><input type="text" name="menu4" value="0" onChange="hitungPesan()"/></td>
<td><input type="text" name="bayar4" disabled="true"/></td>
</tr>
<tr>
<td>5</td>
<td>Es Degan</td>
<td>@<input type="text" name="degan" value="7000" size="15" disabled="true"/></td>
<td><input type="text" name="menu5" value="0" onChange="hitungPesan()"/></td>
<td><input type="text" name="bayar5" disabled="true"/></td>
</tr>
<tr>
<td>6</td>
<td>Es Kopyor</td>
<td>@<input type="text" name="kopyor" value="7000" size="15" disabled="true"/></td>
<td><input type="text" name="menu6" value="0" onChange="hitungPesan()"/></td>
<td><input type="text" name="bayar6" disabled="true"/></td>
</tr>
<tr>
<td colspan="4" align="right">Jumlah Total</td>
<td><input type="text" name="Total" disabled="true" /></td>
</tr>
<tr>
<td colspan="4" align="right">Diskon</td>
<td><input type="text" name="Diskon" disabled="true" /></td>
</tr>
<tr>
<td colspan="4" align="right">Jumlah Dibayar</td>
<td><input type="text" name="Bayar" disabled="true" align="right"/></td>
</tr>
</table><br/>
<input type="reset" value="Batal" />
</form>
</body>
</html>

Print Screen hasil dari tugas form (tanpa diskon dan dikenai diskon)

Kode Program Kalkulator Sederhana

<html>
<head>
<title>Kalkulator Sederhana</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
function pengurangan(){
x=eval(form.x.value)
y=eval(form.y.value)
z=x-y
form.hasil.value=z
}

function penjumlahan(){
x=eval(form.x.value)
y=eval(form.y.value)
z=x+y
form.hasil.value = z
}

function perkalian(){
x=eval(form.x.value)
y=eval(form.y.value)
z=x*y
form.hasil.value = z
}

function pembagian(){
x=eval(form.x.value)
y=eval(form.y.value)
z=x/y
form.hasil.value = z
}

function pangkatdua(){
x=eval(form.x.value)
y=eval(form.y.value)
z=Math.pow(x, y)
form.hasil.value = z
}

function rav(){
form.x.focus()
form.x.value=""
form.y.value=""
form.hasil.value=""
}
</script>

<body onload=rav()>
<form name="form">
<hr width="1366" size="5" color="yellow" align="left">
<marquee><h1><Font color="RoyalBlue">KALKULATOR SEDERHANA MENGGUNAKAN "JAVA SCRIPT"</h1></hr></marquee>
<hr width="1366" size="5" color="Green" align="left"/>
Masukkan nilai pertama :<br>
<input type="text" name="x"><br>
Masukkan nilai kedua :<br>
<input type="text" name="y"><br>
Pilih Salah Satu Operasi Matematika :<br><br>
<input type="button" value=" + " onClick="penjumlahan()">
<input type="button" value=" - " onClick="pengurangan()">
<input type="button" value=" x " onClick="perkalian()">
<input type="button" value=" : " onClick="pembagian()">
<input type="button" value=" ^ " onClick="pangkatdua()"><br><br>
Hasil :<br>
<input type "text" name="hasil" disabled="true"><br><br>
<input type="button" value="C" onClick="rav()">
<hr width="1366" size="9" color="Red" align="left"/>
</form>
</body>
</html>

Print Screen hasil dari tugas Kalkulator Sederhana

Selasa, 22 Februari 2011

Tugas Praktikum Modul 4

css

body {
margin: 10px auto;
width: 750px;
}
header, nav, section, content, footer, article, aside, huruf,logo {
display:block;
border:1px solid Blue;
}
header {
background-image:url(hd.jpg);
height:80px;
border:1px solid green;
}
nav {
background-color: #AFEEEE;
height:30px;
}
article{
float: left;
border: 3px solid Black;
margin-left: 1px;
margin-top: 1px;
margin-bottom: 1px;
margin-right: 1px;
height: 400px;
width: 250px;
}

teksemail{
float:left;
width:80px;
height:20px;
border:px ;
}
aside{
float: right;
border: px ;
margin-right: 1px;
margin-left: 1px;
margin-top: 1px;
margin-bottom: 1px;
height: 250px;
width: 485px;
}
event {
background-color: #AFEEEE;
float: right;
border: px ;
margin-right: 1px;
margin-left: 1px;
margin-top: 1px;
margin-bottom: 1px;
height: 150px;
width: 485px;
}

section {
border: px ;
margin-left: px;
width:600;
height:410px;
}

#huruf{
margin-top: 25px;
margin-left: 20px;
color: white;
font-size: 30px;
float:left;
font-weight:bold;
}
footer{
clear:both;
background-image:url(Footer.jpg);
border:1px solid green;
height:20px;
}

#logo{
margin-left: 20px;
float:left;
height:80;
width:80;
}
#box_search {
margin-top: 10x;
margin-left: 10px;
float: left;
}
#text{
Float:left;
margin-top:2px;
Color: Blue;
size: 9;
}
#footer2{
margin-top: 1px;
margin-bottom: 1px;
color:white;
}
#formHome{
float:right;
margin-left:8px;
width:50px;
color: white;
height:20px;
border:px ;
background-color:#3D59AB ;
}
#formnews{
float:right;
width:100px;
color: white;
margin-left: 8px;
height:20px;
background-color: #3D59AB;
border:px ;
}
li{color: blue;}
ul{color: blue;}

#formtutorial{
float:right;
margin-left: 8px;
width:60px;
height:20px;
color: white;
border:px ;
background-color: #3D59AB;
}
#formtips{
float:right;
margin-left: 8px;
width:90px;
color: white;
height:20px;
border:px ;
background-color:#3D59AB;
}
#formdownload{
float:right;
margin-left: 8px;
width:75px;
height:20px;
color: white;
border:px ;
background-color: #3D59AB;
}

html
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Powered By Rantnrave Vorkro 13</title>
<link rel="Shortcut icon" href="Indonesia.png">
<link rel="stylesheet" href="mypratikum.css" type="text/css" />
</head>
<body>
<header>
<div id="logo"><img src="Logo.png" height= "80" width="80"/></div>
<div id="huruf">TEKNIK ELEKTRO PTI UM 209533421967</div>

</header>

<nav>
<div id="text">Search</div>
<div id="box_search"><input type="text"/><td></div>
<font color="white">
<input type="submit" Value="Downloads" id="formdownload">
<input type="submit" Value="Tips & Tricks"id="formtips">
<input type="submit" Value="Tutorial"id="formtutorial">
<input type="submit" Value="News & Media" id="formnews">
<div id="formHome">
<input type="submit" Value="Home" id="formHome">
</font>
</nav>
<section>
<aside>
One of the most annoying things I have noticed with personal computers is the noticeable drop off in speed and performance as the system gets older. When I first buy the system or when I have freshly installed Windows the whole system seems to zip along, programs open faster the system starts up faster. A few months of hard use later and I get more and more frustrated, I am forced to wait for everything as my PC grinds along apparently making hard work of the smallest task.

</aside>
<article>
<img src="FElic.jpg" height="400" width="250">
</article>
<event>
<font color="#royal_blue">Events: </font>
<ul>
<li><a href="#Jalan-Jalan Malam">Jalan-Jalan Malam</a></li>
<li><a href="#Praktek Industri">Praktek Industri</a></li>
<li><a href="#Ngeband">Ngeband 'Summertime'</a></li>
</ul>
</event>
</section>

<footer>
<div id="footer2" align="center">
Home|News&Media|Tutorial|tips & Tricks|Downloads
</div>
</footer>
</body>
</html>

Studi Kasus Modul 4

css

body {
margin: 10px auto;
width: 750px;
}
header, nav, section, footer, article, aside{
display:block;
border:1px solid Blue;
}
header {
height:80px;
border:1px solid green;
}
nav {
height:30px;
}
article{
float: left;
border: 1px dashed red;
margin-left: 15px;
margin-top: 15px;
margin-bottom: 15px;
margin-right: 15px;
height: 350px;
width: 450px;
}
aside{
float: right;
border: 1px dashed Black;
margin-right: 15px;
margin-left: 15px;
margin-top: 15px;
margin-bottom: 15px;
height: 350px;
width: 230px;
}
section {
border: 1px solid red;
margin-left: px;
width:600;
height:400px;
}

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

html

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Desain Layout HTML V</title>
<link rel="stylesheet" href="mystudi.css" type="text/css" />
</head>
<body>
<header>
header
</header>

<nav>
nav
</nav>
<section>
<aside>
aside
</aside>
<article>
article
</article>
section
</section>

<footer>
footer
</footer>
</body>
</html>