Membuat Flexibel Input sederhana dengan jQuery.

Kasus ini saya temui ketika teman meminta untuk dibuatkan sebuah program inputan yang flexible, maksudnya banyaknya inputan tergantung keinginan kita. Meskipun ada berjuta-juta inputan. Sistem kerjanya yaitu, kita akan dapat menginputkan nama_penyakit kedalam tb_penyakit. Dan dapat menginputkan nama_gejala kedalam tb_gejala, dimana inputan nama_gejala akan berupa inputan dropdown dan inputan text yang dapat kita tentukan jumlahnya/ banyaknya inputan. Dengan menklik Tambah maka form inputan akan bertambah dengan sendirinya. Ketika semua sudah siap,maka klik Submit untuk disimpan kedatabase. Kira-kira seperti ini sketsa tampilanya. INPUT_NAMA_PENYAKIT : INPUT_GEJALA : Tambah
Input ini untuk memasukkan nama_penyakit yang nantinya akan masuk ke tb_penyakit dalam database.

Submit
Input jika gejala tidak ada dalam tb_gejala , sehingga akan meng-Insertkan ke tb_gejala dalam database.

Input berupa dropdown,yang nantinya akan menampilkan tb_gejala yang ada dalam database.

Tahap ke-1
Setelah memahami alur dari system yang akan dibuat, tahap selanjutnya yaitu membuat database. Diagram pembuatan database adalah seperti berikut: 1. Buat database baru, misal kita create dengan nama: coba.

Kemudian klik ciptakan sehingga akan tampil database baru dengan nama database coba.

[Computer and Communication] | Flexibel Form

2. Kemudian buat table database masing-masing untuk tb_penyakit,tb_gejala,tb_has. a. tb_penyakit

b. tb_gejala

c. tb_has

NB: Bagi yang belum mengetahui bagaimana membuat database di mysql, dapat melihat tutorial cnc 1 mengenai database mysql. 3. Setelah semua table kita buat, kita mulai untuk menyiapakan satu folder di htdocs. Misal kita beri nama folder tersebut dengan nama coba. Maka nanti untuk mengakses folder tersebut hanya dengan mengetikkan http://localhost/coba melalui browser. Catatan: apache dan mysql di XAMPP control panel sudah diaktifkan. 4. Waktunya koding. :D Pertama persiapkan file php, kemudian simpan kedalam folder htdocs>cnc yang telah dibuat tadi. Misal kita simpan dengan nama index.php.

[Computer and Communication] | Flexibel Form

Index.php Pertama kita buat koneksi telebih dahulu untuk dapat disambungkan dengan database coba. <!koneksi untuk menguhubungkan script dengan database coba --> <! localhost adalah nama server yang kita gunakan root adalah nama username dari mysql kita, default biasanya root. ini berarti kosong, maksudnya tidak ada password dalam mysql. Jika ada password, maka isikan passwordnya. --> <?php $connect=mysql_connect('localhost','root',''); $select_db=mysql_select_db('coba'); ?> ?> Karena kita memakai file jquery maka jangan lupa untuk menyiapakn file jquerynya. Misal disini kita memakai jquery-1.4.4.min.js. Kenapa kita memakai yang .min, alasanya dapat anda temukan di tutorial cnc pada ulasan JQuery. Siapkan terlebih dahulu file jquerynya, kemuudian cpy kedalam folder htdocs>cnc <script type="text/javascript" src="jquery1.4.4.min.js"></script> Tahap selanjutnya kita membuat form input sesuai dengan pola yang kita rancang sebelumnya. Pola dapat dilihat pada halaman paling awal. <!-- form --> <form action="nambah.php" method="post"> Nama Penyakit : <input type="text" name="penyakit"/> <div id="penambahan"> <?php $query="SELECT * FROM tb_gejala"; $t=mysql_query($query); ?> <select name="inputs[]"> <?php echo "<option value='0'>--Pilih Gejala--</option>"; while($data=mysql_fetch_array($t)){ echo "<option value='".$data[id_gejala]."'>$data[nama_gejala]</option>"; } ?> </select> &nbsp; <input type="text" name="inputs1[]"><br/> </div> <input type="button" id="tambah" value="Add"> <input type="submit" name="setuju" value="Submit"> </form> <!-- /from --> [Computer and Communication] | Flexibel Form 3

Penjelasan script: 1. <form action="nambah.php" method="post"> Fungsinya untuk mengirimkan semua inputan dari form untuk diproses selanjutnya kedalam file nambah.php. 2. Nama Penyakit : <input type="text" name="penyakit"/> Untuk menampilkan form seperti berikut:

3.

<?php $query="SELECT * FROM tb_gejala"; $t=mysql_query($query); ?> Script ini untuk mengambil data id_gejala dan nama_gejala dari tb_gejala. <select name="inputs[]"> <?php echo "<option value='0'>--Pilih Gejala--</option>"; while($data=mysql_fetch_array($t)){ echo "<option value='".$data[id_gejala]."'>$data[nama_gejala]</option>"; } ?> </select> Script ini untuk menampilkan nama_gejala kedalam bentuk form dropdown,dengan mengambil nama_gejala dalam database. &nbsp; <input type="text" name="inputs1[]"><br/> Script ini untuk menampilkan form untuk input nama_gejala bila didalam database belum ada. Hasilnya tampilanya seperti berikut:

[Computer and Communication] | Flexibel Form

4.

<input type="button" id="tambah" value="Add"> <input type="submit" name="setuju" value="Submit"> Script ini untuk menampilkan tombol tambah (jika form ingin kita tambah) dan submit (untuk proses selanjutnya). Hasilnya sebagai berikut:

Tahap ke-2
Setelah form kita buat maka selanjutnya akan membuat tambah form ketika kita klik tambah. Berikut adalah script javascriptnya. <script> jQuery(document).ready( function(){ jQuery("#tambah").click( function(){ <?php $query="SELECT * FROM gejala"; $t=mysql_query($query); ?> var isi='<select name="inputs[]"><option value="0">-Pilih Gejala--</option><?php while($data=mysql_fetch_array($t)){ echo "<option value=$data[id_gejala]>$data[nama_gejala]</option>"; } ?></select> &nbsp; <input type="text" name="inputs1[]" /> <br/>'; jQuery("#penambahan").append(isi); } ); } ); </script> Penjelasan Script: 1. Tahap awal letakkan script diatas tepat dibawah script untuk mengambil fungsi file jquery. 2. jQuery("#tambah").click( function(){ } Ketika tombol tambah melakukan aksi kita-klik,maka akan memanggil fuction().

[Computer and Communication] | Flexibel Form

Isi dari function() <?php $query="SELECT * FROM gejala"; $t=mysql_query($query); ?> var isi='<select name="inputs[]"> <option value="0">--Pilih Gejala--</option> <?php while($data=mysql_fetch_array($t)){ echo "<option value=$data[id_gejala]>$data[nama_gejala]</option>"; } ? </select> &nbsp; <input type="text" name="inputs1[]" /> <br/>'; jQuery("#penambahan").append(isi);

1. Mengambil database untuk id_gejala dan nama_gejala kemudian menampilkannya kedalam form dropdown. Dan ini kita diskripsikan sebagai variable dengan nama isi. 2. jQuery("#penambahan").append(isi); akan menambahkan variable isi, di dalam <div id=penambahan></div>. 3. Jika penulisan sesuai, maka akan tampil halaman seperti berikut:

[Computer and Communication] | Flexibel Form

Tahap Ke-3
Form telah kita buat, sekarang waktunya kita buat untuk proses input kedalam database. <!-- eksekusi form --> <?php if(isset($_POST['setuju'])) { $nama_penyakit=$_POST['penyakit']; $t=mysql_query("INSERT INTO penyakit (nama_penyakit) values ('$nama_penyakit')"); foreach($_POST['inputs'] as $key => $value) { $nama=$_POST['inputs'][$key]; $nama1=$_POST['inputs1'][$key]; if(empty($nama)){ $ambil=mysql_query("SELECT * From penyakit where nama_penyakit='$nama_penyakit'"); $hasil=mysql_fetch_array($ambil); $id_penyakit=$hasil['id_penyakit']; $input_gejala=mysql_query("INSERT INTO gejala (nama_gejala) VALUES ('$nama1')"); $cari_id_gejala=mysql_query("SELECT * from gejala where nama_gejala='$nama1'"); $hasilcari=mysql_fetch_array($cari_id_gejala); $id_hasil_cari=$hasilcari['id_gejala']; $inputhas=mysql_query("INSERT INTO has (id_penyakit,id_gejala) VALUES ('$id_penyakit','$id_hasil_cari')"); }else{ $ambil=mysql_query("SELECT * From penyakit where nama_penyakit='$nama_penyakit'"); $hasil=mysql_fetch_array($ambil); $id_penyakit=$hasil['id_penyakit']; $inputhas=mysql_query("INSERT INTO has (id_penyakit,id_gejala) VALUES ('$id_penyakit','$nama')"); } } } ?> Penjelasan script: 1. if(isset($_POST['setuju'])) ketika ada perintah submit maka akan menjalankan perintah di dalamnya. 2. $nama_penyakit=$_POST['penyakit']; $t=mysql_query("INSERT INTO penyakit (nama_penyakit) values ('$nama_penyakit')");

[Computer and Communication] | Flexibel Form

Membuat variabel dari inputan dengan name=penyakit. Kemudian menyisipkan kedalam tb_penyakit. Karena didalam tb_has akan mengambil id_penyakit untuk disisipkan ke tb_has. 3. foreach($_POST['inputs'] as $key => $value) { $nama=$_POST['inputs'][$key]; $nama1=$_POST['inputs1'][$key]; Istilah lain dari fungsi forech dengan multi array. Nantinya akan meng-arraykan dua variabel yaitu untuk name=inputs dan name=inputs1. Dan selanjutnya akan didiskripsikan sebagai variabel $nama dan $nama1. Catatan: inputs adalah name dari form inputan dropdown. Inputs1 adalah name dari form inputan type text. 4. 1. if(empty($nama)){ 1/ Mengambil nilai id_penyakit dari tb_penyakit. 2/ Ketika tidak ada inputan dari form dropdown maka akan memasukkan nama1(form sebelah) kedalam tb_gejala. Yang selanjutnya akan memasukkan data ke tb_has di id_penyakit dan id_gejala sebanyak form gejala yang ada. }else{ 1/ Mengambil nilai id_penyakit dari tb_penyakit. 2/ Ketika dropdown ada inputan,maka akan mengambil nilai pada form dropdown untuk dimasukkan kedalam tb_gejala. 3/ Menginsertkan ke tb_has untuk nilai id_penyakit dan id_gejala sebanyak form gejala yang ada. }

[Computer and Communication] | Flexibel Form

Script Keseluruhan index.php <!-- connect database --> <?php $connect=mysql_connect('localhost','root',''); $select_db=mysql_select_db('test'); ?> <script type="text/javascript" src="jquery-1.4.4.min.js"></script> <script> jQuery(document).ready( function(){ jQuery("#tambah").click( function(){ <?php $query="SELECT * FROM gejala"; $t=mysql_query($query); ?> var isi='<select name="inputs[]"><option value="0">--Pilih Gejala-</option><?php while($data=mysql_fetch_array($t)){ echo "<option value=$data[id_gejala]>$data[nama_gejala]</option>"; } ?></select> &nbsp; <input type="text" name="inputs1[]" /> <br/>'; jQuery("#penambahan").append(isi); } ); } ); </script> <!-- form --> <form action="nambah.php" method="post"> Nama Penyakit : <input type="text" name="penyakit"/> <div id="penambahan"> <?php $query="SELECT * FROM gejala"; $t=mysql_query($query); ?> <select name="inputs[]"> <?php echo "<option value='0'>--Pilih Gejala--</option>"; while($data=mysql_fetch_array($t)){ echo "<option value='".$data[id_gejala]."'>$data[nama_gejala]</option>"; } ?> </select> &nbsp; <input type="text" name="inputs1[]"><br/> </div> <input type="button" id="tambah" value="Tambah"> <input type="submit" name="setuju" value="Submit"> [Computer and Communication] | Flexibel Form 9

</form> <!-- /from --> <!-- eksekusi form --> <?php if(isset($_POST['setuju'])) { $nama_penyakit=$_POST['penyakit']; $t=mysql_query("INSERT INTO penyakit (nama_penyakit) values ('$nama_penyakit')"); foreach($_POST['inputs'] as $key => $value) { $nama=$_POST['inputs'][$key]; $nama1=$_POST['inputs1'][$key]; if(empty($nama)){ $ambil=mysql_query("SELECT * From penyakit where nama_penyakit='$nama_penyakit'"); $hasil=mysql_fetch_array($ambil); $id_penyakit=$hasil['id_penyakit']; $input_gejala=mysql_query("INSERT INTO gejala (nama_gejala) VALUES ('$nama1')"); $cari_id_gejala=mysql_query("SELECT * from gejala where nama_gejala='$nama1'"); $hasilcari=mysql_fetch_array($cari_id_gejala); $id_hasil_cari=$hasilcari['id_gejala']; $inputhas=mysql_query("INSERT INTO has (id_penyakit,id_gejala) VALUES ('$id_penyakit','$id_hasil_cari')"); }else{ $ambil=mysql_query("SELECT * From penyakit where nama_penyakit='$nama_penyakit'"); $hasil=mysql_fetch_array($ambil); $id_penyakit=$hasil['id_penyakit']; $inputhas=mysql_query("INSERT INTO has (id_penyakit,id_gejala) VALUES ('$id_penyakit','$nama')"); } } } ?> <!-- /eksekusi form-->

^-^ Selamat Mencoba ^-^ Happy coding!

[Computer and Communication] | Flexibel Form

10