MENGENAL JOOMLA!

BAB 1
MENGENAL JOOMLA!
Joomla Open Source atau lebih sering dikenal dengan Joomla!
merupakan salah satu Content Management System (CMS) yang bersifat
Open Source, ialah sebuah software gratis yang dapat digunakan untuk
membuat web yang paling sederhana hingga paling kompleks sekalipun,
seperti web portal. Disebut open source karena pengguna dapat
memodifikasi, menghapus, maupun menambah script yang disertakan
dalam software tersebut asal tetap mencantumkan hak cipta dan mentaati
peraturan yang telah disepakati bersama-sama.
Software open source berbeda dengan software gratis (free use) karena
software yang bersifat gratis tidak menyertakan file-file aslinya (script)
dari software tersebut sehingga pengguna tidak dapat mengetahui
bagaimana dan apa isi yang terkandung di dalamnya. Intinya, kode
(script) dibuka untuk pengguna agar dapat dimodifikasi sendiri sesuai
keinginan.
1
Joomla! adalah salah satu CMS yang memilliki komunitas besar di
seluruh dunia dengan didukung oleh para pengembang ketiga yang akan
terus mengembangkan program inti Joomla!. Untuk mengetahui lebih
lanjut
tentang
CMS,
silakan
kunjungi
website
resminya
di
http://www.opensourcecms.com.
1.1 Sejarah
Munculnya
Joomla!
berawal
dari
“konflik internal” di
dalam
kepengurusan pengembang inti Mambo Open Source atau lebih sering
dikenal dengan Mambo pada tahun 2005. Pihak pendiri (Founder)
Mambo ingin membentuk sebuah institusi yang bernama Mambo
Foundation. Gagasan tersebut ditentang keras oleh pengembang dari
pihak ketika (3rd Developer), alasannya karena jika pengembangan
Mambo dikendalikan oleh Mambo Foundation dikhawatirkan suatu saat
Mambo akan dikomersilkan. Padahal tujuan awal lahirnya Mambo adalah
bersifat open source, siapapun dapat memodifikasi dan menambahkan
script agar sistem bekerja lebih baik dan lebih aman (secure), meskipun
hanya bersifat gratis.
Sekitar bulan Agustus 2005, sebagian pengembang inti Mambo keluar
dari kepengurusan pengembang program inti Mambo. Perlu diketahui,
Mambo dapat bekerja lebih baik dan berkembang sangat cepat karena
didukung oleh para pengembang pihak ketiga yang telah membuat
beberapa aplikasi tambahan yang sebut Component, Module, Plugin
(Mambots), dan Template. Tanpa aplikasi tambahan tersebut, Mambo
hanya sebuah software biasa dan tidak memiliki keistimewaan.
Pembahasan tentang Component, Module, Plugins (Mambots), dan
Template akan dikupas pada bab lain dalam buku ini.
2
Perkembangan selanjutnya, para pengembang inti Mambo yang keluar
dari kepengurusan tersebut bergabung dan pada 16 September 2005
membuat sebuah CMS bernama Joomla Open Source. Rilis versi awal
Joomla yaitu versi 1.0.0 yang merupakan “cloning” dari Mambo versi
4.5.3. Disebut cloning karena memang semua sciptnya sama persis.
Mambo
kemudian
membentuk
kepengurusan
baru
untuk
mengembangkan Mambo versi selanjutnya. Salah satu pengurus dalam
mengembangkan program inti Mambo berasal dari Indonesia yaitu Adi
Setiawan.
Nama Joomla! merupakan sebuah ejaan yang berkaitan dengan ilmu
fonetik dari kata Swahili “Juumla” yang memiliki arti bersama-sama atau
secara keseluruhan. Pemilihan nama tersebut atas prakarsa para team di
belakang layar atas kesuksesan Mambo yang secara bulat dengan
komitmen mereka untuk melindungi minat masyarakat (komunitas) dan
gagasan para pencipta sebelumnya.
Nama Joomla! dipilih atas dasar rekomendasi dari ribuan komunitas dan
bahkan telah melewati beberapa seleksi yang cukup ketat serta
peninjauan ulang sangat berat terhadap merek sesuai dan pemasaran
profesional yang merasa bahwa Joomla! merupakan pilihan paling baik
dan tepat. Joomla! lebih dari sekadar perangkat lunak, yaitu orang-orang.
Komunitas di belakang Joomla! meliput para pengembang, para
perancang, pengurus sistem, penerjemah, para penulis isi, dan yang
paling penting yaitu pengguna (end user).
Ketika buku ini ditulis, Joomla sudah merilis versi 1.5.8. Sedangkan
untuk Mambo, terus terang tidak mengikuti perkembangan lagi sehingga
tidak mengetahui sampai sejauh mana perkembangannya. Meskipun
Joomla menggunakan bahasa PHP, bukan berarti harus memahami
seluruhnya tentang bahasa PHP. Bagi mereka tidak memahami kode
HTML, ASP, CGI, maupun php tidak perlu takut untuk mempelajarinya
3
karena meskipun tidak tahu tentang kode-kode tersebut, namun masih
bisa membuat sebuah web dinamis secara cepat dengan beberapa fitur
yang sangat lengkap.
Untuk mengetahui lebih lanjut tentang Joomla!, dapat mengakses
langsung ke alamat website resminya di http://www.joomla.org.
1.2 Keunggulan Joomla!
Pada awal perkembangannya, Joomla! tidak diminati oleh masyarakat
luas. Alasanya klasik, yaitu dikarenakan Joomla! merupakan software
yang gratis sehingga dianggap tidak aman, banyak kelemahan, kurang
bergengsi, tidak impresif dan anggapan negatif lainnya.
Sikap apatis tersebut dipatahkan oleh para pengembang inti Joomla!
dengan dibuktikannya beberapa aplikasi tambahan yang sangat fleksibel
untuk disisipkan ke dalam sistem Joomla!. Pada akhirnya, masyarakat
dapat memanfaatkan Joomla! untuk berbagai keperluan terutama
membangun website secara cepat tanpa mengesampingkan segi
keindahan tampilan.
Mengapa orang memilih Joomla! ?
Aplikasi yang beragam dapat dibuat menggunakan Joomla! karena
memiliki beberapa kemampuan, diantaranya:
1.
Dapat melakukan update halaman utama, halaman berita, halaman
artikel, maupun halaman arsip secara cepat.
2.
Dapat menambahkan item menu baru pada main menu, other menu,
maupun top menu dengan mudah dan cepat.
3.
Dapat mengatur weblink dengan cepat dan mudah.
4.
Dapat mengatur banner (iklan).
4
5.
Dapat mengatur FAQ (Frequently Asked Questions).
6.
Dapat mengatur Newsflashes
7.
Dapat membuat arsip dan menampilkannya kembali
8.
Dapat mencetak, mengirim artikel lewat email, dan membaca artikel
dengan format PDF.
9.
Dapat mengatur pengguna (user) dengan tingkat akses level yang
berbeda.
10. Dapat menambah komponen, modul, plugin, dan template dari pihak
ketiga (seperti: gallery, forum, calendar, video player, slide show,
antiflood, block IP, agenda, shoutbox, games, guestbook, shopping
cart, dan sebagainya).
11. Dapat menampilkan file multimedia tanpa harus membuat script
sendiri
Desain Joomla!
berbeda dengan aplikasi sejenis seperti Microsoft
Frontpage maupun Macromedia Dreamweaver. Joomla! sangat fleksibel,
mudah digunakan, dan bentuknya sederhana, menjadikan software ini
sangat user friendly karena:
1.
Mudah melakukan setup/instalasi.
2.
Memiliki tampilan administrator yang sederhana untuk mengatur isi
situs (website).
3.
Mudah digunakan untuk mengedit (menambah, mengubah, dan
menghapus) materi dan gambar.
4.
Fleksibel untuk mengatur tampilan front end (halaman utama).
5.
Fleksibel untuk menambah komponen, plugins, modul dan template
yang baru dari pihak ketiga.
5
Seperti telah diijelaskan sebelumnya bahwa Anda untuk menggunakan
Joomla! perlu lagi mengetahui konsep pembuatan web dengan HTML,
PHP, ASP, XML maupun DHTML. Pengguna cukup memasukan content
dan gambar yang ingin ditampilkan ke halaman situs. Bahkan webmaster
sekalipun tidak perlu memahami program FTP untuk melakukan upload
data, karena Joomla! sudah dapat menanganinya.
1.3 Manfaat Joomla!
Dalam waktu yang relatif singkat, Joomla sudah menjadi salah satu
software yang handal untuk berbagai keperluan sesuai dengan kebutuhan
penggunanya. Banyaknya aplikasi yang dapat disisipkan ke dalam sebuah
website, menjadikan Joomla! sebagai alternatif utama ketika membangun
sebuah website secara dinamis dan interaktif.
Joomla!
dapat
dimanfaatkan
ketika
memutuskan
untuk
mulai
mengembangkan dan mengelola website dinamis secara cepat dengan
tidak mengesampingkan keindahan tampilan dan fitur-fitur yang sangat
beragam. Berikut beberapa manfaat Joomla! sesuai dengan kebutuhan
dan tema website yang akan dibangun.
1. Website Jejaring Sosial (Social Network). Dengan memanfaatkan
ekstensi
(Component,
Plugin,
dan
Module),
Joomla
dapat
dimanfaatkan untuk membangun komunitas di internet dalam
berbagai bidang kompetensi seperti: keagamaan, hukum, kedokteran,
desain grafis, hacker, ekonomi, olah raga, dan bidang-bidang lainnya.
6
BAB 2
INSTALASI APACHE, PHP, DAN
MYSQL
Bagi seorang pengembang web tingkat pemula, mungkin masih terasa
asing dengan istilah Apache, PHP, dan MySQL. Penulis tidak bermaksud
“menggurui” bagi pembaca yang sudah paham tentang beberapa aplikasi
tersebut. Namun, agar seorang pengembang web tingkat pemula tidak
bingung di kemudian hari maka penulis perlu memberikan penjelasan
sedikit. Karena tanpa adanya ketiga aplikasi tersebut, maka instalasi
Joomla! tidak dapat dijalankan di komputer pribadi (PC).
Secara default, ketika menginstal sistem operasi menggunakan Windows
maka di dalamnya akan menyertakan pula aplikasi berbasis web bernama
PWS (Personel Web Server) dan IIS (Internet Information Service).
Keduanya berfungsi sebagai web server di lingkungan Windows. Namun,
ada beberapa kelebihan dan kekurangan web server tersebut. Dan
13
sebagaian pengembang web tidak memanfaatkan web server “bawaan”
Windows, mereka lebih suka menginstal aplikasi lain yang dirasakan
lebih handal. Maka dipilihlah Apache sebagai pengganti kedua aplikasi
tersebut.
2.1 Mengenal Apache, PHP, dan MySQL
Apache merupakan salah satu dari sekian banyak aplikasi yang berfungsi
sebagai web server. Aplikasi ini sangat reliable untuk dijadikan web
server pada komputer pribadi (PC). Untuk informasi lebih lanjut, silakan
kunjungi website resmi di http://apache.org.
PHP merupakan salah satu bahasa pemrograman berbasis web. Oleh
karena Joomla menggunakan bahasa PHP, maka dalam komputer pribadi
(PC) harus terinstal bahasa PHP. Saat buku ini ditulis, PHP sudah
menggunakan versi 5.02. dan untuk informasi lebih lanjut silakan
kunjungi website resminya di http://php.net.
MySQL merupakan salah satu tipe database yang paling banyak diminati
para pengembang web karena selain mudah instalasinya, juga database ini
mampu menampung record sebanyak ratusan giga. Database ini juga
berada di bawah lisensi GNU yang berarti gratis dalam penggunaan
maupun penggandaan. Berbeda dengan database yang sejenis seperti
Oracle. Untuk informasi lebih lanjut, silakan kunjungi website resmi di
http://mysql.com.
PHPMyAdmin merupakan aplikasi yang dapat digunakan untuk
membuat database, pengguna (user), memodifikasi tabel, maupun
mengimpor database secara cepat dan mudah tanpa harus menggunakan
perintah (Command) SQL.
14
Ada bebeberapa cara untuk menginstal beberapa komponen tersebut
yaitu: menginstal secara terpisah masing-masing aplikasi (Apache, PHP,
dan MySQL) atau menginstal aplikasi web server yang sudah
menampung keempat komponen sekaligus. Web Server juga banyak
macamnya diantaranya: PHPTriad, EasyPHP, XAMP, Uniserver,
AppServ, dan lain-lain. Untuk studi kasus pada buku ini, penulis
menggunakan Uniserver (Uniform Server) dan AppServ. Namun perlu
diingat, kedua web server tidak dapat digunakan secara bersama-sama.
Untuk itu, pilih salah satu saja sesuai keinginan dengan cara melihat
kelebihan dan kekurangan masing-masing.
2.2 Instalasi Uniform Server
Ketika buku ini ditulis, Uniform Server sudah sampai pada versi 3.3
(Uniserver ver 3.3). Namun, untuk studi kasus dalam buku ini penulis
menggunakan Uniform Server versi 3.2. Meskipun begitu, tidak ada
hambatan yang berarti ketika menginstal Joomla. Untuk proses instalasi
Uniform Server sebenarnya tidak perlu diinstal dalam komputer karena
aplikasi ini cukup diduplikasi (Copy and Paste) pada hardisk, flashdisk,
maupun media pemyimpanan lain.
1. Klik ganda software Uniform Server (UniServer_3.3a.exe) yang
tersedia dalam CD buku ini.
15
Gambar 2.1 Logo UniServer
2. Tentukan folder yang diinginkan untuk mengekstrak semua file
Uniform Server kemudian tekan tombol Extract. (Lihat Gambar 2.2.)
3. Tunggu beberapa saat, sampai proses ekstrak selesai. (Lihat Gambar
2.3)
Gambar 2.2 Menentukan folder
Gambar 2.3 Proses ekstraks file
4. Setelah proses ekstrak selesai, maka akan muncul folder baru
(UniServer3_2a) dalam direktor yang telah dipilih sebelumnya.
16
Gambar 2.4 Hasil ekstraksi
5. Selanjutnya, buka folder tersebut dan temukan file start.bat. Klik file
start.bat, tunggu beberapa saat. (Lihat Gambar 2.5).
Gambar 2.5 Beberapa folder dan file UniServer
6. Secara otomatis akan menjalankan salah satu browser (Internet
Exporer, Opera, Mozilla, Google Crome, dll). Adakalanya muncul
pop up block ketika mengaktifkan file start.bat, pilih Unblock untuk
mengijinkan Uniform Server jalan.
7. Apabila muncul pesan kesalahan pada browser seperti nampak pada
gambar berikut.
17
Gambar 2.6 Tampilan kesalahan
8. Ada beberapa kemungkinan, yaitu: sudah ada web server lain selain
Uniform Server atau masih terblokir oleh sistem keamanan
(Firewall). Jika sudah terselesaikan kendalanya, klik file redirect.html
(Lihat Gambar 2.7).
9. Tampilan utama Uniform Server. (Lihat Gambar 2.8).
Gambar 2.7 Mengaktifkan file redirect.html
18
BAB 3
MEMBUAT DATABASE DAN
PENGGUNA
Secara umum, tipe website dapat dibedakan menjadi dua kelompok yaitu
web statis dan web dinamis. Yang dimaksud dengan web statis adalah
sebuah web yang tetap (static), dalam arti tampilan, navigasi, dan content
tidak berubah secara otomatis. Ketika ingin meng-update sebuah berita
harus membuka file aslinya. Umumnya berita atau artikel yang
ditampilkan tetap untuk jangka waktu yang cukup lama.Tipe website ini
biasanya hanya mengandalkan tag html saja, jadi memerlukan database.
Selain memanfaatkan tag html, website yang menggunakan Flash juga
dapat dikategorikan sebagai web statis, meskipun ada sebagian kecil yang
sudah memiliki database dalam mengelola content-nya.
Sedangkan website dinamis adalah sebuah bentuk website yang tampilan
dan isi websitenya dapat berubah setiap saat. Ketika meng-update berita
25
tidak perlu membuka file tertentu namun cukup menambahkan pada form
yang telah disiapkan dan biasanya tersimpan dalam sebuah database.
Sama halnya dengan web portal yang menggunakan software open source
seperti Joomla!. Oleh karena web yang dibuat oleh Joomla! bersifat
dinamis, maka perlu sebuah database sebelum melakukan instalasi. Jika
berbicara tentang database maka sangat erat kaitannya dengan pengguna
(user) dan tabel (table). Singkatnya, sebelum melakukan instalasi Joomla!
perlu sebuah database dan pengguna yang diproteksi dengan kata sandi
(password).
1. Untuk membuat database dan pengguna, pertama kali harus masuk ke
halaman phpMyAdmin. Untuk itu, aktifkan salah satu browser
(Internet Explorer, Mozilla, Opera, dan lain-lain). Pada alamat URL,
ketikkan http://localhost lalu tekan Enter.
Gambar 3.1 Logo UniServer
2. Klik menu phpMyAdmin Database Manager Version 2.10.2.
Gambar 3.2 Menu untuk masuk ke halaman phpMyAdmin
26
3. Jika muncul kotak dialog, masukkan username dan password untuk
masuk ke halaman phpMyAdmin. Ingat kembali ketika pertama kali
menginstal AppServ, ada kolom isian username dan password untuk
SQL Server.
Gambar 3.3 Username dan Password untuk masuk ke phpMyAdmin
4. Jika telah berhasil masuk, maka tampilannya akan nampak seperti
gambar berikut.
27
Gambar 3.4 Tampilan halaman phpMyAdmin
5. Untuk membuat database baru, masukkan nama database pada kolom
Create New database. Jika mengikuti petunjuk buku ini, masukkan
portal untuk nama database. Selanjutnya, klik tombol Create untuk
proses pembuatan database baru.
Gambar 3.5 Kolom untuk membuat database baru
6. Setelah berhasil, maka muncul informasi bahwa database baru
dengan nama portal telah dibuat.
28
Gambar 3.6 Database baru telah berhasil dibuat
7. Langkah selanjutnya adalah membuat pengguna (user) yang
digunakan untuk mengakses database portal. Bisa saja menggunakan
default user yaitu root, namun sebaiknya menggunakan user yang
berbeda agar lebih aman dan lebih mudah penggunaannya. Pilih
tombol Home untuk kembali ke halaman utama phpMyAdmin. (Lihat
Gambar 3.7)
8. Untuk membuat pengguna baru, klik menu Privileges (Hak Akses).
(Lihat Gambar 3.8).
Gambar 3.7 Tombol Home
29
BAB 4
INSTALASI JOOMLA 1.5.X
Ketika buku ini dibuat, Joomla sudah berada pada versi 1.5.8 yang sudah
“dibekali” berbagai macam pengaman (security). Studi kasus dalam buku
ini menggunakan versi 1.5.7 karena versi yang terbaru belum sempat
terdownload ketika menulis buku ini. Namun tak perlu khawatir, jika
ingin menggunakan versi 1.5.8 sudah disediakan dalam CD buku ini.
Silakan memilih versi mana yang diinginkan.
1. Untuk menginstal Joomla!, yang pertama kali dilakukan adalah
meletakkan seluruh file Joomla! pada web server (AppServ, Uniform
Server, XAMP, dan lain-lain). Web server yang digunakan dalam
praktek ini adalah AppServ. Duplikasi folder Joomla_1.5.7 (tersedia
dalam CD buku ini) ke dalam folder www (Lihat Gambar 4.1).
2. Tunggu beberapa saat hingga proses selesai. (Lihat Gambar 4.2).
35
3. Setelah berhasil terduplikasi, ganti nama folder Joomla_1.5.7
menjadi portal. (Lihat Gambar 4.3)
Gambar 4.1 Letak folder untuk menduplikasi file Joomla
Gambar 4.2 Proses duplikasi sedang berjalan
36
Gambar 4.3 Mengganti nama folder
4. Sekarang aktifkan salah satu browser (misal Intenet Explorer,
Mozilla,
dan
lain-lain).
http://localhost/weportal
Pada
alamat
URL,
ketikkan
lalu tekan Enter. Perlu diingat, tulisan
portal bukan sebagai patokan. Hal itu tergantung nama folder yang
telah diubah.
Gambar 4.4 Memanggil alamat URL
5. Tahap 1: Language. Sekali lagi perlu diingat, ketika mengetikkan
alamat http://localhost/webportal mengacu pada folder weportal. Jadi
folder tersebut dapat diganti dengan nama apapun sesuai dengan
folder yang dibuat di bawah folder AppServ/www.
Selanjutnya,
tekan tombol Next untuk melanjutkan proses selanjutnya
37
Gambar 4.5 Proses instalasi tahap pertama
6. Tahap 2: Pre-installation Check. Secara default, Joomla mengecek
kebutuhan yang harus dipenuhi. Jika tidak ada masalah, bisa
dilanjutkan dengan cara menekan tombol Next.
Gambar 4.6 Proses instalasi tahap kedua
7. Tahap 3: License. Pada tahap ini, hanya memberkan informasi
tentang lisensi dan peraturan-peraturan yang harus dipenuhi dalam
menggunakan Joomla Open Source. Tekan tombol Next untuk
melanjutkan.
38
Gambar 4.7 Proses instalasi tahap ketiga
8. Tahap 4: Database. Masukkan Host, Username, Password, dan
nama
Database
(periksa kembali
ketika membuat
database
sebelumnya), jika telah yakin tekan tombol Next.
Gambar 4.8 Proses instalasi tahap keempat
39
9. Pada bagian Advance Setting, bisa diganti dengan awalan (prefix)
sesuai keinginan Anda. Prefix ini berfungsi untuk mengidentifikasi
database agar tidak bingung ketika database dalam server sudah
banyak, karena jika semua prefix menggunakan jos_ akan sulit untuk
membedakan tabel tersebut miliki database mana.
Gambar 4.9 Mengganti awal untuk tabel Joomla
10. Tahap 5: FTP Configuration. Jika Anda memiliki account di
server, masukkan username dan password ketika mengupload file
melalui fasilitas FTP (File Transfer Protocol). Pada bagian ini bisa
diabaikan dengan cara menekan tombol Next.
Gambar 4.10 Proses instalasi tahap kelima
40
11. Tahap 6: Configuration. Masukkan nama situs, misal: Web Portal
Multibahasa Kemudian masukkan alamat email dan masukkan
passwordnya admin agar mudah diingat. Setelah selesai, tekan
tombol Next. (Lihat Gambar 4.11)
12. Pada versi sebelumnya (Joomla 1.0.x) secara default menginsal
beberapa contoh data (Install Sample Data). Sedangkan pada versi
1.5.x terdapat fasiltias untuk memilih atau mengabaikan instalasi
contoh data. Sebaiknya aktifkan fasilitas ini agar website tidak
kosong sehingga tidak membingungkan pada tahap selanjutnya. Jika
lupa mengaktifkan fasilitas ini, website Anda akan blank. Berikutnya,
klik tombol Next (Lihat Gambar 4.12).
13. Tahap 7: Finish. Proses instalasi telah selesai. Pada bagian ini,
terdapat informasi yang mengharuskan untuk menghapus folder
installation, berada di bawah folder portal (Lihat Gambar 4.13).
Gambar 4.11 Proses instalasi tahap keenam
41
Gambar 4.12 Menginstal data contoh
Gambar 4.13 Proses intalasi tahap ketujuh
14. Menurut pengalaman penulis, ada baiknya tidak menghapus folder
tersebut namun cukup mengganti namanya saja, misal installationold. Hal ini dilakukan untuk mengantisipasi jika terjadi kesalahan
dan ingin instalasi ulang maka akan lebih mudah.
Gambar 4.14 Mengganti nama folder installation menjadi installation-old
15. Setelah mengganti folder tersebut, Refresh ulang instalasi terakhir
Joomla atau ketikkan alamat URL http://localhost/webportal. Maka
42
akan nampak sebuah web dinamis menggunakan Joomla Open
Source.
Gambar 4.15 Tampilan Front-end website dengan Joomla
43
BAB 5
MENGENAL EXTENSION
Dalam sebuah website, ketersediaan fasilitas untuk mendownload artikel
maupun berita seringkali dimanfaatkan oleh pengunjung untuk
mendapatkan informasi yang lebih lengkap. Adakalanya fasilitas tersebut
diatur berdasarkan pengguna (public atau registered). Jika pengguna
mendaftarkan sebagai anggota maka dapat mendownload informasi yang
lebih lengkap. Hal inilah yang membedakan antara pengguna umum dan
pengguna khusus.
Fitur download manager dapat dipasang (install) ke dalam sistem Joomla!
dengan mudah namun memiliki fitur lengkap seperti: statistik jumlah
artikel yang didownload, artikel baru yang didownload, artikel paling
banyak didownload, dan statistik lainnya.
Dalam sistem Joomla! versi 1.5.x, Statistic dan Document Manager
disebut sebagai Extensions. Sedangkan pada Joomla veri 1.0.x disebut
sebagai Component dan Module.
Secara umum, jumlah Extension (ekstensi) sangat banyak yang terbagi
menjadi beberapa tipe yaitu: Component, Language, Module, Plugins
(Mambots), Special, dan Template. Dari beberapa tipe tersebut dapat
33
dibagi lagi menjadi beberapa kategori. Untuk mengetahui lebih detailnya,
berikut ini daftar Extension yang diambil dari website resmi Joolma
(http://www.joomla.org).
1. Access & Security

Backup (6)

Captcha (12)

Content Restriction (37)

Group Access (30)

Site Access (19)

Site Security (13)

User Authentication (51)

User Management (33)
2. Administration

Admin add-ons (45)

Admin Interface (13)
3. Ads & Affiliates

Affiliate Advertising (44)

Amazon (16)

Banner Management (44)

Classified Ads (19)

Corner Banners (4)

Google Ads (34)

Text & Link Ads (17)
4. Calendars & Events
34

Birthdays & Historic events (11)

Calendars (12)

Clocks (38)

Countdown (12)

Date & Time (23)

Events (28)

Events Registration (6)

Festivities (17)
5. Clients & Groupware

Authors (28)

CRM (12)

Help Desk (11)

Online Status & Profile (22)

Project & Task Management (20)

Social Bookmarking (49)

Wiki (4)
6. Communication

Bookmark & Recommend (25)

Chat (45)

Forum (6)

Forum add-ons (28)

Forum bridges (8)

Mailing & Distribution Lists (25)

Newsletter (14)

PMS (11)

Shoutbox (12)

SMS (4)
35
7. Contacts & Feedback

Comments (33)

Contacts (34)

Email (14)

Forms (20)

Greetings (12)

Guest Book (15)

Polls (7)

Quiz & Surveys (15)
8. Content & News

Articles Listing (40)

Articles Slideshow (29)

Blog (13)

Frontend News (20)

Latest News (32)

Microblogging (5)

News Tickers & Scrollers (31)

Newsflash & Random (19)

Popular Content (8)

Quotes (11)

Ratings & Reviews (19)

RSS Syndicate (27)
9. Core Enhancements
36

Content Management (17)

Data Reports (9)

Embed & Include (9)

File Management (12)

Installers (3)

Menu Systems (81)

Multiple Sites (6)

Sections & Categories (18)

Site Links (24)

Site Navigation (17)
10. Directory & Documentation

Bibliography (3)

Directory (40)

Downloads (32)

FAQ (12)

Glossary & Dictionary (19)

Portfolio (12)

Weblinks (14)
11. e-Commerce

Affiliate Carts (16)

Auction (16)

Billing & Invoices (6)

Donations (27)

Paid Access and Content (15)

Payment Gateway (8)

Payment systems (14)

Shopping Cart (23)
37
12. Edition

Code Display (8)

Custom Code (48)

Editor Buttons (18)

Editors (15)

Replace (8)
13. Extension Specific
38

AdsManager extensions (10)

AlphaContent extensions (6)

BannersManager extensions (5)

Community Builder extensions (156)

dcsFlashGames extensions (0)

DOCMan extensions (23)

ECJC extensions (5)

Fireboard Forum extensions (22)

Freeway extensions (5)

Hot Property extensions (25)

JCE extensions (11)

jDownloads extensions (11)

Joom!Fish extensions (15)

JoomLeague Plugins (9)

JoomSEF extensions (44)

Pages-and-Items extensions (9)

Phoca extensions (9)

PUArcade extensions (22)

Remository Extensions (7)

RSGallery2 extensions (12)

SEF Service Map extensions (13)

Seyret extensions (9)

SOBI2 extensions (37)

Specific extensions (4)

VirtueMart extensions (116)
14. External Contents

Alerts & Awareness (8)

Audio & Radio Channels (20)

Automatic Articles (7)

Directories Search (19)

News Channels (10)

Photo Channels (17)

RSS Readers (30)

Social Blogging (13)

Social Channels (13)

TV & Movies Channels (13)

Video Channels (40)

Weather (26)

Web Search (21)

Widgets & Documents (9)

Wiki integration (8)
39
15. Financial & Statistics

Calculators (4)

Currency & Exchange (20)

Graphs and Charts (8)

Stock Market (15)
16. Hosting & Servers

Data Conversion (11)

Database Management (13)

Hosting (3)

Servers (13)
17. Images & Multimedia
40

Articles Images (29)

Audio Players & Gallery (40)

eCards (3)

Images (21)

Images Rotators (31)

Images Slideshow (52)

Maps (27)

Multimedia Display (9)

Panorama (7)

Photo Flash Gallery (16)

Photo Gallery (40)

Photo Gallery add-ons (31)

Shoutcast & Podcasts (7)

Streaming & Broadcasting (7)

Video Players & Gallery (16)

Virtual Reality & 3D (4)
18. Languages

Automatic translations (20)

Multi-lingual Content (17)

Translations for Joomla (99)
19. Miscellaneous

Development (28)

Mobile (8)

Personal Life (15)

Religion (18)
20. Search & Indexing

Domain Search (8)

Extensions Search (24)

Related Items (21)

Search Results (13)

Site Search (28)

Tags & Clouds (28)
21. Site Management

Cache (8)

Content Statistics (10)

Credits (8)

Ranks (18)

SEF (22)

SEO & Metadata (34)
41

Site Analytics (24)

Site Map (17)

Site Traffic Statistics (20)

URL Redirection (8)

Visitors (39)
22. Sports & Games

Board & Table Games (8)

Game Servers (3)

Games (30)

Sports (10)

Sports Scores (13)

Tips & Betts (9)

Virtual worlds (5)
23. Style & Design
42

Accessibility (15)

Design (16)

Flash Management (12)

Modules presentation (12)

Popups & iFrames (36)

Print & PDF (7)

Scripts (9)

Tabs & Slides (25)

Templating (23)

Tips & Notes (37)

Titles (7)
24. Tools

Database tools (9)

Design Tools (20)

Development Tools (7)

Edition Tools (4)

Icon Packs (9)

Site management tools (15)

Standalone Servers (8)
25. Vertical Markets

Booking & Reservation (20)

Books & Libraries (10)

Education (14)

Food & Beverage (10)

Real Estate (13)

Taxes & Mortgages (11)

Vehicles (15)
5.1 Component
Secara umum, komponen (Component) berfungsi untuk menambah
fungsionalitas sistem Joomla yang memiliki halaman untuk mengatur
beberapa parameter. Sebagai contoh, fasilitas Document Manager
(DOCMAN) memiliki pengaturan untuk membuat kategori artikel,
deskripsi, image, hak cipta, alamat link, dan lain-lain.
43
5.1.1 Mengenal Component
Jumlah Component yang berkembang saat ini lebih dari ratusan dan akan
terus bertambah seiring dengan perkembangan zaman dan kebutuhan
penggunanya. Untuk menginstal Component, terlebih dulu harus
mendownloadnya di website resmi Joomla. Component ada yang gratis
dan berbayar, namun tidak perlu khawatir karena jumlah Component
yang gratis lebih banyak dari yang berbayar. Keduanya sama-sama
memiliki fitur yang lengkap dan handal karena sudah teruji dan akan terus
“dipantau” oleh komunitas Joomla, forum diskusi maupun komentar dari
para pengguna untuk perbaikan sistem agar lebih baik.
Ciri khas file component diawali dengan kata “com” di depan nama
component, misalnya com_docman_1.4.0rc1.zip. Meskipun begitu, ada
beberapa component yang tidak menambahkan awalan “com” pada nama
component.
5.1.2 Menginstal Component
Seperti telah dijelaskan sebelumnya, sebelum menginstal sebuah
component sebaiknya mendownload terlebih dulu file yang diperlukan
meskipun tersedia fasilitas untuk menginstal secara online melalui alamat
direktori server yang akan diinstal (upload).
Untuk menunjang dan memperlancar dalam mempraktekkan materi pada
buku ini, semua file pendukung telah disertakan dalam CD.
1. Sebagai latihan, component yang akan diinstal adalah DocMan/
com_docman_1.4.0rc1 (document manager) yang berfungsi untuk
menyediakan fasilitas download dokumen (artikel) bagi pengguna.
Pertama kali, masuk ke halaman administrator kemudian pilih menu
Extensions > Install/Uninstall.
44
Gambar 5.1 Memilih menu Instalasi
2. Setelah berada pada halaman Extension Manager, klik tombol
Browse untuk menentukan lokasi file component yang dimaksud.
Gambar 5.2 Menentukan lokasi file
3. Temukan file com_docman_1.4.0rc1.zip di dalam CD buku ini yang
berada pada folder component.
Gambar 5.3 File component yang akan diinstal
45
4. Jika sudah ditemukan, klik tombol Open untuk melanjutkan proses
selanjutnya.
Gambar 5.4 Menetapkan file yang akan diinstal
5. Klik tombol Upload File & Install untuk melakukan proses instalasi.
Gambar 5.5 Mulai mengupload dan menginstal component
6. Tunggu beberapa saat hingga proses instalasi selesai. Jika instalasi
berhasil akan muncul informasi Install Component Success.
Gambar 5.6 Proses instalasi berhasil
46
BAB 6
MENGELOLA ARTIKEL
Seorang web master umumya membuat item-item menu terlih dulu
sebelum memasukkan artikelnya. Ini biasa dilakukan dalam membuat
website yang bersifat statis (menggunakan tag HTML biasa).
Oleh karena Joomla merupakan sebuah aplikasi web yang bersifat
dinamis, maka penulisan artikel lebih didahulukan dari pembuata itemitem menu. Jika diurutkan proses pembuatan web portal menggunakan
Joomla, yang pertama kali dilakukan adalah membuat Section, lalu
Category, kemudian Content (Article), dan yang terakhir Item menu.
Dalam prakteknya, berhubung masih terdapat artikel lain dari Joomla
yang tidak digunakan, terpaksa harus menghapus terlebih dulu Section,
Category, dan Content tersebut.
Sebuah Category tidak dapat terhapus jika masih terdapat artikel yang
berada dalam kategorit tersebut. Sebuah Section tidak dapat terhapus jika
masih terdapat Category di dalamnya. Secara singkat dapat dijelaskan,
semua artikel, category, dan section harus dihapus secara permanen dari
administrasi Joomla agar pengelolaannya lebih mudah dan cepat.
77
Identifikasi nama Section dan Category sejak awal sangat perlu
dilakukan. Hal ini untuk memudahkan ketika ingin menulis sebuah
artikel, karena artikel yang akan ditulis harus mengacu pada nama
Category dan Section. Jika tidak nama Category dan Section yang
dinginkan tidak nampak dalam daftar, maka harus dibuat terlebih dulu.
Sebagai persiapan untuk membuat web portal, berikut ini contoh struktur
pembuatan Section (S) dan Category (C).
A.
B.
C.
78
OLAHRAGA (S)
1.
Sepak Bola (C)
2.
Bulu Tangkis (C)
3.
Tenis Meja (C)
4.
Catur (C)
EKONOMI & BISNIS (S)
1.
Perbankan (C)
2.
Investasi (C)
3.
Pasar Modal (C)
4.
UKM (C)
KILAS NUSANTARA (S)
1.
Bali (C)
2.
Banten (C)
3.
DKI Jakarta (C)
4.
Jawa Barat (C)
D.
TEKNOLOGI INFORMASI (S)
1.
PC/Notebook (C)
2.
Ponsel/Mobile (C)
3.
Kamera Digital (C)
4.
Hardware (C)
Jadi, sebelum menulis artikel harus membuat Section dan Category
terlebih dulu agar ketika ditampilkan halaman utama website lebih
terstuktur sehingga pengguna tidak merasa bingung dalam menyerap
informasi yang ditampilkan.
Secara default, dalam administrator Joomla sudah tersedia Section,
Category dan Content (artikel). Bisa saja Section dan Category tersebut
digunakan jika sesuai dengan tema artikel yang akan ditulis. Namun jika
tidak cocok, dapat dihapus agar tidak menjadi sampah dalam database.
Perlu diketahui, Category tidak dapat dihapus jika di dalamnya masih
memiliki Content (artikel), dan Section tidak dapat terhapus jika masih
terdapat Category. Artinya, untuk menghapus Category, terlebih dulu
harus menghapus Content, dan untuk menghapus Section terlebih dulu
harus menghapus Category.
Pembahasan berikut ini sudah diatur sedemikian rupa agar dapat
memahami secara mudah dalam hal pembuatan web portal dari awal.
Yang perlu diperhatikan adalah urutan proses seperti telah dijelaskan
sebelumnya. Jadi, untuk langkah awal sebaiknya membersihkan Content,
Category, dan Section terlebih dulu. Jika sudah bersih, selanjutnya
membuat Section lalu Category dan yang terakhir membuat Article.
79
6.1 Mengelola Section
Tingkatan tertinggi dalam pengelolaan artikel pada sistem administasi
Joomla adalah Section. Jika masih merasa kurang paham tentang struktur
tingkatan pengelolaan artikel dalam sistem Joomla, baca lagi pada
pembahasan sebelumnya tentang Category. Seperti halnya Category yang
dapat memiliki banyak Content tak terbatas, Section juga dapat memiliki
Category yang tak terbatas pula.
6.1.1 Menghapus Section
Secara default, Joomla menyertakan tiga nama Section yaitu: About
Joomla, News, dan FAQs. Meski begitu, Section tersebut dapat dihapus
dan ditambahkan setiap saat bergantung kebutuhan. Anda tidak dapat
menghapus Section jika masih terdapat beberapa Category di dalamnya.
Untuk itu, Anda harus menghapus Category terlebih dulu.
1. Untuk menghapus Section, pilih menu Content > Section Manager.
Gambar 6.1 Memilih menu Section Manager
2. Daftar Section yang disediakan oleh Joomla
80
Gambar 6.2 Daftar Section yang telah ada
3. Untuk menghapusnya, centang semua nama Section tersebut. Pilih
tombol Delete.
Gambar 6.3 Menyeleksi semua Section
6.1.2 Membuat Section
Dalam menentukan nama Section, terlebih dulu harus mengetahui tema
artikel yang akan ditulis nantinya. Hal ini untuk mempermudah
pengelolaan nama Category dan Section yang sesuai dengan artikel
tersebut. Sebagai studi kasus, berikut ini penjelasan pembuatan Section
81
yaitu : OLAHRAGA, EKONOMI & BISNIS, KILAS NUSANTARA,
dan TEKNOLOGI INFORMASI.
1. Pertama kali pilih menu Content > Section Manager.
Gambar 6.4 Memilih menu Section Manager
2. Setelah berada dalam Section Manager, pilih tombol New.
Gambar 6.5 Tampilan Section Manager yang kosong
3. Masukkan nama Section = Olahraga pada kolom Title. Kemudian
Aktifkan radio button Published = Yes. Aturlah Public Access =
Public.
82
Gambar 6.6 Memasukkan judul Section dan Alias
4. Jika Anda ingin menambahkan gambar agar nampak seperti gambar
berikut.
Gambar 6.7 Contoh tampilan Section dengan gambar
5. Pilih salah satu daftar yang dalam Image.
Gambar 6.8 Memilih gambar dari daftar
6. Anda dapat menambahkan gambar dari komputer (PC) melalui
perintah Media Manager.. Untuk sementara simpan sejenak
pembuatan Section OLAHRAGA dengan cara memilih tombol Save.
83
Gambar 6.9 Menyimpan Section baru
7. Pilih menu Site > Media Manager.
Gambar 6.10 Memilih menu Media Manager
8. Setelah berada dalam administrator Media Manager.
Gambar 6.11 Tampilan halaman Media Manager
84
9. Pilih folder stories.
Gambar 6.12 Menentukan folder yang tepat
10. Pada bagian bawah terdapat menu untuk mengupload file. Pilih menu
Browse file.
Gambar 6.13 Menu Browse file untuk memilih gambar
11. Tentukan file gambar yang akan diupload, lalu tekan tombol Open.
File gambar untuk praktek, disediakan dalam CD buku ini.
Gambar 6.14 Menentukan gambar yang akan diupload
85
12. Tekan menu Start Upload.
Gambar 6.15 Mulai mengupload
13. Gambar yang telah terupload sudah muncul dalam daftar, artinya
proses upload berhasil.
Gambar 6.16 Proses upload berhasil
14. Kembali ke Section Manager, pilih menu Content > Section
Manager.
Gambar 6.17 Memilih menu Section Manager
86
15. Tekan Section OLAHRAGA
Gambar 6.18 Mengaktifkan Section
16. Pada bagian Image, pilih gambar olahraga.jpg dari daftar gambar.
Gambar 6.19 Memilih gambar untuk Section OLAHRAGA
17. Setelah selesai, tekan tombol Save untuk menyimpan perubahan.
Gambar 6.20 Menyimpan perubahan
87
18. Langkah selanjutnya, membuat Section EKONOMI & BISNIS. Pilih
tombol New.
Gambar 6.21 Memilih tombol New
19. Masukkan nama Section EKONOMI & BISNIS pada kolom Title.
Kemudian Aktifkan radio button Published = Yes. Aturlah Public
Access = Public.
Gambar 6.22 Memasukkan Judul dan Alias baru
20. Sertakan gambar ekonomi&bisnis.jpg dalam daftar Image. Jika
belum nampak dalam daftar, upload gambar terlebih dulu dalam
Media Manager seperti telah dijelaskan sebelumnya. (Lihat Gambar
6.23)
21. Setelah selesai, tekan tombol Save untuk menyimpan. (Lihat Gambar
6.24)
88
Gambar 6.23 Memilih gambar untuk Section EKONOMI & BISNIS
Gambar 6.24 Keterangan gambar
22. Untuk melatih keterampilan Anda, cobalah membuat sendiri Section
lain yaitu: KILAS NUSANTARA dan TEKNOLOGI INFORMASI.
Jika telah membuat semua Section, maka akan nampak dalam daftar
Section Manager.
23. Langkah selanjutnya adalah membuat Category. (Lihat Gambar
6.25).
89
Gambar 6.25 Keterangan gambar
6.2 Mengelola Category
Category dapat memiliki beberapa artikel (content) dengan jumlah tak
terbatas. Penentuan nama category harus disesuaikan dengan nama
Section yang diikutinya dan tema-tema artikel berada di bawahnya yang
nantinya akan ditulis. Sebagai contoh, jika nama Section = SPORT maka
nama Category yang sesuai adalah Sepak Bola, Buku Tangkis, Bola Voli,
Catur, dan lain-lain.
Untuk tema artikel harus pula disesuaikan dengan nama Category yang
dipilihnya. Jika berita atau artikel berisi informasi tentang bursa transfer
pemain sepak bola maka nama Category harus Sepak Bola.
6.2.1 Menghapus Category
Secara default, Joomla menyertakan sembilan nama Category yaitu: The
Project, The CMS, The Community, General, Current User, New to
Joomla, Language, Latest, dan Newsflash. Meski begitu, Category
tersebut dapat dihapus setiap saat. Hal ini dilakukan agar category
tersebut tidak menjadi sampah dalam database karena tidak kita gunakan.
90
BAB 7
MENGELOLA MENU
Tampilan utama sebuah website portal sangat berpengaruh pada feedback
pengunjung terhadap website tersebut dalam menyajikan informasi yang
beragam. Tidak jarang pengunjung hanya beberapa saat saja mengunjungi
website tersebut meskipun sebenarnya informasi yang disajikan sangat
penting untuk diketahui. Hal ini dikarenakan pengaturan dan tata letak
menu kurang dipahami pengguna dan terkesan “asal tempel”.
Padahal, layout sebuah web portal justeru berfungsi sebagai pemandu
(guide) pengunjung dalam menelusuri informasi di dalamnya. Dapat
diilustrasikan, jika seorang pemandu yang kurang memahami keinginan
pengunjung kemudian mengajak untuk menelusuri sebuah tempat yang
dijadikan obyek penelitian maka pengunjung tersebut akan salah persepsi
terhadap informasi yang didapatkan, apalagi pengunjung berasal dari
berbagai latar belakang budaya, bangsa, dan bahasa yang beragam. Untuk
mengatasi hal tersebut, perlu seorang pemandu yang cerdas, ramah,
berpenampilan menarik dan mengerti keinginan pengunjung.
Sama halnya dengan seorang guide, menu dan navigasi dalam web portal
juga harus memiliki sifat cerdas dalam menyiasati pengunjung yang
memiliki latar belakang pendidikan, budaya, maupun bahasa. Tampilan
119
menu dan navigasi harus berpenampilan menarik guna menarik perhatian
pengunjung. Menu dan navigasi dalam web portal harus pula
menyertakan pilihan bahasa sesuai dengan kemampuan bahasa yang
dipahami pengunjung.
Secara default, Joomla menyediakan 6 Menu yaitu: Main Menu, User
Menu, Top Menu, Resources, Example Pages, dan Key Concepts.
Meskipun begitu, Anda dapat menambahkan menu lain misalnya:
Kesehatan, Politik, Keluarga dan lain. Menu-menu yang tidak digunakan
dapat dihapus, namun khusus untuk Main Menu tidak dapat dihapus
karena menu tersebut harus tetap ada untuk dijadikan default menu.
7.1 Mengelola item menu dalam Main Menu
(Menu Utama)
Semua item yang berada di bawah Menu Utama (Main Menu) dapat
dihapus maupun dimodifikasi. Ini berlaku untuk semua item yang berada
di bawah menu-menu lain yang tersedia. Umumnya, Main Menu berada
di bagiak kiri halaman utama website. Tidak tertutup kemungkinan
berada di bagian kanan halaman utama. Itu semua bergantung default
template yang digunakan. Oleh karena itu masing-masing template akan
menghasilkan tampilan menu dan navigasi yang berbeda.
120
Gambar 7.1 Contoh beberapa item menu di dalam Main Menu
Teknik pembuatan item menu sangat sederhana, cukup memasukkan
nama item menu kemudian memilih jenis link yang tersedia. Untuk lebih
jelasnya, ikuti langkah-langkah berikut ini.
7.1.1 Menghapus item menu pada Main Menu
Item menu yang berada di dalam Main Menu sebaiknya dibersihkan
terlebih dulu karena item-item menu tersebut tidak digunakan lagi. Hal ini
berlaku untuk semua item menu yang berada di dalam Menu lain yang
ada. Teknik pembuatan item menu sangat sederhana, cukup membuat link
pada Article atau Component yang dimaksud dengan berbagai pilihan
tampilan dalam bentuk blog, table ataupun list. Sebelum membuat item
menu pada Main Menu sebaiknya menghapus item-item yang tidak
diperlukan.
1. Untuk menghapus item menu pilih menu Menus > Main Menu.
121
Gambar 7.2 Memilih menu Main Menu
2. Setelah masuk dalam halaman Menu Item Manager untuk mainmenu
akan nampak beberapa item menu yang telah dibuat oleh sistem
Joomla. Pilih semua item menu tersebut dengan cara mangaktifkan
combo box di sebelah kiri Item Menu kecuali Home.
Gambar 7.3 Mengaktifkan beberapa item menu
122
3. Untuk menghapusnya, tekan tombol Trash.
Gambar 7.4 Tombol untuk menghapus item menu
4. Jika berhasil terhapus akan muncul informasi bahwa item menu telah
terhapus dan disimpan dalam keranjang sampah..
Gambar 7.5 Informasi bahwa item telah terhapus
7.1.2 Membuat Item menu
Setelah item menu pada Main Menu telah terhapus, berikut ini membahas
teknik pembuatan item menu. Seperti telah dijelaskan di awal, bahwa
item menu dapat menghubungkan (link) Article maupun Component,
misalnya: Games, Chatting, dan component lain.
Sedangkan untuk tampilan berita dapat berupa Blog, List, maupun Table.
Untuk lebih jelasnya ikuti langkah-langkah berikut
123
Tipe item menu bermacam-macam yang dapat dibedakan menjadi empat
tipe yaitu: internal link, external link, separator, dan alias. Sedangkan
untuk tipe Internal link juga memiliki beberapa kategori item menu yaitu:
Article, Concact, Newsfeed, Poll, Search, User, Weblink, dan Wrapper.
Di sini tidak membahas seluruh tipe item menu, namun khusus yang
berhubungan dengan pembuatan web portal saja.
Membuat item menu Article dalam Section format Blog
1. Masih berada di halaman Menu Manager [mainmenu], pilih tombol
New untuk membuat item menu baru.
Gambar 7.6 Tombol untuk membuat item menu baru
2. Pada halaman ini, akan muncul beberapa pilihan item menu. (Lihat
Gambar 7.7)
3. Pilih link Articles, akan nampak beberapa pilihan jenis artikel yang
akan ditampilkan. (Lihat Gambar 7.8)
4. Pilih Section > Section Blog Layout, berita yang akan dapat
ditampilkan adalah semua berita dalam sebuah Section misalnya:
OLAHRAGA. Maka semua berita yang berada dalam Section
tersebut akan muncul, memuat semua Category Bulu Tangkis, Catur,
Sepakbola, dan Tenis Meja. (Lihat Gambar 7.9)
124
Gambar 7.7 Tampilan beberapa tipe item menu
Gambar 7.8 Tampilan beberapa item menu untuk artikel yang akan
ditampilkan
125
Gambar 7.9 Tipe item menu dalam Section berformat Blog
5. Setelah berada pada halaman Section Blog Layout, masukkan judul
item menu pada kolom Title. Pada bagian Parent Item, arahkan ke
Top karena item menu tersebut sebagai item utama, artinya bukans
sebagai sub item menu.
Gambar 7.10 Memilih gambar dari daftar
6. Pada Tab Parameter (Basic), pilih Section yang diinginkan. Pada
bagian Description dan Description Image, aktifkan radio button
Show. Leading = 0, Intro = 4, Columns = 2, dan Link = 4.
126
Gambar 7.11 Mengatur Parameter (Basic) untuk item menu
7. Jika telah selesai, klik tombol Save untuk menyimpan.
Gambar 7.12 Tombol untuk menyimpan item menu baru
8. Hasilnya
akan
nampak
pada
halaman
utama,
ketikkan
http://localhost/webportal pada browser Anda.
127
Gambar 7.13 Hasil pembuatan item menu baru pada halaman utama
9. Ketika item menu OLAHRAGA diaktifkan maka akan menghasilkan
tampilan berita dalam format blog seperti nampak pada gambar
berikut.
Gambar 7.14 Tampilan Section berformat Blog
128
BAB 8
MEMBUAT MINI FRONTPAGE
Halaman utama sebuah website memiliki peran yang sangat penting bagi
para pengunjung untuk mencari informasi yang dibutuhkan secara cepat
dan menarik. Pada beberapa website portal, kombinasi antara teks,
gambar, animasi, dan media lainnya dapat diatur sedemikian rupa
sehingga tidak terkesan “semrawut”. Tema berita juga dapat ditempatkan
secara terstruktur tanpa mengurangi keindahan tampilan.
Website yang dibuat dengan Joomla! mampu merealisasikan kebutuhan
tersebut dengan cara menambahkan component, module, dan plugin
sehingga sebuah berita terbaru maupun terpopuler dapat ditempatkan
pada bagian yang jelas (eye catching). Hal ini dapat memberikan
perhatian khusus dari para pengunjung.
Ada banyak cara untuk menampilkan berita/artikel dengan tujuan
memberikan informasi kepada pengunjung tentang menarik dan up to
date. Salah satunya adalah membuat beberapa halaman depan mini (Mini
Frontpage) yang dapat menampilkan gambar dengan ukuran kecil,
lengkap dengan deskripsi artikel tersebut.
145
8.1 Mengenal Mini Frontpage
Frontpage umumnya tampil di halaman utama, lengkap dengan gambar
sebagai ilustrasi dan kalimat pembuka dari berita/artiel yang dimaksud.
Jumlah artikel yang akan ditampilkan dalam frontpage juga dapat diatur
sesuai kebutuhan.
Dengan memanfaatkan ekstensi dari pihak ketiga, frontpage dengan
ukuran kecil (mini) dapat ditampilkan di halaman utama dan dapat diatur
berdasarkan Section dan Cetogory. Dengan memanfaatkan mini
frontpage, berita maupun artikel menjadi semakin informatif.
Gambar 8.1 Contoh bentuk Mini Frontpage untuk menampilkan artikel
146
Module untuk menampilkan mini frontpage bervariasi, ada yang gratis
namun ada pula yang berbayar. Buku ini menyertakan file pendukung
untuk menginstal mini frontpage yang gratis, jadi tidak perlu membayar
atau mendownload terlebih dulu.
8.2 Menginstal Mini Frontpage
Proses instalasi frontpage sangat mudah, sama halnya melakukan instalasi
untuk ekstensi lain yang sudah dibahas pada bab sebelumnya.
1. Untuk
melakukan
instalasi,
pilih
menu
Extensions
>
Instal/Uninstall.
Gambar 8.2 Menu untuk instalasi
2. Tekan tombol Browse untuk menentukan lokasi file.
147
Gambar 8.3 Menentukan lokasi file yang akan diupload
3. Temukan file mini frontpage dari CD yang telah disediakan.
Gambar 8.4 Memilih file yang akan diupload dan diinstal
4. Jika sudah yakin, tekan tombol Open.
Gambar 8.5 Memastikan file yang akan diinstal
5. Klik tombol Upload File & Install untuk melakukan proses instalasi.
Gambar 8.6 Proses Upload File dan Install
6. Tunggu beberapa saat hingga proses instalasi selesai. Jika telah
berhasil akan muncul informasi bahwa proses instalasi berhasil (lihat
Gambar 8.7)
148
7. Selanjutnya mengatur parameter untuk menampilkan berita melalui
module Mini Frontpage di halaman utama.
Gambar 8.7 Informasi instalasi module Min Frontpage telah berhasil
8.3 Mengatur Parameter Mini Frontpage
Module mini frontpage memiliki halaman untuk mengatur tampilan,
jumlah artikel, besarnya gambar (thumbnail), artikel yang ditampilkan,
dan pengaturan lainnya. Sebelum mengatur parameter terlebih dulu harus
mengetahui ID Section, ID Category, dan ID Article karena nomor
identitas tersebut (ID) digunakan sebagai pengaturan parameter untuk
menampilkan artikel.
149
1. Pertama kali, periksa nomor ID Section dengan cara memilih menu
Content > Section Manager.
Gambar 8.8 Memilih menu ke halaman Section Manager
2. Apabila telah berada di halaman Section Manager, nampak daftar
nama section yang telah dibuat sebelumnya. Pada kolom paling
kanan nampak nomor ID, nomor identitas tersebut yang nantinya
akan digunakan untuk mengatur parameter Mini Frontpage dalam
ruang lingkup Section.
Gambar 8.9 Tiap Section memiliki ID yang berbeda
150
3. Setelah mencatat ID masing-masing Section, langkah selanjutnya
mencatat ID Category. Untuk itu, pilih menu Content > Category
Manager.
Gambar 8.10 Memilih menu ke halaman Category Manager
4. Pada halaman Category Manager, nampak beberapa Category yang
telah dibuat sebelumnya dan pada kolom paling kanan tertera nomor
identitas (ID). Nomor identitas ini juga akan digunakan untuk
mengatur parameter Mini Frontpage dalam ruang lingkup Category.
Catatlah nomor identitas tersebut.
151
Gambar 8.11 Tiap Category memiliki ID yang berbeda
5. Selanjutnya, pilih menu Content > Article Manager untuk mencatat
nomor identitas masing-masing artikel.
Gambar 8.12 Memilih menu untuk ke halaman Article Manager
6. Catatlah semua ID artikel berdasarkan Category dan Section.
152
Gambar 8.13 Mencatat nomor ID artikel
7. Langkah selanjutnya mengatur parameter Mini Frontpage, pilih menu
Extensions > Module Manager.
Gambar 8.14 Menu untuk mengatur Parameter
8. Pada halaman Module Manager temukan module Mini Frontpage.
153
BAB 9
MENAMBAHKAN MOVIE
Website akan lebih menarik jika ditambahkan cuplikan video (movie)
yang memiliki durasi singkat. Movie marupakan salah satu informasi
dalam bentuk gambar bergerak. Meskipun Movie hanya berdurasi singkat
namun dapat mewakili informasi berbentuk teks dalam beberapa
paragraph.
Website yang dibuat dengan Joomla! dapat menampilkan Movie dari
server sendiri maupun dari server lain (misalnya Youtube). Format video
yang dapat dijalankan oleh sistem Joomla! bervariasi tergantung Module
dan plugin yang digunakan. Beberapa format video yang dapat dijalankan
oleh sistem Joomla! antara lain: Flash Video, Windows Media, Quick
Time, Shockware, dan Real Player. Beberapa Module Movie Player yang
berkembang saat ini ada yang gratis dan berbayar.
9.1 Mengenal Extensions Video Player
File Video Movie yang berasal dari server sendiri relatif lebih cepat untuk
dijalankan dibanding mengambil file video dari server orang lain. Perlu
diingat, jika file video diletakkan di server sendiri akan mempengaruhi
165
kecepatan akses dan bandwidth yang dimiliki. Oleh karena itu sebelum
menampilkan video pada website, perhitungkan kembali perbandingan
menggunakan server sendiri atau server orang lain.
Pada pembahasan ini diasumsikan menggunakan server sendiri, artinya
file video tersimpan dalam server pribadi sehingga Module yang
digunakan khusus untuk file video yang berasal dari server sendiri bukan
dengan cara mengambil script tertentu untuk menampilkan video
(ambed).
Extensions Video Player yang akan diinstal berupa Module dan
Component harus dimasukan semuanya. Jika salah satu tidak terinstal
maka tidak akan berfungsi dengan baik. Component akan mengatur
proses upload file video, sedangkan Module akan menampilkan video
yang telah diupload sebelumnya dalam Component.
9.2 Menginstal Video Player
Proses instalasi YJ Movie Studio sangat mudah, sama halnya menginstal
Extensions lain.
1. Pertama, pilih menu Extensions > Install/Uninstall.
166
Gambar 9.1 Menu untuk instalasi Video Player
2. Klik tombol Browse untuk menentukan file yang akan diupload.
Gambar 9.2 Tombol Browse untuk menetukan lokasi file
3. Pilih Component yj_movie_studio_15_component.zip, lalu klik
tombol Open.
Gambar 9.3 Memilih file yang akan diupload
4. Klik tombol Upload File & Install.
167
Gambar 9.4 Mulai proses upload file dan instalasi
5. Tunggu beberapa saat hingga proses instalasi selesai. Jika berhasil
akan muncul informasi bahwa proses instalasi telah berhasil.
Gambar 9.5 Proses instalasi component sudah berhasil
6. Langkah selanjutnya menginstal Module. pilih menu Extensions >
Install/Uninstall.
168
Gambar 9.6 Menginstal Module
7. Klik tombol Browse untuk menentukan file yang akan diupload.
Gambar 9.7 Mencari lokasi file yang akan diupload
8. Pilih Module yj_movie_studio_15_module.zip, tekan tombol Open.
169
Gambar 9.8 Memilih file yang akan diupload
9. Klik tombol Upload File & Install.
Gambar 9.9 Proses upload file dan instalasi
10. Tunggu beberapa saat hingga proses instalasi selesai. Jika berhasil
akan muncul informasi bahwa proses instalasi telah berhasil.
170
BAB 10
SCROLLING RANDOM ARTICLE
Berbagai macam bahasa pemrograman dapat dikombinasikan dalam
sebuah
website, seperti: PHP,
Javascript maupun Ajax untuk
menghasilkan sebuah tampilan website yang interaktif, informatif dan
inovatif. Namun tidak semua orang dapat melakukan hal itu, apalagi jika
keterampilan dan pengetahuan tentang bahasa pemrograman masih sangat
terbatas. Siapapun ingin websitenya terlihat menarik, mampu memenuhi
kebutuhan pengguna, banyak yang mengunjungi, dan memiliki nilai
prestise tersendiri.
Meskipun Joomla! merupakan sebuah software yang gratis, bukan berarti
sistem yang dibuat asal-asalan (tidak layak pakai). Justeru software gratis
tersebut banyak pihak yang membantu melengkapi kekurangan,
menambahkan keamanan, dan menyediakan beberapa modul tambahan
yang fleksibel tanpa mengganggu sistem yang sudah ada, salah satunya
adalah Random Article. Random Article merupakan salah satu module
yang dikembangkan oleh pihak ketiga untuk menampilkan berita sesuai
Section maupun Category secara acak maupun berurutan dengan berbagai
macam efek transisi.
181
10.1 Mengenal Extensions Random Article
Umumnya, bahasa yang digunakan untuk membuat Random Article
adalah Javascript yang dikombinasikan dengan PHP. Bagi pengembang
web pemula mungkin masih belum mampu mengembangkan sendiri
module tersebut.
Beruntung para pengembang Joomla! sudah menyiapkan beberapa
module yang dapat menampilkan atikel atau berita secara acak, salah
satunya adalah gk_news_highlighter. Module ini hanya mampu
menampilkan judul artikel dan deskripsi yang ditampilkan di halaman
utama dengan beberapa pilihan transisi, mulai dari scroll, default, hingga
slide. Jumlah efek transisi lebih dari tiga puluh.
Modul News Highlighter hanya salah satu contoh module Random
Article yang bersifat gratis. Masih banyak module lain yang sejenis
beredar di internet dan dapat didownloa secara gratis maupun berbayar.
10.2 Menginstal Extensions Random Article
1. Pertama, pilih menu Extensions > Install/Uninstall.
Gambar 10.1 Menu untuk instalasi Random Article
182
2. Klik tombol Browse untuk menentukan file yang akan diupload.
Gambar 10.2 Tombol Browse untuk menetukan lokasi file
3. Pilih Component yj_movie_studio_15_component.zip, lalu klik
tombol Open.
Gambar 10.3 Memilih file yang akan diupload
4. Klik tombol Upload File & Install.
Gambar 10.4 Mulai proses upload file dan instalasi
183
5. Tunggu beberapa saat hingga proses instalasi selesai. Jika berhasil
akan muncul informasi bahwa proses instalasi telah berhasil.
Gambar 10.5 Proses instalasi component sudah berhasil
10.3 Mengatur Parameter
Setelah proses instalasi berhasil, langkah selanjutnya adalah mengatur
parameter seperti: menentukan Section, Category, dan Article yang akan
ditampilkan, mengatur transisi, mengatur banyak karakter pada judul
maupun deskripsi, dan masi banyak lagi parameter yang harus diatur
Untuk lebih jelasnya, berikut ini pengaturan parameter untuk Random
Article.
1. Pertama kali pilih menu Extensions > Module Manager.
Gambar 10.11 Mengatur parameter
184
2. Setelah berada pada halaman Module Manager, temukan module
Gavick News Highlighter GK1.
Gambar 10.12 Menemukan module yang baru diinstal
3. Jika sudah ditemukan, klik module tersebut untuk mengatur
parameter.
Gambar 10.13 Mengedit module
4. Pada halaman Module [Edit], aturlah beberapa spesifikasi pada
bagian Details seperti nampak pada gambar berikut.
Gambar 10.14 Mengatur Details untuk module
185
BAB 11
MENAMBAHKAN SLIDE SHOW
Salah satu ciri web portal adalah adanya beberapa iklan (banner) yang
tampil secara diam maupun bergerak. Iklan yang bergerak dapat berupa
dokumen Flash maupun gambar datar (image flate) yang bergerak secara
horizontal atau vertical dengan cara menambahkan script di dalamnya.
Untuk membuat efek tersebut memerlukan pengetahuan bahasa
pemrograman web tingkat mahir, hal ini menjadi kendala bagi seorang
pengembang web pemula. Untuk mengatasi masalah tersebut, Joomla!
yang didukung oleh para pengembang pihak ketiga menyediakan sebuah
module yang dapat menampilkan gambar dengan efek transisi
(scroll,linier, dll). Dan ketika gambar tersebut tersentuh oleh mouse maka
akan menuju ke sebuah halaman website tertentu.
11.1 Mengenal Extensions Slide Show
Jumlah ekstensi (extensions) Slide Show yang berkembang saat ini cukup
banyak, ada yang gratis dan ada pula yang berbayar. Tampilan yang
dihasilkan
juga
bermacam-macam,
tergantung
pengembangnya.
Umumnya, module jenis ini mengedepankan efek transisi, kecepatan
193
transisi, warna background, dan luas area slide di halaman utama. Selain
efek slide show, ada pula module yang dapat menampilkan gambar secara
acak (rotate).
Ada pula jenis slide show khusus untuk header, ini biasanya digunakan
untuk mengganti gambar header agar nampak lebih interaktif dan menarik
dengan menampilkan beberapa gambar yang tampil secara bergantian,
dilengkapi efek transisi yang halus. Pada bab lain dalam buku ini akan
dibahas tentang image header rotator untuk mengubah gambar header
yang statis menjadi dinamis.
Gambar 11.1 Contoh tampilan slide show
11.2 Menginstal Horizontal Slide Show
Proses instalasi Horizontal Slide Show sangat mudah, sama halnya
menginstal Extensions lain.
1. Pertama, pilih menu Extensions > Install/Uninstall.
Gambar 11.2 Menu untuk instalasi Slide Show
194
2. Klik tombol Browse untuk menentukan file yang akan diupload.
Gambar 11.3 Tombol Browse untuk menetukan lokasi file
3. Pilih Module mod_slideshow.zip, lalu klik tombol Open.
Gambar 11.4 Memilih file yang akan diupload
4. Klik tombol Upload File & Install.
Gambar 11.5 Mulai proses upload file dan instalasi
195
5. Tunggu beberapa saat hingga proses instalasi selesai. Jika berhasil
akan muncul informasi bahwa proses instalasi telah berhasil.
Gambar 11.6 Proses instalasi module sudah berhasil
11.3 Mengatur Parameter
Sebelum mengatur paramater, sebaiknya menyiapkan terlebih dulu
gambar (images) yang akan ditampilkan di halaman web kemudian
memasukkannya ke dalam folder yang telah ditentukan dalam parameter.
Tinggi (height) dan lebar (width) gambar diusakahan seragam agar
tampilan lebih rapi. Untuk membuat tampilan gambar agar nampak
seragam, dapat memanfaatkan software Adobe Photoshop maupun
aplikasi pengolah gambar lainnya. Yang penting terdapat fasilitas untuk
memotong (crop) gambar sesuai ukuran yang diinginkan.
Lebar dan tinggi gambar perlu diperhatikan juga karena berpengarih pada
ukuran blok module yang tampil di halaman utama. Berikut ini contoh
beberapa gambar yang akan digunakan untuk slide show.
196
Gambar 11.7 Beberapa gambar yang akan digunakan untuk slide show
1. Diasumsikan, semua gambar telah dipersiapkan. Apabila mengikuti
petunjuk buku ini, dapat memanfaatkan gambar yang disertakan
dalam CD buku ini. Sebelum mengatur parameter, terlebih dulu harus
mengupload gambar-gambar yang akan digunakan untuk slide show.
Pilih menu Site > Media Manager (lihat Gambar 11.8).
2. Setelah berada di halaman Media Manager, masuk ke folder images
kemudian buatlah folder baru, misal: slideshow (lihat Gambar 11.9).
3. Selanjutnya, upload semua file gambar ke dalam folder slideshow,
pilih tombol Browse (lihat Gambar 11.10).
197
BAB 12
MULTI-LINGUAL
(MULTIBAHASA)
Jumlah bahasa dalam sebuah website tidak terbatas, tergantung pada
pengelola website tersebut. Adakalanya website bertaraf internasional
menyediakan beberapa bahasa internasional yang paling populer seperti:
English, France, Holland, Germany, dan lain-lain.
Sehingga dengan
adanya fasilitas tersebut, pengguna di seluruh dunia dapat memanfaatkan
informasi dalam berbagai bahasa sesuai dengan bahasa yang dipahami.
Sebelum melakukan proses penterjemahan artikel, tentukan terlebih dulu
Default bahasa yang akan digunakan. Hal ini sangat penting dilakukan
diawal agar proses penterjemahan Section, Category, Module, maupun
Content (artikel) lebih mudah dan cepat.
Diasumsikan default yang digunakan adalah Bahasa Inggris, ketika
membuat Section, Category, maupun Content harus menggunakan bahasa
Inggris. Sistem Joomla hanya mengenal salah satu bahasa sebagai
Defaultnya, hal ini tergantung ketika kita memilih bahasa saat instalasi
awal Jooma.
207
Meskipun begitu, beberapa bahasa dapat diinstal ke dalam sistem Joomla
secara mudah. Beberapa bahasa internasional bisa didapat di internet
secara gratis dan mudah.
12.1 Mengenal Extensions Multi-Lingual
Multi-Lingual merupakan sebuah component yang dapat digunakan untuk
menyediakan fasilitas beberapa bahasa secara mudah. Multilanguge
berbeda dengan Website Translator yang memanfaatkan sebuah web
translator seperti Google Translate (http://www.translate.google.com), di
mana semua informasi dalam sebuah website dapat diterjemahkan secara
otomatis.
Ada banyak extension Multi-Lingual yang bersifat gratis, diantaranya:
JoomFish!, JosLang, MambelFish, Multilang M17n, dan lain-lain yang
dapat
didownload
secara
gratis
di
website
(http://www.joomla.org).
Gambar 12.1 Logo Joom!Fish
208
resmi
Joomla!
12.2 Instalasi Joom!Fish
Joom!Fish merupakan salah satu component yang bersifat “free” atau
gratis, artinya kita dapat memanfaatkan component tersebut tanpa harus
membayar dan bebas dimodifikasi asal tetap mempertahankan hak cipta
asli pembuatnya. Joom!Fish adalah salah satu bagian terkecil dari
component yang dapat digunakan sebagai fasilitas multibahasa secara
fleksibel dan user friendly.
Pengalaman penulis yang telah menggunakan component ini dan telah
digunakan sebagai studi kasus pembuatan website multibahasa yang
sering
diadakan
di
Brainmatics
Cipta
Informatika
(http://www.brainmatics.info) sebagian besar peserta merasa lebih cepat
dalam menerapkannya. Component ini juga telah diterapkan di beberapa
website dalam maupun luar negeri, ini terlihat dari banyaknya website
tutorial dalam berbagai bahasa. Sehingga para pengguna dapat
memahami artikel sesuai bahasa yang dimengerti.
Proses instalasi Multi-Lingual sangat mudah, sama halnya menginstal
Extensions lain.
1. Pertama, pilih menu Extensions > Install/Uninstall.
Gambar 12.2 Menu untuk instalasi Joom!Fish
2. Klik tombol Browse untuk menentukan file yang akan diupload.
209
Gambar 12.3 Tombol Browse untuk menetukan lokasi file
3. Pilih Component jf2.0package_rc.zip, lalu klik tombol Open.
Gambar 12.4 Memilih file yang akan diupload
4. Klik tombol Upload File & Install.
Gambar 12.5 Mulai proses upload file dan instalasi
210
5. Tunggu beberapa saat hingga proses instalasi selesai. Jika berhasil
akan muncul informasi bahwa proses instalasi telah berhasil.
Gambar 12.6 Proses instalasi component sudah berhasil
12.3 Instalasi Bahasa Indonesia
Default bahasa pada web portal dapat ditentukan pada bagian Language,
sehingga ketika pengunjung melihat web portal tersebut pertama kali
yang muncul adalah artikel/berita menggunakan bahasa default yang
digunakan.
Proses instalasi Bahasa Indonesia cukup diduplikasi ke folder language
sistem Jomla!, jadi tidak perlu menginstall melalui perintah Extensions >
Install/Uninstall.
1. Duplikasi folder in-ID yang tersedia dalam CD buku ini.
Gambar 12.7 Folder yang akan diduplikasi
211
2. Tempatkan hasil duplikasi ke folder language (lihat Gambar 12.8).
3. Langkah selanjutnya, duplikasi file gambar in.gif ke dalam folder
component/com_jomfish/images/flags (lihat Gambar 12.9).
Gambar 12.8 Letak foder untuk menduplikasi folder in-ID
Gambar 12.9 Menduplikasi bendera Indonesia
212
12.4 Languages Configuration
Konfigurasi Joom!Fish mengatur default bahasa untuk web portal untuk
menampilkan seluruh artikel di dalamnya, kode bahasa (short code), ISO
code, nama file, dan gambar bendera sebagai pilihan yang akan tampil di
halaman utama (Frontpage).
1. Pilih menu Component > Joom!Fish > Language.
Gambar 12.10 Mengatur Bahasa
2. Nampak dua bahasa yang akan digunakan pada web portal. Untuk
menambahkan bahasa lain ikuti petunjuk pada pembahasan
sebelumnya (lihat Gambar 12.11).
3. Secara default, Bahasa Indonesia dalam status nonaktif. Untuk
mengaktifkannya beri tanda centang pada bagian Active, kemudian
tekan tombol Save (lihat Gambar 12.12).
213
Gambar 12.11 Daftar bahasa yang ada dalam sistem Joomla!
Gambar 12.12 Mengaktifkan bahasa Indonesia
4. Selanjutnya, mengaktifkan default bahasa. Saat instalasi Joomla!,
web portal menggunakan Bahasa Inggris untuk sistemnya. Apabila
ingin mengubah default bahasa menjadi Bahasa Indonesia, pilih
menu Extensions > Language Manager.
Gambar 12.13 Menu untu mengatur default bahasa
214
BAB 13
MEMPERCANTIK TAMPIL WEB
Website yang baik bukan terletak pada banyaknya animasi yang
ditampilkan, tidak juga karena banyaknya video yang disediakan atau
banyaknya warna yang dikombinasikan. Website yang bagus bukan
terletak pada tampilan header yang besar dan banyaknya animasi Flash.
Animasi dan Video hanyalah salah satu bentuk informasi selain teks.
Website yang baik adalah web yang menampilkan sebuah berita yang
sangat dibutuhkan masyarakat dalam ruang lingkup yang tidak terbatas
dan sesuai karakteristik web tersebut. Misalnya web portal umumnya
menampilkan informasi atau berita, baik ekonomi, hukum, lingkungan
hidup, teknologi informasi, olah raga, dan bidang lain yang ada di dalam
maupun di luar negeri, misalnya situs http://www.detik.com.
Ada juga sebuah website yang menampilkan informasi khusus teknologi
informasi yang dibuat berdasarkan kompetensi seperti: pemrograman,
sistem operasi, desaing grafis, animasi, linux, dan lain-lain. Salah satu
web yang dimaksud adalah http://www.ilmukomputer.org.
Template Joomla! dirancang untuk mudah dimodifikasi oleh pengguna,
baik gambar, warna teks, latar belakang (background), hyperlink, border,
233
spasi antar teks, spasi antar tabel, warna border, warna tabel, dan
spesifikasi lain yang dapat diedit secara mudah. Bahkan pihak ketiga juga
mengembangkan sebuah Tool khusus yang dapat digunakan untuk
membuat template Joomla! secara cepat dan impresif, seperti pengaturan
menu popup dan penyediaan Tab-tab.
13.1 Memodifikasi Template
Beberapa pengunjung blog penulis di http://www.slametriyanto.net
maupun
konsultasi
online
dengan
Yahoo
Messenger
=
[email protected], sebagian besar menanyakan bagaimana cara
mengedit template Joomla!.
Untuk mengubah sebuah template terlebih dulu harus memperhatikan
default template yang sedang digunakan. Jika tidak, dikhawatirkan
modifikasi template yang telah dilakukan tidak memberikan dampak pada
web portal karena salah dalam mengedit template, misalnya template A
adalah default yang digunakan pada website, namun yang diedit justeru
template C.
Umumnya, sebagian besar pengguna Joomla! ingin mengubah gambar
header dan footer agar tampilannya lebih impresif. Nah, untuk
memodifikasi template, terutama bagian header (gambar) ada beberapa
teknik yang diterapkan tergantung template yang digunakan.
Umumnya untuk mengganti header (gambar) berada di file index.php
yang berada di dalam folder template/namadefaulttemplate. Namuna ada
kalanya tidak berada di dalam scipt index.php tetapi berada di script
CSS.
234
1. Sebagai contoh, diasumsikan menggunakan template JA_Purity.
Untuk mengganti header (gambar) terlebih dulu harus membuka file
index.php di dalam folder templates/ja_purity.
Gambar 13.1 Mengedit file index.php
2. Buka file tersebut menggunakan Notepad, Wordpad atau Notepad++
(tersedia dalam CD) Temukan scipt <!-- BEGIN: HEADER -->.
Gambar 13.2 Menemukan script untuk mengganti gambar header
3. Di dalam script tersebut terdapat kode php yang menginstruksikan
untuk mengacak (random) gambar di dalam folder images/header.
235
Gambar 13.3 Script untuk random image
4. Jika diperhatikan dalam script tersebut mengarah ke folder
templates/ja_purity/images/header. Ternyata setelah diperisa folder
tersebut berisi tiga gambar yaitu: header1, header2, dan header3.
Gambar 13.4 Tiga buah gambar yang dirandom
5. Pada halaman utama, gambar header muncul secara acak ketika
memilih item menu Home.
Gambar 13.5 Tampillan header di halaman utama
236
6. Selanjutnya gambar tersebut dapat diganti dengan gambar yang kita
inginkan. Ukuran gambar juga dapat diubah, namun perlu diingat
ketika mengubah ukuran gambar harus memodifikasi pula beberapa
file di dalam folder CSS (akan dibahas nanti) sehingga perubahan
akan sesuai keinginan.
13.2 Mengganti Gambar Header dan Logo
Seperti telah dijelaskan sebelumnya, bahwa gambar header dapat diubah
ukurannya
sesuai
keinginan.
Untuk
mengganti
gambar
dapat
memanfaatkan aplikasi pengolah gambar, misalnya Adobe Photoshop.
1. Jika mengikuti pentunjuk dalam buku ini, aktifkan Adobe Photoshop
versi 7, 8, 9, 10 atau 11 (jika tidak ada software tersebut dapat diganti
dengan yang lain) kemudian bukalah salah satu file tersebut misal:
header1.jpg.
Gambar 13.6 Mengedit file gambar dengan Adobe Photoshop
2. Pilih menu Image > Canvas Size (lihat Gambar 13.7).
237
3. Dalam kotak dialog Canvas Size, masukkan 150 pixel untuk Height.
Arahkan tanda panah ke bawah (lihat Gambar 13.8). Lalu Klik OK.
Gambar 13.7 Menu untuk mengubah ukuran kanvas
Gambar 13.8 Mengubah ukuran kanvas
238
4. Maka akan muncul kanvas putih di bawah gambar tersebut.
Gambar 13.9 Ukuran kanvas gambar telah berubah
5. Selanjutnya, modifikasi gambar tersebut sesuai keinginan. Simpan
file dokumen menjadi header1.psd.
Gambar 13.10 Menyimpan file ke dalam format Adobe Photoshop
239
6. Lalu pilih menu File > Save As.
Gambar 13.11 Menyimpan file dengan nama lain
7. Masukkan nama file header4.jpg.
Gambar 13.12 Menyimpan file baru
8. Jika muncul kotak dialog JPEG Option, atur Quality = 11 Maximum
lalu klik tombol OK (lihat Gambar 13.13).
240
9. Maka akan tersimpan sebuah file baru header4.jpg (lihat Gambar
13.14).
Gambar 13.13 Kotak dialog JPEG Option
Gambar 13.14 Gambar header baru
10. Apabila diperiksa pada halaman utama maka akan nampak seperti
gambar berikut.
241
BAB 14
UPLOAD KE INTERNET
Ada sebagian web hosting yang menyediakan fasilitas untuk menginstasi
secara online beberapa Content Management System (CMS) seperti:
Joomla!, Mambo, Drupal, PHP-Nuke, Post-Nuke, atau beberapa aplikasi
E-Commerce seperti: OSCommerce, TubeCart, dan ZenCart.
Gambar 14.1 Tampilan fasilitas Fantastico
253
Dengan adanya Fantastico, instalasi Joomla! lebih mudah dilakukan
namun syaratnya terlebih dulu harus memiliki domai dan hosting sendiri.
Meskipun ada beberapa web hosting yang menyediakan secara gratis,
baik untuk pendaftaran domain maupun hosting.
Apabila proses pembuatan web portal dilakukan di lokal (komputer
pribadi/notebook) berarti harus mengupload semua file Joomla! dan
databasenya. Agar proses upload ke server lebih mudah, sebaiknya semua
file dalam satu folder web portal dikompress (ZIP). Setelah diupload ke
server, file dalam bentuk ZIP tersebut dapat diekstrak secara otomatis.
14.1 Mengkompress file Joomla!
Sebelum melakukan upload file ke web hosting, semua file harus
dikompres terlebih dulu agar prosesnya lebih cepat dan aman.
1. Aktifkan folder utama webportal (di bawah folder AppServ/www),
seleksi semua file lalu klik tombol mouse kanan. Pilih Send To >
Compressed (zipped) folder.
Gambar 14.2 Proses mengkompres semua file Joomla!
254
2. Tunggu beberapa saat hingga proses comporess selesai.
Gambar 14.3 Proses kompres sedang berjalan
3. Jika sudah selesai muncul sebuah file berekstensi ZIP. Perlu diingat,
ketika arah mouse berada di atas folder administrator maka nama file
hasil comporess-nya administrator.zip. Jadi nama file tergantung
posisi mouse ketika memilih perintah Compress.
Gambar 14.4 File hasil kompres
14.2 Mengekspor Database
Database merupakan bagian yang sangat penting dalam sebuah web
portal, apalagi jika berita/artikel yang dikelola sudah banyak. Tanpa
database, sebuah website bagaikan “mati suri”, ada bentuknya tapi tidak
memiliki peran apapun. Oleh karena itu, apabila web portal sudah
berjalan dengan baik, diusahakan minimal dua minggu sekali melakukan
255
update database. Tujuannya adalah untuk mengamankan data dari para
hacker yang ingin merusak website. Dengan adanya database cadangan
(backup), akan cepat terasi jika sewaktu-waktu website terkena spam,
atau hacker.
Selain semua file Joomla!, yang perlu diupload ke web hosting adalah
database. Karena semua informasi mengenai component, module,
template, dan plugins berada dalam database tersebut. Meskipun semua
file Joomla! sudah lengkap terupload ke web hosting namun jika tidak
ada database maka website tidak akan tampil.
1. Untuk mengekspor database dari lokal (komputer pribadi), aktifkan
salah satu browser. Kemudian ketikkan alamat URL http://localhost.
Gambar 14.5 Tampilan halaman utama AppServ
256
2. Klik menu phpMyAdmin Database Manager Version 2.10.2 untuk
masuk ke halaman phpMyAdmin.
Gambar 14.6 Menu untuk menuju ke halaman phpMyAdmin
3. Masukkan username dan password untuk login ke phpMyAdmin.
Setelah berhasil masuk ke halaman utama phpMyAdmin tampilannya
seperti gambar berikut.
Gambar 14.7 Halaman utama phpMyAdmin
257
4. Dalam daftar Database, pilih database webportal.
Gambar 14.8 Mengarahkan nama database
5. Nampak beberapa daftar tabel dari database webportal. Semua tabel
tersebut nantinya akan diletakkan dalam web hosting.
258
Gambar 14.9 Beberapa tabel dalam database webportal
6. Untuk mengekspor database, pilih menu Ekspor.
Gambar 14.10 Menu untuk mengekspor database
259
7. Pastikan semua tabel sudah terseleksi semua, lalu pada bagian tipe
database pilih SQL.
Gambar 14.11 Memilih semua tabel yang akan diekspor
8. Jangan lupa pada bagian Data, centang pilihan Complete Insert dan
Extended Insert.
260
Gambar 14.12 Memberi tanda centang untuk pilihan data
9. Simpan sebagai file dengan cara mencentang tab Save as file. Untuk
pilihan Compress, pilih None jika tidak ingin filenya dikompress.
Setelah selesai, klik tombol GO.
Gambar 14.13 Menyimpan nama file untuk database yang diekpor
10. Jika muncul kotak dialog, pilih Save File (lihat Gambar 14.14).
11. Tentukan folder untuk menyimpan database tersebut lalu klik tombol
Save (lihat Gambar 14.15).
12. Tunggu beberapa saat hingga proses penyimpanan database selesai.
261
Gambar 14.14 Kotak dialog pilihan
Gambar 14.15 Memilih folder untuk file hasil ekspor
262
14.3 Mentransfer file ke web hosting (server)
Untuk mentransfer file Joomla! dapat dilakukan dengan beberapa cara
diantaranya menggunakan aplikasi File Transfer Protocol (FTP) atau
melalui Control Panel (Cpanel).
Ada banyak aplikasi FTP, diantaranya adalah BlazeFTP dan WS_FTP.
Kedua aplikasi tersebut bersifat free yang dapat didownload melalui
internet. Dalam CD buku juga menyertakan kedua aplikasi tersebut,
tinggal menginstal ke komputer lalu menggunakannnya.
1. Diasumsikan mengupload menggunakan Control Panel, masukkan
alamatnya misal: http://www.telecenterindonesia.net/cpanel atau
http://www.telecenterindonesia.net:2082.
Gambar 14. Halaman utama cPanel
263