Mengimpor dan Mengekspor Data dalam Format CSV serta Menampilkan Grafik dengan PHP, MySQLi, dan Chart.js

Dalam pengembangan aplikasi web, seringkali diperlukan fitur untuk mengimpor dan mengekspor data dari dan ke database, serta menampilkan data dalam bentuk grafik. Dalam artikel ini, kita akan membahas contoh implementasi untuk mengimpor dan mengekspor data dalam format CSV menggunakan PHP dan MySQLi, serta menampilkan grafik berdasarkan data dari database dengan menggunakan Chart.js.

1. Ekspor Data ke Format CSV
Ekspor data ke format CSV memungkinkan kita untuk menyimpan data dari database ke dalam file yang dapat dibaca oleh banyak program spreadsheet. Berikut adalah contoh implementasinya dengan PHP dan MySQLi:

<?php
// Koneksi ke database
$conn = mysqli_connect("host", "username", "password", "database");

// Query untuk mengambil semua data dari tabel
$query = "SELECT * FROM stock";

// Eksekusi query
$result = mysqli_query($conn, $query);

// Buat header file CSV
header("Content-Disposition: attachment; filename=data_stok_barang.csv");
header("Pragma: no-cache");
header("Expires: 0");

// Output header kolom CSV
echo "Kode Barang,Nama Barang,Jumlah\n";

// Output data ke CSV
while($row = mysqli_fetch_assoc($result)) {
    echo $row['kode_barang'] . "," . $row['nama_barang'] . "," . $row['jumlah'] . "\n";
}

// Tutup koneksi
mysqli_close($conn);
?>

2. Impor Data dari Format CSV ke Database
Selanjutnya, kita akan melihat bagaimana cara mengimpor data dari file CSV ke dalam tabel database menggunakan PHP dan MySQLi:

<?php
// Koneksi ke database
$conn = mysqli_connect("host", "username", "password", "database");

// Baca file CSV
$file = fopen("data_stok_barang.csv", "r");

// Looping data dari file CSV
while (($data = fgetcsv($file, 1000, ",")) !== FALSE) {
    // Query untuk memasukkan data ke tabel
    $query = "INSERT INTO stock (kode_barang, nama_barang, jumlah)
              VALUES ('$data[0]', '$data[1]', '$data[2]')";

    // Eksekusi query
    mysqli_query($conn, $query);
}

// Tutup file CSV
fclose($file);

// Tutup koneksi
mysqli_close($conn);
?>

3. Menampilkan Grafik dengan Chart.js
Terakhir, mari kita lihat cara menampilkan grafik berdasarkan data dari database menggunakan Chart.js. Berikut adalah contoh implementasinya:

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <!-- Canvas untuk menampilkan grafik -->
    <canvas id="myChart"></canvas>

    <script>
        $(document).ready(function(){
            $.ajax({
                url: 'get_data.php', // skrip PHP untuk mengambil data
                type: 'GET',
                dataType: 'json',
                success: function(data){
                    var labels = [];
                    var dataValues = [];

                    // Mengisi label dan data dari hasil pengambilan data PHP
                    for(var i in data){
                        labels.push(data[i].nama_barang);
                        dataValues.push(data[i].jumlah);
                    }

                    // Membuat grafik menggunakan Chart.js
                    var ctx = document.getElementById('myChart').getContext('2d');
                    var myChart = new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: labels,
                            datasets: [{
                                label: 'Jumlah Stok Barang',
                                data: dataValues,
                                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                                borderColor: 'rgba(54, 162, 235, 1)',
                                borderWidth: 1
                            }]
                        },
                        options: {
                            scales: {
                                yAxes: [{
                                    ticks: {
                                        beginAtZero: true
                                    }
                                }]
                            }
                        }
                    });
                }
            });
        });
    </script>
</body>
</html>

Dalam kedua contoh di atas, pastikan untuk mengganti “host”, “username”, “password”, dan “database” dengan informasi koneksi database yang sesuai. Dengan cara ini, Anda akan dapat mengimpor dan mengekspor data dalam format CSV serta menampilkan grafik berdasarkan data dari database dengan Chart.js.

Leave a Reply Cancel reply