panduan lengkap laman web joomla

32
Aridztech P W h.com Pan Ce We dua epa ebsi A an tPe ite Aridzt Mu em Joo By tech.c uda bin oml com h d naa la 1 P dan n 1.5 Page 0

Upload: nabilah-ahmad

Post on 27-Oct-2015

66 views

Category:

Documents


0 download

DESCRIPTION

panduan lengkap untuk membangunkan laman web dengan perisian joomla.

TRANSCRIPT

Page 1: Panduan Lengkap Laman Web Joomla

Aridztech 

 

P

W

h.com 

PanCeWe

duaepaebsi

A

an t Peite 

Aridzt

MuemJoo

 

By 

tech.c

udabinoml

com

h dnaala 1

P

dan n 1.5

Page 0 

Page 2: Panduan Lengkap Laman Web Joomla

Aridztech.com  Page 1  

 

Kandungan

1. Latarbelakang Joomla 1.1 Sejarah 1.2 Versi 1.3 Kelebihan

2. Cara install Joomla

2.1 Domain dan webhosting 2.2 Cpanel, Softaculous atau Fantastico 2.3 Periksa tiga pages: mukadepan, administrator dan template 2.4 Memeriksa file dengan Filezilla

3. Pemilihan template

3.1 Carian template percuma 2 column atau 3 column 3.2 Download template 3.3 Install template 3.4 Ubahsuai gambar dan caption template

4. Global Configuration

4.1 Masukkan nama website, description dan keywords 4.2 Carian keywords dengan Adwords keyword tool

5. Menu dan Submenu

5.1 Mengubahsuai default menu 5.2 Membina menu baru 5.3 Membina sub-menu 5.4 Aktifkan di module manager

6. Section, Category dan Article

6.1 Membina Section 6.2 Membina Category 6.3 Membina Article 6.4 Setting Tiny MCE 6.5 Memasukkan gambar 6.6 Memasukkan Link 6.7 Memasukkan HTML code 6.8 Article meta data

Page 3: Panduan Lengkap Laman Web Joomla

Aridztech.com  Page 2  

7. Module manager

7.1 Carian module 7.2 Install module

8. Mengemaskinikan website 8.1 Bina password user lain 8.2 Tips- tips berguna

Page 4: Panduan Lengkap Laman Web Joomla

Aridztech.com  Page 3  

1. Latarbelakang Joomla

1.1 Sejarah

Joomla adalah merupakan satu aplikasi CMS (Content Management System) untuk membina website. Ianya menggunakan teknik object programming tanpa memerlukan pengguna menulis script programming kerana modul- modul untuk tujuan tertentu sudah tersedia ada.

Nama "Joomla" diambil daripada perkataan Swahili iaitu jumla yang bermaksud "mari bersama-sama" atau "secara keseluruhannya". Ia dipilih bagi menunjukkan komitmen pasukan pembangunan dan komuniti projek berkenaan.

Page 5: Panduan Lengkap Laman Web Joomla

Aridztech.com  Page 4  

1.2 Versi

Ianya amat memberikan kemudahan kepada mereka yang tidak mempunyai latar belakang IT mahupun yang ada latar belakang IT tetapi sudah lama tidak mengemaskinikan pengetahuan di dalam bidang ini. Joomla telah dibangunkan semenjak tahun 2005 berdasarkan kepada aplikasi Mambo. Ianya bermula dengan Joomla 1.0 tetapi hanya menjadi popular apabila Joomla 1.5 diperkenalkan pada penghujung tahun 2007. Banyak modul – modul yang dibina untuk menyokong Joomla 1.5 telah menjadikan penggunaan Joomla semakin meluas di dalam bidang pembinaan website. Joomla 1.6 telah dikeluarkan pada tahun 2010 tetapi masih banyak lagi aplikasi modul yang tidak menyokong Joomla 1.6. Oleh itu, Joomla 1.5 masih lagi menjadi pilihan.

1.3 Kelebihan

Kenapa Joomla 1.5 semakin digemari? Sebenarnya Joomla 1.5 telah menukar cara pembinaan website yang secara tradisinya menggunakan software- software seperti NVU, Kompozer, Microsoft Frontpage, Microsoft Expression dan juga Adobe Dreamweaver. Dengan Joomla, software- software ini tidak diperlukan lagi. Kemaskini website boleh dilakukan secara mudah sekali dengan melakukannya secara online. Sudah pasti

Satu lagi keistimewaan Joomla, sebarang kemaskini boleh dilakukan secara terus oleh sesiapa sahaja tanpa memerlukan bantuan webmaster. Ianya adalah seperti menggunakan aplikasi Microsoft Word apabila kita ingin mengemaskinikan bahagian artikel. Jelas sekali, sesiapa sahaja di dalam organisasi boleh mengemaskinikan maklumat secara tepat dan cepat. Jika dahulu, orang ketiga diperlukan iaitu webmaster dan ada kemungkinan maklumat yang diletakkan adalah tidak lengkap ataupun tidak tepat. Sudah tentu, setiap orang yang mempunyai username dan password sahaja dibenarkan untuk mengemaskinikan website yang dibangunkan di dalam Joomla itu.

Dengan Joomla, masalah pembinaan website daripada segi rekabentuk dan penampilan telah dapat diselesaikan. Pengggunaan template yang boleh diubahsuai telah mengatasi penggunaan template tradisional dengan menggunakan HTML. Jelas sekali, Joomla bakal menjadi tumpuan dan arahtuju pembinaan website di masa hadapan.

Page 6: Panduan Lengkap Laman Web Joomla

Aridztech.com  Page 5  

2. Cara install Joomla

2.1 Domain dan webhosting

Sebelum kita membina website, kita pelulah memiliki domain dan webhosting. Domain adalah alamat sesebuah website. Ianya juga dipanggil URL. Hosting pula adalah merupakan tempat menyimpan file. Sama seperti laptop ataupun computer, kita memerlukan hardisk untuk menyimpan file. Hosting adalah tempat menyimpan file di Internet. Komputer yang bertindak sebagai hosting dipanggil server. Kos untuk memiliki kedua- dua ini tidaklah mahal, yang kita perlu adalah bermula dengan pakej yang paling rendah kerana pakej ini boleh diupgrade jika diperlukan nanti.

Untuk domain terbaik, ianya didalam dua atau tiga suku kata perkataan sahaja. Apabila disebut secara lisan, orang yang mendengarnya boleh mengeja tanpa sebarang kesalahan. Nama domain yang mempunyai keywords adalah lebih baik daripada kedudukan di search engine. Ianya adalah satu cara SEO (Search Engine Optimization).

Hosting pula perlulah memiliki database. Kebanyakan hosting menawarkan database ataupun Cpanel. Jika kita pengguna GDI (Global Domains International), kita boleh mendapatkan hosting yang mempunyai database di www.joomla-hoster.com

2.2 Cpanel, Softaculous atau Fantastico

Cara mudah untuk meng”install” ialah dengan menggunakan auto-installer di dalam Cpanel. Cpanel ataupun control panel adalah platform untuk kita menguruskan hosting. Auto-installer yang terdapat di dalam Cpanel adalah softaculous ataupun Fantastico. Softaculous menawarkan lebih banyak rangkaian software kalau dibandingkan dengan Fantatisco. Namun, kedua-duanya boleh digunakan untuk Joomla 1.5 installation.

Page 7: Panduan Lengkap Laman Web Joomla

Aridztech 

Install Jo

1. Login

2. Pergi

h.com 

oomla 1.5 d

ke dalam C

ke bahagia

dengan Sof

Cpanel.

an Softacul

ftaculous.

ous.

 

PPage 6 

Page 8: Panduan Lengkap Laman Web Joomla

Aridztech.com  Page 7  

3. Pilih bahagian Joomla.

 

4.Pilihan tab bahagian Install.

 

Page 9: Panduan Lengkap Laman Web Joomla

Aridztech.com  Page 8  

5. Isikan maklumat yang diperlukan untuk installation.

Choose Protocol:

Choose Domain:

In Directory:

Database name:

Site Name:

Site Description:

Table prefix:

Sample data:

Admin username:

Admin password:

Real name:

Admin email:

Email installation details to :

6. Installation telah disempurnakan.

Page 10: Panduan Lengkap Laman Web Joomla

Aridztech 

Install Jo

1. Login

3. Pilih b

h.com 

oomla 1.5 d

ke dalam C

bahagian Jo

dengan Fan

Cpanel. Pe

oomla 1.5.

ntastico.

ergi ke baha

Klik bahag

agian Fanta

ian New Ins

atisco.

stallation.

 

PPage 9 

Page 11: Panduan Lengkap Laman Web Joomla

Aridztech.com  Page 10  

4. Pilihan tab bahagian Install.

 

5. Isikan maklumat yang diperlukan untuk installation.

Install on domain:

Install in directory:

Administrator username:

Password:

Admin-email:

Admin full name:

Site name:

Install sample data:

6. Installation telah disempurnakan.

Page 12: Panduan Lengkap Laman Web Joomla

Aridztech.com  Page 11  

2.3 Periksa tiga pages: mukadepan, administrator dan template

Ketika kita membangunkan website di dalam Joomla. Ada tiga webpages yang perlu dijadikan panduan:

Front page : www.domainanda.com - Bentuk sebenar website.

Administrator page : www.domainanda.com/administrator - Pembinaan website.

Page 13: Panduan Lengkap Laman Web Joomla

Aridztech.com  Page 12  

Template page: www.domainanda.com/?tp=1 - Lokasi pembahagian website.

Buka tiga tabs untuk setiap page ini untuk memudahkan kita membuat kerja pembinaan website.

2.4 Memeriksa file dengan Filezilla

Filezilla adalah software percuma yang membolehkan kita menghubungi hosting dengan pantas. Ianya memerlukan 4 inputs sebelum kita boleh mendapat akses tersebut. Ianya adalah:

Host

Username

Password

Port

Semua info berikut akan diberikan oleh pihak hosting. Sebagai contoh:

Host: www.aridztech.com

Page 14: Panduan Lengkap Laman Web Joomla

Aridztech.com  Page 13  

Username: aridztec

Password: abcd1234

Port: 21

Nota: Port untuk hosting adalah sentiasa 21.

Setelah kita mendapat akses tersebut, kita boleh melihat file- file yang telah di”install” di dalam hosting. Ianya terletak di dalam directory “Public HTML”.

3. Pemilihan template

3.1 Carian template percuma 2 columns atau 3 columns

Selalunya, kita tidak mengeluarkan kos yang tinggi sebelum perniagaan yang kita buat itu belum berhasil. Jauhkan diri daripada mengeluarkan perbelanjaan yang tidak sepatutnya sedangkan kita boleh mendapatkannya secara percuma. Ini termasuklah template untuk Joomla website. Banyak menawarkan template yang menarik tetapi kita perlu membelinya dengan harga USD50- USD100 bergantung kepada jenis template. Namun, kita juga boleh mendapatkannya secara pecuma yang dikategorikan sebagai “non-commercial”. Antara jenis template yang selalu digunakan adalah 2 column atau 3 column. Ianya adalah bergantung berapa banyak informasi yang anda ingin letak di dalam website anda. Jika banyak, elok digunakan 3 column kerana kita boleh menbuat banyak menu untuknya.

Antara cara yang boleh digunakan ialah Google dengan keywords:

Contoh: 2 columns free joomla 1.5 template, ataupun Contoh: 3 columns free joomla 1.5 template. Website- website yang memberikan template percuma: http://www.siteground.com/joomla‐templates.htm http://www.joomlaxe.com/ http://www.joomla24.com     

Page 15: Panduan Lengkap Laman Web Joomla

Aridztech.com  Page 14  

3.2 Download template

File yang di download adalah di dalam bentuk zip file. Kita tidak perlu unzip file ini. File yang di download biasanya di simpan di dalam download folder. Jadi, kita boleh mendapatkannya daripada sana.

3.3 Install template

Setelah download template tersebut, kita boleh install di bahagian Install.

Extensions > Install/Uninstall

Kemudian, kita boleh memilih template tersebut di bahagian template manager.

Extensions > Template manager

Page 16: Panduan Lengkap Laman Web Joomla

Aridztech.com  Page 15  

3.4 Ubahsuai caption template dan gambar header.

Untuk mengubah caption template, kita perlu pergi ke edit HTML di dalam template manager.

Di dalam Edit HTML , kita boleh menukar caption yang ada.

Page 17: Panduan Lengkap Laman Web Joomla

Aridztech.com  Page 16  

Gambar header boleh diubahsuai atau ditukar sama sekali dengan gambar yang baru. Yang penting, ukuran gambar itu mestilah sama. Cara yang paling senang adalah mengdownload gambar tersebut menggunakan filezilla dan diubahsuai menggunakan Photoshop. Kemudian, gambar tersebut boleh diupload kembali ke dalam template. Jangan ubah nama file gambar tersebut kepada nama yang lain.

Dapatkan gambar Header dengan menggunakan Filezilla

.

Edit menggunakan Photoshop.

Pastikan periksa tiga pages: mukadepan, administrator dan template

Page 18: Panduan Lengkap Laman Web Joomla

Aridztech.com  Page 17  

4 Global Configuration

4.1 Masukkan nama website, description dan keywords

Global configuration adalah tempat kita boleh customize mesej jika website kita masih di dalam pembinaan. Ia juga adalah tempat untuk Metadata seperti website title, description dan keywords.

Site Name: Global Site Meta Desription: Global Site Meta Keywords.

Page 19: Panduan Lengkap Laman Web Joomla

Aridztech.com  Page 18  

4.1 Carian keywords dengan Adwords keyword tool

Letakkan find keywords untuk tema website kita. Boleh letakkan beberapa perkataan dan download keywords tersebut. Keywords boleh di”copy” dan diletakkan di dalam keywords di Global Configuration.

Boleh letak beberapa perkataan di dalam bentuk beberapa baris. Sebagai contoh “usahawan Internet”.

Keyword bisnis iklan peluang pendapatan perniagaan usahawan bisnes kerja di rumah keje part time

Page 20: Panduan Lengkap Laman Web Joomla

Aridztech 

5

5 Menu dapenyusuyang be Apakah Menu ad Apakah Submen

Mengub

Apabila

D

Sk PT

h.com 

. Menu da

5.1 Mengub

an submenunan maklurada di dala

menu? dalah kump

submenu?nu adalah p

bahsuai defa

kita mengg

Di dalam ad

Sekarang, kepada peng

Pergi ke MoTukar Title d

an Submen

bahsuai def

u adalah baumat dan naam website

pulan piliha

pilihan kepa

ault menu

gunakan sa

ministrator

katakana kitgenalan.

odule Managdaripada Ma

nu

fault menu

ahagian peavigasi. Iane adalah leb

n kepada to

ada topik – t

atu template

page, kita

ta ingin me

ger> Main ain Menu k

u

enting di dalnya boleh dibih tersusun

opik – topik

topik terten

e, satu defa

akan dapat

nukar Main

menu kepada Utam

lam websiteibina untuk n.

k tertentu di

ntu di dalam

ault menu d

t lihat

n menu kep

ma

e untuk tujumemberika

i dalam web

m website.

iberikan.

pada Utama

Pa

uan an info-info

bsite.

a dan Home

ge 19 

o

e

Page 21: Panduan Lengkap Laman Web Joomla

Aridztech 

K

M SM

S

5.2 Mem

KsC

h.com 

Keputusann

Main menu t

Sekarang kiMenus > Ma

Sudah bertu

mbina men

Kita boleh maya ingin m

Caranya, M

Jadi,

ya:

telah bertuk

ta akan meain menu >

ukar kepada

nu baru

membina memembina meMenus > Me

menu suda

kar kepada

enukar Hom

a

enu baru seenu ”Pauta

enu manage

ah pun terb

a Utama

me kepada

elain daripaan penting”er > Create

entuk:

Pengenala

ada utama d

new

n

di atas. Seb

Pa

bagai conto

ge 20 

oh,

Page 22: Panduan Lengkap Laman Web Joomla

Aridztech 

5.3 Mem

h.com 

mbina sub-

WalusebelKlik k

Pilih eMaybBrow

-menu

pun kita tellum kita me

kepada Pau

external linbank2u. Taiser Naviga

ah lengkapembina subutan Penting

k, dan katap full addretion”.

pkan langkab-menu. Sekg.

akan kita ingess Mayban

ah ini, menukarang, kita

gin membunk2u. Pilih ”

u belum laga akan mula

at link kepa”New windo

Pa

gi ditunjukkaakan subm

ada ow open wi

ge 21 

an enu.

th

Page 23: Panduan Lengkap Laman Web Joomla

Aridztech 

5.4 Akti

h.com 

ifkan di mo

KemuKlik e

Selepterbe

odule mana

udian, pergenable mod

pas modulentuk.

ager

i ke moduleule.

e telah di”en

e manager.

nabled”. Me

.

enu dan Su

bmenu tela

Pa

ah pun

ge 22 

Page 24: Panduan Lengkap Laman Web Joomla

Aridztech 

6

Section,mengkekita bole

Menu ya

MenuUtama Menu di

MCapaian

6.1 Mem

Cara me

Klik New

K

h.com 

. Section,

Category dlasifikasika

eh menggun

ang mengguna

u/Section

bawah tidak

Menu penting

mbina Sect

embina sec

w

Klik Save, S

, Category

dan Article an. Untuk mnakan cont

akan Article s

SubmenPengenalanProduk Testimoni Pembelian

memerlukan

SubMaybank CIMB

tion

ction ialah p

Section untu

dan Articl

adalah bermemudahka

oh berikut:

sahaja mengg

u/ Category n

Section/ Cate

bmenu

pergi ke Co

uk Utama te

e

rtujuan untuan penggun

gunakan Sect

TypeArticle Article Article Article

egory

TypeExternal External

ontent > Se

elah pun di

uk memberaan Sectio

tion/ Category

e PengProdTestPem

e link Mayblink CIMB

ection Mana

bina.

rikan kemudn, Category

y

Title genalan duk imoni belian

Title bank B

ager

Pa

dahan di day dan Articl

ge 23 

alam le,

Page 25: Panduan Lengkap Laman Web Joomla

Aridztech 

6.2 Mem

Cara me

B

K

h.com 

mbina Cate

embina cate

Bina Catego

Klik Save. C

egory

egory deng

ory untuk pe

Category un

gan pergi ke

engenalan

ntuk pengen

e Content >

nalan telahp

> Category

pun dibina.

manager ,

Pa

Klik New.

ge 24 

Page 26: Panduan Lengkap Laman Web Joomla

Aridztech 

B

6.3 Mem

Ad

M

h.com 

Bina untuk c

mbina Artic

Article adalaalam Article

Masukkan te

category ya

cle

ah isi kepade manager

ext

ang lain, pro

da website t.

oduk, testim

tersebut. U

moni dan pe

Untuk memb

embelian.

binanya, clic

Pa

ck new di

ge 25 

Page 27: Panduan Lengkap Laman Web Joomla

Aridztech 

6.4 Sett

6.5 Mem

h.com 

ting Tiny M

Exten

Pilih F

Kemb

masukkan g

Klik b

MCE

nsions > Plu

Functionalit

bali kepada

gambar

bahagian im

ug-ins > AE

ty : Extende

a Article dan

mage di baw

Editor-TinyM

ed

n lihat lebih

wah menu i

MCE

h banyak fu

ni:

nction yang

Pa

g terdapat.

ge 26 

Page 28: Panduan Lengkap Laman Web Joomla

Aridztech 

6.6 Mem

h.com 

Uploa

Setel

masukkan L

Highlterbu

ad gambar

ah upload ,

Link

ightkan perka.

terlebih da

, barulah kl

rkataan unt

hulu. Brows

ik image te

tuk dibuat li

se dan star

ersebut dan

ink dan klik

rt upload.

Insert ima

k link, windo

Pa

age.

ow berikut a

ge 27 

akan

Page 29: Panduan Lengkap Laman Web Joomla

Aridztech 

6.7 Mem

6.8 Artic

h.com 

masukkan H

Ianya

cle meta d

Ini ad

Masu

HTML cod

a digunakan

data

dalah pentin

ukkan descr

de

n untuk mem

ng untuk SE

ription dan

masukkan

EO.

keywords m

HTML code

mengenai A

e.

Article terse

Pa

ebut.

ge 28 

Page 30: Panduan Lengkap Laman Web Joomla

Aridztech.com  Page 29  

7. Module manager

Module adalah seperti program atau aplikasi yang telah direka dan kita boleh menggunakannya dan disesuaikan di dalam website kita. Namun, kita perlu meneliti samada module itu menyokong versi Joomla yang kita pakai.

7.1 Carian module

Module boleh dicari di website ini: http://extensions.joomla.org/ Adalah dinasihatkan kita membaca penerangan dan maklumbalas mengenai module tersebut supaya module yang diinginkan tercapai.

Page 31: Panduan Lengkap Laman Web Joomla

Aridztech 

Contoh

Custom

Google T

7.2 Insta

S

h.com 

module- mo

HTML

Translate

all module

Setelah dow

odule yang

e

wnload mod

ada

dule, boleh ke Uplod fille dan Inst

tall.

Pa

ge 30 

Page 32: Panduan Lengkap Laman Web Joomla

Aridztech.com  Page 31  

Pergi ke module manager, klik kepada module yang baru di”install”. Boleh tukar title dan letakkan module parameter sebagai contoh Twitter HTML code.

8. Mengemaskinikan website

8.1 Bina password user lain

8.2 Tips- tips berguna

Pelbagai lagi modules yang boleh di dapati di dalam website extensions.joomla.org.

Antara tips- tips supaya lebih cemerlang dengan Joomla.

-perbanyakkan proses pembelajaran dan percubaan dengan template dan module baru.

-aktifkan diri di dalam aktiviti,forum- forum Joomla dan rakan- rakan komuniti Joomla.

-sentiasa up-to-date dengan perkembangan terkini dan hebahkan kepada orang lain.