Motivasi Done

Cara mengkoneksikan Database Code Iqniter 3 dengan SQL Server (MSSQL)

Views diki irawan 5/15/2019 11:11:00 am Add Comment

Sebelumnya kita sudah membahas tentang cara menginstall SQLServer express 2014 lengkap dengan SQL Management studionya, Kali ini kita akan mengkoneksikan Code Iqniter 3 dengan SQL Server.

Pada tutorial ini, saya menggunakan bahan seperti dibawah ini
1.Xampp
2.Windows 10 64 bit
3.SQL Server 2014 Express
4.Code Iqniter 3.1.9
5.Php 5

Dan berikut ini langkah-langkah yang dilakukan hingga berhasil
1.Mengecek versi thread safaty pada php 5
2.Download dan menginstall Microsoft Driver For PHP For SQL Server versi 3.2
3.Kofigurasi manager pada SQL Server Configuration Server
4.Membuat database pada SQL Server Management Studio 2014
5.Melakukan Setting pada code Iqniter 3

Setelah mengetahui apa saja langkah yang diperlukan dan langkah-langkah dalam mengkoneksikan Code Iqniter 3 dengan SQL Server, mari langsung terjun ke tutorialnya

Mengecek versi thread safaty pada php 5

Untuk mengecek ini, silahkan aktifkan apache xampp kalian dan ketik localhost, dan pilih PHPInfo seperti gambar dibawah ini

Setelah itu, silahkan CTRL+F dan ketik thread untuk mengecek thread safety yang harusnya statusnya enable, selain itu, kita menggunakan php 5. seperti gambar dibawah ini

Kita sudah melakukan pengecekan, berikutnya ke langkah selanjutnya

Download dan menginstall Microsoft Driver For PHP For SQL Server versi 3.2

Pertama silahkan download ke situsnya secara langsung, kalian bisa klik disini download Driver 3.2. Setelah masuk ke situs, silahkan pilih button download yang berwarna orange, dan akan menampilkan pop up seperti dibawah ini

Silahkan kalian lakukan seperti gambar diatas, yaitu meng checklist SQLSRV32.EXE dan klik next.

Setelah selesai, silahkan lakukan penginstallan, cuma yang penting oke oke aja hehe dan simpan difoder yang kamu inginkan.

Karena saya membuat folder driver, maka saya menyimpannya di folder driver seperti gambar dibawah ini

Setelah itu masuklah ke folder milikmu, dan copy php_pdo_sqlsrv_56_ts.dll dan php_sqlsrv_56_ts.dll, seperti gambar dibawah ini

Setelah di copy, silahkan pindahkan ke xampp/Php/ext seperti dibawah ini

Selanjutnya kita mensetting PHP.ini, file ini berada pada xampp/php/php.ini seperti gambar dibawah ini

Setelah itu, klik kanan dan buka dengan editor anda. Lalu masukkan kodingan ini untuk mendaftarkan php_pdo_sqlsrv_56_ts.dll dan php_sqlsrv_56_ts.dll pada php

extension=php_sqlsrv_56_ts.dll
extension=php_pdo_sqlsrv_56_ts.dll

Seperti gambar dibawah ini

Jangan lupa disave, Selanjutnya mari ketahap selanjutnya

Kofigurasi manager pada SQL Server Configuration Server

Pada tahap ini, seharusnya kita sebelumnya telah mendownload SQL Server 2014 Express dan SQL Server Management Studio 2014. kalau belum silahkan ikuti buka tautan ini Cara menginstall SQL server 2014 Express & SQLManagement Studio Express 2014 Gratis

Pertama silahkan buka SQL Server 2014 Configurasi seperti gambar dibawah ini

Silahkan kalian yes saja dan akan menampilkan seperti gambar dibawah ini

Silahkan lakukan setingan seperti gambar diatas, yaitu
1.Mengklik Protocols for SQLEXPRESS
2.TCP/IP
3. Enabled Yes, Keep Alive 30000, dan listen All Yes

Setelah itu, silahkan klik IP Address dan lakukan setingan seperti dibawah ini

Silahkan lakukan seperti gambar diatas, yaitu
1. pilih IP Address
2.Scroll kebawah hingga menemukan IPAll
3.Kosongkan TCP Dynamic Ports
4.Isi TCP Port 1433, Ini kita gunakan untuk Setting di database CI nanti
5. Klik ok Sehingga setingan Protocol dan IP Address dapat kita simpan

Selanjutnya lakukan restart Server seperti gambar dibawah ini

Mari ke Langkah selanjutnya sekarang

Membuat database pada SQL Server Management Studio 2014

Sekarang kita membuat database di SQL Server terlebih dahulu untuk diuji coba ke Code Iqniter. Silahkan buka SQL Server Management Studio 2014 seperti gambar dibawah ini

Selanjutnya klik 2 kali dan akan menampilkan seperti gambar dibawah ini

Ini penting, Server Name merupakan host yang akan kita gunakan pada Code Iqniter, setelah memilih server namenya, klik connect, dan ikuti gambar dibawah ini untuk membuat database

Lakukan seperti gambar diatas, klik kanan Database dan pilih new database

Saya mencoba membuat nama dabasenya coba_sql seperti gambar diatas, lalu klik ok dan hasilnya database sudah terbuat seperti gambar dibawah ini

Tahap Ini sudah selesai, selanjutnya tahap terakhir

Melakukan Setting pada code Iqniter 3 dengan SQL Server

Silahkan buka folder Code Iqniter kalian di editor kalian. Lalu cari file database.php yang berada pada application/config dan lakukan setting seperti dibawah ini

Disini saya melakukan dengan setting dibawah ini
1.hostname : DIKI\SQLEXPRESS , ingat dimana kita sebelum membuat database tadi, ini adalah servernamenya

2.port: 1433, ini sama dengan port yang kita setting pada configurasi SQL Server sebelumnya

3.Untuk username dan password saya kosongi, karena kita saat membuka SQL Management memilih windows authintacation. ingat saat sebelum membuat database ya, tempatnya dibawah servername

4.database: coba_Sql, ini nama database yang kita buat sebelumnya

5.dbdriver:sqlsrv, ini adalah setingan untuk memilih SQL server untuk database kit

Selesai

Itu dia tahapan dari awal hingga akhir melakukkan setting, jika kamu mau melakukannya dengan baik, silahkan kunjungi Cara menginstall SQL server 2014 Express & SQLManagement Studio Express 2014 Gratis baru mengikuti tutorial ini

Cara menginstall SQL server 2014 Express & SQLManagement Studio Express 2014 Gratis

Views diki irawan 5/15/2019 09:48:00 am 3 Comments

Beberapa waktu lalu, saya dibuat pusing dengan yang namanya SQL Server, lantaran saya tidak tahu cara menginstal, apa saja yang harus diinstal dan bagaimana cara menggunakannya.

Sebenarnya saya membuat ini untuk catatan,bila saya lupa cara menggunakannya. Dan nantinya SQL Server ini akan saya hubungkan dengan Code Iqniter 3 untuk penutup dari awal postingan ini dibuat.

Berikut ini daftarnya nanti:
1.Menginstall SQL Server 2014 express
2.Menginstall SQL Server 2014 management studio express
3.Cara mengkoneksikan Code Iqniter 3 dengan SQL Server (MSSQL)

Mari masuk ke tahap pertama dulu

Cara Menginstall SQL Server 2014

Requitment, Saya disini menggunakan windows 10 64 bit

1.Download SQL Server 2014 express di situs microsoftnya langsung yaitu disini . Lihat gambar dibawah untuk mengetahui apa yang perlu didownload. Oh ya sebelumnya pilih button download warna orange agar keluar seperti ini.

Diatas itu kamu bisa melihat yang saya kotaki hitam, itu adalah yang kita download. Disitu kamu juga melihat MgmtStudio 64BIT\SQLManagementStudio_x64_ENU.exe kan? itu kamu checklist seperti yang saya kotaki, itu ada dibawah tinggal scroll aja.

2. Kalau benar maka total yang kamu download sekitar 880.6 MB an, itu sudah termasuk SQL Server dan SQL management studio

3.Setelah selesai download silahkan kamu running dan nanti akan menhasilkan folder seperti dibawah ini

Yang warna hitam adalah hasil downloadtan tadi, sedangkan yang warna merah adalah hasil extraxkannya.

4.Sekarang mari kita menginstall SQL Server nya terlebih dahulu, silahkan klik Folder SQLEXPR_x64_ENU dan Klik Setup seperti gambar dibawah ini

Lalu akan mucul gambar seperti dibawah ini dan klik 2 kali seperti gambar ini yang saya kotaki hitam

Setelah itu akan muncul gambar seperti dibawah ini dan pilih i accept the licensed term seperti dibawah ini dan klik next

Setelah itu klik next lagi tanpa ada yang dichecklist seperti gambar dibawah ini

Selanjutnya Select All seperti gambar dibawah ini dan next

Selanjutnya beri nama seperti yang ada digambar dibawah ini

Selanjutnya lakukan seperti dibawah ini

Selanjutnya saat muncul tampilan seperti dibawah ini, silahkan pilih mixed mode dan isikan password minimal 6 karakter seperti dibawah ini

Klik next dan apabila berhasil akan muncul gambar seperti dibawah ini, biasanya proses instalasinya ada 30 menitan

Setelah itu silahkan di close, dan lakukan restart pada pc anda agar bisa untuk menginstall SQL Managament studio pada langkah selanjutnya

Menginstall SQLManagement studio express 2014

1. Setelah kamu merestart pc mu, langkanya hampir sama seperti yang pertama, silahkan masuk ke folder SQLManagement Studio dan klik 2 kali setup,seperti gambar dibawah ini

Selanjutnya klik 2 kali seperti gambar dibawah ini

Selanjutnya klik next tanpa ada yang dichecklist seperti dibawah ini

Selanjutnya silahkan checklist add fitured seperti gambar dibawah ini

Selanjutnya silahkan select all dan Klik next seperti gambar dibawah ini

Setelah itu silahkan tunggu proses penginstallannya, apabila berhasil maka akan seperti digambar dibawah ini yang ijo ijo

Setelah itu klik close, dan restart pc anda lagi. Dan silahkan di cek pada start->all App, seharusnya aplikasinya sudah terinstal seperti dibawah ini

Hasilnya seperti yang saya beri kotak hitam, sedangkan yang saya beri kotak merah, itu yang akan kita gunakan untuk mengkoneksikan dengan code iqniter 3. Kamu bisa melihat di artikel ini Cara mengkoneksikan Code Iqniter 3 dengan SQL Server (MSSQL)

Cara Membuat Multiple Line Chart | PHP,MySQL, Chart JS

Views diki irawan 5/14/2019 11:30:00 am 2 Comments

Multiple line chart adalah sebuah grafik yang dibuat untuk membandingkan sebuah nilai dari beberapa label tertentu. Apabila chart biasanya hanya mewakil sebuah hasil dari sebuah label data, kalau line chart ini mewakili banyak hasil seperti hasil dari daerah tertentu.

Daripada bingung, mari kita buat saja Multiple line chart menggunakan php,mysql dan chart js.

Pertama kita harus menentukan datanya terlebih dahulu, disini saya sudah menyiapkan database dengan nama learnings dan tabel bernama tes_chart.

Seperti inilah strukturnya

Lalu inilah datanya

Saya membuat 24 data yang isinya Januari sampai Juni untuk tiap-tiap kota.

Selanjutnya mari ke skrip PHP nya

<?php
//koneksi
$koneksi=new mysqli('localhost','root','','learnings');

//untuk mengambil nilai pencapaian solo
$sql_solo="select pencapaian from tes_chart where kota='solo'";
$query_solo=mysqli_query($koneksi,$sql_solo);

//untuk mengambil nilai pencapaian jakarta
$sql_jakarta="select pencapaian from tes_chart where kota='jakarta'";
$query_jakarta=mysqli_query($koneksi,$sql_jakarta);

//untuk mengambil nilai pencapaian makasar
$sql_makasar="select pencapaian from tes_chart where kota='makasar'";
$query_makasar=mysqli_query($koneksi,$sql_makasar);

//untuk mengambil nilai pencapaian medan
$sql_medan="select pencapaian from tes_chart where kota='medan'";
$query_medan=mysqli_query($koneksi,$sql_medan);

//untuk mengambil bulan dari januari sampai juni
$sql_label="select * from tes_chart Group by bulan order by id ";
$query_label=mysqli_query($koneksi,$sql_label);
?>

Seperti yang ada dikomentar // tersebut, itu adalah penjelasan dari masing-masing fungsi kodingannya yang akan digunakan untuk membuat multiple line chart

Selanjutnya mari kita memasuki ke kodingan htmlnya untuk membuat tampilan dari multiple line chart

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>chart</title>
    <script src="chart/chart.min.js"></script>
</head>
<body>
    <div class="t" style="width:600px;background-color:skyblue">
    <center><h3 style="padding:10px">Chart Pencapaian Beras Antar Kota</h3></center>
        <canvas id="kotaChart"></canvas>
    </div>

kodingan diatas, kita memanggil chart.min.js yang merupakan library untuk membuat chart, lalu perhatikan <canvas id="kotaChart"></canvas> , codingan tersebut merupakan tempat chart yang akan kita buat

Oh iya untuk library chart.min.js, kalian bisa download disini

Selanjutnya mari ke kodingan Script Js nya untuk membuat chart dan mengisikan data dari php yang telah kita buat tadi

 <script>
 

var kotaCanvas = document.getElementById("kotaChart");

Chart.defaults.global.defaultFontFamily = "Lato";
Chart.defaults.global.defaultFontColor = "black";
Chart.defaults.global.defaultFontSize = 12;

var dataFirst = {
    label: "Solo",
    data: [<?php foreach($query_solo as $key){  echo  '"'.$key['pencapaian'].'",';}?> ],
    lineTension: 0.3,
    fill: false,
    borderColor: 'red',
    backgroundColor: 'transparent',
    pointBorderColor: 'red',
    pointBackgroundColor: 'red',
    pointRadius: 5,
    pointHoverRadius: 7,
    pointHitRadius: 7,
    pointBorderWidth: 2,
    pointStyle: 'rect'
  };

var dataSecond = {
    label: "Jakarta",
    data: [<?php foreach($query_jakarta as $key){  echo  '"'.$key['pencapaian'].'",';}?> ],
    lineTension: 0.3,
    fill: false,
    borderColor: 'blue',
    backgroundColor: 'transparent',
    pointBorderColor: 'blue',
    pointBackgroundColor: 'blue',
    pointRadius: 5,
    pointHoverRadius: 7,
    pointHitRadius: 7,
    pointBorderWidth: 2,
    pointStyle: 'cross'
  };

  var datathird = {
    label: "makasar",
    data: [<?php foreach($query_makasar as $key){  echo  '"'.$key['pencapaian'].'",';}?> ],
    lineTension: 0.3,
    fill: false,
    borderColor: 'green',
    backgroundColor: 'transparent',
    pointBorderColor: 'green',
    pointBackgroundColor: 'green',
    pointRadius: 5,
    pointHoverRadius: 7,
    pointHitRadius: 7,
    pointBorderWidth: 2,
    pointStyle: 'rect',
  };

  var four = {
    label: "medan",
    data: [<?php foreach($query_medan as $key){  echo  '"'.$key['pencapaian'].'",';}?> ],
    lineTension: 0.3,
    fill: false,
    borderColor: 'purple',
    backgroundColor: 'transparent',
    pointBorderColor: 'purple',
    pointBackgroundColor: 'purple',
    pointRadius: 5,
    pointHoverRadius: 7,
    pointHitRadius: 7,
    pointBorderWidth: 2,
    pointStyle: 'rectRounded'
    
  };

var kotaData = {
  labels:  [<?php foreach($query_label as $key){  echo  '"'.$key['bulan'].'",';}?> ] ,
  datasets: [dataFirst, dataSecond,datathird,four]
};

var chartOptions = {
  legend: {
    display: true,
    position: 'top',
    labels: {
      boxWidth: 80,
      fontColor: 'black'
    }
  },
  scales: {
         yAxes: [{
             ticks: {
                 beginAtZero: true,
                 userCallback: function(label, index, labels) {
                     // when the floored value is the same as the value we have a whole number
                     if (Math.floor(label) === label) {
                         return label;
                     }

                 },
             }
         }],
         xAxes: [{
        ticks: {
          autoSkip: false,
          maxRotation: 90,
          minRotation: 0,
        }
      }]
         
     },

    
};

var lineChart = new Chart(kotaCanvas, {
  type: 'line',
  data: kotaData,
  options: chartOptions
});

    </script>

Penjelasannya

var kotaCanvas = document.getElementById("kotaChart");

kotaCanvas merupakan variabel yang dibuat untuk menampung id dari kotaChart yang ada di html sebelumnya

Chart.defaults.global.defaultFontFamily = "Lato";
Chart.defaults.global.defaultFontColor = "black";
Chart.defaults.global.defaultFontSize = 12;

Ini merupakan pengaturan global pada chart, yang mengatur jenis font, warna dan ukuran font

var dataFirst = {
    label: "Solo",
    data: [<?php foreach($query_solo as $key){  echo  '"'.$key['pencapaian'].'",';}?> ],
    lineTension: 0.3,
    fill: false,
    borderColor: 'red',
    backgroundColor: 'transparent',
    pointBorderColor: 'red',
    pointBackgroundColor: 'red',
    pointRadius: 5,
    pointHoverRadius: 7,
    pointHitRadius: 7,
    pointBorderWidth: 2,
    pointStyle: 'rect'
  };

Disana kamu bisa memperhatikan beberapa kodingan, dataFirst merupakan variabel yang dibuat untuk menampung chart dari solo

Pada kodingan diatas, kamu bisa fokus melihat ke label dan data.
label merupakan nama dari perwakilan data solo yang nantinya isinya pencapaian dari solo dari bulan januari hingga juni
data: didalam data kita membuat sebuah perulangan php foreach, kamu bisa melihat $query_solo, itu sama dengan yang ada di kodingan php sebelumnya. Disini data dari solo mulai dari januari hingga juni akan diambil nilai pencapaiannya

untuk kodingan dibawahnya, itu merupakan pengaturan dari chart line solo atau pengaturan tentang garis solo, seperti misalnya pointStyle: react, nanti akan membentuk persegi dalam setiap pointnya

untuk dataSecond dan selanjutnya, penjelasannya sama dengan dataFirst

var kotaData = {
  labels:  [<?php foreach($query_label as $key){  echo  '"'.$key['bulan'].'",';}?> ] ,
  datasets: [dataFirst, dataSecond,datathird,four]
};

Pada kodingan diatas, kita membuat variabel kotaData untuk menggabungkan semua data antara semua kota yang dipilih tadi.
labels ini akan berisikan bulan januari sampai juni yang mana merupakan garis x dari chart yang mana dalam setiap kota memiliki bulan yang sama
datasets ini merupakan kumpulan dari data-data yang dikumpulkan, mulai dari solo hingga medan

var chartOptions = {
  legend: {
    display: true,
    position: 'top',
    labels: {
      boxWidth: 80,
      fontColor: 'black'
    }
  },
  scales: {
         yAxes: [{
             ticks: {
                 beginAtZero: true,
                 userCallback: function(label, index, labels) {
                     // when the floored value is the same as the value we have a whole number
                     if (Math.floor(label) === label) {
                         return label;
                     }

                 },
             }
         }],
         xAxes: [{
        ticks: {
          autoSkip: false,
          maxRotation: 90,
          minRotation: 0,
        }
      }]
         
     },

    
};

Kodingan diatas merupakan pengaturan dari chart yang dibuat, yang mana labelnya yang ada di sumbu x bisa berubah 90 derajat bila tulisannya saling berdekatan, dan pengaturan lainnya

var lineChart = new Chart(kotaCanvas, {
  type: 'line',
  data: kotaData,
  options: chartOptions
});

Kodingan diatas merupakan inti dari pembuatan chart, ini merupakan aturan standar dalam pembuatan chart pada chart.js.

kamu bisa memperhatikan type, itu merupakan tipe chart yang biasanya berupa line, bar dll
Untuk kotaData, itu data dari yang kita buat sebelumnya sedangkan
options, itu merupakan options yang telah kita buat juga
kotaCanvas, merupakan variabel yang akan menghubungkan dengan id kotaChart

Untuk melihat codingan fullnya kamu bisa melihat dibawah ini

<?php
//koneksi
$koneksi=new mysqli('localhost','root','','learnings');

//untuk mengambil nilai pencapaian solo
$sql_solo="select pencapaian from tes_chart where kota='solo'";
$query_solo=mysqli_query($koneksi,$sql_solo);

//untuk mengambil nilai pencapaian jakarta
$sql_jakarta="select pencapaian from tes_chart where kota='jakarta'";
$query_jakarta=mysqli_query($koneksi,$sql_jakarta);

//untuk mengambil nilai pencapaian makasar
$sql_makasar="select pencapaian from tes_chart where kota='makasar'";
$query_makasar=mysqli_query($koneksi,$sql_makasar);

//untuk mengambil nilai pencapaian medan
$sql_medan="select pencapaian from tes_chart where kota='medan'";
$query_medan=mysqli_query($koneksi,$sql_medan);

//untuk mengambil bulan dari januari sampai juni
$sql_label="select * from tes_chart Group by bulan order by id ";
$query_label=mysqli_query($koneksi,$sql_label);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>chart</title>
    <script src="chart/chart.min.js"></script>
</head>
<body>
    <div class="t" style="width:600px;background-color:skyblue">
    <center><h3 style="padding:10px">Chart Pencapaian Beras Antar Kota</h3></center>
        <canvas id="kotaChart"></canvas>
    </div>
    <script>
 
//membuat variabel kotaCanvas untuk menampung id='kotaChart'
var kotaCanvas = document.getElementById("kotaChart");

//settingan untuk jenis tulisan, warna maupun ukuran font untut chart
Chart.defaults.global.defaultFontFamily = "Lato";
Chart.defaults.global.defaultFontColor = "black";
Chart.defaults.global.defaultFontSize = 12;

//dataFirst merupakan variabel yang dibuat untuk menampung isi dari nilai pencapaian solo, ini berhubungan dengan koding php yang dibuat
var dataFirst = {
    label: "Solo",
    data: [<?php foreach($query_solo as $key){  echo  '"'.$key['pencapaian'].'",';}?> ],
    lineTension: 0.3,
    fill: false,
    borderColor: 'red',
    backgroundColor: 'transparent',
    pointBorderColor: 'red',
    pointBackgroundColor: 'red',
    pointRadius: 5,
    pointHoverRadius: 7,
    pointHitRadius: 7,
    pointBorderWidth: 2,
    pointStyle: 'rect'
  };

var dataSecond = {
    label: "Jakarta",
    data: [<?php foreach($query_jakarta as $key){  echo  '"'.$key['pencapaian'].'",';}?> ],
    lineTension: 0.3,
    fill: false,
    borderColor: 'blue',
    backgroundColor: 'transparent',
    pointBorderColor: 'blue',
    pointBackgroundColor: 'blue',
    pointRadius: 5,
    pointHoverRadius: 7,
    pointHitRadius: 7,
    pointBorderWidth: 2,
    pointStyle: 'cross'
  };

  var datathird = {
    label: "makasar",
    data: [<?php foreach($query_makasar as $key){  echo  '"'.$key['pencapaian'].'",';}?> ],
    lineTension: 0.3,
    fill: false,
    borderColor: 'green',
    backgroundColor: 'transparent',
    pointBorderColor: 'green',
    pointBackgroundColor: 'green',
    pointRadius: 5,
    pointHoverRadius: 7,
    pointHitRadius: 7,
    pointBorderWidth: 2,
    pointStyle: 'rect',
  };

  var four = {
    label: "medan",
    data: [<?php foreach($query_medan as $key){  echo  '"'.$key['pencapaian'].'",';}?> ],
    lineTension: 0.3,
    fill: false,
    borderColor: 'purple',
    backgroundColor: 'transparent',
    pointBorderColor: 'purple',
    pointBackgroundColor: 'purple',
    pointRadius: 5,
    pointHoverRadius: 7,
    pointHitRadius: 7,
    pointBorderWidth: 2,
    pointStyle: 'rectRounded'
    
  };

var kotaData = {
  labels:  [<?php foreach($query_label as $key){  echo  '"'.$key['bulan'].'",';}?> ] ,
  datasets: [dataFirst, dataSecond,datathird,four]
};

var chartOptions = {
  legend: {
    display: true,
    position: 'top',
    labels: {
      boxWidth: 80,
      fontColor: 'black'
    }
  },
  scales: {
         yAxes: [{
             ticks: {
                 beginAtZero: true,
                 userCallback: function(label, index, labels) {
                     // when the floored value is the same as the value we have a whole number
                     if (Math.floor(label) === label) {
                         return label;
                     }

                 },
             }
         }],
         xAxes: [{
        ticks: {
          autoSkip: false,
          maxRotation: 90,
          minRotation: 0,
        }
      }]
         
     },

    
};

var lineChart = new Chart(kotaCanvas, {
  type: 'line',
  data: kotaData,
  options: chartOptions
});

    </script>
</body>
</html>

Dan hasilnya nanti akan seperti ini

Apabila kalian ingin melihat sendiri seluruh kodingan diatas, kalian bisa mendownloadnya disini download atau apabila ingin melihat html nya dan chart.min.js kamu bisa mendownload di github saya disini download github

Cara Membuat Code Highlighter di Blogger terbaru Work

Views diki irawan 5/06/2019 02:52:00 pm Add Comment

Kalau kalian melihat ini berarti kalian berada ditempat yang tepat untuk mengetahui cara membuat Code Highlighter atau yang biasa kita gunakan untuk menaruh tulisan coding kita dengan tampilan yang tidak memuakkan mata.

Biasanya kita bisa saja membuat code kita terlihat menarik dengan css, tapi itu dirasa kurang memuaskan karena tidak adanya nomer di samping kiri ataupun perbedaan warna pada codingan layaknya kita membuat coding di editor seperti vscode, atom ataupun sublime.

Baiklah, disini admin akan membagikan cara membuat Code Highliter di Blogger terbaru 2019 yang work, dan kita akan membutuhkan bantuan dari SyntaxHiglighter yang sudah ada di CDN

Cara instalasi Highlighter di Blogger

Pertama silahkan masuk ke blogger kalian dan masuk ke menu theme> Edit HTML

Setelah itu cari </head> mengunakan ctrl+f dan taruh codingan dibawah ini, diatas </head>

<!-- 'SyntaxHighlighter' additions START -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.css' rel='stylesheet' type='text/css'/>

<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeRDark.min.css' rel='stylesheet' type='text/css'/>

<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.js' type='text/javascript'/>

<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCss.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.js' type='text/javascript'/>

<script language='javascript' type='text/javascript'>
    SyntaxHighlighter.config.bloggerMode = false;
    SyntaxHighlighter.all();
</script>
<!-- 'SyntaxHighlighter' additions END -->

Seperti gambar dibawah ini

Penjelasan:

<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeRDark.min.css' rel='stylesheet' type='text/css'/>

Codingan diatas digunakan untuk menentukan thema yang digunakan, untuk melihat thema-thema yang tersedia, kamu bisa melihatnya diakhir

<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.css' rel='stylesheet' type='text/css'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.js' type='text/javascript'/>

Kedua codingan diatas merupakan codingan wajib yang harus ditambahkan karena merupakan inti penggunaan code Syntax Highligter

<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCss.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.js' type='text/javascript'/>

Codingan diatas, yang memakai kata Php,JSScript,Css,Xml adalah merupakan bahasa codingan yang mau dipakai, untuk contohnya nanti ada dibawah

<script language='javascript' type='text/javascript'>
    SyntaxHighlighter.config.bloggerMode = false;
    SyntaxHighlighter.all();
</script>

Codingan diatasmerupakan konfigurasi dari syntax highlighter, kalian bisa membaca dokumentasinya disini Configurasi

Cara Penggunaan

Setelah penginstallan, kita akan memasuki cara penggunaan Syntax highlighter, silahkan ikuti cara dibawah ini

Pertama kalian buatlah post seperti biasa dan pilihlah Html seperti dibawah ini

Penjelasan

Untuk membuat code highlighter, kita harus menggunakan codingan dibawah ini

<pre class="brush: php">
Isi codingan
</pre>

Seperti yang saya jelaskan sebelumnya tentang bahasa pemrograman yang dipakai didalam isi coding,
Brush: php ini merupakan penanda bahasa codingannya, kamu bisa mengubah php menjadi xml, css sesuai script yang ada pada diatas </head>

Dan lihatlah beginilah hasil dari syntax higlighter

Thema tambahan

Jika kalian ingin mengganti thema dari syntax higlihter, kalian tinggal ganti codingan dibawah ini
<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeRDark.min.css' rel='stylesheet' type='text/css'/>

Yang ada di </head> tadi menjadi beberapa thema pilihan kalian. Pilihlah salah satu dari dibawah ini
default:
<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

Thema django:

<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDjango.css' rel='stylesheet' type='text/css'/>

Thema eclipse

<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeEclipse.css' rel='stylesheet' type='text/css'/>

Thema Emacs

<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeEmacs.css' rel='stylesheet' type='text/css'/>

Thema FadeToGray

<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeFadeToGrey.css' rel='stylesheet' type='text/css'/>

Thema MDUltra

<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeMDUltra.css' rel='stylesheet' type='text/css'/>

Untuk melihat thema-themanya kalian bisa lihat thema Syntax Highlighter 8 Tema Code Syntaxt Highlighter untuk Blogger

Bahasa yang support

Untuk menambahkan bahasa codingan yang kalian inginkan seperti c++ atau lain, kalian bisa menambahkan codingannya diatas </head> seperti dibawah ini

<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPhp.js' type='text/javascript'/>

Untuk codingan lain kalian silahkan pilih di sini daftar coding yang support, 13 Daftar Penambahan Bahasa Syntax higlighter Pada Blogger

Itu dia semuanya sekian terima kasih

8 Tema Code Syntaxt Highlighter untuk Blogger

Views diki irawan 5/06/2019 02:36:00 pm Add Comment

Dalam menuliskan code, setiap orang memiliki caranya sendiri-sendiri. Begitu juga dalam penggunaan tema pada text editornya. Tapi dalam penggunaan Syntaxt Highlighter pada blogger, kamu juga ingin menyesuaikan tema yang kamu sukai atau tema yang enak dipandang oleh pengunjung.

Berikut ini thema yang tersedia pada Syntaxt Highlighter. Dan juga code yang harus digunakan untuk menggunakan tema tersebut.

Sebelum kamu melihat tema dibawah, ada baiknya kamu juga membaca ini untuk tahu cara instalasi ataupun penggunaan Syntaxt Highlighter pada blog, Cara Membuat Code Highlighter di Blogger terbaru Work

Ini dia 8 tema yang bisa kamu tiru

Tema Dark

<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeRDark.min.css' rel='stylesheet' type='text/css'/>

Tema Default

<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreDefault.css' rel='stylesheet' type='text/css'/>

Tema Django

<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreDjango.css' rel='stylesheet' type='text/css'/>

Tema Eclipse

<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreEclipse.css' rel='stylesheet' type='text/css'/>

Tema Emacs

<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreEmacs.css' rel='stylesheet' type='text/css'/>

Tema FadetoGray

<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreFadeToGrey.css' rel='stylesheet' type='text/css'/>

Tema DMUltra

<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreMDUltra.css' rel='stylesheet' type='text/css'/>

Tema Midnight

<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeMidnight.css' rel='stylesheet' type='text/css'/>

Jika kalian ingin melihat daftar bahasa SyntaxHiglighter, kalian bisa melihat disini