Sanksi Pelanggaran Pasal 72

Undang-undang Nomor 19 Tahun 2002

Tentang Hak Cipta
1. Barangsiapa dengan sengaja melanggar dan tanpa hak melakukan perbuatan
sebagaimana dimaksud dalam Pasal 2 Ayat (1) atau Pasal 49 Ayat (1) dan
Ayat (2) dipidana dengan pidana penjara masing-masing paling singkat 1
(satu) bulan dan/atau denda paling sedikit Rp 1.000.000,00 (satu juta rupiah),
atau pidana penjara paling lama 7 (tujuh) tahun dan/atau denda paling banyak
Rp 5.000.000.000,00 (lima miliar rupiah).
2. Barangsiapa dengan sengaja menyiarkan, memamerkan, mengedarkan, atau
menjual kepada umum suatu ciptaan atau barang hasil pelanggaran hak cipta
atau hak terkait sebagai dimaksud Ayat (1) dipidana dengan pidana penjara
paling lama 5 (lima) tahun dan/atau denda paling banyak Rp 500.000.000,00
(lima ratus juta rupiah).

Proyek Membuat

Website Sekolah dengan Joomla!

SUHANTO

www.bukulokomedia.com

PROYEK MEMBUAT
WEBSITE SEKOLAH DENGAN JOOMLA!

Perpustakaan Nasional : Katalog Dalam Terbitan (KDT)

Penulis : Suhanto
PROYEK MEMBUAT WEBSITE SEKOLAH DENGAN JOOMLA!
- Cet. I. - Yogyakarta : Penerbit Lokomedia, 2010
131 hlm; 14 x 21 cm
ISBN : 978-979-1758-70-3
Penerbit Lokomedia,
Cetakan Pertama : November 2010

Editor : Lukmanul Hakim

Cover : Subkhan Anshori
Layout : Lukmanul Hakim

Diterbitkan pertama kali oleh :

Penerbit Lokomedia
Jl. Jambon, Perum. Pesona Alam Hijau 2 Kav. B-4, Kricak
Yogyakarta 55242.
email : redaksi@bukulokomedia.com
website : www.bukulokomedia.com

Copyright Lokomedia, 2010

Hak Cipta dilindungi oleh Undang-Undang
Dilarang memperbanyak, mencetak ataupun menerbitkan sebagian
maupun seluruh isi buku ini tanpa izin tertulis dari penerbit.

Kata Pengantar

Memiliki website saat ini bukanlah sesuatu yang sulit atau wah lagi...Dengan ada
Joomla sebagai CMS (Content Managament System) yang sangat popular saat
ini.Banyak pihak yang menggunakan Joomla untuk kepentingan nonkomersial
maupun komersial.
Dengan adanya buku ini mengajak pembaca khususnya pemula yang baru
mengenal Joomla, untuk mempelajari bagaimana konsep dan cara untuk
membangun sebuah website dengan Joomla sehingga menghasilkan suatu web
yang terlihat manarik.
Untuk memudahkan pembaca, penulis juga menyertakan CD pendamping yang
didesain khusus untuk pembaca sehingga dalam mempelajari setiap materi yang
di berikan tidak akan mengalami kesulitan. CD ini terdiri dari Extensions Joomla,
xampp-win32-1.6.4., Template Joomla dan tidak kalah penting yaitu video
tutorial.
Puji syukur ke hadirat Allah SWT atas berkat dan rahmatNya sehingga penulis
dapat menyelesaikan buku ini.Mohon maaf jika ada kekurangan, Saran dan Kritik
Anda sangat kami harapkan untuk penyempurnaan lebih lanjut dan Akhir kata,
kami berharap buku ini dapat bermanfaat bagi banyak orang.

Surabaya, Agustus 2010

Penulis

vi

Daftar Isi

Kata Pengantar..................................................................................................v
Daftar Isi............................................................................................................vii
BAB 1. Dunianya Web dan CMS.....................................................................1
1.1. Om Apa itu Joomla! ....................................................................................2
1.2. Sejarah Singkat Joomla!...............................................................................2
1.3. Kelebihan Membuat Web dengan Joomla!..................................................3
BAB 2. Persiapan Lahan Website Sekolah.....................................................5
2.1. Instalasi WampServer...................................................................................6
2.2. Instalasi Joomla!..........................................................................................13
BAB 3. Renovasi Joomla Hingga Menjadi Website Sekolah.....................19
3.1. Instalasi Template Joomla...........................................................................21
3.2. Rombak Menu dan Modul Joomla Sesuka Kita........................................25
3.3. Instalasi Bahasa Indonesia di Joomla.........................................................35
3.4. Mengatur Layout (Posisi Modul)...............................................................36
3.5. Mengedit Nama Modul...............................................................................39
3.6. Membuat Section dan Category Website Sekolah.....................................41
BAB 4. Memilih Perabotan untuk Mempercantik Website Sekolah........47
4.1. Instalasi Modul untuk Website Sekolah.....................................................48
4.1.1. Modul Clock.....................................................................................48
4.1.2. Modul Counter..................................................................................51

vii

4.1.3. Modul Shout Box..............................................................................52

4.2. Cara Menghapus Artikel di Joomla............................................................57
4.3. Membuat Artikel Baru................................................................................58
4.4. Mengelola Artikel.......................................................................................62
4.5. Membuat Link antara Menu dengan Artikel..............................................66
4.6. Mengganti Header Website.........................................................................68
4.7. Membuat Top Menu Hubungi Kami..........................................................69
4.8. Membuat Top Menu Donwload.................................................................72
4.9. Membuat Top Menu Agenda......................................................................77
BAB 5. Upload Website Sekolah ke Internet................................................83
5.1. Berkenalan dengan Hosting dan Domain..................................................84
5.2. Mengekspor Database Joomla....................................................................84
5.3. Memilih Hosting dan Domain....................................................................86
5.4. Membuat Database dan Usernya................................................................90
5.5. Meng-Upload Website Sekolah..................................................................92
BAB 6. Cara Menggunakan Proyek Website SMK....................................97
BAB 7. Aneka Trik Joomla Pilihan..............................................................103
7.1. Menghilangkan Tulisan Welcome to the Frontpage................................104
7.2. Mengubah Title Bar..................................................................................105
7.3. Mengubah Footer Website........................................................................106
7.4. Menampilkan Status YM sampai Facebook............................................107
7.5. Maaf Kami dalam Renovasi !!!................................................................110
7.6. Memanfaatkan Terjemahan Google Translate......................................... 111
7.7. Mempercantik Tanggal pada Artikel........................................................112

viii

7.8. Make Up Website Anda dengan SlideShow............................................113

7.9. Mempercantik Album Foto dengan Light Gallery..................................118
7.10. Manajemen User.....................................................................................121
7.11. Menampilkan Video dalam Artikel........................................................126
Daftar Pustaka................................................................................................133

ix

BAB I

DUnianya
Web dan CMS

Bab 1

Dunianya Web dan CMS

Zaman dulu membangun sebuah web adalah kerjaan yang wah banget deh.
Website adalah salah satu komponen yang sangat penting didalam dunia internet.
Pembuatan website mempunyai berbagai tujuan. Saat ini sebuah website tidak
hanya dimiliki perusahaan besar yang telah memiliki bisnis di dunia nyata, namun
banyak sekali bisnis yang justru berawal dari internet dan tidak kalah pentingnya,
website juga sudah digunakan didalam pemerintahan yang bahasa kerennya EGovernment, ini bertujuan agar pemerintah lebih dekat dengan rakyat.

Membangun Website Sekolah itu Susah & Mahal Ya?

Ah, Itu Cuman Gooship Aja Kok ...
Jika anda menanyakan pertanyaan itu 10 tahun yang lalu, maka jawabanya adalah
sulit Buanget the..karena anda dituntut untuk menguasai bahasa Pemograman
HTML dan bahasa yang lain (yang pasti bukan bahasa Indonesia..he..he) dan jika
pertanyaan itu anda menanyakan saat ini maka jawabannya bisa juga tetap sulit,
bisa juga jawabannya sangat mudah.

1.1 Om Apa Thu Joomla!

Joomla! adalah satu CMS (Content Management System) yang paling terkenal
saat ini, Pengertian CMS itu sendiri adalah pengelolaan isi atau content.
Bila dikaitkan dengan web, maka CMS bisa didefinisikan sebagai software yang
mampu mengelola isi atau content dari sebuah website seperti melakukan publikasi,
edit, ataupun menghapus sebuah content. Tentu saja, pengelolaan ini hanya bisa
dilakukan oleh orang-orang yang telah diberikan hak untuk melakukannya. Yang
termasuk ke dalam kategori content ini bisa saja berupa tulisan, gambar, video,
file, ataupun yang lainnya.

1.2 Sejarah Singkat Joomla!

Pada tahun 2001 sebuah perusahaan di Australia bernama Miro membuat sebuah

Proyek Membuat Website Sekolah dengan Joomla!

CMS bernama Mambo. Software ini dibuat dengan sistem open source sehingga
konstributor terhadap pengembangan software ini sangatlah pesat. Karena melihat
sisi bisnis yang semakin cemerlang pada tahun 2002, kini perusahaan mulai
berubah pikiran dan membuat dua versi dari Mambo yaitu versi open source dan
versi komersil yang dijual. Versi open source dinamakan MOS (Mambo Open
Source) sedangkan versi komersilnya dinamakan Mambo CMS.
Pada tanggal 17 Agustus 2005, perseteruan antara pengembang Mambo dengan
Miro sebagai pemegang hak cipta mencapai puncaknya dimana para pengembang
Mambo ramai-ramai hijrah dan mengembangkan CMS Open Source sendiri
dengan nama Joomla!. Pada tanggal 16 September 2005 diperkenalkanlah Joomla!
versi 1.0.0 kepada publik yang sebenarnya merupakan produk yang sama dengan
Mambo 4.5.2.3, tetapi dengan beberapa perbaikan.

1.3 Kelebihan Membuat Web dengan Joomla!

Joomla! adalah salah satu Open Source Content Management Systems paling
powerfull yang pernah ada. Digunakan diseluruh dunia dari situs yang paling
sederhana sampai kepada aplikasi korporasi yang kompleks. Kelebihan Joomla!
terletak pada kemudahan instalasi dan pengelolaannya.
CMS yang satu ini merupakan CMS yang lengkap dan banyak dipakai oleh
pengembang web baik luar dan dalam negeri. Sebagai jasa pembuatan website
murah, penguasaan banyaknya program CMS sudah menjadi sebuah keharusan.
Joomla! terbilang lengkap untuk fitur-fiturnya dan untuk belajar joomla pun
gampang, karena sudah ada id-joomla.com yang didalamnya banyak tutorial
tentang CMS ini. Id-joomla.com merupakan komunitas Joomla! Indonesia,
anggotanya sudah banyak dan mereka saling sharing tentang fitur dan plugin
terbaru dari Joomla!. Di dalam web ini kita juga bisa download Joomla! bahasa
Indonesia.
Berikut ini kelebihan-kelebihan membuat website dengan Joomla!.

Kemudahan Instalasi

Kemudahan Pengelolahan

Open Source

Banyak Buanget Fitur-fiturnya

Bro sorry yapenulis hanya menjelaskan kelebihannya saja dan untuk kekurangan
penulis tidak menjelaskan..he..he.. nah itu tugasnya pembaca untuk mencari

Bab I. Dunianya Web dan CMS

kekurangan CMS Joomla ini, tapi caranya gimana OM tanya aja ama Uncle
Google.. Dan tidak ada sistem yang sempurna 100% (Kesempurnaan Hanyalah
Milik Tuhan) .

Proyek Membuat Website Sekolah dengan Joomla!

BAB II

Persiapan Lahan
Website Sekolah

Bab 2

Persiapan Lahan Website Sekolah

Oke..kita akan mempersipan lahan untuk website sekolah kitayang perlu Anda
siapkan bukan Meteran untuk mengukur lahan Andatapi yang Anda perlu
siapkan thuSecangkir kopi dan Camilan..he..heOk..L3st GO!!!!!!
Disini kita akan melakukan instalasi WampServer dan Joomla, yang perlu Anda
ingatsemua tool dan component sudah penulis siapkan dalam bentuk CD, jadi
kagak repott2..untuk nyarinya

2.1 Instalasi WampServer

Pertama, kita kan melakukan instalasi WampServer yang akan berfungsi sebagai
server local. Adapun tahap instalasinya adalah sebagai berikut:
1. Masukkan CD Master Joomla yang ada didalam buku, lalu klik 2x pada Icon
WampServer2.0. Lihat gambar 2.1.

Gambar 2.1 Ikon WampServer

Proyek Membuat Website Sekolah dengan Joomla!

2. Maka akan tampil kotak dialog Setup, klik tombol Yes. Lihat gambar 2.2.

Gambar 2.2 Kotak dialog Setup

3. Maka tampil kotak dialog Welcome, klik tombol Next. Lihat gambar 2.3.

Gambar 2.3 Kotak dialog Welcome

Bab II. Persiapan Lahan Website Sekolah

4. Maka akan tampil kotak dialog License Agreement, pilih I accept the
agreement, lalu klik tombol Next. Lihat gambar 2.4.

Gambar 2.4 Kotak dialog License Agreement

5. Maka akan tampil kotak dialog Select Destination Location, biarkan terisi
c:\wamp, lanjutkan dengan meng-klik tombol Next. Lihat gambar 2.5.

Gambar 2.5 Kotak dialog Select Destination Location

Proyek Membuat Website Sekolah dengan Joomla!

6. Maka akan tampil kotak dialog Select Additional Tasks, pastikan pada bagian
Additional icons sudah tercentang semua pilihannya, kemudian klik tombol
Next. Lihat gambar 2.6.

Gambar 2.6 Kotak dialog Select Additional Tasks

7. Maka akan tampil kotak dialog Ready to Install, langsung aja klik tombol
Install untuk memulai proses instalasi. Lihat gambar 2.7.
8. Tunggu proses instalasi .. apabila di komputer Anda sudah terinstall browser
Mozilla Firefox, saat proses instalasi berjalan akan tampil kotak dialog
seperti pada gambar 2.8.

Gambar 2.8 Kotak dialog menyatakan telah mendeteksi browser Firefox

Bab II. Persiapan Lahan Website Sekolah

Gambar 2.7 Kotak dialog Ready to Install

9. Klik tombol Yes, maka proses instalasi akan dilanjutkan. Dalam beberapa
komputer, apabila sudah terpasang proteksi Firewall, maka akan tampil
kotak dialog Windows Security Alert. Lihat gambar 2.9.

Gambar 2.9 Kotak dialog Windows Security Alert

10

Proyek Membuat Website Sekolah dengan Joomla!

10. Klik tombol Unblock, maka proses instalasi akan dilanjutkan, kemudian
akan tampil lagi kotak dialog PHP mail parameters. Lihat gambar 2.10.

Gambar 2.10 Kotak dialog PHP mail parameters

11. Klik tombol Next, maka proses instalasi sudah selesai dengan menampilkan
kotak dialog Complete, klik tombol Finish. Lihat gambar 2.11.
12. Selanjutnya, Anda perhatikan pada layar windows di pojok kanan bawah
(taskbar), disana sudah terdapat ikon Wamp server yang menandakan bahwa
Wamp sudah berhasil terinstall di komputer Anda. Lihat gambar 2.12.

Gambar 2.12 Ikon Wamp server di taskbar windows

13. Klik pada icon Wamp server, maka akan tampil beberapa setting, pilih/klik
pada Start All Services untuk mengaktifkan Wamp server. Lihat gambar
2.13.

Bab II. Persiapan Lahan Website Sekolah

11

Gambar 2.11 Kotak dialog proses instalasi sudah selesai (complete)

Gambar 2.13 Beberapa setting dari Wamp server

12

Proyek Membuat Website Sekolah dengan Joomla!

14. Jika sudah, coba Anda ketik di URL browser http://localhost, jika berhasil
Anda akan mendapatkan tampilan seperti pada gambar 2.14.

Gambar 2.14 Halaman WampServer di browser

Ok Coy? Selanjutnyasilahkan nikmati secangkir copy serta camilan yang telah

Anda siapkan sebelumnya, sebelum kita menempuh perjalanan selanjutnya.

2.2 Instalasi Joomla!

Selanjutnya, kita akan melakukan instalasi Joomla dan cara instalasinya sangat
mudah, biar Anda tidak nyasar dan salah jalan dalam instalasinya, silahkan Anda
perhatikan baik-baik langkah instalasi berikut:
1. Masukkan CD Master Joomla ke komputer Anda, cari folder Joomla 1.5.
2. Kemudian, cari file dengan nama Joomla_1.5.rar. Ekstrak file tersebut, lalu
letakkan hasil ekstrak tersebut di direktori c:\wamp\www.
3. Kemudian, ubah (rename) nama folder Joomla 1.5 yang baru Anda copykan

Bab II. Persiapan Lahan Website Sekolah

13

tadi menjadi folder sekolah.

4. Selanjutnya, buka browser Anda, lalu ketikkan http://localhost/sekolah/,
kemudian tekan tombol Enter di keyboard, maka akan tampil halaman
instalasi Joomla. Lihat gambar 2.15.

Gambar 2.15 Halaman instalasi Joomla

5. Klik tombol Next, maka tampil Pre-installation Check. Lihat gambar 2.16.

Gambar 2.16 Halaman Pre-installation Check

14

Proyek Membuat Website Sekolah dengan Joomla!

6. Klik tombol Next, maka akan tampil halaman License. Lihat gambar 2.17.

Gambar 2.17 Halaman License

7. Klik tombol Next, maka akan tampil halaman Database Configuration dan
Anda akan mendapat beberapa pertanyaan dan jangan khawatir, karena
penulis sudah memberikan jawabannya..he..he..? Database Type : mysql,
Host Name : localhost, Username : root, Password = (dikosongkan aja) dan
Database Name = dbsekolah. Lihat gambar 2.18.

Gambar 2.18 Halaman Database Configuration

Bab II. Persiapan Lahan Website Sekolah

15

8. Klik tombol Next, maka akan tampil halaman FTP Configuration, abaikan
saja, klik tombol Next. Lihat gambar 2.19.

Gambar 2.19 Halaman FTP Configuration

9. Maka akan tampil halaman Main Configuration, isikan pada Site Name :
(terserah Anda, contohnya: SMK N 3 MERAUKE), Your Email : (sesuaikan
dengan alamat Email Anda), Admin Password : 1234 dan Confirm Admin
Password : 1234, dan terakhir jangan lupa untuk meng-klik pada tombol
Install Sample Data, kemudian klik tombol Next. Lihat gambar 2.20.

Gambar 2.20 Halaman Main Configuration

16

Proyek Membuat Website Sekolah dengan Joomla!

10. Semua persyaratannya sudah Anda penuhi..dan Anda akan mendapatkan

halaman Finish. Lihat gambar 2.21.

Gambar 2.21 Halaman Finish

11. Lho kok tampilan halamannya kayak error BozNyantai ae Brow.. Buka
Windows Explorer, lalu masuk ke direktori c:\ wamp\www\sekolah\,
kemudiaan cari folder installation, setelah itu hapus folder tersebut. Lihat
gambar 2.22.
Semua langkah telah terpenuhisekarang waktu untuk uji coba..apa semua
langkah yg kita lakuin benar, coba ketik di browser http://localhost/sekolah, dan
jika semua langkah benar, maka Anda akan mendapatkan halaman seperti pada
gambar 2.23.
Selamat!! Anda sudah berhasil melakukan instalasi Joomla. Agar nggak jenuh
silakan Anda istirahat sambil nikmati snack ama secangkir kopi yang sudah Anda
siapkantapi inget..jgn lama2karena tugas berat menanti kita...
Apabila Anda kesulitan mengikuti langkah instalasi Wamp Server dan Joomla,
Anda bisa langsung melihat videonya yang terdapat di CD Master Joomla pada
folder Video Tutorial.

Bab II. Persiapan Lahan Website Sekolah

17

Gambar 2.22 Menghapus folder installation yang terdapat di c:\wamp\www\sekolah

Gambar 2.23 Halaman website Joomla yang sudah berhasil di install

18

Proyek Membuat Website Sekolah dengan Joomla!