Beli Modem Wavecom Untuk SMS Gateway. FREE E-book Gammu + FREE Ongkos kirim !!
Ingin Punya Script SMS Gateway dengan PHP + MySQL?

Dapatkan segera phpSMS V3.0, software SMS Gateway multi fungsi berbasis web buatan saya sendiri untuk keperluan Anda.
[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

Cari Rata-rata Bilangan


";
echo "
";
for ($i = 0; $i <= $n-1; $i++)
{
      echo "


";
}
echo "


";
echo "


";
echo "

Bil ke-".($i+1)."















";
echo "

";

?>
[/sourcecode]

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


VN:F [1.9.4_1102]
Rating: 3.5/10 (2 votes cast)
Membuat Form Dinamis dan Pemrosesannya (Sebuah Studi Kasus), 3.5 out of 10 based on 2 ratings 


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

				

Share this article on: 



Kata kunci: 
dinamis - form - PHP -

Ada 32 komentar dalam artikel ini.

  1. ADi says:
    May 18, 2009 at 7:29 am

    makasih banget code2nya ?

    tugas skul saya jadi selesai dan sangat berguna?

    THANK

  2. rofi aprian says:
    May 20, 2009 at 4:33 pm

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

  3. Analo says:
    May 25, 2009 at 5:24 am

    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:
    May 25, 2009 at 6:21 am

    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. Imam Zatnika W says:
    June 6, 2009 at 4:44 pm

    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:
    June 6, 2009 at 9:25 pm

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

  7. Nico says:
    June 11, 2009 at 8:44 am

    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:
    June 11, 2009 at 11:05 am

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

  9. marzuki says:
    June 14, 2009 at 5:19 am

    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:
    June 14, 2009 at 5:21 am

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

  11. Imam Zatnika W says:
    June 18, 2009 at 12:33 pm

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

  12. rosihanari says:
    June 20, 2009 at 3:18 am

    to imam zatnika: mm… sepertinya sih juga diupload ke folder theme yang digunakan. masih tetap gak bisa ya?

  13. Imam Zatnika W says:
    June 20, 2009 at 9:22 pm

    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. :-D Tapi karena itulah ‘dia’ Open Source’ :-D :-D

    Saya mau getol kunjungin blog Pak Ari ajah. Sekalian belajar.. ;-)

    Terima Kasih Banyak Pak Ari..

    Wassalaamu’alaykum..

  14. three_solo says:
    October 17, 2009 at 5:40 am

    terimakasih banget infonya;;;

  15. azzaam says:
    December 4, 2009 at 11:35 pm

    kalau plugin instantnya?

  16. rosihanari says:
    December 5, 2009 at 10:43 am

    @azzaam: belum tahu mas :-)

  17. Idunk says:
    January 17, 2010 at 8:08 pm

    thanx iia coding’a,,
    kebetulan w lagi da tugas cari nilai rata2 pke PHP…

  18. hadi says:
    January 28, 2010 at 1:02 am

    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?

  19. irfrans says:
    January 31, 2010 at 8:59 am

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

  20. Dhanang says:
    February 10, 2010 at 12:47 am

    Bagus buat belajar nih…

  21. ali says:
    March 19, 2010 at 11:18 pm

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

  22. rosihanari says:
    March 21, 2010 at 4:56 pm

    @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);

  23. Zapra Gartiast says:
    March 29, 2010 at 7:36 am

    wew, itu harus pake applikasi lagi atau di jalankan di root_file CPanel???

  24. Azis Pamuji says:
    April 29, 2010 at 1:49 pm

    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

  25. elis says:
    May 12, 2010 at 11:02 am

    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 …

  26. rosihanari says:
    May 13, 2010 at 8:04 am

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

  27. agus says:
    June 9, 2010 at 12:20 am

    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…

  28. bowo says:
    June 17, 2010 at 1:18 pm

    mantap bozz

    oiya, cara bet Anti-spam ini gmn caranya bozz??

  29. Denmas Yono says:
    June 20, 2010 at 12:48 am

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

  30. rosihanari says:
    June 20, 2010 at 6:37 am

    @denmas yono: amin… makasih mas atas doanya

  31. dedy says:
    August 19, 2010 at 9:28 am

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

  32. rosihanari says:
    August 27, 2010 at 5:40 am

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



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.

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word