Maful Prayoga

Membuat Diagram Lingkaran dengan HighCharts

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6j5FA5C3Iu6RFGHcm_VPYRgADCOlXqDaQzdZa-QeKT-veNR5ZYfwruVuNo32XVuPNzIvIzpregxm6JrBF8F5jN2GXXvgRgN_jpoO8LefdrxXJtGPqjthGwe4654jt9QyxuV39oHBFCiY/s1600/picture5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="136" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6j5FA5C3Iu6RFGHcm_VPYRgADCOlXqDaQzdZa-QeKT-veNR5ZYfwruVuNo32XVuPNzIvIzpregxm6JrBF8F5jN2GXXvgRgN_jpoO8LefdrxXJtGPqjthGwe4654jt9QyxuV39oHBFCiY/s320/picture5.png" width="320" /></a></div>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Hai Selamat Sore</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">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?</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">Karena selain gratis juga sangat mudah digunakan dan mempunyai dokumentasi yang baik dan mudah.</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<br />
<blockquote class="tr_bq">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><a href="http://mafulprayogaarnandi.blogspot.com/2016/05/membuat-diagram-batang-dengan-highcharts.html" target="_blank">Baca juga: Membuat Diagram Batang dengan HighCharts</a></span></blockquote>
<span style="font-family: "arial" , "helvetica" , sans-serif;">1. Kita buat database bernama voting, kemudian buat tabel dengan nama hasilvoting dan masukan beberapa data sebagai contoh</span><br />
<pre class="brush:sql;">--
-- 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);
</pre>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">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</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<br />
<blockquote class="tr_bq">
<span style="font-family: "arial" , "helvetica" , sans-serif;">File connection.php digunakan untuk melakukan koneksi ke database sekaligus sebagai query yang dijalankan ke database.</span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">File index.php digunakan menampilkan diagram yang akan kita buat sekaligus menyisipkan plugin dari highcharts</span> </blockquote>
<br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">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.</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">Oke silahkan downloadnya pluginnya di highcharts.com atau teman-teman bisa menggunakan CDN nya dari highcharts.</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">4. Kode, tahap ini kita akan menulis syntax php dan html. Buka file connection.php</span><br />
<pre class="brush: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;
    }
}

?>
</pre>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Kemudian buka file index.php</span><br />
<pre class="brush:php;"><!DOCTYPE html>
<html>
<head>
    <title>3D Pie Donut | HighCharts</title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<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>

<div id="suara"></div>

<footer>
    <p align="center">By Maful Prayoga Arnandi visit <a href="http://mafulprayogaarnandi.blogspot.com/" target="_blank">blog</a></p>
</footer>

<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>

</body>
</html>
</pre>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">5. Setelah itu silahkan akses folder proyek kita, defaultnya </span><span style="font-family: "georgia" , "times new roman" , serif;">http://localhost/diagram-highcharts</span><span style="font-family: "arial" , "helvetica" , sans-serif;"> dan lihat apa yang terjadi. Mirip donat bukan? Ada lubang ditengahnya.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy05X0tRcZV97Me5GLaWm2tnx71m1OwyS6sxEwYI5mMnBO8rmH3X3ckKxi1kiyv0WI8Vtg0YazkiSaszYwhpOa6MwjqVTuF54ESz8BURPx9CPfYQCoxsIsRKdPMiRbDg4WJr31lVQflLo/s1600/picture5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="136" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy05X0tRcZV97Me5GLaWm2tnx71m1OwyS6sxEwYI5mMnBO8rmH3X3ckKxi1kiyv0WI8Vtg0YazkiSaszYwhpOa6MwjqVTuF54ESz8BURPx9CPfYQCoxsIsRKdPMiRbDg4WJr31lVQflLo/s320/picture5.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<span style="font-family: "arial" , "helvetica" , sans-serif;">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.</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span><span style="font-family: "arial" , "helvetica" , sans-serif;">Selesai sudah tutorial kali ini, semoga bermanfaat dan jika ada pertanyaan silahkan komen dibawah ini.</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="background-color: #fafafa; line-height: 20.8px;">Jika ada pertanyaan lebih lanjut bisa </span><span style="background-color: #fafafa; line-height: 20.8px;">hubungi saya di mafulprayoga@gmail.com atau ada kepentingan tentang pembuatan website atau aplikasi bisa langsung menghubungi saya.</span></span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>

Membuat Diagram Lingkaran dengan HighCharts

Hai Selamat Sore Melanjutkan tutorial yang sebelumnya, pada tutorial sebelumnya kita membuat Diagram Batang menggunakan HighCharts. Pada...

15:56

Membuat Diagram Batang dengan HighCharts

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX_lQDiWVCtMrD0bqdLhShwDOr4uCBzTPA66WTo3m4Zwem7PSGklE7MEHoNGn-rxXLSmDc3b2PFwFElnOkGhHBPJagoLLl5m01aLoSkN5QSQEeEmCqg0RdRWUa4knM89cQ-Ty-Qt9RHJI/s1600/picture3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="124" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX_lQDiWVCtMrD0bqdLhShwDOr4uCBzTPA66WTo3m4Zwem7PSGklE7MEHoNGn-rxXLSmDc3b2PFwFElnOkGhHBPJagoLLl5m01aLoSkN5QSQEeEmCqg0RdRWUa4knM89cQ-Ty-Qt9RHJI/s320/picture3.png" width="320" /></a></div>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Hai, selamat pagi teman-teman</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">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.</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">Setelah saya pikir-pikir akhirnya saya putuskan untuk menggunakan HighCharts sebagai plugin untuk membuat diagram barang.(highcharts.com)</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">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.</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">Banyak sebenarnya diluar sana plugin-plugin untuk membuat chart yang bisa teman-teman gunakan, sesuai dengan selera dan kebutuhan.</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">1. Tahap pertama pastinya teman-teman harus sudah mendownload highcharts, teman-teman bisa mendownload di <a href="http://www.highcharts.com/download" target="_blank">www.highcharts.com/download</a></span><br />
<br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">2. Kedua, buat folder di htdocs (jika menggunakan xampp/lampp) dan beri nama <b>diagrambatang</b> , buat folder assets didalam proyek kita. Kemudian buat folder highcharts didalam folder assets. Selanjutnya ekstrak <b>highcharts.js</b> <b>exporting.js </b>yang tadi teman-teman download.</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">3. Ketiga, setelah berhasil mendownload highcharts. Sekarang download jQuery di <a href="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" target="_blank">sini</a> kemudian <b>save page as </b>dan letakan didalam folder assets.</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">4. Keempat, buat folder <b>include </b>didalam proyek kita. Dan buat file dengan nama <b>connection.php </b>. Selanjutnya buat file <b>index.php </b>di dalam proyek kita. F</span><br />
<blockquote class="tr_bq">
<span style="font-family: "arial" , "helvetica" , sans-serif;">Fungsi dari <b>connection.php </b>adalah untuk melakukan koneksi ke database sekaligus sebagai query ke database sebagai manipulasi data.<br />Fungsi dari <b>index.php </b>adalah untuk menampilkan Diagram Batang yang nanti kita buat.</span></blockquote>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">5. Kelima, pastikan serice <b>Apache </b>dan <b>MySQL </b>sudah dalam kondisi running. Kemudian masuk ke phpmyadmin dan buat database dengan nama <b>voting</b>. Buat tabel <b>hasilvoting</b> sebagai menampung data pada voting dan masukan beberapa data sebagai contoh.</span><br />
<pre class="brush:sql;">--
-- Table structure for table `hasilvoting`
--

--
-- Dumping data for table `hasilvoting`
--

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
    }

?>
</pre>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">7. Ketujuh, buka file index.php sebagai penampil dari diagram batang yang kita buat, dan juga kita akan memasukan plugin highcharts didalamnya.</span><br />
<pre class="brush:php;"><!DOCTYPE html>
<html>
<head>
    <title>Diagram Batang | HighCharts</title>

<script type="text/javascript" src="assets/jquery.min.js"></script>

<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';

// 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>

<div id="suara"></div>

<footer>
    <p align="center">By Maful Prayoga Arnandi visit <a href="http://mafulprayogaarnandi.blogspot.com/" target="_blank">blog</a></p>
</footer>

<script type="text/javascript" src="assets/highcharts/highcharts.js"></script>
<script type="text/javascript" src="assets/highcharts/exporting.js"></script>

</body>
</html>
</pre>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">8. Setelah semuanya selesai, sekarang coba kita akses proyek kita dan hasilnya akan seperti berikut</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw6N7JfP-_6UILJELo6LqEIPBhBBOTQ4EisH5e9jhY5ZlSFyO3_y-1dKsKBIRoNu9nNBuEh5fFqtEMggCmTNc6y5h9UdBK8Sxvllmg6_wpcm7cmUWOQkJa74BqpNyQydzg8yj58Egp_9I/s1600/picture3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="124" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw6N7JfP-_6UILJELo6LqEIPBhBBOTQ4EisH5e9jhY5ZlSFyO3_y-1dKsKBIRoNu9nNBuEh5fFqtEMggCmTNc6y5h9UdBK8Sxvllmg6_wpcm7cmUWOQkJa74BqpNyQydzg8yj58Egp_9I/s320/picture3.png" width="320" /></a></div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">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.</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Selesai sudah tutorial kali ini, semoga bermanfaat dan jika ada pertanyaan silahkan komen dibawah ini.</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="background-color: #fafafa; line-height: 20.8px;">Jika ada pertanyaan lebih lanjut bisa </span><span style="background-color: #fafafa; line-height: 20.8px;">hubungi saya di mafulprayoga@gmail.com atau ada kepentingan tentang pembuatan website atau aplikasi bisa langsung menghubungi saya.</span></span>

Membuat Diagram Batang dengan HighCharts

Hai, selamat pagi teman-teman Berawal dari proyek yang sedang saya kerjakan dan alhamdulillah sudah selesai. Ada salah satu permintaan d...

07:16

Tutorial export Excel No Plugin

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwq90yjpogeY9oUu45_JUHGWJoBz2RKuBfuXgtwjpzQEMstER_3hLzrZ6ire4GHJwgIQY-lCrK1XFb1l2Ni_T8PF1JGVBW01c_pn9k0VOe-tujjCJUgwjULxEHRLyFUtuu4h3LhK-BX60/s1600/excel-export.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwq90yjpogeY9oUu45_JUHGWJoBz2RKuBfuXgtwjpzQEMstER_3hLzrZ6ire4GHJwgIQY-lCrK1XFb1l2Ni_T8PF1JGVBW01c_pn9k0VOe-tujjCJUgwjULxEHRLyFUtuu4h3LhK-BX60/s320/excel-export.png" width="320" /></a></div>
<div style="text-align: center;">
<span style="font-size: x-small;">(ninjaforms.com)</span></div>
<div style="text-align: center;">
<span style="font-size: x-small;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;">Selamat Pagi dan selamat beraktifitas</span></div>
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;">Pagi ini saya akan memberikan sedikit ilmu pada teman-teman semua. Ilmu apa?</span></div>
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;">Ilmu bagaimana meng-export data dari database kemudian dijadikan ke dalam bentuk excel (.xls)</span></div>
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;">Export ke excel adalah suatu fitur yang penting untuk report data pada aplikasi. Kebanyakan aplikasi yang pernah saya buat ada fitur <b>export excel </b>dikarenakan suatu keharusan dan keinginan dari client sendiri. Banyak cara yang dapat dilakukan untuk export ke excel, antara lain menggunakan plugin dan no plugin.</span></div>
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;">Di tutorial kali ini kita akan mencoba yang no plugin. Maksudnya apa?</span></div>
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;">Maksudnya ketika kita membuat repot ke excel kita tidak menggunakan dukungan pihak ketiga(phpexcel, dll). Kita hanya memanfaatkan syntax yang sudah ada pada php.</span></div>
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span></div>
<blockquote class="tr_bq" style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;">Keuntungan apa yang kita dapat ketika menggunakan no plugin?</span><span style="font-family: "arial" , "helvetica" , sans-serif;">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.</span></blockquote>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Setelah membahas keuntungan pastinya ada kekurangan yang kita dapat, ayo kita bahas bersama</span><br />
<br />
<blockquote class="tr_bq">
<span style="font-family: "arial" , "helvetica" , sans-serif;">Kekurangan apa yang kita dapat ketika menggunakan no plugin?</span><span style="font-family: "arial" , "helvetica" , sans-serif;">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.</span></blockquote>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Oke, setelah kita membahas keuntungan dan kekurangan yang kita dapat, selanjutnya kita membahas apa saja yang kita butuhkan.</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">Pertama, harus mempunyai Web Server(Apache, Nginx dll), MySQL, Text Editor(Sublime, Notepad++), Browser(Firefox, Chrome)</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Langsung dalam pembuatan</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">1. Buat database baru, contoh dengan nama perpus</span><br />
<pre class="brush:sql;">create database perpus;</pre>
<span style="font-family: "arial" , "helvetica" , sans-serif;">2. Membuat tabel buku</span>
<br />
<pre class="brush:sql;">CREATE TABLE IF NOT EXISTS `buku` (
  `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 ;
</pre>
<span style="font-family: "arial" , "helvetica" , sans-serif;">3. Setelah membuat tabel, silahkan masukan beberapa contoh data</span><br />
<pre class="brush:sql;">INSERT INTO `buku` (`kode`, `nama_buku`, `pengarang`, `penerbit`) VALUES
(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');
</pre>
<span style="font-family: "arial" , "helvetica" , sans-serif;">4. Jika teman-teman menggunakan lampp/ xampp, pastikan apache dan mysql sudah dalam keadaan running. </span><span style="font-family: "arial" , "helvetica" , sans-serif;">Kemudian masuk ke folder htdocs dan buat folder untuk proyek kita, misal kita beri nama <b>reportexcel </b></span><span style="font-family: "arial" , "helvetica" , sans-serif;">kemudian buat file index.php fungsinya untuk menampilkan data dari tabel buku. </span><span style="font-family: "arial" , "helvetica" , sans-serif;">Buat folder include, kemudian buat file connection.php fungsinya untuk melakukan koneksi ke database dan melakukan </span><span style="font-family: "arial" , "helvetica" , sans-serif;">query.</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">5. Tahap coding, buka file connection.php dan masukan kode berikut</span><br />
<pre class="brush:php;"><?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;
    }
}

?>
</pre>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br />kemudian buka file index.php dan masukan kode berikut</span><br />
<pre class="brush:php;"><!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>
</pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVnT2q4JIYYwKpJyukbp7J2U6QKRjgrQtZ2UdybtfLoj5LUak_e1aXVOTZI3PfvV_gxIgVg8e3xTTeIJT4iyX9_rB3dvE7VpZs5YHqJ1u-Iyt4i8-DOcqJtY-DbPpL89FcmC-CWpu8OEU/s1600/picture1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="138" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVnT2q4JIYYwKpJyukbp7J2U6QKRjgrQtZ2UdybtfLoj5LUak_e1aXVOTZI3PfvV_gxIgVg8e3xTTeIJT4iyX9_rB3dvE7VpZs5YHqJ1u-Iyt4i8-DOcqJtY-DbPpL89FcmC-CWpu8OEU/s320/picture1.png" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">6. Setelah kita mengakses poryek kita, hanya muncul beberapa data saja. Dan bagaimana export ke excelnya?</span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">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</span>
<br />
<pre class="brush:php;"><?php
header("Content-type: application/vnd-ms-excel");
header("Content-Disposition: attachment; filename=Export-Data-Buku");
?>
</pre>
<br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">Sekarang coba kita akses kembali file proyek kita maka browser akan mendownload file excel yang telah kita buat.</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">Jadi full source codenya</span><br />
<pre class="brush:php;">
<?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>
</pre>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Dan hasillnya adalah :D</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhesa5WQAYC5inNXFoZQKb5GWa0adKYSdcmUystxQvTYEF0EyqSvZz15cPGFPelk5_TxYJ9Zleiv3KjV2Gc94c4sQ8nxGQo5XNiJkvcNKi1wG1XpcipSBtNTFdyCI86gN6bHLUhExS_uw8/s1600/picture2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="111" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhesa5WQAYC5inNXFoZQKb5GWa0adKYSdcmUystxQvTYEF0EyqSvZz15cPGFPelk5_TxYJ9Zleiv3KjV2Gc94c4sQ8nxGQo5XNiJkvcNKi1wG1XpcipSBtNTFdyCI86gN6bHLUhExS_uw8/s320/picture2.png" width="320" /></a></div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Oke, akhirnya selesai juga tutorial kali ini. Jika ada pertanyaan lebih lanjut bisa </span><span style="font-family: "arial" , "helvetica" , sans-serif;">hubungi saya di mafulprayoga@gmail.com atau ada kepentingan tentang pembuatan website atau aplikasi bisa langsung menghubungi saya.</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Terimakasih</span>
<div style="text-align: center;">
<ul class="kotak-demo-download">

<li><a class="download" href="https://github.com/maful/php-export-excel-no-plugin" target="_blank"><i class="icon-cloud-download"></i> Demo & Download</a></li>
</ul>
</div>
<div class="clear">
</div>

Tutorial export Excel No Plugin

(ninjaforms.com) Selamat Pagi dan selamat beraktifitas Pagi ini saya akan memberikan sedikit ilmu pada teman-teman semua. Ilmu ap...

07:19

Maful Prayoga

Baru!! Download Source Code Toko Online CodeIgniter - See More.

Membuat Diagram Lingkaran dengan HighCharts

Membuat Diagram Batang dengan HighCharts

Tutorial export Excel No Plugin

Entri Populer

Blog Archive