Modul Wordpress MGMP

5/21/2018 Modul Wordpress MGMP

1/43

0 Modul PelatihanDibuat oleh: Hairi

MODUDENGA

Dibangun

PE

M

ebsite MGMP TIK SMP/MTS Kota Padang

Defi www.herrydevi.com

L PELATIHAN WEBN MENGGUNAKAN CMS WORDPR

Oleh:

HAIRI DEFI

ecara OfflineDengan Menggunakan SXampp-Win32-1.7.3

Wordpress 3.7.1

GEMBANGAN KARIR P2TK DIKDAS

GMP TIK SMP/MTS KOTA PADANG

T A H U N

2013

ITE SS

oftware


2/43

1 Modul Pelatihan Website MGMP TIK SMP/MTS Kota PadangDibuat oleh: Hairi Defi www.herrydevi.com

INSTALASI LOCAL WEB SERVERXAMPP merupakan Software untuk Windows yang terdiri dari beberapa layanan

diantaranya adalah Apache, Mysql, dan PHP. Untuk membuat sebuah webdi komputer kita sendiri dibutuhkan webserver. Salah satu yang bisa digunakan

adalah XAMPP. XAMPP menyediakan berbagai macam layanan salah satunya

adalah Apache untuk web server.

Untuk melakukan installasi XAMPP silahkan download terlebih dahulu

installernya di http://www.apachefriends.org/en/xampp-windows.html. Program

ini bersifat gratis, bebas digunakan siapa saja.

Jika sudah berhasil di download, lakukan langkah-langkah berikut ini:

1. Double klik pada file installer XAMPP yang sudah didownload sebelumnya,

klik menu Install.

2. Tunggu proses intsalasi selesai terlebih dahulu
http://www.apachefriends.org/en/xampp-windows.htmlhttp://www.apachefriends.org/en/xampp-windows.htmlhttp://www.apachefriends.org/en/xampp-windows.html


3/43


3. Setelah proses instalasi selesai, akan keluar jendela baru secara otomatis dan

tekan tombol Enter

4. Selanjutnya tekan Enter



4/43




8. Selanjutnya ketikkan huruf x untuk keluar dan tekan Enter

Proses Intallasi xampp sudah selesai dan siap untuk di gunakan


5/43


Setelah proses instalasi selesai langkah selanjutnya aktifkan xampp untuk

menghidupkan service Apache Server dan MySQL yang berfungsi untuk pres

pembuatan data baseLangkah-langkah mengaktifkan xampp

1. Klik Icon Program Xampp Control Pannel di menu star atau klik incon

xampp control panel yang ada di dekstop

2. Maka akan muncul program xampp di pojok bawah layar komputer, kitaaktifkan service Apache dan MySql dengan cara klik button Start

disebalah kanan tulisannya nya


6/43


3. Indikator sofware berjalan sukses jika sudah muncul tulisanRunning

dan xampp sudah siap digunakan


7/43


INSTALLASI CMS WORDPRESS

WordPress adalah sebuah aplikasi sumber terbuka (open source) yang sangatpopuler digunakan sebagai mesin blog (blog engine). WordPress dibangun dengan

bahasa pemrograman PHP dan basis data (database) MySQL. PHP dan MySQL,

keduanya merupakan perangkat lunak sumber terbuka (open source software)

Selain sebagai blog, WordPress juga mulai digunakan sebagai sebuah CMS

(Content Management System) karena kemampuannya untuk dimodifikasi dan

disesuaikan dengan kebutuhan penggunanya.

Sebelum melakukan instalasi CMS Wordpress silahkan download aplikasinya

terlebihdahulu di http://wordpress.org/download/, Aplikasi ini bersifat gratis,

bebas digunakan siapa saja.

Simpan aplikasi wordpress yang telah di download di komputer anda, aplikasi

wordpress yang telah di download dalam kondisi di kompres dalam file winrar.Sebelum aplikasi wordpress digunakan extrak terlebih dahulu dengan

menggunkan aplikasi WinRAR (kalo belum tersintall WinRAR di komputer anda

silakan download dahulu aplikasinya di http://www.herrydevi.com/2013/10/

download-winrar-versi-500.html

)
http://wordpress.org/download/http://wordpress.org/download/http://www.herrydevi.com/2013/10/%20download-winrar-versi-500.htmlhttp://www.herrydevi.com/2013/10/%20download-winrar-versi-500.htmlhttp://www.herrydevi.com/2013/10/%20download-winrar-versi-500.htmlhttp://www.herrydevi.com/2013/10/%20download-winrar-versi-500.htmlhttp://www.herrydevi.com/2013/10/%20download-winrar-versi-500.htmlhttp://wordpress.org/download/


8/43


Setelah aplikasi wordpress di extrak lakukan langkah-langkah berikut untuk

persiapan sebelum installasi wordpress.

1. Copy folder wordpress yang telah di extrak kedalam folder htdoc(C:\xampp\htdocs)

2. Buka folder htdocs (C:\xampp\htdocs) dan paste folder aplikasi wordpress

di folder htdocs


9/43


3. Rename folder aplikasi wordpress menjadi mgmptik

4. Proses pengubahan nama (rename) foldel aplikasi wordpress selesai


10/43


Langkah selanjutnya membuat database untuk digunakan pada saat instalasi

aplikasi wordpress.

1. Buka web browser anda terlebih dahulu (disini kami menggunakan web

browser mozilla firefox)

2. Mozilla firefox sudah aktif


11/43


3. Pada navigasi toolbar ketikkan: http://localhost/xampp/ dan telan enter

4. Tampilan halamn pertama xampp akan terlihat (halam ini akan terlihat

kalau xampp pertama kali di buka saat setelah diinstall), pilih bahasa yang

diinginkan (direkomendasikan bahasa inggris)
http://localhost/xampp/http://localhost/xampp/http://localhost/xampp/


12/43


5. Klik PhpMyAdmin

6. Halaman utama PhpMyAdmin telah terbuka, selanjutnya ketikan nama

database pada kolom create new database (nama database yang di gunakan

adalahdbmgmp ), selanjutnya klik Create


13/43


7. Proses pembuatan data base dbmgmp Sudah selesai dibuat yang di tandai

dengan pesan yang mucnul database dbmgmp hasbeen create

Setelah proses pembuatan database selesai, dilanjutkan dengan proses installasi

aplikasi wordpress.

1. Buka kembali web browser mozilla firefox anda dan ketikkan

http://localhost/mgmptik/pada toolbar navigasi
http://localhost/mgmptik/http://localhost/mgmptik/


14/43


2. Maka akan keluar tampilan pertama halaman wordpress, selanjutnya klik

Creat a Configurastion File

3. Selanjutnya Klik Lets go!


15/43


4. Selanjutnya Klik Run to Install

5. Isikan data-data yang di perlukan pada kotak yang telah di sediakan

Database Name : dbmgmp (seuaikan dengan nama data base yang

dibuat sebelumnya

User Name : root

Password :Database Host : localhost

Tabel Prefix : wp_

Selanjutnya Klik Submit


16/43


6. Isikan informasi yang di perlukan

Site title : MGMP TIK SMP KOTA PADANG

Username : (isikan username yang diinginkan)Password, twice : (isikan password yang diinginkan dan confirmasi

pasword pada kotak dibawahnya)

Your E-mail : (isikan e-mail anda)

Privacy : (ceklist agar web anda ter index oleh search engine)

7. Proses instalasi selesai dengan di tandai pesan Success!


17/43


8. Tes apakah website yang kita buat sudah sukses dengan cara mengetikkan

http://localhost/mgmptik/ pada toolbar navigasi, kalo tampilan di bawah ini

keluar berati website yang kita buat sudah selesai.


18/43


SISTEM ADMINISTRATOR WORDPRESSUntuk meningkatkan keamanan pada wordpress diberikan beberapa tingkatan

keamanan bagi penggunaan wordpress diantaranya1. Super Admin

seseorang dengan akses ke situs fitur administrasi jaringan dan semua fitur

lainnya.

2. AdministratorSeseorang yang memiliki akses ke semua fitur administrasi dalam satu situs.

3. EditorSeseorang yang dapat mempublikasikan dan mengelola pos termasuk tulisan

dari pengguna lain.

4. Author (Penulis)Seseorang yang dapat mempublikasikan dan mengelola posting mereka

sendiri.5. Contributor (Kontributor)

Seseorang yang dapat menulis dan mengelola posting mereka sendiri tetapi

tidak dapat mempublikasikan mereka.

6. Subscriber (Pelanggan)Seseorang yang hanya bisa mengelola profil mereka.

Berikut langkah-langkah pengaturan sistem administrator pada wordpress

1. Log-in terlebih dahulu dengan mengetikkan URL http://localhost/mgmptik/

wp-login.phppada navigasi toolbar browser anda.
http://translate.googleusercontent.com/translate_c?depth=1&hl=id&prev=/search%3Fq%3Dsystem%2Badministrator%2Bwordpress%26sa%3DX%26biw%3D1366%26bih%3D638&rurl=translate.google.co.id&sl=en&u=http://codex.wordpress.org/Roles_and_Capabilities&usg=ALkJrhgOuRLOdXfzL_8_WQpYsAoT1IgNCghttp://codex.wordpress.org/Roles_and_Capabilitieshttp://translate.googleusercontent.com/translate_c?depth=1&hl=id&prev=/search%3Fq%3Dsystem%2Badministrator%2Bwordpress%26sa%3DX%26biw%3D1366%26bih%3D638&rurl=translate.google.co.id&sl=en&u=http://codex.wordpress.org/Roles_and_Capabilities&usg=ALkJrhgOuRLOdXfzL_8_WQpYsAoT1IgNCghttp://localhost/mgmptik/%20wp-login.phphttp://localhost/mgmptik/%20wp-login.phphttp://localhost/mgmptik/%20wp-login.phphttp://localhost/mgmptik/%20wp-login.phphttp://localhost/mgmptik/%20wp-login.phphttp://translate.googleusercontent.com/translate_c?depth=1&hl=id&prev=/search%3Fq%3Dsystem%2Badministrator%2Bwordpress%26sa%3DX%26biw%3D1366%26bih%3D638&rurl=translate.google.co.id&sl=en&u=http://codex.wordpress.org/Roles_and_Capabilities&usg=ALkJrhgOuRLOdXfzL_8_WQpYsAoT1IgNCghttp://codex.wordpress.org/Roles_and_Capabilitieshttp://translate.googleusercontent.com/translate_c?depth=1&hl=id&prev=/search%3Fq%3Dsystem%2Badministrator%2Bwordpress%26sa%3DX%26biw%3D1366%26bih%3D638&rurl=translate.google.co.id&sl=en&u=http://codex.wordpress.org/Roles_and_Capabilities&usg=ALkJrhgOuRLOdXfzL_8_WQpYsAoT1IgNCg


19/43


2. Pada halaman log-in administrator masukkan username dan password

sesuai pada saat kita memasukkan data infomrasi sebelumnya

3. Setelah selesai log-in, kita akan di bawa kedalam halaman dashboard

administrator


20/43


4. Untuk pengaturan sistem adminitrator dan penambahan administrator, klik

button user

5. Untuk menambah administrator klik Add New akan keluar halaman add

new user dan isikan data-data yang di perlukan dan tentukan tingkatan user

yang diinginkan seperti administrator, editor, author dan subcriber.

Selanjutnya klik Add New User untuk menyimpan data.


21/43


PENGATURAN KONFIGURASI DASAR WORPRESS

Berikut langkah-langkah pengaturan konfigurasi dasar pada wordpress1. Log-in terlebih dahulu dengan mengetikkan URL http://localhost/mgmptik/



sesuai pada saat kita memasukkan data infomrasi sebelumnya
http://localhost/mgmptik/%20wp-login.phphttp://localhost/mgmptik/%20wp-login.phphttp://localhost/mgmptik/%20wp-login.phphttp://localhost/mgmptik/%20wp-login.phphttp://localhost/mgmptik/%20wp-login.php


22/43


3. Setelah selesai log-in, kita akan di bawa kedalam halaman dashboard

administrator

4. Klik Setting, pada bagian ini kita bisa mengatur konfigurasi tampilan dasar

wordpress sesuai dengan kubutuhan yang diinginkan


23/43


PENGELOLAAN DATA DINAMIS (BERITA)Situs web dinamis merupakan situs web yang secara spesifik didisain agar isi

yang terdapat dalam situs tersebut dapat diperbarui secara berkala dengan mudah.Sesuai dengan namanya, isi yang terkadung dalam situs web ini umumnya akan

berubah setelah melewati satu periode tertentu. Situs berita adalah salah satu

contoh jenis situs yang umumnya mengimplementasikan situs web dinamis

(sumber: http://id.wikipedia.org/wiki/Situs_web)

Langkah-langkah dalam pembuatan data dinamis (berita)



2. Pada halaman log-in administrator masukkan username dan password anda


24/43


3. Setelah selesai log-in, kita akan di bawa kedalam halaman dashboard.

4. Klik button Posts


25/43


5. Klik addnew, akan keluar tampilan halaman add new post.

6. Pada halaman ini kita sudah bisa langsung mengetikkan berbagai macam

artikel dan informasi yang akan kita publikasikan. Untuk editing teks tidak

jauh beda dengan MS Word, tetapi perintahnya terbatas.


26/43


7. Setelah selesai memasukkan data dalam bentuk teks dan melakukan editing

degan sempurna selanjutnya kita akan mencoba memasukkan media gambar

dalam postingan. Klik button Add New Media, maka akan tampil halamaninsert media berikut dan klik button Select File untuk mencari letak data

gambar yang akan dimasukkan

8. Cari letak gambar dan pilih gambar yang akan dimasukkan kedalam

postingan kita dan selanjutnya klik Open


27/43


9. Gambar yang telah kita pilih tadi sudah masuk kedalam halaman insert

media, langkah selanjutnya klik button Insert Into Post

10. Gambar yang telah kita insertkan tadi akan tampil di dalam editing postingan.Selanjutnya klik button Edit Image


28/43


11. Selanjutnya pilih posisi gambar yang kita inginkan seperti none = tanpa

pengaturan image, left = posisi gambar berada di sebelah kiri, center = posisi

gmbar berada di tengah, right = gambar berada di sebelah kanan. Selanjutnyaklik Update

12. Gambar sudah dimasukkan dan diatur dengan baik di dalam postingan


29/43


13. Selanjutnya klik Publish. Kalo data sudah selesai di publis maka tombol

Publish akan berobah menjadi tombol Update dan postingan tulisan kita

sudah bisa di akses.

14. Silakan cek hasilnya dengan mengetikkanurl http://localhost/mgmptik/ pada

naviagasi button web browser anda
http://localhost/mgmptik/http://localhost/mgmptik/http://localhost/mgmptik/


30/43


PENGOLAHAN DATA STATIS (HALAMAN)Situs web statis merupakan situs web yang memiliki isi tidak dimaksudkan untuk

diperbarui secara berkala sehingga pengaturan ataupun pemutakhiran isi atas situsweb tersebut dilakukan secara manual. (Sumber: http://id.wikipedia.org/wiki/

Situs_web

)

Langkah pengolahan data statis (halaman)



http://id.wikipedia.org/wiki/%20Situs_webhttp://id.wikipedia.org/wiki/%20Situs_webhttp://id.wikipedia.org/wiki/%20Situs_webhttp://localhost/mgmptik/%20wp-login.phphttp://localhost/mgmptik/%20wp-login.phphttp://localhost/mgmptik/%20wp-login.phphttp://localhost/mgmptik/%20wp-login.phphttp://localhost/mgmptik/%20wp-login.phphttp://id.wikipedia.org/wiki/%20Situs_webhttp://id.wikipedia.org/wiki/%20Situs_web


31/43



4. Klik Button Pages


32/43


5. Selanjutnya klik button Add New, akan dibawa ke halaman Add New page,

dan ketikkan isi naskah atau tulisan yang akan di muat, dan lakukan editing

seperti pada penulisan halaman dinamis.

6. Selanjutnya klik button Publish, kalau proses publish sudah selesai akaan

berobah button publish menjadi update

7. Silakan cek hasilnya dengan mengetikkanurl http://localhost/mgmptik/ pada



33/43


AKTIVASI THEME SEDERHANA BAWAAN WORDPRESSTheme adalah sekumpulan file PHP, HTML, CSS dan gambar yang bertugas

menjadi interface antara blogware atau CMS dengan pengunjungnya.Apa yang tampil dan Anda lihat ketika mengakses sebuah blog atau website

ditentukan oleh theme (Sumber: http://linktok.blogspot.com/2010/12/theme-

adalah.html)

Langkah-langkah mengaktifkan theme



http://linktok.blogspot.com/2010/12/theme-adalah.htmlhttp://linktok.blogspot.com/2010/12/theme-adalah.htmlhttp://linktok.blogspot.com/2010/12/theme-adalah.htmlhttp://localhost/mgmptik/%20wp-login.phphttp://localhost/mgmptik/%20wp-login.phphttp://localhost/mgmptik/%20wp-login.phphttp://localhost/mgmptik/%20wp-login.phphttp://localhost/mgmptik/%20wp-login.phphttp://linktok.blogspot.com/2010/12/theme-adalah.htmlhttp://linktok.blogspot.com/2010/12/theme-adalah.html


34/43



4. Klik Apperance kemudian pilih dan klik theme yang diinginkan sesuai

dengan thema yang tersedia (Theme yang dipakai Twenty Twelve)


35/43


5. Kita dapat melihat theme yang kita pilih pada bagian review nya di sebelah

kanan, kalau sudah terasa mantap kitanggal mengklik Save and Activate

6. Selanjutnya theme yang kita pilih sudah aktif dan sudah bisa kita gunakan,

silakan cek hasilnya dengan mengetikkan url http://localhost/mgmptik/ pada



36/43


EDITING THEME SEDERHANA BAWAAN WORDPRESS

(Theme Twenty Twelve)

Langkah-langkah melakukan editing theme




anda


37/43



4. Klik Apperance, akan terlihat theme yang sedang kita gunakan di sebelah

kanan (Theme yang dipakai Twenty Twelve)

Dalam melakukan pengaturan theme ada beberapa bagian yang dapat diataur

sesuai dengan theme yang kita gunakan, setiap theme yang di gunakan kadang-

kadang mempunyai pengaturan yang berbeda, secara umum pengaturan theme

terdiri dari:

1) Customize

2) Widgets

3) Menus

4) Header

5) Backgroud

6) Editor


38/43


AKTIVASI THEME SECARA EXTERNAL

Selain theme yang telah di sedia oleh wordpress ada juga theme yang disedia olehpihak lain atau jasa pembuat theme, biasanya theme ini bisa di download di

internet secara gratis dan ada juga yang berbayar (premium).

Langkah-langkah mengaktifkan theme yang sudah di download





39/43



5. Klik Apperance, akan terlihat theme yang sedang kita gunakan di sebelah

kanan, selanjutnya klik Install Themes


40/43


6. Klik Upload

7. Klik Browse


41/43


8. Cari dan pilih theme yang akan di install dan klik Open (theme yang

digunakan adalah traction 1.0)

9. Klik Install Now dan tunggu proses installasi selesai


42/43


10. Klik Aktivate untuk mengaktifkan tempale yang baru (traction 1.0)

11. Template yang baru sudah aktif yang ditandai dengan tampilnya informasi

tentang thema yang aktif (informasi tentang theme Traction 1.0)


43/43


12. Selanjutnya cek website anda dengan mengetikan http://localhost/mgmptik/

pada navigation bar browser anda, dan nikmati tampilan theme website baru

anda

Documents

Modul Wordpress MGMP