Belajar & praktik joomla15 -Manual Kursus
Upcoming SlideShare
Loading in...5
×
 

Belajar & praktik joomla15 -Manual Kursus

on

  • 4,490 views

Manual untuk kegunaan kursus Joomla!. bimbingan Sifu Azmi Sulaiman. Free untuk yang berminat. Semoga dapat membantu.

Manual untuk kegunaan kursus Joomla!. bimbingan Sifu Azmi Sulaiman. Free untuk yang berminat. Semoga dapat membantu.

Statistics

Views

Total Views
4,490
Views on SlideShare
4,488
Embed Views
2

Actions

Likes
3
Downloads
1,360
Comments
2

2 Embeds 2

http://www.slashdocs.com 1
http://translate.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Belajar & praktik joomla15 -Manual Kursus Belajar & praktik joomla15 -Manual Kursus Document Transcript

  • Joomla-AdaWeb JOOMLA! Manual Belajar dan Praktikal Bimbingan Azmi Sulaiman Azmi Sulaiman Hakcipta Terpelihara © 2009-2011 1 http://Joomla-AdaWeb.Com & http://lamanKU.my
  • 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 2
  • Silibus Umum JOOMLA 1.5Pendahuluan dan Pengenalan  Web & Web Dinamik  Domain & Hosting  CMS  Joomla! o Sejarah Mambo & JoomlaPengenalan Kepada Webserver  USBWebserver o Pakej Apache, PHP & MySQL o Installasi Joomla!  MoWes Webserver o Installasi MoWes o Penggunaan & SettingPanel Kawalan Administrator  Pengenalan & Login  Halaman Utama  Menu-menu kawalan  Ikon-ikon Manager Utama  Tools Panel InfoMembina 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 ItemRekabentuk 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 3
  • o Template  Modifikasi grafik & persembahan  Modifikasi HTML & CSSRekabentuk & 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  CSSBackup & 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 webTamat dan Penilaian 4
  • AMARAN: Hak Cipta Terpelihara © 2009 – 2011 Mohd Azmi Sulaiman Tiada sebarang bahagian dan isi kandungan sama ada teks, grafik dan lakaran yang terkandung di dalammanual ini boleh disalin, diulang cetak, diduplikasi secara digital atau elektronik tanpa izin dan pengetahuanpenulis. Kecuali untuk penggunaan dan tujuan latihan yang dijalankan oleh penulis atau melalui penjualan secaradalam talian menerusi laman http://www.joomla-adaweb.com dan http://www.lamanku.my sahaja. 5
  • Pengenalan & Web ServerPENDAHULUAN Salam sejahtera! Dokumen ini adalah hasil penulisan saya (Mohd Azmi Sulaiman) yangmerupakan seorang pendidik dan jurulatih dalam bidang web CMS khususnya Joomla!. Sebagaiseorang pendidik saya lebih selesa dikenali dan dipanggil dengan gelaran cikgu atau sifu. Antarapanggilan yang biasa diberikan kepada saya adalah Sifu Azmi atau Cikgu Azmi. Pengalaman dalam bidang pendidikan telah melebihi 15 tahun dan sebagai jurulatihMambo/Joomla telah lebih 9 tahun. Terlibat dengan web CMS sejak tahun 2002 bermula denganPHPNuke, Mambo dan phpBB. Selepas tahun 2005, akibat berlaku perpecahan dalam versi Mamboseterusnya melahirkan Joomla! 1.0. Sejak itu hingga kini saya banyak menghasilkan tutorial, manualdan panduan pengguna berbentuk teks seperti ini untuk CMS Joomla. Kebanyakan artikel penulisandan 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 danmendalam khusus kepada pengguna yang telah sedia dan berpengalaman menggunakan Joomla!.Pengguna dianggap telah faham dan mahir dalam selok-belok pengendalian Joomla secaramenyeluruh. Maka kini saya tambahkan lagi kemahiran dan pengetahuan anda dalam menguasaisepenuhnya CMS ini. Semoga penulisan kali ini dapat membantu menjadikan anda seorang admin Joomla yanglebih mahir, kreatif dan boleh menghasilkan produk baru kepada Joomla!. Tidak sahaja menjadipengguna tetapi juga menjadi penyumbang kepada penghasilan produk baru sama ada untukkegunaan sendiri, perkongsian atau komersial. Selamat maju jaya dalam mempelajari Joomla!.Sifu Azmi Sulaimanhttp://www.lamanku.my & http://joomla-adaweb.com 6
  • PENGENALAN ASASPengenalan 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. 7
  • 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 bagimembangunkan sebuah laman web, seperti sebuah perpustakaan yang menyimpan artikel, majalahdan buku-buku. Kandungan yang dimaksudkan meliputi teks, foto/grafik, music, video, dokumenserta apa sahaja bentuk format fail yang difikirkan sesuai bagi menyalurkan maklumat.Pada asasnya perkara terpenting yang perlu ada pada seorang pengendali laman web seperti andaadalah mengetahui serta menguasai semua kemahiran dan skil menguruskan isi kandungan webCMS sahaja bukanya memikirkan bagaimana untuk pembangunan sebuah sistem laman web yangcanggih dan sistematik seperti Joomla. Ringkasnya dengan menggunakan CMS anda hanya 8
  • memfokuskan kerja sebagai pengurus kandungan web sahaja tanpa mengambil tahu tentangpembangunan dan pengaturcaraan membina sebuah sistem web.Tetapi untuk menjadikan web anda unik dan berbeza dengan web lain yang menggunakan Joomlamahu tidak mahu anda perlu juga mengambil tahu dan mempelajari keseluruhan tentang Joomlatermasuk seni bina dan struktur arkitektualnya. Sebagai sebuah aplikasi menggunakan teknologiICT, Joomla mempunyai struktur arkitektualnya yang tersendiri.Menerusi buku ini, saya tulis pendokumentasian dan panduan untuk anda memahami danmempelajari seni bina Joomla 1.5 secara teknikal meliputi kerangka core Joomla dari sudutarkitektual, hubungannya dengan database, juga memahami struktur dan teknikal pembangunanextension seperti component, module, plugin dan template.Tetapi dokumetasi ini tidak akan mengajar anda bagaimana menulis koding PHP, SQL, XHTML danHTML sepenuhnya. Saya hanya sertakan contoh dan panduan tentangnya. Kemahiran tersebutanda perlu pelajari sendiri dan saya beranggapan anda telah sedia mahir tentang penulisan kodingtersebut atau setidak-tidaknya boleh memodifikasikannya dengan pengetahuan sedia ada anda.Semoga dengan sedikit penjelasan dan panduan menerusi tulisan saya ini, diharapkanpembaca/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 yangdipanggil Hypertext Preprocessor atau ringkasnya PHP. Joomla! ialah sebuah Sistem Pengurusan Kandungan Sumber Terbuka yang diedarkan secarapercuma. Ia ditulis dalam bahasa pengaturcaraan PHP untuk menerbitkan kandungan ke laman web danintranet 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. 9
  • Nama "Joomla" diambil daripada perkataan Swahili iaitu jumla yang bermaksud "mari bersama-sama"atau "secara keseluruhannya". Ia dipilih bagi menunjukkan komitmen pasukan pembangunan dankomuniti projek berkenaan. Keluaran pertama Joomla! (Joomla! 1.0.0) diumumkan pada 16 September2005. Ini adalah keluaran penjenamaan semula Mambo 4.5.2.3 digabungkan dengan pembaikankeselamatan serta pepijat komputer. Pasukan pembangunan asas menyatakan bahawa Joomla! 1.5adalah kod yang ditulis semula dengan dibinaan menggunakan bahasa pengaturcaraan PHP 5.Joomla! mula wujud apabila terjadinya kontroversi antara pasukan pembangunan perisian daripadaversi Mambo dengan pemodal iaitu Miro Corporation dari Australia, yang juga pemegang hak ciptaMambo pada masa itu. Kedua-dua kumpulan berpisah pada 17 Ogos 2005. Miro Corporationmenubuhkan sebuah yayasan dengan tujuan untuk menaja projek itu dan melindunginya daripadatindakan undang-undang. Pasukan pembangunan mendakwa bahawa banyak struktur yayasanberkenaan melanggari perjanjian yang dibuat oleh Jawatankuasa Mambo yang dilantik. Mereka jugamendakwa kurangnya perbincangan dengan pemegang saham utama dan melanggari nilai-nilai asasSumber Terbuka.Pasukan pembangunan mencipta sebuah laman web yang dipanggil OpenSourceMatters untukmengedarkan maklumat kepada para pengguna, pemaju, pereka web dan komuniti secara amnya. Ketuaprojek pada waktu itu, Andrew Eddie, juga dikenali sebagai "MasterChief," menulis sepucuk suratterbuka kepada komuniti, yang mucul di papan pemberitahuan di forum awam di mamboserver.com.Menjelang keesokkan harinya, 1000 orang telah menyertai laman forum opensourcematters.org dengankebanyakan mesej menunjukkan perkataan-perkataan semangat dan galakan kepada PasukanPembangunan, salah seorang diantaranya adalah saya yang menulis manual ini. Laman web berkenaanmenerima komen dan artikel berita berhubung peristiwa berkenaan di newsforge.com, eweek.com, andZDnet.com. CEO Miro, Peter Lamont, memberi respon awam di dalam artikel bertajuk KontroversiSumber 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 dantuduhan tentang kesilapan yang dilakukan oleh Miro dan Yayasan Mambo mula menjadi hangat.Dalam masa dua minggu selepas pengumuman Eddie, pasukan-pasukan mula disusun semula dankomuniti ini mula tumbuh. Pada 1 September 2005 nama baru diumumkan dengan sambutan berbezaoleh 3000+ penyokong setia Pasukan Pembangunan. Sejak itu Joomla! mula dipopularkan dandikembangkan sehingga ke hari ini. 10
  • Joomla! dilindungi di bawah Lesen Dokumentasi Bebas GNU, dimana pengguna bebas membuat salinansemula, duplikasi, penerbitan dan pengubahsuaian dan salinan baru harus dibebaskan juga secaraterbuka di bawh lesen yang sama dan dikongsi bersama secara percuma.PENGENALAN KEPADA WEBSERVER Aplikasi PHP seperti Joomla ini perlu dipasang (hidup) dalam persekitaran webserver yangmenyokongnya. Untuk menghasilkan persekitaran webserver kita perlu pakej yang mengandungigabungan 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 untukwindows 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 11
  • Serta aplikasi antaramuka MySQL iaitu PHPMyAdmin 3.3.1rc1 yang boleh membantu andamenyelenggara 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 aplikasigabungan antara Apache, MySQL, PHP dan PHPMyAdmin. Anda boleh buka folder dan lihatkandungannya. 12
  • 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 sepertiini:Tetingkap ini menunjukkan Apache dan MySQL telah dihidupkan dengan sempurna melaluitanda pada tetingkap tersebut. Jika ia gagal berfungsi dengan baik ikon tersebut akanditandakan sebagai bermakna ia tidak berfungsi dan bekerja dengan sempurna.Anda juga diberikan butang kemudahan untuk masuk ke “root” direktori iaitu tempatmeletakkan laman web anda nanti, butang ke “Localhost” iaitu untuk melancarkan pelayar webanda dan butang untuk melancarkan antaramuka “PHPMyAdmin” serta butang online ke lamanweb 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”. 13
  • 2. Memasang Joomla! ke dalam USBWebserver.Terdapat banyak versi Joomla! bermula dari Joomla 1.0 hingga yang digunakan sekarang iaituJoomla! 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 sebagailaman 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 prosessemasa memasukkan USBWebserver ke USBdrive anda sebelum ini. Pakej Joomla! yangdinyahmampat ini harus diletakkan di dalam root. Jika anda buka folder USBWebserver andaakan 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:  pilihfolder USBWebserver  pilih folder “root” cipta folder baru “joomla” seterusnya laksanakanproses 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 folderCatatan: Bilangan berbeza jika anda mengguna pakej Joomla! versi yang berbeza.Kini anda boleh meneruskan untuk proses installasi laman web anda. 14
  • Proses Installasi Joomla Proses installasi ini anda boleh gunakan di semua webserver sama ada local atau online. Kaedahdan langkah installasinya adalah sama tertakluk kepad versi yang anda gunakan. Jika anda menggunakan USBWebserver, semua fail dan folder aplikasi Joomla! 1.5 telah tersediadi dalam E:/../root/joomla. Anda sudah boleh mulakan menginstall laman web anda. Anda bolehlancarkan pelayar web anda (web browser) secara manual atau anda gunakan butang “localhost” padatetingkap USBWebserver anda.Semasa anda melancarkan “localhost” pada pelayar internet anda akan dipaparkan halaman index bagiUSBWebserver seperti ini:Ini kerana URL yang dilaksanakan adalah http://localhost:8080/ untuk melancarkan laman web Joomlaanda bagi memulakan proses installasi tuliskan alamat URL menjadi seperti inihttp://localhost:8080/joomla di mana ‘/joomla’ akan memanggil folder aplikasi Joomla! dari direktoriroot yang anda nyahmampat tadi. 15
  • Jika anda gunakan URL http://localhost:8080/joomla tetingkap pelayar web anda akan membukaaplikasi 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 aplikasiJoomla akan meminta anda membuat installasi bagi SEBUAH laman web baru menggunakan CMSJoomla. Terdapat 7 langkah installasi bermula dengan langkah 1 untuk anda memilih bahasa yang akananda gunakan dalam proses installasi. Oleh kerana tiad kemudahan bahasa melayu anda boleh pilihbahasa lain contohnya bahasa English(US). Sesudah anda menetapkan bahasa pilihan anda tersebut, teruskan proses installasi denganbutang “Next” di sisi kanan atas. Tetingkap akan memaparkan proses seterusnya dalam langkah ke 2. 16
  • Langkah 2:Penerangan: Dalam langkah ke 2 anda akan dipaparkn dengan maklumat berkaitan kemudahan sokongan dansetting pada system hosting yang anda gunakan. Perkar ini sangat berguna apabila anda melangganhosting internet sebenar nanti untuk anda mengetahui kualiti dan kekuatan server hosting yang andabayar dan sewa itu. Anda mungkin tidak mengetahui sepenuhnya keperluan sebenar yang dikehendaki oleh aplikasiJoomla, 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 bekerjaseperti kemudahan aplikasi yang menyokong kod PHP, Zlib, XML, MySQL dan lainyer. Jika tiada aplikasiini laman web anda tidak akan bekerja dan boleh digunakan. Proses installasi akn berhenti jika dalamkotak pertama ini ada yang bertanda “No”. Begitu juga dengan kotak kedua, senari menunjukkan arhan kerja PHP untuk memberikanJoomla keselesaan untuk bekerja sebagai laman web yang sempurna. Semak antara “Recommended”dan “Actual”. Pastikan mengikut seperti yang dicadangkan dalam “Recommended”. Tetapi aplikasiJoomla masih boleh diinstall walaupun ada tanda merah “On” dipaparkan. Kerana ad sesetengahcadangan boleh diatasi secara manual dan menggunakan penambahan fungsi selepas proses installasinanti. Teruskan ke langkah 3 dengan butang “Next”. 17
  • Langkah 3:Penerangan: Pada langkah ke 3 ini pengguna perlu membac dan memahami perjanjian dan kontrakpenggunaan aplikasi Joomla. Dalam akuan perjanjian ini dinyatakan jenis warranty, sekatan atauhalangan membuat duplikasi, jenis lesen penggunaan dan terma dan syarat penggunaan aplikasi Joomla. Anda tidak perlu risau menggunakan, menyalin dan mengedar aplikasi Joomla kerana iadiisytiharkan sebagai aplikasi sumber terbuka (Open Sources) yang berada di bawah lesen “GNU GeneralPublic License”. Anda boleh menduplikasi aplikasi atau membuat penambahan dan pengurangan padasistem Joomla mengikut keperluan dan kesesuaian yang perlu untuk laman web anda. Pastikan anda tidak lagi menggunakan laman web yang dipublishkan kepada umum tetapidihasilkan dengan menggunakana perisian yang tidak sah (cetak rompak). Ia bukan sahaja salah darisegi moral malah melanggar undang-undang cyber seperti Akta Komunikasi dan Multimedia, AktaHakcipta malah melanggar Undang-undang Negara. 18
  • Langkah 4:Penerangan: Dalam langkah ke 4 ini anda perlu memasukkan maklumat berkaitan dengan Database andaiaitu jenis database (pilih MySQL), nama host bagi database MySQL anda ( biasanya nombor IP ataudomain – untuk proses pembelajaran ini masukkan sebagai “localhost”). Jika anda menggunakan MySQL secara online anda perlu membina dahulu satu database barubeserta dengan satu nam database, satu nama “username” dan satu katalaluan (password). Prosesmembina database dapat dilakukan menggunakan antaramuka MySQL yang dipanggil PHPMyAdmin. Setelah anda mendapat database baru dengan usernam dan passwordnya, lakukan proses inidengan memasukkan semua maklumat tersebut dalam ruangan Username, Password dan DatabaseName. Tetapi untuk proses pembelajaran ini anda masukkan; Username = root , Password = usbw danDatabase Name = joomla_db1 Teruskan proses ke langkah 5 menggunakan butang “Next”. 19
  • Langkah 5:Penerangan: Pada langkah ini anda boleh menetapkan sama ada ingin menggunakan FTP layer iaitu sistemuntuk anda menguruskan fail-fail ke dalam Joomla. Proses ini dapat membantu anda menguruskankemasukan dan pengurusan fail ke dalam sistem Joomla dengan lebih terkawal dan selamat. Jika anda pengguna baru dan tidak mahu terlalu remeh dalam mengendalikan Joomla, sayacadngkan pilih sahaja tidak menggunakan FTP layer ini. Jika anda tidak mahu menggunakan kemudahanini pilih “No” dan teruskan ke langkah seterusnya dengan butang “Next”. Jika berminat dengan kemudahan ini anda pilih “Yes” kemudian masukkan “FTP User” iaituusername bagi akun FTP anda, diikuti dengan katalaluannya (password FTP). Pada FTP Root Path tuliskanlokasi root Joomla anda, contoh jika dalam USB drive – E:/USBWebserver/root/joomla atau jika pathonline masukkan seperti ini - /home/lamankumynet/public_html/joomla Tetapi setiap kali anda ingin buka, memasukkan, edit dan memadh fail, layer akan berfungsi danmeminta kepastian identiti anda. Anda perlu masukkan username dan katalaluan jika salh layer akanmenghalang aktiviti anda. Cadangan saya pilih “No” bagi pengguna baru Joomla bagi melancarkan proses pembelajarandan kerja-kerja membina laman web anda. Teruskan dengan butang “Next” untuk ke langkahseterusnya. 20
  • Langkah 6:Penerangan: Dalam langkah ini anda perlu menetapkan satu konfigurasian tentang laman web andaantaranya, menamakan laman web anda – contoh: Laman Joomla 1.5 – Azmi. Anda juga perlu memasukkan alamat email untuk urusan penerimaan dan pengiriman emailselaku Administrator web. Masukkan alamat email yang sah dan aktif – contoh: azmi@lamanku.my . Seterusnya masukkan kata laluan/ password (rahsiakan) untuk anda masuk ke backend iaitumasuk ke Halaman kawalan web atau Admin Control Panel Site. Untuk tujuan pembelajaran andadigalakkan menggunakan data sample untuk memberikan anda satu laman contoh yang lengkap. Klikpada “Install sample data” dan seterusnya klik butang “Next” untuk ke langkah terakhir. 21
  • Langkah 7:Penerangan: Pada langkah ini anda perlu buat catatan tentang nama “Username” anda dankatalaluan/password yang anda masukkan semasa langkah ke 6 tadi. Ini untuk kegunaan bila berlakumasalah 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”. 22
  • Setelah anda padamkan folder “installation” maka selesailah proses memasang laman web joomla andadan kini ia telah sedia digunakan. Untuk ke halaman hadapan (frond-end) Joomla taipkan URL nyaseperti ini http://localhost:8080/joomla dan paparn seperti di bawah akan anda lihat.Front-end JoomlaPaparan ini adalah berbeza jika admin menggunakan template Joomla yang berbeza untuk lamanwebnya. Jika admin menggunakan template Milkyway, paparan adalah seperti ini. 23
  • Seterusnya anda boleh juga melihat paparan halaman kawalan admin (Cpanel Admin / back-end)dengan URL ini : http://localhost:8080/joomla/administrator dimana anda sambung perkataanadministrator 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 installasiwebserver dan Joomla seperti diterangkan di atas dengan menggunakan Webserver MoWes. MoWesdidatangkan dengan pakej Webserver dan Joomla! sekali dalam satu pakej. 24
  • 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’. 25
  • 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. 26
  • 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. 27
  • 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. 28
  • 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. 29
  • 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. 30
  • 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’. 31
  • 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. 32
  • Bagaimana membuat pilihan?Jika anda ingin menggunakan Joomla! tanpa perlu mengetahui bagaimaana proses installasinya di dalamwebserver, pilihlah MoWes.Jika anda ingin pantas menggunakan laman web Joomla! tanpa kerenak dan proses installasi yangrencam atau anda adalah pengguna baru Joomla, saya cadangkan anda menggunakan MoWes.Walau bagaimanapun kedua-duanya adalah webserver yang ringan (light) di mana libry dan fungsidalam system server local ini adalah sedikit dan terhad. Untuk permulaan adalah sesuai tetapi untukperingkat advance dan lebih tinggi dicadangkan anda menggunakan webserver lain yang lebih besar danlengkap seperti XAMPP atau WAMP. 33
  • Panel Kawalan Joomla!Pengenalan dan Login ke Panel Kawalan Untuk membolehkan anda masuk ke panel kawalan (Control Panel Administrator) anda perlumengetahui Username dan Password untuk laluan ke back-end (belakang pentas) untuk mengendalikansecara konfigurasian dan kawalan ke atas laman web Joomla. Jika anda mempunyai atau mengetahui dua perkara tersebut, sekarang gunakan pelayarinternet anda dan tetapkan alamat URL untuk ke halaman CPanel Admintersebut iaitu. Caranya padaakhir 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 localhostdengan 127.0.0.1 dan terdapat juga webserver yang perlu anda memasukkan nombor port laluancontoh : localhost:8080 dan sebagainya. Pastikan anda gunakan URL yang betul untuk localhost sepertiyang dikehendaki oleh webserver yang anda gunakan. Jika URL anda tepat tetingkap yang memerlukan anda mengisi maklumat username danpassword seperti di bawah akan dipaparkan. Masukkan dua maklumat itu dengan betul dan klik padabutang ‘Login’. Panel Login Administrator Joomla Login Ke Panel Kawalan Admin 34
  • Setelah anda berjayamemasukkan username dan katalaluan yang SAH anda akan dapat aksesterus ke halaman utama Cpanel Admin /Panel Kawalan Admin Joomla. Anda akan perolehi paparantetingkap seperti ini: Halaman Utama Panel Kawalan Joomla!. Anda kenali dan fahami setiap fungsi yang terdapat pada laman utama CPAdmin ini, kerana andaakan lebih banyak bekerja di bahagian ini untuk mengendalikan persembahan dan konfigurasian lamanweb anda. 35
  • 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. 36
  • 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 37
  • 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, Semua nama-nama module menu yang terdapat dalam Resources, Ecample Pages & laman sample. Anda boleh tambah, edit, rename, salin Key Concepts 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. 38
  • 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, Component adalah aplikasi kecil dalaman yang Polls, Search & Web Links 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: Anda boleh juga menambah beberapa lagi component Forum, Download, Gallery, 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. 39
  • 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. 40
  • 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. 41
  • 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 halamanutama. Kebanyakan menu ini merupakan perkara dan pautan kepada perkara-perkara penting dan kerapdiurus dan dikendalikan selaku seorang admin. Anda boleh menggunakan ikon-ikon ini jika tidak mahumemilih menu kerja seperti diterangkan sebelum ini.Contoh ikon menu yang terdapat di halaman utama Cpanel Admin; Ikon Penting / Popular Dalam Kerja Pengendalian Administrator. 42
  • 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. 43
  • 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 maklumatyang saya panggil Tools Panel Info - mengandungi perkara-perkara seperti di bawah:Terdapat 6 pecahan dalam Tools Panel Info;Nama bahagian Kandungan InformasiWelcome 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. 44
  • Membina Kandungan Web & Menu Joomla! adalah sebuah CMS atau Sistem Pengurusan Kandungan, ini bermakna isi kandunganuntuk 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 adalahyang perkara utama yang perlu dimuatkan daan dibangunkan bukannya module, wiget, template atautheme, component dan sebagainya. Pembangunan dan kerja memuatkan isi kandungan ini ada kaedahatau konsepnya. Ciri-ciri dan aturan yang sistematik digunakan di dalam Joomla! bagi tujuanpembangunan 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. 45
  • Konsep isi kandungan dalam Joomla! boleh di jelaskan oleh diagram-diagram di bawah. Maklumat Section Diagram 1Bagi menyalurkan maklumat, perkara utama yang perlu ada adalah section. Section adalah skopbesar mewakili suatu bidang/pecahan utama suatu kumpulan maklumat. Eg: Produk/Perkhidmatan. Maklumat Section Category 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. Maklumat Section Category *Artikel1 *Artikel2 *Artikel3 *…. * Diagram 3 46
  • Setelah wujud section dan category, barulah anda boleh masukkan/tulis artikel sebagaimaklumat 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. Cara Pengunaan Produk A Khasiat dan Testimoni Produk/ Perkhidmatan Penerangan Produk B Produk Kempen Produk C Jualan Section Category Artikel Aliran Konsep Kandungan Joomla!Jika terdapat Category lain, anda perlu cipta category baru untuk mewakili categori keduaseterusnya baru anda boleh tulis artikel dan maklumat berkaitan category tersebut. Tiada hadbilangan artikel ditetapkan untuk sesuatu category. Tetapi setiap section perlu ada sekurang-kurangnya satu category sebelum boleh menulis artikel/maklumat berkaitanperkhidmatan/produk berkaitan. Boleh ada lebih dari satu category untuk satu section. 47
  • 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 48
  • 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 49
  • 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. 50
  • Seperti contoh tadi anda perlu tuliskan nama/tajuk artikel pada ruangan ‘Title’ diikuti dengantajuk unik pada ruangan ‘Alias’. Seterusnya pada section pilih section pilihan anda begitu jugapada 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 Noanda 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 WYSIWYGtersebut. Jika artikel panjang anda boleh pendekkan dengan memilih ‘Read more’, jika artikeldipaparkan pada halaman utama hanya sedikit artikel terpapar, selebihnya akan dipaparkan jikapengguna klik pada butang ‘Read more’.Terdapat juga butang ‘Pagebreak’, kemudahan ini untuk membahagikan halaman kepadabeberapa pecahan, Contoh artikel anda panjang, dengan sekali klik ‘pagebreak’ anda akanmenghasilkan dua halaman untuk satu artikel tersebut. Jika anda gunakan dua kali ‘pagebreak’anda akan menghasilkan tiga halaman untuk satu artikel yang sama. Anda boleh menamakansub-tajuk untuk halaman yang berbeza semasa memilih butang ‘pagebreak’, contoh; Menamakan sub-menu Untuk Artikel Yang PanjangJika anda mahir dan lebih suka menulis menggunaan koding HTML klik pada butang ‘ToggleEditor’. 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. 51
  • Parameter Advanced:Anda boleh pilih penetapan lain untuk artikelanda seperti menyembunyikan (Hide) maklumattersebut, atau memaparkannya (Show) atau lain-lain penetapan seperti yang umum (Global).Parameter Information:Di sini anda tuliskan sedikit penerangan tentangartikel termasuk kata kunci (key), robot dan namapenulis untuk metadata dan memudahkanpencarian oleh enjin carian terhadap artikel andaini. Pastikan anda simpan ‘Save’ sebelummenamatkan proses penulisan ini. 52
  •  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; 53
  • Paparan Module Manager.Lihat pada senarai module baris ke 4 –: module name = MyProduk –: Enable = ini bermaknamodul menu bernama MyProduk masih belum lagi aktif (Enabled). Kemudian lihat kedudukandan susunan/urutannya;Urutannya adalah sebagai modul menu pertama (1) pada lokasi kanan (left) dan akandipaparkan 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 selepasMain Menu, boleh diakses oleh semua level (Public) berada dikedudukan lokasi kanan (Left) dandipaparkan di semua halaman pada web ini (All).Untuk mengaktifkannya (Enabled) - klik sekali pada ikon bertanda dan ia akan bertukarkepada aktif dan ditanda sebegini: . Untuk menyusun urutan menjadi ke 2, tulis urutanmengikut susunan seperti anda kehendaki kemudian klik butang ‘save’ padabarisan Order : selepas anda tulis urutannya dalam bentuknombor-nombor seperti di sebelah kanan ini:Anda boleh ubah juga urutan module-module yang disenaraikan dengan cara lainiaitu dengan cara mengerakkannya turun atau naik menggunakan tata-tanda anakpanah begini: 54
  • Kemudian pilih sama ada turun atau naik, gerakkan module tersebut sehingga ia berada padaaurutan yang anda kehendaki.Kini menu MyProduk telah aktif, berada pada urutan ke-2 di bawah menu Main Menu. Sekarangciptakan sub-menu untuk artikel anda supaya pengguna dapat mengakses artikel yang telahanda hasilkan sebelum ini tadi.Kembali ke menu kerja ‘Menus’ dan anda akan lihat di bawah submenu tersebut ada modulmenu 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 MenusApabila anda klik New, menu item manager akanmembuka tetingkap Menu Item untukmembantu 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. 55
  • 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 Linkkepada 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, bukutetamu dan macam-macam lagi.Menu jenis Wrapper pula membina menu dalam persekitaran tema web anda tetapi boleh dipautkepada URL luar. Kemudahan ini membolehkan seolah-olah laman itu asli dari laman anda walaupunsebenarnya ia adalah halaman URL asing.Selain itu anda boleh juga membina menu berbentuk External Link (pautan luar), menu berbentukSeparator (sisipan) atau berbentuk Alias (iaitu pautan baru untuk menu yang telah sedia ada). 56
  • Rekabentuk Asas Joomla!Dalam merekabentuk web menggunakan Joomla!, seseorang admin perlu kreativiti, inovasi danberpengetahuan tentang grafik dan kod aturcara web. Pengetahuan grafik dan aturcara web tidaksemestinya dikuasai secara mendalam memadai tahu sedikit secara asas untuk tujuan modifikasi danpenghasilan rekabentuk dan keperluan pada web yang dibangunkan, melibatkan beberapa aspekantaranya: a. Templates b. Components c. Modules d. Plugin e. Language Merekabentuk web Joomla! memerlukan kepakaran dan kemahiran visual serta pengetahuanasas dalam pengaturcaraan.Kerana dengan menggunakankan Joomla! anda tidak perlu kemahiran visualdan pengaturcaraan yang tinggi. Memadai anda faham dan boleh menggunakan sedikit kemahirantersebut untuk tujuan memodifikasi, menambah dan mengubahsuai grafik, warna dan aturan paparanbagi laman anda untuk memberikan ia sentuhan dan kelainan yang unik. Dalam merekabentuk dan menghasilkan laman web yang menarik, visual yang unik, kemudahanyang lengkap dan aturan persembahan, kreatif dan inovasi dapat dihasilkan melalui kebolehan adminmengawal, membuat pilihan, dan modifikasi keperluan web Joomla! seperti Templates, Component, 57
  • Module, Plugin dan Language. Lebih menarik lagi jika admin mampu menghasilkan sesuatu yang baruseperti yang diperlukan dalam laman masing-masing.Templates, Component, Module, Plugin dan Language ini dapat memainkan peranan dalam menjadikanlaman web anda kelihatan canggih, lengkap dengan fungsi, keperluan pengguna, serta warna,persembahan, animasi, video atau video yang unik dan menarik. Sebagai admin anda perlumenguasainya satu-persatu dan mampu mengendalikan semua elemen tersebut dengan cekap dantepat. 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 sebagainyaharuslah 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 agensikerajaan. 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. 58
  •  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. 59
  • 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 60
  • 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 61
  • atau pada semua halaman ia akan dipaparkan untuk tatapan pengguna. Setiap module diberikanID khas untuk memudahkan penyusunan datanya di dalam sistem database.Dari masa ke semasa jika perlu anda boleh install module yang baru untuk kegunaan di halamanweb anda. Contohnya, saya ingin masukkan module yang menyatakan tentang topik danperbincangan baru dalam component forum. Saya kene dapatkan pakej module berkaitan darihalaman pembekalnya. Saya donwload pakej termampat tersebut (.zip) dan menyimpannyasementara di komputer saya. Lakukan kerja installasi yang sama seperti installasi template dancomponent tadi iaitu pergi ke menu Extension kemudian klik Install/Uninstall,  cari pakejmodule anda dengan butang Browse,  seterusnya klik butang Upload File & Install. Bilaberjaya mesej berjaya akan dipaparkan.Seterusnya pergi semua ke Extension  Module Manager, dan anda akan lihat nama modulebaru anda install tadi sudah berada dalam senarai Module Manager anda, contoh: Module Manager - Senarai ModuleJika anda perhatikan banyak juga module sedia ada yang tidak enabled. Begitu juga denganmodule yang baru anda install. Lihat pada baris ke-17 ‘Discussions RecentX’ – sekarang tukarkanstatusnya dari tidak aktif kepada aktif (enabled), klik sekali pada ikon dan ikan akanberubah menjadi . Jika anda tidak bersetuju kedudukan module ini dalam senarai posisinya,gerakkan ia supaya berada pada kedudukan yang anda kehendaki. Urutkan secaramenomborkan module atau gerakkan dengan butang anak panah .Akhirnya simpan (save) dan anda lihat paparaan halaman hadapan anda (front-end) dan andaakan lihat dimana module tersebut akan muncul. Ubahsuai jika anda tidak berpuas hati dengankedudukannya.Sama seperti components pastikan anda install sesuatu module hanya jika module tersebutpenting dan berguna di laman web anda. Jika module tersebut tidak sesuai atau sudah tidak 62
  • 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 63
  • ‘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 64
  • 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. 65
  • 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 66
  • 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.comBanyak lagi URL lain yang memberikan anda kemudahan memuat-turun pelbagai baya dan tematemplates khusus untuk Joomla!. Terdapat ratusan laman web yang menyokong dan menggalakkananda untuk menggunakan Joomla! dengan membekalkan template dan extension yang lain. Inikerana 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 kedalam template manager menggunakan kemudahan Install/Uninstall pada menu Extension. PilihExtension  kemudian Install/Uninstall  dan paparan Extension Manager seperti di bawah akandipaparkan.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 adainstallasi berjaya atau tidak. Jika gagal bermakna pakej anda sudah rosak atau tidak sesuai denganversi Joomla! yang digunakan. Jika installasi berjaya mesej akan dipaparkan sebagai: Mesej Berjaya InstallasiExtension Manager ini juga digunakan untuk proses installasi dan uninstallasi untuk elemenextension yang lain termasukkan component, module, plugin dan language. Rujuk pada tabsextension yang ditunjukkan pada rajah ‘Extension Manager’. 67
  • Extension Manager.Apabila installasi berjalan dan berjaya dilaksanakan anda akan semak di Template Manager. Semakadakah template baru ini disenaraikan dalam template manager anda. Untuk memilih danmenggunakannya pada laman ada jadikan template tersebut default sebagaimana yang diterangkansebelum ini tadi.Template yang baik mempunyai kemudahan modifikasi yang lengkap menerusi Template Manager.Untuk memodifikasi sebuah template pada Template Manager pilih nama template anda  klikbutang Edit : Template Manager – Edit Default TemplateContoh template ini mempunyai banyak kemudahan untuk memodifikasinya menggunakanparameter tertentu seperti paparan di berikutnya: 68
  • 2 3 1 Template Editor.Menerusi kemudahan template editor ini anda dengan mudah boleh mengubahsuai beberapaperkara, 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. 69
  • 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 HTMLdan CSS untuk memantapkan kemahiran anda untuk menjadi seorang admin Joomla! yangcekap dan mahir. 70
  • Merekabentuk & Arkitektual Joomla!KERANGKA JOOMLA! & DATABASEKerangka Joomla 1.5 boleh diperjelaskan mengikut arkitektual MVC (Model View Controller) sepertidi bawah. MVC adalah arkitektual kejuruteraan perisian yang diguna dalam pembangunan aplikasiCMS Joomla. Melaluinya pengguna akan memperolehi persembahan maklumat pada strukturLAYOUT. MVC memanipulasi data dalam sistem pangkalan data (MySQL) menerusi strukturCONTROLLER yang berfungsi menyalurkan data dari struktur MODEL ke VIEW. Controllermemanipulasi data mengikut permintaan pengguna. Pada struktur MODEL, ia menentukanbagaimana data akan dimanipulasikan untuk menjadi maklumat termasuk kerja-kerja memasuk,memindah, mengubahsuai atau menghapuskan data di dalam pangkalan data. Data kemudian akandiminta dan diolah di CONTROLLER supaya menjadi maklumat yang berguna kepada pengguna.Maklumat pada LAYOUT akan diproses oleh Web Server dalam bentuk HTTP dan dilaksanakandalam aplikasi pelayar internet pengguna. MVC DIAGRAM I (Sumber: www.joomla.org ) 71
  • Persembahan pada LAYOUT bergantung dan terkawal di bawah component, module, plugin dantemplate yang digunakan. Semuanya dilaksanakan di dalam webserver (Server Site). Apabilasampai ke pelayar internet PC pengguna, maklumat dipaparkan dalam format HTML yang difahamioleh pelayar internet (Client Site). Penyaluran maklumat bertukar format dari Server Site ke ClientSite 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 atauMozilla FireFox atau Opera dan sebagainya. MVC Joomla.Core atau kerangka asas aplikasi Joomla! telah dibangunkan oleh pasukan pembangun CMSdengan menggunakan kejuruteraan aplikasi sebenar. Ini dapat dijelaskan oleh diagram seperti diatas.Melalui kapakaran dan ketelitian pasukan pembangun CMS Joomla, kerangka kerja Joomla! dengansejumlah fail php, folder dan grafik khas telah dicipta dan boleh dipasang ke dalam webserverpengguna untuk menghasilkan laman web masing-masing. 72
  • KERANGKA ASAS JOOMLA - Senarai Fail & Folder Joomla.Senarai Folder Utama:Senarai Fail dalam folder utama: 73
  • Untuk satu pakej Joomla 1.5 (1.5.21) terdapat kira-kira 4,201 fail dan 972 folder. Jumlah iniberbeza jika versi yang anda muat turun berbeza. Apabila anda letakkan di dalam ruangan hostingia akan mengambil kira-kira 28MB ruangan bagi menyimpan semua fail-fail dan folder Joomlakeseluruhannya. Jika anda menggunakan sistem installasi secara talian di dalam server seperti fantasticoanda akan terus memperolehi pakej Joomla dengan semua fail dan folder di atas tadi kecuali folderinstallation. Proses menyimpan dan menginstallasi Joomla saya anggap sudah anda kuasaisepenuhnya termasuk persediaan menyediakan pangkalan data, user dan katalaluan untukdatabase anda. Saya juga beranggapan anda telah biasa dan mampu menguasai penggunaanantaramuka 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 danperlu ada untuk membolehkan Joomla! berfungsi. MVC dan DatabaseDATABASE (MySQL) Pangkalan data atau Database bagi Joomla di kebanyakan local webserver dan hostingadalah MySQL iaitu aplikasi pangkalan data berjenis Sumber Terbuka (Open Source) yang palingpopular buat masa ini. Majoriti webserver dan hosting sekarang menggunakan MySQL versi 5.Contohnya jika anda menggunakan local webserver untuk kegunaan secara luar talian (offline) padakomputer peribadi anda seperti Mowes, WAMP, XAMPP dan sebagainya, mereka menggunakanMySQL 5.1.X dan ke atas. Aplikasi ini boleh dimuat turun secara percuma di http://www.mysql.com dan bolehdipasang secara pakej atau bersendiri bergantung kepada keperluan anda. Apabila andamenggunakan pangkalan data MySQL dalam persekitaran web (web-base) anda bolehmengendalikannya dengan arahan teks SQL secara koding HTML atau secara GUI dengan 74
  • menggunakan PHPMyAdmin. Kebanyakan local webserver dan hosting menggunakan kemudahanGUI dengan PHPMyAdmin. Untuk pembelajaran tahap ini saya menganggap anda telah biasa danmahir menggunakannya. Dengan menggunakan PHPMyAdmin saya cuba jelaskan beberapa perkara khususberkaitan dengan CMS Joomla. Joomla hanyalah kerangka yang memanggil danmempersembahkan maklumat menerusi struktur arkitektual VIEW kepada pengguna yangkeseluruhan datanya disimpan dalam jadual-jadual khusus di dalam pangkalan data. Data-datadalam pangkalan data tidak akan bermakna selagi tidak dimanipulasi oleh CONTROLLER mengikutkehendak pengguna. Kemudian memanggil data dari struktur arkitektual MODEL yang akanmengkemaskini data dan melepaskan data untuk dibekalkan sebagai maklumat kepada VIEWmengikut ketentuan dan pola kawalan pada struktur CONTROLLER. Jadual (Table) Data Menerusi PHPMyAdminRingkasnya CONTROLLER akan menjadi orang tengah yang meminta dan memanggil data dariMODEL kemudian membekalkan data menjadi maklumat kepad VIEW. Ini dijelaskan oleh diagramdi bawah: 75
  • MVC Diagram II (Sumber: http://www.adiipl.com/)Walaupun Joomla menggunakan bahasa PHP tetapi apa yang pengguna perolehi dan dipaparkanpada pelayar internet pengguna adalah persembahan maklumat HTTP dalam format HTML. Inikerana arkitektual MVC (Server Site Applications) dapat menghasilkan maklumat yang dikehendakipengguna di dalam web server. Kemudian web server menukarkan maklumat kepada HTTP dandisalurkan 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 diciptabersama. Di dalam database ini akan dibina beberapa jadual (table) data yang akan menyimpandata mengikut kategori khusus. Secara normal selepas proses installasi Joomla akan diwujudkan 36jadual data: Jadual Data PHPMyAdmin 76
  • Jadual-jadual DataSetiap jadual (table) akan dinamakan mengikut kategori datanya seperti jos_banner,jos_components, jos_content, jos_users dan sebagainya. Kata tanda jos_ dikenali sebagai prefixdatabase akan digunakan untuk menamakan setiap jadual data. Anda boleh juga menggunakankata 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 padasenarai pengguna seperti contoh di bawah. Paparan Jadual Data jos_usersEdit & Update Jadual Data.Anda dapati ada satu sahaja users sekarang iaitu; name=Administrator dengan username=admindan menggunakan email, katalaluan dan butiran lain seperti dipaparkan. Semasa proses installasisaya telah memilih username= admin dan password= admin. Tetapi sistem Joomla telah menukarkatalaluan (encrypted) katalaluan admin menjadi kod encrypt seperti dalam jadual. Jika saya lupakatalaluan asal ini, saya boleh tukar encrypt kod tersebut dengan encrypt kod lain yang saya ketahuiaksara romannya.Contoh saya tukarkan password asal ini dengan cara mengedit jadual tersebut menggunakanbutang edit kemudian mengantikan semua encrypt kod password tersebut dengan kod ini:Encrypt kod baru = e10adc3949ba59abbe56e057f20f883edi mana aksara romannya adalah = 123456. 77
  • Kemudian save untuk mengemaskini perubahan tersebut. Sekarang log masuk dengan username=admin dan password baru = 123456. Beginilah caranya jika administrator suatu hari nanti terlupaakan katalaluannya atau untuk menukar katalaluan user-user anda yang lain.Apa yang anda fahami dari aktiviti dan praktik ini adalah kerangka Joomla adalah kosong hanyakoding PHP untuk menghasilkan satu sistem CMS yang indah, cekap, sistematik dan memenuhikeperluan yang dikehendaki. Tetapi semua maklumat adalah dalam bentuk data yang tersimpandalam pangkalan data di MySQL. Sebarang perubahan atau kerosakan pada kerangka Joomla tidaksedikitpun menghilangkan data web anda. Ini berbeza dengan konsep penulisan laman HTML dimana 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 dansebagainya untuk melihat kandungan di dalam jadual tersebut. Lihat sahaja jangan editsembarangan sehinggalah anda perlu melakukannya dalam tajuk-tajuk seterusnya, kerana takutakan merosakkan data.KONSEP MEREKABENTUK & PEMBANGGUNAN COMPONENT.Satu pendekatan yang unik dalam pembinaan kerangka Joomla seperti yang diterangkan pada tajuksebelum ini adalah konsep model kejuruteraan perisian yang dikenali sebagai MVC (Model ViewController). Model MVC ini jugalah yang digunakan dalam pembangunan component yang akanmembantu Joomla berfungsi dan bekerja dengan lebih sempurna. Dalam tajuk saya cuba terangkankonsep 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 susahsatu persatu secara manual. Kemudian barulah pembangun menggunakan skil dan kemahirannyadalam pengaturcaraan PHP untuk menghasilkan koding bagi membangunan component tersebuthingga siap seperti dikehendaki. 78
  • 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/componentdan satu lagi di /component. Folder dalam lokasi pertama adalah untuk kegunaan dalam panelkawalan (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 ikuti4 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’ 79
  • Dalam ruangan (field) berikan nama (name) sebagai „My Component’, masukkanpada link dan admin_menu_link sebagai „option=com_mycomp’ , pada option isikan„com_mycomp’ , tulis sedikit teks contoh „Manage My Component’ dalam ruanganadmin_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 daniscore. Hanya pada enabled masukkan „1‟. Selepas masukkan semua entry tersebut, klikpada OK. Sekarang jika anda semak menu Component pada panel admin sudah wujud menubaru „My Component‟.Langkah 2: Mencipta folder dan fail backend. Walau bagaimanapun jika anda klik pada submenu My Component di bawah menuComponent pada Panel Kawalan akan dipaparan amaran laman 404 dengan mesej“Component Not Found”. Ini kerana folder dan fail component tersebut untuk laman backendbelum 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 80
  • 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. 81
  • 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, tetapiuntuk menghasilkan component sebenar di bawah model MVC tidak cukup dengan 2 folder dan 2fail seperti diterangkan tadi. Untuk memudahkan anda mencipta folder dan fail-fail berkonsepkanmodel MVC alat/tools diperlukan.b. Tools/Alat Online Membina Folder & Fail Component. Saya memperkenalkan kepada anda tiga URL untuk memudahkan kerja menghasilkan faildan folder bagi satu component baru yang saya namakan sebagai Component Baruku. Folder danfail 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 sepertidinyataka tadi. Menggunakan mana-mana alat di atas anda dengan mudah boleh mencipta folderdan 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 82
  • LANGKAH PERTAMALengkapkan maklumat seperti di atas untuk menyatakan nama dan identity pembangun bagicomponent yang dicipta. LANGKAH KEDUAUntuk menghasilkan folder dan fail frontend. Contoh fail-fail pilihan saya. 83
  • LANGKAH KETIGAUntuk menghasilkan folder dan fail backend. Contoh fail-fail pilihan saya. 84
  • 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 danfolder yang siap sedia dipakejkan dalam format termampat (.zip) kemudian anda install ke webanda. Berikut adalah senarai fail dan folder yang dihasilkan; 85
  • 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 86
  • Setelah anda berjaya install ke Joomla, cuba koding fail backend iaitu :http://localhost/joomla/administrator/components/com_component_baruku/admin.component_baruku.phpdan fail frontend iaitu:http://localhost/joomla/components/com_component_baruku/com_component_baruku.phpdengan koding yang sama untuk fail backend dan frontend semasa melakukan dalam kaedahmembina component secara manual tadi. Untuk fail-fail frontend dan backend yang lain andamemerlukan masa dan pengetahuan yang lebih bagi menghasilkannya. Untuk sampai ke tahap ituanda perlu mahir dan mempunyai skil pengaturcaraan PHP yang tinggi dan mantap. Walaubagaimanapun sedikit sebanyak tunjukajar dan panduan saya ini dapat membantu anda untukmembuat perubahan dan modifikasi kepada component sedia ada untuk disesuaikan dengankehendak dan keperluan web anda nanti.Installasi Component BarukuComponent baru dengan nama Component baruku akan tercipta dalam senarai components dilaman Joomla anda. Begitu jugapada senarai menu item dalam menus anda untuk kemudahanmencipta menu. Menus Items Senarai ComponentsKesimpulan. Melalui dua kaedah ini anda dapat menghasilkan component atau anda kini fahambagaimana 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 pembinaancomponent ini untuk bekalan menghasilkan atau memodifikasi component sedia ada atau yang jenis3rd party untuk di sesuaikan dengan keperluan laman anda. 87
  • KONSEP MEREKABENTUK & PEMBANGGUNAN MODULE. Setelah anda memahami dan berjaya menghasilkan component atau sekurang-kurangnyaanda telah faham bagaimana struktur dan konsep pembinaan component kini saya terangkan pulabagaimana Module di hasilkan. Mengapa perlu dan apa kegunaan module?. Module dihasilkan untuk mempersembahkanmaklumat atu isi kandungan laman anda. Module juga boleh menjalankan fungsi bagi componentserta mempersembahkan item lain seperti grafik, audio, animasi dan video. Module boleh disusunatur dan diletakkan pada template Joomla mengikut kreativiti dan keperluan yang admin rancang. Contoh nama-nama lokasi (position) untuk meletak Module. 88
  • Merekabentuk laman web tidak boleh lari dari penggunaan module. Module dapat diletakkanpada position seperti contoh tadi untuk menghiasi laman web anda. Module mungkinmempersembahkan maklumat mengikut kaedah dan fungsi istimewa yang dimainkan oleh moduleseperti memilih artikel terkini, persembahan artikel bergerak (scroll), sliding, persembahan animasiteks, grafik, dan sebagaainya. Module juga boleh mempersembahkan fungsi component sepertisenarai 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 danfolder diminta untuk anda patuhi, sebaliknya berlaku jika anda ingin menghasilkan module baruciptaan anda. Walaupun ada juga syarat penyediaan folder dan fail, tetapi jauh lebih kecilbilangannya 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 mengikutkemahiran dan skill pengaturcaraaan PHP yang anda kuasai. 89
  • 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. 90
  • Koding Fail helper.phphelper.php digunakan oleh mod.baruku.php sebagai sumber paparannya. Anda perlu kodingfail ini selengkapnya untuk paparan pada frontend seperti yang anda kehendaki. Koding Fail tmpl/default.php 91
  • 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 namamod_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 posisikedudukannya di frontend mengikut template frontend yang anda gunakan.KesimpulanDengan mengikuti langkah-langkah mudah tadi anda Berjaya menghasilkan satu modul baru. Tetapiini hanyalah asas (basic) penciptaan module. Anda boleh pelbagaikan lagi keunikan module andadengan menambah fail kawalan di backend. Tetapi anda perlu mendalami lagi proses penghasilantersebut disamping meningkatkan keupayaan pengaturcaraan anda dalam PHP. 92
  • KONSEP MEREKABENTUK & PEMBANGGUNAN PLUGIN Contoh Plugin Content Plugin adalah extension tambahan yang memainkan satu fungsi besar dan khusus untukmenjadikan laman web anda lebih menarik dan unik. Plugin sangat fleksibel dan memainkanperanan yang besar sama ada di bahagian backend semasa admin pekerja atau berfungsi difrontend dalam mempersembahkan maklumat kepada pengguna. Kenapa dan mengapa perlu plugin?Kadangkala di dalam artikel ingin diselitkan module, atau kadang kala di dalam artikel perludiselitkan kod pemain multimedia dan sebagainya. Maka pada artikel tersebut perlu ada kod arahankerja, sedangkan di situ tidak boleh ditulis kod ini kerana kerangka kerja Joomla! telah di aturkanhanya memainkan artikel. Maka tugasan ini akan dilaksanakan oleh plugin. Untuk menghasilkan satu plugin langkah pembangunannya adalah lebih mudah dan hanyamemerlukan satu fail dengan koding PHP yang sempurna sahaja. Namun untuk membolehkannya diinstall dan bekerja dengan bantuan animasi, butang, grafik dan sebagainya mungkin beberapa faildan folder diperlukan. Namun pada asasnya plugin hanya memerlukan satu fail sahaja yangdinamakan sebagai dirinya. Seperti yang saya katakan walaupun cuma satu fail PHP diperlukan untuk membolehkancintaan anda dipakejkan seterusnya di install ke Joomla satu fail XML diperlukan. Kaedah ini samaseperti semasa membina component dan module sebelum ini di mana fail XML perlu disediakansama 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 MediaPlayer, jadi saya namakan plugin ini sebagai “plg_ympP”. Untuk menghasilkan plugin tersebutmula-mula cipta folder dengan nama plg_ympP kemudian lengkapkan dengan fail-fail berikut: Fail Asas: 1. ympp.php 2. ympp.xml 93
  • 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 sebagaiplugin 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 accessdefined( _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 = "nn<!-- Yahoo Media Player Plugin Plugin (v0.5) startshere -->n"; $plg_copyrights_end = "n<!-- Yahoo Media Player Plugin Plugin (v0.5) ends here -->nn"; $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) { 94
  • $tagcontent = preg_replace("/{.+?}/", "", $match); $tagparams = explode(|,$tagcontent); $tagsource = explode(,,$tagparams[0]); $findAVparams = array( "{AVSOURCE}", "{TITLE}", ); $replaceAVparams = array( $tagsource[0], $tagsource[1], ); if($linkv == 1) {$class = "ympc";} else {$class = "ympch";} $wrapstart = $plg_copyrights_start.<span class=".$class.">; $wrapend = </span>.$plg_copyrights_end; $plg_html =JFilterOutput::ampReplace($wrapstart.str_replace($findAVparams, $replaceAVparams,$tagReplace[$plg_tag]).$wrapend); $row->text =preg_replace("#{".$plg_tag."}".preg_quote($tagcontent)."{/".$plg_tag."}#s", $plg_html ,$row->text); } } }}?> Fail ympp.php<?xml version="1.0" encoding="utf-8"?><install version="1.5" type="plugin" group="content"> <name> Yahoo Media Payer Plugin</name> <author>Andres Vargas</author> <authorEmail>rogant@gmail.com</authorEmail> <authorUrl>www.recursosweb.org</authorUrl> <copyright>Copyright (c) 2006-2009 JoomlaWorks Ltd. All rights reserved.</copyright> <creationDate>30/05/2009</creationDate> <license>http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL</license> <version>0.5</version> <description>Yahoo media palyer for joomla. For documentation:http://recursosweb.org/</description> <params> <param name="afolder" type="text" default="mp3/" size="40" label="Local AudioFolder" description="Local Audio Folder" /> <param name="linkv" type="radio" default="1" label="Link Visible" description="LinkVisible"> <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 95
  • /* 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 accessdefined( _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.phpKemudian pakejkan plugin ini dengan memampatkan ke empat-empat fail mejadi plg_ympp.zip dankemudian install ke dalam Joomla anda. Selepas berjaya install aktifkan plugin (enabled) pada PluginManager, kemudian anda sudah boleh menggunakannya.Bagaimana caranya?Pastikan anda tidak menggunakan editor WYSIWYG semasa menulis artikel dengan plugin ini atau piliheditor toggle. Persediaan awal kedua adalah menyediakan fail mp3 anda di dalam folder /mp3 yangdicipta 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 dalamlaman saya. Pastikan artikel ini dipaparkan pada frontpage. Artikel ditulis dalam format HTML tanpaeditor WYSIWYG atau dengan editor Toogle. 96
  • 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 inginsaya sampaikan adalah asas pembinaan plugin. Ringkasnya, plugin merupakan merupakan satu set failarahan PHP untuk melaksanakan suatu fungsi luar untuk dipersembahkan bersama artikel di lamananda.Plugin disertakan dengan fail XML untuk tujuan installasi ke Joomla, serta fail-fail lain termasukgrafik, css, java script dan fail swf jika perlu untuk menampak fungsi dan keunikan plugin anda di dalamartikel. Plugin dibina untuk menyokong persembahan artikel di laman anda serta menjadikan maklumattersebut kukuh, jitu dan menarik. 97
  • KONSEP MEREKABENTUK & PEMBANGGUNAN TEMPLATESSeterusnya diterangkan bagaimana membina dan menghasilkan template untuk Joomla! 1.5.Seperti yang anda ketahui template adalah pakaian luar yang mewarnai dan mencorakkanpersembahan 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, grafikdan sebagainya. Untuk membina template juga ada format dan syarat yang perlu diikuti.Saya akan menunjukkan asas pembinaan template yang mudah dan ringkas. Dengan pengetahuandan pemahaman konsep yang anda perolehi nanti anda pasti mampu membina template yang lebihhebat dan menarik.Pada asasnya anda perlu cipta satu folder utama contoh : tpl_lamankuDi dalam folder tersebut anda tambah beberapa sub-folder dan fail. Sub-folder yang asas adalah; 1. css 2. imagesMemadai dengan dua folder asas tersebut sebagai sub-folder anda. Kemudian cipta beberapa failasas 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) 98
  • Fail nombor 1 adalah koding PHP yang menjadi nadi utama kepada template ini. Fail nombor 2adalah fail XML untuk kegunaan Joomla semasa proses installasi template. Fail nombor 3 adalahfail grafik untuk pra-paparan semasa mengendalikan Templates Manager. Fail ke 4 adalah fail cssyang perlu dicipta di dalam subfolder css. Manakala fail ke 5 adalah fail grafik untuk identiti web inidan 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. 99
  • 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 danperancangan persembahan laman anda. Ini adalah asas penulisan body dengan idea inginmemaparkan 5 position module iaitu top, left, component (Frontpage), right dan footersahaja. Kaedah penulisan ini menggunakan pendekatan float. <div adalah syntax gutter untuk menyatakan sempadan antara setiap module. Dengan css anda boleh berikan lagi sifatuntutk gutter ini jika perlu. id=”container” yang saya gunakan menggunakan pendekatan banyak template khususnya SiteGround dan jika anda cenderung dengan pendekatan ol_webdesign merekamenggunakankan id=”bd” atau id=”body” dan sebagainya. Setiap id ini akan ditetapkan sifat dan gaya/style khusus di dalam id tersebut olehtemplate.css iaitu fail Cascade Sheet Style bagi setiap id tersebut. Rujuk fail template.css daribaris 44 – 86. “<jdoc:include ….” adalah syntax dalam libry Joomla yang bermakna anda memanggilmodule berjenis apa dan akan diletakkan sebagai posisi apa?? penentuan setiap posisi ini dibuat di dalam fail css. “class=”float bermakna semua module adaalah mengikut classtersebut tanpa perlu di terangkan selengkapnya sifat setiap satu modul (css shorthandsyntax).2. templateDetails.xml Fail templateDetails.xml 100
  • Penerangan Ringkas: Fail XML adalah panduan untuk plugin install dalam Joomla untuk memasang template ini kedalam senarai template pada component Template Manager laman Joomla. Fail inimenyenaraikan informasi tentang template dan info pembangunnya, senarai fail yangterkandung di dalam pakej serta posisi yang dikonfigurkan oleh template nanti. Ini juga menjadipanduan dan parameter rujukan kepada pengguna semasa menggunakan Templates Manager. Jika anda melakukan penampahan fail dan folder, senaraikan fail dan folder baru andatambah sebelum anda pakejkan menjadi fail.zip.3. templates.css lihat contoh css di bawah dan diikuti pengenalan kepada CSS (asas). 101
  • 102
  • Fail templates.css 103
  • 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 pasteserta fahami dengan jelas kaedah dan konsep pembinaannya untuk keperluan anda mengurus danmengendali laman anda. Jika anda telah mahir nanti boleh cipta satu template baru yang unik untukkegunaan sendiri atau dikomersialkan. Sebelum template ini boleh digunakan, pakejkan semua fail dalam folder tpl_lamankudengan cara menjadikannya fail tunggal termampat dengan nama tpl_lamanku.zip. Kemudiangunakan kemudahan Install/Uninstall pada Extension di Panel Admin Joomla untukmenginstallasinya seterusnya gunakan sebagai template default bagi frontend anda.Anda akan mendapati paparan laman anda lebih kurang seperti ini: Frontend Template Lamanku 104
  • PENGGUNAAN DAN ASAS CSS.Saya amat menekankan kepada CSS untuk anda kenali dan fahami fungsinya. Anda mungkin kerap kalimelihat CSS digunakan dalam persembahan “template” Joomla dan lain-lain halaman HTML/XHTML.Halaman yang pelbagai gaya dan sangat kompleks hanya berjaya dihasilkan dengan jalinan yangsempurna 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 menggunakaneditor teks biasa pada komputer anda untuk mengikut tutorial ini. Saya maklum anda mungkinmengunakan editor web yang cangih dan komersial seperti Dreamweaver, FrontPage, Style Master atauGoLive dan sebagainya. Untuk megikut tutorial ini hanya perlukan Notepad, EditPlus, atau lain-laineditor 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 betulkansemasa kerja amali anda. Ini mungkin berlaku kerana kesilapan menulis atau menyalin kembali di pihakkami. 105
  • 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… 106
  • <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. Contohnyahalaman ini: http://www.w3.org/MarkUp/Guide/Dengan menyalin semula aturcara HTML di atas, anda akan dapat paparan seperti ini: 107
  • 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 elemenpersembahan gaya yang istimewa.Jawapan anda mungkin halaman ini ‘plain’ atau kosong dan hambar. Kerana itulah kini kita akanmasukkan CSS untuk menokok tambah dan menetapkan gaya paparan halaman yang sama tetapidengan citaras menarik hasil janaan CSS.Pastikan anda simpan(save) aturcara HTML tersebut dengan nama yang sesuai dalam folder pilihananda.Kini kita terus kepada kerja menetapan gaya CSS pertama iaitu menambahkan warna kepada tulisan danlatar belakangnya. 108
  • 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 mengayakanhalaman HTML tersebut sahaja.Sebaliknya jika anda menggunakan cara yang kedua, CSS yang ditulis berasingan boleh digunakan untukmenggunakan 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 satuhalaman sahaja.Sekarang anda tulis seperti ini. (Tambahkan terus ke dalam aturcara HLTM tadi dengan menggunakaneditor 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 } 109
  • </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 dalamkawasan <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 pilihananda 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 inisila lihat di:http://www.w3schools.com/HTML/html_colornames.aspUntuk 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 sepertiberikut: 110
  • 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 dipaparkanlahpelbagai gaya paparan bagi halaman HTML ini.Sekarang anda selitkan lagi beberapa kod CSS seperti dalam kekotak di bawah pada aturcara HTML andatadi 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"> 111
  • 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 persembahantulisan 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 andakemudian. Kemudian gunakan internet browser untuk melungsurkannya, paparan yang anda perolehiadalah seperti berikut: 112
  • 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 denganmenggunakan 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 kekotakaturcara berikut:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> Halaman HTML dengan CSS </TITLE> 113
  • <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 kodberwarna biru adalah kod CSS baru yang diselitkan untuk menetapkan susun-atur menu navigasisebelum ini tadi di susun pada sisi kiri. Lihat arahan CSS ‘padding-left…’ dan ‘ul.navbar , position:absolute …’ rujuk kekotak di atas. 114
  • ‘positon: absolute’ adalah arahan menetapkan ‘ul’ diletakkan terpisah dari teks utama yang sebelum inidipaparkan 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 1ukuran sais font jarak dari kiri ‘left: 1em’.Unit ‘em’ adalah menetapan sais yang digunakan dalam penulisan CSS. Ukuran ‘em’ menentukan saisjarak contohnya, jika font yang anda pakai berukuran 12 point, ‘2em’ akan menetapkan jarakselangan/langkauan seluas 24 point.Walau bagaimanapun mungkin ketika paparan persembahan anda dijalankan oleh browser tertentu, adakemungkinan luas jarak dan sais font yang dipersembahkan tidak seperti yang anda tetapkan ini keranasesetengah 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 failhyperteks tersebut dengan browser internet anda. Pastinya paparan yang akan anda perolehi adalahseperti berikut: 115
  • Adakah anda sudah berpuas hati dengan corak dan susun-atur persembahan seperti di atas. Ini barusedikit, jika anda sudah mahir dan mengetahui banyak arahan dan kod CSS, anda boleh pelbagaikan lagigaya persembahan halaman anda itu.Jika anda perhatikan betul-betul menu navigasi yang dipersembahkan masih kurang menarik keranahanya 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; 116
  • 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…+ 117
  • Dengan penambahan kod CSS di atas anda dapat paparan yang lebih menarik di mana menu-menu andasudah 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 teksutama dengan teks kaki. Teks kaki yang memaparkan tarikh fail ditulis dan nama penulis akan dipisahkanoleh 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 { 118
  • 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 } 119
  • 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 atasdengan teks kaki di bahagian bawah. Garisan herizontal yang dibina boleh ditetapkan bentuknyaperlbagai gaya sama ada ‘solid’, ‘dotted’, ‘dashed’, ‘double’, ‘groove’ dan sebagainya. Paparan padabrowser internet adalah seperti berikut, jika anda menetapkan garisan herizontal tersebut sebagai‘solid’:Paparan berikutnya adalah jika anda menetapkan garisan herizontal tersebut sebagai ‘dotted’ : 120
  • Sepanjang penerangan dan tutorial yang ditunjukkan tadi, aturcara HTML dan CSS ditulis bersama dalamhalaman yang sama. Katakan anda perlu lagi membina beberapa halaman HTML yang baru. Bagaimanajika 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 CSSseperti tadi.Tetapi cara itu tidak tepat dan kurang cekap. Sekarang saya tunjukkan bagaimana kita menggunakanhalaman yang berasingan.Langkah pertama untuk tujuan ini ialah buka satu halaman kosong dengan editor teks anda kemudiansalin semua arahan CSS tadi pada halaman kosong tersebut dan kemudian simpan (save) dengansambungan fail .css contohnya ‘mystyle.css’. Pada halaman CSS yang berasingan itu salin kod-kodberikut: 121
  • 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 } 122
  • 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 penetapanberikut 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"> 123
  • <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> 124
  • Maknanya, semua arahan CSS dari <style..> hingga ke </style> anda padam dan gantikan dengan arahanpautan yang memanggil segala arahan CSS dari fail ‘mystyle.css’ menerusi baris arahan : <linkrel="stylesheet" href="mystyle.css">Untuk rujukan anda kemudian, simpan (save) fail HTML baru ini dengan nama berbeza. Sekarangmenggunakan 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 rujukananda. Jika anda berminat untuk mendalami lagi pengalaman dan pengetahuan anda tentang CSS sayacadangkan beberapa rujukan tambahan.Semoga dengan penjelasan di atas berkaitn CSS, anda boleh memahami baris-baris syntax CSS padatemplate Joomla! anda selepas ini. 125
  • Backup & Restore Joomla!Sekarang anda telah sempurna menyiapkan laman web anda di dalam webserver local yang dipasangdan hidup di dalam persekitaran webserver tetapi hanya di dalam komputer peribadi anda. Untukmembolehkan pengguna luar mengakses laman web anda, anda perlu letakkan sistem Joomla! danpangkalan 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 melayarilaman web Joomla! anda. Sebelum anda boleh berpindah ke hosting web anda perlu BACKUP dahuluJoomla! dan database anda dari local webserver anda kemudian RESTORE kedua-duanya di dalamhosting 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 126
  • 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;123 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: 127
  • 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 128
  • pautan sedemikian anda klik dan pelayar internet akan membuka phpmyadmin dariwebserver local anda. Contoh: PHPMyAdmin - MoWesPada sisi kiri tetingkap PHPMyAdmin akan disenaraikan semua pangkalan data yangwujud dalam MySQL. Lihat ada database dengan nama ‘joomla (76)’ bermaksuddatabase itu bernama joomla dengan 76 buah table (jadual data) di dalamnya. Jika andapilih database itu (klik nama database tersebut) tetingkap PHPMyAdmin akanmenyenaraikan semua 76 table tersebut, contoh: Table Data (76) – Bagi database joomla.Untuk buat salinan data tersebut, pilih semua table (76) : 129
  • – 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 tetapanformat data SQL seperti paparan di bawah: Format SQLExport menjadi fail SQL dengan pilihan seperti di atas. Di bawah menunjukkan anda pilihuntuk buat simpanan fail (Save as file) dengan nama pilihan anda (data-local-okt2010).Seterusnya klik pada butang ‘Go’, lihat contoh di bawah: 130
  • 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: 131
  • Aplikasi FTP – FireFTP FireFox Plugin.Jika anda menggunakan Aplikasi FTP, anda perlu ada akaun FTP untuk membuka hostingserver 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 menyambungkankomputer peribadi anda dengan hosting server. Jika semua betul sambungan akandibuat dan paparan adalah seperti rajah Aplikasi FTP di atas.Ruangan sebelah kanan adalah faildan folder pada komputer peribadi anda; pastikanberada dalam lokasi root webserver local anda contoh- F:mowes_portablewwwjoomlaRuangan sebelah kanan pula adalah hosting server anda. Pastikan joomla anda akandiletakkan di dalam lokasi- /public_htmlPilih 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 dalamruangan kanan (hosting). 132
  • 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: 133
  • 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 darikomputer anda fail yang dikehendaki dan proses upload akan dijalankan- Upload – dengan File ManagerTunggu hingga 100% proses dijalankan, dengan ini bermakna fail joomla.zip telahdipindah masuk ke pelayan hosting anda. Sekarang dengan File Manager ‘Extrac’ failtersebut supaya fail tunggal itu akan dinyahmampat menjadi fail-fail dan folder-folderJoomla! yang sama seperti di dalam webserver local anda sebelumnya. 134
  • 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: 135
  • PHPMyAdmin – Database ‘_joomladb1’Sekarang pada database tersebut belum ada sebarang jadual mengandungi data, iniditunjukkan oleh nama database ‘edumynet_joomladb(0)’. Untuk restore data dari localwebserver 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 klikbutang ‘Go’. 136
  • 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 OnlinePENUTUP: Untuk membina laman web yang canggih, sistematik dan mudah selenggara, Joomla! adalahantara pilihan yang tepat. Terdapata banyak laman sokongan di dalam internet yang membantu andamembangunkan web menggunakan Joomla!. Sebagai admin anda perlu mahir dan cekap sertamemahami 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 danmahir. Seterusnya membantu anda menghasilkan sebuah laman web yang cantik, menarik, unik danbermaklumat. Selamat mempelajari dan mempraktikkan Joomla!.Amaran: Pastikan artikel, grafik dan maklumat dari manual ini tidak diulang cetak dandiperbanyakkan untuk tujuan komersial tanpa izin dan pengetahuan saya (Azmi Sulaiman). 137
  • 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. 138