PHP :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html>
<head>
<title>Hasil Generate Halla</title>
</head>
<body>
<div align="center">
<?php
$rows = 1;
$columns = 1;
$cells = 1;
?>
<?php $rows = (int) $_POST["JumlahRow"]; ?>
<?php $columns = (int) $_POST["JumlahColum"]; ?>
<?php $cells = (int) $_POST["JumlahCell"]; ?>
<strong>Kamu Memilih</strong> <?php echo $rows; ?> <em>baris,</em><br />
<strong>Kamu Memilih</strong> <?php echo $columns; ?> <em>kolom,</em><br />
<strong>Dan Anda Membutuhkan</strong> <?php echo $cells; ?> <em>sel,</em><br />
<br />
<br />
<?php
$width = $columns * 75;
echo "<table width=".$width." border=1>";
$rw = 0;
$cel = 1;
while ($rw < $rows && $cel <= $cells)
{
echo "<tr>";
$cl = 0;
while ($cl < $columns)
{
if ($cel <= $cells)
{
echo "<td><div align=center>".$cel."</div></td>";
$cel++;
}
$cl++;
}
echo "</tr>";
$rw++;
}
echo "</table>";
?>
</div>
</body>
</html>
HTML :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html>
<head>
<title>Tabel Generate Halla</title>
<font color="red">
<body bgcolor="black">
<style type="text/css">
<!--
#a1 {
width: 175px;
height: 27px;
z-index: 1;
left: 287px;
top: 190px;
}
color: red;
.b1 {
font-weight: bold;
}
-->
</style>
</head>
<body>
<script language="JavaScript" type="text/javascript">
function getmax() {
var x = parseInt(document.getElementById('JumlahRow').value);
var y = parseInt(document.getElementById('JumlahColum').value);
var z = parseInt(document.getElementById('JumlahCell').value);
var cellmax = document.getElementById('maxcells');
var total = 'N/A';
total = x * y;
cellmax.value = new String(total);
if (z > total)
{
alert('Cell Total Yang Anda Masukkan Terlalu Besar, Nilai Maksimum Cells = ' + total);
document.getElementById('CellsTotal').value = new String();
}
}
</script>
<form method="post" action="generate.php">
<h3 class="b1">Generate Sel Tabel Secara Fleksibel</h3>
<div>
<table width="301" border="0" bgcolor="red">
<tr bgcolor="yellow">
<td width="120" style="text-align:center">Baris</td>
<td width="190"><strong>= </strong>
<input name="JumlahRow" type="text" id="JumlahRow" onKeyUp="getmax();" onfocus="this.select();"/></td>
</tr>
<tr bgcolor="yellow">
<td style="text-align:center"><label>Kolom</label></td>
<td><strong>= </strong>
<input name="JumlahColum" type="text" id="JumlahColum" onKeyUp="getmax();" onfocus="this.select();"/></td>
</tr>
<tr bgcolor="yellow">
<td style="text-align:center">Sel Total </td>
<td><strong>= </strong>
<input name="JumlahCell" type="text" id="JumlahCell" onKeyUp="getmax();" onFocus="this.select();"/></td>
</tr>
<tr bgcolor="yellow">
<td style="text-align:center">Max Sel </td>
<td><strong>= </strong>
<input name="maxcells" type="text" id="maxcells" readonly="readonly" style="text-align:center"/></td>
</tr>
</table>
</div>
<div id="a1">
<input type="submit" name="Generate" value="Generate"/>
<input type="reset" name="Reset" value="Reset"/>
<img src="a.gif">
</div>
</form>
</body>
</html>
Studi Kasus_modul6
Rumah Makan Halla ^_^
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Rumah Makan Halla</title>
</head>
<font color="red">
<body bgcolor="black">
<body>
<script language="JavaScript" type="text/javascript">
function hitungPesan(){
var nota = document.form2;
var Bakso = 12000 * eval(nota.Bakso.value);
var Soto = 10000 * eval(nota.Soto.value);
var Mie = 15000 * eval(nota.Mie.value);
var Degan = 5000 * eval(nota.Degan.value);
var Campur = 7000 * eval(nota.Campur.value);
var jumlahTotal = Bakso + Soto + Mie + Degan + Campur;
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><h3>=>> FORM PEMESANAN RUMAH MAKAN HALLA <==</ hr><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="15">1</td>
<td width="200">Bakso Istimewa</td>
<td width="90">@ <input id="n123" type="text" name="bakso" value="12000" size="5" disabled="true"/></td>
<td width="110"><input type="text" name="Bakso" size="12" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>2</td>
<td>Soto Spesial</td>
<td>@ <input type="text" name="soto" value="10000" size="5" disabled="true"/></td>
<td><input type="text" name="Soto" size="12" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>3</td>
<td>Mie Ayam Super</td>
<td>@ <input type="text" name="mie" value="15000" size="5" disabled="true"/></td>
<td><input type="text" name="Mie" size="12" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>4</td>
<td>Es Degan</td>
<td>@ <input type="text" name="degan" value="5000" size="5" disabled="true"/></td>
<td><input type="text" name="Degan" size="12" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>5</td>
<td>Es Campur</td>
<td>@ <input type="text" name="campur" value="7000" size="5" disabled="true"/></td>
<td><input type="text" name="Campur" size="12" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td colspan="3" align="right">Jumlah Total</td>
<td>Rp.<input type="text" name="Total" size="9" disabled="true" /></td>
</tr>
<tr>
<td colspan="3" align="right">Diskon</td>
<td>Rp.<input type="text" name="Diskon" size="9" disabled="true" /></td>
</tr>
<tr>
<td colspan="3" align="right">Jumlah Dibayar</td>
<td>Rp.<input type="text" name="Bayar" disabled="true" size="9" align="right"/></td>
</tr>
</table><br/>
<input type="button" value="CANCEL" onClick="resetForm()" />
</form>
</table>
<img src="images.jpg">
</body>
</html>
Studi Kasus_modul5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>kalkulatorhalla</title>
</head>
<body bgcolor="black">
<body>
<CENTER>
<font size="8" color="purple">KALKULATOR SEDERHANA 2011</font>
<hr size="5" color="red">
<script language="JavaScript" type="text/javascript">
<!--
function hitung(){
var myForm = document.form1;
var x=eval(myForm.x.value);
var y=eval(myForm.y.value);
var pil= myForm.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;
}
myForm.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="HAPUS" onClick="resetForm()" />
</form>
</center>
</body>
</html>
Tugas Rumah_modul4
ini css-nya :
body {
margin: 10px auto;
width: 800px;
}
header,nav,section,footer {
display:block;
}
header {
height:70px;
width:800px;
background-image:url(header.gif);
}
nav{
float:left;
width:800px;
height:40px;
background:red;
}
section{
float:left;
width:800px;
height:517px;
}
sidebar {
float:left;
height:505px;
width:255px;
border:6px solid black;
}
sidebar2 {
float: right;
height:358px;
width:532px;
background:black;
}
sidebar3 {
float: right;
height:159px;
width:532px;
background:red;
}
footer {
width:800px;
clear:both;
height:38px;
background:black;
}
ul {
margin:0;
padding:0;
list-style: none;
}
ul li {
position: relative;
float: right;
width:65px;
}
li ul {
position: absolute;
top: 1px;
display: none;
}
ul li a {
display: block;
text-decoration:none;
line-height:2px;
color:red;
padding:7px;
background:black;
margin:1px 1px;
}
ini html-nya :
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>>> Halla <<</title>
<link rel="stylesheet" href="style.css" type=text/css />
</head>
<body>
<header>
</header>
<nav>
<font size="3" face="cambria"><div align="center">
<ul id="nav">
<li><a href="">photos</a></li>
<li><a href="">tips</a></li>
<li><a href="">tutorial</a></li>
<li><a href="">news</a></li>
<li><a href="">home</a></li>
</ul>
<font color = "solid blue" SIZE="4" face="cambria">
<div align="left">
search
<input type=”search” name=”search” size="20" width="15">
</nav>
<section>
<sidebar>
<img src="12.jpg">
</sidebar>
<sidebar2>
<font color = "red" SIZE="2" face="cambria">
<br>
pesona cintamu menjamah jiwaku semoga kilau ini abadi untuk selamanya gelora selalu
ku mau terbang dan tenggelam menjalani semua ini reguklah nafasku resapi denyutnya
bawalah diri ini ke alam cinta nan abadi sambutlah kekasih
<br>
<br>pesona cintamu menjamah jiwaku semoga kilau ini abadi untuk selamanya gelora selalu
ku mau terbang dan tenggelam menjalani semua ini reguklah nafasku resapi denyutnya
bawalah diri ini ke alam cinta nan abadi sambutlah kekasih
<br>
<br>pesona cintamu menjamah jiwaku semoga kilau ini abadi untuk selamanya gelora selalu
ku mau terbang dan tenggelam menjalani semua ini reguklah nafasku resapi denyutnya
bawalah diri ini ke alam cinta nan abadi sambutlah kekasih
<br>-by : netral-
</sidebar2>
<sidebar3>
<font color = "black" SIZE="4" face="cambria">
<br> --> kunjungi & follow ™
<font color = "black" SIZE="3" face="cambria">
<br><br><a href="http://www.facebook.com/"> Halla Puspaning Palupi</a>
<br><a href="http://vitrolic11.blogspot.com/"> vitrolic11.blogspot.com</a>
<br><a href="http://vitrolic11@yahoo.com/"> vitrolic11@yahoo.com</a>
</sidebar3>
</section>
<footer>
<font color = "white" SIZE="2" face="cambria"><div align="center">
Home | News dan Media | Tutorial | Tips dan Trik | Downloads
<br><font color = "red" SIZE="3" face="cambria"><div align="center">
™ Halla Puspaning Palupi - 209533421944 ™
</footer>
</body>
</html>
Studi Kasus_modul 4
ini css-nya :
body {
margin: 10px auto;
width: 750px;
}
header{
border:1px solid green;
height: 80px;
}
nav {
border:1px solid blue;
height:20px;
}
section{
padding:15px;
border:1px solid red;
height:370px;
}
article{
float:left;
border:2px dashed red;
height:340px;
width:550px;}
aside{
float:right;
border:2px dashed black;
height:340px;
width:150px;
}
footer{
border:1px solid green;
height:20px;
}
ini html-nya :
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5</title>
<link rel="stylesheet" href="SK.css" type="text/css"/>
<head>
<body>
<header>
header
</header>
<nav>
nav
</nav>
<section>
<article>
article
</article>
<aside>
aside
</aside>
section
</section>
<footer>
footer
</footer>
</body>
</html>
FACE_MU Halla
<!DOCTYPE html>
<html lang="en">
<head>
<title>HallaPuspaningPalupi Face-mu</title>
<body background="bg.jpg">
<style type="text/css">
<!--
.bag1 {
float: left;
width: 1300px;
heigt: 700px;
background: #333fff;
border: 1px solid #333fff;
}
.bag2 {
float: left;
padding: 10px;
width: 1300px;
heigt: 50px;
}
-->
</style>
</head>
<body>
<div class="bag1">
<table border=0 align="left" cellspacing=0 cellpadding=0>
<!-- Header -->
<tr>
<th width="210" colspan=2></th>
<th width="7100" rowspan=3 colspan=2 align="left"><img src="facemu.png"></th>
<th width="210" align="left" colspan=2><font color="white" face="arial" size="2">Email:</font></th>
<th width="210" align="left" colspan=2><font color="white" face="arial" size="2">Password:</font></th>
<th width="210" colspan=2></th>
</tr>
<tr>
<td width="210" colspan=2></td>
<td width="210" align="left" colspan=2><input type="text" /></td>
<td width="210" align="left" colspan=2><input type="text" /></td>
<td width="210" colspan=2><input type="submit" value="Masuk" /></td>
</tr>
<tr>
<td width="210" colspan=2></td>
<td width="210" align="left" colspan=2><font color="white" face="arial" size="1"><input type="checkbox" />Biarkan saya tetap masuk</td>
<td width="210" align="left" colspan=2><font color="white" face="arial" size="1">Lupa kata sandi anda?</td>
<td width="210" colspan=2></td>
</tr>
</table>
</div>
<br/>
<br/><br/><br/>
<div class="bag2">
<table border=0 align="left" cellspacing=0 cellpadding=0>
<!-- Header -->
<tr>
<td width="210" colspan=2></td>
<td width="710" rowspan=13 colspan=2><font color="#333fff" face="arial" size="4" align="left">
Face-mu membantu Anda terhubung dan berbagi dengan orang-orang dalam kehidupan Anda di Indonesia.
<br/><br/><br/><img src = "gambarku.jpg" width="600" height="300">
</font></td>
<td width="110" colspan=2></td>
<td width="610" align="left" colspan=2><font color="#333fff" face="arial" size="5">Mendaftar</font></td>
</tr>
<tr>
<td width="210" colspan=2></td>
<td width="110" colspan=2></td>
<td width="610" align="left" colspan=2><font color="#333fff" face="arial" size="3">Gratis, sampai kapanpun</font><hr align="left" width=60% color="#333fff"/></td>
</tr>
<tr>
<td width="210" colspan=2></td>
<td width="110" colspan=2></td>
<td width="140" align="left"><font color="#333fff" face="arial" size="1">Nama Depan</td>
<td width="440" align="left"><font color="#333fff" face="arial" size="1">:<input type="text"/></font></td>
</tr>
<tr>
<td width="210" colspan=2></td>
<td width="110" colspan=2></td>
<td width="140" align="left"><font color="#333fff" face="arial" size="1">Nama Belakang</td>
<td width="440" align="left"><font color="#333fff" face="arial" size="1">:<input type="text"/></font></td>
</tr>
<tr>
<td width="210" colspan=2></td>
<td width="110" colspan=2></td>
<td width="140" align="left"><font color="#333fff" face="arial" size="1">Email Anda</td>
<td width="440" align="left"><font color="#333fff" face="arial" size="1">:<input type="text"/></font></td>
</tr>
<tr>
<td width="210" colspan=2></td>
<td width="110" colspan=2></td>
<td width="140" align="left"><font color="#333fff" face="arial" size="1">Masukan Ulang Email</td>
<td width="440" align="left"><font color="#333fff" face="arial" size="1">:<input type="text"/></font></td>
</tr>
<tr>
<td width="210" colspan=2></td>
<td width="110" colspan=2></td>
<td width="140" align="left"><font color="#333fff" face="arial" size="1">Kata Sandi Baru</td>
<td width="440" align="left"><font color="#333fff" face="arial" size="1">:<input type="text"/></font></td>
</tr>
<tr>
<td width="210" colspan=2></td>
<td width="110" colspan=2></td>
<td width="140" align="left"><font color="#333fff" face="arial" size="1">Saya Seorang</td>
<td width="440" align="left"><font color="#333fff" face="arial" size="1">:<select name="jk">
<option>Laki-Laki</option>
<option>Perempuan</option>
</select></font></td>
</tr>
<tr>
<td width="210" colspan=2></td>
<td width="110" colspan=2></td>
<td width="140" align="left"><font color="#333fff" face="arial" size="1">Saya Seorang</td>
<td width="440" align="left"><font color="#333fff" face="arial" size="1">:<select name="tgl">
<option>01</option><option>02</option><option>03</option>
<option>04</option>05<option>06</option><option>07</option><option>08</option>
</select>
<select name="bln">
<option>Januari</option>
<option>Februari</option>
<option>Maret</option><option>April</option><option>Mei</option>
</select>
<select name="thn">
<option>1991</option>
<option>1992</option>
<option>1993</option><option>1995</option><option>1996</option>
</select>
</font></td>
</tr>
<tr>
<td width="210" colspan=2></td>
<td width="110" colspan=2></td>
<td width="140"></td>
<td width="440" align="left"><font color="#333fff" face="arial" size="1">Mengapa saya perlu mengisinya?</font></td>
</tr>
<tr>
<td width="210" colspan=2></td>
<td width="110" colspan=2></td>
<td width="140"></td>
<td width="440" align="left"><font color="#333fff" face="arial" size="1"><input type="submit" value="Mendaftar"></font></td>
</tr>
<tr>
<td width="210" colspan=2></td>
<td width="110" colspan=2></td>
<td width="610" align="left" colspan=2><hr color="#333fff" width=60% align="left"/><font color="#333fff" face="arial" size="1">Buat halaman</font>
<font color="black" face="arial" size="1">untuk selebritis, group musik, atau bisnis</font></td>
</tr>
</table>
</div>
<br/>
<br/><br/><br/><br/>
<div class="bag1" align="right">
Face-mu 2011 © HallaPuspaningPalupi
</div>
</body>
</html>
Grafik Berbasis Tabel_modul 2
<!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>Grafik Berbasis Tabel_halla</title>
</head>
<font color="white">
<body bgcolor="brown">
<body>
<table width="700" border="0" align="left">
<tr>
<caption><b><p> PERBANDINGAN FITUR <p></caption>
</tr>
<!--Mengatur Tabel-->
<tr>
<td colspan="8" style="border-bottom:#000000 solid thin;"></td>
</tr>
<tr>
<td width="25" align="center"><strong>No</strong></td>
<td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
<td width="150" align="center"><strong>Fitur</strong></td>
<td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
<td width="75" align="center"><strong>Enterprise</strong></td>
<td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
<td width="25" align="center"><strong>Pro</strong></td>
<td width="50" align="center"><strong>Free</strong></td>
</tr>
<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>
<!--Baris data pertama-->
<tr>
<td width="25" align="center">1</td>
<td width="150">Garansi seumur hidup</td>
<td width="75" align="center">X</td>
<td width="25" align="center">-</td>
<td width="50" align="center">-</td>
</tr>
<!--Baris data kedua-->
<tr>
<td width="25" align="center">2</td>
<td width="150">Multiuser</td>
<td width="75" align="center">X</td>
<td width="25" align="center">X</td>
<td width="50" align="center">-</td>
</tr>
<!--Baris data ketiga-->
<tr>
<td width="25" align="center">3</td>
<td width="150">Update otomatis</td>
<td width="75" align="center">X</td>
<td width="25" align="center">X</td>
<td width="50" align="center">-</td>
</tr>
<!--Baris data keempat-->
<tr>
<td width="25" align="center">4</td>
<td width="150">Cetak laporan</td>
<td width="75" align="center">X</td>
<td width="25" align="center">X</td>
<td width="50" align="center">X</td>
</tr>
<!--Baris data kelima-->
<tr>
<td width="25" align="center">5</td>
<td width="150">Notifikasi error</td>
<td width="75" align="center">X</td>
<td width="25" align="center">X</td>
<td width="50" align="center">X</td>
</tr
<!--Baris data keenam-->
<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>
<tr>
<td width="25" align="center">6</td>
<td width="150">Ubah tema</td>
<td width="75" align="center">X</td>
<td width="25" align="center">X</td>
<td width="50" align="center">X</td>
</tr>
<!--Baris data ketujuh-->
<tr>
<td width="25" align="center">7</td>
<td width="150">Try icon</td>
<td width="75" align="center">X</td>
<td width="25" align="center">X</td>
<td width="50" align="center">X</td>
</tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
<body background="haha.jpg">
</table>
</body>
</html>