1. Introduction to 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
1.1 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 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 1.2 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.
TechnicalDrawingandDesignStudioLaboratoryIECommunity
Page1of28
MEGAWORKSHOP.:ITforLife:.BuildingDynamicWebwithCMSJOOMLA!
MEGAWORKSHOP.:ITforLife:.BuildingDynamicWebwithCMSJOOMLA!
TechnicalDrawingandDesignStudioLaboratoryIECommunity
Page3of28
MEGAWORKSHOP.:ITforLife:.BuildingDynamicWebwithCMSJOOMLA!
Bila firewall Anda aktif, pastikan untuk memberikan akses pada Apache dan MySQL agar dapat aktif
TechnicalDrawingandDesignStudioLaboratoryIECommunity
Page4of28
MEGAWORKSHOP.:ITforLife:.BuildingDynamicWebwithCMSJOOMLA!
Untuk mengetesnya akses pada internet browser ketik localhost. Selanjutnya file dan folder web Anda akan ditempatkan di : C:\Program Files\xampp\htdocs
TechnicalDrawingandDesignStudioLaboratoryIECommunity
Page5of28
MEGAWORKSHOP.:ITforLife:.BuildingDynamicWebwithCMSJOOMLA!
folder
2. Rename folder hasil ekstrasi dengan nama yang Anda inginkan. Misalkan workshop.
4. Jalankan internet browser Anda, akses : localhost/workshop. Jadi instalasi CMS Joomla dilakukan via internet browser. 5. pre-installation check : pastikan setiap item ditandai warna hijau. Lalu klik Next. 6. license : Klik Next. 7. step 1 : Host Name : localhost MySQL User Name : root MySQL Password : root MySQL Database Name : workshop (terserah Anda) Klik Next. Klik OK.
8. step 2 : Isi nama web Anda pada field Site name. Misalkan Mega Workshop IE Community. Klik Next 9. step 3 : Isi field Your E-mail dengan e-mail Anda dan field Admin password dengan password yang Anda inginkan. Klik Next. 10. step 4 : Hilangkan folder [installation] pada folder web Anda [C:\Program Files\xampp\htdocs \workshop\]
11. Klik Administration untuk melihat halaman admin web. Atau dengan mengakses localhost/workshop/administrator. 12. Klik View Site untuk melihat halaman depan web baru Anda. Atau dengan mengakses localhost/workshop. Footnote : 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/workshop/administrator Halaman Frontend adalah halaman yang akan tampil dan dapat dilihat oleh semua pengunjung web Anda. Akses : localhost/workshop
TechnicalDrawingandDesignStudioLaboratoryIECommunity
Page6of28
MEGAWORKSHOP.:ITforLife:.BuildingDynamicWebwithCMSJOOMLA!
Contoh hirarki content Study Group 1. Untuk mengatur segala konfigurasi web, termasuk pengubahan hirarki content, masuk ke halaman administrator Joomla (localhost/workshop/administrator). 2. Masukkan username dan password. Membuat Section Klik pada menu atau icon untuk menambah atau mengedit section Ini akan membawa Anda menuju layar Section Manager.
TechnicalDrawingandDesignStudioLaboratoryIECommunity
Page7of28
MEGAWORKSHOP.:ITforLife:.BuildingDynamicWebwithCMSJOOMLA!
Secara default, Joomla sudah menginstall beberapa section (begitu juga category dan content). 1. Klik salah satu link untuk mengedit link yang ada. Misalkan link The News (News).
2. Masukkan pada field Title dan Section Name : Profil. 3. 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 (Newsflashes dan Frequently Asked Questions), yaitu Kegiatan dan Ekstra. Hasil akhir :
TechnicalDrawingandDesignStudioLaboratoryIECommunity
Page8of28
MEGAWORKSHOP.:ITforLife:.BuildingDynamicWebwithCMSJOOMLA!
Membuat Category
Klik pada menu atau icon untuk menambah atau mengedit category
Klik link untuk mengedit category yang ada Klik icon New untuk membuat category baru
TechnicalDrawingandDesignStudioLaboratoryIECommunity
Page9of28
MEGAWORKSHOP.:ITforLife:.BuildingDynamicWebwithCMSJOOMLA!
2. Masukkan pada field Title dan Category Name : Laboratorium. 3. Pilih Section : Profil. 4. Klik icon Save untuk menyimpan perubahan dan kembali ke halaman Category Manager. NB : Icon Apply untuk menyimpan perubahan dan kembali ke halaman Section Editor. Icon Close untuk membatalkan perubahan. [ .: Latihan :. ] Buat 9 category lainnya dan sesuaikan dengan category yang seperti dalam contoh, dengan mengedit category yang sudah ada (Newsflash dan Example FAQs) dan dengan membuat category baru. Hasil Akhir :
TechnicalDrawingandDesignStudioLaboratoryIECommunity
Page10of28
MEGAWORKSHOP.:ITforLife:.BuildingDynamicWebwithCMSJOOMLA!
2 3 4
1
Anda dapat menggunakan salah satu opsi-opsi ini untuk mengakses content items.
Pada bagian ini kita akan menggunakan metode 1. Yang akan membawa kita ke layar Content Items Manager.
Klik icon Published Kolom Reorder agar content dapat dan Order untuk terlihat oleh mengatur pengunjung web urutan-urutan dan icon FrontPage content. untuk menampilkan di halaman depan web. Klik icon New untuk membuat content baru. Klik pada content title untuk mengedit content yang ada.
TechnicalDrawingandDesignStudioLaboratoryIECommunity
Page11of28
MEGAWORKSHOP.:ITforLife:.BuildingDynamicWebwithCMSJOOMLA!
6 1 3 4 5 2
Intro Text : .
Main Text : .
1. Isi field Title. 2. Copy contoh artikel ke Intro Text dan Main Text. 3. Pilih section dan category yang diinginkan.
4. Bila content ingin ditampilkan di halaman depan web aktifkan checkbox Show on Frontpage. 5. Isi field lainnya pada Publishing Info. 6. Klik pada tab Images.
7. Klik icon Upload untuk memasukkan file gambar dari harddisk user ke folder web. Setelah diupload, refresh halaman web untuk memasukkan daftarnya di Gallery Images. 8. Untuk memasukkan gambar ke content, pilih gambar untuk pada Gallery Images. Lalu klik tanda memasukkan daftarnya ke Content Images. 9. Lalu klik icon insert image. Gambar akan terletak pada tulisan {mosimage}. 10. Urutan gambar mengikuti urutan pada daftar Content Images.
TechnicalDrawingandDesignStudioLaboratoryIECommunity
Page12of28
MEGAWORKSHOP.:ITforLife:.BuildingDynamicWebwithCMSJOOMLA!
.: Latihan :. Isi content pada category : Profil, Praktikum, Proyek, Riset, Study Group, IT Room, Pengumuman, dan Taushiyah; dengan contoh yang ada pada hard disk. Mengubah tampilan content pada frontpage. 1. Akses Menu mainmenu 2. Pada Menu Item, klik Home.
2
3. Ubah nilai pada field # Leading, # Intro, Columns, #Links. 4. Klik icon Save
TechnicalDrawingandDesignStudioLaboratoryIECommunity
Page13of28
MEGAWORKSHOP.:ITforLife:.BuildingDynamicWebwithCMSJOOMLA!
Hasil akhir:
TechnicalDrawingandDesignStudioLaboratoryIECommunity
Page14of28
MEGAWORKSHOP.:ITforLife:.BuildingDynamicWebwithCMSJOOMLA!
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
1
Main Menu
2
Untuk menambah atau mengurangi menu : Menu Menu Manager.
User Menu
Other Menu
1. Isi field Menu Name dan Module Title. 2. Klik icon Save.
TechnicalDrawingandDesignStudioLaboratoryIECommunity
Page15of28
MEGAWORKSHOP.:ITforLife:.BuildingDynamicWebwithCMSJOOMLA!
[ .: Latihan :. ] 1. Delete menu othermenu. 2. Buat menu : kegiatan (Kegiatan) dan ekstra (Ekstra). Hasil akhir :
Untuk menambah atau mengurangi link pada menu : Menu nama_menu (misal : mainmenu)
Untuk menghilangkan link, pilih link lalu klik icon Trash Untuk menambahkan link, klik icon New
TechnicalDrawingandDesignStudioLaboratoryIECommunity
Page16of28
MEGAWORKSHOP.:ITforLife:.BuildingDynamicWebwithCMSJOOMLA!
Blog Content Section atau Table Content Section : membuat link ke Section. Blog Content Category atau Table Content Category : membuat link ke Category. Submit - Content : membuat link agar end user dapat mengirim content pada section tertentu. [ .: Latihan :. ] 1. Pada menu usermenu, tambahkan link Kirim Artikel dengan opsi Submit - Content untuk section Ekstra dan delete link Submit News dan Submit Weblinks.. 2. Pada menu kegiatan, tambahkan link dengan opsi Blog Content Category untuk setiap category pada section Kegiatan (Praktikum, Riset, Proyek, dan Study Group). 3. Pada menu ekstra, tambahkan link dengan opsi Blog Content Category untuk setiap category pada section Ekstra (IT Room, Pengumuman, dan Taushiyah). Hasil akhir :
Agar menu dapat tampil di halaman frontend web : 1. Akses menu Modules Site Modules.
TechnicalDrawingandDesignStudioLaboratoryIECommunity
Page17of28
MEGAWORKSHOP.:ITforLife:.BuildingDynamicWebwithCMSJOOMLA!
menu seperti
Hasil akhir :
TechnicalDrawingandDesignStudioLaboratoryIECommunity
Page18of28
MEGAWORKSHOP.:ITforLife:.BuildingDynamicWebwithCMSJOOMLA!
3. Untuk menggunakan template yang Anda inginkan, pilih templatenya lalu klik icon Default.
Instalasi Template 1. Akses menu Installers Template Site. 2. Klik browse dan pilih template yang diinginkan untuk diinstall.
3. Klik Upload File & Install NB : File template harus sudah dalam file terkompresi (.zip atau .tar.gz)
TechnicalDrawingandDesignStudioLaboratoryIECommunity
Page19of28
MEGAWORKSHOP.:ITforLife:.BuildingDynamicWebwithCMSJOOMLA!
header
Mengganti image pada template Image-image yang ada pada template, seperti header, biasanya terdapat pada folder \templates\nama_template\images dan image ini dengan bebasnya dapat kita rubah. Hal-hal yang perlu diperhatikan, apabila Anda belum menguasai bahasa pemrograman web, adalah image-image yang akan mengganti image yang ada, sebaiknya mempunyai nama dan ukuran pixel yang sama dengan image yang akan diganti. Sebagai contoh kita akan mengganti header dari template yang digunakan (JavaBean). 1. Masuk ke folder C:\Program Files\xampp\htdocs\workshop\templates\JavaBean\images 2. Temukan image yang sama dengan header (image_01.jpg). 3. Ganti dengan contoh header yang telah disediakan.
TechnicalDrawingandDesignStudioLaboratoryIECommunity
Page20of28
MEGAWORKSHOP.:ITforLife:.BuildingDynamicWebwithCMSJOOMLA!
[ .: Latihan :. ] Install component di bawah ini. com_smo_ajax_shoutbox.zip com_akobookplus2.0.3.zip com_joomlaboard-1-1-2.zip com_rsgallery2_1.11.6-alpha.zip comprofiler.zip docmanV13_RC_2.zip com_joomlaxplorer_1.4.0.tar.gz com_uddeim05b.zip com_jce104.zip com_akocomment.zip
TechnicalDrawingandDesignStudioLaboratoryIECommunity
Page21of28
MEGAWORKSHOP.:ITforLife:.BuildingDynamicWebwithCMSJOOMLA!
Instalasi Plug-in Module 1. Akses menu Installers Modules. 2. Pada Upload Package File, klik Browse 3. Pilih paket module-nya dan klik Open.
[ .: Latihan :. ] Install module di bawah ini. mod_smo_ajax_shoutbox.zip cblogin.zip mod_jblatest.zip mod_latestdownV10_RC_2.zip mod_whosonline_udde.zip
Instalasi Plug-in Mambot 1. Akses menu Installers Mambots. 2. Pada Upload Package File, klik Browse 3. Pilih paket module-nya dan klik Open. 4. Klik Upload File & Install.
TechnicalDrawingandDesignStudioLaboratoryIECommunity
Page22of28
MEGAWORKSHOP.:ITforLife:.BuildingDynamicWebwithCMSJOOMLA!
Konfigurasi Plug-in Component Segala konfigurasi component terdapat Components Nama_Component. pada menu
Untuk menghubungkan component dengan front-end user, dibutuhkan sebuah link untuk menghubungkannya. 1. Masuk ke salah satu menu, misalkan mainmenu. 2. Klik icon New.
3. Klik pada tipe menu : Component. 4. Pilih component dan beri nama linknya di field Name. 5. Klik icon Save.
3 4
[ .: Latihan :. ] Buat link di menu mainmenu untuk component : AkoBook DOCMan Joomlaboard Forum RSGallery
TechnicalDrawingandDesignStudioLaboratoryIECommunity
Page23of28
MEGAWORKSHOP.:ITforLife:.BuildingDynamicWebwithCMSJOOMLA!
Konfigurasi Plug-in Module Segala konfigurasi module terdapat pada menu Modules Site Modules.
Keterangan : Title : Judul module untuk halaman frontend. Show Title : Menampilkan atau tidak judul module. Position : Posisi module pada halaman front-end. Module Order : Urutan module terhadap module lain. Pages / Items : Halaman mana saja yang menampilkan module.
[ .: Latihan :. ] Buat tampilan menu halaman web seperti gambar di bawah ini.
TechnicalDrawingandDesignStudioLaboratoryIECommunity
Page24of28
MEGAWORKSHOP.:ITforLife:.BuildingDynamicWebwithCMSJOOMLA!
Konfigurasi Plug-in Mambot Segala konfigurasi mambot terdapat pada menu Mambots Site Mambots.
TechnicalDrawingandDesignStudioLaboratoryIECommunity
Page25of28
MEGAWORKSHOP.:ITforLife:.BuildingDynamicWebwithCMSJOOMLA!
3. Maka akan muncul tampilan seperti di bawah. Dan untuk membackupnya (Eksport) klik pada tab Eksport.
TechnicalDrawingandDesignStudioLaboratoryIECommunity
Page26of28
MEGAWORKSHOP.:ITforLife:.BuildingDynamicWebwithCMSJOOMLA!
4. Klik pada link Select All. 5. Beri tanda cek pada opsi Save as file. 6. Beri nama file databasenya pada field File name template. 7. Klik Go untuk menyimpan file database pada harddisk.
5 6 7
Maka akan muncul kotak dialog seperti berikut lalu klik Save dan simpan di lokasi yang diinginkan.
Database memuat semua informasi tentang web seperti content, nama template dan plugin (component, module, dan mambot) yang terinstall, user teregistrasi, dan lainnya. Tetapi tidak menyimpan file-file web seperti file plugin (component, module, dan mambot), image, atau file lainnya.
TechnicalDrawingandDesignStudioLaboratoryIECommunity
Page27of28
MEGAWORKSHOP.:ITforLife:.BuildingDynamicWebwithCMSJOOMLA!
Restore database 1. Akses : localhost/phpmyadmin 2. Pilih Database yang diinginkan. Sebelum merestore (import) database yang kita inginkan, database yang lama harus dihilangkan terlebih dahulu. 3. Untuk menghilangkan database lama, klik Check All 4. Pilih opsi Drop.
5. Klik Yes.
5
6. Klik pada tab Import. 7. Pilih database yang dinginkan (klik Choose). Pastikan ekstensinya .sql. 8. Dan klik Go.
6 7
8
TechnicalDrawingandDesignStudioLaboratoryIECommunity Page28of28