Mau kaos (T-shirt) Wordpress keren? (Selengkapnya)
Dapatkan Script SMS Gateway PHP + MySQL

Seperti: software pengirim SMS massal, SMS survei, SMS polling, SMS quick count, SMS dakwah, Web2SMS dan masih banyak lagi... semuanya berbasis PHP & MySQL
[Info Lengkap...]



Membuat Form Dinamis dan Pemrosesannya (Sebuah Studi Kasus)


April 3rd, 2009 | by rosihanari | Cetak Artikel Ini 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


Share this article on:

Kata kunci: dinamis - form - PHP -


Ada 20 komentar dalam artikel ini.

  1. ADi says:

    makasih banget code2nya ?

    tugas skul saya jadi selesai dan sangat berguna?

    THANK

  2. rofi aprian says:

    makasih banyak ya mas,,atas semua artikelnya..sumpah berguna banget buat saya yang pemula…artikel php nya ditambah yaaa…terutama trik2nya..

  3. Analo says:

    Salut buat mas rosihan!
    Saya mau nanya tentang php dan mysql. Saya punya 3 tabel (katakanlah mahasiswa, matakuliah, dan dosen), bagaimana cara menggabungkan ketiga tabel tersebut sehingga kita mampu melihat matakuliah yang diampu dosen dan yang diambil oleh siswa? apakah perlu dibuat tabel baru untuk menggabungkan ke-3 table tsb? Terima kasih.

    Postingan terakhir si Analo di blognya: Manajemen Perpustakaan Hibrida

  4. rosihanari says:

    to analo: iya mas, buat satu tabel lagi yaitu untuk menyimpan data pengambilan matakuliah si mahasiswa. Dalam tabel tsb paling tidak terdapat field kode matakuliah dan nim mahasiswa yang mengambilnya. Untuk tabel matakuliah, hendaknya di dalamnya terdapat field kode dosen yang menunjukkan pengampunya.

  5. Assalaamu’alaykum..
    Pak Ari, saya mau tanya, bagaimana memasang form kontak via email di wordpress ? Saya bingung, saya include”formkontak.php” di sider bar wordpress, kenapa pas disubmit (action=”contact.php”) muncul Error 404, ” Halaman tidak ditemukan” Padahal script contact.php saya sudah simpan di direktori ?? Apakah ada masalah dengan permalink saya (/%year%/%month%/%post% ) ?? Padahal saya sudah buat table nya. Mohon bantuannya… Terima kasih..

    Postingan terakhir si Imam Zatnika W di blognya: TEKNIK SEO DYNAMIC TITLE

  6. rosihanari says:

    to imam zatnika: scriptnya anda taruh di direktori mana dalam wordpress?

  7. Nico says:

    Mas, mau nanya nich. gimana caranya menambah textbox otomatis sesuai dengan masukan yang kita inginkan.
    Ex: ada textbox inputan dan tombol. jika pada textbox inputan itu kita ketik 3 lalu tekan tombolnya, maka akan muncul textbox dibawahnya sebanyak 3. Jika 4, maka muncul 4, dst. Pokonya sesuai dengan jumlah angka yang kita ketikkan pada textbox inputan.
    bantu dong mas… thanks banget.

  8. rosihanari says:

    to nico: kan sudah saya jelaskan di artikel di atas. Silakan Anda pelajari artikel di atas dan coba dulu scriptnya.

  9. marzuki says:

    salut buanget untuk pak Ari…..triknya hebat-hebat langsung studi kasus..semoga kebaikan bapak dibalas oleh Allah Ta’ala….terus maju pak untuk kemajuan anak bangsa….

  10. rosihanari says:

    to marzuki: amin yaa…. robbal ‘alamin. Makasih mas atas doanya, semoga tetap istiqomah selalu.



Tolong beri komentar donk!

Komentar Anda akan berguna untuk kemajuan blog ini.


Mohon maaf, komentar yang menggunakan email palsu atau komentar bernada negatif atau cemooh secara otomatis akan terhapus karena dianggap spam dan tidak akan tampil dalam daftar komentar.

Dimohon jangan pula memasukkan code program dalam bentuk apapun ke dalam komentar karena akan dianggap spam.

*
Untuk membuktikan bahwa komentar Anda bukan spam, tulis kata yang muncul dalam gambar di bawah ini. Bila Anda tidak bisa membaca kata dalam gambar, klik pada gambar tersebut untuk mendengarkan suara dari kata tersebut
Click to hear an audio file of the anti-spam word