belajar & praktik joomla15 -manual kursus
DESCRIPTION
Manual untuk kegunaan kursus Joomla!. bimbingan Sifu Azmi Sulaiman. Free untuk yang berminat. Semoga dapat membantu.TRANSCRIPT
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: [email protected] .
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>[email protected]</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.