Download - Modul Pelatihan Joomla! 1.5
IE Community For Smart and Better System
MODUL 1
PENGENALAN DAN INSTALASI JOOMLA! 1.5
1. Pengenalan Joomla!
Perkembangan dunia internet pada saat ini sangatlah pesat, hal ini semakin
didukung dengan kemudahan dalam membangun web bagi khalayak umum yang tidak
memiliki latar belakang pendidikan berbasis teknologi informasi. Salah sau web developer
yang sedang naik daun adalah Joomla!. Joomla! merupakan web berbasis content
management system (CMS) dan bersifat open source. Para pengembang Joomla! fokus pada
prinsip aplikasi gratis dan tidak ingin membuat sesuatu yang bersifat komersil. Istilah
Joomla! diambil dari bahasa Swahili yang berarti “all together” atau “as whole” atau
bersama-sama
Kamu mungkin bertanya apa itu open source ? Open source merupakan istilah dunia
komputer yang berarti kode sumber aplikasi dapat diakses, dilihat, dan dimodifikasi oleh
umum sesuai dengan aturan yang ditentukan. Open source tidak selalu bersifat gratis. Ada
kalanya kamu membayar untuk tetap dapat menggunakan aplikasi open source jika kamu
telah mencapai suatu titik yang telah disetujui dalam aturan yang telah ditentukan. Untuk
menggunakan Joomla! kamu tidak perlu membayar sepeser pun. Joomla! adalah gratis
Agar kamu dapat mengembangkan web karya sendiri, kamu bisa mengakses
beberapa situs diantaranya adalah Joomla.org, yang merupakan web resmi dari Joomla!.
Disana kamu dapat mengakses berita-berita terbaru mengenai Joomla! dan dan
mendownload aplikasi Joomla!. Jika kamu ingin berbagi ilmu atau selama pengembangan
web mengalami kendala, maka bisa bergabung ke dalam forum joomla.org, forum resmi
dari komunitas pengguna Joomla!.
Web yang menggunakan CMS Joomla!
http://www.jooma-id.com http://www.id-joomla.com http://www.ie.stttelkom.ac.id/forum http://www.batampos.co.id/ http://www.ngelamar.com/ http://www.resepmasakanku.com/
http://vespa-indonesia.com/
http://www.ansav.com/ http://naruto-store.com/
Dari penjelasan di atas bisa diketahui bahwa Joomla! sangat dibutuhkan oleh setip
pihak yang memiliki anggaran terbatas, tidak memiliki pengetahuan pemrogaraman dan
pengalaman desain yang cukup.
IE Community For Smart and Better System
2. Instalasi Joomla! 1.5
Untuk menjalankan CMS Joomla! ada beberapa aplikasi pendukung diantaranya :
a. VertrigoServ berfungsi sebagai web server yang akan menjalankan Joomla!. Versi
yang dipakai Vertrigo_220. Bisa didownload dari http://vertrigo.sourceforge.net
Ukuran filenya kira-kira 9,65 MB. Webserver yang lain XAMPP, WAMP, LAMP.
Dengan menggunakan webserver tersebut sangat membantu kita, karena sudah
satu paket untuk menjalankan aplikasi berbasis PHP dan MySql.
b. Web Browser yang dipakai Mozilla Firefox, bisa didownload di www.mozilla.com
c. Source Joomla! 1.5.2 Stable Package, bisa didownload dari www.joomla.org
Tahap Instalasi :
1. Pertama-tama kamu install dulu vertrigo-nya, kemudian mozilla, dan terakhir source
Joomla!. Pada saat instalasi maupun menjalankan vertrigo, apabila ada peringatan
Windows Security Alert, kamu klik Unblocking agar bisa jalan
2. Setelah selesai instalasi vertrigo, kamu jalanin aplikasi tersebut dengan mengklik “Hide This Window and Start Server”
3. Kemudian buatlah folder yang digunakan untuk menampung source Joomla! pada C:\Program Files\VertrigoServ\www, misal kamu beri nama foldernya “joomla” (tanpa tanda kutip)
IE Community For Smart and Better System
4. Ekstrak Source Joomla! dan arahkan ke folder “joomla”, pilih mode “extract file to”.
Tunggu beberapa saat, setelah selesai pastikan isi folder “joomla” : folder administrator, folder instalation, folder images, folder templates, index.php, dan seterusnya. Kalau belum seperti itu, berarti proses ekstraknya belum benar
5. Buka web browser kamu, pada address bar mozilla kita ketikkan “localhost”, untuk
mengecek apakah web server sudah aktif atau belum. Enter, dan akan keluar tampilan berikut ini jika vertrigo sudah diaktifkan atau dijalankan
6. Sekarang kita mulai tahap instalasi Joomla!, ketikkan pada address bar “localhost/joomla”, tampilan pertama yang akan muncul, pemilihan bahasa [Language] yang akan digunakan. Pilih defaultnya aja. Klik Next untuk melanjutkan. Akan muncul window [Pre-Instalation Check], klik Next, kemudian muncul window [License], biasanya kita gak pernah baca lisensi, langsung Next aja. Hehehe..
7. Window berikutnya, [Database Configuration], kita isi dengan cermat opsi ini
IE Community For Smart and Better System
Petunjuk pengisiannya :
Basic Settings
MySql Name : localhost
Username : root
Password : vertrigo
Database Name : latihan
Advanced Settings
Table Prefix : lth_
Karena kita menggunakan webserver vertrigo, maka kita mengisikan pada kolom passwordnya : vertrigo. Sedangkan pada XAMPP kita kosongkan, kondisi defaultnya memang kosong.
8. Selanjutnya, FTP Configuration berfungsi untuk menginisialisasi agar proses kustomisasi pada web joomla! lewat browser bisa dikenali oleh Linux sebagai root. Kalau instalasinya di localhost [komputer stand alone], ga perlu disetting. Cukup klik Next aja
Contoh pengaturan FTP Configuration : Misalkan “bluepoint” mempunyai space web di IE Server (10.14.206.2) dengan kapasitas 200MB, maka konfigurasinya sebagai berikut : FTP User : bluepoint FTP Password : ************* FTP : /home/bluepoint/web
9. Penulisan Nama Situs
Pada main configuration ini ada beberapa options, antara lain : Site Name : IRIS 2008 Your Email : isikan email kamu Admin Password : isikan password admin Confirm Admin Password : isikan password admin
IE Community For Smart and Better System
Install Default Sampel Data : untuk menginstall data sampel, bagi pemula hal ini sangat diperlukan, karena akan membantu dalam administrasi web joomla!.
Load Migration Script : opsi ini berfungsi jika kita akan melakukan migrasi dari joomla! 1.0 ke Joomla! 1.5. Script yang kita load ini berupa file database yang kita downlaod dari Joomla! 1.0
Peringatan yang keluar ketika kita tidak mengisikan Site Name.
Tandanya kita sudah sukses menginstall data sampel.
10. Remove Folder Instalation pada C:\Program Files\VertrigoServ\www\joomla
Akhirnya proses instalasi sudah berhasil. Perhatikan tulisan merah diatas, itu artinya kita harus menghapus folder instalation dari folder “joomla”, file ini mengandung informasi penting yang berkaitan dengan web joomla kita
11. Setelah kita hapus file tersebut, kita klik Site, maka akan muncul :
Ini adalah tampilan utama Joomla! 1.5 (Fronted/ bagian depan) dengan template
defaultnya yaitu rhuk_milkyway
IE Community For Smart and Better System
Sedangkan bagian diatas adalah bagian belakang (Backend)
12. The End
Administrasi Fronted dan Backend
Pada Joomla! ada dua konsep sistem yang harus dimengerti yaitu fronted dan backed, fronted
menampilkan hasil yang telah kita modifikasi dari backend. Sedangkan backend berfungsi untuk
administrasi komponen, modul, [extensions], plugin, dsb.
Fronted
Backend
Pada backend terdapat beberapa menu dibawah ini :
Penjelasan masing-masing Menu
1) Site
Control Panel berfungsi untuk menampilkan panel-panel yang lain seperti
user manager, article manager, media manager, dsb.
User Manager berfungsi untuk mengatur user, menamabah user,
delete, edit.
New : menambah user
Edit : mengedit user
Delete : menghapus user
Logout : keluar dari pengeditan user
IE Community For Smart and Better System
Jika kita klik New maka akan keluar :
Media Manger berfungsi untuk mengatur image
yang akan digunakan pada website.
Pada media manager terdapat beberapa folder yang didalamnya memuat image. Kita bisa
membuat folder dengan mengisikan nama folder pada kolom kanan atas dan klik “Create
Folder”
Browse Folder : untuk mencari file yang akan diupload.
Start Upload : untuk upload gambar ke server.
Global Configuration berfungsi untuk mengatur konfigurasi sistem.
Site
Site Offline : untuk mengatur disaat website kita lagi dimaentenance. Jadi ga bisa
diakses umum, kecuali admin. Dan akan muncul pesan yang kita set pada Offiline
Message.
System
IE Community For Smart and Better System
User settings : untuk mengijinkan apakah user bisa registrasi atau tidak, kemudian jika
user registrasi akan dimasukkan ke group apa, aktivasi , menampilkan parameter pada
user.
Media settings : mengijinkan tipe file yang bisa diupload, ukuran filenya, path untuk
menyimpan file, memperbolehkan upload atau ga
Session settings : lamanya waktu user tidak mengoperasikan website, jika kita set 15
menit, maka jika selama 15 menit user tidak melakukan aktifitas, secara otomatis logout
sendiri.
Server
Server settings : mengatur path folder joomla!.
Locale settings : mengatur waktu
FTP settings : mengatur konfigurasi FTP
IE Community For Smart and Better System
2) Menus
Menu manager
Untuk membuat menu, delet, edit, copy.
Menu Trash
>>> Main Menu
3) Content
Frontpage Manager
Untuk menampilkan konten yang ada pada halaman depan.
Kita bisa mengatur konten untuk bisa ditampilkan pada
halaman depan, pada saat kita mengedit atau membuat konten
baru. Pada bagian Frontpage kita cheklist
IE Community For Smart and Better System
Didalam pengaturan konten, ada opsi section,kategori dan konten itu sendiri.
4) Components
Untuk menampilkan komponen yang telah diinstall, administrasi
komponen, dsb.
Contoh : komponen polling
Pada komponen polling ini kita bisa mengatur konten atau isi
pollingnya.
Penjelasan lebih lanjut mengenai komponen akan dijelaskan pada bab sendiri.
5) Extensions
Section
Category Category Category
-content 1
-content…
-content 1
-content…
-content 1
-content…
IE Community For Smart and Better System
Install/Uninstall : untuk melakukan proses instalasi atau uninstall
Module Manager : administrasi modul
Plugin Manager : menampilkan plugin yang telah diinstall dan administrasi plugin
Tempate Manager : mengganti template dan administrasi template
Language Manager : memilih bahasa yang dipakai dalam Joomla!. Secara default :
Englih (United Kingdom)
Penjelasan lebih lanjut mengenai modul dan plugin akan dijelaskan pada bab sendiri.
6) Tools
Tools berfungsi untuk mengirimkan email ke user,
membersihkan chace, membaca email, dan mengecek Global In.
7) Help
Jika kita ada masalah, kesulitan, dll, kita bisa meminta bantuan dengan membaca help
Joomla!. Kemudian system info ini berfungsi untuk menampilkan info system. System ini
sangat berperan sekali dalam pengamanan system kita. Dari sini akan ditampilkan
informasi tentang server, php, configuration file, permission, setting php.
IE Community For Smart and Better System
MODUL 2
PENGELOLAAN KOMPONEN, MODUL DAN PLUGIN
KOMPONEN
1. Komponen FireBoard
Komponen ini berfungsi untuk membuat fitur forum pada Joomla!.
FireBoard Configuration
Fronted
IE Community For Smart and Better System
IE Community For Smart and Better System
IE Community For Smart and Better System
Peringatan
Ket : Apabila muncul kayak gini, baca peringatannya yach…..Biasanya kita harus mengatur
Writable dan Execution pada file tersebut.
2. Komponen DOCman
Komponen ini berfungsi untuk membuat link download, dengan adanya komponen ini
kita bisa mengupload file agar bisa didownload oleh user, kemudian kita bisa membatasi user
mana yang bisa download dan ga. Tampilan awal DOCman sebagai berikut :
Bagian Files
Untuk menampilkan file yang telah diupload. Untuk mengupload file, kamu bisa klik Upload.
Bagian Documents
IE Community For Smart and Better System
Untuk mengatur file yang ditampilkan pada halaman download [Fronted]. Misalkan kita sudah
mengupload file, namun belum membuat file lagi pada Documents, maka file itu tidak bisa
ditampilkan pada halaman fronted.
Bagian Categories
Untuk mengelompokkan documents berdasarkan kategori tertentu. Pengelompokkan ini
berfungsi untuk memudahkan user mencari file atau documents yang akan didownload.
DOCman Configuration
Untuk mengatur konfigurasi global pada DOCman. Misalnya mengganti folder tujuan
penyimpanan file yang diupload. Dibawah ini akan ditampilkan masing-masing tab dari
DOCman :
Ket : untuk mengatur tampilan fronted.
IE Community For Smart and Better System
Ket : untuk mengatur permissions.
Ket : untuk mengatur file-file yang akan diupload.
Ket : untuk mengatur security.
IE Community For Smart and Better System
3. Komponen Joomla Xplorer
Komponen ini berfungsi untuk meng-administrasi file-file pada joomla. Dengan
menggunakan komponen ini, user bisa mengedit file, menghapud, mendownload, mengupload,
mengekstrak file zip, chmod. Berikut ini tampilan secara umum fungsi tombol pada JX,
Keterangan :
1. Home : kembali ke tampilan default /awal.
2. Reload : meload perintah kembali. Biasanya perintah ini digunakan untuk melihat tampilan
yang baru saja diedit.
3. Search : untuk mencari file yang diinginkan. Misalnya mencari index.php, tinggal masukkin
pada kolom Search.
4. Joomla! System Information : untuk menampilkan informasi system pada joomla! yang kita
pakai. Misalnya PHP, MySql, dll.
5. Copy : perintah untuk meng-copy folder atau file.
6. Move : perintah untuk memindahkan file.
7. Delete : untuk menghapus file.
8. Chmod : mengganti kepemilikan file.
9. Upload : untuk mengupload file.
10. Archive : untuk membuat file arsip.
1 2 3 4 5 6 7 8 9 10
IE Community For Smart and Better System
Tampilan untuk upload file :
Tambahan :
1. Rename : untuk mengganti nama file.
2. Unzip : untuk mengekstrak file upload-an yang berbentuk zip.
4. Komponen Image Browser
Komponen ini berfungsi untuk menampilkan gambar atau gallery. Gambar-gambar yang
kita upload ini kita kelompokkan berdasarkan kategori untuk memudahkan pencarian gambar
oleh user.
Keterangan :
1. Untuk membuat folder, pada Create Folder ketikkan nama folder yang akan dibuat dan klik
Create
2. Kemudian kita juga bisa mengatur image, ukuran, file size, thumbnail.
3. Untuk mengatur konfigurasi global dari Image Browser, kamu bisa ngeklik Parameter
dibagian kanan atas. Bisa dilihat ss-nya dibawah ini :
IE Community For Smart and Better System
5. Komponen EasyBook
Berfungsi untuk membuat buku tamu atau guest book.
Ada 3 menu pada easybook
1. Manage Entries : untuk memanage inputan dari buku tamu. Jika terlalu banyak
entriesnya maka kita bisa mendeletenya, sehingga pada fronted komentar user hilang.
2. Badword Filter : untuk meyaring kata-kata yang tidak baik. Kita bisa mendefinisikan
sendiri kata-kata yang akan kita saring.
3. Help & Information : untuk meminta bantuan.
6. Community Builder
User Management : untuk memanage user.
Tab Management : untuk menampilkan tab pada user profile. Dengan menggunakan
tab ini,
Field Management : untuk menambah tab pada user. Sehingga kolom pada proses
registrasi user bisa ditambah dengan membuat tab sendiri. Misal kolom Gender, No. Hp,
dll. Cara pembuatan tab :
- Misalnya kita akan menambahkan kolom Blog pada proses registrasi user
- Klik “New Field”, maka isikan sebagai berikut
IE Community For Smart and Better System
Tampilan pada Fronted link Registration
- List Management : untuk menampilkan list user pada fronted. Cara pembuatannya
seperti ini :
Dibawah ini merupakan pengaturan item yang akan ditempilkan pada list Fronted.
Jenis user yang akan dilist
Diurutkan berdasarkan item
apada?
IE Community For Smart and Better System
Setelah proses pengaturan selesai, klik Save, kemudian kamu buka lagi maka pada
bagian URL for menu link to this list akan memunculkan link yang akan kamu gunakan
untuk menampilka hasil list yang telah kita buat. Exp :
index.php?option=com_comprofiler&task=usersList&listid=2
List ini kamu buat link pada Main Menu.
- Configuration : Berfungsi untuk mengatur konfigurasi CB. Hal yang pertama kali
kita lakukan setelah nginstall komponen. Kamu aktifkan bagian Configuration-nya.
MODUL
Hal-hal yang kita lakukan setelah instalasi modul :
1. Aktifkan modul tersebut dengan cara mencentang modul dan klik Enable
2. Klik nama modul, misal modul Main Menu, setelah itu akan muncul ke Module [Edit],
Keterangan :
- Menu Assignment berfungsi untuk mengetur modula agar hanya bisa ditampilkan
pada item tertentu.
- Position berfungsi untuk menempatkan posisi modul. Ada top, left, bottom, dll
- Access level berfungsi untuk menetapkan user mana saja yang bisa mengakses
modul tersebut.
3. Klik save untuk mengakhiri pengeditan.
NB : Sebagian besar modul, proses pengaturannya sesuai petunjuk diatas.
IE Community For Smart and Better System
PLUGIN
Berfungsi untuk memberikan tambahan pada konten, template, dll, sehingga akan menjadikan
website kita lebih bagus untuk dilihat.
1. Setelah instalasi plugin, contoh Plugin Xtypo, yaitu modul untuk konten
2. Klik item tersebut, maka akan muncuk petunjuk penggunaan Xtypo tersebut.
3. Dari petunjuk tersebut, untuk menambah tampilan konten agar seperti xtypo info,
maka kita akan menambahkan script - {xtypo_info} isi info {/xtypo_info} - pada artikel atau
konten yang lainnya.
4. Contoh hasilnya setelah dimasukkan pada konten :
Sebelum :
IE Community For Smart and Better System
Sesudah :
IE Community For Smart and Better System
MODUL 3
BACKUP, RESTORE, UPLOAD
Setelah kita melakukan instalasi dan konfigurasi Joomla! di localhost, selanjutnya kita akan
mengupload web kita ke SERVER HOSTING, agar bisa diakses oleh orang lain. Diinternet
ada banyak server hosting yang gratisan, misalnya www.byethost.com,
www.freehostia.com, dll. Untuk me-redirect alamat yang diberikan oleh server hostingan
yang gratisan, contoh joomla.byethost.com, futur.freehostia.com, kita bisa memanfaatkan
domain gratisan juga. Maksud dari domain ini adalah untuk me-redirect web kita agar
nama web yang kita punya bisa dinamai sesuai keinginan kita. Denaan domain gratisan ini,
kamu bisa mendaftarkan web kamu yang ada di freehostia, misalnya kamu namai
semangat.co.nr. Jadi sekarang kamu ga perlu mengakses futur.freehostia.com lagi, karena
sudah punya nama baru semangat.co.nr yang akan langsung me-redirect ke
future.freehostia.com
Domain gratisan : co.nr, cjb.net, co.cc, .tk
Hosting gratisan : www.freehostia.com, www.byethost.com , www.000webs.com ,
www.freewebs.com
Domain berbayar : .net, .com, .web.id, .org, .or.id, .ac.id,
Hosting berbaar : www.freehostia.com, www.byethost.com , www.plikhost.com ,
www.dreamhost.com
Proses Backup
1. Untuk mengupload web kita ke server dibutuhkan folder web “joomla” dan file
configuration.php, database MyAql
2. Backup database, caranya sebagai berikut :
- Akses http://localhost/phpmyadmin
- Pilih file database dengan nama : latihan, prefiknya lth_, kemudian pilih Export
IE Community For Smart and Better System
- Pilih type exportnya SQL,
- Cheklist pada Save as File, isi nama databasenya. Penamaannya bebas tidak ada
ketentuan apapun.
- Langkah terakhir klik GO
3. Proses backup selesai.
Contoh file configuration.php
<?php
class JConfig {
/* Site Settings */
var $offline = '0';
var $offline_message = 'This site is down for maintenance.<br /> Please check
back again soon.';
var $sitename = 'IRIS 2008';
var $editor = 'tinymce';
var $list_limit = '20';
var $legacy = '0';
/* Debug Settings */
var $debug = '0';
var $debug_lang = '0';
/* Database Settings */
var $dbtype = 'mysql';
var $host = 'localhost';
var $user = 'root';
var $password = 'vertrigo';
var $db = 'iris';
var $dbprefix = 'iris_';
/* Server Settings */
var $live_site = '';
var $secret = '435dfk5iSuGyo6R2';
var $gzip = '0';
var $error_reporting = '-1';
var $helpurl = 'http://help.joomla.org';
var $xmlrpc_server = '0';
var $ftp_host = '127.0.0.1';
var $ftp_port = '21';
var $ftp_user = '';
var $ftp_pass = '';
var $ftp_root = '';
var $ftp_enable = '0';
IE Community For Smart and Better System
/* Locale Settings */
var $offset = '0';
var $offset_user = '0';
/* Mail Settings */
var $mailer = 'mail';
var $mailfrom = '[email protected]';
var $fromname = 'IRIS 2008';
var $sendmail = '/usr/sbin/sendmail';
var $smtpauth = '0';
var $smtpuser = '';
var $smtppass = '';
var $smtphost = 'localhost';
/* Cache Settings */
var $caching = '0';
var $cachetime = '15';
var $cache_handler = 'file';
/* Meta Settings */
var $MetaDesc = 'Joomla! - the dynamic portal engine and content management
system';
var $MetaKeys = 'joomla, Joomla';
var $MetaTitle = '1';
var $MetaAuthor = '1';
/* SEO Settings */
var $sef = '0';
var $sef_rewrite = '0';
var $sef_suffix = '0';
/* Feed Settings */
var $feed_limit = 10;
var $log_path = 'C:\\Program Files\\VertrigoServ\\www\\joomla\\logs';
var $tmp_path = 'C:\\Program Files\\VertrigoServ\\www\\joomla\\tmp';
/* Session Setting */
var $lifetime = '15';
var $session_handler = 'database';
}
?>
?>
BEST PRACTICE
Pada bagian terakhir ini, kita akan mempraktikan ilmu Joomla! yang telah kita pelajari sebelumnya. Yaitu upload ke Server Industria Engineering IT Telkom dengan alamat IP Adddress 10.14.206.2, letak server Gedung C depan Lab. Gambar Teknik. Informasi space web :
Server : IE Server
Username : setiawan
Password : ***************
Path : /home/setiawan/latihan
IE Community For Smart and Better System
Untuk mengupload folder web kita membutuhkan tools winSCP yaitu tool yang berfungsi
untuk meremote server, ftp server, upload file, download file. Bisa didownload di IEFILE.
Tampilan awal winSCP :
Langkah upload :
1. Klik New isikan
Hostname : 10.14.206.2
Username : setiawan
Password : **********
Port : ****
2. Klik login >>> web >>>> iris
3. Upload folder web dan file configuration.php
4. Import database ke www.ie.stttelkom.ac.id/*************
5. Sekarang buka file konfigurasi dan editlah sehingga menjadi sepert i ini :
var $user = 'setiawan';
var $password = '[censored]';
var $ftp_root = '/home/setiawan/web/iris';
var $log_path = '/home/setiawan/web/iris/logs';
var $tmp_path = '/home/setiawan/web/iris/tmp';
6. Selesai. Sekarang kamu bisa melihat hasil web yang telah kamu upload dengan
mengakses www.ie.stttelkom.ac.id/setiawan/iris