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
Cari Rata-rata Bilangan
";
echo "
| Bil ke-".($i+1)." | |
<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
Anda ingin mendownload beberapa tool programming 100% gratis?
Silakan download di FREE PROGRAMMING TOOLS.
atau ingin berdonasi untuk pengembangan blog ini cukup dengan $1 via Paypal?
Beberapa artikel terkait
- Membuat Checkbox Dinamis dan Pemrosesannya
- Script PHP Updating Data Secara Simultan (Studi Kasus Update Nilai Kuliah Mahasiswa)
- Konsep Statement SWITCH dalam PHP dan Studi Kasus
- Membuat Web Service Sederhana (Studi Kasus Proses Login)
- Ide Membuat Script Grafik PHP Untuk Menampilkan Indeks Prestasi Mahasiswa (Studi Kasus)
- Alternatif Cara Membuat Form Dinamis Untuk Submit Data Secara Simultan
- Alternatif Script Untuk Memproses Input Data Form Dinamis
- Beberapa Tombol Submit dalam Satu Form
- Pemrosesan Form dengan Komponen Combo Box
- Tentang Letak Script Pengolah Form
Share this article on:
Kata kunci: dinamis - form - PHP -





makasih banget code2nya ?
tugas skul saya jadi selesai dan sangat berguna?
THANK
makasih banyak ya mas,,atas semua artikelnya..sumpah berguna banget buat saya yang pemula…artikel php nya ditambah yaaa…terutama trik2nya..
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
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.
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
to imam zatnika: scriptnya anda taruh di direktori mana dalam wordpress?
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.
to nico: kan sudah saya jelaskan di artikel di atas. Silakan Anda pelajari artikel di atas dan coba dulu scriptnya.
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….
to marzuki: amin yaa…. robbal ‘alamin. Makasih mas atas doanya, semoga tetap istiqomah selalu.
Assalaamu’alaykum..
Pak Ari, script php nya saya taruh di direktori themes/arthemia/. Emang seharusnya ditaruh di mana ya pak biar bisa diakses langsung dari browser?
Wassalam..
to imam zatnika: mm… sepertinya sih juga diupload ke folder theme yang digunakan. masih tetap gak bisa ya?
Assalaamu’alaykum..
Iya tuh Pak Ari.. Jadi saya pindah scripts ke Open Source macem Endonesia.84. Alhamdulillah ada kemudahan dengan scripts itu meskipun belum sempurna.
Tapi karena itulah ‘dia’ Open Source’
Saya mau getol kunjungin blog Pak Ari ajah. Sekalian belajar..
Terima Kasih Banyak Pak Ari..
Wassalaamu’alaykum..
terimakasih banget infonya;;;
kalau plugin instantnya?
@azzaam: belum tahu mas
thanx iia coding’a,,
kebetulan w lagi da tugas cari nilai rata2 pke PHP…
pak ari saya mau tanya lagi,,,
jika saya memilih salah satu data dari combo box misal : nama = budi, maka secara otomatis di list textbox bawahnya muncul data tentang budi seperti alamat,jenis kelamin,pekerjaan dan lain-lain.
bagaimana cara menampilkan data tersebut secara otomatis?
aslkm bos, mw tnya ne.. gmn cara ny bs memecah data dr data base mysql, gni aq kn slsikn sstem utk KP.. jdulny sstem pendaftaran mhs online..
jd d form perndaftaran, pendaftar blh memilih 2 jrusan, nah tabel ny kn cm 1 t utk inputan 2 jrusan td (nama_jurusan),,
ktika d cetak, data yg dr data base it lgsg tampil 2-2ny, msal,
pilihan 1 : akper, plihan 2: akbid..
yang tampil malah utk cetak, pilihan 1 : akper-akbid, pilihan 2: akper-akbid
jd pertanyaannya, gmn caranya agar d pencetakan yg tampil it,
pilihan 1: akper
pilihan 2: akbid
mksih atas info-nya..
Bagus buat belajar nih…
1. pak bagaimana caranya membuat select tanpa submit contohnya klik buah maka akan keluar jeruk, mangga dll, ketika klik motor langsung keluar honda, yamaha dll tanpa anda tombol submit.
2. Pak Ari bagaimana caranya seandainya orang login jika salah langsung kita lempar ke alamat lain contoh google, atau lainnya.
Matur suwun sanget. (sukron katsir).
@ali: (1) itu bisa pakai javascript biasa tanpa ajax spt di atas atau juga bisa pake ajax. (2) itu anda bisa menggunakan istilah redirecting, di PHP bisa menggunakan perintah header(URL);
wew, itu harus pake applikasi lagi atau di jalankan di root_file CPanel???
pa kalo mo di tambahin validasi form dengan javascript gmn, contoh jika ada textfield yang ga diisi maka tidak akan terproses.
Saya masih bingung baca tect field nya di java script.. mohon bantuannya
Asslm. mas ari yg baik hati, minta tolong, bagaimana cara membuat form pendaftaran online yg baik? mending accees atau sql. saya nyoba berulang-ulang koq gagal terus ya mas. apa saja yg harus dipersiapkan? jazakillah …
@elis: form pendaftaran yang baik itu yang gimana ya mbak? yang disiapkan tentu saja item apa saya yang perlu diisikan, kalo sudah field data di tabelnya menyesuaikan item datanya.
saya mau membuat website untuk tugas kkp saya tntang web yg didalamnya terdapat form untuk memasukkan artikel secara online.form’y sprti membuat post di blogger.bisa ga dibuatkan codingnya?
sebelumnya terima kasih…
mantap bozz
oiya, cara bet Anti-spam ini gmn caranya bozz??
Alhamdulillah , kenapa aku ga ada bosen – bosennya yah buka http://blog.rosihanari.net……setiap aku butuh script selalu ada di sini, Luar Biasa banget anda pak….. selain memajukan anak bangsa , ini juga termasuk amal dunia akhirat anda….Mudah2an orang2 seperti Anda semakin banyak dan panjang umur selalu…..
Maaf pak komen ini bukan sekedar untuk tutorial Anda tapi untuk semua yang telah Anda berikan selama ini…….
Mudah2an panjang umur,banyak rizki,sehat selalu…..
suwun!!!
@denmas yono: amin… makasih mas atas doanya
makasi ilmunya Pak, saya banyak belajar dari kasus-kasus yang ada disini. mau tanya juga
bagaimana caranya membuat data base untuk absensi mahasiswa dari berbagai mata kuliah. misalnya untuk mengetahui si badu ikut mata kuliah A berapa kali. makasi sebelumnya.. semoga ilmu yang diberikan mendapat balasan yang lebih baik, amin..
@dedy: anda buat saja tabel katakanlan presensi dengan field NIM, kodeMK, Tanggal. Setiap kali si mhs ikut matakuliah tsb, masukkan data pada tabel tsb. Nah.. untuk mengetahui berapa kali mhs X ikut matakuliah berkode Y, maka tinggal gunakan query
SELECT count(*) FROM presensi WHERE nim = ‘X’ AND kodeMK = ‘Y’;
mudah bukan?