proyek membuat website sekolah dengan joomla! · versi open source dinamakan mos (mambo open...

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

P r oye k M e m b u at

Website Sekolah dengan Joomla!

SUHANTO

www.bukulokomedia.com

PROYEK MEMBUAT WEBSITE SEKOLAH DENGAN JOOMLA!Perpustakaan Nasional : Katalog Dalam Terbitan (KDT)Penulis : SuhantoPROYEK 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 HakimCover : Subkhan AnshoriLayout : Lukmanul Hakim

Diterbitkan pertama kali oleh :Penerbit LokomediaJl. Jambon, Perum. Pesona Alam Hijau 2 Kav. B-4, Kricak Yogyakarta 55242.

email : [email protected] : 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.

v

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

vii

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

viii

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

ix

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

BAB I

DUnianya

Web dan CMS

2 Proyek Membuat Website Sekolah dengan Joomla!

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 E-Government, 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

3Bab I. Dunianya Web dan CMS

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 ya…penulis hanya menjelaskan kelebihannya saja dan untuk kekurangan penulis tidak menjelaskan..he..he.. nah itu tugasnya pembaca untuk mencari


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

BAB II

Persiapan Lahan Website Sekolah


Bab 2

Persiapan Lahan Website Sekolah

Oke..kita akan mempersipan lahan untuk website sekolah kita…yang perlu Anda siapkan bukan Meteran untuk mengukur lahan Anda…tapi yang Anda perlu siapkan thu…Secangkir kopi dan Camilan..he..he…Ok..L3st GO!!!!!!

Disini kita akan melakukan instalasi WampServer dan Joomla, yang perlu Anda ingat…semua tool dan component sudah penulis siapkan dalam bentuk CD, jadi kagak repott2..untuk nyarinya…

2.1 Instalasi WampServerPertama, 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

7Bab II. Persiapan Lahan Website Sekolah

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


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


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


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


Gambar 2.11 Kotak dialog proses instalasi sudah selesai (complete)

Gambar 2.13 Beberapa setting dari Wamp server


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? Selanjutnya…silahkan 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


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


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


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


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 Boz…Nyantai 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 terpenuhi…sekarang 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 siapkan…tapi inget..jgn lama2…karena 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.


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

Gambar 2.23 Halaman website Joomla yang sudah berhasil di install

proyek membuat website sekolah dengan joomla! · versi open source dinamakan mos (mambo open...

Documents