Building Dynamic Web With CMS JOOMLA!

8/14/2019 Building Dynamic Web With CMS JOOMLA!

1/28

MEGA WORKSHOP .: IT for Life :. Building Dynamic Web with CMS JOOMLA!

Technical Drawing and Design Studio Laboratory IE Community - Page 1 of 28 -

1. Introduction to Joomla!

Joomla! is one of the most powerful Open Source Content ManagementSystems on the planet. It is used all over the world for everything fromsimple web sites to complex corporate applications. Joomla! is easy toinstall, simple to manage, and reliable. www.joomla.org

1.1 Content Management System

Sebagai langkah awal ada baiknya Anda mengerti dahulu apa itu CMS atau Content ManagementSystem. 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 pastiakan selalu berusaha menampilkan content terbaru bagi para pengunjungnya. Lalu apa yang

dimaksud dengan content sebenarnya? Pada dasarnya content adalah sebuah unit informasi yangdigunakan 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 sebuahwebsite. Untuk memudahkan pekerjaan, sering kali aturan-aturan dan proses kerja pun dibuatantara seorang webmaster yang lebih memperhatikan sisi teknis dan penampilan dari websitedengan seorang penulis/editor yang menyumbangkan content untuk website. Dalam arti kata lain,manajemen terhadap content yang akan ditampilkan. Baik webmaster maupun penulis/editor dapatmembuat, mengedit, mengatur dan mempublikasikan sebuah content dalam framework/sistemyang telah dipersiapkan sebelumnya.

Framework atau sistem, tempat di mana content itu diletakkan menfasilitasi perkakas-perkakasyang dibutuhkan untuk menjaga konsistensi proses pembuatan halaman-halaman di website secaraefisien dan efektif.

Bila semua informasi diatas kita gabung menjadi satu, dapatlah disimpulkan, CMS adalah sebuahsistem yang memudahkan proses penciptaan sebuah website dinamis yang kaya akan content,dengan memberikan kemudahan kepada penulis/editor untuk menambah, memperbaharui danmenghapus content yang ada tanpa campur tangan langsung dari webmaster. Sebuah CMS akanmembedakan content dari desain, memelihara konsistensi tampilan dan memudahkan pemanfaatancontent untuk berbagai keperluan. Dengan menyimpan data di satu tempat, mengontrol hak aksesdan alur kerja memperbesar kesempatan pemakai berpartisipasi dalam pengembangan websiteanda. - www.kyantonius.com

1.2 CMS Joomla [www.joomla.org]

Joomla adalah salah satu dari ratusan free CMS yang tersedia di Internet yang memiliki jumlahpengguna yang besar. Kemudahan pengaturan content, dukungan di Internet yang banyak, pluginyang melimpah; merupakan keunggulan CMS Joomla yang membuat Joomla banyak diminati orang.

Pada Joomla, setiap halaman dari web memuat bermacam-macam block dari content, block inidisebut juga position. Anda mengatur layout untuk halaman dengan sebuah template, termasukpenempatan banyak block pada halaman web, font, warna, dan background. Lalu Andamenempatkan bermacam-macam module dalam sebuah block. Dan terakhir Anda menambahkan

content dan menampilkan pada halaman utama web Anda.


2/28



/

(Kotak merah) : Position

(Kotak hitam : Module (Kotak hijau) : Header

(Kotak biru : Content


3/28



2. Pra Instalasi CMS Joomla

2.1 Aplikasi yang Anda butuhkan

1. Paket AMP (Apache, MySQL, dan PHP) : salah satunya adalah XAMPP yang sudahterintegrasi AMP didalamnya dan menghemat resource komputer dibandingkan menginstallAMP satu-persatu.

2. CMS Joomla 1.0.10, versi Joomla terakhir (Agustus 2006)

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.

2.2 Instalasi paket AMP (XAMPP)

Instalasi paket AMP pada komputer Anda (sebelum Anda menguploadnya ke Internet) diperlukanuntuk menjalankan CMS Joomla.


4/28



Bila firewall Anda aktif, pastikan untukmemberikan akses pada Apache dan MySQLagar dapat aktif

FTP Server tidak dibutuhkan dalam penggunaan Joomla!


5/28



Pastikan Apache dan MySQL 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


6/28



3. Instalasi CMS Joomla

1. Ekstrak paket Joomla [Joomla_1.0.10.zip] ke folderC:\Program Files\xampp\htdocs

2. Rename folder hasil ekstrasi dengan nama yang Andainginkan. Misalkan workshop.

4. Jalankan internet browser Anda, akses : localhost/workshop. Jadi instalasi CMS Joomla dilakukanvia internet browser.

5. pre-installation check : pastikan setiap item ditandai warnahijau. Lalu klik Next.

6. license : Klik Next.

7. step 1 :

Host Name : localhost

MySQL User Name : root

MySQL Password : root

MySQL Database Name : workshop (terserah Anda)

Klik Next. Klik OK.

8. step 2 : Isi nama web Anda pada field Site name.

Misalkan Mega Workshop IE Community. Klik Next

9. step 3 : Isi field Your E-mail dengan e-mail Anda dan fieldAdmin password dengan password yang Anda inginkan. Klik

Next.

10. step 4 : Hilangkan folder [installation] pada folder web Anda[C:\Program Files\xampp\htdocs \workshop\]

11. Klik Administration untuk melihat halaman admin web. Atau dengan mengakseslocalhost/workshop/administrator.

12. Klik View Site untuk melihat halaman depan web baru Anda. Atau dengan mengakseslocalhost/workshop.

Footnote :

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

Halaman Backend adalah halaman admin yang digunakan untuk melakukan segala konfigurasiweb Anda. Akses : localhost/workshop/administrator

Halaman Frontend adalah halaman yang akan tampil dan dapat dilihat oleh semua pengunjungweb Anda. Akses : localhost/workshop

C:\Program Files\xampp\htdocs


7/28



4. ManajemenContentJoomla

Setelah Anda menginstall CMS Joomla, Anda dapat memulai untuk bekerja dengan content. VersiJoomla saat ini mempunyai hirarki content yang statis : Anda harus membagi content ke dalam tigahirarki, tidak lebih, tidak kurang. Tiga hirarki itu adalah : Sections, Categories, dan Content.

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

yang lebih kecil dan berisi content. Segala teks dan gambar yang tampil pada halaman web adalahcontent. Anda tak dapat membuat content tanpa memiliki sections dan categories.

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

Section :Profil

Category :

Laboratorium

Asisten

Study Group

Section :Kegiatan

Category :

Praktikum

Riset

Proyek

Study Group

Section :Extra

Category :

Pengumuman

IT Room

Taushiyah

1. Untuk mengatur segala konfigurasi web, termasuk pengubahan hirarki content, masuk kehalaman administrator Joomla (localhost/workshop/administrator).

2. Masukkan username dan password.

Membuat Section

Ini akan membawa Anda menuju layarSection Manager.

Contoh hirarki content

Klik pada menu atau iconuntuk menambah atau

mengedit section


8/28



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

1. Klik salah satu link untuk mengedit link yang ada. Misalkan link The News (News).

2. Masukkan pada field Title dan Section Name :Profil.

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

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

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

Frequently Asked Questions), yaituKegiatandanEkstra.

Hasil akhir:

NB : Untuk kembali ke halaman administrator awal, klik menu Home.

Klik link untuk mengeditsection yang ada

Klik icon New untukmembuat section baru


9/28



Membuat Category

1. Klik icon New untuk membuat category baru.

Klik pada menu atau iconuntuk menambah atau

mengedit category

Ini akan membawa Anda menuju layarCategory Manager.

Klik link untuk mengeditcategory yang ada

Klik icon New untukmembuat category baru


10/28



2. Masukkan pada field Title dan Category Name :Laboratorium.

3. Pilih Section : Profil.

4. Klik icon Save untuk menyimpan perubahan dan kembali ke halaman Category Manager.

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

[ .: Latihan :. ] Buat 9 category lainnya dan sesuaikan dengan category yang seperti dalam contoh,dengan mengedit category yang sudah ada (Newsflashdan Example FAQs) dan dengan membuatcategory baru.

Hasil Akhir:


11/28



Membuat Content Item

Ada beberapa cara untuk membuat content :

Pada bagian ini kita akan menggunakan metode 1. Yang akan membawa kita ke layar Content ItemsManager.

Klik icon New untuk membuat content baru.

Anda dapat menggunakan salahsatu opsi-opsi ini untuk

mengakses content items.

12

3 4

Klik padacontent title

untuk mengeditcontent yang

ada.

Klik icon Publishedagar content dapat

terlihat olehpengunjung web

dan icon FrontPageuntuk

menampilkan dihalaman depan

web.

Kolom Reorderdan Orderuntuk

mengatururutan-urutan

content.

Tombol-tomboluntuk mengedit,memindahkan,menghilangkan,

dll. content.


12/28



7. Klik icon Upload untuk memasukkan file gambar dariharddisk user ke folder web. Setelah diupload, refresh

halaman web untuk memasukkan daftarnya di GalleryImages.

8. Untuk memasukkan gambar ke content, pilih gambarpada Gallery Images. Lalu klik tanda untukmemasukkan daftarnya ke Content Images.

9. Lalu klik icon insert image. Gambar akanterletak pada tulisan {mosimage}.

10. Urutan gambar mengikuti urutan pada daftar ContentImages.

Icon Preview untukmelihat artikel yang

Anda buat.

Intro Text : .

1. Isi field Title.

2. Copy contoh artikel ke Intro Textdan Main Text.

3. Pilih section dan category yangdiinginkan.

4. Bila content ingin ditampilkan dihalaman depan web aktifkancheckbox Show on Frontpage.

5. Isi field lainnya pada PublishingInfo.

6. Klik pada tab Images.

Main Text : .

1

2

34

5

6

8 7


13/28



.: Latihan :.

Isi content pada category : Profil, Praktikum, Proyek, Riset, Study Group, IT Room, Pengumuman,dan Taushiyah; dengan contoh yang ada pada hard disk.

Mengubah tampilan content pada frontpage.

1. Akses Menu mainmenu2. Pada Menu Item, klikHome.

3. Ubah nilai pada field # Leading, # Intro, Columns, #Links.

4. Klik icon Save

1 2

3

4


14/28



Hasil akhir:


15/28



Membuat Menu

Setelah membuat content yang terstruktur, maka dibutuhkan sebuah link agar end user dapatmengakses informasi yang diinginkan. Untuk mengakses content, usermembutuhkan sebuah menuyang 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 yangsudah ada.

Untuk menambah atau mengurangi menu : Menu Menu Manager.

1. Isi field Menu Name dan Module Title.

2. Klik icon Save.

To Menu

Main Menu

User Menu

Other Menu

Untuk menambah atau mengurangi menu : Menu Menu Manager.

Untuk menambah atau mengurangi link pada menu :Menu nama_menu

1

2

Untuk menghilangkan menu,pilih menu lalu klik icon Delete

Untuk menambah menu, klikicon New


16/28



[ .: Latihan :. ]

1. Delete menu othermenu.

2. Buat menu : kegiatan (Kegiatan) dan ekstra (Ekstra).

Hasil akhir:

Untuk menambah atau mengurangi link pada menu : Menu nama_menu (misal : mainmenu)

[ .: Latihan :. ] Delete Menu Item no. 2, 4, 5, 6, 7, 8, 9, dan 10.

Untuk menghilangkan link,pilih link lalu klik icon Trash

Untuk menambahkanlink, klik icon New


17/28



Blog Content SectionatauTable Content Section: membuat link ke Section.

Blog Content CategoryatauTable Content Category: membuat link ke Category.

Submit - Content: membuat link agar end userdapat mengirim content pada section tertentu.

[ .: Latihan :. ]

1. Pada menu usermenu, tambahkan link Kirim Artikel dengan opsiSubmit - Contentuntuk sectionEkstra dan delete link Submit News dan Submit Weblinks..

2. Pada menu kegiatan, tambahkan link dengan opsiBlog Content Categoryuntuk setiap categorypada section Kegiatan (Praktikum, Riset, Proyek, dan Study Group).

3. Pada menu ekstra, tambahkan link dengan opsiBlog Content Categoryuntuk setiap categorypada section Ekstra (IT Room, Pengumuman, dan Taushiyah).

Hasil akhir:

Agar menu dapat tampil di halaman frontend web :

1. Akses menu Modules Site Modules.


18/28



Hasil akhir:

3. Atur urutan menusehingga tampak sepertigambar di samping


19/28



5. Designing the Look of Your Joomla! Template

Template dapat dianalogikan seperti themes pada OS Microsoft Windows, jadi yang bertanggungjawab pada tampilan web Anda. Pada template biasanya terdapat sebuah file index.php yangmendefinisikan tampilan secara umum semua halaman web dan file css (cascading style sheet)yang mendefinisikan format dari halaman web.

1. Akses ke halaman Template Manager : Site TemplateManager Site Templates.2. Untuk mempreview template yang akan digunakan, arahkanmouse ke atas link template.

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

Instalasi Template

1. Akses menu Installers Template Site.2. Klik browse dan pilih template yang diinginkanuntuk diinstall.

3. Klik Upload File & Install

NB : File template harus sudah dalam fileterkompresi (.zip atau .tar.gz)

[ .: Latihan :. ]

Install dan gunakan template dengan nama filenya JavaBean.zip

1

3 2

3

2

1

3


20/28



Mengganti image pada template

Image-image yang ada pada template, seperti header, biasanya terdapat pada folder\templates\nama_template\images dan image ini dengan bebasnya dapat kita rubah. Hal-hal yangperlu diperhatikan, apabila Anda belum menguasai bahasa pemrograman web, adalah image-imageyang akan mengganti image yang ada, sebaiknya mempunyai nama dan ukuran pixel yang samadengan image yang akan diganti.

Sebagai contoh kita akan mengganti headerdari template yang digunakan (JavaBean).

1. Masuk ke folder C:\Program Files\xampp\htdocs\workshop\templates\JavaBean\images

2. Temukan image yang sama dengan header(image_01.jpg).

3. Ganti dengan contoh headeryang telah disediakan.

header


21/28



5. Expand Your Joomla! Module, Component, & Mambot

Module, Component, atau Mambot adalah plug-in bagi web Joomla Anda sehingga dapat menambahfeature-feature bagi web Joomla Anda. Menu-menu yang pernah Anda buat, sebenarnya adalahplug-in Joomla, yaitu Module. Fasilitas Login Form, Search, Polls; adalah plug-in Joomla, yaituModule. Jadi Module adalah plug-in yang tampak di front-end web.

Sedangkan Component adalah plug-in yang berada di back-end web. Salah satu fungsinya, yaitumengatur konfigurasi dari module. Misalnya membuat list pertanyaan pada module Polls.

Sedangkan Mambot adalah plug-in yang terintegrasi dengan content, sehingga menambah featuredari content itu. Contoh yang paling jelas adalah editor untuk membuat suatu content, sehinggacontent dapat dibuat layaknya editor Microsoft Word dengan tampilan WYSIWYG. Nama Mambot ituadalah MCE Editor.

Jadi suatu plug-in bisa saja terdiri ketiga plug-in, yaitu Component, Module, dan Mambot. Atauhanya salah satu dari ketiganya saja. Informasi plugin Joomla:extensions.joomla.org

Instalasi Plug-in Component1. Akses menu Installers Components.2. Pada Upload Package File, klik Browse

3. Pilih paket component-nya dan klik Open.

4. Klik Upload File & Install.

[ .: Latihan :. ]

Install component di bawah ini.

com_smo_ajax_shoutbox.zip

com_akobookplus2.0.3.zip

com_joomlaboard-1-1-2.zip

com_rsgallery2_1.11.6-alpha.zip

comprofiler.zip

docmanV13_RC_2.zip

com_joomlaxplorer_1.4.0.tar.gz

com_uddeim05b.zip

com_jce104.zip

com_akocomment.zip

2 4

1

Plug-in yang telah terinstall


22/28



Instalasi Plug-in Module1. Akses menu Installers Modules.2. Pada Upload Package File, klikBrowse

3. Pilih paket module-nya dan klikOpen.


[ .: Latihan :. ]

Install module di bawah ini.

mod_smo_ajax_shoutbox.zip

cblogin.zip

mod_jblatest.zip

mod_latestdownV10_RC_2.zip

mod_whosonline_udde.zip

Instalasi Plug-in Mambot1. Akses menu Installers Mambots.2. Pada Upload Package File, klik Browse

3. Pilih paket module-nya dan klik Open.


2 4

1


1


23/28



[ .: Latihan :. ]

Install mambot di bawah ini.

bot_jce104.zip cb_akocommentbot.zip

Konfigurasi Plug-in Component

Segala konfigurasi component terdapat pada menuComponents Nama_Component.Untuk menghubungkan component dengan front-end user,

dibutuhkan sebuah link untuk menghubungkannya.1. Masuk ke salah satu menu,misalkan mainmenu.

2. Klik icon New.

3. Klik pada tipe menu :Component.

4. Pilih component dan beri namalinknya di field Name.

5. Klik icon Save.

[ .: Latihan :. ]

Buat link di menu mainmenu untuk component :

AkoBook

DOCMan

Joomlaboard Forum

RSGallery

2 4


1

2

3

4

5


24/28


25/28



Konfigurasi Plug-in MambotSegala konfigurasi mambot terdapat pada menu Mambots Site Mambots.

[ .: Latihan :. ]

Publish Mambot AkoComment Bot.


26/28



6. Backup and Restore Database

Backup database

1. Akses : localhost/phpmyadmin

2. Pilih Database yang telah Anda buat

3. Maka akan muncul tampilan seperti di bawah. Dan untuk membackupnya (Eksport) klik pada tabEksport.

1

2

3


27/28



4. Klik pada link Select All.

5. Beri tanda cek pada opsi Save as file.

6. Beri nama file databasenya pada field File name template.

7. Klik Go untuk menyimpan file database pada harddisk.

Maka akan muncul kotak dialog seperti berikut lalu klik Save dan simpan di lokasi yang diinginkan.

Database memuat semua informasi tentang web seperti content, nama template dan plugin(component, module, dan mambot) yang terinstall, user teregistrasi, dan lainnya. Tetapi tidakmenyimpan file-file web seperti file plugin (component, module, dan mambot), image, atau filelainnya.

4

5

6

7


28/28


Restore database

1. Akses : localhost/phpmyadmin

2. Pilih Database yang diinginkan.

Sebelum merestore (import) database yang kita inginkan, database yang lama harus dihilangkanterlebih dahulu.

3. Untuk menghilangkan database lama, klik Check All

4. Pilih opsi Drop.

5. Klik Yes.

6. Klik pada tab Import.

7. Pilih database yang dinginkan(klik Choose). Pastikanekstensinya .sql.

8. Dan klik Go.

3 4

5 67

8

Documents

Building Dynamic Web With CMS JOOMLA!