Buat program sederhana untuk men-generate sel tabel secara fleksibel. Tekniknya, buat sebuah fungsi yang menerima argumen berupa jumlah sel dan jumlah kolom. Jadi, pembentukan sel tabel didasarkan pada nilai jumlah sel dan jumlah kolom yang diberikan. Dalam pembuatan tabel ini diperlukan source html untuk membuat pen-generatornya dan sebagai hasilnya kita menuliskan source phpnya. Untuk langkah pertama buat tabel pengenerate dengan source html, simpan sintaks berikut dg .html, sebagai contoh tugas.html
Berikut adalah Source codenya...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>GENERATOR TABLE</title>
<style type="text/css">
<!--
#Div {
position:absolute;
width:200px;
height:27px;
z-index:1;
left: 575px;
top: 200px;
}
.style1 {
color: blue;
font-weight: bold;
}
-->
</style>
</head>
<body>
<form method="post" action="table.php">
<h3 align="center" class="style1">DYNAMIC TABLE</h3>
<table width="327" align="center" border="0" bgcolor="#FFFFFF">
<tr>
<td width="121" style="text-align:center"><b>Rows</b></td>
<td width="196"><strong>:</strong>
<input name="RowsTotal" type="text" id="RowsTotal" onKeyUp="getmax();" onfocus="this.select();"></td>
</tr>
<tr>
<td style="text-align:center"><label><b>Cols</b></label></td>
<td><strong>:</strong>
<input name="ColsTotal" type="text" id="ColsTotal" onKeyUp="getmax();" onfocus="this.select();"></td>
</tr>
<tr>
<td style="text-align:center"><b>Cells</b></td>
<td><strong>:</strong>
<input name="CellsTotal" type="text" id="CellsTotal" onKeyUp="getmax();" onFocus="this.select();"></td>
</tr>
<tr>
<td style="text-align:center"><b>Max Cells</b> </td>
<td><strong>:</strong>
<input name="maxcells" type="text" id="maxcells" disabled="disabled" style="text-align:center"></td>
</tr>
</table>
<div id="Div">
<input type="submit" name="Generate" value="Generate">
<input type="reset" name="Reset" value="Clear Generate">
</div>
</form>
<script language="JavaScript" type="text/javascript">
<!--
function getmax() {
var R = parseInt(document.getElementById('RowsTotal').value);
var C = parseInt(document.getElementById('ColsTotal').value);
var X = parseInt(document.getElementById('CellsTotal').value);
var cellmax = document.getElementById('maxcells');
var total = 'N/A';
total = R * C;
cellmax.value = new String(total);
if (X > total)
{
alert('Total Cell Yang Anda Masukkan Terlalu Besar, Nilai Maksimum Cells = ' + total);
document.getElementById('CellsTotal').value = new String();
}
}
//-->
</script>
</body>
</html>
Untuk selanjutnya adalah source result dari generator tabel, simpan dengan .php, sebagai contoh table.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>RESULT TABLE GENERATE</title>
</head>
<body>
<div align="center">
<?php
$rows = 1;
$cols = 1;
$cells = 1;
?>
<?php $rows = (int) $_POST["RowsTotal"]; ?>
<?php $columns = (int) $_POST["ColsTotal"]; ?>
<?php $cells = (int) $_POST["CellsTotal"]; ?>
<h2>RESULT OF GENERATOR TABLE</h2>
<?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>
Berikut adalah hasil dari implementasi pengenerate-an tabel dari source code-source code diatas
Terimakasih kak, sangat membantu :-)
BalasHapus