Halo semuanya, kembali lagi di tulisan saya. Baiklah pada kesempatan kali ini saya akan berbagi tutorial cara membuat export data ke csv, pdf, dan excel dari datatable mudah dan cepat. Bagaimana caranya?, ayo ikuti tutorialnya di bawah ini.


Banyak cara yang bisa kita terapkan untuk membuat export data dari database ke berbagai file ekstensi. Bisa menggunakan library, atau ngoding lansung tanpa library. Itu semua tergantung kebutuhan aplikasi yang kalian buat.

Jika kalian biasa menggunakan datatable, sejatinya datatable memberikan fitur export data ke beberapa file ekstensi tanpa menggunakan library tambahan yang ribet untuk digunakan. Ada 5 format data yang bisa kalian gunakan untuk mendapatkan data yang ditampilkan pada datatable, diantaranya ada copy, csv, pdf, excel, dan print.

Fitur-fitur ini bisa kalian dapatkan dengan mudah, hanya dengan menambahkan beberapa source file dan beberapa baris script saja pada datatablenya. Dengan hadirnya fitur ini, export data ke berbagai format jadi lebih mudah dan cepat, ketimbang kalian harus membuat script untuk excel, script untuk pdf, dan script file export lainnya yang dibuat secara terpisah.

Baca Artikel Lain ✨
📰 1. Cara Cepat Membuat Back-end Restful API Tanpa Coding dengan Typicode Json Server read more
📰 2. Cara Menggunakan Library Datatable Serverside di Laravel Moodle read more
📰 3. Cara Membuat Import Data Excel ke Database Mysql dengan php read more
📰 4. Cara Membuat Peta Digital dengan Leafletjs, Alternatif Peta Digital tanpa Google Maps API read more


Membuat Export pada Datatable

1. Buatlah sebuah database baru dengan nama latihan, lalu buatlah tabel baru di dalamnya dengan nama user. Silahkan ikuti struktur tabelnya seperti gambar di bawah ini.

membuat datatable export
Struktur tabel user



Jangan lupa untuk menambahkan beberapa record data di dalamnya. Karena pada tutorial kali ini kita tidak akan membuat form input data dan proses input data. Semua data diinput langsung dari phpmyadmin.

2. Buatlah sebuah folder baru dengan nama datatable_export di dalam htdocs. Lalu buatlah sebuah file baru dengan nama index.php. Lalu ikuti script yang ada di bawah ini.
    

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <!-- datatable style -->
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
        <!-- bootstrap 4 css  -->
        <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">
        <!-- css tambahan  -->
        <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.7.0/css/buttons.dataTables.min.css">
    </head>
    
    <body>
    
        <div class="container mt-5">
            <div class="card">
                <div class="card-body">
                    <!-- membuat tabel -->
                    <table id="table_id" class="table table-striped display">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Nama</th>
                                <th>Status</th>
                                <th>Jenis Kelamin</th>
                                <th>Email</th>
                                <th>Alamat</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php
                                //melakukan koneksi ke database
                                $koneksi        = mysqli_connect("localhost", "root", "", "latihan");
    
                                //mengambil data mahasiswa
                                $select         = mysqli_query($koneksi, "select * from user");
    
                                //membuat variabel index penomoran
                                $no = 1;
    
                                //melakukan perualangan data dengan while
                                while($data= mysqli_fetch_array($select)){
                            ?>
                            <tr>
                                <!-- menampilkan data -->
                                <td><?php echo $no++; ?></td>
                                <td><?php echo $data['nama']; ?></td>
                                <td><?php echo $data['status']; ?></td>
                                <td><?php echo $data['jk']; ?></td>
                                <td><?php echo $data['email']; ?></td>
                                <td><?php echo $data['alamat']; ?></td>
                            </tr>
                            <?php } ?>
                        </tbody>
                    </table>
                </div>
            </div>
    
    
        </div>
    
        <!-- jquery -->
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <!-- jquery datatable -->
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
    
        <!-- script tambahan  -->
        <script src="https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.print.min.js">
        </script>
    
        <!-- fungsi datatable -->
        <script>
            $(document).ready(function () {
                $('#table_id').DataTable({
                    // script untuk membuat export data 
                    dom: 'Bfrtip',
                    buttons: [
                        'copy', 'csv', 'excel', 'pdf', 'print'
                    ]
                })
            });
    
        </script>
    </body>
    
    </html>

Implementasi datatable dengan fitur export tidak jauh berbeda dengan datatable standard. Hanya saja ada penambahan beberapa resource cdn css dan javascript serta sedikit perubahan pada fungsi datatablenya.

3. Setelah semua langkah di atas telah diikuti, selanjutnya silahkan jalankan project kalian. Jika berhasil maka tampilannya akan tampak seperti gambar di bawah ini.
membuat datatable export
Hasil akhir datatable export




Selain fitur export di atas, masih ada beberapa fitur datatable lainnya yang bisa kalian pelajari untuk membuat aplikasi kalian menjadi lebih powerful, seperti datatable serverside dan style datatable yang berbeda-beda untuk setiap framework yang kalian pakai.

Sekian tutorial cara membuat export berbagai macam file pada datatable dan php. Semoga tutorial kali ini bermanfaat, jika ada yang ingin ditanyakan silahkan tinggalkan komentar kalian di bawah post ini. Sampai jumpa di tutorial seru lainnya. 



Tags

Post a Comment

Posting Komentar

Lebih baru Lebih lama