MODUL BENGKEL PEMBANGUNAN LAMAN WEB

(1)

(2)

halaman

PENDAHULUAN

3

1- PENGENALAN

•

1.1 Static vs Dynamic

•

1.2 Sejarah Ringkas Joomla!

•

1.3 Apa itu Joomla!

4

2- INSTALASI JOOMLA! & RUANG KERJANYA

•

2.1 Ruang Kerja Joomla!

•

2.2 Control Panel

•

2.3 Menu-menu Administrator

5

8

11

13

3- MODULE

•

3.1 Module Position

•

3.2 Instalasi New Module (

external

)

•

3.3 Membina New Module (

internal

)

15

18

20

4- CONTENT - SECTION, CATEGORY & ARTICLE

•

4.1 Membina Section

•

4.2 Membina Category

•

4.3 Membina Article

o

4.3.1 Memasukkan Gambar Dalam Article

o

4.3.2 Memasukkan Read more.. dalam Article

o

4.3.3 Memasukkan Pagebreak dalam Article

o

4.3.4 Butang Toggle Editor

22

24

25

26

28

30

31

33

5- MEMBINA MENU

•

5.1 Link kepada Section

•

5.2 Link kepada Category

•

5.3 Link kepada Article

•

5.4 Link kepada Contact

•

5.5 Link kepada External Link

•

5.6 Link kepada Web Links

34

39

40

44

45

6- PENUTUPAN SEMENTARA WEB SITE

47

7- UBAH LOGO JOOMLA

49

8- INSTALASI TEMPLATE BARU JOOMLA

55

9. COMPONENT

58

10. SITE MAP

65

11. E-COMMERCE: MENGGUNAKAN PERISIAN VIRTUEMART

66

(3)

PENDAHULUAN

Syukur kepada Yang Maha Esa kerana diberi kesempatan untuk menyiapkan modul

yang serba ringkas ini.

Modul ini penulis karang berdasarkan pengalaman bekerja setiap hari dengan Joomla!

dan Mambo (versi sebelum Joomla!) dalam menyelenggara dan mengemaskini laman

web UiTM Sabah. Di samping itu, penulis juga merujuk kepada buku-buku elektronik

mengenai Joomla! yang bertaburan di internet serta laman-laman web yang

menyediakan tutorial mengenai pembangunan laman web menggunakan CMS Joomla!.

Ini supaya menjadikan modul/nota ini lebih meyakinkan dan tepat sebagaimana yang

dikehendaki.

Penulis juga menggunakan istilah asal Inggeris dalam menyatakan perkataan-perkatan

tertentu dalam CMS Joomla! meskipun ada terjemahannya dalam bahasa Malaysia. Ini

bagi memudahkan pengguna mencari perkataan itu semasa menggunakan modul ini

ketika mengikuti bengkel dan juga apabila menelaahnya sendirian pada hari kemudian.

Diharapkan modul yang ringkas ini dapat memberi manfaat walaupun sedikit, terutama

bagi yang baru mula mengenali apa itu CMS Joomla! yang semakin terkenal di dunia

internet sekarang.

Penulis memohon maaf di atas segala kekurangan yang terdapat dalam modul ini.

Penulis juga mengalu-alukan sebarang komen dan pandangan mengenai modul ini

supaya ia dapat diperbaiki pada masa akan datang. Insya-Allah modul ini akan diteliti

dan dari masa ke semasa bagi mempertingkatkan lagi mutu persembahan.

Terima kasih.

MAZUKI IZANI ISMAIL

Fasilitator Bengkel Laman Web Joomla! bagi SPUS2012

Ketua Administrator Laman Web UiTM Cawangan Sabah

15 Mei 2012

(4)

1- PENGENALAN

1.1 Static vs Dynamic

Cara tradisional membina laman web sebelum ini adalah dengan menggunakan bahasa HTML. Jika ada apa-apa perubahan yang ingin dilakukan (update), web designer akan menggunakan HTML Editor seperti Adobe Dreamweaver, Microsoft FrontPage dan lain-lain secara manual. Ia tidak menjadi masalah jika saiz satu-satu website itu kecil dan simple. Bagaimana kalau ia sebuah website yang besar? Sudah tentu memerlukan masa yang lebih untuk mengemaskini dan yang lebih malang lagi ialah jika fail asal website tersebut hilang kerana kerosakan hard-disk dan sebagainya. Jika anda membangunkan website menggunakan Adobe Dreamweaver, Microsoft FrontPage dan yang seumpamanya, fail asal website amat diperlukan bahkan wajib ada jika anda ingin buat kemaskini ke atasnya. Jadi, perlu ada satu cara untuk menguruskan semua kandungan dalam website dengan cara yang lebih cekap. CMS (Content Management System) mempunyai pelbagai kelebihan kerana ia mempunyai struktur dinamik. Apabila satu menu diubah, ia akan reflek ke seluruh website, tidak kira kecil atau besarnya saiz satu-satu website tersebut. Kandungan (content) website seperti teks, imej dan lain-lain akan disimpan dalam satu pangkalan data dan mudah untuk distruktur semula mengikut kehendak tertentu. CMS Joomla mempunyai ciri-ciri yang berkuasa seperti contact form dan butang search (fungsi carian) yang sudah sedia dibina (built-in).

1.2 Sejarah Ringkas Joomla!

Pada tahun 2000, sebuah syarikat Australia, Miro telah membangunkan satu CMS milik penuhnya yang dikenali sebagai Mambo. Setahun kemudian, Mambo disebarkan (released) secara percuma kepada umum di bawah GNU General Public License (GPL). Ia kemudiannya dengan cepat menarik minat dan dukungan daripada komuniti pengguna dalam masa yang singkat. Tetapi pada tahun 2005, pertelingkahan mengenai hakcipta tercetus dengan Jawatankuasa Pengendali Mambo yang menyebabkan kebanyakan ahli Pasukan Teras Mambo (Mambo Core Team) berselisih faham lalu berpecah. Perpecahan ini akhirnya melahirkan Joomla!. Joomla!, secara rasminya dilancarkan dengan versi 1.0 pada 16 September 2005. Pada 21 Januari 2008, Joomla! versi 1.5 dikeluarkan. Pada ketika ini, CMS Joomla! benar-benar telah menjadi CMS antarabangsa yang boleh mendukung extended character sets dan juga menyokong (support) bahasa yang penulisannya yang bermula dari kanan ke kiri. Versi terkini 1.6 dilancarkan pada tahun 2011.

Berikut adalah beberapa jenis web site yang boleh dibangunkan oleh Joomla! • Web site korporat

• Web site e-commerce

• Web site untuk perusahan kecil • Web site kerajaan

• Web site untuk organisasi non profit • Web site keperluan internet

• Web site sekolah dan institusi pengajian tinggi • Web site peribadi atau blog

• Web site majalah, akhbar, tabloid.. • Dan banyak lagi

Forum dan komuniti pendokong Joomla! boleh diikuti melalui URL berikut:

(5)

2) http://www.joomlamalaysia.org/Joomla Malaysia (dalam bahasa Malaysia) 3) http://id-joomla.com/ (dalam bahasa Indonesia)

1.3 Apa itu Joomla!?

Joomla! adalah salah satu alat (tools) untuk membina laman web di internet.

Joomla! adalah sebuah perisian terbuka (Open Source) Content Management System (CMS) yang digunakan untuk membina web site, mulai daripada web site yang sangat sederhana hinggalah ke web site yang sangat kompleks.

Joomla! merupakan pengembangan daripada Open Source Mambo.

Perkataan Joomla! adalah fonetik perkataan bahasa Swahili "Jumla", yang bermaksud "all together" (bersama-sama) atau "as a whole" (untuk semua)i. Dalam bahasa Malaysia, Joomla! samalah dengan “Jumlah” yang juga bermaksud TOTAL. Begitu juga dalam bahasa Indonesia. Dalam bahasa Arab, Joomla! ( ) bermaksud SUM atau TOTAL dan juga bermaksud “whole sentence”. ii.

Ini memberi faham kepada kita bahawa Joomla! ini boleh dipakai bersama-sama (percuma) dan dibangunkan untuk semua, semua lapisan, semua bangsa, semua negara. Dan, semua orang boleh menyumbang ke arah penambahbaikan sistem ini sama ada terhadap template, plug-in, component, module dan sebagainya.

Joomla! adalah perisian percuma yang boleh dimuat turun oleh sesiapa sahaja. Ia boleh dimuat turun di laman web rasminya di www.joomla.org

Terdapat beribu-ribu extension atau plug-in yang boleh dimuat turun secara percuma. Ia boleh diakses daripada URL http://extensions.joomla.org/. Semua orang juga boleh menyumbang extension masing-masing jika mereka ada kepakaran.

2- INSTALASI JOOMLA! & RUANG KERJANYA

Cara paling senang dan cepat untuk install perisian Joomla ialah melalui cPanel dan Fantastico atau Softaculous di hosting masing-masing. Ikuti langkah berikut:

1. Masuk ke cPanel hosting anda. Biasanya ditambah “cpanel” di akhir URL website. Contohnya

www.spus.biz/cpanel. Pemilik webhosting diminta masukkan username dan password untuk akses ke Control Panel.

(6)

3. Di sebelah kiri, klik pada Portals/CMS Joomla.

4. Di sebelah kanan, klik pada tab Install. Masukkan maklumat yang diminta:

Gambarajah 2.1

(7)

5. Selanjutnya satu mesej akan anda terima menandakan instalasi anda telah berjaya. Simpan maklumat yang telah diberikan.

Namakan direktori

Namakan database

Masukkan nama laman web anda

Masukkan keterangan laman web anda

Namakan table dalam database

Sila tick di sini jika anda mahu install sample data

Klik butang ini untuk

mulakan installation Gambarajah 2.3

(8)

Semasa proses instalasi sebelum ini, ada ditanyakan samada anda ingin install sample data atau tidak. Jika anda pilih supaya diinstall sample data, website anda yang akan terhasil nanti adalah lengkap dengan menu, halaman-halaman, module dan lain-lain. Anda boleh bandingkan website yang diinstall dengan sample data dan tanpa sample data berdasarkan gambarajah 2.5 dan 2.6 berikut.

Laman web dengan sample data

Laman web tanpa sample data

Ruang Kerja Joomla!

URL untuk anda mengedit dan kemaskini laman web Joomla! anda ialah di

http://spus.biz/{nama-domain-anda}/administrator.

Masukkan username sebagai admin, dan password adalah 1234. Klik Login.

Untuk masuk ke ruang kerja Joomla!, anda hendaklah log in terlebih dahulu (Lihat gambarajah 2.7). Masukkan maklumat username dan password semasa pendaftaran.

Gambarajah 2.5

(9)

Anda boleh mula masuk ke kawasan kawalan atau Control Panel bagi website anda. Terdapat beberapa menu di situ untuk mengawal dan mengemaskini website anda.

Klik Preview untuk melihat website anda yang belum dibuat apa-apa modifikasi/kemaskini.

Dan inilah laman web anda yang diinstall by default (Lihat gambarajah 2.9). Anda harus mengubah kandungan laman ini kepada kandungan yang bersesuaian dengan keperluan anda. Template juga boleh ditukar, begitu juga modul, ia boleh dibuang dan ditambah dan banyak lagi.

Gambarajah 2.7

Gambarajah 2.8

(10)

(11)

Control Panel

Berikut adalah wajah Control Panel anda di Joomla!. Control Panel adalah laman utama administrator untuk membina dan membuat maintenance ke atas laman web. Menu yang disediakan adalah Site, Menus, Content, Components,

Extensions, Tools dan Help.

Peranan ikon-ikon yang terdapat di Control Panel.

Add New Article

– Klik ikon ini untuk membuat laman article baru (new article page). Ini samalah juga kalau anda klik Article Manager New.

Article Manager

- Article Manager akan mempamerkan senarai article yang telah dicipta/dibuat dalam Joomla! sama ada oleh anda sendiri atau pun user yang lain. Di sini, anda juga boleh tambah, edit, padam satu-satu laman article.

Front Page Manager

- Front Page Manager akan mempamerkan semua article yang anda telah setkan supaya dipaparkan di muka depan (Front Page) laman web.

Section Manager

– Digunakan untuk menambah, edit dan padam satu-satu section. Administrator Menu

Gambarajah 2.11

(12)

Category Manager

- Digunakan untuk menambah, edit dan padam satu-satu category.

Media Manager

- Media Manager membolehkan anda upload fail-fail imej, audio, video, dokumen dan lain-lain ke Joomla!.. Apabila sudah diupload, anda boleh masukkan atau linkkan fail tersebut dalam mana-mana article atau category atau section dalam CMS.

Menu Manager

– Menu Manager berfungsi sebagai pembuat menu item baru atau menu-menu baru.

Language Manager

– Klik ikon ini jika anda ingin tukarkan bahasa paparan laman web sama ada untuk frontend atau backend atau kedua-duanya sekali.

User Manager

- User Manager membolehkan anda mengurus akaun pengguna.

Global Configuration

(13)

Menu-menu Administrator

Menu sebelah atas Control Panel adalah menu lengkap keseluruhan bagi administrator untuk mengawal laman webnya.

Site – Menu drop-down Site, seperti dalam gambarajah 2.11 mengandungi pautan ke laman-laman yang menguruskan user, fail-fail media dan juga setting

konfigurasi.

Control Panel – Sama seperti yang dibincangkan sebelum ini.

User Manager - User Manager membolehkan anda mengurus akaun pengguna

Media Manager - Media Manager membolehkan anda upload fail-fail imej, audio, video, dokumen dan lain-lain ke Joomla!.. Apabila sudah diupload, anda boleh masukkan atau linkkan fail tersebut dalam mana-mana article atau category atau section dalam CMS.

Global Configuration - Setting Joomla! boleh diubahsuai di Global Configuration.

Logout – Untuk keluar daripada Administrator Backend.

Menus - Menu drop-down Menus membolehkan anda akses kepada halaman-halaman yang mana anda boleh tambah, edit atau padam menu-menu tertentu atau item-item menu-menu tertentu.

Menu Manager – Di sini anda boleh tambah, edit atau padam mana-mana menu.

Menu Trash – Item-item menu yang telah dipadam akan diletakkan dalam Menu Trash. Ia samalah seperti Recycle Bin dalam komputer anda.

Main Menu – Ini adalah nama cadangan bagi menu utama di muka depan laman web. Anda boleh modify nama ini dengan nama lain. Dengan mengklik Main Menu, anda boleh tambah, edit atau padam item menu.

*Jika anda mempunyai lebih dari satu menu, ia akan disenaraikan berasingan dalam menu drop-down Menus. Contohnya adalah seperti

gambarajah 2.13. Selain daripada Main Menu, ada lagi menu-menu lain, iaitu User Menu, Top Menu, Resources, Example Pages dan Key Concepts.

Content – Content adalah ‘hati’ bagi CMS. Menu drop-down Content membolehkan anda akses kepada bahagian asas Joomla! iaitu pengurusan article sebagaimana struktur hirarki laman web anda. Kedua-duanya adalah bahagian yang asas/fundamental; struktur & kandungan.

Article Manager – mempamerkan senarai article yang telah dicipta/dibuat dalam Joomla! sama ada oleh anda sendiri atau pun user yang lain. Di sini, anda juga boleh tambah, edit, padam satu-satu laman article.

Article Trash – Article yang telah dipadam akan diletakkan dalam Article Trash. Ia bertindak seperti Recycle Bin, jika anda masih perlukannya lagi, ia boleh direstore semula.

Section Manager - Digunakan untuk menambah, edit dan padam satu-satu section.

Category Manager - Digunakan untuk menambah, edit dan padam satu-satu category.

Gambarajah 2.13

Gambarajah 2.15 Gambarajah 2.12

(14)

Front Page Manager - mempamerkan semua article yang anda telah setkan supaya dipaparkan di muka hadapan (Front Page) laman web.

Components – Menu drop-down bagi Component berperanan menyenaraikan semua component yang telah dibina-sedia (built-in) dan juga component yang diinstall oleh anda kemudiannya.

Extensions – Menu drop-down bagi Extensions menyenaraikan links untuk menginstall dan mengurus extension anda yang lain, iaitu modules, plug-ins, templates, and languages.

Install/Uninstall – Digunakan untuk install & uninstall extensions.

Module Manager – Di sini anda boleh tambah, edit dan padam module yang telah diinstall. Anda juga boleh pindahkan atau susun kedudukan satu-satu module.

Plugin Manager – Ia membolehkan anda configure plug-in yang telah diinstall. Pilihannya termasuklah enable, disable, susunan kedudukan dan peringkat akses (access level).

Template Manager – Di sini anda boleh tukarkan template yang sedia ada dengan template yang lain. Anda juga boleh modify satu-satu template yang sedang digunakan mengikut kesesuaian dan citarasa sendiri.

Language Manager – Selepas menginstall satu-satu bahasa, anda boleh tukarkan bahasa pilihan anda di sini dengan menjadikannya sebagai ‘default’.

Tools – mengandungi pelbagai item yang penting kepada Joomla!

Read Message – untuk membaca mesej peribadi dalaman (internal) yang dihantar kepada anda.

Write Message – untuk menulis mesej peribadi dalaman (internal) dan menghantarkannya kepada user lain yang boleh akses kepada backend web site anda.

Mass Mail – menyediakan cara mudah untuk menghantar email kepada sama ada semua user anda atau kumpulan user anda yang tertentu.

Global Check-in– Item yang telah di’check-out’ (tetapi tidak kembali check-in) tidak boleh diedit oleh user lain. Dengan mengklik Global Check-in, ia boleh mengcheck-in semula semua item tersebut.

Clear Cache – ia berfungsi untuk ‘clear’kan cache bagi web site anda.

Purge Expired Cache – memadamkan semua fail-fail cache yang sudah ‘expired’.

Help – merupakan akses kepada dokumen Help dan maklumat sistem.

Joomla! Help – Link ini adalah untuk ke panduan ‘Help’ dalaman Joomla! (internal).

System Info – mengandungi maklumat mengenai setting komputer pelayan (server) dan kunci maklumat Joomla!.

Gambarajah 2.16

Gambarajah 2.17

Gambarajah 2.18

(15)

3- MODULE

•

Module Position

•

Instalasi New Module (

external

)

•

Membina New Module (

internal

)

Module Position

Kotak Biru = Module Position Kotak Kuning = Module Kotak Merah = Content

(16)

Susunan module di laman web boleh diubah kedudukannya berdasarkan kedudukan yang dikhaskan oleh satu-satu template. Apabila anda menginstall Joomla!, secara default, ia diinstall dengan template bernama “rhuk_milkyway”. Setiap template mempunyai position yang tersendiri dan berbeza antara satu template dengan template yang lain. Position yang disediakan untuk template rhuk_milkyway ini ialah: top, user1, user2, user3, user4, breadcrumb, left, right, footer dan syndication. Lihat gambarajah

3.1.

Module-module (kotak berwarna kuning) tadi boleh diubah kedudukannya. Untuk mengubahnya, sila ke Extensions Module Manager. (Lihat Gambarajah 3.2)

Gambarajah 3.3 adalah paparan Module Manager. Pada column Module Name disenaraikan module-module yang siap disediakan untuk anda. Module-module tersebut boleh di’enable’kan dan boleh di’disable’kan. Anda juga boleh buang (delete) module yang tidak diperlukan. (Jika anda tidak yakin keperluannya, lebih baik jangan delete, hanya ‘disable’kannya sahaja.

Terdapat beberapa column dalam paparan Module Manager. Perhatikan column Enabled. Di bawahnya ada tanda right (warna hijau) dan juga tanda pangkah (warna merah). Tanda right (warna hijau) itu menandakan module itu sedang aktif dan sedang digunakan. Tanda pangkah (warna

merah) itu

menunjukkan satu-satu module itu tidak aktif. Untuk mengaktifkan module yang tidak aktif, klik satu kali pada tanda pangkah itu atau klik butang Enable di bahagian atas laman. Untuk tidak aktifkan module yang aktif, klik satu kali butang right tersebut atau klik butang Disable di bahagian atas laman.

Aksi enable dan disable anda dalam Module Manager ini akan mempengaruhi paparan muka depan laman web anda. Untuk mecuba, sila disablekan semua module kecuali Main Menu. Lihat gambarajah 3.4 berikut:

Gambarajah 3.2

(17)

Anda akan dapati hanya module Main Menu yang aktif di samping kandungan berita. Untuk aktifkan module yang lain, sila ke Module Manager semula dan aktifkan module yang diperlukan sahaja. Position juga anda boleh tentukan sama ada anda mahukan satu-satu module itu muncul di sebelah kanan, kiri, bawah, atas dan sebagainya. Ia bergantung sepenuhnya kepada kreativiti anda.

Anda juga boleh edit module tersebut, boleh buat salinan (copy) dan juga boleh membina module baru. Untuk melakukan tindakan-tindakan tadi, tick pada kotak di column sebelum column Module Name tertentu, kemudian pilih sama ada mahu Enable, Disable, Copy, Delete atau Edit.

Untuk membina yang baru, klik butang New.

Gambarajah 3.4

(18)

Instalasi New Module (

external

)

Terdapat banyak module yang dibina dan disebarkan secara percuma di internet, atau lebih khususnya di laman web rasmi Joomla! iaitu di http://extensions.joomla.org/extensions. (Lihat gambarajah 3.6)

Pada ruang search di laman ini, taipkan “visitor counter”. Tujuannya adalah untuk dapatkan module pembilang pelawat ke laman web anda. Ia bukan sahaja membilang, tetapi membuat statistik berapa jumlah kunjungan untuk hari ini, semalam, minggu ini, minggu lepas, bulan ini, bulan lepas dan lain-lain. Setelah butang search ditekan, terdapat 17 dapatan yang ditemui.Ada yang ‘type’nya bersifat Commercial (berbayar) dan ada juga Non-Commercial (percuma). Penulis screen-shotkan Vinaora Visitors Counter seperti gambar berikut untuk tutorial ini.

Klik butang Download untuk muat turun fail ini. Fail dalam format .zip ini sebenarnya ia bukan hanya module semata-mata, tetapi juga mengandungi component dan plug-in.

Bagaimana untuk mengetahuinya? Jawabnya ialah dengan melihat ikon C, M dan P (C-Component, M-Module, P-Plug-in) seperti dalam gambarajah 3.8.

Vinaora Visitors Counter ini antara yang popular dan banyak digunakan.

Gambarajah 3.6

(19)

Pilih mod_vvisit_counter_for_joomla_1.5 kerana versi Joomla! yang anda install sekarang (untuk tutorial) ini ialah versi 1.5. Klik link tersebut dan simpan ia dalam komputer anda. Untuk page yang seterusnya, pilih versi terkini, iaitu 2.0.0. Fail tersebut dalam bentuk .zip.

Pergi ke menu Extensions Install/Uninstall.

Klik butang Choose File, kemudian cari di mana lokasi fail vinaora counter yang telah anda muat turun sebelum ini. Klik fail tersebut untuk pilih. Klik butang Upload File & Install.(Lihat Gambarajah 3.11)

Setelah berjaya proses instalasi tersebut, sila ke Module Manager untuk menyusun letak counter anda, sama ada di sebelah kanan atau kiri laman web. Untuk melihat hasilnya, pergi ke laman web anda dan klik butang refresh untuk segarkan.

Dalam gambarajah 3.12, anda akan dapati counter tersebut berada di atas daripada Main Menu di laman utama. Ini mungkin tak berapa cantik dipandang. Anda perlu ubah urutan (order) ini

seelok-eloknya di bawah Main Menu. Masuk semula ke backend, pergi ke Main Menu dan ubah

(20)

New Module (

internal

): Module Feed Display

Di sini anda akan membina module baru. Module ini sebenarnya sudah ada dibina sedia oleh Joomla!. Walau bagaimanapun, anda akan ditunjukkan bagaimana untuk membina satu module yang baru sebagai satu pelajaran. Dan contoh yang penulis akan tunjukkan di sini ialah bagaimana untuk membina Feed Display module.

Feed Display Module bolehlah difahami sebagai ‘container’ menyediakan ringkasan tajuk-tajuk berita/posting dari laman web lain supaya dipaparkan di laman web anda sendiri. Dengan menggunakan Feed Display Module di laman web sendiri, anda tidak perlu sentiasa ke laman tersebut untuk dapatkan maklumat terkini. Ia boleh diakses daripada laman web anda. Untuk menjadikannya satu kenyataan, anda perlu mengetahui URL bagi RSS daripada laman web yang anda ingin ambil maklumatnya. Sebagai contoh, ambil laman web UiTM Sabah sebagai ’bahan ujikaji’. Di laman web UiTM Sabah, penulis sudah aktifkan URL untuk RSS. Klik pada Feed Entries, dan salin URLnya.

Sekarang, bina module tersebut. Untuk membina module yang baru, pilih Extensions Module Manager. Klik butang New. Seterusnya, pada senarai module yang disediakan di situ, klik Feed Display.

Anda diminta isikan maklumat-maklumat seperti gambarajah 3.16.

Title: “UiTM Sabah News” Show Title: “Yes”

Enabled: “Yes” Position: “Left”

Order: (pilih tempat paling bawah) Access Level: “Public”

Menu Assigment: “All” (supaya semua page ada RSS ini)

Feed URL: (masukkan RSS URL) RTL Feed: “No” (RTL=right to left) Feed Description: “No”

Feed Image: “No”

Items: “3” (jumlah ini bergantung kepada anda)

Item Description: “No”

Gambarajah 3.14 Gambarajah 3.15

(21)

Klik butang Save.

Pergi laman web anda (frontend) untuk melihat hasilnya. Klik butang refresh di browser. Seharusnya anda akan dapati seperti gambarajah 3.17.

Sebagai latihan, tambahkan satu lagi module Feed Display. Kali cuba masukkan portal berita Utusan Malaysia. Ia sepatutnya menjadi seperti gambarajah 3.18.

Gambarajah 3.17

(22)

4- SECTION, CATEGORY & ARTICLE

•

4.1 Membina Section

•

4.2 Membina Category

•

4.3 Membina Article

Ketiga-tiga section, category & article boleh dinamakan sebagai Content atau Kandungan.

Ramai yang keliru mengenai 3 item tadi, iaitu section, category & article. Secara ringkasnya, satu-satu article biasanya berada di bawah category, dan category pula berada di bawah section. Ini bermakna, section adalah item paling utama. Selepas section adalah category dan selepas category, barulah ada article. Article ini biasanya halaman yang berupa berita atau apa sahaja atau (menurut penulis) ia mungkin boleh dikenali sebagai web page seperti dalam pembinaan web site menggunakan MS FrontPage, Dreamweaver dan sebagainya.

Section adalah satu kontena yang mempunyai 1 atau lebih category. Section adalah top level dalam 3 baris hirarki yang Joomla! gunakan untuk menguruskan content.

Category adalah satu kontena yang mempunyai 1 atau lebih article. Category bolehlah disamakan dengan sub folder bagi folder Section. Section pula adalah folder utama.

Article adalah teks atau gambar yang membentuk satu laman web. Article disusun dalam hirarki spesifik yang mempunyai 2 peringkat (level):

Level 2

Category 1

Article 1 Article 2

Category 2

Article 1 Article 2

Category 3

Article 1

Category 1

Article 1 Article 2 Article 3

Category 2

Article 1 Article 2 Article 3

BAB101/110

Semester Julai 2009 Semester April 2010

BAB151/120

BAB501

Semester Julai 2009

Kelas DIB3 Kelas DBS4 Kelas DPP1

Semester April 2010

(24)

4.1 Section, Category & Article: Membina Section

Menu Section Manager untuk membina section boleh diakses melalui menu Content Section Manager atau ikon Section Manager di Control Panel.

Dalam tutorial ini, cuba bina section seperti dalam gambarajah 4.3 iaitu Kuiz atau dengan nama lain yang bersesuaian. Klik butang New, kemudian masukkan maklumat yang diminta.

Setelah maklumat seperti gambarajah 4.5 telah dimasukkan, klik butang Save. Anda akan dapat maklumat “Section Saved” dan satu section baru bernama Kuiz telah disenaraikan bersama section-section lain yang telah sedia dibina oleh Joomla!. (Lihat Gambarajah 4.6)

Biarkan Access Level sebagai Public supaya semua pengunjung dapat akses.

Gambarajah 4.5

Gambarajah 4.6

Gambarajah 4.4

(25)

4.2 Section, Category & Article: Membina Category

Menu Category Manager adalah untuk membina category, ia boleh diakses melalui menu Content Category Manager atau ikon Category Manager di Control Panel.

Dalam tutorial ini, cuba bina category seperti dalam gambarajah 4.3 iaitu BAB101/110 atau dengan nama lain yang bersesuaian. Klik butang New, kemudian masukkan maklumat yang diminta.

Maklumat seperti gambarajah 4.8 telah dimasukkan. Pastikan category BAB101/110 itu diletakkan di bawah section Kuiz. Klik butang Save. Anda akan dapat maklumat “Category Saved” dan satu category baru bernama BAB101/110 telah disenaraikan bersama category-category lain yang telah sedia dibina oleh Joomla!. (Lihat gambarajah 4.9)

Biarkan Access Level sebagai Public supaya semua pengunjung dapat akses.

Pastikan categoryBAB101/110 ini diletakkan di bawah Section Kuiz.

(26)

Gambarajah 4.9 menunjukkan bahawa satu category baru yang bernama BAB101/110 telah berjaya dibina, dan ia dibina di bawah section Kuiz.

(27)

4.3

Section, Category & Article: Membina Article

Menu Article Manager untuk membina article boleh diakses melalui menu Content Article Manager atau ikon Article Manager di Control Panel.

Dalam tutorial ini, cuba bina article seperti dalam gambarajah 4.3 iaitu Semester Julai 2009 atau dengan nama lain yang bersesuaian. Klik butang New, kemudian masukkan maklumat yang diminta.

Klik butang Save untuk simpan maklumat tersebut. Sekarang, cuba bina satu lagi article bertajuk Semester April 2010 dan letakkan ia di bawah section dan category yang sama dengan article Semester Julai 2009 tadi. Seharusnya anda akan dapat peroleh hasil seperti gambarajah 4.9, iaitu 2 article di dalam category dan section yang sama.

Latihan:

Sila bina section, category dan article berikut sepertimana dalam gambarajah 4.3.

Section KUIZ

Category BAB101/110

Article Semester Julai 2009 Article April 2010

Category BAB151/120 Category BAB501

Section OGA

Category Semester Julai 2009 Article Kelas DIB3 Article Kelas DBS4 Article Kelas DPP1 Category Semester April 2010

Article Kelas DIB4 Article Kelas DBS3 Article Kelas DPP2 Article Kelas BBA Pastikan article Semester

Julai 2009 ini diletakkan di bawah SectionKuiz.

Pastikan article

Semester Julai 2009 ini diletakkan di bawah category

BAB101/110.

Gambarajah 4.8

(28)

4.3.1 Memasukkan Gambar Dalam Article

Pergi ke menu Content Article Manager. Bina satu article baru dengan mengklik butang New. Letakkan cursor di sini.

Seterusnya klik butang Image di bawah dan sebelah kiri text editor untuk dapatkan imej dari komputer anda untuk diupload. Pilih fail imej untuk diupload.

Selanjutnya klik Choose File.

(29)

Pilih fail yang ingin diupload kemudian klik butang Start Upload. (Lihat gambarajah 4.11)

Jika berjaya, mesej Upload Complete akan keluar. (Lihat gambarajah 4.12)

Seterusnya, pilih (klik satu kali) fail imej yang telah diupload tadi, kemudian klik butang Insert. (Lihat gambarajah 4.13)

Selesai sahaja butang Insert ditekan, imej tersebut akan terus ditampalkan di dalam article anda.

Gambarajah 4.11

Gambarajah 4.12

(30)

Klik butang Save untuk simpan.

4.3.2 Memasukkan Read more.. dalam Article

Butang Read more berfungsi untuk menyekat satu artikel yang panjang daripada dopaparkan secara keseluruhannya, sebaliknya digantikan dengan butang ini jika pembaca ingin membaca selanjutnya satu-satu artikel. Biasanya satu atau dua ayat permulaan dijadikan sebagai intro. Selepas daripada itu, masukkanarahan Read more dengan mengklik butang Read more di bawah ruang menulis (text editor). Dengan mengklik butang ini, satu horizontal line akan muncul menandakan fungsi read more sudahpun diaktifkan. Selepas butang itu dimasukkan,HTML berikut akan dimasukkan secara automatic ke dalam artikel anda.

<hr id="system-readmore" />

Apabila artikel ini diujilari di frontend laman web anda, Joomla akan menambah link “Read more…” pada garisan ini.

(31)

Rajah - Garisan dot merah menandakan fungsi “Read more...” telah dimasukkan di kawasan tersebut

4.3.3 Memasukkan Pagebreak dalam Article

Pagebreak biasanya digunakan untuk mengurangkan scrolling apabila membaca artikel yang panjang. Dengan mengklik butang pagebreak, ia akan memberikan anda pilihan untuk memasukkan Page Title dan “Table of Contents Alias.” Kod HTML berikut akan dimasukkan ke dalam artikel anda:

(32)

(33)

4.3.4 Butang Toggle editor

Butang ini digunakan ‘ON’ atau ‘OFF’ fungsi WYSIWYG editor supaya anda boleh terus mengedit kod HTML.

==============================================================================

!

" #

• $

%

• &

%

(34)

MEMBINA MENU

•

Link kepada Section

•

Link kepada Category

•

Link kepada Article

•

Link kepada Contact

•

Link kepada External Link

•

Link kepada Web Links

Ramai yang menjangka apabila dibina section, category dan article di bahagian Content, menu akan terbina secara automatik. Sebenarnya TIDAK.

Membina menu adalah antara yang terpenting selepas membina section, category dan article. Tanpa membina menu untuk setiap item tadi, amat sukar bagi pengguna membuat akses kepada apa yang anda tulis dalam section, category dan article, terutama sekali jika satu-satu article tadi tidak di’publish’ di muka hadapan (front page).

Jika anda perasan, apa yang anda tulis sebelum di bahagian article dan apa yang anda buat seperti membina section dan category, ia tidak kelihatan pun di muka hadapan laman web. Begitu juga ia tidak disenaraikan pun di himpunan menu utama di Main Menu.

Untuk memudahkan pengguna mencapai isi kandungan laman web anda, anda seharusnya membina menu yang mana menu itu berfungsi ‘memanggil’ article yang telah anda masukkan. Untuk membolehkan menu itu ‘memanggil’ article-article tertentu, anda hendaklah membuat link yang betul semasa membina menu. Kesilapan me’link’kan satu-satu menu ke satu-satu article menyebabkan paparan yang keluar tidak selari dengan menu. Sebagai contoh, menu anda bernama ”Kuiz BAB101/110”. Apabila pengguna klik pada menu itu untuk dapatkan soalan-soalan kuiz tersebut, tiba-tiba yang keluar di skrin ialah markah OGA pelajar DIB3. Jika ini berlaku, ini bermakna anda telah tersalah membuat sambungan (linkage) daripada menu kepada article yang hendak ditujukan. Untuk itu, anda seharusnya berhati-hati dalam membina menu ini. Pastikan nama menu anda itu sama dengan target article yang hendak disambungkan.

' (

(

' # ( ( (

(

Membina Menu: Link kepada Section

Jika anda klik menu Menus di Control Panel, anda akan jumpa beberapa kumpulan menu yang telah dibina oleh Joomla!. Menu-menu tersebut ialah Main Menu, User Menu, Top Menu, Resources, Example Pages dan Key Concepts. Menu Manager berperanan untuk mengurus menu-menu, termasuklah membina menu baru. Menu Trash pula bertindak sebagai recycle bin. Menu-menu yang telah dipadam boleh dikembalikan semula dengan menekan butang restore.

Walau bagaimanapun, bengkel ini tidak akan membincangkan kesemuanya. Kita hanya akan fokuskan kepada Main Menu. Semua

(35)

menu anda (untuk bengkel ini) hendaklah di’group’kan dalam kumpulan Main Menu.

Klik Menus Main Menu di Control Panel.

Anda akan peroleh paparan seperti gambarajah 5.2.

Apa yang digambarkan di sini adalah refleksi daripada apa yang akan dipaparkan di Main Menu di muka hadapan laman web anda. Sila ke muka hadapan laman web anda. Anda akan dapati paparan seperti gambarajah 5.3.

Jika anda perhatikan, Main Menu di backend (administration) adalah sama dengan Main Menu di frontend (muka hadapan). Jadi, apa-apa menu yang anda tambah di Main Menu di backend (administration) akan turut memberi kesan kepada Main Menu di frontend (muka hadapan).

Sekarang, tambahkan menu untuk mencapai section, category dan article yang telah anda bina sebelum ini.

Sama

Gambarajah 5.2

(36)

Apa yang perlu anda buat terlebih dahulu ialah menu untuk section, diikuti dengan menu category di bawah section, kemudian diikuti lagi oleh menu article di bawah category. Ia adalah aturan yang sama seperti membina kandungan/content sebelum ini.

Pergi semula ke backend. Disablekan atau unpublish semua menu kecuali Home. Lihat gambarajah 5.4.

Klik butang New untuk membina menu baru.

Pada “Select Menu Item Type”, pilih Articles.

Kemudian pilih Section Layout untuk membina menu Section. Perlu diingat, menu section yang pertama anda ialah bernama “KUIZ”

Tanda pangkah

menunjukkan

unpublished

Tanda

right

menunjukkan

published

Gambarajah 5.4

Gambarajah 5.5

(37)

Kemudian, masukkan maklumat yang diminta.

Klik Save untuk simpan.

Lancarkan browser anda dan lihat hasilnya.

)

& *

+ $

( , %- - (

. / 0 1 23 4 $

* 3 5

( ) )

) ) 6 /!

* /(

Masukkan Title Name: Kuiz. Nama ini tak semestinya sama dengan nama section, boleh nama lain. Tapi, bagi tujuan supaya senang ingat dan senang dicapai, disarankan supaya nama menu ini sama dengan nama section yang telah dibina yang akan dilinkkan. Untuk Alias, taipkan nama yang sama dengan title.

Pilih section yang nak disambungkan dengan menu Kuiz tadi. Sudah tentulah

section bernama Kuiz.

Pilih Top jika anda inginkan ia berada di kedudukan paling atas (iaitu bukan sub-menu).

(38)

! $ #

$ $

( ) )

) )

/' )

/ /0 (

(39)

Membina Menu: Link kepada Category

Klik New lagi untuk membina menu yang baru. Pada “Select Menu Item Type”, pilih Articles seperti gambarajah 5.5. Kemudian, kali ini pilih Category List Layout untuk membina menu Category. Menu category perlulah berada di bawah section Kuiz.

Perhatikan category yang baru dicipta tadi. BAB101/110 didapati berada di bawah section Kuiz. Inilah rasional apa yang anda pilih di Parent Item tadi. Jika pada Parent Item tadi anda setkan ia sebagai Top, maka BAB101/110 itu akan berada satu lajur dengan Kuiz, News Feeds dan lain-lain, bukannya sebagai sub-menu kepada Kuiz.

Membina Menu: Link kepada Article

Klik New lagi untuk membina menu yang baru. Pada “Select Menu Item Type”, pilih Articles seperti gambarajah 5.5. Kemudian, kali ini pilih Article Layout. Menu yang ketiga ini bertujuan untuk menghubungkannya dengan article di bawah section Kuiz dan di bawah category BAB101/110.

Kali ini pilih Kuiz, bukannya Top. Kenapa? Sebab kita nak jadikan BAB101/110 itu sebagai sub-menu bagi Kuiz. Kuiz menjadi Parent, manakala BAB101/110 menjadi child.

Pilih category

BAB101/110. Jadi, menu ini akan disambungkan kepada

category BAB101/110 dalam

Content.

Masukkan Title dan Alias.

Gambarajah 5.8

(40)

Seharusnya anda akan memperoleh susunan menu seperti dalam gambarajah 5.11. Kedudukan ini akan menggambarkan kedudukan sebenar menu anda di muka hadapan laman web (frontend)

Latihan:

Sila bina menu lain untuk laman web anda berdasarkan content yang telah anda bina.

Jadikan BAB101/110 sebagai parent bagi menu ini. Ini bermakna, articleSemester Julai 2009 akan berada di bawah BAB101/110.

Cari dan pilih article

bernama Semester Julai 2009. Anda sendiri sudah ketahui di mana article itu berada.

Masukkan Title dan Alias.

Gambarajah 5.10

(41)

Membina Menu: Link kepada Contact

Untuk membina Link kepada Contact, anda perlu dahulu membina contact. Konsepnya sama seperti membina content sebelum ini. Apabila sudah ada content, barulah boleh dibuat menu untuk dilinkkan. Anda hendaklah membina content (section, category & article) dahulu barulah boleh dibina menu. Jadi, binalah contact (senarai nama orang dengan kaedah menghubunginya) dahulu barulah boleh dibina menu.

Jadi, untuk membina contact, sila ke menu Component Contacts Contacts. Dalam component contact, anda hanya boleh membina category sahaja. Tiada pilihan untuk membina section. Ini bermakna, anda hanya mempunyai 1 level sahaja. Category yang telah siap dibina oleh Joomla! ialah Contacts. Buat masa ini, abaikan pembinaan category. Anda hanya perlu masukkan beberapa nama individu lengkap dengan cara perhubungannya dan letakkannya dalam category yang bernama contact yang telah sedia dibina oleh Joomla!.

Dalam category Contacts, terdapat satu nama yang bernama “Name”. Tukarkan Name itu dengan nama yang sesuai seperti nama anda sendiri dan lain-lain.

Isikan maklumat seperti dalam gambarajah 5.14.

Gambarajah 5.12

(42)

Anda akan peroleh hasil seperti gambarajah berikut. Anda boleh tambahkan senarai contact anda dengan menekan butang New. Lakukan seperti langkah sebelum ini.

Setelah berjaya mencipta satu contact, sila kembali ke menu Menus Main Menu di Control Panel.

Gambarajah 5.14

(43)

Pada “Select Menu Item Type”, pilih Contacts. Kemudian, pilih “Standard Contact Layout”.

Pergi ke laman utama (frontend) untuk melihat perubahan yang berlaku. Klik butang Refresh. Lihat gambarajah 5.17 berikut.

Perhatikan menu di Main Menu. Hanya terdapat 3 menu kerana anda sudah disablekan menu-menu yang lain. Ada menu yang baru dibina iaitu Kuiz dan juga Hubungi Webmaster. Cuba klik kedua-dua menu tersebut. Anda akan lihat perbezaan link kepada section, category & article dengan link kepada Contacts. Kedua-duanya mempunyai fungsi yang berbeza.

Gambarajah 5.18 menunjukkan menu Kuiz dan sub-sub menunya.

Isikan Title dan Alias. Apa yang diisi di sini akan dipaparkan di laman utama.

Pilih contact di sini untuk dilinkkan.

Pada Parent Item, pilih Top.

Gambarajah 5.16

Gambarajah 5.17

(44)

Membina Menu: Link kepada External Link

Gunakan menu ini jika anda mahu membuat pautan ke URL luar seperti URL laman web UiTM, URL laman web Utusan Malaysia dan lain-lain.

Pada “Select Menu Item Type”, pilih External Link. Masukkan maklumat seperti dalam gambarajah 5.19.

Masukkan Title dan Alias. Contoh: UiTM Malaysia

Masukkan URL UiTM Malaysia iaitu http://www.uitm.edu.my/

Pilih Top jika anda mahu letakkan menu link ini di tempat teratas.

(45)

Membina Menu: Link kepada Web Links

Jika anda mempunyai sejumlah link untuk dipaparkan, maka Web Links mampu menyediakan kemudahan itu. Daripada senarai link yang ada itu, mungkin boleh dikumpulkan dalam kategori tertentu. Ini bagi memudahkan pengunjung memilih kumpulan link tertentu yang diingininya tanpa perlu melihat satu-persatu link yang disenaraikan. Jadi, mengkategorikan link adalah lebih baik dan lebih tersusun bagi satu-satu laman web daripada membiarkan ia disenaraikan bebas tanpa kategori.

Sebagaimana halnya dengan Contact, Web Links juga perlu dibina terlebih dahulu sebelum boleh dilinkkan dengan menu.

Ambil menu Components Web Links Categories terlebih dahulu untuk membina category. Di situ anda akan jumpa 2 category yang sudah sedia dibina, iaitu Joomla! Specific Links dan Other Resources. Padamkan kedua-dua category itu..

Anda akan perolehi notis seperti berikut:

Category(ies): Joomla! Specific Links cannot be removed as they contain Articles. There may currently be Articles within the Article Trash Manager which you must delete first.

Notis ini memberitahu bahawa category yang bernama Joomla! Specific Links TIDAK BOLEH dipadam kerana ia mengandungi article di bawahnya. Jadi, anda kena padamkan article terlebih dahulu sebelum boleh memadam category Joomla! Specific Links. Klik perkataan Links untuk pergi tempat article disimpan. (Lihat gambarajah 5.20)

Padamkan semua article atau link yang ada di sana. Ini kerana anda tidak perlukan link-link tersebut. (Jika perlukan, sila simpan).

Pergi semula ke Categories untuk membina category.

Binalah category yang bersesuaian. Contoh di sini ialah:

1) Akhbar Online 2) IPTA/S Malaysia

Sila buat dua category ini dengan mengklik butang New seperti biasa. Seharusnya anda akan memperolehi hasil seperti dalam gambarajah 5.22.

Jika anda telah berjaya membina 2 category itu, klik semula di perkataan Links seperti dalam gambarajah 5.21.

Klik butang New untuk mencipta link.

Gambarajah 5.20

Gambarajah 5.21

(46)

Latihan:

Bina beberapa category baru dan masukkan link yang bersesuaian di bawah category tersebut.

=====================

Setelah selesai membina kumpulan web link tertentu, tibalah pula masanya untuk anda membuat menu di laman utama supaya user dapat akses kepada senarai web link yang telah anda masukkan. Jika anda tidak membuat menu yang menghubung terus ke web link seperti langkah yang akan penulis tunjukkan ini, pengunjung anda tidak akan tahu akan kewujudan link-link bermanfaat tersebut di laman web anda. Hanya anda seorang sahaja yang tahu.

OK, klik Menus Main Menu di Control Panel. Pada “Select Menu Item Type”, pilih Web Links. (Lihat gambarajah 5.24)

Kemudian pilih All Categories Web Link Category List Layout supaya menu ini memaparkan semua category yang ada dalam Web Link anda. (Lihat gambarajah 5.25)

Masukkan nama yang sesuai bagi Title dan Alias. Contohnya Web Links. Kemudian klik butang Save.

Untuk melihat hasilnya, sila ke laman utama anda dan klik butang Refresh.

Masukkan Name dan Alias. Contoh: Utusan Malaysia

Pastikan ia berada di bawah category

Akhbar Online.

Gambarajah 5.23

Masukan URL bagi laman web Utusan Malaysia.

Masukan keterangan jika anda mahu.

Gambarajah 5.24

Gambarajah 5.25

(47)

6- PENUTUPAN SEMENTARA WEBSITE

Kadang-kadang anda terpaksa menutup laman web anda buat sementara waktu bagi tujuan kemaskini dan sebagainya. Penulis biasa menghadapi perkara ini apabila tersalah install template baru yang menyebabkan muka hadapan laman menjadi tidak teratur kedudukannya.

Jika ini berlaku, amat tidak elok kalau pengunjung setia anda berkunjung ke laman web anda pada saat rupa laman web anda sedemikian rupa.

Cara yang paling sesuai untuk menghadapi masalah ini ialah ’offline’kan buat sementara waktu laman web anda dengan meninggalkan sedikit pesanan kepada pengunjung seperti ”Maaf, laman web ini dalam proses penyelenggaraan, sila lawat lain kali..” dan sebagainya. Anda boleh juga beritahu anggaran taikh dan masa bilakah laman web anda boleh dilayari semula. Contohnya ”Sila lawati kami lagi kira-kira jam 7 malam ini, 23 Jun 2011” dan sebagainya.

Bagaimana caranya?

Pergi ke menu Sites Global Configuration. Lihat kepada Site Settings. Di situ seperti ada pertanyaan, Site Offline? Dijawab di situ sebagai ”No”. Ini bermakna site anda tidak offline, atau dengan kata lain pegunjung boleh akses laman web anda. Jika anda pilih ”Yes”, apa akan terjadi? Jika Yes, ini bermakna anda menjawab ”Ya” bagi pertanyaan adakah anda mahu web site anda disetkan sebagai offline?

Jadi, butang kawalan untuk menutup sementara dan membuka laman web anda untuk umum ialah pada kenyataan Site Offline tadi. Jika

anda mahu membuat penyelenggaraan ke atas laman web anda, tukarkan No di situ kepada Yes.

Anda boleh tukarkan mesej “This site is down for maintenance. Please check back again soon” di situ kepada ayat anda sendiri yang dirasakan sesuai. Jika anda mahu kekalkan begitu, terserahlah kepada anda. Ada baiknya, tambahkan maklumat email anda di situ supaya pengunjung dapat menghantar email kepada anda bertanyakan sesuatu yang mungkin antara mereka mahukan maklumat segera. Di sini juga anda boleh tukar nama laman web anda. Tukarkan perkataan ”My Site” kepada nama laman web anda.

Sila lihat di muka hadapan laman web anda dan klik butang Refresh. Laman web anda akan memberi mesej offline seperti yang telah anda aturkan. Untuk edit laman web anda dalam

Masukkan maklumat kepada pengunjung jika anda ingin

offlinekan laman web anda buat sementara waktu

Masukkan nama web site anda, contoh: ”Mazuki Izani Web Site”

Gambarajah 6.1

(48)

keadaan offline ini, anda hanya perlu masukkan username dan password anda seperti biasa di laman utama yang offline itu dan login lah seperti biasa.

Setelah proses maintenance telah selesai, anda boleh setkan semula kepada No pada setting Site Offline tadi.

(49)

7- UBAH LOGO JOOMLA

Tentu anda akan bertanya, bagaimanakah untuk membuang logo Joomla! di muka hadapan laman web anda.

Jika anda buat ’rondaan’ di menu-menu yang ada dalam CMS Joomla!, sudah pasti anda tidak akan jumpa arahan atau menu untuk membolehkan anda megubah atau membuang logo Joomla! di template utama.

Perlu anda fahami bahawa setiap template ada logonya yang tersendiri. Biasanya logo itu berasaskan nama satu-satu template. Bagi template rhuk_milkyway ini, logonya ialah logo Joomla! dan ini adalah template original Joomla!. Jadi, setiap kali anda menukar template baru, anda sekali lagi perlu tukar mana-mana image yang tidak bersesuaian untuk laman web anda.

Bagaimanakah caranya?

Apa yang perlu anda buat ialah, dapatkan maklumat mengenai fail image tersebut. Maklumat yang perlu anda ketahui ialah nama fail tersebut dan juga lokasinya di server.

Penulis andaikan anda menggunakan browser Mozilla Firefox. Sila mouse over di atas imej dan logo Joomla! seperti gambarajah 7.2, right click di situ.

Ada beberapa menu yang keluar. Pada pandangan anda, daripada kesemua menu yang keluar itu, menu apakah yang anda rasakan boleh membantu anda untuk mengetahui nama dan lokasi fail imej tersebut? Kemungkinan yang ada ialah Properties. Sila pilih Properties . Tapi tidak ada apa-apa maklumat berguna kan?! Kemungkinan satu lagi ialah, View Background Image. Cuba pilih menu tersebut.

Gambarajah 7.1

(50)

Ternyata berjaya. Setelah memilih menu View Background Image tadi, ia membawa anda ke lokasi imej tersebut. Untuk mengetahu lokasi imej tersebut, sila lihat full URL bagi imej tersebut di kotak address location di browser anda.

Full URL tersebut ialah:

http://mazuki.my-php.net/templates/rhuk_milkyway/images/mw_joomla_logo.png

Daripada gambarajah 7.4, anda boleh lihat daripada URL itu nama fail image yang dikehendaki. Nama fail tersebut ialah mw_joomla_logo.png. Lokasi fail itu ialah dalam folder images. Folder images itu terletak dalam folder rhulk_milkway. Folder rhulk_milkway pula terletak dalam folder templates dan akhir sekali folder templates itu terletak di hosting yang memakai domain name mazuki.my-php.net. Untuk makluman, perkataan folder adalah istilah yang biasa digunakan dalam Local Hard Disk. Apabila sudah berada di server, perkataan folder itu dikenali sebagai directory dan sub-directory. Anda akan jumpa istilah ini apabila mengakses fail-fail tersebut atau berurusan dengannya melalui penggunaan program FTP (File Transfer Protocol).

Untuk menukar fail imej Joomla! dengan fail logo anda sendiri, anda memerlukan program FTP untuk mengakses keseluruhan fail dan folder di server anda. Terdapat banyak program FTP yang boleh dimuat-turun secara percuma. Pada bengkel ini, kita akan menggunakan WinSCP FTP.

Lancarkan program WinSCP FTP Program daripada Program Files daripada PC anda. (Lihat gambarajah 7.5)

(51)

Tukarkan kepada FTP.

Klik butang New.

Setelah itu masukkan maklumat seperti host name, user name dan password yang diminta (lihat gambarajah 7.7). Maklumat ini ada diberikan semasa anda membuat pendaftaran sebelum ini (lihat gambarajah 1.9, halaman 9).

Anda boleh tekan Save (lihat gambarajah 7.7) untuk menyimpan maklumat ini, jika komputer yang anda gunakan ini adalah komputer anda sendiri. Jika komputer awam seperti di makmal komputer, cyber cafe dan sebagainya, sebaik-baiknya jangan simpan (save) maklumat ini. Ini kerana dibimbangi ia akan diakses oleh orang lain yang boleh saja menceroboh laman web anda.

Klik Login untuk akses fail-fail anda. Tunggu beberapa saat sehingga komputer anda berjaya disambungkan dengan komputer pelayan (server). Jika sambungan berjaya dibina, anda akan dipaparkan dengan window seperti gambarajah 7.8.

Terdapat 2 windows dalam paparan WinSCP (sama seperti program FTP yang lain). Window yang pertama di sebelah kiri adalah senarai fail dan folder yang terdapat dalam komputer anda dalam local hard-disk. Di sebelah kanannya pula ialah senarai fail dan folder yang terdapat dalam komputer pelayan (server) anda.

Gambarajah 7.6

(52)

Double clik pada directory htdocs. Anda akan lihat senarai folder dan fail php dan lain-lain di situ milik CMS Joomla!. Kesilapan memadam atau meminda mana-mana fail memungkin satu-satu fungsi bagi laman web anda tidak berjalan dengan sempurna. Jadi, jangan diubah jika anda tidak tahu apa yang anda buat.

Tujuan kita akses fail-fail itu dengan program FTP ini adalah untuk mencari lokasi fail imej yang hendak digantikan dengan fail imej lain. Perlu disebutkan semula bahawa, fail tadi terletak di:

http://mazuki.my-php.net/templates/rhuk_milkyway/images/mw_joomla_logo.png

Jadi, mula-mula sekali cari directory templates, kemudian directory rhuk_milkyway, dan akhir sekali buka directory images. Dalam directory images, anda akan jumpa fail bernama mw_joomla_logo dalam format PNG. Muat turun dan simpan (save) fail tersebut untuk rujukan.

Terdahulu daripada ini, buka Adobe Photoshop atau mana-mana perisian photo editing, buat satu logo yang bersaiz sama dengan imej Joomla!,

iaitu 298px × 75px. Namakan fail tersebut dengan nama mw_joomla_logo.png

.

Contoh fail imej yang penulis buat adalah seperti gambarajah 7.9

Dalam keadaan program FTP masih aktif (connected), cari fail mw_joomla_logo.png di server anda. Kemudian, dapatkan juga fail mw_joomla_logo.png (yang telah anda buat) dari dalam folder dalam PC anda. Perhatikan gambarajah 7.10.

Senarai fail

dan

folder

dalam local

hard-disk

Senarai fail

dan

folder

di

komputer

pelayan (

server

)

Gambarajah 7.8

(53)

Gambarajah 7.10 menunjukkan fail mw_joomla_logo.png sudah seiap sedia untuk diupload ke server. Apa yang perlu anda lakukan ialah klik fail mw_joomla_logo.png yang berada di local hard disk, kemudian heretkan ia tanpa lepas (drag & drop) ke window sebelah kanan (server).

Gambarajah 7.10

Fail

mw_joomla_logo.png yang baru

Lokasi fail imej di server Lokasi fail imej di

local hard disk

Fail

(54)

Selanjutnya satu mesej akan keluar adakah anda akan overwrite fail lama (sebab mempunyai nama yang sama), pilih Yes.

Untuk melihat kesannya, sila ke frontend, klik butang refresh. Anda akan peroleh hasil seperti dalam gambarajah 7.12.

Gambarajah 7.11

(55)

8- INSTALASI TEMPLATE BARU JOOMLA!

Selepas instalasi perisian Joomla! dilakukan di hosting server, biasanya secara default, anda akan diberi guna template bernama “rhuk_milkyway”. Terdapat dua lagi template lain yang disediakan oleh Joomla!, iaitu beez dan JA_Purity. Anda boleh tukarkan template itu bila-bila masa sahaja yang anda suka.

Penukaran template tidak akan menghilangkan apa yang telah anda tulis dan buat sebelum ini. Anda boleh melihat template ini di Extensions Template Manager.

Jika anda berkenan dengan template beez, tick pada radio button, kemudian klik butang bintang yang mempunyai 5 penjuru yang bernama Default (lihat gambarajah 8.3) di bahagian atas sebelah kanan laman backend. Dengan mengklik butang itu bermakna anda telah menjadikan template ”beez” sebagai template anda yang baru.

Untuk mencari kelainan, anda boleh dapatkan template lain yang disebarkan secara percuma di internet. Anda boleh cuba googling dengan menggunakan keyword ”free joomla templates”, ”joomla templates” ”joomla free template” dan lain-lain.

Laman yang agak banyak menyediakan template percuma antaranya ialah di

http://www.joomla24.com/

. Sebelum anda mengambil keputusan untuk memuat turun satu-satu

template, ada baiknya terlebih dahulu anda klik perkataan Preview untuk melihat dengan lebih jelas rupa bentuk satu-satu template. Pemilihan template biasanya bergantung kepada jenis laman web yang ingin dibina, tema dan objektifnya. Jika anda ingin membina sebuah laman web korporat untuk sebuah syarikat, anda tidak sayugia memilih template yang bertemakan kekeluargaan, personal dan lain-lain.

Muat turun template yang dikehendaki dan simpan dalam mana-mana folder dalam komputer anda. Sebagai contoh, template WD Simple Gray.

Gambarajah 8.1

Gambarajah 8.2

(56)

Kemudian, kembali ke backend. Pergi menu Extensions Install/Uninstall. Klik Choose File untuk dapatkan fail template yang telah dimuat turun sebelum ini. Kemudian klik Upload File & Install.

Setelah keluar nota berbunyi “Install Template Success”, bermakna anda telah berjaya memuat naik serta menginstallkannya sekaligus. Pergi semula ke Extensions Template Manager. Anda akan dapati terdapat template baru dalam senarai di situ, iaitu template yang bernama wdsimplegray.

Untuk jadikan template yang baru diinstall itu sebagai template laman web anda, seperti biasa, tick pada radio button, kemudian klik butang bintang yang mempunyai 5 penjuru yang bernama Default (lihat gambarajah 8.6) di bahagian atas sebelah kanan laman backend.

Setalah butang Default ditekan, bintang tersebut akan berubah kedudukan ke kedudukan row wdsimplegray di column Default. (Lihat gambarajah 8.7)

Sila ke frontend, klik butang Refresh. Anda akan dapati laman web anda telah bertukar wajah.

Gambarajah 8.4

Gambarajah 8.5

Gambarajah 8.6

(57)

(58)

9. COMPONENT

Terdapat 5 jenis extension: component, module, plug-in, template, dan language. Component adalah extension paling besar dan berkuasa di antara 5 jenis extension yang ada. Ia terletak di badan utama laman web Joomla. Component adalah aplikasi mini yang beroperasi dalam laman web Joomla. Salah satu component yang banyak digunakan ialah

com_content

yang mana dialah yang mengurus dan mempamerkan article yang anda masukkan ke website anda.

Terdapat beberapa component yang telah sedia diinstall semasa pemasangan Joomla, iaitu

Banners, Contacts, News Feeds, Polls, Search dan Web Links

9.1 Banners

Component banners membolehkan anda masukkan banner di website. Anda boleh akses component ini di menu Component Banner Banners.

8 - 1 9 - 1 2(

* )

Gambarajah 9.1

(59)

9.2 Contacts

Hampir semua website mempunyai laman Contact Us. Component Contact membenarkan anda membina satu laman (page) contact untuk setiap orang yang anda mahu supaya pengguna boleh menghubunginya. Gambarajah 9.3 adalah contoh borang Contact Us.

Untuk membina Contact, sila ke menu Component Contacts Contacts. Klik butang New, kemudian masukkan maklumat yang diminta. Klik butang Save apabila selesai. (Lihat gambarajah 9.4).

5 + 5 + ) *

( (

+ 5 ' (

0 ' ) & (

)

(60)

(61)

Contacts juga boleh dipamerkan dalam bentuk category terutama jika website anda adalah untuk sebuah syarikat besar yang mempunyai ramai staf atasan di peringkat pengurusan. Pengguna akan melihat senarai contact dan akan memilih siapa yang ia mahu lihat maklumat perhubungannya (contact information)

9.3 News Feed

RSS adalah ringkasan bagi Really Simple Syndication. Banyak website membenarkan anda ’syndicate’ kandungan laman mereka ke laman web anda. Mungkin ramai yang tidak faham apa maksud News Feed atau RSS. Dalam bahasa yang lebih mudah, ia adalah salah satu cara untuk dapatkan berita-berita penting daripada laman web lain yang mana berita-berita itu keluar secara automatik di laman web anda tanpa anda perlu memasukkannya secara manual. Dengan fungsi RSS ini, dengan menetapkan setting tertentu, kandungan laman web lain akan masuk secara automatik. Setiap kali laman itu diupdate, maka maklumat di laman web anda juga akan turut diupdate.

Sebagai contohnya, anda mahukan berita-berita daripada akhbar utama Malaysia dipaparkan di kolum kiri website anda, maka anda hendaklah ke laman web Utusan Malaysia contohnya. Dapatkan Feed URL laman web Utusan Malaysia di sana, kemudian masukkan di component News Feed anda.

Gambarajah 9.5 adalah senarai link News Feed di News Feed Manager yang disediakan oleh Joomla semasa proses instalasi. Ia boleh dicapai melalui menu News Feed Feed. Setiap RSS link diletakkan dalam category tertentu. Anda boleh delete kesemua RSS Feed itu jika anda mahu. Tambahkan RSS anda, jika banyak, bagus letakkannya dalam kategori. Klik tab category untuk membina category.

*Maklumat lanjut, sila ikuti bengkel.!

(62)

9.4 Polls

Polls atau undian boleh dicapai mellaui menu Components Polls (lihat gambarajah 9.6). Gunakan aplikasi ini untuk membentuk atau mendapatkan feedback daripada pengunjung tentang laman web anda, atau mengenai isu-isu tertentu yang anda tentukan. Di Poll Manager, klik butang New untuk membina poll yang baru.

Masukkan tajuk di bahagian Title dan juga Alias. Biasanya ia berbentuk soalan. Pastikan butang ’Yes’ dipilih di ’Published’. Pada bahagian Options, isikan pilihan jawapan yang bersesuaian (lihat gambarajah 9.7). Klik butang Save jika sudah selesai.

Di muka hadapan laman web Joomla, di kolum kanan, sudah terdapat poll yang bertajuk ”Joomla! is used for?”, iaitu yang sedia dibina oleh Joomla semasa proses instalasi.

Bagaimanakah untuk menukarkan poll itu kepada poll yang baru anda bina tadi?

Gambarajah 9.6

(63)

Untuk menjawab soalan ini, sila ke Module Manager dengan mengambil menu Extensions Module Manager. Cari module yang bernama Polls. Klik pada perkataan Polls tersebut. Pada bahagian Parameters, tukarkan tajuk poll ”Joomla! is used for?” kepada tajuk yang and inginkan.(Lihat gambarajah 9.9)