Jika Berhasil Login akan keluar tampilan berikut :


Jika password dan atau user name salah maka akan keluar tampilan berikut :





Berikut adalah kode html untuk menampilkan aplikasi ogin form sederhana (tanpa database) :

<em><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Login Form</title>
<style type="text/css">
#apDiv1 {
position:absolute;
width:373px;
height:300px;
z-index:1;
left: 449px;
top: 136px;
background-color: #FFFFFF;
border: 2px solid Green;
background-image: url(1.JPG);
}
#apDiv3 {
position:absolute;
width:80px;
height:27px;
z-index:2;
left: 289px;
top: 274px;
}
.style3 {
font-size: 10px;
font-weight: bold;
}
#apDiv2 {
position:absolute;
width:412px;
height:115px;
z-index:2;
top: 0px;
left: 2px;
}
#header{
width:373px;
height:98px;
background-image: url(top1.JPG);
}
#footer{
width:373px;
height:40px;
background-image: url(footer.JPG);
}

body {
background-image: url(win.jpg);
}
</style>

</head>

<body onLoad="document.form1.user.focus();">
<script type="text/javascript">
function error1(){
alert('Masukkan User Name dan Password Terlebih Dahulu ');
}
function check()
{
if(form1.pass.value == "" || form1.user.value=="")
{
error1();
}
}
</script>
<form name="form1" method="post" action="use.php">
<div id="apDiv1">
<div id="header">
</div>
<div>
<div align="center"><strong><br>User Name :</strong>
<br>
<input type="text" name="user" size="35" value="" style="background-color:#99FFFF" autocomplete="off">
<br>
<br>
<strong>Password : </strong>
<br>
<input type="password" name="pass" size="35" style="background-color:#99FFFF" autocomplete="off">
<br>
<br>
</div>
</div>
<br>
<div id="apDiv3">
<input type="submit" name="submit" value=" ENTER " onClick="check()">
</div>
<div id="footer" align="left"><br>
</div>
</div>
</form>
</body>
</html></em>

Dan kode php-nya adalah :
<em><!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>
<title>Form Admin</title>
</head>
<body>
<?php
if(($_POST['user']=='romita') AND ($_POST['pass']=='teftum')) {
echo '.:Sukses:. Anda Telah Masuk Halaman Admin Dengan User Name :'.$_POST['user'];
echo '<br><br>Welcome ' . $_POST['user'];
}
else {
echo "<br><br><br><body text='red'><strong><center>Ada Kesalahan Pada Waktu Anda Login!!<br><br><a href='cobatugaslogin.html'><h4>Kembali Ke Login</h4></a></center></strong></body>";
}
?>
</body>
</html> </em>

Berikut adalah kode html-nya, simpan dengan nama tablegenerate.html


<br /> <br /><em><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <br /><title>Table Generate</title> <br /><style type="text/css"> <br /><!-- <br />#apDiv1 { <br /> width:182px; <br /> height:30px; <br /> z-index:1; <br /> left: 284px; <br /> top: 189px; <br />} <br /> color: #00ff00; <br />.style1 { <br /> font-weight: bold; <br /> text-align: center; <br />} <br />--> <br /></style> <br /><body background="pic.jpg"> <br /><script language="JavaScript" type="text/javascript"> <br />function getmax() { <br /> var R = parseInt(document.getElementById('JumlahRow').value); <br /> var C = parseInt(document.getElementById('JumlahColum').value); <br /> var X = parseInt(document.getElementById('JumlahCell').value); <br /> var cellmax = document.getElementById('maxcells'); <br /> var total = 'N/A'; <br /> total = R * C; <br /> cellmax.value = new String(total); <br /> if (X > total) <br /> { <br /> alert('Cell Total Yang Anda Masukkan Terlalu Besar, Nilai Maksimum Cells = ' + total); <br /> document.getElementById('CellsTotal').value = new String(); <br /> } <br />} <br /> <br /></script> <br /><form method="post" action="proses.php"> <br /> <h3 class="style1">Tabel Fleksibel</h3> <br /> <div> <br /> <table width="300" border="0" bgcolor="#00ff00"> <br /> <tr bgcolor="#ffff00"> <br /> <td width="120" style="text-align:left">Rows</td> <br /> <td width="189"><strong>= </strong> <br /> <input name="JumlahRow" type="text" id="JumlahRow" onKeyUp="getmax();" onfocus="this.select();"/></td> <br /> </tr> <br /> <tr bgcolor="#ffff00"> <br /> <td style="text-align:left"><label>Columns</label></td> <br /> <td><strong>= </strong> <br /> <input name="JumlahColum" type="text" id="JumlahColum" onKeyUp="getmax();" onfocus="this.select();"/></td> <br /> </tr> <br /> <tr bgcolor="#ffff00"> <br /> <td style="text-align:left">Total Cells </td> <br /> <td><strong>= </strong> <br /> <input name="JumlahCell" type="text" id="JumlahCell" onKeyUp="getmax();" onFocus="this.select();"/></td> <br /> </tr> <br /> <tr bgcolor="#ffff00"> <br /> <td style="text-align:left">Max Cells </td> <br /> <td><strong>= </strong> <br /> <input name="maxcells" type="text" id="maxcells" readonly="readonly" style="text-align:left"/></td> <br /> </tr> <br /> </table> <br /> </div> <br /> <div id="apDiv1"> <br /> <input type="submit" name="Generate" value="Generate"/><input type="reset" name="Reset" value="Reset"/> <br /> </div> <br /></form> <br /></body> <br /></em> <br />


Dan berikut kode php, simpan dengan nama proses.php


<br /><em><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <br /><title>Hasilnya</title> <br /><body> <br /><div align="center"> <br /> <?php <br />$rows = 1; <br />$columns = 1; <br />$cells = 1; <br />?> <br /> <br /> <?php $rows = (int) $_POST["JumlahRow"]; ?> <br /> <?php $columns = (int) $_POST["JumlahColum"]; ?> <br /> <?php $cells = (int) $_POST["JumlahCell"]; ?> <br /> <br /> <strong>Anda Memilih</strong> <?php echo $rows; ?> <em>rows,</em><br /> <br /> <strong>Anda Memilih</strong> <?php echo $columns; ?> <em>columns,</em><br /> <br /> <strong>Dan Anda Membutuhkan</strong> <?php echo $cells; ?> <em>cells,</em><br /> <br /> <br /> <br /> <br /> <br /> <?php <br /> $width = $columns * 75; <br /> echo "<table width=".$width." border=1>"; <br /> $rw = 0; <br /> $cel = 1; <br /> while ($rw < $rows && $cel <= $cells) <br /> { <br /> echo "<tr>"; <br /> $cl = 0; <br /> while ($cl < $columns) <br /> { <br /> if ($cel <= $cells) <br /> { <br /> echo "<td><div align=center>".$cel."</div></td>"; <br /> $cel++; <br /> } <br /> $cl++; <br /> } <br /> echo "</tr>"; <br /> $rw++; <br /> } <br /> echo "</table>"; <br />?> <br /></div> <br /></body> <br /></em> <br />

Berikut adalah kode html yang telah disisipi JavaScript untuk membuat tampilan seperti di atas.

<br /><!DOCTYPE html <br /> PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <br /> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br /><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <br /> <br /><head> <br /> <title>Form Pemesanan Berbasis Java Script</title> <br /></head> <br /> <br /><body> <br /> <script language="Javascript" type="text/javascript"> <br /><!-- <br /> <br /> function calculate() { <br /> var nota = document.form1; <br /> var hargabakso = 12000 * eval(nota.pesan1.value); <br /> var hargasoto = 10000 * eval(nota.pesan2.value); <br /> var hargamie = 15000 * eval(nota.pesan3.value); <br /> var hargadegan = 5000 * eval(nota.pesan4.value); <br /> var hargacampur = 7000 * eval(nota.pesan5.value); <br /> var hargatotal = hargabakso + hargasoto + hargamie + hargadegan + hargacampur ; <br /> <br /> if (hargatotal > 50000){ <br /> nota.total.value = hargatotal; <br /> nota.diskon.value = 10000; <br /> nota.bayar.value = hargatotal- eval(nota.diskon.value); <br /> } <br /> else{ <br /> nota.total.value = hargatotal; <br /> nota.diskon.value = 0; <br /> nota.bayar.value = hargatotal; <br /> } <br /> } <br /> <br />//--> <br /></script> <br /><h2 align="left">Form Pemesanan Berbasis JavaScript</h2> <br /><form name="form1" action="#"> <br /><table border="1px"><tr> <br /> <th>No</th> <br /> <th>Makanan/Minuman</th> <br /> <th>Harga</th> <br /> <th>Pesan</th> <br /></tr> <br /><tr> <br /> <td width="25" align="center">1</td> <br /> <td width="150">Bakso Istimewa</td> <br /> <td width="150">@<input type="text" name="price1" value="12000" size="18" disabled="true"/></td> <br /> <td width="150"><input type="text" name="pesan1" value="0" size="21" Onchange="calculate()"/></td> <br /></tr> <br /><tr> <br /> <td width="25" align="center">2</td> <br /> <td width="150">Soto Spesial</td> <br /> <td width="150" >@<input type="text" name="price2" value="10000" size="18" disabled="false"/></td> <br /> <td width="150"><input type="text" name="pesan2" value="0" size="21" Onchange="calculate()"/></td> <br /></tr> <br /><tr> <br /> <td width="25" align="center">3</td> <br /> <td width="150">Mie Ayam Super</td> <br /> <td width="150">@<input type="text" name="price3" value="15000" size="18" disabled="false"/></td> <br /> <td width="150"><input type="text" name="pesan3" value="0" size="21" Onchange="calculate()"/></td> <br /></tr> <br /><tr> <br /> <td width="25" align="center">4 </td> <br /> <td width="150">Es Degan</td> <br /> <td width="150">@<input type="text" name="price4" value="5000" size="18" disabled="false"/></td> <br /> <td width="150"><input type="text" name="pesan4" value="0" size="21" Onchange="calculate()"/></td> <br /></tr> <br /><tr> <br /> <td width="25" align="center">5</td> <br /> <td width="150">Es Campur</td> <br /> <td width="150">@<input type="text" name="price5" value="7000" size="18" disabled="false"/></td> <br /> <td width="150"><input type="text" name="pesan5" value="0" size="21" Onchange="calculate()"/></td> <br /></tr> <br /><tr> <br /> <td colspan="3" align="right">Jumlah Total</td> <br /> <td><input type="text" name="total" value="0" size="21"/></td> <br /></tr> <br /><tr> <br /> <td colspan="3" align="right">Diskon*</td> <br /> <td><input type="text" name="diskon" value="0" size="21"/></td> <br /></tr> <br /><tr> <br /> <td colspan="3" align="right">Jumlah Dibayar</td> <br /> <td><input type="text" name="bayar" value="0" size="21"/></td> <br /></tr> <br /> <br /></table> <br /><h5 align="left">*Diskon 10.000 berlaku untuk pembelian di atas 50.000 dan tidak berlaku untuk kelipatannya.</h5> <br /><input type="submit" name="Batal" value="Batal" size="10" Onclick="reset()"/> <br /></form> <br /></body> <br /></html <br />

Jika ada yang kurang jelas silahkan tinggalakan komentar.

Berikut adalah kode file css (simpan dengan nama new2.css) untuk membuat halaman web seperti di atas :

#wrapper {
margin: auto;
width: 997px;
border: 0;
}
#header {
height: 120px;
border: 1px solid blue;
margin-bottom:2px;
background:blue url('header.jpg');
}
#Gambarum {
float: left;
height: 63px;
width:61px;
margin-top:20px;
margin-left:50px;
border: 0;
background:red url('UM.PNG');
}
#Te {
float: left;
height: 35px;
width:300px;
margin-top:35px;
margin-left:5px;
}
#extra {
float: right;
height: 120px;
width:400px;
border: 0;
}
#atas {
float: left;
height: 25px;
width:350px;
margin-left:30px;
margin-top:2px;
border: 0;
}
#search {
clear:both;
float: right;
height: 20px;
width:300px;
margin-top:67px;
margin-right:20px;
border: 0;
}
#search1 {
float: left;
height: 15px;
width:120px;
margin-left:50px;
margin-top:4px;
border: 0;
}
#search2 {
float: right;
height: 17px;
width:110px;
margin-right:2px;
margin-top:4px;
border: 1px solid white;
background:white;
}
#inner {
float: left;
border: 0;
}
#sidebar {
float: left;
margin-right: 0px;
width: 250px;
height:420px;
border: 1px solid blue;
background:blue url('sidebar.jpg');
}
#Inner2 {
float: left;
width: 745px;
height: 420px;
border: 0;
}
#top{
height: 80px;
border: 0;
background:blue url('top.jpg');
}
#content {
float: left;
margin-top:10px;
margin-right:15px;
margin-left:15px;
width: 460px;
height: 323px;
border: 0;
}
#right {
float: left;
width: 250px;
height: 200px;
margin-top:10px;
border: 1px solid green;
background:blue url('right.jpg');
}

#footer {
margin:auto;
clear: both;
height: 80px;
width:997px;
border: 1px solid blue;
background:blue url('footer.jpg');
}
#leftmenu ul {
width: 250px;
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: blue url('button.jpg');
margin: 0px 0px 1px; color: #ffffff;
}
#leftmenu a:hover {
background: #000066 no-repeat left center; color: #ffffff
}
.style2 {
font-size: 24px;
font-weight: bold;
color: #000099;
}
.style3 {
color: #0000CC;
font-weight: bold;
}
.style4 {
font-family: "Times New Roman", Times, serif;
font-size: xx-large;
color: #FFFFFF;
font-weight: bold;
}
.style6 {
font-family: "Times New Roman", Times, serif;
font-weight: bold;
}
.style7 {color: #FFFFFF}
.style8 {
font-family: "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
}
.style10 {
color: #FFFFFF; font-size: 12px;
}
.style11 {
color: #000066;
font-weight: bold;
}


Dan kode html-nya sebagai berikut (simpan dengan nama 2.html)

<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br /><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <br /><head> <br /><title>Desain Halaman Web</title> <br /><link rel="stylesheet" href="new2.css" type="text/css" /> <br /></head> <br /><body> <br /><div id="wrapper"> <br /> <div id="header"> <br /> <div id="LogoUM"> <br /> </div> <br /> <div class="style4" id="Elektro">TEKNIK ELEKTRO <br /> </div> <br /> <div id="extra"> <br /> <div class="style6" id="above"> <br /> <div align="right" class="style7"><a href="http://localhost/Modul 3/2.html" target="_blank" class="style7">Home</a> | <a href="http://localhost/Modul 3/2.html.html" target="_blank" class="style7">Sitemap</a> | <a href="http://localhost/Modul 3/2.html" target="_blank" class="style7">RSS</a> | <a href="http://localhost/Modul 3/2.html" target="_blank" class="style7">Contact</a> | <a href="http://localhost/Modul 3/2.html" target="_blank" class="style7">About Us</a> </div> <br /> </div> <br /> <div id="search"> <br /> <div class="style3" id="search1"> <br /> <div align="right"><em><strong> <br /> Search <br /> </strong></em></div> <br /> </div> <br /> <div id="search2"></div> <br /> </div> <br /> <br /> </div> <br /> </div> <br /> <br /> <div id="inner"> <br /> <div id="sidebar"> <br /> <div id="leftmenu"> <br /> <ul> <br /> <li> <br /> <div align="center"><a href="http://localhost/Modul 3/2.html">Home</a></div> <br /> </li> <br /> <li> <br /> <div align="center"><a href="http://localhost/Modul 3/2.html">News & Media </a></div> <br /> </li> <br /> <li> <br /> <div align="center"><a href="http://localhost/Modul 3/2.html">Tutorial</a></div> <br /> </li> <br /> <li> <br /> <div align="center"><a href="http://localhost/Modul 3/2.html">Tips and Trik</a></div> <br /> </li> <br /> <li> <br /> <div align="center"><a href="#">Download</a></div> <br /> </li> <br /> </ul> <br /> </div> <br /> </div> <br /> <div id="Inner2"> <br /> <div id="top"> <br /> </div> <br /> <div id="content"> <br /> <p class="style2">Lomba Desain Web</p> <br /> <p class="style3">4 Maret 2010 (07.00)</p> <br /> <p class="style3">Lorem ipsum dolor sit amet, consectetur adipisicing elit,<br /> <br /> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> <br /> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris<br /> <br /> nisi ut aliquip ex ea commodo consequat.</p> <br /> <p class="style3">Read more...</p> <br /> </div> <br /> <div id="right"> <br /> <p class="style2" align="center">Events</p> <br /> <p class="style3"><ul> <br /> <li><a href="http://mythaazkiya.blogspot.com">Lomba Panjat Tiang Listrik</a></li> <br /> <li><a href="http://mythaazkiya.blogspot.com">Lomba Tarik Kabel</a></li> <br /> <li><a href="http://mythaazkiya.blogspot.com">Balap Karung 10 KM</a></li> <br /> </ul> <br /> </div> <br /> <br /> <br /> </div> <br /> </div> <br /> </div> <br /> <div id="footer"> <br /> <p align="center" class="style3">© 2010 Romita Apriyani PTI '07 </p> <br /> </div> <br /></div> <br /></body> <br /></html> <br />

Gambar tersebut adalah tampilan desain layout halaman web dengan memanfaatkan CSS (Cascade Style Sheet).
Untuk dapat membuat desain layout seperti itu yang pertama adalah membuat file css kemudian simpan dengan nama new1.css sebagai berikut :

#wrapper {
margin: auto;
width: 750px;
border: 1px solid black;
}
#header {
height: 90px;
border: 1px solid black;
margin-bottom:5px;
}

#inner {
float: left;
margin: 10px 0;
width: 750px;
border: 1px solid green;
}

#inner2{
float: left;
margin-left:12px;
width: 589px;
height:310px;
border: 1px solid green;
}

#sidebar {
float: left;
margin-right: 0;
width: 145px;
height:310px;
border: 1px solid red;
}

#top{
height: 100px;
border: 1px solid black;
}
#content {
float: left;
margin-right:15px;
width: 385px;
height: 201px;
border: 1px solid red;
margin-bottom: 5px;
}
#right {
float: right;
width: 185px;
height: 155px;
border: 1px solid red;
}

#footer {
clear: both;
margin-top: 5px;
height: 79px;
border: 1px solid black;
}

Selanjutnya adalah membuat file html kemudian simpan dengan nama 1.html

<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br /><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <br /><head> <br /><title>Desain Layout Halaman Web</title> <br /><link rel="stylesheet" href="new1.css" type="text/css" /> <br /></head> <br /><body> <br /><div id="wrapper"> <br /> <div id="header">Header</div> <br /> <br /> <div id="inner"> <br /> <div id="sidebar">Sidebar</div> <br /> <br /> <div id="inner2"> <br /> <div id="top">Top</div> <br /> <br /> <div id="content">Content</div> <br /> <br /> <div id="right">Right</div> <br /> </div> <br /> </div> <br /> <br /> <br /> <div id="footer"> <br /> Footer</div> <br /></div> <br /></body> <br /></html> <br />


Letakkan file css dan html pada satu folder kemudian jalankan melalui localhost.
Selamat mencoba. Semoga bermanfaat...

Source code untuk tampilan di atas adalah (click here)

Source code untuk tampilan seperti di atas adalah : (click here)