Tutorial Joomla Versi 1.5.3
D3 Unggulan – Eldayati, S.Kom Hal 1 dari 32
1. Pengenalan Joomla!!
“Joomla! is one of the most powerful Open Source
Content Management Systems on the planet. It is
used all over the world for everything from simple
web sites to complex corporate applications. Joomla!
is easy to install, simple to manage, and reliable.” –
www.joomla.org
a. Content Management System
Sebagai langkah awal ada baiknya Anda mengerti dahulu apa itu CMS atau Content
Management System. Apakah sama dengan software HTML editor lainnya seperti Microsoft
FrontPage, Dreamweaver, atau bahkan sebuah Notepad?
Seperti yang kita ketahui, content merupakan salah satu urat nadi dari kehidupan sebuah
website. Tanpa content dapat dipastikan tidak ada website. Sebuah website yang dikelola
dengan baik pasti akan selalu berusaha menampilkan content terbaru bagi para pengunjungnya.
Lalu apa yang dimaksud dengan content sebenarnya? Pada dasarnya content adalah sebuah
unit informasi yang digunakan untuk membentuk sebuah halaman di website. Dapat terdiri dari
apa saja; teks, gambar, video, suara, dan lain sebagainya.
Dari content yang sudah ada tadi, kemudian diatur sedemikian rupa sehingga membentuk
sebuah website. Untuk memudahkan pekerjaan, sering kali aturan-aturan dan proses kerja pun
dibuat antara seorang webmaster yang lebih memperhatikan sisi teknis dan penampilan dari
website dengan seorang penulis/editor yang menyumbangkan content untuk website. Dalam arti
kata lain, manajemen terhadap content yang akan ditampilkan. Baik webmaster maupun
penulis/editor dapat membuat, mengedit, mengatur dan mempublikasikan sebuah content
dalam framework/sistem yang telah dipersiapkan sebelumnya.
Framework atau sistem, tempat di mana content itu diletakkan menfasilitasi ‘perkakas-
perkakas’ yang dibutuhkan untuk menjaga konsistensi proses pembuatan halaman-halaman di
website secara efisien dan efektif.
Bila semua informasi diatas kita gabung menjadi satu, dapatlah disimpulkan, CMS adalah
sebuah sistem yang memudahkan proses penciptaan sebuah website dinamis yang kaya akan
content, dengan memberikan kemudahan kepada penulis/editor untuk menambah,
memperbaharui dan menghapus content yang ada tanpa campur tangan langsung dari
webmaster. Sebuah CMS akan membedakan content dari desain, memelihara konsistensi
Tutorial Joomla Versi 1.5.3
D3 Unggulan – Eldayati, S.Kom Hal 2 dari 32
tampilan dan memudahkan pemanfaatan content untuk berbagai keperluan. Dengan menyimpan
data di satu tempat, mengontrol hak akses dan alur kerja memperbesar kesempatan pemakai
berpartisipasi dalam pengembangan website anda. - www.kyantonius.com
b. CMS Joomla [www.joomla.org]
Joomla adalah salah satu dari ratusan free CMS yang tersedia di Internet yang memiliki jumlah
pengguna yang besar. Kemudahan pengaturan content, dukungan di Internet yang banyak,
plugin yang melimpah; merupakan keunggulan CMS Joomla yang membuat Joomla banyak
diminati orang.
Pada Joomla, setiap halaman dari web memuat bermacam-macam block dari content, block ini
disebut juga position. Anda mengatur layout untuk halaman dengan sebuah template, termasuk
penempatan banyak block pada halaman web, font, warna, dan background. Lalu Anda
menempatkan bermacam-macam module dalam sebuah block. Dan terakhir Anda
menambahkan content dan menampilkan pada halaman utama web Anda.
2. Pra Instalasi CMS Joomla
a. Aplikasi yang Anda butuhkan
1) Paket AMP (Apache, MySQL, dan PHP) : salah satunya adalah XAMPP yang sudah
terintegrasi AMP didalamnya dan menghemat resource komputer dibandingkan
menginstall AMP satu-persatu.
2) CMS Joomla versi 1.5.3
3) Notepad++, freeware untuk mengedit bahasa pemrograman. Alternatif : Wordpad,
Editplus, Macromedia Dreamweaver atau PHP editor lainnya.
4) 7zip, freeware program kompresi yang powerful. Alternatif : WinZip atau WinRar
5) Internet browser, contoh: Internet Explorer atau Opera atau Firefox.
b. Instalasi paket AMP (XAMPP)
Instalasi paket AMP pada komputer Anda (sebelum Anda menguploadnya ke Internet)
diperlukan untuk menjalankan CMS Joomla.
Tutorial Joomla Versi 1.5.3
D3 Unggulan – Eldayati, S.Kom Hal 3 dari 32
Tutorial Joomla Versi 1.5.3
D3 Unggulan – Eldayati, S.Kom Hal 4 dari 32
Tutorial Joomla Versi 1.5.3
D3 Unggulan – Eldayati, S.Kom Hal 5 dari 32
Pastikan MySQL dan Apache sudah aktif (Running)
Untuk mengetesnya akses pada internet browser ketik localhost.
Selanjutnya file dan folder web Anda akan ditempatkan di : C:\Program
Files\xampp\htdocs
Tutorial Joomla Versi 1.5.3
D3 Unggulan – Eldayati, S.Kom Hal 6 dari 32
3. Instalasi CMS Joomla
a. Ekstrak paket Joomla [Joomla_1.0.10.zip] ke folder C:\Program Files\xampp\htdocs
b. Rename folder hasil ekstrasi dengan nama yang Anda inginkan. Misalkan webmakanan
c. Jalankan internet browser Anda, akses : localhost/webmakanan. Jadi instalasi CMS Joomla
dilakukan via internet browser.
Tutorial Joomla Versi 1.5.3
D3 Unggulan – Eldayati, S.Kom Hal 7 dari 32
d. Pre-installation check : pastikan setiap item ditandai warna hijau. Lalu klin Next.
e. License : Klik Next
Tutorial Joomla Versi 1.5.3
D3 Unggulan – Eldayati, S.Kom Hal 8 dari 32
f. Database
Langkah 1 : Isi konfigurasi database sesuai dengan yang Anda gunakan.
g. FTP Configuration : klik Next
Tutorial Joomla Versi 1.5.3
D3 Unggulan – Eldayati, S.Kom Hal 9 dari 32
h. Configuration
Langkah 2 : Isi nama web Anda pada field Site name
Misalkan Aneka Makanan.
Langkah 3 : Isi field Your E-mail dengan email Anda dan field Admin Password dengan password
yang Anda inginkan.
Langkah 4 : Sebagai pemula, jangan lupa mengklik ”Install Sample Data” yang nantinya akan
berubah menjadi ” Sample Data Installed Succesfully”
Kemudian kilk Next
Tutorial Joomla Versi 1.5.3
D3 Unggulan – Eldayati, S.Kom Hal 10 dari 32
i. Finish
Langkah 5 : Hilangkan folder [installation] pada folder web Anda
[C:\Program Files\xampp\htdocs \webmakanan\]
Langkah 6 : klik Admin untuk melihat halaman admin web. Atau dengan mengakses
localhost/webmakanan/administrator
Langkah 7 : Klik Site untuk melihat halaman depan web baru Anda. Atau dengan mengakses
localhost/webmakanan.
Footnote :
Tutorial Joomla Versi 1.5.3
D3 Unggulan – Eldayati, S.Kom Hal 11 dari 32
Pada CMS Joomla halaman web terbagi dua bagian yaitu halaman Backend dan Frontend.
Halaman Backend adalah halaman admin yang digunakan untuk melakukan segala konfigurasi
web Anda. Akses : localhost/webmakanan/administrator
Halaman Frontend adalah halaman yang akan tampil dan dapat dilihat oleh semua pengunjung
web Anda. Akses : localhost/webmakanan
Tutorial Joomla Versi 1.5.3
D3 Unggulan – Eldayati, S.Kom Hal 12 dari 32
Tutorial Joomla Versi 1.5.3
D3 Unggulan – Eldayati, S.Kom Hal 13 dari 32
4. Manajemen Content Joomla
Setelah Anda menginstall CMS Joomla, Anda dapat memulai untuk bekerja dengan content. Versi
Joomla saat ini mempunyai hirarki content yang statis : Anda harus membagi content ke dalam tiga
hirarki, tidak lebih, tidak kurang. Tiga hirarki itu adalah : Sections, Categories, dan Content.
Sections seperti kontainer yang besar yang berisi semua categories. Categories adalah container
yang lebih kecil dan berisi content. Segala teks dan gambar yang tampil pada halaman web adalah
content. Anda tak dapat membuat content tanpa memiliki sections dan categories.
Sebagai contoh, kita akan membuat sebuah web laboratorium. Hirarkinya sebagai berikut :
Section: Makanan
Category :
Makanan Traditional
Makanan Modern
Makanan Sehari-hari
Section : Minuman
Category :
Minuman Traditional
Minuman Modern
Section : Kue-kue
Category :
Kue Kering
Kue Basah
Puding
a. Untuk mengatur segala konfigurasi web, termasuk pengubahan hirarki content, masuk ke
halaman administrator Joomla (localhost/workshop/administrator).
b. Masukkan username dan password.
Tutorial Joomla Versi 1.5.3
D3 Unggulan – Eldayati, S.Kom Hal 14 dari 32
Membuat Section
Ini akan membawa Anda menuju layer section manager
Klik pada menu atau icon untuk menambah atau mengedit section
Klik lingk untukmengedit section yang asa
Klik icon New untuk membuat section baru
Tutorial Joomla Versi 1.5.3
D3 Unggulan – Eldayati, S.Kom Hal 15 dari 32
Secara default, joomla sudah menginstall beberapa section (begitu juga category dan content).
a. Klik salah satu link untuk mengedit link yang ada. Misalkan link About Joomla!
b. Masukkan pada field Title dan Alias : Makanan
c. Klik icon Save untuk menyimpan perubahan dan kembali ke halaman Section Manager.
NB : Icon Apply untuk menyimpan perubahan dan kembali ke halaman Section Editor.
Icon Close untuk membatalkan perubahan.
[ .:: Latihan ::. ] Buat 2 section lainnya dengan mengedit section yang sudah ada (News dan
FAQs), yaitu Minuman dan Kue-kue
Hasil Akhir :
NB : Untuk kembali ke halaman administrator awal, klik menu Site -> Control Panel.
Tutorial Joomla Versi 1.5.3
D3 Unggulan – Eldayati, S.Kom Hal 16 dari 32
Membuat Category
Ini akan membawa Anda menuju layer Category Manager.
Klik pada menu atau icon uuntuk menambah atau mengedit category
Klik untuk mengedit category yang ada
Klik icon New untuk membuat category baru
Tutorial Joomla Versi 1.5.3
D3 Unggulan – Eldayati, S.Kom Hal 17 dari 32
a. Klik icon New untuk membuat category baru.
b. Masukkan pada field Title dan Alias : Makanan Traditional
c. Pilih Section : Makanan
d. Klik icon Save untuk menyimpan perubahan dan kembali ke halaman Section Manager.
NB : Icon Apply untuk menyimpan perubahan dan kembali ke halaman Section Editor.
Icon Close untuk membatalkan perubahan.
[ .:: Latihan ::. ] Buat 7 category lainnya dan sesuaikan dengan category yang seperti dalam
contoh, dengan mengedit category yang sudah ada dan meng-unpublish category yang tidak
diperlukan.
Hasil Akhir :
Tutorial Joomla Versi 1.5.3
D3 Unggulan – Eldayati, S.Kom Hal 18 dari 32
Membuat Content Item
Ada beberapa cara untuk membuat content :
Kita akan menggunakan opsi menu Content -> Artikel Manager
Anda dapat menggunakan salah satu opsi-opsi untuk mengakses conten items
Klik pada content title untuk mengedit content yang ada
Klik icon published agar content dapat terlihat oleh pengunjung web
Klik icon frontpage untuk menampilkan di halaman depan web
Kolom order dan tombol save untuk mengatur urutan-urutan content
Tutorial Joomla Versi 1.5.3
D3 Unggulan – Eldayati, S.Kom Hal 19 dari 32
Klik icon New untuk membuat content baru
a. Isi field Title
b. Jika content ingin di tampilkan di web, pilih option Yes, Jika content ingin ditampilkan di
halaman depan web, pilih option Yes
c. Pilih Section
d. Pilih Category
e. Ketikkan atau masukkan artikel ke Text
f. Tombol Image digunakan untuk memasukkan gambar
Untuk mengambil gambar di komputer, browse files -> Start Upload -> Pilih gambar di
deretan gambar -> klik Insert
g. Tombol Pagebreak digunakan untuk melanjutkan teks ke halaman selanjutnya
e Text
a
c d
b
f g h
Tutorial Joomla Versi 1.5.3
D3 Unggulan – Eldayati, S.Kom Hal 20 dari 32
h. Tombol Read more… digunakan untuk memotong artikel yang panjang.
[ .:: Latihan ::. ]
Isi content pada category : [Content bisa diambil di internet]
Makanan Traditional : Nasi Uduk
Sate Ayam
Opor Ayam
Makanan Modern : Chicken Steak
Spaghetti
Makanan Sehari-hari : Sayur Asem Jakarta
Tempe Bacem
Minuman Traditional : Bajigur
Cendol Bandung
Minuman Modern : Banana Milkshake
Kue Kering : Nastar
Kastengle
Kue Basah : Putri Ayu
Cucur
Puding : Puding Caramel
Puding Buah
Mengubah Tampilan Content pada Front Page
a. Akses Menu -> Main Menu
b. Pada Menu Item, klik Home
c. Ubah nilai pada field #Leading, #Intro,
#Columns dan #Links
d. Klik Icon Save
Tutorial Joomla Versi 1.5.3
D3 Unggulan – Eldayati, S.Kom Hal 21 dari 32
Hasil Akhir :
Welcome to the Frontpage
Opor Ayam
<< Isi Cari di Internet>>
Nastar
<< Isi Cari di Internet>>
Putri Ayu
<< Isi Cari di Internet>>
Puding Caramel
<< Isi Cari di Internet>>
Sate Ayam
<< Isi Cari di Internet>>
More Articles...
Puding Buah
Banana Milkshake
« Start Prev 1 2 Next End»
Tutorial Joomla Versi 1.5.3
D3 Unggulan – Eldayati, S.Kom Hal 22 dari 32
Membuat Menu
Setelah membuat content yang terstruktur, maka dibutuhkan sebuah link agar end user dapat
mengakses informasi yang diinginkan. Untuk mengakses content, user membutuhkan sebuah menu
yang berisi link-link untuk dapat mengakses content yang diinginkan.
CMS Joomla yang telah terinstall, secara default telah terinstall beberapa menu, yaitu Main Menu, Other
Menu, Top Menu, dan User Menu. Kita dapat membuat menu sendiri atau mengedit yang sudah ada.
Top Menu
MainMenu
Resources
Key Concepts
User Menu
Example Pages
Tutorial Joomla Versi 1.5.3
D3 Unggulan – Eldayati, S.Kom Hal 23 dari 32
Untuk menambah atau mengurangi menu : Menu -> Menu Manager
[ .:: Latihan ::. ]
1. Delete menu Example Pages dan menu Key Concepts
2. Buat menu : makanan (Makanan) dan kue (Kue)
3. Edit menu Resources menjadi minuman (Minuman)
Untuk menghilangkan menu, pilih menu lalu klik icon Delete
Untuk menambah menu, klik icon New
Tutorial Joomla Versi 1.5.3
D3 Unggulan – Eldayati, S.Kom Hal 24 dari 32
Untuk menambah atau mengurangi link pada menu : klik Menu Item di baris nama Menu
Klik disini
Untuk menghilangkan link, pilih link lalu klik icon Trash
Untuk menambahkan link, klik icon New
Tutorial Joomla Versi 1.5.3
D3 Unggulan – Eldayati, S.Kom Hal 25 dari 32
Articles – Article Layout : membuat link ke artikel yang kita pilih
Article Submission Layout : mengijinkan user untuk mengirimkan/membuat artikel. Ini
hanya berlaku bagi penulis dan anggota.
Category Blog Layout atau Category List Layout : membuat link ke category
Front Page Blog Layout : membuat link ke artikel yang berstatus front page yang
telah diatur tampilannya
Section Blog Layout atau Section Layout : membuat link ke section
[ .:: Latihan ::. ]
1. Pada menu mainmenu, Delete Menu Item 2, 3, 4, 5, 6, 7, 8 dan 9. Buat item Profil
dengan opsi Articles – Article Layout. Sebelum membuat item tersebut, Buatlah artikel
dengan judul Profil sebagai berikut :
Hasil akhir :
2. Pada menu usermenu, ubah nama item Submit an Article dengan nama Kirim Artikel,
ubah nama item Your Details dengan nama My Details dan
hapus item Submit a Web Link.
Tutorial Joomla Versi 1.5.3
D3 Unggulan – Eldayati, S.Kom Hal 26 dari 32
3. Pada menu topmenu buat menu item Story of This Web
dan D3 Unggulan dengan opsi Articles – Article Layout
(Buat terlebih dahulu masing-masing artikel nya). Kemudian
hapus item yang tidak diperlukan.
4. Pada menu minuman buat menu item Traditional dengan
opsi Articles – Category Blog Layout menu item Modern
dengan opsi Articles – Category List Layout. Kemudian hapus
item yang tidak diperlukan.
5. Pada menu makanan buat menu item Traditional dan
Modern dengan opsi Articles – Category Blog Layout menu
item Lauk-Pauk dengan opsi Articles – Category List
Layout. Kemudian hapus item yang tidak diperlukan.
6. Pada menu kue buat menu item Basah dan Kering dengan opsi
Articles – Category Blog Layout menu item Puding dengan opsi
Articles – Category List Layout. Kemudian hapus item yang tidak
diperlukan.
Agar menu dapat tampil di halaman frontend web :
1. Akses menu Extentions -> Module Manager
Tutorial Joomla Versi 1.5.3
D3 Unggulan – Eldayati, S.Kom Hal 27 dari 32
Pada pembuatan menu manager sebelumnya, Menu Minuman diedit dari menu Resources,
maka di module manager tidak terdapat module minuman. Oleh karena itu, ubah module
Resources menjadi Minuman.
2. Atur urutan menu sehingga tampak seperti gambar di samping
Tutorial Joomla Versi 1.5.3
D3 Unggulan – Eldayati, S.Kom Hal 28 dari 32
Mengatur Tampilan Joomla
Templates
Template dapat dianalogikan seperti “themes” pada OS Microsoft Windows, jadi yang
bertanggung jawab pada tampilan web Anda. Pada template biasanya terdapat sebuah file
index.php yang mendefinisikan tampilan secara umum semua halaman web dan file css
(cascading style sheet) yang mendefinisikan format dari halaman web.
1. Akses ke halaman Template Manager : Extensions -> Template Manager
2. Untuk mempreview template yang akan digunakan, arahkan mouse ke atas link template.
3. Untuk menggunakan template yang Anda inginkan, pilih templatenya lalu klik icon Default.
4. Untuk menggunakan template yang berbeda di halaman tertentu, klik template name,
kemudian di Menu Assigment pilih Select from List setelah itu pilih menu yang akan di
bedakan template nya.
Tutorial Joomla Versi 1.5.3
D3 Unggulan – Eldayati, S.Kom Hal 29 dari 32
Modules
Merupakan plug-in yang tampak di front-end web. Digunakan sebagai jembatan antara
Component dan Joomla. Anda membutuhkan Module untuk meng-aktifkan componen yang di
pilih. Contoh module seperti : fasilitas Login Form, Search, Pools dll.
1. Akses ke halaman Module Manager : Extensions -> Module Manager
2. Untuk menggunakan module yang Anda inginkan, aktifkan status enable.
Components
Plug-in yang berada di back-end web. Salah satu fungsinya, yaitu mengatur konfigurasi dari
module. Misalknya membuat list pertanyaan pada module Pools.
1. Akses ke halaman Components : Components -> Pilih component yang dituju
2. Masing-masing component memiliki setting-an dan fungsi yang berbeda.
Tutorial Joomla Versi 1.5.3
D3 Unggulan – Eldayati, S.Kom Hal 30 dari 32
Plugins
Plugin disebut juga dengan istilah Mambots, yang terintegrasi dengan content, sehingga
menambah feature dari content itu. Contoh yang paling jelas adalah editor untuk membuat suatu
content, sehingga content dapat dibuat layaknya editor Microsoft Word dengan tampilan
WYSIWYG. Nama Mambot itu adalah MCE Editor.
1. Akses ke halaman Components : Components -> Pilih component yang dituju
2. Untuk menggunakan module yang Anda inginkan, aktifkan status enable.
Language
Merupakan salah satu plugin yang digunakan untuk menambahkan bahasa di website kita.
1. Akses ke halaman Language Manager : Extensions -> Language Manager
2. Untuk mengaktifkan, pilih bahasa yang akan diaktifkan, kemudian klik tombol Default yang
ada di pojok kanan atas.
Tutorial Joomla Versi 1.5.3
D3 Unggulan – Eldayati, S.Kom Hal 31 dari 32
Cara Install/Uninstall Module, Plugin, Template, Language dan
Component.
1. Akses ke halaman Install/Uninstall : Extentions -> Install/Uninstall
2. Browse file yang akan di install, kemudian klik upload file & install
3. Untuk meng-uninstall, masuk ke plugin yang dituju kemudian pilih yang akan di uninstall.
[ .:: Latihan ::. ]
1. Install dan gunakan template dengan nama Pizza.zip sebagai defaultnya.
2. Install dan gunakan template dengan nama Frooty Fresh.zip sebagai Assign untuk halaman
Minuman Modern
3. Install dan gunakan module mod_vvisit_counter.zip atur setting nya.
4. Install dan gunakan module camp26_smoothgallery_J15x.zip atur settingnya dengan
width dan height 800. Kemudian masuk ke :
modules/mod_camp26_smoothgallery/images_smoothgallery/
masukkan gambar(ukuran 500x70) yang akan ditampilkan dan ubah title menjadi Our
Gallery
Tutorial Joomla Versi 1.5.3
D3 Unggulan – Eldayati, S.Kom Hal 32 dari 32
5. Install dan gunakan module mod_ulti_clocks.zip
6. Untuk plugin component pools, buat pernyataan sebagai berikut :
7. Install dan gunakan com_easygb.zip. Buat menu dengan nama Buku Tamu di Top
Menu dan pilih item nya Easy GuestBook.
Top Related