Anda di halaman 1dari 13

Membuat Content Management System

(CMS) Sederhana1
Slamet Budi Santoso, S.Kom.

Sistem manajemen konten (Inggris: content management system, disingkat CMS), adalah
perangkat lunak yang digunakan untuk menambahkan atau memanipulasi (mengubah) isi dari
suatu situs web2.

Pada umumnya sebuah CMS terbagi menjadi dua bagian. Bagian pertama adalah front-end, yang
bisa dibilang merupakan halaman web itu sendiri. Dimana pengunjung dapat melihat dan
menelusur isi web itu.

Bagian kedua adalah back-end atau bagian administrasi yang fungsinya untuk memberikan
kemudahan dalam pengelolaan website, sehingga pengelola web tidak perlu memiliki keterampilan
dalam hal pemrograman web.

Disclaimer: dalam modul ini, kita akan membuat sebuah CMS Sederhana sebagai gambaran umum
proses pembuatan aplikasi berbasis web. Modul ini dibuat sangat sederhana namun dapat
dikembangkan sesuai kebutuhan. Tahapan pembuatan aplikasi berbasis web (dalam hal ini CMS)
disusun berdasarkan pengalaman dan kebiasaan penulis dan setiap orang berhak memiliki caranya
sendiri.

1
Disampaikan dalam kuliah Pemrograman Web 1, Semester 2, TA. 2017/2018 Akademi Komunitas Nganjuk
2
https://id.wikipedia.org/wiki/Sistem_manajemen_konten
Bagian 1: First thing first

Sebelum mulai membangun aplikasi berbasis web, ada beberapa hal yang harus kita siapkan dulu
sebagai lingkungan kerja. Beberapa hal tersebut diantaranya aplikasi server, editor kode, dan
browser untuk melakukan uji coba.

Kebutuhan Sistem
Sistem minimal yang diperlukan untuk membangun aplikasi berbasis web adalah sebagai berikut:

 Web server, digunakan untuk mensimulasikan request halaman web layaknya di internet.
 PHP Interpreter, fungsinya untuk menerjemahkan skrip-skrip PHP dan menghasilkan halaman
web standar (HTML).
 Database server, digunakan untuk menampung data-data yang akan ditampilkan pada
halaman web.

Untuk memenuhi kebutuhan sistem minimal tersebut, kita akan menggunakan XAMPP3 yang
terdiri dari: Apache Web Server, PHP, MySQL/MariaDB, dan phpMyAdmin. Versi minimal PHP
yang disarankan adalah PHP 5.6.

Anda juga dapat menggunakan paket aplikasi lain seperti:


a. WAMP Server4
b. MAMP5

Atau, jika Anda pengguna Linux, silahkan baca petunjuk resmi dari distro yang digunakan untuk
menginstal aplikasi-aplikasi yang diperlukan.

Instalasi aplikasi yang dibutuhkan tersebut tidak akan dibahas pada modul ini. Petunjuk instalasi
dapat dibaca pada masing-masing situs resmi penyedia aplikasi.

Editor Kode
Aplikasi ini digunakan untuk membantu kita dalam menuliskan kode-kode program baik HTML,
CSS, Javascript, PHP, maupun query MySQL/MariaDB. Umumnya editor kode yang baik memiliki
fasilitas berupa syntax highlighting yang memberikan informasi bahwa kode yang kita tuliskan
sudah benar atau belum. Beberapa editor kode menawarkan fasilitas auto-completion yang
membantu kita melengkapi kode secara otomatis.

Editor kode yang disarankan antara lain:

3
https://www.apachefriends.org/download.html
4
http://www.wampserver.com/en/
5
https://www.mamp.info/en/
 Notepad++ 7.x, https://notepad-plus-plus.org/
 Sublime Text 3, https://www.sublimetext.com/3
 Brackets.io, http://brackets.io/
 VS Code, https://code.visualstudio.com/
 Adobe Dreamweaver, https://www.adobe.com/sea/products/dreamweaver.html
 atau editor lain yang bisa Anda lihat di: https://en.wikipedia.org/wiki/List_of_PHP_editors

Bahan Baku
Fokus modul ini pada tahapan pembuatan aplikasi web (CMS) dengan menggunakan PHP dan
MySQL/MariaDB. Namun demikian, fungsionalitas halaman web tidak dapat lepas dari tampilan
yang meliputi tata-letak (layout) dan antarmuka pengguna (User Interface, UI). Sebuah aplikasi web
yang baik, selain berfungsi seperti yang direncanakan, juga harus baik tampilannya karena
pengguna aplikasi tersebut bisa jadi merupakan orang yang awam dengan skrip atau kode-kode
program web.

Untuk membantu kita dalam membuat tampilan yang baik, beberapa hal ini harus Anda persiapkan
terlebih dahulu:

 Bootstrap 4 (wajib) yang merupakan front-end library yang sangat lengkap untuk membangun
tampilan halaman web. Silahkan unduh di: https://getbootstrap.com/.
 jQuery 3.3.1 (wajib) adalah pustaka Javascript cepat, kecil dalam ukuran file, dan kaya fitur.
Silahkan unduh di: https://jquery.com/download/.
 Font Awesome (opsional), yang berisi kumpulan ikon dalam format font sehingga sangat
ringan dibandingkan menggunakan file image. Silahkan unduh di:
https://fontawesome.com/get-started.
 SweetAlert (opsional), untuk melengkapi tampilan yang baik dan menarik menggantikan
fungsi alert() dari Javascript. Situs resminya ada di: https://sweetalert.js.org/.

Browser
Untuk dapat melihat hasil dari aplikasi web yang kita bangun, tentu saja diperlukan sebuah browser
(penelusur web).

Browser yang tepat digunakan pada jaman "Now" ini adalah yang memiliki dukungan terhadap
teknologi terkini, yaitu:

 HTML5 sebagai struktur utama halaman web;


 CSS3 yang mengendalikan style atau gaya tampilan halaman web;
 dan Javascript yang memberikan fungsi interaktif.
Modul ini akan menggunakan Google Chrome yang memiliki dukungan paling baik pada
teknologi tersebut plus juga tersedia sebagai bawaan pada perangkat Android. Selain itu, Anda
juga bisa menggunakan Firefox atau Microsoft Edge; atau browser apa saja yang nyaman Anda
pakai.

Catatan: beda browser, beda pula hasil yang ditampilkan. Gunakan versi browser ter-"now" untuk
memperoleh hasil yang terbaik. Tetap disarankan menggunakan Google Chrome dalam mengikuti
materi modul ini.

Tugas
1. Unduhlah Bahan Baku (wajib) diantaranya: Bootstrap 4 dan jQuery 3.3.1.
2. Pada folder htdocs, buatlah sebuah folder baru dengan nama cmsq beserta folder lain seperti
berikut.

3. Masukkan file-file berikut ke dalam folder yang sesuai. Ekstrak dulu hasil unduh bila perlu.
a. css/bootstrap.min.css
b. js/bootstrap.bundle.min.js
c. js/jquery-3.3.1.min.js
Bagian 2: Membuat Halaman Web

Homepage atau halaman pertama sebuah website merupakan halaman yang paling penting untuk
di-rancang dan di-desain. Karena pengunjung pertama kali mendarat pada halaman ini. Pada
modul ini hanya akan dicontohkan bagaimana merancang dan membuat tata-letak halaman secara
umum. Untuk desain, Anda dapat mempelajari dari berbagai sumber yang ada di internet, Google
it!

Layout
Dalam bahasa Indonesia disebut "tata-letak", yang kurang lebih tentang "dimana meletakkan
sesuatu". Tampilan homepage CMS yang akan kita buat kurang lebih seperti berikut.
Bagian Header
Bagian ini terdiri dari Navigation Bar dan sebuah area header. Navigation Bar sendiri terdiri dari
identitas website dan menu navigasi untuk menuju ke halaman-halaman lainnya. Area Header
berfungsi sebagai tempat menyambut pengunjung. Nantinya dapat digantikan dengan gambar
atau slide-show agar lebih atraktif.

Bagian Konten
Bagian ini juga terdiri
dari dua bagian.

Pada bagian kiri adalah


Blog Entries yang
menampilkan postingan-
postingan yang telah
dibuat dengan urutan:
terbaru di atas.

Bagian disebelah kanan,


umumnya disebut
sidebar, biasanya di-isi
dengan menampilkan
daftar kategori, form
pencarian, kalender,
daftar posting populer,
daftar posting terbaru,
atau mungkin juga visitor
counter.
Footer
Bagian ini biasanya berisi informasi hak-cipta (copyright) atau kepemilikan website.

Membuat Layout dengan Bootstrap


Ketikkan skrip berikut pada editor kode yang Anda gunakan. Simpan skrip tersebut dalam folder
cmsq dengan nama index.php.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<title>cms aknganjuk</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
body {
padding-top: 3.2rem;
}
header {
padding: 154px 0 100px;
}
@media (min-width: 992px) {
header {
padding: 156px 0 100px;
}
}
section {
padding: 150px 0;
}
footer {
padding-top: 3rem;
padding-bottom: 3rem;
}
footer p {
margin-bottom: .25rem;
}
</style>
</head>

<body id="page-top">

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">


<div class="container">
<a class="navbar-brand" href="#page-top">AK Nganjuk</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#page-top">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">Profil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Berita</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Galeri</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Hubungi Kami</a>
</li>
</ul>
</div>
</div>
</nav>

<header class="bg-secondary text-white">


<div class="container text-center">
<h1>Welcome to AK Nganjuk</h1>
<p class="lead">A landing page template freshly redesigned for Bootstrap 4</p>
</div>
</header>

<!-- Page Content -->


<div class="container">

<div class="row">

<!-- Blog Entries Column -->


<div class="col-md-8 py-4">

<!-- Blog Post -->


<div class="card mb-4">
<img class="card-img-top" src="http://placehold.it/750x300" alt="alt text">
<div class="card-body">
<h2 class="card-title">Post Title</h2>
<p class="card-text">Teks bebas untuk menunjukkan bahwa di sini letak paragraf
postingan.</p>
<a href="#" class="btn btn-primary">Read More &rarr;</a>
</div>
<div class="card-footer text-muted">
Diposting: 27 April 2018 oleh
<a href="#">Administrator</a>
</div>
</div>

<!-- Pagination -->


<ul class="pagination justify-content-center mb-4">
<li class="page-item">
<a class="page-link" href="#">&larr; Lebih lama</a>
</li>
<li class="page-item">
<a class="page-link" href="#">Lebih baru &rarr;</a>
</li>
</ul>
</div>

<!-- Sidebar Widgets Column -->


<div class="col-md-4">

<!-- Categories Widget -->


<div class="card my-4">
<h5 class="card-header">Kategori</h5>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>

<!-- Search Widget -->


<div class="card my-4">
<h5 class="card-header">Search</h5>
<div class="card-body">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
</div>

<!-- Side Widget -->


<div class="card my-4">
<h5 class="card-header">Side Widget</h5>
<div class="card-body">
You can put anything you want inside of these side widgets
</div>
</div>

</div>

</div><!-- /.row -->

</div><!-- /.container -->

<!-- Footer -->


<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">
Copyright &copy; Akademi Komunitas Nganjuk 2018
</p>
</div>
<!-- /.container -->
</footer>

<!-- Bootstrap core JavaScript Placed at the end of the document so the pages load faster -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>

Tugas
Dengan pengetahuan Anda tentang "Desain Web", perbaiki skrip jika terjadi kesalahan atau
tampilan tidak sesuai.
Bagian 3: Database

Database dibuat untuk menampung data-data yang akan digunakan pada aplikasi. Data
ditampung dalam tabel-tabel sesuai datanya. Tabel-tabel dalam database tersebut juga saling
terkait satu dengan yang lain, atau dalam bahasa kerennya disebut relational database.

Untuk keperluan membangun CMS Sederhana ini, kita akan menggunakan sedikit tabel terlebih
dahulu. Tabel lain dapat ditambahkan di masa datang jika diperlukan untuk pengembangan CMS
ini.

Berikut ini struktur tabel yang harus dibuat beserta relasinya6.

Membuat Database dengan phpMyAdmin


Setelah memiliki rancangan tabel-tabel yang akan dibuat, langkah selanjutnya adalah membuat
database dan tabel-tabel tersebut. Untuk memudahkan dalam pembuatan database dan tabel-
tabelnya, pada modul ini diberikan contoh menggunakan phpMyAdmin.

Cara menjalankannya, buka browser dan ketikkan: http://localhost/phpmyadmin/ pada bilah


alamatnya.

Ingat! Server lokal harus diaktifkan/dijalankan terlebih dahulu.

6
Digambar dengan bantuan MySQL Workbench, https://www.mysql.com/products/workbench/
Setelah halaman phpMyAdmin ditampilkan, klik pada tab "Database" seperti ditunjukkan pada
gambar berikut.

Ketikkan cmsq pada kolom "Database name", kemudian klik tombol .

Membuat Tabel
Database yang baru saja dibuat tentu saja masih kosong, belum ada tabel di dalamnya. Berikutnya
kita akan membuat tabel-tabel yang dibutuhkan. Caranya, isikan nama tabel dan jumlah kolom
yang diperlukan. Perhatikan gambar berikut.

Ketikkan nama tabel artikel, isikan jumlah kolom yang diperlukan, dan klik tombol [Go].

Pada modul ini, nama database, tabel, dan field/kolom ditulis dengan menggunakan huruf-kecil.
Pada dasarnya tidak ada aturan resmi tentang cara penulisannya. Hal ini dilakukan untuk
keseragaman dan mempermudah ketika mengetikkannya dalam baris-baris kode.

Akan jadi menyulitkan dalam menjaga konsistensi penulisan dan berpotensi menimbulkan masalah
jika nama database, tabel, dan field ditulis dengan format campuran (besar-kecil). Terlebih PHP
yang bersifat case sensitive.

Well, bagaimanapun juga, cara menulis nama identifier merupakan kebiasaan masing-masing
programmer dan perlu memperhatikan pedoman yang berlaku (baik yang bersifat teknis maupun
yang disepakati bersama), terutama ketika mengerjakan proyek bersama.
Nama kolom, tipe data
Lanjutkan dengan mengisikan nama kolom, tipe data, dan lebar data (jika perlu). Isi sesuai dengan
rancangan yang dibuat. Setelah semuanya terisi dengan benar, Anda bisa scroll ke bawah dan klik

tombol untuk menyelesaikan proses pembuatan tabel.

Selamat, Anda sudah berhasil membuat satu tabel untuk aplikasi CMS Sederhana ini.

Klik pada database cmsq pada bilah sisi kiri untuk menampilkan seluruh
isi database dan menggunakan form Create table untuk membuat dua
tabel lainnya.

Atau, Anda dapat klik New untuk membuat dua tabel lainnya.

Tugas
Buatlah dua tabel selanjutnya, tabel user dan kategori !
Bagian 4: Login Form