visdat

Sistem Visualisai Data BPS

Spesifikasi minimum dari perangkat keras dan perangkat lunak yang dibutuhkan yaitu perangkat keras

Processor: AMD E1-2500 APU
RAM: 4 GB DDR3
HDD: 500 GB SATA
GPU: Radeon(TM) HD Graphics perangkat lunak
xampp

Langkah-langkah yang diperlukan untuk menginstall sistem ini di local machine

Download penuh versi terbaru yang ada pada GIT STIS
Copy ke xampp/htdocs/visdat
start xampp Apache dan Mysql
buka browser dan masuk ke halaman localhost/phpmyadmin
create new database dengan nama database skripsi
import file database yang terdapat pada folder yang telah didownload dengan nama skripsi.sql ke database skrispsi
buka browser dan masuk ke halaman localhost/visdat/index.php
jika sistem tidak bisa membaca database, pastikan pengaturan pada xampp/htdocs/visdat/chart/mail/connection.php sudah disesuaikan dengan pengaturan pengguna.

<?php

$con = mysqli_connect("localhost","root","","skripsi"); //sesuaikan dengan nama server, username, password, nama databse
	if(mysqli_connect_error()){
		echo "failed to connect:".mysqli_connect_error();
	}
?>

jalankan ulang sistem dengan mengakses localhost/visdat/index.php

Panduan Penggunaan

jika sudah masuk ke halaman localhost/visdat/index.php , maka akan diarahkan ke halaman home sistem
pengguna pada sistem ini terbagi menjadi 3 tingkatan, yaitu admin, login user, unauthorized user, dimana semua user dapat membuat visualisasi dari data yang ada

Visualisasi sederhana

pilih jenis visualisasi sederhana
pilih data (variabel dan variabel vertikal)
pilih salah satu jenis visualisasi (bar, column, line, area)
klik submit
proses data

if(isset($_POST['submit'])){

    if(!empty($_POST['check_list'])) {
      foreach($_POST['check_list'] as $selected) {
      $variabel = $variabel. ",".$selected; //membuat list variabel
      $variabel2 = $variabel2. ",'".$selected."'"; //membuat list variabel2
      $jumlah=$jumlah+1;
      }
    }
  
    if(!empty($_POST['check_list2'])) {
      
      foreach($_POST['check_list2'] as $selected2) {
      $listprovinsi = $listprovinsi. "or namaprov='".$selected2."'"; //list provinsi terpilih
      }
      
    }
    else{
    echo "<b>Minimal 1 variabel dan 1 provinsi  .</b>";
    }
    
$sql = "SELECT namaprov".$variabel. " FROM dataprov WHERE namaprov='' ".$listprovinsi." ORDER BY namaprov"; // sql yang dijalankan
$result = $con->query($sql);
$hasil="";
if (mysqli_num_rows($result) > 0) {
    $hasil=$hasil."['namaprov'".$variabel2."],";
    // echo "['namaprov'".$variabel2."],";
       while($row = mysqli_fetch_array($result)) {
        $var1= "['".$row[0]."',";
        $var2="";
        $i=1;
        while($i<$jumlah) {
                  $var2=$var2.$row[$i].",";
                  $i++;
                };
                $hasil=$hasil.$var1.$var2."],";
     }
} 
}

outpun akan ditampilkan kepada pengguna

Chord diagram

pilih chord diagram
pilih data (variabel dan variabel vertikal)
pilih salah satu jenis chord
klik submit
proses data

$list =""; //definisi var
$list2 =""; //definisi var


if(isset($_POST['submit'])){
if(!empty($_POST['check_list'])) {

foreach($_POST['check_list'] as $selected) {
	foreach($_POST['check_list'] as $selected2) {
if ($selected != $selected2) {
	$list = $list. "or id='".$selected . "".$selected2."'"; //definisikan var 1 tidak sama dengan var 2
}
$list2 = $list2. "or id='".$selected . "".$selected2."'"; //definisi var 1 = var 2
}
}
}
if(isset($_POST['radio']))
{
}
else{
echo "<b>Please Select Atleast One Option.</b>";
}
$sql = "SELECT asal,tujuan,id,".$_POST['radio']. " FROM chordkab WHERE id='' ".$list2.""; //sql untuk menampilkan data
$result = $con->query($sql);
//echo $sql;
$abc="";
if (mysqli_num_rows($result) > 0) {
     // output data of each row
	
     while($row = mysqli_fetch_assoc($result)) {
         $abc= '["' .$row["asal"]. '","'  . $row["tujuan"]. '",'  . $row["".$_POST['radio'].""].'],';
         echo $abc;
     }
} else {
     echo "0 results";
}
}

outpun akan ditampilkan kepada pengguna

Sequences Diagram

pilih sequences diagram
pilih data (variabel dan variabel vertikal)
pilih salah satu jenis visualisasi (bar, column, line, area)
klik submit
proses data

echo "
 'name': 'indonesia',
 'children': 
 [";
//start sumatera
echo "{
   'name': 'sumatera',
   'children': 
   [";
//start Nanggoro Aceh Darussalam
echo "{
     'name': 'Nanggro Aceh Darussalam',
     'children': ";


    //fetch table rows from mysql db
     $list ="";
    foreach($_POST['check_list'] as $selected) {
    $list = $list." OR provinsi='ACEH' AND kabupaten='".$selected ."'";
    }
    $aceh ="";
    $sql = "select provinsi,kabupaten as name,".$_POST['radio']. " as size from dataseq where provinsi='ACEH' and kabupaten='a' ".$list."";
    $result = mysqli_query($con, $sql) or die("Error in Selecting " . mysqli_error($con));
    //create an array
    
    $emparray = array();
    while($row =mysqli_fetch_assoc($result))
    {
        $emparray[] = $row;
    }
    $aceh = json_encode($emparray);
    echo $aceh;

    //close the db connection
   // mysqli_close($connection);
//end NAD
echo    "},";

outpun akan ditampilkan kepada pengguna

Indonesian Map

pilih map
pilih variabel
proses data

<?php
include "../mail/connection.php";
$type = $_GET['type'];
$sql = "SELECT id, ".$type." FROM dataprov ORDER BY ".$type." DESC";
$result = $con->query($sql);

$data = [];

$i = 1;
$max;
while ($row = $result->fetch_assoc()) {
	if($i==1) $max = $row[$type];
	$i++;
	$data[] = ["hc-key" => $row['id'], "value" => $row[$type]*1];
}

$data[] = ["hc-key" => "id-3700","value" => $max*1];

echo json_encode($data);
?>

outpun akan ditampilkan kepada pengguna

Login

klik login
masukkan username dan password (pada modal view login yang terdapat pada header)
login
akan langsung diarahkan berdasarkan tingkatan user
tampilan tab header user
tampilan tab header admin

Register

klik login
klik register
masukan username, email, password (pengguna akan terdaftar sebagai user)
register
lalu pengguna login kembali khusus dikarenakan pada database password di hash menggunakan md5, maka tidak bisa melihat password admin dan pengguna lainnya, sehingga untuk login sebagai admin harus mengganti sql pada register.php yang terdapat pada xampp/visdat/register.php


        $sql = "INSERT INTO `PENGGUNA` (`id`, `username`, `email`, `pass`, `level`) VALUES ('NULL', '".$username."', '".$email."', '".$passhash."', 'user' )";

pada data level user diganti menjadi admin untuk sementara


        $sql = "INSERT INTO `PENGGUNA` (`id`, `username`, `email`, `pass`, `level`) VALUES ('NULL', '".$username."', '".$email."', '".$passhash."', 'admin' )";

Edit data

pilih edit data
semua data yang ada pada database akan ditampilkan
edit data dapat dilakukan inline

Tambahkan variabel baru data

pilih edit data
semua data yang ada pada database akan ditampilkan
pilih tambahkan variabel baru
sistem akan mengarahkan langsung ke form edit tambah variabel baru
input nama variabel dan sumber
submit
variabel akan langsung muncul di halaman edit data
variabel yang diinput oleh pengguna akan disimpan dengan lever user, sedangkan yang diinput oleh admin akan disimpan dengan level admin

Kelola Variabel

pilihan ini hanya akan muncul untuk admin
pilih kelola variabel
variabel-variabel akan ditampilkan kepada admin
admin dapat mengedit dan delete variabel yang ada
type data pada tabel variabel untuk type 1 mendefinisikan bahwa data tidak dapat diedit oleh pengguna, dan tipe 2 mendefinisikan bahwa data dapat diedit oleh pengguna

logout

jika logout user, akan diarahkan langsung ke halaman index.php
jika logout admin, sebelum session_destroy dilakukan pengecekan terlebih dahulu oleh sistem apakah terdapat variabel yang diinput oleh admin, jika iya maka akan langsung diupdate type data tersebut menjadi type 1

<?php

session_start();
include '/chart/mail/connection.php';

 
if (isset($_SESSION['admin'])){
	
	$query="UPDATE namakolom SET type='1' where level='admin'";
	$a = mysqli_query($con, $query);
 	//echo $a;
	session_destroy();
	header("location: index.php");	
  }
  else {

session_destroy();

header("location: index.php");	
  }	
?>