Hai para Laravel developers semoga tetap sehat dan semangat terus ngodingnya ya… 😀 Pada tutorial kali ini saya akan coba membahas secara singkat “Bagaimana cara menggunakan Google Charts di Laravel 8. Temen-temen disini akan belajar untuk membuat chart yang dinamis di Laravel 8.

Mungkin temen-temen ada yang nyasar menemukan artikel ini, bisa jadi temen-temen lagi eksplorasi belajar untuk buat Chart, atau bisa jadi juga temen-temen lagi dapet proyek yang ingin menerapkan fitur Chart didalamanya. Oke, berarti Anda berada pada artikel yang tepat. Hehe

Baca juga:

Belajar Laravel Dari Dasar Sampai Ekspert Lengkap

Sebenernya ada banyak cara untuk kita membuat chart pada aplikasi web kita. Nah, salah satu alternatif yang bisa temen-temen gunakan yakni Google Charts. Kita tau bahwa Google adalah perusahaan teknologi raksasa yang cukup banyak supportnya untuk para pengembang aplikasi.

Google menyediakan banyak sekali alternatif API yang bisa kita gunakan, diantaranya: Map, Chart, Analytics, dll. Namun pada tutorial kali ini, kita akan fokus ke Google Charts nya yaa. Google Charts ini termasuk populer dikalangan para pengembang, selain mudah untuk digunakan, Google Chart juga memiliki tampilan yang simpel dan indah.

Ada banyak jenis Charts yang dapat kita gunakan, diantaranya: Bar Chart, Area Chart, Column Chart, Pie Chart, GEO Chart, Line Chart, dll. Pada artikel ini, saya akan gunakan Line Chart. Jika temen-temen ingin menggunakan jenis Chart lain, Anda tinggal rubah jenis Chart-nya saja. Cukup mudah bukan? Oke kita langsung ke tutorialnya.

Preview:

Preview Tampilan Google Chart

Silahkan temen-temen ikuti langkah-langkah dibawah ini:

1. Menginstal Laravel

Langkah pertama, terlebih dahulu pastikan temen-temen sudah memiliki project Laravel yang telah terinstal. Jika belum, silahkan lakukan instalasi terlebih dahulu dengan menggunakan kode perintah dibawah ini dan jalankan melalui terminal/CMD.

composer create-project --prefer-dist laravel/laravel laravel_googlechart

2. Membuat Migration dan Model

Langkah kedua, kali ini kita akan membuat database melalui fitur migration di Laravel dan sekaligus membuat model-nya. Silahkan jalankan kode program dibawah ini untuk membuat file migration, jalankan melalui terminal/CMD.

php artisan make:migration create_visitor_table

Setelah kita menjalankan perintah diatas, maka Laravel akan membuatkan 1 file migration yang berada pada direktori: database/migration. Anda akan menemukan file create_visitor_table disana kemudian tuliskan kode program dibawah ini pada file tersebut.

database/migrations/(time_generate)_create_visitor_table.php

<?php
  
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
  
class CreateVisitorTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('visitors', function (Blueprint $table) {
            $table->id();
            $table->integer('click');
            $table->integer('viewer');
            $table->timestamps();
        });
    }
 
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('visitor');
    }
}

Selanjutnya jalankan kode perintah dibawah ini untuk melakukan migration dan Laravel akan membuatkan tabel beserta kolomnya.

php artisan migrate

Oke, untuk data percobaan, sepertinya kita harus memasukan data bohongan dulu. Temen-temen dapat menginputkannya secara manual di phpMyAdmin. Saya menginputnya seperti ini.

Inputan data untuk uji coba data bohongan

Let’s go.. sekarang kita akan buat model-nya. Untuk membuat model pada Laravel, silahkan jalankan kode program dibawah ini pada terminal/CMD.

php artisan make:model Visitor

Kemudian sesuaikan dengan kode program dibawah ini. Tapi sepertinya temen-temen gak perlu input deh. Karena dari bawaannya sudah seperti ini. Wkwk… 😀

app/Models/Visitor.php

<?php
  
namespace App\Models;
  
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
  
class Visitor extends Model
{
    use HasFactory;
}

3. Membuat Route

Langkah ketiga, kali ini kita membutuhkan route. Route ini akan kita gunakan untuk mengatur alur url, dimana url ini nantinya akan kita arahkan ke halaman tampilan chart. Silahkan temen-temen tambahkan kode program dibawah ini pada route.

routes/web.php

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\HomeController;


Route::get('google-line-chart', [HomeController::class, 'googleLineChart']);

4. Membuat Controller

Langkah keempat, untuk mengola data dari database dan meprosesnya menjadi data json yang terstruktur, maka kita memerlukan satu file controller. Kita akan berikan nama “HomeController” untuk file ini. Silahkan temen-temen jalankan kode program dibawah ini untuk membuat HomeController, jalankan pada terminal/ CMD anda.

php artisan make:controller HomeController

Kemudian, masukan kode program dibawah ini pada file HomeController tersebut.

app/Http/Controllers/HomeController.php

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use App\Models\Visitor;
use DB;
  
class HomeController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function googleLineChart()
    {
        $visitor = Visitor::select(
                        DB::raw("year(created_at) as year"),
                        DB::raw("SUM(click) as total_click"),
                        DB::raw("SUM(viewer) as total_viewer")) 
                    ->orderBy(DB::raw("YEAR(created_at)"))
                    ->groupBy(DB::raw("YEAR(created_at)"))
                    ->get();
  
        $result[] = ['Year','Click','Viewer'];
        foreach ($visitor as $key => $value) {
            $result[++$key] = [$value->year, (int)$value->total_click, (int)$value->total_viewer];
        }
  
        return view('google-line-chart')
                ->with('visitor',json_encode($result));
    }
}

5. Membuat File Tampilan Chart

Langkah kelima, kita perlu  membuat satu file lagi untuk menampilkan halaman chart. Pada halaman ini Google Chart akan mengonsumsi data json yang telah dibuat pada HomeController. Silahkan temen-temen buat file-nya dan beri nama “google-line-chart.blade.php”. Kemudian masukkan kode program dibawah ini pada file tersebut.

resources/view/google-line-chart.blade.php

<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>Google Charts: Serambi Laravel</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      var visitor = <?php echo $visitor; ?>;
      console.log(visitor);
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable(visitor);
        var options = {
          title: 'Site Visitor Line Chart',
          curveType: 'function',
          legend: { position: 'bottom' }
        };
        var chart = new google.visualization.LineChart(document.getElementById('linechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <!-- Image and text -->
    <nav class="navbar navbar-light bg-light">
    <div class="container-fluid px-5">
        <a class="navbar-brand" href="#">
        <img src="https://serambilaravel.com/wp-content/uploads/2021/01/Serambi-Laravel-Icon.png" alt="" width="30" height="30" class="d-inline-block align-top">
        <b>Serambi</b> Laravel - Catatan Koding Seputar Framework Laravel
        </a>
    </div>
    </nav>
    </br>
    <div class="container-fluid px-1">
        <div id="linechart" style="width: 900px; height: 500px"></div>
    </div>
  </body>
</html>

6. Jalankan Server

Langkah terakhir untuk mengetesnya, silahkan jalankan kode perintah dibawah ini pada terminal/CMD anda.

php artisan serve

Untuk menjalankan di browser, anda dapat mengaksesnya di http://127.0.0.1:8000/google-line-chart. Oke, aplikasi google chartnya sudah berhasil. Selamat mencoba,… 🙂

Catatan:

  1. Laravel versi 8 yang digunakan untuk mengetes project ini
  2. Sebelum melakukan migration pastikan project Laravel sudah terhubung ke database (tutorialnya disini)
  3. Untuk temen-temen yang masih bingung, silahkan tanyakan di kolom komentar ya
https://blog.abdan.xyz/
Do you like Abdan Zam Zam Ramadhan's articles? Follow on social!
People reacted to this story.
Show comments Hide comments
Comments to: Cara Menggunakan Google Charts di Laravel 8?

Write a response to Abdan Zam Zam Ramadhan, S.T.Cancel reply

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

Attach images - Only PNG, JPG, JPEG and GIF are supported.