Professional Documents
Culture Documents
Disediakan oleh:
MAZUKI IZANI ISMAIL AKADEMI PENGAJIAN BAHASA UNIVERSITI TEKNOLOGI MARA CAWANGAN SABAH
Kandungan
halaman
PENDAHULUAN 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 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 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 6- PENUTUPAN SEMENTARA WEB SITE 7- UBAH LOGO JOOMLA 8- INSTALASI TEMPLATE BARU JOOMLA 9. COMPONENT 10. SITE MAP 11. E-COMMERCE: MENGGUNAKAN PERISIAN VIRTUEMART RUJUKAN
3 4 4 4 4 5 8 11 13 15 15 18 20 22 24 25 26 28 30 31 33 34 34 39 39 40 44 45 47 49 55 58 65 66 89
www.abqarie.com
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 www.abqarie.com
www.abqarie.com
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).
www.abqarie.com
2) http://www.joomlamalaysia.org/ Joomla Malaysia (dalam bahasa Malaysia) 3) http://id-joomla.com/ (dalam bahasa Indonesia)
www.abqarie.com
Gambarajah 2.1
Joomla.
Gambarajah 2.2
4. Di sebelah kanan, klik pada tab Install. Masukkan maklumat yang diminta:
www.abqarie.com
Namakan direktori
Namakan database
Gambarajah 2.3
5. Selanjutnya satu mesej akan anda terima menandakan instalasi anda telah berjaya. Simpan maklumat yang telah diberikan.
Gambarajah 2.4
www.abqarie.com
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.
Gambarajah 2.6
www.abqarie.com
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.
www.abqarie.com
Gambarajah 2.10
www.abqarie.com
10
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
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.
www.abqarie.com
11
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.
www.abqarie.com
12
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 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. 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.
www.abqarie.com
13
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 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.
Gambarajah 2.17
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 Gambarajah 2.18 tertentu. Global Check-in Item yang telah dicheck-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 clearkan 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.19
www.abqarie.com
14
3- MODULE
Module Position Instalasi New Module (external) Membina New Module (internal)
Gambarajah 3.1
Module Position
user3
www.abqarie.com
15
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 dienablekan dan boleh didisablekan. Anda juga boleh buang (delete) module yang tidak diperlukan. (Jika anda tidak yakin keperluannya, lebih baik jangan delete, hanya disablekannya 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.
Gambarajah 3.2
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:
www.abqarie.com
16
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 3.5
www.abqarie.com
17
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 typenya 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.
www.abqarie.com
18
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 2.0.0. 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
www.abqarie.com
19
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
www.abqarie.com
20
Pergi laman web anda (frontend) untuk melihat hasilnya. Klik butang refresh di browser. Seharusnya anda akan dapati seperti gambarajah 3.17.
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.18
www.abqarie.com
21
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
Category
Article
Level 2
Level 1
Gambarajah 4.1
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.
www.abqarie.com
22
Article
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
KUIZ
BAB101/110
Semester Julai 2009 Semester April 2010
Category 2
Article 1 Article 2
BAB151/120 BAB501
Category 3
Article 1
SECTION 2
Category 1
Article 1 Article 2 Article 3
OGA
Semester Julai 2009
Kelas DIB3 Kelas DBS4 Kelas DPP1
Category 2
Article 1 Article 2 Article 3
Gambarajah 4.3
www.abqarie.com
23
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 4.6
www.abqarie.com
24
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)
www.abqarie.com
25
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.
www.abqarie.com
26
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.
Gambarajah 4.9
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
www.abqarie.com
27
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.
www.abqarie.com
28
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.
www.abqarie.com
29
Gambarajah 4.14
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.
www.abqarie.com
30
Rajah - Garisan dot merah menandakan fungsi Read more... telah dimasukkan di kawasan tersebut
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:
www.abqarie.com
31
www.abqarie.com
32
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.
==============================================================================
www.abqarie.com
33
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 dipublish 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 melinkkan 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. =======================================================================================
34
menu anda (untuk bengkel ini) hendaklah digroupkan dalam kumpulan Main Menu. Klik Menus Main Menu di Control Panel.
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.
www.abqarie.com
35
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.
www.abqarie.com
36
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 Whats 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.
=======================================================================================
www.abqarie.com
37
========================================================================================== 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
==========================================================================================
www.abqarie.com
38
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.
Gambarajah 5.8 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.
www.abqarie.com
39
Cari dan pilih article bernama Semester Julai 2009. 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 5.11. Kedudukan ini akan menggambarkan kedudukan sebenar menu anda di muka hadapan laman web (frontend)
Gambarajah 5.11
Latihan:
Sila bina menu lain untuk laman web anda berdasarkan content yang telah anda bina.
www.abqarie.com
40
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 5.14.
Gambarajah 5.13
www.abqarie.com
41
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 Panel. Main Menu di Control
www.abqarie.com
42
Klik butang New untuk membina menu baru. Pada Select Menu Item Type, pilih Contacts. Kemudian, pilih Standard Contact Layout.
Isikan Title dan Alias. Apa yang diisi di sini akan dipaparkan di laman utama.
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 yang lain. Ada menu Gambarajah 5.17 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 5.18
www.abqarie.com
43
Pilih Top jika anda mahu letakkan menu link ini di tempat teratas.
Gambarajah 5.19
www.abqarie.com
44
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 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.22
www.abqarie.com
45
Gambarajah 5.23
Masukan URL bagi laman web Utusan Malaysia. Masukan keterangan jika anda mahu.
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.
www.abqarie.com
46
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 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
www.abqarie.com
47
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.
www.abqarie.com
48
Gambarajah 7.1
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? 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.2
www.abqarie.com
49
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
Gambarajah 7.4
http://mazuki.my-php.net/templates/rhuk_milkyway/images/mw_joomla_logo.png
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 7.5
www.abqarie.com
50
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.
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.
www.abqarie.com
51
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:
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 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.
www.abqarie.com
52
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).
www.abqarie.com
53
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 7.12.
Gambarajah 7.12
www.abqarie.com
54
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 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.
www.abqarie.com
55
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.
www.abqarie.com
56
Selesai.
Gambarajah 8.8
www.abqarie.com
57
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
==========================================================================================
www.abqarie.com
58
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. ==========================================================================================
www.abqarie.com
59
Gambarajah 9.4
www.abqarie.com
60
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)
Gambarajah 9.5
www.abqarie.com
61
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?
www.abqarie.com
62
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 9.9
Sila perhatikan senarai links yang telah disediakan oleh Joomla seperti dalam gambarajah 9.10. Terdapat 6 links dalam category Joomla! Specific Links. Gambarajah 9.11 pula menunjukkan bagaimana kedudukannya di backend (belakang tabir).
www.abqarie.com
63
Gambarajah 9.11 Anda boleh membina category sendiri dengan mengklik Categories. Kemudian, klik Links untuk memasukkan links ke dalam category tersebut.
www.abqarie.com
64
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 ContentLoad Module plug-in dalam keadaan enabled di Plugin Manager.
Gambarajah 10.2
==========================================================================================
www.abqarie.com
65
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.
www.abqarie.com
66
Klik perkataan Download untuk muat turun. Versi terbaru ialah 1.1.8.
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 11.3
www.abqarie.com
67
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.
www.abqarie.com
68
Gambarajah 11.6
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)
www.abqarie.com
69
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 11.9
www.abqarie.com
70
Anda boleh perhatikan di menu utama anda terdapat menu Shopping Online yang telah anda bina sebelum ini. Klik pada menu tersebut.
Gambarajah 11.20
Gambarajah 11.21
Page seperti gambarajah 11.21 adalah contoh kedai online anda. Produk-produk yang disenaraikan di situ adalah SAMPLE DATA yang diinstall semasa proses instalasi perisian
www.abqarie.com
71
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 11.22
Pergi ke Module Manager, kesemua module yang diinstall sebelum ini akan dipaparkan di sini seperti dalam gambarajah 11.23 berikut.
Gambarajah 11.23
Gambarajah 11.24
www.abqarie.com
72
Gambarajah 11.25
11.2.5 Anda juga boleh setkan beberapa option untuk bila & bagaimana untuk mempamerkan harga.
Gambarajah 11.26
11.2.6 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. 11.2.7 Pada Frontend Features, biarkan seperti yang telah ditetapkan. Anda boleh edit jika anda mahu.
www.abqarie.com
73
Gambarajah 11.27
Gambarajah 11.28
11.2.8 Di bahagian User Registration Settings, pada User Registration Type, anda boleh setkan beberapa pilihan, iaitu 11.2.8.1 Normal Account Creation pendaftaran standard yang mana pengguna memilih username dan kata laluan. 11.2.8.2 Silent Account Creation pengguna tidak perlu pilih username dan kata laluan, tetapi ianya dibina secara automatik semasa pendaftaran dan akan dihantar kepada email yang telah disediakan. 11.2.8.3 Optional Account Creation pengguna boleh memilih samada mahu membuat akaun atau tidak. Jika mahu, username dan kata laluan mestilah dipilih. 11.2.8.4 No Account Creation pengguna tidak perlu buat pendaftaran.
www.abqarie.com
74
Gambarajah 11.29
11.2.9 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 11.30
11.2.10 Pada Core Settings dan Logfile Configuration, biarkan by default seperti yang disediakan.
www.abqarie.com
75
Gambarajah 11.31
www.abqarie.com
76
Gambarajah 11.33
Tab Site 11.2.12 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 11.34
www.abqarie.com
77
Gambarajah 11.35
Tab Checkout 11.2.14 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 11.36
www.abqarie.com
78
Tab Downloads 11.2.15 Anda perlu enablekan bahagian ini jika anda menjual bahan digital yang boleh didownload. Jika tidak, biarkan ia tanpa dipilih.
Gambarajah 11.37
Tab Feed Configuration 11.2.16 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 email atau sebagainya.
Gambarajah 11.38
www.abqarie.com
79
Gambarajah 11.39
www.abqarie.com
80
Gambarajah 11.40
11.4.4 Untuk melihat kategori yang telah anda masukkan, pergi ke menu Products Categories. Kalau kurang ngam, klik pada namanya untuk edit semula.
List
Stock Keeping Unit ( SKU) is an identification, usually alphanumeric, of a particular product that allows it to be tracked for inventory purposes.
www.abqarie.com
81
Gambarajah 11.41
11.5.3 Scroll ke bawah untuk upload imej produk anda. Klik butang Save.
Gambarajah 11.42
11.5.4 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.
www.abqarie.com
82
Gambarajah 11.43
List Manufacturers
www.abqarie.com
83
Gambarajah 11.44
11.6.1 Pergi ke menu Manufacturer Add Manufacturer Categories 11.6.2 Masukkan maklumat yang diminta 11.6.3 Untuk melihat senarai manufacturer categories, pergi ke menu Manufacturer Manufacturer Categories
List
Gambarajah 11.45
www.abqarie.com
84
Gambarajah 11.46 11.7.2 Pada Coupon Code, masukkan nama bagi kupon anda. Anda bebas namakannya dengan apa sahaja. 11.7.3 Pada Percent or Total, anda boleh pilih samada diskaun yang anda mahu berikan itu dalam bentuk peratusan atau dalam bentuk jumlah. 11.7.4 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. 11.7.5 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 RM20. 11.7.6 Untuk melihat senarai kupon, pergi ke menu Coupon Coupon List.
www.abqarie.com
85
Gambarajah 11.47
11.9 Module
11.9.1 Pergi ke menu Admin List Modules. 11.9.2 Di sana anda boleh lihat senarai modules yang disediakan. Anda boleh enable dan disable module tertentu mengikut keperluan anda. 11.9.3 Klik Save Permissions bagi menyimpan (Save) setiap perubahan yang dibuat. 11.9.4 Klik Function List untuk editing yang lebih terperinci bagi setiap module.
www.abqarie.com
86
Gambarajah 11.48
11.9.5 Sebagai contoh, jika anda tidak mahu module vendor dipaparkan di menu utama, klik pada perkataan vendor pada senarai Module Name. 11.9.6 Pada Display Order, pilih No pada drop-down menu.(lihat gambarajah 11.49)
www.abqarie.com
87
Gambarajah 11.49
11.1.10 Pesanan
11.1.11 Untuk melihat senarai pesanan yang telah dibuat oleh pelanggan, pergi ke menu Orders List Orders.
Gambarajah 11.50
www.abqarie.com
88
11.1.12 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 11.51 11.1.13 Satu email daripada store anda akan dihantar kepada email pengguna memberitahu status terbaru pesanannya.
Gambarajah 11.52
www.abqarie.com
89
Template VirtueMart (Berbayar) 01. http://www.vjtemplates.com/ 02. http://www.templatemonster.com/virtuemart-templates.php 03. http://www.bestvirtuemarttemplates.com/ 04. http://joomlartwork.com/virtuemart-templates 05. http://www.hypertemplates.com/type/virtuemart-templates/page1.html 06. http://www.ozzu.com/designs/virtuemart_templates/ 07. http://www.websitetemplates.bz/virtuemart-templates.html 08.http://www.yagendoo.com/en/joomla/extension-themes/virtuemart-themes/mainpagethemes.html 09. http://www.poweredbyvirtuemart.com/ 10. http://www.virtuemarttemplates.net/ 11. http://www.templates.com/product/virtuemart-templates/ 12. http://www.zeronese.net/website-templates/types/virtuemart-templates/ 13. http://www.templatemagician.com/category/VirtueMart-templates 14. http://www.developing-and-design.com/ 15. http://www.vmjunction.com/
************** Antara laman-laman web yang menyediakan template Joomla percuma ialah: 01) http://www.joomla24.com/ 02) http://www.freejoomlatemplatez.com/ 03) http://www.bestofjoomla.com/ 04) http://joomlatp.com/ 05) http://www.themesbase.com/ 06) http://www.siteground.com/joomla-hosting/joomla-templates.htm 07) http://prowebcreative.com/ 08) http://www.joomlashack.com/free-joomla-templates 09) http://www.atemplatefree.com/ 10) http://www.joomlafreetemplates.com/ 11) http://www.bestfreejoomlatemplates.com/ 12) http://www.themza.com/browse-templates.php
www.abqarie.com
90
RUJUKAN
Using Joomla!, Ron Severdia & Kenneth Crowder, (2010), Gravenstein Highway North, Sebastopol, CA 95472. O'Reilly Media, Inc., 1005
10 Top Joomla! Extensions - http://needforcontent.com/10-top-joomla-extensions/ Xmap - http://extensions.joomla.org/extensions/structure-a-navigation/site-map/3066 Joomla! Web Site - www.joomla.org Mastering Joomla! 1.5 (Extension and Framework Development), 2007, James Kennard, Packt Publishing Ltd. Birmingham, UK. Building Websites with Joomla! (A step by step tutorial to getting your Joomla! CMS website up fast), Hagen Graf, 2006, James Kennard, Packt Publishing Ltd. Birmingham, UK.
ii
TERJEMAHAN PENULIS Pengalaman Mengajar (IT) 01. Fasilitator Kursus Membina Laman Web untuk pensyarah-pensyarah Politeknik Kota Kinabalu, di bangunan Majlis Ugama Islam Sabah (MUIS), 18 Mei 2000. 02. Fasilitator Bengkel Asas Membuat Personal Homepage untuk pensyarah-pensyarah Fakulti Teknologi Maklumat & Kuantitatif UiTM Cawangan Sabah, di Makmal Komputer UiTM Sabah, 7 April 2000. 03. Fasilitator Pengajian Fleksibel (FLP Flexible Learning Programme) di internet bagi subjek Pendidikan Islam Asas 1. 04. Fasilitator Kursus Membina Laman Web Menggunakan Microsoft FrontPage XP Siri 1untuk graduan-graduan universiti Skim Sangkutan & Latihan (SSL) anjuran JPA dengan kerjasama UiTM pada 22-23 Oktober 2002 di Makmal Komputer 1A UiTM Sabah. 05. Fasilitator Kursus Membina Laman Web Menggunakan Microsoft FrontPage XP Siri 2 untuk graduan-graduan universiti Skim Sangkutan & Latihan (SSL) anjuran JPA dengan kerjasama UiTM pada 12-13 November 2002 (Group B) dan 15 & 18 November 2002 (Group A) di Makmal Komputer 1A UiTM Sabah. 06. Fasilitator Kursus Membina Laman Web Menggunakan Microsoft FrontPage XP untuk peserta-peserta Kursus Komputer Ahli Kumpulan Wanita Nelayan Sabah (KUNITA) pada 22 - 23 Disember 2004 di Informatics, Tingkat 5, Wawasan Plaza Off Coastal Highway, Kota Kinabalu. 07. Fasilitator Kursus Komputer (Adobe Photoshop 7.0) Staf Lembaga Kemajuan Ikan Malaysia Cawangan Sabah, anjuran bersama LKIM dan UiTM Cawangan Sabah, pada 11 Mei 2004 di Makmal Bahasa UiTM Sabah. 08. Fasilitator Kursus Asas 'Web Design' (Microsoft FrontPage XP) untuk pensyarah-pensyarah UiTM Cawangan Sabah, anjuran Bahagian Latihan dan Pembangunan Staf, pada 9, 10 & 11 Mei 2005 di Makmal Komputer 1A UiTM Sabah. 09. Fasilitator Bengkel Pembelajaran Perisian 'Open Source' MAMBO, untuk AJK Laman Web UiTM Cawangan Sabah, pada 13 Jun 2006, (10 peserta) di Makmal Komputer 1A UiTM Sabah. 10. Fasilitator Bengkel 'Open Source' MAMBO, untuk AJK Laman Web UiTM Cawangan Sabah, pada 10 Mei 2007, (20 peserta) di Makmal Komputer 1B UiTM Sabah, anjuran Unit ICT & Jawatankuasa Latihan dan Pembangunan Staf. 11. Fasilitator Bengkel Asas Adobe Photoshop untuk staf UiTM Sabah, pada 24 Mei 2007 (20 peserta) di Makmal Komputer 1B UiTM Cawangan Sabah, anjuran Unit ICT & Jawatankuasa Latihan dan Pembangunan Staf. 12. Fasilitator Kursus Pembinaan Laman Web Menggunakan Microsoft FrontPage 2003untuk peserta-peserta Skim
www.abqarie.com
91
Pembangunan Usahawan Siswazah (SPUS) 2007 pada 16 17 Jun 2007, anjuran bersama SEDCO & UiTM Cawangan Sabah, di Makmal Komputer 1A UiTM Cawangan Sabah. 13. Fasilitator Kursus Pembinaan Laman Web Menggunakan Microsoft FrontPage 2003 untuk peserta-peserta Skim Pembangunan Usahawan Siswazah (SPUS) 2008 pada Jun 2008, anjuran bersama SEDCO & UiTM Sabah, di Makmal Komputer 1A UiTM Cawangan Sabah. 14. Fasilitator Kursus Pembinaan Laman Web E-Commerce Menggunakan Perisian Shopping Cart CubeCart untuk peserta-peserta Skim Pembangunan Usahawan Siswazah (SPUS) 2009 pada 24-27 Jun 2009, anjuran bersama SEDCO & UiTM Sabah, di Makmal Komputer 1A UiTM Sabah. (www.spus.biz) 15. Fasilitator Kursus Pembinaan Laman Web Menggunakan CMS Open Source Joomla 1.5 untuk Staf Akademik & Bukan Akademik UiTM Sabah, 23 April 2010, Makmal AUTOCAD, UiTM Sabah (20 peserta). 16. Fasilitator Kursus Pembinaan Laman Web Menggunakan CMS Open Source Joomla 1.5 & E-Commerce Virtue Mart untuk peserta-peserta Skim Pembangunan Usahawan Siswazah (SPUS) 2010 pada 22-25 Jun 2010, anjuran bersama UiTM Sabah, SEDCO & SME Bank, di Makmal Komputer 1B UiTM Sabah. (www.spus.biz) (22 peserta) Pengurusan Laman Web 01. Laman Web UiTM Sabah di URL www.sabah.uitm.edu.my (Super Administrator) 02. Laman Web SPUS di URL www.spus.biz (Super Administrator) 03. Laman Web Bahasa Arab di URL www.abqarie.com (Super Administrator) 04. Laman Web Nama Bayi Islam di URL www.namabayi.abqarie.com (Super Administrator) 05. Laman Web KAMUS ABQARIE ONLINE: Melayu-Arab-Inggeris di URL www.kamus.abqarie.com (Super Administrator) 06. Laman Web Peribadi di URL http://mazuki.uitm.edu.my (Super Administrator) - dalam pembinaan 07. Laman Web SRI Al-Hafidz di URL http://www.srialhafidz.edu.my (Super Administrator) 08. (dan lain-lain)
www.abqarie.com
92