You are on page 1of 28

MEMBUAT WEBSITE DINAMIS MENGGUNAKAN JOOMLA 1.

Sudah menjadi sesuatu yang lumrah bagi instansi, perusahaan ataupun badan usaha memiliki
website termasuk sekolah. Website merupakan sebuah media yang sangat efektif untuk menjelaskan
tentang sebuah instansi ataupun sebuah organisasi ke seluruh penjuru dunia. Artinya informasi yang
disajikan dengan menggunakan website adalah informasi yang sifatnya global. Dimana, semua bisa
mengakses informasi tersebut.
Untuk membuat website, diperlukan beberapa pengetahuan khusus tentang teknologi – teknologi
yang harus dikuasai. Diantaranya :
• HTML
• Pemrograman WEB (PHP, JSP, ASP, dll).
• Database
• Client Side Programming (Javascript, VBScript, dll)
• Desain Grafis ( Photoshop, Corel, dll)
• Software untuk layout (Dreamweaver, Microsoft Frontpage, dll)
Kesimpulannya, banyak hal yang harus kita ketahui sebelum membuat sebuah website. Kemudian
yang menjadi pertanyaaan adalah : BISAKAH SAYA MEMPUNYAI / MEMBUAT WEBSITE
TANPA HARUS MENGUASAI YANG DISEBUTKAN DI ATAS ?
Jawabannya tentu saja BISA. Kenapa tidak ? Karena, ada sekolompok orang /komunitas yang
berbaik hati membuatkan website untuk kita dan mendistribusikannya secara free1 jadi tugas kita
adalah mengganti isi, gambar dan tampilan website tersebut sesuai dengan kebutuhan. Akan lebih
baik lagi jika kita memiliki pengetahuan tentang teknologi di atas. Tetapi, jika tidakpun tidak
masalah..

CMS (Content Management System)


CMS merupakan solusi website yang sudah jadi yang bisa dimodifikasi sesuai dengan kebutuhan.
Baik itu gambar, content dan lain sebagainya. Singkatnya, CMS memungkinkan kita
mempunyai/mengelola website tanpa harus memiliki pengetahuan teknis tentang pembuatan
website.

1 Free artinya adalah bebas, bukan gratis. Makna free lebih mengacu pada kebebasan. Kebebasan mengembangkan,
kebebasan menggunakan untuk kepentingan apa saja dan kebebasan mendistribusikan tanpa diharuskan membayar
lisensi. Kebebasan mendistribusikan inilah yang membuat kata free menjadi gratis (pemaknaan secara tidak
langsung). Tapi sekali lagi, Free bukan gratis tapi bebas

© 2008 Inixindo Jogja Version 1.0


Ada banyak CMS yang beredar saat ini. Salah satunya adalah Joomla!. Joomla adalah salah satu
CMS yang cukup terkenal dan banyak digunakan di internet. Pada pembahasan kali ini, kita akan
membuat website sekolah berbasis CMS Joomla!

1. Joomla! CMS
Joomla adalah salah satu dari sekian banyak CMS yang ada saat ini. Daftar CMS yang ada
saat ini dapat di lihat di http://www.opensourcecms.com/. Saat ini Joomla! Adalah salah
CMS yang paling banyak digunakan. Tetapi secara umum, pada dasarnya, CMS mempunyai
karakteristik yang sama. Bersifat modular artinya modul dapat diinstall terpisah, kemudian
template juga dapat diinstall terpisah, dan semestinya, modul, componen, template dan lain
– lain banyak tersedia di internet.

2. Installasi Joomla
Untuk menginstall Joomla! Langkahnya sangatlah mudah. Pertama download joomla dari
situs resmi joomla. Http://www.joomla.org setelah mendapatkan file tersebut copy dan
extract di Document Root. Jika kita menggunakan XAMPP, maka lokasi document root
adalah di c:\program files\xampp\htodcs. Setelah mengcopy dan mengextract, rubah nama
folder yang merupakan hasil extract tersebut menjadi sebuah nama yang mudah diingat dan
mudah ditulis. Setelah itu, silahkan buka webbrowser (disarankan menggunakan mozilla
firefox yang telah diinstall add ons Web Developer). Kemudian buka URL : http://localhost/
namadiretori akan tampil halaman seperti di bawah ini :

Tampilan di atas adalah tampilan untuk menginstallasi Joomla kita bisa memilih bahasa apa
yang akan kita gunakan untuk proses installasi tesedia banyak pilihan bahasa. Disarankan

© 2008 Inixindo Jogja Version 1.0


menggunakan English UK. Pilih bahasa pada bagian Select Language setelah klik Tombol
Next yang ada di sebelah kanan atas.

Gambar di atas menunjukkan tentang kebutuhan yang harus dipenuhi untuk menginstall
Joomla!. Pastikan semua bertanda Yes berwarna hijau. Kemudian klik Tombol Next

halaman di atas adalah keterangan tentangj lisensi Joomla!. Sebaiknya dibaca secara
seksama untuk mengetahui tentang aturan main penggunaan sofware Joomla! Ini. Untuk
melanjutkan proses Installasi, Klik Next.
Proses berikutnya adalah configurasi database. Untuk melewati tahapan ini, kita terlebih
dahulu harus membuat database yang berfungsi untuk menyimpan segala informasi yang
dibutuhkan oleh Joomla!.
Database yang akan digunakan adalah database MySQL. Oleh karena itu, kita harus
membuat database baru pada database MySQL yang sebelumnya seharusnya sudah terinstall
(Database MySQL sudah termasuk dalam paket Installasi XAMPP).
Untuk membuat database, buka web browser baru kemudian buka URL sbb :http://localhost/

© 2008 Inixindo Jogja Version 1.0


phpmyadmin maka akan tampil halaman seperti di bawah ini :

untuk membuat database baru, isikan nama database. Misal : websmu kemudian klilk
tombol Create. Setelah membuat database, kembali lagi ke halaman installasi Joomla
kemudian isikan informasi – informasi sebagai berikut :

Database Type : MySQL


Hostname : localhost
Username : root
passsword : (kosong. Tidak diisikan)
Database Name : websmu (sesuai dengan nama database yang telah dibuat sebelumnya)

Setelah mengisikan infomasi tersebut di atas dengan benar, klik Next untuk melanjutkan
proses installasi

© 2008 Inixindo Jogja Version 1.0


Gambar di atas adalah konfiguasi FTP. Konfigurasi ini tidak perlu di rubah. Klik next untuk
melanjutkan installasi.

Halaman di atas adalah konfigurasi utama website. Ada beberapa informasi penting yang
harus diisi.
• Site Name
Site name adalah nama website yang akan kita buat. Misal : Situs Resmi SMK Negeri 3
Mataram
• Your Email
E-mail address yang akan menjadi penanggung jawab website tersebut (webmaster).
Segala informasi yang berkaitan dengan perubahan, installasi dan sebagainya akan

© 2008 Inixindo Jogja Version 1.0


dikirimkan ke emial ini. Misal : firman@inixindojogja.com.
• Admin Password
Password administrator yang akan ditanyakan ketika akan melakukan administrasi
website. Gunakan password yang mudah diingat tapi tidak mudah ditebak oleh orang
lain. Misal : s3CreT, LoV3@d#151ght, dan seterusnya. Password yang baik adalah
terdiri dari minimal 6 karakter, terdiri dari huruf besar dan huruf kecil dan angka serta
karakter asterik. Jangan gunakan nama panggilan, tanggal lahir, nama istri, nama pacar
dst.
• Confirm Admin Password :
Konfirmasi password yang telah diisikan sebelumnya. Untuk memastikan password
yang akan digunakan.

Jangan lupa untuk mengklik tombol Install Sample Data. Kemudian klik tombol next untu
melanjutkan

Jika tampil halaman seperti di atas, artinya proses installasi Joomla! Sudah berhasil. Sebagai
langkah terakhir adalah kita harus menghapus atau merename direktori installastion yang
berada di dalam direktori yang telah kita extract sebelumnya. Untuk melihat hasilnya, klik
tombol Site. Jika tidak ada yang salah, maka akan tampil halaman seperti di bawah ini :

© 2008 Inixindo Jogja Version 1.0


Joomla terdiri dari 2 bagian. Bagian pertama adalah untuk pengunjung. Dimana semua
orang dapat melihat konten yang disediakan. Sedangkan bagian yang lain adalah bagian
adminstrator. Dimana di bagian ini tidak semua orang bisa masuk. Bagian administrator
adalah bagaian dimana semua content, tampilan, dan semua yang ditampilkan pada halaman
user, diatur. Untuk masuk ke halaman administrator dapat dilakukan dengan membuka
webbrowser baru kemudian membuka URL sebagai berikut :
http://localhost/websmu/administrator
atau dengan menggunakan link yang ada pada halaman depan.

Isikan username dengan admin dan password sesuai dengan password administrator pada

© 2008 Inixindo Jogja Version 1.0


proses installasi kemudian klik Login akan tampil halaman seperti di bawah ini :

Halaman di atas adalah halaman depan untuk administrator. Dari sinilah administrator dapat
melakukan administrasi website.

3. Management Content
Content di joomla dikelompokkan menjadi beberapa kelompok section dan category.
Dimana dalam sebuah section terdiri dari beberapa category dan content haruslah diikutkan
dalam salah satu kategory. Berikut ini adalah ilustrasi yang menggambarkan hirarki section,
kategory dan content items.

Sections

Cagegory Category Category

Content items Content items Content items

• Membuat Sections
Untuk membuat section baru dapat dilakukan melalui menu Content > Section
Manager

© 2008 Inixindo Jogja Version 1.0


Halaman di atas adalah section manager dimana section dapat diatur. Baik itu
penambahan baru, penghapusan section, edit, delete, publish ataupun unpublish. Untuk
membuat section baru, klik icon New. Akan tampil halaman seperti di bawah ini :

Isikan Title dengan nama section.misal : Prodi. Isikan alias sama dengan title atau
dikosongkan saja. Pastikan Published pada posisi Yes. Kemudian Access Level pilih
Public. Untuk menyimpan, klik tombol Save atau untuk menyimpan dan melanjutkan
pengeditan klik Apply

• Membuat Category
Untuk membuat category baru, dapat dilakukan menggunakan menu Contents >
Category Manager.

© 2008 Inixindo Jogja Version 1.0


Klik icon New untuk membuat category baru. Akan tampil halaman seperti di bawah
ini :

Isikan Title dengan nama kategori yang diinginkan. Misal : Elektronika Komunikasi.
Alias dapat juga diisi sama dengan Title atau dikosongkan saja. Pastikan Published
dipilih Yes. Pada bagian Sections pilih section yang baru saja dibuat. Misal : Prodi. Klik
Save untuk menyimpan atau Apply untuk menyimpan dan melanjutkan pengeditan.
Buatlah beberapa kategory lagi dengan cara yang sama.

• Membuat Content.
Content adalah tulisan atau artikel yang menjelaskan tetang sesuatu. Baik itu berita,
profil dan sebagainya. Untuk membuat content baru, dapat dilakukan melalui menu
Content > Article Manager.

Untuk membuat artikel baru, klik New maka akan tampil halaman seperti di bawah ini :

© 2008 Inixindo Jogja Version 1.0


Isikan Title dengan judul artikel. Alias adalah judul alternatif. Boleh diisikan sama tapi
bisa juga dikosongkan. Pilih section prodi dan category yang diinginkan. Kemudian
buatkan berita pada teks editor yang telah disediakan. Untuk membuat artikel
ditampilkan sebagian, dan akan muncul link readmore untuk melihat selengkapnya,
letakkan cursor pada teks yang akan dipisah. Kemudian klik tombol Readmore pada
bagian bawah editor. Untuk menyimpan artikel, klik Save atau klik Apply untuk
menyimpan dan melanjutkan penulisan artikel

4. Management Menu.
CMS memang didisain full costumizable termasuk menu. Menu – menu yang sudah ada
adalah contoh – contoh menu yang disediakan ketika pertama kali Joomla! Di install. Menu
– menu tersebut dapat di tambahkan, dapat ditampilkan / dihilangkan.
Pada saat awal instalasi, joomla terdiri dari beberapa kelompok menu.
● Top menu
Menu bagian atas yang terletak di bagian atas halaman
● Main Menu
Menu Utama yang adal di sebelah kiri halaman
● Other Menu
Menu tambahan
● User Menu
Menu yang hanya tampil ketika user login.

© 2008 Inixindo Jogja Version 1.0


● Resource Menu
Menu Tambahan
● Key Concept
Menu Tambahan.
Setiap kelompok menu adalah sebuah modul. Dimana sebuah modul dapat diaktifkan, dan di
non aktifkan dan bahkan bisa dihapus serta bisa juga untuk ditambahkan.
Untuk menambahkan kelompok menu baru, dapat dilakukan melalui menu Menus > Menu
Manager.

Untuk membuat menu baru, klik New, kemudian akan tampil halaman seperti di bawah ini :

Isikan Unique Name dengan nama menu misal Program Studi.Isikan Title dengan judul
menu. Title ini akan tampil di halaman sebagai judul kelompok menu. Description
menjelaskan tentang menu atau keterangan singkat. Isikan sesuai dengan deskripsi menu.
Module title adalah nama modul. Ingat setiap kelompok menu adalah module. Klik Save
untuk menyimpan.

© 2008 Inixindo Jogja Version 1.0


Mengaktifkan menu
Setelah membuat kelompok menu, menu tersebut tidak langsung akan ditampilkan di
halaman. Karena statusnya masih Disable. Untuk mengubah statusnya menjadi Enable,
haruslah diaktifkan terlebih dahulu melalui menu Extension > Module Manager. Maka
akan tampil halaman sbb :

Untuk mengaktifkan, klik pada Item Program Studi untuk mengedit modul tersebut. Maka
akan tampil halaman seperti di bawah ini :

Pilih Yes pada pilihan Enabled. Untuk membuat tampilan menu sesuai dengan menu yang
sudah ada pada bagian Advanced Parameter isikan _menu pada kolom isian Module
Class Suffix. Klik Save untuk menyimpan.

Menambahkan Menu Item


Setelah membuat kelompok menu, berikutnya adalah menambahkan menu item yang
nantinya akan menampilkan artikel yang ada dalam salah satu kategory ataupun section.
Untuk membuat menu items, dari menu Menus > Program Studi. Maka akan tampil
halaman seperti di bawah ini :

© 2008 Inixindo Jogja Version 1.0


Klik New untuk membuat menu Item baru. Maka akan tampil halaman seperti di bawah ini :

Menu item yang dibuat adalah menu yang akan menampilakan blog aratikel sebuah kategori.
Pada pilihan Select Menu Item Type. Klik Article > Category Blog Layout. Kemudian
akan tampil halaman yang akan menampilkan pilihan category.

Pilih kategori pada Kolom pilihan Category. Kemudian Isikan judul Menu pada kolom isian
Title Misal : Elektronika Komunikasi. Klik Save untuk menyimpan.

© 2008 Inixindo Jogja Version 1.0


5. Installasi dan Modifikasi Template
Joomla! Memungkinkan kita mengganti tampilan halaman depan website dengan mudah dan
sangat cepat. Yang membuat lebih membahagiakan lagi adalah template untuk joomla!
Tersedia banyak sekali di internet dan gratis. Pada saat installasi pertama kali, Joomla!
Sudah menyediakan dua buah template. Untuk menambahkan template baru, dapat di
download di situs yang menyediakan template. Misalnya siteground.com, joomlahack dan
seterusnya.
Untuk menginstall template baru, dari menu Extensions > Install/Uninstall kemudian akan
tampil halaman seperti di bawah ini :

Ada beberapa pilihan sumber installasi. Muladi dari file lokal yang sudah kita download
sebelumnya ataupun yang sudah diextract di rekeltori, ataupun link dari internet. Untuk
menginstall dari file lokal, klik browse, kemudian pilih file yang merupakan template
joomla. Kemudian klik Upload File & Install. Jika Tampil pesan Install Template
Success . Artinya prose installasi sudah berhasil. Untuk mengaktifkan template tersebut,
dapat dilakukan melalui menu Extensions > Template Manager akan tampil halaman
seperti di bawah ini :

Untuk memilih template yang akan digunakan, klik radio button pada nama template yang
baru di install, kemudian klik icon Default. Untuk melihat hasilnya silahkan refresh
halaman depan.

© 2008 Inixindo Jogja Version 1.0


6. Upload Joomla! Ke Internet

Ada beberapa langkah yang harus dilakukan untuk mengupload file ke server hosting di
internet.

1. Backup Database.
Untuk membackup database, dapat dilakukan dengan menggunkaan program phpmyadmin.
Untuk membuka program phpmyadmin, dapat dilakukan dengan cara membuka web
browser(Internet explorer, Mozilla Firefox, dll) dengan alamat URL sbb :
http://localhost/phpmyadmin

Pilih database sesuai dengan nama database yang telah dibuat pada saat installasi joomla!.
Kemudian klik export

kemudian akan tampil halaman seperti di bawah ini :

© 2008 Inixindo Jogja Version 1.0


Klik select all dan pastikan Pilihan SQL di Klik

Berita tanda Centang pada Save As File kemudian klik Go. Kita akan diminta untuk
menyimpan sebuah file. Silahkan simpan file tersebut.

2. Kompres direktori Joomla!

Sebelum mengupload, terlebih dahulu, folder joomla yang sudah kita buat sedemikian rupa,
kita kompres. Ini berfungsi untuk mempermudah proses upload dan meningkatkan
kecepatannya. Klik kanan pada folder yang akan dikompres (Biasanya, jika menggunakan
program XAMPP, ada di C:\Program Files\xampp\htdocs) kemudian pilih Send To 
Compressed (zipped) folder). dapat juga dilakukan menggunakan Winzip ataupun program
lain,

© 2008 Inixindo Jogja Version 1.0


Hasil dari proses compress tadi akan menghasilkan sebuah file baru dengan nama sesuai
dengan nama folder berekstensi zip. Missal : joomla.zip

3. Login ke CPANEL dan upload File

Ketika proses pendaftaran hosting berhasil, seharusnya kita mendapatkan infrmasi tentang
username dan password CPANEL. Untuk login ke CPANEL dapat dilakukan dengan
membuka webbrowser kemudian masuk ke URL sbb : http://namadomain.info/cpanel
misalkan punya saya adalah http://www.firman-inix.info/cpanel. Maka kita akan dihadapkan
dengan formulir Login yang menanyakan username dan password. Ingat ! username dan
password ada di email yang dikirimkan oleh webhosting tempat kita mendaftar .
Isikan username dan password

© 2008 Inixindo Jogja Version 1.0


Berikut Ini adalah tampilan CPANEL

untuk mengupload file, Klik Icon dengan nama File Manager

setelah itu, akan dibukakan window baru untuk file manager. Tampilannya seperti windows

© 2008 Inixindo Jogja Version 1.0


Explorer jadi mungkin anda akan lebih mudah untuk menggunakan. Klik direktori Home 
www file yang akan diupload akan disimpan di directory tersebut yaitu WWW kemudian
klik icon Upload

Pastikan tujuan upload adalah /home/<namauser>/www kemudian klik browse untuk


memilih file yang akan diupload. File yang akan diupload adalah file hasil compress yang
telah kita lakukan sebelumnya .

© 2008 Inixindo Jogja Version 1.0


jika tampil halaman seperti di atas, artinya proses upload sedang berlangsung. Tunggu
sampai selesai. Setelah 100% Complete, Klik Back to /home/<namauser>
Maka kita akan kembali ke halaman file manager

4. Extract File dan memindahkan ke direktori WWW

Klik Icon File Joomla.zip kemudian untuk melakukan extract, klik icon dengan nama
Extract

Akan muncul dialog seperti di bawah ini dan klik Extract File(s)

© 2008 Inixindo Jogja Version 1.0


setelah proses extract berhasil, akan muncul sebuah direktori baru dengan nama sesuai
dengan nama file yang kita extract sebelumnya.

masuk ke direktori tersebut dengan cara men double klik direktori tersebut sehingga
tampilannya akan seperti di bawah ini :

langkah selanjutnya adalah memindahkan file-file tersebut ke dalam direktori www. Saat ini
file-tersebut berada di dalam folder /www/joomla. Untuk memindahkan ke /www klik
Select All kemudian klik Drag file dan folder yang telah di select tadi ke direktori www
yang ada di sebelah kiri :

© 2008 Inixindo Jogja Version 1.0


Drag and Drop seperti menggunakan windows explorer

5. Membuat Database MySQL, Membuat User Database dan Restore Database


Kembali ke halaman depan CPANEL.Klik pada kelompok Databases Klik Icon MySQL
Databases

langkah berikutnya adalah membuat database baru. Masukkan nama database pada kolom
isian seperti gambar di bawah ini :

setelah membuat database, maka hasilnya seperti di bawah ini. Nama database secara
otomatis akan ditambahkan dengan prefix nama user. Cotoh di atas, membuat database
dengan nama web, maka jadinya adalah firmani_web.

© 2008 Inixindo Jogja Version 1.0


langkah selanjutnya adalah membuat user database. Isikan username, sesuai dengan
keinginan, isikan password dan ulangi dengan password yang sama pada isian
Password(Again) kemudian klik Create User

setelah membuat user, langkah selanjutnya adalah menambahkan user untuk database.

Jika pembuatan user dan database telah selesai, maka otomatis listnya akan ada di dialog
seperti di atas.klik Add untuk menambahkan user untuk database.
Langkah berikutnya adalah memberikan hak akses database untuk user. Beri tanda centang
pada ALL PRIVILEGES. Kemudian klik Make Changes

© 2008 Inixindo Jogja Version 1.0


Langkah selanjutnya adalah merestore database. Untuk merestore database, dapat dilakukan
dengan menggunakan phpmyadmin.
PERHATIAN : phpmyadmin yang akan digunakan bukanlah phpmyadmin yang di localhost.
Melainkan phpmyadmin yang telah sediakan oleh hosting. Untuk mengakses phpmyadmin,
dapat dilakukan dengan mengklik icon phpmyadmin pada halaman depan cpanel

kemudian akan terbuka halaman baru dengan tampilan phpmyadmin. Untuk melakukan
restore database, pilih nama database, kemudian klik import

© 2008 Inixindo Jogja Version 1.0


kemudian akan tampil halaman seperti di bawah ini :

Klik browse kemudian pilih file hasil backup yang telah kita lakukan sebelumnya.
Kemudian klik GO.

© 2008 Inixindo Jogja Version 1.0


6. Mengubah konfigurasi database joomla.
Masuk ke file manager, kemudian masuk ke direktori www, kemudian pilih file
configuration.phpkemudian klik icon Code Editor.

ganti pada bagian :


var $user = “firmani_webuser”;
var $password =”bukanrahasia”;
var $db = “firmani_web”
sesuaikan dengan database, username, dan password yang telah dibuat sebelumnya.
Kemudian Klik Save Changes

jika tidak ada yang salah, silahkan lihat hasilnya. Misal :: http://www.firman-inix.info

© 2008 Inixindo Jogja Version 1.0


Artikel ini juga dapat di download di
http://taujago.web.id/wp-content/uploads/2008/03/upload-joomla-ke-internet.pdf

Tidak dilarang keras untuk mengcopy atau memperbanyak isi materi ini. Hak cipta atas
ilmu pengetahuan hanya milik Tuhan yang maha kuasa (Allah SWT)

© 2008 Inixindo Jogja Version 1.0