Membuat Flexibel Input sederhana dengan jquery.

(1)

[Computer and Communication] | Flexibel Form 1

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 :

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. Input ini untuk memasukkan

nama_penyakit yang nantinya akan masuk ke tb_penyakit dalam database.

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

(2)

[Computer and Communication] | Flexibel Form 2 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.

(3)

[Computer and Communication] | Flexibel Form 3 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

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>   <input type="text" name="inputs1[]"><br/>

</div>

(4)

[Computer and Communication] | Flexibel Form 4 Penjelasan script:

1.

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

2.

Untuk menampilkan form seperti berikut:

3.

Script ini untuk mengambil data id_gejala dan nama_gejala dari tb_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:

Nama Penyakit : <input type="text" name="penyakit"/>

<?php

$query="SELECT * FROM tb_gejala"; $t=mysql_query($query);

?>

echo "<option value='0'>--Pilih Gejala--</option>"; while($data=mysql_fetch_array($t)){ echo "<option value='".$data[id_gejala]."'>$data[nama_gejala]</option>"; } ?> </select>

(5)

[Computer and Communication] | Flexibel Form 5 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.

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

Ketika tombol tambah melakukan aksi kita-klik,maka akan memanggil fuction(). <input type="button" id="tambah" value="Add"> <input type="submit" name="setuju" value="Submit">

jQuery("#tambah").click( function(){

(6)

[Computer and Communication] | Flexibel Form 6 Isi dari function()

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:

<?php

?>

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>   <input type="text" name="inputs1[]" /> <br/>';

(7)

[Computer and Communication] | Flexibel Form 7

Tahap Ke-3

Form telah kita buat, sekarang waktunya kita buat untuk proses input kedalam database.

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

$inputhas=mysql_query("INSERT INTO has (id_penyakit,id_gejala) VALUES ('$id_penyakit','$nama')");

} } } ?> Penjelasan script: 1.

ketika ada perintah submit maka akan menjalankan perintah di dalamnya. 2.

if(isset($_POST['setuju']))

$nama_penyakit=$_POST['penyakit'];

$t=mysql_query("INSERT INTO penyakit (nama_penyakit) values ('$nama_penyakit')");

(8)

[Computer and Communication] | Flexibel Form 8 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.

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.

foreach($_POST['inputs'] as $key => $value) {

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.

(9)

[Computer and Communication] | Flexibel Form 9 Script Keseluruhan index.php

<?php

$connect=mysql_connect('localhost','root',''); $select_db=mysql_select_db('test');

?>

?>

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>   <input type="text" name="inputs1[]" /> <br/>';

jQuery("#penambahan").append(isi); } ); } ); </script>

Nama Penyakit : <input type="text" name="penyakit"/> <div id="penambahan">

<?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>   <input type="text" name="inputs1[]"><br/> </div>

(10)

[Computer and Communication] | Flexibel Form 10 </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)

{

if(empty($nama)){

$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{

$inputhas=mysql_query("INSERT INTO has (id_penyakit,id_gejala) VALUES ('$id_penyakit','$nama')"); } } } ?>  ^-^ Selamat Mencoba ^-^ Happy coding!