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 field inputan. Kalo masih belum mudeng, bisa di lihat di halaman DEMO.
Nah dulu sih, ada contohnya, buatnya pake DOM Javascript, karena fieldnya 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 field 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.

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <title>title</title>

    <link rel="stylesheet" href="style.css">

    <script type="text/javascript" src="jquery.js"></script> <!-- ini disesuaikan -->

    <script type="text/javascript" src="jquery_append.js"></script> <!-- yang ini juga disesuaikan -->

  </head>

  <body>

  <form id="id_form" action="jquery_dom_save.php" method="post">

        <table>

            <tr>

            <td><input type="button" name="add_btn" value="Add" id="add_btn"></td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>

        </tr>

            <tr>

                <td>No</td><td>NIM</td><td>Nama Depan</td><td>Nama Belakang</td><td>&nbsp;</td>

            </tr>

            <tbody id="container">

<!-- nanti rows nya muncul di sini -->

        </tbody>

        <tr>

            <td><input type="submit" name=submit value="Save"></td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>

          </tr>

        </table>

    </form>

  </body>

</html>

Kemudian saya memisahkan file javascriptnya, yang digunakan untuk membuat elemen baru,saya namakan jquery_append.js yang scriptnya sebagai berikut :

$(document).ready(function() {

            var count = 0;

            $("#add_btn").click(function(){

                    count += 1;

                $('#container').append(

                             '<tr class="records">'

                         + '<td ><div id="'+count+'">' + count + '</div></td>'

                         + '<td><input id="nim_' + count + '" name="nim_' + count + '" type="text"></td>'

                         + '<td><input id="nama_depan_' + count + '" name="nama_depan_' + count + '" type="text"></td>'

                         + '<td><input id="nama_belakang_' + count + '" name="nama_belakang_' + count + '" type="text"></td>'

                         + '<td><a class="remove_item" href="#" >Delete</a>'

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

                    );

                });

                $(".remove_item").live('click', function (ev) {

                if (ev.type == 'click') {

                $(this).parents(".records").fadeOut();

                        $(this).parents(".records").remove();

            }

            });

        });

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 prefik 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

<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:

<?php

    if(isset($_POST['submit'])){

      $connection = mysql_connect("localhost","root","") or die(mysql_error());

      mysql_select_db("latihan") or die(mysql_error());

            foreach ($_POST['rows'] as $key => $count ){

                $nim = $_POST['nim_'.$count];

                $nama_depan = $_POST['nama_depan_'.$count];

                $nama_belakang = $_POST['nama_belakang_'.$count];

                $query_2 = "INSERT INTO kelas_mahasiswa (nim,nama_depan,nama_belakang) VALUES ('$nim','$nama_depan','$nama_belakang')";

                mysql_query($query_2) or die(mysql_error());

            }

            echo "Data Berhasil disimpan <br>";

            echo "<a href=\"jquery_dom.php\">Kembali</a>";

        mysql_close($connection);

    }else{

        header('Location: jquery_dom.php');

    }

?>

Menggunakan perulangan foreach dengan menghitung $_POST['rows']. Jangan lupa untuk setiap perulangan ditambahkan $count untuk mengambil nilai dari form input yang kita namai setiap field nya dengan name_1, 2 3 dst tadi.
Ada pertanyaan? Silahkan berkomentar, jika ada kesalahan mohon diperbaiki ya,,,

Sumber:http://dudu.web.id/2011/05/insert-multiple-rows-dynamically-with-jquery-php-and-mysql/

All 4 Soft

Insert Multiple Rows dynamically with Jquery, PHP and MySQL

Insert Multiple Rows dynamically with Jquery, PHP and MySQL

No comments:

Post a Comment