core_data_unsur.php

<!DOCTYPE HTML>
<html>
<head>

    <title>Negara</title>
    <script>
        function hapus(kode_unsur){ //Fungsi untuk menghapus data
            if (confirm("Yakin mau menghapus ?")){
                $.ajax({
                    type:"POST", //tipe request
                    url:"pages/hapus_data_unsur.php", //url tujuan
                    data:'kode_unsur='+kode_unsur, //data yang dikirim
                    success:function(data){ //jika
                        window.location.reload();
                }
            });
            }
        }

        function edit(kode_unsur,nama_unsur,jumlah,klasifikasi){ //Fungsi untuk edit data
            /*mengambil value dari form*/
            $("#kode_unsur").val(kode_unsur);
            $("#nama_unsur").val(nama_unsur);
            $("#jumlah").val(jumlah);
            $("#klasifikasi").val(klasifikasi);
            $("#aksi").val("edit");

            $("#formku").slideDown(); //menampilkan form
        }
        $(document).ready(function(){


            $("button").click(function(){ //untuk menampilkan form saat penambahan data
                $("#formku").show(1000);

                /*mengosongkan seluruh form input*/
                $('#kode_unsur').val('');
                $('#nama_unsur').val('');
                $('#jumlah').val('');
                $("#klasifikasi").val('');
            });

            $("#batal").click(function(){ //jika tombol batal diteka maka form akan disembunyikan
                $("#formku").hide(1000);
            });


            $("#simpan").on('click', function(){
                console.log("clicked");

                var kode_unsur = $('#kode_unsur').val();
                var nama_unsur = $('#nama_unsur').val();
                var jumlah = $('#jumlah').val();
                var klasifikasi = $('#klasifikasi').val();
                var aksi = $('#aksi').val(); //mengirimkan aksi yang dilakukan

                    $.ajax({
                        type:"POST",
                        url:"?page=manage_data_unsur",
                        data:'aksi='+aksi+'&kode_unsur='+kode_unsur+'&nama_unsur='+nama_unsur+'&jumlah='+jumlah+'&klasifikasi='+klasifikasi,
                        success:function(data){
                            $("#formku").hide(1000); //menyembunyikan form
                            window.location.reload(); //untuk reload halaman
                            console.log(data);
                        }
                    });
            });

            $("#selectall").click(function () { //untuk checkbox
                if($(this).is(":checked")==false){ //jika checkbox tidak dicentang
                    $(".eachCase").prop("checked",false);
                }else{
                    $(".eachCase").prop("checked",true); //jika checkbox dicentang
                }
            });

            $(".eachCase").click(function(){ //untuk men-check list semua checkbox
                if($(".eachCase").length == $(".eachCase:checked").length) {
                    $("#selectall").attr("checked", "checked");
                } else {
                    $("#selectall").removeAttr("checked");
                }
            });

            $("form input[id='hapus']").click(function() {  // jika tombol hapus diklik
                var count_checked = $("[name='eachCase[]']:checked").length; // menghitung checkbox yang dicentang
                if(count_checked == 0) {
                    alert("Silahkan pilih data yang ingin dihapus");
                    return false;
                }else{
                    confirm("Apakah anda yakin akan menghapus data-data yang anda pilih");
                }
            });
        });
    </script>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
<?php

    $query = "SELECT * FROM data_unsur";
    $hasil = mysqli_query($db,$query);
    $jumlah_data = mysqli_num_rows($hasil);
?>
    <h2> Data Unsur </h2>

    <button>Tambah Data</button>

    <form id="formku" method="post">
        <label>Kode unsur </label><br/>
        <input type="text" name="kode_unsur" id="kode_unsur" maxlength="15"><br/>
        <label> nama_unsur </label><br/>
        <input type="text" name="nama_unsur" id="nama_unsur" /><br/>
        <label> jumlah </label><br/>
        <input type="text" name="jumlah" id="jumlah" /><br/>
        <label> kebutuhan per regu </label><br/>
        <input type="text" name="klasifikasi" id="klasifikasi"><br/>

        <input id='aksi' name='aksi' type='hidden' value='tambah'/>
        <input id='simpan' class="btn_form" name='simpan' type='button' value='Simpan'/>
        <input id='batal' class="btn_form" name='batal' type='reset' value='Batal'/>
    </form>

    <br/><br/>
    <form name="table_data" method="post" action="hapus_data_unsur.php" >
    <input name="hapus" type="submit" value="Hapus" id="hapus"/>
    <table id="tabelku" border="1px">
        <tr>
            <td><input type="checkbox" id="selectall"/></td>
            <td>Kode unsur</td>
            <td>nama_unsur</td>
            <td>jumlah</td>
            <td>klasifikasi</td>
            <td>Opsi</td>
        </tr>
<?php
    while($data = mysqli_fetch_array($hasil)){
        $kode_unsur = $data['kode_unsur'];
        $nama_unsur = $data['nama_unsur'];
        $jumlah = $data['jumlah'];
        $klasifikasi = $data['klasifikasi'];
    ?>
        <tr>
            <td><input type='checkbox' class='eachCase' name='eachCase[]' value="<?php echo $kode_unsur?>"/></td>
            <td><?php echo $kode_unsur; ?></td>
            <td><?php echo $nama_unsur; ?></td>
            <td><?php echo $jumlah; ?></td>
            <td><?php echo $klasifikasi; ?></td>
            <td>
                <a href='#' onclick='edit("<?php echo $kode_unsur; ?>","<?php echo $nama_unsur; ?>","<?php echo $jumlah; ?>","<?php echo $klasifikasi; ?>")'>Edit</a>
                <a href='#' onclick='hapus("<?php echo $kode_unsur;?>")'>Hapus</a>
            </td>
        </tr>
    <?php } ?>
</form>
</body>
</html>