MODUL JOOMLA! oleh: Putu A. Widhiartha dan Made J. Wiranatha BAB III
JOOMLA CONTENT Sebagai aplikasi yang berdasarkan Content Management System tentunya content merupakan komponen paling penting dalam mempelajari Joomla. Content sendiri jika diterjemahkan secara sederhana berarti isi dari sebuah situs, dan dapat berupa artikel, gambar, foto, musik, ataupun video. Pada bab ini akan kita pelajari bagaimana cara membuat situs dengan memasukkan content ke dalam Joomla dan bagaimana cara Joomla memanajemen content tersebut. Sebelumnya kita lihat dulu menu yang terdapat pada Joomla: Menu Utama Joomla
Gambar 3.1 Menu utama Joomla
Jika anda telah berhasil menginstall Joomla 1.5 maka tampilan pada halaman utama untuk administrator setelah anda login akan tampak seperti gambar di atas. Pada dasarnya menu disusun menjadi tiga bagian utama, yaitu : 1. Joomla Toolbar 2. Control Panel 3. Menu Aktifitas Situs Seperti pada umumnya aplikasi komputer, toolbar berisi semua menu pada Joomla yang dapat anda akses.Sedangkan pada control panel terdapat 10 item yang ditampilkan.
12
Sebenarnya item-item ini juga dapat diakses melalui toolbar namun karena merupakan itemitem utama yang akan sering anda akses dalam memodifikasi situs maka ditampilkan secara khusus sebagai menu utama. Sedangkan Menu Aktifitas Situs menampilkan perubahanperubahan yang paling baru yang sudah anda buat pada situs anda, yang akan memudahkan anda untuk langsung mengaksesnya tanpa perlu masuk ke menu lainnya terlebih dahulu.
3.1 Sections, Categories, dan Articles_______________________________________ Hal yang paling penting dari sebuah situs tentu saja adalah isi yang terdapat di dalamnya. Kita sudah mempunyai sebuah situs yang bernama ‘Coba Joomla’. Sekarang akan kita persiapkan artikel-artikel yang akan menjadi isi dari situs tersebut. Pada dasarnya content dalam Joomla dibagi menjadi tiga; sections (bagian), categories (kategori) dan articles (artikel). Section merupakan jenjang yang paling tinggi. Section dapat terdiri dari beberapa category dan category dapat terdiri dari beberapa article. Sekarang akan kita bahas langkah-langkah untuk membuat suatu section. Section merupakan subjek pokok yang akan anda buat dalam isi situs anda. Misalkan kita akan membuat suatu situs yang berisi biografi tokoh-tokoh terkenal dunia. Akan kita buat tiga section di sini, yaitu ‘Politikus’, ‘Atlet’, dan ‘Selebriti’. 1. Untuk memulai klik ‘Section Manager’ pada Menu Utama.
Gambar 3.1.1 Pilih Section Manager
2. Untuk membuat section baru klik tombol ‘New’ yang terdapat di kanan atas. 3. Masukkan judul dan deskripsi singkat tentang section anda dan setelah itu klik tombol ‘Save’.
13
Gambar 3.1.2 Layar new section. Buat tiga section: politikus, atlet, dan selebriti
4. Buat section sebanyak yang anda butuhkan. Seperti sudah dibahas di atas untuk situs ‘Coba Joomla’ ini kita buat 3 section, yaitu politikus, atlet dan selebriti. 5. Setelah selesai membuat section langkah selanjutnya adalah membuat category untuk pengelompokan artikel yang lebih spesifik lagi. Cara membuat category mirip dengan cara membuat section. Kembali ke Menu Utama dan klik ‘Category Manager’. 6. Perhatikan gambar 3.1.3. Sebelum memilih ‘New’ untuk membuat category baru jangan lupa untuk memilih di section mana category tersebut akan dibuat.
Gambar 3.1.3 Layar category manager
7. Untuk situs ‘Coba Joomla’ ini kita buat category ‘Kepala Negara’ dan ‘Menteri’ di bawah section ‘Politikus’; category ‘Sepakbola’, ‘Balap’, ‘Basket’, dan ‘Atletik’ di bawah section ‘Atlet’; dan category ‘Bintang Film’, ‘Model’, dan ‘Musisi’ di bawah section ‘Selebriti’. 8. Setelah selesai dengan section dan category kini saatnya membuat article sebagai content utama dari situs anda. Untuk memulai klik Content>Article Manager pada toolbar atau klik langsung dari Menu Utama, kemudian klik ‘New’
14
9. Beberapa hal yang harus anda perhatikan pada layar artikel ini: Masukkan judul artikel anda, juga tentukan di section dan category mana untuk artikel ini. Anda dapat memilih untuk mempublikasikan artikel anda atau tidak, selain itu anda juga dapat memilih apakah artikel tersebut akan ditampilkan di halaman utama (front page) situs anda. Box utama adalah tempat untuk menulis artikel anda. Di bawah box tersebut ada tiga icon yang dapat anda klik : - Image untuk memberi gambar pada artikel anda. - Pagebreak untuk membagi artikel menjadi halaman-halaman. - Read more untuk membagi artikel menjadi dua bagian, yaitu bagian yang akan ditampilkan sekilas di halaman situs dan bagian yang memuat artikel secara lengkap.
Gambar 3.1.4 Tempat menulis artikel anda
10. Berikut ini adalah tampilan halaman muka (frontpage) situs setelah kita masukkan beberapa artikel:
15
Gambar 3.1.5 Halaman utama situs ‘Coba Joomla’
3.2 Menu_____________________________________________________________
Setelah selesai membuat content untuk situs anda, langkah selanjutnya yang perlu dilakukan adalah membuat menu-menu yang akan memudahkan pengunjung dalam melakukan navigasi pada situs anda. Dalam membuat menu ini biasanya para webmaster memiliki pedoman dasar ‘3 clicks’ yang artinya untuk mengakses halaman yang diinginkan, jangan sampai pengunjung situs membutuhkan lebih dari tiga kali meng-klik mouse. Joomla memiliki sistem yang sudah terintegrasi untuk manajemen menu. Sistem ini dibangun berdasarkan tiga tipe informasi yang terdapat dalam Joomla; components, modules, dan plugins. Component adalah informasi utama dalam Joomla dan dapat diakses melalui menu. Jika anda melihat halaman utama pada situs yang tampak hanyalah artikel utama saja. Informasi contact, web links, news feed, dan artikel yang tidak dipublikasikan di halaman pertama tidak akan tampak. Hal ini dikarenakan halaman situs hanya dapat menampilkan satu component saja. Untuk menampilkan component lain kita harus berpindah halaman dengan cara meng-klik menu yang disediakan.
16
Sekarang akan kita pelajari bagaimana cara membuat menu untuk mengakses informasi-informasi yang tidak tampak di frontpage situs: 1. Login sebagai administrator dan pada toolbar klik Menu>Main Menu.
3.2.1 Home Pada main menu akan tampak bahwa sudah terdapat satu item, yaitu home yang merupakan menu untuk mengakses halaman utama (frontpage) situs kita. Kita klik ‘home’ untuk melakukan berbagai macam seting termasuk merubah nama halaman situs atau mengatur berapa banyak artikel yang ditampilkan di halaman utama. 1. Klik ‘home’ untuk melakukan konfigurasi situs. 2. Di bagian Parameter – Basic ada beberapa hal yang dapat anda atur: # Leading – adalah jumlah artikel utama yang akan ditampilkan di halaman utama. Artikel ini akan menempati lebar maksimal box informasi situs. Contoh artikel utama ini adalah biografi Angelina Jolie pada gambar 3.1.5. # Intro – adalah jumlah artikel yang hanya ditampilkan sekilas saja, karena kita telah menggunakan fasilitas ‘read more’ untuk melihat artikel yang lebih lengkap. Artikel ini akan memakan tempat selebar satu kolom. Contohnya adalah biografi Michael Schumacher pada gambar 3.1.5. # Columns – adalah jumlah kolom untuk menampilkan artikel. Terlihat pada situs ‘Coba Joomla’ terdapat dua kolom artikel. # Links – adalah jumlah artikel yang hanya ditampilkan sebagai link dan akan ditempatkan di bagian bawah halaman utama pada situs. 3. Di bagian Parameter – Advanced pastikan kolom ‘Show a Feed Link’ tercentang ‘Yes’. Ini akan memungkinkan situs lain untuk menampilkan news feed di halaman utama situs kita. 4. Di bagian Parameter – Component banyak hal yang bisa anda konfigurasikan sesuai dengan kebutuhan dan keinginan anda, seperti menampilkan judul artikel, menampilkan tanggal dan waktu artikel dibuat, dan banyak lagi lainnya. 5. Di bagian Parameter – System masukkan judul untuk halaman utama di kolom ‘Page Title’ Judul ini akan di tab dari browser anda ketika anda membuka situs ini. Judul ini juga akan tampak di header halaman utama situs, yang sebelumnya bertuliskan ‘Welcome to the Frontpage’.
17
Gambar 3.2.1 Layar konfigurasi menu
6. Klik ‘Save’ setelah anda selesai melakukan perubahan, dan lihat hasilnya di http://localhost/joomla15.
3.2.2 Section Situs ‘Coba Joomla’ mempunyai tiga section: politikus, atlet, dan selebriti. Sekarang akan kita buat menu di halaman utama yang akan memungkinkan kita untuk mengakses ketiga section tersebut. 1. Klik Menu>Main Menu dari toolbar. 2. Klik ‘New’ kemudian ‘Articles’ dan ‘Section Blog Layout’. Perhatikan gambar 3.2.2. 3. Anda akan masuk ke halaman konfigurasi yang sama seperti ketika melakukan editing menu home yang dibahas sebelumnya. Pada bagian Parameter – Basic pilih salah satu section dari ketiga section yang sudah kita buat sebelumnya. Beri judul yang sesuai dan nama halaman dapat anda atur pada bagian Parameter – System. Pada bagian Parameter – Advanced di kolom Category Order anda dapat memilih Title – Alphabetical untuk menyusun artikel berurutan sesuai abjad judulnya. 4. Klik ‘Save’ jika sudah selesai.
18
Gambar 3.2.2 Pada menu item pilihlah section blog layout
5. Ulangi langkah – langkah di atas untuk tiap section. Anda juga dapat membuat menu yang langsung merujuk ke category, yang dalam situs ‘Coba Joomla’ berarti ke kategori ‘kepala negara’, ‘balap’, ‘sepakbola’, ‘model’ dan lain-lain. Menu langsung ke category perlu dibuat jika artikel yang ada sudah terlalu banyak untuk ditampilkan berdasarkan section saja. Cara membuat menu ini juga sama seperti membuat menu untuk section hanya pada langkah 2 klik ‘New’ kemudian ‘Articles’ dan ‘Section Blog Layout’. 6. Perhatikan gambar 3.2.3. Setelah selesai membuat menu ‘Biografi Atlet’ coba lihat hasilnya di http://localhost/joomla15. Ketika anda klik ‘Biografi Atlet’ pada menu maka halaman akan berpindah dan menampilkan semua artikel yang terdapat pada section ‘atlet’.
19
Gambar 3.2.3 Menu untuk mengakses section atlet
3.2.3 Contact Us Sebuah situs yang baik selalu memungkinkan pengunjungnya untuk berinteraksi langsung dengan pembuat situs. Oleh karena itu sebagian besar situs pasti mencantumkan contact us dalam menu utamanya. Pada bagian ini kita akan mempelajari cara membuat menu contact us. Sebelum membuat menu tersebut, terlebih dahulu kita harus membuat contact information. Berikut adalah langkah-langkahnya: 1. Buat kategori baru untuk contact di sini, beri nama webmaster. Klik Components>Contacts>Categories pada toolbar. 2. Klik ‘New’, buat kategori baru yaitu webmaster, kemudian ‘Save’. 3. Kemudian klik Components>Contacts>Contacts pada toolbar. Klik ‘New’ dan buat contact person sebanyak yang anda butuhkan. Jangan lupa memasukkan alamat email mereka dan masukkan ke kategori webmaster. Setelah selesai dengan proses di atas baru kita melangkah ke tahap membuat menu contact us. Ikuti langkah-langkah berikut: 1. 2. 3. 4.
Klik Menu>Main Menu pada toolbar. Pilih ‘New’, kemudian ‘Contacts’ dan ‘Contact Category Layout’. Beri nama halaman Contact Us, dan pilih Webmaster di kolom Select Category. Klik ‘Save’ dan hasilnya akan tampak seperti ini:
20
Gambar 3.2.4 Layar yang akan tampil jika anda meng-klik menu contact us
3.2.4 Web Links Web links merupakan sesuatu yang penting dalam pembuatan sebuah situs. Web links biasanya berisi link ke situs lain yang sejenis, bisa juga situs yang menjadi sponsor anda. Anda juga dapat memanfaatkan web links sebagai sarana untuk mempromosikan situs anda dengan cara memuat link ke situs lain sedangkan situs tersebut memuat link ke situs anda. Berikut langkah-langkah untuk membuat web link : 1. 2. 3. 4.
Pada toolbar klik Components>Web Links>Categories. Klik ‘New’ dan buat kategori baru bernama ‘Situs Penting’, kemudian klik ‘Save’. Pada toolbar klik Components>Web Links>Links. Klik ‘New’ dan buat link sebanyak yang anda butuhkan. Masukkan nama situs tujuan dan jangan lupa isi alamat URL-nya. Setelah selesai klik ‘Save’.
Setelah selesai dengan membuat link-link baru kita menuju tahap selanjutnya, yaitu membuat menu untuk web links sehingga pengunjung dapat mengakses link yang kita buat. 1. Pada toolbar klik Menus>Main Menu. 2. Pilih ‘New’ kemudian ‘Web Links’ dan ‘Category List Layout’. 3. Beri nama halaman ‘Web Links’, isi kolom Category dengan Situs Penting, jangan lupa isi juga nama halaman pada Parameter – System dengan ‘Web Links’. 4. Klik ‘Save’ dan lihat hasilnya:
21
Gambar 3.2.5 Tampilan menu web links
3.2.5 Search Menu terakhir yang perlu kita buat adalah search. Search adalah fitur yang sangat berguna bagi pengunjung untuk mencari suatu artikel yang dibutuhkan tanpa perlu menjelajahi situs, cukup dengan memasukkan kata kunci di kolom yang disediakan. Langkah-langkah membuat menu search secara garis besar hampir sama dengan menu-menu yang sudah dibahas sebelumnya: 1. Pada toolbar klik Menus>Main Menu. 2. Klik ‘New’ kemudian pilih ‘Search’ dan ‘Search’ lagi. 3. Beri nama halaman ‘Search’ baik di bagian Menu Item Details maupun di bagian Parameter System. 4. Klik ‘Save’ dan lihat hasilnya:
22
Gambar 3.2.6 Masukkan kata kunci ‘jordan’ dan semua artikel yang mengandung kata ini akan ditampilkan di halaman search.
3.3 Modules_________________________________________________________________ Pada sub-bab yang lalu telah dijelaskan bahwa content Joomla terdiri dari: components, modules, dan plugins. Kita telah membahas tentang hubungan component dan menu. Pada bagian ini akan kita pelajari tentang modul. Sedangkan plugin lebih mengarah ke content Joomla yang dapat anda download dari internet dan dapat anda aplikasikan pada situs Joomla anda, contohnya template yang akan dibahas pada bab berikutnya. Modul merupakan suatu bagian, yang biasanya dibatasi suatu box, yang dapat diletakkan di mana saja di halaman situs, baik di atas, pojok, kiri, kanan, maupun sebagai footer. Salah satu contoh modul adalah box berisi menu-menu yang kita sudah kita buat di sub-bab sebelumnya. Beberapa modul yang terdapat dalam Joomla antara lain: Archived Content Banner Breadcrumbs Custom HTML Feed Display Footer ImageSlideShow Latest News
: Daftar content yang tersimpan pada situs : Iklan berbentuk gambar : Lokasi pengunjung saat ini pada situs : Modul dengan script pemrograman yang bisa kita isi sendiri : Membaca isi situs melalui situs lain : Bagian bawah situs, biasa berisi copyright dan pengembang situs : Penampil gambar secara acak bergantian dari satu gambar ke gambar lain : Berita terbaru pada situs 23
Login Menu Most Read Content Newsflash Poll Random Image Related Articles Search Sections Statistics Syndicate Who's Online Wrapper
: Untuk login ke dalam situs, terdapat juga form pendaftaran : Menu baru : Daftar konten atau isi situs yang paling sering dibaca : Tampilan satu kategori tertentu yang disajikan secara sekilas : Pemilihan suara pengunjung, serta menu untuk melihat hasilnya : Penampilan gambar secara acak dari suatu folder yang ada pada situs dan berubah bila kita berpindah halaman : Artikel-artikel yang berhubungan dengan topik yang sedang kita baca : Modul pencarian dari artikel yang ada pada situs : Menu section yang ada pada situs untuk melihat artikel apa saja yang ditulis pada section tersebut : Statistik dari situs berdasarkan berbagai parameter : Konektifitas situs dengan situs-situs lain yang saling berhubungan : Daftar pengunjung yang saat ini sedang mengunjungi situs : Frame dari web atau situs lain yang hendak ditampilkan pada situs kita
Selain modul-modul di atas yang sudah termasuk dalam paket installasi Joomla 1.5, anda juga dapat menambahkan modul-modul baru dengan berbagai macam fungsi yang banyak tersedia di internet secara gratis. Berikutnya akan kita pelajari cara untuk membuat beberapa modul yang mempunyai fungsi cukup penting dan umumya harus ada pada sebuah situs.
3.3.1 Syndicates Situs yang kita miliki bisa saling berbagi artikel dengan situs lain yang sejenis melaui fitur news feed. Kita dapat menampilkan artikel yang terdapat pada situs lain jika situs tersebut menyediakan fasilitas RSS feed. Pada bagian ini kita akan mempelajari cara untuk membuat RSS feed sehingga situs lain dapat menampilkan artikel dari situs kita, yang dapat berguna sebagai publikasi bagi situs kita. Dengan cara ini kita telah membentuk syndicate dengan situs lain. 1. Pada toolbar klik Extensions>Module Manager. 2. Klik ‘New’, kemudian pilih ‘Syndicate’ dan ‘Next’. 3. Beri nama ‘RSS’ untuk syndicate anda pada box yang telah disediakan. Pilih posisi di mana modul ini akan ditempatkan. Anda dapat memilih ‘left’ atau ‘right’ tapi di sini juga sudah tersedia posisi khusus untuk ‘syndicate’.
24
Gambar 3.3.1 Properties untuk syndicate
4. Pada bagian Menu Assignment pilih ‘All’ untuk menampilkan syndicate modul anda di semua halaman situs atau ‘Select Menu Item(s) from the List’ untuk mengatur halaman mana saja yang akan menampilkan syndicate modul ini. 5. Klik ‘Save’ dan lihat hasilnya pada situs anda.
Gambar 3.3.2 Perhatikan kotak merah yang menampilkan link untuk RSS feed
3.3.2 Login Modul login berfungsi untuk registrasi dan login ke dalam situs. Jika ada pengunjung yang melakukan registrasi melalui form yang tersedia maka pengunjung tersebut akan memiliki account di situs kita. Data-data dan alamat e-mail pengunjung tersebut juga akan
25
tersimpan dalam database situs dan memudahkan kita untuk berkomunikasi dengan pengunjung situs kita. Langkah-langkah untuk membuat modul login: 1. Pada toolbar klik Extensions>Module Manager. 2. Klik ‘New’, kemudian pilih ‘Login’ dan ‘Next’. 3. Beri nama ‘Login’ untuk modul ini pada box yang telah disediakan. Pilih posisi di mana modul ini akan ditempatkan. Pilih ‘left’ untuk menempatkan modul ini tepat di bawah main menu. 4. Klik ‘Save’ dan lihat hasilnya.
Gambar 3.3.3 Telah tersedia modul login lengkap dengan pilihan untuk mendaftar
3.3.3 Polling Polling biasanya terdapat pada sebuah situs agar pengunjung dapat lebih interaktif dalam memberikan opininya tentang berbagai macam topik. Sebelum membuat modul polling ini kita harus membuat component-nya terlebih dahulu. Berikut ini langkahlangkahnya: 1. Pada toolbar klik Components>Polls. 2. Klik ‘New’. 3. Pada bagian ‘Details’ masukkan judul polling anda. Misalnya ‘Bagaimana pendapat anda tentang situs ini?’. Pada bagian ‘Options’ masukkan pilihan-pilihan jawaban untuk polling, misalnya: ‘Bagus Sekali’, ‘Bagus’, ‘Cukup’, ‘Kurang’, ‘Jelek’. 4. Klik ‘Save’.
26
Setelah component untuk polling selesai dibuat baru kita buat modulnya: 1. Pada toolbar klik Extensions>Module Manager. 2. Klik ‘New’, kemudian pilih ‘Poll’ dan ‘Next’. 3. Pada bagian ‘Details’ beri nama modul ini ‘Polling’ kemudian tempatkan di sebelah kiri di bawah ‘Login’. Pada bagian ‘Menu Assignment’ pilih ‘Select Menu Item(s) from the List’ dan tempatkan modul ini di bagian ‘Home’. Pada bagian ‘Module Parameters’ jangan lupa untuk memilih poll yang sudah anda buat tadi.
Gambar 3.3.4 Layar untuk mengatur modul polls
4. Klik ‘Save’ dan lihat hasilnya.
Gambar 3.3.5 Sekarang pengunjung dapat menilai situs anda
27
3.3.4 Newsflash Newsflash akan menampilkan artikel secara acak dari kategori yang sudah ditentukan. Artikel ini akan ditampilkan secara sekilas sebagai headline pada halaman utama situs. Berikut ini langkah-langkah untuk membuat modul ini: 1. Pada toolbar klik Extensions>Module Manager. 2. Klik ‘New’, kemudian pilih ‘Newsflash’ dan ‘Next’. 3. Beri nama modul ini ‘Latest News’ dan pilih posisi ‘Top’ untuk menempatkannya di headline tepat di sebelah logo. Pilih kategori yang anda inginkan. Pada pilihan ‘Title Linkable’ dan ‘Article Title’ pilih ‘Yes’ agar judul artikel ditampilkan dan bila di-klik akan membawa pembaca ke artikel selengkapnya.
Gambar 3.3.6 Layar untuk mengatur modul newsflash
4. Klik ‘Save’ dan lihat hasilnya.
Gambar 3.3.7 Modul newsflash anda sudah ditampilkan
3.3.5 Breadcrumbs Semakin besar situs anda maka jumlah halamannya pun akan semakin banyak. Untuk memudahkan pengunjung menavigasi situs anda maka kita perlu menambahkan modul breadcrumbs. Dengan modul ini pengunjung akan mengetahui di bagian mana dari situs lokasinya saat ini.
28
Berikut langkah –langkah untuk membuat breadcrumbs: 1. Pada toolbar klik Extensions>Module Manager. 2. Klik ‘New’, kemudian pilih ‘Breadcrumbs’ dan ‘Next’. 3. Beri nama modul ini ‘Breadcrumbs’ dan atur posisinya juga di ‘breadcrumb’. Anda tidak perlu mengubah parameter lainnya. 4. Klik ‘Save’ dan lihat hasilnya.
Gambar 3.3.8 Dengan modul breadcrumbs pengunjung dapat mengetahui dengan pasti posisinya pada situs saat ini
Masih banyak modules lain yang fungsinya sudah dijelaskan satu persatu di atas. Anda dapat mencoba sendiri untuk mengaplikasikan modul mana yang anda rasa diperlukan untuk situs anda, karena secara garis besar cara untuk membuat modul-modul tersebut tidak jauh berbeda dari yang sudah kita bahas.
EVALUASI 1. Jelaskan apa yang dimaksud dengan category, article, dan section pada Joomla! 2. Jelaskan apa yang dimaksud dengan menu dan module pada Joomla! 3. Apa perbedaan syndicates dan breadcrumbs 4. Carilah situs yang dikembangkan dengan Joomla! di internet dan sebutkan bagian-bagian dari situs tersebut.
29
