STUDY KASUS 2 - MOD 6

ini merupakan syntax yang harus dsimpan dg .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 Study Kasus</title>
</head>

<body>

<div align="center">
<?php
$rows = 2;
$columns = 2;
$cells = 2;
?>

  <?php $rows = (int) $_POST["JumlahRow"]; ?>
  <?php $columns = (int) $_POST["JumlahColum"]; ?>
  <?php $cells = (int) $_POST["JumlahCell"]; ?>

  <strong>Anda Memilih</strong> <?php echo $rows; ?> <em>baris,</em><br />
  <strong>Anda 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 * 100;
    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>

ini merupakan HTML

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;
}

HASILnya..


Jika dKLIK GENERATE, maka ..





Floodie
*dposting dg terpaksa untuk memenuhi syarat UTS besug. -.-"
ampun mas asdos :D


Free Template Blogger collection template Hot Deals SEO

MODUL 5 - WARUNG GITA

Syntax untuk membuat penghitungan warung :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<blink><title>Warung GITA</title> </blink>
</head>
<body bgcolor = "pink">
<body>
<script language="JavaScript" type="text/javascript">
function hitungPesan(){
var nota = document.form2;
var hargaBakso = 12000 * eval(nota.Bakso.value);
var hargaSoto = 10000 * eval(nota.Soto.value);
var hargaMie = 15000 * eval(nota.Mie.value);
var hargaDegan = 5000 * eval(nota.Degan.value);
var hargaCampur = 7000 * eval(nota.Campur.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><h3>Form Pemesanan WARUNG GITA</h3>
<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="6" disabled="true"/></td>
<td width="110"><input type="text" name="Bakso" size="14" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>2</td>
<td>Soto Spesial</td>
<td>@ <input type="text" name="soto" value="10000" size="6" disabled="true"/></td>
<td><input type="text" name="Soto" size="14" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>3</td>
<td>Mie Ayam Super</td>
<td>@ <input type="text" name="mie" value="15000" size="6" disabled="true"/></td>
<td><input type="text" name="Mie" size="14" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>4</td>
<td>Es Degan</td>
<td>@ <input type="text" name="degan" value="5000" size="6" disabled="true"/></td>
<td><input type="text" name="Degan" size="14" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>5</td>
<td>Es Campur</td>
<td>@ <input type="text" name="campur" value="7000" size="6" disabled="true"/></td>
<td><input type="text" name="Campur" 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="BATAL" onClick="resetForm()" />
</form>
</body>
</html>

TAMPILAN :


FLoodi_thxdd



Free Template Blogger collection template Hot Deals SEO

MODUL 5 - KALKULATOR SEDERHANA

Syntax untuk membuat kalkulaator sederhana :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>gitagitagitagitagita</title>
</head>
<body>
<CENTER>
<font size="7" color="red"><blink>Kalkulator Sederhana 2011</font></blink>
<hr size="5" color="black">
<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="CLEAR" onClick="resetForm()" />
</form>
</center>
</body>
</html>

HASIL :


Free Template Blogger collection template Hot Deals SEO

TUGAS MODUL EMPAT

CSS:

body {
margin: 10px auto;
width: 1000px;
border:1px solid black;}

header{
background-color:darkblue;
<img src="file:///C:/wamp/www/mod4/0.jpg" />
height:20px;
}

nav {
background-color: #00FFFF;
padding:10px;
height:40px;
}

section{
height:475px;
}
home{
padding:2px;
background-color:#4169E1;
position:absolute;
top:90px;
left:798px;
height:25px;
width:38px;}

news{
padding:2px;
background-color:#4169E1;
position:absolute;
top:90px;
left:847px;
height:25px;
width:91px;
}

tutorials{
padding:2px;
background-color:#4169E1;
position:absolute;
top:90px;
left:949px;
height:25px;
width:56px;}

tips{
padding:2px;
background-color:#4169E1;
position:absolute;
top:90px;
left:1016px;
height:25px;
width:82px;}

download{
padding:2px;
background-color:#4169E1;
position:absolute;
top:90px;
left:1109px;
height:25px;
width:63px;}


imag{
float:left;
height:466px;
width: 400px;
border:3px solid black;}

article{
float:right;
height:340px;
width: 590px;}

aside{
background-color: #00FFFF;
float:right;
height:130px;
width: 594px;}

footer{
background-color:darkblue;
padding:3px;
height:40px;}

bawah{
position:absolute;
left:500px;
width:500px;
height:20px;}

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

<head>
<title>Desain Layout Tugas Rumah</title>
<link rel="stylesheet" href="TR.css" type="text/css"/>
<head>
<body>

<header>
<img src="file:///C:/wamp/www/mod4/0.jpg" />
<font FACE="Tahoma" SIZE="15" color="white"><b> TEKNIK ELEKTRO</b></font>
</header>

<nav>
search <input type="text" name="sch">
<home>
<font FACE="Calibri" SIZE="3" color="white">Home</font>
</home>
<news>
<font FACE="Calibri" SIZE="3" color="white">News&Media </font>
</news>
<tutorials>
<font FACE="Calibri" SIZE="3" color="white">Tutorials</font>
</tutorials>
<tips>
<font FACE="Calibri" SIZE="3" color="white">Tips&Tricks </font>
</tips>
<download>
<font FACE="Calibri" SIZE="3" color="white">Download</font>
</download>
</nav>
<section>
<imag>
<img src="file:///C:/wamp/www/mod4/11.jpg" />
</imag>
<article>
1. Kalian Para perempuan bisa tahu kalau seorang laki2 benar2 sakit atau terluka ketika ia menangis di depanmu.
2. Pria tidak suka apabila kamu membicarakan mantannya..
3. Pria mencintaimu lebih dari kamu mencintai mereka, bila mereka serius menjalani hubungan..
4. Pria benar2 berpikir bahwa wanita itu aneh dan tidak bisa di tebak tapi tetap mencintai mereka lebih dari wanita mencintai pria..
5. ketika seorang pria benar2 menyukaimu, dia akan mengesampingkan semua sifat2 jelekmu..
6. Pria bisa tergila2 karena senyum seorang wanita..
7. Pria membenci wanita yang berlebihan/hiperbola..
8. Pria tidak akan bisa bermimpi dan berharap terlalu banyak..
9. Pria akan tergila2 kalau wanita menyentuh tangan mereka..
10. Ketika seorang wanita mengatakan “tidak”, pria menganggapnya sebagai “coba lagi lain kali”..
11. Pria menyayangi ibu mereka..
12. Kamu tidak akan pernah bisa memahami pria kecuali kamu mendengarkan dia..
13. Seperti hawa, wanita adalah kelemahan pria...

</P>
</article>
<aside><b>
EVENTS:
</b>
<p>
<FONT FACE="Calibri" SIZE="2"><b>
<ul>
<li><a href="#">Visual Basic</a></li>
<li><a href="#">Pemrograman Web</a></li>
<li><a href="#">FISTEK</a></li>
<li><a href="#">BIK</a></li>
<li><a href="#">Bikin Puyeng</a></li>
<ul></b>
</font>
</aside>
</section>

<footer>
<bawah>
<a href="./">Home</a>&nbsp;|&nbsp;
      <a color="white" href="#">News     &amp; Media</a>&nbsp;|&nbsp;
      <a color="white" href="#">Tutorials</a>&nbsp;|&nbsp;
      <a color="white" href="#">Tips &amp; Tricks</a>&nbsp;|&nbsp;
      <a color="white" href="#">Download</a>&nbsp;
      </bawah>
</footer>
</body>
</html>


TAMPILAN:



^^fLoodie
maav amatiran, semoga bermanfaat




Free Template Blogger collection template Hot Deals SEO

FACE-mu

Masih amatiran dan belajar membuat citakan facebook (terpaksa karena tugas)
ini syntax nya:


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

<head>
<title>Gita Putri R - Face-mu OFF-C</title>
<body background="bg.jpg">

<style type="text/css">
<!--
.pertama {
float: left;
width: 1300px;
heigt: 700px;
background: #333fff;
border: 1px solid #333fff;
}
.kedua {
float: left;
padding: 10px;
width: 1300px;
heigt: 50px;
}
-->
</style>

</head>

<body>

<div class="pertama">
<table border=0 align="left" cellspacing=0 cellpadding=0>
<!-- Header -->
<tr>
<th width="200" colspan=2></th>
<th width="700" rowspan=3 colspan=2 align="left"><img src="facemu.png"></th>
<th width="200" align="left" colspan=2><font color="white" face="arial" size="2">Email:</font></th>
<th width="200" align="left" colspan=2><font color="white" face="arial" size="2">Password:</font></th>
<th width="200" colspan=2></th>
</tr>

<tr>
<td width="200" colspan=2></td>
<td width="200" align="left" colspan=2><input type="text" /></td>
<td width="200" align="left" colspan=2><input type="text" /></td>
<td width="200" colspan=2><input type="submit" value="Masuk" /></td>
</tr>

<tr>
<td width="200" colspan=2></td>
<td width="200" align="left" colspan=2><font color="white" face="arial" size="1"><input type="checkbox" />Biarkan saya tetap masuk</td>
<td width="200" align="left" colspan=2><font color="white" face="arial" size="1">Lupa kata sandi anda?</td>
<td width="200" colspan=2></td>
</tr>
</table>
</div>

<br/>
<br/><br/><br/>

<div class="kedua">
<table border=0 align="left" cellspacing=0 cellpadding=0>
<!-- Header -->
<tr>
<td width="200" colspan=2></td>
<td width="700" 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 = "pic.jpg" width="600" height="300">
</font></td>
<td width="100" colspan=2></td>
<td width="600" align="left" colspan=2><font color="#333fff" face="arial" size="5">Mendaftar</font></td>
</tr>

<tr>
<td width="200" colspan=2></td>
<td width="100" colspan=2></td>
<td width="600" 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="200" colspan=2></td>
<td width="100" colspan=2></td>
<td width="150" align="left"><font color="#333fff" face="arial" size="1">Nama Depan</td>
<td width="450" align="left"><font color="#333fff" face="arial" size="1">:<input type="text"/></font></td>
</tr>

<tr>
<td width="200" colspan=2></td>
<td width="100" colspan=2></td>
<td width="150" align="left"><font color="#333fff" face="arial" size="1">Nama Belakang</td>
<td width="450" align="left"><font color="#333fff" face="arial" size="1">:<input type="text"/></font></td>
</tr>

<tr>
<td width="200" colspan=2></td>
<td width="100" colspan=2></td>
<td width="150" align="left"><font color="#333fff" face="arial" size="1">Email Anda</td>
<td width="450" align="left"><font color="#333fff" face="arial" size="1">:<input type="text"/></font></td>
</tr>

<tr>
<td width="200" colspan=2></td>
<td width="100" colspan=2></td>
<td width="150" align="left"><font color="#333fff" face="arial" size="1">Masukan Ulang Email</td>
<td width="450" align="left"><font color="#333fff" face="arial" size="1">:<input type="text"/></font></td>
</tr>

<tr>
<td width="200" colspan=2></td>
<td width="100" colspan=2></td>
<td width="150" align="left"><font color="#333fff" face="arial" size="1">Kata Sandi Baru</td>
<td width="450" align="left"><font color="#333fff" face="arial" size="1">:<input type="text"/></font></td>
</tr>

<tr>
<td width="200" colspan=2></td>
<td width="100" colspan=2></td>
<td width="150" align="left"><font color="#333fff" face="arial" size="1">Saya Seorang</td>
<td width="450" 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="200" colspan=2></td>
<td width="100" colspan=2></td>
<td width="150" align="left"><font color="#333fff" face="arial" size="1">Saya Seorang</td>
<td width="450" 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><option>09</option><option>10</option>
</select>
<select name="bln">
<option>Januari</option>
<option>Februari</option>
<option>Maret</option><option>April</option><option>Mei</option><option>Juni</option><option>Juli</option><option>Agustus</option>
</select>
<select name="thn">
<option>1991</option>
<option>1992</option>
<option>1993</option><option>1995</option><option>1996</option><option>1997</option><option>1998</option><option>1999</option>
</select>
</font></td>
</tr>

<tr>
<td width="200" colspan=2></td>
<td width="100" colspan=2></td>
<td width="150"></td>
<td width="450" align="left"><font color="#333fff" face="arial" size="1">Mengapa saya perlu mengisinya?</font></td>
</tr>

<tr>
<td width="200" colspan=2></td>
<td width="100" colspan=2></td>
<td width="150"></td>
<td width="450" align="left"><font color="#333fff" face="arial" size="1"><input type="submit" value="Mendaftar"></font></td>
</tr>
<tr>
<td width="200" colspan=2></td>
<td width="100" colspan=2></td>
<td width="600" 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="pertama" align="center">
Face-mu OFF-C 2011 &copy; Gita Gita Gita
</div>
</body>
</html>


Dan tampilan nya menjadi seperti ini, Taraaaaaaaaa:



mav masih amatiran
Floodi




Free Template Blogger collection template Hot Deals SEO

tugas2-modul2

<!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</title>
</head>
<body bgcolor="pink">

<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>




Free Template Blogger collection template Hot Deals SEO

tugas1-modul2

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<html>
<head>
<title>TUGAS 1</title>
</head>


<body bgcolor="pink">

<br></br>
<hr align="left" width="600"></hr>
<table width="600" border="0">

<tr><td width="400"><strong><b>Perusahaan</strong></td></b>
<td width="400"><strong><b>Pendapatan</strong></td></tr></b>
</table>

<hr align="left" width="600"/>
<table width="600" border="0">

<tr><td width="175">Angin Reboot Ltd</td>
<td width="175" colspan=3></td>
<td width="175" colspan=2 bgcolor="green"></td>
<td width="175">+150%</td></tr>

<tr><td width="175">Command Prompt, Inc</td>
<td width="175" colspan=3></td>
<td width="75" bgcolor="purple">
<td width="100">+55%</td>
<td width="175"></td></tr>

<tr><td width="175">Hibernate Ltd</td>
<td width="75"></td>
<td width="50" align="right">-23%</td>
<td width="50" bgcolor="yellow"></td>
<td width="350" colspan=3></td></tr>

<tr><td width="175">Shutdown Ltd</td>
<td width="75" align="right">-75%</td>
<td width="100" colspan=2 bgcolor="red"></td>
<td width="350" colspan=3></td></tr>

</table>
<hr align="left" width="600"/>

<img src="1.jpg"
align="right" width="177" border="3"/img>

</body>
</html>


Free Template Blogger collection template Hot Deals SEO