Trik Mudah Membuat CMS Website dari Nol

Trik Mudah Membuat CMS Website dari Nol

Trik Mudah Membuat CMS Website dari Nol Rohi Abdulloh PENERBIT PT ELEX MEDIA KOMPUTINDO

Trik Mudah Membuat CMS Website dari Nol Rohi Abdulloh 2016, PT Elex Media Komputindo, Jakarta Hak cipta dilindungi undang-undang Diterbitkan pertama kali oleh Penerbit PT Elex Media Komputindo Kelompok Gramedia, Anggota IKAPI, Jakarta 2016 716051449 ISBN: 978-602-02-9169-7 [eep] Dilarang keras menerjemahkan, memfotokopi, atau memperbanyak sebagian atau seluruh isi buku ini tanpa izin tertulis dari penerbit. Dicetak oleh Percetakan PT Gramedia, Jakarta Isi di luar tanggung jawab percetakan

KATA PENGANTAR Puji syukur penulis sampaikan ke hadirat Allah SWT, karena berkat anugerah-nya penulis dapat menyelesaikan buku ini hingga sampai ke tangan pembaca. Penulis berharap buku ini dapat bermanfaat bagi para pembaca. Dibalik sebuah website dinamis pasti ada sebuah CMS yang digunakan untuk mengelola konten website. Kebanyakan orang menggunakan CMS gratis yang sudah banyak bertebaran di internet untuk mengelola website, beberapa di antaranya dibuat oleh orang Indonesia. Namun, bagi seorang programmer tentu akan menjadi kebanggaan tersendiri jika dapat mengembangkan CMS sendiri dibanding menggunakan CMS gratis. Dalam buku ini, penulis akan membahas cara membuat CMS dengan mudah dari nol hingga menjadi CMS yang lengkap dan kaya fitur. Struktur pemrograman dalam buku ini berbeda dengan pemrograman yang dibahas buku-buku pada umumnya, tetapi dibuat lebih simple dan mudah untuk diikuti. Tidak tanggung-tanggung, hasil CMS yang dibahas dalam buku ini dapat digunakan untuk membuat berbagai jenis website, seperti website sekolah, portal berita dan toko online. Dengan demikian, buku ini cocok bagi pembaca yang ingin mempelajari maupun meningkatkan pengetahuan di bidang pemrograman website. Hasil latihan yang dibahas dalam buku ini dapat di-download pada link yang disertakan pada buku, atau meminta link langsung ke penulis melalui email. v

Akhir kata, penulis menyadari masih banyak terdapat kekurangan dalam buku ini. Anda dapat mengirimkan kritik, saran atau pertanyaan ke email penulis rohi.abdulloh@gmail.com. Tegal, Jawa Tengah, Juni 2016 Rohi Abdulloh Link Download Final Project: https://drive.google.com/open?id=0b7qntayckdfbb2wynvhxmuzvz3c Link Download Ebook: https://drive.google.com/open?id=0b7qntayckdfbdxmzmghkbtrlnfe vi

DAFTAR ISI KATA PENGANTAR... V DAFTAR ISI...VII BAB 1 CMS DAN DASAR PEMROGRAMAN WEBSITE... 1 1.1 Mengenal CMS Website...1 1.2 1.3 Keuntungan Membuat CMS Sendiri...2 Bahasa Pemrograman untuk Membuat CMS...2 1.3.1 HTML...3 1.3.2 1.3.3 CSS...3 PHP...4 1.3.4 1.3.5 Javascript...4 SQL...5 1.4 Aplikasi yang Dibutuhkan...5 1.4.1 1.4.2 Text Editor...5 Paket Apache dan Phpmyadmin...6 1.4.3 Web Browser...7 BAB 2 FUNGSI PHP DAN CARA PENGGUNAANYA... 9 2.1 Pengertian Fungsi (Function) PHP...9 2.2 Pengertian Argumen dan Parameter...10 2.3 Cara Memanggil Fungsi...10 2.4 Cara Membuat Fungsi...11 2.5 Variabel Global...12 2.6 2.7 Variabel Static...13 Default Parameter...13 BAB 3 PERSIAPAN AWAL MEMBUAT CMS... 15 3.1 Menentukan Fitur CMS Yang Akan Dibuat...15 3.2 Merancang Database...16 vii

3.3 Mengatur Struktur Folder CMS...21 3.4 Membuat File Konfigurasi...23 BAB 4 PLUGIN PENTING DALAM MEMBANGUN CMS... 25 4.1 JQuery...25 4.2 Bootstrap...27 4.3 DataTable...30 4.4 TinyMCE...33 4.5 Responsive Filemanager...36 BAB 5 MEMBUAT FUNGSI PENDUKUNG CMS... 43 5.1 5.2 Membuat Fungsi Anti Injeksi...43 Membuat Fungsi Tanggal Bahasa Indonesia...45 5.3 Membuat Fungsi Konversi Format SEO...46 5.4 5.5 Membuat Fungsi Hapus Folder...48 Membuat Fungsi Ekstrak File Zip...49 5.6 5.7 Membuat Fungsi Menu Admin...50 Membuat Fungsi Pengaturan Tabel...53 5.8 Membuat Fungsi Pengaturan Form...55 BAB 6 MEMBUAT PANEL ADMINISTRATOR CMS... 61 6.1 Membuat Halaman Login...61 6.2 Membuat File Master Administrator...64 6.3 6.4 Membuat Menu...67 Membuat Sidebar...70 6.5 Mengatur Tampilan Konten...73 6.6 6.7 Membuat Skrip Logout...76 Manajemen Kategori...76 6.7.1 6.7.2 Struktur File Manajemen Kategori...77 Menampilkan Data Kategori...78 6.7.3 Membuat Form Tambah dan Edit Kategori...79 6.7.4 6.7.5 Mengatur Aksi Tambah dan Edit Kategori...81 Menghapus Data Kategori...81 6.8 Manajemen Tag...83 6.9 Manajemen Artikel...86 6.9.1 Struktur File Manajemen Artikel...87 6.9.2 6.9.3 Menampilkan Data Artikel...88 Membuat Form Tambah dan Edit Artikel...89 6.9.4 Mengatur Aksi Tambah dan Edit Artikel...92 6.9.5 Menghapus Data Artikel...93 6.10 Manajemen Halaman...94 6.10.1 Struktur File Manajemen Halaman...94 6.10.2 Menampilkan Data Halaman...95 viii

6.10.3 Membuat Form Tambah dan Edit Halaman...96 6.10.4 Mengatur Aksi Tambah dan Edit Halaman...98 6.10.5 Menghapus Data Halaman...99 6.11 Manajemen Komentar...99 6.11.1 Struktur File Manajemen Komentar...99 6.11.2 Menampilkan Data Komentar...100 6.11.3 Membuat Form Edit Komentar...102 6.11.4 Mengatur Aksi Edit Komentar...103 6.11.5 Menghapus Data Komentar...103 6.12 Manajemen Modul...103 6.12.1 Struktur File Manajemen Modul...103 6.12.2 Menampilkan Data Modul...104 6.12.3 Membuat Form Tambah dan Edit Modul...106 6.12.4 Mengatur Aksi Tambah dan Edit Modul...107 6.12.5 Menghapus Data Modul...108 6.12.6 Mengaktifkan Modul...108 6.12.7 Menonaktifkan Modul...109 6.13 Manajemen Template...110 6.13.1 Struktur File Manajemen Template...110 6.13.2 Menampilkan Data Template...111 6.13.3 Membuat Form Tambah dan Edit Template...112 6.13.4 Mengatur Aksi Tambah dan Edit Template...113 6.13.5 Menghapus Data Template...114 6.13.6 Mengaktifkan Template...114 6.14 Manajemen Menu...115 6.14.1 Struktur File Manajemen Menu...115 6.14.2 Menampilkan Data Menu...116 6.14.3 Membuat Form Tambah dan Edit Menu...118 6.14.4 Mengatur Aksi Tambah dan Edit Menu...122 6.14.5 Menghapus Data Menu...122 6.15 Manajemen Widget...123 6.15.1 Struktur File Manajemen Widget...124 6.15.2 Menampilkan Data Widget...124 6.15.3 Membuat Form Tambah dan Edit Widget...126 6.15.4 Mengatur Aksi Tambah dan Edit Widget...128 6.15.5 Menghapus, Mengaktifkan, dan Menonaktifkan Data Widget...129 6.16 Manajemen User...129 6.16.1 Struktur File Manajemen User...130 6.16.2 Menampilkan Data User...130 6.16.3 Membuat Form Tambah dan Edit User...132 ix

6.16.4 Mengatur Aksi Tambah dan Edit User...133 6.16.5 Menghapus Data User...134 6.17 Manajemen Media...134 6.18 Membuat File Pengaturan CMS...135 6.19 Backup dan Restore Database...138 6.19.1 Struktur File Backup dan Restore...139 6.19.2 Membuat Tombol Backup dan Restore...139 6.19.3 Membuat Skrip Backup...140 6.19.4 Membuat Skrip Restore...143 6.20 Mengubah Tampilan Dashboard...144 BAB 7 FUNGSI DAN TEMPLATE HALAMAN PENGUNJUNG... 149 7.1 Membuat File Index...149 7.2 Membuat File Htaccess...150 7.3 Mengambil Data Setting Website...151 7.4 Mendapatkan Nama Folder Template...152 7.5 Membuat Skrip Head Website...153 7.6 Memanggil Template Header dan Membuat Form Pencarian...154 7.7 Membuat Template Header dan Homepage...155 7.8 Memanggil dan Membuat Template Footer...157 7.9 Menampilkan Menu...159 7.10 Membuat Slideshow Image...162 7.11 Membuat Fungsi Paging...164 7.12 Menampilkan Artikel...165 7.13 Menampilkan Widget pada Sidebar...169 7.14 Menampilkan Halaman Statis...171 7.15 Menampilkan Detail Artikel...174 7.16 Menampilkan Artikel per Kategori...179 7.17 Membuat File 404...182 7.18 Menampilkan Hasil Pencarian...183 BAB 8 MENGEMBANGKAN MODUL CMS... 187 8.1 Memahami Modul CMS...187 8.2 Membuat Modul Galeri Foto...188 8.2.1 8.2.2 Membuat Menu Galeri Foto...189 Membuat File Function Modul Galeri Foto...189 8.2.3 Membuat Halaman Admin Modul...190 8.2.4 8.2.5 Membuat File Konten Modul...192 Menerapkan Plugin JQuery Lightbox...193 8.3 Membuat Modul Layout Homepage...195 8.3.1 Membuat Menu Modul Layout...196 x

8.3.2 8.3.3 Membuat File Function...196 Membuat Halaman Admin Modul...197 8.3.4 Membuat Fungsi Untuk Menampilkan Artikel...201 8.3.5 8.3.6 Mengatur Tampilan Layout...202 Membuat Widget Modul...207 8.4 Membuat Modul Toko Online...209 8.4.1 Membuat Menu Modul...209 8.4.2 Membuat File Function...209 8.4.3 8.4.4 Membuat Halaman Admin...211 Membuat Halaman Manajemen Produk...212 8.4.5 Membuat Pengaturan Toko Online...215 8.4.6 8.4.7 Membuat Halaman Manajemen Order...216 Membuat Konten Modul...219 8.5 Bonus Modul...232 8.5.1 Modul Hubungi Kami...232 8.5.2 Modul Jam Analog...233 8.5.3 8.5.4 Modul Kalender...234 Modul Social Button...234 8.5.5 Modul Statistik Pengunjung...235 8.5.6 Modul Polling...235 TENTANG PENULIS... 237 xi

CMS DAN DASAR PEMROGRAMAN WEBSITE 1.1 Mengenal CMS Website CMS adalah singkatan dari Content Management System. CMS merupakan aplikasi berbasis web yang digunakan untuk mengatur konten website. Hampir semua website pasti memiliki CMS yang mengatur kontenya, kecuali website statis. Sebuah CMS biasanya memiliki kemampuan untuk meng-update artikel, mengedit halaman website, mengatur menu dan tampilan website. Gambar 1.1 Contoh CMS 1

Di internet telah banyak tersedia CMS gratis yang semakin hari semakin bertambah jumlahnya. Bahkan sekarang telah banyak pula CMS gratis buatan anak bangsa. Namun, kebanyakan CMS yang ada belum tentu sesuai dengan yang kita harapkan. Kendala yang sering kita hadapi yaitu susahnya pengembangan website ketika kita membuat website yang sangat komplek. Jika Anda seorang programmer, akan lebih baik jika Anda membuat CMS sendiri. Karena, Anda akan lebih bebas dalam menentukan kemampuan CMS sesuai yang diinginkan. 1.2 Keuntungan Membuat CMS Sendiri Dibanding menggunakan CMS yang sudah banyak beredar di internet, membuat CMS sendiri memiliki banyak keuntungan, diantaranya: Fitur CMS dapat disesuaikan dengan keinginan atau kebutuhan. Kita dapat menambah fitur CMS dengan mudah pula, karena kita mengetahui seluruh struktur pemrograman CMS. Tampilan dan struktur website berbeda dengan CMS lain, sehingga website kita memiliki ciri khas tersendiri. Membuat website dengan CMS yang dikembangkan sendiri membuat kita terkesan lebih profesional. Dapat dijadikan sarana untuk meningkatkan kemampuan pemrograman website. Dapat dijadikan portofolio untuk mencari pekerjaan sebagai programmer. Selain yang telah disebutkan di atas, tentu masih banyak lagi keuntungan membuat CMS sendiri dibanding menggunakan CMS gratis yang sudah ada. 1.3 Bahasa Pemrograman untuk Membuat CMS Anda tidak harus mahir dalam pemrograman untuk dapat membuat website. Namun, paling tidak Anda telah memahami dasar-dasar dari 2

bahasa pemrograman website. Adapun skrip dan bahasa pemrograman yang digunakan dalam pembuatan CMS yaitu sebagai berikut: 1.3.1 HTML HTML singkatan dari Hyper Text Markup Language berperan dalam membuat struktur website. Layout website ditentukan bagaimana struktur skrip HTML ditulis. Contoh skrip HTML <!DOCTYPE HTML> <html> <head> <title>judul Website</title> </head> <body> Website pertamaku </body> </html> Skrip di atas merupakan struktur dasar HTML, dimana dokumen HTML terdiri dari head dan body. Semua konten website yang ditampilkan pada browser harus diletakkan di dalam tag <body> </body>. 1.3.2 CSS CSS singkatan dari Cascading Style Sheets yaitu skrip yang digunakan untuk mengatur desain website. Walaupun HTML mempunyai kemampuan untuk mengatur tampilan website namun kemampuannya sangat terbatas. Fungsi CSS adalah memberikan pengaturan yang lebih lengkap agar struktur website yang dibuat dengan HTML terlihat lebih rapi dan indah. Contoh skrip CSS p{ color: red; font-weight: bold; text-transform: uppercase; } 3

Skrip di atas digunakan untuk mengatur tampilan tag <p> (tag untuk membuat paragraf) agar teks memiliki warna merah, tebal dan menggunakan huruf kapital. 1.3.3 PHP PHP singkatan dari Hypertext Preprocessor yang merupakan server-side programing yaitu bahasa pemrograman yang diproses di sisi server. Fungsi utama PHP dalam membangun website adalah untuk melakukan pengolahan data pada database. Data website akan dimasukkan ke database, diedit, dihapus dan ditampilkan pada website yang diatur oleh PHP. Contoh skrip PHP <?php $nilai = 80; if($nilai >= 80) echo "lulus";?> $nilai = 70; if($nilai < 80) { echo "<br> tidak lulus"; } Skrip di atas digunakan untuk menampilkan tulisan "lulus" atau "tidak lulus" sesuai nilai variabel $nilai. 1.3.4 Javascript Berbeda dengan php yang diproses di sisi server, javascript diproses pada komputer client. Karena pemrosesannya dilakukan di komputer client, membuat javascript lebih interaktif dibanding php. Peran javascript dalam membuat website adalah memberikan efek animasi yang menarik dan interaktifitas dalam penanganan event yang dilakukan oleh pengguna website. Contoh skrip javascript window.onload = function(){ function loadpage(){ window.location.reload(); } 4

} setinterval(loadpage, 60000); Skrip di atas merupakan skrip untuk me-refresh browser setiap 6 menit. Skrip di atas akan dijalankan oleh komputer client, berbeda dengan PHP yang diproses di sisi server. 1.3.5 SQL Skrip SQL merupakan skrip yang digunakan untuk memodifikasi database, pada berbagai jenis database. Adapun dalam buku ini, kita akan menggunakan database MySQLi sebagai teknologi terbaru yang menggantikan MySQL. Dalam prakteknya skrip SQL akan dikendalikan oleh PHP. PHP akan mengatur kapan skrip SQL akan dijalankan. Contoh skrip SQL SELECT * FROM artikel ORDER BY id_artikel DESC LIMIT 5 Maksud dari skrip di atas adalah mengambil data dari tabel artikel yang diurutkan berdasarkan kolom id_artikel secara descending sebanyak 5 data. Dalam pemrograman website, perintah di atas biasanya ditulis di dalam fungsi mysqli_query(). 1.4 Aplikasi yang Dibutuhkan Dalam proses pembuatan CMS yang dibahas dalam buku ini, dibutuhkan aplikasi-aplikasi yang harus diinstal terlebih dahulu. Aplikasiaplikasi yang digunakan yaitu sebagai berikut: 1.4.1 Text Editor Text editor digunakan untuk menuliskan skrip HTML, CSS, PHP dan Javascript. Ada banyak text editor yang dapat digunakan di antaranya Notepad, Notepad++, Adobe Dreamweaver, dan sebagainya. Dalam pembahasan buku ini kita akan menggunakan Notepad++. 5

TENTANG PENULIS Rohi Abdulloh bekerja sebagai seorang pengajar pada sebuah Sekolah Menengah Kejuruan dan juga seorang freelance web programmer. Memiliki kompetensi di bidang desain grafis, pemrograman web, multimedia, dan animasi. Senang mengutakatik komputer, terutama yang berhubungan dengan pemrograman web dan multimedia. Penulis sudah aktif menulis sejak 2013 dan beberapa buku yang telah diterbitkan di antaranya mengenai CSS3, HTML5 Canvas, jquery, PHP, Foundation, dan Wordpress Developer. Untuk konsultasi mengenai isi buku dapat melalui email: rohi.abdulloh@gmail.com. Link download final project: https://drive.google.com/open?id=0b7qntayckdfbb2wynvhxmuzvz3c Link download ebook: https://drive.google.com/open?id=0b7qntayckdfbdxmzmghkbtrlnfe 236