PHP (PHP: Hypertext Preprocessor ) merupakan salah satu bahasa webscripting yang sangat powerful. Sejak pertama kali diperkenalkan, bahasa ini dimaksudkan untuk menghasilkan halaman-halaman web yang dinamis. Hingga saat ini, PHP banyak sekali digunakan dalam membuat aplikasi web baik lokal maupun Internet dinamis dan atraktif. Untuk materi mengenai PHP sendiri dapat didownload di internet dan sangat banyak, karena di sini tidak membahas terlalu dalam. Hanya sebuah contoh. :-)
Dalam pembuatan tabel ini, kita men-generate sel dan kolom secara fleksibel atau sesuai dengan keinginan kita. Kita mengkombinasikan antara PHP
programming dengan
javascript, yaitu dengan metode link.
Untuk lebih singkatnya, mari kita liat kode porgram dari program tabel ini.
Kode program berikut disimpan dengan nama
Tabel.php.
<!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["JumlahRow"]; ?>
<?php $columns = (int) $_POST["JumlahColum"]; ?>
<?php $cells = (int) $_POST["JumlahCell"]; ?>
<strong>Kamu Memilih</strong> <?php echo $rows; ?> <em>rows,</em><br />
<strong>Kamu Memilih</strong> <?php echo $columns; ?> <em>columns,</em><br />
<strong>Dan Anda Membutuhkan</strong> <?php echo $cells; ?> <em>cells,</em><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>";
?>
</div>
</body>
</html>
Sedangkan kode html dapat dilihat seperti di bawah ini. Simpan dengan nama
Tabel.html.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Generate Table</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:178px;
height:24px;
z-index:1;
left: 284px;
top: 189px;
}
.style1 {
color: #0000CC;
font-weight: bold;
}
-->
</style>
</head>
<script language="JavaScript" type="text/javascript">
<!--
function getmax() {
var R = parseInt(document.getElementById('JumlahRow').value);
var C = parseInt(document.getElementById('JumlahColum').value);
var X = parseInt(document.getElementById('JumlahCell').value);
var cellmax = document.getElementById('maxcells');
var total = 'N/A';
total = R * C;
cellmax.value = new String(total);
if (X > total)
{
alert('Cell Total Yang Anda Masukkan Terlalu Besar, Nilai Maksimum Cells = ' + total);
document.getElementById('CellsTotal').value = new String();
}
}
//-->
</script>
<body>
<form method="post" action="tabel.php">
<h3 align="center" class="style1">Tabel Fleksibel Dengan Generate Table</h3>
<div align="center">
<table width="327" border="0" bgcolor="#FFFFFF">
<tr bgcolor="#8282c7">
<td width="121" style="text-align:center">Rows</td>
<td width="196"><strong>= </strong>
<input name="JumlahRow" type="text" id="JumlahRow" onKeyUp="getmax();" onfocus="this.select();"></td>
</tr>
<tr bgcolor="#e5c9d3">
<td style="text-align:center"><label>Columns</label></td>
<td><strong>= </strong>
<input name="JumlahColum" type="text" id="JumlahColum" onKeyUp="getmax();" onfocus="this.select();"></td>
</tr>
<tr bgcolor="#8282c7">
<td style="text-align:center">Cell Total </td>
<td><strong>= </strong>
<input name="JumlahCell" type="text" id="JumlahCell" onKeyUp="getmax();" onFocus="this.select();"></td>
</tr>
<tr bgcolor="#e5c9d3">
<td style="text-align:center">Max Cells </td>
<td><strong>= </strong>
<input name="maxcells" type="text" id="maxcells" disabled="disabled" style="text-align:center"></td>
</tr>
</table>
</div>
<div id="apDiv1">
<input type="submit" name="Generate" value="G e n e r a t e"><input type="reset" name="Reset" value="R e s e t">
</div>
</form>
</body>
</html>
Cara menjalankannya tinggal klik
Tabel.htmlnya. Sedangkan tampilan gambar dari contoh program di atas adalah sebagai berikut:
Dalam gambar di atas, kita harus memberikan nilai ke dalamnya. Rows untuk menentukan jumlah baris, coloum untuk menentukan jumlah kolom, dan cell total untuk menentukan jumlah sel yang kita inginkan. Tetapi, kita tidak boleh meminta lebih dari max.cell.
Hasilnya jika kita memberikan nilai:
Rows = 3,
Coloumn = 4,
Cell Total = 10
Mungkin contoh di atas hanya sederhana karena saya juga masih belajar. :-)
Sekian dulu, c u next time..
