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 : TambahInput ini untuk memasukkan nama_penyakit yang nantinya akan masuk ke tb_penyakit dalam database.

SubmitInput 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-1Setelah 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 Tahap selanjutnya kita membuat form input sesuai dengan pola yang kita rancang sebelumnya. Pola dapat dilihat pada halaman paling awal. Nama Penyakit :