Jquery, PHP, Mysql, Append, Live, Dinamic Row - Dudu - Web

dudu.WEB.
ID
…still try and try…
Insert Multiple Rows dynamically with Jquery, PHP and MySQL
udulnya mbois browww….
Begini ceritanya.pernah suatu ketika saya dikasih tugas di tempat kerja saya yang dulu, untuk membuat aplikasi web. Nah pada aplikasi tersebut terdapat fungsi
memasukkan data tetapi secara dinamis (ga satu persatu). Yang dimaksudkan dinamis adalah, kita bisa menambahkan baris dengan sebuah tombol, jadi setiap tombol
tersebut di klik, maka akan muncul 1 baris baru di bawahnya untuk menampilkan eld inputan. Kalo masih belum mudeng, bisa di lihat di halaman DEMO.
DEMO
Nah dulu sih, ada contohnya, buatnya pake DOM Javascript, karena eldnya banyak, maka scriptnya jadi spagetti alias amburadul.. Susah dipelajari, mana yang child, mana
yang parent. Ternyata eh ternyata, setelah belajar pake jquery, jquery memiliki fungsi .append() yang bisa digunakan untuk ini.
Dalam demo ini contohnya saya akan menginputkan data mahasiswa dengan eld nim, nama depan, nama belakang. Untuk databasenya bisa dibuat sendiri lah (sesuaikan
dengan milik Anda). Pada form inputnya dibuat script input seperti biasa, tetapi saya menggunakan tabel agar tampilannya bisa lebih rapi. Kemudian jangan lupa panggil
jquerynya ya.
01 <!DOCTYPE html>
02 <html lang="en">
03 <head>
04 <meta charset="utf-8">
05 <title>title</title>
06 <link rel="stylesheet" href="style.css">
07 <script type="text/javascript" src="jquery.js"></script> 
08 <script type="text/javascript" src="jquery_append.js"></script> 
09 </head>
10 <body>
11 <form id="id_form" action="jquery_dom_save.php" method="post">
12 <table>
13 <tr>
14 <td><input type="button" name="add_btn" value="Add" id="add_btn"></td><td> </td><td> </td><td> </td>
15 </tr>
16 <tr>
17 <td>No</td><td>NIM</td><td>Nama Depan</td><td>Nama Belakang</td><td> </td>
18 </tr>
19 <tbody id="container">
20 
21 </tbody>
22 <tr>
23 <td><input type="submit" name=submit value="Save"></td><td> </td><td> </td><td> </td>
24 </tr>
25 </table>
26 </form>
27 </body>
28 </html>
Kemudian saya memisahkan le javascriptnya, yang digunakan untuk membuat elemen baru,saya namakan jquery_append.js yang scriptnya sebagai berikut :
01 $(document).ready(function() {
02 var count = 0;
03
04 $("#add_btn").click(function(){
05 count += 1;
06 $('#container').append(
07 '<tr class="records">'
08 + '<td ><div id="'+count+'">' + count + '</div></td>'
09 + '<td><input id="nim_' + count + '" name="nim_' + count + '" type="text"></td>'
10 + '<td><input id="nama_depan_' + count + '" name="nama_depan_' + count + '" type="text"></td>'
11 + '<td><input id="nama_belakang_' + count + '" name="nama_belakang_' + count + '" type="text"></td>'
12 + '<td><a class="remove_item" href="#" >Delete</a>'
13 + '<input id="rows_' + count + '" name="rows[]" value="'+ count +'" type="hidden"></td></tr>'
14 );
15 });
16
17 $(".remove_item").live('click', function (ev) {
18 if (ev.type == 'click') {
19 $(this).parents(".records").fadeOut();
20 $(this).parents(".records").remove();
21 }
22 });
23 });
Script di atas adalah script javascript yang menggunakan jquery append() untuk membuat elemen. Dan nama elemennya saya buat nama_elemen_ agar nanti setiap
penambahana elemen akan ditambahkan pre k dari variabel count yang isinya adalah nomor / angka berurutan. Sehinga pada baris pertama, nama inputnya akan menjadi
nim_1, nama_depan_1, nama_belakang_1, kemudian pada baris selanjutnya nim_2, nama_depan_2, nama_belakang_2 dan seterusnya.
Baris
1 <input id="rows_' + count + '" name="rows[]" value="'+ count +'" type="text"></td></tr>
digunakan untuk nantinya menghitung berapa row yang sudah dibuat, digunakan ketika perulangan insert data ke dalam tabel.
Saya juga menambahkan link untuk menhapus row jika sekiranya di perlukan. Menggunakan jquery live() karena row yang ditambahkan dibuat menggunakan javascript,
sehingga harus menggunakan jquery.live() silahkan baca dokumentasi jquery .live() di sini
Akhirnya script untuk input datanya adalah sebagai berikut:
01 <?php
02 if(isset($_POST['submit'])){
03 $connection = mysql_connect("localhost","root","") or die(mysql_error());
04 mysql_select_db("latihan") or die(mysql_error());
05 foreach ($_POST['rows'] as $key => $count ){
06 $nim = $_POST['nim_'.$count];
07 $nama_depan = $_POST['nama_depan_'.$count];
08 $nama_belakang = $_POST['nama_belakang_'.$count];
09
10 $query_2 = "INSERT INTO kelas_mahasiswa (nim,nama_depan,nama_belakang) VALUES ('$nim','$nama_depan','$nama_belakang')";
11
12 mysql_query($query_2) or die(mysql_error());
13 }
14
15 echo "Data Berhasil disimpan <br>";
16 echo "<a href=\"jquery_dom.php\">Kembali</a>";
17
18 mysql_close($connection);
19
20 }else{
21 header('Location: jquery_dom.php');
22 }
23 ?>
Menggunakan perulangan foreach dengan menghitung $_POST[‘rows’]. Jangan lupa untuk setiap perulangan ditambahkan $count untuk mengambil nilai dari form input
yang kita namai setiap eld nya dengan name_1, 2 3 dst tadi.
Ada pertanyaan? Silahkan berkomentar, jika ada kesalahan mohon diperbaiki ya,,,
This entry was posted in Jquery, PHP, Programming and tagged DOM, Jquery, MySql, php on May 31, 2011 [https://dudu.web.id/2011/05/insert-multiple-rows-dynamically-
with-jquery-php-and-mysql/] .
We were unable to load Disqus. If you are a moderator please see our troubleshooting guide.

Jquery, PHP, Mysql, Append, Live, Dinamic Row - Dudu - Web

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Jquery, PHP, Mysql, Append, Live, Dinamic Row - Dudu - Web

Diunggah oleh

Hak Cipta:

Format Tersedia

dudu.WEB.

Insert Multiple Rows dynamically with Jquery, PHP and MySQL

udulnya mbois browww….

1 <input id="rows_' + count + '" name="rows[]" value="'+ count +'" type="text"></td></tr>

Akhirnya script untuk input datanya adalah sebagai berikut:

Anda mungkin juga menyukai