Alles über Informatik-Ingenieurwesen

Minggu, 24 Oktober 2010

Pembuatan table dengan kombinasi PHP dengan javascript + HTML


PHP merupakan salah satu bahasa webscripting yang sangat simple. Merupakan suatu web yang dinamis. Sampai saat ini penggunaan /pembuatan wed dengan PHP masih di gunakan. Dalah satu contoh membuat table yang fleksibel bisa dibuat sesuai kebutuhan lewat kombinasi PHP dan HTML, kita dapat mengkombinasikan antara PHP dengan javascripct dengan metode link.
Untuk lebih singkatnya, mari kita liat kode porgram dari program tabel ini.
Simpan file dengan nama table.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="#0000ff">
<td width="121" style="text-align:center">baris</td>
<td width="196"><strong>= </strong>
<input name="JumlahRow" type="text" id="JumlahRow" onKeyUp="getmax();" onfocus="this.select();"></td>
</tr>
<tr bgcolor="#00ff00">
<td style="text-align:center"><label>kolom</label></td>
<td><strong>= </strong>
<input name="JumlahColum" type="text" id="JumlahColum" onKeyUp="getmax();" onfocus="this.select();"></td>
</tr>
<tr bgcolor="#0000ff">
<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="#00ff00">
<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>

Simpan file PHP nya dengan nama table.php juga:

<!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>Anda Memilih</strong> <?php echo $columns; ?> <em>kolom,</em><br />
<strong>Anda Memilih</strong> <?php echo $rows; ?> <em>baris,</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>
Demikian hasilnya:


setelah di generate maka hasilnya:
 setelah di edit generate nya maka hasilnya:

--SELAMAT MENCOBA--

1 komentar: