Just another WordPress.com site

tabel-fleksibel

Kali ini saya akan mencoba untuk sharing tentang cara membuat tabel fleksibel dengan PHP. DI sini akan disiapkan kode html dan php. Kode html untuk mengenerate tabel yang digunakan yaitu berapa jumlah kolomnya,jumlah barisnya, dan jumlah total cellnya. Dan kode php sebagai hasil dari generate tabel yang dilakukan pada kode html.

langkah yang pertama adalah menuliskan sourcecode berikut pada script html:

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Studi Kasus 1</title>
</head>
<body>
<form method=”post” action=”fleksibel.php”>
<p><strong>TABEL FLEKSIBEL</strong></p>
<table width=”277″ border=”0″>
<tr>
<td width=”89″>Rows</td>
<td width=”172″><strong>: </strong><input name=”RowsTotal” type=”text” id=”RowsTotal” onKeyUp=”getmax();” onfocus=”this.select();”></td>
</tr>
<tr>
<td><label>Columns</label></td>
<td><strong>: </strong><input name=”ColumnsTotal” type=”text” id=”ColumnsTotal” onKeyUp=”getmax();” onfocus=”this.select();”></td>
</tr>
<tr>
<td>Cell Total </td>
<td><strong>: </strong><input name=”CellsTotal” type=”text” id=”CellsTotal” onKeyUp=”getmax();” onFocus=”this.select();”></td>
</tr>
<tr>
<td>Max Cells </td>
<td><strong>: </strong><input name=”maxcells” type=”text” id=”maxcells” readonly=”readonly” style=”background-color:#999999″>
</td>
</tr>
<tr>
<td>
<div align=”center”>
<br />
<input type=”reset” name=”Reset” value=”Reset”>
</div></td>
<td>
<div align=”right”>
<br />
<input type=”submit” name=”Generate” value=”Generate”>
</div></td>
</tr>
</table>
</form> 

<script language=”JavaScript” type=”text/javascript”>
<!–
function getmax() {
var R = parseInt(document.getElementById(‘RowsTotal’).value);
var C = parseInt(document.getElementById(‘ColumnsTotal’).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(‘Limit Exceed, max cells is ‘ + total);
document.getElementById(‘CellsTotal’).value = new String();
}
}
//–>
</script>

selanjutnya ketikkan sourcecode berikut pada script php, dan beri nama file dengan “fleksibel.php”

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Studi Kasus 1</title>
</head>
<body>
<?php
$rows = 1;
$columns = 1;
$cells = 1;
?> 

<?php $rows = (int) $_POST[“RowsTotal”]; ?>
<?php $columns = (int) $_POST[“ColumnsTotal”]; ?>
<?php $cells = (int) $_POST[“CellsTotal”]; ?>

Kamu memilih : <?php echo $rows; ?> rows<br />
Kamu memilih : <?php echo $columns; ?> columns<br />
Dan Kamu membutuhkan :<?php echo $cells; ?> cells<br />
<br /><br />
<?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>”;
?>
</body>

berikut adalah hasil tampilan saat menjalankan program:

Isi pada form yang sudah disediakan, dan lihat hasilnya…paling tidak hasilnya akan menjadi seperti ini:

Selamat mencoba..🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Tag Cloud

%d bloggers like this: