Rosihan Ari`s Blog

Membuat Form Dinamis dan Pemrosesannya (Sebuah Studi Kasus)

April 3rd, 2009 | by rosihanari |  Cetak Artikel Ini

Sering kita jumpai form di aplikasi web yang berbentuk statis. Maksud statis di sini adalah jumlah komponen inputnya, baik itu textbox, radiobutton dan lainnya adalah tetap. Jika demikian halnya, maka untuk membuat script pemrosesan formnya tidak ada masalah atau cenderung mudah, terutama dalam membaca value yang diinputkan melalui komponen-komponen yang tersedia.

Namun… bagaimana bila jumlah komponen dalam formnya ini berubah-ubah sesuai yang diinginkan user, atau dalam hal ini saya istilahkan ‘form dinamis’. Bagaimana cara membuat komponen-komponennya dan bagaimana cara membaca value yang diinputkan melalui form dinamis ini? Nah.. hal inilah yang topik yang akan dibahas dalam artikel ini. Artikel ini merupakan salah satu topik yang dibahas dalam modul dalam Kursus Online Bersama Rosihan Ari dan salah satu studi kasus yang diberikan di situ.

OK… untuk memudahkan pembahasan mari kita simak studi kasus berikut ini, yang melibatkan form dinamis.

Studi kasus yang diberikan adalah bagaimana membuat script untuk menghitung rata-rata n buah bilangan yang diinputkan melalui form. Dalam hal ini user pertama kali diminta memasukkan nilai n (banyaknya bilangan yang ingin dimasukkan) terlebih dahulu. Selanjutnya akan muncul sebuah form yang di dalamnya terdapat komponen textbox sejumlah n buah. Setelah user memasukkan bilangan ke dalam komponen-komponen tersebut, selanjutnya akan tampil output berupa rata-rata bilangannya.

Nah… untuk langkah pertama, kita coba buat form untuk memasukkan banyaknya bilangan (n) terlebih dahulu

form1.htm

<h1>Cari Rata-rata Bilangan</h1>
 
<form method="post" action="form2.php">
Masukkan Banyaknya Bilangan <input type="text" name="n" />
<input type="submit" name="submit" value="Submit" />
</form>

Saya kira untuk membuat form di atas mudah bukan? Selanjutnya kita buat script yang bisa mengenerate form dengan n buat textbox untuk memasukkan bilangan-bilangannya.

Karena sesuai skenario bahwa jumlah textboxnya sejumlah banyaknya bilangan yang dimasukkan pada form pertama, maka untuk mudahnya kita buat melalui perulangan FOR dengan jumlah perulangannya n kali.

form2.php

<h1>Cari Rata-rata Bilangan</h1>
 
<?php
 
$n = $_POST['n']; // membaca n dari form sebelumnya
 
echo "<form method='post' action='proses.php'>";
echo "<table>";
for ($i = 0; $i <= $n-1; $i++)
{
     echo "<tr><td>Bil ke-".($i+1)."</td><td><input type='text' name='data".$i."' /></td></tr>"; 
}
echo "<tr><td></td><td><input type='submit' name='submit' value='Submit' /></td></tr>";
echo "</table>";
echo "</form>";
 
?>

Hasil script di atas akan menghasilkan tag HTML seperti di bawah ini (jika n = 4)

<h1>Cari Rata-rata Bilangan</h1>
 
<form method='post' action='proses.php'>
<table>
<tr>
    <td>Bil ke-1</td><td><input type='text' name='data0' /></td>
</tr>
<tr>
    <td>Bil ke-2</td><td><input type='text' name='data1' /></td>
</tr>
<tr>
    <td>Bil ke-3</td><td><input type='text' name='data2' /></td>
</tr>
<tr>
    <td>Bil ke-4</td><td><input type='text' name='data3' /></td>
</tr>
<tr>
    <td></td><td><input type='submit' name='submit' value='Submit' /></td>
</tr>
</table>
</form>

Perhatikan tag HTML di atas! Untuk setiap komponen textbox yang dihasilkan tampak pada bagian atribut name='...' secara otomatis akan membentuk nama: ‘data0′, ‘data1′, dst. Mengapa dimulai dari ‘data0′? kok tidak mulai dari ‘data1′? ya… ini masalah kesukaan saja. Kalau saya biasa mulai dari ke-0. Kalau Anda mulai dari ‘data1′ ya gpp

Selanjutnya kita buat script untuk memprosesnya. Nah… pada bagian ini, mungkin yang sulit adalah bagaimana cara membaca value yang diisikan pada setiap komponen textbox mengingat komponen ini dihasilkan secara dinamis (dengan jumlah textbox yang berubah-ubah).

OK… trik untuk membaca value yang berasal dari komponen yang dinamis seperti ini adalah: kita memanfaatkan perulangan saja

for ($i=0; $i <= jumlahkomponen – 1; $i++)
{
   $bilangan[$i] = $_POST['data'.$i];
}

Perhatikan! Mengapa pada bagian $_POST[] berbentuk $_POST['data'.$i] ?

Ya… karena nama komponen dari form kan bentuknya name='data0', name='data1', name='data2', dst. Maka dalam membaca valuenya harusnya juga menggunakan $_POST['data0'], $_POST['data1'], dst. Nah… supaya mudah, maka kita gunakan $_POST['data'.$i] dengan $i nya diperoleh dari FOR. Simpel bukan? Dengan alasan inilah mengapa saya suka memberi nama komponen dalam formnya mulai dari 0 terlebih dahulu, seperti name='data0', name='data1', dst…

Kemudian… muncul masalah lagi yang lain. Untuk FOR nya harusnya $i bergerak dari 0, 1, 2, sampai dengan ‘jumlah komponen’ dikurangi 1. Nah.. yang menjadi masalah, bagaimana mendapatkan ‘jumlah komponen’ pada script ini? Padahal jumlah komponen ini berada pada form2.php. Atau dengan kata lain, bagaimana caranya jumlah komponen yang berada pada form2.php ini juga bisa dikenali di script untuk memproses inputnya ini? Ya… solusinya mudah, kita tinggal buat saja komponen ‘hidden value’ yang berisi jumlah komponennya.

form2.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<h1>Cari Rata-rata Bilangan</h1>
 
<?php
$n = $_POST['n'];
 
echo "<form method='post' action='proses.php'>";
echo "<table>";
for ($i = 0; $i <= $n-1; $i++)
{
      echo "<tr><td>Bil ke-".($i+1)."</td><td><input type='text' name='data".$i."' /></td></tr>"; 
}
echo "<tr><td></td><td><input type='submit' name='submit' value='Submit' /></td></tr>";
echo "<tr><td></td><td><input type='hidden' name='n' value='".$n."' /></td></tr>";
echo "</table>";
echo "</form>";
 
?>

Perhatikan penambahan kode pada baris ke-13 di atas.

Ingat… komponen hidden value ini harus terletak dalam <form></form>. Sesuai namanya, maka komponen ini tersembunyi (tidak tampak dalam browser). Namun begitu user mengklik submit, maka value ini ikut tersubmit untuk diproses pada script pemrosesnya.

OK… masalah teratasi, dan sekarang kita bisa buat scriptnya

proses.php

<h1>Cari Rata-rata Bilangan</h1>
 
<?php
 
// membaca jumlah komponen dari hidden textbox
 
$n = $_POST['n'];    
 
// membaca value dari masing-masing komponen textbox 
 
for ($i=0; $i <= $n - 1; $i++)
{
   $bilangan[$i] = $_POST['data'.$i];
}
 
// menjumlahkan nilai semua bilangan
 
$jumlah = 0;
 
for ($i=0; $i <= $n - 1; $i++)
{
   $jumlah += $bilangan[$i];
}
 
// hitung rata-rata
 
$rataRata = $jumlah/$n;
 
echo  "Rata-ratanya adalah : ".$rataRata;
 
?>

Atau cara lain Anda bisa menggabung proses menjumlahkan nilai semua bilangan bersama proses membaca bilangan dari form menjadi satu bagian

proses.php

<h1>Cari Rata-rata Bilangan</h1>
 
<?php
 
// membaca jumlah komponen dari hidden textbox
 
$n = $_POST['n'];    
 
// membaca value dari masing-masing komponen textbox dan menjumlahkannya 
 
$jumlah = 0;
 
for ($i=0; $i <= $n - 1; $i++)
{
   $bilangan[$i] = $_POST['data'.$i];
   $jumlah += $bilangan[$i];
}
 
// hitung rata-rata
 
$rataRata = $jumlah/$n;
 
echo  "Rata-ratanya adalah : ".$rataRata;
 
?>

Nah… mudah bukan membuat form dinamis dan pemrosesannya? Anda akan mendapatkan trik-trik yang lain seputar PHP programming seperti di atas bila bergabung dalam kursus online bersama saya

Beberapa artikel terkait

• Membuat Checkbox Dinamis dan Pemrosesannya
• Alternatif Cara Membuat Form Dinamis Untuk Submit Data Secara Simultan
• Konsep Statement SWITCH dalam PHP dan Studi Kasus
• Alternatif Script Untuk Memproses Input Data Form Dinamis
• Script PHP Updating Data Secara Simultan (Studi Kasus Update Nilai Kuliah Mahasiswa)
• Ide Membuat Script Grafik PHP Untuk Menampilkan Indeks Prestasi Mahasiswa (Studi Kasus)
• Beberapa Tombol Submit dalam Satu Form
• Membuat Pilihan Combobox Dinamis Tanpa AJAX
• Membuat Kode Verifikasi Anti Spam Pada Form dengan JpGraph
• Pemrosesan Form dengan Komponen Combo Box