Maful Prayoga

Download Source Code Toko Online dengan CodeIgniter

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDAAaERt7LhnIUn9MJArTQ8h2kLJVAhVSempGXg0AtpU5Am6hCZtYxkkwhNgVO0dN2AY4rnRkRJI7_u6p4DA_N9MYzwUHnCoTI6KArokCyN7iGz9aws3cfZ66sRmGc2ZCix9iOSDR_Is0/s1600/ecom1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="129" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDAAaERt7LhnIUn9MJArTQ8h2kLJVAhVSempGXg0AtpU5Am6hCZtYxkkwhNgVO0dN2AY4rnRkRJI7_u6p4DA_N9MYzwUHnCoTI6KArokCyN7iGz9aws3cfZ66sRmGc2ZCix9iOSDR_Is0/s320/ecom1.png" width="320" /></a></div>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Haii</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">Selamat berjumpa kembali, sekarang saya akan membagikan GRATIS source code toko online/ eCommerce dengan model bisnis consumer-to-consumer(C2) layaknya Bukalapak.</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><b>Daftar Konten</b></span><br />
<ul>
<li><span style="font-family: "arial" , "helvetica" , sans-serif;"><a href="#intro">Intro</a></span></li>
<li><span style="font-family: "arial" , "helvetica" , sans-serif;"><a href="#deskripsi">Deskripsi</a></span></li>
<li><span style="font-family: "arial" , "helvetica" , sans-serif;"><a href="#faq">FAQ</a></span></li>
<li><span style="font-family: "arial" , "helvetica" , sans-serif;"><a href="#screenshot">Screenshot</a></span></li>
<li><span style="font-family: "arial" , "helvetica" , sans-serif;"><a href="#download">Download</a></span></li>
<li><span style="font-family: "arial" , "helvetica" , sans-serif;"><a href="#penutup">Penutup</a></span></li>
</ul>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span id="intro" style="font-family: "arial" , "helvetica" , sans-serif; font-size: x-large;">Intro</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">eCommerce adalah situs jual beli online yang bisa mempermudah seseorang untuk membeli peralatan pribadi maupun kelompok secara online. Di Indonesia sudah ada banyak sekali toko online seperti Tokopedia, Bukalapak, Matahari Mall, Lazada, Elevenia dll.</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: x-large;" id="deskripsi">Deskripsi</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">Toko online yang akan saya bagikan ini adalah toko online yang sudah mempunyai fitur seperti</span><br />
<br />
<ul>
<li><span style="font-family: "arial" , "helvetica" , sans-serif;">Jual Barang</span></li>
<li><span style="font-family: "arial" , "helvetica" , sans-serif;">Beli Barang</span></li>
<li><span style="font-family: "arial" , "helvetica" , sans-serif;">Keranjang</span></li>
<li><span style="font-family: "arial" , "helvetica" , sans-serif;">Kategori</span></li>
<li><span style="font-family: "arial" , "helvetica" , sans-serif;">Profil</span></li>
<li><span style="font-family: "arial" , "helvetica" , sans-serif;">Masuk</span></li>
<li><span style="font-family: "arial" , "helvetica" , sans-serif;">Daftar</span></li>
</ul>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Toko online ini saya tempatkan di github agar teman-teman bisa berkolaborasi atau berkontribusi terhadap pengembangan toko online ini.</span></div>
<div>
<br /></div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Toko online ini dibuat menggunakan:</span></div>
<div>
<ul>
<li><span style="font-family: "arial" , "helvetica" , sans-serif;">Framework CodeIgniter (https://codeigniter.com/)</span></li>
<li><span style="font-family: "arial" , "helvetica" , sans-serif;">Semantic UI (http://semantic-ui.com/)</span></li>
<li><span style="font-family: "arial" , "helvetica" , sans-serif;">jQuery (https://jquery.com/)</span></li>
<li><span style="font-family: "arial" , "helvetica" , sans-serif;">CodeIgniter Modular Extension HMVC (https://bitbucket.org/wiredesignz/codeigniter-modular-extensions-hmvc)</span></li>
</ul>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: x-large;" id="faq">Pertanyaan dan Jawaban</span></div>
</div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><b>1. Apa itu Framework CodeIgniter</b></span></div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Jawaban: CodeIgniter adalah framework php yang bersifat open source dan mempunyai metode MVC (Model View Controller)</span></div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><b>2. Mengapa menggunakan CodeIgniter ?</b></span></div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Jawaban: Karena pada saat itu saya baru menguasai pada Framework CodeIgniter dan tentunya menurut saya mudah, cepat, dan banyak komunitas serta dokumentasi yang jelas. Teman-teman bisa mengakses CodeIgniter di </span><span style="font-family: "arial" , "helvetica" , sans-serif;">https://codeigniter.com/ dan silahkan membaca User Guide untuk panduan lengkap menggunakan CodeIgniter.</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;">Baca Juga : <a href="http://mafulprayogaarnandi.blogspot.com/2015/04/aplikasi-inventory-barang-codeigniter.html" target="_blank">Aplikasi Inventory Barang dengan CodeIgniter</a></span></blockquote>
</div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><b>3. Apa itu Semantic UI ?</b></span></div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Jawaban: Semantic UI adalah sebuah framework CSS yang bersifat open source dan digunakan untuk pengembangan web sebagai User Interface.</span></div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><b>4. Mengapa menggunakan Semantic UI ?</b></span></div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Jawaban: Karena, ketika saya melihat beberapa framework css dan saya menemukan hal baru yang berguna untuk saya pelajari, dan saya menemukan Semantic UI. Dengan dokumentasi dan contoh kode yang jelas serta melihat beberapa komponen yang ada dalam Semantic UI bagus maka saya memutuskan untuk menggunakan Semantic UI sebagai User Interface dari toko online ini.</span></div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><b>5. Dimana saya dapat mendownload Toko Online ini ?</b></span></div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Jawaban: Teman-teman bisa mendownload toko online ini secara <b>GRATIS</b>. Artinya teman-teman boleh menggunakan toko online ini sebagai referensi belajar. Silahkan cek akhir artikel ini untuk mendapatkan link download.</span></div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><b>6. Bagaimana cara install Toko Online ini ?</b></span></div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Jawaban: Jika teman-teman belum tahu cara menginstallnya, pada tutorial selanjutnya saya akan membagikan tutorial step by step secara detail.</span></div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: x-large;" id="screenshot">Screenshot Toko Online</span></div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Jika teman-teman ingin melihat terlebih dahulu seperti apa tampilan dari toko online ini, silahkan lihat gambar dibawah ini</span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDAAaERt7LhnIUn9MJArTQ8h2kLJVAhVSempGXg0AtpU5Am6hCZtYxkkwhNgVO0dN2AY4rnRkRJI7_u6p4DA_N9MYzwUHnCoTI6KArokCyN7iGz9aws3cfZ66sRmGc2ZCix9iOSDR_Is0/s1600/ecom1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Tampilan awal Toko Online" height="129" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDAAaERt7LhnIUn9MJArTQ8h2kLJVAhVSempGXg0AtpU5Am6hCZtYxkkwhNgVO0dN2AY4rnRkRJI7_u6p4DA_N9MYzwUHnCoTI6KArokCyN7iGz9aws3cfZ66sRmGc2ZCix9iOSDR_Is0/s320/ecom1.png" title="" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Tampilan awal (sebelum masuk)</td></tr>
</tbody></table>
<div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjW45kQiEkWwObid50lv9-58jDEg4TyoS8WLVP2o8RKedpyhEe4E6S4O8rqxBeO0h3pGd2-gibkjAZwQ4krmNDsrDqVpEav7PcgYFEcSkk1dkeQACQY6nwM4kVEC5N30ndpAadft8OFjQ/s1600/ecom4.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Tampilan awal sudah masuk" border="0" height="143" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjW45kQiEkWwObid50lv9-58jDEg4TyoS8WLVP2o8RKedpyhEe4E6S4O8rqxBeO0h3pGd2-gibkjAZwQ4krmNDsrDqVpEav7PcgYFEcSkk1dkeQACQY6nwM4kVEC5N30ndpAadft8OFjQ/s320/ecom4.png" title="" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Tampilan awal (sudah masuk)</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5udEzQpGNx2LrQ2I6qjRsVDJf6E-crKskEDTV960uOrO6LpyhJ-5OmFvwSH04_I1ljlNwBmcGYfVXdMQRD4omk0dDg-qMUlwSzVBoEG2uDCNaweJiutr7yBfVs1oRFpxa8AtG4j0_rbY/s1600/ecom5.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Tampilan deskripsi barang" border="0" height="101" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5udEzQpGNx2LrQ2I6qjRsVDJf6E-crKskEDTV960uOrO6LpyhJ-5OmFvwSH04_I1ljlNwBmcGYfVXdMQRD4omk0dDg-qMUlwSzVBoEG2uDCNaweJiutr7yBfVs1oRFpxa8AtG4j0_rbY/s320/ecom5.png" title="" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Tampilan deskripsi barang</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM0o7XADLRAr0QZGxED-UWnEtfABk6L0-xOr6WbDVk_y0-MCkcyYJaMUj3R8I1eMlXLpW7CRIQ0J7zASG-l3FB82XFcptfCuWE-qJLqUDjP69SJW4XnNRarWrssYRIHqW9bzh1uAvrztk/s1600/ecom9.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Tampilan keranjang belanja" border="0" height="122" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM0o7XADLRAr0QZGxED-UWnEtfABk6L0-xOr6WbDVk_y0-MCkcyYJaMUj3R8I1eMlXLpW7CRIQ0J7zASG-l3FB82XFcptfCuWE-qJLqUDjP69SJW4XnNRarWrssYRIHqW9bzh1uAvrztk/s320/ecom9.png" title="" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Tampilan keranjang belanja</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyCEN9o14nqDjlHSTnnJHsPiwACmuEDA2IIJiwOMPq5S5xrhbfIWEf_8dOJNF9XXjf0XJ0FQBco8dLxKjRUpfbYfU3GSc3jRMtvWOayhnVWI3linrsGFN5pWe6sm9aAObENEa3rUhiTEU/s1600/ecom2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Tampilan halaman Login" border="0" height="248" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyCEN9o14nqDjlHSTnnJHsPiwACmuEDA2IIJiwOMPq5S5xrhbfIWEf_8dOJNF9XXjf0XJ0FQBco8dLxKjRUpfbYfU3GSc3jRMtvWOayhnVWI3linrsGFN5pWe6sm9aAObENEa3rUhiTEU/s320/ecom2.png" title="" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Tampilan halaman Login</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju_7PbgRSX_3AozTy9p2qkYXmZh7DA4YschKiqVqPla9yDUC0a_AxZmdnaOJO3YyOApiOlL3P-PHtU7YhNs-ZhsD6eWKaOP3lrQPbO7UFmDQnRNB_c5EhQOpgRsDq1jPvzh5nW3GmwgQY/s1600/ecom3.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Tampilan halaman Register" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju_7PbgRSX_3AozTy9p2qkYXmZh7DA4YschKiqVqPla9yDUC0a_AxZmdnaOJO3YyOApiOlL3P-PHtU7YhNs-ZhsD6eWKaOP3lrQPbO7UFmDQnRNB_c5EhQOpgRsDq1jPvzh5nW3GmwgQY/s320/ecom3.png" title="" width="276" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Tampilan halaman Register</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiicfNrtT3EKYnJXwfgY_sWxFZwsOAF7iMTGTRPNFOhCKqbGrJoAfkmqkHRSAIQqxxTUcsPYZ1poW6WEWKubXRw2h2hMyHy8eIHM8Nn0ohBrlKKRRc3OaxXQFp6UhJq4FBA2L_PNAjZsNE/s1600/ecom7.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Tampilan Proses Jual Barang" border="0" height="245" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiicfNrtT3EKYnJXwfgY_sWxFZwsOAF7iMTGTRPNFOhCKqbGrJoAfkmqkHRSAIQqxxTUcsPYZ1poW6WEWKubXRw2h2hMyHy8eIHM8Nn0ohBrlKKRRc3OaxXQFp6UhJq4FBA2L_PNAjZsNE/s320/ecom7.png" title="" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Tampilan Proses Jual Barang</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKB8hDUl2D9I_Q_mg5W-OHbLvO2L5o_jsF9pdE0jeK_dqq_sKLfzgT7mxKM7TLU8CrodvldqErT993VqflFKCcves5ZghGjB-MahUoD3STvjDEO9wHOc_GZbnVF7Lp54wbQeocUazBJSM/s1600/ecom6.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Tampilan Data Barang" border="0" height="114" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKB8hDUl2D9I_Q_mg5W-OHbLvO2L5o_jsF9pdE0jeK_dqq_sKLfzgT7mxKM7TLU8CrodvldqErT993VqflFKCcves5ZghGjB-MahUoD3STvjDEO9wHOc_GZbnVF7Lp54wbQeocUazBJSM/s320/ecom6.png" title="" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Tampilan Data Barang</td></tr>
</tbody></table>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Demikian beberapa screenshot tampilan dari Toko Online ini.</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: x-large;" id="download">Download</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">Dimana saya bisa mendownload toko online ini?</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">Untuk mendownload toko online ini, klik link download dibawah atau jika teman-teman sudah terbiasa dengan GIT, bisa <b>Fork Repository </b>dan melakukan perintah <b>git clone </b>untuk mendownload web ini.</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><b><br /></b></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><b>Direct Link</b></span></div>
<br />
<ul class="kotak-demo-download">

<li><a class="download" href="https://github.com/maful/ecom/archive/master.zip" target="_blank"><i class="icon-cloud-download"></i>Download</a></li>
</ul>
<br />
<br />
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: x-large;" id="penutup">Penutup</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">Sekian artikel dari Download Source Code Toko Online dengan CodeIgniter semoga bermanfaat untuk teman-teman dan juga bisa menambah ilmu saya.</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Jika teman-teman membutuhkan jasa atau bantuan saya, jangan ragu silahkan kontak saya di bawah ini:</span><br />
<blockquote class="tr_bq">
<span style="font-family: "arial" , "helvetica" , sans-serif;">BBM : 54D7AED3<br />WA/ SMS : 085726276148<br />Email : <a href="mailto:mafulprayoga@gmail.com">mafulprayoga@gmail.com</a></span></blockquote>

Download Source Code Toko Online dengan CodeIgniter

Haii Selamat berjumpa kembali, sekarang saya akan membagikan GRATIS source code toko online/ eCommerce dengan model bisnis consumer-to-co...

08:02

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

Aplikasi E-Voting dengan OOP PHP MySQL

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBiWhrvY1ZE5LcSWKwNtLxc3lmBHQJ83gPFnWm21g6Dl1Wm3hu7OJSUgHsc658EnR8iOONn3tnJSXBmtWXIQKacu70Nsf9NwT60Wk2qsn1Knvaka3x3whwj2GeSVEL7HkI-do9ezpuF2s/s1600/oop.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBiWhrvY1ZE5LcSWKwNtLxc3lmBHQJ83gPFnWm21g6Dl1Wm3hu7OJSUgHsc658EnR8iOONn3tnJSXBmtWXIQKacu70Nsf9NwT60Wk2qsn1Knvaka3x3whwj2GeSVEL7HkI-do9ezpuF2s/s320/oop.png" width="320" /></a></div>
Selamat Pagi dan Selamat Beraktifitas<br />
<br />
Kali ini kita akan melihat review dari <b>Aplikasi E-Voting dengan OOP PHP dan MySQL</b><br />
<b><br /></b>
<b>Intro</b><br />
Aplikasi E-Voting adalah aplikasi yang memudahkan kita dalam mengetahui hasil jumlah suara pada saat pemilihan ketua atau dewan.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR7OVCzRa01a2Co0E9ttzFciUtQ5eQLDoHoEVzOyMzpCyxSNyZjld8xrbZekRaTuvGVndmyX63IYfBJdpzbtRDhcgi_uz3JnO8APU6svybAGypzcSZzrzUb_MN9LrJ2GYPwz0520SPkjw/s1600/avatar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR7OVCzRa01a2Co0E9ttzFciUtQ5eQLDoHoEVzOyMzpCyxSNyZjld8xrbZekRaTuvGVndmyX63IYfBJdpzbtRDhcgi_uz3JnO8APU6svybAGypzcSZzrzUb_MN9LrJ2GYPwz0520SPkjw/s320/avatar.png" width="320" /></a></div>
<br />
<br />
<b>Tujuan</b><br />
Aplikasi ini bertujuan untuk memudahkan dalam proses pemilihan umum dengan bantuan sistem.<br />
<br />
<b>Review Singkat</b><br />
Untuk melihat gambaran aplikasi ini kalian bisa melihat video dibawah ini:<br />
<p align="center">
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/gJTJ73E1C-w" width="420"></iframe></p>
<br />
<b>Deskripsi Aplikasi</b><br />
Aplikasi ini dibangun berbasis Web Based atau berbasis web yang bisa diakses melalui web browser. Berikut adalah apa saja yang ada di Aplikasi ini<br />
- Menu Admin<br />
<br />
<ul>
<li>Data Pemilih Tetap</li>
<li>Kandidat Calon</li>
<li>Hasil Perolehan Suara</li>
</ul>
<div>
- Menu Pemilih</div>
<div>
<ul>
<li>Pemilu</li>
<li>Profil</li>
</ul>
<div>
Aplikasi dibangun menggunakan</div>
</div>
<div>
<ol>
<li>PHP (OOP)</li>
<li>Database MySQL</li>
<li>FrontEnd (Bootstrap, Font Awesome, DataTables, jQuery)</li>
</ol>
<div>
<br /></div>
</div>
<div>
<b>Kesimpulan</b></div>
<div>
Dengan Aplikasi akan mempermudah dalam kehidupan sehari-hari dengan melakukan beberapa hal yang biasa dilakukan secara manual dan sekarang bisa dilakukan menggunakan sistem otomatis.</div>

Aplikasi E-Voting dengan OOP PHP MySQL

Selamat Pagi dan Selamat Beraktifitas Kali ini kita akan melihat review dari Aplikasi E-Voting dengan OOP PHP dan MySQL Intro Aplikas...

08:52

Maful Prayoga

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

Download Source Code Toko Online dengan CodeIgniter

Membuat Diagram Lingkaran dengan HighCharts

Membuat Diagram Batang dengan HighCharts

Tutorial export Excel No Plugin

Aplikasi E-Voting dengan OOP PHP MySQL

Entri Populer

Blog Archive