Teladan – Teladan Web, menulis melalui blog

Membuat Grafik menggunakan Javascript

Salah satu cara membuat grafik dengan menggunakan Javascript adalah dengan apexchart. Silahkan buka di situs https://apexcharts.com/.

Beberapa keunggulan yang dimiliki oleh apexcharts adalah

Responsif

ApexCharts berskala anggun di desktop, tablet, dan ponsel. Anda dapat mengatur permintaan responsif dan dapat memiliki tata letak yang berbeda untuk ukuran layar yang berbeda.

Interaktif

Zoom, Pan, Gulir data, beralih visibilitas set data dalam beberapa seri, tampilkan tooltip informatif saat pengguna melayang di atas titik data. Masing-masing opsi ini membantu untuk mengkomunikasikan data secara lebih efektif.

Dinamis

Sifat dinamis ApexCharts memungkinkan Anda memuat data pada pilihan dan membuat grafik lain berdasarkan pilihan itu. Dengan kata lain, ini adalah fitur yang akan membuat data Anda benar-benar interaktif.

Performa Tinggi

Selain memberikan penampilan yang menyenangkan untuk grafik Anda, ApexCharts juga memberikan kinerja tinggi.
Uji sendiri dengan memberikan sejumlah besar titik data.

Plot visualisasi seri waktu berkinerja tinggi

Terima kasih kepada teman-teman kami di FusionCharts, Anda sekarang memiliki pengalaman data yang lebih baik dari data deret waktu Anda dengan fitur-fitur seperti navigator waktu visual, anotasi dengan penanda tanggal dan acara, analisis multi-variasi, dan dukungan waktu nyata.

Anotasi

Beri anotasi bagan Anda dengan menempatkan label di atasnya untuk membantu pengguna Anda menafsirkan bagan dengan mudah. Anda dapat menambahkan anotasi pada kedua sumbu serta pada titik xy tertentu.

Animasi yang halus

ApexCharts memberikan pengalaman interaktif yang lancar saat mengubah dataset, memuat data dinamis dan berinteraksi dengan grafik.

Lihat demo animasi untuk melihat contoh langsung.

Elemen bagan penataan

Tambahkan gradien, gambar, pola, dan dropshadows ke elemen bagan dan berikan bagan Anda tampilan yang disesuaikan.

Palet Tema

ApexCharts memiliki 10+ palet warna untuk dipilih. Pilih tema warna yang sudah ditentukan sebelumnya atau buat tema Anda sendiri.

Ekspor dasbor lengkap

Ingin mengekspor dasbor Anda ke PDF, mengirimnya melalui email atau hanya mengekspor grafik di sisi server? Anda dapat melakukan ini dan lebih banyak lagi dengan FusionExport, produk baru dari teman-teman kami di FusionCharts.

Cara mengatasi error file_get_contents()

Terkadang kita mengalami kendala pada server atau hosting ketika menggunakan fungsi file_get_contents() pada PHP.
Langkah yang harus dilakukan adalah cek server, apakah allow_url_fopen aktif atau tidak. Jika allow_url_fopen statusnya tidak aktif, maka fungsi file_get_contents() tidak akan berjalan.

Cara cek allow_url_fopen

<?php
    ini_set("allow_url_fopen", 1);
    if (ini_get("allow_url_fopen") == 1) {
        echo "allow_url_fopen is ON";
    } else {
        echo "allow_url_fopen is OFF";
    }
    print ini_get("allow_url_fopen"); 
?>

<?php

ini_set("allow_url_fopen", 1);

if (ini_get("allow_url_fopen") == 1) {

echo "allow_url_fopen is ON";

} else {

echo "allow_url_fopen is OFF";

}

print ini_get("allow_url_fopen");

Untuk mengatasi allow_url_fopen agar kondisi menjadi ON maka perlu menambahkan baris allow_url_fopen = On pada file php.ini

Cara menambahkan koding pada artikel WordPress

Ada beberapa yang penasaran dengan artikel WordPress yang berisi koding. Koding tersebut ditampilkan dengan huruf yang berbeda, sudah dilengkapi warna, dan dilengkapi dengan nomor baris.

Cara menambahkan coding pada wordpress dengan menggunakan plugin Crayon Syntax Highlighter. Pertama install terlebih dahulu plugin Crayon Syntax Highlighter. Setelah selesai instalasi, aktifkan plugin tersebut. Cara penggunaan pada artikel pilih block html. Pada awal kode ditulis <pre> dan pada akhir kode ditulis </pre>. Berikut contohnya.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Admin extends CI_Controller 
{

	public function __construct()
	{
		parent::__construct();
		is_logged_in();
	}

	public function index()
	{
		$data['title'] = "Dashboard";
		$data['user'] = $this->db->get_where('user', ['email' => $this->session->userdata('email')])->row_array();
		
		$this->load->view('templates/header', $data);
		$this->load->view('templates/sidebar', $data);
		$this->load->view('templates/topbar', $data);
		$this->load->view('admin/index', $data);
		$this->load->view('templates/footer');
	}

	public function role()
	{
		$data['title'] = "Role";
		$data['user'] = $this->db->get_where('user', ['email' => $this->session->userdata('email')])->row_array();
		
		$data['role'] = $this->db->get('user_role')->result_array();

		$this->load->view('templates/header', $data);
		$this->load->view('templates/sidebar', $data);
		$this->load->view('templates/topbar', $data);
		$this->load->view('admin/role', $data);
		$this->load->view('templates/footer');
	}	

	public function roleAccess($role_id)
	{
		$data['title'] = "Role";
		$data['user'] = $this->db->get_where('user', ['email' => $this->session->userdata('email')])->row_array();
		
		$data['role'] = $this->db->get_where('user_role', ['id' => $role_id])->row_array();

		$this->db->where('id !=', 1); //menu admin tidak perlu ditampilkan
		$data['menu'] = $this->db->get('user_menu')->result_array();

		$this->load->view('templates/header', $data);
		$this->load->view('templates/sidebar', $data);
		$this->load->view('templates/topbar', $data);
		$this->load->view('admin/role-access', $data);
		$this->load->view('templates/footer');
	}

	public function changeAccess() 
	{
		$menu_id = $this->input->post('menuId');
		$role_id = $this->input->post('roleId');

		$data = [
			'role_id' => $role_id,
			'menu_id' => $menu_id
		];

		$result = $this->db->get_where('user_access_menu', $data);

		if($result->num_rows() < 1) {
			$this->db->insert('user_access_menu', $data);
		} else {
			$this->db->delete('user_access_menu', $data);
		}

		$this->session->set_flashdata('message', '<div class="alert alert-success" role="alert">Access Changed!</div>');
	}

}
?>

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Admin extends CI_Controller

{

public function __construct()

{

parent::__construct();

is_logged_in();

}

public function index()

{

$data['title'] = "Dashboard";

$data['user'] = $this->db->get_where('user', ['email' => $this->session->userdata('email')])->row_array();

$this->load->view('templates/header', $data);

$this->load->view('templates/sidebar', $data);

$this->load->view('templates/topbar', $data);

$this->load->view('admin/index', $data);

$this->load->view('templates/footer');

}

public function role()

{

$data['title'] = "Role";

$data['user'] = $this->db->get_where('user', ['email' => $this->session->userdata('email')])->row_array();

$data['role'] = $this->db->get('user_role')->result_array();

$this->load->view('templates/header', $data);

$this->load->view('templates/sidebar', $data);

$this->load->view('templates/topbar', $data);

$this->load->view('admin/role', $data);

$this->load->view('templates/footer');

}

public function roleAccess($role_id)

{

$data['title'] = "Role";

$data['user'] = $this->db->get_where('user', ['email' => $this->session->userdata('email')])->row_array();

$data['role'] = $this->db->get_where('user_role', ['id' => $role_id])->row_array();

$this->db->where('id !=', 1); //menu admin tidak perlu ditampilkan

$data['menu'] = $this->db->get('user_menu')->result_array();

$this->load->view('templates/header', $data);

$this->load->view('templates/sidebar', $data);

$this->load->view('templates/topbar', $data);

$this->load->view('admin/role-access', $data);

$this->load->view('templates/footer');

}

public function changeAccess()

{

$menu_id = $this->input->post('menuId');

$role_id = $this->input->post('roleId');

$data = [

'role_id' => $role_id,

'menu_id' => $menu_id

];

$result = $this->db->get_where('user_access_menu', $data);

if($result->num_rows() < 1) {

$this->db->insert('user_access_menu', $data);

} else {

$this->db->delete('user_access_menu', $data);

}

$this->session->set_flashdata('message', '<div class="alert alert-success" role="alert">Access Changed!</div>');

}

Terkadang block koding tidak otomatis terdeteksi di Crayon Syntax Highlighter. Agar postingan bisa berubah ke format sesuai plugin Crayon Sintax Highlighter maka dengan acara menuju plugin wordress. Non-aktifkan plugin Crayon Syntax Highlighter, kemudian aktifkan kembali.

Cara Menggunakan API Google Calender

Dengan API Google Calender kita dapat melakukan sinkronisasi antara aplikasi kita dengan Google Calender. Tutorial ini menggunakan bahasa pemrograman PHP dalam mengimplementasikan API Google Calender.

Hal-hal yang perlu disiapkan sebelum dalam menggunakan API Google Calender

PHP versi 5.4 atau yang lebih baru
Sudah terinstall composer. Bagi yang belum melakukan instalasi composer dapat melihat artikel Cara Install Composer pada Windows.
Google akun dan sudah mengaktifkan Google Calender.

Berikut langkah-langkah untuk menggunakan API Google Calender

Aktifkan API Google Calender. Download credentials.json
Install Google Client Library.

Silahkan dicek di windows explorer. File dependency Google Client Library sudah ada.
Buat file calender.php

<?php
require __DIR__ . '\autoload.php';

if (php_sapi_name() != 'cli') {
    throw new Exception('This application must be run on the command line.');
}

function getClient()
{
    $client = new Google_Client();
    $client->setApplicationName('Google Calendar API PHP Quickstart');
    $client->setScopes(Google_Service_Calendar::CALENDAR_READONLY);
    $client->setAuthConfig('credentials.json');
    $client->setAccessType('offline');
    $client->setPrompt('select_account consent');

    // Load previously authorized token from a file, if it exists.
    // The file token.json stores the user's access and refresh tokens, and is
    // created automatically when the authorization flow completes for the first
    // time.
    $tokenPath = 'token.json';
    if (file_exists($tokenPath)) {
        $accessToken = json_decode(file_get_contents($tokenPath), true);
        $client->setAccessToken($accessToken);
    }

    // If there is no previous token or it's expired.
    if ($client->isAccessTokenExpired()) {
        // Refresh the token if possible, else fetch a new one.
        if ($client->getRefreshToken()) {
            $client->fetchAccessTokenWithRefreshToken($client->getRefreshToken());
        } else {
            // Request authorization from the user.
            $authUrl = $client->createAuthUrl();
            printf("Open the following link in your browser:\n%s\n", $authUrl);
            print 'Enter verification code: ';
            $authCode = trim(fgets(STDIN));

            // Exchange authorization code for an access token.
            $accessToken = $client->fetchAccessTokenWithAuthCode($authCode);
            $client->setAccessToken($accessToken);

            // Check to see if there was an error.
            if (array_key_exists('error', $accessToken)) {
                throw new Exception(join(', ', $accessToken));
            }
        }
        // Save the token to a file.
        if (!file_exists(dirname($tokenPath))) {
            mkdir(dirname($tokenPath), 0700, true);
        }
        file_put_contents($tokenPath, json_encode($client->getAccessToken()));
    }
    return $client;
}


// Get the API client and construct the service object.
$client = getClient();
$service = new Google_Service_Calendar($client);

// Print the next 10 events on the user's calendar.
$calendarId = 'primary';
$optParams = array(
  'maxResults' => 10,
  'orderBy' => 'startTime',
  'singleEvents' => true,
  'timeMin' => '2019-07-01T08:36:00.000Z',
  'timeMax' => '2019-07-31T08:36:00.000Z',
);
$results = $service->events->listEvents($calendarId, $optParams);
$events = $results->getItems();

if (empty($events)) {
    print "No upcoming events found.\n";
} else {
    print "Upcoming events:\n";
    foreach ($events as $event) {
        $start = $event->start->dateTime;
        if (empty($start)) {
            $start = $event->start->date;
        }
        echo $event->getSummary(), " | ", $start;
        echo "\n";
        echo $event->creator->email;
        echo "\n";
        echo $event->getDescription();
        echo "\n";
        echo "===========================================\n";
    }
}
?>

<?php

require __DIR__ . '\autoload.php';

if (php_sapi_name() != 'cli') {

throw new Exception('This application must be run on the command line.');

}

function getClient()

{

$client = new Google_Client();

$client->setApplicationName('Google Calendar API PHP Quickstart');

$client->setScopes(Google_Service_Calendar::CALENDAR_READONLY);

$client->setAuthConfig('credentials.json');

$client->setAccessType('offline');

$client->setPrompt('select_account consent');

// Load previously authorized token from a file, if it exists.

// The file token.json stores the user's access and refresh tokens, and is

// created automatically when the authorization flow completes for the first

// time.

$tokenPath = 'token.json';

if (file_exists($tokenPath)) {

$accessToken = json_decode(file_get_contents($tokenPath), true);

$client->setAccessToken($accessToken);

}

// If there is no previous token or it's expired.

if ($client->isAccessTokenExpired()) {

// Refresh the token if possible, else fetch a new one.

if ($client->getRefreshToken()) {

$client->fetchAccessTokenWithRefreshToken($client->getRefreshToken());

} else {

// Request authorization from the user.

$authUrl = $client->createAuthUrl();

printf("Open the following link in your browser:\n%s\n", $authUrl);

print 'Enter verification code: ';

$authCode = trim(fgets(STDIN));

// Exchange authorization code for an access token.

$accessToken = $client->fetchAccessTokenWithAuthCode($authCode);

$client->setAccessToken($accessToken);

// Check to see if there was an error.

if (array_key_exists('error', $accessToken)) {

throw new Exception(join(', ', $accessToken));

}

// Save the token to a file.

if (!file_exists(dirname($tokenPath))) {

mkdir(dirname($tokenPath), 0700, true);

}

file_put_contents($tokenPath, json_encode($client->getAccessToken()));

}

return $client;

}

// Get the API client and construct the service object.

$client = getClient();

$service = new Google_Service_Calendar($client);

// Print the next 10 events on the user's calendar.

$calendarId = 'primary';

$optParams = array(

'maxResults' => 10,

'orderBy' => 'startTime',

'singleEvents' => true,

'timeMin' => '2019-07-01T08:36:00.000Z',

'timeMax' => '2019-07-31T08:36:00.000Z',

);

$results = $service->events->listEvents($calendarId, $optParams);

$events = $results->getItems();

if (empty($events)) {

print "No upcoming events found.\n";

} else {

print "Upcoming events:\n";

foreach ($events as $event) {

$start = $event->start->dateTime;

if (empty($start)) {

$start = $event->start->date;

}

echo $event->getSummary(), " | ", $start;

echo "\n";

echo $event->creator->email;

echo "\n";

echo $event->getDescription();

echo "\n";

echo "===========================================\n";

}

Jalankan file calender.php, dengan cara ketik “php calender.php”

Setelah dijalankan akan muncul link sebagai berikut

Copy kemudian jalankan di browser.

Buka Quickstart (tidak aman). Kemudian pilih akun google.

Berikan izin ke Quickstart, pilih Izinkan.

Melihat calender Anda, pilih Izinkan lagi

Muncul code otorisasi sebagai berikut.

Copy code tersebut dan tempel di command prompt. Kemudian enter. Selamat, Anda sudah dapat mengakses data dari Google Calender.

Beberapa variable yang dapat diambil dari Google Calender:

$event->getSummary() : Judul event
$event->creator->email : Email pembuat
$event->getDescription() : Deskripsi event
$event->start->dateTime : Waktu awal event
$event->end->dateTime: Waktu akhir event

Cara Install Composer pada Windows

Composer adalah aplikasi package manager untuk bahasa pemrograman PHP yang menyediakan format standar untuk mengelola dependensi PHP dan pustaka-pustaka yang diperlukan. Composer dikembangkan oleh Nils Adermann dan Jordi Boggiano. Mereka mulai pengembangan pada bulan April 2011 dan merilis Composer pertama kali pada tanggal 1 Maret 2012.

Composer berjalan melalui baris perintah dan menginstal dependensi (pustaka perangkat lunak) untuk aplikasi. Hal ini juga memungkinkan pengguna untuk menginstal aplikasi PHP yang tersedia di “Packagist” yang mana itu adalah repositori utamanya. Hal ini juga menyediakan kemampuan autoload untuk pustaka yang menentukan autoload informasi untuk kemudahan penggunaan kode pihak ketiga.

Berikut langkah-langkat untuk menginstall composer pada Windows.

Download installer composer. Silahkan download di https://getcomposer.org/download/
Jalankan Composer-Setup.exe
Pada developer mode tidak perlu dicentang, langsung next.
Pilih lokasi php.exe. Di komputer saya diinstal di D:/xampp/php/php.exe
Proxy Setting, langsung next saja.
Pilih install
Kemudian pilih next lagi
Finish. Composer sudah berhasil diinstal.

Untuk melihat hasilnya, Anda buka command prompt. Kemudian ketik composer. Berikut tampilan composer yang sudah diinstall di komputer.