Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Sistem Informasi Penjualan dengan Codeigniter 4 Part #7 – Grafik

5 min read

Sistem Informasi Penjualan dengan Codeigniter 4 - Part 7 - Grafik Penjualan dan Latest Transaction

Ini merupakan part ke 7 dari seri tutorial cara membuat aplikasi Sistem Informasi Penjualan dengan Codeigniter 4 – Grafik Transaction.

Pada part ini Anda akan belajar membuat grafik transaction berdasarkan bulan dan jumlah penjualan dalam sebulan. Anda juga akan membuat fitur latest transaction, menampilkan total category, product, transaction serta total user.

Pada part sebelumnya Ilmu Coding sudah membahas membuat fitur import export menggukana PhpSpreadSheet. Jika Anda belum membacanya, alangkah baiknya untuk membaca part ke 6 terlebih dahulu agar bisa memahami part ini dengan baik.

Sebelum memulai part ke 7 ini, jangan lupa segelas kopi dan cemilan untuk menemanimu ngoding.

Let’s go!

Membuat Fitur Grafik Transaction

Anda pasti ingat pada part 2, saat menyusun templating tepat pada halaman dashboard masih nampak kosong.

Oleh sebab itu grafik yang akan kita buat, akan ditampilkan pada halaman dashboard.

Ada 5 step untuk membuatnya.

Mari kita mulai.

Let’s go!

Step #1 – Buat Dashboard Model

Silahkan buat file bernama Dashboard_model.php dan simpan pada direkrori app/Models.

Berikut kodenya:

<?php namespace App\Models;
use CodeIgniter\Model;
 
class Dashboard_model extends Model
{
    protected $table = 'transactions';

    // hitung total data pada transaction
    public function getCountTrx()
    {
        return $this->db->table("transactions")->countAll();
    }

    // hitung total data pada category
    public function getCountCategory()
    {
        return $this->db->table("categories")->countAll();
    }

    // hitung total data pada product
    public function getCountProduct()
    {
        return $this->db->table("products")->countAll();
    }

    // hitung total data pada user
    public function getCountUser()
    {
        return $this->db->table("users")->countAll();
    }

    public function getGrafik()
    {
        $query = $this->db->query("SELECT trx_price, MONTHNAME(trx_date) as month, COUNT(product_id) as total FROM transactions GROUP BY MONTHNAME(trx_date) ORDER BY MONTH(trx_date)");
        if(!empty($query)){
            foreach($query->getResultArray() as $data) {
                $hasil[] = $data;
            }
            return $hasil;
        }
    }

    public function getLatestTrx()
    {
        return $this->table('transactions')
            ->select('products.product_name, transactions.*')
            ->join('products', 'products.product_id = transactions.product_id')
            ->orderBy('transactions.trx_id', 'desc')
            ->limit(5)
            ->get()
            ->getResultArray();
    }
}

Simpan.

Penjelasan:

Pada Dashboard Model ini berisi function grafik() yang isinya untuk menampilkan data bulan serta total penjualan setiap bulannya.

Pada function tersebut saya menggunakan query biasa, bukan query builder lagi.

Kenapa?

Karena query ini begitu spesifik.

Pada function latest_transaction() sangat mirip dengan model yang akan di part ke 6. Detailnya bisa Anda simak di part tersebut.

Kemudian pada baris ke 8 – 30 merupakan query untuk menampilkan total data.

Di Codeigniter 4, Anda bisa menggunakan method countAll() untuk menghitung total data dalam suatu table.

Step #2 – Modifikasi Controller Dashboard

Silahkan buka file Dashboard.php yang ada pada direktori app/Controllers.

Silahkan modifikasi kodenya sebabagi berikut:

<?php namespace App\Controllers;

use App\Models\Dashboard_model;

class Dashboard extends BaseController
{
	public function __construct()
    {
		$this->dashboard_model = new Dashboard_model();
	}
	
	public function index()
	{
		$data['total_transaction']	= $this->dashboard_model->getCountTrx();
		$data['total_product']		= $this->dashboard_model->getCountProduct();
		$data['total_category']		= $this->dashboard_model->getCountCategory();
		$data['total_user']			= $this->dashboard_model->getCountUser();
		$data['latest_trx']			= $this->dashboard_model->getLatestTrx();

		$chart['grafik']			= $this->dashboard_model->getGrafik();

		echo view('dashboard', $data);
		echo view('_partials/footer', $chart);
    }
    
}

Simpan.

Penjelasan:

Pada kode di atas saya sengaja memanggil view footer karena ada alasan khusus.

Efektitas dan efisiensi kode adalah alasannya.

Sebab di view footer nanti saya menambahkan script PHP dan Javascript untuk menangani grafik.

Selain itu, saya mencoba untuk menampilkan script PHP dan Javascript hanya ketika halaman dashboard dipanggil. Jika tidak, maka script PHP dan Javascript ini tidak akan dipanggil.

Itulah yang saya maksud dari efetifitas dan efisiensi.

Coba Anda bayangkan seandainya saya meletakan file PHP dan Javascript ini untuk semua halaman?

Pasti file javascript ini akan terpanggil untuk semua halaman. Padahal halaman lainnya tidak membutuhkan chart. Hal itu akan membuat website berat, boros dan tidak efektif.

Kalau di framework sebelah, saya biasa menggunakan yield dan section.

Sayangnya, di Codeigniter tidak ada blade engine.

Step #3 – Modifikasi Halaman View Dashboard

Silahkan buka file dashboard.php pada direktori app/Views.

Kemudian ubah menjadi:

<?php echo view('_partials/header'); ?>
<?php echo view('_partials/sidebar'); ?>

<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">Dashboard</h1>
            </div>
            <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item active">Dashboard</li>
            </ol>
            </div>
        </div>
        </div>
    </div>

    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-3 col-6">
                    <div class="small-box bg-info">
                        <div class="inner">
                            <h3><?php echo $total_transaction; ?></h3>

                            <p>Transactions</p>
                        </div>
                        <div class="icon">
                            <i class="fas fa-dollar-sign"></i>
                        </div>
                        <a href="<?php echo base_url('transaction'); ?>" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="small-box bg-success">
                        <div class="inner">
                            <h3><?php echo $total_product; ?></h3>

                            <p>Products</p>
                        </div>
                        <div class="icon">
                            <i class="fas fa-cart-plus"></i>
                        </div>
                        <a href="<?php echo base_url('product'); ?>" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="small-box bg-warning">
                        <div class="inner">
                            <h3><?php echo $total_category; ?></h3>

                            <p>Categories</p>
                        </div>
                        <div class="icon">
                            <i class="fa fa-tags"></i>
                        </div>
                        <a href="<?php echo base_url('category'); ?>" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="small-box bg-danger">
                        <div class="inner">
                            <h3><?php echo $total_user; ?></h3>

                            <p>Users</p>
                        </div>
                        <div class="icon">
                            <i class="fas fa-users"></i>
                        </div>
                        <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="m-0">Sales Graph</h5>
                        </div>
                        <div class="card-body">
                            <canvas id="myChart" width="100%" height="45"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="m-0">Latest Transaction</h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-hovered">
                                    <thead>
                                        <tr>
                                            <th>No</th>
                                            <th>Product</th>
                                            <th>Date</th>
                                            <th>Price</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <?php foreach($latest_trx as $key => $row){ ?>
                                        <tr>
                                            <td><?php echo $key + 1; ?></td>
                                            <td><?php echo $row['product_name']; ?></td>
                                            <td><?php echo date('j F Y', strtotime($row['trx_date'])); ?></td>
                                            <td><?php echo "Rp. ".number_format($row['trx_price'], false, false, "."); ?></td>
                                        </tr>
                                        <?php } ?>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Simpan.

Penjelasan:

Jika diperhatikan, saya tidak menginclude view footer seperti pada halaman-halaman view lainnya.

Alasannya karena saya sudah memanggilnya pada controller.

Step #4 – Modifikasi View Footer

Silahkan buka file footer.php pada direktori app/Views/_partials.

Kemudian modifikasi menjadi:

<?php 
if(isset($grafik)){
foreach($grafik as $data){
    $total[] = $data['total'];
    $month[] = $data['month'];
}
}
?>
<aside class="control-sidebar control-sidebar-dark">
    <div class="p-3">
        <h5>Title</h5>
        <p>Sidebar content</p>
    </div>
</aside>

<footer class="main-footer">
    <div class="float-right d-none d-sm-inline">
        Sistem Informasi Penjualan
    </div>
    <strong>Copyright © 2014-2019 <a href="<?php echo base_url('/'); ?>">SIP Online</a>.</strong> All rights reserved.
</footer>
</div>
<script src="<?php echo base_url('themes/plugins'); ?>/jquery/jquery.min.js"></script>
<script src="<?php echo base_url('themes/plugins'); ?>/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="<?php echo base_url('themes/dist'); ?>/js/adminlte.min.js"></script>
<script src="<?php echo base_url('themes/dist'); ?>/js/filter.js"></script>
<?php if(isset($grafik)){?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script>
var chart = document.getElementById("myChart").getContext('2d');
var areaChart = new Chart(chart, {
  type: 'bar',
  data: {
    labels: <?php echo json_encode($month); ?>,
    datasets: [
      {
        label: "Grafik Penjualan",
        data: <?php echo json_encode($total); ?>,
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 253, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 255, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)',
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 253, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 255, 255, 1)',
          'rgba(255, 159, 64, 1)',
        ],
        borderWidth: 1
      }
    ]
  },
  options: {
    scales: {
      yAxes: [
        {
          ticks: {
            beginZero: true
          }
        }
      ]
    }
  }
});
</script>
<?php } ?>
</body>
</html>

Simpan.

Penjelasan:

Saya menggunakan isset($grafik) untuk memastikan apakah variable $grafik di assign ke footer.php atau tidak.

Jika tidak, maka script yang ada di dalam if tidak akan tampil.

Itulah sebabnya mengapa cara seperti ini bisa meningkatkan efetifitas pemanggilan CSS maupun JS yang diperlukan saja.

Seperti yang saya katakana sebelumnya, kalau di framework sebelah, saya biasa menggunakan yield dan section.

Sayangnya, di Codeigniter tidak ada blade engine.

Jadi, mungkin ini salah satunya cara dari beberapa cara lainnya.

Step #5 – Testing View Dashboard

Silahkan ketik command berikut jika Anda belum melakukannya:

php spark serve

Kemudian ketik URL berikut di browser Anda:

localhost:8080

Jika berjalan dengan baik, berikut hasil akhirnya:

Sistem Informasi Penjualan dengan Codeigniter 4 - Part 7 - Grafik Penjualan dan Latest Transaction

Download Full Source Code

Silahkan download source code pada part ke 7 membuat system informasi penjualan dengan Codeigniter 4 – Grafik pada link di bawah ini:

Download Source Code

Apa Selanjutnya?

Alhamdulillah pada part ke 7 membangun sistem informasi penjualan dengan Codeigniter 4 Part #7 – Grafik sudah selesai dalam waktu singkat.

… tapi Anda jangan puas dulu, sebab Anda masih perlu masuk ke tahap akhir.

Apa itu?

Insya Allah pada part selanjutnya akan membahas fitur Authentication Login dan Register pada aplikasi ini.

Silahkan komentar jika terdapat error untuk kita diskusikan bersama.

Selamat belajar …

Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

10 Replies to “Sistem Informasi Penjualan dengan Codeigniter 4 Part #7 –…”

  1. Halo,
    Tulisan yang sangat membantu buat belajar CI4.
    BTW, kalau saya mau menampilkan username dari user yang sedang Login, gimana ya?
    Pada contoh ini kan username nya masih Admin seperti yang saya liat pada code nya baris 13-15

    Admin

    Thanks.

    1. Di part 8 ada pembahasan login. Di sana juga ada set session untuk username dan name, nah itu bisa digunakan untuk menampilkan user yang sedang login.

  2. Mas, saya mendapati error saat load grafik, dengan pesan undefined variable hasil, mohon bantuannya

Leave a Reply

Your email address will not be published. Required fields are marked *

Jika terbantu dengan artikel ini, silahkan share, beri komentar dan "klik" 1 kali pada iklan ya.