Manual Latihan

Panduan Membina Laman Web Korporat

Ver. 2.0

Disediakan pada: September 16, 2012 11:39:28 PM

2

Senarai Isi Kandungan

Pengenalan ............................................................................................................................................................. 3

Memasang (Install) Laman Web............................................................................................................................. 3

Menguji cuba Laman Web ...................................................................................................................................... 8

Membuka Laman Web ....................................................................................................................................... 8

Langkah Pertama Dan Menukar Rekabentuk Laman Web..................................................................................... 9

Membuka Ruang Pentadbir Laman Web ............................................................................................................ 9

Menukar Setting Pada Global Configuration .................................................................................................... 10

Menukar Rekabentuk Laman Web ................................................................................................................... 12

Mengubah Setting Pada Template Laman Web ............................................................................................... 15

Mengubah Nama Menu “Home” ...................................................................................................................... 16

Mengubah Kedudukan Menu Utama ............................................................................................................... 17

Membina Menu dan Sub-Menu ............................................................................................................................ 18

Membina Menu ................................................................................................................................................ 18

Membina Sub-Menu ......................................................................................................................................... 19

Membina Artikel ................................................................................................................................................... 20

Membina Artikel ............................................................................................................................................... 20

Menambah Fungsi Butang Dalam Ruangan Article Text .................................................................................. 21

Membina Modul ................................................................................................................................................... 22

Mengenalpasti Kedudukan Modul .................................................................................................................... 22

Membina Modul ............................................................................................................................................... 23

Memasukkan Pelbagai Gambar Produk ............................................................................................................... 26

Memasang Plug-in Galeri Gambar ................................................................................................................... 26

Memasang Borang Hubungi Kami ........................................................................................................................ 28

Membina Menu Hubungi Kami ......................................................................................................................... 28

3

Pengenalan

Manual ini bertujuan menyediakan panduan bagaimana membina laman web syarikat anda sendiri

mengikut nama domain yang telah anda daftarkan sebelum ini. Contohnya nama domain anda ialah

bajublouse.my, maka alamat laman web syarikat anda adalah www.bajublouse.my

Laman web tersebut boleh diberikan kepada prospek atau dicetak di atas kad perniagaan anda bagi

meningkatkan imej syarikat dengan memiliki laman web sendiri.

Memasang (Install) Laman Web

1. Buka web browser (contoh: Mozilla-firefox, internet-explorer, google-chrome) dan pergi ke laman

sesawang web korporat anda. Anda perlu masuk ke CPanel.

Alamat CPanel web sesawang korporat anda ialah namadomain/cpanel. Contoh:

www.bajublouse.my/cpanel

Paparan seperti di atas akan diperolehi.

2. Masukkan katanama (username) dan katalaluan (password) yang diberikan oleh penyedia hosting

anda. Kemudian klik butang “Log in”.

4

3. Sekiranya Log in anda berjaya, anda akan menerima paparan seperti di bawah. Kini anda telah

memasuki ruangan CPanel hosting.

4. Klik pada bahagian “Softaculous Apps Installer > Joomla”.

5

Anda akan menerima paparan ini:

5. Klik pada butang bahagian atas skrin iaitu “Install”

6

6. Masukkan maklumat yang diperlukan di bawah:

3

4

1 – In Directory - Buang perkataan yang ada dalam ruang kekotak. Biarkan kosong.

3 – Site Description: Masukkan Penerangan Laman Web Syarikat anda.

4 – Admin Password: Taipkan password untuk pentadbir (admin) laman web anda.

5

6

5 – Admin Email: Masukkan alamat emel pentadbir (admin).

6 – Email installation details to: Masukkan alamat emel dimana setting ini akan dihantar.

Sebagai rujukan anda dikemudian hari.

2

2 – Site Name: Masukkan Nama Laman Web Syarikat anda.

1

7

7. Salin maklumat Admin Username dan Admin Password di atas dan klik butang “Install”

8. Status pemasangan dipaparkan. Sila tunggu sehingga selesai (100%).

9. Pemasangan berjaya dan selesai.

Berjaya!

8

Menguji cuba Laman Web

Setelah anda berjaya membuat pemasangan, kini boleh melihat laman web anda. Walau bagaimana

pun laman web anda masih tidak mengandungi sebarang maklumat. Anda bolehlah menambah maklumat

yang berkaitan selepas ini.

Membuka Laman Web

1. Untuk melihat laman web korporat anda, sila taipkan nama domain anda. Contoh

www.bajublouse.my

Paparan di bawah akan diperolehi.

Laman web anda masih dalam keadaan kosong (tiada sebarang maklumat).

9

Langkah Pertama Dan Menukar Rekabentuk Laman Web

Pada bahagian ini, anda akan ditunjukkan langkah pertama yang perlu dilakukan untuk membina

laman web dan cara-cara untuk menukar rekabentuk laman web anda.

Membuka Ruang Pentadbir Laman Web

1. Untuk membolehkan anda menambah maklumat di dalam laman web, anda perlu masuk ke ruangan

pentadbir laman web atau dipanggil ruang Administration. Sila taipkan namadomain/administrator

Contoh: www.bajublouse.my/administrator

2. Masukkan User Name dan Password untuk pentadbir sepertimana yang telah anda setkan pada

proses pemasangan sebelum ini.

Selepas itu klik butang “Log In”.

10

3. Jika anda berjaya login, paparan berikut akan diperolehi:

Ini adalah paparan Control Panel di dalam Joomla!

Menukar Setting Pada Global Configuration

1. Sebagai langkah permulaan, anda perlu mengubah time zone pada bahagian Global Configuration.

Klik pada ikon “Global Configuration”

11

2. Klik pada tab Server. Pergi ke bahagian “Location Settings > Server Time Zone”.

Tukar kepada time zone dimana anda berada. Taipkan sahaja perkataan Kuala Lumpur untuk

mendapatkan Kuala Lumpur atau pilih menu drop-down di bawah.

3. Klik butang “Save & Close” pada sebelah kanan atas skrin.

12

Menukar Rekabentuk Laman Web

Rekabentuk laman web anda boleh ditukar mengikut kesukaan anda. Untuk membuat penukaran

rekabentuk anda perlu mencari template laman web yang sesuai. Ia boleh didapati secara percuma atau

berbayar.

Template percuma:

www.joomla24.com

www.freshjoomlatemplates.com

www.joomlatp.com

www.siteground.com

Template berbayar:

www.joomlart.com

www.rockettheme.com

Untuk mendapatkan template tersebut, anda boleh memuat turun fail template daripada laman web

di atas. Fail template adalah dalam bentuk .zip.

Selepas anda memiliki fail template (dalam bentuk .zip tersebut) sila ikuti langkah di bawah untuk

pemasangan template.

1. Pergi ke menu “Extensions > Extension Manager”

13

2. Paparan berikut akan diperolehi.

Pilih “Choose File”. Pilih fail template yang akan digunakan.

Pilih fail di atas dan tekan Open. Klik butang “Upload & Install”. Tunggu sehingga proses installation

selesai.

14

3. Proses installation berjaya.

4. Pergi ke menu “Extensions > Template Manager”

Klik ke Template Manager

5. Pilih nama template yang dikehendaki dan klik pada Default.

Refresh laman web anda www.bajublouse.my

15

Mengubah Setting Pada Template Laman Web

1. Klik pada Template Manager > Pilih nama template di bawah. Klik pada nama template.

2. Pilih pada ruangan yang ingin diubah.

1

2

3

4

5

6

7 8

1 – Logo image - Pilih paparan samada Logo Syarikat ingin dipaparkan atau tidak.

2 – Logo path - Masukkan imej syarikat anda.

3 – Site Title - Tajuk Laman Web anda.

4 – Site Description - Penerangan ringkas tentang laman web anda.

5 – Slideshow - Samada ingin memaparkan slideshow atau tidak.

6 – Slide Effect - Bagaimana paparan slide akan ditunjukkan.

7– Slider Image - Imej slide yang ingin dipaparkan.

8– Slider Link - URL atau alamat laman web slide (jika ada).

16

Mengubah Nama Menu “Home”

1. Pergi ke “Menus > Main Menu”

2. Klik pada Home

3. Tukarkan Menu Title Home kepada Utama. Kosongkan ruangan Alias.

4. Tekan butang “Save & Close”

5. Refresh laman web anda.

17

Mengubah Kedudukan Menu Utama

1. Pergi ke “Menus > Menu Manager”

2. Klik pada link Main Menu (Public in position-7)

3. Tukarkan bahagian berikut:

4. Refresh laman web.

1

2

3

1 – Position - Klik butang Select position. Pilih position-1.

2 – Show Sub-menu items - Pilih Yes untuk memaparkan Sub-Menu.

3 – Save & Close - Klik Save & Close untuk menyimpan perubahan ini.

18

Membina Menu dan Sub-Menu

Pada bahagian ini, anda akan ditunjukkan cara-cara membina menu dan submenu laman web. Laman

web yang mempunyai menu memudahkan pengguna mendapatkan maklumat lengkap tentang perniagaan

anda.

Membina Menu

5. Pergi ke “Menus > Main Menu”

6. Klik butang “New”

7. Membina Menu

1

2 3

1 – Menu Title - Masukkan nama Menu.

2 – Menu Item Type - Pilih System Links > Menu Item Alias

3 – Menu Item - Pilih Home / Utama

19

Membina Sub-Menu

1. Pergi ke “Menus > Main Menu

2. Klik butang “New”

3. Membina Sub-Menu

1

2 3

1 – Menu Title - Masukkan nama Menu.

2 – Menu Item Type - Pilih Article > Single Article

3 – Select Article - Pilih Article yang telah dibuat pada bahagian Article Manager.

4

4 – Parent Item - Pilih parent item dimana apakah Menu kepada Sub-Menu ini.

20

Membina Artikel

Pada bahagian ini, anda akan ditunjukkan cara-cara untuk memasukkan artikel di dalam laman web.

Anda boleh memasukkan sebarang maklumat perniagaan anda di ruangan artikel. Contoh seperti latar

belakang syarikat, objektif, visi dan misi dan sebagainya.

Membina Artikel

1. Pergi ke “Content > Article Manager”

2. Klik butang “New”

3. Masukkan kandungan artikel

4. Selepas selesai menulis kandungan artikel, tekan butang “Save & Close”

1

2

3

1 –Title - Masukkan Tajuk artikel.

2 – Category - Masukkan kategori artikel (jika ada). Jika tiada biarkan Uncategorised.

3 – Article Text - Masukkan kandungan artikel anda.

21

Menambah Fungsi Butang Dalam Ruangan Article Text

Seperti yang anda dapati pada ruangan penulisan artikel, tidak banyak fungsi yang boleh digunakan.

Contohnya tiada kemudahan seperti menukar saiz tulisan, warna, membuat kekotak dan lain-lain lagi.

Namun anda boleh menambah fungsi ini.

1. Pergi ke “Extensions> Plug-in Manager”

2. Klik pada “Editor – TinyMCE”

3. Pilih pada bahagian “Basic Options > Functionality > pilih Extended”

4. Tekan butang “Save & Close”

22

Membina Modul

Pada bahagian ini, anda akan ditunjukkan cara-cara untuk membina modul. Kedudukan modul boleh

berada di kiri, kanan, atas dan bawah dalam dalam laman web anda. Contoh penggunaan modul, anda boleh

meletakkan info tambahan seperti nombor telefon untuk pertanyaan atau gambar bersilih ganti produk-

produk pada ruangan kiri atau kanan laman web anda.

Sebelum anda boleh membina modul, anda perlu tahu posisi modul dalam laman web anda.

Mengenalpasti Kedudukan Modul

1. Oleh kerana modul adalah berkaitan dengan Template maka anda perlu pergi menu

“Extensions > Template Manager”

2. Pilih butang “Option”

3. Tukarkan pada Template > Preview Module Position kepada Enabled

4. Tekan butang “Save & Close”

23

5. Buka web browser anda dan taipkan berikut www.bajublouse.my?tp=1. Anda akan dapat melihat

kedudukan modul seperti position-1, position-2 dan sebagainya.

Membina Modul

1. Pergi ke “Extensions > Module Manager”

2. Klik butang “New”

24

3. Pilih jenis Modul yang ingin dibina.

Untuk membuat modul paparan teks sila pilih Custom HTML.

4. Masukkan pada ruangan di bawah

5. Isi pada ruangan Custom Output untuk menuliskan kandungan teks yang ingin dipaparkan.

1

3

1 –Title - Masukkan Tajuk modul.

2 – Show Title - Adakah tahuj modul ingin dipaparkan atau tidak. Show=papar, Hide=Tidak

3 – Position - Masukkan posisi modul yang akan dipaparkan di dalam laman web.

2

25

6. Turun ke bawah, terdapat ruangan Menu Assignment > Module Assignment.

Pilih pada bahagian Menu mana kandungan modul ingin dipaparkan.

7. Tekan butang “Save & Close”

26

Memasukkan Pelbagai Gambar Produk

Pada bahagian ini, anda akan ditunjukkan cara-cara untuk memasukkan banyak gambar sekaligus di

dalam laman web. Galeri gambar boleh digunakan untuk memaparkan pelbagai gambar produk atau

perkhidmatan anda.

Memasang Plug-in Galeri Gambar

1. Pergi ke “Extensions > Plug-in Manager”

2. Tekan butang Choose File

3. Plug-in yang digunakan ialah plg_jw_simpleImageGalleryv-2.2_j1.6 dan klik Open.

Selepas itu Tekan butang “Upload & Install” di atas.

27

4. Pergi ke menu “Extension > Plug-in Manager”.

Klik pada Status untuk menghidupkannya. Jadikan ianya bertanda betul (status aktif)

5. Pergi ke “Content > Media Manager”

6. Buatkan folder untuk memasukkan gambar produk dan mula masukkan gambar produk.

7. Pilih folder produk yang telah dibina. Gambar-gambar perlu dimasukkan di dalam folder ini.

8. Masukkan gambar-gambar produk satu per satu.

Klik “Choose File” dan pilih gambar dari komputer anda dan klik “Start Upload”.

7. Taipkan Tag ini di dalam ruangan article text pada menu Content > Article Manager > pilih artikel:

{gallery}produk{/gallery}

28

Memasang Borang Hubungi Kami

Pada bahagian ini, anda akan ditunjukkan cara-cara untuk memasang borang hubungi kami atau

Contact Us dalam laman web. Borang ini berguna supaya pengunjung dapat menghantar emel pertanyaan

atau mendapatkan maklumat untuk dihubungi melalui laman web anda.

Membina Menu Hubungi Kami

1. Pergi ke menu “Components > Contacts > Contacts”

2. Klik butang “New”

3. Masukkan info untuk dihubungi.

1

2

1 –Name - Masukkan nama syarikat atau nama anda.

2 – Other Information - Masukkan waktu pejabat atau sebarang maklumat tambahan

tambahan (jika ada). Alamat pejabat tidak perlu dimasukkan di sini.

29

4. Klik Contact Details pada sebelah kanan skrin.

5. Klik butang “Save & Close”

1

2

3

4

5

6

7

8

9

10

11

12

1 –Image - Masukkan gambar seperti gambar premis / pejabat atau gambar anda.

2 –Position - Masukkan seperti Pejabat Urusan atau jawatan anda.

3 –Email - Masukkan e-mel syarikat anda.

4 –Address - Masukkan alamat syarikat anda.

5 –City or Suburb - Masukkan bandar.

6 –State or Province - Masukkan negeri.

7 –Postal / ZIP Code - Masukkan poskod.

8 –Country - Masukkan negeri.

9 –Telephone - Masukkan nombor telefon.

10 –Mobile - Masukkan nombor telefon bimbit.

11 –Fax - Masukkan nombor faksimili.

12 –Website - Masukkan laman web syarikat.

30

6. Pergi ke “Menus > Main Menu”

7. Klik butang “New”

8. Masukkan info di bawah

9. Klik butang “Save & Close”

1

2 3

1 –Menu Title - Masukkan tajuk Menu. Contoh Hubungi Kami.

2 –Menu Item Type – Pilih Single Contact.

3 –Select Contact - Pilih nama syarikat atau nama anda yang telah anda masukkan pada

ruangan Cantact Details sebelum ini.