Anda di halaman 1dari 5

Membuat Form Dinamis dan Pemrosesannya (Sebuah Studi Kasus)

April 3rd, 2009 | by rosihanari | Cetak Artikel

Print

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 view sourceprint?
1.<h1>Cari Rata-rata Bilangan</h1> 2. 3.<form method="post" action="form2.php"> 4.Masukkan Banyaknya Bilangan <input type="text" name="n" /> 5.<input type="submit" name="submit" value="Submit" /> 6.</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 view sourceprint?
01.<h1>Cari Rata-rata Bilangan</h1> 02. 03.<?php 04. 05.$n = $_POST['n']; // membaca n dari form sebelumnya 06. 07.echo "<form method='post' action='proses.php'>"; 08.echo "<table>"; 09.for ($i = 0; $i <= $n-1; $i++) 10.{ 11.echo "<tr><td>Bil ke-".($i+1)."</td><td><input type='text' name='data".$i."' /></td></tr>"; 12.} 13.echo "<tr><td></td><td><input type='submit' name='submit' value='Submit' /></td></tr>"; 14.echo "</table>"; 15.echo "</form>"; 16. 17.?>

Hasil script di atas akan menghasilkan tag HTML seperti di bawah ini (jika n = 4) view sourceprint?
01.<h1>Cari Rata-rata Bilangan</h1> 02. 03.<form method='post' action='proses.php'> 04.<table> 05.<tr> 06.<td>Bil ke-1</td><td><input type='text' name='data0' /></td> 07.</tr> 08.<tr> 09.<td>Bil ke-2</td><td><input type='text' name='data1' /></td> 10.</tr> 11.<tr> 12.<td>Bil ke-3</td><td><input type='text' name='data2' /></td> 13.</tr> 14.<tr> 15.<td>Bil ke-4</td><td><input type='text' name='data3' /></td> 16.</tr> 17.<tr> 18.<td></td><td><input type='submit' name='submit' value='Submit' /></td> 19.</tr> 20.</table> 21.</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 view sourceprint?
1.for ($i=0; $i <= jumlahkomponen 1; $i++) 2.{ 3.$bilangan[$i] = $_POST['data'.$i]; 4.}

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 view sourceprint?
01.<h1>Cari Rata-rata Bilangan</h1> 02. 03.<?php 04.$n = $_POST['n']; 05. 06.echo "<form method='post' action='proses.php'>"; 07.echo "<table>"; 08.for ($i = 0; $i <= $n-1; $i++) 09.{ 10.echo "<tr><td>Bil ke-".($i+1)."</td><td><input type='text' name='data".$i."' /></td></tr>";

11.} 12.echo "<tr><td></td><td><input type='submit' name='submit' value='Submit' /></td></tr>"; 13.echo "<tr><td></td><td><input type='hidden' name='n' value='".$n."' /></td></tr>"; 14.echo "</table>"; 15.echo "</form>"; 16. 17.?>

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 view sourceprint?
01.<h1>Cari Rata-rata Bilangan</h1> 02. 03.<?php 04. 05.// membaca jumlah komponen dari hidden textbox 06. 07.$n = $_POST['n']; 08. 09.// membaca value dari masing-masing komponen textbox 10. 11.for ($i=0; $i <= $n - 1; $i++) 12.{ 13.$bilangan[$i] = $_POST['data'.$i]; 14.} 15. 16.// menjumlahkan nilai semua bilangan 17. 18.$jumlah = 0; 19. 20.for ($i=0; $i <= $n - 1; $i++) 21.{ 22.$jumlah += $bilangan[$i]; 23.} 24. 25.// hitung rata-rata 26. 27.$rataRata = $jumlah/$n; 28. 29.echo "Rata-ratanya adalah : ".$rataRata;

30. 31.?>

Atau cara lain Anda bisa menggabung proses menjumlahkan nilai semua bilangan bersama proses membaca bilangan dari form menjadi satu bagian proses.php view sourceprint?
01.<h1>Cari Rata-rata Bilangan</h1> 02. 03.<?php 04. 05.// membaca jumlah komponen dari hidden textbox 06. 07.$n = $_POST['n']; 08. 09.// membaca value dari masing-masing komponen textbox dan menjumlahkannya 10. 11.$jumlah = 0; 12. 13.for ($i=0; $i <= $n - 1; $i++) 14.{ 15.$bilangan[$i] = $_POST['data'.$i]; 16.$jumlah += $bilangan[$i]; 17.} 18. 19.// hitung rata-rata 20. 21.$rataRata = $jumlah/$n; 22. 23.echo "Rata-ratanya adalah : ".$rataRata; 24. 25.?>

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