Modul Joomla

2009 JOSC-Udinus Jawa Tengah OpenSource Community

[PEMKAB KENDAL] JOSC-Udinus | Modul Pelatihan CMS Joomla

1

BAB 1 Pengenalan Joomla

Joomla adalah salah satu Content Management System (CMS) yang dibuat menggunakan bahasa pemrograman PHP. CMS adalah perangkat lunak yang digunakan untuk membangun web dinamis secara mudah, tanpa harus menguasai bahasa pemrograman dan Database Management System (DBMS) tertentu. Seperti namanya, CMS dapat membangun sebuah web hanya dengan mengatur konten (isi) tanpa meluangkan waktu untuk belajar PHP, meskipun jika telah menguasai bahasa pemrograman tersebut akan sangat membantu. Konten merupakan inti dari semua website, konten juga adalah alasan utama pengunjung mengakses sebuah website. Tampilan website sebaik apapun dengan animasi semewah bagaimanapun akan ditinggalkan pengunjungnya jika tidak diimbangi dengan konten yang bermutu. CMS memberikan keleluasaan administrator untuk lebih berkonsentrasi pada konten website dan sejenak melupakan keperluan teknis pemrograman.

Gambar 1: Tampilan Halaman Admin Joomla 1.5

Ada banyak sekali jenis CMS yang tersedia dan siap untuk digunakan untuk membangun website, antara lain Mambo, PHPNuke, PostNuke, dan tentu saja Joomla. Salah satu yang paling banyak digunakan adalah Joomla, karena mempunyai banyak kelebihan antara lain:  Penggunaannya mudah  Banyak plugin yang tersedia JOSC-Udinus | Modul Pelatihan CMS Joomla

2

Pelatihan Joomla Pemkab Kendal 2009  Dukungan forum dan komunitas  Tersedia dalam berbagai bahasa (termasuk Indonesia)  Fasilitas tempat sampah seperti recycle bin  Template tampilan yang mudah diganti

Pada saat tutorial ini dibuat, Joomla telah mencapai versi 1.5. Dibandingkan sebelumnya, terdapat perubahan-perubahan yang cukup signifikan pada versi ini, diantaranya adalah tampilan halaman administrator yang lebih segar. Selain itu juga ada pilihan antara mengaktifkan RichEditor dan menonaktifkannya untuk keleluasaan pengguna. Penyempurnaan yang lain adalah pada tampilan preview template yang dapat menampilkan bagian-bagian yang ada pada template, juga telah dilengkapi editor untuk beberapa berkas CSS sekaligus. Selain itu, Joomla 1.5 juga telah mendukung teknologi web terbaru seperti Atom 1.0, RSS 2.0, dan juga dukungan terhadap XML-RPC.

JOSC-Udinus | Modul Pelatihan CMS Joomla

3

BAB 2 Upload dan Instalasi

Upload ke web hosting dengan FileZilla 90% orang belajar menggunakan Joomla menggunakan webserver yang diinstal secara lokal di komputer (atau laptop) standalone, meski demikian pada saat implementasi 90% CMS Joomla dijalankan pada webhosting luar baik yang gratisan maupun yang berbayar. Sebab itulah sebelum kita mulai belajar menginstall Joomla, ada baiknya kita juga belajar mengupload file-file Joomla ke dalam webhosting. Hampir semua webhosting baik yang gratisan maupun berbayar telah menyediakan CPanel yang dilengkapi dengan FileManager untuk mengupload file ke server web hosting tersebut. Namun dengan menggunakan FileManager tersebut sangat lambat dan kurang efektif, karena harus mengupload file satu persatu, sedangkan file CMS Joomla berjumlah ribuan. Untuk itu kita perlu menggunakan perangkat lunak khusus untuk menguploadkan banyak file sekaligus. Salah satu yang dapat digunakan dengan mudah, handal, dan gratis adalah FileZilla, perangkat lunak sumber terbuka yang merupakan produk dari FileZilla-Project.

Gambar 2: Tampilan Antarmuka FileZilla

Cara penggunaan FileZilla cukup mudah hampir seperti windows explorer, hanya saja karena berkas yang dikirimkan adalah melalui jaringan, sehingga memerlukan jeda waktu setelah JOSC-Udinus | Modul Pelatihan CMS Joomla

4

Pelatihan Joomla Pemkab Kendal 2009 mengirimkan tergantung dengan kecepatan jaringan (atau bandwith internet) itu sendiri. Lebih jelasnya cara mengirimkan file melaui FTP menggunakan FileZilla adalah sebagai berikut: 1. Tentukan koneksi yang tepat dengan mengisikan alamat host (bisa berupa IP atau

alamat DNS seperti www.joomla.com), username FTP, password, dan juga port yang digunakan untuk FTP (opsional). Ketiga informasi tersebut bisa didapat dari web hosting yang kita gunakan. Kemudian tekan tombol Quickconnect.

Gambar 3: Form Koneksi FTP pada FileZilla

2. Setelah FileZilla berhasil mendapatkan struktur direktori yang kemudian ditampilkan

pada file explorer di sebelah kanan, berarti kita sudah siap untuk mengupload file yang kita inginkan. Sebelumnya pilih terlebih dahulu folder yang berisi file-file yang akan kita upload, kemudian pada local site file explorer pilih semua file yang akan diupload, klik kanan dan pilih menu upload.

Local site file explorer

Remote site file explorer

Gambar 4: File & Folder Explorer pada FileZilla

3. Di bagian bawah Queued Files menunjukkan proses upload pada tiap file, jumlah file

dan juga nama tiap file yang sedang mengantri untuk diupload. Di sampingnya Failed Transafer File menunjukkan file yang gagal diupload, untuk mengulangi upload pada file tersebut melalui klik kanan dan pilih Reset dan requeued selected files. Dan yang

JOSC-Udinus | Modul Pelatihan CMS Joomla

5

Pelatihan Joomla Pemkab Kendal 2009 terakhir adalah Successfull Transfer yang menunjukkan informasi file yang telah berhasil di upload.

Gambar 5: Status File Upload pada FileZilla

FileZilla hanya mampu mengupload file ke dalam server pada webhosting, dan tidak dapat digunakan untuk mengupload baik yang berbentuk binary file, maupun yang berbentuk file query (*.sql). Untuk mengupload database local yang telah kita buat ke dalam database server kita bisa menggunakan PHPMyAdmin, perangkat administrasi database MySQL berbasis web, seperti yang akan sedikit disinggung pada bagian selanjutnya.

Instalasi Joomla Setelah berhasil mengupload file Joomla ke dalam server web hosting, atau juga bisa berarti meng-copy-kan file ke dalam folder Server_Root yang ada pada server lokal, kita siap melakukan aksi selanjutnya, yaitu menginstall Joomla. Sebelum menginstall Joomla, tentu saja yang dilakukan adalah mendapatkan paket instalasi Joomla, dapat di download di website resminya www.joomla.org atau juga bisa meng-copy punya teman . Paket instalasi ini berbentuk *.zip, untuk bisa menjalankannya anda harus mengekstraknya terlebih dahulu ke dalam direktori web server, bila anda menggunakan XAMPP seperti saya maka itu berarti anda bisa mengekstrak joomla ke dalam folder htdocs. Untuk mempermudah akses dan agar tidak tumpang tindih dengan web yang sudah ada, kita bisa membuat direktori baru terlebih dahulu di dalam contoh ini saya membuat direktori "joomla_site". Namun bila Joomla adalah satusatunya website yang anda kerjakan pada web server tersebut, anda tidak perlu membuat folder baru.

JOSC-Udinus | Modul Pelatihan CMS Joomla

6

Pelatihan Joomla Pemkab Kendal 2009 Joomla menggunakan database MySQL untuk menyimpan konten dan konfigurasi website, sebab itulah sebelum melanjutkan instalasi website joomla kita perlu membuat database khusus agar dapat digunakan oleh Joomla. Kalau anda menggunakan localhost, anda bisa menggunakan PHPMyAdmin untuk membuat database "joom_database" (nama bisa variatif), sedangkan pada web hosting anda bisa menggunakan MySQL Manager untuk membuat Database.

Gambar 6: Membuat database pada phpMyAdmin

Setelah semua persiapan selesai baru kita bisa memulai instalasi Joomla. Kita asumsikan sedang menginstal joomla pada localhost dan file joomla ada pada direktori joomla_site, maka yang kita lakukan adalah memanggilnya melalui browser dengan mengetikkan http://localhost/joomla_site, maka akan muncul tampilan seperti di bawah ini.

Gambar 7: Tampilan pertama instalasi Joomla

JOSC-Udinus | Modul Pelatihan CMS Joomla

7

Pelatihan Joomla Pemkab Kendal 2009 Pilih salah satu bahasa (biasanya dan direkomendasikan menggunakan bahasa inggris), kemudian klik saja tombol Next untuk melanjutkan instalasi hingga muncul tampilan seperti di bawah ini.

Gambar 8: Precheck technical requirement oleh Joomla

Yang dijalankan pada bagian kedua ini adalah check kebutuhan teknis secara otomatis oleh joomla, jika kebutuhan tidak terpenuhi Joomla tidak mengizinkan untuk melanjutkan instalasi. Untuk setting rekomendasi, meskipun ada yang tidak memenuhi joomla tetap mengijinkan untuk menjalankan, karena hanya bersifat rekomendasi.

Gambar 9: Tampilan Lisensi GPL

Joomla menggunakan lisensi publik di bawah General Public License (GPL) seperti kebanyakan produk open source software lainnya. Itulah yang ditunjukkan pada tahap ketiga ini. Bila anda merasa perlu untuk membacanya silahkan berhenti sejenak untuk membacanya, namun bila anda tidak punya waktu kita hanya cukup waktu Joomla boleh JOSC-Udinus | Modul Pelatihan CMS Joomla

8

Pelatihan Joomla Pemkab Kendal 2009 diedarkan secara bebas tanpa harus membayar royalti, bahkan juga boleh dimodifikasi dan diedarkan kembali tanpa harus membayar royalti. Kemudian lanjutkan pada tahap selanjutnya.

Gambar 10: Koneksi dengan database MySQL

Pada konfigurasi database, pertama pengguna diperbolehkan untuk memilih jenis database yang dipakai pilih saja MySQL. Sedangkan untuk hostname 90% pilihan yang tepat digunakan adalah localhost, bahkan ketika anda menggunakan database pada hosting server. Pada isian username dan password, kita bisa mengisikan nama pengguna dan password database yang digunakan (ingat username dan password database bukan login windows ataupun login web hosting). Selanjutnya yang terakhir adalah nama database yang digunakan untuk Joomla.

Gambar 11: Pengaturan FTP

Kalau anda menggunakan localhost, anda bisa langsung melewati tahap ini, namun bila anda menggunakan server pada web hosting, konfigurasi FTP akan sangat membantu perawatan website. FTP username, password, dan host bisa anda dapatkan pada CPanel web hosting yang anda gunakan. JOSC-Udinus | Modul Pelatihan CMS Joomla

9

Pelatihan Joomla Pemkab Kendal 2009

Gambar 12: Pengaturan situs dan login administrator

Tahap selanjutnya adalah mengatur nama situs dan password administrator yang digunakan untuk login halaman admin. Di bawahnya kita bisa menginstal sampel data yang sangat membantu pemula untuk mengetahui gambaran seperti apakah kira-kira susunan website standard, namun bagi kita yang sudah terbiasa membangun website sampel data ini mungkin sedikit mengganggu karena harus menghapus datanya untuk diganti dengan yang baru, milik kita sendiri. Klik lagi next, dan anda selesai menginstall joomla. Tahap selanjutnya adalah menghapus file instalasi untuk mencegah website anda diinstall ulang oleh orang yang kurang bertanggung jawab. Seperti yang ditunjukkan di bawah ini.

Gambar 13: Tampilan instalasi berhasil

JOSC-Udinus | Modul Pelatihan CMS Joomla

10

BAB 3 Section, Category, dan Article

Gambar 13: Struktur konten default Joomla

Jika kita menginstall sampel data, secara otomatis kita mengisi website Joomla pertama dengan konten yang mempunyai struktur sebagaimana gambar di atas. Terlihat pada gambar di atas, Joomla mengorganisasikan konten menjadi beberapa bagian untuk mempermudah pengaturan yaitu sections, categories, dan articles. Satu section bisa mempunyai beberapa category, dan satu category terdiri dari beberapa article, ini adalah dasar pengaturan konten yang harus diketahui. Sebagai tips pembuatan website, untuk mengorganisasikan website secara lebih baik dan terencana dengan rapi, kita dapat menggunakan teknik top down, yaitu mengatur section dan category terlebih dahulu baru kemudian membuat artikel untuk masing-masing category. Daripada membuat artikel terlebih dahulu, mengaturnya ke dalam uncategorized (tidak terkategori) kemudian baru mengaturnya kembali ke dalam category dan section tertentu yang dibuat lebih akhir.

JOSC-Udinus | Modul Pelatihan CMS Joomla

11

Pelatihan Joomla Pemkab Kendal 2009 Pengaturan Section Ada dua cara untuk membuat (dan mengatur) section dalam halaman administrasi joomla, yaitu menggunakan icon Section Manager, atau juga dapat melalui menu Content  Section Manager. Keduanya akan membuka halaman pengaturan section.

Gambar 14: Tampilan Section Manager

Untuk menambahkan section baru, kita dapat mengklik tombol New, sedangkan untuk memperbaharui (mengedit) section yang sudah ada bisa dengan mengklik tombol Edit. Seteleh menekan tombol tersebut, halaman admin akan berubah ke tampilan formulir section seperti di bawah ini.

Gambar 15: Tampilan Formulir section

Title: judul dari section. Alias: id khusus yang dapat dipahami oleh joomla. Published: untuk menetapkan apakah akan ditampilkan atau tidak. Order: menentukan urutan tampilan dari section. Access level: untuk menentukan siapa saja yang bisa mengakses section ini. JOSC-Udinus | Modul Pelatihan CMS Joomla

12

Pelatihan Joomla Pemkab Kendal 2009 Image: menentukan gambar yang ditampilkan pada website saat section ini dipanggil, gambar yang dipilih sebelumnya harus sudah diupload melalui media (akan dibahas nanti). Image Position: posisi dari gambar yang telah dipilih sebelumnya. Description: untuk memberikan keterangan tentang section yang dibuat

Pengaturan Category Hampir sama seperti pengaturan section, Category Manager dapat diakses melalui icon yang ada ada control panel atau juga dapat melalui menu Content  Category Manager. Kedua cara tersebut, akan membuka halaman category manager, kemudian melalui halaman tersebut kita bisa membuka halaman formulir category seperti di bawah ini.

Gambar 15: Tampilan Formulir category

Tampilan yang sama seperti pada formulir section, dengan tambahan inputan section untuk mengelompokkan beberapa kategori ke dalam salah satu section.

Pengaturan Article Section dan category adalah pengelompokan konten untuk mempermudah pengaturan, sedangkan isi dari website sebenarnya adalah pada article. Untuk membuat article baru ada tiga cara yang dapat digunakan yaitu seperti biasanya mengklik Icon Article Manager dan juga menu Content  Article Manager, kemudian pada halaman article manager dapat mengklik icon New Article. Atau bila anda menganggap terlalu lama, anda bisa langsung JOSC-Udinus | Modul Pelatihan CMS Joomla

13

Pelatihan Joomla Pemkab Kendal 2009 mengklik icon Add New Article pada Control Panel. Ketiga cara tersebut akan memunculkan formulir article seperti di bawah ini.

Gambar 15: Tampilan Formulir category

Seperti pada category ada inputan Title, Alias, Section, dan Published. Selain itu juga ada tambahan Front Page yang digunakan untuk menentukan apakah artikel tersebut akan ditampilkan pada halaman depan atau tidak, dan juga tambahan Category yang akan muncul secara otomatis bila dipilih salah satu section. Saat ditampilkan pada halaman depan, kita seringkali melihat artikel yang tidak ditampilkan seluruhnya hanya sebagian saja dan diikuti tulisan "read more". Pada Joomla kita bisa membuat seperti itu dengan mengklik tombol "read more" yang ada di bawah kotak inputan isi artikel. Setelah mengklik tombol tersebut akan muncul garis merah yang memisahkan ringkasan tulisan yang muncul di halaman depan dan tulisan lengkap artikel tersebut. Selain inputan tersebut, ada lagi inputan parameter untuk artikel tersebut. Ada tiga inputan parameter yang berada di samping kanan yaitu Parameters – Article, Parameters-Advanced, dan Metadata Information. Sebagai dasarnya yang perlu diketahui adalah ParametersArticle. Author: penulis artikel yang secara otomatis didapatkan dari login sebelumnya. Author Alias: jika nama login anda bukan nama asli, anda bisa menggunakan nama alias untuk menuliskan nama asli anda. Access Level: menentukan siapa saja yang dapat membaca artikel tersebut. Created Date: menentukan tanggal pembuatan artikel (default tanggal penulisan artikel). JOSC-Udinus | Modul Pelatihan CMS Joomla

14

Pelatihan Joomla Pemkab Kendal 2009 Start Publishing: kita bisa menentukan kapan artikel yang dibuat akan diterbitkan melalui inputan ini (default tanggal penulisan artikel), misalkan kita ingin membuat artikel yang secara otomatis diterbitkan pada tahun baru, kita bisa menentukannya di sini. Finish Publishing: kebalikan dari Start Publishing, digunakan untuk menset kapan artikel tidak diterbitkan kembali (default never/tidak pernah).

Latihan Buat struktur website seperti di bawah ini, kemudian isikan dua artikel yang relevan untuk tiap kategorinya.

JOSC-Udinus | Modul Pelatihan CMS Joomla

15

BAB 4 Konfigurasi Website dan Menu

Konten adalah hal yang paling penting dalam website, namun bukan satu-satunya hal penting yang harus diatur dengan baik oleh administrator. Pengaturan yang tidak kalah pentingnya adalah pengaturan konfigurasi website itu sendiri dan juga pengaturan menu, untuk memastikan pengunjung tidak akan kebingungan apalagi sampai tersesat melihat website kita.

Global Configuration Merupakan pengaturan utama website kita. Dalam pengaturan umum ini ada tiga sub menu yaitu Site, System, dan Server. Ketiganya akan kita bahasa secara berurutan dengan singkat pada beberapa bagian yang penting diketahui saja.

Gambar 16: Tampilan konfigurasi situs

Site Offline: menentukan apakah situs ini akan ditampilkan sebagai offline (tidak aktif). Offline Message: jika situs sedang dalam keadaan tidak aktif maka pesan yang dimunculkan dapat ditulis di sini. JOSC-Udinus | Modul Pelatihan CMS Joomla

16

Pelatihan Joomla Pemkab Kendal 2009 Site Name: untuk menuliskan nama situs (untuk mengganti konfigurasi pada saat install). Default WYSIWYG Editor: saat menuliskan konten secara default anda menggunakan Rich Editor dari TinyMCE, bila anda lebih suka tampilan editor kosongan, anda bisa menggantinya menjadi "no editor" Global Site Meta Description: deskripsi dari situs anda yang tidak dapat dilihat oleh pengunjung namun akan dibaca mesin pencari. Global Site Meta Keywords: kata kunci yang digunakan mesin pencari untuk mengenali website anda. Search Engine Friendly URLs: mengatur apakah URL website anda mudah terbaca oleh mesin pencari atau tidak.

Gambar 17: Tampilan konfigurasi sistem

Allow User Regisration: mengijinkan pengunjung untuk mendaftar menjadi anggota. New User Registration Type: menentukan tipe keanggotaan default untuk pengunjung yang mendaftar sebagai anggota. New User Account Activation: menentukan untuk mengirim email aktivasi pada pengunjung yang mendaftar sebagai anggota. Front-end User Parameters: jika diaktifkan, pengguna dapat memilih bahasa, editor, dan beberapa parameter lain saat login pada front-end.

JOSC-Udinus | Modul Pelatihan CMS Joomla

17

Pelatihan Joomla Pemkab Kendal 2009 User Manager User Manager digunakan untuk mengatur anggota yang dapat masuk ke dalam halaman administrasi. Jika anda mengaktifkan Allow User Registration pada konfigurasi umum, pengunjung dapat mendaftar menjadi pengguna di sini, namun jika anda menonaktifkannya (untuk alasan keamanan atau privatisasi), pengguna hanya dapat dibuat melalui icon New pada user manager ini. Adapun formulir user pada halaman administrasi adalah seperti gambar di bawah ini.

Gambar 18: Tampilan formulir pengguna

Name: nama asli pengguna Username: nama pengguna untuk identifikasi joomla. E-mail: surat elektronik pengguna. New Password: password baru untuk login. Verify Password: untuk memastikan password yang dimasukkan sebelumnya tepat. Group: menentukan jenis pengguna yang dibuat. Block User: terkadang ada pengguna yang telah mendaftar dan melakukan beberapa kesalahan fatal, kita bisa memblok pengguna pengguna tersebut menggunakan menu ini. User Editor: menentukan tipe editor yang cocok untuk pengguna tertentu, untuk beberapa orang mungkin no editor membuat mereka lebih leluasa. Time Zone: menentukan zona waktu yang digunakan oleh masing-masing pengguna.

JOSC-Udinus | Modul Pelatihan CMS Joomla

18

Pelatihan Joomla Pemkab Kendal 2009 Media Manager Bila ingin menggunakan suatu gambar (atau berkas multimedia lain) pada website, kita perlu mengupload gambar tersebut terlebih dahulu. Cara uploadnya dapat menggunakan pengaturan media yang pada Joomla versi 1.5 sudah terintegrasi dengan editor konten. Tampilan media manager adalah seperti di bawah ini.

Gambar 19: Tampilan media manager

Kita bisa membuat folder baru dengan menggunakan inputan Create Folder yang berada di atas kotak browser file, dan juga mengupload gambar baru dengan mengklik inputan browse di bawah browser file.

Menu Manager Pengaturan menu merupakan salah satu hal yang sangat penting pada pembuatan website, Joomla menyediakan menu manager khusus untuk mengatur menu dan submenu tampilan depan. Kita bisa mengakses menu manager melalui Menus  Menu Manager yang terdapat di atas, atau juga bisa melalui icon Menu Manager. Kedua cara tersebut akan menampilkan Menu Manager dengan tampilan seperti di bawah ini.

JOSC-Udinus | Modul Pelatihan CMS Joomla

19

Pelatihan Joomla Pemkab Kendal 2009

Gambar 20: Tampilan menu manager

Yang ditampilkan pada Menu Manager adalah kelompok menu yang didalamnya tersimpan beberapa menu lagi, bukan semua menu yang ada. Begitu juga bila mengklik icon New, yang dibuat adalah kelompok menu baru yang bisa diisikan beberapa menu, bukan menambahkan menu baru. Sedangkan untuk menambahkan menu pada kelompok menu tersebut, kita bisa mengklik icon yang ada pada kolom Menu Item(s), kemudian akan memunculkan halaman Menu Item Manager seperti tampilan di bawah ini.

Gambar 21: Tampilan menu item manager

Untuk menentukan tampil tidaknya item menu tersebut pada halaman front end, kita bisa mengklik icon yang ada pada kolom published. Sedangkan untuk menentukan menu default, kita bisa mencek salah satu item menu untuk memilih item menu tersebut, kemudian mengklik icon Default yang ada diatas. Menu default adalah item menu yang akan otomatis JOSC-Udinus | Modul Pelatihan CMS Joomla

20

Pelatihan Joomla Pemkab Kendal 2009 diakses ketika website pertama kali dibuka, dan hanya boleh ada satu menu default untuk keseluruhan menu dan item menu website. Untuk menambahkan item menu, kita bisa mengklik icon New untuk memunculkan form menu, namun sebelumnya joomla akan menampilkan Menu Item manager untuk memilih tujuan menu yang kita buat secara visual. Setelah kita memilih salah satu menu item, baru form menu akan tampil seperti yang terlihat pada gambar di bawah ini.

Gambar 22: Tampilan form menu item

Title: judul menu yang ditampilkan. Alias: judul menu yang dikenal joomla. Link: target tautan yang akan dibukan menu (tidak bisa dirubah). Display in: memilih kategori menu. Parent menu: memilih menu induk, bila tidak punya menu induk pilih "Top". Published: memilih menerbitkan menu atau tidak Selain inputan tersebut, jika kita ingin mengubah target dari menu tersebut, dapat mengklik tombol Change Type yang berada di atas kemudian kembali memilih target link secara visual melalui Menu Item Manager.

JOSC-Udinus | Modul Pelatihan CMS Joomla

21

BAB 5 Extension dan Template

Selain penggunaanya yang mudah, ada satu lagi kelebihan Joomla yang menjadi alasan orang banyak menggunakannya yaitu kelengkapan extension dan template yang mudah di ganti. Kita bisa menemukan banyak sekali extension dan template di internet, baik di situs resmi joomla maupun situs luar, extension ini membuat website kita mempunyai fasilitas khusus seperti buku tamu, galeri foto, embed video, live chat, embed google maps, dan lain sebagainya. Namun perlu diketahui, meskipun Joomla 100% gratis, tidak semua extension yang tersedia dapat digunakan gratis, ada yang bertipe komersial dan non komersial.

Extension Ada tiga jenis extension dalam Joomla yaitu Module, Component, dan Plugin. Plugin merupakan extension paling lengkap, menyediakan tampilan dan juga pengaturan pada sisi admin, bahkan beberapa plugin mempunyai pengaturan yang sama kompleksnya dengan pengaturan joomla. Kedua dan ketiga adalah Component dan Module yang merupakan tambahan pada tampilan baik halaman admin dan frontpage. Module merupakan extension paling sederhana, module menampilkan tampilan khusus seperti banner, artikel dan lain sebagainya. Sedangkan Component hampir seperti module namun mempunyai pengaturan yang lebih kompleks. Entah kenapa, tidak seperti sebelumnya, menu extension dan template tidak ditampilkan pada icon control panel seperti menu yang lain, sebagai gantinya, kita bisa mengaksesnya melalui menu extension yang berada di atas, ada lima sub menu yang ada pada menu ini, yaitu install/uninstall, module manager, plugin manager, template manager, dan language manager.

Install/Uninstall Digunakan untuk memasang extension baru atau menghapus extension yang sudah ada, menu inilah merupakan sentral pemasangan dan pencabuutan semua extension dalam JOSC-Udinus | Modul Pelatihan CMS Joomla

22

Pelatihan Joomla Pemkab Kendal 2009 joomla. Di dalamnya terdapat enam menu lagi yaitu install yang berfungsi untuk mengupload dan memasang extension baru, serta kelima menu lainnya yaitu components, modules, plugins, templates, dan languages, digunakan untuk mencabut (uninstall) extension yang sudah terpasang.

Gambar 23: Install/Uninstall extension

Module Manager Digunakan untuk mengakses semua module yang terpasang, baik itu modul untuk Site frontpage, maupun untuk Administrator. Tampilan ini digunakan untuk menentukan aktif atau tidaknya suatu module, juga melalui tampilan ini kita dapat menentukan urutan tampilan masing-masing modul. Tampilan dari module manager seperti di bawah ini.

Gambar 24: Tampilan module manager

Untuk mengaktifkan modul, kita bisa mengklik icon yang ada pada kolom Enabled, kemudian untuk menentukan urutan tampilan, kita bisa mengubah angka yang ada pada kolom Order. JOSC-Udinus | Modul Pelatihan CMS Joomla

23

Pelatihan Joomla Pemkab Kendal 2009 Sedangkan untuk pengaturan yang lain, kita bisa mengklik pada nama masing-masing modulnya, dan akan memunculkan formulir sebagai berikut.

Gambar 25: Tampilan formulir modul

Title: nama modul yang ditampilkan pada module manager. Show Title: menampilkan nama modul pada widget front page. Enabled: mengaktifkan atau non-aktif modul. Position: mengatur posisi modul berdasarkan area pada template. Access Level: mengatur siapa saja yang dapat mengakses modul. Menu Assignment: mengatur pada menu apa saja modul tersebut tampil. Sedangkan untuk pengaturan parameter tidak akan kita bahas, karena tiap modul mempunyai pengaturan yang berbeda.

Plugin Manager Hampir sama seperti module manager, plugin manager dapat digunakan untuk menetukan aktif tidaknya sebuah plugin, kemudian juga menentukan urutan tampilan. Beberapa plugin yang memerlukan pengaturan khusus jika sudah terpasang maka otomatis plugin tersebut menambahkan submenu pada menu component. Lebih lengkapnya plugin akan dibahas pada bab selanjutnya.

JOSC-Udinus | Modul Pelatihan CMS Joomla

24

Pelatihan Joomla Pemkab Kendal 2009 Template Manager Dengan Joomla kita bisa mengubah-ubah tampilan dengan pengaturan template yang sudah disediakan, sebelum dapat mengubah template tentu saja yang dilakukan adalah menginstall template tersebut melalui menu Extension  Install/Uninstall. Kemudian untuk mengatur template yang sudah terpasang kita bisa menggunakan Template Manager yang dapat diakses melalui menu Extension  Template Manager.

Gambar 26: Tampilan template manager

Ada dua sub tampilan dalam Template Manager ini, yaitu Site yang menampilkan semua template yang terinstall untuk tampilan front end, dan Administrator yang menampilkan semua template yang terinstall untuk tampilan back end.

Gambar 27: Tampilan template edit

JOSC-Udinus | Modul Pelatihan CMS Joomla

25

Pelatihan Joomla Pemkab Kendal 2009 Jika kita ingin memilih sebuah template menjadi template default, kita bisa memilih salah satu template, kemudian mengklik icon Default. Template yang terdapat icon bintang berarti template tersebut menjadi icon default saat ini. Sedangkan untuk mengatur parameter, atau mengubah template, kita bisa mengklik pada link nama template, selanjutnya joomla akan membuka tampilan Edit Template seperti di atas. Terlihat pada Gambar 27, kita bisa menggunakan tampilan yang berbeda untuk beberapa menu tertentu, misalkan untuk tampilan buku tamu, kita ingin menggunakan template berwarna biru, namun untuk defaultnya kita menggunakan warna putih. Kita bisa mengaturnya pada Menu Assignment dengan mengganti pilihan pada "Select from List" dan memilih menu yang ingin kita terapkan template tersebut. Selain inputan yang telah dijelaskan di atas ada juga pilihan parameter yang berubah-ubah inputanyya, sesuai dengan template yang akan kita gunakan. Sedangkan pada icon di atas juga terdapat tombol yang digunakan untuk mengedit template. Preview: menampilkan contoh pra-tampil template dengan keterangan kelompok tampilan Edit HTML: mengubah kode HTML yang digunakan pada template tersebut Edit CSS: mengubah kode CSS yang digunakan pada template.

Gambar 27: Tampilan preview template

JOSC-Udinus | Modul Pelatihan CMS Joomla

26

BAB 6 Pembuatan Buku Tamu dan Galeri Foto

Bab ini merupakan salah satu implementasi dari bab selanjutnya, yaitu penggunaan extension untuk mempercanggih website kita. Saat ini yang kita terapkan di sini adalah yang paling banyak digunakan pada website umumnya yaitu buku tamu dan galeri foto.

Buku Tamu Buku tamu adalah salah satu media yang paling mudah digunakan untuk interakasi pengunjung dan pengelola website, dengan menggunakan buku tamu, pengguna dapat memberikan komentar mengenai website tersebut secara langsung. Ada yang perlu diperhatikan dalam pembuatan buku tamu, mengingat begitu mudahnya pengunjung menuliskan sesuatu ke dalam buku tamu, perlu dibuat semacam filter yang mencegah pengunjung menuliskan kata yang tidak semestinya.

Gambar 20: Contoh buku tamu

Kali ini yang digunakan untuk membuat buku tamu pada Joomla adalah EasyBook, component yang mudah digunakan dan juga dapat dikostumisasi sesuai kebutuhan. Selain itu EasyBook juga mempunyai filter badword yang bisa digunakan untuk menyaring katakata kotor yang ditulis pengguna. Berikut adalah langkah-langkah instalasinya. JOSC-Udinus | Modul Pelatihan CMS Joomla

27

Pelatihan Joomla Pemkab Kendal 2009 1. Masuk ke dalam menu Extension  Instal/Uninstall

2. Klik browse dan cari file instalasi easybook (saat ini yang saya gunakan nama filenya "com_easybook_2.0_rc4_valid.zip"). 3. Klik upload file & install Bila berhasil akan ada konfirmasi easybook berhasil dipasang, selain itu juga dalam menu Component akan ada satu submenu dengan nama easybook. Selanjutnya yang perlu kita lakukan adalah mengubah setting easybook agar dapat digunakan sesuai dengan keinginan kita. Langkah-langkahnya sebagai berikut.

Gambar 21: Tampilan atas EasyBook Manager

1. Klik menu Components  EasyBook  Manage Entries. 2. Selanjutnya klik icon Parameters di bagian atas sebelah kanan.

3. Setelah muncul tampilan konfigurasi parameter, kita bisa menuliskan kata-kata pembukaan misalkan "Mohon mengisi buku tamu". 4. Jangan lupa untuk memastikan Allow smilies, automatic word wrapping, IP logging,

show e-mail field, require e-mail, Show web site field, Publish new entries, dan Badword filter dalam pilihan "yes" (atau "show"). 5. Untuk pilihan Group for adding an entry juga pastikan bernilai "Everybody" agar

semua pengunjung dapat menuliskan komentar di buku tamu. 6. Setelah selesai, tekan tombol Save.

Gambar 22: Parameter pada EasyBook

JOSC-Udinus | Modul Pelatihan CMS Joomla

28

Pelatihan Joomla Pemkab Kendal 2009 Selanjutnya adalah membuat menu pada kategori menu utama agar halaman buku tamu dapat diakses oleh pengunjung. Langkah-langkahnya adalah sebagai berikut. 1. Klik menu Menus  Main Menu. 2. Kemudian klik icon New untuk menambahkan menu baru 3. Pada Select Menu Type, klik pada Easy Book, tunggu bentar dan akan muncul sub

menu Standard layout, klik pada sub menu tersebut. 4. Selanjutnya form menu akan muncul, isikan "Buku Tamu" pada Title dan "buku-

tamu" pada Alias. 5. Sebelum menyimpannya, klik pada Parameters (Component) untuk menampilkan

isian parameter. 6. Kemudian pada Group for adding an entry pilih nilai "Everybody". 7. Setelah selasai baru klik icon Save di bagian atas.

Gambar 23: Form menu untuk menambahkan menu Buku Tamu

Selesai tugas terakhir untuk memasang buku tamu dan menampilkannya pada halaman front page. Hasilnya bisa anda lihat pada halaman utama website. Untuk menuliskan komentar baru pada buku tamu, kita bisa mengklik Sign guestbook. Setelah berhasil membuat buku tamu, kita akan membuat yang sedikit lebih kompleks, yaitu foto galeri dengan menggunakan plugin JoomGalery.

JOSC-Udinus | Modul Pelatihan CMS Joomla

29

Pelatihan Joomla Pemkab Kendal 2009 Foto Galeri Terkadang kita ingin menampilkan kumpulan foto yang terkategori ke dalam website, bisa saja kita memasukkannya menggunakan artikel seperti kebanyakan blog yang (memaksa) menampilkan galeri foto. Namun selain tampilannya kurang bagus, juga lebih sulit untuk mengupload dan mengupdate album.

Gambar 24: Contoh Galeri Foto pada Joomla

Joomla mempunyai banyak plugin yang bisa digunakan untuk membuat galeri foto, salah satunya yang banyak dipakai adalah JoomGalery. Langkah instalasinya cukup mudah, konfigurasinya juga tidak terlalu sulit. Berikut adalah langkah-langkahnya. 1. Seperti biasa install terlebih dahulu dengan Install/Uninstall manager file instalasi JoomGalery (yang saya gunakan JOOMGALERY_1_5_0_2.zip).

Gambar 25: Instalasi JoomGalery

2. Setelah berhasil, seharusnya kita sudah bisa mengakses menu JoomGalery baru pada

menu Component. JOSC-Udinus | Modul Pelatihan CMS Joomla

30

Pelatihan Joomla Pemkab Kendal 2009 3. Pertama buat kategori album pada Category Manager. 4. Klik icon New, kemudian ketikkan Title, Parent Category, dan Description. Pastikan

Access bernilai "public", dan Published bernilai "Yes". Kemudian Save.

Gambar 26: Form Category

5. Untuk mengupload gambar, kita menggunakan pilihan Picture Upload untuk upload

secara langsung, Batch Upload untuk mengupload gambar dalam file *.zip, FTP Upload untuk mengupload gambar yang telah diupload sebelumnya melalui FTP, dan terakhir Java Upload untuk cara upload yang lebih modern dengan Java.

Gambar 27: Form Picture Upload

JOSC-Udinus | Modul Pelatihan CMS Joomla

31

Pelatihan Joomla Pemkab Kendal 2009 6. Setelah berhasil menguploadnya, kita baru bisa mengatur propertinya melalui

Picture Manager. 7. Pada picture manager, kita bisa menginputkan Title, Description, dan juga Author.

Dan jika ingin menghapus semua voting pada foto, kita bisa mencek pilihan clear all votes.

Gambar 28: Tampilan Picture Manager

Selain pengaturan di atas, masih ada banyak pengaturan lain, seperti pengaturan voting, pengaturan komentar, pengaturan CSS, dan pengaturan konfigurasi. Namun kesemuanya itu tidak akan dipelajari saat ini karena terlalu banyak. Yang perlu diperhatikan adalah pada menu Configuration Manager  General Settings  Paths and Directories, pastikan semua path yang ada pada konfigurasi tersebut dapat ditulisi (writeable). Jika belum bisa ditulisi, kita perlu mengaturnya melalui CPanel web hosting, dan mengesetnya menjadi chmod 766. Selanjutnya adalah membuat menu agar galeri foto kita dapat dibuka oleh pengunjung. Caranya sama seperti waktu kita membuat menu untuk buku tamu, yaitu dengan melalui Menu manager. Lebih jelas, langkahnya adalah sebagai berikut.

JOSC-Udinus | Modul Pelatihan CMS Joomla

32

BAB 7 Personalisasi Template Joomla

Bab ini merupakan bab yang sangat berbeda dari sebelumnya, bila pada bab sebelumnya kita lebih banyak berurusan dengan tampilan grafis dari halaman administrator Joomla, pada bab ini kita akan banyak (melakukan pekerjaan istilah gaulnya "mengotori tangan" dengan) menulis kode pemrograman HTML, CSS, dan sedikit XML serta PHP.

HTML, CSS, dan XML Kurang tepat kalau ketiganya dikatakan bahasa pemrograman, karena tidak mampu melakukan operasi logika maupun aritmatika apapun, dengan ketiganya kita tidak akan bisa melakukan perhitungan 1 + 1 = 2. Istilah bahasa pemrograman hanya untuk memudahkan orang awam agar bisa memahami yang akan dilakukan selanjutnya adalah penulisan kodekode yang tidak sering ditemui pada kehidupan sehari-hari, seperti layaknya menuliskan kode pemrograman. HTML (HyperText Markup Language) merupakan suatu bahasa yang digunakan untuk membuat tampilan tertentu pada halaman website, yang di dalamnya terdapat dua bagian inti, yaitu bagian Head dan Body. Bagian Head digunakan untuk menuliskan elemen-elemen dan juga deskripsi yang tidak tampak pada tampilan website, sedangkan bagian Body digunakan untuk menuliskan elemen yang akan ditampilkan pada halaman website.

Gambar 29: Contoh penulisan kode HTML Sederhana

CSS (Cascading Style Sheet) adalah bahasa yang digunakan untuk mengatur properti pada elemen-elemen HTML sehingga bisa terlihat lebih bagus. Contoh properti yang diatur adalah JOSC-Udinus | Modul Pelatihan CMS Joomla

33

Pelatihan Joomla Pemkab Kendal 2009 warna, warna latar, typografi, posisi, ukuran, dan lain sebagainya. CSS biasanya (dan lebih baiknya) ditulis dalam file tersendiri, kemudian pada file HTML dipanggil pada bagian Head. Pada CSS terdapat selector yang digunakan untuk memilih elemen HTML yang diatur propertinya dan pengaturan properti sendiri.

Gambar 30: Contoh penulisan kode CSS Sederhana

XML (eXtensible Markup Language) merupakan bahasa yang digunakan untuk mendifinisikan data. Dengan menggunakan metode penulisan yang hampir sama seperti HTML, namun kode-kode yang digunakan dapat didefinisikan sendiri oleh kita, membuat XML mudah dibaca oleh manusia dan juga mudah diterjemahkan oleh komputer (mesin).

Gambar 31: Contoh penulisan kode XML Sederhana

Dalam pembuatan template Joomla, HTML dan CSS digunakan untuk mendisain tampilan sebaik mungkin (kadang-kadang juga diperlukan JavaScript untuk menambahkan animasi). Sedangkan XML digunakan untuk mendefiniskan bagian-bagian yang ada pada template, sehingga dapat digunakan untuk berinteraksi dengan konten Joomla yang lain.

JOSC-Udinus | Modul Pelatihan CMS Joomla

34

Pelatihan Joomla Pemkab Kendal 2009 Costumisasi Template Joomla Awalnya pada bab terakhir penulis berencana untuk mengajarkan cara membuat template sendiri menggunakan Joomla, tapi untuk mengajarkan itu semua dari Nol sampai Akhir diperlukan waktu yang cukup lama dan juga referensi yang cukup banyak. Sehingga penulis memustukan untuk mengubah target bab ini lebih mudah, lebih aplikatif, namun tepat dapat digunakan untuk personalisasi website. Pada bab ini kita tidak akan membuat template dari nol, namun kita akan mengubah dari template yang sudah ada sehingga tampak seperti buatan kita sendiri, atau paling tidak lebih berbeda dari template aslinya. Untuk keperluan tersebut, kita akan menggunakan template gratisan dari Siteground yang tampilan aslinya seperti dibawah ini.

Gambar 32: Tampilan awal template dari Siteground

Mungkin kita tidak akan banyak merubah tata letak tampilan tersebut, tapi hanya mengubah beberapa warna dan gambar sehingga sesuai dengan yang kita inginkan untuk situs kita sendiri. Karena bersifat gratisan, kita tidak perlu khawatir merubahnya bahkan mendistribusikannya kembali. Agar kita dapat langsung melihat hasilnya, kita perlu menginstallnya terlebih dahulu pada website Joomla kita yang sudah ada isinya. Caranya seperti instalasi extension yang lain, melalui menu Extension  Install/Uninstall. Selanjutnya pilih file siteground-j15-35.zip, dan klik Upload File & Install. Sedikit intermezo. Meskipun Joomla telah menyediakan perangkat editor HTML dan CSS, penulis sendiri lebih nyaman menggunakan program editor khusus, karena fitur syntax highligter dan juga code foldingnya sangat membantu penulisan kode. Namun mungkin itu JOSC-Udinus | Modul Pelatihan CMS Joomla

35

Pelatihan Joomla Pemkab Kendal 2009 tidak akan efektif jika kita telah mengupload website ke dalam web hosting. Nyaman atau tidaknya menggunakan editor adalah tergantung kebiasaan dan keadaan, jadi anda juga bebas memilih editor apa yang akan anda gunakan. Hanya saja yang penulis gunakan saat membuat tutorial ini adalah Notepad++, editor gratisan yang mempunyai fitur cukup lengkap, dan mengedit file yang ada di komputer lokal. Untuk mengubah tampilan template tersebut, mengakses file HTML (istilah dalam template Joomla) yang juga adalah file bernama index.php pada folder Template/siteground-j15-35. Ini merupakan elemen-elemen tampilan yang belum diberikan properti tampilan sama sekali. Adapun

pengaturan tampilannya ada pada file css bernama Template.css yang

terletak pada folder Template/siteground-j15-35/css. Untuk lebih mempermudah buka saja kedua file tersebut untuk diedit secara langsung. Percobaan pertama kita adalah mengubah warna background menjadi hijau muda, untuk itu lihatlah petika kode HTML pada file index.php di bawah ini.

Gambar 33: Petikan kode Index.php

Pada gambar di atas, amati baris ke 14, terdapat kode . Itu adalah kode HTML yang digunakan untuk memberikan identitas pada elemen, sehingga nantinya lebih mudah diatur warnanya pada kode CSS. Sekarang kita berpindah ke file template.css, kita cari kode "page_bg" (untuk lebih mudahnya gunakan saja fasilitas search). Kita akan mendapatinya pada baris ke 100, dan gambar lengkapnya seperti di bawah ini.

Gambar 34: Petikan kode template.css

JOSC-Udinus | Modul Pelatihan CMS Joomla

36

Pelatihan Joomla Pemkab Kendal 2009 Kemudian untuk merubah warna dari elemen page_bg menjadi hijau muda, ubahlah nilai background yang semula "#FFF" menjadi "#88ff88" (jangan hilangkan karakter ";"). Simpan dan lihat hasilnya pada website kita, lihat kita telah berhasil mengubah warna latar menjadi hijau muda, dan siap untuk melakukan perubahan lainya. Selanjutnya kita akan mengganti gambar yang ada pada Header dengan gambar yang lebih cocok dengan latar belakangnya. Tidak terlalu sulit untuk mengubahnya (jika anda sudah menguasai photo editor seperti PhotoShop atau GIMP), tinggal mengganti file header.jpg yang berada pada folder template/siteground-j15-35/images dengan gambar yang baru. Yang perlu diperhatikan adalah, agar layoutnya tidak berubah, kita harus menggunakan gambar dengan ukuran yang sama, baik panjang dan lebarnya.

Gambar 35: gambar header setelah diganti

Oke, sudah berhasil mengganti gambar header. Tapi bahkan saya yang bukan desainer grafis pun tahu, ada yang tidak beres dengan judul situsnya, tulisan judul situs kurang kontras dan juga posisinya kurang tepat. Berarti pekerjaan kita selanjutnya adalah mengaturnya supaya tepat dengan latar belakangnya. Kembali ke gambar 33, sekarang perhatikan pada baris ke 17. Terlihat ada variabel Joomla yang digunakan untuk menampilkan nama situs dan dimasukkan kedalam container

---

Related Documents

---

More Documents from ""