Kombinasi Dreamweaver, PHP dan HTML dalam membuat Desain Template Dinamis (2)
Kamis, 07 Juni 2007
Instruksi Pembuatan program :
1. Panitia It Club, mengkopi folder images dan js ke folder itclub di C:/appserv/www
2. Jika sudah, replace file home,footer,header, index, left dan menu.php
3. untuk peserta buat 3 file di bawah ini :
Buka Dreamweaver dan ikuti langkah berikut :
1. Tekan kombinasi CTRL + N dan pilih PHP lalu create.
2. Lalu save file tersebut menjadi trandom.php
3. buka file menu.php dan buat satu simbol yang ter-link ke trandom.php
<td><a href=”trandom.php”><img src=”images/loading.gif”></a></td>
4. Lalu copy-paste semua skrip pada index.php ke trandom.php dan ubah skrip berikut :
<?php require(’home.php’);?>
menjadi
<?php require(’random.php’);?>
5. Lalu buat file baru bernama random.php ketik kode berikut :
random.php
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>K<<Library</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<script language=”JavaScript” type=”text/javascript”>
var picture=[”logo1″,”logo2″];
document.write(”<center><img src=./images\\”+picture[Math.floor(Math.random()*2)]+”.jpg\ width=\”300\” height=\”100\”/></center>”);
</script>
<script type=”text/javascript” src=”js/ts_picker.js” language=”JavaScript”></script>
</head>
<body>
<form name=”add” method=”post” action=”randomized.php”>
<table>
<tr>
<td width=”100″>User Id</td>
<td>:</td>
<td><input type=”text” name=”id” value=”" maxlength=”10″>
<div><font color=”#FF3366″ size=”1″>* User ID valid 6-10 Karakter</font></div>
</td>
</tr>
<br>
<tr>
<td>Nama</td>
<td>:</td>
<td><input type=”text” name=”username” value=”"></td>
</tr>
<tr>
<td>Level</td>
<td>:</td>
<td><select name=”level”>
<option value=”Administrator”>Admin</option>
<option value=”End User”>End User</option>
</select></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type=”password” name=”pass” value=”"></td>
</tr>
<tr>
<td>Birth Date</td>
<td>:</td>
<td width=”100%”><input type=”text” name=”efdate” value=”">
<div><font color=”#FF3366″ size=”1″>* Tanggal Hari ini || lebih</font></div>
</td>
<td><a href=”javascript:show_calendar(’document.add.efdate’,document.add.efdate.value);”><img src=”js/cal.gif” width=”16″ height=”16″ border=”0″ alt=”Klik untuk definisi kalender”></a></td>
</tr>
<tr>
<td>Retired Date</td>
<td>:</td>
<td><input type=”text” name=”exdate” value=”"><div><font color=”#FF3366″ size=”1″>* Tanggal > EfDate</font></div></td>
<td><a href=”javascript:show_calendar(’document.add.exdate’,document.add.exdate.value);”><img src=”js/cal.gif” width=”16″ height=”16″ border=”0″ alt=”Klik untuk definisi kalender”></a>
</td>
</tr>
</table>
<input type=”submit” name=”submit” value=”SAVE”>
</form>
</body>
</html>
randomized.php
<?
echo “<h5>Data yang anda input:</h5>”;
echo”Nama : $username\n”;
echo”<br>”;
echo”Level anda :$level”;
echo”<br>”;
echo”Password : $pass”;
echo”<br>”;
echo”Tanggal Lahir : $efdate”;
echo”<br>”;
echo”Pensiun : $exdate”;
?>
Lalu jalankan browser dengan memasukkan URL berikut :
http://localhost/itclub
Download code disini