1

JOOMLA! Manual Belajar dan Praktikal Bimbingan Azmi Sulaiman

Joomla-

AdaWeb

Azmi Sulaiman Hakcipta Terpelihara © 2009-2011

http://Joomla-AdaWeb.Com & http://lamanKU.my

2

ISI KANDUNGAN

Perkara Halaman Silibus 3 Pengenalan & Webserver 6 Pendahuluan Tutor 6 Pengenalan Asas (Web, Web Dinamik, Domain & Hosting 7 - 8 CMS & Joomla 8 - 9 Webserver 11 1. USBWebserver 12 - Installasi Joomla 15 2. MoWes Webserver 25 Panel Kawalan Administrator (Cpanel Admin) 34 Pengenalan & Login 34 Halaman Utama 35 Menu-menu kawalan 36 – 42 Ikon-ikon Manager 43 Tools Panel Info 44 Membina Kandungan & Menu 45 Konsep Kandungan (content) 45 - 50 Parameter Kandungan 51 - 52 Mencipta Menu & Jenis-jenis Menu 53 – 56 Rekabentuk Asas Joomla 57 Web Agensi Kerajaan 58 Asas Rekabentuk (Component,module,plugin & language) 59 - 64 Templates 66 Rekabentuk & Arkitektual Joomla 71 Kerangka & Database 71 Model View Controller 72 Fail & Folder Aplikasi 73 Database & Jadual data 77 Edit & Update data 77 Konsep Merekabentuk & Pembanggunan 78 Component 78 Module 88 Plugin 93 Template 98 Asas CSS 105 Backup & Restore Joomla! 126 Localhost 126 Backup fail & folder aplikasi 126 Backup database 128 Hosting Server 131 Restore fail & folder aplikasi 131 Restore database 135 Penutup & Contoh Web Joomla 137

3

Silibus Umum JOOMLA 1.5

Pendahuluan dan Pengenalan

Web & Web Dinamik

Domain & Hosting

CMS

Joomla!

o Sejarah Mambo & Joomla

Pengenalan Kepada Webserver USBWebserver

o Pakej Apache, PHP & MySQL

o Installasi Joomla!

MoWes Webserver

o Installasi MoWes

o Penggunaan & Setting

Panel Kawalan Administrator Pengenalan & Login

Halaman Utama

Menu-menu kawalan

Ikon-ikon Manager Utama

Tools Panel Info

Membina Kandungan Web & Menu Konsep Kandungan (content)

o Aliran kandungan

o Mencipta Section, Category & Article

Parameter

o Parameter Article, Advanced & Information

Mencipta Menu

o Jenis Menu

o Menu Item

Rekabentuk Asas Joomla Merekabentuk web agensi kerajaan

o Syarat & Peraturan

Pekeliling Pengurusan Web/Portal Agensi Kerajaan

Merekabentuk web secara asas

o Component

o Extensions

Module, plugin & language

4

o Template

Modifikasi grafik & persembahan

Modifikasi HTML & CSS

Rekabentuk & Arkitektual MVC Joomla Kerangka & Database

o Model View Controller

o Fail & Folder Aplikasi

o Database & PhpMyAdmin

o Jadual-jadual data

Edit & Update data

Konsep Merekabentuk & Pembangunan

o Components

o Module

o Plugin

o Language

o Template

Fail-fail PHP dan XML

Grafik

CSS

Backup & Restore Joomla! Local webserver

o Backup fail & folder Joomla!

o Backup Database

PhpMyAdmin

Eksport data web

Hosting Server:

o Restore fail & folder Joomla.

Installation & configuration

o Restore Database

Cipta database, username, password dan host

Import data web

Tamat dan Penilaian

5

AMARAN: Hak Cipta Terpelihara © 2009 – 2011 Mohd Azmi Sulaiman

Tiada sebarang bahagian dan isi kandungan sama ada teks, grafik dan lakaran yang terkandung di dalam

manual ini boleh disalin, diulang cetak, diduplikasi secara digital atau elektronik tanpa izin dan pengetahuan

penulis. Kecuali untuk penggunaan dan tujuan latihan yang dijalankan oleh penulis atau melalui penjualan secara

dalam talian menerusi laman http://www.joomla-adaweb.com dan http://www.lamanku.my sahaja.

6

Pengenalan & Web Server

PENDAHULUAN

Salam sejahtera! Dokumen ini adalah hasil penulisan saya (Mohd Azmi Sulaiman) yang

merupakan seorang pendidik dan jurulatih dalam bidang web CMS khususnya Joomla!. Sebagai

seorang pendidik saya lebih selesa dikenali dan dipanggil dengan gelaran cikgu atau sifu. Antara

panggilan yang biasa diberikan kepada saya adalah Sifu Azmi atau Cikgu Azmi.

Pengalaman dalam bidang pendidikan telah melebihi 15 tahun dan sebagai jurulatih

Mambo/Joomla telah lebih 9 tahun. Terlibat dengan web CMS sejak tahun 2002 bermula dengan

PHPNuke, Mambo dan phpBB. Selepas tahun 2005, akibat berlaku perpecahan dalam versi Mambo

seterusnya melahirkan Joomla! 1.0. Sejak itu hingga kini saya banyak menghasilkan tutorial, manual

dan panduan pengguna berbentuk teks seperti ini untuk CMS Joomla. Kebanyakan artikel penulisan

dan nukilan saya diterbitkan secara dalam talian menerusi laman web saya seperti http://joomla-

adaweb.com dan http://lamanku.my .

Sehingga kini berpuluh artikel sama ada panduan untuk pengurusan laman web Joomla!

Mahupun topik lain yang bersangkutan dengan penggunaan CMS Joomla telah saya hasilkan,

semuanya diedar dan diterbitkan menerusi laman web saya sejak 2005 lagi.

Kali ini saya hasilkan pula penulisan yang menyentuh perkara yang lebih teknikal dan

mendalam khusus kepada pengguna yang telah sedia dan berpengalaman menggunakan Joomla!.

Pengguna dianggap telah faham dan mahir dalam selok-belok pengendalian Joomla secara

menyeluruh. Maka kini saya tambahkan lagi kemahiran dan pengetahuan anda dalam menguasai

sepenuhnya CMS ini.

Semoga penulisan kali ini dapat membantu menjadikan anda seorang admin Joomla yang

lebih mahir, kreatif dan boleh menghasilkan produk baru kepada Joomla!. Tidak sahaja menjadi

pengguna tetapi juga menjadi penyumbang kepada penghasilan produk baru sama ada untuk

kegunaan sendiri, perkongsian atau komersial. Selamat maju jaya dalam mempelajari Joomla!.

Sifu Azmi Sulaiman

http://www.lamanku.my & http://joomla-adaweb.com

7

PENGENALAN ASAS

Pengenalan Kepada Web

Web jika diterjemahkan bermaksud jaringan halaman. Jaringan ini menghubungkan

manusia dengan manusia lain, malah kini boleh pula menghubungkan manusia dengan sistem

yang berkecerdikan buatan. Rangkaian jaringan ini boleh berbentuk luas (wide) dikenali sebagai

internet atau terhad (lan) iaitu inranet.

Teknologi web telah berkembang dari web 1.0 sebelum tahun 2000 kepada web 2.0 sehingga

kini. Namun telah bermula teknologi web 3.0 pada masa kini. Joomla! adalah sebuah aplikasi

CMS (Content Management System) bagi web yang menyokong teknologi web era 2.0

(Teknologi Web Simantik) yang wujud pada hari ini. Pembangunan web dalam era teknologi

simantik ini diistilahkan sebagai Era ‘Read-Write-Publish’ berbanding era ‘Read-Only’ semasa

zaman web 1.0 dengan teknologi HTML sahaja.

Seterusnya evolusi teknologi web 3.0 kini telah bermula dan Joomla! juga kini menuju ke arah

teknologi web ‘berkecerdikan buatan’ (Intelligent Web) untuk kegunaan masa depan. Disamping

keupaya interaktif, web yang seterusnya nanti juga bijak dan ‘hidup’ sebagai sebuah entiti yang

bekerja sendiri secara dalam talian.

Semasa era web 1.0, hanya orang berpengalaman dan berpengalaman dengan kod aturcara

html diberi kepercayaan membina web. Tetapi dalam era web 2.0 walaupun tanpa pengetahuan

tersebut, ramai mampu dan diberi kepercayaan menghasilkan laman web. Walaupun tanpa

pengetahuan itu web era 2.0 dapat dihasilkan dengan lebih menarik dan dinamik.

Apakah web dinamik?

Dari segi istilah, web dinamik merupakan web yang mempunyai isi kandungan dan template

paparan yang bolehubah mengikut input pengguna. Web dinamik juga bersifat interaktif dan

menghasilkan direktori pengguna berdaftar. Setiap pengguna dan isi kandungan dikategorikan

mengikut aras capaian yang pelbagai. Capaian oleh pengguna dan persembahan isi kandungan

berbeza pengikut aras dan pengguna yang mengaksesnya.

Web dinamik juga dihasilkan oleh pembangun dengan kod aturcara hebat (Perl,

ASP,JSP,Coldfusion, PHP) dan digabungkan dengan HTML.

8

Domain

Domain adalah nama yang menjadi pengenalan kepada satu set nombor protokol

internet (IP) atau alamat internet. Sebagai contoh nama domain adalah google.com mewakili

suatu alamat IP iaiatu 209.85.175.147. Domain dapat memudahkan pengguna mengingati

alamat dalam bentuk perkataan berbanding dalam bentuk nombor.

Ringkasnya domain merupakan nama unik/alamat untuk laman web kita, domain merupakan

nama yang diakhiri dengan .com, .net, .org, .biz, .tv, .my, .gov.my, .com.my, .net.my, .org.my

dan lain-lain.

Hosting

Hosting kadangkala dipanggil juga web hosting adalah rumah untuk menyimpan fail-fail

dan folder yang menjana sesebuah laman web. Dalam satu hosting boleh dimuatkan lebih dari

satu laman web bergantung kepada sais simpanan datanya (ruangan hosting).

Anda boleh membina server sendiri menjadi hosting atau menyewa ruangan hosting

dari pihak ketiga yang juga dikenali sebagai Dedicated hosting atau Dedicated Server. Contohnya

anda menyewa hosting dengan exabytes.com.my atau dengan datakl.com dan sebagainya.

Apakah maksud Content Management System (CMS)?

Content Management System atau dalam bahasa melayu ( Sistem Pengurusan Kandungan)

membawa maksud ia adalah sebuah aplikasi untuk menguruskan isi kandungan khusus bagi

membangunkan sebuah laman web, seperti sebuah perpustakaan yang menyimpan artikel, majalah

dan buku-buku. Kandungan yang dimaksudkan meliputi teks, foto/grafik, music, video, dokumen

serta apa sahaja bentuk format fail yang difikirkan sesuai bagi menyalurkan maklumat.

Pada asasnya perkara terpenting yang perlu ada pada seorang pengendali laman web seperti anda

adalah mengetahui serta menguasai semua kemahiran dan skil menguruskan isi kandungan web

CMS sahaja bukanya memikirkan bagaimana untuk pembangunan sebuah sistem laman web yang

canggih dan sistematik seperti Joomla. Ringkasnya dengan menggunakan CMS anda hanya

9

memfokuskan kerja sebagai pengurus kandungan web sahaja tanpa mengambil tahu tentang

pembangunan dan pengaturcaraan membina sebuah sistem web.

Tetapi untuk menjadikan web anda unik dan berbeza dengan web lain yang menggunakan Joomla

mahu tidak mahu anda perlu juga mengambil tahu dan mempelajari keseluruhan tentang Joomla

termasuk seni bina dan struktur arkitektualnya. Sebagai sebuah aplikasi menggunakan teknologi

ICT, Joomla mempunyai struktur arkitektualnya yang tersendiri.

Menerusi buku ini, saya tulis pendokumentasian dan panduan untuk anda memahami dan

mempelajari seni bina Joomla 1.5 secara teknikal meliputi kerangka core Joomla dari sudut

arkitektual, hubungannya dengan database, juga memahami struktur dan teknikal pembangunan

extension seperti component, module, plugin dan template.

Tetapi dokumetasi ini tidak akan mengajar anda bagaimana menulis koding PHP, SQL, XHTML dan

HTML sepenuhnya. Saya hanya sertakan contoh dan panduan tentangnya. Kemahiran tersebut

anda perlu pelajari sendiri dan saya beranggapan anda telah sedia mahir tentang penulisan koding

tersebut atau setidak-tidaknya boleh memodifikasikannya dengan pengetahuan sedia ada anda.

Semoga dengan sedikit penjelasan dan panduan menerusi tulisan saya ini, diharapkan

pembaca/pengguna dapat memahami dan menghasilkan extension Joomla sama ada component,

module, plugin dan templates khas untuk kegunaan sendiri.

Pengenalan Kepada Joomla

Joomla! Adalah aplikasi web CMS dengan “engine” PHP iaitu bahasa aturcara web moden yang

dipanggil Hypertext Preprocessor atau ringkasnya PHP.

Joomla! ialah sebuah Sistem Pengurusan Kandungan Sumber Terbuka yang diedarkan secara percuma. Ia ditulis dalam bahasa pengaturcaraan PHP untuk menerbitkan kandungan ke laman web dan intranet dengan menggunakan Pangkalan data MySQL.

Ciri-ciri unik Joomla! termasuklah laman cache untuk meningkatkan prestasi, RSS, laman boleh cetak, berita terkini, blog, undian, carian laman, dan bahasa-bahasa.

10

Nama "Joomla" diambil daripada perkataan Swahili iaitu jumla yang bermaksud "mari bersama-sama" atau "secara keseluruhannya". Ia dipilih bagi menunjukkan komitmen pasukan pembangunan dan komuniti projek berkenaan. Keluaran pertama Joomla! (Joomla! 1.0.0) diumumkan pada 16 September 2005. Ini adalah keluaran penjenamaan semula Mambo 4.5.2.3 digabungkan dengan pembaikan keselamatan serta pepijat komputer. Pasukan pembangunan asas menyatakan bahawa Joomla! 1.5 adalah kod yang ditulis semula dengan dibinaan menggunakan bahasa pengaturcaraan PHP 5.

Joomla! mula wujud apabila terjadinya kontroversi antara pasukan pembangunan perisian daripada versi Mambo dengan pemodal iaitu Miro Corporation dari Australia, yang juga pemegang hak cipta Mambo pada masa itu. Kedua-dua kumpulan berpisah pada 17 Ogos 2005. Miro Corporation menubuhkan sebuah yayasan dengan tujuan untuk menaja projek itu dan melindunginya daripada tindakan undang-undang. Pasukan pembangunan mendakwa bahawa banyak struktur yayasan berkenaan melanggari perjanjian yang dibuat oleh Jawatankuasa Mambo yang dilantik. Mereka juga mendakwa kurangnya perbincangan dengan pemegang saham utama dan melanggari nilai-nilai asas Sumber Terbuka.

Pasukan pembangunan mencipta sebuah laman web yang dipanggil OpenSourceMatters untuk mengedarkan maklumat kepada para pengguna, pemaju, pereka web dan komuniti secara amnya. Ketua projek pada waktu itu, Andrew Eddie, juga dikenali sebagai "MasterChief," menulis sepucuk surat terbuka kepada komuniti, yang mucul di papan pemberitahuan di forum awam di mamboserver.com.

Menjelang keesokkan harinya, 1000 orang telah menyertai laman forum opensourcematters.org dengan kebanyakan mesej menunjukkan perkataan-perkataan semangat dan galakan kepada Pasukan Pembangunan, salah seorang diantaranya adalah saya yang menulis manual ini. Laman web berkenaan menerima komen dan artikel berita berhubung peristiwa berkenaan di newsforge.com, eweek.com, and ZDnet.com. CEO Miro, Peter Lamont, memberi respon awam di dalam artikel bertajuk Kontroversi Sumber Terbuka - 20 Soalan Bersama Miro.

Peristiwa ini telah mengakibatkan komuniti sumber terbuka berfikir semula tentang apa tafsiran "Sumber Terbuka". Laman-laman forum di kebanyakan projek sumber terbuka dibanjiri dengan mesej-mesej menyokong dan menentang tindakan kedua-dua pihak berkenaan. Khabar-khabar angin dan tuduhan tentang kesilapan yang dilakukan oleh Miro dan Yayasan Mambo mula menjadi hangat.

Dalam masa dua minggu selepas pengumuman Eddie, pasukan-pasukan mula disusun semula dan komuniti ini mula tumbuh. Pada 1 September 2005 nama baru diumumkan dengan sambutan berbeza oleh 3000+ penyokong setia Pasukan Pembangunan. Sejak itu Joomla! mula dipopularkan dan dikembangkan sehingga ke hari ini.

11

Joomla! dilindungi di bawah Lesen Dokumentasi Bebas GNU, dimana pengguna bebas membuat salinan semula, duplikasi, penerbitan dan pengubahsuaian dan salinan baru harus dibebaskan juga secara terbuka di bawh lesen yang sama dan dikongsi bersama secara percuma.

PENGENALAN KEPADA WEBSERVER

Aplikasi PHP seperti Joomla ini perlu dipasang (hidup) dalam persekitaran webserver yang

menyokongnya. Untuk menghasilkan persekitaran webserver kita perlu pakej yang mengandungi

gabungan beberapa aplikasi iaitu:

i- Apache

ii- MySQL

iii- PHP

Pakej ini boleh dipasang sekali menggunakan pakej aplikasi webserver yang berbagai jenis

seperti WAMP, XAMPP, Server2Go, MoWes,Tonido dan jenis portable seperti USB Webserver

yang akan digunakan untuk tujuan pembelajaran kali ini. Semua webserver ini dikenali sebagi

WAMP kerana dipasang di dalam engine Windows. Selain itu terdapat juga yang berjenis LAMP

untuk OS Linux atau MAMP untuk OS Mac.

Bersama manual ini akan diterangkan bagaimana mengguna dan memasang dua jenis webserver untuk

windows iaitu USBWebserver dan MoWes.

1. Webserver I – USBWebserver 8

Jika memilih USBWebserver, anda perlu install dahulu webserver diikuti Joomla selepasnya.

Untuk kali ini USB Webserver (Versi 8.0) kan digunakan, pemilihannya kerana ia boleh dibawa

kemana segaja (portable) dan boleh dimuatkan terus ke dalam USB drive peserta yang

mempelajari Joomla untuk kali ini. Aplikasi ini boleh dimuat turun secara percuma di

http://www.usbwebserver.com/ dan anda boleh dapatkan versi yang lebih terkini selepas ini.

Webserver ini dipakejkan dengan semua aplikasi untuk mewujudkan persekitaran web seperti

yang dinyatakan di atas. USB Webserver dipakejkan dengan:

i- Apache (Httpd 2.2.15)

ii- MySQL 5.1.44

iii- PHP 5.2.13

12

Serta aplikasi antaramuka MySQL iaitu PHPMyAdmin 3.3.1rc1 yang boleh membantu anda

menyelenggara database dan jadual data untuk laman web Joomla! anda nanti.

1. Memasang USB Webserver ke dalam USB drive:

Anda akan diberikan fail termampat aplikasi ini dengan nama fail “USBWebserver v8_en.zip”

kemudian anda unzip/nyah mampat fail tersebut ke USB drive anda.

Anda boleh simpan dahulu fail ini di USB drive sebelum menyahmampatkannya.

Seterusnya baru anda nyahmampatkan fail ini terus dari USB drive anda menggunakan aplikasi

“winzip” atau “winrar”.

Jika anda memilih menggunakan winrar , klik kanan pada fail termampat tadi pilih menu

“Extract to USBWebserver v8_en\”

Tetapi jika anda pilih menggunakan Winzip, klik kanan pada fail termampat tadi pilih Winzip

pilih menu “Extract to folder J:\USBWebserver v8_en”

Hasilnya, anda akan dapat folder baru dengan nama USBWebserver v8_en seperti ini:

Kenal pasti folder USBWebserver seperti di atas dan di dalamnyamengandungi pakej aplikasi

gabungan antara Apache, MySQL, PHP dan PHPMyAdmin. Anda boleh buka folder dan lihat

kandungannya.

13

Untuk menghidupkan webserver ini anda hanya perlu klik 2 kali pada ikon aplikasi bernama

“usbwebserver.exe”. Apabila anda hidupkan aplikasi webserver ini, ia akan dipaparkan seperti

ini:

Tetingkap ini menunjukkan Apache dan MySQL telah dihidupkan dengan sempurna melalui

tanda pada tetingkap tersebut. Jika ia gagal berfungsi dengan baik ikon tersebut akan

ditandakan sebagai bermakna ia tidak berfungsi dan bekerja dengan sempurna.

Anda juga diberikan butang kemudahan untuk masuk ke “root” direktori iaitu tempat

meletakkan laman web anda nanti, butang ke “Localhost” iaitu untuk melancarkan pelayar web

anda dan butang untuk melancarkan antaramuka “PHPMyAdmin” serta butang online ke laman

web USBWebserver.com, contoh paparan adalah seperti di bawah:

Setelah mengenali webserver yang akan digunakan sekarang tiba

masa untuk memasukkan aplikasi Joomla! ke direktori atau lokasi

foldernya yang biasa digelar sebagai “Root”.

14

2. Memasang Joomla! ke dalam USBWebserver.

Terdapat banyak versi Joomla! bermula dari Joomla 1.0 hingga yang digunakan sekarang iaitu

Joomla! 1.5 (kali ini kita menggunakan Joomla! 1.5.21). Anda boleh dapatkan pakej Joomla!

termampat dengan memuat turunnya daripada lamannya di http://www.joomla.org .

Catatan: Kini sudah tercipta Joomla! 1.6 tetapi masih belum sesuai untuk digunakan sebagai

laman web sebab masih dalam proses pengujian dan dalam versi Beta. ( Joomla! 1.6.Beta11).

Pakej termampat yang anda muat turun tadi hendaklah dinyahmampat sama seperti proses

semasa memasukkan USBWebserver ke USBdrive anda sebelum ini. Pakej Joomla! yang

dinyahmampat ini harus diletakkan di dalam root. Jika anda buka folder USBWebserver anda

akan lihat holder bernama root. Letakkan Joomla! yang anda nyahmampat(unzip) tadi di situ.

Bagaimana meletak fail dinyahmampat ke USB drive:

Klik kanan pada pakej Joomla! termampat – contoh Joomla_1.5.21-Stable-Full_Package.zip

Pilih Winzip/Winrar pilih menu “extract to..” pilih lokasi USB drive anda eg: E\: pilih

folder USBWebserver pilih folder “root” cipta folder baru “joomla” seterusnya laksanakan

proses menyahmampat.

Kemudian proses

menyahmampat akan

dilaksanakan oleh aplikasi

sehingga 100% siap. Anda akan

perolehi dalam folder

E:/../root/joomla/ tersebut

akan di paparkan beberapa

folder dan fail pakej aplikasi

Joomla! hasil proses tersebut.

Semak bilangan ini dalam folder

joomla:

Bilangan fail = 4,201 fail

Bilangan folder = 792 folder

Catatan: Bilangan berbeza jika anda mengguna pakej Joomla! versi yang berbeza.

Kini anda boleh meneruskan untuk proses installasi laman web anda.

15

Proses Installasi Joomla

Proses installasi ini anda boleh gunakan di semua webserver sama ada local atau online. Kaedah

dan langkah installasinya adalah sama tertakluk kepad versi yang anda gunakan.

Jika anda menggunakan USBWebserver, semua fail dan folder aplikasi Joomla! 1.5 telah tersedia

di dalam E:/../root/joomla. Anda sudah boleh mulakan menginstall laman web anda. Anda boleh

lancarkan pelayar web anda (web browser) secara manual atau anda gunakan butang “localhost” pada

tetingkap USBWebserver anda.

Semasa anda melancarkan “localhost” pada pelayar internet anda akan dipaparkan halaman index bagi

USBWebserver seperti ini:

Ini kerana URL yang dilaksanakan adalah http://localhost:8080/ untuk melancarkan laman web Joomla

anda bagi memulakan proses installasi tuliskan alamat URL menjadi seperti ini

http://localhost:8080/joomla di mana ‘/joomla’ akan memanggil folder aplikasi Joomla! dari direktori

root yang anda nyahmampat tadi.

16

Jika anda gunakan URL http://localhost:8080/joomla tetingkap pelayar web anda akan membuka

aplikasi installasi laman web anda seperti di atas.

Berikut adalah langkah-langkah dalam proses menginstallasi laman web Joomla! anda:

Langkah 1:

Penerangan:

Apabila pelayar internet anda membuka alamat URL http://localhost:8080/joomla aplikasi

Joomla akan meminta anda membuat installasi bagi SEBUAH laman web baru menggunakan CMS

Joomla. Terdapat 7 langkah installasi bermula dengan langkah 1 untuk anda memilih bahasa yang akan

anda gunakan dalam proses installasi. Oleh kerana tiad kemudahan bahasa melayu anda boleh pilih

bahasa lain contohnya bahasa English(US).

Sesudah anda menetapkan bahasa pilihan anda tersebut, teruskan proses installasi dengan

butang “Next” di sisi kanan atas. Tetingkap akan memaparkan proses seterusnya dalam langkah ke 2.

17

Langkah 2:

Penerangan:

Dalam langkah ke 2 anda akan dipaparkn dengan maklumat berkaitan kemudahan sokongan dan

setting pada system hosting yang anda gunakan. Perkar ini sangat berguna apabila anda melanggan

hosting internet sebenar nanti untuk anda mengetahui kualiti dan kekuatan server hosting yang anda

bayar dan sewa itu.

Anda mungkin tidak mengetahui sepenuhnya keperluan sebenar yang dikehendaki oleh aplikasi

Joomla, tetapi anda boleh semak seperti paparn di atas. Dalam kotak pertama pastikan tiada tanda “No”

berwarna merah dipaparkan. Kerana senarai dalam kotak pertama ini sangat perlu untuk Joomla bekerja

seperti kemudahan aplikasi yang menyokong kod PHP, Zlib, XML, MySQL dan lainyer. Jika tiada aplikasi

ini laman web anda tidak akan bekerja dan boleh digunakan. Proses installasi akn berhenti jika dalam

kotak pertama ini ada yang bertanda “No”.

Begitu juga dengan kotak kedua, senari menunjukkan arhan kerja PHP untuk memberikan

Joomla keselesaan untuk bekerja sebagai laman web yang sempurna. Semak antara “Recommended”

dan “Actual”. Pastikan mengikut seperti yang dicadangkan dalam “Recommended”. Tetapi aplikasi

Joomla masih boleh diinstall walaupun ada tanda merah “On” dipaparkan. Kerana ad sesetengah

cadangan boleh diatasi secara manual dan menggunakan penambahan fungsi selepas proses installasi

nanti. Teruskan ke langkah 3 dengan butang “Next”.

18

Langkah 3:

Penerangan:

Pada langkah ke 3 ini pengguna perlu membac dan memahami perjanjian dan kontrak

penggunaan aplikasi Joomla. Dalam akuan perjanjian ini dinyatakan jenis warranty, sekatan atau

halangan membuat duplikasi, jenis lesen penggunaan dan terma dan syarat penggunaan aplikasi Joomla.

Anda tidak perlu risau menggunakan, menyalin dan mengedar aplikasi Joomla kerana ia

diisytiharkan sebagai aplikasi sumber terbuka (Open Sources) yang berada di bawah lesen “GNU General

Public License”. Anda boleh menduplikasi aplikasi atau membuat penambahan dan pengurangan pada

sistem Joomla mengikut keperluan dan kesesuaian yang perlu untuk laman web anda.

Pastikan anda tidak lagi menggunakan laman web yang dipublishkan kepada umum tetapi

dihasilkan dengan menggunakana perisian yang tidak sah (cetak rompak). Ia bukan sahaja salah dari

segi moral malah melanggar undang-undang cyber seperti Akta Komunikasi dan Multimedia, Akta

Hakcipta malah melanggar Undang-undang Negara.

19

Langkah 4:

Penerangan:

Dalam langkah ke 4 ini anda perlu memasukkan maklumat berkaitan dengan Database anda

iaitu jenis database (pilih MySQL), nama host bagi database MySQL anda ( biasanya nombor IP atau

domain – untuk proses pembelajaran ini masukkan sebagai “localhost”).

Jika anda menggunakan MySQL secara online anda perlu membina dahulu satu database baru

beserta dengan satu nam database, satu nama “username” dan satu katalaluan (password). Proses

membina database dapat dilakukan menggunakan antaramuka MySQL yang dipanggil PHPMyAdmin.

Setelah anda mendapat database baru dengan usernam dan passwordnya, lakukan proses ini

dengan memasukkan semua maklumat tersebut dalam ruangan Username, Password dan Database

Name.

Tetapi untuk proses pembelajaran ini anda masukkan; Username = root , Password = usbw dan

Database Name = joomla_db1

Teruskan proses ke langkah 5 menggunakan butang “Next”.

20

Langkah 5:

Penerangan:

Pada langkah ini anda boleh menetapkan sama ada ingin menggunakan FTP layer iaitu sistem

untuk anda menguruskan fail-fail ke dalam Joomla. Proses ini dapat membantu anda menguruskan

kemasukan dan pengurusan fail ke dalam sistem Joomla dengan lebih terkawal dan selamat.

Jika anda pengguna baru dan tidak mahu terlalu remeh dalam mengendalikan Joomla, saya

cadngkan pilih sahaja tidak menggunakan FTP layer ini. Jika anda tidak mahu menggunakan kemudahan

ini pilih “No” dan teruskan ke langkah seterusnya dengan butang “Next”.

Jika berminat dengan kemudahan ini anda pilih “Yes” kemudian masukkan “FTP User” iaitu

username bagi akun FTP anda, diikuti dengan katalaluannya (password FTP). Pada FTP Root Path tuliskan

lokasi root Joomla anda, contoh jika dalam USB drive – E:/USBWebserver/root/joomla atau jika path

online masukkan seperti ini - /home/lamankumynet/public_html/joomla

Tetapi setiap kali anda ingin buka, memasukkan, edit dan memadh fail, layer akan berfungsi dan

meminta kepastian identiti anda. Anda perlu masukkan username dan katalaluan jika salh layer akan

menghalang aktiviti anda.

Cadangan saya pilih “No” bagi pengguna baru Joomla bagi melancarkan proses pembelajaran

dan kerja-kerja membina laman web anda. Teruskan dengan butang “Next” untuk ke langkah

seterusnya.

21

Langkah 6:

Penerangan:

Dalam langkah ini anda perlu menetapkan satu konfigurasian tentang laman web anda

antaranya, menamakan laman web anda – contoh: Laman Joomla 1.5 – Azmi.

Anda juga perlu memasukkan alamat email untuk urusan penerimaan dan pengiriman email

selaku Administrator web. Masukkan alamat email yang sah dan aktif – contoh: azmi@lamanku.my .

Seterusnya masukkan kata laluan/ password (rahsiakan) untuk anda masuk ke backend iaitu

masuk ke Halaman kawalan web atau Admin Control Panel Site. Untuk tujuan pembelajaran anda

digalakkan menggunakan data sample untuk memberikan anda satu laman contoh yang lengkap. Klik

pada “Install sample data” dan seterusnya klik butang “Next” untuk ke langkah terakhir.

22

Langkah 7:

Penerangan:

Pada langkah ini anda perlu buat catatan tentang nama “Username” anda dan

katalaluan/password yang anda masukkan semasa langkah ke 6 tadi. Ini untuk kegunaan bila berlaku

masalah anda hilang/lupa username atau katalaluan anda di masa hadapan.

Anda juga diingatkan dengan mesej merah seperti di

sebalah. Apa yang anda perlu ikuti seperti diarahkan

ialah, anda masuk ke direktori root seterusnya ke

folder joomla dan padam folder bernama

“installation”.

23

Setelah anda padamkan folder “installation” maka selesailah proses memasang laman web joomla anda

dan kini ia telah sedia digunakan. Untuk ke halaman hadapan (frond-end) Joomla taipkan URL nya

seperti ini http://localhost:8080/joomla dan paparn seperti di bawah akan anda lihat.

Front-end Joomla

Paparan ini adalah berbeza jika admin menggunakan template Joomla yang berbeza untuk laman

webnya. Jika admin menggunakan template Milkyway, paparan adalah seperti ini.

24

Seterusnya anda boleh juga melihat paparan halaman kawalan admin (Cpanel Admin / back-end)

dengan URL ini : http://localhost:8080/joomla/administrator dimana anda sambung perkataan

administrator pada URL asal.

Back-end Joomla

Sebelum anda berjaya masuk ke halaman utama

Cpanel Admin, anda perlu masukkan username dan

katalaluan seperti yang saya minta anda catatkan

pad langkah ke 7 tadi. Jika username dan

katalaluan yang anda masukkan tepat, halaman

utama Cpanel Admin akan dibuka dan dipaparkan

seperti di bawah:

Jika anda rasa sukar menggunakan USBWebser anda boleh melangkau langkah-langkap installasi

webserver dan Joomla seperti diterangkan di atas dengan menggunakan Webserver MoWes. MoWes

didatangkan dengan pakej Webserver dan Joomla! sekali dalam satu pakej.

25

2. Webserver II- MoWes Webserver.

Jika anda memilih webserver MoWes, anda akan memperolehi webserver dan Joomla sekaligus.

1. Download file dari laman pembekal;

Untuk mendapatkan pakej aplikasi MoWes anda boleh muat-turun daripada laman web :

http://www.chsoftware.net/en/

Anda boleh pakej yang mengandungi keperluan sebuah webserver iaitu Apache, MySQL, PHP

dan Joomla. Pastikan juga anda memilih beberapa tools untuk kemudahan menyelenggara

webserver dan web anda nanti seperti PHPMyAdmin dan ImageMagick. Kegunaannya akan

diterangkan nanti.

2. Unzip;

Setelah anda berjaya muat turun, fail tersebut adalah dalam pakej termampat (zip) dengan

nama fail ‘mowes_portable.zip’ . Gunakan aplikasi yang ada dalam komputer anda untuk

menyahmampat (unzip) fail tersebut dan letakkan sama ada di dalam peranti storan komputer

anda atau ke dalam USB drive.

3. Pasang MoWes:

Pakej yang anda telah nyahmampat akan dipecahkan kepada beberapa fail dan folder seperti di

bawah. Langkah seterusnya yang anda perlu lakukan adalah memasang (install) aplikasi pakej

webserver MoWes. Untuk tujuan tersebut anda perlu 2x klik pada aplikasi dengan ikon

dengan nama fail ‘mowes.exe’.

26

4. Pemasangan Aplikasi MoWes;

Anda boleh jalankan proses pemasangan dengan mengikuti langkah-langkah berikut-

Jika amaran keselamatan seperti di bawah dipaparkan, klik pada ‘Run’.

5. Seterusnya bila aplikasi dibenarkan berjalan, paparan logo dan tetingkap installasi seperti di

bawah akan dipaparkan.

27

6. Langkah installasi akan meminta anda membuat pilihan bahasa yang anda akan digunakan

semasa proses pemasangan ini.

Pilih sahaja bahasa ‘English’, diikuti dengan menekan butang OK untuk meneruskan proses.

7. Kemudian diikuti dengan paparan tetingkap terma dan syarat penggunaan aplikasi webserver

ini. Jika anda bersetuju dengan terma dan syarat tersebut klik pada kekotak “I understand and

accept this conditions…..” diikuti tekan pada butang OK untuk meneruskan proses.

28

8. Proses seterusnya akan memasang satu persatu pakej yang mengandungi Apache, MySQL, PHP,

Joomla, PHPMyAdmin dan ImageMagick. Anda tunggu dan ikuti setiap arahan dan langkah

pemasangan pakej-pakej tersebut sehingga selesai.

9. Semasa proses memasang pakej-pakej aplikasi jika komputer memaparkan tetingkap seperti ini

anda pilih OK yang menunjukkan anda ingin pakej aplikasi tersebut dipasang. Lakukan perkara

yang sama jika berulang.

29

10. Seterusnya, bila aplikasi sempurna di pasang ke dalam folder ‘Mowes_Portable’, aplikasi seperti

MySQL dan Apache akan menghidupkan dirinya. Jika komputer anda meminta kebenaran

seperti tetingkap di bawah anda pilih ‘Allow access’ sebagai kebenaran untuk aplikasi

dihidupkan. Ulang perkara sama jika Apache juga ingin dihidupkan.

11. Tetingkap di bawah juga dipaparkan sebagai pemberitahuan tentang kerja dan amaran

berkaitan aplikasi MySQL. Klik pada OK menandakan anda memberikan kebenaran untuk kerja

dan faham amaran tersebut.

30

12. Jika semuanya berjalan lancar dan sempurna, tetingkap pelayar web (browser) anda akan

menghidupkan index start bagi aplikasi MoWes Webserver seperti di bawah:

URL untuk laman ini adalah http://localhost/start/index.php....

Ambil perhatian tentang username dan katalaluan bagi pakej Joomla anda iaitu ;

Username: ‘admin’ dan password: ‘password’.

13. Seterusnya klik pada butang ‘Back’ dan halaman utama webserver MoWes akan dipaparkan

seperti di sebelah. Pada halaman ini ditunjukkan semua aplikasi yang sedang bekerja di dalam

webserver MoWes iaitu Apache, PHP, MySQL dan ImageMagick.

Ditunjukkan juga aplikasi pakej web yang terdapat dalam webserver ini iaitu web yang akan

anda pelajari iaitu Joomla dan lain-lain seperti PHPMyAdmin yang akan digunakan sebagai

antara muka MySQL anda nanti.

31

14. Selain tetingkap utama pada bowser internet anda, terdapat juga tetingkap aplikasi MoWes

seperti di bawah dipaparkan pada desktop anda. Tetingkap ini juga menyatakan sama ada

Apache dan MySQL anda bekerja atau tidak. Anda boleh menutup dan memberhentikan ia

bekerja dengan menekan butan ‘Stop Server’ atau menamatkan fungsi webserver dengan

menutupnya menggunakan butang ‘End’.

32

15. Semasa webserver bekerja anda boleh melayari laman web secara offline tetapi terus dari

webserver anda dengan URL http://127.0.0.1/... Atau http://localhost/... Diikuti dengan nama

folder projek web anda contoh http://127.0.0.1/joomla dan sebagainya. Lihat contoh di bawah:

Front-End Joomla!.

Anda boleh buka back-end Joomla dengan URL http://127.0.0.1/joomla/administrator .

16. Pada sebarang masa, jika anda ingin menghidupkan webserver anda dan

bekerja membina laman web, anda mulakan dengan menghidupkan dahulu

webserver MoWes pada ikon seperti di sebelah pada desktop anda.

Atau klik pada ikon aplikasi mowes.exe pada folder ‘mowes_portable’ anda

di dalam drive komputer atau di dalam USB drive anda.

33

Bagaimana membuat pilihan?

Jika anda ingin menggunakan Joomla! tanpa perlu mengetahui bagaimaana proses installasinya di dalam

webserver, pilihlah MoWes.

Jika anda ingin pantas menggunakan laman web Joomla! tanpa kerenak dan proses installasi yang

rencam atau anda adalah pengguna baru Joomla, saya cadangkan anda menggunakan MoWes.

Walau bagaimanapun kedua-duanya adalah webserver yang ringan (light) di mana libry dan fungsi

dalam system server local ini adalah sedikit dan terhad. Untuk permulaan adalah sesuai tetapi untuk

peringkat advance dan lebih tinggi dicadangkan anda menggunakan webserver lain yang lebih besar dan

lengkap seperti XAMPP atau WAMP.

34

Panel Kawalan Joomla!

Pengenalan dan Login ke Panel Kawalan

Untuk membolehkan anda masuk ke panel kawalan (Control Panel Administrator) anda perlu

mengetahui Username dan Password untuk laluan ke back-end (belakang pentas) untuk mengendalikan

secara konfigurasian dan kawalan ke atas laman web Joomla.

Jika anda mempunyai atau mengetahui dua perkara tersebut, sekarang gunakan pelayar

internet anda dan tetapkan alamat URL untuk ke halaman CPanel Admintersebut iaitu. Caranya pada

akhir URL lengkap anda (untuk membuka web Joomla) masukkan perkataan ‘ administrator ’ contoh:

http://localhost/joomla/administrator

Penting! : Jika anda menggunakan webserver yang menggunakan nombor IP anda gantikan localhost

dengan 127.0.0.1 dan terdapat juga webserver yang perlu anda memasukkan nombor port laluan

contoh : localhost:8080 dan sebagainya. Pastikan anda gunakan URL yang betul untuk localhost seperti

yang dikehendaki oleh webserver yang anda gunakan.

Jika URL anda tepat tetingkap yang memerlukan anda mengisi maklumat username dan

password seperti di bawah akan dipaparkan. Masukkan dua maklumat itu dengan betul dan klik pada

butang ‘Login’.

Panel Login Administrator Joomla

Login Ke Panel Kawalan Admin

35

Setelah anda berjayamemasukkan username dan katalaluan yang SAH anda akan dapat akses

terus ke halaman utama Cpanel Admin /Panel Kawalan Admin Joomla. Anda akan perolehi paparan

tetingkap seperti ini:

Halaman Utama Panel Kawalan Joomla!.

Anda kenali dan fahami setiap fungsi yang terdapat pada laman utama CPAdmin ini, kerana anda

akan lebih banyak bekerja di bahagian ini untuk mengendalikan persembahan dan konfigurasian laman

web anda.

36

Bahagian atas halaman ini disediakan beberapa kemudahan iaitu;

1. Pengenalan kepada nama laman web dan versi Joomla yang anda gunakan

2. Top Menu Kiri untuk kerja-kerja administrator dan Top Menu Kanan untuk membuka

paparan web (front-end), statistik email dan pengguna di talian admin serta butang log

keluar dari panel kawalan ini.

Menu-menu kerja administrator di bahagikan kepada Site, Menus, Content, Components,

Extensions, Tools dan Help. Setiap satu mempunyai fungsi dan guna kerja yang berbeza.

Berikut adalah pecahan fungsi bagi setiap menu kawalan yang anda perlu fahami dan kenali

fungsinya:

2.1 Site

Penerangan & Sub menu:

Submenu Fungsi

Control Panel Menu ini anda boleh gunakan pada sebarang masa untuk anda kembali ke paparan Halaman Utama Panel Kawalan ini. Jika anda berada di halaman lain, gunakan butang ‘Control Panel’ dan paparan kembalu ke halaman ini.

User Manager Menu untuk anda membuka ‘User Manager’ untuk melihat ahli yang telah mendaftar, atau ingin mengedit maklumat ahli sedia ada, atau ingin mendaftar secara manual ahli baru.

37

Media Manager Jika anda memerlukan media seperti grafik dan animasi dengan format fail .jpg .bmp .png atau .gif , semua fail tersebut dimuat naik dan diselenggara menerusi ‘Media Manager’. Anda juga boleh mencipta folder-folder khusus untuk memudahkan penulisan artikel nanti. Semua grafik untuk tujuan penulisan artikel perlu di simpan dalam submenu utama bernama ‘Stories’.

Global Configuration Konfigurasian utama laman web seperti nama laman, menutup semetara perkhidmatan web, maklumat tentang laman, sistem dan server termasuk nama database dan alamat mail admin semuanya terletak dalam ‘Global Configuration’.

Logout Kemudahan untuk anda keluar dari laman kawalan admin. Anda perlu ‘logout’ apabila berhenti dari bekerja di halaman kawalan supaya tidak disalahguna oleh pengguna lain yang tidak bertauliah.

2.2 Menus

Penerangan & Sub menu:

Submenu Fungsi

Menu Manager Menu ini membantu anda memaparkan semua module menu yang ada di halaman anda. Anda boleh membina module menu baru, mengedit, menduplikasi dan juga menghapuskan module menu sedia ada.

Menu Trash Semua module menu yang anda hapuskan disimpan sementara di ‘Menu Trash’ jika anda ingin menggunakannya kembali anda boleh masukkan semula ‘Restore’ ia ke ‘Menu Manager’ dan aktifkan semula.

Main Menu Ini adalah andatara module menu yang diberi nama ‘Main Menu’, anda boleh edit kepada nama lain menggunakan

38

Menu Manager. Anda perlu berada dalam menu ini ntuk membina submenu dan anak-anak menu baginya. Anda boleh tambah menu, edit, salin dan buang menu sedia ada. Setiap menu dihasilkan sama ada dari pautan dalam (internal link), pautan luar (external link), separator (selitan/placeholder) dan alias (pautan kepada menu sedia ada).

User Menu, Top Menu, Resources, Ecample Pages & Key Concepts

Semua nama-nama module menu yang terdapat dalam laman sample. Anda boleh tambah, edit, rename, salin dan buang module-module menu sedia ada ini dan gantikan dengan nama-nama yang sesuai dengan keperluan dan kehendak laman web anda.

2.3 Content

Penerangan & Sub menu:

Submenu Fungsi

Article Manager Menu ini boleh membantu anda memaparkan semua artikel yang terdapat di halaman anda. Anda boleh filter/sisihkan artikel mengikut nama penulis, jenis category atau section untuk memudahkan carian artikel. Menerusi menu ini anda boleh buat artikel baru, edit, salin dan hapus artikel sedia ada.

Article Trash Semua artikel yang telah dipadam tidak terhapus terus tetapi tersimpan di dalam ‘Article Trash’. Anda boleh masukkan kembali (restore) artikel yang telah dipadam ini kembali ke Article Manager dan aktifkannya semula.

Section Manager Sebelum anda boleh menulis artikel perlu ada dahulu ‘section’ untuk meletakkan artikel tersebut. Pada ‘Section Manager’ anda boleh mencipta section baru, dan juga mengedit atau memadam section sedia ada.

Category Manager Selepas ada section perlu pula ada category. Pada ‘Categori Manager’ anda boleh mencipta category untuk setiap section yang telah dicipta. Anda juga boleh mengedit serta memadam category sedia ada.

39

Front Page Manager Mana-mana artikel yang penting boleh anda paparkan pad halaman utama (Front Page). Pemilihan dan susunan artikel untuk paparan di halaman utama boleh di selenggara menggunakan ‘Front Page Manager’. Anda juga boleh menutup dan membuka paparan artikel menerusinya.

2.4 Components

Penerangan & Sub menu:

Submenu Fungsi

Banner, Contacts,News Feeds, Polls, Search & Web Links

Component adalah aplikasi kecil dalaman yang membantu anda menyediakan banyak kemudahan di dalam laman web Joomla. Antaranya seperti banner, contact, news feeds, polls, search dan web link. Setiap satu sistem aplikasi tersebut mempunyai menu kawalannya pada submenu ‘Components’.

3rd Party Component: Forum, Download, Gallery, …..

Anda boleh juga menambah beberapa lagi component baru kepada web Joomla anda. Component tambahan ini dikenali sebagai 3rd party component kerana ia datang dari pihak ketiga. Anda boleh dapatkan pakej component dari sumbernya secara download dan kemudian install (pasang) ke laman andaa. Antara yang popular seperti forum, download sistem, gallery dan banyak lagi.

Catatan: Untuk memudahkan pengendalian anda terhadp component 3rd party yang

anda ingin pasang dan gunakan pada laman web anda, sila pastikan anda mempunyai

manual/panduan menggunakan component tersebut dari laman web anda memuat-

turunnya.

40

2.5 Extensions

Penerangan & Sub menu:

Submenu Fungsi

Install/Uninstall Menu ‘Intall/Uninstall’ adalh kemudahan untuk anda menambah sebarang 3rd party pakej sama ada component, module, template, plugin atau language. Anda juga boleh uninstall mana-mana pakej tersebut yang anda tidak mahu lagi pad laman web anda. Untuk melakukan pemasangan anda dapatkan secara muat turun pakej yang dikehendaki dan di pasang menggunakan kemudahan ini dalam bentuk fail termampat (.zip).

Module Manager Semua modul sedia ada atu model baru yang anda install boleh dilihat dan dikawal menggunakan ‘Module Manager’ ini. Anda boleh tentukan lokasi letak modul pada halaman hadapan (front-end) mengikut lokasi yang disokong oleh template yang anda gunakan. Anda juga boleh konfigurasi dan edit module anda di sini.

Plugin Manager Sama seperti module manager, ‘Plugin Manager’ berfungsi menyenaraikan plugin yang ada termasuk yang baru diinstall. Kawalan lain adalah untuk mengedit penggunaan dan keaktifan plugin sedia ad.

Template Manager ‘Template Manager’ pula menyenaraikan semua template yang ada dan mengawal pemilihan dan mengedit template pilihan (default). Anda perlu sedikitpengetahuan untuk mengedit template anda seperti koding CSS dan HTML. Anda juga boleh mengenal pasti lokasi yang disediakan oleh template untuk module dan konfigurasian lain yang berbeza mengikut template.

Language Manager Pada ‘Language Manager’ anda boleh melihat senarai bahasa yang terdapat pada laman anda. Anda boleh tentukan bahasa mana ingin diaktifkan dan dijadikan bahasa pada penggunaan web anda.

41

2.6 Tools

Penerangan & Sub menu:

Submenu Fungsi

Read Messages Apabila anda login ke Cpanel Admin, anda boleh lihat pad sisi atas kanan sama ada mesej atau tidak untuk anda.

Jika ada pada ikon surat terdapat angka menunjukkan bilangan mesej yang ada dalam peti mesej anda. Boleh klik pada ikon tersebut atau pada menu ‘Read Messages’ untuk membaca/buka kiriman mesej itu.

Write Message Anda boleh menulis mesej kepada semua pengguna berdaftar di laman web anda secara personal dengan memilih seorang nama pengguna untuk menerima mesej anda. Pilih nama penerima, tulis tajuk, seterusnya tulis mesej dan klik ‘send’.

Mass Mail Kemudahan ini membolehkan admin mengirim email kepada email pengguna. Satu email boleh dikirim kepada satu kumpulan pengguna. Contoh, anda boleh mengirim satu email kepada semua pengguna berdaftar (register) di laman anda terus ke alamat email mereka.

Global Check-in Kemudahan ini membolehkan anda menyemak jadual (table) pangkalan data anda. Jika data tertentu pada jadual di isi, akan dicatatkan bilangannya (item) untuk rujukan dan pengetahuan anda sebagai admin.

Clean Cache Pada ‘Global Configuration’ anda boleh aktifkan ‘cache’ tetapi ini akan menyebabkan laman web anda slow sedikit. Jika anda mengaktifkan cache, anda boleh mengosongkan cache lama dengan butang ‘Clean Cache’.

Purge Expired Cache Cache lama yang anda yang telah melebihi masa (expired) boleh dibuang terus untuk mengecilkan simpanan dalam storan hosting anda dengan menggunakan kemudahan ‘Purge Expired Cache’. Tetapi cache semasa tidak akan hilang hanya cache yang telah luput tarikh sahaja yang akan dibersihkan terus.

42

2.7 Help

Penerangan & Sub menu:

Submenu Fungsi

Joomla! Help Butang ini akan membuka kemudahan bantuan yang dijana terus secara talian ke server Joomla!. Banyak persoalan boleh dicari dan penyelesaiannya dicadangkan pada halaman bantuan (help) ini. Banyak pautan, menu sisi atas dan cadangan penyelesaian secara talian terus disediakan untuk membantu anda yang baru mengenali Joomla! untuk menjadi admin yang cekap dan mahir.

Sistem Info Semua informasi berkaitan web boleh anda semak menggunakan tab-tab semakan bagi; System info, PHP setting, configuration file, directory information dan PHP Information. Info ini berguna jika anda ingin bertukar server dan menyediakan server dan sistem berkaitan untuk memantapkan kerja pada laman web anda.

Selain dari menu-menu kawalan di atas anda juga boleh menggunakan ikon kawalan pada halaman

utama. Kebanyakan menu ini merupakan perkara dan pautan kepada perkara-perkara penting dan kerap

diurus dan dikendalikan selaku seorang admin. Anda boleh menggunakan ikon-ikon ini jika tidak mahu

memilih menu kerja seperti diterangkan sebelum ini.

Contoh ikon menu yang terdapat di halaman utama Cpanel Admin;

Ikon Penting / Popular Dalam Kerja Pengendalian Administrator.

43

Penerangan Ikon dan Fungsi:

Ikon Fungsi

Memudahkan anda untuk terus membuka Editor Pengarangan WYSIWYG untuk menulis satu artikel baru.

Membuka ‘Artikel Manager’ terus untuk melihat senari artikel.

Untuk terus membuka ‘Front Page Manager’ untuk memilih, menyusun dan menyelenggara semua artikel pilihan untuk di paparkan di halaman utama (Front Page).

Terus membuka editor untuk mencipta section baru.

Terus membuka editor untuk mencipta category baru

Terus ke ‘Media Manager’ untuk menguruskan folder dan fail berkaitan grafik yang akan digunakan dalam banner dan artikel web anda.

Membuka ‘Menu Manager’ untuk pengurus dan pengendalikan semua menu yang perlu dan wujud dalam laman anda.

44

Membuka terus ‘Language Manager’ untuk memilih bahasa utama dan melihat senarai bahasa lain yang telah diinstall ke laman anda.

Membuka ‘User Manager’ untuk menambah, membuang, mengedit dan reset katalaluan untuk pengguna berdaftar dengan laman web anda.

Membuka terus menu ‘Global Configuration’ untuk membuat penetapan dan setting konfigurasian bagi site, sistem dan server yang digunakan oleh laman web anda.

Satu lagi kemudahan yang terdapat di halaman utama Cpanel Admin ini adalah kemudahan maklumat

yang saya panggil Tools Panel Info - mengandungi perkara-perkara seperti di bawah:

Terdapat 6 pecahan dalam Tools Panel Info;

Nama bahagian Kandungan Informasi

Welcome to Joomla! Ucapan dan maklumat untuk anda sebagaai pengunjung ke halaman kawalan admin ini.

Logged in Users Menyenaraikan pengguna yang log masuk ke laman anda sama ada di halaman kawalan (back-end) atau di halaman hadapan (site/front-end).

Popular Menyenaraikan nama artikel yang paling banyak dibaca (hits) dengan senari tajuk dan tarikh artikel ditulis.

Recent added Article Menyenarikan artikel terkini, tajuk artikel, tarikh dan nama penulisnya.

Menu Stats Menyenaraikan nama-nama module menu dan bilangan item menu yang menjadi submenunya.

Joomla! Security Newsfeed Maklumat kawalan entiti berita berkaitan yang disambung kepada ‘Newsfeed Joomla!’. Berita berbentuk ‘Newsfeed’ ini hanya dipersembahkan jika anda mempunyai capaian internet sahaja.

45

Membina Kandungan Web & Menu

Joomla! adalah sebuah CMS atau Sistem Pengurusan Kandungan, ini bermakna isi kandungan

untuk web adalah tugasan utama yang diselenggara secara sistematik menggunakan aplikasi Joomla ini.

Dalam setiap aplikasi CMS, isi kandungan atau ‘content’ adalah raja. Maknanya, isi kandungan adalah

yang perkara utama yang perlu dimuatkan daan dibangunkan bukannya module, wiget, template atau

theme, component dan sebagainya. Pembangunan dan kerja memuatkan isi kandungan ini ada kaedah

atau konsepnya. Ciri-ciri dan aturan yang sistematik digunakan di dalam Joomla! bagi tujuan

pembangunan isi kandungannya.

Konsep Isi Kandungan (Content)

Perkara terpenting dalam sesebuah laman web adalah isi kandungan (content) iaitu maklumat yang

disalurkan oleh sesebuah laman web. Laman web yang baik adalah laman web yang kaya dengan

maklumat. Untuk memudahkan pengguna memperolehi maklumat, semua isi kandungan perlu

dipersembahkan dengan baik serta mempunyai menu atau sambungan (hyperlink) kepada artikel

yang disediakan menerusi laman web. Web yang baik juga bercirikan interaktif dan mesra pengguna.

Untuk menghasilkan artikel di dalam Joomla! anda perlu mengetahui konsep isi kandungannya.

Kerana Joomla! mempersembahkan artikelnya secara bersistematik. Kaedah terancang ini perlu

dipatuhi bagi memudahkan admin membina menu atau capaian kepada artikel yang dikarang.

46

Konsep isi kandungan dalam Joomla! boleh di jelaskan oleh diagram-diagram di bawah.

Diagram 1

Bagi menyalurkan maklumat, perkara utama yang perlu ada adalah section. Section adalah skop

besar mewakili suatu bidang/pecahan utama suatu kumpulan maklumat. Eg: Produk/Perkhidmatan.

Diagram 2

Diagram 2 menunjukkan di mana dalam satu section wajib/mesti ada sekurang-kurangnya satu

Category. Maknanya dalam satu section boleh ada lebih dari satu category. Artikel tidak akan

wujud jika dalam section tiada category. Contoh category adalah Produk Kesihatan.

Diagram 3

Maklumat

Section

Maklumat

Section

Category

Maklumat

Section

Category

*Artikel1 *Artikel2

*Artikel3 *….

*

47

Setelah wujud section dan category, barulah anda boleh masukkan/tulis artikel sebagai

maklumat yang ingin disampaikan. Banyak artikel boleh ditulis mengikut pecahan categorynya.

Contoh artikel (tajuk artikel) Category Produk Kesihatan Section Produk ;

i. Khasiat Produk A – Artikel/maklumat penggunaan produk A.

ii. Khasiat Produk A – Khasiat dan Testimoni penggunaan produk A.

iii. Pengambilan Produk B – Artikel/maklumat penerangan penggunaan produk B.

iv. Kempen Penggunaan Produk C – Artikel/maklumat kempen jualan produk C.

Section Category Artikel

Aliran Konsep Kandungan Joomla!

Jika terdapat Category lain, anda perlu cipta category baru untuk mewakili categori kedua

seterusnya baru anda boleh tulis artikel dan maklumat berkaitan category tersebut. Tiada had

bilangan artikel ditetapkan untuk sesuatu category. Tetapi setiap section perlu ada sekurang-

kurangnya satu category sebelum boleh menulis artikel/maklumat berkaitan

perkhidmatan/produk berkaitan. Boleh ada lebih dari satu category untuk satu section.

Produk/ Perkhidmatan

Produk A

Cara Pengunaan

Khasiat dan Testimoni

Produk BPenerangan

Produk

Produk CKempen Jualan

48

Untuk mencipta section, anda gunakan ‘Section Manager’.

Untuk mencipta category, gunakan ‘Category Manager’.

Untuk menulis artikel boleh gunakan terus ikon ‘Add New Article’. Atau boleh juga buka dahulu

‘Article Manager’ kemudian klik ‘New’.

Pastikan 3 perkara ini digunakan ketika anda menghasilkan isi kandungan web Joomla!.

Section, Category dan Article.

Mencipta Section

Pada Section Manager pilih New.

Editor Mencipta Section Baru

49

Lengkapkan pada ruangan ‘Title’ dengan tajuk/nama section anda. Pada ‘Alias’ boleh tulis nama

unik kepada tajuk tersebut sebagai ID atau abaikan kosong. Pada ‘Publish’ pilih Yes. ‘Access

Lavel’ adalah bermaksud level pengguna yang boleh mengakses maklumat ini, pilih ‘Public’ jika

membenarkan semua orang boleh mengaksesnya, atau pilih ‘Register’ jika anda hanya mahu ahli

web yang mengaksesnya.

Jika anda pilih ‘Special’ hanya pengguna aras tinggi seperti ‘Super Admin’, ‘Administrator’ dan

‘Manager’ sahaja yang boleh mengaksesnya.

Jika ingin meletakkan imej, pilih imej yang disenaraikan dalam ‘Image’ dan jika telah memilih

imej, anda boleh tentukan lokasi/kedudukannya pada ‘Image Position’. Pada ruangan

‘Description’ tuliskan maklumat/penerangan tentang section anda untuk rujukan pengguna.

Pada penerangan ini anda juga boleh selitkan imej dengan menggunakan butang ‘Image’.

Menggunakan editor WYSIWYG ini, anda dengan mudah boleh mengendalikan kawalan format

kepada teks yang ditulis. Tetapi jika anda tidak mahu menggunakan kemudahan editor ini anda

boleh pilih ‘Toggle Editor’ dimana anda tulis terus secara koding HTML pada ruangan editor

toggle. Akhir sekali, simpan dengan butang ‘Save’ maka terciptalah section pertama anda.

Jika anda memerlukan lebih dari satu section, ulang perkara yang sama untuk mencipta section

kedua dan seterusnya.

Mencipta Category

Prosesnya hampir sama seperti mencipta section, gunakan ‘Category Manager’ kemudian pilih

New.

Editor Mencipta Category Baru

50

Lakukan proses yang sama seperti pencipta section tadi, cuma pada ruangan senarai section

pilih nama section anda kehendaki, contoh : ‘Produk’ atau section lain yang berkaitan dengan

category anda. Seterusnya lengkapkan ‘Access Level’, pemilihan grafik dan lokasi jika berkaitan

dan tuliskan sedikit penerangan tentang category yang anda sedang hasilkan. Akhir sekali

simpan dengan butang ‘Save’.

Apabila anda kembali ke Category Manager anda akan lihat banyak senarai category lain

termasuk category yang baru anda cipta tadi. Jika anda tidak mahu cipta category baru, anda

boleh edit nama category sedia ada kepada nama yang ingin anda gunakan. Semuanya

bergantung kepad kreativiti dan perancangan anda.

Menulis Artikel

Untuk mencipta article anda boleh terus

menggunakan ikon ‘Add New Article’ atau anda

pilih dahulu ‘Article Manager’ kemudian klik New.

Kedua-dua kaedah ini akan membuka editor

WYSIWYG seperti di bawah:

Editor WYSIWYG untuk menulis artikel baru.

51

Seperti contoh tadi anda perlu tuliskan nama/tajuk artikel pada ruangan ‘Title’ diikuti dengan

tajuk unik pada ruangan ‘Alias’. Seterusnya pada section pilih section pilihan anda begitu juga

pada ruangan category. Pada ‘Publish’ pilih Yes menunjukkan artikel akan dipaparkan. Pada

‘Front Page’ anda boleh pilih Yes jika memilih memaparkannya di halaman utama. Jika pilih No

anda perlu menyediakan menu untuk membolehkan artikel ini diakses oleh pengguna.

Seterusnya tuliskan sepenuhnya artikel anda dan masukkan imej jika perlu dengan butang

‘Image’. Anda boleh memformat teks dengan kemudahan ikon-ikon pada editor WYSIWYG

tersebut. Jika artikel panjang anda boleh pendekkan dengan memilih ‘Read more’, jika artikel

dipaparkan pada halaman utama hanya sedikit artikel terpapar, selebihnya akan dipaparkan jika

pengguna klik pada butang ‘Read more’.

Terdapat juga butang ‘Pagebreak’, kemudahan ini untuk membahagikan halaman kepada

beberapa pecahan, Contoh artikel anda panjang, dengan sekali klik ‘pagebreak’ anda akan

menghasilkan dua halaman untuk satu artikel tersebut. Jika anda gunakan dua kali ‘pagebreak’

anda akan menghasilkan tiga halaman untuk satu artikel yang sama. Anda boleh menamakan

sub-tajuk untuk halaman yang berbeza semasa memilih butang ‘pagebreak’, contoh;

Menamakan sub-menu Untuk Artikel Yang Panjang

Jika anda mahir dan lebih suka menulis menggunaan koding HTML klik pada butang ‘Toggle

Editor’. Seterusnya tetapkan parameter untuk artikel ini.

P

Parameter Article:

Tetapkan nama penulis jika anda ingin

gunakan nama penulis lain selain ID anda.

Tentukan ‘Access Level’. Tarikh artikel

ditulis telah disiapkan. Anda cuma

tetapkan tarikh artikel ingin dipaparkan

dan seterusnya bila artikel tamat

dipaparkan. Caranya klik pada ikon

dan pilih tarikh yang dikehendaki.

52

Parameter Advanced:

Anda boleh pilih penetapan lain untuk artikel

anda seperti menyembunyikan (Hide) maklumat

tersebut, atau memaparkannya (Show) atau lain-

lain penetapan seperti yang umum (Global).

Parameter Information:

Di sini anda tuliskan sedikit penerangan tentang

artikel termasuk kata kunci (key), robot dan nama

penulis untuk metadata dan memudahkan

pencarian oleh enjin carian terhadap artikel anda

ini. Pastikan anda simpan ‘Save’ sebelum

menamatkan proses penulisan ini.

53

Menu

Menu adalah pintu untuk masuk ke artikel yang anda tulis untuk diakses oleh pengguna. Ini

kerana semasa menulis artikel anda kebiasaannya tidak memilih supaya artikel dipaparkan pada

halaman utama (front-page). Keadaan ini memerlukan anda menyediakan menu untuk

membolehkan artikel tersebut diakses oleh pengguna.

Jika anda memilin papar di ‘Front Page’ semasa menulis artikel tadi, pengguna boleh mengakses

terus artikel anda walaupun tiada menu untuknya.

Untuk mencipta menu, pilih ‘Menus’ kemudian pilih ‘Menu Manager’ untuk mencipta satu

modul baru khusus sebagai menu-menu kepada artikel baru anda. Atau anda boleh terus pilih

modul sedia ada pada sub menu “Menus’ seperti Main Menu, User Menu, Top Menu, … dan

letakkan menu artikel sebagai sub-menu kepada modul tersebut.

Tetapi untuk kali ini saya bercadang untuk menciptakan satu module menu baru dengan nama

‘MyProduk’. Untuk tujuan itu pada Menu Manager klik pula New.

Anda perlu isikan semua ruangan yang

dikehendaki dengan maklumat

berkaitan modul menu baru anda itu.

Contoh seperti di sebelah -

Selepas itu simpan (Save). Apabila paparan kembali ke senarai Menu Manager, telah wujud

nama menu baru anda sebagai MyProduk. Sekarang anda perlu aktifkan modul ini dan juga

tentukan kedudukannya pada paparan di halaman utama (sama ada di left,right,top dan

sebagainya). Untuk itu pergi ke menu kerja ‘Extension’ seterusnya pilih ‘Module Manager’.

Apabila Module Manager menyenaraikan modul-modul yang ada, anda akan temui module

menu yang baru anda cipta tadi, contohnya;

54

Paparan Module Manager.

Lihat pada senarai module baris ke 4 –: module name = MyProduk –: Enable = ini bermakna

modul menu bernama MyProduk masih belum lagi aktif (Enabled). Kemudian lihat kedudukan

dan susunan/urutannya;

Urutannya adalah sebagai modul menu pertama (1) pada lokasi kanan (left) dan akan

dipaparkan pad semua halaman ( All) serta modul ini berjenis menu (mod_mainmenu).

Sekarang jadikan supaya ia sebegini;

Modul menu bernama MyProduk akan aktif (Enabled) , berada pada urutan ke 2 selepas

Main Menu, boleh diakses oleh semua level (Public) berada dikedudukan lokasi kanan (Left) dan

dipaparkan di semua halaman pada web ini (All).

Untuk mengaktifkannya (Enabled) - klik sekali pada ikon bertanda dan ia akan bertukar

kepada aktif dan ditanda sebegini: . Untuk menyusun urutan menjadi ke 2, tulis urutan

mengikut susunan seperti anda kehendaki kemudian klik butang ‘save’ pada

barisan Order : selepas anda tulis urutannya dalam bentuk

nombor-nombor seperti di sebelah kanan ini:

Anda boleh ubah juga urutan module-module yang disenaraikan dengan cara lain

iaitu dengan cara mengerakkannya turun atau naik menggunakan tata-tanda anak

panah begini:

55

Kemudian pilih sama ada turun atau naik, gerakkan module tersebut sehingga ia berada padaa

urutan yang anda kehendaki.

Kini menu MyProduk telah aktif, berada pada urutan ke-2 di bawah menu Main Menu. Sekarang

ciptakan sub-menu untuk artikel anda supaya pengguna dapat mengakses artikel yang telah

anda hasilkan sebelum ini tadi.

Kembali ke menu kerja ‘Menus’ dan anda akan lihat di bawah submenu tersebut ada modul

menu bernama MyProduk.

Sekarang klik pada modul menu bernama MyProduk.

Kemudian anda akan berada dalam Menu Item Manager:

[myproduk].

Anda akan dapati masih tiada satu pun sub-menu dalam

menu item manager tersebut.

Untuk mencipta sub menu dalam kumpulan menu MyProduk

klik pada New.

Senarai Menus

Apabila anda klik New, menu item manager akanmembuka tetingkap Menu Item untuk

membantu anda membina pautan menu anda.

Pada Menu Item anda boleh membina berbagai bentuk

pautan menu:

1- Internal Link:

Pautan kepada Artikel/Contact/News

Feeds/Pool/Search/User/Wen Link/Wrapper.

2- External Link:

Pautan kepada halaman lain.

3- Separator:

Pautan “Plaveholder” atau sisipan.

4- Alias:

Pautan baru kepada menu sedia ada yang telah

tersedia di halaman ini.

56

Jenis-jenis Menu

Oleh kerana anda ingin mencipta menu untuk artikel yang anda sendiri tulis dihalaman ini, maka

pilih Internal Link pilih Article pilih sama ada:

Menu Item

1- Archive:

o Merupakan artikel karangan orang lain

yang diluluskan oleh admin untuk kegunaan di

laman web.

2- Article:

o Memaparkan satu artikel pilihan dari

senarai artikel.

3- Category:

o Menu memaparkan satu Category

pilihan, artikel boleh diakses dari senarai artikel

dalam category tersebut Paparan dalam 2

bentuk samada List/Blog.

4- Front Page:

o Mencipta menu utama/index sebagai

Front Page bagi halaman anda.

5- Section:

o Menu memaparkan satu Section pilihan,

pengguna boleh pilih senarai Category

seterusnya baru artikel.

Catatan: Semua bentuk menu dalam bentuk Article ini boleh membuka artikel, sama ada dengan

sekali klik (Menu Article) , 2 kali klik (Menu Category) atau 3 kali klik (Menu Section). Yang mana

pilihan anda, bergantung kepada kreativiti dan perancangan anda semasa membangun laman web.

Selain membina menu kepad article. Menu Item Manager juga boleh membina menu jenis Internal Link

kepada pelbagai jenis Component yang ada di halaman anda seperti Contact, News Feeds, Polls, Search,

User, Web Link dan lain-lain menu yang anda tambah kemudian nanti contohnya forum, gallery, buku

tetamu dan macam-macam lagi.

Menu jenis Wrapper pula membina menu dalam persekitaran tema web anda tetapi boleh dipaut

kepada URL luar. Kemudahan ini membolehkan seolah-olah laman itu asli dari laman anda walaupun

sebenarnya ia adalah halaman URL asing.

Selain itu anda boleh juga membina menu berbentuk External Link (pautan luar), menu berbentuk

Separator (sisipan) atau berbentuk Alias (iaitu pautan baru untuk menu yang telah sedia ada).

57

Rekabentuk Asas Joomla!

Dalam merekabentuk web menggunakan Joomla!, seseorang admin perlu kreativiti, inovasi dan

berpengetahuan tentang grafik dan kod aturcara web. Pengetahuan grafik dan aturcara web tidak

semestinya dikuasai secara mendalam memadai tahu sedikit secara asas untuk tujuan modifikasi dan

penghasilan rekabentuk dan keperluan pada web yang dibangunkan, melibatkan beberapa aspek

antaranya:

a. Templates

b. Components

c. Modules

d. Plugin

e. Language

Merekabentuk web Joomla! memerlukan kepakaran dan kemahiran visual serta pengetahuan

asas dalam pengaturcaraan.Kerana dengan menggunakankan Joomla! anda tidak perlu kemahiran visual

dan pengaturcaraan yang tinggi. Memadai anda faham dan boleh menggunakan sedikit kemahiran

tersebut untuk tujuan memodifikasi, menambah dan mengubahsuai grafik, warna dan aturan paparan

bagi laman anda untuk memberikan ia sentuhan dan kelainan yang unik.

Dalam merekabentuk dan menghasilkan laman web yang menarik, visual yang unik, kemudahan

yang lengkap dan aturan persembahan, kreatif dan inovasi dapat dihasilkan melalui kebolehan admin

mengawal, membuat pilihan, dan modifikasi keperluan web Joomla! seperti Templates, Component,

58

Module, Plugin dan Language. Lebih menarik lagi jika admin mampu menghasilkan sesuatu yang baru

seperti yang diperlukan dalam laman masing-masing.

Templates, Component, Module, Plugin dan Language ini dapat memainkan peranan dalam menjadikan

laman web anda kelihatan canggih, lengkap dengan fungsi, keperluan pengguna, serta warna,

persembahan, animasi, video atau video yang unik dan menarik. Sebagai admin anda perlu

menguasainya satu-persatu dan mampu mengendalikan semua elemen tersebut dengan cekap dan

tepat.

A. Merekabentuk Web Agensi Kerajaan (jika berkaitan)

Khusus untuk pembangunan laman web agensi kerajaan, seperti laman kementerian, pejabat /

jabatan kerajaan, portal institusi pendidikan, universiti, kolej, sekolah, badan berkanun dan sebagainya

haruslah mengikuti dan tertakluk kepada syarat dan pekeliling yang diturunkan oleh pihak berwajib.

“ Pekeliling dan Panduan Laman Web Agensi dan Institusi Kerajaan.”

Pekeliling Am Bil. 1 Tahun 2006 “Pengurusan Laman Web/Portal Sektor Awam”

(Sumber: http://arcadia.mampu.gov.my/mampu/pdf/pa012006.pdf)

Mana-mana institusi kerajaan yang berhasrat membangun dan pengurus penyaluran maklumat

semestinya pengikuti pekeliling dan panduan ini sepenuhnya dan tanggungjawab ini adalah di

bawah pengarah/ketua jabatan berkenaan.

Berikut antara perkara dan sedikit panduan untuk tujuan pembangunan/pengurusan laman web agensi

kerajaan.

Amalan Terbaik Global - Interaksi dengan pelanggan, Mesra pelanggan, Perkhidmatan kepada pelanggan, Ciri-ciri sokongan pelanggan & merangkumi amalan global dari segi ciri-ciri utama portal, arkitektur portal, pengurusan dan sokongan teknikal portal.

Prinsip Asas Laman Web - Saluran rasmi, Maklumat rasmi, Perkhidmatan Berterusan, Kemas kini dan lengkap, Menyokong Kerajaan Elektronik, Kesediaan dan keupayaan perkakasan, perisian dan rangkaian, Mesra pengguna, Mempromosi kerajaan, Memberi penjelasan, Penggunaan bahasa yang betul & Keberkesanan kos.

Perkara Yang Dilarang - Mengiklankan perkhidmatan yang ditawarkan oleh pihak luar, Memaparkan isu-isu sensitif, Menyebarkan perkara-perkara yang tidak ada kaitan dengan perkhidmatan yang ditawarkan oleh agensi, Memaparkan kenyataan-kenyataan yang boleh menjejaskan imej kerajaan.

59

Ciri-ciri Asas Mandatori Laman Web - Penyataan perkataan laman web rasmi, Jata (crest) kerajaan, Logo rasmi agensi, Penyataan pengenalan agensi, Dasar-dasar utama agensi, Piagam pelanggan agensi, Maklumat perkhidmatan agensi, Maklumat untuk dihubungi, FAQ, Pernyataan penafian, Dasar Privasi, Dasar Keselamatan, Kemudahan maklum balas/komen, Fungsi luput secara automatik, Keupayaan muat turun, Kemudahan search engine, Kandungan laman web sekurang-kurangnya dalam dua bahasa, Pautan ke myGovernment, Agensi yang melaksanakan aplikasi MSC, meletakkan logo MSC Malaysia, Site map, Domain “.gov.my” & Notis hak cipta.

Ciri-ciri Tambahan Laman Web - Memaparkan klip video/audio perkhidmatan agensi, Capaian sokongan, Kemudahan W3C Disability Accessibility, Pengguna buta warna, Pengguna cacat penglihatan, Pengguna cacat pendengaran & Warga tua.

Ciri-ciri Portal - ditambah dengan perkhidmatan online yang disediakan, Tandatangan digital, Saluran pembayaran secara elektronik, Pengawalan had capaian (access control rights) & Ciri-ciri remember me

Langkah-langkah Keselamatan – keupayaan system web untuk backup dan restore, Kawalan keselamatan (pentadbiran, logical, fizikal), Pengesahan Kuasa (Authorization), Pengesahan Capaian (Authentication), Encryption, Protokol & Penamatan Sesi.

Pengukuran Prestasi - Bilangan perkhidmatan online dalam tempoh setahun, sebulan/seminggu, Bilangan capaian kepada sesuatu topik, Bilangan carian yang gagal dan Kepuasan hati pelanggan termasuk penghargaan dan maklum balas membina.

Tanggungjawab Agensi – Mematuhi prinsip dan ciri digariskan, melaksanakan langkah keselamatan, pengukuran prestasi web & mewujudkan pasukan tadbir urus laman web.

Tadbir Urus Laman Web/Portal Sektor Awam - Menetapkan matlamat, merangka strategi penyaluran maklumat, pengisian maklumat, mempromosi laman web, semak broken link, kemaskini maklumat, penerbitan maklumat terkini, menambah kandungan baru, menambahbaik susun-atur dan grafik serta menguruskan pangkalan data.

Pematuhan kepada pekeliling ini adalah mandatori dan hanya boleh diabaikan jika perkar tersebut tiada

kaitan dengan agensi atau di luar perkhidmatan yang agensi tawarkan.

(Sumber: http://www.mampu.gov.my/)

B. Merekabentuk Web Secara Asas

Sebagai permulaan, saya terangkan bagaimana mereka bentuk lima perkara di atas secara asas

tanpa melibatkan mencipta baru. Mereka bentuk secara asas ini hanya memerlukan anda

menggunakan pakej-pakej template, component, module, plugin dan language yang telah

disediakan oleh pembangun ketiga.

Muat turun dan dapatkan pakej tersebut dalam bentuk fail termampat(zip). Terdapat dua kategori

sumber perolehan bahan-bahan tersebut sama ada dari sumber terbuka (percuma) atau dari

sumber komersial (berbayar). Berikut diterangkan satu-persatu kaedah mereka bentuk secara asas.

60

1- Components

Selain template yang menarik laman web anda juga perlu dilengkapkan dengan kemudahan

yang istimewa seperti kemudahan forum, gallery, download system dan sebagainya. Pastikan

anda meletakkan component tambahan yang menarik untuk menggalakkan pengguna

menggunakan laman web anda.

Terlalu banyak component yang boleh dimuat-turun dari pelbagai laman web. Anda boleh

mencuba pelbagai component yang menarik sama ada yang diperolehi secara percuma atau

berbayar. Tempat paling mudah untuk anda mencari component ada di Rumah Joomla! sendiri

iaitu di http://www.joomla.org klik pada menu ‘Extension’ dan anda pasti akan menemui

pelbagai component baru di sana.

Component yang anda muat turun adalah berbentuk fail termampat (.zip) , setelah anda selesai

memuat turun, pergi ke panel kawalan admin Joomla! anda, klik menu Extension kemudian

pasang dengan Install/Uninstall. Caranya sama seperti anda menginstallasi template seperti

yang diterangkan sebelum ini tadi.

Apabila proses installasi ini berjaya, component baru anda akan

disenaraikan di bawah menu Components pada Cpanel Admin

anda, contoh: saya install satu component forum bernama

‘Discussions’ – dalam senarai baru component telah

ditunjukkan component ini dengan nama ‘Discussions’.

Anda boleh klik pada menu tersebut untuk melihat

konfigurasian dan settingnya. Sebagai admin anda mesti

mendapatkan manual pengendaliannya dari laman pembekal.

Senarai Baru Components

Setelah anda konfigur dan setting tajuk serta subtajuk untuk forum tersebut anda perlu buatkan

menu untuk capaian ke atasnya. Menu anda adalah berjenis ‘Internal Link’. Untuk mencipta

menu tersebut anda pergi ke ‘Menus’ pilih module menu untuk anda tempatkan, contoh –

pilih ‘Main Menu’ kemudian klik New pilih Internet Link klik pada component bernama

‘Discussion’ lengkapkan borang menu dengan Title sebagai Forum simpan (Save).

Semak pada halaman utama web anda sudahkan menu Forum terhasil. Dan klik pada menu

untuk menguji adakah paparannya akan dipaparkan dengan sempurna. Jika gagal buat semula

dan pastikan semua langkah kerja anda adalah tepat dan sempurna.

Semua langkah ini (installasi, konfigurasi & buat menu kepada component) perlu anda lalui bila

anda install lagi suatu component kepada laman anda. Semuah laman web yang sempurna

61

mempunyai component yang mencukupi dan memudahkan penggunanya. Pastikan anda tidak

memasukkan component yang tidak berguna kerana jika terlalu banyak component tetapi tidak

berfungsi dan berfaedah hanya akan memenuhkan hosting dan melambatkan kerja sistem web

anda sahaja.

2- Modules

Module pula adalah antara perkara yang banyak dapat dilihat dalam laman web Joomla!.

Terdapat hampir 30 module yang tersedia pada pemasangan awal pakej Joomla!. Namun jumlah

ini masih kurang dan tidak lengkap. Dari masa ke semasa anda perlu menambah module baru

untuk menambahkan fungsi dan penyaluran maklumat yang menarik menerusi module tertentu

di laman web anda.

Berikut adalah sebahagian dari senarai module asal yang disertakan semasa pakej Joomla!

diinstall:

Module Manager – senarai module sedia ada.

Tidak semua module yang dimasukkan/disediakan akan di aktifkan (Enabled). Bergantung

kepada keperluan. Setiap module disusun mengikut urutan pada lokasi (position) tertentu

seperti left, right, foorwe, breadcrumb, top, user1, user2 dan sebagainya. Module juga

ditetapkan tahap peringkat pengaksesannya oleh pengguna, serta pada halaman tertentu sahaja

62

atau pada semua halaman ia akan dipaparkan untuk tatapan pengguna. Setiap module diberikan

ID khas untuk memudahkan penyusunan datanya di dalam sistem database.

Dari masa ke semasa jika perlu anda boleh install module yang baru untuk kegunaan di halaman

web anda. Contohnya, saya ingin masukkan module yang menyatakan tentang topik dan

perbincangan baru dalam component forum. Saya kene dapatkan pakej module berkaitan dari

halaman pembekalnya. Saya donwload pakej termampat tersebut (.zip) dan menyimpannya

sementara di komputer saya. Lakukan kerja installasi yang sama seperti installasi template dan

component tadi iaitu pergi ke menu Extension kemudian klik Install/Uninstall, cari pakej

module anda dengan butang Browse, seterusnya klik butang Upload File & Install. Bila

berjaya mesej berjaya akan dipaparkan.

Seterusnya pergi semua ke Extension Module Manager, dan anda akan lihat nama module

baru anda install tadi sudah berada dalam senarai Module Manager anda, contoh:

Module Manager - Senarai Module

Jika anda perhatikan banyak juga module sedia ada yang tidak enabled. Begitu juga dengan

module yang baru anda install. Lihat pada baris ke-17 ‘Discussions RecentX’ – sekarang tukarkan

statusnya dari tidak aktif kepada aktif (enabled), klik sekali pada ikon dan ikan akan

berubah menjadi . Jika anda tidak bersetuju kedudukan module ini dalam senarai posisinya,

gerakkan ia supaya berada pada kedudukan yang anda kehendaki. Urutkan secara

menomborkan module atau gerakkan dengan butang anak panah .

Akhirnya simpan (save) dan anda lihat paparaan halaman hadapan anda (front-end) dan anda

akan lihat dimana module tersebut akan muncul. Ubahsuai jika anda tidak berpuas hati dengan

kedudukannya.

Sama seperti components pastikan anda install sesuatu module hanya jika module tersebut

penting dan berguna di laman web anda. Jika module tersebut tidak sesuai atau sudah tidak

63

berfungsi dengan baik anda boleh keluarkannya dari Module Manger dengan menggunakan

arahan Install/Uninstall pada Cpanel admin.

3- Plugin

Plugin sebelum ini dikenali sebagai Mambot dalam Joomla! 1.0 dan dalam Mambo iaitu versi

terdahulu sebelum Joomla! 1.5 dimana fungsinya adalah umpana satu aplikasi kecil yang

dipasang ke dalam Joomla! untuk melaksanakan suatu fungsi kerja tertentu.

Contohnya; plugin “JoomlaWork TS” dengan menggunakannya anda boleh menghasilkan TABS

dalam artikel karangan anda. Pertama anda perlu download pakej plugin tersebut dati laman

web pembekalnya iaitu : http://www.joomlaworks.gr/ - fail pakej plugin yang termampat (.zip)

kemudian perlu anda install masuk ke dalam sistem web Joomla anda menerusi kemudahan

Install/Unsintall dengan jalan kerja sama seperti anda menginstall template, component dan

module sebelum ini.

Lakukan proses installasi sehingga berjaya dengan paparan mesej

seterusnya pergi ke menu Extension kemudian ke Plugin Manager. Paparn pada plugin

manager menunjukkan plugin baru yang anda install tadi telah wujud tetapi belum ‘Enabled’.

Plugin Manager – senarai plugin dalam sistem web anda.

Jika anda perhatikan dalam senarai plugin terdapat plugin yang baru anda install tadi. Untuk

membolehkan anda menggunakan fungsi ini dalam penulisan artikel anda, klik pada butang

64

‘Disable’ sekali untuk menjadikannya ‘Enabled’ . Setelah itu anda sudah boleh

melaksanakan fungsi tabs untuk menghasilkan tab-tab tertentu dalam artikel anda. Pastikan

anda mengetahui kaedah menghasilkan tabs dari laman pembekal. Biasanya setiap plugin akan

diberikan manual kerjanya supaya pengguna (admin) dapat menggunakan plugin tersebut

dengan tepat.

Manual Plugin dari pembekal.

Contoh- ketika anda menulis artikel dan bercadang menyelitkan tabs dalam artikel tersebut

anda perlu tulis sedikit koding seperti manual yang diberikan untuk menghasilkan tab yang anda

kehendaki. Koding tersebut akan mengarahkan plugin yang di pasang pada sistem Joomla anda

untuk bekerja menghasilkan paparan TABS mengikut koding yang anda tulis.

Tedapat juga plugin yang bekerja bersama module atau component. Maka setelah anda install

plugin diikuti install pula module atau componentnya. Kerana plugin jenis ini akan memaparkan

fungsinya menerusi module atau component yang diinstall bukannya di dalam artikel seperti

dalam dalam contoh diterangkan awal tadi.

Terdapat banyak plugin yang perlu anda cari dan pasang ke dalam sistem Joomla! anda untuk

memudahkan kerja anda sebagai admin seterusnya menghasilkan laman web yang unik dan

menarik. Pastikan juga anda tidak memasang terlalu banyak plugin kecuali yang perlu sahaja.

4- Languages

Extension terakhir adalah Language atau bahasa asas yang digunakan dalam laman web anda.

Bahasa ini biasanya akan menjadi bahasa latar yang berfungsi sebagai dialog dalam

persembahan web anda. Anda boleh install lebih dari satu bahasa. Terdapat juga module /

componnet tertentu yang membantu anda untuk bertukar (switch) dari satu bahasa ke satu

bahasa yang lain. Syaratnya anda telah install terlebih dahulu bahasa-bahasa yang ingin anda

gunakan itu.

Proses menginstallasi Language ini juga sama seperti installasi extension sebelum ini iaitu

template, component, module dan plugin. Anda dapatkan dahulu pakej termampat (.zip) bagi

language pilihan anda dari laman web pembekal language kemudian gunakan kemudahan

‘Install/Unsintall’ pada extension menu untuk melaksanakan proses pemasangan. Apabila

65

berjaya, pergi ke menu ‘Language Manager’ di bawah menu Extension untuk melihat dan

mengurus bahasa yang anda baru masukkan, contoh:

Language Manager – senarai bahasa dalam web anda.

Pada senarai ini bahasa yang sedang dipilih menjadi bahasa latar pada web tersebut adalah

bahasa English (United Kingdom), ini ditunjukkan oleh penanda default . Anda boleh ubah

pilihan bahasa ini dengan memilih bahasa Malay(Bahasa Melaysia) kemudian klik butang

default dan pilihan bahasa baru sekarang adalah bahasa Malay tidak lagi bahasa English.

Anda juga boleh menggunakan kedua-dua bahasa menggunakan kemudahan bertukar bahasa

(switch) dengan memasang bersama fungsi tersebut sama ada menerusi plugin atau component

serta module language. Anda boleh cari di dalam internet fungsi tersebut. Contohnya

menggunakan JoomlaFish. Anda boleh bertukar bahasa menerusinya tetapi perlu menginstall

dahulu pakej component serta module JoomlaFish terlebih dahulu.

Catatan:

Untuk menghasilkan suatu laman web yang interaktif, cantik, menarik dan unik bersama

kemudahan yang canggih dan terkini, sebagai seorang admin anda perlu menguasai dan sentiasa

peka kepada 5 elemen ini iaitu template, component, module, plugin dan language.

Anda tidak perlu membina sendiri elemen-elemen tersebut kerana banyak disediakan oleh pihak

pembangun extension yang wujud di dunia internet. Kebanyakannya memang menyokong

Joomla! kerana bilangan penggunanya yang ramai.

Namun kadangkala extension yang anda perolehi tidak sesuai dan berbeza seperti yang anda

kehendaki. Atau anda perlu mengubahsuai/modifikasi extension tersebut, maka anda perlu

mengetahui asas kerujuteraan aplikasi Joomla! atau arkitektual MVC (Model View Controller)

yang digunakan dalam pembangunan aplikasi Joomla.

66

5- Templates -

Template adalah kerangka persembahan yang memaparkan maklumat (artikel), module-module,

component (menu /module), plugin (dalam artikel/module) dan penggunaan bahasa pilihan. Setiap

template mempunyai ciri dan gaya persembahan yang berbeza.

Ciri dan gaya persembahan yang ditunjukkan oleh template adalah seperti pemilihan tema warna,

sais dan pemilihan jenis teks,penggunaan grafik, penentuan dan pecahan posisi, gaya dan posisi

menu, bentuk header, sisipan animasi dan flash jika ada serta pelbagai lagi.

Untuk mengawal dan mengendalikan template, pergi ke menu Extension kemudian pilih

Template Manager. Di sana akan disenaraikan template yang sedia ada di web anda. Contoh:

Template Manager Site.

Terdapat juga tab untuk membuka template manager bagi halaman Administrator, tetapi yang

penting adalah Site (Halaman Hadapan – Frond-end) laman anda. Halaman ini akan diakses dan

dilawati oleh pengguna berbanding halaman administrator hanya kegunaan admin sahaja.

Pada template manager di paparkan nama template, nama pencipta, tarikh template dihasilkan dan

apakah template yang sedang digunakan dalam site (Default) yang ditandakan dengan bintang

dan anda boleh menukarnya dengan memilih nama template lain diikuti tekan butang Default:

. Pada senarai nama template akan ditandakan bintang pada template pilihan anda yang baru.

Pada asalnya hanya 3 template dibekalkan kepada Joomla! anda boleh install dan tambah template

tersebut dengan yang lain. Anda aboleh perolehi template bari secara download dari pihak yang

menghasilkan template sama ada anda perolehi secara PERCUMA atau anda BAYAR.

Admin perlu pandai memilih template yang sesuai dengan persembahan maklumat yang ingin

disampaikannya. Banyak URL yang boleh dilawati untuk mendapatkan template sama ada yang

percuma atau yang berbayar antaranya:

a) www.joomlaxtc.com

b) www.JoomlaPlates.com

67

c) www.joomla-templates.com

d) www.joomla24.com

e) www. joomlatp.com

f) www.joomlashine.com

g) www.siteground.com/joomla-hosting/joomla-templates.htm

h) www.joomlatemplatestyle.com

Banyak lagi URL lain yang memberikan anda kemudahan memuat-turun pelbagai baya dan tema

templates khusus untuk Joomla!. Terdapat ratusan laman web yang menyokong dan menggalakkan

anda untuk menggunakan Joomla! dengan membekalkan template dan extension yang lain. Ini

kerana Joomla! menjadi laman web kepada ratusan ribu web di dalam talian pada masa kini.

Setelah anda memuat-turun pakej template dalam fail termampat (.zip) anda perlu install masuk ke

dalam template manager menggunakan kemudahan Install/Uninstall pada menu Extension. Pilih

Extension kemudian Install/Uninstall dan paparan Extension Manager seperti di bawah akan

dipaparkan.

Gunakan butang ‘Browse’ untuk mencari lokasi fail termampat yang anda telah muat-turun tadi.

Seterusnya klik pada butang ‘Upload File & Install’. Tunggu dan anda akan perolehi mesej sama ada

installasi berjaya atau tidak. Jika gagal bermakna pakej anda sudah rosak atau tidak sesuai dengan

versi Joomla! yang digunakan. Jika installasi berjaya mesej akan dipaparkan sebagai:

Mesej Berjaya Installasi

Extension Manager ini juga digunakan untuk proses installasi dan uninstallasi untuk elemen

extension yang lain termasukkan component, module, plugin dan language. Rujuk pada tabs

extension yang ditunjukkan pada rajah ‘Extension Manager’.

68

Extension Manager.

Apabila installasi berjalan dan berjaya dilaksanakan anda akan semak di Template Manager. Semak

adakah template baru ini disenaraikan dalam template manager anda. Untuk memilih dan

menggunakannya pada laman ada jadikan template tersebut default sebagaimana yang diterangkan

sebelum ini tadi.

Template yang baik mempunyai kemudahan modifikasi yang lengkap menerusi Template Manager.

Untuk memodifikasi sebuah template pada Template Manager pilih nama template anda klik

butang Edit :

Template Manager – Edit Default Template

Contoh template ini mempunyai banyak kemudahan untuk memodifikasinya menggunakan

parameter tertentu seperti paparan di berikutnya:

69

Template Editor.

Menerusi kemudahan template editor ini anda dengan mudah boleh mengubahsuai beberapa

perkara, antaranya:

a. Pertama: Ruangan yang menyediakan kemudahan anda mengedit ‘Parameters’

template tersebut. Terdapat pelbagai bentuk parameter bergantung kepada template

anda. Terdapat juga parameter yang sangat lengkap dan sangat istimewa untuk

menghasilkan sebuah template yang menarik dan unik.

b. Kedua: Editor HTML yang membantu anda yang pakar dalam HTML

melakukanmodifikasi ke atas koding HTML pada template tersebut.

Template HTML Editor.

2 3

1

70

c. Ketiga: Editor CSS bagi kemudahan admin mengurus dan mengedit aturan pada fail CSS

yang memberikan kesan dan gaya persembahan ke atas template pilihan anda itu. Klik

pada Edit CSS pilih fail CSS yang ingin di edit contoh: template.css dan paparan editor

di bawah akan dipaparkan.

CSS Editor.

Setiap kali anda melakukan perubahan pada editor HTML atau CSS pastukan anda simpan (save)

untuk membolehkan koding baru digunakan oleh template anda.

Catatan: Anda perlu mempelajari sedikit kemahiran dan konsep dalam penulisan koding HTML

dan CSS untuk memantapkan kemahiran anda untuk menjadi seorang admin Joomla! yang

cekap dan mahir.

71

Merekabentuk & Arkitektual Joomla!

KERANGKA JOOMLA! & DATABASE

Kerangka Joomla 1.5 boleh diperjelaskan mengikut arkitektual MVC (Model View Controller) seperti

di bawah. MVC adalah arkitektual kejuruteraan perisian yang diguna dalam pembangunan aplikasi

CMS Joomla. Melaluinya pengguna akan memperolehi persembahan maklumat pada struktur

'LAYOUT'. MVC memanipulasi data dalam sistem pangkalan data (MySQL) menerusi struktur

'CONTROLLER' yang berfungsi menyalurkan data dari struktur MODEL ke VIEW. Controller

memanipulasi data mengikut permintaan pengguna. Pada struktur MODEL, ia menentukan

bagaimana data akan dimanipulasikan untuk menjadi maklumat termasuk kerja-kerja memasuk,

memindah, mengubahsuai atau menghapuskan data di dalam pangkalan data. Data kemudian akan

diminta dan diolah di CONTROLLER supaya menjadi maklumat yang berguna kepada pengguna.

Maklumat pada LAYOUT akan diproses oleh Web Server dalam bentuk HTTP dan dilaksanakan

dalam aplikasi pelayar internet pengguna.

MVC DIAGRAM I (Sumber: www.joomla.org )

72

Persembahan pada LAYOUT bergantung dan terkawal di bawah component, module, plugin dan

template yang digunakan. Semuanya dilaksanakan di dalam webserver (Server Site). Apabila

sampai ke pelayar internet PC pengguna, maklumat dipaparkan dalam format HTML yang difahami

oleh pelayar internet (Client Site). Penyaluran maklumat bertukar format dari Server Site ke Client

Site tetapi maklumat masih tetap sama dan tulin. Aplikasi dalam Server Site antaranya adalah PHP,

MySQL dan Apache. Pada Client Site pula adalah pelayar internet seperti Internet Browser atau

Mozilla FireFox atau Opera dan sebagainya.

MVC Joomla.

Core atau kerangka asas aplikasi Joomla! telah dibangunkan oleh pasukan pembangun CMS

dengan menggunakan kejuruteraan aplikasi sebenar. Ini dapat dijelaskan oleh diagram seperti di

atas.

Melalui kapakaran dan ketelitian pasukan pembangun CMS Joomla, kerangka kerja Joomla! dengan

sejumlah fail php, folder dan grafik khas telah dicipta dan boleh dipasang ke dalam webserver

pengguna untuk menghasilkan laman web masing-masing.

73

KERANGKA ASAS JOOMLA - Senarai Fail & Folder Joomla.

Senarai Folder Utama:

Senarai Fail dalam folder utama:

74

Untuk satu pakej Joomla 1.5 (1.5.21) terdapat kira-kira 4,201 fail dan 972 folder. Jumlah ini

berbeza jika versi yang anda muat turun berbeza. Apabila anda letakkan di dalam ruangan hosting

ia akan mengambil kira-kira 28MB ruangan bagi menyimpan semua fail-fail dan folder Joomla

keseluruhannya.

Jika anda menggunakan sistem installasi secara talian di dalam server seperti fantastico

anda akan terus memperolehi pakej Joomla dengan semua fail dan folder di atas tadi kecuali folder

installation. Proses menyimpan dan menginstallasi Joomla saya anggap sudah anda kuasai

sepenuhnya termasuk persediaan menyediakan pangkalan data, user dan katalaluan untuk

database anda. Saya juga beranggapan anda telah biasa dan mampu menguasai penggunaan

antaramuka MySQL iaitu PHPMyAdmin.

Dalam arkitektual Joomla!, aplikasi ini perlu disokong oleh sebuah pangkalan data

(Database) sebagai storan maklumatnya. Database atau pengkalan data ini adalah mandatory dan

perlu ada untuk membolehkan Joomla! berfungsi.

MVC dan Database

DATABASE (MySQL)

Pangkalan data atau Database bagi Joomla di kebanyakan local webserver dan hosting

adalah MySQL iaitu aplikasi pangkalan data berjenis Sumber Terbuka (Open Source) yang paling

popular buat masa ini. Majoriti webserver dan hosting sekarang menggunakan MySQL versi 5.

Contohnya jika anda menggunakan local webserver untuk kegunaan secara luar talian (offline) pada

komputer peribadi anda seperti Mowes, WAMP, XAMPP dan sebagainya, mereka menggunakan

MySQL 5.1.X dan ke atas.

Aplikasi ini boleh dimuat turun secara percuma di http://www.mysql.com dan boleh

dipasang secara pakej atau bersendiri bergantung kepada keperluan anda. Apabila anda

menggunakan pangkalan data MySQL dalam persekitaran web (web-base) anda boleh

mengendalikannya dengan arahan teks SQL secara koding HTML atau secara GUI dengan

75

menggunakan PHPMyAdmin. Kebanyakan local webserver dan hosting menggunakan kemudahan

GUI dengan PHPMyAdmin. Untuk pembelajaran tahap ini saya menganggap anda telah biasa dan

mahir menggunakannya.

Dengan menggunakan PHPMyAdmin saya cuba jelaskan beberapa perkara khusus

berkaitan dengan CMS Joomla. Joomla hanyalah kerangka yang memanggil dan

mempersembahkan maklumat menerusi struktur arkitektual VIEW kepada pengguna yang

keseluruhan datanya disimpan dalam jadual-jadual khusus di dalam pangkalan data. Data-data

dalam pangkalan data tidak akan bermakna selagi tidak dimanipulasi oleh CONTROLLER mengikut

kehendak pengguna. Kemudian memanggil data dari struktur arkitektual MODEL yang akan

mengkemaskini data dan melepaskan data untuk dibekalkan sebagai maklumat kepada VIEW

mengikut ketentuan dan pola kawalan pada struktur CONTROLLER.

Jadual (Table) Data Menerusi PHPMyAdmin

Ringkasnya CONTROLLER akan menjadi orang tengah yang meminta dan memanggil data dari

MODEL kemudian membekalkan data menjadi maklumat kepad VIEW. Ini dijelaskan oleh diagram

di bawah:

76

MVC Diagram II (Sumber: http://www.adiipl.com/)

Walaupun Joomla menggunakan bahasa PHP tetapi apa yang pengguna perolehi dan dipaparkan

pada pelayar internet pengguna adalah persembahan maklumat HTTP dalam format HTML. Ini

kerana arkitektual MVC (Server Site Applications) dapat menghasilkan maklumat yang dikehendaki

pengguna di dalam web server. Kemudian web server menukarkan maklumat kepada HTTP dan

disalurkan kepada pelayar internet untuk paparan kepada pengguna. Browser internet seperti IE,

Firefox, Opera dan sebagainya adalah aplikasi Client Site yang tidak akan memahami koding PHP,

maka web server membekalkan maklumat dalam bentuk HTTP kepadanya.

Semasa proses memasang Joomla ke local webserver atau hosting, satu database perlu dicipta

bersama. Di dalam database ini akan dibina beberapa jadual (table) data yang akan menyimpan

data mengikut kategori khusus. Secara normal selepas proses installasi Joomla akan diwujudkan 36

jadual data:

Jadual Data PHPMyAdmin

77

Jadual-jadual Data

Setiap jadual (table) akan dinamakan mengikut kategori datanya seperti jos_banner,

jos_components, jos_content, jos_users dan sebagainya. Kata tanda 'jos_' dikenali sebagai prefix

database akan digunakan untuk menamakan setiap jadual data. Anda boleh juga menggunakan

kata tanda lain mengikut kehendak anda tidak semestinya jos_ sahaja.

Sebagai praktik dengan penggunakan PHPMyAdmin, panggil satu jadual yang bernama 'jos_users'.

Bagi laman Joomla yang baru diinstall hanya terdapat satu nama pengguna yang wujud pada

senarai pengguna seperti contoh di bawah.

Paparan Jadual Data 'jos_users'

Edit & Update Jadual Data.

Anda dapati ada satu sahaja users sekarang iaitu; name=Administrator dengan username=admin

dan menggunakan email, katalaluan dan butiran lain seperti dipaparkan. Semasa proses installasi

saya telah memilih username= admin dan password= admin. Tetapi sistem Joomla telah menukar

katalaluan (encrypted) katalaluan 'admin' menjadi kod encrypt seperti dalam jadual. Jika saya lupa

katalaluan asal ini, saya boleh tukar encrypt kod tersebut dengan encrypt kod lain yang saya ketahui

aksara romannya.

Contoh saya tukarkan password asal ini dengan cara mengedit jadual tersebut menggunakan

butang edit kemudian mengantikan semua encrypt kod password tersebut dengan kod ini:

Encrypt kod baru = e10adc3949ba59abbe56e057f20f883e

di mana aksara romannya adalah = 123456.

78

Kemudian save untuk mengemaskini perubahan tersebut. Sekarang log masuk dengan username=

admin dan password baru = 123456. Beginilah caranya jika administrator suatu hari nanti terlupa

akan katalaluannya atau untuk menukar katalaluan user-user anda yang lain.

Apa yang anda fahami dari aktiviti dan praktik ini adalah kerangka Joomla adalah kosong hanya

koding PHP untuk menghasilkan satu sistem CMS yang indah, cekap, sistematik dan memenuhi

keperluan yang dikehendaki. Tetapi semua maklumat adalah dalam bentuk data yang tersimpan

dalam pangkalan data di MySQL. Sebarang perubahan atau kerosakan pada kerangka Joomla tidak

sedikitpun menghilangkan data web anda. Ini berbeza dengan konsep penulisan laman HTML di

mana semua data untuk maklumat juga terselit pada koding HTML kerangka web yang sama.

Akibatnya kerosakan pada kerangka web akan menghilangkan terus data dan maklumatnya.

Seterusnya cuba anda panggil pula jadual lain seperti jos_content, jos_sections, jos_categories dan

sebagainya untuk melihat kandungan di dalam jadual tersebut. Lihat sahaja jangan edit

sembarangan sehinggalah anda perlu melakukannya dalam tajuk-tajuk seterusnya, kerana takut

akan merosakkan data.

KONSEP MEREKABENTUK & PEMBANGGUNAN COMPONENT.

Satu pendekatan yang unik dalam pembinaan kerangka Joomla seperti yang diterangkan pada tajuk

sebelum ini adalah konsep model kejuruteraan perisian yang dikenali sebagai MVC (Model View

Controller). Model MVC ini jugalah yang digunakan dalam pembangunan component yang akan

membantu Joomla berfungsi dan bekerja dengan lebih sempurna. Dalam tajuk saya cuba terangkan

konsep dan model pembangunan component dari sudut kejuruteraan perisian MVC.

Untuk menghasilkan satu component, pembangun perlu menyediakan beberapa folder dan fail. Fail-

failn folder ini boleh disediakan secara mudah menggunakan tools/alat istimewa atau secara susah

satu persatu secara manual. Kemudian barulah pembangun menggunakan skil dan kemahirannya

dalam pengaturcaraan PHP untuk menghasilkan koding bagi membangunan component tersebut

hingga siap seperti dikehendaki.

79

a. Menghasilkan Component Secara Manual.

Untuk cara pertama ini, anda perlu lakukan pembangunan component anda secara manual.

Mulakan dengan menghasilkan 2 folder dengan nama yang sama di lokasi /administrator/component

dan satu lagi di /component. Folder dalam lokasi pertama adalah untuk kegunaan dalam panel

kawalan (backend) dan folder dalam lokasi kedua adalah untuk paparan kepada pengguna

(frontend).

Seterusnya cipta beberapa fail dan folder di lokasi pertama dan kedua. Sebagai contoh ikuti

4 langkah berikut:

Langkah 1: Mendaftar component baru ke Pangkalan Data

Menggunakan PHPMyAdmin, masukkan entry baru untuk menghasilkan satu

component baru. Andaikan nama component yang baru ini adalah „com_mycomp‟. Dengan

menggunakan phpmyadmin buka database Joomla anda, kemudian pilih jadual data (table)

bernama „jos_components‟. Masukkan entry baru, klik „insert‟ seterusnya isi seperti

maklumat berikut:

Entry Baru Dalam Jadual Data ‘jos_components’

80

Dalam ruangan (field) berikan nama (name) sebagai „My Component’, masukkan

pada link dan admin_menu_link sebagai „option=com_mycomp’ , pada option isikan

„com_mycomp’ , tulis sedikit teks contoh „Manage My Component’ dalam ruangan

admin_menu_link, untuk admin_menu_img pilih imej dengan memilih alamat imej ini

„js/ThemeOffice/component.png’ dan letakkan sifar „0‟ pada menuid, parent, ordering dan

iscore. Hanya pada enabled masukkan „1‟. Selepas masukkan semua entry tersebut, klik

pada OK.

Sekarang jika anda semak menu Component pada panel admin sudah wujud menu

baru „My Component‟.

Langkah 2: Mencipta folder dan fail backend.

Walau bagaimanapun jika anda klik pada submenu My Component di bawah menu

Component pada Panel Kawalan akan dipaparan amaran laman 404 dengan mesej

“Component Not Found”. Ini kerana folder dan fail component tersebut untuk laman backend

belum dicipta, seterusnya lakukan.

i- Mencipta folder: Cipta folder bernama „com_mycomp‟ dalam component admin di lokasi:

http://localhost/joomla/administrator/components/com_mycomp

ii- Mencipta fail kawalan component: Cipta fail bernama „admin.mycomp.php‟ dalam folder di atas.

Contoh kod php fail tersebut adalah seperti di bawah:

Contoh Koding PHP Backend

Untuk menambah butang-butang dan parameter kawalan anda perlu koding

sepenuhnya fail tersebut dengan skil PHP anda. Saya tidak menunjukkan

bagaimana menulisnya itu terpulang kepada keperluan dan perancangan

anda.

Link URL component ini untuk backend adalah:

http://localhost/joomla/administrator/index.php?option=com_mycomp

81

Langkah 3: Mencipta folder dan fail frontend.

i- Mencipta folder: Cipta folder bernama „com_mycomp‟ dalam root Joomla anda di lokasi:

http://localhost/joomla/components/com_mycomp

ii- Mencipta fail paparan frontend component: Cipta fail bernama „mycomp.php‟ dalam folder di atas.

Contoh kod php untuk fail tersebut adalah seperti di bawah:

Contoh Koding PHP Frontend

Untuk menambah maklumat dan persembahan pada paparan frontend, anda

perlu koding sepenuhnya fail ini dengan skil PHP anda. Anda boleh

memanggil data dari isi kandungan atau sebagainya, tetapi koding dahulu

dengan sempurna.

Link URL component ini untuk backend adalah:

http://localhost/joomla/index.php?option=com_mycomp

Catatan Penting: Pada asasnya hanya 2 folder dan 2 fail ini sahaja untuk

menciipta component. Tetapi dalam membina component sebenar mengikut

model MVC banyak lagi folder dan fail sokongan diperlukan.

82

Langkah 4: Mencipta menu bagi component.

Sekarang sebagai admin anda perlu menyediakan menu untuk kemudahan

pengguna. Sebab pengguna tidak akan menggunakan URL component

seperti di nyatakan di atas untuk tujuan membuka component.

Menerusi Panel Kawalan admin pada Menus, pilih module menu anda dan

cipta fail baru untuk component „My Component‟ yang dipaparkan di dalam

menus. Sebagai admin yang telah mahir saya percaya anda boleh

menciptanya dengan mudah.

Seperti dijelaskan kaedah pertama ini adalah asas (basic) penciptaan component, tetapi

untuk menghasilkan component sebenar di bawah model MVC tidak cukup dengan 2 folder dan 2

fail seperti diterangkan tadi. Untuk memudahkan anda mencipta folder dan fail-fail berkonsepkan

model MVC alat/tools diperlukan.

b. Tools/Alat Online Membina Folder & Fail Component.

Saya memperkenalkan kepada anda tiga URL untuk memudahkan kerja menghasilkan fail

dan folder bagi satu component baru yang saya namakan sebagai Component Baruku. Folder dan

fail anda akan dinamakan sebagai 'Com Baruku'. URL tools / alat tersebut adalah;

i. http://www.joomlafreak.be/joomla_component_code_generator/ ii. http://www.notwebdesign.com/joomla-component-creator/ iii. http://www.alphaplug.com/index.php/products/mvc-generator-online.html

Catatan: Anda boleh temui banyak lagi URL lain untuk tujuan ini.

Saya memilih URL ketiga untuk menghasilkan satu contoh component dengan nama seperti

dinyataka tadi. Menggunakan mana-mana alat di atas anda dengan mudah boleh mencipta folder

dan fail bagi component anda melalui 5 langkah di bawah:

i. Lengkapkan nama dan maklumat pengenalan component anda. ii. Pilih pecahan fail dan folder untuk Frontend (lokasi storan /component ) iii. Pilih pecahan fail dan folder untuk Backend (lokasi storan /administrator/component) iv. Tentukan apakah format SQL dan teks arahan SQL untuk mencipta jadual data (table) anda. v. Pilihan bahasa untuk laman anda ( lokasi storan /language)

Catatan: Langkah kerja ini mungkin berbeza kaedah dan bilangan langkah jika anda

menggunakan tools online yang berbeza dengan pilihan saya ini.

Gunakan browser internet buka URL:

http://www.alphaplug.com/index.php/products/mvc-generator-online.html

83

LANGKAH PERTAMA

Lengkapkan maklumat seperti di atas untuk menyatakan nama dan identity pembangun bagi

component yang dicipta.

LANGKAH KEDUA

Untuk menghasilkan folder dan fail frontend. Contoh fail-fail pilihan saya.

84

LANGKAH KETIGA

Untuk menghasilkan folder dan fail backend. Contoh fail-fail pilihan saya.

85

LANGKAH KEEMPAT

Arahan SQL untuk menghasilkan jadual data(table) jika component anda ingin memuatkan

data entrynya dalam pangkalan data Joomla.

LANGKAH KELIMA

Tentukan pilihan bahasa untuk frontend dan backend anda. Kemudian masukkan kod antii

spam dan seterusnya jana pakej (Generate package) folder-folder dan fail-fail bagi

component anda.

Mengunakan kemudahan Tools Online ini dengan mudah anda akan memperolehi pakej fail dan

folder yang siap sedia dipakejkan dalam format termampat (.zip) kemudian anda install ke web

anda. Berikut adalah senarai fail dan folder yang dihasilkan;

86

52 fail telah dicipta untuk kegunaan di frontend, backend dan dalam folder language.

component_baruku.xml

- install.component_baruku.php

- uninstall.component_baruku.php

- frontend/index.html

- frontend/component_baruku.php

- frontend/controller.php

- frontend/models/index.html

- frontend/models/component_baruku.php

- frontend/views/index.html

- frontend/views/component_baruku/index.html

- frontend/views/component_baruku/view.html.php

- frontend/views/component_baruku/metadata.xml

- frontend/views/component_baruku/tmpl/index.html

- frontend/views/component_baruku/tmpl/default.php

- frontend/views/component_baruku/tmpl/default_form.php

- frontend/views/component_baruku/tmpl/default.xml

- frontend/controllers/index.html

- frontend/controllers/component_baruku.php

- frontend/helpers/index.html

- frontend/helpers/component_baruku.php

- frontend/assets/index.html

- frontend/assets/images/index.html

- backend/index.html

- backend/admin.component_baruku.php

- backend/controller.php

- backend/helper.php

- backend/CHANGELOG.php

- backend/config.xml

- backend/views/index.html

- backend/views/component_baruku/index.html

- backend/views/component_baruku/view.html.php

- backend/views/component_baruku/tmpl/index.html

- backend/views/component_baruku/tmpl/default.php

- backend/views/component_baruku/tmpl/default_form.php

- backend/controllers/index.html

- backend/controllers/component_baruku.php

- backend/models/index.html

- backend/models/component_baruku.php

- backend/elements/index.html

- backend/helpers/index.html

- backend/helpers/component_baruku.php

- backend/assets/index.html

- backend/assets/images/index.html

- backend/help/index.html

- backend/help/en-GB/index.html

- backend/help/en-GB/screen.component_baruku.html

- backend/help/en-GB/css/index.html

- backend/help/en-GB/css/help.css

- backend/tables/index.html

- backend/install.mysql.utf8.sql

- languages-front/en-GB/en-GB.com_component_baruku.ini

- languages-admin/en-GB/en-GB.com_component_baruku.ini

Senarai Fail & Folder Component Baruku

87

Setelah anda berjaya install ke Joomla, cuba koding fail backend iaitu :

http://localhost/joomla/administrator/components/com_component_baruku/admin.component_b

aruku.php

dan fail frontend iaitu:

http://localhost/joomla/components/com_component_baruku/com_component_baruku.php

dengan koding yang sama untuk fail backend dan frontend semasa melakukan dalam kaedah

membina component secara manual tadi. Untuk fail-fail frontend dan backend yang lain anda

memerlukan masa dan pengetahuan yang lebih bagi menghasilkannya. Untuk sampai ke tahap itu

anda perlu mahir dan mempunyai skil pengaturcaraan PHP yang tinggi dan mantap. Walau

bagaimanapun sedikit sebanyak tunjukajar dan panduan saya ini dapat membantu anda untuk

membuat perubahan dan modifikasi kepada component sedia ada untuk disesuaikan dengan

kehendak dan keperluan web anda nanti.

Installasi Component Baruku

Component baru dengan nama Component baruku akan tercipta dalam senarai components di

laman Joomla anda. Begitu jugapada senarai menu item dalam menus anda untuk kemudahan

mencipta menu.

Senarai Components Menus Items

Kesimpulan.

Melalui dua kaedah ini anda dapat menghasilkan component atau anda kini faham

bagaimana component dihasilkan. Dengan kepakaran, pengetahuan dan skil PHP yang tinggi,

syntax dan arahan PHP dapat mengarahkan Controller untuk mempersembahkan data (Model)

anda sebagai mana yang anda kehendaki untuk dipaparkan kepada pengguna (View).

Melalui pendekatan model MVC pembangun dapat menghasilkan component Joomla.

Sebagai administrator biasa memadailah anda kenal, faham dan tahu konsep pembinaan

component ini untuk bekalan menghasilkan atau memodifikasi component sedia ada atau yang jenis

3rd

party untuk di sesuaikan dengan keperluan laman anda.

88

KONSEP MEREKABENTUK & PEMBANGGUNAN MODULE.

Setelah anda memahami dan berjaya menghasilkan component atau sekurang-kurangnya

anda telah faham bagaimana struktur dan konsep pembinaan component kini saya terangkan pula

bagaimana Module di hasilkan.

Mengapa perlu dan apa kegunaan module?. Module dihasilkan untuk mempersembahkan

maklumat atu isi kandungan laman anda. Module juga boleh menjalankan fungsi bagi component

serta mempersembahkan item lain seperti grafik, audio, animasi dan video. Module boleh disusun

atur dan diletakkan pada template Joomla mengikut kreativiti dan keperluan yang admin rancang.

Contoh nama-nama lokasi (position) untuk meletak Module.

89

Merekabentuk laman web tidak boleh lari dari penggunaan module. Module dapat diletakkan

pada position seperti contoh tadi untuk menghiasi laman web anda. Module mungkin

mempersembahkan maklumat mengikut kaedah dan fungsi istimewa yang dimainkan oleh module

seperti memilih artikel terkini, persembahan artikel bergerak (scroll), sliding, persembahan animasi

teks, grafik, dan sebagaainya. Module juga boleh mempersembahkan fungsi component seperti

senarai pengguna, banner, forum, fail muat turun, corousal grafik, flash animasi dan sebaginya.

Module Scroller Imej.

Pembanggunan Module Baru

Jika semasa menghasilkan component terlalu banyak syarat dan ketetapan terhadap fail dan

folder diminta untuk anda patuhi, sebaliknya berlaku jika anda ingin menghasilkan module baru

ciptaan anda. Walaupun ada juga syarat penyediaan folder dan fail, tetapi jauh lebih kecil

bilangannya serta tidak sukar penghasilannya.

Untuk menghasilkan MODULE kepada Joomla anda hanya perlu sediakan 8 perkara asas ini

sahaja iaitu:

1. Cipta folder modul anda. Eg: mod_baru 2. Cipta di dalam folder fail 'mod_baru.php' 3. Cipta di dalam folder fail 'mod_baru.xml' 4. Cipta di dalam folder fail 'helper.php'. 5. Cipta di dalam folder fail 'index.html' 6. Cipta sub-folder 'tmpl' dalam folder 'mod_baruku'. 7. Cipta di dalam sub-folder tmpl fail 'default.php' 8. Cipta di dalam sub-folder tmpl fail 'index.html'

Apa koding nak ditulis dalam fail-fail di atas?

Masukkan semua koding yang saya berikan di bawah mengikut nama failnya dan save.

Semua koding ini adalah contoh sahaja, anda boleh menyediakan/menulis koding lain mengikut

kemahiran dan skill pengaturcaraaan PHP yang anda kuasai.

90

Koding-koding tersebut adalah seperti berikut:

Koding Fail mod_baru.php

Koding Fail mod_baru.xml

Mod_baru.xml digunakan untuk proses installasi Joomla untuk menyemak daftar fail

dan folder dalam pakej ini.

91

Koding Fail helper.php

helper.php digunakan oleh mod.baruku.php sebagai sumber paparannya. Anda perlu koding

fail ini selengkapnya untuk paparan pada frontend seperti yang anda kehendaki.

Koding Fail tmpl/default.php

92

Subfolder tmpl bermaksud folder template untuk moduletersebut. Fail default.php

menentukan nilai yang dipanggil dari proses di fail helper.php

Koding Fail index.html & Fail tmpl/index.html

Ringkas sahaja koding HTML untuk kedua-dua fail ini yang bermaksud sebuah fail kosong.

Selesai mencipta semua fail di atas, anda perlu zip semua fail tersebut dengan nama

'mod_baru.zip' dan gunakan fail ini untuk proses installasi di Panel Kawalan Admin Joomla.

Kemudian setting di Module Manager untuk aktifkan (enabled) module ini serta tetapkan posisi

kedudukannya di frontend mengikut template frontend yang anda gunakan.

Kesimpulan

Dengan mengikuti langkah-langkah mudah tadi anda Berjaya menghasilkan satu modul baru. Tetapi

ini hanyalah asas (basic) penciptaan module. Anda boleh pelbagaikan lagi keunikan module anda

dengan menambah fail kawalan di backend. Tetapi anda perlu mendalami lagi proses penghasilan

tersebut disamping meningkatkan keupayaan pengaturcaraan anda dalam PHP.

93

KONSEP MEREKABENTUK & PEMBANGGUNAN PLUGIN

Contoh Plugin Content

Plugin adalah extension tambahan yang memainkan satu fungsi besar dan khusus untuk

menjadikan laman web anda lebih menarik dan unik. Plugin sangat fleksibel dan memainkan

peranan yang besar sama ada di bahagian backend semasa admin pekerja atau berfungsi di

frontend dalam mempersembahkan maklumat kepada pengguna.

Kenapa dan mengapa perlu plugin?

Kadangkala di dalam artikel ingin diselitkan module, atau kadang kala di dalam artikel perlu

diselitkan kod pemain multimedia dan sebagainya. Maka pada artikel tersebut perlu ada kod arahan

kerja, sedangkan di situ tidak boleh ditulis kod ini kerana kerangka kerja Joomla! telah di aturkan

hanya memainkan artikel. Maka tugasan ini akan dilaksanakan oleh plugin.

Untuk menghasilkan satu plugin langkah pembangunannya adalah lebih mudah dan hanya

memerlukan satu fail dengan koding PHP yang sempurna sahaja. Namun untuk membolehkannya di

install dan bekerja dengan bantuan animasi, butang, grafik dan sebagainya mungkin beberapa fail

dan folder diperlukan. Namun pada asasnya plugin hanya memerlukan satu fail sahaja yang

dinamakan sebagai dirinya.

Seperti yang saya katakan walaupun cuma satu fail PHP diperlukan untuk membolehkan

cintaan anda dipakejkan seterusnya di install ke Joomla satu fail XML diperlukan. Kaedah ini sama

seperti semasa membina component dan module sebelum ini di mana fail XML perlu disediakan

sama ada manual atau melalui janaan tools.

Katakan sekarang saya ingin membangunkan satu plugin untuk digunakan di dalam artikel

(centent) bagi mempersembahkan audio MP3. Koding yang saya gunakan adalah dari Yahoo Media

Player, jadi saya namakan plugin ini sebagai “plg_ympP”. Untuk menghasilkan plugin tersebut

mula-mula cipta folder dengan nama plg_ympP kemudian lengkapkan dengan fail-fail berikut:

Fail Asas:

1. ympp.php 2. ympp.xml

94

Fail Tambahan sebagai aksesori kepada plugin untuk memberikan persembahan media

yang unggul:

1. ymp_template_css.css 2. ympP_sources.php

Koding-koding PHP ini adalah dari Yahoo Media Player, sesuai untuk digunakan sebagai

plugin Joomla. Dalam proses pengenalan ini anda copy dan paste sahaja koding ini.

<?php

/*

// Yahoo Media Player Plugin by Andres Vargas for Joomla! 1.5.x - Version 0.5

// Released under the GNU/GPL license: http://www.gnu.org/copyleft/gpl.html

*/

// no direct access

defined( '_JEXEC' ) or die( 'Restricted access' );

$mainframe->registerEvent( 'onPrepareContent', 'ympP' );

function ympP( &$row, &$params, $page=0 ) {

global $mainframe;

$document =& JFactory::getDocument();

$db =& JFactory::getDBO();

$plg_name = "ympP";

$plg_tag = "";

$plg_copyrights_start = "\n\n<!-- Yahoo Media Player Plugin Plugin (v0.5) starts

here -->\n";

$plg_copyrights_end = "\n<!-- Yahoo Media Player Plugin Plugin (v0.5) ends here --

>\n\n";

$mosConfig_absolute_path = JPATH_SITE;

$mosConfig_live_site = $mainframe->isAdmin() ? $mainframe->getSiteURL()

: JURI::base();

if(substr($mosConfig_live_site, -1)=="/") $mosConfig_live_site =

substr($mosConfig_live_site, 0, -1);

$plugin =& JPluginHelper::getPlugin('content', $plg_name);

JPlugin::loadLanguage( 'plg_content_'.$plg_name, 'administrator' );

$pluginParams = new JParameter( $plugin->params );

$afolder = $pluginParams->get('afolder','mp3/');

$linkv = $pluginParams->get('linkv','0');

include($mosConfig_absolute_path."/plugins/content/ympP_sources.php");

$grabTags =

str_replace("(","",str_replace(")","",implode(array_keys($tagReplace),"|")));

if (preg_match("#{(".$grabTags.")}#s",$row->text)==false) {return true;}

if ( !$pluginParams->get('enabled',1) ) {

foreach ($tagReplace as $plg_tag => $value) {

$regex = "#{".$plg_tag."}(.*?){/".$plg_tag."}#s";

$row->text = preg_replace( $regex, "", $row->text );

} return true; } else { $ymphead = '

<style type="text/css" media="all">

@import "'.$mosConfig_live_site.'/plugins/content/ymp_template_css.css";

</style>

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

';

$document->addCustomTag($plg_copyrights_start.$ymphead.$plg_copyrights_end);

}

foreach ($tagReplace as $plg_tag => $value) {

$regex = "#{".$plg_tag."}(.*?){/".$plg_tag."}#s";

if (preg_match_all($regex, $row->text, $matches, PREG_PATTERN_ORDER) > 0) {

foreach ($matches[0] as $key => $match) {

95

$tagcontent = preg_replace("/{.+?}/", "", $match);

$tagparams = explode('|',$tagcontent);

$tagsource = explode(',',$tagparams[0]);

$findAVparams = array(

"{AVSOURCE}",

"{TITLE}",

);

$replaceAVparams = array(

$tagsource[0],

$tagsource[1],

);

if($linkv == 1)

{$class = "ympc";}

else

{$class = "ympch";}

$wrapstart = $plg_copyrights_start.'<span class="'.$class.'">';

$wrapend = '</span>'.$plg_copyrights_end;

$plg_html =

JFilterOutput::ampReplace($wrapstart.str_replace($findAVparams, $replaceAVparams,

$tagReplace[$plg_tag]).$wrapend);

$row->text =

preg_replace("#{".$plg_tag."}".preg_quote($tagcontent)."{/".$plg_tag."}#s", $plg_html ,

$row->text);

}

}

}

}

?>

Fail 'ympp.php'

<?xml version="1.0" encoding="utf-8"?>

<install version="1.5" type="plugin" group="content">

<name> Yahoo Media Payer Plugin</name>

<author>Andres Vargas</author>

<authorEmail>rogant@gmail.com</authorEmail>

<authorUrl>www.recursosweb.org</authorUrl>

<copyright>Copyright (c) 2006-2009 JoomlaWorks Ltd. All rights reserved.</copyright>

<creationDate>30/05/2009</creationDate>

<license>http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL</license>

<version>0.5</version>

<description>Yahoo media palyer for joomla. For documentation:

http://recursosweb.org/</description>

<params>

<param name="afolder" type="text" default="mp3/" size="40" label="Local Audio

Folder" description="Local Audio Folder" />

<param name="linkv" type="radio" default="1" label="Link Visible" description="Link

Visible">

<option value="1">Yes</option>

<option value="0">No</option>

</param>

</params>

<files>

<filename plugin="ympP">ympP.php</filename>

<filename plugin="ympP">ympP_sources.php</filename>

<filename plugin="ympP">ymp_template_css.css</filename>

</files>

</install>

Fail 'ympp.xml'

96

/* CSS Document */

.ympch {visibility:hidden;}

.ympc {}

Fail 'ymp_template_css.css'

<?php

/*

// Yahoo Media Player Plugin by Andres Vargas for Joomla! 1.5.x - Version 0.5

// Released under the GNU/GPL license: http://www.gnu.org/copyleft/gpl.html

*/

// no direct access

defined( '_JEXEC' ) or die( 'Restricted access' );

$tagReplace = array(

"ympl" => "

<a href=\"".$mosConfig_live_site."/".$afolder."/"."{AVSOURCE}\" class=\"htrack\"

tabindex=\"1\"

title=\"{TITLE}\" type=\"audio/mpeg\">{TITLE}</a>

"

);

?>

Fail 'ympP_sources.php'

Kemudian pakejkan plugin ini dengan memampatkan ke empat-empat fail mejadi plg_ympp.zip dan

kemudian install ke dalam Joomla anda. Selepas berjaya install aktifkan plugin (enabled) pada Plugin

Manager, kemudian anda sudah boleh menggunakannya.

Bagaimana caranya?

Pastikan anda tidak menggunakan editor WYSIWYG semasa menulis artikel dengan plugin ini atau pilih

editor toggle. Persediaan awal kedua adalah menyediakan fail mp3 anda di dalam folder /mp3 yang

dicipta pada root Joomla anda.

Katakan dalam folder /mp3 saya terdapat 3 lagu;

1. 25rasul.mp3 (nyanyian Raihan) 2. holfmyhand.mp3 (nyanyian Maher Zein) 3. insya-allah.mp3 (nyanyian Maher Zein)

Sekarang saya buat satu artikel bertajuk 3 Lagu Nasyid untuk section dan category yang wujud dalam

laman saya. Pastikan artikel ini dipaparkan pada frontpage. Artikel ditulis dalam format HTML tanpa

editor WYSIWYG atau dengan editor Toogle.

97

Begini lebih kurang;

<p>3 Lagu Nasyid Pilihanku</p>

<p>Ini adalah lagu nasyid pilihan Azmi Sulaiman</p>

<p>Untuk paparan di lamanku.my</p>

<p>{ympl}25rasul.mp3, 25 Razul ( Raihan){/ympl}</p>

<p>{ympl}holdmyhand.mp3, Maher Zein {/ympl}</p>

<p>{ympl}MaherZainAwaken.mp3, Maher Zein - Awaken {/ympl}</p>

Untuk memainkan lagu mp3 dalam artikel anda gunakan plugin ini dengan sytax:

{ympl}MaherZainAwaken.mp3, Lagu Maher Zein - Awaken {/ympl}

Jika ada banyak lagu ulang syntax sebegini untuk lagu-lagu lain.

Pastikan sumber mp3 anda diletakkan dalam folder /stories/audio/

Contoh paparan pada frontend web anda:

Klik pada butang ‘play’ pada artikel dan audio akan dimainkan dengan plugin seperti di bawah:

Kesimpulan:

Walaupun anda cuma modifikasi sahaja dan tidak melakukan penulisan koding, apa yang ingin

saya sampaikan adalah asas pembinaan plugin. Ringkasnya, plugin merupakan merupakan satu set fail

arahan PHP untuk melaksanakan suatu fungsi luar untuk dipersembahkan bersama artikel di laman

anda.Plugin disertakan dengan fail XML untuk tujuan installasi ke Joomla, serta fail-fail lain termasuk

grafik, css, java script dan fail swf jika perlu untuk menampak fungsi dan keunikan plugin anda di dalam

artikel. Plugin dibina untuk menyokong persembahan artikel di laman anda serta menjadikan maklumat

tersebut kukuh, jitu dan menarik.

98

KONSEP MEREKABENTUK & PEMBANGGUNAN TEMPLATES

Seterusnya diterangkan bagaimana membina dan menghasilkan template untuk Joomla! 1.5.

Seperti yang anda ketahui template adalah pakaian luar yang mewarnai dan mencorakkan

persembahan laman web anda.

Template mempengaruhi persembahan web meliputi warna dan theme, penetapan posisi module-

module, gaya dan style untuk artikel termasuk teks, warna, sais, penjajaran, format penulisan, grafik

dan sebagainya. Untuk membina template juga ada format dan syarat yang perlu diikuti.

Saya akan menunjukkan asas pembinaan template yang mudah dan ringkas. Dengan pengetahuan

dan pemahaman konsep yang anda perolehi nanti anda pasti mampu membina template yang lebih

hebat dan menarik.

Pada asasnya anda perlu cipta satu folder utama contoh : tpl_lamanku

Di dalam folder tersebut anda tambah beberapa sub-folder dan fail. Sub-folder yang asas adalah;

1. css 2. images

Memadai dengan dua folder asas tersebut sebagai sub-folder anda. Kemudian cipta beberapa fail

asas dalam folder tpl_lamanku iaitu;

1. index.php 2. templateDetails.xml 3. template_thumbnail.png (198x144 pixels) 4. css/templates.css 5. images/header.png (950x185 pixels)

99

Fail nombor 1 adalah koding PHP yang menjadi nadi utama kepada template ini. Fail nombor 2

adalah fail XML untuk kegunaan Joomla semasa proses installasi template. Fail nombor 3 adalah

fail grafik untuk pra-paparan semasa mengendalikan Templates Manager. Fail ke 4 adalah fail css

yang perlu dicipta di dalam subfolder css. Manakala fail ke 5 adalah fail grafik untuk identiti web ini

dan diletak dalam subfolder images.

Seterusnya, isikan fail-fail tadi dengan koding asas seperti contoh berikut;

1. index.php

Fail index.php

Penerangan Ringkas:

Baris 1-4 adalah info sahaja boleh abaikan.

Baris 6 – Adalah teks koding PHP identiti Joomla menandakan laman ini tidak boleh diakses

secara terus.

Baris 7 – 10 adalah penanda koding ini mengikut standard penulisan W3C.

100

Baris 12 – 21 adalah <head>....</head> dengan maklumat css template dan css system.

Baris 23 – 38 adalah body yang perlu anda konfigur dan setting mengikut kehendak dan

perancangan persembahan laman anda. Ini adalah asas penulisan body dengan idea ingin

memaparkan 5 position module iaitu top, left, component (Frontpage), right dan footer

sahaja.

Kaedah penulisan ini menggunakan pendekatan 'float'. <div adalah syntax 'gutter' untuk

menyatakan sempadan antara setiap module. Dengan css anda boleh berikan lagi sifat

untutk gutter ini jika perlu.

id=”container” yang saya gunakan menggunakan pendekatan banyak template khususnya

SiteGround dan jika anda cenderung dengan pendekatan ol_webdesign mereka

menggunakankan id=”bd” atau id=”body” dan sebagainya.

Setiap id ini akan ditetapkan sifat dan gaya/style khusus di dalam id tersebut oleh

template.css iaitu fail Cascade Sheet Style bagi setiap id tersebut. Rujuk fail template.css dari

baris 44 – 86.

“<jdoc:include ….” adalah syntax dalam libry Joomla yang bermakna anda memanggil

module berjenis apa dan akan diletakkan sebagai posisi apa?? penentuan setiap posisi ini di

buat di dalam fail css. “class=”float' bermakna semua module adaalah mengikut class

tersebut tanpa perlu di terangkan selengkapnya sifat setiap satu modul (css shorthand

syntax).

2. templateDetails.xml

Fail templateDetails.xml

101

Penerangan Ringkas:

Fail XML adalah panduan untuk plugin install dalam Joomla untuk memasang template ini ke

dalam senarai template pada component Template Manager laman Joomla. Fail ini

menyenaraikan informasi tentang template dan info pembangunnya, senarai fail yang

terkandung di dalam pakej serta posisi yang dikonfigurkan oleh template nanti. Ini juga menjadi

panduan dan parameter rujukan kepada pengguna semasa menggunakan Templates Manager.

Jika anda melakukan penampahan fail dan folder, senaraikan fail dan folder baru anda

tambah sebelum anda pakejkan menjadi fail.zip.

3. templates.css

lihat contoh css di bawah dan diikuti pengenalan kepada CSS (asas).

102

103

Fail templates.css

104

Penerangan Ringkas:

Kod css adalah unik sedikit, walaupun banyak persamaan dengan kod HTML tetapi ia tidak

mempunyai tag. Baris 7 – 27 adalah penentuan style untuk keseluruhan laman pada konteks

umum. Bagi semua sifat untuk id ditandakan dengan # contoh: #header, #content dan

sebagainya manakala class pula ditanda dengan titik seperti .float, .clear dan .overoll.

Setiap id css ditentukan sifat dan style meliputi warna, teks, grafik, jajaran dan sebagainya di

dalam tatanda { ….. }. Setiap sifat dan style ditulis dengan syntax khusus seperti contoh tadi

untuk membolehkan ia difahami oleh browser. Untuk maklumat lanjut anda perlu pelajari css

dengan lebih mendalam lagi.

Untuk proses pengenalan dan pembelajarn ini saya hanya kehendaki anda copy dan paste

serta fahami dengan jelas kaedah dan konsep pembinaannya untuk keperluan anda mengurus dan

mengendali laman anda. Jika anda telah mahir nanti boleh cipta satu template baru yang unik untuk

kegunaan sendiri atau dikomersialkan.

Sebelum template ini boleh digunakan, pakejkan semua fail dalam folder tpl_lamanku

dengan cara menjadikannya fail tunggal termampat dengan nama tpl_lamanku.zip. Kemudian

gunakan kemudahan Install/Uninstall pada Extension di Panel Admin Joomla untuk

menginstallasinya seterusnya gunakan sebagai template 'default' bagi frontend anda.

Anda akan mendapati paparan laman anda lebih kurang seperti ini:

Frontend Template Lamanku

105

PENGGUNAAN DAN ASAS CSS.

Saya amat menekankan kepada CSS untuk anda kenali dan fahami fungsinya. Anda mungkin kerap kali

melihat CSS digunakan dalam persembahan “template” Joomla dan lain-lain halaman HTML/XHTML.

Halaman yang pelbagai gaya dan sangat kompleks hanya berjaya dihasilkan dengan jalinan yang

sempurna antara Bahasa Aturcara Web(PHP) + CSS.

Apakah itu CSS?

CSS adalah merujuk kepada Cascading Style Sheets.

Style boleh diterjemahkan kepada gaya dan sheets pula halaman.

Halaman biasa dipaparkan dalam Style Sheet (Gaya Halaman) sahaja.

Tetapi kadang-kala wujud masalah dalam gaya paparan halaman.

Akibatnya terdapat gaya/style yang gagal bekerja.

External Style Sheet (Gaya Tambahan) dapat mengatasi masalah ini.

Gaya Tambahan Halaman ini disimpan dalam fail yang dikenali CSS.

Maknanya CSS dapat menambahkan gaya halaman web anda mengikut bagaimana yang anda rancangkan dan boleh bekerja dengan sempurna.

Cascade merujuk kepada ‘Multiple Style” atau pelbagai gaya.

Dalam tutorial saya ini saya terjemahkan CSS dalam bahasa melayu sebagai Pelbagai Gaya Halaman. (Penterjemahan ini digunapakai dalam tutorial Sifu Azmi sahaja)

Bagaimana paparan halaman HTML biasa tanpa CSS?

Untuk tutorial ini saya hanya akan menggunakan bahasa HTML untuk memudahkan anda menggunakan

editor teks biasa pada komputer anda untuk mengikut tutorial ini. Saya maklum anda mungkin

mengunakan editor web yang cangih dan komersial seperti Dreamweaver, FrontPage, Style Master atau

GoLive dan sebagainya. Untuk megikut tutorial ini hanya perlukan Notepad, EditPlus, atau lain-lain

editor teks yang ‘plain’.

Saya hanya memilih bahasa HTML kerana editor teks anda telah tersedia dengan template teks HTML.

Setiap contoh yang saya berikan jika ada kesilahan penulisan bahasa HTML sila anda semak dan betulkan

semasa kerja amali anda. Ini mungkin berlaku kerana kesilapan menulis atau menyalin kembali di pihak

kami.

106

Sebagai contoh pertama anda tulis aturcara HTML mudah seperti ini dan lihat hasilnya.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> Halaman HTML dengan CSS </TITLE>

</HEAD>

<BODY>

<!-- Menu navigasi halaman ini -->

<ul class="navbar">

<li><a href="index.html">Utama</a>

<li><a href="artikel.html">Artikel</a>

<li><a href="tutorial.html">Tutorialku</a>

<li><a href="links.html">Pautan</a>

</ul>

<!-- Isi utama -->

<h1>Halaman ini menggunakan CSS untuk memaparkan gaya menarik</h1>

<p>Salam kunjungan untuk anda dan lihatkan gaya halaman ini!

<p>Halaman ini tidak memaparkan imej, cuma memaparkan gaya persembahan CSS.

Menu di sisi kiri sebenarnya tidak memaut mana-mana halaman, demo je…

107

<p>Tiada maklumat menarik yang dipersembahkan, ini hanya untuk demo sahaja.

<!-- Akhiri dengan maklumat tarikh dan penulis jika perlu! -->

<address>Fail ditulis pada 10/05/2008<br>

oleh Sifu Azmi Sulaiman.</address>

</BODY>

</HTML>

Salin semula semua aturcara HTML di atas menggunakan editor anda. Atau salin secara ‘copy’ dan

‘paste’ dari dokumen ini ke editor anda.

Jika anda masih asing dengan tata tanda Tag HTML seperti <html> dan </html> atau <head> dan

</head> atau <body> dan </body> atau <h1> dan </h1> atau <p> atau

<!-- dan --> dan sebagainya sila rujuk tutorial HTML saya atau tutorial lain di halaman lain. Contohnya

halaman ini: http://www.w3.org/MarkUp/Guide/

Dengan menyalin semula aturcara HTML di atas, anda akan dapat paparan seperti ini:

108

Apakah pandangan yang boleh anda beri dengan melihat paparan di atas. Adakah halaman ini menarik,

berwarna-warni, susun-atur yang sistematik, pelbagai sais tulisan dan bentuk serta lain-lain elemen

persembahan gaya yang istimewa.

Jawapan anda mungkin halaman ini ‘plain’ atau kosong dan hambar. Kerana itulah kini kita akan

masukkan CSS untuk menokok tambah dan menetapkan gaya paparan halaman yang sama tetapi

dengan citaras menarik hasil janaan CSS.

Pastikan anda simpan(save) aturcara HTML tersebut dengan nama yang sesuai dalam folder pilihan

anda.

Kini kita terus kepada kerja menetapan gaya CSS pertama iaitu menambahkan warna kepada tulisan dan

latar belakangnya.

109

Bagaimana menggunakan CSS untuk mengayakan persembahan HTML?

Ada dua cara menulis CSS, iaitu:

i. Ditulis terus pada halaman yang sama dengan HTML. ii. Ditulis berasingan di halaman lain dari HTML yang digunakan untuk paparan.

Jika anda menggunakan cara penulisan pertama, bermakna CSS yang dicipta hanya akan mengayakan

halaman HTML tersebut sahaja.

Sebaliknya jika anda menggunakan cara yang kedua, CSS yang ditulis berasingan boleh digunakan untuk

menggunakan banyak halaman HTML. Mungkin satu CSS untuk 10 halaman HTML yang anda cipta.

Buat masa ini saya mulakan dahulu dengan menulis CSS pada halaman tadi untuk digunakan oleh satu

halaman sahaja.

Sekarang anda tulis seperti ini. (Tambahkan terus ke dalam aturcara HLTM tadi dengan menggunakan

editor yang sama)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> Halaman HTML dengan CSS </TITLE>

<style type="text/css">

body {

color: Green;

background-color: #FFD700 }

110

</style>

</HEAD>

<BODY>

<!-- Menu navigasi halaman ini -->

*dan seterusnya aturcara HTML seperti tadi ….. +

Kod CSS yang anda tulis mestilah di dalam kawasan yang tidak dipaparkan kepada umum iaitu dalam

kawasan <HEAD> ke </HEAD> sahaja.

Lihat CSS di atas yang anda selitkan pada aturcara tadi bermula dari <style type… >

Hingga </style>

Anda boleh ubahsuai citarasa saya dengan kehendak anda, untuk tulisan adna tetapkan warna pilihan

anda dengan menulis nama warna tersebut contohnya ‘Green’ , ‘Blue’, ‘DeepSkyBlue’ dan sebagainya.

Untuk warna latar belakang pula tuliskan kod warna yang dikehendaki. Untuk rujukan warna-warna ini

sila lihat di:

http://www.w3schools.com/HTML/html_colornames.asp

Untuk memudahkan rujukan anda sila simpan (save) dengan nama berlainan dari pertama tadi.

Sekarang gunakan browser internet anda, lungsurkan fail HTML kedua ini dan paparannya adalah seperti

berikut:

111

Lihat hasil janaan aturcara HTML + CSS yang anda tulis tadi. Telah berubah gaya persembahan ‘plain’

tadi kepada yang berwarna-warna. Jika anda tambahkan lagi pelbagai kod CSS akan dipaparkanlah

pelbagai gaya paparan bagi halaman HTML ini.

Sekarang anda selitkan lagi beberapa kod CSS seperti dalam kekotak di bawah pada aturcara HTML anda

tadi dan lihat hasilnya.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> Halaman HTML dengan CSS </TITLE>

<style type="text/css">

112

body {

font-family: Georgia, "Times New Roman",

Times, serif;

color: purple;

background-color: #d8da3d }

h1 {

font-family: Helvetica, Geneva, Arial,

SunSans-Regular, sans-serif }

</style>

</HEAD>

[dan seterusnya…..]

Kini apa yang anda sedang tuliskan dalam kod CSS adalah arahan untuk mengayakan persembahan

tulisan mengikut jenis yang ditetapkan iaitu sama ada ‘Times New Roman’, ‘Arial’ dan sebagainya.

Pada CSS itu juga ditetapkan teks permulaan (Tajuk) supaya bersais besar dengan arahan h1.

Sekarang simpan (save) aturcara HTML ini dengan nama baru untuk memudahkan rujukan anda

kemudian. Kemudian gunakan internet browser untuk melungsurkannya, paparan yang anda perolehi

adalah seperti berikut:

113

Lihatlah teks yang awal bersais besar (h1) dan jenis tulisan berbeza dengan tulisan kecil adalah berjenis

‘Times Nes Roman’.

Jika anda lihat menu-menu navigasi masih lagi diletakkan dibahagian atas. Sekarang dengan

menggunakan CSS kita ubah letak menu navigasi tersebut ke sisi kiri pada paparan halaman tersebut.

Dengan menggunakan editor teks anda tadi, selitkan teks seperti yang ditunjukkan dalam kekotak

aturcara berikut:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> Halaman HTML dengan CSS </TITLE>

114

<style type="text/css">

body {

padding-left: 11em;

font-family: Georgia, "Times New Roman",

Times, serif;

color: Green;

background-color: #FFD700 }

ul.navbar {

position: absolute;

top: 2em;

left: 1em;

width: 9em }

h1 {

font-family: Helvetica, Geneva, Arial,

SunSans-Regular, sans-serif }

</style>

</HEAD>

* dan seterusnya……+

Kod CSS adalah yang berwarna merah bermula dari <style….> hinga ke </style> di mana teks kod

berwarna biru adalah kod CSS baru yang diselitkan untuk menetapkan susun-atur menu navigasi

sebelum ini tadi di susun pada sisi kiri. Lihat arahan CSS ‘padding-left…’ dan ‘ul.navbar , position:

absolute …’ rujuk kekotak di atas.

115

‘positon: absolute’ adalah arahan menetapkan ‘ul’ diletakkan terpisah dari teks utama yang sebelum ini

dipaparkan sebaris. ‘left’ dan ‘top’ juga menentukan bagaimana menu navigasi itu dipersembahkan iaitu

‘top: 2em’ bermakna 2 kali ukuran sais font yang digunakan sekarang iaitu jarak dikira dari atas dan 1

ukuran sais font jarak dari kiri ‘left: 1em’.

Unit ‘em’ adalah menetapan sais yang digunakan dalam penulisan CSS. Ukuran ‘em’ menentukan sais

jarak contohnya, jika font yang anda pakai berukuran 12 point, ‘2em’ akan menetapkan jarak

selangan/langkauan seluas 24 point.

Walau bagaimanapun mungkin ketika paparan persembahan anda dijalankan oleh browser tertentu, ada

kemungkinan luas jarak dan sais font yang dipersembahkan tidak seperti yang anda tetapkan ini kerana

sesetengah pelungsur internet boleh menetapkan sais font dan ruang yang dipaparkan secara peratusan

(%) yang dipilih oleh pengguna pada menu khas yang disediakan.

Pastikan anda simpan (save) kod HTML dan CSS di atas dengan nama lain. Kemudian lungsurkan fail

hyperteks tersebut dengan browser internet anda. Pastinya paparan yang akan anda perolehi adalah

seperti berikut:

116

Adakah anda sudah berpuas hati dengan corak dan susun-atur persembahan seperti di atas. Ini baru

sedikit, jika anda sudah mahir dan mengetahui banyak arahan dan kod CSS, anda boleh pelbagaikan lagi

gaya persembahan halaman anda itu.

Jika anda perhatikan betul-betul menu navigasi yang dipersembahkan masih kurang menarik kerana

hanya dalam bentuk baris-baris teks sahaja. Sekarang dengan menggunakan kod arahan kerja CSS,

selitkan beberapa arahan baru seperti yang ditunjukan dalam kekotak arahan di bawah.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> Halaman HTML dengan CSS </TITLE>

<style type="text/css">

body {

padding-left: 11em;

font-family: Georgia, "Times New Roman",

Times, serif;

color: Green;

background-color: #FFD700 }

ul.navbar {

list-style-type: none;

padding: 0;

margin: 0;

position: absolute;

117

top: 2em;

left: 1em;

width: 9em }

h1 {

font-family: Helvetica, Geneva, Arial,

SunSans-Regular, sans-serif }

ul.navbar li {

background: white;

margin: 0.5em 0;

padding: 0.3em;

border-right: 1em solid black }

ul.navbar a {

text-decoration: none }

a:link {

color: blue }

a:visited {

color: purple }

</style>

</HEAD>

* dan seterusnya…+

118

Dengan penambahan kod CSS di atas anda dapat paparan yang lebih menarik di mana menu-menu anda

sudah dipersembahkan dalam bentuk kotak-kotak menu. Paparan tersebut adalah seperti di bawah ini:

Sekarang dengan menggunakan beberapa arahan CSS, kita binakan satu garisan untuk memisahkan teks

utama dengan teks kaki. Teks kaki yang memaparkan tarikh fail ditulis dan nama penulis akan dipisahkan

oleh satu garisan herizontal. Untuk tujuan itu lihat dan salin kod-kod di dalam kotak di bawah:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> Halaman HTML dengan CSS </TITLE>

<style type="text/css">

body {

119

padding-left: 11em;

font-family: Georgia, "Times New Roman",

Times, serif;

color: Green;

background-color: #FFD700 }

ul.navbar {

list-style-type: none;

padding: 0;

margin: 0;

position: absolute;

top: 2em;

left: 1em;

width: 9em }

h1 {

font-family: Helvetica, Geneva, Arial,

SunSans-Regular, sans-serif }

ul.navbar li {

background: white;

margin: 0.5em 0;

padding: 0.3em;

border-right: 1em solid black }

ul.navbar a {

text-decoration: none }

a:link {

color: blue }

120

a:visited {

color: purple }

address {

margin-top: 1em;

padding-top: 1em;

border-top: thin solid }

</style>

</HEAD>

* dan seterusnya… +

Kod CSS berwarna biru menetapkan satu garisan harizontal dibina bagi memisahkan teks utama di atas

dengan teks kaki di bahagian bawah. Garisan herizontal yang dibina boleh ditetapkan bentuknya

perlbagai gaya sama ada ‘solid’, ‘dotted’, ‘dashed’, ‘double’, ‘groove’ dan sebagainya. Paparan pada

browser internet adalah seperti berikut, jika anda menetapkan garisan herizontal tersebut sebagai

‘solid’:

Paparan berikutnya adalah jika anda menetapkan garisan herizontal tersebut sebagai ‘dotted’ :

121

Sepanjang penerangan dan tutorial yang ditunjukkan tadi, aturcara HTML dan CSS ditulis bersama dalam

halaman yang sama. Katakan anda perlu lagi membina beberapa halaman HTML yang baru. Bagaimana

jika setiap halaman tersebut anda mahukan gaya paparan dan persembahan yang sama agar seragam.

Anda mungkin memilih untuk menyalin sama setiap halaman HTML anda yang baru dengan arahan CSS

seperti tadi.

Tetapi cara itu tidak tepat dan kurang cekap. Sekarang saya tunjukkan bagaimana kita menggunakan

halaman yang berasingan.

Langkah pertama untuk tujuan ini ialah buka satu halaman kosong dengan editor teks anda kemudian

salin semua arahan CSS tadi pada halaman kosong tersebut dan kemudian simpan (save) dengan

sambungan fail .css contohnya ‘mystyle.css’. Pada halaman CSS yang berasingan itu salin kod-kod

berikut:

122

body {

padding-left: 11em;

font-family: Georgia, "Times New Roman",

Times, serif;

color: Green;

background-color: #FFD700 }

ul.navbar {

list-style-type: none;

padding: 0;

margin: 0;

position: absolute;

top: 2em;

left: 1em;

width: 9em }

h1 {

font-family: Helvetica, Geneva, Arial,

SunSans-Regular, sans-serif }

ul.navbar li {

background: white;

margin: 0.5em 0;

padding: 0.3em;

border-right: 1em solid black }

ul.navbar a {

text-decoration: none }

123

a:link {

color: blue }

a:visited {

color: purple }

address {

margin-top: 1em;

padding-top: 1em;

border-top: thin dotted }

Pastikan anda simpan fail CSS tersebut sama direktori/folder dengan fail HTML yang anda tulis tadi.

Sekarang pada fail halaman HTML anda tadi padam semua arahan CSS dan gantikan dengan penetapan

berikut sahaja:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> Halaman HTML dengan CSS </TITLE>

<link rel="stylesheet" href="mystyle.css">

</HEAD>

<BODY>

<!-- Menu navigasi halaman ini -->

<ul class="navbar">

124

<li><a href="index.html">Utama</a>

<li><a href="artikel.html">Artikel</a>

<li><a href="tutorial.html">Tutorialku</a>

<li><a href="links.html">Pautan</a>

</ul>

<!-- Isi utama -->

<h1>Halaman ini menggunakan CSS untuk memaparkan gaya menarik</h1>

<p>Salam kunjungan untuk anda dan lihatkan gaya halaman ini!

<p>Halaman ini tidak memaparkan imej, cuma memaparkan gaya persembahan CSS.

Menu di sisi kiri sebenarnya tidak memaut mana-mana halaman, demo je…

<p>Tiada maklumat menarik yang dipersembahkan, ini hanya untuk demo sahaja.

<!-- Akhiri dengan maklumat tarikh dan penulis jika perlu! -->

<address>Fail ditulis pada 10/05/2008<br>

oleh Sifu Azmi Sulaiman.</address>

</BODY>

</HTML>

125

Maknanya, semua arahan CSS dari <style..> hingga ke </style> anda padam dan gantikan dengan arahan

pautan yang memanggil segala arahan CSS dari fail ‘mystyle.css’ menerusi baris arahan : <link

rel="stylesheet" href="mystyle.css">

Untuk rujukan anda kemudian, simpan (save) fail HTML baru ini dengan nama berbeza. Sekarang

menggunakan browser internet anda, lihat paparan yang dihasilkan.

Adakah masih sama seperti sebelum ini.

Lihatlah paparan halaman HTML anda, masih sama.

Cuba anda bina beberapa halaman lain dengan memasukkan arahan

<link rel="stylesheet" href="mystyle.css">

pada setiap halaman baru anda di ruagan antara <HEAD> dengan </HEAD>.

Anda boleh tambah lagi pengetahuan anda tentang CSS ini dengan menambahkan bacaan dan rujukan

anda. Jika anda berminat untuk mendalami lagi pengalaman dan pengetahuan anda tentang CSS saya

cadangkan beberapa rujukan tambahan.

Semoga dengan penjelasan di atas berkaitn CSS, anda boleh memahami baris-baris syntax CSS pada

template Joomla! anda selepas ini.

126

Backup & Restore Joomla!

Sekarang anda telah sempurna menyiapkan laman web anda di dalam webserver local yang dipasang

dan hidup di dalam persekitaran webserver tetapi hanya di dalam komputer peribadi anda. Untuk

membolehkan pengguna luar mengakses laman web anda, anda perlu letakkan sistem Joomla! dan

pangkalan data yang mengandungi semua maklumat dan informasi web anda ke dalam hosting web.

Kemudian anda perlu mempunyai satu alamat URL atau DOMAIN untuk membantu pengguna melayari

laman web Joomla! anda. Sebelum anda boleh berpindah ke hosting web anda perlu BACKUP dahulu

Joomla! dan database anda dari local webserver anda kemudian RESTORE kedua-duanya di dalam

hosting yang bakal anda gunakan.

Backup/Restore Joomla

1. Local Webserver

(a) Backup Joomla!

Sebelum anda buat salinan (backup) beberapa perkara perlu dilakukan.

Masuk ke dalam root webserver pilih folder /joomla;

Root Webserver - Fail & Folder Dalam Folder Joomla

127

Pilih fail configuration.php kemudian edit menggunakan editor teks anda

(Notepad2/Edit Plus/WordPad). Kemudian padam dan tukar beberapa perkara pada

fail tersebut dengan setting baru mengikut hosting yang akan anda gunakan;

Configuration.php - local webserver

Tiga perkara yang perlu anda tukar dari maklumat webserver local anda dengan

maklumat baru mengikut setting hosting anda.

Apabila anda tukar setting baru mungkin berbentuk seperti ini:

1

2

3

128

Configuration.php – Hosting webserver

Pastikan semua fail yang akan gunakan lengkap dan berada dalam root yang betul. Fail

configuration.php juga telah diedit seperti contoh tadi maka anda sudah boleh

membuat salinan (backup) untuk dipindahkan ke hosting server.

Terdapat 2 kaedah salinan (backup) iaitu:

i- Pertama: salinan terus folder yang mengandungi fail dan folder joomla serta fail

configuration.php yang telah diedit tadi. Boleh namakan salinan dengan nama

lain untuk mengelakkan tertukar dengan joomla asal yang tidak diubah fail

configurationnya.

ii- Kedua: menukar fail dan folder normal anda kepada bentuk termampat (.zip)

menggunakan aplikasi mampatan seperti Winzip. Pastikan folder joomla yang

anda zip adalah folder yang telah diedit fail configurationnya.

Seterusnya backup pula database Joomla! yang anda gunakan di webserver local.

(b) Backup Database.

Untuk menyalin data fail dari pangkalan data (database) MySQL yang hidup dalam

webserver local anda, gunakan antaramuka yang dikenali sebagai PHPMyAdmin.

Kebiasaannya untuk membuka PHPMyAdmin ini URL yang boleh anda gunakan adalah

seperti ini: http://localhost:8080/phpmyadmin (jika anda menggunakan MoWes,

XAMPP dan WAMP – tidak perlu ada sambungan port 8080 memadai localhost sahaja).

Terdapat juga webserver local seperti USBWebserver 8 dan MoWes yang menyediakan

pautan ke PHPMyAdmin dari index atau antaramuka peranti webserver local. Jika ada

129

pautan sedemikian anda klik dan pelayar internet akan membuka phpmyadmin dari

webserver local anda. Contoh:

PHPMyAdmin - MoWes

Pada sisi kiri tetingkap PHPMyAdmin akan disenaraikan semua pangkalan data yang

wujud dalam MySQL. Lihat ada database dengan nama ‘joomla (76)’ bermaksud

database itu bernama joomla dengan 76 buah table (jadual data) di dalamnya. Jika anda

pilih database itu (klik nama database tersebut) tetingkap PHPMyAdmin akan

menyenaraikan semua 76 table tersebut, contoh:

Table Data (76) – Bagi database joomla.

Untuk buat salinan data tersebut, pilih semua table (76) :

130

– bilangan ini berbeza jika anda telah menyediakan banyak maklumat serta banyak

installasi extension pada web Joomla! local anda. Kemudian klik pada butang

‘Export’.

Export Data – Pilih semua table (76).

Kemudian semak semua table yang terpilih, cukup atau tidak seterusnya pilih tetapan

format data SQL seperti paparan di bawah:

Format SQL

Export menjadi fail SQL dengan pilihan seperti di atas. Di bawah menunjukkan anda pilih

untuk buat simpanan fail (Save as file) dengan nama pilihan anda (data-local-okt2010).

Seterusnya klik pada butang ‘Go’, lihat contoh di bawah:

131

Menamakan Data Backup

Format nama ini membantu anda mengenal jenis punggutan data dan tarikhnya. Ini

kerana backup data MySQL ini perlu dilakukan berkala tidak sahaaja untuk tujuan

berpindah ke server lain tetapi juga untuk tujuan simpanan. Jika hosting bermasalah

atau server rosak, anda boleh bina dan restore ke laman yang baru menggunakan data

terakhir dan terkini dari simpanan backup anda. Simpan fail backup (data-local-

okt2010.sql) untuk restore ke hosting server dengan PHPMyAdmin CPAnel Hosting.

2. Hosting Server

Setelah anda mempunyai dua sumber backup dari projek web localhost anda iaitu;

i- Joomla folder / fail ‘joomla.zip’

ii- Fail ‘data-local-okt2010.qsl’

Kini anda boleh memindahkan laman web local anda ke hosting server. Cara ini juga boleh

digunakan untuk anda memindahkan laman web anda dari satu webserver local ke

webserver local yang lain, sama ada dalam sebuah komputer yang sama atau ke komputer

yang berlainan.

(a) Restore Joomla!

i- Menggunakan Aplikasi FTP.

Untuk restore Joomla anda ke hosting anda boleh gunakan kemudahan Aplikasi FTP untuk

perpindahan fail/folder dari local PC ke hosting server. Aplikasi FTP boleh memindahkan

folder dan fail yang banyak ke hosting dengan sekali arahan. Pastikan anda telah memasang

aplikasi ftp ke dalam komputer anda terlebih dahulu. Jika menggunakan FireFox memadai

anda mempunyai plugin FireFTP untuk melaksanakan proses ini:

132

Aplikasi FTP – FireFTP FireFox Plugin.

Jika anda menggunakan Aplikasi FTP, anda perlu ada akaun FTP untuk membuka hosting

server iaitu;

i- FTP Host

ii- FTP Username

iii- FTP Password

iv- FTP Port (jika berkaitan)

Aplikasi FTP akan meminta semua perkara di atas sebelum berjaya menyambungkan

komputer peribadi anda dengan hosting server. Jika semua betul sambungan akan

dibuat dan paparan adalah seperti rajah Aplikasi FTP di atas.

Ruangan sebelah kanan adalah faildan folder pada komputer peribadi anda; pastikan

berada dalam lokasi root webserver local anda contoh-

F:\mowes_portable\www\joomla

Ruangan sebelah kanan pula adalah hosting server anda. Pastikan joomla anda akan

diletakkan di dalam lokasi- /public_html

Pilih semua folder dan fail atau pilih terus folder joomla, kemudian klik butang upload

atau anda seret folder joomla dari ruangan kini (PC) dan letak/lepaskan dalam

ruangan kanan (hosting).

133

Upload File ke hosting

Proses memakan masa sedikit tunggu sehingga proses penghantaran berjaya menyalin

100% fail/folder dari PC anda ke hosting. Bila proses berjaya anda akan dapati folder

‘joomla’ telah wujud dan terpapar pada ruangan kanan (hosting) seperti ini;

Aplikasi FTP – Folder joomla telah disalin dalam hosting.

ii- Menggunakan File Manager Cpanel Hosting.

Jika anda ingin menggunakan kemudahan File Manager yang disediakan oleh sistem

CPanel hosting, anda boleh menghantar fail tunggal (joomla.zip) kerana dengan File

Manager anda tidak boleh menghantar fail dan folder yang banyak sekaligus seperti

menggunakan Aplikasi FTP. Maka jika anda telah mampatkan joomla menjadi satu fail

tunggal anda boleh memilih untuk menghantarnya ke hosting server menggunakan

kaedah File Manager ataupun menggunakan Aplikasi FTP sahaja.

Jika memilih untuk menggunakan File Manager, login (masuk) ke Cpanel kawalan

hosting anda menggunakan username dan katalaluan khas. Maklumat ini akan anda

perolehi dari syarikat hosting anda apabila anda mendaftar untuk menyewa ruangan

hosting mereka. Atau dapatkan ID hosting dari pengurus server anda jika organisasi

anda mempunyai pelayan hosting sendiri.

Hidupkan File Manager terus dari Cpanel hosting anda dan dipaparkan seperti di bawah:

134

File Manager – CpanelX Hosting.

Untuk menghantar file ‘joomla.zip’ anda klik pastikan berada dahulu dalam lokasi

/public_html kemudian klik butang ikon ‘Upload’ . Kemudian browse dari

komputer anda fail yang dikehendaki dan proses upload akan dijalankan-

Upload – dengan File Manager

Tunggu hingga 100% proses dijalankan, dengan ini bermakna fail joomla.zip telah

dipindah masuk ke pelayan hosting anda. Sekarang dengan File Manager ‘Extrac’ fail

tersebut supaya fail tunggal itu akan dinyahmampat menjadi fail-fail dan folder-folder

Joomla! yang sama seperti di dalam webserver local anda sebelumnya.

135

Kini proses restore Joomla! anda ke hosting telah berjaya, proses ini lebih pantas dari

menggunakan Aplikasi FTP yang kadang kala putus dan perlu anda ulang semula proses

pemindahan data dari PC ke hosting.

(b) Restore Database.

Untuk melaksanakan proses pemasangan (restore) data MySQL ke pelayan hosting atau

webserver local lain anda perlu menyediakan dahulu satu pangkalan data, username

dan katalaaluannya (password). Proses ini boleh dihasilkan dengan menggunakan

kemudahan pengurusan ‘Database’ pada Cpanel hosting anda.

Database -CPanelX

Untuk menyediakann pangkalan data, username dan password gunakan ‘MySQL

Database’. Pelajari sedikit kaedah menjana database , username dan password ini

menerusi manual Cpanel hosting anda kerana kaedahnya berbeza mengikut versi

Cpanel.

Kemudian salin data dari MySQL local ke MySQL hosting menggunakan ‘phpmyadmin’

pada hosting seperti senarai ikon paparan di atas.

Contoh anda mempunyai maklumat database seperti berikut:

i. Database: edumynet_joomladb1

ii. Username: edumynet_joomdb1

iii. Password: 1qaz2wsx

Gunakan PHPMyAdmin dalam hosting anda dan restore kepada database di atas data

web dari webserver local anda yang telah dibackup tadi.

Pada tetingkap phpmyadmin klik nama database anda ‘edumynet_joomladb1’, dan

phpmyadmin dipaparkan seperti di bawah:

136

PHPMyAdmin – Database ‘_joomladb1’

Sekarang pada database tersebut belum ada sebarang jadual mengandungi data, ini

ditunjukkan oleh nama database ‘edumynet_joomladb(0)’. Untuk restore data dari local

webserver klik pada ‘Import’:

Kemudian cari fail ‘data-local-okt2010.sql’ yang anda backup dari web local anda.

Import – Data backup.

Pilih nama data backup yang ingin anda masukkan ke database hosting kemudian klik

butang ‘Go’.

137

Import Berjaya – database baru menyimpan data web local.

Kini database anda memiliki data yang sama dengan apa yang anda hasilkan dalam

halaman web local anda. Bilangan table (jadual) data juga sama, rujuk paparan di atas.

Kini jika anda layari URL laman online anda, laman yang sama akan diperolehi.

Local Online

PENUTUP:

Untuk membina laman web yang canggih, sistematik dan mudah selenggara, Joomla! adalah

antara pilihan yang tepat. Terdapata banyak laman sokongan di dalam internet yang membantu anda

membangunkan web menggunakan Joomla!. Sebagai admin anda perlu mahir dan cekap serta

memahami konsep dan selok-belok penggunaan CPanel (Panel Kawalan) Admin Joomla!.

Semoga manual ini dan bimbingan dari saya yang anda terima secara kursus formal /

pembacaan dari manual ini, dapat membantu anda menjadi Administrator Joomla! yang cekap dan

mahir. Seterusnya membantu anda menghasilkan sebuah laman web yang cantik, menarik, unik dan

bermaklumat. Selamat mempelajari dan mempraktikkan Joomla!.

Amaran: Pastikan artikel, grafik dan maklumat dari manual ini tidak diulang cetak dan

diperbanyakkan untuk tujuan komersial tanpa izin dan pengetahuan saya (Azmi Sulaiman).

138

Senarai Laman Web Menggunakan Joomla!

Tempatan:

1. http://www.rtm.gov.my (Kementerian)

2. http://www.moe.gov.my/jpnselangor (Pendidikan)

3. http://www.psa.edu.my (Pendidikan)

4. http://www.harakahdaily.net/v2 (Media Alternatif)

5. http://www.umno-online.com/infoumno (Politik)

6. http://www.pas.org.my/v2 (Politik)

7. http://www.suara-keadilan.com/v1 (Politik)

8. http://apps2.moe.gov.my/lpm/ (Lembaga Peperiksaan Malaysia)

9. http://www.motour.gov.my/ (Kem. Pelancongan)

10. http://www.moi.gov.my (Kementerian Penerangan Komunikasi dan Kebudayaan)

11. http://www.mohr.gov.my/ (Kementerian Sumber Manusia)

12. http://www.mot.gov.my/ (Ministry of Transport)

13. http://www.mod.gov.my (Kementerian Pertahanan)

14. http://www.unimas.my/ (Universiti)

15. http://www.upsi.edu.my (Universiti)

16. http://www.uum.edu.my/w10/ (Universiti)

Antarabangsa:

1. http://www.vnoel.com/ (Commerce)

2. http://www.kangainternet.com.au/ (Commerce)

3. http://gsas.harvard.edu/ (education)

4. http://www.ahealthstop.com/ (Online Store)

5. http://www.rockhillarts.org/ (Arts Organization)

6. http://www.ajfc.co.uk/ (sport)

7. http://www.ct40.com/ (Media)

8. http://www.capturenewzealand.co.nz/ (Travel)

9. http://www.freekicktemple.com/ (Sport Related Article)

10. http://www.thefunnycartoon.com/ (Media)

11. http://www.greenmaven.com/ (Eco-resources)

12. http://www.ihop.com/ (Restaurant chain)

13. http://www.laweekly.com/ (Media)

14. http://www.quizilla.com/ (Social Networking)

15. http://osu.okstate.edu/ (Education)

16. http://www.outdoorphotographer.com/ (Magazine)

17. http://www.playshakespeare.com/ (Cultural)

18. http://www.sensointeriors.co.za/ (Furniture design)

19. http://www.unric.org/ (Government Organization)

20. http://www.urth.tv/ (Media)

Dan banyakkkkkkkkkk lagi.