MODUL BENGKEL PEMBANGUNAN LAMAN WEB UNTUK SPUS 2012

Transcription

1 MODUL BENGKEL PEMBANGUNAN LAMAN WEB UNTUK SPUS 2012 Disediakan oleh: MAZUKI IZANI ISMAIL AKADEMI PENGAJIAN BAHASA UNIVERSITI TEKNOLOGI MARA CAWANGAN SABAH

2 Kandungan halaman PENDAHULUAN 3 1- PENGENALAN 1.1 Static vs Dynamic 1.2 Sejarah Ringkas Joomla! 1.3 Apa itu Joomla! 2- INSTALASI JOOMLA! & RUANG KERJANYA 2.1 Ruang Kerja Joomla! 2.2 Control Panel 2.3 Menu-menu Administrator 3- MODULE 3.1 Module Position 3.2 Instalasi New Module (external) 3.3 Membina New Module (internal) 4- CONTENT - SECTION, CATEGORY & ARTICLE 4.1 Membina Section 4.2 Membina Category 4.3 Membina Article o Memasukkan Gambar Dalam Article o Memasukkan Read more.. dalam Article o Memasukkan Pagebreak dalam Article o Butang Toggle Editor 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 PENUTUPAN SEMENTARA WEB SITE UBAH LOGO JOOMLA INSTALASI TEMPLATE BARU JOOMLA COMPONENT SITE MAP E-COMMERCE: MENGGUNAKAN PERISIAN VIRTUEMART 66 RUJUKAN 89 2

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

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 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 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: 1) (dalam bahasa Inggeris - antarabangsa) Forum Rasmi Joomla! 4

5 2) Joomla Malaysia (dalam bahasa Malaysia) 3) (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 Terdapat beribu-ribu extension atau plug-in yang boleh dimuat turun secara percuma. Ia boleh diakses daripada URL 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 Pemilik webhosting diminta masukkan username dan password untuk akses ke Control Panel. 2. Klik pada ikon Fantastico atau Softaculous. Softaculous adalah aplikasi terbaru yang disediakan dalam CPanel. (Lihat gambarajah 2.1) 5

6 Gambarajah Di sebelah kiri, klik pada Portals/CMS Joomla. Gambarajah Di sebelah kanan, klik pada tab Install. Masukkan maklumat yang diminta: 6

7 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 Selanjutnya satu mesej akan anda terima menandakan instalasi anda telah berjaya. Simpan maklumat yang telah diberikan. Gambarajah 2.4 7

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 Gambarajah 2.5 Gambarajah 2.6 Laman web tanpa sample data Ruang Kerja Joomla! URL untuk anda mengedit dan kemaskini laman web Joomla! anda ialah di Masukkan username sebagai admin, dan password adalah 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. 8

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. Gambarajah 2.7 Gambarajah 2.8 Klik Preview untuk melihat website anda yang belum dibuat apa-apa modifikasi/kemaskini. Gambarajah 2.9 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. 9

10 Gambarajah

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. Administrator Menu Gambarajah 2.11 Peranan ikon-ikon yang terdapat di Control Panel. Add New Article Jadual 2.1 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. 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 menumenu 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 Setting Joomla! boleh diubahsuai di Global Configuration. 12

13 Menu-menu Administrator Menu sebelah atas Control Panel adalah menu lengkap keseluruhan bagi administrator untuk mengawal laman webnya. Gambarajah 2.12 Site Menu drop-down Site, seperti dalam gambarajah 2.11 mengandungi pautan ke lamanlaman yang menguruskan user, fail-fail media dan juga setting konfigurasi. Gambarajah 2.13 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 manamana article atau category atau section dalam CMS. Global Configuration - Setting Joomla! boleh diubahsuai di Global Configuration. Logout Untuk keluar daripada Administrator Backend. Gambarajah 2.14 Menus - Menu drop-down Menus membolehkan anda akses kepada halaman-halaman yang mana anda boleh tambah, edit atau padam menumenu tertentu atau item-item 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 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. Gambarajah 2.15 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. 13

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. Gambarajah 2.16 Gambarajah 2.17 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 kepada sama ada semua user anda atau kumpulan user anda yang tertentu. Gambarajah 2.18 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

15 3- MODULE Module Position Instalasi New Module (external) Membina New Module (internal) Module Position Gambarajah 3.1 user3 Kotak Biru = Module Position Kotak Kuning = Module Kotak Merah = Content 15

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. Gambarajah 3.2 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. Gambarajah 3.3 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: 16

17 Gambarajah 3.4 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

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 (Lihat gambarajah 3.6) 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. Gambarajah 3.7 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. Gambarajah 3.8 Vinaora Visitors Counter ini antara yang popular dan banyak digunakan. 18

19 Gambarajah 3.9 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 Fail tersebut dalam bentuk.zip. Pergi ke menu Extensions Install/Uninstall. Gambarajah 3.10 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) 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 urutan kedudukan ini. (Klik drop-down menu Order). Sila rujuk gambarajah 3.13 Gambarajah 3.12 Gambarajah

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. Gambarajah 3.15 Gambarajah 3.14 Anda diminta isikan maklumat-maklumat seperti gambarajah 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 20

21 Klik butang Save. Pergi laman web anda (frontend) untuk melihat hasilnya. Klik butang refresh di browser. Seharusnya anda akan dapati seperti gambarajah Gambarajah 3.17 Sebagai latihan, tambahkan satu lagi module Feed Display. Kali cuba masukkan portal berita Utusan Malaysia. Ia sepatutnya menjadi seperti gambarajah Gambarajah

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): Section Level 2 Category Level 1 Gambarajah 4.1 Article Gambaran Section, Category & Article boleh dilihat sebagaimana gambarajah 4.2. Anggaplah web site anda itu sebagai kabinet fail. Setiap drawer dalam kabinel fail itu adalah Section, folder fail dalam drawer itu adalah category dan helaian-helaian fail dalam folder itu adalah article. Anda boleh letakkan bermacam-macam article dalam satu category. Begitu juga banyak category boleh diletakkan dalam satu Section. Dan, dalam satu web site juga boleh dibina banyak Section. 22

23 Article Gambarajah 4.2 Memahami Section, Category & Article Sumber: Ron Severdia & Kenneth Crowder, Using Joomla! (2010) Sebelum membina section, category dan article, eloklah terlebih dahulu anda membina rangka laman web anda bagi memudahkan kerja pembinaan. Contoh adalah seperti berikut: SECTION 1 Category 1 Article 1 Article 2 Category 2 Article 1 Article 2 Category 3 Article 1 SECTION 2 Category 1 Article 1 Article 2 Article 3 Category 2 Article 1 Article 2 Article 3 KUIZ BAB101/110 Semester Julai 2009 Semester April 2010 BAB151/120 BAB501 OGA Semester Julai 2009 Kelas DIB3 Kelas DBS4 Kelas DPP1 Semester April 2010 Kelas DIB4 Kelas DBS3 Kelas DPP2 Kelas BBA Gambarajah

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. Gambarajah 4.4 Biarkan Published sebagai Yes kecuali anda tidak mahu ia dipublish buat sementara waktu, maka pilih No. Biarkan Access Level sebagai Public supaya semua pengunjung dapat akses. Gambarajah 4.5 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 sectionsection lain yang telah sedia dibina oleh Joomla!. (Lihat Gambarajah 4.6) Gambarajah

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. Gambarajah 4.7 Pastikan category BAB101/110 ini diletakkan di bawah Section Kuiz. Biarkan Access Level sebagai Public supaya semua pengunjung dapat akses. Gambarajah 4.8 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 categorycategory lain yang telah sedia dibina oleh Joomla!. (Lihat gambarajah 4.9) 25

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

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. Pastikan article Semester Julai 2009 ini diletakkan di bawah Section Kuiz. Pastikan article Semester Julai 2009 ini diletakkan di bawah category BAB101/110. Gambarajah 4.8 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: Gambarajah 4.9 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 27

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. Gambarajah 4.10 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. 28

29 Gambarajah 4.11 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) Gambarajah 4.12 Seterusnya, pilih (klik satu kali) fail imej yang telah diupload tadi, kemudian klik butang Insert. (Lihat gambarajah 4.13) Gambarajah 4.13 Selesai sahaja butang Insert ditekan, imej tersebut akan terus ditampalkan di dalam article anda. 29

30 Gambarajah 4.14 Klik butang Save untuk simpan 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. 30

31 Rajah - Garisan dot merah menandakan fungsi Read more... telah dimasukkan di kawasan tersebut 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: <hr title="my Page Title" alt="my TOC Alias" class="system-pagebreak" /> Simpan (save) artikel anda. Lihat hasilnya di browser. Joomla akan akan membina table of contents secara automatic dalam artikel anda dengan links kepada pagebreak yang ada dalam artikel anda. ======================================================================================== Pastikan fungsi Read more.. diaktifkan terlebih dahulu supaya Pagebreak dapat berfungsi. ======================================================================================== 31

32 32

33 4.3.4 Butang Toggle editor Butang ini digunakan ON atau OFF fungsi WYSIWYG editor supaya anda boleh terus mengedit kod HTML. ============================================================================== Kedudukan artikel di muka hadapan (front page) laman web Joomla boleh diubah kedudukannya daripada segi yang mana dahulu dan yang mana kemudian. Ini boleh dicapai melalui menu Content Front Page Manager. Anda boleh ubah kedudukannya dengan 2 cara: Klik anak panah hijau di kolum Order untuk gerakkan kedudukan artikel ke atas atau ke bawah. Taip nombor tertentu ke dalam nilai Order dan klik ikon disket di kolum atas untuk simpan order yang baru. ============================================================================== 33

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 berhatihati dalam membina menu ini. Pastikan nama menu anda itu sama dengan target article yang hendak disambungkan. ======================================================================================= Sentiasa perlu diingat bahawa, article mesti dibina terlebih dahulu sebelum anda membina menu yang akan mencapai artikel tersebut. Ia nampak simple, tetapi ramai pengguna berpengalaman Joomla terlupa mengenainya. Satu formula penting untuk anda ingati ialah: Joomla adalah SCAM, iaitu Section, Category, Article, Menu. ======================================================================================= 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 34 Gambarajah 5.1

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. Sama 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. 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. 35

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. Tanda right menunjukkan published Tanda pangkah menunjukkan unpublished 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 Gambarajah 5.5 Gambarajah

37 Kemudian, masukkan maklumat yang diminta. ❸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). ❶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. Gambarajah 5.7 Klik Save untuk simpan. Lancarkan browser anda dan lihat hasilnya. ======================================================================================= Menu utama di muka hadapan laman web Joomla biasanya ada submenu tertentu. Tetapi ia tidak kelihatan kecuali satu-satu menu item itu diaktifkan. Contohnya seperti gambarajah di sebelah kanan ini, apabila menu Joomla! Overview diklik, barulah muncul submenu What s New in 1.5? Bagaimana pula jika kita mahukan ia sentiasa kelihatan walaupun satu-satu menu itu tidak diklik? Untuk selesaikan masalah ini, sila ke Module Manager. Pilih atau klik module bernama Main Menu. Edit bahagian Parameternya. Pada Always show sub-menu items, pilih Yes. ======================================================================================= 37

38 ========================================================================================== Anda boleh setkan imej tertentu untuk setiap menu melalui parameter berikut: Jika selepas disetkan imej tidak juga keluar, sila periksa modul Main Menu di Module Manager. Ini berlaku kerana kemungkinan setting bagi Show Menu Images disetkan pada No. Jadi, tukarkan ia kepada Yes ========================================================================================== 38

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. ❶Masukkan Title dan Alias. ❷Pilih category BAB101/110. Jadi, menu ini akan disambungkan kepada category BAB101/110 dalam Content. ❸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. Klik Save untuk simpan. Gambarajah 5.8 Gambarajah 5.9 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. Lancarkan browser anda dan lihat hasilnya. 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/

40 ❶Masukkan Title dan Alias. ❷Cari dan pilih article bernama Semester Julai Anda sendiri sudah ketahui di mana article itu berada. Gambarajah 5.10 ❸Jadikan BAB101/110 sebagai parent bagi menu ini. Ini bermakna, article Semester Julai 2009 akan berada di bawah BAB101/110. Klik Save untuk simpan. Seharusnya anda akan memperoleh susunan menu seperti dalam gambarajah Kedudukan ini akan menggambarkan kedudukan sebenar menu anda di muka hadapan laman web (frontend) Gambarajah 5.11 Lancarkan browser anda dan lihat hasilnya. Latihan: Sila bina menu lain untuk laman web anda berdasarkan content yang telah anda bina. 40

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. Gambarajah 5.12 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 Gambarajah

42 Gambarajah 5.14 Klik Save untuk simpan. Anda akan peroleh hasil seperti gambarajah berikut. Anda boleh tambahkan senarai contact anda dengan menekan butang New. Lakukan seperti langkah sebelum ini. Gambarajah 5.15 Setelah berjaya mencipta satu contact, sila kembali ke menu Menus Main Menu di Control Panel. 42

43 Klik butang New untuk membina menu baru. Pada Select Menu Item Type, pilih Contacts. Kemudian, pilih Standard Contact Layout. ❷Pilih contact di sini untuk dilinkkan. ❶Isikan Title dan Alias. Apa yang diisi di sini akan dipaparkan di laman utama. ❸ Pada Parent Item, pilih Top. Gambarajah 5.16 Klik Save untuk simpan. 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 Gambarajah 5.17 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. Gambarajah

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. Klik butang New untuk membina menu baru. Pada Select Menu Item Type, pilih External Link. Masukkan maklumat seperti dalam gambarajah ❶Masukkan Title dan Alias. Contoh: UiTM Malaysia ❷Masukkan URL UiTM Malaysia iaitu ❸Pilih Top jika anda mahu letakkan menu link ini di tempat teratas. Gambarajah

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. Gambarajah 5.20 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 Gambarajah 5.21 Sila buat dua category ini dengan mengklik butang New seperti biasa. Seharusnya anda akan memperolehi hasil seperti dalam gambarajah Gambarajah 5.22 Jika anda telah berjaya membina 2 category itu, klik semula di perkataan Links seperti dalam gambarajah Klik butang New untuk mencipta link. 45

46 ❶Masukkan Name dan Alias. Contoh: Utusan Malaysia ❹Tentukan target anda atau biarkan sebagai Use Global ❷Pastikan ia berada di bawah category Akhbar Online. Gambarajah 5.23 Latihan: ❸Masukan URL bagi laman web Utusan Malaysia. ❺Masukan keterangan jika anda mahu. 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) Gambarajah 5.24 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. 46

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? Gambarajah 6.1 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. Gambarajah 6.2 Masukkan maklumat kepada pengunjung jika anda ingin offlinekan laman web anda buat sementara waktu Masukkan nama web site anda, contoh: Mazuki Izani Web Site 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 anda di situ supaya pengunjung dapat menghantar 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 47

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. Gambarajah 6.3 Setelah proses maintenance telah selesai, anda boleh setkan semula kepada No pada setting Site Offline tadi. 48

49 7- UBAH LOGO JOOMLA Tentu anda akan bertanya, bagaimanakah untuk membuang logo Joomla! di muka hadapan laman web anda. Gambarajah 7.1 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 satusatu 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? Gambarajah 7.2 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. 49

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. Gambarajah 7.3 Full URL tersebut ialah: Gambarajah nama domain anda directory templates directory rhuk_milkyway directory images nama fail imej 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) Gambarajah

51 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). Gambarajah 7.6 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. Tukarkan kepada FTP. Gambarajah 7.7 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. 51

52 Senarai fail dan folder dalam local hard-disk Senarai fail dan folder di komputer pelayan (server) Gambarajah 7.8 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: 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 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

53 Lokasi fail imej di local hard disk Lokasi fail imej di server Fail mw_joomla_logo.png yang baru Fail mw_joomla_logo.png yang lama di server Gambarajah 7.10 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). 53

54 Gambarajah 7.11 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 Gambarajah

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. Gambarajah 8.1 Gambarajah 8.2 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. Gambarajah 8.3 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 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. 55

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. Gambarajah 8.4 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. Gambarajah 8.5 Gambarajah 8.6 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. Gambarajah 8.7 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. 56

57 Selesai. Gambarajah

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. Gambarajah 9.1 ========================================================================================== Jika anda ingin install extension versi 1.0 ke dalam Joomla versi 1.5, anda perlulah aktifkan dahulu plug-in System-Legacy di Plugin Manager. Gambarajah 9.2 ========================================================================================== 58

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. Gambarajah 9.3 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). ========================================================================================== Untuk memunculkan menu Contact Us atau Contact Me (atau apa-apa nama yang besrsesuaian) muncul di muka hadapan laman web Joomla, seperti biasa, anda hendaklah terlebih dahulu membina menu bagi Contact Us. Seperti langkah sebelum ini, pergi ke menu Menus Main Menu. Klik butang New. Pada pilihan Select Menu Item Type di sebelah kiri, sila pilih Contacts Contact Standard Contact Layout. Masukkan maklumat yang diminta. Klik butang Save. ========================================================================================== 59

60 Gambarajah

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. Gambarajah 9.5 *Maklumat lanjut, sila ikuti bengkel.! 61

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. Gambarajah 9.6 Gambarajah 9.7 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? 62

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) Gambarajah 9.8 Gambarajah Web Links Web Links mempamerkan satu kumpulan URL yang diletakkan dalam senarai category. Dengan mengklik nama category tertentu, ia akan memaparkan semua links yang terdapat dalam category berkenaan. Gambarajah 9.10 Sila perhatikan senarai links yang telah disediakan oleh Joomla seperti dalam gambarajah Terdapat 6 links dalam category Joomla! Specific Links. Gambarajah 9.11 pula menunjukkan bagaimana kedudukannya di backend (belakang tabir). 63

64 Gambarajah 9.11 Anda boleh membina category sendiri dengan mengklik Categories. Kemudian, klik Links untuk memasukkan links ke dalam category tersebut. 64

65 10. SITE MAP Site Map atau Peta Laman adalah penting. Search engine sangat menyukainya sebab ia dapat explore semua kandungan laman web anda. Site Map juga boleh menolong pengunjung anda mencari page yang diinginkan dengan cepat. Bagaimana untuk membina Site Map? Ikuti langkah berikut: Di backend, pergi ke menu Extensions Module Manager, klik New untuk membina module yang baru. Daripada senarai module itu, pilih module bernama Menu. Masukkan titlenya, sebagai contohnya Site Map. Positionnya tukarkan kepada sitemap. Gambarajah 10.1 Jika position sitemap tidak ada disenaraikan di situ, anda boleh taipkan sitemap di Position Box tersebut. Tukarkan menu name kepada mainmenu atau apa-apa menu yang anda ingin tunjukkan di site map. Untuk memasukkan site map dalam article, bina satu article baru. Masukkan kod berikut: {loadposition sitemap} Lancarkan web browser anda untuk melihat site map anda. ========================================================================================== Bagi memastikan fungsi load-module ini berjalan dengan baik, pastikan Content Load Module plug-in dalam keadaan enabled di Plugin Manager. Gambarajah 10.2 ========================================================================================== 65

66 11. E-COMMERCE: MENGGUNAKAN PERISIAN VIRTUEMART Extension: VirtueMart Website: Kos: Percuma License: GNU/GPL Keperluan Minimum: Joomla 1.0 or 1.5, PHP 4.2+, MySQL Apabila membicarakan tentang penyelesaian e-dagang (e-commerce), anda tidak perlukan perisian lain selain VirtueMart untuk membina kedai online dengan fungsi shopping cart. Anda boleh buat jualan online samada domestik ataupun antarabangsa. VirtueMart membolehkan anda membina online store atau katalog produk dengan mudah dan cepat. Antara ciri-ciri utama VirtueMart ialah: Penyenaraian produk (product listings). Menerima bayaran daripada semua syarikat kad kredit utama dan pemprosesan bayaran melalui payment gateway utama. Satu produk boleh diletakkan dalam pelbagai category Sistem rating & ulasan Mempamerkan produk-produk berkaitan Paparan penuh (gambar produk) Kawalan inventori Shopper groups membolehkan anda memberi diskaun automatik kepada kumpulan pembeli tertentu Pengurusan pesanan Inbois (invoicing) Auto-notify kepada pembeli apabila status pesanan telah berubah Laporan Penetapan kadar cukai berbeza berdasarkan negara dan negeri. Shipper yang pelbagai Kadar shipping berdasarkan negara, poskod, berat dan lain-lain. Anda juga boleh gunakan shipping modules untuk kiraan jumlah secara automatik iaitu modul daripada USPS, UPS, FexEd dan lain-lain berdasarkan saiz dan berat produk. Kupon diskaun Selepas install VirtueMart, anda diberi pilihan samada mahu install sample data ataupun tidak ke dalam shopping cart. Bagi pengguna baru, ia lebih mudah memulakan kedai online mereka dengan menginstall bersekali dengan sample data. Ini kerana ia boleh dijadikan panduan buat mereka untuk membina dan belajar daripadanya. Selepas mahir dan biasa dengan VirtueMart, mungkin anda mahu mulakan dengan instalasi semula (fresh installation) tanpa sample data. 66

67 11.1 Instalasi VirtueMart Mula-mula sekali muat turun program VirtueMart di Klik perkataan Download untuk muat turun. Versi terbaru ialah Gambarajah 11.1 Unzip/unpack fail yang telah dimuat-turun tadi. Ia akan kelihatan seperti gambarajah 11.2 berikut: Gambarajah 11.2 Upload fail component com_virtuemart_1.1.8.j15 Untuk upload dan install fail tersebut, pergi ke menu Extensions Install/Uninstall di backend Joomla. Gambarajah

68 Gambarajah 11.4 Klik butang Choose File untuk dapatkan fail com_virtuemart_1.1.8.j15. Klik butang Upload File & Install. Jika berjaya, hasilnya seperti gambarajah 11.5 berikut. Gambarajah 11.5 Klik butang Install SAMPLE DATA >> untuk install data contoh. 68

69 Seterusnya anda akan dibawa page seperti gambarajah 11.6 berikut. Gambarajah 11.6 Satu menu VirtueMart juga akan muncul di menu Components. Gambarajah 11.7 Seperti biasa, untuk wujudkan menu ke online store anda, pergi ke menu Menus Main Menu, klik butang New. Pada Select Menu Item Type, pilih VirtueMart. (Gambarajah 11.8) 69

70 Gambarajah 11.8 Tetapkan Title dan Alias. Contoh di sini ialah Shopping Online. Anda mungkin boleh pilih Online Store, Kedai Online, Shop, Kadaiku, Jom Shopping, Visit Our Store dan lain-lain. Parent Itemnya biarkan di Top. Klik butang Save. Gambarajah

71 Anda boleh perhatikan di menu utama anda terdapat menu Shopping Online yang telah anda bina sebelum ini. Klik pada menu tersebut. Gambarajah Anda akan dibawa ke page seperti gambarajah berikut. Gambarajah Page seperti gambarajah adalah contoh kedai online anda. Produk-produk yang disenaraikan di situ adalah SAMPLE DATA yang diinstall semasa proses instalasi perisian 71

72 VirtueMart sebelum ini. Anda boleh buang produk-produk ini dan masukkan produk anda sendiri selepas ini dalam langkah yang berikutnya. Sebelum itu, teruskan instalasi module dan plugin iaitu kesemua fail dalam folder modules dan plugins. Pergi ke menu Extensions Install/Uninstall. Install satu persatu. Gambarajah Pergi ke Module Manager, kesemua module yang diinstall sebelum ini akan dipaparkan di sini seperti dalam gambarajah berikut. Gambarajah Tiga plugin yang diinstall juga boleh dilihat di Plugin Manager. Gambarajah

73 11.2 Shop Configuration Tab Global Pergi ke menu Admin Configuration Pada Global, Shop is Offline? Anda boleh tutup sementara kedai anda di sini. Ianya sama dengan Global Configuration pada Joomla. Anda juga boleh setkan mesej untuk dipaparkan pada saat kedai anda offline Pada Use only as catalogue - Anda boleh matikan fungsi shopping cart VirtueMart jika tick butang di sini, ia akan dipaparkan sebagai katalog Pada Show Prices Anda juga boleh matikan fungsi paparan harga. Pilihan ini biasanya digunakan bersekali dengan mod katalog. Gambarajah Anda juga boleh setkan beberapa option untuk bila & bagaimana untuk mempamerkan harga. Gambarajah Virtual Tax - menentukan samada item yang tiada berat (zero weight) dikenakan cukai ataupun tidak. Tax mode - menentukan kadar cukai yang diambil untuk kiraan cukai, samada berdasarkan alamat pembeli atau alamat penjual atau mod EU, iaitu kadar cukai per-produk digunakan jika pembeli itu berada di European Union, jika tidak, kadar cukai adalah berdasarkan alamat pembeli. Enable multiple tax rates? Pilih ini jika anda mempunyai produk-produk dengan pelbagai kadar cukai (contohnya 7% untuk buku dan makanan, 16% untuk barangan lain) Discount before tax/shipping? Jika anda pilih ini, bermaksud tolakan diskaun dibuat sebelum cukai dan bayaran pos. Jika tidak pilih, maka ia sebaliknya Pada Frontend Features, biarkan seperti yang telah ditetapkan. Anda boleh edit jika anda mahu. 73

74 Gambarajah Gambarajah Di bahagian User Registration Settings, pada User Registration Type, anda boleh setkan beberapa pilihan, iaitu Normal Account Creation pendaftaran standard yang mana pengguna memilih username dan kata laluan Silent Account Creation pengguna tidak perlu pilih username dan kata laluan, tetapi ianya dibina secara automatik semasa pendaftaran dan akan dihantar kepada yang telah disediakan Optional Account Creation pengguna boleh memilih samada mahu membuat akaun atau tidak. Jika mahu, username dan kata laluan mestilah dipilih No Account Creation pengguna tidak perlu buat pendaftaran. 74

75 Gambarajah Jika anda mahu pamerkankan Terms of Service dan Return Policy, sila tick pada keduadua kotak tersebut. Jika Return Policy anda terlalu panjang, anda perlu buat article mengenainya terlebih dahulu. Kemudian, kembali ke page ini semula. Article yang anda buat mengenai Return Policy tadi pasti akan tersenarai di Long version of the return policy (link to a content item). Klik satu kali pada article berkenaan untuk linkkannya. Gambarajah Pada Core Settings dan Logfile Configuration, biarkan by default seperti yang disediakan. 75

76 Gambarajah Tab Security Gambarajah Gunakan setting yang disediakan. 76

77 Gambarajah Tab Site Gunakan setting yang disediakan. Cuma pada Show footer, anda boleh untick jika tidak mahu imej powered-by-virtuemart dipaparkan di bahagian footer. Klik butang Apply untuk simpan ketetapan (setting) itu. Gambarajah

78 Tab Shipping Gunakan setting yang disediakan. Gambarajah Tab Checkout Gunakan setting yang disediakan. Checkout adalah proses terakhir pengguna selepas memilih barang. Pengguna akan keluar dan diminta melalui proses-proses di bawah mengikut urutan nombor yang ditetapkan. Gambarajah

79 Tab Downloads Anda perlu enablekan bahagian ini jika anda menjual bahan digital yang boleh didownload. Jika tidak, biarkan ia tanpa dipilih. Gambarajah Tab Feed Configuration Gunakan setting yang disediakan. Feed Configuration membenarkan pengguna mendapatkan maklumat terus daripada laman web jualan online anda mengenai produk terbaru yang anda masukkan tanpa anda perlu memberitahu mereka samada melalui atau sebagainya. Gambarajah

80 11.3 Edit Store Masukkan maklumat kedai online anda. Gantikan logo Washupito s Tiendita itu dengan imej logo kedai anda. Gambarajah Tambah Category Pergi ke menu Products Add Category Masukkan maklumat yang diperlukan seperti Category Name, Category Description dan lain-lain Klik pada tab Images untuk memasukkan gambar bagi category ini. 80

81 Gambarajah Senarai fail template untuk pamerkan produk dalam kategori ini Untuk melihat kategori yang telah anda masukkan, pergi ke menu Products List Categories. Kalau kurang ngam, klik pada namanya untuk edit semula Tambah Product Pergi ke menu Products Add Product Masukkan maklumat yang diperlukan seperti SKU (Stock Keeping Unit) 1, Product Price, VAT ID (cukai), Discount Type, Short Description (jika ada) dan lain-lain. Anda juga boleh abaikan yang lain yang kurang penting buat masa ini. Namun wajar sekali imej produk anda diupload supaya pengguna boleh melihat produk anda. 1 Stock Keeping Unit ( SKU) is an identification, usually alphanumeric, of a particular product that allows it to be tracked for inventory purposes. 81

82 Pastikan anda letakkan produk anda di bawah kategori yang betul Gambarajah Scroll ke bawah untuk upload imej produk anda. Klik butang Save. Gambarajah Untuk melihat produk yang telah anda masukkan, pergi ke menu Products List Products. Anda akan lihat produk yang baru anda masukkan tadi disenaraikan seperti dalam gambarajah berikut. Pastikan ia disenaraikan dalam kategori yang betul. Selanjutnya, anda boleh delete produk-produk yang tidak berkenaan yang diinstall bersama semasa instalasi VirtueMart sebelum ini. Anda juga boleh biarkan di situ sebagai panduan untuk anda memasukkan produkproduk lain. 82

83 11.6 Tambah Manufacturer Gambarajah Boleh dicapai melalui menu Manufacturer Add Manufacturer Masukkan maklumat mengenai syarikat pengeluar Untuk melihat senarai manufacturer, pergi ke menu Manufacturer List Manufacturers 83

84 11.6 Tambah Manufacturer Categories Gambarajah Pergi ke menu Manufacturer Add Manufacturer Categories Masukkan maklumat yang diminta Untuk melihat senarai manufacturer categories, pergi ke menu Manufacturer List Manufacturer Categories Gambarajah

85 11.7 Tambah Coupon Pergi ke menu Coupon New Coupon. Gambarajah Pada Coupon Code, masukkan nama bagi kupon anda. Anda bebas namakannya dengan apa sahaja Pada Percent or Total, anda boleh pilih samada diskaun yang anda mahu berikan itu dalam bentuk peratusan atau dalam bentuk jumlah Pada Coupon Type, Gift Coupon akan dihapuskan selepas ia digunakan untuk diskaun bagi satu pesanan. Manakala Permanent Coupon boleh digunakan sekerap mana yang pengguna mahukan Pada Value, masukkan nilai diskaun. Jika 20, bermakna 20% jika pada Percent or Total anda memilih Percent. Jika pada Percent or Total anda memilih Total, ia bermakna diskaun anda sebanyak RM Untuk melihat senarai kupon, pergi ke menu Coupon Coupon List Kaedah Bayaran Pergi ke menu Store List Payment Methods Terdapat 19 jenis cara bayaran. Sebahagian besarnya tidak aktif Untuk kursus ini, aktifkan hanya PayPal (Legacy), Purchase Order dan Cash On Delivery Untuk module PayPal (Legacy), anda terlebih dahulu mesti berdaftar di Untuk module Purchase Order dan Cash On Delivery, klik pada module tersebut dan edit maklumat yang diperlukan Bagi module Purchase Order, biarkan setting pada tab Payment Method Form itu seperti yang telah ditetapkan. Pada tab Configuration, anda boleh masukkan maklumat yang diperlukan pengguna seperti no. akaun bank anda supaya mereka boleh bank-in bayaran untuk produk yang dipesan. Masukkan juga peringatan supaya pengguna menghantar bukti bayaran ke anda. Hal yang sama boleh juga diapplykan kepada setting Cash On Delivery. 85

86 11.9 Module Gambarajah Pergi ke menu Admin List Modules Di sana anda boleh lihat senarai modules yang disediakan. Anda boleh enable dan disable module tertentu mengikut keperluan anda Klik Save Permissions bagi menyimpan (Save) setiap perubahan yang dibuat Klik Function List untuk editing yang lebih terperinci bagi setiap module. 86

87 Gambarajah Sebagai contoh, jika anda tidak mahu module vendor dipaparkan di menu utama, klik pada perkataan vendor pada senarai Module Name Pada Display Order, pilih No pada drop-down menu.(lihat gambarajah 11.49) 87

88 Gambarajah Pesanan Untuk melihat senarai pesanan yang telah dibuat oleh pelanggan, pergi ke menu Orders List Orders. Gambarajah

89 Anda boleh lihat status setiap pesanan samada Pending, Confirmed, Cancelled, Refunded dan Shipped. Anda boleh setkan di situ statusnya, dan maklumat perubahan status itu akan sampai kepada pelangan anda jika anda tick pada kotak Notify Customer? Sebelum tekan butang Update Status. Gambarajah Satu daripada store anda akan dihantar kepada pengguna memberitahu status terbaru pesanannya. Gambarajah