Cara Sederhana Multi Insert Data Dengan PHP - MySQL

Pada postingan kali ini saya akan share cara melakukan insert lebih dari satu data dengan menggunaka PHP- Jquery dan MySQL.

Pertama buat database di MySQL dan table, disini saya membuat database dengan nama db_latihan dan table dengan nama t_barang dengan struktur table seperti berikut :



Setelah membuat database dan table selanjutnya membuat project PHP, project PHP nya saya buat dengan nama multi-insert, lalu didalam folder ini saya membuat dua file yaitu index.php dan insert.php.


Source code index.php seperti berikut :

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

    <title>PHP - Jquery - MySql - Multi Record Insert</title>
  </head>
  <body>
    <div class="container">
        <h1>PHP - Jquery - MySql - Multi Record Insert</h1>
        <hr>
        <form action="insert.php" method="POST">
            <div class="row">
                <div class="col-lg-12">
                    <button type="button" class="btn btn-primary" id="btn-tambah">TAMBAH BARANG</button>    
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <table class="table" style="width:100%;">
                        <thead>
                            <th>No.</th>
                            <th>Nama Barang</th>
                            <th>Jumlah</th>
                            <th>Satuan</th>
                            <th></th>
                        </thead>
                        <tbody id="tbl-barang-body">
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="row btnSave" style="display:none;">
                <div class="col-lg-12">
                    <button type="submit" class="btn btn-primary">SIMPAN BARANG</button>    
                </div>
            </div>
        </form>        
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.slim.js" integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

    <script>
        $(function(){
            var count = 0;
            
            if(count == 0){
                $('.btnSave').hide();
            }
            $('#btn-tambah').on('click'function(){
                count +=1;
                $('#tbl-barang-body').append(`
                    <tr>
                        <td>`count +`</td>
                        <td>
                            <input type="text" name="namabarang[]" class="form-control">
                        </td>
                        <td>
                            <input type="number" name="jumlah[]" class="form-control">
                        </td>
                        <td>
                            <input type="text" name="satuan[]" class="form-control">
                        </td>
                        <td>
                            <button type="button" class="btn btn-danger removeItem">HAPUS</button>
                        </td>
                    </tr>
                `);

                if(count > 0){
                    $('.btnSave').show();
                }

                $('.removeItem').on('click'function(){
                    $(this).closest("tr").remove();
                    count -=1;
                    if(count == 0){
                        $('.btnSave').hide();
                    }
                })
            })
        })
    </script>
  </body>
</html>

Source code insert.php seperti berikut :

<?php

    $server   = "localhost";
    $username = "root";
    $password = "";
    $database = "db_latihan";

    $mysqli = new mysqli($server$username$password$database);

    // cek koneksi
    if ($mysqli->connect_error) {
        die('Koneksi Database Gagal : '.$mysqli->connect_error);
    }

    $namabarang = $_POST['namabarang'];
    $jumlah     = $_POST['jumlah'];
    $satuan     = $_POST['satuan'];

    for($i = 0$i < sizeof($namabarang); $i++){
        $insert = mysqli_query($mysqli,"INSERT INTO t_barang (`namabrg`, `jumlah`, `satuan`)
                                        VALUES ('$namabarang[$i]', '$jumlah[$i]', '$satuan[$i]')");

    }

    if($insert){
        echo "Insert Data Berhasil";
    }
?>


Lalu coba jalankan melalui browser localhose/multi-insert, akan muncul tampilan seperti berikut :



Lalu simpan barang, maka akan tersimpan 3 data kedalam table t_barang seperti berikut :




Sekian sharing cara sederhana melakukan multi insert data kedalam MySql database mengguanakan PHP - Jquery, semoga bermanfaat.

Comments

  1. misi bang, mau tanya kalau input multi di gabungkan dengan form gimana ya saya gak paham,

    misal di atasnya itu form identitas pelanggan, nah pelanggan belanja lebih banyak menggunakan multi insert. itu gimana ya

    ReplyDelete
  2. boleh minta kontaknya gak bang, ane mau konsul bang

    ReplyDelete

Post a Comment

Popular posts from this blog

PHP MySql CRUD Dengan Konsep MVC

Laravel - Sistem Informasi Perpustakaan Sederhana Laravel

IT Asset Management Dengan PHP MySQL