Modul Pelatihan Pengembangan Website

M C D DL PEL A TIH A B D A B
PEB G EM B A B G A B W EB SITE
Dniversitas Pad jad jaran

Direk
torat P erencanaanDanS istem Informasi
2016

1

P engenalanW eb site
1. DefinisiW eb site
S eb uah web site,ataudik
enalj
uga dengansitus web ,adalah sek
umpulanhalamanweb y
ang
ditampilk
andalam seb uah domain.W eb site disimpandi dalam serv
er hosting y
ang dapat

diak
ses l
ewat j
aringanseperti j
aringanInternet ataul
ewat j
aringanarea l
ok
allewat alamat
Internet y
ang j
uga dik
enaldengannama U niform Resource L ocator (
U RL )
.W eb site y
ang dapat
diak
ses terseb ut secarak
olek
tifdiseb ut W orl

d W ide W eb (
W W W )
.
H alamanweb merupak
andok
umenb erisi tek
sy
ang ditul
is (
pal
ing sederhana)dalam format
Hy
per Tex
t M ark
upL anguage (
H TM L )
.
H alamanweb dapat memanggilelemenel
emenlainy
ang

b iasaditampilk
andalam seb uahweb ,sepertielemengamb ar,v
ideo,danseb againy
a.
2. B agaimanaS eb uahW eb site Dapat Diak
ses
W eb site diak
ses mel
aluiH y
per Tex
t Transfer P rotocol(
H TTP )ataumel
aluiH TTP S ecure (
H TTP S )
y
ang merupak
an j
alur terenk
ripsi untuk memb erik
an k

eamanan dan priv
asi b agi k
onten
web site.P eramb an(
b rowser)adal
ahalat y
ang digunak
anpengguna untukmengak
ses halaman
web y
ang disimpandiserv
er hosting.
Ketik
a pengguna mengak
ses internet melal
ui b rowser,b rowser terseb ut ak
anmengirimk
an
seb uah H TTP request.Request terseb ut terhub ung k
e web serv

er melal
ui Internet S erv
ice
P rov
ider (
j
asa peny
ediaanak
ses internet)
.B eb erapa IS P y
ang dik
enaldiIndonesia diantarany
a
adalah
Tel
k
om
S peedy
,
Telk

omsel
,
Indosat,
dan
l
ainl
ain.

B erb edadenganmengak
ses l
aman,untukmengak
ses fil
ey
ang terdapat diweb serv
er,protok
ol
y
ang digunak
anadalahFil
e Transfer P rotocol(

FTP )
.
3. J
enis W eb site
A . S tatis
W eb site statis merupak
anweb site y
ang halamanny
a harus diedit secara manualuntuk
proses perub ahank
onten.B iasany
alamanweb statis menggunak
anformat H TM L .W eb site
2

statis memb erik
aninformasi y
ang sama k
epada semua pengunj
ung web .S ama hal

ny
a
seperti b rosur ataupamflet,web site statis memb erik
aninformasi y
ang k
onsistendan
standar untukperiode y
ang l
ama
B . Dinamis
W eb site dinamis adalah web site y
ang secara spesifikdirancang agar k
ontendanlaman
y
ang terdapat dalam web site terseb ut dapat diperb arui atau diub ah secara b erk
ala,
mudah,danotomatis.
Format lamanweb dinamis ditul
is dal
am b ahasa sk

rip,diantarany
a adal
ah P H P ,A S P ,dan
lainy
a.S el
ainitu,k
ontenweb site tidakdisimpanlangsung di lamanweb ny
a,ak
antetapi
disimpandi seb uah serv
er b asis data (
datab ase)
.Data terseb ut ditampik
andal
am l
aman
web dinamis denganmenggunak
anb ahasask
rip.
4. KapanW eb site H arus Digunak

an
Dij
amantek
nol
ogiinformasisepertisek
arang,distrib usiinformasimerupak
anhaly
ang sangat
penting b agik
eb erlangsunganseb uahlemb aga.J
ik
alemb agaA nda b erhub ungandenganpub lik
dansangat penting b agil
emb aga terseb ut untukmemb eriinformasisecara l
angsung,mak
a di
saat itulahweb site perludigunak
an.
Karena informasimemil
ik

ib erb agai macam b entukdank
apasitas,mak
a penggunaanweb site
harus sesuai dengan tuj
uanny
a terleb ih dahul
u.Target pengunj
ung pun penting seb agai
pertimb anganak
andib uat sepertiapaweb site terseb ut.
5. Tuj
uanP engadaanW eb site
H aly
ang perluditentuk
anseb elum k
el
angk
ahpemb angunanweb site adalahtuj
uany
ang j
elas
untukapaweb site itudib uat.
Karenak
eb eragamanfungsiweb site,mak
asetiaptuj
uanpastiada
tek
nikpemb uatany
ang b erb eda,walaupunpada k
eny
ataany
a b isa saj
a pemb uatanweb site
memil
ik
ib eb erapatuj
uan.
A . C ompanyP rofile
Ketik
a seb uahinstitusiingindiperk
enal
k
ank
epada pub l
ik
,mak
aj
enis web site y
ang pal
ing
tepat adal
ah pemb uatan web site company profile.W eb site company profil
e b erisi
informasi meny
eluruh tentang institusi terseb ut,mulaidari sej
arah lemb aga,k
ontak
,v
isi
danmisi,identitas,serta struk
tur institusi.Keb any
ak
anlamandari web site ini b erj
enis
lamanstatis.

3

B . P ortalB erita
W eb site y
ang b ertuj
uanseb agai portalb erita b iasany
a memil
ik
i sirk
ul
asi k
onteny
ang
sangat dinamis.Di laman depan web site ini l
angsung terl
ihat k
umpul
an b erita y
ang
terk
ategorik
andanmenunav
igasi,sehingga memudahk
anpengunj
ung untukmenentuk
an
k
onteny
ang merek
acari.

4

5

C . C ommerce
W eb site ecommerce b ertuj
uanuntukk
epentingank
omersialsepertimenj
ualproduk
,b aik
produkhardware maupunsoftware.C iri paling j
elas web terseb ut adalah adany
a galeri
produky
ang ak
andij
ualserta proses pemb ay
arany
ang dapat langsung diproses secara
onl
ine.

D. B log
W eb log ataub iasa diseb ut b log merupak
anweb site y
ang b erisitul
isan(
b iasany
ab erb entuk
tul
isannaratif)y
ang disusunsecara k
ronol
ogis diurutk
andariartik
ely
ang pal
ing b aru.B log
b iasany
a leb ih b ersifat prib adi y
ang diisi oleh seseorang.Karena k
ontenutama dari b log
adalahtul
isannaratifterseb ut,b iasany
alamandepanb log l
angsung b erisik
ontenterseb ut,
dilengk
apidengansideb ar y
ang b erisiarsiptul
isan.

6

E. A plik
asib erb asis web
W eb site y
ang b erupa apl
ik
asiadalahweb site y
ang b ertuj
uank
husus untukmengolahdata
atauk
eb utuhanspesifikl
ainny
a.C ontoh dari apl
ik
asi b erb asis web adalah lay
ananemail
b erb asis web ,l
ay
anank
emahasiswaan,ataul
ay
ananregistrasi.

7

8

P engemb anganW eb site
1. H osting
A . L ocalH osting
S eb el
um web dipub l
ik
asik
an k
e l
uar,seb aik
ny
a dalam tahap awal web y
ang sedang
dik
emb angk
antidakdisimpandi serv
er y
ang tersamb ung k
e internet.M ak
a,sol
usiny
a
adalah memb uat k
omputer prib adi k
ita seb agai serv
er l
ok
al.U ntukdapat memb uat
k
omputer menj
adiseb uahserv
er l
ok
aldib utuhk
anaplik
asisepertiXA M P P (
untukW indows)
atauM A M P (
untukM ac)
.
S etelahproses instalasiXA M P P ,j
alank
anduaserv
ice y
ang diperluk
anseb uahweb site,y
aitu
serv
ice A pache danM y
S Q L .A pache merupak
anapl
ik
asiy
ang b erj
alansecara b ack
ground
(
ataudiseb ut j
uga serv
ice)di dalam sistem operasi seb agai serv
er untukk
eperluanl
ocal
hosting,sedangk
anM y
S Q L adalahserv
ice y
ang b erj
alanuntukk
eperluandatab ase.

L ok
asifolder hosting ada difol
der b ernama ‘
htdocs’
,atausecara settinganinstalasidefaul
t
adadic:
\
x
ampp\
htdocs.
Difolder itulahk
itaak
anmeny
impanfil
e web .
B . W eb H osting
J
ik
a web y
ang b erada dil
ocalhosting sudahsiapdipub lik
asik
ank
e internet,fil
e web y
ang
ada difol
der ‘
htdocs’dapat diunggahk
e web hosting.W eb hosting memanfaatk
anseb uah
serv
er y
ang dapat diak
ses olehseluruhdunia l
ewat Internet.U ntukdapat mengak
ses web

9

hosting,pengguna harus memilik
iak
ses C P anel(
lamank
onfigurasiserv
er)
,ak
ses FTP ,dan
ak
ses datab ase.
U ntukdapat mengak
ses web hosting,perluapl
ik
asiFTP cl
ient.
FTP cl
ient y
ang pal
ing umum
dipak
aiadalahFileZill
a.

U ntukmenamb ahk
ansitus y
ang dik
el
ola,pertamatama tuj
umenuFile >Site M anager.
S etelahitu,pilihNewS ite k
arena k
ita ak
anmemb uat situs b aru.Isik
anhost,username dan
password FTP ,k
emudianpil
ih C onnect.A pab ila semua data terseb ut diisidenganb enar,
mak
aA ndaak
anb erhasilmasukk
e web serv
er.
Terdapat dua windows didalam tampil
anutama FileZilla,y
ang pertama y
aituL ocalsite di
seb elahk
iridanRemote site diseb elahk
anan.W indowL ocalsite menampilk
andata y
ang
terdapat di k
omputer y
ang sedang digunak
an, sedangk
an window Remote site
menampil
k
andata y
ang ada pada serv
er y
ang sedang terk
onek
si.U ntukmemindahk
anfil
e
dariL ocalsite k
e Remote site,secarasederhanacuk
updrag and dropsaj
a.
2. Datab ase
Datab ase atau b asis data merupak
an k
umpul
an data y
ang terstruk
tur dan b errel
asi y
ang
disimpandidalam seb uahk
omputer atauserv
er.Dalam pemb angunanweb site y
ang dinamis,
tidak cuk
up hany
a memanfaatk
an laman web b ertipe H TM L saj
a.Diperl
uk
an adany
a
implementasi datab ase untukmeny
impan data y
ang ak
an diak
ses oleh l
aman web .Data

10

terseb ut b isa b erb agaimacam,namunk
eb any
ak
andata y
ang disimpandidatab ase merupak
an
datab erb entukstring/
tek
s.
U ntukmemb uat datab ase didalam seb uahhosting,b iasany
aserv
er hosting telahmeny
ediak
an
apl
ik
asi untukmengel
ola datab ase b ernama P H P M y
A dmin.A plik
asi terseb ut b isa diak
ses di
http:
/
/
[
y
ourdomain]
/
phpmy
admin.

3. ElemenDasar W eb
A . H eader
H eader didalam l
amanweb site seb enarny
a meruj
ukk
epadaduahaly
ang b erb eda.
H eader
y
ang pertama adal
ahheader lamanweb site (
user interface)dany
ang k
edua adalahheader
dok
umenweb .
H eader lamanweb site merupak
anb agianpal
ing atas seb uahlamanweb y
ang b erisij
udul
web site,logo,dannav
igasi.Dalam seb uahweb site,secara statis header sel
al
uada ditiap
lamanny
a.

11

J
ik
adil
ihat darik
ode H TM L ny
a,b eb erapametadataterl
etakdidalamb agianheader
dok
umen<
H EA D>,y
aitu
a. <
titl
e>J
udull
aman
b. <
metaname=
”
description”
>Rangk
umantentang isidok
umen
c. <
metaname=
”
k
ey
word”
>Katak
unciy
ang adadalamdok
umen
d. <
metacharset=
”
U TF8
”
>C haracter Encoding Standard atauC haracter Set
e. <
linkrel=
”
sty
lesheet>A l
amat dok
umensty
lesheet (
C SS )
f. <
metaname=
”
v
iewport”
>M engecekuk
uranl
ay
ar y
ang digunak
an
B . C ontent S ection
C ontent sectionmenampung isi utama dari lamany
ang dib uk
a.M isal
ny
a,j
ik
a di l
aman
awal(
index
)seb uah web site,content sectionak
anb erisi daftar artik
ely
ang tersedia di
web site terseb ut.A k
antetapi,b ila l
amanartik
el
/
post y
ang dib uk
a,content sectionak
an
menampil
k
anisi dariseb uah artik
el
.P ada umumny
a,content sectionb erisi j
udulartik
el
,
tanggalpub l
ik
asiartik
el,penul
is artik
el
,isiartik
el
,k
ategori,dank
atak
unci.

12

C . S ideb ar
S ideb ar adalah k
ol
om sek
under y
ang ada di laman web sel
ain k
olom k
onten utama.
B iasany
a posisisideb ar ada disamping content section.Dalam seb uahl
amanweb ,sideb ar
b isa b erada satuhingga dua,b isa dik
edua sisiatausalah satusisi.Didalam sideb ar k
ita
b isamel
ihat menunav
igasiataufitur l
ainsepertitautan,artik
elterb aru,atautek
s b iasa.

13

D. Footer
Footer adalah b agianak
hir dari l
amanweb danterl
etakdi paling b awah.S ama hal
ny
a
seperti header,footer b ersifat statis;setiaplamanmemil
ik
i footer y
ang sama.H al
hal
umum y
ang adadidalam footer adalahk
eteranganhakciptadanalamat organisasi.

4. B ahasaP emrogramanW eb
A .H y
per Tex
t M arkupL anguage (
H TM L )
H TM L adalahseb uahb ahasa mark
upstandar y
ang digunak
anuntukmemb uat lamanweb .
H TM L b erisi elemenelemeny
ang b erb entuktags ditutupi oleh tanda k
urung sik
usik
u.
U mumny
a tag terseb ut b erpasangan,seperti<
h1>dan
,namunada j
uga y
ang tidak
b erpasangan,seperti
.
S truk
tur standar seb uahl
amanweb dapat dij
ab ark
ansepertidib awahini:
<
html
>


J
udulL aman<
/
title>


H eading 1<
/
h1>
P aragraf<
/
p>

<
/
html>

14

H ingga k
ini,perk
emb anganH TM L sudah mencapai H TM L 5
.B eb erapa fitur penting y
ang
terdapat dal
amH TM L 5adal
ahadany
aduk
unganuntukpemutar v
ideodanaudio.
B .PH P
P H P merupak
anb ahasa pemrogramanserv
erside y
ang digunak
anuntukpengemb angan
apl
ik
asi web .P H P b iasany
a digunak
anb ersamasama denganH TM L .U ntukmenj
alank
an
P H P ,seb uahserv
er harus dipasang seb uahP H P Interpreter.
C ontohsk
ripP H P :
<
html
>
<
head>
<
title>
P H P Test<
/
titl
e>
<
/
head>
<
b ody
>
<
?phpecho'

H elloW orl
d
'
;
?>
<
/
b ody
>
<
/
html
>
C. J
av
ascript
J
av
ascript merupak
an b ahasa pemrograman cl
ientside y
ang diproses di peramb an.
J
av
ascript dapat b erinterak
si langsung dengan pengguna,mengendal
ik
an peramb an,
hinggamengub ahdok
umeny
ang tampildiperamb an.
C ontohJ
av
ascript:
<
script ty
pe=
"
tex
t/
j
av
ascript"
>
al
ert(
"
H el
loW orld!"
)
;
<
/
script>
5. P erlengk
apanuntukP emb uatanW eb site
P erlengk
apanesensialuntukmemb uat seb uah web site seb enarny
a cuk
up editor tek
s dan
pengolah grafis.Namundalam perk
emb anganny
a,b eb erapa aplik
asi dil
engk
api denganfitur

15

tamb ahan,seperti fitur untuk mel
ihat hasil coding seperti y
ang ada di dalam apl
ik
asi
Dreamweav
er.
B eb erapaeditor tek
sy
ang umumdigunak
andiantarany
a:
g. S ub l
ime Tex
t
h. Notepad++
i. P H P Edit
S edangk
anpengolahgrafis y
ang umum digunak
andiantarany
a:
a. A dob e P hotoshop
b . A dob e Il
lustrator
c. C orelDraw
d. GIM P
6. P emilihanC M S
C ontent M anagement S y
stem atauy
ang b iasa disingk
at C M S adalah program web site y
ang
menginj
ink
anpengguna untukmempub l
ik
asik
an,mengedit danmemodifik
asicontent web site
dandapat mengatur maintenance dari pusat antar muk
a seb uah web site.B iasany
a C M S ini
digunak
andal
amtipe content web site portal
,b l
og,shop,danj
enis tipe content l
ainny
a.
A da b any
akC M S script y
ang digunak
andal
am memb uat suatuweb site.Namundal
am memil
ih
seb uahC M S terdapat b eb erapahaly
ang harus diperhatik
anseperti:
A pak
ahC M S y
ang ak
andigunak
ansesuaidengank
eb utuhan
A pa y
ang A nda harapk
an dari web site y
ang A nda b uat? H any
a untukmenulis saj
a atau
dib utuhk
anpula k
olom widget y
ang b eragam.A pak
ahC M S terseb ut cocokuntuknews portal
,
bl
ogging,atauonl
ine shopping.
A pak
ahweb hosting y
ang ak
andigunak
anmenduk
ung C M S terseb ut
P erludiperhatik
anapak
ah web hosting y
ang A nda gunak
anmenduk
ung datab ase M y
SQ L?
A pak
ah v
ersi P H P y
ang digunak
anmemenuhi C M S script y
ang A nda gunak
an? A pak
ah GdL ib rarymenduk
ung image manipulation,danl
ainlain.
A pak
ahC M S y
ang ak
andigunak
ansesuaidengank
onek
siinternet A nda
J
ik
a A nda menggunak
anC M S y
ang memil
ik
ib any
akfasilitas (
menggunak
anA j
axsehingga leb ih
miripdenganaplik
asi desk
top)sehingga wak
tul
oadingny
al
ama.P erl
udiperhatik
anapak
ah
k
onek
siinternet A ndamampumengak
ses web site terseb ut secaramak
simal
.
16

A pak
ahC M S y
ang ak
andigunak
anmenduk
ung S EF (
S earchEngine Friendly
)
S EF inisangat dib utuhk
anagar situs pencariansepertigoogle mengindek
s web site A nda.
A pak
ahC M S y
ang ak
andigunak
anmenduk
ung RS S (
RichS ite S ummary
)
S aat iniRSS sudah menj
adimenuwaj
ib ,tidakhany
a dik
alanganweb site populer tapij
uga di
k
alanganweb site b log.U mumny
a RS S digunak
ansecara luas untukmeny
eb ar ringk
asantul
isan
terb aru,k
adangk
adang j
ugameny
ertak
anartik
ell
engk
apdanb ahk
angamb ar dansuara.
A pak
ahC M S y
ang ak
andigunak
anmenduk
ung pemb agiank
ategori
A gar pengunj
ung web site A nda mudahmemb aca isiweb site y
ang A nda b uat,l
eb ihmudahj
ik
a
memb acatulisany
ang dik
ategorik
andenganb aikdaripadatercamput menj
adisatu.
A pak
ahC M S y
ang ak
andigunak
anmenduk
ung sitemapdanGoogle sitemap
S itemapseb enarny
a mempermudah pengunj
ung untukmenel
usuriweb site A nda,ak
antetapi
sitemapinij
uga mempermudahgoogle b ot dalam mengindek
s web site A nda.A pab ila C M S k
ita
menduk
ung Googl
e sitemap,mak
ahalterseb ut ak
ansangat memb antu.
B erik
ut rev
iewdarib eb erapa C M S y
ang sangat populer digunak
ansepertiW ordpress,J
ooml
a,
danDrupal
.

17

a. W ordpress
 W eb site:
http:
/
/
www.
wordpress.
org
 P opularitas:
14
0j
utapengguna
 B iay
a:
Gratis
 Temagratis y
ang tersedia:
2.
000+
 P lugingratis y
ang tersedia:27.
000+
 One clickinstal
lationav
ail
ib il
ity
:
Ya
 SEF:Ya
 W ak
tuy
ang dib utuhk
anuntukinstalasimanual:
5menit
 C ocokdigunak
anuntuk
:b l
ogs,corporate web sites,small
medium sized web sites
 W eb site populer y
ang menggunak
anW ordpress:forb es,C NN,S ony
b. J
oomla
 W eb site:
http:
/
/
www.
j
ooml
a.
org
 P opularitas:
30j
utapengguna
 B iay
a:
Gratis
 Temagratis y
ang tersedia:
900+
 P lugingratis y
ang tersedia:7.
000+
 One clickinstal
lationav
ail
ib il
ity
:
Ya
 SEF:Ya
 W ak
tuy
ang dib utuhk
anuntukinstalasimanual:
10menit
 C ocokdigunak
anuntuk
:ecommerce,socialnetworksites
 W eb site populer y
ang menggunak
anJ
oomla:
H arv
ard U niv
ersity
,The H il
l
c. Drupal
 W eb site:
http:
/
/
www.
drupal.
org
 P opularitas:
15j
utapengguna
 B iay
a:
Gratis
 Temagratis y
ang tersedia:
1.
800+
 P lugingratis y
ang tersedia:24.
000+
 One clickinstal
lationav
ail
ib il
ity
:
Ya
 SEF:Ya
 W ak
tuy
ang dib utuhk
anuntukinstalasimanual:
10menit
 C ocokdigunak
anuntuk
:one size fits al
l
 web site populer y
ang menggunak
anDrupal
:L inux
,The W hite H ouse W ashington,
W arner B ros

18

7. InstalasiW ordP ress
B erik
ut adalahl
angk
ahlangk
ahuntukinstalasiW ordP ress diweb hosting
1. U nduhfil
e instalasiW ordP ress terb arudihttp:
/
/
wordpress.
org.
2. Ek
strakfile zipy
ang telahdiunduh.
3. U nggahfil
ey
ang telahdiek
strakk
e web hosting.
a. J
ik
aA ndainginW ordP ress dipasang diroot domain(
misalny
ahttp:
/
/
y
ourdomain.
com)
,
mak
aupload k
e direk
toriroot web hosting.
b. J
ik
a A nda ingin W ordP ress dipasang di direk
tori lain (
misal
ny
a
http:
/
/
y
ourdomain.
com/
b log)
,mak
aupl
oad k
e direk
tori‘
b log’
terseb ut.
4. B uat datab ase untukk
eperluanweb melalui P H P M y
A dmin.Dalam contoh ini misalny
a
nama datab ase y
ang k
ita b uat adal
ah‘
b asisdata_cms’
dengannamauser ‘
web userdb 1’
dan
password ‘
web passdb 1’
5. U ntukmenj
al
ank
aninstalasiW ordP ress,ak
ses U RL web ny
a menggunak
anperamb an.U RL
terseb ut adalah U RL tempat A nda mengunggah fil
e W ordP ress.J
ik
a b erhasil
,seharusny
a
web menampil
k
antampilansepertiini:

P ilihb ahasay
ang ak
andipak
aik
emudiantek
an‘
C ontinue’

19

6. Isik
eterangank
onek
sidatab ase sesuaidengany
ang telahdib uat.

7. A pab ilab erhasilterk
onek
sidengandatab ase,mak
aak
ank
el
uar tampil
ansepertiini:

2
0

8. Isik
eteranganumumweb site,k
emudian‘
Instal
lW ordP ress’

9. S etelahproses instal
asisel
esai,loginmenggunak
anak
uny
ang tadididaftark
an.

2
1

P engelolaandanP erawatanW eb site
Tahapb erik
ut setel
ahpemb uatanadalahpengelol
aandanperawatanweb site.
P erl
udik
etahui
b ahwapengel
olaandanperawatanmerupak
anproses pal
ing sul
it danpal
ing panj
ang,k
arena
mel
ib atk
anb any
akorang dank
emampuan.
1. M anaj
emenKonten
Dal
amseb uahweb site,apalagiseb uahportalb erita,perluadany
amanaj
emenk
onteny
ang
b aik
.
Tuj
uandarimanaj
ementerseb ut adal
ahagar k
ontenmudahdicaridenganmenggunak
an
perangk
at nav
igasiweb site danterstruk
tur denganrapi.
A . P enentuanP enggunaanP ost danP age
Dalam W ordP ress,k
ontendapat dib agik
e dalam dua b entuk
:P ost danP age.P ost adal
ah
k
onteny
ang b ersifat dinamis danselaludiperb aruidengancepat,misal
ny
ak
ontenb erita.
P ost b ersifat k
ronol
ogis (
terik
at denganwak
tu)k
arenasifat k
eterb aruanny
a.
S edangk
anP age adalah k
onteny
ang tidakterik
at ol
eh wak
tu,mak
a diseb ut j
uga k
onten
statis.P age tidakmemilik
ik
ategoriataupuntag.Namun,P age dapat memil
ik
isub page.
B erik
ut adalahcontohstruk
tur l
amanweb :

B . Kategorisasi
U ntukmengelola k
ontent P ost,gunak
anlah sistem k
ategori.Kategorisasi b erguna untuk
mengelompok
k
anb eb erapa P ost ataumemb eri tahutentang apa P ost terseb ut k
epada
pemb aca.P ost dapat dimasuk
k
an k
e dal
am seb uah (
atau b eb erapa)k
ategori dan
sub k
ategori.
Daftar k
ategoridapat dil
etak
k
andimenunav
igasidansideb ar.

2
2

C . Tag
Tag adal
ahk
ata k
unciy
ang ada didalam k
onten.P enggunaantag miripfungsik
ata k
unci
y
ang ada dalam ab strakk
ary
a tul
is.Tag b erfungsi agar pencariank
ontenb erb asis k
ata
k
uncil
eb ihmudahdigunak
an.Tag punb ersifat S EO friendl
y
,y
ang b erartik
ata k
unciy
ang
adadiartik
elak
anmenj
adik
atak
unciy
ang digunak
anolehmesinpencarij
uga.
2. M anaj
emenP engelola
P engel
olaanweb site memb utuhk
anb eb erapa orang y
ang terb agi dal
am minimaltiga posisi
utama,y
aituW eb Designer,A dministrator,danC ontent Editor.






W eb Designer b ertugas untukmerancang v
isual
isasiweb site danb iasany
a merangk
ap
seb agaidesainer grafis untukk
onten.
A dministrator b ertugas untukmengurus hosting dank
eperl
uanadministrasiweb seperti
penamb ahanuser danpenamb ahanfitur.
C ontent Editor b ertugas untukmengel
olak
onten.

Didalam situs y
ang memil
ik
isirk
ulasik
onteny
ang sangat dinamis,tugas C ontent Editor terb agi
l
agik
e dalamb eb erapab agian,y
aitu:
a. Editor:seseorang y
ang b erwenang untukmempub l
ik
asik
andanmengatur artik
el
artik
el
termasukartik
ely
ang ditul
is ol
ehuser lain.
b .A uthor:seseorang y
ang dapat mempub l
ik
asik
andanmengatur artik
ely
ang dia tul
is
sendiri.
c. C ontrib utor:seseorang y
ang dapat menulis danmengatur tul
isanny
a sendiri namun
tidaksampaimempub l
ik
asik
anny
a(
hany
asampaitahapdraft)
.
L ev
el
l
ev
elpengel
ola A dministrator dan C ontent Editor dapat diatur di dalam W ordP ress
denganmengak
ses Dashb oard >U sers.
2
3

3. P lugin
Pl
uginmerupak
anapl
ik
asitamb ahany
ang dapat dipasangk
andiW ordP ress.Keb any
ak
anplugin
dik
emb angk
anolehpengemb ang thirdparty
.A lasanmengapa diperluk
anpl
uginadalahk
arena
fitur awaly
ang disediak
anolehW ordP ress tidakmencuk
upik
eb utuhandanpermintaanuser.
B erik
ut adal
ahb eb erapapluginesensialy
ang b iasany
adiperl
uk
andalamseb uahweb site.
A . S tatistikS itus
S eb uahweb site memb utuhk
anstatistiksitus untukmemb erik
anlaporantentang seb erapa
b any
akweb site.U mumny
a pluginstatistikj
uga memb erik
anl
aporantentang artik
elmana
saj
ay
ang pal
ing b any
akdik
unj
ungi,b erapa pengunj
ung perhari,perb ulan,ataupertahun.
Pl
uginy
ang sering digunak
anadalah J
etP ackdanS ite S tats.Google A nal
y
tics pundapat
digunak
an,namunb uk
anseb agaipl
uginW ordP ress.
B . Keamanan
S eb agai C M S y
ang pal
ing b any
akdigunak
andi seluruh dunia,W ordP ress sangat rentan
dengan serangan hack
er dan spam.B eb erapa metode y
ang dapat digunak
an seb agai
langk
ahpengamananadalah mematik
anform k
omentar (
apab ila seb enarny
a tidakterl
alu
diperl
uk
an)
.S elainitu,dapat j
uga menggunak
anC A P TC H A untukmengecekapak
ah y
ang
memb erik
omentar ituseseorang atauseb uahb ot.A lternatifl
ainny
a adalahmenggunak
an
sistem k
omentar y
ang disediak
anolehpihakthirdpartysepertiDisqus y
ang ak
andij
elask
an
dib agianselanj
utny
a.
S eranganlazim y
ang sering terj
adiselainspam adalahscript inj
ection.
C el
ahscript inj
ection
terb uk
a sal
ahsatuny
ak
arena penggunaantempl
ate ataupluginb aj
ak
anatauy
ang out of
date.U ntukmengecekapak
ah seb uah web site terk
ena script inj
ection,gunak
anpl
ugin
W ordfence y
ang dapat memindaisetiapfil
ey
ang adadiweb .
4. Tema
V isual
isasidariapay
ang k
ital
ihat didalam lamandepanweb k
itadihasil
k
andaritemay
ang k
ita
terapk
an di dalam W ordP ress.Tema W ordP ress mengatur tampilan antarmuk
a,l
ay
out,
sek
aligus fitur apa y
ang dapat digunak
an,k
arena seb agiantema memil
ik
ifitur y
ang tertempel.
B eb erapahaly
ang perl
udipertimb angk
andalam pemilihantemaak
andij
elask
andib awahini.
A . W arna
W arna sangat b erhub ungandenganidentitas y
ang direpresentasik
anl
ewat web .B eb erapa
aspeky
ang perl
udiperhatik
ansaat pemil
ihanwarnaadalah:

2
4







C omplementation:b agaimana k
ecocok
anantara tiapsatuwarna denganwarna y
ang
l
ain
C ontrast:tingk
at k
ontras (
perb edaanwarna)y
ang tepat ak
anmemb antuk
emudahan
memb aca(
readab ility
)
,terutamaperb edaanwarnalatar b elak
ang dengantek
s.
V ib rancy
:Tingk
at k
ecerahandank
ek
uataanwarna b erpengaruhk
epada rasa apa y
ang
inginditawark
ank
etik
a memb uk
a lamanweb .W arna cerahdank
ontras menunj
uk
k
an
semangat danb iasany
a digunak
andi dalam web site y
ang memuat b erita tentang
remaj
a.S edangk
an warnawarna y
ang k
urang k
ontras b iasa digunak
an oleh web
k
orporat.

B eb erapa industrimeny
ediak
ansk
ema warna y
ang telahdb uat olehpara desainer,antara
lainl
ay
ananA dob e Kuler danC olourl
ov
ers.
com.
B . L ay
out
L ay
out standar seb uahweb b erisiheader,content section,siderb ar,danfooter.B eb erapa
aspeky
ang perl
udiperhatik
andalam memil
ihlay
out adal
ah:


B erapa k
ol
om y
ang dib utuh,apak
ah dua k
olom (
contentsideb ar)atautiga k
olom
(
sideb arcontentsideb ar)ataub uk
andiantarany
a.
 L ay
out y
ang memil
ik
ileb ar mengik
util
ay
ar (
fl
uid)atauy
ang memil
ik
il
eb ar y
ang tetap
(
fix
ed)
.
 Duk
unganresponsiv
e lay
out,y
aitulay
out y
ang mengik
uti b esar lay
ar,apak
ah lay
ar
desk
top,mob ile,atautab .
C . H uruf
H urufpunmemb awafeeltertentu;apak
ahinginformalsepertiTimes atauinginy
ang leb ih
minimalis sepertiOpenS ans atauH el
v
etica.H urufsangat b erdampakb esar terhadapuser
ex
perience,k
arena k
onten utama seb uah web site tentuny
a adal
ah artik
el.
Yang perlu
diperhatik
ank
etik
amemil
ihhurufadalah:







Tingk
at k
eterb acaan(
readab il
ity
)
,k
arena ada b eb erapa j
enis huruf y
ang sul
it untuk
dib aca.
Spacing,b aikituantar hurufmaupunantar b aris.
Uk
uranhuruf,harus memil
ik
iperb edaanantaraH eading 1,H eading 2
,P aragraf,Q uote,
Emphasize,danl
ainny
a.
P enggunaanl
ay
ananonl
ine web font.Karena tidaksemua k
omputer memil
ik
i font
y
ang harus digunak
andil
amanweb ,mak
a al
ternatifny
a adalahmenggunak
anlay
anan
web font sepertiGoogl
e W eb Font danTy
peKit.

2
5

5. B ack
upW eb site
A lasanweb site harus dib ack
up?
A da5asalanmengapaweb site A ndaharus dib ack
up:
1. M emb ack
upweb site b uk
anmerupak
antanggung j
awab web hosting
B eb erapalay
ananweb hosting tidaksepenuhny
a melay
anib ack
upweb site,b iasany
a untuk
mendapatk
anl
ay
ananb ack
upweb site A nda harus menamb ah sej
umlah fee pada web
hosting y
ang A ndagunak
an.
2. M eny
impanweb site A ndadil
ocalhost b elumcuk
up!
J
ik
a A nda terb iasa menggunak
anmengemb angk
anweb site di l
ocalhost,A nda mungk
in
b erpik
ir halterseb ut sudah cuk
up.Namunseiring b erj
alanny
a wak
tu,web siteny
ay
ang
A nda pub l
ish diweb serv
er ak
anterdapat perub ahan.H aliniy
ang memb uat A nda harus
memb ack
uptidakhany
afil
e script web site tapij
ugaisik
ontenweb site A nda.
3. S iapb ereak
sidengancepat
B ay
angk
anj
ik
a web site A nda y
ang usiany
a sudahpanj
ang,memil
ik
ik
ualitas S EO y
ang b aik
,
pendapatany
ang terus mengal
ir tib atib a terk
ena hack
,sedangk
anA nda tidakmemil
ik
i
b ack
upanweb site? Tentuhalterseb ut ak
ansangat merugik
anA nda.
4. M emb uat pemil
ikweb site merasatenang
S epertipadaal
asanseb elumny
a,j
ik
aA ndasudahmemb ack
upweb site A ndatidakperlul
agi
mencemask
anweb site A nda y
ang terk
ena hack
.J
ik
a halterseb ut terj
adiA nda hany
a perl
u
merestore dataweb site y
ang sudahA ndab ack
up.
5. M el
indungiweb site A ndadariseranganv
irus
B eb erapa l
ay
ananweb hosting sudah memil
ik
i antiv
irus y
ang siapmelak
uk
anscanner
terhadapweb site cl
ient.Namuntidaksemua web host melak
uk
anscanner terhadapv
irus
danmal
ware secara proak
tif.Oleh k
arena itu,seb aik
ny
a anda memb ack
upweb site agar
terhindar dariv
irus danmal
ware.

2
6

6. Tips
B erik
ut adal
ahtipstips y
ang dapat digunak
andalam memak
simal
k
ank
inerj
aweb site A nda
A . Format P ostinganW eb site y
ang B aik
Format postinganmerupak
anisupenting dal
am desainweb site.H alinimeny
angk
ut aspek
scannab il
itydanreadab ility
.
B agaimanaformat postinganweb site y
ang b aik
? S alahsatuny
a
adalahmenggunak
anratak
iri(
tex
t al
ignl
eft)
!
P erhatik
antampilanpostinganweb site A nda.A pak
ah tampilantek
sny
a rata k
iri atauk
ah
rata k
irik
anan(
j
ustify
)
?J
ik
a rata k
irik
anan(
j
ustify
)
,sehingga tampil
anny
a sepertiformat
tek
s tul
isandi k
oran,b uk
u,atausurat resmi,ituartiny
a web site A nda menganut ‘
al
iran
resmiformal
’
dan‘
k
ak
u’
.
Tampilan posting rata k
irik
anan al
ias full
j
ustified tidaklazim.S elain memb uat k
ak
u,
memperlamb at user untukmemb acany
a,tampil
antek
sj
ustifyinij
uga ak
antampakb uruk
j
ik
aadadik
olomsempit.
S eb al
ik
ny
a,tampil
anposting atautek
s rata k
iri(
al
ignl
eft)
,ak
anleb ihmudahdib aca,leb ih
enak dil
ihat (
dipindai/
scanned)
,dan ini artiny
a memenuhi aspek ‘
readab il
ity nask
ah
onl
ine’
.
B . RataKiri(
Tex
t A lignL eft)atauRataKananKiri(
J
ustify
)
Fak
tor Readab l
e & Scannab l
e merupak
an masalah penting, terk
ait k
eny
amanan
user/
pengunj
ung,j
uga terk
ait U X(
U ser Ex
perience)dalam memb aca tul
isan(
tek
s)disitus
web site.
A da tiga al
asanutama mengapa nask
ah posting (
tul
isan)di web site harus rata k
iri(
al
ign
left)
,b uk
anratak
irik
anan(
j
ustify
,j
ustified)
.
1. This mak
es it easier toread.
Nask
ahratak
iril
eb ihmudahdib aca.
L eb ihny
amandimata.L eb ihmengesank
anril
ek
s,
santai,dantidakk
ak
u!
2. J
ustified A l
ignment is actual
lynonstandard for the web .
Rata k
irik
anan(
j
ustify
)b uk
anstandar web site.Ia standar suratmeny
urat,tul
isan
‘
serius’
(
sk
ripsiatauk
ary
ail
miah)
.

2
7

3. B awaanny
aRilek
s!
Rata k
irik
anan(
j
ustify
)menunj
uk
k
anformal
,k
ak
u,tidakril
ek
s.Rata k
iri (
al
ignleft)
ak
anmeny
isak
an‘
ruang putih’
(
white space)l
eb ihb any
akuntuk‘
istirahat mata’
.
Sel
ainitu,j
ustifyb iasany
amemuncul
k
anj
arakantar k
atay
ang tidakk
ompakal
ias acak
acak
an.L ihat contohny
ab erik
ut ini.
Ratak
irileb ihenakdib aca(
readab l
e)al
ias dipindai
(
scannab l
e)
.

C . Disqus S eb agaiA lternatifKolom Komentar
A paituDisqus?
Disqus merupak
an l
ay
anan sistem k
omentar b erj
aringan di dunia may
a,b any
akdari
b erb agai situs populer y
ang mengintegrasik
an dengan disqus dengan tuj
uan untuk
menduk
ung disk
usidenganpenggunadiduniamay
a.
Darisegifasilitas dapat dik
atak
ansangat lengk
apdanmudahuntukdigunak
an,tidakheran
b erb agaisitus populer menganggapdisk
usimelal
uidunia may
aj
uga harus diperhitungk
an
k
arena media terseb ut dapat dik
atak
an sangat interak
tif internet muncul untuk
menawark
ank
omunik
asisatuarah.
B erik
ut alasanmengapa Disqus dapat menj
adisalahsatual
ternatifl
ay
anank
omentar y
ang
dapat A ndaterapk
andiweb site y
ang A ndak
elol
a:

2
8

1. A ndab isameny
esusaik
anmodelk
omentar b erj
alur (
threaded comment)atauy
ang tipe
rata (
fl
at)dengantetapmeny
ertak
anal
ur disk
usidenganrapi.B ahk
anb isa memak
sa
mesin b log y
ang tidakmenduk
ung gal
ur k
omentar untukmenampilk
an k
omentar
b ergalur.
2. M eningk
atk
aninterak
si sosialantara pemb eri tanggapan,k
arena tidakmenutupdiri
k
omunik
asiantarapenulis danpengunj
ung saj
a.
3. Dapat memb erik
an tanggapan dengan menggunak
an ak
un j
ej
aring sosial seperti
faceb ook
,twitter,y
ahoodanOpenID.J
aditidakhany
a narab log y
ang b isa b erinterak
si
denganmemb uk
apotensij
ej
aring sosialy
ang dimil
ik
iseorang penggunainternet.
4. A tauhany
a memb eri tanggapanseb agai tamu,masuk
k
annama & surel
,mak
a itu
sudahcuk
up.Namunj
ik
a A nda memilik
ib log/
web site,b isa tamb ahk
anseb agaik
olom
isianpil
ihan(
optional
)–tidakditampilk
ansecaral
angsung.
5. A nda b isa menemuk
an,di mana saj
a seseorang meninggalk
antanggapan,termasuk
b log y
ang l
ainny
a.S ehingga menemuk
antopik
topiky
ang mungk
inA nda danorang
terseb ut memil
ik
ik
emiripanuntukdidisk
usik
an(
similar interest)
.
6. B agi pemilikprofildisqus,A nda b isa melanj
utk
ank
omunik
asi,b ertuk
ar tanggapan,
hany
a melalui surel
.S ehingga tidakperl
umengunj
ungi b log & tul
isanterk
ait lagi,
percak
apanb isa b erl
anj
ut sepertib al
as memb alas surat,namuntetapterdok
umentasi
denganb aikdib log terseb ut seb agaitanggapany
ang saling b ersahutan.Tentusaj
a ini
b erarti pemil
ikb log j
uga tidakperl
ub ulak
b alikmemb uk
a halamanb logny
a untuk
memb alas k
omentar,cuk
up v
ia sureldanmemb alas setiap tanggapany
ang ingin
dib al
as,b ahk
anb isa dil
ak
uk
ansamb ilA ndapotong ramb ut disal
ondenganpushemail
diponselanda!
7. M enduk
ung seb agianb esar penanda H TM L seperticode,pre,a,sup,strong,em,dan
l
ainseb againy
a,walaub eb erapa tidakdiduk
ung seperti misal
ny
a del(
l
ha,mengapa
j
ugamencoret k
al
aub isadihapus?)
.
8. Sistem k
eamanany
ang unik
,memil
ik
i sistem k
eamanantersendiri untukserangan
spam,danj
ugaduk
ungank
omunitas untukmenandaitanggapantanggapany
ang tidak
santun/
sesuai dengantata k
rama.Tidakmemerl
uk
anC A P TC H A ,j
adi b agi y
ang tidak
suk
a C A P TC H A tidakperl
uk
hawatir.Dapat diintegrasik
andenganak
ismet langsung di
dashb oard disqus.Danj
ik
a A nda suk
a denganantispam lain,mengapa tidak
? –say
a
masihmenggunak
anA ntispam B ee dib log ini.
9. P emasanganny
a mudah dansederhana,integrasi k
e dalam b log tidakmemerl
uk
an
k
eterampil
anseb agaimana seorang ahl
imark
ah.C uk
upsontekcarany
a darihalaman
panduanpemasangan.

2
9

M emasang Disqus diW eb site
1. H al pertama y
ang harus A nda lak
uk
an j
ik
a b elum memilik
i ak
un disqus adalah
mendaftar
di
web site
http:
/
/
www.
disqus.
com

2. Setelah A nda terdaftar,sil
ahk
ank
l
ikA dd Disqus toYour S ite y
ang terletakdi menu
setting poj
okk
ananatas.
3. Isik
anformsesuaisite profil
e A nda,lal
uk
l
ikFinishRegistration.

4. Sel
anj
utny
a A nda pil
ih pl
atform W ordpress.J
ik
a A nda menggunak
anplatform lain
sil
ahk
anlain,A ndahany
aperl
umeny
esuaik
anny
asaj
a.

3
0

5. Sel
anj
utny
a A nda ak
anmasukk
e halamanInstallInstruction.Dihal
amanini terdapat
instruk
si y
ang harus k
amu lak
uk
an seb el
um mengk
l
ik Install,y
aitu A nda harus
menginstal
lpl
ugindisqus diW ordpress terleb ihdahul
u.S il
ahk
anL ogink
e Dashb oard,
pil
ih menuP lugins >A dd New >S earch menggunak
ank
ey
word Disqus atauDisqus
C omment S y
stem

6. SetelahA ndamenginstalldanmengak
tifk
anpluginDisqus,k
l
ikC onfigure dimenu
plugins.

3
1

7. Sel
anj
ut k
l
ikU pgrade.
M asuk
k
anusername danpassword Disqus A nda.

8. P il
ihweb site y
ang tadiA ndab uat diDisqus,k
l
ikNex
t
9. Sel
anj
utny
ak
l
ikC ontinue tothe moderationdashb oard.
10.KlikGotoDisqus M oderation.
Kiniweb site A ndasudahterintegrasik
andenganDisqus.

3
2

D. H indariP enggunaanA L L C A P S padaJ
udulP ost danP age
P enggunaanA llC aps pada J
udulP ost atauP age memang tidaksal
ah,tapi sangat tidak
dianj
urk
an penggunaanny
a ol
eh pak
ar usab il
itydan v
isib ilityweb site.B erik
ut contoh
hal
amanweb site y
ang menggunak
anA l
lC aps dantidakmenggunak
anA llC aps.

Terl
ihat j
elas perb edaanny
a.J
uduly
ang menggunak
anformat C apitalize (
tidakal
lcaps)
leb ihscannab le,readab l
e,danv
isib l
e sehingga l
eb ihuser friendl
y
,mudahdib aca,ny
aman
dimatadanmudahdicerna.
A dapunal
asanutama A nda harus menghindaripenggunaanA l
lC aps pada J
udulP ost dan
P age adalah:
1. A l
lC aps sul
it dipindaiol
ehmata(
scan)
,sulit dib acasehinggatidakuser friendly
.
2. A l
lC aps dal
amduniatulismenul
is b erarti‘
b erteriak
’
.
Al
lC aps means Shouting!
Kode etik menul
is email melarang penggunaan A l
l C aps.W ik
ipedia j
uga melarang
penggunaan
Al
l
C aps
dal
am
penul
isan
nask
ahny
a.

3
3

E. H indariP enggunaanU sername ‘
A dmin’
P enggunaanusername ‘
admin’sudah terlal
uumum digunak
an.Ol
eh k
arena itu,seb agai
salahsatuupay
ameningk
atk
ank
eamananweb site,seb aik
ny
agantidenganusername y
ang
tidakmudahdik
etahuiol
ehorang lain.
F. H indariP enggunaanP refix‘
wp_’
padaTab le Datab ase
Al
asanmenghindari penggunaanprefix‘
wp_’pada tab le datab ase adalah seb agai salah
upay
a meningk
atk
ank
eamanaanweb site A nda.P erludik
etahui defaul
t prefixdatab ase
y
ang digunak
andalam proses instalasi W ordpress adalah ‘
wp_’
.Ganti prefixterseb ut
denganprefixl
ain,dianj
urk
anuntukmengk
omb inasik
anhurufdanangk
a.

3
4