One Day Workshop

Membuat Website Menggunakan CMS Wordpress

Di Localhost

Oleh
Kelas Multimedia SMK Nida El-Adabi

Sabtu, 10 Mei 2014

Doc: http://mulyaditenjo.com
A. Aplikasi Yang Digunakan
1. XAMPP
XAMPP merupakan aplikasi untuk membuat sebuah databse. Databse ini yang
nantinya akan berguna untuk penyimpanan data-data dalam website yang akan kita
buat pada pelatihan kali ini. Karena kita menggunakan sistem operasi Windows,
maka yang kita gunakan adalah Xampp for Windows.

Untuk mendapatkan aplikasi ini kita bisa mendownloadnya secara gratis di situs
resminya https://www.apachefriends.org/ atau kami telah menyediakan file
download pada web resmi SMK Nida El-Adabi http://www.smknidaeladabi.sch.id

2. WORDPRESS
Wordpress adalah aplikasi untuk membuat website dengan mudah. Wordpress
merupakan CMS (Content Management System) yang sangat popular di dunia dalam
hal pembuatan website berbasis CMS. Kelebihan dari Wordpress, disain interface
yang user friendly (mudah digunakan) dan gratis.

Untuk mendapatkan aplikasi ini kita bisa langsung mendownloadnya secara gratis di
situs resminya http://wordpress.org atau di website resmi SMK Nida El-Adabi
http://smknidaeladabi.sch.id

Doc: http://mulyaditenjo.com
 3. BROWSER
Browser adalah perangkat lunak yang berfungsi untuk menerima dan menyajikan
sumber informasi di internet. Ada banyak Browser yang bisa kita gunakan
diantaranya Internet Explorer, Google Chrome, Mozilla Firefox, Safari, Opera dan
masih banyak lagi.

Dan pada pelatihan kali ini browser akan berfungsi untuk menampilkan halaman
website yang kita buat menggunakan Wordpress. Dan browser yang akan kita
gunakan yaitu Mozilla Firefox. Browser ini gratis, kita bisa mendapatkan Mozilla
Firefox melalui situs resminya http://mozilla.org

B. Instalasi XAMPP
Setelah kita mendownload Xampp, terlebh dahulu kita akan mengestaknya, kemudian
kita melakukan proses instalasi.

Langkah instalasi Xampp:

1. Double klik File Exe Xampp yang sudah di download
2. Klik Ok, pilih bahasa (pilih saja English)

Doc: http://mulyaditenjo.com
3. Klik Next

4. Pilih Drive penyimpanan, pilih saja C, klik Next

5. Beri centang pada semua pilihan. Lalu klik Install

6. Maka proses instalasi akan berjalan

Doc: http://mulyaditenjo.com
7. Klik Finish,

8. Untuk melihat tampilan aplikasi. Buka browser dan pada adres bar tuliskan url:
http://localhost atau cukup localhost saja.
9. Nantinya akan muncul tampilan seperti dibawah ini. Pilih English

10. Nantinya akan muncul tampilan seperti dibawah ini

Sampai langkah ini berarti proses instalasi Xampp sudah selesai. Berikutnya adalah
melakukan konfigurasi data base pada PhpMyadmin. Tapi sebelumnya kita instalasi
browser terlebih dahulu.

Doc: http://mulyaditenjo.com
C. Instalasi Mozilla Firefox
Proses instalasi Mozilla Firefox:
1. Klik 2 kali pada Firefox Setup.Exe
2. Klik Run

3. Klik Next

4. Pilih Standard dan klik Next

Doc: http://mulyaditenjo.com
5. Centang Use Firefox, klik Nex

6. Klik Finish

Sampai langkah ini berarti proses instalasi browser Mozilla Firefox sudah selesai, tinggal
digunakan. Untuk menjalankan browser, klik 2 kali ikon Mozilla Firefox.

Doc: http://mulyaditenjo.com
C. Membuat Database di PHPMyAdmin
Untuk membuat database di PHPMyAdmin, langkah-langkahnya sebagai berikut:

1. Jalankan Xampp, kemudian klik Start pada Apache, MySql

2. Jalankan Mozilla, kemudian pada address bar ketikan http://localhost/xampp, enter

3. Klik PhpMyAdmin

Doc: http://mulyaditenjo.com
 4. Pada Create New Database tulis nama database, pada latihan ini kita tulis saja
dbwordpressku, klik Create

5. Setelah klik Create, nanti akan muncul kalimat Database dbwordpresku has been
created, itu artinya kita sudah berhasil membuat databse dengan nama
dbwordpressku.

D. Instalasi WORDPRESS
Sebelum kita melakukan instalasi Wordpress di Localhost, sebaiknya kita tahu dulu apa itu
localhost? Sederhananya, localhost adalah sebutan bagi server lokal yang ada di komputer kita.

Kalau istilah teknisnya localhost adalah suatu tempat atau wadah yang berfungsi untuk
menyimpan data ke dalam server jaringan komputer secara offline

Langkah instalasi Wordpress di localhost:

1. Extrak terlebih dahulu file Wordpress yang sudah di download dari http://wordpress.org , pada
pelatihan kali ini sudah disediakan di folder Bahan Workshop.

Doc: http://mulyaditenjo.com
2. Copy file Wordpress, kemudian paste di drive C://Xampp/htdocs

3. Kemudian kita Rename nama file Wordpress menjadi mywebku.

4. Klik 2 kali folder mywebku

Doc: http://mulyaditenjo.com
5. Cari file wp-config-sample

6. Klik kanan pada wp-config-sample, pilih open with, pilih Wordpad

7. Lakukan perubahan:
- Hapus tulisan database_name_here ganti dengan dbwordpressku
-Hapus username_here dengan root
- Hapus password_here dan biarkan kosong

Doc: http://mulyaditenjo.com
8. Jalankan Browser Mozilla, tulis di address bar http://localhost/mywebku, kemudian ENTER.

9. Nantinya akan muncul tampilan seperti dibawah ini, kemudian klik Create a Configuration File

Doc: http://mulyaditenjo.com
10. Lanjtukan, klik Let’s Go

11. Isi Database Name dengan dbwordpressku, User Name dengan root, Password dibiarkan
kosong, Database Host biarkan localhost, Table Prefix biarkan wp_ kemudian klik Submit.

Doc: http://mulyaditenjo.com
12. Klik Run the Install

13. Nantinya akan tampil form seperti dibawah ini, silahkan isi:
Site Title : isi dengan judul web, My Webku
User Name : isi dengan user name untuk memudahkan kita isi dengan admin
Password, twice : Isi dengan password, untuk latihan kita isikan 12345
Your Email : isi dengan email, untuk latihan kita isi dengan
emailboonganaja@boong.com

Doc: http://mulyaditenjo.com
14. Setelah mengisi form pada langkah 13, lanjutkan dengan klik Install WordPress
kalau sukses, nanti akan muncul tampilan seperti dibawah ini.

15. Lanjutkan dengan Klik Log In

16. Masukan username, dan password. Ingat usernamenya adalah admin, passwordnya adalah
12345 kemudian klik Log In.

17.Sampai langkah ini berarti kita sudah berhasil melakukan instalasi Wordpress di localhost.
Langkah berikutnya kita akan melakukan seting pada halaman Dashboard (halaman admin
web).

Doc: http://mulyaditenjo.com
Memilih Tampilan / Theme

Berikutnya kita akan melakukan perubahan Tampilan Web / Theme, caranya seperti pada langkah
dibawah ini.

18. Klik Appereance, kemudian klik Themes

19. Untuk latihan kita pilih Twenty Eleven, untuk mengaktifkan klik Activate

Doc: http://mulyaditenjo.com
Mengganti Header

Selanjutnya kita akan mengganti header web dengan gambar header yang sudah disiapkan
sebelumnya. Langkahnya seperti langkah dibawah ini.

20. Klik Appereance, kemudian klik Header

21. Klik Browse

22. Pilih Banner pada folder di drive komputer, klik Open

Doc: http://mulyaditenjo.com
23. Klik Upload

24. Klik Crop and Publish

Membuat Random Header

Kita bisa menambahkan lagi Header lainnya untuk menampilkan header website kita berubah-
rubah ketika berganti halaman (random). Caranya seperti langkah no. 21 sampai no. 24.

25. Klik Browse

26. Pilih lagi Banner berikutnya pada folder di drive komputer, klik Open

Doc: http://mulyaditenjo.com
27. Klik Upload

28. Klik Crop and Publish

Doc: http://mulyaditenjo.com
29. Agar header bisa tampil random, klik Random: Show a different image on each page.

30. Untuk melihat tampilan Header, klik Visite Site pada ujung kiri atas halaman Dashboard

31. Dan lihat hasilnya seperti tampilan dibawah ini…

Doc: http://mulyaditenjo.com
Mengganti Background

Selanjutnya kita akan mengganti latar tampilan latar website / Background. Langkahnya seperti
dibawah ini.

32. Klik Appereance, Klik Background

33. Klik Browse

34. Pilih Image pada drive komputer yang akan kita jadikan Background, klik Open

Doc: http://mulyaditenjo.com
35.Klik Upload

36. Jika sudah terupload, klik Save Changes

37. Lihat hasilnya dengan cara klik Visite Site seperti langkah 30

Doc: http://mulyaditenjo.com
Membuat Page / Halaman Web

Dalam latihan ini kita akan membuat 3 buah Page, yaitu: Bintang Pavorit, Tim Pavorit, dan
Hot Info Ikuti langkah membuat page dibawah ini:

38. Klik Page, klik All Pages

39. Pada Sample Page klik Edit

40.Ganti tulisan Sample Page dengan Bintang Pavorit

41. Klik Update, pada kotak

Doc: http://mulyaditenjo.com
42. Klik Add New, pada Enter Title Here tuliskan Tim Pavorit

43. Klik Publish

44. Klik Add New , pada Enter Title Here tuliskan Hot Info

45. Klik Publish, seperti langkah 43.

Doc: http://mulyaditenjo.com
46. Untuk melihat hasil penambahan Page, klik Visite Site

Manampilkan Tulisan / Post

47. Klik Posts, klik Add New

48. Pada Add Title Here, masukan judul tulisan. Dan masukan tulisan pada Text area. Untuk
latihan kita copy-paste saja dari file tulisan yang sudah disediakan. Seperti contoh dibawah ini.

Doc: http://mulyaditenjo.com
49. Untuk menampilkan tulisan di web, klik Publish.

Menambahkan Media (Photo/Video)

Untuk menambahkan gambar atau video pada tulisan, ikuti langkah dibawah ini.

50. Klik Add Media

Doc: http://mulyaditenjo.com
51. Klik Upload Files

52.Klik Select Files

53. Pilih Gambar pada drive komputer, klik Open

Doc: http://mulyaditenjo.com
54. Klik Insert Post

55. Untuk menampilkan gambar disebelah kiri teks, pilih Align Left

Doc: http://mulyaditenjo.com
56. Klik Update

57. Lihat hasilnya…

Sampai langkah ini kita sudah selesai membuat website menggunakan WordPress di
localhost. Selanjutnya kita akan belajar bagaimana melakukan perubahan (seting) pada menu
tertentu di halaman Dashboard website.

Doc: http://mulyaditenjo.com
E. DASHBOARD

Dashboard adalah halaman tempat pengaturan (seting) tampilan web. Di halaman Dashboard
kita akan menemukan Menu yang bisa kita gunakan untuk melakukan perubahan.

Masuk ke halaman Dashboard

1. Ketikan http://localhost/mywebku/wp-login.php di adress bar browser

2. Masukan username, dan password (username:admin, password: 12345)

3. Tekan Log In, maka kita akan masuk ke halaman Dashboard seperti tampilan dibawah ini

Doc: http://mulyaditenjo.com
POSTS
Menu ini digunakan untuk membuat atau mengediat tulisan yang akan ditampilkan (publish) di
website. Tool Posts terdiri dari sub:

 All Posts : untuk melihat keseluruhan tulisan baik yang sudah dipublish maupun draft
 Add New : untuk membuat tulisan baru
 Chategories : untuk melihat seluruh kategori tulisan
 Tags : untuk melihat seluruh tag

Edit tulisan menggunakan All Posts

1. Pada menu Posts, klik All Posts

2. Centang judul tulisan yang akan kita edit, arahkan kursor ke bagian bawah judul, klik Edit

3. Lakukan perubahan pada tulisan yang akan diperbaharui

4. Kalau sudah diperbaharui, klik Update

Doc: http://mulyaditenjo.com
Menggunakan Menu Add New
Membuat tulisan baru, menyisipkan gambar, format tulisan, link, kategori dan tags

1. Pada menu Posts, klik Add New

2. Tulis judul tulisan pada Enter Title Here, dan tulisan di kolom besar tempat menulis

3. Untuk menyisipkan gambar, photo atau video klik Add Media, seperti pada bahasan
Menambahkan Media (Photo/Video) langkah 50 – 54
4. Untuk format ulisan lakukan pada menu dibawah ini

5. Untuk menyisipkan links, blok tulisan yang akan ditautkan, klik menu links

6. Masukan url tujuan, halaman yang akan dituju ketik link di klik, klik Add Link

Doc: http://mulyaditenjo.com
7. Tambahkan kategori tulisan, klik Add New Category

8. Tuliskan kategori yang sesuai dengan tulisan, contoh Bintang Sepak Bola, klik Add New
Category

9. Jangan lupa buat Tags, klik segi tiga pada tool Tags, kemudian tuliskan tags (ingat tags harus
sesuai dengan tulisan), klik Add

10. Kalau tulisan sudah selesai dibuat, format dan lainnya sudah dianggap cukup. Saatnya
menerbitkan tulisan, dengan langsung klik Publish, seperti pada bahasan Manampilkan
Tulisan / Post langkah 49

Doc: http://mulyaditenjo.com
PAGE
Menu Page digunakan untuk membuat halaman baru website. Atau mengedit halaman yang
sudah ada.

Terdiri dari:
 All Pages : untuk melihat halaman yang sudah dibuat
 Add New : untuk membuat halaman baru

Membuat Halaman Baru

1. Posisi pada Pages, klik Add New
2. Tulis judul halaman pada Enter title here, dan isi halaman pada kolom besar tempat isi
halaman

3. Klik Publish

Doc: http://mulyaditenjo.com
APPEREANCE

Menu Appereance digunakan untuk melakukan perubahan pada:

 Theme : untuk melakukan perubahan pada disain tampilan web
 Widget : untuk melakukan perubahan pada widget
 Menus : untuk membuat Menu
 Theme Option : untuk opsi tema
 Header : untuk merubah tampilan header
 Background : untuk merubah tampilan latar
 Editor : untuk edit syntak

Themes
Memilih tampilan web
1. Posisi pada Appereance, Klik Theme

2. Pada Avaliable Themes, pilih Theme yang kita inginkan, untuk mengaktifkan klik Activate

Doc: http://mulyaditenjo.com
Widget
Widget adalah element tambahan untuk mempercantik tampilan website dan juga unutk navigasi
website. Widget biasanya dipasang di sidebar website.

Untuk menambahkan Widget:

1. Posisi pada Appereance, Klik Widget, nantinya akan muncul tampilan seperti dibawah ini

2. Pilih salah satu Widget, misalnya Widget Recent Posts, tarik ke main sidebar.

3. Isikan judul Widget pada Title misal kita beri judul Berita Terbaru, pada Number of posts to
show isikan berapa tulisan yang akan ditampilkan

Doc: http://mulyaditenjo.com
4. Klik Save
5. Untuk melihat hasilnya, klik Visite Site

Menus
Menus digunakan untuk membuat Menu website.

Untuk membuat menu, langkahnya:

1. Posisi pada Appereance, klik Menus, nantinya akan muncul tampilan seperti dibawah ini

Doc: http://mulyaditenjo.com
2. Pada Name Menu, tulis judul menu misalnya Menu 1, kemudian klik Create Menu

3. Pada Theme Locations, di kotak Primary Menu, klik Menu 1

4. Klik Save
5. Pada Pages, klik View All

6. Klik Secelt All, klik Add to Menu

Doc: http://mulyaditenjo.com
7. Urutkan posisi Menu dengan cara menariknya naik atau turun, setelah selesai klik Save Menu

8. Klik Visite Site untuk melihat hasilnya

USERS
Menu digunakan untuk mengatur hak akses pengelola web (user), terdiri dari sub menu All Users,
Add New, Your Profile.

Doc: http://mulyaditenjo.com
All Users
Merupakan menu yang bisa kita gunakan untuk melihat keseluruhan Users Website.
1. Klik Users
2. Klik All Users, nanti akan muncul tampilan seperti dibawah ini

3. Selanjutnya kita bisa melakukan aksi seperti perubahan hak akses, nick name user.

Add New
Merupakan menu yang dapat kita gunakan untuk menambah users web.

1. Klik Users
2. Klik Add New, nantinya akan muncul tampilan seperti dibawah ini

3. Isi form username, email, first name, last name, website, password, dan Role. Pada Role
silahkan pilih hak akses untuk user baru tersebut, ada 4 pilihan subscriber, administrator,
editor, author dan contributor.
4. Setelah selesai, klik Add New User

Doc: http://mulyaditenjo.com
Your Profile
Menu ini bisa kita gunakan untuk perubahan data personal pemilik website, dan perubahan
password admin.

Untuk merubah password

1. Klik Users
2. Klik Your Profile
3. Pada New Password masukan password baru

4. Klik Update Profile

TOOLS

Dengan menu ini kita bisa melakukan imprt dan export konten website. Import digunakan untuk
memasukan isi web lain. Export digunakan untuk memindahkan isi web ke web lainnya atau bisa
digunakan untuk backup konten.

Import
Langkah untuk melakukan import konten web:
1. Klik Tool
2. Klik Import

Doc: http://mulyaditenjo.com