Dokumen tersebut merupakan tutorial singkat tentang pengenalan dan instalasi CMS Joomla versi 1.5.3. Ia menjelaskan pengertian CMS, keunggulan Joomla, langkah-langkah pra-instalasi, instalasi Joomla, dan manajemen konten dasar di Joomla seperti membuat seksi, kategori dan konten."

1. Tutorial Joomla Versi 1.5.3
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
D3 Unggulan – Eldayati, S.Kom Hal 1 dari 32

2. Tutorial Joomla Versi 1.5.3
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.
D3 Unggulan – Eldayati, S.Kom Hal 2 dari 32

3. Tutorial Joomla Versi 1.5.3
D3 Unggulan – Eldayati, S.Kom Hal 3 dari 32

4. Tutorial Joomla Versi 1.5.3
D3 Unggulan – Eldayati, S.Kom Hal 4 dari 32

5. Tutorial Joomla Versi 1.5.3
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
Filesxampphtdocs
D3 Unggulan – Eldayati, S.Kom Hal 5 dari 32

6. Tutorial Joomla Versi 1.5.3
3. Instalasi CMS Joomla
a. Ekstrak paket Joomla [Joomla_1.0.10.zip] ke folder C:Program Filesxampphtdocs
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.
D3 Unggulan – Eldayati, S.Kom Hal 6 dari 32

7. Tutorial Joomla Versi 1.5.3
d. Pre-installation check : pastikan setiap item ditandai warna hijau. Lalu klin Next.
e. License : Klik Next
D3 Unggulan – Eldayati, S.Kom Hal 7 dari 32

8. Tutorial Joomla Versi 1.5.3
f. Database
Langkah 1 : Isi konfigurasi database sesuai dengan yang Anda gunakan.
g. FTP Configuration : klik Next
D3 Unggulan – Eldayati, S.Kom Hal 8 dari 32

9. Tutorial Joomla Versi 1.5.3
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
D3 Unggulan – Eldayati, S.Kom Hal 9 dari 32

10. Tutorial Joomla Versi 1.5.3
i. Finish
Langkah 5 : Hilangkan folder [installation] pada folder web Anda
[C:Program Filesxampphtdocs 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 :
D3 Unggulan – Eldayati, S.Kom Hal 10 dari 32

11. Tutorial Joomla Versi 1.5.3
 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
D3 Unggulan – Eldayati, S.Kom Hal 11 dari 32

12. Tutorial Joomla Versi 1.5.3
D3 Unggulan – Eldayati, S.Kom Hal 12 dari 32

13. Tutorial Joomla Versi 1.5.3
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 Section : Kue-kue
Category : Category :
 Makanan Traditional  Kue Kering
 Makanan Modern  Kue Basah
 Makanan Sehari-hari  Puding
Section : Minuman
Category :
 Minuman Traditional
 Minuman Modern
a. Untuk mengatur segala konfigurasi web, termasuk pengubahan hirarki content, masuk ke
halaman administrator Joomla (localhost/workshop/administrator).
b. Masukkan username dan password.
D3 Unggulan – Eldayati, S.Kom Hal 13 dari 32

14. Tutorial Joomla Versi 1.5.3
Membuat Section
Klik pada menu
atau icon untuk
menambah atau
mengedit section
Ini akan membawa Anda menuju layer section manager
Klik lingk untuk
mengedit section yang Klik icon New untuk
asa membuat section baru
D3 Unggulan – Eldayati, S.Kom Hal 14 dari 32

15. Tutorial Joomla Versi 1.5.3
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.
D3 Unggulan – Eldayati, S.Kom Hal 15 dari 32

16. Tutorial Joomla Versi 1.5.3
Membuat Category
Klik pada
menu atau
icon uuntuk
menambah
atau mengedit
category
Ini akan membawa Anda menuju layer Category Manager.
Klik untuk
mengedit
Klik icon New
category
untuk membuat
yang ada
category baru
D3 Unggulan – Eldayati, S.Kom Hal 16 dari 32

17. Tutorial Joomla Versi 1.5.3
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 :
D3 Unggulan – Eldayati, S.Kom Hal 17 dari 32

18. Tutorial Joomla Versi 1.5.3
Membuat Content Item
Ada beberapa cara untuk membuat content :
Anda dapat
menggunakan
salah satu opsi-
opsi untuk
mengakses
conten items
Kita akan menggunakan opsi menu Content -> Artikel Manager
Klik pada Klik icon Klik icon Kolom order
content published frontpage dan tombol
title untuk agar content untuk save untuk
mengedit dapat menampilka mengatur
content terlihat oleh n di urutan-
yang ada pengunjung halaman urutan
web depan web content
D3 Unggulan – Eldayati, S.Kom Hal 18 dari 32

19. Tutorial Joomla Versi 1.5.3
Klik icon New untuk membuat content baru
a b
c d
e Text
f g h
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
D3 Unggulan – Eldayati, S.Kom Hal 19 dari 32

20. Tutorial Joomla Versi 1.5.3
h. Tombol Read more… digunakan untuk memotong artikel yang panjang.
[ .:: Latihan ::. ]
Isi content pada category : [Content bisa diambil di internet]
Makanan Traditional : Nasi Uduk Minuman Traditional : Bajigur
Sate Ayam Cendol Bandung
Opor Ayam Minuman Modern : Banana Milkshake
Makanan Modern : Chicken Steak Kue Kering : Nastar
Spaghetti Kastengle
Makanan Sehari-hari : Sayur Asem Jakarta Kue Basah : Putri Ayu
Tempe Bacem Cucur
Puding : Puding Caramel
Puding Buah
Mengubah Tampilan Content pada Front Page
a. Akses Menu -> Main Menu c. Ubah nilai pada field #Leading, #Intro,
#Columns dan #Links
d. Klik Icon Save
b. Pada Menu Item, klik Home
D3 Unggulan – Eldayati, S.Kom Hal 20 dari 32

21. Tutorial Joomla Versi 1.5.3
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 Sate Ayam
<< Isi Cari di Internet>> << Isi Cari di Internet>>
More Articles...
 Puding Buah
 Banana Milkshake
« Start Prev 1 2 Next End»
D3 Unggulan – Eldayati, S.Kom Hal 21 dari 32

22. Tutorial Joomla Versi 1.5.3
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
Main
Menu
Resources
Key Example
Concepts Pages
User Menu
D3 Unggulan – Eldayati, S.Kom Hal 22 dari 32

23. Tutorial Joomla Versi 1.5.3
Untuk menambah atau mengurangi menu : Menu -> Menu Manager
Untuk menghilangkan menu,
pilih menu lalu klik icon Delete
Untuk menambah menu, klik
icon New
[ .:: 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)
D3 Unggulan – Eldayati, S.Kom Hal 23 dari 32

24. Tutorial Joomla Versi 1.5.3
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
D3 Unggulan – Eldayati, S.Kom Hal 24 dari 32

25. Tutorial Joomla Versi 1.5.3
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.
D3 Unggulan – Eldayati, S.Kom Hal 25 dari 32

26. Tutorial Joomla Versi 1.5.3
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
D3 Unggulan – Eldayati, S.Kom Hal 26 dari 32

27. Tutorial Joomla Versi 1.5.3
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
D3 Unggulan – Eldayati, S.Kom Hal 27 dari 32

28. Tutorial Joomla Versi 1.5.3
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.
D3 Unggulan – Eldayati, S.Kom Hal 28 dari 32

29. Tutorial Joomla Versi 1.5.3
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.
D3 Unggulan – Eldayati, S.Kom Hal 29 dari 32

30. Tutorial Joomla Versi 1.5.3
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.
D3 Unggulan – Eldayati, S.Kom Hal 30 dari 32

31. Tutorial Joomla Versi 1.5.3
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
D3 Unggulan – Eldayati, S.Kom Hal 31 dari 32

32. Tutorial Joomla Versi 1.5.3
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.
D3 Unggulan – Eldayati, S.Kom Hal 32 dari 32