Tutorial Membuat Grafik PHP MYSQL

Membuat Grafik atau Charts dengan Php Mysql Plus Source Kode

www.zlearn.id

Baik kali ini saya akan berbgai tutorial ditambah source kode membuat grafik dengan php mysql. Kenapa butuh grafik atau charts jawabannya adalah grafik berfungsi untuk manampilkan data secara visual dan lebih mudah dimengerti. 
Pada tutorial kali saya akan menggunakan highcharts.js sebagai plugin pembuatan grafik. Kenapa saya menggunakan highchart.js karena menurut saya plugin ini yang paling bagus untuk membuat grafi kenapa?  karena grafik kita dapat dieksport menjadi ekstensi *JPG, *Excel Bahkan *PDF. selain itu dokumentasi nya juga cukup bagus dan banya tutorialnya  untuk melihat dokumentasi dapat dilihat di www.higchart.com. seperti biasa jika anda ingin mendownload source kode anda dapat mendownloadnya di akhir tutorial ini:

Langsung saja ke TKP:

Pertama  
  1.  Buat database dengan nama dvote  di phpmyadmin anda
  2. Buat table dengan nama calon   dan masukan kode berikut di bagian sql
-- phpMyAdmin SQL Dump
-- version 4.2.7.1
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: Jun 10, 2017 at 08:03 AM
-- Server version: 5.6.20
-- PHP Version: 5.5.15

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `dvote`
--

-- --------------------------------------------------------

--
-- Table structure for table `calon`
--

CREATE TABLE IF NOT EXISTS `calon` (
`id_calon` int(11) NOT NULL,
  `nama_calon1` varchar(100) NOT NULL,
  `nama_calon2` varchar(100) NOT NULL,
  `foto_calon` varchar(100) NOT NULL,
  `visi` text NOT NULL,
  `misi` text NOT NULL,
  `total_pemilih` int(11) NOT NULL
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

--
-- Dumping data for table `calon`
--

INSERT INTO `calon` (`id_calon`, `nama_calon1`, `nama_calon2`, `foto_calon`, `visi`, `misi`, `total_pemilih`) VALUES
(1, 'Arya Reza Anantya', 'Reza Febianto', '1.jpg', 'Visi Kami adalah memjukan dan menjadikan SMK NEGERI 1 BAWANG Maju di semua Sektor', 'Membuat Program Untuk memajukan SMK dan Organisasi Dan Ekstra Yang Ada Di SMK N 1 Bawang', 3),
(2, 'Zidni Ridwan Nulmuarif', 'Didik Maulana Ardiansyah', '2.jpg', 'Visi kami adalah mengembangkan kreativitas dan inovasi dari siswa siswi SMK NEGERI 1 BAWANG', 'Memajukan SMK NEGERI 1 BAWANG dengan membuat program kerja yang inovatif dan kreatif', 11),
(3, 'Alif Zidan Mubarok', 'Hafid Ali Mustaqim', '3.jpg', 'Visi Kami Menjadikan SMK NEGERI 1 BAWANG Adil dan Makmur', 'Menciptakan SMK NEGERI 1 BAWANG yang sukses dan Madiri', 2);

--
-- Indexes for dumped tables
--

--
-- Indexes for table `calon`
--
ALTER TABLE `calon`
 ADD PRIMARY KEY (`id_calon`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `calon`
--
ALTER TABLE `calon`
MODIFY `id_calon` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=4;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

3.Setelah itu buat file PHP dengan nama grafik.php

<!doctype HTML>
<html>
<head>
<title>Embbed</title>
<style>
.responsive-embed-youtube {
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
}
.responsive-embed-youtube iframe, .responsive-embed-youtube object, .responsive-embed-youtube embed {
position:absolute;
top:0;
left:0;
width:40%;
height:60%;
right:10px;
}

</style>
</head>
<body>
<div class="responsive-embed-youtube"><center>
<iframe width="560" height="315" src="https://www.youtube.com/embed/g4hGRvs6HHU" frameborder="0" allowfullscreen></iframe>
</center>
</div>


</body>

</html>

Bagi anda yang ingin mendownload source kode silahkan unduh tauatan 

Download




Share this

Related Posts

Previous
Next Post »

1 komentar:

komentar

Berita Unik

loading...