Halo semuanya, kembali lagi di sahretech. Baiklah pada kesempatan yang berbahagia kali ini saya akan berbagi tutorial web dengan pembahasan yang sangat menarik. Pembahasan apa itu?, yaitu cara membuat multiple checkbox pada datatable beserta pemrosesan datanya. Penasaran?, ayo ikuti tutorialnya berikut ini.

Multiple checkbox akan sangat berguna pada list data yang sangat banyak, karena dengan adanya fitur ini, user bisa memilih sekaligus data yang ingin diproses. Contohnya saat ingin menghapus data, user tinggal memilih semua data yang tidak diperlukan lalu klik tombol hapus dan semua data yang dipilih akan terhapus dalam satu kali proses klik.

Hal ini tentu akan sangat memudahkan user, bayangkan saja jika fitur ini tidak tersedia, maka setiap data harus dihapus satu persatu → lalu proses penghapusan → kembali ke halaman sebelumnya → dan memilih data untuk dihapus kembali. Padahal jika menggunakan fitur ini, user tinggal memilih semua data yang ingin dihapus → lalu proses penghapusan → selesai.

Dari gambaran proses di atas, kita bisa memperpendek waktu pemilihan dan eksekusi data. Apalagi hal ini berkaitan dengan experience dan kenyamanan user. So, ayo kita mulai ngodingnya dan siapkan web editor terbaik kalian!, 😀

Baca Artikel Lain ✨

📰 1. Mudah Membuat Form Otomatis terisi Atau Autofill Dengan Jquery Ajax read more

📰 2. Input dan Menampilkan Data Tanpa Reload dengan Jquery Ajax read more

📰 3. Cara Membuat Form Input Add More/Tambah Dinamis dengan php dan MySQL read more

Cara Membuat Multiple Checkbox dengan Php dan Mysql

Pada tutorial kali ini kita akan membuat sebuah halaman web sederhana yang akan menampilkan tabel dan data di dalamnya. Proses yang akan kita buat adalah proses penghapusan data dengan cara mutliple select. Diharapkan tutorial ini bisa membantu kalian memahami logika pemrogramannya, dan bisa kalian improvisasi lagi di project-project selanjutnya.

1. Membuat Database dan Table

Pertama kita akan membuat sebuah database baru dengan nama latihan, lalu buatlah sebuah tabel baru di dalamnya dengan nama mahasiswa. Adapun struktur tabelnya dapat kalian lihat pada gambar di bawah ini.

Tabel mahasiswa

Karena pada tutorial ini kita tidak membaut create atau input data, jadi silahkan kalian tambahkan beberapa data di dalamnya.

2. Membuat Halaman Tampil Data

Masuk ke folder htdocs, lalu buatlah sebuah folder baru dengan nama multiple-select. Buatlah sebuah file index.php di dalamnya. Lalu copy script di bawah ini dan pastekan ke dalam file tersebut.

    

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- datatable style -->
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
    
        <!-- bootstrap resource  -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
            integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    
        <!-- jquery -->
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    </head>
    
    <body>
        <div class="container">
            <br>
            <div class="alert alert-success">
                <h1>Latihan Membuat Multiple Select</h1>
                <p>sahretech.com Blog pemrograman | tutorial komputer | windows | android | Blog dan Wordpress</p>
            </div>
            <br>
            <form action="proseshapus.php" method="post">
                <!-- membuat tombol reset data terpilih  -->
                <a href="index.php" class="btn btn-primary">Unceklis Data Terpilih</a>
                <!-- jika tombol diklik maka akan diproses ke halaman proseshapus.php  -->
                <button class="btn btn-danger" type="submit">Hapus</button>
                <br><br>
                <table id="table_id" border=1 class="display">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Nama</th>
                            <th>Jenis Kelamin</th>
                            <th>Jurusan</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php
                            // koneksi ke database
                            $koneksi = mysqli_connect('localhost', 'root', '', 'latihan');
                            // mengambil data dari tabel mahasiswa 
                            $select = mysqli_query($koneksi, "select * from mahasiswa");
    
                            //membuat variabell index penomoran
                            $no = 1;
    
                            //melakukan perualangan data dengan while
                            while($data= mysqli_fetch_array($select)){
                        ?>
                        <tr>
                            <td><?php echo $no++; ?></td>
                            <td><?php echo $data['nama']; ?></td>
                            <td><?php echo $data['jk']; ?></td>
                            <td><?php echo $data['jurusan']; ?></td>
                            <td width="20px">
                            <!-- membuat checkbox dengan name="hapus[]" tanda [] digunakan untuk menampung banyak data  -->
                                <input type="checkbox" name="hapus[]" value="<?php echo $data['idmahasiswa']; ?>">
                            </td>
                        </tr>
                        <?php } ?>
                    </tbody>
                </table>
            </form>
        </div>
    
        <!-- jquery datatable -->
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js">
        </script>
    
        <!-- fungsi datatable -->
        <script>
            $(document).ready(function () {
                $('#table_id').DataTable();
            });
    
        </script>
    </body>
    
    </html>

Buka browser kalian, lalu ketik url localhost/multiple-select. Jika berhasil maka tampilannya akan tampak seperti gambar di bawah ini. Oh iya, jangan lupa untuk menambahkan data di dalam database agar datanya bisa tampil.

Tampilan halaman index

Penjelasan:

Fungsi mysqli_connect(...) digunakan untuk menghubungkan database ke proejct yang ktia kerjakan. Sedangkan mysqli_query(...) digunakan untuk menampilkan data dengan parameter koneksi dan query yang ingin ditampilkan. Data ditampilkan dengan menggunakan while(...).

Logika yang kita gunakan untuk menghapus datanya adalah: pertama kita letakkan form pada bagian paling atas tabel, hal ini bertujuan agar semua data terpilih masuk ke dalam form yang sama. Kedua pada kolom terakhir kita buat input type="checkbox" untuk memilih datanya. Menggunakan name="hapus[]" agar dapat menampung list data. Jangan lupa juga untuk menambahkan value="<?php echo $data['idmahasiswa']; ?>" agar setiap data yang dipilih memiliki value yang berbeda.

Penjelasan tambahan juga sudah saya selipkan pada script di atas. Jika masih ada yang membingunkan silahkan tanyakan langsung di kolom komentar di bawah ini.

3. Membuat File Proses Hapus Data

Ini adalah tahap terakhir dari tutorial kali ini, buatlah sebuah file baru di dalam folder multiple-select dan beri nama proseshapus.php. Lalu copy script di bawah ini dan pastekan ke dalam file tersebut

    

<?php

    //koneksi ke database
    $koneksi = mysqli_connect('localhost', 'root', '', 'latihan');

    // melakukan perulangan sebanyak data yang ingin dihapus
    for($i=0; $i<=count($_POST['hapus'])-1; $i++){
        //menghapus data sesuai urutan array
        mysqli_query($koneksi, 'delete from mahasiswa where idmahasiswa='.$_POST['hapus'][$i]);
    }

    //kembali ke halaman sebelumnya
    header("Location: index.php");
    die();


?>

Penjelasan:

Sama seperti file index.php, kita perlu terhubung terlebih dahulu dengan database menggunakan mysqli_connect(...). Karena data yang akan kita hapus lebih dari satu, maka kita butuh perulangan, for(...) adalah perulangan yang kita pakai. Lalu ada count(...), fungsi ini digunakan untuk menghitung jumlah array. Lalu kita hapus datanya dengan menggunakan mysqli_query(...) dimana data yang akan kita hapus sesuai dengan urutan array $_POST['hapus'][$i]

Penjelasan tambahan juga sudah saya selipkan pada script di atas. Jika masih ada yang membingunkan silahkan tanyakan langsung di kolom komentar di bawah ini.

Sekarang jalankan project kalian, akses urlnya di localhost/multiple-select. Lalu simulasikan untuk menghapus beberapa data di dalamnya. Contohnya terlihat seperti gambar di bawah ini

Menghapus multi data

Sekian tutorial cara membuat multiple checkbox dan proses datanya pada datatable dengan php dan mysql. Semoga tulisan singkat ini bermanfaat. Jika ada yang ingin ditanyakan silahkan tinggalkan komentar kalian di kolom komentar di bawah ini.

Sahretech

Cara Membuat Multiple Checkbox dan Proses Datanya pada Datatable dengan Php dan Mysql

Cara Membuat Multiple Checkbox dengan Php dan Mysql

1. Membuat Database dan Table

2. Membuat Halaman Tampil Data

Penjelasan:

3. Membuat File Proses Hapus Data

Penjelasan:

No comments

Kategori Pemrograman

Popular

Facebook