• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Jaranguda

Belajar Mengajar

  • Home
  • Sponsor/Jasa
  • Tentang

Membuat Grafik dari Database dengan Codeigniter 4

Last Updated on 12 February 2020 By tommy Leave a Comment

Codeigniter 4 memang belum resmi di luncurkan, saat ini masih tahap Release Candidat (RC) 4, tetapi tidak ada salahnya kita menggunakannya untuk bahan pembelajaran. Sejak Codeigniter 4, kita sudah bisa menggunakan composer untuk menginstallnya. Dengan menggunakan bantuan composer, proses update core menjadi jauh lebih mudah, cukup dengan bantuan composer update

Pada versi 4, Codeigniter datang dengan CodeIgniter CLI Tool yang diberi nama spark, seperti artisan di Laravel. Support untuk .env juga sudah build-in, yang tidak kalah pentingnya adalah development server php spark serve

Di grafik ini akan kita tampilkan data penjualan mobil, import file dibawah ini kedalam mysql/phpMyAdmin

CREATE TABLE `penjualanmobil` (
  `id` INT(11) NOT NULL,
  `jenismobil` VARCHAR(50) NOT NULL,
  `2018` INT(11) NOT NULL,
  `2019` INT(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
 
INSERT INTO `penjualanmobil` (`id`, `jenismobil`, `2018`, `2019`) VALUES
(1, 'Toyota Avanza', 6890, 7010),
(2, 'Toyota Rush', 6100, 5600),
(3, 'Mitsubishi Xpander', 5875, 5900),
(4, 'Honda Brio Satya', 6655, 6700),
(5, 'Toyota Calya', 5167, 5000),
(6, 'Kijang Innova', 6123, 6011),
(7, 'Pajero Sport', 3154, 2430);
 
-- Indexes for table `penjualanmobil`
--
ALTER TABLE `penjualanmobil`
  ADD PRIMARY KEY (`id`);

Install CodeIgniter 4 RC

karena ini versi RC, bukan stable jadi di composer harus di install dengan tambahan parameter -s rc

composer create-project codeigniter4/appstarter codeigniter4 -s rc

folder project berada di folder codeigniter4, selanjutnya semua perintah yang dijalankan mulai dari folder ini.

Konfigurasi Database

Di folder codeigniter4, copy file env menjadi .env

cp env .env

buka file .env ubah

CI_ENVIRONMENT = development
database.default.hostname = localhost
database.default.database = codeigniter4
database.default.username = root
database.default.password = iniPassW0Rd
database.default.DBDriver = MySQLi

CI_ENVIRONMENT, gunakan development agar kita bisa melihat debugging diaktifkan. Settingan database.* sesuaikan dengan credential database yang anda miliki.

Membuat Model

Untuk akses ke database, kita akan menggunakan model, buat file app/Models/MobilModel.php, isi dengan script

<?php namespace App\Models;
 
use CodeIgniter\Model;
 
class MobilModel extends Model
{
    protected $table = 'penjualanmobil';
 
    public function getPenjualan()
    {
        return $this->findAll();
    }
 
}

Membuat Controller

Untuk controller, kita akan menggunakan default home Controller Codeigniter yang berada di app/Controllers/Home.php. Ubah controller tersebut menjadi

<?php namespace App\Controllers;
 
use App\Models\MobilModel;
 
class Home extends BaseController
{
	public function index()
	{
        $mobil = new MobilModel();
        $data = $mobil->getPenjualan();
 
        return view('grafik', compact('data'));
	}
}

View

Untuk template kita akan menggunakan template default Bootstrap 4

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="jaranguda.com tutorial codeigniter4">
    <title>Codeigniter 4 - Jaranguda.com</title>
 
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <style>
body {
  padding-top: 5rem;
}
 
    </style>
  </head>
  <body>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
 
  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu" aria-labelledby="dropdown01">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
 
<main role="main" class="container-fluid">
 
    <h1>Grafik dengan Codeigniter 4</h1>
 
</main><!-- /.container -->
<script src="https://code.highcharts.com/highcharts.js"></script>
</body>
</html>

Ubah template tersebut dengan me-looping variable $data, data yang kita butuhkan ada disana.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="jaranguda.com tutorial codeigniter4">
    <title>Codeigniter 4 - Jaranguda.com</title>
 
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <style>
body {
  padding-top: 5rem;
}
 
    </style>
  </head>
  <body>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
 
  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu" aria-labelledby="dropdown01">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
 
<main role="main" class="container-fluid">
 
    <h1>Grafik dengan Codeigniter 4</h1>
    <div id="chart"></div>
 
</main><!-- /.container -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
        var myChart = Highcharts.chart('chart', {
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Penjualan Mobil'
            },
            xAxis: {
                categories: ['2018', '2019']
            },
            yAxis: {
                title: {
                    text: 'Penjualan (unit)'
                }
            },
            series: [
                    <?php
                       foreach ($data as $index => $dt) {
                            echo "{name: '" . $dt['jenismobil'] . "'" .  ",data: [$dt[2018],$dt[2019]] },";
                        }
                    ?>
            ]
        });
    });
</script>
</body>
</html>

Menampilkan Grafik

Jalankan php spark serve, buka http://localhost:8080
grafik diagram chart codeigniter 4

Tulisan menarik lainnya

  • Membuat Form dengan Codeigniter

    Studi kasus kali ini adalah pembuatan form pendaftaran user di website. Database menggunakan MySQL. Buat…

  • Membuat Pencarian dengan CodeIgniter 3

    Script searching/pencarian ini adalah porting dari script Pencarian Laravel 5, jadi databasenya diambil dari sana…

  • Menampilkan Data Dari Database MySQL ke Combobox dengan PHP

    Pada tutorial kali ini, kita akan menampilkan data dari database kedalam combobox. Buat sebuah database…

  • Membuat Login dengan Delphi XE tanpa Database

    Buat design form seperti gambar dibawah ini komponen yang digunakan 2 TEdit, 2 TLabel dan…

Filed Under: PHP

Reader Interactions

Leave a Reply Cancel reply

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

Primary Sidebar

Pencarian

Tanya Jawab tentang DevOps SRE CPE, gabung di https://t.me/devopsindonesia

Terbaru

  • Cara Mengganti Port Screen Sharing macOS
  • Cara Menonaktifkan Pager di macOS
  • Cara Mengupdate Nama Apple silicon-as-a-Service Scaleway
  • Cara Force Delete Namespace di Kubernetes
  • Install PHP MariaDB di Mac Monterey

Komentar

  • mazda on Tutorial Lengkap Install Mail Server Postfix Dovecot MariaDB di CentOS 7
  • adi on Menggunakan Mikrotik Sebagai SSH Client
  • aris u on Solusi Simple Queue Mikrotik Tidak Berjalan
  • Bowo on Cara Mematikan SSID Molecool Balifiber
  • aris on Solusi Simple Queue Mikrotik Tidak Berjalan

Tulisan Populer

  • Password Router Huawei HG8245H5 Indihome 1.2m views
  • Password Terbaru ZTE F609 Indihome 784.5k views
  • Password Superadmin Huawei HG8245A 318.7k views
  • Cara Setting Manual Modem GPON ZTE F609 Indihome 273.1k views
  • Cara Setting Wireless ZTE F609 Indihome 257.2k views
  • Mengaktifkan Port LAN di Huawei HG8245 Indihome 169.9k views
  • Akses UseeTV Indihome via Wireless ZTE F609 156.8k views
  • Kemana Menghilangnya Saldo BCA 50 ribu 153.4k views
  • Cara Reset Password ZTE F609 Indihome 147.6k views
  • Cara Setting DHCP Server Modem/Router ZTE F609 113.6k views

Kategori

  • Delphi
  • dll
  • Gambas
  • Internet
  • Java
  • Lazarus
  • Linux
  • PHP
  • Review
  • Teknologi

Sponsor

kadal.id
carakami.com
kuotabisa.com
Untuk jadi sponsor, hubungi kita lewat halaman sponsor
© 2021. Jaranguda
  • Linux
  • PHP
  • Internet
  • Teknologi
  • Delphi
  • Gambas
  • Java