Yapz....kalu sebelumnya kita udah men-duet-kan si Java dengan HTML, maka this week....kita bakal beranjak untuk mengenal dan mempelajari PHP sebagai partner HTML untuk membuat Table Generator. Tapi Java....teteup, setia menemani HTML disini (n_n).
PHP ato
Hypertext Preprocessor nih merupakan salah satu bahasa
web-scripting yang sangat powerful. Sejak pertama kali diperkenalkan, bahasa ini dimaksudkan buat menghasilkan halaman-halaman web yang dinamis. Sampe sekarang nih, PHP banyak banget digunakan dalam membuat aplikasi web—baik lokal maupun Internet—dinamis dan atraktif.
Nah....kalo pun ada yang binun terkait definisi Table Generator, atau sebenarnya Table Generator ini termasuk makanan jenis apa lagi,
Maka...marilah sama-sama kita simak liputan saya minggu ini, sodara-sodara.....(Ho..Ho..Ho...)
Pada jaman dahulu kala, jika sebelumnya (yang saya tau, maksudnya.. =p ) kita kudu mesti wajib menambahkan script lagi kalu mau menambahkan atau mengurangi baris or kolom dari tabel di HTML....maka, ilmu terbaru yang saya dapet setelah hasil bertapa kemaren... (he..he...nggak ding, bercanda) alias dari Pak Dosen, maksudnya...adalah ternyata eh ternyata, kita bisa menggunakan sebuah trik yang namanya "Generator Table With PHP". Pongggg!!!! maka semakin sadarlah saya kalau Tuhan itu Maha Kuasa (maksudnyaa?????). Ya begitulah kira2. Ha..Ha.... (Geje mode = ON)
Wokey, kembali ke jalan yang lurus.
Jadi, disini, tabel yang dibikin akan di-generate secara fleksibel. So, kita buat sebuah fungsi yang menerima argumen berupa jumlah sel plus jumlah kolomnya dulu. Sehingga jumlah sel tabel yang bakal dibentuk nanti adalah berdasarkan nilai jumlah sel dan jumlah kolom yang kita masukkan. Salah satu contoh sederhananya adalah sebagai berikut :
1. Langkah pertama, kita buat fungsi yang bakal menerima masukan argumennya terlebih dahulu. Script-nya kira2 seperti ini...
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
<head>
<center>
<title>Table Generator</title>
</head>
<center><font color='black' size=11>TABEL GENERATOR</font></a><br><br>
<p><body background=“ppt.jpg”>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
</head>
<body>
<form method=”post” action=”generator.php”>
<table width=”277″ border=”0″>
<tr>
<td width=”89″>Baris</td>
<td width=”172″><strong>: </strong><input name=”RowsTotal” type=”text” id=”RowsTotal” onKeyUp=”getmax();” onfocus=”this.select();”></td>
</tr>
<tr>
<td><label>Kolom</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(‘Jumlah cell yang Anda masukkan melebihi batas, Cell maksimal : ‘ + total);
document.getElementById(‘CellsTotal’).value = new String();
}
}
//––>
</script>
</body>
</html>
Simpan script tersebut pada aplikasi pengolah kata sederhana seperti Notepad atau (yang biasa saya pake--> terlebih karena gratis. He..He..) Notepad ++, lalu simpan dengan nama "fungsi.html".
2. Buat generator PHP-nya. Script-nya kaya toh dibawah ini...
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>GENERATOR</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
</head>
<body background=“ppt.jpg”>
<?php
$rows = 1;
$columns = 1;
$cells = 1;
?>
<?php $rows = (int) $_POST["RowsTotal"]; ?>
<?php $columns = (int) $_POST["ColumnsTotal"]; ?>
<?php $cells = (int) $_POST["CellsTotal"]; ?>
<center>
<p>
<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>”;
?>
<p><br/>
Baris : <?php echo $rows; ?><br />
Kolom : <?php echo $columns; ?><<br />
Cell yang Digunakan :<?php echo $cells; ><br />
</body>
</html>
Trus simpan ntuh script dengan nama "generator.php" --> Inga'... Inga'!!! ekstensinya .php, bukan .html
Jalankan fungsi. html pada Web server lokal. Nah, nanti kira2 tampilannya akan seperti ini...
Disini, kita bisa memasukkan jumlah baris dan kolom yang kita inginkan. Secara otomatis, field "Maks. Cells" akan terisi sesuai dengan jumlah cell maksimum yang ada, yaitu jumlah_baris x jumlah_kolom yang kita masukkan. Sementara, field "Cell Total" dapat kita isikan sesuai dengan jumlah cell yang kita butuhkan. Inga'...Inga'..!!! jumlah cell total yang kita masukkan haruslah kurang atau sama dengan jumlah cell maksimum dari tabel. Ibaratnya, tikus pan kalo mau bisa muat masuk lubang kucing (kalo tikusnya pengen bunuh diri, maksudnya). Nah...tapi kalo kucing mah, kan tak bise, tu....masuk lubangnya tikus (kecuali kalo pengen njebolin dinding, pasti. He..he...). Yah, kira-kira seperti itu deh sodara-sodara... =D
Untuk Source Code-nya, bisa antum donlot disini.
Yups...semoga postingan kali ini bermanfaat, yah.... (>_<)
Doakan dengan semakin sering memposting dan berbagi ilmu, saya jadi tambah pinter. He..He... (ngarep puol).
