Cara mudah membuat generate table fleksibel dengan php
Sebelum membuat table fleksibel dengan PHP ada baiknya kita setidaknya sudah memahami basic tentang membuat table dengan HTML agar lebih mudah dalam melakukan penerapan antara html dengan php.
Kenapa harus juga memahami tentang html padahal kita ingin membuat table dengan PHP? Keduanya itu saling membutuhkan jika HTML berfokus di sebuah tampilan maka PHP bertugas di bagian server side karena php diproses dalam komputer server.
Di bawah ini saya akan mencoba membagikan 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. Sebagai contoh, hasil program dengan
argumen 36 (sel) dan 6 (kolom) diperlihatkan seperti
Script php generate.php
Script kedua adalah table.php
*Catatan untuk menjalankan atau membuat generate table secara fleksibel dengan php harus menjalankan melalui table.php bukan dari generate.php
Selamat mencoba dan semoga bermanfaat buat para pembaca setia jowo koding
Kenapa harus juga memahami tentang html padahal kita ingin membuat table dengan PHP? Keduanya itu saling membutuhkan jika HTML berfokus di sebuah tampilan maka PHP bertugas di bagian server side karena php diproses dalam komputer server.
Di bawah ini saya akan mencoba membagikan 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. Sebagai contoh, hasil program dengan
argumen 36 (sel) dan 6 (kolom) diperlihatkan seperti
 |
| Gambar 1 |
| Pada Gambar 1 tersebut saat di generate akan memunculkan hasil seperti pada gambar 1.1 |
 |
| Gambar 1.1 Program sederhana pada gambar 1.1 dibuat dengan menggunakan script php dibawah ini |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hasil Generate</title>
<style>
.footer{
width: 100%;
height: 60px;
text-align:center;
line-height: 30px;
background: #333;
color: #fff;
position: absolute;
bottom: 0px;
}
</style>
</head>
<body>
<div align="center">
<?php
if (isset($_POST['JumlahRow']) AND isset($_POST['JumlahColum']) AND isset($_POST['JumlahCell']))
{
$rows=(int) $_POST['JumlahRow'];
$columns=(int) $_POST['JumlahColum'];
$cells=(int) $_POST['JumlahCell'];
}
else
{
die("<h3>Maaf, anda harus mengakses halaman ini dari table.php</h1>");
}
if(empty($rows))
{
die("Maaf, anda harus mengisi rows");
}
?>
<br>
<strong>Kamu Memilih</strong> <?php echo $rows; ?> <em>baris,</em><br />
<strong>Kamu Memilih</strong> <?php echo $columns; ?> <em>kolom,</em><br />
<strong>Dan Anda Membutuhkan</strong> <?php echo $cells; ?> <em>sel,</em><br />
<br />
<br />
<?php
$width = $columns * 75;
echo "<table width=".$width." border=1>";
$baris = 0;
$sel = 1;
while ($baris < $rows && $sel <= $cells)
{
echo "<tr>";
$cl = 0;
while ($cl < $columns)
{
if ($sel <= $cells)
{
echo "<td><div align=center>".$sel."</div></td>";
$sel++;
}
$cl++;
}
echo "</tr>";
$baris++;
}
echo "</table>";
?>
</div>
<div class="footer">
<p>©Jowo Koding</p>
</div>
</body>
</html>
Script kedua adalah table.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Table</title>
<style type="text/css">
/*css script*/
h3 {
font-weight: bold;
text-align:center;
}
table{
background-color:#C0C0C0;
}
td{
text-align:center;
}
</style>
</head>
<body>
<form method="post" action="generate.php">
<h3>Generate Tabel Fleksibel</h3>
<div align="center">
<table>
<tr>
<td>Rows</td>
<td>
<input name="JumlahRow" type="text" id="JumlahRow" onKeyUp="getmax();" onfocus="this.select();"/>
</td>
</tr>
<tr>
<td><label>Columns</label></td>
<td>
<input name="JumlahColum" type="text" id="JumlahColum" onKeyUp="getmax();" onfocus="this.select();"/>
</td>
</tr>
<tr>
<td>Cell Total </td>
<td>
<input name="JumlahCell" type="text" id="JumlahCell" onKeyUp="getmax();" onFocus="this.select();"/>
</td>
</tr>
<tr>
<td>Max Cells </td>
<td>
<input name="maxcells" type="text" id="maxcells" readonly="readonly" style="text-align:center"/>
</td>
</tr>
<tr>
<td><input type="submit" name="Generate" value="Generate"/></td>
<td><input type="reset" name="Reset" value="Reset"/></td>
</tr>
</table>
</div>
</form>
<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)
{
/*peringatan jika nilai yang dimasukan lebih besar dari total cells*/
alert('Cell Total Yang Anda Masukkan Terlalu Besar, Nilai Maksimum Cells = ' + total);
document.getElementById('CellsTotal').value = new String();
}
}
</script>
</body>
</html>
*Catatan untuk menjalankan atau membuat generate table secara fleksibel dengan php harus menjalankan melalui table.php bukan dari generate.php
Selamat mencoba dan semoga bermanfaat buat para pembaca setia jowo koding
Seorang pemula yang masih awam dengan dunia teknologi yang mencoba berbagi tutorial dan pengalaman
Belum ada Komentar untuk "Cara mudah membuat generate table fleksibel dengan php"
Posting Komentar