Joomla! adalah Sistem Manajemen Konten (SMK atau CMS) yang bebas dan terbuka (free open
source) ditulis menggunakan PHP dan basis data MySQL untuk keperluan di internet maupun
intranet. Seperti kita ketahui banyak sekali terdapat jenis-jenis CMS, diantaranya adalah Mambo,
Drupal, Geeklog, Post-Nuke dan lain sebagainya. Pada tanggal 17 September 2005, diluncurkan
Joomla versi awal yaitu 1.0.0 yang merupakan versi alias dari Mambo 4.5.2.3 yang dikembangkan
oleh "Pengembang Inti Mambo hingga Agustus 2005" yang hengkang dari Mambo. Fitur-fitur
Joomla! diantaranya adalah sistem caching untuk peningkatan performansi, RSS, blogs, poling, dan
lain sebagainya. Joomla! menggunakan lisensi GPL. Seperti yang disampaikan oleh Pihak
Pengembang Inti Joomla, Joomla 1.0.x akan berakhir pada Joomla 1.0.15. Tidak ada support dan
pengembangan selanjutnya. Dan mereka akan berkonsentrasi pada Joomla 1.5.x. Joomla secara
terus menerus dikembangkan melalui berbagai aktivitas oleh komunitas yang sangat aktif dan
tertarik dengan sistem ini.
Asal kata Joomla sendiri berasal dari kata Swahili yang mengandung arti "kebersamaan".
Secara garis besar, Joomla! terdiri dari 3 elemen dasar, yaitu server web (webserver), skrip PHP dan
basisdata MySQL. Server web diasumsikan terhubung dengan Internet/Intranet yang berfungsi
sebagai penyedia layanan situs. Skrip PHP terdiri dari kode program dalam bahasa PHP dan basisdata
merupakan tempat penyimpanan konten. Joomla menggunakan Apache sebagai server web dan
MySQL untuk basisdatanya.
Pertamakali, pengguna meminta akses terhadap halaman Joomla dengan mengeksekusi URL pada
browser web yang kemudian terhubung dengan server web. Permintaan ini yang dalam istilah teknis
lebih dikenal dengan query string selain terdapat URL juga mengandung parameter konten (section,
category, ID article dan lain-lain). Berdasarkan parameter tersebut, sistem skrip Joomla melakukan
kontak dengan basisdata dan mengambil konten yang dimaksud berdasarkan parameternya.
Terakhir, konten dan templat (template) digabung bersama dan kembali sebagai halaman html,
gambar, css dan javascript. Di Indonesia terdapat komunitas pengguna Joomla!® Indonesia sebagai
tempat berkumpul, berbagi, saling belajar, dan bertukar informasi, adapun komunitas tersebut
dinamakan id-joomla. Dimana para pengguna dapat saling berkomunikasi disitu. Adapun alamatnya
adalah /www.id-joomla.com/
Untuk mengelola template website ini, pengelola dapat melakukan perubahan dari front-end
maupun dari back-end seperti yang nanti akan dijelaskan lebih lanjut dalam modul pelatihan website
ini.
[1]
Pelatihan SISDA | 2011
[2]
Pelatihan SISDA | 2011
[3]
Pelatihan SISDA | 2011
2. Kemudian Pilih Home di Menu Item seperti terlihat pada gambar di bawah ini.
3. Kemudian pilih Parameters System dan masukkan Page Title yang dikehendaki
[4]
Pelatihan SISDA | 2011
1. Setelah masuk ke halaman admin seperti gambar di bawah. Klik halaman User (ditandai
dengan lingkaran).
[5]
Pelatihan SISDA | 2011
2. Setelah tampil halaman user, tambah user baru dengan cara klik “New”.
3. Kemudian akan tampil halaman user baru dan isi seperti gambar dan contoh di bawah :
Name : user
Username : user
email : user@email.com
New Password : user
Verify Password : user
Group : Administrator
• Registered User: pengguna normal website yang telah terdaftar dan dapat melihat menu
items yang telah diberi hak akses untuk registered user tetapi tidak dapat melakukan
perubahan dan penambahan berita/artikel.
• Author: Dapat mengirim berita/artikel baru melalui menu front end, tetapi harus mendapat
persetujuan oleh pengguna dengan level Publisher atau yang lebih tinggi. Pengguna dengan
level Author tidak dapat merubah berita/artikel yang sudah ada.
• Editor: Dapat mengirim dan merubah berita/artikel melalui menu front end, tetapi harus
mendapat persetujuan oleh pengguna dengan level Publisher atau yang lebih tinggi.
• Publisher: Dapat mengirim, merubah dan menampilkan berita/artikel melalui front end.
• Manager, Administrator and Super Administrator: Dapat melakukan semua tugas diatas
termasuk melakukan log in kedalam back-end (halaman administrator) dan mempunyai
wewenang yang bertingkat
[6]
Pelatihan SISDA | 2011
4. Halaman user akan tampil dan user yang baru ditambahkan akan ada di daftar.
[7]
Pelatihan SISDA | 2011
5. Untuk merubah user, klik (centang) pada user yang ingin dirubah, lalu klik Edit.
6. Kemudian akan tampil halaman user editor seperti waktu menambah user baru. Ganti isian
atau data yang diinginkan, misalnya pada bagian Group, dari Administrator diganti menjadi
Manager. Klik Save untuk menyimpan perubahan.
[8]
Pelatihan SISDA | 2011
7. Pada daftar user, Group dari user sudah berubah menjadi Manager.
8. Untuk menghapus user, centang pada nama user yang ingin dihapus, lalu klik Delete. Maka
nama user tersebut akan hilang dari daftar.
[9]
Pelatihan SISDA | 2011
Setelah masuk/login, arahkan mouse pada BJ Image Slider (sesuai Gambar di bawah) kemudian
klik Manage Images.
Arahkan
mouse dan
klik
1. Upload
2. Delete
[ 10 ]
Pelatihan SISDA | 2011
1. Upload
Secara umum upload dapat diartikan proses transmisi data dari komputer client/pemakai ke
internet. Pada gambar sebelumnya telah diberitahukan beberapa menu link, klik Upload
(seperti gambar dibawah ini)
Klik
[ 11 ]
Pelatihan SISDA | 2011
Klik
Isi nama
Tuliskan nama (apabila kosong akan terisi sesuai nama file foto), cari file foto yang akan di
upload, dan tuliskan deskripsi singkat mengenai foto tersebut, setelah selesai kemudian klik
Upload apabila tidak jadi klik close yang akan mengembalikan ke menu awal image slider.
Catatan :
Ukuran image yang diupload 960x300 misal mempunyai nama contoh.jpg
[ 12 ]
Pelatihan SISDA | 2011
2. Delete
Menghapus file yang sudah di upload atau sudah tampil..
Klik
Pilih
salah
satu
Untuk menghapus data terlebih dahulu klik/tandai kolom yang akan akan di hapus
kemudian klik Delete. Contoh klik Banjir Kanal Timur kemudian klik Delete sehingga data
tersebut terhapus.
Klik
[ 13 ]
Pelatihan SISDA | 2011
Akan tampil seperti gambar di bawah ini kemudian klik Main Menu
Klik
Setelah tampil seperti gambar di bawah ini kemudian klik New untuk menambah menu.
Klik
[ 14 ]
Pelatihan SISDA | 2011
Klik
Kemudian klik External Link, akan tampil di layar seperti gambar di bawah ini
[ 15 ]
Pelatihan SISDA | 2011
Setelah selesai klik save dan akan langsung kembali ke menu awal, bisa dilakukan berulang sesuai
dengan keperluan untuk membuat menu.
1. Menghapus Menu
Untuk menghapus menu utama pilih salah satu kolom kemudian klik trash. Setelah selesai
dan terhapus, maka akan kembali ke menu awal.
Klik
[ 16 ]
Pelatihan SISDA | 2011
1. Di Halaman Administrator, pilih Menus kemudian pilih submenu Info Umum muncul
halaman Menu Item Manager seperti di bawah ini, halaman Menu Item Manager
digunakan untuk melakukan penambahan, perubahan dan penghapusan Menu Samping.
[ 17 ]
Pelatihan SISDA | 2011
[ 18 ]
Pelatihan SISDA | 2011
Digunakan untuk menghubungan menu yang kita buat dengan daftar berita/artikel yang
sudah pernah kita buat sebelumnya dan dapat dicari berdasarkan tanggal, untuk
mengurutkan berita yang dimaksud dapat disetting menggunakan menu dibawah ini:
- Article Layout
Digunakan untuk menghubungan menu yang kita buat dengan sebuah berita/artikel yang
sudah pernah kita buat sebelumnya, untuk memilih berita yang dimaksud dapat disetting
menggunakan menu dibawah ini:
Digunakan untuk menambahkan suatu artikel pada menu yang kita pilih, Pengguna yang
mempunyai level sebagai Authors, Publishers, atau Editors groups yang dapat mengirimkan
artikel/berita tersebut.
[ 19 ]
Pelatihan SISDA | 2011
Pilihan ini menampilkan berita/artikel dalam suatu kategori khusus yang telah dipilih/dibuat
sebelumnya. Pada Joomla kategori blog layout ini mempunyai 3 (tiga) bagian utama yaitu
Leading Area, Intro Area dan Links Area.
Untuk #Leading ada 1 berita/artikel yang ditampilkan dengan tampilan penuh, sedangkan
untuk #Intro ada 4 artikel yang ditampilkan dalam 2 kolom seperti yang disetting pada field
Columns di atas, serta untuk #Links yang ditampilkan hanya judul berita/artikel saja dan
merupakan link ke berita lengkapnya.
[ 20 ]
Pelatihan SISDA | 2011
Untuk menampilkan daftar berita/artikel dalam satu kategori kita dapat memilih Category
List Layout ini, gambar dibawah ini adalah contoh tampilan menggunakan pilihan ini :
Untuk melakukan perubahan setting pada Category List Layout, kita dapat melakukan setting
pada menu Parameter – Basic, dimana kita dapat memilih kategori, jumlah links dan data
yang ditampilkan seperti gambar dibawah ini :
[ 21 ]
Pelatihan SISDA | 2011
Untuk menampilkan semua berita/artikel yang ditampilkan dihalaman depan dengan layout
blog, setting dan tampilan hampir sama dengan Category Blog Layout :
Setting yang dilakukan juga sama seperti pada Category Blog Layout, seperti gambar di
bawah ini :
Untuk menampilkan berita/artikel berdasarkan section tertentu kita menggunakan menu ini,
untuk tampilan dan setting sama seperti Category Blog Layout yang membedakan hanya
berdasarkan suatu section tertentu bukan kategori.
[ 22 ]
Pelatihan SISDA | 2011
- Section Layout
2. External Link
Pilihan menu ini akan menghubungkan menu yang dipilih dengan suatu website, halaman,
ataupun suatu file (misalnya sebuah file image). Untuk menampilkan suatu image maka image
tersebut harus disimpan dibawah folder "images/stories".
3. Separator
Pilihan menu ini digunakan sebagai pemisah untuk memisahkan menu yang ada.
4. Alias
Alias digunakan untuk melakukan link dengan sebuah menu yang sudah ada sebelumnya.
[ 23 ]
Pelatihan SISDA | 2011
G. Menambahkan Berita
Langkah pertama masuk halaman login dengan memilih menu login, seperti di bawah ini :
Setelah login maka akan tampil tampilan baru seperti dibawah ini :
[ 24 ]
Pelatihan SISDA | 2011
Panel Formatting
Pada kolom Judul dapat diisikan judul dari berita yang akan dimasukkan. Kemudian pada tombol
[ show/hide ] untuk menampilkan/menghilangkan panel formatting. Panel formatting digunakan
untuk mengedit isi dari berita yang akan diisikan. Seperti memilih font, font size, warna dari font dan
sebagainya.
[ 25 ]
Pelatihan SISDA | 2011
1 2
Untuk menambah berita pada halaman depan, pada bagian bidang pilih Berita seperti gambar 1 di
atas kemudian pilih kategorinya seperti gambar 2 di atas. Kemudian setelah selesai klik tombol
simpan seperti ditunjukkan gambar sebelumnya. Setelah itu berita akan tampil pada bagian seperti
yang digambarkan dibawah ini.
[ 26 ]
Pelatihan SISDA | 2011
Bagian Berita
Untuk memasukkan gambar dapat menggunakan tombol dengan simbol seperti pada gambar
[ 27 ]
Pelatihan SISDA | 2011
setelah meng-klik gambar tersebut maka akan muncul tampilan sebagai berikut :
Gambar yang tampil pada folder diatas itu ada di folder /images/stories/. Jadi kalau mau
menambahkan foto pada pilihan gallery dapat meng-upload atau mengcopykan file gambar ke folder
tersebut. Untuk memasukkan gambar dapat menggunakan tombol Insert
Untuk mempercantik teks pada berita/artikel dapat menggunakan menu yang ada di joomla yaitu
tinyMCE Editor seperti gambar dibawah ini:
[ 28 ]
Pelatihan SISDA | 2011
• Dari sebelah kiri untuk melakukan fungsi teks tebal, garis miring, garis bawah, kemudian
pemilihan jenis, ukuran dan style font. Kemudian untuk melakukan setting alinea paragraph
kiri, kanan, center dan penuh.
Baris Kedua :
• Untuk melakukan potong (cut), salin (copy), tempel (paste) dan pencarian (find)
Untuk merubah warna font dan memberikan warna background di belakang font
• Untuk menghilangkan link, Outdent (geser ke kiri) dan Indent ( geser ke kanan)
• Undo (Ctrl+Z) and Re-do (Ctrl+Y).
• Memberikan penomoran angka dan symbol, memberikan dan menghilangkan format
Baris Ketiga :
• Untuk melakukan setting perubahan arah bahasa dari kiri ke kanan dan sebaliknya
• Untuk menyisipkan emoticon, full screen mode, preview dan pengelolaan format tabel
• Untuk setting print dan menambahkan penggaris horizontal
• Untuk menyisipkan subscript dan superscript, dan karakter tertentu
Baris keempat :
[ 29 ]
Pelatihan SISDA | 2011
Editing Berita
Alamat web
[ 30 ]
Pelatihan SISDA | 2011
[ 31 ]
Pelatihan SISDA | 2011
untuk editing masuk ke menu articles seperti gambar diatas. Setelah itu akan tampil tampilan
sebagai berikut :
Kemudian cari sampai dengan bertemu dengan section berita atau dengan melihat judul pada kolom
title yang akan dihapus. Apabila pada lembar ini tidak ditemukan berita yang dimaksud dapat
mengklik tombol next seperti berikut ini
:
[ 32 ]
Pelatihan SISDA | 2011
Section berita pada website ini terlihat pada halaman ini adalah 4 item berita. Seperti yang
digambarkan gambar diatas. Untuk menghapus berita dapat memilih berita yang akan dihapus
dengan cara memberikan tanda check (√) pada berita kemudian klik trash. Seperti gambar berikut :
[ 33 ]
Pelatihan SISDA | 2011
Proses ini tidak ada konfirmasi. Berita yang dipilih akan langsung terhapus ketika klik tombol trash.
Adapun hasil ketika sudah di klik trash seperti tampak pada gambar dibawah ini :
Untuk menambahkan berita dapat menekan tombol new seperti gambar dibawah ini :
[ 34 ]
Pelatihan SISDA | 2011
Kemudian bisa dilanjutkan menambah berita baru seperti langkah-langkah pada front-end.
[ 35 ]
Pelatihan SISDA | 2011
Setelah masuk/login akan tampil seperti gambar di bawah ini, kemudian klik Articles.
Klik
Kemudian akan tampil seperti gambar di bawah ini, pilih salah satu kotak untuk dilakukan
pengubahan. Sebagai contoh akan di ubah pdsdanet, maka klik kotak pada pdsdanet kemudian klik
change.
Klik
Klik
kotak
[ 36 ]
Pelatihan SISDA | 2011
Kemudian akan tampil seperti gambar di bawah ini, lakukan perubahan yang diinginkan, dimana
Section dan Category disesuaikan. Ini bisa dilakukan dengan yang lainnya.
disesuaikan
klik
[ 37 ]
Pelatihan SISDA | 2011
Akan tampil seperti gambar dibawah, lalu pilih sub menu Info Umum
klik
Kemudian terlihat seperti gambar di bawah, kemudian klik New untuk membuat menu.
Klik
[ 38 ]
Pelatihan SISDA | 2011
Klik
Kemudian klik External Link, akan tampil di layar seperti gambar di bawah ini
[ 39 ]
Pelatihan SISDA | 2011
Setelah selesai klik save dan akan langsung kembali ke menus (gambar menus), cara seperti ini bisa
dilakukan secara berulang sesuai keperluan membuat menu pada web.
[ 40 ]
Pelatihan SISDA | 2011
[ 41 ]
Pelatihan SISDA | 2011
Setelah itu akan muncul form pengisian untuk menambahkan acara baru, sebagai berikut:
[ 42 ]
Pelatihan SISDA | 2011
atau
b. Klik tombol “Tempat Baru” untuk menambahkan acara baru [akan dijelaskan pada
petunjuk berikutnya], atau
c. Klik tombol “Tidak Ada Tempat” bila ingin mengosongkan field Tempat.
4. Tanggal mulai: Isikan tanggal dengan meng-klik logo kalender ( ) maka akan tampil pilihan
tanggal sebagai berikut
[ 43 ]
Pelatihan SISDA | 2011
5. Tanggal selesai: Isikan tanggal dengan meng-klik logo kalender ( ) maka akan tampil
pilihan tanggal sebagai berikut
9. Gambar: isikan field ini bila ada gambar tertentu terkait dengan acara yang akan
berlangsung dengan cara meng-klik tombol “Choose File” untuk mencari gambar yang
dikehendaki.
[ 44 ]
Pelatihan SISDA | 2011
10. Deskripsi: isikan field ini untuk deskripsi acara yang akan berlangsung.
Klik Gambar bila ingin menambahkan file gambar pada deskripsi acara.
11. Klik tombol Simpan untung menyimpan acara yang telah diisikan atau klik tombol Batal
untuk membatalkan penginputan.
[ 45 ]
Pelatihan SISDA | 2011
[ 46 ]
Pelatihan SISDA | 2011
Setelah itu akan muncul form pengisian untuk menambahkan acara baru, sebagai berikut:
[ 47 ]
Pelatihan SISDA | 2011
3. Deskripsi: isikan field ini untuk deskripsi acara yang akan berlangsung.
Klik Gambar bila ingin menambahkan file gambar pada deskripsi acara.
4. Klik tombol Simpan untung menyimpan tempat yang telah diisikan atau klik tombol Batal
untuk membatalkan peng-input-an.
L. Merubah Footer
1. Buka file www\templates\bj_venus\css\ bottom.css.php
2. Sesuaikan isi dengan kebutuhan
3. Simpan
4. Segarkan halaman web, footer akan berganti
[ 48 ]
Pelatihan SISDA | 2011
M. Galeri Foto
Pengaturan Galeri Foto dapat dilakukan secara menyeluruh, mulai dari mengelola kategori foto,
mengelola foto, mengelola komentar, mengunggah foto, hingga mengatur konfigurasi galeri foto.
Sedangkan akses melalui front-end hanya dapat melakukan penambahan foto baru dengan kategori
dan konfigurasi yang telah ditentukan melalui admin.
Setelah melakukan login ke halaman admin, Galeri foto dapat di akses dengan memilih komponen
JoomGallery melalui tab Components
atau akses melalui list Components yang terdapat di sisi kanan halaman administrator
Setelah mengakses menu tersebut diatas maka akan di arahkan kepada halaman JoomGallery
Admin-Menu dimana pada halaman ini dapat dilakukan pengaturan Galeri Foto secara penuh.
[ 49 ]
Pelatihan SISDA | 2011
1. Category Manager
2. Image Manager
3. Comments Manager
4. Image Upload
5. Batch Upload
6. FTP Upload
7. Java Upload
8. Configuration Manager
9. CSS Manager
10. Migration Manager
11. Maintenance Manager
12. Help and Information
Pada modul ini pelatihan difokuskan pada Category Manager, Image Manager dan Image Upload.
Category Manager
Pengaturan kategori foto dapat dilakukan dengan mengakses menu Category Manager pada
JoomGallery Admin-Menu.
[ 50 ]
Pelatihan SISDA | 2011
Klik tombol New untuk menambahkan kategori baru pada Galeri Foto, maka akan tampil halaman
seperti gambar dibawah ini
Isikan field-field pada halaman Add Category dengan informasi sebagai berikut:
[ 51 ]
Pelatihan SISDA | 2011
7. Pada kolom Metadata Information diisikan dengan informasi Deskripsi Metadata dan
Keywords Metadata.
8. Klik Save untuk menyimpan dan kembali ke halaman Categoty Manager, Apply untuk
menyimpan dan tetap berada di halaman Add Category atau Cancel untuk membatalkan
inputan.
*Tambahan: Jika Kategori baru diisikan tanpa memilih Parent Category maka Kategori baru tersebut
merupakan sebuah kategori root, atau kategori tingkat pertama. Misalnya dimasukkan sebuah
kategori baru dengan nama Infrastruktur SDA tanpa Parent Category, maka Infrastruktur SDA
merupakan sebuah kategori root yang akan ditampilkan pada Category Manager sebagai berikut
Jika Kategori baru diisikan dengan memilih sebuat Parent Category maka Kategori baru tersebut
merupakan Kategori turunan dari Parent Category yang dipilih. Misalkan dimasukkan sebuah
kategori baru dengan nama Gedung Ditjen SDA dengan mengisikan kolom Parent Category sebagai
Infrastruktur SDA yang telah dihasilkan pada contoh diatas, maka kategori Gedung Ditjen SDA
merupakan sebuah kategori turunan dari kategori Infrastruktur SDA yang akan ditampilkan pada
Category Manager sebagai berikut
Image Manager
[ 52 ]
Pelatihan SISDA | 2011
Setelah dibuatkan kategori yang merupakan tempat (folder) penyimpanan foto yang akan diunggah
maka langkah berukutnya adalah melakukan pengelolaan gambar.
Pengaturan foto dapat dilakukan dengan mengakses menu Image Manager pada JoomGallery
Admin-Menu.
Klik foto yang hendak di atur untuk melakukan pengaturan pada foto tersebut, maka akan tampil
halaman seperti gambar dibawah ini
Isikan field-field pada halaman Add Category dengan informasi sebagai berikut:
Klik Save untuk menyimpan dan kembali ke halaman Image Manager, Apply untuk menyimpan dan
tetap berada di halaman Add Image atau Cancel untuk membatalkan inputan.
Image Upload
Untuk menambahkan foto baru melalui halaman admin dapat di lakukan dengan mengakses menu
Image Upload pada JoomGallery Amin-Menu.
Setelah mengakases menu Image Upload maka akan diarahkan pada halaman Image Upload seperti
dibawah ini
[ 54 ]
Pelatihan SISDA | 2011
Isikan field-field pada halaman Image Upload dengan informasi sebagai berikut:
1. Select Image: Merupakan field untuk mencari foto yang akan di unggah, klik Choose File
untuk mencari.
2. Category photos will be assigned to: Pada kategori apa foto akan ditempatkan, kategori
merupakan kategori yang telah dibuatkan pada proses pengaturan kategori foto.
3. Numbering start: Nilai awal pada proses penomoran foto yang diunggah.
4. Generic Title: Merupakan Judul utama foto-foto yang akan diunggah diikuti dengan
penomoran pada proses 3.
5. Generic Description: Deskripsi foto umum (opsional).
6. Author: Pencipta foto (opsional).
7. Published: Opsi untuk menerbitkan kategori baru yang dibuat atau tidak diterbitkan, secara
default akan terpilih Yes.
8. Transparent or animated image files.
9. Debug Mode.
10. Klik tombol Upload untuk mengunggah foto-foto.
[ 55 ]
Pelatihan SISDA | 2011
Kemudian baru kita pilih System – kareebu Secure seperti terlihat di gambar di bawah ini :
[ 56 ]
Pelatihan SISDA | 2011
Kemudian akan muncul tampilan seperti gambar di bawah ini, untuk merubah alamat
“alamatweb/administrator/?Pengelola@pdsdanet” kita dapat memilih pada Parameters :
Untuk dapat menggunakan alamat khusus untuk mengakses halaman admin kita harus memilih
setting compatibility, sedangkan apabila kita ingin mengakses halaman admin seperti biasa kita
tinggal pilih HTTP Authentication.
[ 57 ]