Modul 9

WEB PROGRAMMING

Content Management
System (CMS)
 Content Management System (CMS)

Di awal tahun 2000-an saat internet mulai masuk di Indonesia, perusahaan-

perusahaan mulai booming dan berlomba untuk membuat website company profile.
Kemudian para blogger juga mulai marak memanfaatkan layanan blog gratis seperti
dari blogger.com, multiplicity dan lain-lain. Namun pada saat itu untuk membuat
website masih membutuhkan jasa programmer dengan biaya yang tidak murah.

Seiring dengan perkembangan teknologi mulai bermunculan berbagai platform

yang memudahkan kita untuk membuat website, salah satunya adalah teknologi
CMS. Dengan CMS ini kita dapat membuat website dan blog sendiri bahkan untuk
pemula sekalipun, sebagian besar platform ini tidak menuntut kita untuk mengerti
bahasa pemrograman dan tidak semua orang mengetahui dan memahami apa itu
CMS. Pada bab ini kita akan mempelajari apa itu CMS, bagaimana memilih CMS
yang tepat, fitur-fitur apa yang disediakannya dan cara-cara pengelolaannya.

A. Pengertian CMS
CMS adalah singkatan dari Content Management System, yakni aplikasi
pembuatan website yang dirancang dengan sistem manajemen untuk isi konten.

Gambar 1
Dashboard CMS Wordpress
2
 Aplikasi dibuat dengan interface yang memudahkan penggunanya sebagai
administrator untuk mengelola konten, baik untuk tugas “membuat”, “modifikasi”
maupun “menghapus” konten yang akan ditampilkan di website. Selain isi konten,
CMS juga dilengkapi dengan fitur-fitur yang dapat digunakan untuk mengelola setiap
aspek dalam website.

Beberapa platform CMS yang populer digunakan seperti WordPress, Magento

dan Drupal.

Bila tidak menggunakan CMS, kita harus menguasai bahasa pemrograman,

koneksi database, cara hosting dan cara meng-upload file-file script yang kita buat ke
layanan hosting tersebut secara manual. Sedangkan, kita tahu bahkan terkadang isi
konten website yang dibuat belum tentu kita yang mengisi, bisa jadi admin sebagai
pengisi konten tidak memahami bahasa pemrograman.

Dengan menggunakan CMS, maka kita tidak perlu lagi menuliskan script untuk
front-end dan back-end. Kita cukup mengelola manajemen website dari satu akses
dashboard administrator, memilih template, membuat tiap halaman, mengatur tata
letak dan fungsi-fungsi tambahan dengan widget serta plugin yang disediakan oleh
aplikasi CMS. Di sisi lain, CMS juga mempunyai kelemahan. Kelebihan dan
kelemahan yang ada pada CMS dapat dirangkum sebagai berikut:

3
 Kelebihan CMS:

1. Tidak perlu menguasai bahasa pemrograman untuk membuat website

2. Kemudahan instalasi dan update tema, plugin dan ekstensi
3. Banyak tema desain web yang dapat di-import.
4. Tersedia plugin dan ekstensi untuk fitur tambahan seperti SEO, newsletter,
social media, security dan e-commerce.
5. Dapat mengatur role setiap pengguna melalui fitur manajemen user.
6. Banyaknya komunitas online yang menyediakan forum bantuan, channel
dan lain sebagainya.
7. Dokumentasi dan tutorial yang lengkap mulai dari panduan instalasi, FAQ,
pilihan plugin dan video step-by-step.
8. Sebagian besar CMS adalah open-source dan tidak berbayar untuk modul
default-nya. Jadi cukup membeli domain dan paket hosting untuk upload
CMS.

Kekurangan CMS:
1. Tema desain web terutama yang populer banyak dipakai oleh penggunanya
sehingga tampilan website satu dengan lainnya terkadang mirip atau sama.
2. Fleksibilitas CMS masih kurang dibandingkan dengan website yang
dibangun dengan secara manual. Apabila membutuhkan fitur yang unik
maka kita harus memodifikasi sendiri program CMS atau harus menyewa
jasa programmer lain.
4
 3. Platform CMS yang open-source dan populer riskan terhadap serangan

hacker, sehingga celah keamanan tersebut harus kita antisipasi dengan

pintar-pintar memilih plugin yang “aman” dan ter-update secara berkala.
4. Umumnya sistem CMS memiliki kecepatan loading website yang lebih lama
dibanding website yang dibuat secara manual. Untuk mempercepatnya, kita
perlu mengunduh plugin dan ekstensi yang khusus menangani ini.

B. Memilih CMS
CMS tidak hanya digunakan untuk membuat blog, namun juga dapat
digunakan untuk membuat website profesional seperti company profile, e-
catalogue, toko online dan forum. Sedangkan, aplikasi CMS yang beredar di pasar
sangat bervariasi dan menawarkan masing-masing keunggulannya sendiri. Untuk
memilih CMS yang tepat maka kita harus mempertimbangkan beberapa hal sebagai
berikut:

1. Tujuan pembuatan website

Ini adalah bagian utama yang akan menentukan pilihan CMS kita. Jika kita
hendak membuat toko online maka CMS e-commerce menjadi pertimbangan kita,
diantaranya seperti WooCommerce, Magento dan PrestaShop. Sedangkan
WordPress dan Joomla dapat digunakan jika kita hendak membuat blog atau
website bisnis berskala kecil. Apabila kita hendak membuat website bisnis berskala
besar maka Drupal menjadi pilihan yang lebih tepat.

2. Desain website

Cari tahu terlebih dahulu tema tampilan website yang kita inginkan apakah
tersedia di CMS yang dipilih dan dapat di-install.

5
3. Fitur yang akan digunakan

Pelajari plugin dan ekstensi yang disediakan di CMS tersebut. Apakah fitur yang
hendak kita butuhkan dan digunakan dapat diimplementasikan dengan plugin
tersebut.

4. Biaya agar website dapat online

Selain biaya domain dan hosting, terkadang plugin yang kita butuhkan tidak
gratisan. Kita harus mengeluarkan dana untuk dapat menggunakan plugin premium
tersebut. Hitung biaya keseluruhannya sebelum mengeksekusinya.

5. Rencana pengembangan

Bagaimana website yang kita buat ini akan dikembangkan? Apakah CMS yang
kita gunakan nantinya mendukung rencana pengembangan tersebut, baik dari segi
dukungan fitur, plugin maupun ekstensinya.

Berdasarkan tracking website yang dilakukan di wappalyzer.com [

www.wappalyzer.com/technologies/cms], penggunaan teknologi CMS untuk website
di tahun 2022 di dominasi oleh Wordpress. Pada gambar 1 ditunjukkan penggunaan
CMS Wordpresssebanyak 67.3% diikuti Wix, Squarespace, Drupal dan Joomla.

Gambar 2
Diagram Chart CMS Market Share
6
 Tidak hanya WordPress saja, sebenarnya masih banyak CMS yang ada di
pasaran. Apabila kita menggunakan Softaculous yang biasanya disediakan di cpanel
layanan hosting yakni aplikasi installer yang digunakan untuk membuat portal web,
maka dapat kita cek jika jumlah CMS ada 318 seperti yang ditunjukkan pada gambar 2
berikut.

Gambar 3
Screenshot Softaculous

Namun pada modul ini kita akan memilih 5 CMS terbaik yang populer, banyak
digunakan di Indonesia. Berikut beberapa CMS tersebut:

1. WordPress
WordPress merupakan CMS nomor satu yang saat ini digunakan di pasaran.
Sistem manajemen konten yang open-source ini menjadi platform lebih dari 30%
website yang ada di dunia.

Gambar 4
WordPress
Pada awalnya CMS ini ditujukan untuk blogging, namun WordPress kini telah
berkembang dan menawarkan banyak keunggulan. CMS ini mudah digunakan, dapat
dimodifikasi sesuai keinginan dengan banyaknya plugin dan ekstensi yang ditawarkan.

7
 Keunggulan:

1. Opsi publishing dan manajemen konten yang mudah

2. Editor yang powerful untuk membuat konten dengan mudah
3. Mudah konfigurasi disertai dengan ribuan plugin, ekstensi, tema yang tersedia
4. Memiliki komunitas yang solid

Kelemahan:

1. Terkadang harus menyesuaikan beberapa plugin untuk mendapatkan fitur

yang dibutuhkan.

2. Joomla !
Joomla tergolong aplikasi CMS yang banyak digunakan setelah WordPress, lebih
fleksibel untuk fitur-fitur yang kita butuhkan. Selain itu Joomla juga menawarkan
berbagai opsi untuk pengaturan pengguna, sangat cocok untuk website yang
membutuhkan membership.

Gambar 5
Joomla!

Keunggulan:

1. Support yang optimal untuk tipe post konten yang kustom.

2. Sistem manajemen pengguna di tingkat advance.
3. Mendukung multibahasa.
4. Template unik dapat diimplementasikan di setiap tipe halaman yang berbeda.

Kelemahan:

1. Membutuhkan pengetahuan teknis terlebih dahulu untuk membuat website.

2. Template dan ekstensi yang tidak terlalu banyak.
3. Keterbatasan opsi fitur, harus di-setting secara manual.
4. Lebih cocok untuk developer atau user yang lebih berpengalaman.

8
 3. Drupal
Salah satu CMS open-source terbaik meskipun di bawah WordPress dan Joomla,
memiliki fitur yang mirip dengan Joomla. Selain itu Drupal juga memiliki sistem kontrol
dan permission untuk tiap penggunanya serta dukungan multibahasa. Drupal terkenal
dengan sistem keamanannya lebih baik sehingga cocok jika ingin membuat website
untuk level bisnis atau enterprise.

Gambar 6
Drupal
Keunggulan:
1. Mendukung kustom post konten dan manajemen yang lebih fleksibel.
2. Sistem manajemen pengguna di tingkat lebih lanjut.
3. Mendukung manajemen multibahasa.
4. Memiliki sistem taksonomi yang lebih detil.
5. Sistem keamanan yang terbaik.

Kelemahan:

1. Tidak cocok untuk pemula.

2. Membutuhkan pengetahuan tentang pembuatan web lebih jauh.

4. PrestaShop
CMS yang dikhususkan untuk pembuatan website toko online, banyak fitur yang
dibutuhkan untuk sebuah toko online dan plugin yang menghubungkan ke layanan
API pihak ke-3, seperti payment gateway dan tracking kurir.

Keunggulan:
1. Sudah mendukung Bahasa Indonesia, jadi pelaku usaha lokal bisa lebih
mudah mengelola tokonya.
2. Kaya akan fitur untuk layanan toko online.
3. Tampilan desain toko online yang responsif.

9
 Kelemahan:

1. Loading website terasa berat dan lambat karena fitur plugin yang kompleks.
2. Membutuhkan resource memory yang cukup besar di server.

5. Magento
Platform toko online yang termasuk populer di kalangan penggunanya, banyak
digunakan berbagai perusahaan besar, seperti Samsung, Nike dan Ford. Magento
kini telah diakuisisi oleh Adobe sehingga beberapa fitur layanan dari Adobe juga telah
terintegrasi.

Gambar 7
Drupal
Keunggulan:
1. Terintegrasi dengan Adobe Experience Cloud.
2. Dilengkapi dengan Page Builder yang simple.
3. Ada fitur segmentasi pelanggan.
4. Tema desain yang responsif.
5. Optimasi image.
Kelemahan:
1. Membutuhkan resource server yang tinggi. Jika terjadi masalah pada
resource maka website akan error.
2. Tidak semua fitur yang disediakan gratis, untuk menikmatinya maka kita
harus menjadi anggota premium.

C. Sistem Kerja WordPress

Pada modul ini kita akan mempelajari lebih jauh tentang CMS dengan
menggunakan WordPress. WordPress sendiri bekerja dengan menggabungkan
beberapa komponen dan dashboard yang memungkinkan kita untuk
mengelolanya. Komponen WordPress tersebut terdiri dari:

10
1. WordPress Core

File utama (core) yang membentuk instalasi WordPress. Kita perlu menginstall
ini terlebih dahulu sebelum dapat melakukan hal lain, karena core inilah yang
membuat WordPress berfungsi.

2. Database

Semua konten dan konfigurasi disimpan dalam database. Apabila kita unduh
WordPress secara manual maka database juga harus diunduh secara manual.

3. File Ekstra

Yakni file tambahan untuk tema, plugin dan data upload.

4. Admin Screen

Disebut juga sebagai dashboard, tempat kita berinteraksi dengan instalasi

WordPress, mengelola setiap aspek pada website supaya tampilan menarik dan
kaya akan fitur dan tanpa menuliskan script coding.

1. WordPress Core
Pondasi dimana website dengan WordPress dibangun adalah sekumpulan
file yang membentuk inti WordPress. Saat kita mengunduh WordPress sebenarnya
adalah menambahkan file-file ini ke website kita. File-file ini berisi script seperti PHP,
HTML dan Javascript yang akan menjalankan WordPress itu sendiri.

Gambar 8
Screenshot File Core WordPress

11
 Ada dua cara untuk mengunduh WordPress:

1. Menggunakan auto-installer yang disediakan layanan hosting yang kita gunakan.

2. Download dari WordPress.org kemudian upload ke hosting website kita.

Gambar 9
Situs WordPress.org

2. Data base
Seperti halnya WordPress Core, website kita membutuhkan database untuk
dapat bekerja dengan baik. Semua konten dan konfigurasi tersebut disimpan dalam
database. Pada gambar 5 ditunjukkan beberapa tabel database seperti post,
taxonomy, metadata dan option untuk setting konfigurasi.

Gambar 10
Tabel pada Database WordPress

12
 WordPress secara otomatis akan menyimpan dan update data setiap kita
melakukan perubahan melalui dashboard WordPress. Kita tidak perlu mengedit
secara manual pada database tersebut. Mungkin sebaiknya jangan kita lakukan
kecuali kita memahami alur script coding yang ada di file core. Ini akan beresiko
pada website menjadi bermasalah, bahkan tidak dapat diakses.

3. File Ekstra : Theme, Plugin, Upload

Untuk memodifikasi website dapat kita lakukan dengan mengunduh file
ekstra melalui dashboard WordPress. File ekstra ini meliputi:

a. File Theme

File ini berfungsi untuk membentuk tema website kita, bagaimana tampilan,
warna, tata letak setiap elemennya. Setiap website dengan WordPress hanya dapat
menjalankan 1 tema saja. Kita perlu meluangkan waktu untuk memilih tema yang
tepat dan sesuai dengan website yang kita inginkan, ini akan menentukan
bagaimana website akan terlihat oleh pengunjung. Beberapa layanan penyedia
template WordPress juga menyediakan versi premium seperti ThemeForest. Desain
template yang mereka tawarkan cukup menarik dan tentu saja akan membantu
meningkatkan pengalaman buat pengunjung website kita.

Gambar 11
Premium Template - Themeforest

13
b. File Plugin

Jika kita hendak memodifikasi atau menambahkan fungsionalitas website

(bukan tampilan), kita cukup mengunduh plugin. Ada berbagai macam pluginyang
tersedia, mulai dari yang gratis hingga yang premium. Sedangkan fungsionalitas juga
berbagai jenis seperti short message di footer, plugin, SEO, security, backup, hingga
plugin untuk meningkatkan performa website. Semua fungsi ini akan membantu
website kita menjadi lebih efektif dan berjalan lebih lancar.

Gambar 12
Plugin dari Wordpress.org

c. File Upload

Komponen ini digunakan untuk mengunggah media apapun dari komputer kita ke
website, seperti gambar, video dan file dokumen lain. Beberapa plugin juga
menyediakan fitur khusus tugas ini semisal plugin backup atau plugin manajemen
file.

4. WordPress Admin Screen

Pada bagian WordPress Admin ini atau Dashboard yang merupakan
tampilan keseluruhan tempat kita bekerja. Mulai dari pengaturan tampilan website,
setting, mengatur hak akses pengguna hingga membuat, mengedit dan menghapus
konten pada tiap halaman website. Dashboard admin WordPress meliputi 10 bagian
berikut:

14
a. Dashboard

Pada halaman dashboard ini kita dapat melihat informasi pembaruan,

notifikasi update, statistik jumlah artikel, komen dan halaman serta lintas widget
untuk membuat draft konten. Sedangkan, di sebelah kiri ada menu navigasi yang
digunakan untuk pengelolaan keseluruhan website.

Gambar 14
Dashboard dari Wordpress.org

b. Posts

Menu ini berfungsi untuk membuat posting konten pada website kita. Berbagai
jenis posts yang dapat dibuat diantaranya posting artikel, video dan galeri.

Gambar 15
Posts dari Wordpress.org

15
 Ada beberapa sub menu yang ditampilkan saat kita klik fitur posts yaitu:

a) All Posts, untuk melihat semua postingan yang telah diterbitkan

b) Add New, digunakan untuk membuat postingan baru
c) Categories, untuk membuat kategori dari postingan
d) Tags, digunakan untuk membuat sebuah tag.

c. Media

Media berfungsi untuk meng-upload file-file yang akan digunakan pada

website kita seperti gambar, video, audio, dokumen Word, PDF dan lain-lain.

Gambar 16
Media dari Wordpress.org

Ada dua sub menu pada media yakni

a) Library, digunakan untuk menampilkan semua file yang di-upload

b) Add New, untuk meng-upload file baru

d. Pages

Kita mengatur halaman website yang ingin kita buat ada pada menu ini atau
lebih tepatnya untuk manajemen halaman. Setiap halaman dapat kita desain dan
meletakkan widget dari plugin yang disediakan.

Gambar 17
Pages dari Wordpress.org

Ada dua sub menu pada pages yaitu:

a) All Pages, untuk melihat semua halaman yang sudah dibuat
b) Add New, untuk membuat halaman baru

16
e. Comments

Bagian ini digunakan untuk mengatur dan merespon setiap komentar yang
diberikan oleh pengunjung website pada postingan artikel kita. Filter komentar dibagi
menjadi 3 yakni :

a) Pending, komentar yang belum mendapat persetujuan dari kita

b) Approved, komentar yang telah kita setujui dan dapat ditampilkan di
website
c) Spam, komentar yang menurut kita sebagai spam, tidak akan ditampilkan
di web.

Gambar 18
Comments dari Wordpress.org

f. Appearance

Desain template atau tampilan website kita atur pada bagian ini termasuk
theme, widget, background dan lain-lain. Ada beberapa sub menu yang digunakan
pada Appearance ini:

a) Themes, digunakan untuk mencari, install dan hapus tema atau template

b) Customize, editing tampilan website termasuk nama situs, tagline, icon

dan lain sebagainya.

c) Widgets, mengatur widget pada halaman termasuk sidebar, header

ataupun footer.

d) Menu, digunakan untuk mengatur, membuat, edit menu pada website.

17
 Gambar 19
Appearance dari Wordpress.org
g. Plugins

Plugin merupakan software tambahan pada WordPress untuk memunculkan

fitur-fitur yang belum tersedia di WordPress. Sebagai contoh jika kita ingin
menggunakan fitur chat pada website maka kita harus mengunduh plugin live chat.

Gambar 20
Plugins dari Wordpress.org

Ada tiga sub menu pada bagian ini yakni :

a) Installed Plugins, untuk melihat berbagai macam plugin yang sudah

terinstal dan statusnya aktif atau tidak di website.
b) Add New, digunakan untuk mencari plugin dan menambahkannya.
c) Plugin Editor, digunakan untuk edit script file coding plugin. Menu ini
dikhususkan buat kita yang paham bahasa pemrograman dan alur kerja
script pada WordPress. Jika kita tidak menguasainya sebaiknya jangan
lakukan proses ini, plugin tersebut akan error jika kita salah mengeditnya.

18
h. Users

Menu ini digunakan untuk manajemen pengguna. Ada lima jenis

pengguna yakni:

a) Administrator, mempunyai hak akses penuh untuk ke semua fitur yang ada
di dashboard.

b) Author, penulis artikel yang mempunyai hak akses untuk menerbitkan

artikelnya, menghapus dan upload file media.

c) Editor, melakukan aktivitas seperti author namun mempunyai hak akses

yang lebih tinggi. Menerbitkan, menghapus dan mengedit setiap artikel
yang diposting. Selain itu juga dapat melakukan perubahan pada setiap
halaman dan mengelola kategori, link, tags serta merespon komentar.

d) Contributor, dapat membuat artikel beserta kontennya di dalam artikel, dapat

menghapus artikelnya sendiri namun untuk menerbitkan artikelnya tetap
membutuhkan persetujuan dari admin.

e) Subscriber, hanya dapat berlangganan artikel dari postingan kita dan

memberi komentar.

Gambar 21
Users dari Wordpress.org

Ada sub menu pada bagian ini sebagai berikut:

a) All Users, digunakan melihat semua pengguna berdasarkan hak
aksesnya.
b) Add New, digunakan untuk menambahkan user baru.
c) Profile, digunakan untuk melihat dan mengedit profile administrator,
seperti edit nama, e-mail, warna dashboard user, dan lainnya.

19
i. Tools

Menu ini digunakan untuk import data seperti konten, kategori, tags dari
sumber luar dan eksport dari isi konten website kita ke media lain.

Gambar 22
Tools dari Wordpress.org

Kita baru menggunakan tools ini apabila kita hendak migrasi dari 1 blog kita
yang sudah ada ke blog kita yang baru atau sebaliknya.

j. Settings
Menu pengaturan ini untuk mengatur beberapa hal:

Gambar 23
Settings dari Wordpress.org

a) General, merubah judul website, tagline, alamat url, e-mail address,

bahasa, format tanggal dan lainnya.
b) Permalink, digunakan untuk mengatur url postingan atau halaman yang
diterbitkan pada website. Misalkan kita menginginkan pada url terdapat
judul posting dan tanggal terbit maka pengaturannya dilakukan di sini.
20
 D. Tutorial WordPress
Setelah kita mempelajari tentang CMS dan fitur-fitur yang ada pada WordPress,
selanjutnya kita akan mencoba menerapkannya dengan membuat sebuah website
dengan WordPress di komputer local kita. Silahkan ikuti langkah-langkah tutorial
berikut:

1. Mempersiapkan Localhost
Kita akan menggunakan Web Server kita dengan menggunakan aplikasi
XAMPP. Silahkan buka control panel XAMPP dan pastikan servis Apache dan
MySQL telah aktif dahulu. Klik tombol Start pada bagian Action di Apache dan
MySQL jika belum jalan.

Gambar 24
Localhost di XAMPP Control Panel

2. Menyiapkan Installer Wordpress

Kita akan melakukan instalasi WordPress secara manual pada Web Server
XAMPP. Untuk itu kita perlu menyiapkan dahulu installer-nya. File installer dapat kita
download di https://id.wordpress.org/download/. Klik versi terbaru, pada modul ini
WP versi 6.0.2.

Gambar 25
Installer WordPress

21
3. Membuat Folder Proyek pada XAMPP
Buka Windows explorer dan akses folder XAMPP. Pada tutorial ini, XAMPP
berada pada C:\ atau kita bisa ketik alamat C:\xampp\htdocs. Folder htdocs
merupakan root dari XAMPP untuk meletakkan dokumen website. Jika kita
meletakkan dokumen web di luar folder tersebut maka web browser tidak akan
menampilkannya.

Gambar 26
Folder Proyek pada XAMPP

Buat folder dengan nama “WordPress”. Penamaan folder ini bebas dengan catatan
hanya menggunakan huruf kecil dan tanpa penghubung. Selanjutnya copy paste file
zip hasil download WordPress dan ekstrak file zip tersebut. Pastikan isi folder seperti
berikut:

Gambar 27
Folder dengan nama WordPress

22
 4. Membuat Database
Langkah berikutnya adalah pembuatan database. Akses
http://localhost/phpmyadmin dan pilih tab Databases – Create Database:

Gambar 28
Database di Localhost
Buat nama database, dalam tutorial ini menggunakan nama “db_wordpress” dan pilih
utf8_general_ci. Kemudian buat username dan password untuk akses database
tersebut. klik User Accounts dan Add User Account, buat username dan password
yang kuat.

Gambar 29
Nama Database ‘’db_wordpress’’

Beri akses global privileges pada username tersebut sehingga tugas-tugas seperti
membuat tabel, select, delete, update dapat dilakukan.

Gambar 30
Folder Database Username

23
 5. Instalasi WordPress
Setelah database dibuat maka selanjutnya tahap instalasi WordPress akan
dilakukan. Silahkan buka web browser dengan alamat http://localhost/wordpress
maka tampilan yang muncul sebagai berikut:

Gambar 31
Instalasi WordPress

Klik Ayo! dan kita isi form dengan nama database yang telah dibuat sebelumnya
termasuk username dan password untuk koneksi ke database. Untuk host kita
menggunakan localhost dan prefiks tabel pada database secara default
menggunakan “wp_”.

Gambar 32
Form pada database

24
Apabila koneksi ke database berhasil dilakukan maka kita menerima notifikasi untuk
melanjutkannya ke tahap berikutnya.

Gambar 33
Jalankan pemasangan WordPress
Kita akan diinstruksikan untuk melengkapi beberapa hal yang dibutuhkan WordPress
yakni judul website yang dibuat, membuat username admin dan password login serta
e-mail.

Gambar 34
Lengkapilah informasi di Form pada Install WordPress

Klik Install WordPress dan tunggu proses instalasi berlangsung. Jika sudah berhasil
maka notifikasi akan muncul seperti berikut:

Gambar 35
Notifikasi pada Proses Instalasi WordPress

25
 6. Mengelola WordPress
Setelah proses instalasi selesai, kita akan mulai ke tahap mengelola konten dan
melakukan beberapa pengaturan pada website. Untuk itu kita awali dengan akses ke
dashboard WordPress terlebih dahulu. Klik “Log Masuk” atau di web browser kita
ketikan alamat http://localhost/wordpress/wp-admin, masukkan username dan
password yang telah dibuat pada langkah sebelumnya.

Gambar 36
Login ke Dashboard WordPress

Setelah berhasil maka kita akan diarahkan ke halaman dashboard.

Gambar 37
Dashboard WordPress

Jika kita klik link Visit Site di pojok kiri atas, maka tampilan front-end website kita
akan tampak sebagai berikut:

Gambar 38
Tampilan Front-End di WordPress

26
 Pada tutorial ini kita akan melakukan langkah-langkah berikut :

a. Memilih Template
▪ Klik menu Appearance dan pilih sub menu Themes. Jika template themes
bawaan dari WordPress dirasa kurang sesuai dengan pilihan kita, maka kita bisa
mencari theme lain dengan klik “Add New”.

Gambar 39
Pilih Themes

▪ Kita bisa mencari free themes berdasarkan kategori populer, latest atau favourite.
Atau klik Feature Filter untuk mencari kategori themes sesuai keinginan. Arahkan
mouse pada gambar theme dan klik untuk melihat detail serta preview-nya.

Gambar 40
Kategori Themes

▪ Untuk mengunduh theme yang dipilih cukup klik button “Install” di navigasi
sebelah kiri. Kemudian klik untuk mengaktifkannya, untuk melihat hasilnya kita
bisa buka di http://localhost/wordpress. Maka layar yang tampak seperti pada
preview tersebut:

27
 Gambar 41
Hasil Tampilan Themes

▪ Jika hendak mengedit tampilan tema yang dipilih, kita bisa melakukannya
dengan klik menu “Customize”.

Gambar 42
Kustomisasi Themes

▪ Pada navigasi sebelah kiri adalah menu untuk mengelola komponen yang ada
di tema website. Sebagai contoh pada bagian “Site Identity” digunakan untuk
merubah teks logo, upload gambar logo, membuat tagline.

Gambar 43
Tampilan Side Identity

28
▪ Selain dari menu navigasi editor tersebut, kita juga bisa langsung
menggunakan editor display di sebelah kanan dengan klik icon
yang tampak.

Gambar 44
Menu Editor Display
Maka opsi untuk edit komponen ini akan tampil seperti gambar berikut :

Gambar 45
Opsi Edit Komponen
▪ Untuk langkah-langkah editor komponen lain pada layout dan tema website ini
hampir serupa dengan cara-cara tersebut diatas.

b. Merubah Permalink
Permalink dianggap bagus oleh Google harus berisi judul dan keyword. Namun,
permalink default dari WordPress dibuat secara otomatis dan biasanya berisi angka
id artikel atau tahun pembuatan. Untuk merubahnya ini kita perlu men-setting terlebih
dahulu melalui pengaturan di menu “Setting” >> “Permalinks”.

Gambar 46
Menu Permalinks 29
▪ Kemudian kita pilih yang “Post name”, jika kita ingin urutan url link berdasarkan
kategori bulan dan nama, kita pilih “Month and name”. Jika kita tahu ada sistem
indexing Google yang lain, maka kita bisa merubahnya dengan “Custom
Structure”.

Gambar 47
Menu Common Settings

c. Install Plugin yang Dibutuhkan

Selanjutnya adalah men-download berbagai plugin gratis yang tersedia di
WordPress. Beberapa plugin WP yang populer dan banyak digunakan diantaranya
adalah:
▪ Yoast SEO, digunakan untuk menilai konten yang dibuat apakah sudah SEO
friendly atau belum. Mulai dari keyword, struktur, judul dan lainnya yang
mempengaruhi Google untuk mengindeks ke halaman pencariannya.
▪ Elementor, untuk membantu membuat desain website menjadi lebih menarik dan
terstruktur.
▪ Smart Slider, plugin untuk membuat slider atau carousel pada website.
▪ Masih banyak plugin yang disediakan, silahkan akses menu Plugins dan mulai
melakukan pencarian sesuai dengan kebutuhan kita.

Gambar 48
Menu Install Plugin WP

30
 d. Membuat Slider dengan Plugin
▪ Lakukan pencarian plugin dengan memasukan keyword “Smart Slider”
kemudian klik “Install Now”.

Gambar 49
Keyword ‘’Smart Slider’’

▪ Setelah berhasil ter-install maka di menu navigasi sebelah kiri akan muncul menu
baru. Buka menu Smart Slider dan klik Dashboard kemudian klik “Go to
Dashboard”

Gambar 50
Menu Smart Slider

▪ Buat project baru dan pilih Start with a Template

Gambar 51
Menu New Project

31
 Gambar 52
Tampilan Create a New Project atau Start with a Template

▪ Pilih kategori yang Free

Gambar 53
Pilih Kategori Free Price

▪ Kita bisa cek preview tampilan yang dipilih. Misal pada template sebelah
kanan “Full Width Post Slider”

Gambar 54
Hasil Tampilan Template yang dipilih

32
▪ Klik import dan masukkan e-mail untuk subscribe template tersebut

Gambar 49
Menu Subscribe Template

▪ Dan kembali ke halaman dashboard Smart Slider

Gambar 50
Dashboard Smart Slider

▪ Klik template tersebut maka muncul setting-an lebih detail

Gambar 51
Menu Settings Template

▪ Kita bisa edit setiap Slide yang ada dengan gambar yang kita miliki di komputer
serta merubah tulisan pada setiap bagian atau menambahkan slide baru

33
 Gambar 52
Tampilan Edit Template di Smart Slider

▪ Untuk meletakkan Smart Slider ini ada tiga cara sesuai dengan petunjuknya.
Untuk tutorial ini kita akan menggunakan short code yang dengan Copy Paste
[smartslider3 slider="2"] dan akan diletakkan pada salah satu halaman yang
ada.
▪ Misal kita akan memasukkannya pada halaman “Laman Contoh”, akses menu
Pages >> All Pages dan klik judul “Laman Contoh”

Gambar 53
Menu Pages >> All Pages

▪ Masukkan script code [smartslider3 slider="2"] dibawah judul seperti gambar

berikut kemudian klik tombol “Update” di sebelah kanan atas.

Gambar 54
Hasil Tampilan Laman Contoh

34
▪ Notifikasi ter-update akan muncul di bawah dan kita cek hasilnya dengan klik
View Page.

Gambar 55
Menu Subscribe Template

e. Menambahkan Pengguna
Secara umum website kita sudah 70% siap. Yang belum adalah mendaftarkan
tim “content creator” dan mulai membuat isi konten seperti artikel atau video. Kita
bisa mendaftarkan tim tersebut dengan menu Users >> Add New.

Gambar 56
Menu Settings Template

Pastikan bagian “required” terpenuhi dan role sesuai dengan tugas masing-masing
tim.

35
 f. Membuat Konten Artikel
▪ Untuk memposting sebuah artikel cukup mudah yakni dengan memilih menu
Post >> Add New.

Gambar 57
Menu Post >> Add New

▪ Buat judul dan isi konten di bawahnya. Selain itu navigasi sebelah kanan terdapat
setting-an yang mengatur posting tersebut seperti visibility untuk status siapa
saja yang diperbolehkan mengakses posting tersebut. Kemudian ada format
posting, category, permalink dan lain sebagainya. Hasil posting-an tersebut nanti
akan muncul di halaman website yang kita buat.

Gambar 58
Hasil Posting-an My Blog di WP

▪ Jika kita klik “Read More” maka halaman akan menuju ke alamat permalink
posting artikel tersebut

36
 Gambar 59
Tampilan Artikel di bagian My Blog

WordPress telah mendukung tampilan yang responsif sehingga lebar

tampilan akan menyesuaikan dengan device pengunjung yang digunakan.

Gambar 60
Hasil Tampilan WordPress

Kita sudah mempelajari tentang Content Management Systems (CMS)

melalui salah satu aplikasi populernya yakni WordPress. Kesimpulan yang bisa
kita ambil dari materi ini yakni dengan adanya teknologi CMS sangat membantu
kita dalam pembuatan website, seorang web developer ternyata bisa seseorang
yang awam dengan bahasa pemrograman. Tingkat produktivitas web developer
kali ini tergantung dari kemampuan kita berkreativitas dan menjadikan isi dari
website menjadi menarik dan dikunjungi banyak orang.

37
 Referensi

• Auliya, M. (2022, March 30). Pengertian Apa Itu CMS: Pahami Tentang CMS
adalah. DomaiNesia. Retrieved September 23, 2022, from
https://www.domainesia.com/tips/apa-itu-cms/

• Sutiono, S. (2016, October 6). 7 Kelebihan dan Kekurangan CMS Magento.

DosenIT.com. Retrieved September 23, 2022, from https://dosenit.com/kuliah-
it/web/kelebihan-dan-kekurangan-magento

• CMS market share, websites and contacts - Wappalyzer. (n.d.). Retrieved

September 23, 2022, from https://www.wappalyzer.com/technologies/cms/

• C., A. (2022, July 1). 8 Platform CMS Terbaik untuk Membuat Website. Hostinger
Tutorial. Retrieved September 23, 2022, from
https://www.hostinger.co.id/tutorial/cms-terbaik/

• C., A. (2022b, September 20). Apa Itu CMS? Pengertian CMS, Fungsi, dan
Manfaatnya. Hostinger Tutorial. Retrieved September 23, 2022, from
https://www.hostinger.co.id/tutorial/apa-itu-cms

38
 Terima Kasih
“Mengukur kemajuan pemrograman dengan
baris kode seperti mengukur kemajuan
pembangunan pesawat berdasarkan beratnya.”
“Measuring programming progress by lines of code is like measuring aircraft
building progress by weight.”
- Bill Gates -