MODUL PELATIHAN

Cara Mudah Membuat Website Dengan Wordpress

Oleh : Tim Divisi Programming TOSC
!e"ompo#
TIK Open Source Software
!eterampi"an
Tingkat Pemula
Tingkat Menengah
Tingkat Mahir
$enis Modu"
eferensi
Tutorial
!atihan
Pendu#ung
OSS " !inu#
Mo$ul
% &O!U' PELATIHAN
Des#rispi
Mo$ul pelatihan %Cara Mu$ah Mem&uat 'e&site Dengan 'or$press( ini $itu)ukan
&agi siapa sa)a *ang ingin mengetahui &agaimana cara mem&uat we&site secara
instant $engan menggunakan wor$press *ang &er&asis open source $an &e&as
&ia*a+ Pen*a)ian mo$ul ini menggunakan &ahasa In$onesia $engan materi *ang
$i&ahas meliputi:
Diharap#an dari pe"atihan ini partisipan (
,+ Memahami ke&utuhan untuk mem&angun se&uah we&site
-+ Dapat melakukan instalasi serta konfigurasi server we&
.+ Dapat melakukan instalasi serta konfigurasi wor$press
/+ Dapat menggunakan $ata&ase M*S0!
DA&TA) I'I
1OK2S P3!4TI546 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -
D41T4 ISI +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ .
P3K364!46 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ /
,+ Content Management S*stem++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++/
-+ 'or$press +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ /
.+ Server 'e&++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ /
/+ P5P +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ /
7+ M*S0!+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ /
I6ST4!4SI " P36829I46 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++7
,+ Proses Instalasi !4MP Server++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++7
-+ Pengu)ian !4MP Server+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++7
-+,+ 4pache++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 7
-+-+ P5P++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ :
-+.+ M*S0!++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ;
.+ Proses Instalasi 'or$Press ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++;
/+ Menggunakan 'or$Press++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++,,
/+,+ Mem&uat Post+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++,,
/+-+ Mem&uat Postingan <ergam&ar+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++,.
D41T4 P2ST4K4 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ,/
% PE)!ENALAN
1. Content Management System
Sistem mana)emen konten =Inggris: content management S*stem> $isingkat CMS?>
a$alah perangkat lunak *ang memungkinkan seseorang untuk menam&ahkan
$an@atau memanipulasi =mengu&ah? isi $ari suatu situs 'e&+
2. Wordpress
'or$Press ialah platform pener&itan pri&a$i *ang semantik> *ang &erfokus pa$a
estetika> stan$ar we&> $an kegunaan+ 'or$Press &ersifat gratis> namun $i sisi lain
)uga tak ternilai hargan*a+ Pen$ek kata> 'or$Press Alah *ang 4n$a perlukan ketika
ingin mem&angun se&uah &log atau se&uah situs we& *ang cantik+
'or$press mem&utuhkan server we& *ang terintegrasi $engan P5P serta
men$ukung $ata&ase M*S0!> $an> tentu sa)a> aplikasi we& &rowser+ Se$angkan
paket wor$press itu sen$iri> $apat $i$ownloa$ $ari we&site
http:@@www+wor$press+org@+
3. Server Web
Server we& $apat meru)uk &aik pa$a perangkat keras ataupun perangkat lunak
*ang men*e$iakan la*anan akses kepa$a pengguna melalui protokol komunikasi
5TTP atau 5TTPS atas &erkasB&erkas *ang ter$apat pa$a suatu situs we& $alam
la*anan ke pengguna $engan menggunakan aplikasi &rowser semisal MoCilla
1irefo# $an lai se&again*a+
ekomen$asi server we& *ang cocok untuk men)alankan wor$press a$alah
4pache+ 8unakan 4pache versi ,+.+#> atau apache-
4. PHP
P5P: 5*perte#t Preprocessor a$alah &ahasa skrip *ang $apat $itanamkan atau
$isisipkan ke $alam 5TM!+ P5P &an*ak $ipakai untuk memrogram situs we&
$inamis+ P5P $apat $igunakan untuk mem&angun se&uah CMS+
2ntuk menginstal worpress> 4n$a harus menggunakan versi P5P /+,+# atau versi
*ang le&ih tinggi =P5P 7?+ P5P $apat $i$ownloa$ $ari
http:@@www+php+net@$ownloa$s+php+ P5P versi awal $ari /+D+# ti$ak lagi $i$ukung+
5. MySQL
M*S0! a$alah se&uah perangkat lunak sistem mana)emen &asis $ata S0!
=&ahasa Inggris: $ata&ase management s*stem? atau D<MS *ang multithrea$>
multiBuser> $engan sekitar : )uta instalasi $i seluruh $unia+ M*S0! 4< mem&uat
M*S0! terse$ia se&agai perangkat lunak gratis $i&awah lisensi 862 8eneral
Pu&lic !icense =8P!?> tetapi mereka )uga men)ual $i&awah lisensi komersial untuk
kasusBkasus $imana penggunaann*a ti$ak cocok $engan penggunaan 8P!+
'or$press menggunakan sistem $ata&ase M*S0!+ Eersi .+-.+# atau le&ih tinggi
sangat $irekomen$asikan untuk $igunakan $engan wor$press+ M*S0! $apat
$i$ownloa$ $ari http:@@www+m*sFl+org@$ownloa$s@+
% IN'TALA'I * PEN+U$IAN
1. Proses Instalas L!MP Server
LAMP merupakan singkatan untuk men*e&utkan Linu,> Apa-he> M.'/L $an
PHP *ang merupakan lingkungan pengem&angan we& &er&asis open source>
$imana !inu# se&agai sistem operasi> 4pache se&agai we& server> M*S0!
se&agai sistem mana)emen $ata&ase relasional $an P5P =Preprocessor 5*per
Te#t? a$alah &ahasa pemrograman &erorientasi o&)ek+
<erikut merupakan cara instalasi paket !4MP:
,+ <ukat Terminal melalui menu: !ppl"atons # !""essores # $ermnal
-+ Ketik perintah $i&awah ini:
0 sudo apt1get insta"" "amp1ser2er3 php41gd php4
.+ Masukkan passwor$ &aru untuk user root M*S0!
2. Peng%&an L!MP Server
2.1. !pa"'e
!akukan pengu)ian server we& 4pache $engan menggunakan aplikasi &rowser
favorit 4n$a =1irefo#> Chrome> $ll? $engan mengetikkan http(55678%9%9%6 atau
http(55"o-a"host pa$a alamat &rowser *ang a$a+
Gambar 1: Pembuatan password root MySQL
2.2. PHP
2ntuk mengetahui &ahwa instalasi P5P &eserta mo$ul pen$ukungn*a telah
sukses terintegrasi $engan server we& 4pache> &uatlah satu halaman we&
melalui Terminal $engan cara se&agai &erikut:
,+ sudo e-ho :; phpin<o=> ;?@ ? 52ar5AAA5phpin<o%php
atau &isa )uga $engan menggunakan aplikasi teks e$itor 8e$it seperti pa$a
contoh &erikut:
sudo gedit 52ar5AAA5phpin<o%php
!alu tam&ahkan sintaks $i&awah ini:
:; phpin<o=>@ ;?
-+ 9alankan ulang service apache-
0 sudo ser2i-e apa-he7 restart
atau &isa )uga menggunakan perintah $i &awah ini:
0 sudo 5et-5init%d5apa-he7 restart
.+ <uka aplikasi &rowser semisal MoCilla 1irefo#> $an masukkan alamat
http(55678%9%9%65phpin<o%php atau http(55"o-a"host5phpin<o%php
Gambar 2: Pengujian server web Apache dengan browser Mozilla Firefox
Gambar 3: Pengujian dukungan modul PHP pada browser Mozilla Firefox
9ika pa$a )en$ela &rowser tampil halaman informasi seperti pa$a contoh
gam&ar $iatas> maka mo$ul P5P telah terintegrasi $engan server we&
4pache+
2.3. MySQL
2ntuk mengu)i $ata&ase M*S0! ketikkan perintah $i&awah ini pa$a Terminal:
0 m.sB" 1u root 1p
9ika tampil infomasi seperti contoh $i atas> &erarti 4n$a sukses men)alankan
M*S0!+ 2ntuk keluar $ari aplikasi $ata&ase M*S0! cukup ketik perintah %e(t(+
3. Proses Instalas WordPress
,+ Downloa$ versi 'or$Press ter&aru menggunakan perintah $i&awah ini
melalui Terminal@Console:
Aget http:@@wor$press+org@latest+tar+gC
-+ 3kstrak file $engan perintah ini:
tar 1,C2< "atest%tar%gC
.+ Kemu$ian &uatlah fol$er untuk 'or$Press $i $irektori @var@www seperti
pa$a contoh &erikut:
sudo m#dir 52ar5AAA5Aordpress
/+ Pin$ahkan semua file 'or$press ke fol$er *ang telah $i&uat ke $irektori
@var@www:
sudo -p 1r D5Aordpress5E 52ar5AAA5Aordpress
7+ Sekarang kita perlu mem&uat $ata&ase &aru pa$a M*S0! $engan hak
akses penuh $ata&ase+ 9alankan perintah seperti contoh $i &awah ini untuk
login ke server M*S0! =gunakan passwor$ *ang telah an$a &uat pa$a saat
instalasi !4MP?:
m.sB 1u root 1p
:+ <uatlah $ata&ase &aru pa$a M*S0! =ganti 'or$Press $engan nama lain
sesuai pilihan an$a?:
C)EATE DATAFA'E Aordpress@
9ika perintah ini &erhasil> output akan seperti ini:
Gambar 4: Menjalankan MySQL sebagai user root pada Terminal
m.sB"? C)EATE DATAFA'E WordPress@
/uer. O!G 6 roA a<<e-ted =9%96 se->
;+ Kemu$ian tam&ahkan user &aru pa$a M*S0! $engan perintah &erikut
=ganti (%sername( $engan nama lain sesuai pilihan an$a?:
C)EATE U'E) username@
G+ <uatlah san$i *ang kuat untuk user &aru terse&ut =ganti passwor$ (rahasia%
$engan passwor$ 4n$a sen$iri?:
'ET PA''WO)D &O) HusernameH I PA''WO)D=HrahasiaH>@
H+ Mem&uat 8rant user all privileges pa$a $ata&ase *ang &aru $i &uat+
+)ANT ALL P)IJILE+E' ON Wordpress%E TO HusernameH
IDENTI&IED FK HrahasiaH@
B'or$Press I 8anti $engan nama $ata&ase M*S0! *ang an$a &uat+
B2sername I 8anti $engan nama pengguna *ang an$a &uat+
Bahasia I 8anti $engan passwor$ *ang an$a gunakan untuk M*S0!+
Kemu$ian )alankan perintah %e,it( untuk keluar $ari $ata&ase M*S0!+
,D+ <uka aplikasi &rowser semisal MoCilla 1irefo#> $an masukkan alamat
http(55678%9%9%65Aordpress atau http(55"o-a"host5Aordpress
,,+ Sekarang isikan $alam &entuk we& &erikut> kemu$ian klik Install
'or$Press:
BSite Title I 9u$ul we&site
B2sername I username untuk a$min we&
BPasswor$ I passwor$ untuk a$min we&
BJour 3Bmail I alamat email 4n$a
Gambar 5: Mengakses WordPress melalui browser
,-+ Sekarang !ogin ke &agian a$min menggunakan passwor$ *ang an$a pilih
untuk memulai mengelola we& 4n$a:
Gambar 6: Mengisi informasi web yang dibuat
Gambar 7: Login ke halaman admin
,.+ SelamatK 'or$Press &erhasil $iinstal+
'e& 4n$a &isa $i akses melalui link:
http:@@localhost@wor$press@ atau http:@@,-;+D+D+,@wor$press
Se$angkan untuk &agian a$min $apat melalui link:
http://localhost/wordpress/wp-admin atau http://127.0.0.1/wordpress
Gambar 8: Halaman admin pada WordPress
4. Mengg%na)an WordPress
4.1. Memb%at Post
,+ Masuk $i a$min wor$press> klik menu Posts # !dd *e+
-+ Mengisi form post
L Masukkan )u$ul post
L Masukkan isi post
.+ Pilih kategori post> kategori &isa le&ih $ari satu+ 9ika kategori &elum a$a
tam&ah kategori &aru $i&agian !dd *e+ Category lalu klik !dd *e+
Category+
Gambar 9: Menu Post -> Add New
Gambar 10: Editor Post
Judul post
Isi post
/+ Masukkan tag@ke*wor$ *ang &erhu&ungan $engan isi artikel+ Tag &isa
le&ih $ari satu $i&atasi $engan koma =contoh: tosc> komuni$a$e open
source? lalu klik !dd.
7+ Kemu$ian klik P%bls' untuk memposting artikel
Gambar 11: Form kategori post
Tambah kategori baru disini
Gambar 12: Form tags
Tambah tag baru disini
Gambar 13: Option Publish
4.2. Memb%at Postngan ,ergambar
,+ <uat postingan &aru> masukkan )u$ul
-+ Klik icon !dd Meda pa$a -pload.Insert
.+ Klik tom&ol Sele"t /les> lalu &rowse file gam&ar *ang akan $igunakan
/+ Setelah gam&ar selesai $iuploa$> pilih posisi alignment agar postingan
le&ih rapi+ Setelah itu klik Insert Into Post
7+ 8am&ar *ang telah $iuploa$ telah masuk $i e$itor postingan> 4n$a
tinggal melan)utkan mengetik isi postingann*a sa)a+
Gambar 14: Icon Add Media
Klik icon ini
Gambar 15: Menu Add Media
Gambar 16: Editor postingan berisi gambar
% DA&TA) PU'TA!A
,+ http:@@www+wikipe$ia+org
-+ http:@@www+wor$press+com
.+ http:@@www+apache+org
/+ http:@@www+php+net
7+ http:@@www+m*sFl+org
:+ http:@@www+linu#mint+com
;+ http:@@avancalinu#+&logspot+com@-D,,@,,@caraBmu$ahBinstalasiBlampBlinu#B
apache+html
G+ http:@@musaamin+we&+i$