Alternatif Script Untuk Memproses Input Data Form Dinamis

4
Alternatif Script Untuk Memproses Input Data Form Dinamis February 13th, 2010 | by rosihanari | Cetak Artikel Ini Free Software Pada artikel terakhir kemarin yang berjudul Alternatif Cara Membuat Form Dinamis Untuk Submit Data Secara Simultan , saya telah memaparkan cara membuat script untuk membuat form input data secara dinamis, yang secara otomatis muncul textbox baru setiap kali kita mengklik link untuk menambah kotak isian textbox nya menggunakan Javascript, tanpa menentukan jumlah data yang akan dimasukkan terlebih dahulu. Nah.. di akhir artikel tersebut saya menjanjikan cara membuat script PHP untuk mengolah atau memprosesnya setelah form tersebut disubmit. Dan… kini saya akan penuhi janji tersebut, dan simak caranya baik-baik ya OK.. andaikan kita telah memiliki form sekaligus scriptnya seperti yang ada pada artikel sebelumnya , yaitu seperti di bawah ini <html> <head> <script language="JavaScript" type="text/JavaScript"> counter = 0; function action() { counterNext = counter + 1; document.getElementById("input"+counter).innerHTML = "<p>Masukkan Data <input type='text' name='data[]'></p><div id=\"input"+counterNext+"\"></div>"; counter++; } </script> </head> <body> <h1>Form Dinamis</h1>

description

dg

Transcript of Alternatif Script Untuk Memproses Input Data Form Dinamis

Alternatif Script Untuk Memproses Input Data Form Dinamis

February 13th, 2010 | by rosihanari | Cetak Artikel Ini Free Software Pada artikel terakhir kemarin yang berjudul Alternatif Cara Membuat Form Dinamis Untuk Submit Data Secara Simultan, saya telah memaparkan cara membuat script untuk membuat form input data secara dinamis, yang secara otomatis muncul textbox baru setiap kali kita mengklik link untuk menambah kotak isian textbox nya menggunakan Javascript, tanpa menentukan jumlah data yang akan dimasukkan terlebih dahulu. Nah.. di akhir artikel tersebut saya menjanjikan cara membuat script PHP untuk mengolah atau memprosesnya setelah form tersebut disubmit. Dan kini saya akan penuhi janji tersebut, dan simak caranya baik-baik ya OK.. andaikan kita telah memiliki form sekaligus scriptnya seperti yang ada pada artikel sebelumnya, yaitu seperti di bawah ini

counter = 0; function action() { counterNext = counter + 1; document.getElementById("input"+counter).innerHTML = "Masukkan Data "; counter++; }

Form Dinamis

Masukkan Data

Tambah

Trus.. misalkan data yang diinputkan tersebut akan kita submit ke script bernama proses.php. Lantas.. bagaimana perintah dalam proses.php untuk membaca semua data yang dimasukkan ke dalam form tersebut?Sebelum saya jelaskan caranya, perlu saya sampaikan bahwa cara untuk membaca input dari form dinamis yang akan saya jelaskan ini lebih simpel dan mudah dibandingkan dengan script yang pernah saya bahas pada jaman dahulu kala pada artikel yang topiknya sejenis. Untuk itulah, mengapa di judul artikel ini saya beri embel-embel Alternatif.Untuk membaca data yang disubmit dari form dinamis, tetap kita gunakan looping, seperti halnya artikel yang pernah saya bahas sebelumnya, namun untuk kali ini kita gunakan looping FOREACH. Apa bedanya looping FOR dengan FOREACH? bila kita menggunakan looping FOR, kita harus tahu terlebih dahulu jumlah loopingnya dalam hal ini jumlah data yang akan kita baca. Sedangkan untuk FOREACH kita tidak perlu mengetahuinya.So.. bentuk script untuk membaca data yang disubmit menggunakan FOREACH bagaimana caranya? OK ini dia caranya..proses.php

Lho.. kok simpel sekali? ya.. emang simpel. Perlu saya jelaskan konsepnya di sini bahwa pada prinsipnya kita baca dahulu komponen bernama data[] yang ada di form. Perhatikan tag

yang ada pada form. Meskipun untuk setiap komponen textbox nama komponennya sama yaitu data[] namun ketika disubmit data tersebut akan membentuk sebuah array. Sehingga pada perintah$input = $_POST['data'];nilai dari $input adalah berupa array, dimana data dalam $_POST['data'] mengacu pada nama komponen data[] pada form.Setelah kita punya data input dalam bentuk array, kita tinggal tampilkan saja setiap elemen datanya dengan menggunakan looping FOREACH. Looping ini akan berjalan sejumlah elemen dalam array. Di sini, nilai elemen datanya disimpan dalam $bacaData.Lantas, bagaimana bila data dari form tersebut ingin disimpan ke database? ya.. tinggal Anda sisipkan perintah query untuk insert data di dalam FOREACH tersebut. Gitu aja kok repot Oya.. dengan script PHP di atas, kita mungkin masih mendapatkan data yang kosong namun tetap terbaca, yaitu ketika ada komponen textbox yang tidak diisi data apa-apa. Nah.. untuk mengantisipasi data yang kosong tersebut supaya tidak ditampilkan atau tidak diproses, maka kita perlu filter menggunakan IF. Sehingga kita bisa modifikasi script PHP di atas menjadiproses.php

Nah.. mudah bukan membuat script untuk membaca data dari form dinamis? Konsep ini bisa Anda terapkan pula pada komponen yang lain, termasuk juga komponen input untuk upload beberapa file sekaligus seperti yang ada di CPanel yang barangkali beberapa di antara Anda pernah menggunakannya. Selamat mencoba..