The Power of Joomla!

Pokok Bahasan
Workshops
The Power of Joomla!
Bagian 1: Pengetahuan Dasar Web
1.1
1.2
1.3
1.4
1.5
Pengenalan Teknologi CMS
Software yang dibutuhkan
Instalasi Joomla! di Lokal
Pengenalan Hosting dan Domain
Instalasi Joomla! di Hosting
Bagian 2: Penguasaan FrontEnd
•
•
•
•
Bagian Berita (News)
Modul Utama
Component Utama
Bagian Member (User Login)
Bagian 3: Penguasaan Back-end
•
•
•
•
•
Penanganan News / Berita
Membuat Menu ber Halaman
Penanganan Menu Berbagai Tipe
Penanganan User
Instalasi Template, Module, Component,
Mambots
• Penanganan Module
• Penanganan Config dan lain-lain
Bagian 4: Pengenalan Template
• Instalasi Template Baru
• Modul Template Chooser
• Template-template Terbaik Dalam
Joomla
• Penanganan HTML (Index.php)
• Penanganan CSS (template_css.css)
Bagian 1.1:
Pengetahuan Dasar Web - Pengenalan
Teknologi CMS
Workshops
The Power of Joomla!
1. Dynamic Website
•
•
•
•
Website adalah kumpulan web page.
Web designer biasanya menggunakan tools
Tools menghasilkan website yang static
Website yang dinamis adalah website yang
memiliki kemampuan untuk merubah isinya
secara otomatis.
2. DHTML
• DHTML adalah bahasa dasar utk membuat
website dinamis.
• DHTML adalah gabungan dari XHTML, CSS
dan Javascript.
• Pengetahuan dasar dari ketiga jenis script
sangat diperlukan
• Web designer yang hanya mengandalkan
tools tetapi tidak memahami ketiga script
akan menemui banyak kesulitan
2. DHTML (XHTML)
•
•
•
•
Merupakan bahasa dasar
yang paling utama dari web
page
Disahkan oleh W3C (World
Wide Web Consortium)
Merupakan pengganti HTML
Dapat menangai
penampilan (apprearance)
dan isi (content) dari
website
2. DHTML (CSS)
•
•
•
•
Merupakan bahasa dasar kedua
setelah XHTML
XHTML dan CSS berkerja sama
dalam membentuk website
CSS dikhususkan untuk
menangani bagian penampilan
(appearance) saja.
Dahulu CSS sangat sedikit
peranannya (10%), sekarang
makin besar (50%).
2. DHTML (JavaScript)
•
•
•
Javascript merupakan bahasa
pemrograman (script) yang
dikhususkan dalam web
Termasuk dalam golongan
client side script
Membuat website menjadi
lebih dinamis seperti misalnya
menampilkan jam, membuat
sebuah tombol yang berubah
warna, melakukan validasi
terhadap isi dalam form
3. Dynamic Website with PHP/MySQL
• Search engine, forum, calendar, news dan
lainnya yang umumnya menggunakan
database tidak dapat dilakukan oleh
DHTML.
• Untuk membuat komponen dinamis tersebut
dibutuhkan server side script
• Web programmer dituntut menguasai client
side script, server side script dan database
menagement sistem.
• Web designer biasanya menggunakan
komponen yang telah siap pakai
3. Dynamic Website with PHP/MySQL
4. Dynamic Website with CMS
• Salah satu cara yang sangat mudah untuk
membuat website yang dinamis dengan
cepat adalah dengan CMS.
• CMS adalah tools yang dapat mengatur
content secara efisien dan efektif dalam
membentuk sebuah website seperti
misalnya sebuah website portal.
4. Dynamic Website with CMS
4. Dynamic Website with CMS
• Kelemahan dari cara pembuatan website
tanpa CMS adalah kebutuhan akan tenaga
kerja dan biaya yang besar.
• Dengan CMS permasalahan tersebut bisa
diatasi
• Web designer berperan dalam merancang
penampilan CMS
• Web programmer berperan dalam membuat
modul CMS
• User biasa (orang awam) dapat melakukan
perawatannya
4. Keuntungan CMS
•
•
•
•
•
informasi yang up to date dan konsisten
Pemanfaatan kembali suatu modul
(content reusable)
Meningkatkan produktifitas dan kepuasan
dari sebuah team
Pembuatan website dapat dilakukan secara
desentralisasi
Fasilitas untuk mendefinisikan alur kerja
(work flow).
Dua Versi CMS:
•
Proprietary CMS – harga “sangat” mahal
–
–
–
–
•
www.vignette.com
www.mediasurface.com
www.interwoven.com
www.reddotsolutions.com
Opensource CMS – harga free
–
–
–
–
www.phpnuke.com
www.mamboserver.com
www.xoops.com
www.typo3.com
4. Proprietary CMS:
4. Opensource CMS:
4. CMS Proprietary atau Opensource?
•
•
•
Sebaiknya mencoba dulu CMS open source
untuk mengetahui fitur-fiturnya.
Setelah memahaminya barulah dapat
memutuskan.
Pemilihan tergantung dari strategi dan
kebijakan yang ada dari perusahaan
tersebut
4. Software yang dibutuhkan CMS:
1. Web Browser
Internet Explorer
2. Web Server
Apache
3. Database Server MySQL
4. Script Engine
PHP
5. Script Editor
PHP Coder & Dreamweaver
6. Software Upload WS FTP Pro
7. CMS Script
Joomla / Mambo
5. Joomla / Mambo
•
•
•
Web developer dapat menggunakan
Mambo sebagai core. Komponen lainnya
dapat dibuat dan diintegrasikan kedalam
core ini.
Web designer dapat merancang berbagai
macam tampilan (themes)
Kekuatan dari Mambo: akses yang cepat
(quick), jumlah byte yang dibutuhkan
sangat kecil (simple), kemudahan untuk
membuat themes yang baru (easy).
5. Joomla / Mambo
7. Instalasi Joomla / Mambo
Menyiapkan
Script
7. Instalasi Joomla / Mambo
Mengaktifkan
Joomla/Mambo
7. Instalasi Joomla / Mambo
Menampilkan
Modul-modul
8. Membuat Tampilan (Themes)
8. Membuat Tampilan (Themes)
No. Penjelasan
No. Penjelasan
1. Sitename
<?php echo $sitename; ?>
6. Mainbody
<?php include ("mainbody.php");
?>
2. Newsflash
<?php include ("newsflash.php");
?>
7. Right component
<?php $side = "left";
include("component.php"); ?>
3. Date
<?php echo
date(_DATE_FORMAT); ?>
8. Footer
<?php echo _FOOTER_INDEX;
?>
4. Pathway
<?php include ("pathway.php");
?>
9. Banners
<?php include ("banners.php"); ?>
5. Left component
<?php $side = "left";
include("component.php"); ?>
8. Membuat Tampilan (Themes)
<table width="100%" border="2">
<tr>
<td rowspan="2"> </td>
<td> <?php echo $sitename; ?> </td>
<td rowspan="2"> <?php echo date(_DATE_FORMAT); ?> </td>
</tr>
<tr>
<td> <?php include ("newsflash.php"); ?> </td>
</tr>
<tr>
<td colspan="3"> <?php include ("pathway.php"); ?> </td>
</tr>
<tr>
<td> <?php $side = "left"; include("component.php"); ?> </td>
<td> <?php include ("mainbody.php"); ?> </td>
<td> <?php $side = "right"; include("component.php"); ?> </td>
</tr>
<tr>
<td colspan="3"> <?php echo _FOOTER_INDEX; ?> </td>
</tr>
</table>
Bagian 1.2:
Software Yang Dibutuhkan
(Instalasi Lokal)
Workshops
The Power of Joomla!
Software Utama
• Joomla! Script:
– Joomla_1.0.12-Stable-Full_Package.zip
• Web Server & Database Server:
– WinLAMP03.exe
• Browser
– Firefox Setup 1.5.0.7.exe
Software Pendukung
• Template Joomla!
–
–
–
–
rt_carbonation.tgz
rt_technopia.tgz
jw_inetgazette.tgz
jw_onemorething.tgz
• Module Joomla!
– mod_html.zip
– mod_anaclock2.zip
– mod_letterman_1.2.2.tar.gz
• Component Joomla!
– jobline-1_1_2_2.zip
– com_akobookplus 2.0.2.zip
– com_letterman_1.2.2.tar.gz
• Aplikasi PHPMyAdmin
– phpMyAdmin-2.8.2.4.zip
• Aplikasi MySQLFront
– MySQL-Front_2.5_Setup.exe
• Editor Program
– phpcoder.exe
• Editor CSS
– topstyle.exe
Bagian 1.3:
Instalasi Joomla di Lokal
Workshops
The Power of Joomla!
Bagian 1.4:
Pengenalan Hosting dan Nama
Domain
Workshops
The Power of Joomla!
Instalasi di Hosting
Workshops
The Power of Joomla!
Bagian 2:
Penguasaan Front-end
Workshops
The Power of Joomla!
Penguasaan Front End
•
•
•
•
Bagian Berita (News)
Module Utama
Component Utama
Bagian Member (User Login)
Bagian 3:
Penguasaan Back-End
Workshops
The Power of Joomla!
Bagian 3: Penguasaan Back-end
•
•
•
•
•
•
•
Instalasi Joomla !
Penanganan News / Berita
Penanganan Menu Berbagai Tipe
Penanganan User
Instalasi Template, Module, Component
Penanganan Module dan Component
Penanganan Config dan lain-lain
Flash Demonstration !
Bagian 4:
Pengenalan Template
Workshops
The Power of Joomla!
Bagian 4: Pengenalan Template
• Instalasi Template Baru
• Modul Template Chooser
• Template-template Terbaik Dalam
Joomla
• Penanganan HTML (Index.php)
• Penanganan CSS (template_css.css)
Flash Demonstration !