Membuat Flexibel Input sederhana dengan jquery

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 berupa dropdown,yang nantinya akan menampilkan tb_gejala yang ada dalam database.

Input jika gejala tidak ada dalam tb_gejala , sehingga akan meng-Insertkan ke tb_gejala 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

1

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

2

Index.php Pertama kita buat koneksi telebih dahulu untuk dapat disambungkan dengan database 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"> Tahap selanjutnya kita membuat form input sesuai dengan pola yang kita rancang sebelumnya. Pola dapat dilihat pada halaman paling awal.

Nama Penyakit :

<select name="inputs[]"> --Pilih Gejala--"; while($data=mysql_fetch_array($t)){ echo "$data[nama_gejala]"; } ?>  

[Computer and Communication] | Flexibel Form

3

Penjelasan script: 1.

Fungsinya untuk mengirimkan semua inputan dari form untuk diproses selanjutnya kedalam file nambah.php.

2.

Nama Penyakit : Untuk menampilkan form seperti berikut:

3.

Script ini untuk mengambil data id_gejala dan nama_gejala dari tb_gejala. <select name="inputs[]"> --Pilih Gejala--"; while($data=mysql_fetch_array($t)){ echo "$data[nama_gejala]"; } ?> Script ini untuk menampilkan nama_gejala kedalam bentuk form dropdown,dengan mengambil nama_gejala dalam database.  
Script ini untuk menampilkan form untuk input nama_gejala bila didalam database belum ada. Hasilnya tampilanya seperti berikut:

[Computer and Communication] | Flexibel Form

4

4.

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(){ var isi='<select name="inputs[]">-Pilih Gejala--$data[nama_gejala]"; } ?>  
'; jQuery("#penambahan").append(isi); } ); } ); 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

5

Isi dari function() var isi='<select name="inputs[]"> --Pilih Gejala-- $data[nama_gejala]"; } ?  
'; 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

. 3. Jika penulisan sesuai, maka akan tampil halaman seperti berikut:

[Computer and Communication] | Flexibel Form

6

Tahap Ke-3 Form telah kita buat, sekarang waktunya kita buat untuk proses input kedalam database. $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

7

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

8

Script Keseluruhan index.php <script type="text/javascript" src="jquery-1.4.4.min.js"> <script> jQuery(document).ready( function(){ jQuery("#tambah").click( function(){ var isi='<select name="inputs[]">--Pilih Gejala-$data[nama_gejala]"; } ?>  
'; jQuery("#penambahan").append(isi); } ); } ); Nama Penyakit :

<select name="inputs[]"> --Pilih Gejala--"; while($data=mysql_fetch_array($t)){ echo "$data[nama_gejala]"; } ?>  

[Computer and Communication] | Flexibel Form

9

$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')"); } } } ?>

^-^ Selamat Mencoba ^-^ Happy coding!

[Computer and Communication] | Flexibel Form

10