Blog
Tutorial Membuat Chart Dari Database Pada Framework Laravel
Chart adalah sebuah visualisasi berbentuk grafik yang biasanya menyampaikan sebuah informasi tertentu, fitur ini sering digunakan pada sebuah aplikasi untuk menyajikan informasi agar mudah dibaca oleh pengguna. pada artikel kali ini kita akan membuat laporan dalam bentuk chart menggunakan framework laravel dan library laravel chart.
Instalasi Framework Laravel
Yang pertama harus anda persiapkan adalah sebuah project laravel baru, kalau belum punya silahkan buat sebuah project laravel baru dengan perintah :
composer create-project --prefer-dist laravel/laravel blog
Instalasi Library Laravel Chart
langkah selanjutnya kita akan melakukan instalasi library laravel chart yang dibuat oleh mas Erik Campobadal, library ini support beberapa library chart seperti Chartjs, Highcharts, Fusioncharts, Echarts, Frappe dan C3. silahkan instalasi library via composer dengan perintah :
composer require consoletvs/charts:6.*
setelah proses instalasi berhasil, maka selanjutnya silahkan buka file app.php yang berda difolder config dan tambahkan baris ini pada block provider :
ConsoleTVs\Charts\ChartsServiceProvider::class,
setelah itu kita harus melakukan publish file configurasi dengan perintah dibawah ini :
php artisan vendor:publish --tag=charts_config
Membuat Chart Dengan Laravel Dan Library Chart
sekarang kita masuk ke tahap pembuatan chart, langkah pertama yang harus kita lakukan adalah membuat sebuah chart class dengan perintah :
php artisan make:chart UserChart
setelah menjalankan perintah tersebut maka akan tercipta sebuah folder charts dan file baru dengan nama UserChart.php
selanjutnya silahkan buat sebuah controller baru yang akan kita gunakan untuk menulis logika chart,silahkan buat controller dengan perintah :
php artisan make:controller UserChartController -r
kemudian silahkan panggil class UserChart tadi dan buatlah sebuah object baru dari class tersebut, setelah membuat object maka kita harus mendefinisikan property label dan dataset seperti dibawah ini :
<?php
namespace App\Http\Controllers;
use App\Charts\UserChart;
use Illuminate\Http\Request;
class UserChartController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$usersChart = new UserChart;
$usersChart->labels(['Jan', 'Feb', 'Mar']);
$usersChart->dataset('Users by trimester', 'line', [10, 25, 13]);
return view('users', [ 'usersChart' => $usersChart ] );
}
}
sekarang kita akan membuat sebuah view untuk menampilkan chart yang akan dilihat oleh pengguna,buatlah sebuah view baru dengan nama users.blade.php dan tambahkan script berikut :
@extends('template')
@section('content')
<h1>Users Graphs</h1>
<div style="width: 50%">
{!! $userChart->container() !!}
</div>
@endsection
@push('js')
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.6/highcharts.js" charset="utf-8"></script>
{!! $usersChart->script() !!}
@endpush
selanjutnya silahkan buat sebuah file view baru dengan nama template.blade.php dan tambahkan script berikut :
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
@guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
@if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
@endif
@else
<li class="nav-item">{{ link_to('/book','Manage Books',['class'=>'nav-link'])}}</li>
<li class="nav-item">{{ link_to('/user','Manage User',['class'=>'nav-link'])}}</li>
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</div>
</li>
@endguest
</ul>
</div>
</div>
</nav>
<main class="py-4">
@yield('content')
</main>
</div>
<!-- App scripts -->
@stack('scripts')
</body>
</html>
Menambahkan Routing Untuk Menampilkan Chart
langkah terkahir kita harus menambahkan routing agar bisa mengakses halaman chart yang sudah kita but tadi, silahkan tambahkan baris perintah ini pada web.php :
Route::get('users', 'UserChartController@index');
untuk melihat hasilnya silahkan buka web browser dan masukan localhost:8000/users pada address bar maka akan tampil char seperti dibawah ini
Sekian tutorial cara membuat chart pada framework laravel dengan libray laravel chart, smeoga bermanfaat.
Referensi Artikel :
- https://charts.erik.cat/
- https://dev.to/arielsalvadordev/use-laravel-charts-in-laravel-5bbm
