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

Extract file Joomla! ke folder www

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.

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.

Menu Bar

Control Panel

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

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

Pilih section Isikan olahraga

Setelah selesai ketik Save. Maka di halaman frontend akan muncul menu baru dibawah newsfeed. Untuk jenis yang lain silahkan coba sendiri. ☺

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

Sign up to vote on this title
UsefulNot useful