Modul Joomla

2009
JOSC-Udinus
Jawa Tengah OpenSource
Community
[PEMKAB KENDAL]
JOSC-Udinus | Modul Pelatihan CMS Joomla 1
BAB 1
Pengenalan Joomla
Joomla adalah salah satu Content Management System (CMS) yang dibuat menggunakan
bahasa pemrograman PHP. CMS adalah perangkat lunak yang digunakan untuk membangun
web dinamis secara mudah, tanpa harus menguasai bahasa pemrograman dan Database
Management System (DBMS) tertentu. Seperti namanya, CMS dapat membangun sebuah
web hanya dengan mengatur konten (isi) tanpa meluangkan waktu untuk belajar PHP,
meskipun jika telah menguasai bahasa pemrograman tersebut akan sangat membantu.
Konten merupakan inti dari semua website, konten juga adalah alasan utama pengunjung
mengakses sebuah website. Tampilan website sebaik apapun dengan animasi semewah
bagaimanapun akan ditinggalkan pengunjungnya jika tidak diimbangi dengan konten yang
bermutu. CMS memberikan keleluasaan administrator untuk lebih berkonsentrasi pada
konten website dan sejenak melupakan keperluan teknis pemrograman.
Gambar 1: Tampilan Halaman Admin Joomla 1.5
Ada banyak sekali jenis CMS yang tersedia dan siap untuk digunakan untuk membangun
website, antara lain Mambo, PHPNuke, PostNuke, dan tentu saja Joomla. Salah satu yang
paling banyak digunakan adalah Joomla, karena mempunyai banyak kelebihan antara lain:
 Penggunaannya mudah
 Banyak plugin yang tersedia

Pelatihan Joomla Pemkab Kendal 2009
 Dukungan forum dan komunitas
 Tersedia dalam berbagai bahasa (termasuk Indonesia)
 Fasilitas tempat sampah seperti recycle bin
 Template tampilan yang mudah diganti
Pada saat tutorial ini dibuat, Joomla telah mencapai versi 1.5. Dibandingkan sebelumnya,
terdapat perubahan-perubahan yang cukup signifikan pada versi ini, diantaranya adalah
tampilan halaman administrator yang lebih segar. Selain itu juga ada pilihan antara
mengaktifkan RichEditor dan menonaktifkannya untuk keleluasaan pengguna.
Penyempurnaan yang lain adalah pada tampilan preview template yang dapat menampilkan
bagian-bagian yang ada pada template, juga telah dilengkapi editor untuk beberapa berkas
CSS sekaligus. Selain itu, Joomla 1.5 juga telah mendukung teknologi web terbaru seperti
Atom 1.0, RSS 2.0, dan juga dukungan terhadap XML-RPC.

BAB 2
Upload dan Instalasi
Upload ke web hosting dengan FileZilla

90% orang belajar menggunakan Joomla menggunakan webserver yang diinstal secara lokal
di komputer (atau laptop) standalone, meski demikian pada saat implementasi 90% CMS
Joomla dijalankan pada webhosting luar baik yang gratisan maupun yang berbayar. Sebab
itulah sebelum kita mulai belajar menginstall Joomla, ada baiknya kita juga belajar
mengupload file-file Joomla ke dalam webhosting.
Hampir semua webhosting baik yang gratisan maupun berbayar telah menyediakan CPanel
yang dilengkapi dengan FileManager untuk mengupload file ke server web hosting tersebut.
Namun dengan menggunakan FileManager tersebut sangat lambat dan kurang efektif,
karena harus mengupload file satu persatu, sedangkan file CMS Joomla berjumlah ribuan.
Untuk itu kita perlu menggunakan perangkat lunak khusus untuk menguploadkan banyak file
sekaligus. Salah satu yang dapat digunakan dengan mudah, handal, dan gratis adalah
FileZilla, perangkat lunak sumber terbuka yang merupakan produk dari FileZilla-Project.
Gambar 2: Tampilan Antarmuka FileZilla
Cara penggunaan FileZilla cukup mudah hampir seperti windows explorer, hanya saja karena
berkas yang dikirimkan adalah melalui jaringan, sehingga memerlukan jeda waktu setelah

mengirimkan tergantung dengan kecepatan jaringan (atau bandwith internet) itu sendiri.
Lebih jelasnya cara mengirimkan file melaui FTP menggunakan FileZilla adalah sebagai
berikut:
1. Tentukan koneksi yang tepat dengan mengisikan alamat host (bisa berupa IP atau
alamat DNS seperti www.joomla.com), username FTP, password, dan juga port yang
digunakan untuk FTP (opsional). Ketiga informasi tersebut bisa didapat dari web
hosting yang kita gunakan. Kemudian tekan tombol Quickconnect.
Gambar 3: Form Koneksi FTP pada FileZilla
2. Setelah FileZilla berhasil mendapatkan struktur direktori yang kemudian ditampilkan

pada file explorer di sebelah kanan, berarti kita sudah siap untuk mengupload file
yang kita inginkan. Sebelumnya pilih terlebih dahulu folder yang berisi file-file yang
akan kita upload, kemudian pada local site file explorer pilih semua file yang akan
diupload, klik kanan dan pilih menu upload.
Local site file explorer Remote site file explorer
Gambar 4: File & Folder Explorer pada FileZilla
3. Di bagian bawah Queued Files menunjukkan proses upload pada tiap file, jumlah file
dan juga nama tiap file yang sedang mengantri untuk diupload. Di sampingnya Failed
Transafer File menunjukkan file yang gagal diupload, untuk mengulangi upload pada
file tersebut melalui klik kanan dan pilih Reset dan requeued selected files. Dan yang

terakhir adalah Successfull Transfer yang menunjukkan informasi file yang telah
berhasil di upload.
Gambar 5: Status File Upload pada FileZilla
FileZilla hanya mampu mengupload file ke dalam server pada webhosting, dan tidak dapat
digunakan untuk mengupload baik yang berbentuk binary file, maupun yang berbentuk file
query (*.sql). Untuk mengupload database local yang telah kita buat ke dalam database
server kita bisa menggunakan PHPMyAdmin, perangkat administrasi database MySQL
berbasis web, seperti yang akan sedikit disinggung pada bagian selanjutnya.
Instalasi Joomla
Setelah berhasil mengupload file Joomla ke dalam server web hosting, atau juga bisa berarti
meng-copy-kan file ke dalam folder Server_Root yang ada pada server lokal, kita siap
melakukan aksi selanjutnya, yaitu menginstall Joomla.
Sebelum menginstall Joomla, tentu saja yang dilakukan adalah mendapatkan paket instalasi
Joomla, dapat di download di website resminya www.joomla.org atau juga bisa meng-copy
punya teman . Paket instalasi ini berbentuk *.zip, untuk bisa menjalankannya anda harus
mengekstraknya terlebih dahulu ke dalam direktori web server, bila anda menggunakan
XAMPP seperti saya maka itu berarti anda bisa
mengekstrak joomla ke dalam folder htdocs.
Untuk mempermudah akses dan agar tidak
tumpang tindih dengan web yang sudah ada,
kita bisa membuat direktori baru terlebih dahulu
di dalam contoh ini saya membuat direktori
"joomla_site". Namun bila Joomla adalah satu-
satunya website yang anda kerjakan pada web
server tersebut, anda tidak perlu membuat
folder baru.

Joomla menggunakan database MySQL untuk menyimpan konten dan konfigurasi website,
sebab itulah sebelum melanjutkan instalasi website joomla kita perlu membuat database
khusus agar dapat digunakan oleh Joomla. Kalau anda menggunakan localhost, anda bisa
menggunakan PHPMyAdmin untuk membuat database "joom_database" (nama bisa
variatif), sedangkan pada web hosting anda bisa menggunakan MySQL Manager untuk
membuat Database.
Gambar 6: Membuat database pada phpMyAdmin
Setelah semua persiapan selesai baru kita bisa memulai instalasi Joomla. Kita asumsikan
sedang menginstal joomla pada localhost dan file joomla ada pada direktori joomla_site,
maka yang kita lakukan adalah memanggilnya melalui browser dengan mengetikkan
http://localhost/joomla_site, maka akan muncul tampilan seperti di bawah ini.
Gambar 7: Tampilan pertama instalasi Joomla

Pilih salah satu bahasa (biasanya dan direkomendasikan menggunakan bahasa inggris),
kemudian klik saja tombol Next untuk melanjutkan instalasi hingga muncul tampilan seperti
di bawah ini.
Gambar 8: Precheck technical requirement oleh Joomla
Yang dijalankan pada bagian kedua ini adalah check kebutuhan teknis secara otomatis oleh
joomla, jika kebutuhan tidak terpenuhi Joomla tidak mengizinkan untuk melanjutkan
instalasi. Untuk setting rekomendasi, meskipun ada yang tidak memenuhi joomla tetap
mengijinkan untuk menjalankan, karena hanya bersifat rekomendasi.
Gambar 9: Tampilan Lisensi GPL
Joomla menggunakan lisensi publik di bawah General Public License (GPL) seperti
kebanyakan produk open source software lainnya. Itulah yang ditunjukkan pada tahap ketiga
ini. Bila anda merasa perlu untuk membacanya silahkan berhenti sejenak untuk
membacanya, namun bila anda tidak punya waktu kita hanya cukup waktu Joomla boleh

diedarkan secara bebas tanpa harus membayar royalti, bahkan juga boleh dimodifikasi dan
diedarkan kembali tanpa harus membayar royalti. Kemudian lanjutkan pada tahap
selanjutnya.
Gambar 10: Koneksi dengan database MySQL
Pada konfigurasi database, pertama pengguna diperbolehkan untuk memilih jenis database
yang dipakai pilih saja MySQL. Sedangkan untuk hostname 90% pilihan yang tepat digunakan
adalah localhost, bahkan ketika anda menggunakan database pada hosting server. Pada isian
username dan password, kita bisa mengisikan nama pengguna dan password database yang
digunakan (ingat username dan password database bukan login windows ataupun login web
hosting). Selanjutnya yang terakhir adalah nama database yang digunakan untuk Joomla.
Gambar 11: Pengaturan FTP
Kalau anda menggunakan localhost, anda bisa langsung melewati tahap ini, namun bila anda
menggunakan server pada web hosting, konfigurasi FTP akan sangat membantu perawatan
website. FTP username, password, dan host bisa anda dapatkan pada CPanel web hosting
yang anda gunakan.
Gambar 12: Pengaturan situs dan login administrator
Tahap selanjutnya adalah mengatur nama situs dan password administrator yang digunakan
untuk login halaman admin. Di bawahnya kita bisa menginstal sampel data yang sangat
membantu pemula untuk mengetahui gambaran seperti apakah kira-kira susunan website
standard, namun bagi kita yang sudah terbiasa membangun website sampel data ini
mungkin sedikit mengganggu karena harus menghapus datanya untuk diganti dengan yang
baru, milik kita sendiri.
Klik lagi next, dan anda selesai menginstall joomla. Tahap selanjutnya adalah menghapus file
instalasi untuk mencegah website anda diinstall ulang oleh orang yang kurang bertanggung
jawab. Seperti yang ditunjukkan di bawah ini.
Gambar 13: Tampilan instalasi berhasil

BAB 3
Section, Category, dan Article
Gambar 13: Struktur konten default Joomla
Jika kita menginstall sampel data, secara otomatis kita mengisi website Joomla pertama
dengan konten yang mempunyai struktur sebagaimana gambar di atas. Terlihat pada
gambar di atas, Joomla mengorganisasikan konten menjadi beberapa bagian untuk
mempermudah pengaturan yaitu sections, categories, dan articles. Satu section bisa
mempunyai beberapa category, dan satu category terdiri dari beberapa article, ini adalah
dasar pengaturan konten yang harus diketahui.
Sebagai tips pembuatan website, untuk mengorganisasikan website secara lebih baik dan
terencana dengan rapi, kita dapat menggunakan teknik top down, yaitu mengatur section
dan category terlebih dahulu baru kemudian membuat artikel untuk masing-masing
category. Daripada membuat artikel terlebih dahulu, mengaturnya ke dalam uncategorized
(tidak terkategori) kemudian baru mengaturnya kembali ke dalam category dan section
tertentu yang dibuat lebih akhir.

Pengaturan Section
Ada dua cara untuk membuat (dan mengatur) section dalam halaman administrasi joomla,
yaitu menggunakan icon Section Manager, atau juga dapat melalui menu Content 
Section Manager. Keduanya akan membuka halaman pengaturan section.
Gambar 14: Tampilan Section Manager
Untuk menambahkan section baru, kita dapat mengklik tombol New, sedangkan untuk
memperbaharui (mengedit) section yang sudah ada bisa dengan mengklik tombol Edit.
Seteleh menekan tombol tersebut, halaman admin akan berubah ke tampilan formulir
section seperti di bawah ini.
Gambar 15: Tampilan Formulir section
Title: judul dari section.
Alias: id khusus yang dapat dipahami oleh joomla.
Published: untuk menetapkan apakah akan ditampilkan atau tidak.
Order: menentukan urutan tampilan dari section.
Access level: untuk menentukan siapa saja yang bisa mengakses section ini.

Image: menentukan gambar yang ditampilkan pada website saat section ini dipanggil,
gambar yang dipilih sebelumnya harus sudah diupload melalui media (akan dibahas nanti).
Image Position: posisi dari gambar yang telah dipilih sebelumnya.
Description: untuk memberikan keterangan tentang section yang dibuat
Pengaturan Category
Hampir sama seperti pengaturan section, Category Manager dapat diakses melalui icon yang
ada ada control panel atau juga dapat melalui menu Content  Category Manager. Kedua
cara tersebut, akan membuka halaman category manager, kemudian melalui halaman
tersebut kita bisa membuka halaman formulir category seperti di bawah ini.
Gambar 15: Tampilan Formulir category
Tampilan yang sama seperti pada formulir section, dengan tambahan inputan section untuk
mengelompokkan beberapa kategori ke dalam salah satu section.
Pengaturan Article
Section dan category adalah pengelompokan konten untuk mempermudah pengaturan,
sedangkan isi dari website sebenarnya adalah pada article. Untuk membuat article baru ada
tiga cara yang dapat digunakan yaitu seperti biasanya mengklik Icon Article Manager dan
juga menu Content  Article Manager, kemudian pada halaman article manager dapat
mengklik icon New Article. Atau bila anda menganggap terlalu lama, anda bisa langsung

mengklik icon Add New Article pada Control Panel. Ketiga cara tersebut akan memunculkan
formulir article seperti di bawah ini.
Gambar 15: Tampilan Formulir category
Seperti pada category ada inputan Title, Alias, Section, dan Published. Selain itu juga ada
tambahan Front Page yang digunakan untuk menentukan apakah artikel tersebut akan
ditampilkan pada halaman depan atau tidak, dan juga tambahan Category yang akan muncul
secara otomatis bila dipilih salah satu section.
Saat ditampilkan pada halaman depan, kita seringkali melihat artikel yang tidak ditampilkan
seluruhnya hanya sebagian saja dan diikuti tulisan "read more". Pada Joomla kita bisa
membuat seperti itu dengan mengklik tombol "read more" yang ada di bawah kotak inputan
isi artikel. Setelah mengklik tombol tersebut akan muncul garis merah yang memisahkan
ringkasan tulisan yang muncul di halaman depan dan tulisan lengkap artikel tersebut.
Selain inputan tersebut, ada lagi inputan parameter untuk artikel tersebut. Ada tiga inputan
parameter yang berada di samping kanan yaitu Parameters – Article, Parameters-Advanced,
dan Metadata Information. Sebagai dasarnya yang perlu diketahui adalah Parameters-
Article.
Author: penulis artikel yang secara otomatis didapatkan dari login sebelumnya.
Author Alias: jika nama login anda bukan nama asli, anda bisa menggunakan nama alias
untuk menuliskan nama asli anda.
Access Level: menentukan siapa saja yang dapat membaca artikel tersebut.
Created Date: menentukan tanggal pembuatan artikel (default tanggal penulisan artikel).

Start Publishing: kita bisa menentukan kapan artikel yang dibuat akan diterbitkan melalui
inputan ini (default tanggal penulisan artikel), misalkan kita ingin membuat artikel yang
secara otomatis diterbitkan pada tahun baru, kita bisa menentukannya di sini.
Finish Publishing: kebalikan dari Start Publishing, digunakan untuk menset kapan artikel
tidak diterbitkan kembali (default never/tidak pernah).
Latihan
Buat struktur website seperti di bawah ini, kemudian isikan dua artikel yang relevan untuk
tiap kategorinya.

BAB 4
Konfigurasi Website dan Menu
Konten adalah hal yang paling penting dalam website, namun bukan satu-satunya hal
penting yang harus diatur dengan baik oleh administrator. Pengaturan yang tidak kalah
pentingnya adalah pengaturan konfigurasi website itu sendiri dan juga pengaturan menu,
untuk memastikan pengunjung tidak akan kebingungan apalagi sampai tersesat melihat
website kita.
Global Configuration
Merupakan pengaturan utama website kita. Dalam pengaturan umum ini ada tiga sub menu
yaitu Site, System, dan Server. Ketiganya akan kita bahasa secara berurutan dengan singkat
pada beberapa bagian yang penting diketahui saja.
Gambar 16: Tampilan konfigurasi situs
Site Offline: menentukan apakah situs ini akan ditampilkan sebagai offline (tidak aktif).
Offline Message: jika situs sedang dalam keadaan tidak aktif maka pesan yang dimunculkan
dapat ditulis di sini.
Site Name: untuk menuliskan nama situs (untuk mengganti konfigurasi pada saat install).
Default WYSIWYG Editor: saat menuliskan konten secara default anda menggunakan Rich
Editor dari TinyMCE, bila anda lebih suka tampilan editor kosongan, anda bisa menggantinya
menjadi "no editor"
Global Site Meta Description: deskripsi dari situs anda yang tidak dapat dilihat oleh
pengunjung namun akan dibaca mesin pencari.
Global Site Meta Keywords: kata kunci yang digunakan mesin pencari untuk mengenali
website anda.
Search Engine Friendly URLs: mengatur apakah URL website anda mudah terbaca oleh
mesin pencari atau tidak.
Gambar 17: Tampilan konfigurasi sistem
Allow User Regisration: mengijinkan pengunjung untuk mendaftar menjadi anggota.
New User Registration Type: menentukan tipe keanggotaan default untuk pengunjung yang
mendaftar sebagai anggota.
New User Account Activation: menentukan untuk mengirim email aktivasi pada pengunjung
yang mendaftar sebagai anggota.
Front-end User Parameters: jika diaktifkan, pengguna dapat memilih bahasa, editor, dan
beberapa parameter lain saat login pada front-end.

User Manager
User Manager digunakan untuk mengatur anggota yang dapat masuk ke dalam halaman
administrasi. Jika anda mengaktifkan Allow User Registration pada konfigurasi umum,
pengunjung dapat mendaftar menjadi pengguna di sini, namun jika anda menonaktifkannya
(untuk alasan keamanan atau privatisasi), pengguna hanya dapat dibuat melalui icon New
pada user manager ini. Adapun formulir user pada halaman administrasi adalah seperti
gambar di bawah ini.
Gambar 18: Tampilan formulir pengguna
Name: nama asli pengguna
Username: nama pengguna untuk identifikasi joomla.
E-mail: surat elektronik pengguna.
New Password: password baru untuk login.
Verify Password: untuk memastikan password yang dimasukkan sebelumnya tepat.
Group: menentukan jenis pengguna yang dibuat.
Block User: terkadang ada pengguna yang telah mendaftar dan melakukan beberapa
kesalahan fatal, kita bisa memblok pengguna pengguna tersebut menggunakan menu ini.
User Editor: menentukan tipe editor yang cocok untuk pengguna tertentu, untuk beberapa
orang mungkin no editor membuat mereka lebih leluasa.
Time Zone: menentukan zona waktu yang digunakan oleh masing-masing pengguna.

Media Manager
Bila ingin menggunakan suatu gambar (atau berkas multimedia lain) pada website, kita perlu
mengupload gambar tersebut terlebih dahulu. Cara uploadnya dapat menggunakan
pengaturan media yang pada Joomla versi 1.5 sudah terintegrasi dengan editor konten.
Tampilan media manager adalah seperti di bawah ini.
Gambar 19: Tampilan media manager
Kita bisa membuat folder baru dengan menggunakan inputan Create Folder yang berada di
atas kotak browser file, dan juga mengupload gambar baru dengan mengklik inputan browse
di bawah browser file.
Menu Manager
Pengaturan menu merupakan salah satu hal yang sangat penting pada pembuatan website,
Joomla menyediakan menu manager khusus untuk mengatur menu dan submenu tampilan
depan. Kita bisa mengakses menu manager melalui Menus  Menu Manager yang terdapat
di atas, atau juga bisa melalui icon Menu Manager. Kedua cara tersebut akan menampilkan
Menu Manager dengan tampilan seperti di bawah ini.

Gambar 20: Tampilan menu manager
Yang ditampilkan pada Menu Manager adalah kelompok menu yang didalamnya tersimpan
beberapa menu lagi, bukan semua menu yang ada. Begitu juga bila mengklik icon New, yang
dibuat adalah kelompok menu baru yang bisa diisikan beberapa menu, bukan menambahkan
menu baru. Sedangkan untuk menambahkan menu pada kelompok menu tersebut, kita bisa
mengklik icon yang ada pada kolom Menu Item(s), kemudian akan memunculkan halaman
Menu Item Manager seperti tampilan di bawah ini.
Gambar 21: Tampilan menu item manager
Untuk menentukan tampil tidaknya item menu tersebut pada halaman front end, kita bisa
mengklik icon yang ada pada kolom published. Sedangkan untuk menentukan menu default,
kita bisa mencek salah satu item menu untuk memilih item menu tersebut, kemudian
mengklik icon Default yang ada diatas. Menu default adalah item menu yang akan otomatis
diakses ketika website pertama kali dibuka, dan hanya boleh ada satu menu default untuk
keseluruhan menu dan item menu website.
Untuk menambahkan item menu, kita bisa mengklik icon New untuk memunculkan form
menu, namun sebelumnya joomla akan menampilkan Menu Item manager untuk memilih
tujuan menu yang kita buat secara visual. Setelah kita memilih salah satu menu item, baru
form menu akan tampil seperti yang terlihat pada gambar di bawah ini.
Gambar 22: Tampilan form menu item
Title: judul menu yang ditampilkan.
Alias: judul menu yang dikenal joomla.
Link: target tautan yang akan dibukan menu (tidak bisa dirubah).
Display in: memilih kategori menu.
Parent menu: memilih menu induk, bila tidak punya menu induk pilih "Top".
Published: memilih menerbitkan menu atau tidak
Selain inputan tersebut, jika kita ingin mengubah target dari menu tersebut, dapat mengklik
tombol Change Type yang berada di atas kemudian kembali memilih target link secara visual
melalui Menu Item Manager.

BAB 5
Extension dan Template
Selain penggunaanya yang mudah, ada satu lagi kelebihan Joomla yang menjadi alasan orang
banyak menggunakannya yaitu kelengkapan extension dan template yang mudah di ganti.
Kita bisa menemukan banyak sekali extension dan template di internet, baik di situs resmi
joomla maupun situs luar, extension ini membuat website kita mempunyai fasilitas khusus
seperti buku tamu, galeri foto, embed video, live chat, embed google maps, dan lain
sebagainya. Namun perlu diketahui, meskipun Joomla 100% gratis, tidak semua extension
yang tersedia dapat digunakan gratis, ada yang bertipe komersial dan non komersial.
Extension
Ada tiga jenis extension dalam Joomla yaitu Module, Component, dan Plugin. Plugin
merupakan extension paling lengkap, menyediakan tampilan dan juga pengaturan pada sisi
admin, bahkan beberapa plugin mempunyai pengaturan yang sama kompleksnya dengan
pengaturan joomla. Kedua dan ketiga adalah Component dan Module yang merupakan
tambahan pada tampilan baik halaman admin dan frontpage. Module merupakan extension
paling sederhana, module menampilkan tampilan khusus seperti banner, artikel dan lain
sebagainya. Sedangkan Component hampir seperti module namun mempunyai pengaturan
yang lebih kompleks.
Entah kenapa, tidak seperti sebelumnya, menu extension dan template tidak ditampilkan
pada icon control panel seperti menu yang lain, sebagai gantinya, kita bisa mengaksesnya
melalui menu extension yang berada di atas, ada lima sub menu yang ada pada menu ini,
yaitu install/uninstall, module manager, plugin manager, template manager, dan language
manager.
Install/Uninstall
Digunakan untuk memasang extension baru atau menghapus extension yang sudah ada,
menu inilah merupakan sentral pemasangan dan pencabuutan semua extension dalam

joomla. Di dalamnya terdapat enam menu lagi yaitu install yang berfungsi untuk meng-
upload dan memasang extension baru, serta kelima menu lainnya yaitu components,
modules, plugins, templates, dan languages, digunakan untuk mencabut (uninstall)
extension yang sudah terpasang.
Gambar 23: Install/Uninstall extension
Module Manager
Digunakan untuk mengakses semua module yang terpasang, baik itu modul untuk Site
frontpage, maupun untuk Administrator. Tampilan ini digunakan untuk menentukan aktif
atau tidaknya suatu module, juga melalui tampilan ini kita dapat menentukan urutan
tampilan masing-masing modul. Tampilan dari module manager seperti di bawah ini.
Gambar 24: Tampilan module manager
Untuk mengaktifkan modul, kita bisa mengklik icon yang ada pada kolom Enabled, kemudian
untuk menentukan urutan tampilan, kita bisa mengubah angka yang ada pada kolom Order.

Sedangkan untuk pengaturan yang lain, kita bisa mengklik pada nama masing-masing
modulnya, dan akan memunculkan formulir sebagai berikut.
Gambar 25: Tampilan formulir modul
Title: nama modul yang ditampilkan pada module manager.
Show Title: menampilkan nama modul pada widget front page.
Enabled: mengaktifkan atau non-aktif modul.
Position: mengatur posisi modul berdasarkan area pada template.
Access Level: mengatur siapa saja yang dapat mengakses modul.
Menu Assignment: mengatur pada menu apa saja modul tersebut tampil.
Sedangkan untuk pengaturan parameter tidak akan kita bahas, karena tiap modul
mempunyai pengaturan yang berbeda.
Plugin Manager
Hampir sama seperti module manager, plugin manager dapat digunakan untuk menetukan
aktif tidaknya sebuah plugin, kemudian juga menentukan urutan tampilan. Beberapa plugin
yang memerlukan pengaturan khusus jika sudah terpasang maka otomatis plugin tersebut
menambahkan submenu pada menu component. Lebih lengkapnya plugin akan dibahas
pada bab selanjutnya.

Template Manager
Dengan Joomla kita bisa mengubah-ubah tampilan dengan pengaturan template yang sudah
disediakan, sebelum dapat mengubah template tentu saja yang dilakukan adalah menginstall
template tersebut melalui menu Extension  Install/Uninstall. Kemudian untuk mengatur
template yang sudah terpasang kita bisa menggunakan Template Manager yang dapat
diakses melalui menu Extension  Template Manager.
Gambar 26: Tampilan template manager
Ada dua sub tampilan dalam Template Manager ini, yaitu Site yang menampilkan semua
template yang terinstall untuk tampilan front end, dan Administrator yang menampilkan
semua template yang terinstall untuk tampilan back end.
Gambar 27: Tampilan template edit

Jika kita ingin memilih sebuah template menjadi template default, kita bisa memilih salah
satu template, kemudian mengklik icon Default. Template yang terdapat icon bintang berarti
template tersebut menjadi icon default saat ini. Sedangkan untuk mengatur parameter, atau
mengubah template, kita bisa mengklik pada link nama template, selanjutnya joomla akan
membuka tampilan Edit Template seperti di atas.
Terlihat pada Gambar 27, kita bisa menggunakan tampilan yang berbeda untuk beberapa
menu tertentu, misalkan untuk tampilan buku tamu, kita ingin menggunakan template
berwarna biru, namun untuk defaultnya kita menggunakan warna putih. Kita bisa
mengaturnya pada Menu Assignment dengan mengganti pilihan pada "Select from List" dan
memilih menu yang ingin kita terapkan template tersebut.
Selain inputan yang telah dijelaskan di atas ada juga pilihan parameter yang berubah-ubah
inputanyya, sesuai dengan template yang akan kita gunakan. Sedangkan pada icon di atas
juga terdapat tombol yang digunakan untuk mengedit template.
Preview: menampilkan contoh pra-tampil template dengan keterangan kelompok tampilan
Edit HTML: mengubah kode HTML yang digunakan pada template tersebut
Edit CSS: mengubah kode CSS yang digunakan pada template.
Gambar 27: Tampilan preview template

BAB 6
Pembuatan Buku Tamu dan Galeri Foto
Bab ini merupakan salah satu implementasi dari bab selanjutnya, yaitu penggunaan
extension untuk mempercanggih website kita. Saat ini yang kita terapkan di sini adalah yang
paling banyak digunakan pada website umumnya yaitu buku tamu dan galeri foto.
Buku Tamu
Buku tamu adalah salah satu media yang paling mudah digunakan untuk interakasi
pengunjung dan pengelola website, dengan menggunakan buku tamu, pengguna dapat
memberikan komentar mengenai website tersebut secara langsung. Ada yang perlu
diperhatikan dalam pembuatan buku tamu, mengingat begitu mudahnya pengunjung
menuliskan sesuatu ke dalam buku tamu, perlu dibuat semacam filter yang mencegah
pengunjung menuliskan kata yang tidak semestinya.
Gambar 20: Contoh buku tamu
Kali ini yang digunakan untuk membuat buku tamu pada Joomla adalah EasyBook,
component yang mudah digunakan dan juga dapat dikostumisasi sesuai kebutuhan. Selain
itu EasyBook juga mempunyai filter badword yang bisa digunakan untuk menyaring kata-
kata kotor yang ditulis pengguna. Berikut adalah langkah-langkah instalasinya.
1. Masuk ke dalam menu Extension  Instal/Uninstall
2. Klik browse dan cari file instalasi easybook (saat ini yang saya gunakan nama filenya
"com_easybook_2.0_rc4_valid.zip").
3. Klik upload file & install
Bila berhasil akan ada konfirmasi easybook berhasil dipasang, selain itu juga dalam menu
Component akan ada satu submenu dengan nama easybook. Selanjutnya yang perlu kita
lakukan adalah mengubah setting easybook agar dapat digunakan sesuai dengan keinginan
kita. Langkah-langkahnya sebagai berikut.
Gambar 21: Tampilan atas EasyBook Manager
1. Klik menu Components  EasyBook  Manage Entries.
2. Selanjutnya klik icon Parameters di bagian atas sebelah kanan.
3. Setelah muncul tampilan konfigurasi parameter, kita bisa menuliskan kata-kata

pembukaan misalkan "Mohon mengisi buku tamu".
4. Jangan lupa untuk memastikan Allow smilies, automatic word wrapping, IP logging,
show e-mail field, require e-mail, Show web site field, Publish new entries, dan
Badword filter dalam pilihan "yes" (atau "show").
5. Untuk pilihan Group for adding an entry juga pastikan bernilai "Everybody" agar
semua pengunjung dapat menuliskan komentar di buku tamu.
6. Setelah selesai, tekan tombol Save.
Gambar 22: Parameter pada EasyBook

Selanjutnya adalah membuat menu pada kategori menu utama agar halaman buku tamu
dapat diakses oleh pengunjung. Langkah-langkahnya adalah sebagai berikut.
1. Klik menu Menus  Main Menu.
2. Kemudian klik icon New untuk menambahkan menu baru
3. Pada Select Menu Type, klik pada Easy Book, tunggu bentar dan akan muncul sub
menu Standard layout, klik pada sub menu tersebut.
4. Selanjutnya form menu akan muncul, isikan "Buku Tamu" pada Title dan "buku-
tamu" pada Alias.
5. Sebelum menyimpannya, klik pada Parameters (Component) untuk menampilkan

isian parameter.
6. Kemudian pada Group for adding an entry pilih nilai "Everybody".
7. Setelah selasai baru klik icon Save di bagian atas.
Gambar 23: Form menu untuk menambahkan menu Buku Tamu
Selesai tugas terakhir untuk memasang buku tamu dan menampilkannya pada halaman front
page. Hasilnya bisa anda lihat pada halaman utama website. Untuk menuliskan komentar
baru pada buku tamu, kita bisa mengklik Sign guestbook.
Setelah berhasil membuat buku tamu, kita akan membuat yang sedikit lebih kompleks, yaitu
foto galeri dengan menggunakan plugin JoomGalery.

Foto Galeri
Terkadang kita ingin menampilkan kumpulan foto yang terkategori ke dalam website, bisa
saja kita memasukkannya menggunakan artikel seperti kebanyakan blog yang (memaksa)
menampilkan galeri foto. Namun selain tampilannya kurang bagus, juga lebih sulit untuk
mengupload dan mengupdate album.
Gambar 24: Contoh Galeri Foto pada Joomla
Joomla mempunyai banyak plugin yang bisa digunakan untuk membuat galeri foto, salah
satunya yang banyak dipakai adalah JoomGalery. Langkah instalasinya cukup mudah,
konfigurasinya juga tidak terlalu sulit. Berikut adalah langkah-langkahnya.
1. Seperti biasa install terlebih dahulu dengan Install/Uninstall manager file instalasi
JoomGalery (yang saya gunakan JOOMGALERY_1_5_0_2.zip).
Gambar 25: Instalasi JoomGalery
2. Setelah berhasil, seharusnya kita sudah bisa mengakses menu JoomGalery baru pada
menu Component.

3. Pertama buat kategori album pada Category Manager.
4. Klik icon New, kemudian ketikkan Title, Parent Category, dan Description. Pastikan
Access bernilai "public", dan Published bernilai "Yes". Kemudian Save.
Gambar 26: Form Category
5. Untuk mengupload gambar, kita menggunakan pilihan Picture Upload untuk upload
secara langsung, Batch Upload untuk mengupload gambar dalam file *.zip, FTP
Upload untuk mengupload gambar yang telah diupload sebelumnya melalui FTP, dan
terakhir Java Upload untuk cara upload yang lebih modern dengan Java.
Gambar 27: Form Picture Upload

6. Setelah berhasil menguploadnya, kita baru bisa mengatur propertinya melalui

Picture Manager.
7. Pada picture manager, kita bisa menginputkan Title, Description, dan juga Author.
Dan jika ingin menghapus semua voting pada foto, kita bisa mencek pilihan clear all
votes.
Gambar 28: Tampilan Picture Manager
Selain pengaturan di atas, masih ada banyak pengaturan lain, seperti pengaturan voting,
pengaturan komentar, pengaturan CSS, dan pengaturan konfigurasi. Namun kesemuanya itu
tidak akan dipelajari saat ini karena terlalu banyak. Yang perlu diperhatikan adalah pada
menu Configuration Manager  General Settings  Paths and Directories, pastikan semua
path yang ada pada konfigurasi tersebut dapat ditulisi (writeable). Jika belum bisa ditulisi,
kita perlu mengaturnya melalui CPanel web hosting, dan mengesetnya menjadi chmod 766.
Selanjutnya adalah membuat menu agar galeri foto kita dapat dibuka oleh pengunjung.
Caranya sama seperti waktu kita membuat menu untuk buku tamu, yaitu dengan melalui
Menu manager. Lebih jelas, langkahnya adalah sebagai berikut.

BAB 7
Personalisasi Template Joomla
Bab ini merupakan bab yang sangat berbeda dari sebelumnya, bila pada bab sebelumnya
kita lebih banyak berurusan dengan tampilan grafis dari halaman administrator Joomla, pada
bab ini kita akan banyak (melakukan pekerjaan istilah gaulnya "mengotori tangan" dengan)
menulis kode pemrograman HTML, CSS, dan sedikit XML serta PHP.
HTML, CSS, dan XML

Kurang tepat kalau ketiganya dikatakan bahasa pemrograman, karena tidak mampu
melakukan operasi logika maupun aritmatika apapun, dengan ketiganya kita tidak akan bisa
melakukan perhitungan 1 + 1 = 2. Istilah bahasa pemrograman hanya untuk memudahkan
orang awam agar bisa memahami yang akan dilakukan selanjutnya adalah penulisan kode-
kode yang tidak sering ditemui pada kehidupan sehari-hari, seperti layaknya menuliskan
kode pemrograman.
HTML (HyperText Markup Language) merupakan suatu bahasa yang digunakan untuk
membuat tampilan tertentu pada halaman website, yang di dalamnya terdapat dua bagian
inti, yaitu bagian Head dan Body. Bagian Head digunakan untuk menuliskan elemen-elemen
dan juga deskripsi yang tidak tampak pada tampilan website, sedangkan bagian Body
digunakan untuk menuliskan elemen yang akan ditampilkan pada halaman website.
Gambar 29: Contoh penulisan kode HTML Sederhana
CSS (Cascading Style Sheet) adalah bahasa yang digunakan untuk mengatur properti pada
elemen-elemen HTML sehingga bisa terlihat lebih bagus. Contoh properti yang diatur adalah

warna, warna latar, typografi, posisi, ukuran, dan lain sebagainya. CSS biasanya (dan lebih
baiknya) ditulis dalam file tersendiri, kemudian pada file HTML dipanggil pada bagian Head.
Pada CSS terdapat selector yang digunakan untuk memilih elemen HTML yang diatur
propertinya dan pengaturan properti sendiri.
Gambar 30: Contoh penulisan kode CSS Sederhana
XML (eXtensible Markup Language) merupakan bahasa yang digunakan untuk mendifinisikan
data. Dengan menggunakan metode penulisan yang hampir sama seperti HTML, namun
kode-kode yang digunakan dapat didefinisikan sendiri oleh kita, membuat XML mudah
dibaca oleh manusia dan juga mudah diterjemahkan oleh komputer (mesin).
Gambar 31: Contoh penulisan kode XML Sederhana
Dalam pembuatan template Joomla, HTML dan CSS digunakan untuk mendisain tampilan
sebaik mungkin (kadang-kadang juga diperlukan JavaScript untuk menambahkan animasi).
Sedangkan XML digunakan untuk mendefiniskan bagian-bagian yang ada pada template,
sehingga dapat digunakan untuk berinteraksi dengan konten Joomla yang lain.

Costumisasi Template Joomla

Awalnya pada bab terakhir penulis berencana untuk mengajarkan cara membuat template
sendiri menggunakan Joomla, tapi untuk mengajarkan itu semua dari Nol sampai Akhir
diperlukan waktu yang cukup lama dan juga referensi yang cukup banyak. Sehingga penulis
memustukan untuk mengubah target bab ini lebih mudah, lebih aplikatif, namun tepat dapat
digunakan untuk personalisasi website.
Pada bab ini kita tidak akan membuat template dari nol, namun kita akan mengubah dari
template yang sudah ada sehingga tampak seperti buatan kita sendiri, atau paling tidak lebih
berbeda dari template aslinya. Untuk keperluan tersebut, kita akan menggunakan template
gratisan dari Siteground yang tampilan aslinya seperti dibawah ini.
Gambar 32: Tampilan awal template dari Siteground
Mungkin kita tidak akan banyak merubah tata letak tampilan tersebut, tapi hanya mengubah
beberapa warna dan gambar sehingga sesuai dengan yang kita inginkan untuk situs kita
sendiri. Karena bersifat gratisan, kita tidak perlu khawatir merubahnya bahkan
mendistribusikannya kembali.
Agar kita dapat langsung melihat hasilnya, kita perlu menginstallnya terlebih dahulu pada
website Joomla kita yang sudah ada isinya. Caranya seperti instalasi extension yang lain,
melalui menu Extension  Install/Uninstall. Selanjutnya pilih file siteground-j15-35.zip, dan
klik Upload File & Install.
Sedikit intermezo. Meskipun Joomla telah menyediakan perangkat editor HTML dan CSS,
penulis sendiri lebih nyaman menggunakan program editor khusus, karena fitur syntax
highligter dan juga code foldingnya sangat membantu penulisan kode. Namun mungkin itu

tidak akan efektif jika kita telah mengupload website ke dalam web hosting. Nyaman atau
tidaknya menggunakan editor adalah tergantung kebiasaan dan keadaan, jadi anda juga
bebas memilih editor apa yang akan anda gunakan. Hanya saja yang penulis gunakan saat
membuat tutorial ini adalah Notepad++, editor gratisan yang mempunyai fitur cukup
lengkap, dan mengedit file yang ada di komputer lokal.
Untuk mengubah tampilan template tersebut, mengakses file HTML (istilah dalam template
Joomla) yang juga adalah file bernama index.php pada folder Template/siteground-j15-35.
Ini merupakan elemen-elemen tampilan yang belum diberikan properti tampilan sama
sekali. Adapun pengaturan tampilannya ada pada file css bernama Template.css yang
terletak pada folder Template/siteground-j15-35/css. Untuk lebih mempermudah buka saja
kedua file tersebut untuk diedit secara langsung.
Percobaan pertama kita adalah mengubah warna background menjadi hijau muda, untuk itu
lihatlah petika kode HTML pada file index.php di bawah ini.
Gambar 33: Petikan kode Index.php
Pada gambar di atas, amati baris ke 14, terdapat kode <body id="page_bg">. Itu
adalah kode HTML yang digunakan untuk memberikan identitas pada elemen, sehingga
nantinya lebih mudah diatur warnanya pada kode CSS.
Sekarang kita berpindah ke file template.css, kita cari kode "page_bg" (untuk lebih
mudahnya gunakan saja fasilitas search). Kita akan mendapatinya pada baris ke 100, dan
gambar lengkapnya seperti di bawah ini.
Gambar 34: Petikan kode template.css

Kemudian untuk merubah warna dari elemen page_bg menjadi hijau muda, ubahlah nilai
background yang semula "#FFF" menjadi "#88ff88" (jangan hilangkan karakter ";"). Simpan
dan lihat hasilnya pada website kita, lihat kita telah berhasil mengubah warna latar menjadi
hijau muda, dan siap untuk melakukan perubahan lainya.
Selanjutnya kita akan mengganti gambar yang ada pada Header dengan gambar yang lebih
cocok dengan latar belakangnya. Tidak terlalu sulit untuk mengubahnya (jika anda sudah
menguasai photo editor seperti PhotoShop atau GIMP), tinggal mengganti file header.jpg
yang berada pada folder template/siteground-j15-35/images dengan gambar yang baru.
Yang perlu diperhatikan adalah, agar layoutnya tidak berubah, kita harus menggunakan
gambar dengan ukuran yang sama, baik panjang dan lebarnya.
Gambar 35: gambar header setelah diganti
Oke, sudah berhasil mengganti gambar header. Tapi bahkan saya yang bukan desainer grafis
pun tahu, ada yang tidak beres dengan judul situsnya, tulisan judul situs kurang kontras dan
juga posisinya kurang tepat. Berarti pekerjaan kita selanjutnya adalah mengaturnya supaya
tepat dengan latar belakangnya.
Kembali ke gambar 33, sekarang perhatikan pada baris ke 17. Terlihat ada variabel Joomla
yang digunakan untuk menampilkan nama situs dan dimasukkan kedalam container <div
id="logo">. Seperti tadi, kita tinggal mencari kata kunci "logo" pada template.css.
Gambar 36: Petikan template.css (elemen logo)

Elemen logo yang diatur pada baris 150 sampai 155, adalah pengaturan posisi text logo.
Sedangkan pengaturan teks dan warnanya ada pada baris 157 sampai 168.
Untuk mengubah posisi text, kita bisa mengganti padding pada baris 151 yang sebelumnya
bernilai "30px 0 0 170px" menjadi " 55px 0 0 80px ". Sedangkan untuk mengubah tampilan
font, kita perlu mengubah color menjadi "#ffffcc", font-weight menjadi "bold", font-size
menjadi "25px", dan menambahkan properti text-transform dengan nilai "capitalize" untuk
memastikan huruf depan tiap kata menjadi kapital.
Setelah berhasil mengubah header, sekarang kita langsung ke bawah untuk mengubah
Footer. Selain tampilannya yang kurang cocok dengan warnanya, seringkali kita ingin
menghilangkan jejak pembuat template yang sebenarnya, atau bahkan menghilangkan jejak
Joomla sama sekali untuk alasan keamanan atau agar dianggap keren saja.
Gambar 37: Tampilan Footer yang belum diubah
Untuk melakukannya, kita lihat kembali file index.php yang merupakan inti dari Layout
template joomla yang kita kerjakan saat ini. Terlihat pada baris 53, terlihat identitas footer
itulah yang nanti akan kita cari pada template.css. Selain itu ada satu lagi, yaitu container
<div id="sgf"> yang berisi pemanggilan pada file lain yaitu templates.php.
Gambar 38: Kode HTML untuk Footer (index.php)
Gambar 39: Kode HTML untuk Footer (templates.php)

Untuk mengubah informasi yang ada di footer, agar mengarah pada kita, langsung saja kita
dapat mengubah informasi yang ada pada templates.php. Contoh pengubahannya untuk
personalisasi adalah seperti gambar dibawah ini.
Gambar 39: Kode HTML baru untuk Footer (templates.php)
Sedangkan untuk merubah tampilan, kita siap berangkat untuk memodifikasi template.css,
sesuai dengan identitas elemen yang sudah kita dapatkan sebelumnya yaitu footer dan sgf.
Pengaturan footer dapat ditemukan pada baris 257 sampai dengan 264, sedangkan
pengaturan sgf dapat ditemukan pada baris 939 sampai dengan 956.
Untuk mengubah tampilan latar belakang kita perlu menambahkan satu baris properti yaitu
background dengan nilai " url(../images/footer_gradient.jpg) #ffffff top right repeat-x".
Ternyata setelah diubah terlihat panjang dari footer tidak sesuai dengan panjang content
sebelumnya, sebab itulah kita perlu mengubah nilai width menjadi "960".
Pada informasi Footer, sebenarnya ada teks yang menjadi link dan ada yang tidak, tapi
karena pengaturannya di samakan jadi tidak terlalu tampak. Bila ingin membuatnya terlihat
berbeda, kita bisa mengatur tampilan link tersebut antara baris 940 sampai 951. Ubah nilai
color pada baris 941 dan baris 946 menjadi "#333", kemudian agar tampak lebih tebal
tambahkan properti font-weight dengan nilai "bold" pada baris 949 dan 943. Tampilan
Footer akan berubah seperti di bawah ini.
Gambar 40: Tampilan Footer setelah diubah
Selanjutnya kita akan melakukan tugas yang sedikit lebih sulit. Kesulitannya bukan pada
pengubahnnya, tapi pada pencarian elemennya, karena elemen yang kita atur sekarang
adalah elemen buatan Joomla, bukan elemen yang ada pada template seperti sebelumnya.
Pertama kita akan mengubah pengaturan tulisan "Welcome to the Frontpage" yang terletak
di bawah menu. Setelah di cari pada index.php, ternyata tidak ada. Tentu saja, karena itu
adalah content buatan Joomla yang sewaktu-waktu bisa berubah. Untuk mencarinya
identitas elemennya, kita perlu membuka view source pada browser kita.
Penulis menggunakan Mozila Firefox untuk membuka halaman website dan membuka kode
sumber, dan hasilnya adalah tulisan "Welcome to the Frontpage" ditemukan pada baris 246

dan dimasukkan dalam container dengan class componentheading. Selanjutnya kita tinggal
mencari pengaturan elemen tersebut pada template.css dan ketemu pada baris 289.
Tidak ada pengaturan tampilan yang dilakukan pada elemen ini, kecuali menghilangkannya,
karena memang saya sejak awal tidak suka ada tampilan judul halaman di sini. Caranya
mudah, tinggal menambahkan pengaturan display dengan nilai "none", dan elemen tersebut
akan disembunyikan.
Pengaturan selanjutnya adalah pengaturan header menu. Seperti sebelumnya, kita tidak
akan menemukan identitas elemen (secara deskriptif) pada file index.php, kita perlu
membuka source code-nya terlebih dahulu. Cari tulisan "Main Menu". Nah ketemu pada
baris 46.
Terlihat pada kode sumber tersebut, ternyata Judul menu adalah elemen <h3> yang
terdapat di dalam elemen module_menu. Setelah dicari pada template.css, ternyata tidak
ada pengaturan elemen h3 di dalam module_menu. Penelusuran berlanjut sampai
ditemukan pengaturan h3 di dalam elemen leftcolumn pada baris 616 sampai 631. Kembali
kita melihat kode sumber halaman website, ternyata memang benar elemen h3 yang kita
maksud juga terletak di dalam elemen container leftcolumn, berarti pencarian kita berhasil,
selanjutnya adalah modifikasi pengaturan.
Pengaturan yang akan kita lakukan disini hanyalah mengubah warna tulisan agar terlihat
lebih kontras, serta mengubah garis titik menjadi garis solid. Untuk itu yang perlu kita ubah
adalah nilai color menjadi "#444", kemudian juga mengubah nilai "dotted" pada border-top
dan border-bottom menjadi "solid". Agar warnya garisnya tidak terlalu kontras kita ubah
nilai "#777" manjadi "#aaa" pada kedua properti tersebut.
Sampai di sini pengaturan kita memang belum selesai dan tidak akan pernah selesai,
mengingat tiap orang mempunyai ide dan keinginan untuk tampilan yang berbeda. Tapi
paling tidak, kita telah berhasil mempraktekkan dasar-dasar kostumisasi tampilan pada
Joomla dengan mengubah template yang sudah ada. Selanjutnya dengan lebih banyak
latihan dan latihan, kita akan mampu membuat template kita sendiri mulai dari Nol.

Modul Joomla

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Modul Joomla

Uploaded by

Copyright:

Available Formats

2009

Gambar 1: Tampilan Halaman Admin Joomla 1.5

 Banyak plugin yang tersedia

JOSC-Udinus | Modul Pelatihan CMS Joomla 2

 Dukungan forum dan komunitas

 Tersedia dalam berbagai bahasa (termasuk Indonesia)

 Fasilitas tempat sampah seperti recycle bin

 Template tampilan yang mudah diganti

JOSC-Udinus | Modul Pelatihan CMS Joomla 3

Upload ke web hosting dengan FileZilla

Gambar 2: Tampilan Antarmuka FileZilla

JOSC-Udinus | Modul Pelatihan CMS Joomla 4

Gambar 3: Form Koneksi FTP pada FileZilla

2. Setelah FileZilla berhasil mendapatkan struktur direktori yang kemudian ditampilkan

Local site file explorer Remote site file explorer

Gambar 4: File & Folder Explorer pada FileZilla

JOSC-Udinus | Modul Pelatihan CMS Joomla 5

Gambar 5: Status File Upload pada FileZilla

JOSC-Udinus | Modul Pelatihan CMS Joomla 6

Gambar 6: Membuat database pada phpMyAdmin

Gambar 7: Tampilan pertama instalasi Joomla

JOSC-Udinus | Modul Pelatihan CMS Joomla 7

Gambar 8: Precheck technical requirement oleh Joomla

Gambar 9: Tampilan Lisensi GPL

JOSC-Udinus | Modul Pelatihan CMS Joomla 8

Gambar 10: Koneksi dengan database MySQL

Gambar 11: Pengaturan FTP

Gambar 12: Pengaturan situs dan login administrator

Gambar 13: Tampilan instalasi berhasil

JOSC-Udinus | Modul Pelatihan CMS Joomla 10

Gambar 13: Struktur konten default Joomla

JOSC-Udinus | Modul Pelatihan CMS Joomla 11

Gambar 14: Tampilan Section Manager

Gambar 15: Tampilan Formulir section

Title: judul dari section.

Alias: id khusus yang dapat dipahami oleh joomla.

Published: untuk menetapkan apakah akan ditampilkan atau tidak.

Order: menentukan urutan tampilan dari section.

JOSC-Udinus | Modul Pelatihan CMS Joomla 12

Image Position: posisi dari gambar yang telah dipilih sebelumnya.

Description: untuk memberikan keterangan tentang section yang dibuat

Gambar 15: Tampilan Formulir category

JOSC-Udinus | Modul Pelatihan CMS Joomla 13

Gambar 15: Tampilan Formulir category

JOSC-Udinus | Modul Pelatihan CMS Joomla 14

JOSC-Udinus | Modul Pelatihan CMS Joomla 15

Gambar 16: Tampilan konfigurasi situs

Gambar 17: Tampilan konfigurasi sistem

Allow User Regisration: mengijinkan pengunjung untuk mendaftar menjadi anggota.

JOSC-Udinus | Modul Pelatihan CMS Joomla 17

Gambar 18: Tampilan formulir pengguna

Name: nama asli pengguna

Username: nama pengguna untuk identifikasi joomla.

E-mail: surat elektronik pengguna.

New Password: password baru untuk login.

Verify Password: untuk memastikan password yang dimasukkan sebelumnya tepat.

Group: menentukan jenis pengguna yang dibuat.

JOSC-Udinus | Modul Pelatihan CMS Joomla 18

Gambar 19: Tampilan media manager

JOSC-Udinus | Modul Pelatihan CMS Joomla 19

Gambar 20: Tampilan menu manager

Gambar 21: Tampilan menu item manager

Gambar 22: Tampilan form menu item

Title: judul menu yang ditampilkan.