Hew, serasa apa gitu ya digabung-gabung..wkwkkwk..
Tapi dengan memasukkan script PHP ke dalam script HTML, kita dapat membuat generate tabel secara fleksibel.
Langkah-langkah yang perlu kita lakukan adalah sebagai berikut.
Buat script HTMl dulu dengan nama tbl.html
Script lengkapnya adalah:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Generate Table Secara Fleksibel</title>
</head>
<body>
<h3 align="center" >Generate Tabel Secara Fleksibel</h3><br />
<form name="frmtabel" method="post" action="tbl.php">
<div align="center">
Baris :
<input name="baris" type=text id="baris" onKeyUp="getmax();" onfocus="this.select();"/>
||||| Kolom :
<input name="kolom" type=text id="kolom" onKeyUp="getmax();" onfocus="this.select();"/>
||||| Sel :
<input name="sel" type=text id="sel" onKeyUp="getmax();" onfocus="this.select();"/><br />
<br />
Maksimal Sel :
<input name="maks" type=text id="maks" disabled="disabled"/><br/>
<br/><input name="enter" type=submit value="Generate"/><br/>
<br/><input name="reset" type=reset value="Reset"/><br/>
</div>
</form>
</body>
<script language="JavaScript" type="text/javascript">
<!--
function getmax() {
var myForm = document.frmtabel;
var B = eval(myForm.baris.value);
var K = eval(myForm.kolom.value);
var S = eval(myForm.sel.value);
var cellmax = myForm.maks;
var total = 'N/A';
total = B * K;
cellmax.value = new String(total);
if (S > total)
{
alert('Nilai Sel Yang Anda Masukkan Terlalu Besar, Nilai Maksimum Sel = ' + total);
myForm.total.value = new String();
}
}
//-->
</script>
</html>
Setelah membuat script HTML sperti di atas, berikutnya buat script PHPnya..
Simpan script ini dengan nama tbl.php
Script lengkapnya adalah:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Hasil Generate Tabel</title>
</head>
<body>
<div align="center">
<?php
$rows = 1;
$columns = 1;
$cells = 1;
?>
<?php $rows = (int) $_POST["baris"]; ?>
<?php $columns = (int) $_POST["kolom"]; ?>
<?php $cells = (int) $_POST["sel"]; ?>
<br />
<strong>Jumlah baris yang diisikan</strong> <?php echo $rows; ?> <em>rows</em><br />
<strong>Jumlah kolom yang diisikan</strong> <?php echo $columns; ?> <em>columns</em><br />
<strong>Jumlah sel yang diperlukan</strong> <?php echo $cells; ?> <em>cells</em><br />
<br />
<strong>Hasil Generate Tabel</strong>
<br />
<br />
<?php
$width = $columns * 80;
echo "<table width=".$width." border=2>";
$ro = 0;
$cel = 1;
while ($ro < $rows && $cel <= $cells)
{
echo "<tr>";
$co = 0;
while ($co < $columns)
{
if ($cel <= $cells)
{
echo "<td><div align=center>".$cel."</div></td>";
$cel++;
}
$co++;
}
echo "</tr>";
$ro++;
}
echo "</table>";
?>
</div>
</body>
</html>
Hwaa..selesai dehh penulisan scriptnya..Jika ingin menjalankan script ini, jangan lupa untuk mengaktifkan local hostnya..Lalu panggil script dengan nama tbl.html
Selamat mencoba ya..^^
Berikut ini tampilan awal halaman web Generate Table Secara Fleksibel dengan HTML dan PHP.
Misalnya kita memasukkan suatu nilai pada Baris, Kolom dan Sel..maka tampilannya adalah:
Untuk menghasilkan tabel yang fleksibel, klik langsung pada button Generate. Maka tabel yang diharapkan sudah terbentuk. Tampilannya adalah:
Jika kita ingin memasukkan nilai Baris, Kolom dan Sel yang berbeda atau ingin mengulang lagi, langsung aja klik Reset.
Pada pembuatan tabel ini, jumlah nilai Sel yang dimasukkan tidak boleh melebihi Total Sel yang tersedia. JIka kita memasukkan nilai Sel yang lebih besar daripada Total Sel yang tersedia, maka akan muncul message box seperti berikut:
Tidak ada komentar:
Posting Komentar