Tourism Management System is the Software project developed using Visual basic 6.0 and SQL server as backend.
Project title: Tourism Management System
Front End: Visual Basic 6.0
Back End: SQL Server
Download project Source code:
Membuat Diagram Lingkaran dengan HighCharts
Melanjutkan tutorial yang sebelumnya, pada tutorial sebelumnya kita membuat Diagram Batang menggunakan HighCharts. Pada kali ini kita akan bersama-sama membuat Diagram Lingkaran 3D menggunakan HighCharts juga. Kenapa HighCharts?
Karena selain gratis juga sangat mudah digunakan dan mempunyai dokumentasi yang baik dan mudah.
Baca juga: Membuat Diagram Batang dengan HighCharts1. Kita buat database bernama voting, kemudian buat tabel dengan nama hasilvoting dan masukan beberapa data sebagai contoh
--
-- Table structure for table `hasilvoting`
--
CREATE TABLE IF NOT EXISTS `hasilvoting` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`nama` varchar(50) NOT NULL,
`jumlah_suara` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;
--
-- Dumping data for table `hasilvoting`
--
INSERT INTO `hasilvoting` (`id`, `nama`, `jumlah_suara`) VALUES
(1, 'John Doe', 5000),
(2, 'Juki Dasi', 6000),
(3, 'Pojika', 3400),
(4, 'Guha', 9000),
(5, 'Kuha', 6200);
2. Buat folder di htdocs jika teman-teman menggunakan LAMPP/XAMPP dengan nama diagram-highcharts, kemudian buat folder dengan nama include didalamnya. Buat file index.php di dalam folder diagram-highcharts kemudian masuk ke folder include dan buat file dengan nama connection.php
File connection.php digunakan untuk melakukan koneksi ke database sekaligus sebagai query yang dijalankan ke database.File index.php digunakan menampilkan diagram yang akan kita buat sekaligus menyisipkan plugin dari highcharts
3. Ada yang unik diagram yang kita buat ini. Apa? Jawabannya adalah diagram yang kita buat ini nantinya akan 3D (3 Dimensi) dan berbentuk seperti donat. Pastinya teman-teman tahu kan donat itu bentuknya seperti apa.
Oke silahkan downloadnya pluginnya di highcharts.com atau teman-teman bisa menggunakan CDN nya dari highcharts.
4. Kode, tahap ini kita akan menulis syntax php dan html. Buka file connection.php
<?php
class Connection {
public function __construct() {
// melakukan koneksi ke database
$this->db = new PDO('mysql:host=localhost;dbname=voting','root','');
// urutannya adalah host;namadatabase;username;password
}
public function getHasilVoting() {
// menampilkan seluruh data pada tabel hasilvoting
$sql = "SELECT * FROM hasilvoting";
$query = $this->db->query($sql);
return $query;
}
}
?>
Kemudian buka file index.php
<!DOCTYPE html>
<html>
<head>
<title>3D Pie Donut | HighCharts</title>
<!-- memasukan jquery sebagai plugin tambahan -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- membuat fungsi untuk menampilkan diagram batang ke dalam <div id="suara"></div> -->
<script type="text/javascript">
$(document).ready(function() {
$('#suara').highcharts({
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45
}
},
title: {
text: 'Jumlah Perolehan Suara'
},
subtitle: {
text: '3D donut in Highcharts'
},
plotOptions: {
pie: {
innerSize: 100,
depth: 45
}
},
series: [{
name: 'Jumlah Perolehan Suara',
data: [
<?php
// meng include file connection.php
require 'include/connection.php';
// meng extend class Connection()
$con = new Connection();
// mendapatkan seluruh data dari tabel hasilvoting kemudian di looping menggunakan while
$voting = $con->getHasilVoting();
// melakukan looping
while ($data = $voting->fetch(PDO::FETCH_OBJ)) {
echo "[ '".$data->nama."', ".$data->jumlah_suara."],";
}
?>
]
}]
});
});
</script>
</head>
<body>
<h2 align="center">Hasil Perolehan Suara Pemilihan Ketua RT Suka Maju</h2>
<!-- awal sebagai id untuk menampilkan diagram batang -->
<div id="suara"></div>
<!-- akhir -->
<footer>
<p align="center">By Maful Prayoga Arnandi visit <a href="http://mafulprayogaarnandi.blogspot.com/" target="_blank">blog</a></p>
</footer>
<!-- memasukan highcharts ke dalam proyek sebagai plugin utama -->
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts-3d.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>
<!-- akhir -->
</body>
</html>
5. Setelah itu silahkan akses folder proyek kita, defaultnya http://localhost/diagram-highcharts dan lihat apa yang terjadi. Mirip donat bukan? Ada lubang ditengahnya.
Selesai sudah tutorial kali ini, semoga bermanfaat dan jika ada pertanyaan silahkan komen dibawah ini.
Jika ada pertanyaan lebih lanjut bisa hubungi saya di mafulprayoga@gmail.com atau ada kepentingan tentang pembuatan website atau aplikasi bisa langsung menghubungi saya.
Membuat Diagram Batang dengan HighCharts
Berawal dari proyek yang sedang saya kerjakan dan alhamdulillah sudah selesai. Ada salah satu permintaan dari client agar dibuatkan diagram batang untuk mengetahui perolehan suara agar terlihat lebih interaktif dan menarik dilihat.
Setelah saya pikir-pikir akhirnya saya putuskan untuk menggunakan HighCharts sebagai plugin untuk membuat diagram barang.(highcharts.com)
Kemudian saya lihat-lihat fitur yang ditawarkan oleh highcharts, karena gratis jadi pakai ini saja dan mudah menggunakannya. Sekilas tentang HighCharts adalah suatu plugin atau modul javascript yang digunakan untuk membuat diagram/ charts menggunakan javascript.
Banyak sebenarnya diluar sana plugin-plugin untuk membuat chart yang bisa teman-teman gunakan, sesuai dengan selera dan kebutuhan.
1. Tahap pertama pastinya teman-teman harus sudah mendownload highcharts, teman-teman bisa mendownload di www.highcharts.com/download
2. Kedua, buat folder di htdocs (jika menggunakan xampp/lampp) dan beri nama diagrambatang , buat folder assets didalam proyek kita. Kemudian buat folder highcharts didalam folder assets. Selanjutnya ekstrak highcharts.js exporting.js yang tadi teman-teman download.
3. Ketiga, setelah berhasil mendownload highcharts. Sekarang download jQuery di sini kemudian save page as dan letakan didalam folder assets.
4. Keempat, buat folder include didalam proyek kita. Dan buat file dengan nama connection.php . Selanjutnya buat file index.php di dalam proyek kita. F
Fungsi dari connection.php adalah untuk melakukan koneksi ke database sekaligus sebagai query ke database sebagai manipulasi data.
Fungsi dari index.php adalah untuk menampilkan Diagram Batang yang nanti kita buat.
5. Kelima, pastikan serice Apache dan MySQL sudah dalam kondisi running. Kemudian masuk ke phpmyadmin dan buat database dengan nama voting. Buat tabel hasilvoting sebagai menampung data pada voting dan masukan beberapa data sebagai contoh.
--
-- Table structure for table `hasilvoting`
--
CREATE TABLE IF NOT EXISTS `hasilvoting` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`nama` varchar(50) NOT NULL,
`jumlah_suara` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;
--
-- Dumping data for table `hasilvoting`
--
INSERT INTO `hasilvoting` (`id`, `nama`, `jumlah_suara`) VALUES
(1, 'John Doe', 5000),
(2, 'Juki Dasi', 6000),
(3, 'Pojika', 3400),
(4, 'Guha', 9000),
(5, 'Kuha', 6200);
6. Keenam, buka file connection.php dan masukan kode berikut untuk koneksi ke database dan query menampilkan data dari tabel hasilvoting
<?php
class Connection {
public function __construct() {
// melakukan koneksi ke database
$this->db = new PDO('mysql:host=localhost;dbname=tutorialblog','root','');
// urutannya adalah host;namadatabase;username;password
}
public function getHasilVoting() {
// menampilkan seluruh data pada tabel hasilvoting
$sql = "SELECT * FROM hasilvoting";
$query = $this->db->query($sql);
return $query;
}
}
?>
7. Ketujuh, buka file index.php sebagai penampil dari diagram batang yang kita buat, dan juga kita akan memasukan plugin highcharts didalamnya.
<!DOCTYPE html>
<html>
<head>
<title>Diagram Batang | HighCharts</title>
<!-- memasukan jquery sebagai plugin tambahan -->
<script type="text/javascript" src="assets/jquery.min.js"></script>
<!-- membuat fungsi untuk menampilkan diagram batang ke dalam <div id="suara"></div> -->
<script type="text/javascript">
$(document).ready(function() {
$('#suara').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Jumlah Perolehan Suara'
},
subtitle: {
text: ''
},
xAxis: {
categories: [
'Jumlah Suara'
]
},
yAxis: {
min: 0,
title: {
text: 'Total'
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [
<?php
// meng include file connection.php
require 'include/connection.php';
// meng extend class Connection()
$con = new Connection();
// mendapatkan seluruh data dari tabel hasilvoting kemudian di looping menggunakan while
$voting = $con->getHasilVoting();
// melakukan looping
while ($data = $voting->fetch(PDO::FETCH_OBJ)) {
echo "{ name: '".$data->nama."',data: [".$data->jumlah_suara."]},";
}
?>
]
});
});
</script>
</head>
<body>
<h2 align="center">Hasil Perolehan Suara Pemilihan Ketua RT Suka Maju</h2>
<!-- awal sebagai id untuk menampilkan diagram batang -->
<div id="suara"></div>
<!-- akhir -->
<footer>
<p align="center">By Maful Prayoga Arnandi visit <a href="http://mafulprayogaarnandi.blogspot.com/" target="_blank">blog</a></p>
</footer>
<!-- memasukan highcharts ke dalam proyek sebagai plugin utama -->
<script type="text/javascript" src="assets/highcharts/highcharts.js"></script>
<script type="text/javascript" src="assets/highcharts/exporting.js"></script>
<!-- akhir -->
</body>
</html>
8. Setelah semuanya selesai, sekarang coba kita akses proyek kita dan hasilnya akan seperti berikut
Jadi jika kita menggunakan HighCharts terdapat fitur yang tentu penting, yaitu exporting. Dengan adanya fitur ini kita bisa melakukan export ke pdf, svg, image png tanpa membuat syntax lagi.
Selesai sudah tutorial kali ini, semoga bermanfaat dan jika ada pertanyaan silahkan komen dibawah ini.
Jika ada pertanyaan lebih lanjut bisa hubungi saya di mafulprayoga@gmail.com atau ada kepentingan tentang pembuatan website atau aplikasi bisa langsung menghubungi saya.
Tutorial export Excel No Plugin
(ninjaforms.com)
Selamat Pagi dan selamat beraktifitas
Pagi ini saya akan memberikan sedikit ilmu pada teman-teman semua. Ilmu apa?
Ilmu bagaimana meng-export data dari database kemudian dijadikan ke dalam bentuk excel (.xls)
Export ke excel adalah suatu fitur yang penting untuk report data pada aplikasi. Kebanyakan aplikasi yang pernah saya buat ada fitur export excel dikarenakan suatu keharusan dan keinginan dari client sendiri. Banyak cara yang dapat dilakukan untuk export ke excel, antara lain menggunakan plugin dan no plugin.
Di tutorial kali ini kita akan mencoba yang no plugin. Maksudnya apa?
Maksudnya ketika kita membuat repot ke excel kita tidak menggunakan dukungan pihak ketiga(phpexcel, dll). Kita hanya memanfaatkan syntax yang sudah ada pada php.
Keuntungan apa yang kita dapat ketika menggunakan no plugin?Keuntungannya antara lain mudah, cepat, simpel. Artinya menggunakan no plugin tidak ada option-option yang begitu rumit dan menggunakannya juga sangat mudah. Teman-teman tidak harus menulis banyak kode untuk melakukan export.Setelah membahas keuntungan pastinya ada kekurangan yang kita dapat, ayo kita bahas bersama
Kekurangan apa yang kita dapat ketika menggunakan no plugin?Kekurangannya adalah kita tidak dapat berkreasi banyak ketika menggunakan no plugin. Artinya teman-teman ketika ingin membuat style lain seperti SUM(), AVG() itu tidak bisa. Teman-teman bisa menggunakan plugin ketiga untuk membuat seperti itu.Oke, setelah kita membahas keuntungan dan kekurangan yang kita dapat, selanjutnya kita membahas apa saja yang kita butuhkan.
Pertama, harus mempunyai Web Server(Apache, Nginx dll), MySQL, Text Editor(Sublime, Notepad++), Browser(Firefox, Chrome)
Langsung dalam pembuatan
1. Buat database baru, contoh dengan nama perpus
create database perpus;2. Membuat tabel buku
CREATE TABLE IF NOT EXISTS `buku` (3. Setelah membuat tabel, silahkan masukan beberapa contoh data
`kode` int(6) NOT NULL AUTO_INCREMENT,
`nama_buku` varchar(100) DEFAULT NULL,
`pengarang` varchar(100) DEFAULT NULL,
`penerbit` varchar(100) DEFAULT NULL,
PRIMARY KEY (`kode`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;
INSERT INTO `buku` (`kode`, `nama_buku`, `pengarang`, `penerbit`) VALUES4. Jika teman-teman menggunakan lampp/ xampp, pastikan apache dan mysql sudah dalam keadaan running. Kemudian masuk ke folder htdocs dan buat folder untuk proyek kita, misal kita beri nama reportexcel kemudian buat file index.php fungsinya untuk menampilkan data dari tabel buku. Buat folder include, kemudian buat file connection.php fungsinya untuk melakukan koneksi ke database dan melakukan query.
(1, 'Membuat Website secara mudah', 'Nur Khalis', 'Media Nusantara'),
(2, 'Membuat Aplikasi Android secara mudah', 'Nur Khalis', 'Media Nusantara'),
(3, 'Blogging hebat!!', 'Nur Khalis', 'Media Nusantara'),
(4, 'Mudah membuat tema wordpress', 'Nur Khalis', 'Media Nusantara'),
(5, 'Mudah membuat tema blogger', 'Nur Khalis', 'Media Nusantara');
5. Tahap coding, buka file connection.php dan masukan kode berikut
<?php
class Connection {
public function __construct() {
// koneksi ke database
$this->db = new PDO('mysql:host=localhost;dbname=perpus','root','');
// host, database, username, password
}
public function showData() {
// query ke tabel buku
$sql = "SELECT * FROM buku";
$query = $this->db->query($sql);
return $query;
}
}
?>
kemudian buka file index.php dan masukan kode berikut
<!DOCTYPE html>
<html>
<head>
<title>Export data No Plugin</title>
</head>
<body>
<h2>Daftar Buku pada Perpustakaan Media Nusantara</h2>
<table border="1">
<tr>
<th>No</th>
<th>Nama Buku</th>
<th>Pengarang</th>
<th>Penerbit</th>
</tr>
<?php
require 'include/connection.php';
$con = new Connection();
$lib = $con->showData();
$no = 1;
// melakukan looping
while ($data = $lib->fetch(PDO::FETCH_OBJ)) {
?>
<tr>
<td><?php echo $no; ?></td>
<td><?php echo $data->nama_buku; ?></td>
<td><?php echo $data->pengarang; ?></td>
<td><?php echo $data->penerbit; ?></td>
</tr>
<?php
$no++;
}
?>
</table>
<p>
<footer>
By Maful Prayoga Arnandi visit <a href="http://mafulprayogaarnandi.blogspot.com/" target="_blank">blog</a>
</footer>
</p>
</body>
</html>
6. Setelah kita mengakses poryek kita, hanya muncul beberapa data saja. Dan bagaimana export ke excelnya?Jawabannya adalah kita menambahkan beberapa baris kode untuk export ke excel tanpa plugin tambahan. Oke, buka lagi file index.php dan tambahkan kode berikut di baris paling atas
<?php
header("Content-type: application/vnd-ms-excel");
header("Content-Disposition: attachment; filename=Export-Data-Buku");
?>
Sekarang coba kita akses kembali file proyek kita maka browser akan mendownload file excel yang telah kita buat.
Jadi full source codenya
Dan hasillnya adalah :D
<?php
header("Content-type: application/vnd-ms-excel");
header("Content-Disposition: attachment; filename=Export-Data-Buku.xls");
?>
<!DOCTYPE html>
<html>
<head>
<title>Export data No Plugin</title>
</head>
<body>
<h2>Daftar Buku pada Perpustakaan Media Nusantara</h2>
<table border="1">
<tr>
<th>No</th>
<th>Nama Buku</th>
<th>Pengarang</th>
<th>Penerbit</th>
</tr>
<?php
require 'include/connection.php';
$con = new Connection();
$lib = $con->showData();
$no = 1;
while ($data = $lib->fetch(PDO::FETCH_OBJ)) {
?>
<tr>
<td><?php echo $no; ?></td>
<td><?php echo $data->nama_buku; ?></td>
<td><?php echo $data->pengarang; ?></td>
<td><?php echo $data->penerbit; ?></td>
</tr>
<?php
$no++;
}
?>
</table>
<p>
<footer>
By Maful Prayoga Arnandi visit <a href="http://mafulprayogaarnandi.blogspot.com/" target="_blank">blog</a>
</footer>
</p>
</body>
</html>
Oke, akhirnya selesai juga tutorial kali ini. Jika ada pertanyaan lebih lanjut bisa hubungi saya di mafulprayoga@gmail.com atau ada kepentingan tentang pembuatan website atau aplikasi bisa langsung menghubungi saya.
Terimakasih
Langganan:
Postingan (Atom)
