Tuesday, March 16, 2010

Membuat Tabel Fleksibel Dengan PHP

Author: dwipriyatmoko | Posted at: 8:47:00 PM | Filed Under: , , , , |
Pembuatan tabel fleksibel menggunakan Pemrograman PHP sangatlah penting, kita hanya perlu menggenerate row, coloum, maupun cell yang kita inginkan. berikut sekilas penjelasan tentang 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.

Berikut saya akan membahas tentang bagai mana kita membuat 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 12 (sel) dan 3 (kolom) diperlihatkan seperti pada gambar 1. mod4tgs2 :



Pada Gambar Tersebut Setelah Di Klik Generate Untuk Menghasilkan Tabel yang dinginkan sehingga dapat diperoleh hasil seperti pada gambar 2. mod4tgs2 :


Program sederhana tersebut diperoleh dari code berikut :

Mau Cari Uang Sendiri??? Mau Jajan Tanpa Minta Orang Tua??? click disini
Atau click banner ini...

 

>> Code berikut merupakan code PHP (tgsmod5.php), yang codenya tertulis sebagai berikut :

<!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>

>> Dan dilanjutkan denga code HTML untuk kelanjutan program diatas, sebagai berikut :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Generate Table by_dwipriyatmoko</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>
<body>
<form method="post" action="tgsmod5.php">
  <h3 align="center" class="style1">__Tabel Fleksibel Dengan Generate Table__</h3>
  <div align="center">
    <table width="327" border="0" bgcolor="#FFFFFF">
      <tr bgcolor="#FFFFCC">
        <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="#CCFFCC">
        <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="#FFFFCC">
        <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="#CCFFCC">
        <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>

>> Dan ditambahkan untuk code javascript untuk program tersebut (apa itu javascript?? click here), sebagai berikut :

<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>


____Demikian penjabaran dari program sederhana diatas...jika ada kesalahan atau apa gitu, mari kita sharing...oke mamen...____

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
 

Hyato_Mahasiswa Malang