Anda di halaman 1dari 57

Pelatihan SISDA | 2011

Pengenalan Joomla Dan Template Website Ditjen. SDA

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 memudahkan pengelola website melakukan perubahan terhadap website masing-masing


instansi yang dikelolanya, Ditjen. Sumber Daya Air dalam hal ini Subdit. Data dan informasi telah
menyiapkan template website Ditjen. Sumber Daya Air. Template website ini dikembangkan
menggunakan sistem manajemen konten berbasis Joomla.

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

A. Masuk Ke Halaman Administrator

1. Buka halaman administrator web pada alamat browser, misalnya :


“alamatweb/administrator/?Pengelola@pdsdanet” maka akan tampil halaman login seperti
yang terlihat pada gambar di bawah ini:

2. Kemudian isi Username dengan “admin@website” dan isi Password dengan


“website@sisdaharusmaju” (langkah 1). Geser posisi Captcha dari posisi Locked ke
Unlocked (langkah 2). Kemudian klik Login (langkah 3).

[2]
Pelatihan SISDA | 2011

3. Kemudian akan tampil halaman admin seperti gambar di bawah.

B. Merubah Title Template Website Ditjen SDA


1. Setelah berhasil masuk ke halaman administrator, pilih menus kemudian pilih main menu,
Seperti terlihat pada gambar di bawah ini.

[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

4. Maka akan tampil title website seperti yang dikehendaki

C. MENAMBAH, MERUBAH, DAN MENGHAPUS USER

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

Untuk penjelasan masing-masing group :

• 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

Kemudian Klik Save

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

D. Merubah Gambar Slide Show


Salah satu ciri web portal adalah adanya beberapa gambar yang tampil secara diam maupun
bergerak. Gambar yang bergerak dapat berupa dokumen Flash maupun gambar datar (image flate)
yang bergerak secara horizontal atau vertical. 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).

Setelah masuk/login, arahkan mouse pada BJ Image Slider (sesuai Gambar di bawah) kemudian
klik Manage Images.

Arahkan
mouse dan
klik

Kemudian di kanan atas tampil link (seperti gambar di bawah ini) :

1. Upload
2. Delete

[ 10 ]
Pelatihan SISDA | 2011

Gambar Menu Awal Manage Images

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

Kemudian tampil seperti gambar di bawah ini

Klik

Isi nama

Deskripsi singkat foto


Cari
File
Foto

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

Kemudian di direktori “images/stories/bj_imageslider/1”


akan tergenerate 3 (tiga) buah image baru dengan ukuran 52x35 (contoht.jpg), 650x300
(contoh.jpg) dan file aslinya 960x300 (contohx.jpg) tetapi image default yang digunakan oleh
bj_imageslider adalah yang 650 x 300 maka nama contoh.jpg yang dipakai oleh image
ukuran 650x300 diganti menjadi nama lain, dan nama contoh.jpg digunakan untuk image
ukuran 960x300 agar gambar yang dipakai bisa tampil penuh.

[ 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.

E. Menambah Menghapus Menu Atas (Top Menu)


Pada menu awal seperti gambar di bawah ini, klik Menus

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

Gambar Menu Awal

[ 14 ]
Pelatihan SISDA | 2011

Akan tampil seperti gambar di bawah ini

Klik

Kemudian klik External Link, akan tampil di layar seperti gambar di bawah ini

Mengisi form untuk menu:

a. Title -> nama menu yang diinginkan tampil


b. Alias -> nama singkat dari title

[ 15 ]
Pelatihan SISDA | 2011

c. Link -> sesuai file/foto yang diinginkan


d. Display in -> Main Menu
e. Parent Items -> untuk parent (menu utama) pilih top, untuk child(menu di dalam menu) pilih
sesuai bagian yang diinginkan
f. Publish -> Yes
g. Acces Levels -> Public

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

Hasil yang terlihat pada web

F. Menambah dan Merubah Menu Samping / Side Menu

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

2. Untuk melakukan penambahan menu samping pilih menu New nanti


muncul halaman seperti dibawah ini :

Menu Item mempunyai beberapa jenis pilihan meliputi :

1. Internal Links – Article

Ketika dipilih maka akan muncul menu baru seperti ini :

[ 18 ]
Pelatihan SISDA | 2011

- Archived Article List

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:

- Article Submisson Layout

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

- Category Blog Layout

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 melakukan perubahan artikel/berita yang ditampilkan, kita dapat melakukan


perubahan pada setting dibawah ini :

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

- Category List Layout

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

- Front Page Blog Layout

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 :

- Section Blog Layout

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

Untuk menampilkan berita/artikel berdasarkan kategori dalam satu section tertentu,


misalnya tampilannya seperti dibawah ini :

Section Layout disamping


menampilkan 5 kategori
berita/artikel yang ada
berdasarkan section
beranda

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 :

Login dengan username : admin@website dengan password : website@sisdaharusmaju pada form


yang tampil seperti diatas

Setelah login maka akan tampil tampilan baru seperti dibawah ini :

Untuk menambahkan berita, dapat memilih menu Tambahkan Berita Baru

[ 24 ]
Pelatihan SISDA | 2011

Tombol untuk membatalkan


Setelah itu maka akan tampil tampilan sebagai berikut :
Tombol untuk simpan berita

Isikan judul disini

Panel Formatting

Form untuk mengisikan Berita

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

Isikan dengan deskripsi berita / kosongkan

Isikan dengan katakunci berita / kosongkan

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

Panel formatting pada pemasukan 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

Baris Paling Atas :

• 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 :

• Untuk setting css, control visual, citation, abbreviation, dan acronym


• Untuk menyisipkan gambar, link, spelling, readmore dan page break

[ 29 ]
Pelatihan SISDA | 2011

Editing Berita

Untuk meng-edit berita, masuk ke halaman administrator dengan cara

Alamat web

Masuk ke browser kemudian masuk ke halaman administrator dengan mengetikkan alamat :


http://alamatweb/administrator/?Pengelola@pdsdanet
sampai dengan tampil tampilan sebagai berikut :

[ 30 ]
Pelatihan SISDA | 2011

Kemudian isi Username dengan “admin@website” dan isi Password dengan


“website@sisdaharusmaju” (langkah 1). Geser posisi Captcha dari posisi Locked ke
Unlocked (langkah 2). Kemudian klik Login (langkah 3).

Tampilan utama setelah login adalah sebagai berikut :

[ 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

Setelah itu akan tampil halaman selanjutnya seperti berikut ini :

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 :

Menambahkan berita melalui halaman admin

Untuk menambahkan berita dapat menekan tombol new seperti gambar dibawah ini :

[ 34 ]
Pelatihan SISDA | 2011

Setelah itu maka akan muncul tampilan sebagai berikut :

Kemudian bisa dilanjutkan menambah berita baru seperti langkah-langkah pada front-end.

H. Merubah Halaman Utama Template Ditjen. SDA

[ 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

I. Membuat Struktur Organisasi


Setelah masuk/login akan tampil seperti gambar di bawah ini, kemudian klik Menus.

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

Akan tampil seperti gambar di bawah ini

Klik

Kemudian klik External Link, akan tampil di layar seperti gambar di bawah ini

[ 39 ]
Pelatihan SISDA | 2011

Mengisi form untuk menu:

a. Title -> nama yang diinginkan tampil


b. Alias -> nama singkat dari title
c. Link -> sesuai file/foto yang diinginkan
d. Display in -> Info Umum
e. Parent Items -> untuk parent (menu utama) pilih top
f. Publish -> Yes
g. Order -> pilih 6 (disesuaikan urutan yang diinginkan)
h. Acces Levels -> Public

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.

Hasil terlihat pada web seperti gambar di bawah

[ 40 ]
Pelatihan SISDA | 2011

J. Menambahkan Acara Baru


Langkah pertama masuk halaman login dengan memilih menu login, seperti di bawah ini :

Login dengan username : admin@website dengan password : website@sisdaharusmaju pada form


yang tampil seperti diatas.

Setelah login maka akan tampil menu pengguna seperti berikut:

[ 41 ]
Pelatihan SISDA | 2011

Untuk menambahkan acara, pilih menu Tambahkan Acara Baru

Setelah itu akan muncul form pengisian untuk menambahkan acara baru, sebagai berikut:

Isikan field-field dengan informasi sebagai berikut:

1. Topik: Topik acara yang akan berlangsung.


2. Tempat: Tempat acara yang akan berlangsung.
a. Klik tombol “pilih” untuk memilih tempat pelaksanaan acara, maka akan tampil
pilihan tempat yang sudah ada pada database 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.

3. Kategori: Kategori ruang lingkup acara yang akan berlangsung.

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

6. Waktu mulai: waktu mulai pelaksanaan acara (format waktu hh:mm).


7. Waktu selesai: waktu selesai pelaksanaan acara (format waktu hh:mm).
8. Pengulangan acara: Isikan field ini bila ada pengulangan acara perharian, mingguan, bulanan
atau pengulangan di tiap hari kerja, atau pilih tidak bila acara hanya berlangsung sekali.

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

K. Menambahkan Tempat Baru


Langkah pertama masuk halaman login dengan memilih menu login, seperti di bawah ini :

Login dengan username : admin@website dengan password : website@sisdaharusmaju pada form


yang tampil seperti diatas.

Setelah login maka akan tampil menu pengguna seperti berikut:

[ 46 ]
Pelatihan SISDA | 2011

Untuk menambahkan tempat, pilih menu Tambahkan Tempat Baru

Setelah itu akan muncul form pengisian untuk menambahkan acara baru, sebagai berikut:

Isikan field-field dengan informasi sebagai berikut:

1. Alamat: Alamat tempat berlangsungnya acara, yang terdiri dari:


a. Nama Tempat: Nama Tempat berlangsungnya acara.
b. Jalan: Nama Jalan Tempat berlangsungnya acara.
c. Kode Pos: Kode Pos alamat Tempat berlangsungnya acara.
d. Kota: Nama kota Tempat berlangsungnya acara.
e. Provinsi: Provinsi letak Tempat berlangsungnya acara.
f. Negara: Negara Tempat berlangsungnya acara, isikan dengan ID untuk Indonesia.
g. Website: Website yang terkait dengan Tempat berlangsungnya acara.
2. Gambar: isikan field ini bila ada gambar tertentu terkait dengan tempat pelaksanaan acara
yang akan berlangsung dengan cara meng-klik tombol “Choose File” untuk mencari gambar
yang dikehendaki.

[ 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

Beberapa hal yang dapat diatur dari halaman ini adalah:

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:

1. Title: Nama kategori baru yang akan di buat.


2. Alias: Alias dari Title, kosongkan untuk mengisi otomatis.
3. Parent category: Kategori Induk bila kategori baru yang akan dibuat merupakan turunan dari
kategori yang sudah eksis sebelumnya [akan dijelaskan pada petunjuk berikutnya*]
4. Published: Opsi untuk menerbitkan kategori baru yang dibuat atau tidak diterbitkan, secara
default akan terpilih Yes.
5. Description: Deskripsi kategori foto yang akan dibuat, klik Image bila ingin menambahkan
file gambar pada deskripsi acara.
6. Pada kolom parameter, dapat diatur beberapa paremeter sebagai berikut
a. Owner: User yang membuat kategori baru tersebut
b. Access: Level akses kategori baru yang akan dibuat
c. Hidden
d. Ordering: Urutan tata letak kategori pada tampilan Galeri Foto.
e. Thumbnail: Gambar preview yang hendak digunakan pada tampilan Kategori Foto
pada Galeri Foto.
f. Thumbnail alignment:

[ 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:

1. Title: Nama foto baru yang akan di tambahkan.


2. Alias: Alias dari Title, kosongkan untuk mengisi otomatis.
3. Category: Kategori foto.
4. Published: Opsi untuk menerbitkan kategori baru yang dibuat atau tidak diterbitkan, secara
default akan terpilih Yes.
5. Description: Deskripsi kategori foto yang akan dibuat, klik Image bila ingin menambahkan
file gambar pada deskripsi acara.
6. Thumbnail preview: Merupakan pratinjau dari thumbnail foto.
7. Image priview: Merupakan pratinjau dari foto.
[ 53 ]
Pelatihan SISDA | 2011

8. Pada kolom parameter, dapat diatur beberapa paremeter sebagai berikut


a. Owner: User yang memiliki gambar baru tersebut
b. Author: Pencipta gambar tersebut.
c. Hidden
9. Pada kolom Replace image files, dapat diatur parameter berikut
a. Thumbnail: Pilih gambar yang hendak dijadikan gambar baru yang akan
menggantikan gambar thumbnail yang sudah eksis, kosongkan bila gambar
thumbnail tidak ingin digantikan.
b. Detail Image: Pilih gambar yang hendak dijadikan gambar baru yang akan
menggantikan gambar detail yang sudah eksis, kosongkan bila gambar detail tidak
ingin digantikan.
c. Original Image: Pilih gambar yang hendak dijadikan gambar baru yang akan
menggantikan gambar asli yang sudah eksis, kosongkan bila gambar asli tidak ingin
digantikan.
10. Pada kolom Metadata Information diisikan dengan informasi Deskripsi Metadata dan
Keywords Metadata.

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

N. Merubah Alamat Halaman Admin


Untuk alasan keamanan website, untuk mengakses halaman administrator template website Ditjen.
Sumber Daya Air, pengelola website harus melakukan penulisan di browser seperti :
“localhost/www/administrator/?Pengelola@pdsdanet” baru kemudian muncul halaman login
administrator. Untuk merubah alamat halaman admin kita dapat melakukannya dengan masuk ke
menu Plugins seperti gambar dibawah ini :

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 :

Setting pada plugin Parameters adalah :

Enable kita pilih yes

Password kita masukkan alamat untuk mengakses halaman administrator

http://sda.pu.go.id/administrator/?Password – Password disini yang kita isikan untuk mengakses


halaman admin tersebut.

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 ]

Anda mungkin juga menyukai