Laravel
sebagai sebuah framework php sudah menyediakan banyak sekali helper yang bisa
kita pakai sesuai dengan kebutuhan kita. Namun bagaimana kalau helper itu tidak
tersedia di Laravel atau kita ingin menggunakan helper buatan kita sendiri,
atau mungkin kita ingin menambahkan sebuah helper dari pengembang lain selain
di laravel dan kita masukkan ke dalam helper Laravel.
Sebagai contoh
saya ingin membuat sebuah chart di laravel dengan menggunakan helper atau class
yang disediakan oleh https://www.fusioncharts.com. Walaupun ada pengembang Laravel juga yang
menyediakan class untuk membuat sebuah chart yaitu di http://lavacharts.com/ ,
namu karena style chart yang saya inginkan tidak tersedia di lavachart makanya
saya menggunakan chart yang disediakan oleh fusionchart karena chart yang saya
inginkan tersedia disana.
Sebelumnya
download terlebih dahulu class fusioncharts di https://www.fusioncharts.com/. Untuk belajar cukup download versi trial saja. Setelah
selesai download nanti kita akan mendapatkan file berbentuk zip, silahkan
segera di extract file zip yang baru saja di download tadi. Nanti struktur
foldernya seperti gambar di bawah
Silahkan dibukan
folder integrations/php/sample/include. Nah di
folder include tersebut ada file fusioncharts.php.
file itu yang nantinya kita jadikan helper untuk pembuatan chart di laravel.
Selanjutkan ikutin langkah – langkah berikut.
Silahkan buat sebuah
folder dengan nama “Helper” di dalam
folder App yang ada di project laravel. Kemudian copy file fusioncharts.php
yang tadi ke dalam folder Helper tersebut
Langkah selanjutnya
silahkan buat sebuah service provider dengan nama fusionchartsProvider dengan
menggunakan php artisan di command prompt dengan mengetik perintah
php
artisan make:provider fusionchartsProvider
Maka aka nada file
baru di folder App\Providers\fusionchartsProvider.php,
silahkan buka file tersebut dan kita akan mendapati ada dua method yaitu boot
dan register, pada method register silahkan tambahkan code
public function register()
{
require_once app_path() . '\Helpers\fusioncharts.php';
}
Langkah
selanjutnya adalah mendeclare Service Provider yang baru kita buat agar bisa
digunakan di Laravel. Buka file config/app.php dan
tambahkan code pada providers :
App\Providers\fusionchartsProvider::class,
Agar
penggunaaannya nanti jadi lebih mudah silahkan tambahkan helper tadi di bagian
alias dengan code :
'FusionCharts' => App\Helpers\fusioncharts::class,
Dengan
menentukan alias ini, makan nantinya kita dapat menggunakan helper kita dengan
keyword FusionCharts, untuk lengkapnya nanti bisa dilihat di pembahasan tersendiri mengenai
fusioncharts.
Nah
class FusionCharts sekarang sudah siap untuk
digunakan di Laravel. contoh penggunaan class FusionCharts
controller ataupun di view Laravel dengan mengetikkan FusionCharts
secara langsung.
Cara penggunaan helper di
Controller
Helper
yang sudah kita masukkan tadi di Laravel sudah mempunyai nama alias yaitu
FusionChart, untuk menggunakannya di bagian controller kita perlu memanggilnya
terlebih dahulu dengan menggunakan use
use FusionCharts;
untuk
penggunaannya
$columnChart = new FusionCharts()
Silahkan
untuk penggunaan lengkapnya bisa dilihat di websitenya langsung di https://www.fusioncharts.com/php-charts.
Atau nanti saya akan membuat pembahasan khusus mengenai penggunaan FusionCharts ini. Namun di bawah nanti saya buat
contoh sederhana penggunaannya.
Cara penggunaan helper di View
Untuk
menggukan helper yang tadi kita buat di View tidak perlu lagi menggunakan use,
namun kita cukup saja langsung bisan menggunakannya seperti di controller.
Contoh penggunaan
Karena
pada contoh kali ini saya menggunakan helper Fusioncharts maka saya berikan
contoh Fusioncharts. Bagi teman – teman yang menggunakan helper lainnya
silahkan menyesuaikan dengan class atau helper yang anda buat.
Contoh
berikut saya langsung membuat chart menggunakan Fusioncharts di View (blade).
$columnChart = new FusionCharts("msspline", "ex1", "100%", 400, "chart-1", "json", "
{
"chart": {
"caption": "Support Tickets
: Received vs Resolved",
"yaxisname": "# of
Tickets",
"subcaption": "Last week",
"numdivlines": "3",
"showvalues": "0",
"legenditemfontsize": "15",
"legenditemfontbold": "1",
"plottooltext": "$dataValue Tickets $seriesName on $label",
"theme": "fusion"
},
"categories": [
{
"category": [
{
"label": "Jan 1"
},
{
"label": "Jan 2"
},
{
"label": "Jan 3"
},
{
"label": "Jan 4"
},
{
"label": "Jan 5"
},
{
"label": "Jan 6"
},
{
"label": "Jan 7"
}
]
}
],
"dataset": [
{
"seriesname": "Received",
"data": [
{
"value": "55"
},
{
"value": "45"
},
{
"value": "52"
},
{
"value": "29"
},
{
"value": "48"
},
{
"value": "28"
},
{
"value": "32"
}
]
},
{
"seriesname": "Resolved",
"data": [
{
"value": "50"
},
{
"value": "30"
},
{
"value": "49"
},
{
"value": "22"
},
{
"value": "43"
},
{
"value": "14"
},
{
"value": "31"
}
]
}
]
}");
$columnChart->render();
?>
untuk menampilkan
hasil chart tadi tambahkan div dengan id chart-1
Semoga
tutorial kali ini dapat bermanfaat
No comments:
Post a Comment