TUTORIAL

CARA CEPAT MEMBANGUN WEBSITE

DENGAN JOOMLA! 1.5

Afif Nurwilianto

Wongbagoes MediaTM

+62 85233801344

mas@wongbagoes.net | http://wongbagoes.net

TENTANG PENULIS

Afif Nurwilianto – Wongbagoes sebenarnya bukan seorang ahli bahasa pemograman

ataupun pakar website. Namun, penulis diberikan kesempatan untuk mengenal beberapa

CMS sehingga sedikit mampu (meskipun belum sebaik seorang pakar) membangun

beberapa website berbasis Joomla! ataupun Wordpress. Selain membangun website,

penulis juga aktif menulis di blog pribadi maupun komunitas. Dan pada bulan Mei 2009,

penulis menjuarai kompetisi SEO (Search Engine Optimization) Ebeye. Penulis dapat

dihubungi melalui no HP 08523380134, Yahoo Messenger willwee306, email:

mas@wongbagoes.net dan willwee306@yahoo.com atau dapat mengunjungi blognya di

http://wongbagoes.net.

DISCLAIMER

Tulisan dalam buku ini merupakan gabungan dari pengalaman penulis dan dipadukan berbagai sumber referensi.

Kesamaan atau kemiripan dalam penyajian maupun penggunaan istilah sangat mungkin terjadi. Anda

diperkenankan untuk mempublikasikan, atau menggandakan seluruh atau sebagian dari buku ini. Jika Anda

berkenan, untuk tetap menyertakan nama penulis dalam setiap publikasi atau penggandaan yang menggunakan

buku ini sebagai panduan ataupun referensi.

Chapter 1 – Mengenal Joomla!

Joomla! merupakan salah satu Content Management System (CMS) yang

bersifat Open Source. Joomla! adalah sebuah software gratis yang dapat

digunakan untuk membuat web yang paling sederhana hingga paling

kompleks. Disebut open source karena pengguna dapat memodifikasi,

menghapus, maupun menambah script yang disertakan dalam software

tersebut asal tetap mencantumkan hak cipta dan mentaati peraturan yang

telah disepakati bersama-sama. Joomla! adalah salah satu CMS yang

memilliki komunitas besar di seluruh dunia dengan didukung oleh para pengembang ketiga yang akan terus

mengembangkan program inti Joomla!.

1.1 Sejarah

Munculnya Joomla! berawal dari “konflik internal” di dalam kepengurusan pengembang inti Mambo Open

Source atau lebih sering dikenal dengan Mambo pada tahun 2005. Pihak pendiri (Founder) Mambo ingin

membentuk sebuah institusi yang bernama Mambo Foundation. Gagasan tersebut ditentang keras oleh

pengembang dari pihak ketika (3rd Developer), alasannya karena jika pengembangan Mambo dikendalikan

oleh Mambo Foundation dikhawatirkan suatu saat Mambo akan dikomersilkan. Sekitar bulan Agustus 2005,

sebagian pengembang inti Mambo keluar dari kepengurusan pengembang program inti Mambo.

Perkembangan selanjutnya, para pengembang inti Mambo yang keluar dari kepengurusan tersebut

bergabung dan pada 16 September 2005 membuat sebuah CMS bernama Joomla Open Source. Rilis

versi awal Joomla yaitu versi 1.0.0 yang merupakan “cloning” dari Mambo versi 4.5.3. Disebut cloning

karena memang semua sciptnya sama persis. Nama Joomla! merupakan sebuah ejaan yang berkaitan

dengan ilmu fonetik dari kata Swahili “Juumla” yang memiliki arti bersama-sama atau secara keseluruhan..

Komunitas di belakang Joomla! meliput para pengembang, para perancang, pengurus sistem, penerjemah,

para penulis isi, dan yang paling penting yaitu pengguna (end user). Ketika buku ini ditulis, Joomla sudah

merilis versi 1.5.11. Meskipun Joomla menggunakan bahasa PHP, bukan berarti harus memahami

seluruhnya tentang bahasa PHP. Bagi mereka tidak memahami kode HTML, ASP, CGI, maupun php tidak

perlu takut untuk mempelajarinya karena meskipun tidak tahu tentang kode-kode tersebut, namun masih

bisa membuat sebuah web dinamis secara cepat dengan beberapa fitur yang sangat lengkap. Untuk

mengetahui lebih lanjut tentang Joomla!, dapat mengakses langsung ke alamat website resminya di

http://www.joomla.org.

1.2 Keunggulan Joomla!

Pada awal perkembangannya, Joomla! tidak diminati oleh masyarakat luas. Alasanya klasik, yaitu

dikarenakan Joomla! merupakan software yang gratis sehingga dianggap tidak aman, banyak kelemahan,

kurang bergengsi, tidak impresif dan anggapan negatif lainnya. Sikap apatis tersebut dipatahkan oleh para

pengembang inti Joomla! dengan dibuktikannya beberapa aplikasi tambahan yang sangat fleksibel untuk

disisipkan ke dalam sistem Joomla!. Pada akhirnya, masyarakat dapat memanfaatkan Joomla! untuk

berbagai keperluan terutama membangun website secara cepat tanpa mengesampingkan segi keindahan

tampilan.

Keunggulan Joomla! antara lain:

1. Simple tapi sangat powerfull. Dengan Joomla kita bisa membuat berbagia macam website dinamis. Dari

website yang sangat simpel hingga yang sangat kompleks.

2. Mengakomodasi penguna dengan berbagai macam kemampuan. Bagi yang tidak mengenal PHP sama

sekali, menggunakan Joomla! sama seperti menggunakan aplikasi desktop sehari-hari. Akan tetapi bagi

yang mengerti bahasa pemograman Joomla! menyediakan fasiltas dimana kita dapat mengkostumisasi

berbagai script dan tampilan yang sudah ada.

3. Free dan Open Source. Joomla adalah software open source yang dibangun bersama oleh komunitas.

Anda bebas menggunakan, memodifikasi, mendistribusikan tanpa dipungut biaysa sepeserpun.

Chapter 2 – Instalasi Web Server

Bagi orang awam, mungkin masih terasa asing dengan istilah Apache, PHP, dan MySQL. Karena tanpa

adanya ketiga aplikasi tersebut, maka instalasi Joomla! tidak dapat dijalankan di komputer pribadi (PC).

Sedikit gambaran tentang ketiga hal tersebut:

1. Apache merupakan salah satu dari sekian banyak aplikasi yang berfungsi sebagai web server.

Aplikasi ini sangat reliable untuk dijadikan web server pada komputer pribadi (PC). Untuk informasi

lebih lanjut, silakan kunjungi website resmi di http://apache.org.

2. PHP merupakan salah satu bahasa pemrograman berbasis web. Oleh karena Joomla menggunakan

bahasa PHP, maka dalam komputer pribadi (PC) harus terinstal bahasa PHP. Untuk informasi lebih

lanjut silakan kunjungi website resminya di http://php.net.

3. MySQL merupakan salah satu tipe database yang paling banyak diminati para pengembang web

karena selain mudah instalasinya, juga database ini mampu menampung record sebanyak ratusan

giga. Database ini juga berada di bawah lisensi GNU yang berarti gratis dalam penggunaan

maupun penggandaan. Untuk informasi lebih lanjut, silakan kunjungi website resmi di

http://mysql.com

Dari ketiga software di atas kita diharuskan mengkonfigurasinya yang tidak mudah dan memerlukan waktu

apalagi yang masih awam dengan ketiga hal di atas. Namun, jangan khawatir karena orang awampun dengan

mudah dapat menjalankan ketiga aplikasi ini dengan satu paket software yang sudah menyediakan Apache,

PHP, dan MySQL. Ada berbagai macam web server saat ini, diantaranya: PHPTriad, EasyPHP, XAMP, Wamp

Server, Uniserver, AppServ, dan lain-lain. Untuk tutorial ini, penulis menggunakan WampServer sebagai web

server.

Instalasi WampServer

1. Siapkan file WampServer yang dapat diunduh di alamat http://www.wampserver.com/en/download.php

2. Double click pada file installer wampsever dan terlihat perintah instalasi sebagai berikut:

3. Muncul pembukaan instalasi dan lantas klik next

4. Muncul jendela yang menunjukkan alamat lokasi tempat akan dtempatkannya aplikasi WampServer. Secara

default akan dipilih c:\wamp, Kamu bisa mengubahnya ke tempat lain

5. Pada jendela berikutnya, Anda akan diberi pilihan untuk meletakkan shortcut (pintasan) WampServer,

sebagai ikon di desktop maupun sebagai ikon di Quick Launch. Terserah Anda.

6. Proses instalasi sedang berjalan, silakan tunggu

7. Apabila Kamu telah mempunyai aplikasi mozilla firefox akan muncul jendela alert sebagai berikut:

Apabila Kamu ingin menjadikan Firefox sebagai web browser utama Wampserver, silahkan klik Yes.

8. Berikutnya muncul jendela pengaturan Mail Server, silakan disesuaikan dengan pengaturan Mail Server

Anda. Jika tidak, klik next.

9. Instalasi selesai, klik finish

10. Selanjutnya, klik pada icon Wampserver di kanan bawah desktop Anda dan klik localhost, maka anda akan di

arahkan ke web browser dengan Url http://localhost.

11. Maka tampilan di web browser kamu akan menjadi seperti di bawah ini dan menandakan proses instalasi

berhasil

12. Selesai, cukup mudahkan... ☺

Chapter 3 – Instalasi Joomla! 1.5.11

Setelah proses instalasi WampServer selesai maka kita siap untuk menginstal Joomla! dalam buku ini

menggunakan Joomla! 1.5.11.

1. Extract file Joomla! 1.5.11 ke folder C:\wamp\ www\web

2. Setelah proses ekstrak selesai bukalah salah satu browser (Internet Explorer, Firefox, Chrome, Opera, atau

yang lain) lalu ketikkan http://localhost/web, lalu tekan Enter. Perlu diingat, tulisan web bukan sebagai

patokan. Hal itu tergantung nama folder yang telah dibuat.

3. Tahap 1 - Pilih bahasa yang dikehendaki lalu pilih next di kanan atas.

Extract file Joomla! ke

folder www

4. Tahap 2 – Pemeriksaan sebelun instalasi. Secara default , Joomla mengecek kebutuhan yang harus

dipenuhi. Jika tidak ada masalah, bisa dilanjutkan dengan cara menekan tombol Next.

5. Tahap 3 – Persetujuan mengenai ketentuan lisensi. Pada tahap ini, hanya memberkan informasi

tentang lisensi dan peraturan-peraturan yang harus dipenuhi dalam menggunakan Joomla Open Source.

Tekan tombol Next untuk melanjutkan.

6. Tahap 4 - Database. Masukkan Host, Username, Password, dan nama Database (periksa kembali ketika

membuat database sebelumnya), jika telah yakin tekan tombol Next.

7. Tahap 5 – Konfigurasi FTP. Tidak ada yang perlu dikonfigurasi lantas klik next.

8. Tahap 6 – Konfigurasi Utama. Pada tahap ini kita diminta untuk memasukkan nama situs, misal: Workshop

Joomla! 2009. Kemudian masukkan alamat email dan masukkan passwordnya admin agar mudah diingat.

Sebaiknya aktifkan fasilitas instal sample data agar website tidak kosong sehingga tidak membingungkan

pada tahap selanjutnya. Jika lupa mengaktifkan fasilitas ini, website Anda akan blank. Berikutnya, klik tombol

Next.

9. Tahap 7 – Finish.

Sebelum Joomla dapat digunakan, ada satu langkah terakhir yang harus dilakukan. Anda harus menghapus

folder instalation dalam folder joomla.

10. Setelah dihapus sillahkan refresh URL http://localhost/web. Akan nampak tampilan sebagai berikut:

Chapter 4 – Bagian Utama Joomla!

Joomla terdiri dari dari dua bagian besar, frontend dan backend. Frontend adalah halaman depan situs kita.

Sedangkan backend adalah bagian administratif yang hanya bisa dimasuki oleh orang-orang tertentu saja.

Backend login screen

Frontend

Sekilas mengenai backend

Saat pertama kali masuk ke bagian backend, anda akan disambut oleh icon-icon kontrol panel. Icon-icon ini

merupakan jalur cepat menuju fungsi-fungsi yang sering dikunjungi.

Dalam halaman pertama backend terdapat icon-icon control panel dan juga terdapat menu bar di atas. Dibawah

pat tool bar. Berikut salah satunya:

Keterangan:

Masih belum familiar terhadap funsi di atas. Bisa itu karena sering!!!

Menu Bar

Control Panel

Chapter 5 – Mengelola Artikel

Oleh karena Joomla merupakan sebuah aplikasi web yang bersifat dinamis, maka penulisan artikel lebih

didahulukan dari pembuata item-item menu. Jika diurutkan proses pembuatan web portal menggunakan

Joomla, yang pertama kali dilakukan adalah membuat Section, lalu Category, kemudian Content (Article),

dan yang terakhir Item menu. Dalam prakteknya, berhubung masih terdapat artikel lain dari Joomla yang

tidak digunakan, terpaksa harus menghapus terlebih dulu Section, Category, dan Content tersebut. Sebuah

Category tidak dapat terhapus jika masih terdapat artikel yang berada dalam kategorit tersebut. Sebuah

Section tidak dapat terhapus jika masih terdapat Category di dalamnya. Secara singkat dapat dijelaskan,

semua artikel, category, dan section harus dihapus secara permanen dari administrasi Joomla agar

pengelolaannya lebih mudah dan cepat.

Identifikasi nama Section dan Category sejak awal sangat perlu dilakukan. Hal ini untuk memudahkan

ketika ingin menulis sebuah artikel, karena artikel yang akan ditulis harus mengacu pada nama Category

dan Section. Jika tidak nama Category dan Section yang dinginkan tidak nampak dalam daftar, maka harus

dibuat terlebih dulu. Sebagai persiapan untuk membuat web portal, berikut ini contoh struktur pembuatan

Section (S) dan Category (C).

Misal:

1. Olahraga (S) : 1. Sepakbola (C)

2. Basket (C)

3. Raket (C)

2. Politik (S) : 1. Nasional (C)

2. Internasional (C)

Jadi, sebelum menulis artikel harus membuat Section dan Category terlebih dulu agar ketika ditampilkan

halaman utama website lebih terstuktur sehingga pengguna tidak merasa bingung dalam menyerap

informasi yang ditampilkan.

5.1. Membuat Section

Dalam menentukan nama Section, terlebih dulu harus mengetahui tema artikel yang akan ditulis nantinya.

Hal ini untuk mempermudah pengelolaan nama Category dan Section yang sesuai dengan artikel tersebut.

Sebagai studi kasus, berikut ini penjelasan pembuatan Section yaitu : OLAHRAGA.

1. Pertama kali pilih menu Content > Section Manager.

2. Setelah berada dalam Section Manager, pilih tombol New

3. Masukkan nama Section = Olahraga pada kolom Title. Kemudian Aktifkan radio button Published =

Yes. Aturlah Public Access = Public.

4. Kemudian klik Save

5. Jika sudah selesai Anda bisa membuat section2x yang lainnya.

5.2. Membuat Category

Setelah selesai membuat section kita selanjutnya membuat category. Pilih content > category manager > new.

Untuk contoh kasus kita memilih ketegori sepakbola.

Karena kita tadi telah membuat section Olahraga dan sesuai dengan rencana akan teridri dari berkatagori salah

satunya sepakbola maka kita buat kategori sepakbola.

5.3. Membuat Article

Setelah siap kategori dan section selanjutnya kita memikirkan dan membuat artikel yang sesuai dengan category

dan section yang telah kita buat sebelumnya. Ok, sekarang kita membuat artikel yang misal judulnya “Ronaldo

Resmi Berseragam Madrid”

Masuk menu Content > Article manager > New

Setelah selesai ketik Save. Jangan lupa untuk memilih section terlebih dahulu kemudian akan muncul pilihan

category.

Banyak item-item yang belum dibahas, sebaiknya Anda mencoba satu demi persatu. Karena penulis yakin tresno

iku jalaran soko kulino. Anda akan mencintai Joomla! jika anda senantiasa bergaul dengan Joomla!. ☺

Chapter 7 – Mengelola Navigasi

Navigasi merupakan sesuatu yang sangat penting dalam sebuah website. Dengan navigasi, pengunjung dapat

mudah menumakan content yang mereka inginkan. Joomla sudah memiliki sistem pengaturan menu sendiri

untuk memudahkan administrator mengelola navigasi. Seperti telah dijelaskan di awal, bahwa item menu

dapat menghubungkan (link) Article maupun Component, misalnya: Games, Chatting, dan component lain.

Sedangkan untuk tampilan berita dapat berupa Blog, List, maupun Table.

Tipe item menu bermacam-macam yang dapat dibedakan menjadi empat tipe yaitu: internal link, external link,

separator, dan alias. Sedangkan untuk tipe Internal link juga memiliki beberapa kategori item menu yaitu:

Article, Concact, Newsfeed, Poll, Search, User, Weblink, dan Wrapper. Di sini tidak membahas seluruh tipe

item menu. Misal membuat menu baru yang masih berhubungan dengan artikel yang dibuat tadi.

Pilih Menu > main menu > new > section layout

Setelah selesai ketik Save.

Maka di halaman frontend akan muncul menu baru dibawah newsfeed. Untuk jenis yang lain silahkan coba

sendiri. ☺

Isikan olahraga

Pilih section

Chapter 8 – Mengenal Extensions

Secara umum, jumlah Extension (ekstensi) sangat banyak yang terbagi menjadi beberapa tipe yaitu:

Component, Language, Module, Plugins (Mambots), Special, dan Template. Dari beberapa tipe tersebut

dapat dibagi lagi menjadi beberapa kategori. Untuk mengetahui lebih detailnya, silahkan buka

http://extensions.joomla.org

8.1. Component

Jumlah Component yang berkembang saat ini lebih dari ratusan dan akan terus bertambah seiring

dengan perkembangan zaman dan kebutuhan penggunanya. Untuk menginstal Component, terlebih dulu

harus mendownloadnya di website resmi Joomla. Component ada yang gratis dan berbayar, namun tidak

perlu khawatir karena jumlah Component yang gratis lebih banyak dari yang berbayar. Keduanya sama-

sama memiliki fitur yang lengkap dan handal karena sudah teruji dan akan terus“dipantau” oleh komunitas

Joomla, forum diskusi maupun komentar dari para pengguna untuk perbaikan sistem agar lebih baik. Ciri khas

file component diawali dengan kata “com” di depan nama component Meskipun begitu, ada beberapa

component yang tidak menambahkan awalan “com” pada nama component.

8.2. Modules

Module merupakan bentuk ekstensi yang lebih ringan dan fleksibel. Ekstensi ini digunakan dalam

proses penampakan halaman. Anda hanya bisa menampilakan content di depan melalui modul.

8.3 Plugin

Adalah tipe ekstensi yang lebih rumit dan bekerja dengan cara menanggapi suatu event. Pada saat

joomla sedang melakukan kerjanya, baik itu pada inti joomla, modul atau komponen, satu atau lebih evenet akan

terpicu.

Mencoba Komponen Polls

Polls merupakan salah satu komponen yang hadir bersamaan dengan paket instalasi joomla. Sesuai namanya

komponen ini digunakan untuk membuat poling sederhana. Sekarang mari kita coba membuat poling.

Masuk component > polls > new

Lantas klik Save. Coba Anda tengok di front end, apakah sudah muncul poling tersebut??? Klo jawabanya iya

ajaib. Untuk memunculkan masuk extensions > module > polls

Pilih poling

yang sudah

dibuat

Chapter 9 – Mengganti Template

Selain tersedianya berbagai macam extensions, Joomla melalui pengembang pihak ke tiga juga mempunyai

ribuan template yang siap kita gunakan baik yang berbayar ataupun yang gratis. Tentu kita bosen dengan

tampilan default joomla yang terkesan biasa. Untuk mengganti template silahkan ikuti petunjuk beikut:

1. Sipakan file template (.zip) jika menginginkan gratisan dapat di download di siteground.com atau tanya

saja via google.com

2. Masuk extensions > installer > browse > upload

3. Setelah muncul peringatan instal success berarti proses instalsi berhasil. Silahkan Anda segera masuk ke

Extensions > Template manager > centang template yang di pilih > klik default

4. Sekarang tengok halaman frontend

BONUS – 5 Menit Membuat Website Online

Continued…..