MATERI P2M MANAJEMEN INFORMATIKA

PENGANTAR CMS
BLOGGING DAN MOBILE
(WORDPRESS)

JURUSAN MANAJEMEN INFORMATIKA

FAKULTAS TEKNIK DAN KEJURUAN
UNIVERSITAS PENDIDIKAN GANESHA
SINGARAJA
2016

DAFTAR ISI

Halaman
HALAMAN JUDUL................................................................................i
DAFTAR ISI...........................................................................................ii
1.1

Pengantar CMS, Blogging dan Mobile.............................................

1.1.1 Definisi CMS (Content Management System)......................
1.1.2 Definisi Blogging.....................................................................
1.1.3 Definisi Mobile........................................................................

1.2

Persiapan & Instalasi Software.........................................................

1.2.1 Langkah 1...............................................................................
1.2.2 Langkah 2...............................................................................
1.2.3 Langkah 3...............................................................................
1.2.4 Langkah 4..............................................................................

1.3 Tutorial Setting Awal Halaman Wordpress.......................................

1.3.1 Langkah 1................................................................................
1.4 Tutorial Setting Template Wordpress................................................
1.4.1 Langkah 1................................................................................
1.5 Tutorial Tambah Menu Wordpress....................................................
1.5.1 Langkah 1................................................................................
1.6 Tutorial Tambah Postingan Artikel Baru Wordpress.........................
1.6.1 Langkah 1................................................................................
1.7 Tutorial Tambah Videos Youtube.......................................................
1.7.1 Langkah 1................................................................................

1.1

Pengantar CMS, Blogging dan Mobile

Saat ini kebutuhan akan sebuah informasi merupakan sebuah konsumsi

yang hampir bergerak kepada kebutuhan primer manusia. Hal ini dikarenakan
perkembangan jaman modern dimana teknologi komunikasi sangat berkembang
pesat dan memungkinkan setiap orang dapat saling berbagi informasi kepada
siapapun, dimanapun dan kapanpun.
Menjawab semua

kebutuhan diatas, website sebagai media informasi

elektronik pada dewasa ini memegang peranan penting dalam menyampaikan

informasi. Oleh karena itu, kebutuhan akan website dirasa penting bagi individu,
organisasi maupun perusahaan. Karena website dapat menjadi media informasi
yang sangat cepat, mudah dan murah.
Mengingat durasi yang dibutuhkan untuk membangun sebuah website
tidaklah mudah, maka pada saat ini telah dikembangkan sebuah Content
Management System atau yang lebih dikenal CMS. Dimana CMS berfungsi
untuk membangun sebuah website dengan tidak perlu untuk melakukan
pemrograman dari awal. Dan di bawah ini merupakan definisi dari CMS,
Bloogging dan Mobile.

1.1.1 Definisi CMS (Content Management System)

Pengertian Content Management System (CMS) Content Management
System atau sering disebut dengan CMS adalah aplikasi web yang berisikan
template untuk mengelola isi halaman web secara mudah. Penggunaan
Content Management System tidak memerlukan pengetahuan pemrograman
web yang handal karena proses instalasi dan cara penggunaannya sudah user
friendly. CMS sendiri ada yang dibuat khusus menyesuaikan kasus yang ada dan
biasanya berbayar dan ada yang berupa template instan yang fungsionalitasnya
dibuat dengan menyeuaikan pada beberapa proses bisnis yang ada didunia
nyata yang dapat digunakan secara gratis. Dan pada Gambar 1.1 merupakan
tampilan dari CMS yang paling sering di gunakan.

Gambar 1.1 Daftar CMS (Content Management System)

1.1.2 Definisi Blogging
Blog adalah kependekan dari Weblog, istilah yang pertama kali
digunakan oleh Jorn Barger pada bulan Desember 1997. Jorn Barger
menggunakan istilah Weblog untuk menyebut kelompok website pribadi yang
selalu di update secara kontinyu dan berisi link-link ke website lain yang
mereka anggap menarik disertai dengan komentar-komentar mereka sendiri.
Secara garis besar, Weblog dapat dirangkum sebagai kumpulan website
pribadi yang memungkinkan para pembuatnya menampilkan berbagai jenis isi
pada web dengan mudah, seperti karya tulis, kumpulan link internet,
dokumen-dokumen, gambar ataupun multimedia.
1.1.3 Definisi Mobile
Mobile adalah sebuah aplikasi yang memungkinkan Anda melakukan
mobilitas dengan menggunakan perlengkapan seperti PDA, telepon seluler atau
Handphone. Dengan menggunakan aplikasi mobile, Anda dapat dengan mudah
melakukan berbagai macam aktifitas mulai dari hiburan, berjualan, belajar,
mengerjakan pekerjaan kantor, browsing dan lain sebagainya.

Pemanfaatan aplikasi mobile untuk hiburan paling banyak digemari oleh

hampir 70% pengguna telepon seluler, karena dengan memanfaatkan adanya fitur
game, music player, sampai video player membuat kita menjadi semakin mudah
menikmati hiburan kapan saja dan dimanapun.
1.2 Persiapan & Instalasi Software
Dalam sub materi ini akan di tekankan bagaimana cara instalasi Software
CMS, yang dimana penulis memilih Wordpress sebagai bahan ajar dalam
pembelajaran kali, ini dan di bawah ini merupakan proses Instalasi Wordprees:
1.2.1 Langkah 1
Pastikan dalam PC anda sudah terinstal XAMPP yang dimana XAMPP
merupakan singkatan dari cross-platform(X), Apache, MySQL, PHP dan Perl.
Merupakan server web lokal yang ringan untuk tujuan pengujian. Karena XAMPP
adalah cross-platform, maka juga bekerja pada Mac dan Linux (LAMP), pada
tutorial cara install Wordpress offline ini kita akan menggunakan XAMPP. Jika
XAMPP sudah terinstal di PC anda pastikan Apache dan MySQLnya telah aktif.
Dan di pada Gambar 1.2 Gambaran dari XAMPP Control Panel.

Gambar 1.2 Gambaran dari XAMPP Control Panel.

1.2.2 Langkah 2
Setelah langkah pertama selesai langkah berikutnya kita harus membuat data
base terlebih dahulu yang dimana data base itu akan di gunakan oleh CMS
Wordpress

itu

sendiri,

dengan

cara

bukak

broser

anda

dan

ketikan

localhost/phpmyadmin/. Dan pada Gambar 1.3 merupakan tampilan dari

halaman phpmyadmin.

Gambar 1.3 Tampilan dari Halaman phpmyadmin

Setelah tampil halaman phpmyadmin silahkan buat data base yang akan di
gunakan untuk mendukung jalannya CMS yang akan anda gunakan, dengan cara
Klik Basis data pada halaman phpmyadmin dan isikan Form dengan nama
database yang anda inginkan, disini penulis akan menamai data base dengan nama
materi_p2m1. Dan pada Gambar 1.4 merupaka tampilan dari Form pembuatan
basis data.

Gambar 1.4 Tampilan Dari Form Pembuatan Basis Data.

Pada gambar diatas letakkan nama database pada kolom yang ditunjukkan
cotoh nama database materi_p2m1 kotak hijau no 2 dan klik tombol
Crate/Buat yang ditunjukkan kotak hijau no 3. Jika berhasil akan muncul pesan
seperti gambar dibawah ini. Gambar 1.4 merupakan tampilan dari pesan
pembuatan data base.

Gambar 1.5 Tampilan Pesan Berhasil Pembuatan Data Base

Sampai disini untuk cara membuat database Wordpress secara offline, kita
juga bisa membuat database baru lagi dengan cara diatas.
1.2.3 Langkah 3
Setelah pembuatan database selesai pada langkah 1 dan 2 maka pada
langkah berikutnya kita Persiapan Cara Install Wordpress di XAMPP. Sebelum
melakukan-nya kita harus men-download file Wordpress terlebih dahulu. Silahkan
kunjungi halaman Wordpress di https://wordpress.org/ dan klik tombol
Download Wordpress pada halaman web tersebut. Gambar 1.5 merupakan
tampilan dari halaman Wordpress.org.

Gambar 1.5 Tampilan dari Halaman Wordpress.org.

Setelah berhasil mendapatkan file Wordpress dalam format zip. Supaya
Wordpress bisa bekerja dengan XAMPP kita perlu unzip Wordpress ke folder yang
tepat. Sekarang kita menuju ke folder tempat XAMPP di instal dan buka folder
htdocs, yaitu di C:\xampp\htdocs . Gambar 1.6 merupakan Tampilan dari
halaman htdocs.

Gambar 1.6 Tampilan dari Htdocs

Gambar 1.7 Proses Extract File

Unzip Wordpress ke dalam folder htdocs (gambar diatas) dan nama folder
bisa kita ubah sesuai kebutuhan. Dan proses extract file dapat di lihat pada
Gambar1.7. Dalam tutorial ini nama folder dibiarkan standar dengan nama
wordpres1 . Buka folder wordpress1 kita, temukan file wp-config-sample.php
dan rename (ubah nama) ke wp-config.php . Buka file dan gulir ke bawah
sampai melihat baris beriku. Gambar 1.8 merupakan tampilan dari baris skrip wpconfig.php.

Gambar 1.8 Merupakan Tampilan Dari Baris Skrip wp-config.php.

Gambar 1.8 merupakan baris kode yang menentukan rincian login untuk database.

Pada nomor 1: Ganti database_name_here dengan nama database

yang kita buat sebelumnya, yang dalam tutorial ini adalah materi_p2m1

.
Pada nomor 2: Ganti username_here dengan root
Pada nomor 3: Hapus tulisan password_here menjadi (dibuat

kosong)
Pada nomor 4: Biarkan saja

Simpan file dan dan tutup. Sekarang kita bisa melanjutkan memulai menginstal
Wordpress.

1.2.4 Langkah 4
Setelah langkah 1-3 selesai Sekarang buka browser dan ketik-kan alamat
http://localhost/wordpress1/wp-admin/install.php dan pilih bahasa indonesia
dan klik Lanjutkan . Pada Gambar 1.9 Proses pemilihan bahasa pada saat
install dan pada Gambar 1.10 10 halaman selamat datang untuk proses instalasi
wordpress.
.

Gambar 1.9 Proses Pemilihan Bahasa

Setelah proses pemilihan bahasa selesai proses berikutnya kita akan di bawa
ke halaman proses instalasi yang dimana pada halaman ini terdapat form yang
harus diisi oleh user.

Gambar 1.10 Halaman Selamat Datang Untuk Proses Instalasi Wordpress.

Jika form sudah diisi dengan data yang lengkap, maka klik install dan jika
berhasil adna akan di bawa ke halaman validasi sukses dalam proses instalasi.
Gambar 1.11 merupakan pesan sukses dalam instalasi.

Gambar 1.11 Pesan Sukses Dalam Instalasi

1.3 Tutorial Setting Awal Halaman Wordpress

Pada sub sebelumnya kita sudah menjelaskan bagaimana cara kita untuk
Instalasi Wordpress dan pada sub ini akan di jelaskan bagai mana caranya
melakukan setting halaman awal pada Wordpress yang harus kita kalukan adalah
membuka

halaman

admin

pada

Wordpress

dengan

cara

ketik

http://localhost/wordpress1/wp-login.php dan kita akan di bawa ke tampilan

login admin yang dimana pada langkah 4 kita sudah membuat username dan
passwordnya silahkan di masukan pada form login admin. Gambar 1.12
merupakan tampilan dari halaman login admin.

Gambar 1.12 Tampilan Dari Halaman Login Admin.

Setelah login berhasil user akan di bawa ke halaman awal admin yang
dimana pada halan ini kita bisa melakukan setting awal halaman wordpress, dan
berikut langkah-langkahnya :
1.3.1 Langkah 1
Langkah 1 untuk melakukan setting awal halaman wordpress, kita harus
sudah ada di halaman awal admin. Gambar 1.13 merupakan tampilan awal
halaman admin.

10

Gambar 1.13 Tampilan Awal Halaman Admin

Setelah tampil halaman awal admin silahkan Klik Pengaturan, dan pada
pilihan Pengaturan kita akan di berikan beberapa menu yang dimana semua menu
tersebut berfungsi dalam melakukan setting awal tampilan wordpress. Dan pada
setting awal ini akan di jelaskan untuk pengaturan umum yang biasa di lakukan.
Gambar 1.14 tampilan menu pilihan untuk pengaturan awal halaman wordpress
dan Gambar 1.5 merupakan tampilan dari halaman pengaturan umum wordpress.

Gambar 1.14 Tampilan Menu Pilihan Untuk Settings

11

Gambar 1.5 Tampilan Dari Halaman Pengaturan Umum Wordpress

Pada halaman pengaturan awal kita dapat mengatur judul situs, email,
selogan waktu dan tanggal, jika kita ingin merubah judul situs langsung bisa kita
rubah pada form 1 dan setelah perubahan selesai klik save.
1.4 Tutorial Setting Template Wordpress
Pada sub ini akan di jelaskan bagaimana cara untuk mengatur template
wordpress dan berikut langkah-langkahnya :
1.4.1 Langkah 1
Klik Menu Tampilan, dan pada sub menu tampilan Klik Menu Tema dan
pada halaman tema user sudah di suguhkan tema yang sudah otomatis terinstal
pada wordpress dan jika sudah mendapatkan tema yang kita pilih, lalu Klik
Aktifkan dan secara otomatis tema tersebut akan aktif pada website kita, Gambar
1.16 merupakan proses mengatur template wordpress.

12

Gambar 1.16 Proses Mengatur Template Wordpress

Jika Template Wordpress sudah aktif kita bisa melihat hasilnya dengan cara
arahkan kursor anda pada judul situs anda dan Klik Kunjungi Situs. Gambar 1.17
merupakan tampilan dari situs yang sudah kita tambahkan template. Dan Gambar
1.18 merupakan tampilan dari situs website yang sudah kita tambahkan Template

Gambar 1.17 Proses Kunjungi Situs

13

Gambar 1.18 Tampilan Situs Website yang di Tambahkan Template

1.5 Tutorial Tambah Menu Wordpress
Pada sub ini akan di jelaskan bagaimana cara untuk menambah menu
wordpress dan berikut langkah-langkahnya :
1.5.1 Langkah 1
Klik Menu Laman, setelah tampil halaman menu laman, Klik Tambah Baru
maka user akan di bawa ke halaman tambah baru dan silahkan isi nama menu
yang anda inginkan, setelah selesai Klik Terbitkan, maka secara otomatis menu
akan bertambah, disini penulis akan menambah 2 menu sekaligus dengan cara
yang sama yaitu Menu Home dan Menu Profil. Pada Gambar 1.19 merupakan
proses pemilihan menu laman, Gambar 1.20 merupakan proses pembuatan menu,
dan Gambar 1.21 merupakan hasil akhir tampilan menu yang sudah di buat.

14

Gambar 1.19 Proses Pemilihan Menu Laman

Gambar 1.20 Proses Pembuatan Menu

15

Gambar 1.21 Hasil Akhir Tampilan Menu

1.6 Tutorial Tambah Postingan Artikel Baru Wordpress
Pada sub ini akan di jelaskan bagaimana cara untuk menambah Postingan
Artikel wordpress dan berikut langkah-langkahnya :
1.6.1 Langkah 1
Klik Menu Pos dan Pilih Menu Tambah Baru, secara otomatis user akan di
bawa ke halaman Tambah Baru yang dimana jika user ingin menambah postingan
artikel, user pertama member judul artikel dan mengisi artikel yang user inginkan
pada form pengisian artikel, selain itu jika user ingin menyisipkan gambar
kedalam artikel user bisa Klik Tambah Media, dan user akan langsung di bawa ke
halaman penambahan media, pada halaman ini user diminta untuk mengambil
gambar atau lagu yang ingin user tambahkan setelah selesai Klik Sisipkan
Postingan, setelah semua proses selesai Klik Terbitkan. Dan di bawah ini
merupakan gambaran proses tambah postingan artikel baru di wordpress.

16

Gambar 1.22 Proses Pemilihan Menu Pos

Gambar 1.23 Proses Pembuatan Postingan Artikel

17

Gambar 1.24 Proses Mengambil File Media

Gambar 1.25 Proses Menyisipkan File Media ke Artikel

18

Gambar 1.26 Proses Menerbitkan Postingan Artikel

Gambar 1.26 Hasil Akhir Tampilan Artikel

19

1.7 Tutorial Tambah Videos Youtube

Pada sub ini akan di jelaskan bagaimana cara untuk menambah Videos
Youtube dan berikut langkah-langkahnya :
1.7.1 Langkah 1
Untuk penambahan videos youtube hampir sama dengan cara post artikel
baru, Klik Tambah Baru setelah user di bawa ke halaman tambah baru, Klik Teks
yang dimana pada form teks kita akan taruh URL Link Videos Youtube yang akan
kita sisipkan, buka situs youtube dan kita pilih video yang ingin kita sisipkan,
setelah mendapatkan video yang di inginkan Klik Video, dan Klik Bagikan, pada
bagian bagikan terdapat URL link video yang harus di copy, setelah di copy kita
paste pada form teks, setelah proses selesai Klik Terbitkan. Dan di bawah ini
merupakan gambaran proses tambah videos youtube di wordpress.

Gambar 1.27 Tampilan Form Tambah Baru

20

Gambar 1.28 Proses Copy Link Video

Gambar 1.29 Proses Penerbitan Post Video

21

Gambar 1.30 Hasil Akhir Tampilan Video

22