Tutorial joomla versi 1.5.3

Tutorial Joomla Versi 1.5.3

D3 Unggulan – Eldayati, S.Kom Hal 1 dari 32

1. Pengenalan Joomla!!

“Joomla! is one of the most powerful Open Source

Content Management Systems on the planet. It is

used all over the world for everything from simple

web sites to complex corporate applications. Joomla!

is easy to install, simple to manage, and reliable.” –

www.joomla.org

a. Content Management System

Sebagai langkah awal ada baiknya Anda mengerti dahulu apa itu CMS atau Content

Management System. Apakah sama dengan software HTML editor lainnya seperti Microsoft

FrontPage, Dreamweaver, atau bahkan sebuah Notepad?

Seperti yang kita ketahui, content merupakan salah satu urat nadi dari kehidupan sebuah

website. Tanpa content dapat dipastikan tidak ada website. Sebuah website yang dikelola

dengan baik pasti akan selalu berusaha menampilkan content terbaru bagi para pengunjungnya.

Lalu apa yang dimaksud dengan content sebenarnya? Pada dasarnya content adalah sebuah

unit informasi yang digunakan untuk membentuk sebuah halaman di website. Dapat terdiri dari

apa saja; teks, gambar, video, suara, dan lain sebagainya.

Dari content yang sudah ada tadi, kemudian diatur sedemikian rupa sehingga membentuk

sebuah website. Untuk memudahkan pekerjaan, sering kali aturan-aturan dan proses kerja pun

dibuat antara seorang webmaster yang lebih memperhatikan sisi teknis dan penampilan dari

website dengan seorang penulis/editor yang menyumbangkan content untuk website. Dalam arti

kata lain, manajemen terhadap content yang akan ditampilkan. Baik webmaster maupun

penulis/editor dapat membuat, mengedit, mengatur dan mempublikasikan sebuah content

dalam framework/sistem yang telah dipersiapkan sebelumnya.

Framework atau sistem, tempat di mana content itu diletakkan menfasilitasi ‘perkakas-

perkakas’ yang dibutuhkan untuk menjaga konsistensi proses pembuatan halaman-halaman di

website secara efisien dan efektif.

Bila semua informasi diatas kita gabung menjadi satu, dapatlah disimpulkan, CMS adalah

sebuah sistem yang memudahkan proses penciptaan sebuah website dinamis yang kaya akan

content, dengan memberikan kemudahan kepada penulis/editor untuk menambah,

memperbaharui dan menghapus content yang ada tanpa campur tangan langsung dari

webmaster. Sebuah CMS akan membedakan content dari desain, memelihara konsistensi



tampilan dan memudahkan pemanfaatan content untuk berbagai keperluan. Dengan menyimpan

data di satu tempat, mengontrol hak akses dan alur kerja memperbesar kesempatan pemakai

berpartisipasi dalam pengembangan website anda. - www.kyantonius.com

b. CMS Joomla [www.joomla.org]

Joomla adalah salah satu dari ratusan free CMS yang tersedia di Internet yang memiliki jumlah

pengguna yang besar. Kemudahan pengaturan content, dukungan di Internet yang banyak,

plugin yang melimpah; merupakan keunggulan CMS Joomla yang membuat Joomla banyak

diminati orang.

Pada Joomla, setiap halaman dari web memuat bermacam-macam block dari content, block ini

disebut juga position. Anda mengatur layout untuk halaman dengan sebuah template, termasuk

penempatan banyak block pada halaman web, font, warna, dan background. Lalu Anda

menempatkan bermacam-macam module dalam sebuah block. Dan terakhir Anda

menambahkan content dan menampilkan pada halaman utama web Anda.

2. Pra Instalasi CMS Joomla

a. Aplikasi yang Anda butuhkan

1) Paket AMP (Apache, MySQL, dan PHP) : salah satunya adalah XAMPP yang sudah

terintegrasi AMP didalamnya dan menghemat resource komputer dibandingkan

menginstall AMP satu-persatu.

2) CMS Joomla versi 1.5.3

3) Notepad++, freeware untuk mengedit bahasa pemrograman. Alternatif : Wordpad,

Editplus, Macromedia Dreamweaver atau PHP editor lainnya.

4) 7zip, freeware program kompresi yang powerful. Alternatif : WinZip atau WinRar

5) Internet browser, contoh: Internet Explorer atau Opera atau Firefox.

b. Instalasi paket AMP (XAMPP)

Instalasi paket AMP pada komputer Anda (sebelum Anda menguploadnya ke Internet)

diperlukan untuk menjalankan CMS Joomla.



Pastikan MySQL dan Apache sudah aktif (Running)

Untuk mengetesnya akses pada internet browser ketik localhost.

Selanjutnya file dan folder web Anda akan ditempatkan di : C:\Program

Files\xampp\htdocs



3. Instalasi CMS Joomla

a. Ekstrak paket Joomla [Joomla_1.0.10.zip] ke folder C:\Program Files\xampp\htdocs

b. Rename folder hasil ekstrasi dengan nama yang Anda inginkan. Misalkan webmakanan

c. Jalankan internet browser Anda, akses : localhost/webmakanan. Jadi instalasi CMS Joomla

dilakukan via internet browser.



d. Pre-installation check : pastikan setiap item ditandai warna hijau. Lalu klin Next.

e. License : Klik Next



f. Database

Langkah 1 : Isi konfigurasi database sesuai dengan yang Anda gunakan.

g. FTP Configuration : klik Next



h. Configuration

Langkah 2 : Isi nama web Anda pada field Site name

Misalkan Aneka Makanan.

Langkah 3 : Isi field Your E-mail dengan email Anda dan field Admin Password dengan password

yang Anda inginkan.

Langkah 4 : Sebagai pemula, jangan lupa mengklik ”Install Sample Data” yang nantinya akan

berubah menjadi ” Sample Data Installed Succesfully”

Kemudian kilk Next



i. Finish

Langkah 5 : Hilangkan folder [installation] pada folder web Anda

[C:\Program Files\xampp\htdocs \webmakanan\]

Langkah 6 : klik Admin untuk melihat halaman admin web. Atau dengan mengakses

localhost/webmakanan/administrator

Langkah 7 : Klik Site untuk melihat halaman depan web baru Anda. Atau dengan mengakses

localhost/webmakanan.

Footnote :



Pada CMS Joomla halaman web terbagi dua bagian yaitu halaman Backend dan Frontend.

Halaman Backend adalah halaman admin yang digunakan untuk melakukan segala konfigurasi

web Anda. Akses : localhost/webmakanan/administrator

Halaman Frontend adalah halaman yang akan tampil dan dapat dilihat oleh semua pengunjung

web Anda. Akses : localhost/webmakanan



4. Manajemen Content Joomla

Setelah Anda menginstall CMS Joomla, Anda dapat memulai untuk bekerja dengan content. Versi

Joomla saat ini mempunyai hirarki content yang statis : Anda harus membagi content ke dalam tiga

hirarki, tidak lebih, tidak kurang. Tiga hirarki itu adalah : Sections, Categories, dan Content.

Sections seperti kontainer yang besar yang berisi semua categories. Categories adalah container

yang lebih kecil dan berisi content. Segala teks dan gambar yang tampil pada halaman web adalah

content. Anda tak dapat membuat content tanpa memiliki sections dan categories.

Sebagai contoh, kita akan membuat sebuah web laboratorium. Hirarkinya sebagai berikut :

Section: Makanan

Category :

Makanan Traditional

Makanan Modern

Makanan Sehari-hari

Section : Minuman

Category :

Minuman Traditional

Minuman Modern

Section : Kue-kue

Category :

Kue Kering

Kue Basah

Puding

a. Untuk mengatur segala konfigurasi web, termasuk pengubahan hirarki content, masuk ke

halaman administrator Joomla (localhost/workshop/administrator).

b. Masukkan username dan password.



Membuat Section

Ini akan membawa Anda menuju layer section manager

Klik pada menu atau icon untuk menambah atau mengedit section

Klik lingk untukmengedit section yang asa

Klik icon New untuk membuat section baru



Secara default, joomla sudah menginstall beberapa section (begitu juga category dan content).

a. Klik salah satu link untuk mengedit link yang ada. Misalkan link About Joomla!

b. Masukkan pada field Title dan Alias : Makanan

c. Klik icon Save untuk menyimpan perubahan dan kembali ke halaman Section Manager.

NB : Icon Apply untuk menyimpan perubahan dan kembali ke halaman Section Editor.

Icon Close untuk membatalkan perubahan.

[ .:: Latihan ::. ] Buat 2 section lainnya dengan mengedit section yang sudah ada (News dan

FAQs), yaitu Minuman dan Kue-kue

Hasil Akhir :

NB : Untuk kembali ke halaman administrator awal, klik menu Site -> Control Panel.



Membuat Category

Ini akan membawa Anda menuju layer Category Manager.

Klik pada menu atau icon uuntuk menambah atau mengedit category

Klik untuk mengedit category yang ada

Klik icon New untuk membuat category baru



a. Klik icon New untuk membuat category baru.

b. Masukkan pada field Title dan Alias : Makanan Traditional

c. Pilih Section : Makanan

d. Klik icon Save untuk menyimpan perubahan dan kembali ke halaman Section Manager.

NB : Icon Apply untuk menyimpan perubahan dan kembali ke halaman Section Editor.

Icon Close untuk membatalkan perubahan.

[ .:: Latihan ::. ] Buat 7 category lainnya dan sesuaikan dengan category yang seperti dalam

contoh, dengan mengedit category yang sudah ada dan meng-unpublish category yang tidak

diperlukan.

Hasil Akhir :



Membuat Content Item

Ada beberapa cara untuk membuat content :

Kita akan menggunakan opsi menu Content -> Artikel Manager

Anda dapat menggunakan salah satu opsi-opsi untuk mengakses conten items

Klik pada content title untuk mengedit content yang ada

Klik icon published agar content dapat terlihat oleh pengunjung web

Klik icon frontpage untuk menampilkan di halaman depan web

Kolom order dan tombol save untuk mengatur urutan-urutan content



Klik icon New untuk membuat content baru

a. Isi field Title

b. Jika content ingin di tampilkan di web, pilih option Yes, Jika content ingin ditampilkan di

halaman depan web, pilih option Yes

c. Pilih Section

d. Pilih Category

e. Ketikkan atau masukkan artikel ke Text

f. Tombol Image digunakan untuk memasukkan gambar

Untuk mengambil gambar di komputer, browse files -> Start Upload -> Pilih gambar di

deretan gambar -> klik Insert

g. Tombol Pagebreak digunakan untuk melanjutkan teks ke halaman selanjutnya

e Text

a

c d

b

f g h



h. Tombol Read more… digunakan untuk memotong artikel yang panjang.

[ .:: Latihan ::. ]

Isi content pada category : [Content bisa diambil di internet]

Makanan Traditional : Nasi Uduk

Sate Ayam

Opor Ayam

Makanan Modern : Chicken Steak

Spaghetti

Makanan Sehari-hari : Sayur Asem Jakarta

Tempe Bacem

Minuman Traditional : Bajigur

Cendol Bandung

Minuman Modern : Banana Milkshake

Kue Kering : Nastar

Kastengle

Kue Basah : Putri Ayu

Cucur

Puding : Puding Caramel

Puding Buah

Mengubah Tampilan Content pada Front Page

a. Akses Menu -> Main Menu

b. Pada Menu Item, klik Home

c. Ubah nilai pada field #Leading, #Intro,

#Columns dan #Links

d. Klik Icon Save



Hasil Akhir :

Welcome to the Frontpage

Opor Ayam

<< Isi Cari di Internet>>

Nastar


Putri Ayu


Puding Caramel


Sate Ayam


More Articles...

Puding Buah

Banana Milkshake

« Start Prev 1 2 Next End»



Membuat Menu

Setelah membuat content yang terstruktur, maka dibutuhkan sebuah link agar end user dapat

mengakses informasi yang diinginkan. Untuk mengakses content, user membutuhkan sebuah menu

yang berisi link-link untuk dapat mengakses content yang diinginkan.

CMS Joomla yang telah terinstall, secara default telah terinstall beberapa menu, yaitu Main Menu, Other

Menu, Top Menu, dan User Menu. Kita dapat membuat menu sendiri atau mengedit yang sudah ada.

Top Menu

MainMenu

Resources

Key Concepts

User Menu

Example Pages



Untuk menambah atau mengurangi menu : Menu -> Menu Manager

[ .:: Latihan ::. ]

1. Delete menu Example Pages dan menu Key Concepts

2. Buat menu : makanan (Makanan) dan kue (Kue)

3. Edit menu Resources menjadi minuman (Minuman)

Untuk menghilangkan menu, pilih menu lalu klik icon Delete

Untuk menambah menu, klik icon New



Untuk menambah atau mengurangi link pada menu : klik Menu Item di baris nama Menu

Klik disini

Untuk menghilangkan link, pilih link lalu klik icon Trash

Untuk menambahkan link, klik icon New



Articles – Article Layout : membuat link ke artikel yang kita pilih

Article Submission Layout : mengijinkan user untuk mengirimkan/membuat artikel. Ini

hanya berlaku bagi penulis dan anggota.

Category Blog Layout atau Category List Layout : membuat link ke category

Front Page Blog Layout : membuat link ke artikel yang berstatus front page yang

telah diatur tampilannya

Section Blog Layout atau Section Layout : membuat link ke section

[ .:: Latihan ::. ]

1. Pada menu mainmenu, Delete Menu Item 2, 3, 4, 5, 6, 7, 8 dan 9. Buat item Profil

dengan opsi Articles – Article Layout. Sebelum membuat item tersebut, Buatlah artikel

dengan judul Profil sebagai berikut :

Hasil akhir :

2. Pada menu usermenu, ubah nama item Submit an Article dengan nama Kirim Artikel,

ubah nama item Your Details dengan nama My Details dan

hapus item Submit a Web Link.



3. Pada menu topmenu buat menu item Story of This Web

dan D3 Unggulan dengan opsi Articles – Article Layout

(Buat terlebih dahulu masing-masing artikel nya). Kemudian

hapus item yang tidak diperlukan.

4. Pada menu minuman buat menu item Traditional dengan

opsi Articles – Category Blog Layout menu item Modern

dengan opsi Articles – Category List Layout. Kemudian hapus

item yang tidak diperlukan.

5. Pada menu makanan buat menu item Traditional dan

Modern dengan opsi Articles – Category Blog Layout menu

item Lauk-Pauk dengan opsi Articles – Category List

Layout. Kemudian hapus item yang tidak diperlukan.

6. Pada menu kue buat menu item Basah dan Kering dengan opsi

Articles – Category Blog Layout menu item Puding dengan opsi

Articles – Category List Layout. Kemudian hapus item yang tidak

diperlukan.

Agar menu dapat tampil di halaman frontend web :

1. Akses menu Extentions -> Module Manager



Pada pembuatan menu manager sebelumnya, Menu Minuman diedit dari menu Resources,

maka di module manager tidak terdapat module minuman. Oleh karena itu, ubah module

Resources menjadi Minuman.

2. Atur urutan menu sehingga tampak seperti gambar di samping



Mengatur Tampilan Joomla

Templates

Template dapat dianalogikan seperti “themes” pada OS Microsoft Windows, jadi yang

bertanggung jawab pada tampilan web Anda. Pada template biasanya terdapat sebuah file

index.php yang mendefinisikan tampilan secara umum semua halaman web dan file css

(cascading style sheet) yang mendefinisikan format dari halaman web.

1. Akses ke halaman Template Manager : Extensions -> Template Manager

2. Untuk mempreview template yang akan digunakan, arahkan mouse ke atas link template.

3. Untuk menggunakan template yang Anda inginkan, pilih templatenya lalu klik icon Default.

4. Untuk menggunakan template yang berbeda di halaman tertentu, klik template name,

kemudian di Menu Assigment pilih Select from List setelah itu pilih menu yang akan di

bedakan template nya.



Modules

Merupakan plug-in yang tampak di front-end web. Digunakan sebagai jembatan antara

Component dan Joomla. Anda membutuhkan Module untuk meng-aktifkan componen yang di

pilih. Contoh module seperti : fasilitas Login Form, Search, Pools dll.

1. Akses ke halaman Module Manager : Extensions -> Module Manager

2. Untuk menggunakan module yang Anda inginkan, aktifkan status enable.

Components

Plug-in yang berada di back-end web. Salah satu fungsinya, yaitu mengatur konfigurasi dari

module. Misalknya membuat list pertanyaan pada module Pools.

1. Akses ke halaman Components : Components -> Pilih component yang dituju

2. Masing-masing component memiliki setting-an dan fungsi yang berbeda.



Plugins

Plugin disebut juga dengan istilah Mambots, yang terintegrasi dengan content, sehingga

menambah feature dari content itu. Contoh yang paling jelas adalah editor untuk membuat suatu

content, sehingga content dapat dibuat layaknya editor Microsoft Word dengan tampilan

WYSIWYG. Nama Mambot itu adalah MCE Editor.

1. Akses ke halaman Components : Components -> Pilih component yang dituju

2. Untuk menggunakan module yang Anda inginkan, aktifkan status enable.

Language

Merupakan salah satu plugin yang digunakan untuk menambahkan bahasa di website kita.

1. Akses ke halaman Language Manager : Extensions -> Language Manager

2. Untuk mengaktifkan, pilih bahasa yang akan diaktifkan, kemudian klik tombol Default yang

ada di pojok kanan atas.



Cara Install/Uninstall Module, Plugin, Template, Language dan

Component.

1. Akses ke halaman Install/Uninstall : Extentions -> Install/Uninstall

2. Browse file yang akan di install, kemudian klik upload file & install

3. Untuk meng-uninstall, masuk ke plugin yang dituju kemudian pilih yang akan di uninstall.

[ .:: Latihan ::. ]

1. Install dan gunakan template dengan nama Pizza.zip sebagai defaultnya.

2. Install dan gunakan template dengan nama Frooty Fresh.zip sebagai Assign untuk halaman

Minuman Modern

3. Install dan gunakan module mod_vvisit_counter.zip atur setting nya.

4. Install dan gunakan module camp26_smoothgallery_J15x.zip atur settingnya dengan

width dan height 800. Kemudian masuk ke :

modules/mod_camp26_smoothgallery/images_smoothgallery/

masukkan gambar(ukuran 500x70) yang akan ditampilkan dan ubah title menjadi Our

Gallery



5. Install dan gunakan module mod_ulti_clocks.zip

6. Untuk plugin component pools, buat pernyataan sebagai berikut :

7. Install dan gunakan com_easygb.zip. Buat menu dengan nama Buku Tamu di Top

Menu dan pilih item nya Easy GuestBook.

Tutorial joomla versi 1.5.3

Technology

Transcript of Tutorial joomla versi 1.5.3