JOOMLA GANTRY

TRACKING CODE 01102314SPDIG001 WWW.DIGTUTS.COM ii
JOOMLA 3 & GANTRY FRAMEWORK
© Yohanes Bintang Hutabarat
Diterbitkan pertama kali oleh DIGTUTS.
Perumahan Griya Karang Indah Blok E No. 2, Purwokerto 53142
Terbitan Pertama: Agustus, 2014
Penulis : Yohanes Bintang Hutabarat
Editor : Yohanes Bintang Hutabarat
Desain Cover : Yohanes Bintang Hutabarat
Desain Video : Yohanes Bintang Hutabarat
Hak Cipta dilindung oleh undang-undang.
Dilarang memperbanyak sebagian atau seluruh isi buku digital ini tanpa izin tertulis dari Penerbit.
Undang-Undang Republik Indonesia Nomor 19 Tahun 2002 tentang Hak Cipta
Lingkup Hak Cipta
Pasal 2 :
1. Hak Cipta merupakan hak eksklusif bagi Pencipta atau Pemegang Hak Cipta untuk
mengumumkan atau memperbanyak Ciptaannya, yang timbul secara otomatis setelah suatu
ciptaan dilahirkan tanpa mengurangi pembatasan menurut peraturan perundang-undangan yang
berlaku.
Ketentuan Pidana
Pasal 72
1. Barangsiapa dengan sengaja dan tanpa hak melakukan perbuatan sebagaimana dimaksud dalam
Pasal 2 ayat (1) atau Pasal 49 ayat (1) dan ayat (2) dipidana dengan pidana penjara masing-
masing paling singkat 1 (satu) bulan dan/atau denda paling sedikit Rp. 1.000.000 (satu juta
rupiah), atau pidana paling lama 7 (tujuh) tahun dan/atau denda paling banyak Rp 5.000.000.000
(lima miliar rupiah)
2. Barangsiapa dengan sengaja menyiarkan, memamerkan, mengedarkan, atau menjual kepada
umum suatu Ciptaan atau barang hasil pelanggaran Hak Cipta atau Hak Terkait sebagaimana
dimaksud pada ayat (1) dipidana dengan pidana penjara paling lama 5 (lima) tahun dan/atau
denda paling banyak Rp 500.000.000 (lima ratus juta rupiah)

TRACKING CODE 01102314SPDIG001 WWW.DIGTUTS.COM iii
KATA PENGANTAR
Puji syukur penulis panjatkan kepada Allah SWT, karena izin-Nya, buku digital tentang Joomla
3 dan Gantry Framework ini berhasil disusun.
Joomla merupakan open source Content Management System (CMS) yang sangat populer
untuk membangun website dengan mudah. Sedangkan yang dimaksud dengan Content Management
System adalah perangkat lunak untuk menambahkan, mengedit, menghapus, atau mengelola konten
website.
Gantry Framework merupakan kerangka kerja yang dikembangkan oleh Rockettheme untuk
mempermudah dalam mengembangkan desain template CMS Joomla yang fleksibel dan solid. Sama
seperti Joomla, Gantry Framework berlisensi GPL (General Public License) sehingga Anda bebas
menggunakan dan mengembangkannya.
Dalam buku digital ini penulis membahas dari dasar apa itu Joomla dan Gantry Framework
sehingga para pembaca yang ingin belajar membuat website dapat mudah memahami. Disisi lain
penulis sertakan secara lengkap video tutorial dan segala file pendukung untuk menunjang proses
belajar. Pembaca akan diajak membuat website sekolah yang dinamis dan interaktif menggunakan
Joomla 3 dan Gantry Framework.
Penulis menyadari bahwa masih banyak sekali kekurangan di dalam buku digital ini, karenanya
penulis berharap kritik dan saran dari pembaca, agar buku digital ini dapat diperbaiki lagi sehingga
menjadi lebih baik dan bermanfaat.
Purwokerto, Oktober 2014
Penulis
Yohanes Bintang Hutabarat

TRACKING CODE 01102314SPDIG001 WWW.DIGTUTS.COM iv
DAFTAR ISI
KATA PENGANTAR ………………………………………………………... iii
DAFTAR ISI …………………………………………………………………….. iv
BAGIAN I – DASAR JOOMLA …………………………………………. iv
BAB 1 – JOOMLA …………………………………………………………… 1
1.1 Apa itu Joomla ……………………………………………………………….. 1
1.2 Kebutuhan Sistem Joomla …………………………………………………… 1
BAB 2 – PERSIAPAN ……………………………………………………….. 3
2.1 Sistem Operasi ………………………………………………………………. 3
2.2 Sumber Daya ………………………………………………………………… 3
2.3 Web Browser ………………………………………………………………… 3
2.4 Teks Editor …………………………………………………………………... 3
2.5 Koneksi Internet ……………………………………………………………... 3
2.5 Localhost …………………………………………………………………….. 3
2.8 Konfigurasi XAMPP ………………………………………………………… 5
2.9 Domain dan Web Hosting …………………………………………………… 6
BAB 3 – MENGENAL JOOMLA …………………………………………… 7
3.1 Membuat Database …………………………………………………………... 7
3.2 Instal Joomla Database Contoh Data ………………………………………… 9
3.3 Menelusuri Joomla 3.3.x …………………………………………………….. 11
3.2.1 Frontend Joomla 3.3.x ………………………………………………... 11
3.2.2 Backend Joomla 3.3.x ………………………………………………… 12
BAB 4 – EKSTENSI JOOMLA …………………………………………….. 14
4.1 Plugin ………………………………………………………………………... 14
4.2 Component …………………………………………………………………... 15
4.3 Module ………………………………………………………………………. 15
4.4 Language …………………………………………………………………….. 17
4.5 Template ……………………………………………………………………... 17
4.6 Instal Extensions …………………………………………………………….. 17
BAB 5 – GANTRY FRAMEWORK ………………………………………… 19
5.1 Fitur Gantry Framework …………………………………………………….. 19
5.2 Mengapa Gantry Framework ………………………………………………… 20
5.3 Kebutuhan Sistem …………………………………………………………… 20
5.3 Cara Instal Gantry Gantry Framework ………………………………………. 21
5.3.1 Instal Joomla Tanpa Contoh Data ……………………………………. 21
5.3.2 Download Gantry …………………………………………………….. 23
5.3.3 Instal Gantry ………………………………………………………….. 24

TRACKING CODE 01102314SPDIG001 WWW.DIGTUTS.COM v
BAB 6 – PERENCANAAN & PERANCANGAN …………………………. 26
6.1 Tujuan Dan Manfaat Website Sekolah ……………………………………… 26
6.2 Konten Website Sekolah ……………………………………………………. 26
6.3 Struktur Menu Website Sekolah …………………………………………….. 27
6.4 Desain Tata Letak Website Sekolah …………………………………………. 28
6.5 Pengguna Website Sekolah …………………………………………………... 29
BAB 7 – KATEGORI ………………………………………………………… 31
7.1 Membuat Kategori Profiles ………………………………………………….. 31
7.2 Membuat Kategori News …………………………………………………….. 32
7.3 Mengedit Kategori …………………………………………………………… 32
BAB 8 – ARTIKEL …………………………………………………………... 34
8.1 Cara Membuat Artikel ……………………………………………………….. 34
8.2 Pengaturan Teks Editor ………………………………………………………. 35
8.3 Menambahkan Gambar ………………………………………………………. 36
8.4 Menyisipkan Video Youtube ………………………………………………… 38
8.5 Artikel Website Sekolah ……………………………………………………... 38
8.5.1 Artikel Sejarah Sekolah ………………………………………………. 39
8.5.2 Artikel Sambutan Kepala Sekolah ……………………………………. 40
8.5.3 Artikel Organisasi Siswa ……………………………………………... 40
8.5.4 Artikel Prestasi Sekolah ………………………………………………. 40
8.5.5 Artikel Fasilitas Sekolah ……………………………………………… 41
8.5.6 Artikel Contoh Berita ………………………………………………… 41
8.5.7 Artikel Informasi Admin ……………………………………………... 42
BAB 9 – MENU ………………………………………………………………. 43
9.1 Membuat Menu Di Menu Manager ………………………………………….. 43
9.2 Mengedit Menu Home ……………………………………………………….. 44
9.3 Menu Profiles ………………………………………………………………... 46
9.3.1 Membuat Menu Sejarah Sekolah …………………………………….. 47
9.3.2 Membuat Menu Sambutan Kepala Sekolah ………………………….. 48
9.3.3 Membuat Menu Guru ………………………………………………… 49
9.3.4 Membuat Menu Staf ………………………………………………….. 49
9.3.5 Membuat Menu Siswa ………………………………………………... 50
9.3.6 Membuat Menu Organisasi …………………………………………... 51
9.3.7 Membuat Menu Prestasi ……………………………………………… 51
9.3.8 Membuat Menu Fasilitas ……………………………………………... 51
9.4 Menu News …………………………………………………………………... 52
9.5 Menu Gallery ………………………………………………………………… 53
9.6 Menu Contact ………………………………………………………………... 53
9.7 Menu Admin …………………………………………………………………. 55
9.8 Menu Create Article ………………………………………………………….. 55
9.9 Menu Edit User Profile ………………………………………………………. 56
9.10 Menu Options ………………………………………………………………. 56
9.11 Merubah Alias Pada Menu ………………………………………………...... 57

TRACKING CODE 01102314SPDIG001 WWW.DIGTUTS.COM vi
BAB 10 – BEKERJA DENGAN KOMPONEN …………………………….. 59
10.1 Ekstensi Komponen RokGallery …………………………………………… 59
10.1.1 Kebutuhan Sistem RokGallery ……………………………………… 59
10.1.2 Fitur RokGallery …………………………………………………….. 59
10.2 Instalasi RokGallery ………………………………………………………... 60
10.3 Menu Guru Dengan RokGallery ……………………………………………. 61
10.3.1 Membuat Galeri Guru ……………………………………………… 61
10.3.2 Mengedit Menu Guru ………………………………………………. 63
10.3.3 Mengedit Informasi Guru …………………………………………... 64
10.3.4 Merapikan Halaman Detail ………………………………………… 65
10.4 Menu Staf Dengan RokGallery …………………………………………….. 66
10.4.1 Membuat Galeri Staf ………………………………………………. 66
10.4.2 Mengedit Menu Staf ………………………………………………. 67
10.4.3 Mengedit Informasi Staf …………………………………………… 68
10.4.4 Merapikan Halaman Detail Staf …………………………………… 68
10.5 Menu Gallery Dengan RokGallery …………………………………………. 69
10.5.1 Membuat Galeri ……………………………………………………. 69
10.5.2 Mengedit Menu Gallery ……………………………………………. 69
10.5.3 Mengedit Informasi Gallery ………………………………………... 70
BAB 11 – BEKERJA DENGAN MODUL …………………………………... 72
11.1 Kebutuhan Modul Web Sekolah ……………………………………………. 72
11.2 Posisi Modul Template Gantry ……………………………………………... 73
11.3 Instalasi Modul Google Maps ………………………………………………. 74
11.4 Membuat Slideshow ………………………………………………………... 75
11.4.1 Membuat Galeri Slideshow ………………………………………… 75
11.4.2 Membuat Modul Slideshow ………………………………………... 76
11.5 Membuat Pesan Selamat Datang …………………………………………… 77
11.6 Membuat Modul Search …………………………………………………….. 78
11.7 Membuat Login Form ………………………………………………………. 79
11.8 Membuat Link Berita Terbaru ……………………………………………… 79
11.9 Logo Organisasi Siswa …………………………………………………… 80
11.10 Peta Sekolah ………………………………………………………………. 81
11.11 Admin Menu ………………………………………………………………. 84
11.12 Ordering Modul …………………………………………………………… 85
BAB 12 – BEKERJA DENGAN PLUGIN ………………………………….. 87
12.1 Instal Plugin JLSecure My Site ……………………………………………... 87
12.2 Konfigurasi Plugin JLSecure My Site ……………………………………… 88

TRACKING CODE 01102314SPDIG001 WWW.DIGTUTS.COM vii
BAB 13 – AKSES PENGGUNA …………………………………………….. 89
13.1 Menu Users …………………….…………………………………………… 89
13.2 Daftar Kendali Akses ………………………………………………………. 90
13.3 Membuat Pengguna Baru …………………………………………………… 95
13.4 Menonaktifkan Pendaftaran Pengguna ……………………………………... 96
13.5 Hak Akses Pengguna Grup Manager ………………………………………. 97
BAB 14 – BEKERJA DENGAN TEMPLATE GANTRY …………………. 99
14.1 Mengedit Logo Template Gantry …………………………………………… 99
14.2 Preset Style Template Gantry ………………………………………………. 101
14.3 Menyembunyikan Brand Gantry …………………………………………… 101
14.4 Membuat Copyright Website ……………………………………………….. 101
14.5 Tombol Back To Top ………………………………………………………. 102
14.6 Membuat Favicon Website Sekolah ………………………………………... 102
14.7 Custom CSS Template Gantry ……………………………………………… 104
BAB 15 – WEB ONLINE …………………………………………………….. 106
15.1 Mendaftar Domain Gratis …………………………………………………... 106
15.2 Mendaftar Server Hosting Gratis …………………………………………… 108
15.3 Pointing Nama Domain ke Server Hosting ………………………………… 111
15.3.1 Mengetahui Name Server Idhostinger ……………………………… 111
15.3.2 Pointing Nama Domain ke Server Idhostinger ……………………... 112
15.3.3 Mempercepat Propagasi Domain Name Server ……………………. 113
15.4 Upload Website Sekolah ke Server Hosting ……………………………….. 115
15.4.1 Cara Masuk Kontrol Panel Idhostinger ……………………………. 115
15.4.2 Upload File Website Melalui File Manager ……………………….. 116
15.4.3 Upload File Website Melalui FTP Client ………………………….. 116
15.5 Upload Database Website Sekolah …………………………………………. 119
15.5.1 Ekspor Database di Localhost …………………………………….. 120
15.5.2 Membuat Database ke Hosting Gratis Idhostinger ……………….. 120
15.5.3 Impor Database ke Hosting Gratis Idhostinger …………………… 122
15.5.4 Konfigurasi Website Sekolah di Server Hosting Gratis ……..……. 123
BAB 16 – GLOBAL CONFIGURATION …………………………………... 126
16.1 Mengaktifkan Captcha ……………………………………………………… 126
16.2 Pengaturan Global Configuration Server Joomla ………………………….. 128
BAB 17 – LANGUAGE ………………………………………………………. 130
17.1 Language Manager …………………………………………………………. 130
17.2 Merubah Bahasa Frontend dan Backend Website Sekolah …………………. 130

TRACKING CODE 01102314SPDIG001 WWW.DIGTUTS.COM viii
BAB 18 – SEO ………………………………………………………………… 132
18.1 Mengaktifkan SEF URL Joomla ……………………………………………. 132
18.2 Meta Descriptions dan Meta Keywords …………………………………….. 133
18.3 Submit Website ke Mesin Pencari Google …………………………………. 134
18.4 Membuat Sitemap Dengan Komponen Xmap ……………………………… 135
18.4.1 Instal Komponen Xmap …………………………………………… 135
18.4.2 Membuat Sitemap Dengan Komponen Xmap …………………….. 136
18.4.3 Submit XML Sitemap ke Google Webmaster Tools ……………… 137
18.5 Google Analytics …………………………………………………………… 139
18.6 Merubah Meta Tag Name Generator Joomla ………………………………. 141
BAB 19 – PENUTUP …………………………………………………………. 143

TRACKING CODE 06103114SPDIG001 WWW.DIGTUTS.COM 1
BAB 1 – JOOMLA
1.1 Apa itu Joomla
Joomla merupakan open source Content Management System (CMS) yang sangat populer
untuk membangun website dengan mudah. Content Management System adalah perangkat lunak untuk
menambahkan, mengedit, menghapus, atau mengelola konten website.
Gambar 1.1 Joomla
CMS Joomla memiliki fitur yang sangat kompleks sehingga Anda dapat menggunakannya
untuk membuat website seperti :
 Website Pribadi / Blog
 Website Perusahaan
 Website Sekolah
 Website Portal Berita
 Website Ecommerce (Toko Online)
 Online Reservations seperti website pemesanan tiket
 Website Pemerintah
 Website Organisasi
 Dan masih banyak lagi
Karena Joomla mempunyai lisensi General Public License (GPL) yang bersifat open source,
Anda dapat menggunakannya dengan gratis serta bebas berkarya untuk mengembangkan CMS Joomla
sesuai dengan keinginan Anda. Itulah sebabnya Joomla menjadi CMS yang populer dan telah
mendapatkan Award-Winning Content Management System.
1.2 Kebutuhan Sistem Joomla
Joomla dirancang agar mudah diisntal, diatur dan digunakan oleh para pengguna. Karena
Joomla sangat mudah digunakan, sebagai seorang desainer atau pengembang web, Anda dapat dengan
mudah dan cepat membangun situs untuk bisnis Anda menggunakan Joomla.
Joomla dikembangkan dengan mengikuti perkembangan teknologi web secara global,
sehingga Joomla selalu merilis update versi terbarunya. Saat buku digital ini ditulis, CMS Joomla 3
versi terbaru adalah Joomla versi 3.3.6 dengan kebutuhan sistem seperti:

Database dan Web Server Rekomendasi Minimum Informasi
PHP (Magic Quotes GPC off) 5.4+ 5.3.10+ http://www.php.net
MySQL (InnoDB support required) 5.1+ 5.1+ http://www.mysql.com
PostgreSQL 10.50.1600.1+ 10.50.1600.1+ http://www.microsoft.com/sql
Apache (mod_mysql, mod_xml, dan
mod_zlib)
2.x + 2.x + http://www.apache.org
Nginx 1.1 1.0 http://wiki.nginx.org/
Microsoft IIS 7 7 http://www.iis.net
Tabel 1 Kebutuhan Sistem Joomla 3.3.6
Dengan mengetahui kebutuhan sistem CMS Joomla 3, Anda dapat mempersiapkan web server
dan database yang tepat sesuai dengan kebutuhan sistem Joomla sehingga CMS Joomla yang diinstal
dapat berjalan dengan baik

BAB 2 – PERSIAPAN
embangun sebuah website membutuhkan persiapan dan perencanaan yang matang.
Seperti ketika kita akan membangun sebuah rumah tentu dibutuhkan persiapan dan
perencanaan seperti uang, desain rumah, material, tukang, dan lain-lain. Membangun sebuah website
pun demikian, dibutuhkan juga rencana dan berbagai persiapan seperti desain website, materi untuk
konten website, serta perangkat lunak penunjang. Namun dalam bab ini akan dibahas mengenai
persiapan perangkat lunak apa saja yang dibutuhkan untuk membangun sebuah website menggunakan
Joomla. Untuk Perencanaan & Perancangan website akan dibahas di Bab 6.
2.1 Sistem Operasi
Agar tidak terjadi berbagai permasalahan penulis menganjurkan Anda untuk menggunakan
sistem operasi Windows 7, 8, dan 8.1 ketika mempraktekan semua materi yang ada di dalam ebook ini,
sehingga Anda dapat mempelajari semua materi yang ada dengan lebih mudah.
2.2 Sumber Daya
Segala kebutuhan yang ada di dalam buku ini seperti software, video tutorial, contoh materi
untuk konten website, dan file lainnya telah penulis sertakan di dalam CD, diharapkan dapat
mempermudah dalam mempelajari semua materi yang ada.
2.3 Web Browser
Mengakses halaman web dibutuhkan aplikasi web browser seperti Internet Explorer, Google
Chrome, Mozilla Firefox, Opera, dan lain sebagainya. Gunakanlah web browser versi terbaru dalam
mengikuti semua tutorial untuk menghindari terjadinya masalah yang disebabkan oleh web browser.
2.4 Teks editor
Teks editor (text editor) merupakan perangkat lunak yang berguna untuk mengubah konfigurasi
file atau menulis source code bahasa pemrograman. Teks editor yang akan digunakan adalah Notepad
dan Notepad++. Teks editor Notepad++ telah disertakan di dalam CD, Anda tinggal melakukan instalasi
seperti menginstal aplikasi Windows pada umumnya.
2.6 Koneksi Internet
PC atau laptop yang selalu terkoneksi dengan internet.
2.7 Localhost
Localhost atau local hosting merupakan web server yang terinstal di komputer Anda. Cara
mudah membuat web server untuk membangun website secara offline adalah dengan menggunakan
software XAMPP. XAMPP merupakan kombinasi dari berbagai perangkat lunak dalam satu paket
seperti Apache yang berguna sebagai web server, PHP sebagai bahasa pemrograman, dan MySQL
sebagai database, Filezilla sebagai FTP untuk transfer data, dan masih banyak lagi lainnya.
M

Gambar 2.1 XAMPP
XAMPP yang akan kita gunakan dalam pembelajaran ini merupakan XAMPP yang berjalan
pada sistem operasi Windows. Cara instalasi XAMPP pada setiap versi OS Windows baik 7, 8, dan 8.1
tidaklah jauh berbeda. Software XAMPP telah penulis sertakan di dalam CD folder software.
Langkah-langkah instalasi XAMPP sebagai berikut :
1. Copy software XAMPP yang terdapat di dalam CD ke hardisk PC Anda.
2. Setelah di copy, klik kanan software XAMPP lalu pilih Run as administrator dan klik
Yes.
3. Akan keluar peringatan Pertanyaan yang berarti “Terlihat ada memiliki Anti Virus yang
sedang berjalan. Dalam beberapa kasus, mungkin akan menghambat atau mengganggu
proses instalasi software. Lanjutkan instalasi?”, klik Yes saja.
Gambar 2.2 Qustion XAMPP
4. Akan muncul message box lagi yang menginformasi bahwa sebaiknya jangan instal
XAMPP di dalam direktori program files, karena dapat mengganggu hak akses pada
XAMPP. Lalu klik OK.
Gambar 2.3 Warning XAMPP
5. Pada tampilan Setup Klik Next.
6. Pilih direktori folder dimana XAMPP akan diinstal. Sesuai default saja yaitu C:xampp
dan klik NEXT.
Gambar 2.4 Folder Instalasi XAMPP

7. Pada tampilan Bitnami for XAMPP hilangkan tenda centang pada “Learn more about
Bitnami for XAMPP” selanjutnya klik Next.
8. Pada tampilan Ready to Install klik Next.
9. Tunggu proses instalasi selesai.
Gambar 2.5 Setup XAMPP
10. Pada tampilan Completing the XAMPP Setup Wizard. Pastikan beri tanda centang
pada Do you want to start the Control Panel now. Lalu klik Finish.
11. Control Panel XAMPP akan terbuka, dari Control Panel itulah Anda dapat mengaktifkan
berbagai modul XAMPP hanya dengan menekan tombol Start.
Gambar 2.6 Control Panel XAMPP
Video Tutorial cara instalasi XAMPP di Windows bisa Anda lihat pada CD Video
Tutorial  BAB 2 – PERSIAPAN  0201 – Instal XAMPP di Windows 8.1
2.8 Konfigurasi XAMPP
Konfigurasi XAMPP ini dimaksudkan untuk menghindari terjadinya error ketika mengunggah
atau upload file berukuran besar ke dalam web server. Secara default batas upload XAMPP yaitu 2 MB.
Batas upload tersebut dapat dirubah dengan cara mengedit source code php.ini. Langkah-langkah
mengedit source code php.ini sebagai berikut:
1. Pastikan pada Control Panel XAMPP tidak terdapat modul yang aktif.

Gambar 2.7 Modul XAMPP
2. Cari file php.ini yang terdapat pada direktori C:xamppphpphp.ini.
3. Buka file php.ini dengan Notepad++.
4. Tekan ctrl+F untuk mencari kode upload_max_filesize=2M
5. Edit baris kode upload_max_filesize=2M menjadi upload_max_filesize=10M.
Tujuannya untuk merubah batas upload yang semula 2 MB menjadi 10 MB.
Gambar 2.8 Upload Limit XAMPP
Video Tutorial cara konfigurasi XAMPP di Windows bisa Anda lihat pada CD Video
Tutorial  BAB 2 – PERSIAPAN  0202 – Konfigurasi XAMPP
2.9 Domain dan Web Hosting
Domain dan web hosting merupakan kebutuhan utama jika Anda ingin membuat website
menjadi online. Domain dan web hosting layaknya soulmate yang tidak bisa dipisahkan. Domain
merupakan nama unik yang diberikan untuk mengidentifikasi nama server komputer seperti web
server atau email server di jaringan internet. Web hosting adalah salah satu bentuk layanan jasa
penyewaan tempat penyimpanan file/data website di server yang selalu terkoneksi dengan jaringan
internet sehingga data tersebut dapat diakses oleh pengguna dari semua tempat secara simultan.
Selebihnya mengenai domain dan web hosting akan dibahas pada Bab 15 – WEB ONLINE.

BAB 3- MENGENAL JOOMLA
ebelum lebih jauh bekerja dengan Joomla, sebaiknya kita mengenal terlebih dahulu Joomla
itu seperti apa dan bagaimana. Hal pertama yang harus dilakukan adalah melakukan
instalasi Joomla terlebih dulu di localhost. Instalasi Joomla yang akan kita lakukan yaitu menginstal
Joomla menggunakan database contoh data (sample data). Maksud dari instal Joomla menggunakan
contoh data adalah melakukan instalasi Joomla dengan menggunakan database yang berisi data / konten
fiktif, database tersebut memang sudah disediakan dari pihak developer Joomla sendiri dengan tujuan
sebagai contoh website bagi pengguna Joomla yang masih pemula.
3.1 Membuat Database
Database secara ringkas digambarkan sebagai repositori untuk data. Setiap penginstalan Joomla
membutuhkan database untuk menyimpan data seperti artikel, kategori, menu, pengguna, dan lain
sebagainya. Nantinya pada proses penginstalan Joomla membutuhkan informasi database, pengguna
database, dan password pengguna database. Semua informasi tersebut bisa Anda dapatkan setelah
membuat database melalui phpMyAdmin yang terdapat pada XAMPP. Langkah-langkah pembuatan
database melalui phpMyAdmin sebagai berikut:
1. Jalankan XAMPP Control Panel lalu Start pada modul Apache dan MySQL.
Gambar 3.1 Modul XAMPP
2. Buka web browser lalu ketikkan localhost/phpmyadmin.
3. Klik tab menu Basis Data dan buatlah basis data, sebagai contoh nama basis datanya
joomla dan klik tombol Buat.
Gambar 3.2 Membuat Database
S

4. Setelah basis data dibuat, beralih ke tab menu Pengguna untuk membuat pengguna basis
data.
5. Klik Tambahkan Pengguna.
Gambar 3.3 Tambahkan Pengguna Database
6. Anda akan dihadapkan dengan form Informasi Masuk untuk pembuatan pengguna.
Lakukan pengaturan sebagai berikut :
 Username  Gunakan Text Field Silahkan diisi dengan nama pengguna.
 Host Lokal  Localhost.
 Kata Sandi  Gunakan Text Field  Silahkan diisi dengan password Anda.
 Ketik Ulang  Ketik ulang kata sandi tadi.
 Hasilkan kata Sandi  Tidak perlu / Biarkan saja
Gambar 3.4 Form Pengguna Database
7. Bergulir ke halaman bawah terdapat form Hak Akses Global lalu beri tanda centang pada
Pilih Semua.
Gambar 3.5 Hak Akses Global Database
8. Jika sudah dipastikan semua benar, klik tombol Kirim yang terdapat di bawah halaman.

3.2 Instal Joomla Database Contoh Data
Pada sebelumnya kita sudah membuat database, sekarang kita lanjut melakukan instalasi
Joomla dengan database contoh data sebagai berikut:
1. Buka direktori C:xampphtdocs lalu buat folder dengan nama joomla.
2. Copy file Joomla_3.3.6-Stable-Full_Package.zip yang terdapat dalam CD  cms ke
dalam folder joomla (C:xampphtdocsjoomla) lalu ekstrak.
Gambar 3.6 Ekstrak File
3. Lalu buka web browser dan ketikkan url localhost/joomla.
4. Pada halaman Konfigurasi Utama lakukan pengaturan sebagai berikut :
 Pilih Bahasa ganti menjadi Bahasa Indonesia.
 Nama Situs diisi dengan Joomla 3. (Terserah Anda)
 Deskripsi diisi dengan Instal Joomla 3 dengan contoh data. (Terserah Anda)
 Email Admin diisi dengan email Anda yang valid.
 Nama Pengguna Admin silahkan diisi dengan nama Anda.
 Sandi Admin silahkan diisi dengan password yang mudah diingat oleh Anda
namun susah ditebak oleh orang lain.
 Konfirmasi Sandi Admin diisi dengan Sandi Admin yang sebelumnya Anda
ketikkan.
 Padamkan Situs pilih Tidak.
 Jika semua sudah terisi dengan benar klik tombol Berikutnya.
Gambar 3.7 Contoh Konfigurasi Utama Instal Joomla
5. Pada halaman Konfigurasi Database isikan data-data yang dibutuhkan sesuai dengan
database yang telah Anda buat sebelumnya melalui PhpMyAdmin. Contoh :

 Tipe Database  MySQLi
 Nama Host  localhost
 Nama Pengguna  Diisi dengan Nama Pengguna Database yang telah dibuat
 Sandi  Diisi dengan sandi pengguna database yang telah dibuat
 Nama Database  Diisi dengan nama database yang sudah dibuat
 Awalan Tabel  Biarkan sesuai default
 Proses Database Lama  Buat Cadangan
 Klik tombol Berikutnya.
Gambar 3.8 Contoh Konfigurasi Database
6. Pada halaman Finalisasi, nah disinilah Anda akan memilih akan menggunakan
database contoh data atau tidak. Terdapat 6 (enam) pilihan Pasang Contoh Data dan
silahkan Anda pilih Contoh data Belajar Joomla! English (GB). Untuk Pengaturan
Email pilih Tidak.
Gambar 3.9 Contoh Data Joomla
7. Klik tombol Pasang.
8. Setelah proses pemasangan selesai jangan lupa klik tombol Hapus direktori
Pemasangan.
Video Tutorial membuat database dan cara instal joomla contoh data bisa Anda lihat pada
CD  BAB 3 – MENGENAL JOOMLA  Video Tutorial  0301 – Membuat
Database dan Instal Joomla Contoh Data

3.3 Menelusuri Joomla 3.3.x
Sebelumnya kita sudah melakukan instalasi Joomla menggunakan contoh data, saat ini kita
memulai mempelajari apa saja yang ada pada Joomla 3.
3.3.1 Frontend Joomla 3.3.x
Pengembang web menyebut frontend adalah tampilan antarmuka (interface) web yang dilihat
dan langsung berinteraksi dengan pengguna ketika mengakses website tersebut. Frontend pada
umumnya terdapat logo, menu, artikel, form, kolom samping (sidebar) dan lain sebagainya. Frontend
Joomla versi 3.3.x terdiri dari dua (2) template bawaan Joomla yaitu Protostar dan Beez3 yang bisa
Anda gunakan dengan memilih salah satunya melalui Template Manager.
Protostar Beez3
Gambar 3.10 Template Protostar dan Beez3
CMS Joomla telah menggunakan teknologi Bootstrap sehingga interface Joomla mampu
menyesuaikan web browser ketika diakses dari berbagai platform seperti smartphones, ipad, laptop,
maupun PC (responsive design).
Gambar 3.11 Joomla Responsive Design

3.3.2 Backend Joomla 3.3.x
Backend merupakan halaman administrator untuk mengelola segala kebutuhan website. Di
dalam backend Joomla terdapat berbagai menu pengaturan untuk mengelola segala fitur-fitur Joomla
seperti :
Gambar 3.12 Backend Joomla 3
1. System
Di dalam menu System terdapat berbagai pilihan konfigurasi sistem CMS Joomla seperti
Control Panel, Global Configuration, Global Check-in, Clear Cache, Purge Expired
Cache, dan System Information. Pada menu System itulah seorang administrator web
dapat melakukan konfigurasi Joomla secara global.
2. Users
Menu Users memungkinkan administrator web untuk mengelola segala kebutuhan
sistem registrasi atau mengelola pengguna melalui pengaturan Users, Groups, Access
Levels, User Notes, User Note Categories dan Mass Mail Users.
3. Menus
Menu Menus memungkinkan administrator web membuat berbagai menu disesuaikan
dengan segala kebutuhan item untuk keperluan navigasi pengguna web.
4. Content
Menu Content berisi berbagai pengaturan seperti Article Manager, Category Manager,
Featured Articles, dan Media Manager.
 Pada Article Manager Anda dapat membuat, mengedit, menerbitkan, dan
menghapus artikel untuk konten web.
 Pada Category Manager Anda dapat membuat berbagai kategori untuk
mengorganisasi semua artikel yang dibuat.
 Pada Featured Articles Anda dapat mengelola segala artikel pilihan.
 Pada Media Manager Anda dapat mengupload, mengelola, bahkan menghapus
gambar/foto.
5. Components
Menu Components dalam backend Joomla berfungsi untuk mengkonfigurasi atau
mengelola segala aspek ekstensi komponen yang terinstal.
6. Extensions
Menu Extensions berisi berbagai konfigurasi untuk menginstal, mengelola, dan
menghapus extensions Joomla seperti components, module, plugins, template, dan
language.
7. Media Manager
Menu Media Manager terdapat sub menu dari menu Content. Menu Media Manager
berfungsi untuk mengupload, mengelola, dan menghapus file gambar seperti .jpeg, .gif,
dan .png. Media Manager terintegrasi dengan artikel teks editor, sehingga Anda dapat
dengan mudah menyisipkan gambar pada artikel.

8. Help
Menu Help berisi berbagai informasi dan panduan untuk Anda jika mengalami masalah
atau kesulitan mengenai CMS Joomla.

BAB 4 – EXTENSIONS JOOMLA
xtensions atau yang kita sebut ekstensi merupakan perangkat lunak tambahan yang diinstal
ke dalam Joomla, ekstensi berguna untuk menambah fungsi atau fitur Joomla. Tipe
ekstensi pada pada Joomla yaitu plugin, module, component, library, package, language, dan template.
Berbagai ekstensi Joomla dapat Anda download di http://extensions.joomla.org/.
Gambar 4.1 Joomla Extensions Directory
Dalam bab ini akan dijelaskan mengenai lima (5) tipe ekstensi dasar Joomla seperti plugin,
component, module, language, dan template.
Gambar 4.2 Extensions Joomla
4.1 Plugin
Plugin merupakan ekstensi Joomla yang berinteraksi dengan sistem untuk menambah
fungsionalitas Joomla secara spesifik. terjadinya event dan dapat berinteraksi dengan sistem maupun
ektensi yang lain untuk memperluas fungsionalitas Joomla secara spesifik. Pada dasarnya plugin
dirancang untuk menampilkan konten di dalam komponen dan modul. Namun, terkadang ada beberapa
ekstensi seperti komponen atau bahkan modul dapat berjalan dengan syarat harus menginstal plugin
dan mengaktifkannya lebih dulu melalui Plugin Manager. Setelah plugin diinstal, plugin akan
menambah fungsi pada sistem Joomla itu sendiri tergantung dari plugin itu dibuat untuk apa.
E

Gambar 4.3 Plugin Manager
Pada Joomla download direktori, jenis ektensi Plugin ditandai dengan icon
4.2 Component
Components atau komponen merupakan unit fungsi utama Joomla seperti aplikasi mini.
Analoginya seperti ini, jika joomla merupakan sistem operasi maka komponen merupakan aplikasi
dekstopnya. Komponen merupakan ekstensi yang paling kompleks dibanding lainnya, pada umumnya
komponen terdiri dari beberapa ekstensi seperti plugin dan modul. Pada layar kerja Joomla, komponen
memiliki dua bagian yaitu backend Administrator dan frontend. Sebagai contoh komponen Banners
(com_banners) adalah komponen yang menangani banner (banners).
Gambar 4.4 Direktori Component
Di bagian frontend, pengguna dapat melihat banner yang diterbitkan dan di bagian backend
administrator dapat mengelola banner untuk diterbitkan. Contoh komponen standar bawaan dari Joomla
3 seperti : Content (com_content), Banners (com_banners), Contact (com_contact) , News Feeds
(com_newsfeeds), dan Weblinks (com_weblinks), Search (com_search) dan lain sebagainya.
Pada Joomla download direktori, jenis ektensi Component ditandai dengan icon
4.3 Module
Module atau modul merupakan tipe ekstensi Joomla yang hampir sama dengan komponen,
namun tidak sekompleks komponen. Oleh sebab itu modul lebih ringan dan fleksibel dibandingkan
komponen. Sebagai contoh pemahaman, sebuah sepeda motor membutuhkan lampu hias yang kelap-
kelip untuk mempercantik motor, maka dibuatlah lampu hias yang nanti dipasang pada bagian mana

saja pada sepeda motor. Lampu itu kita anggap seperti modul, yang menambah fungsi dan bisa kita
pasang dimana saja.
Pada frontend, modul dapat diletakan dimanapun disesuaikan dengan module positions (posisi
modul) dari template tersebut. Anda bisa melihat posisi modul sebuah template dengan membaca
dokumentasi dari template yang ingin Anda gunakan. Jika Anda ingin melihat posisi modul dari sebuah
template yang terinstal, dalam contoh ini misal template Protostar. Caranya seperti di bawah ini :
1. Login ke dalam Administrator Joomla (localhost/joomla/administrator).
2. Klik Extensions  Template Manager.
3. Klik Options (terletak di sebelah kanan atas).
4. Pada Previews Module Positions jadikan Enabled lalu klik Save & Close.
5. Klik gambar mata pada Template Protostar.
Gambar 4.5 View Protostar
6. Hasil tampilan posisi modul template protostar.
Gambar 4.6 Module Position Protostar
Dari contoh Gambar 4.6 di atas kita dapat melihat bahwa salah satu modul, yaitu module login
terletak pada position-7. Untuk modul lainnya bisa Anda lihat melalui Module Manager.
Pada Joomla download direktori, jenis ektensi Module ditandai dengan gambar

4.4 Language
Language merupakan tipe ekstensi yang menerjemahkan bahasa string teks Joomla. Ekstensi
ini berefek dengan merubah bahasa yang terdapat pada bagian frontend dan backend Administrator
Joomla. Pada Joomla 3 Anda dapat menginstal dan mengelola ekstensi Language melalui Extensions
 Language Manager.
Gambar 4.7 Language Manager
4.5 Template
Template merupakan desain antarmuka web, dengan ekstensi template Anda dapat merubah
desain tampilan antarmuka frontend maupun backend Joomla. Anda dapat mengakses pengaturan
template melalui Extensions  Template Manager.
Gambar 4.8 Template Manager
Di halaman Template Manager terdapat pengaturan Styles dan Templates. Jika Anda memilih
template pada halaman Styles, maka Anda akan dihadapkan dengan halaman WYSWYG (What You
See What You Get) pengaturan desain template. Maksudya di halaman Styles Anda tinggal mengatur
template sesuai dengan keinginan Anda hanya tinggal klik klik saja tidak perlu repot.
Sedangkan jika Anda klik pengaturan Templates lalu memilih salah satu template untuk di
edit, maka Anda akan dihadapkan dengan halaman pengaturan file atau source code template. Pada
halaman itu lah Anda dapat mengedit seperti file php, css, less dan lain sebagainya.
4.6 Instal Extensions
Sebelum menginstal ekstensi Joomla, pastikan terlebih dahulu ektensi yang akan Anda instal
telah support dengan versi CMS Joomla yang Anda gunakan sehingga tidak terjadi error saat proses
instalasi ekstensi tersebut. Bagaimana cara mengetahui ekstensi tersebut telah support dengan versi
CMS Joomla yang kita pakai? Untuk mengetahuinya, pada halaman download ekstensi pastikan Anda

baca dengan seksama mengenai informasi ekstensi tersebut. Perhatikan mengenai informasi tipe
ekstensi dan kompatibilitasnya lalu baca juga dokumentasi dari ekstensi tersebut.
Gambar 4.9 Informasi Ektensi
Sebagai contoh pada Gambar 4.9 tipe ekstensi RokGallery adalah Component, Module, dan
Plugin, sedang ekstensi RokGallery kompatibel dengan Joomla 2.5 dan Joomla 3. Ketika Anda klik
tombol Documentation maka Anda akan diarahkan ke halaman web dokumentasi ekstensi tersebut.
Cara instalasi ekstensi Joomla seperti Plugin, Component, Module, Language, dan Template
akan kita praktekan satu persatu disaat mengerjakan contoh kasus membuat website sekolah.

BAB 5 – GANTRY FRAMEWORK
antry Framework merupakan kerangka kerja yang dikembangkan oleh Rockettheme
untuk mempermudah pengembangan desain template CMS Joomla yang fleksibel dan
solid. Pada backend Joomla, Gantry Framework berguna untuk mengatur aspek desain template. Gantry
Framework mempermudah pengembang template untuk menulis kode (web programming) template.
Sama seperti Joomla, Gantry Framework berlisensi GPL (General Public License) sehingga
Anda bebas menggunakan dan mengembangkannya.
5.1 Fitur Gantry Framework
Gantry Framework dikemas penuh fitur yang diciptakan untuk pengembangan desain layout
template. Gantry Framework memiliki fitur-fitur diantaranya seperti :
1. Responsive Design
Menggunakan teknologi Bootstrap sehingga
support dengan berbagai platform web
browser seperti smartphone, tablet, dan
desktop.
2. Stunning New Administrator Interface
Gantry menyediakan antarmuka yang user-
friendly untuk mengatur segala aspek desain
template.
Gambar 5.1 Gantry Framework Interface
3. Preset Style
Mempermudah dalam merubah desain
template dan dapat dikonfigurasi kapanpun.
Gambar 5.2 Preset Style
4. Flexible Grid Layout System
Mengontrol ukuran tiap blok layout dan
posisi modul dengan mudah hanya tinggal
drag saja.
Gambar 5.3 Grid Layout System
5. Advanced Typography
Memanfaatkan kehebatan typography dari
Bootstrap untuk membuat table, form, dan
berbagai elemen interface lainnya.
G

Untuk mempermudah pemahaman mengenai gantry framework beserta dengan fitur-
fiturnya, Anda dapat melihat official video Gantry Framework yang terdapat pada
CD  Video Tutorial  BAB 5 – Gantry Framework  0501 – Gantry4 Joomla
Overview dan 0502 – Gantry4 Joomla Features
5.2 Mengapa Gantry Framework?
Selalu ada alasan dibalik setiap pilihan. Dan alasan penulis memilih Gantry Framework adalah
sebagai berikut :
1. Gantry Framework berlisensi GPL dan gratis untuk digunakan.
2. Gantry Framework merupakan kerangka kerja yang solid, fleksibel, dan canggih untuk
mengembangkan desain template CMS Joomla.
3. Gantry Framework memiliki banyak fitur.
4. Gantry Framework memiliki dokumentasi yang lengkap dan bisa Anda lihat di
http://gantry-framework.org/documentation.
5. Memiliki komunitas dan support yang baik, bisa Anda lihat di http://gantry-
framework.org/support.
5.3 Kebutuhan Sistem
Agar dapat berjalan dengan baik Gantry Framework (Template Gantry) memiliki beberapa
kebutuhan sistem. Di bawah ini merupakan beberapa kebutuhan sistem Gantry Framework.
1. Kebutuhan Joomla
Sangat direkomendasikan untuk selalu menggunakan Joomla versi 2.5.x dan 3.x terbaru.
2. Kebutuhan Server
Persyaratan minimum server untuk menjalankan Gantry Framework adalah:
 PHP 5.2.17+ (disarankan 5.3+)
 MySQL 3.23 (disarankan 5+)
 Apache 1.3 (disarankan 2.2+)
 mod_mysql
 mod_xml
 mod_zlib
3. Kebutuhan Browser
Kebutuhan web browser untuk mengakses interface Gantry Framework (Template Gantry):
 Firefox 4+
 Safari 5+
 Google Chrome 10+
 Opera 10+
 Internet Explorer 8+

5.3 Cara Instal Gantry Framework
5.3.1 Instal Joomla Tanpa Contoh Data
Pada bab 3.2 sudah dijelaskan bagaimana cara instalasi Joomla menggunakan contoh data,
namun pada bagian ini kita akan menginstal Joomla 3 tanpa menggunakan contoh data alias ‘kosongan’
karena pada nantinya kita akan membuat konten itu sendiri sesuai dengan contoh kasus yang akan kita
kerjakan yaitu membuat website sekolah sederhana.
Langkah-langkah instalasi :
1. Buka XAMPP lalu Start Apache & MySQL.
2. Buat folder sekolah di dalam direktori C:xampphtdocs.
Gambar 5.4 Folder Sekolah
3. Copy file Joomla_3.3.6-Stable-Full_Package.zip yang di dalam CD folder cms ke
dalam direktori C:xampphtdocssekolah.
4. Ekstrak Joomla_3.3.6-Stable-Full_Package.zip tersebut.
5. Buka web browser, ketikkan url localhost/phpmyadmin untuk membuat database.
6. Klik tab menu Basis data lalu pada kolom Buat basis data diisi dengan sekolah (atau
terserah Anda).
Gambar 5.6 Buat Basis Data Sekolah
7. Setelah Database dibuat, klik database tersebut yang terletak disisi kiri halaman
PhpMyAdmin.
Gambar 5.7 Database Sekolah

8. Lalu klik tab menu Hak Akses dan klik Tambahkan Pengguna.
9. Pada halaman Tambahkan Pengguna dibagian Informasi Masuk silahkan isi informasi
pengguna database sesuai keinginan Anda.
 Username: diisi adsek (atau terserah Anda)
 Host: Semua Inang dirubah menjadi Lokal (localhost).
 Password : untuk password sebagai contoh diisi 12345 (atau terserah Anda)
10. Jangan lupa pada hak akses global pengguna pilih semua dan klik Kirim.
Gambar 5.8 Hak Akses Pengguna
11. Pada web browser buka new tab lalu ketikkan url localhost/sekolah.
12. Pada halaman Konfigurasi Utama isikan data-data sebagai berikut :
 Pilih Bahasa : Bahasa Indonesia
 Nama Situs : SMK Cyber Satria
 Deskripsi : SMK Cyber Satria merupakan Sekolah Menengah Kejuruan yang
berkonsentrasi dalam pendidikan Teknologi Informasi.
 Email Admin : isikan dengan email Anda.
 Nama Pengguna Admin : diisi terserah Anda
 Password : untuk passwordnya diisi terserah Anda.
 Konfirmasi sandi admin : silahkan masukkan password kembali
Gambar 5.9 Konfigurasi Utama
 Padamkan Situs : Tidak
13. Jika sudah Klik Berikutnya.

14. Pada halaman Konfigurasi Database isikan data-data database yang sebelumnya telah
dibuat melalui PhpMyAdmin.
 Type Database : MySQLi
 Nama Host : localhost
 Nama Pengguna : tuliskan nama pengguna database
 Sandi : tuliskan password pengguna databasenya
 Nama Database : sekolah
 Awalan Tabel : biarkan saja default
Gambar 5.10 Konfigurasi Database
15. Klik Berikutnya.
16. Pada halaman Finalisasi pada Pasang Contoh Data silahkan pilih Tidak ada
Dibutuhkan untuk dasar pembuatan situs multibahasa. Dan klik Pasang.
Gambar 5.11 Finalisasi Instal Joomla
17. Jangan lupa untuk menghapus direktori Instalasi Joomla.
5.3.2 Download Gantry Template Bundle
Gantry Template Bundle merupakan paket lengkap yang berisi Template Gantry, Gantry
Framework, Modul RokNavMenu, dan asosiasi plugin lainnya. Gantry Template Bundle bisa Anda
download di http://gantry-framework.org/download. Pada halaman download Gantry Framework untuk
Joomla Anda akan dihadapkan dengan berbagai pilihan download Gantry For Joomla seperti :
a. Gantry Framework for Joomla 2.5 + 3.2
b. Gantry Default Template for Joomla 2.5 + 3.2
c. Gantry Template Bundle for Joomla 2.5 + 3.2
d. Gantry Rocketlauncher for Joomla 2.5
e. Gantry Rocketlauncher for Joomla 3.2

Dalam contoh kasus yang akan dikerjakan, penulis akan mendownload Template Bundle for
Joomla 2.5 + 3.2 yang sudah disertakan dalam CD folder extensions karena penulis akan menggunakan
template Gantry beserta framework dan ektensi penunjangnya yang sudah dipaket menjadi satu.
5.3.3 Instal Gantry Template Bundle
Perlu diperhatikan, Anda tidak dapat menggunakan template Gantry tanpa menginstal Gantry
Framework sebab Gantry Framework merupakan sistem utama sebagai landasan untuk mengatur segala
aspek desain template Gantry. Cara instalasi Gantry Template Bundle sebagai berikut:
1. Aktifkan Apache dan MySQL (XAMPP).
2. Buka url localhost/sekolah/administrator di web browser, lalu Login
3. Klik Extensions  Extensions Manager.
Gambar 5.12 Extension Manager
4. Upload & Install gantry-4.1.25-bundle.zip. (CD  extensions)
Gambar 5.13 Upload Gantry Template Bundle
5. Setelah instalasi sukses silahkan klik Extensions  Template Manager.
Gambar 5.14 Install Gantry Sukses
6. Jadikan Gantry menjadi template default dengan klik tombol (bintang).
Gambar 5.15 Template Default

7. Check frontend, dengan membuka url localhost/sekolah di web browser.
Gambar 5.16 Frontend Template Gantry
8. Anda telah berhasil melalukan instalasi Gantry Template Bundle.

BAB 6 – PERENCANAAN
etelah mempelajari mengenai dasar-dasar instalasi Joomla dan Gantry Framework, kali ini
penulis akan mengajak Anda melakukan perencanaan dasar membuat website sekolah
sederhana yang interaktif dan dinamis menggunakan Joomla dan Gantry Framework. Mengapa website
sekolah? Karena penulis menyadari masih banyak sekali sekolah-sekolah di Indonesia yang belum
memanfaatkan teknologi informasi dengan membuat website sekolah. Website sekolah yang akan
dibuat adalah website Sekolah Menengah Kejuruan (SMK) Cyber Satria.
Perencanaan merupakan langkah pertama yang paling penting dalam membangun sebuah
website, mengapa demikian? Karena dengan perencanaan yang matang dan baik maka terciptalah
website yang baik. Tanpa adanya proses perencanaan maka proses pembuatan website sekolah tidak
akan berjalan secara sistematis dan tentunya akan terjadi banyak kesalahan.
6.1 Tujuan Dan Manfaat Website Sekolah
Ketika Anda ingin membuat rumah apa yang Anda pikirkan pertama kali? Tentu tujuan rumah
itu untuk apa bukan? Sama seperti ketika kita ingin membuat website sekolah. Hal pertama yang harus
kita pikirkan adalah apa tujuan sekolah membuat website. Dasar dalam perencanaan website sekolah
adalah kita harus memahami tujuan dan manfaat website sekolah itu sendiri. Adapun tujuan SMK Cyber
Satria membangun website sekolah yaitu sebagai media informasi pelayanan sekolah kepada
masyarakat yang bisa diakses oleh siapa saja, kapan saja dan dimana saja melalui jaringan internet.
Ada tujuan pasti ada manfaat yang ingin dirasakan. Dari tujuan pembangunan website sekolah
di atas maka akan ada manfaat bagi SMK Cyber Satria diantaranya seperti :
1. Meningkatkan citra sekolah tersebut.
2. Sebagai media promosi online.
3. Memperkenalkan profiles sekolah kepada masyarakat.
4. Memperkenalkan kegiatan dan program belajar yang diadakan oleh sekolah.
5. Sebagai bahan pertimbangan calon siswa untuk memilih sekolah.
6. Sebagai layanan dan sarana sekolah kepada siswa.
6.2 Konten Website Sekolah
Masih sama halnya dengan membuat rumah. Setelah mengetahui tujuan rumah itu untuk apa,
maka kita pasti akan berpikir nantinya di dalam rumah itu akan diisi apa saja? Isi dalam rumah sama
saja dengan konten di dalam website. Setelah mengetahui apa tujuan SMK Cyber Satria membuat
website sekolah maka akan timbul pertanyaan sederhana seperti ‘Informasi apa saja yang akan
ditampilkan di dalam website sekolah?’. SMK Cyber Satria ingin mempunyai website untuk
menampilkan informasi mengenai profil sekolah dan berita sekolah. Profil sekolah yang ingin
ditampilkan seperti sejarah sekolah, sambutan kepala sekolah, guru, staf, siswa, organisasi siswa di
sekolah, prestasi sekolah, fasilitas sekolah, galeri untuk dokumentasi album foto sekolah, dan kontak
sekolah. Berita sekolah bisa saja mengenai pengumuman sekolah kepada siswa ataupun informasi
terbaru lainnya.
S

Dari ilustrasi di atas kita menjadi tahu konten apa saja yang dibutuhkan untuk diterbitkan di
dalam website sekolah? Dan kebutuhan apa saja untuk membuat konten tersebut. Nah disini tugas kita
adalah mencari tahu (analisa) kebutuhan-kebutuhan konten tersebut. Cara paling mudah untuk mencari
tahu adalah dengan bertanya langsung kepada pihak sekolah misalnya bertanya kepada Kepala Sekolah
lalu mengumpulkan data-data untuk konten website sekolah.
Disini penulis memberi contoh kebutuhan untuk konten yang akan diterbitkan dalam website
sekolah adalah :
 Artikel tentang profil sekolah dan berita sekolah.
 Foto Guru, Staf, Siswa, dan Fasilitas Sekolah.
 Kontak sekolah seperti alamat, nomer telephone, email.
 Dan lain sebagainya.
6.3 Struktur Menu Website Sekolah
Tugas kita selanjutnya adalah membuat struktur menu website sekolah. Menu-menu apa saja
yang dibutuhkan? Kebutuhan menu tergantung dari konten, menu adalah navigasi pengguna ketika
mengakses website. Penulis menyimpulkan dari kebutuhan konten website sekolah, maka dibuatlah
struktur menu seperti gambar di bawah ini :
Gambar 6.1 Struktur Menu
No.
Main
Menu
Sub Menu
Menu item
Type
Keterangan
1. Home - Single article
Halaman awal ketika pengguna
mengakses website sekolah. Pada
halaman ini berisi informasi utama.
2. Profiles Sejarah Sekolah Single article
Halaman yang berisi artikel (konten)
mengenai informasi sejarah sekolah.
Menu Manager
Main Menu
Home
Profiles
Sejarah
Sekolah
Sambutan
Kepala Sekolah
Guru
Staf
Siswa
Organisasi
Siswa
Prestasi
Sekolah
Fasilitas
Sekolah
News
Gallery
Contact
Admin Menu
Create Article
User Profile

Sambutan Kepala
Sekolah
Single article
mengenai sambutan kepala sekolah.
Guru RokGallery
Halaman yang berisi informasi guru-guru
/ pengajar di sekolah.
Staf RokGallery
Halaman yang berisi informasi Staf Tata
Usaha / karyawan di sekolah.
Siswa RokGallery Halaman yang berisi informasi Siswa.
Organisasi Siswa Single article
mengenai organisasi sekolah untuk siswa.
Prestasi Sekolah Single article
mengenai prestasi sekolah selama ini.
Fasilitas Sekolah Single article
mengenai sarana dan prasarana sekolah.
3. News
- Category blog
Halaman berupa blog yang berisi segala
artikel (konten) mengenai berita atau
pengumuman terbaru dari sekolah.
4. Gallery
- RokGallery
Halaman yang berisi album photo
sekolah.
5. Contact - Contacts Halaman informasi kontak sekolah.
Tabel 2 Main Menu
No.
Admin
Menu
Sub Menu
Menu item
Type
Keterangan
1. Create Article - Create article
Halaman khusus admin untuk membuat
artikel melalui frontend.
2. User Profile - Edit User Profile
Halaman khusus admin untuk mengedit
profil melalui frontend.
Tabel 3 Admin Menu
Alur penampilan konten pada Joomla adalah Menu  Menu Item Type. Maksudnya menu
tersebut menampilkan konten dari artikel, kontak, komponen dan lain sebagainya. Mengenai menu akan
lebih mudah dimengerti ketika Anda bekerja membuat menu yang akan dijelaskan pada Bab 9 - MENU.
6.4 Desain Tata Letak Website Sekolah
Desain tata letak website sama saja seperti mendesain ruangan-ruangan di dalam rumah. Kita
analogikan ruangan di dalam rumah itu sama seperti dengan halaman di dalam website, setiap ruangan
di dalam rumah tentu mempunyai tata letak perabotan yang berbeda-beda.
Desain tata letak (layout) website sangat penting untuk perencanaan tampilan antarmuka web.
Dalam hal ini, desain tata letak yang dimaksud adalah mendesain konten apa saja yang akan ditampilkan
dalam satu halaman web karena tidak pasti setiap halaman website memiliki konten yang sama. Dari
desain tersebut dapat dijadikan acuan membangun tampilan website yang interaktif bagi pengguna.
Pada Joomla, desain tata letak sama dengan mengatur posisi modul.
Penulis memberikan contoh desain layout halaman menu Home pada website sekolah
disesuaikan dengan posisi modul pada template Gantry.

Gambar 6.2 Posisi Modul Menu Home Website Sekolah
No. Module Module Position
1. Logo header-a
2. Menu (main menu) header-b
3. Slideshow showcase-a
4. Module Custom HTML maintop-a
5. Content mainbody
6. Module Search, Login Form, Articles Category, Create Article, dan Edit
User Profile
sidebar-a
7. Module Custom HTML bottom-a
8. Copyright
To-Top Scroller
copyright-a
copyright-b
Tabel 2 Module Position Web Sekolah
Gambar 6.2 merupakan desain tata letak menu Home website sekolah yang disesuaikan dengan
posisi modul pada template Gantry. Dari desain tata letak halaman menu Home itulah nantinya akan
digunakan sebagai dasar untuk tata letak halaman menu lainnya, namun tidak semua modul pada menu
Home dipakai di menu lainnya. Untuk cara mengatur posisi modul pada template Gantry akan dibahas
di Bab 11 – Bekerja Dengan Modul.
Mendesain layout untuk website sekolah dapat dilakukan dengan corat-coret di secarik
kertas atau memanfaatkan berbagai software yang bisa Anda dapatkan melalui internet.
Search di Google saja dengan keywords ‘Free Mockup and Wireframe Tools’.
6.5 Pengguna Website Sekolah
Pengguna website sekolah dimaksud adalah siapa saja orang-orang yang bertanggung jawab
untuk mengurus website sekolah. Karena banyak kasus seperti sekolah membuat website namun
website tersebut hanya buat pajangan, setelah dibuat tidak diurus sama sekali. Percuma punya website
bagus-bagus tetapi tidak ada yang merawatnya, pengunjung yang datang bisa ketinggalan informasi dan
malas membuka website sekolah. Jika sudah seperti itu siapa yang rugi? Sekolah dong, bisa jadi sekolah
kehilangan calon murid yang siapa tahu bisa tertarik untuk mendaftar di sekolah tersebut.

Website juga perlu dijaga dan dirawat agar banyak pengunjung yang selalu datang untuk
melihat informasi terbaru. Terus siapa sajakah yang pada nantinya menjadi Administrator website
sekolah yang bertugas menjaga, merawat, dan meng-update website sekolah itu?
Dalam contoh kasus website SMK Cyber Satria penulis menentukan bahwa sekolah tersebut
mempunyai 2 (dua) orang pengguna dengan hak akses yang berbeda. Yang satu sebagai Admin (Super
User) dengan mempunyai tugas sebagai penanggung jawab penuh atas website sekolah. Sedangkan
yang satunya lagi hanya sebagai Manajer yang bertugas mengelola konten website sekolah seperti
meng-update artikel berita/pengumuman sekolah.
Dasarnya, yang menjadi Admin (Super User) adalah yang membuat website sekolah yaitu
Anda sendiri. Dan yang nanti menjadi Manajer adalah orang lain entah itu guru, staf, atau bisa jadi
siswa-siswi di sekolah Anda. Untuk mengelola pengguna website sekolah akan di bahas pada Bab 13
– Akses Pengguna.

BAB 7 – KATEGORI
ategori berguna untuk mengelompokkan berbagai item type atau tipe konten yang saling
berkaitan isinya. Joomla mempunyai banyak cara untuk menampilkan konten yang
dikendalikan oleh kategori. Tipe konten yang dapat dikategorisasi adalah artikel, banner, kontak, dan
tautan web.
Saat akan membuat dan menetapkan kategori-kategori, Anda harus memiliki struktur yang
terencana. Sebagai contoh, kebutuhan kategori untuk website sekolah yang akan kita buat yaitu profiles,
news, dan general. Kategori profiles berguna untuk mengelompokan artikel-artikel profiles sekolah,
sedangkan kategori news mengelompokan artikel-artikel pengumuman atau berita terbaru mengenai
sekolah dan siswa. Kategori general mengelompokan artikel-artikel lainnya.
Gambar 7.1 Struktur Kategori
7.1 Membuat Kategori Profiles
Kategori profiles berguna untuk mengelompokan artikel-artikel mengenai profiles sekolah.
Untuk membuat kategori baru, seperti ini langkah-langkahnya :
1. Login ke halaman Administrator web sekolah (localhost/sekolah/administrator).
2. Klik menu Content  Category Manager.
3. Klik New. Lalu isikan data-data sebagai berikut :
 Kolom Title diisi dengan profiles.
 Kolom Alias biarkan kosong
 Description diisi dengan ‘Kategori profiles SMK Cyber Satria’. (tanpa tanda petik)
Kategori
Profiles
Artikel 1
Artikel 2
Seterusnya..
News
Artikel 1
Artikel 2
Seterusnya..
General
Artikel 1
Artikel 2
Seterusnya..
K

Gambar 7.2 Membuat Kategori Profiles.
4. Klik Save & Close.
Video tutorial membuat kategori profiles bisa Anda lihat pada CD  Video Tutorial 
BAB – 7 KATEGORI  0701 – Membuat Kategori Profiles
7.2 Membuat Kategori News
Kategori news akan digunakan untuk mengelompokan artikel-artikel yang berisi tentang
pengumuman atau berita terbaru mengenai sekolah dan siswa. Sedangkan angkah-langkah membuat
kategori news sama dengan membuat kategori profiles, namun bedanya dipengisian deskripsinya.
1. Pada Category Manager klik New.
2. Isikan data-data sebagai berikut :
 Kolom Title diisi dengan news.
 Kolom Alias diisi news atau biarkan kosong
 Description diisi dengan ‘Kategori news berisi berita terbaru SMK Cyber Satria’.
(tanpa tanda petik)
Video tutorial membuat kategori news bisa Anda lihat pada CD  Video Tutorial  BAB
– 7 KATEGORI  0702 – Membuat Kategori News
7.3 Mengedit Kategori
Kita telah membuat dua (2) kategori yaitu profiles dan news. Jika kita melihat pada halaman
Category Manager terdapat satu kategori bawaan Joomla yaitu kategori Uncategorised. Sekarang kita
ingin merubah kategori Uncategorised menjadi menjadi kategori general. Caranya sebagai berikut:
1. Beri tanda centang pada Uncategorised.
2. Klik Edit.
Gambar 7.3 Merubah Kategori
3. Rubah datanya sebagai berikut :

 Kolom Title dirubah menjadi general.
 Kolom Alias rubah dirubah menjadi general.
 Description diisi dengan ‘kategori untuk artikel yang lainnya’. (tanpa tanda petik)
Gambar 7.4 Kategori General
Video tutorial mengedit kategori bisa Anda lihat pada CD  Video Tutorial  BAB – 7
KATEGORI  0703 – Mengedit Kategori

BAB 8 – ARTIKEL
ada Joomla, artikel merupakan konten utama. Artikel bisa saja berisi teks (HTML),
gambar, video maupun dokumen. Cara membuat artikel di Joomla sangatlah mudah. Hal
pertama yang harus dilakukan sebelum membuat artikel adalah Anda harus membuat kategori terlebih
dahulu. Kenapa harus membuat kategori? Karena pada setiap artikel yang kita buat harus
dikategorisasikan. Hal ini disebabkan artikel pada Joomla berada pada hirarki paling akhir.
 Kategori  Artikel
 Kategori  sub Kategori Artikel
 Kategori  sub Kategori  sub Kategori  Artikel
Di dalam bab ini kita akan belajar bagaimana cara membuat artikel pada CMS Joomla dan
membuat artikel untuk contoh kasus website sekolah yaitu website SMK Cyber Satria yang akan
disesuaikan dengan kategori yang telah dibuat pada bab sebelumnya.
8.1 Cara Membuat Artikel
Anda dapat mengelola artikel (membuat, mengedit, menerbitkan, dan menyimpan) melalui
Article Manager. Langkah-langkah membuat artikel baru sebagai berikut:
1. Buka halaman Administrator.
2. Klik Content  Article Manager  Add New Article.
3. Setelah itu isi kolom Title dengan judul artikel yang ingin Anda buat, sedangkan
disebelahnya terdapat kolom Alias biarkan kosong saja karena secara otomatis ketika
artikel di Save maka kolom alias tersebut akan terisi dengan judul Title yang nantinya akan
dipakai sebagai URL artikel.
Gambar 8.1 Kolom Judul Artikel
4. Tuliskan artikel pada teks editor yang memiliki interface tidak berbeda jauh dengan
program Office yang biasa Anda gunakan untuk menulis. Sebagai contoh jika Anda ingin
menulis dengan huruf tebal tinggal tekan tombol B pada teks editor lalu tulis suatu
kata/kalimat.
Gambar 8.2 Teks Editor
P

5. Pada teks editor Anda bisa beralih ke Toggle Editor untuk membuat/mengedit artikel
menggunakan kode HTML. Cara untuk beralih ke Toggle Editor adalah dengan klik
tombol yang terletak di bawah teks editor. Jika Anda telah beralih ke Toggle
Editor maka Anda bisa menulis artikel menggunakan kode HTML.
Gambar 8.3 Toggle Editor
Judul sudah diisi, artikel sudah diketik, langkah selajutnya lihat pada sisi kanan sebelah teks
editor. Anda akan melihat pengaturan Category, Tags, Status, Featured, Access, Language, Version
Note. Anda juga bisa melakukan konfigurasi artikel sesuai dengan kebutuhan untuk artikel yang telah
Anda tulis dengan cara bergulir dari tab menu Content ke tab menu lainnya seperti Publishing, Images
and Links, Options, Configure Edit Screen, dan Permissions.
Category: Pilih kategori yang sesuai dengan topik artikel Anda. Semisal Anda menulis artikel tentang berita
maka pilih kategori berita.
Tags: Untuk menandai artikel dengan nama yang unik.
Status: Untuk menerbitkan atau tidak menerbitkan artikel.
Featured: Untuk memilih artikel pilihan agar ditampilkan pada Menu Featured Articles.
Access: Pilih level hak akses untuk melihat artikel
Language: Pilih fitur bahasa.
Version Note: Memberikan catatan versi artikel
Informasi Selengkapnya bisa Anda baca di http://docs.joomla.org/Help33:Content_Article_Manager_Edit
BAB – 8 ARTIKEL  0801 – Cara Membuat Artikel
8.2 Pengaturan Teks Editor
Default teks editor pada Joomla 3 adalah editor TinyMCE yang sudah Anda lihat bahwa fitur
pengaturan teks pada editor tersebut masih sangat sederhana sekali. Jika dirasa kurang lengkap dan
ingin menambahkan fitur yang lengkap pada teks editor agar lebih komplek sehingga pada saat menulis
artikel menjadi lebih mudah ikuti cara berikut ini :
1. Klik Extensions  Plugin Manager.
2. Cari plugin Editor – TinyMCE lalu klik plugin tersebut.
3. Pada Functionality rubah menjadi Extended.
Gambar 8.4 Plugin Editor TinyMCE

4. Apabila pada nantinya jika Anda ingin mengembed video Youtube di dalam artikel,
yang harus Anda lakukan adalah beralih ke kolom Prohibited Elements dan hapus
kode iframe. Dengan menghapus kode iframe dimaksudkan untuk menghilangkan
blocking pada kode HTML elemen iframe oleh teks editor TinyMCE.
Gambar 8.5 Prohibited Elements TinyMCE
Sekarang teks editor memiliki fitur pengaturan teks yang lebih lengkap jika dibandingkan
sebelumnya.
Gambar 8.6 Extended Editor TinyMCE
BAB – 8 ARTIKEL  0802 – Pengaturan Teks Editor
8.3 Menambahkan Gambar di Artikel
Banyak cara untuk menambahkan gambar ke dalam artikel, pertama dengan cara menyisipkan
link gambar dari situs lain, yang kedua adalah dengan cara mengupload gambar ke dalam website
menggunakan Media Manager, dan yang ketiga adalah dengan menggunakan tombol Image yang
terdapat di bawah teks editor artikel.
Sebagai contoh, penulis akan menjelaskan ketiga cara tersebut satu persatu. Menambahkan
gambar dengan cara menyisipkan link gambar dari situs lain caranya yaitu pada teks editor tekan
tombol insert/edit image lalu pastekan link gambar tersebut.
Gambar 8.7 Insert Image

Nah, jika Anda ingin menambahkan gambar ke dalam artikel dengan cara mengupload gambar
tersebut ke dalam website, Anda bisa menggunakan Media Manager yang terdapat pada Content 
Media Manager. Karena pada nantinya dibutuhkan gambar untuk website sekolah, maka sekalian saja
kita upload gambar-gambar tersebut melalui Media Manager.
1. Klik Content  Media Manager.
Gambar 8.8 Media Manager
2. Buat folder fasilitas dan logo dengan cara klik tombol Create New Folder.
3. Setelah itu klik tombol Upload  Choose Files.
4. Di dalam CD  images sudah terdapat berbagai gambar yang telah disediakan dan
disesuaikan dengan folder masing-masing. Silahkan upload gambar yang terdapat di
dalam folder fasilitas dan logo serta gambar lainnya seperti contact.jpg, kepala
sekolah.jpg, dan piala.gif. Selain gambar itu jangan diupload dulu.
5. Setelah semuanya diupload, hapus folder banners, headers, dan sampledata karena
semua gambar yang terdapat di dalam folder tersebut tidak kita gunakan.
Gambar 8.9 Folder Image
Yang terakhir yaitu dengan cara menambahkan gambar melalui tombol image yang berada di
bawah teks editor artikel.
Gambar 8.10 Tombol Image
Video tutorial menambahkan gambar ke dalam artikel bisa Anda lihat pada CD  Video
Tutorial  BAB – 8 ARTIKEL  0803 – Menambahkan Gambar di Artikel

8.4 Menyisipkan Video Youtube
Sebelumnya pada bab 8.2 kita sudah mengatur teks editor dengan menghilangkan kode Iframe,
iframe adalah tag HTML untuk menyisipkan dokumen lain. Dalam contoh ini kita akan mencoba
menyisipkan video dari Youtube ke dalam artikel.
1. Dalam contoh ini buka URL https://www.youtube.com/watch?v=AdFZRiRxgSk.
2. Di bawah video Youtube tersebut klik Share  Embed.
3. Copy source code iframe dari video Youtube tersebut.
Gambar 8.11 Youtube
4. Pada halaman Administrator klik Content  Article  Add New Article.
5. Klik Toggle Editor lalu pastekan source code tersebut.
Gambar 8.12 Iframe Video Youtube
Nanti ketika artikel diterbitkan maka video tersebut akan muncul. Di atas hanya contoh
bagaimana cara menyisipkan video Youtube ke dalam artikel.
Video tutorial menyisipkan video youtube ke dalam artikel bisa Anda lihat pada CD 
Video Tutorial  BAB – 8 ARTIKEL  0804 – Menyisipkan Video Youtube
8.5 Artikel Website Sekolah
Semua contoh artikel untuk website sekolah bisa Anda copy dari CD  articles. Di dalam CD
ada beberapa contoh artikel yang telah dikelompokkan sesuai dengan kategori.
JUDUL ARTIKEL KATEGORI
Sejarah Sekolah Profiles
Sambutan Kepala Sekolah Profiles
Organisasi Siswa Profiles
Prestasi Sekolah Profiles
Fasilitas Sekolah Profiles
Contoh Berita 1 News
Informasi Admin Website General
Tabel 3. Artikel Web Sekolah

Dalam bab ini penulis akan memberikan contoh membuat artikel dengan cara copy paste dari
source code HTML artikel yang sudah disediakan. Jika Anda tidak mengerti mengenai kode HTML
Anda bisa mempelajarinya dengan mudah di situs W3schools beralamat www.w3schools.com.
8.5.1 Artikel Sejarah Sekolah
Jangan sekali-kali meninggalkan sejarah atau yang biasa kenal dengan istilah “Jasmerah”.
Sekolah pun pasti mempunyai sejarah dimulai dari awal berdirinya sekolah hingga sekarang. Biar
semua orang tahu akan sejarah sekolah maka dibuatlah artikel mengenai sejarah sekolah untuk
diterbitkan pada halaman website. Artikel sejarah sekolah yang penulis sertakan hanyalah fiktif,
demikian pula artikel-artikel selanjutnya. Yang terpenting Anda memahami mengenai kebutuhan dasar
untuk artikel/konten website sekolah yang pada nantinya bisa Anda kembangkan sendiri.
Gambar 8.13 Buat Artikel
2. Kolom Title diisi dengan Sejarah Sekolah, sedangkan kolom Alias biarkan saja
kosong.
3. Klik tombol Toggle Editor yang terletak di bawah Teks editor.
4. Copy source code artikel Sejarah Sekolah yang terdapat di dalam CD  articles 
profiles  Sejarah Sekolah.txt.
Gambar 8.14 Source Code Artikel Sejarah Sekolah
5. Pastekan source code tersebut ke dalam halaman Toggle Editor.
6. Pada sisi sebelah kanan Toggle Editor terdapat pengaturan, edit pengaturan pada
Category  profiles dan Status  Published.
Gambar 8.15 Status Artikel Sejarah Sekolah
Isi dari artikel Sejarah Sekolah dapat Anda rubah sesuai dengan keinginan Anda

8.5 2 Artikel Sambutan Kepala Sekolah
Anggap saja website sekolah ini merupakan website sekolah yang baru dibuat untuk SMK
Cyber Satria, oleh sebab itu Kepala Sekolah selaku pihak yang mempunyai andil atas adanya website
sekolah menyampaikan beberapa patah kata sambutan untuk website sekolah yang telah diterbitkan
secara resmi. Langkah-langkah membuat artikel sambutan kepala sekolah sebagai berikut :
2. Kolom Title diisi dengan Sambutan Kepala Sekolah, kolom Alias biarkan saja
kosong.
3. Klik tombol Toggle Editor yang terletak di bawah teks editor.
4. Copy source code artikel Sambutan Kepala Sekolah yang terdapat di dalam CD 
articles  profiles  Sambutan Kepala Sekolah.txt
5. Pastekan source code artikel tersebut ke dalam Toggle Editor.
Isi dari artikel Sambutan Kepala Sekolah dapat Anda rubah sesuai dengan keinginan Anda
8.5.3 Artikel Organisasi Siswa
Organisasi dapat kita temukan dimanapun baik di lingkungan masyarakat, institusi
pemerintahan, hingga lingkungan sekolah. Di dalam sekolah terdapat berbagai organisasi siswa yang
memang berperan dalam pendewasaan siswa agar mampu berinteraksi dengan lingkungan sosial.
Sebagai contoh, SMK Cyber Satria terdapat lima organisasi siswa yaitu OSIS, Pramuka, PMR, ROHIS,
dan Pecinta Alam.
Semua informasi singkat tentang organisasi yang ada di sekolah ingin ditampilkan di dalam
website, maka dibuatlah artikel tentang organisasi siswa dengan cara sebagai berikut :
2. Kolom Title diisi dengan Organisasi Siswa, kolom Alias biarkan saja kosong.
4. Copy source code artikel Organisasi Siswa yang terdapat di dalam CD  articles 
profiles  Organisasi Siswa.txt
Isi dari artikel Organisasi Siswa dapat Anda rubah sesuai dengan keinginan Anda
8.5.4 Artikel Prestasi Sekolah
Semakin banyak prestasi yang di dapat baik oleh siswa ataupun sekolah maka brand dari
sekolah pun semakin melejit, saat ini pun masing-masing sekolah berlomba-lomba untuk menunjukan
prestasi agar mendapatkan predikat sekolah favorit. Karena dengan menjadi sekolah favorit maka setiap
penerimaan siswa tahun ajaran baru sekolah tersebut akan menjadi tujuan utama calon siswa yang ingin
mendaftar.
SMK Cyber Satria pun tidak ingin ketinggalan dengan ingin menampilkan prestasi apa saja
yang telah di dapat. Maka dibuatlah artikel yang berisi informasi sekolah dengan cara sebagai berikut :

2. Kolom Title diisi dengan Prestasi Sekolah, kolom Alias biarkan saja kosong.
4. Copy source code artikel Prestasi yang terdapat di dalam CD  articles  profiles
 Prestasi Sekolah.txt
Isi dari artikel Prestasi dapat Anda rubah sesuai dengan keinginan Anda
8.5.5 Artikel Fasilitas Sekolah
Fasilitas sangat penting untuk menunjang proses belajar mengajar di dalam sekolah. Dengan
fasilitas yang lengkap tentunya guru dapat mengajar dengan maksimal dan siswa dapat belajar dengan
optimal. Fasilitas di SMK Cyber Satria cukup lengkap dan semua fasilitas yang ada ingin diterbitkan
pada halaman website sekolah. Kita tinggal membuat artikel yang berisi segala informasi fasilitas yang
dimiliki sekolah dengan cara sebagai berikut :
2. Kolom Title diisi dengan Fasilitas Sekolah, kolom Alias biarkan saja kosong.
4. Copy source code artikel Fasilitas Sekolah yang terdapat di dalam CD  articles 
profiles  Fasilitas Sekolah.txt
Isi dari artikel Fasilitas Sekolah dapat Anda rubah sesuai dengan keinginan Anda
8.5.6 Artikel Contoh Berita
Tidak hanya menampilkan informasi tentang profil sekolah, website sekolah juga dapat
menjadi sarana publikasi berita terbaru atau pengumuman kepada warga sekolah serta masyarakat.
Sebenarnya cara membuat artikel untuk berita tidak berbeda jauh dengan membuat artikel-artikel
sebelumnya, karena kita akan membuat 4 (empat) contoh artikel berita yang akan dimasukkan ke
dalam kategori news.
2. Kolom Title diisi dengan Contoh Berita 1, kolom Alias biarkan saja kosong.
4. Copy source code artikel Contoh Berita 1 yang terdapat di dalam CD  articles 
news  Contoh Berita 1.txt
Category  news dan Status  Published.

Untuk artikel berita lainnya yang terdapat CD  articles  news silahkan Anda buat sendiri
dengan cara seperti di atas.
8.5.7 Artikel Informasi Admin Website
Pada bab 6.5 sudah dijelaskan mengenai kebutuhan Admin untuk website sekolah. Karena pada
nantinya Admin website tidak hanya satu, maka dibuatlah informasi untuk para admin agar mengetahui
tata cara mengelola website sekolah. Langkah-langkah membuat artikel Informasi Admin Website
sebagai berikut :
2. Kolom Title diisi dengan Informasi Admin Website, kolom Alias biarkan saja
kosong.
4. Copy source code artikel Informasi Admin Website yang terdapat di dalam CD 
articles  general  Informasi Admin Website.txt
Category  general dan Status  Published.
Ada dua cara untuk menulis artikel, yaitu dengan cara menggunakan teks editor what you see what
you get atau dengan cara menulis kode HTML melalui toggle editor. Pilihlah cara termudah bagi
Anda. Jika Anda tidak paham bahasa HTML, penulis menyarankan Anda untuk memahami bahasa
HTML karena HTML adalah bahasa dasar untuk pemrograman web.

BAB 9 - MENU
Di dalam Joomla! Sebuah Menu adalah
sekumpulan menu yang digunakan sebagai
navigasi web. Masing-masing butir menu
menentukan URL ke halaman situs Anda, dan
setiap menu dapat diatur untuk mengendalikan
konten (artikel, daftar kategori, modul, dll) halaman tersebut. Selain itu, masing-masing menu
memiliki menu type (jenis menu), yang ditampilkan dibagian pengelolaan menu (Menu Manager). Tipe
Menu sebenarnya adalah nama unik atau alias yang akan dipakai untuk membuat URL.
Sebuah menu tidak otomatis ditampilkan pada frontend halaman web manapun. Anda perlu untuk
membuat modul menu untuk menampilkan menu pada semua atau beberapa halaman web. Setiap menu
dapat ditampilkan oleh satu atau lebih modul (sehingga memungkinkan untuk menampilkan menu yang
sama di posisi yang berbeda).
Pada BAB 6 sudah dijelaskan mengenai menu-menu apa saja yang akan dibuat untuk website
sekolah. Dan Pada Bab 8 Anda sudah belajar membuat artikel yang nantinya akan digunakan sebagai
item menu.
9.1 Membuat Menu Di Menu Manager
Menu Manager memungkinkan Anda untuk membuat kustom menu pada website Joomla Anda.
Buka halaman Administrator  Menus  Menu Manager, terdapat Main Menu yang akan kita
gunakan sebagai menu utama di dalam website sekolah. Pada bab 6.3 sudah dijelaskan mengenai
kebutuhan menu yaitu Main Menu dan Admin Menu. Karena Main Menu sudah ada, saat ini kita akan
membuat menu baru yaitu Admin Menu dengan cara sebagai berikut :
2. Klik Menus  Menu Manager  Add New Menu.
Gambar 9.1 Membuat Menu Baru
3. Title diisi dengan Admin Menu.
4. Menu Type diisi dengan admin-menu. Menu Type berguna untuk mengindentifikasi
menu tersebut. Untuk penulisan Menu Type tidak boleh menggunakan spasi, namun
diperbolehkan menggunakan karakter – atau _.
5. Description diisi dengan ‘menu untuk halaman Admin’. (tanpa tanda petik)
Main
Menu
Menu
Sub
Menu

Gambar 9.2 Admin Menu
9.2 Mengedit Menu Home
Menu Home merupakan halaman utama di dalam sebuah website karena menu Home
merupakan halaman awal yang langsung berinteraksi dengan pengguna ketika mengakses website.
Dalam menu Home penulis akan menampilkan konten berupa artikel pilihan menggunakan menu item
type Featured Article, dengan langkah-langkah sebagai berikut :
2. Klik menu Content  Article Manager.
3. Pada Article Manager, pilih artikel yang akan ditampilkan pada halaman menu Home
dengan memberi tanda centang. Sebagai contoh penulis memberikan tanda centang 5
(lima) artikel yaitu artikel Sambutan Kepala Sekolah, Contoh Berita 1, Contoh Berita
2, Contoh Berita 3, dan Contoh Berita 4.
4. Setelah diberi centang, klik tombol Featured yang terletak di atas halaman Article
Manager.
Gambar 9.3 Memilih Artikel Untuk Djadikan Featured Article
5. Artikel yang telah dijadikan Featured akan muncul tanda bintang berwarna kuning.

Gambar 9.4 Artikel Setelah Menjadi Featured Articles
6. Setelah memilih artikel untuk ditampilkan pada halaman Home, langkah selanjutnya
adalah klik Menus  Main Menu.
7. Klik menu Home.
8. Pada tab menu Details, biarkan saja sesuai default karena untuk Menu Item Type-nya
sudah Featured Articles.
9. Beralih ke tab menu Layout, lakukan pengaturan sebagai berikut:
 # Leading Articles diisi dengan angka 0 atau biarkan kosong. # Leading
Articles berguna untuk mengatur banyaknya artikel yang nampak dengan
menggunakan lebar penuh dari halaman website.
 # Intro Articles diisi dengan angka 5. # Intro Articles berguna untuk
mengatur banyakya artikel yang muncul setelah Leading Articles. Jika kita isi
dengan angka 5 maka artikel yang muncul sebanyak 5 artikel di halaman
website.
 # Columns diisi dengan angka 1. # Columns berguna untuk mengatur
banyaknya kolom pada Intro Articles. Misal Anda diisi dengan angka 2 maka
lebar halaman website akan terbagi menjadi 2 bagian, setiap bagian
menampilkan artikel dari Intro Articles.
 # Links diisi dengan angka 0 atau biarkan kosong. # Links berguna untuk
mengatur jumlah link untuk ditampilkan pada bagian halaman Links. Link ini
memungkinkan pengguna untuk menghubungkan dengan Artikel tambahan.
Biarkan kosong atau diisi dengan angka 0 untuk menggunakan nilai default
dari pilihan komponen.
 Category Order diubah menjadi No Order.
 Article Order diubah menjadi Most recent first. Jadi artikel yang terakhir
diterbitkan akan muncul di atas sendiri menumpuk artikel yang lama.

Gambar 9.6 Pengaturan Tab Menu Layout di Menu Home
10. Beralih pada tab menu Page Display, lakukan pengaturan
 Browser Page Title isi dengan SMK Cyber Satria. Browser Page Title
berfungsi untuk menampilkan judul halaman pada tab web browser.
 Show Page Heading  No.
Gambar 9.7 Browser Page Title Menu Home
Video tutorial mengedit menu home bisa Anda lihat pada CD  Video Tutorial  BAB
– 9 MENU  0901 – Mengedit Menu Home
9.3 Menu Profiles
Menu Profiles dibuat sebagai menu utama dari sub-sub menu Profiles. Ketika di klik menu
Profiles tidak akan menampilkan konten apapun, namun menu Profiles akan menampilkan sub-sub
menunya. Menu Profiles memiliki sub-sub menu untuk menampilkan halaman-halaman tentang
sekolah.
Gambar 9.8 Sub Menu Profiles
Profiles
Sejarah Sekolah
Sambutan
Kepala Sekolah
Guru Staf Siswa Organisasi Prestasi Fasilitas

Berikut ini merupakan cara membuat menu Profiles :
2. Klik Menus  Main Menu.
3. Klik New.
4. Menu Title beri nama Profiles.
5. Alias biarkan kosong.
6. Pada tab menu Details, lakukan pengaturan :
 Menu item type  System Links  External URL.
 Link isi dengan #.
Gambar 9.9 Item Type Menu Profiles
7. Klik tab menu Dropdown Menu Options, lakukan pengaturan :
 Drop-Down Width (px)  200. Drop-Down Width berfungsi untuk memberi
lebar kolom dropdown menu.
Gambar 9.10 Mengatur Lebar Kolom Drop-down
Setelah di Save, coba Anda buka halaman frontend (localhost/sekolah) lalu klik menu Profiles
maka tidak ada efek apa-apa, hal itu disebabkan menu Profiles berisi link # (kosong).
9.3.1 Membuat Menu Sejarah Sekolah
Menu Sejarah Sekolah merupakan menu untuk menampilkan artikel Sejarah Sekolah. Menu
Sejarah Sekolah merupakan sub menu dari menu Profiles. Untuk membuat menu Sejarah Sekolah
caranya yaitu :
3. Klik New.
4. Menu Title beri nama Sejarah Sekolah.
5. Alias  biarkan kosong.
 Menu item type  Articles  Single Article.

 Select Article  Sejarah Sekolah.
7. Pada menu dropdown Parent Item pilih Profiles. Nah disinilah setelan untuk membuat
sub menu dari menu Profiles.
Gambar 9.11 Parent Item Menu
8. Pada tab menu Page Display, lakukan pengaturan :
 Browser Page Title isi dengan Sejarah Sekolah.
Buka halaman frontend lalu arahkan kursor pada menu Profiles maka akan nampak tampilan
menu menjadi seperti di bawah ini dan ketika menu Sejarah Sekolah di klik maka akan terbuka halaman
yang berisi artikel Sejarah Sekolah.
Gambar 9.12 Menu Sejarah Sekolah
9.3.2 Membuat Menu Sambutan Kepala Sekolah
Menu Sambutan Kepala Sekolah berisi artikel Sambutan Kepala Sekolah mengenai website
sekolah yang baru. Menu Sambutan Kepala Sekolah merupakan sub menu Profiles. Di bawah ini
merupakan cara membuat menu Sambutan Kepala Sekolah :
3. Klik New.
4. Menu Title beri nama Sejarah Sekolah.
 Select Article  Sambutan Kepala Sekolah.
7. Pada menu dropdown Parent Item pilih Profiles.
 Browser Page Title isi dengan Sambutan Kepala Sekolah.

Selanjutnya buka halaman frontend lalu arahkan kursor pada menu Profiles maka seharusnya
akan nampak tampilan menu menjadi seperti di bawah ini.
Gambar 9.13 Menu Sambutan Kepala Sekolah
Ketika Anda klik menu Sambutan Kepala Sekolah akan terbuka halaman yang berisi artikel
Sambutan Kepala Sekolah.
9.3.3 Membuat Menu Guru
Menu Guru merupakan sub menu Profiles untuk menampilkan halaman informasi mengenai
guru-guru di sekolah. Informasi yang dimaksud yaitu Foto, Nama Guru, Nomor Identitas Pegawai
Negeri Sipil (NIP), dan Mata Pelajaran. Saat ini kita hanya akan membuat menu Guru sementara karena
untuk membuat konten yang akan ditampilkan di dalam menu Guru kita membutuhkan komponen
RokGallery. Sedangkan membuat konten menu Guru menggunakan RokGallery akan di bahas pada
Bab 10 – Bekerja Dengan Komponen.
Membuat menu Guru sementara, caranya sebagai berikut :
3. Klik New.
4. Menu Title beri nama Guru.
 Menu item type  System Links  External URL.
 Link isikan #.
Ingat, untuk menu Guru nanti akan diedit kembali setelah menginstal komponen RokGallery.
9.3.4 Membuat Menu Staf
Menu Staf merupakan sub menu Profiles, yang gunanya untuk menampilkan halaman informasi
mengenai staf di sekolah. Informasi yang dimaksud yaitu Foto, Nama Staf, NIP, dan Jabatan. Sama
seperti menu Guru, menu Staf untuk saat ini sifatnya hanya sementara yang pada nantinya akan diedit
lagi. Membuat menu Staf sementara caranya sebagai berikut :
3. Klik New.
4. Menu Title beri nama Staf.
 Menu item type  Sistem Links  External URL.

 Link isikan #.
Selanjutnya membuat menu Siswa.
9.3.5 Membuat Menu Siswa
Menu Siswa merupakan sub menu Profiles, yang gunanya untuk menampilkan informasi siswa
dengan cara menginputkan Nomor Induk Siswa Nasional (NISN) atau Nama Siswa. Tenang, Kita tidak
perlu repot-repot menginputkan satu persatu data siswa ke dalam database, ada cara mudah yaitu dengan
cara menggunakan fitur Iframe Wrapper pada Joomla.
Kita akan menampilkan halaman website http://nisn.data.kemdiknas.go.id/page/data ke dalam
halaman menu Siswa dengan cara sebagai berikut :
3. Klik New.
4. Menu Title beri nama Siswa.
 Menu item type  Wrapper  Iframe Wrapper.
 URL isikan http://nisn.data.kemdiknas.go.id/page/data.
8. Beralih pada tab menu Scroll bars Parameters, pada kolom Height diisi 700.
Gambar 9.14 Scroll Bar Parameters
9. Beralih pada tab menu Advanced, pada Frame border ganti menjadi No.
Gambar 9.15 Frame Border
10. Beralih pada menu Page Display, pada kolom Browser Page Title diisi dengan
Nomor Induk Siswa Nasional.
Pastikan PC atau laptop Anda terhubung dengan internet, selanjutnya pada frontend website
sekolah silahkan klik Menu Siswa dan lihat hasilnya.

9.3.6 Membuat Menu Organisasi Siswa
Menu Organisasi Siswa merupakan sub menu Profiles, yang gunanya untuk menampilkan
artikel mengenai organisasi-organisasi siswa di sekolah. Langsung saja, cara membuat menu Organisasi
sebagai berikut:
3. Klik New.
4. Menu Title beri nama Organisasi Siswa.
 Select Article  Organisasi Siswa.
 Browser Page Title isi dengan Organisasi Siswa.
9.3.7 Membuat Menu Prestasi Sekolah
Menu Prestasi Sekolah merupakan sub menu Profiles, yang gunanya untuk menampilkan
konten / artikel mengenai prestasi sekolah maupun siswa sekolah tersebut. Untuk membuat menu
Prestasi Sekolah langkah-langkahnya sebagai berikut:
3. Klik New.
4. Kolom Menu Title beri nama Prestasi dan kolom Alias biarkan kosong.
 Menu item type  Articles  Single Article
 Select Article  Prestasi Sekolah
 Browser Page Title diisi dengan Prestasi Sekolah.
8. Klik Save Close.
9.3.8 Membuat Menu Fasilitas Sekolah
Menu Fasilitas Sekolah merupakan sub menu Profiles, yang gunanya untuk menampilkan
konten mengenai fasilitas atau sarana dan prasarana yang dimiliki sekolah. Langkah-langkah membuat
menu Fasilitas Sekolah sebagai berikut:
3. Klik New.
4. Kolom Menu Title beri nama Fasilitas dan Alias biarkan kosong.
5. Pada menu tab Details, lakukan pengaturan :
 Menu item type  Articles  Singel Article
 Select Article  Fasilitas

 Browser Page Title diisi dengan Fasilitas Sekolah.
9.4 Menu News
Menu News merupakan menu yang berisi artikel-artikel dari kategori news. Menu News
ditujukan untuk menampilkan berbagai berita terbaru atau pengumuman dari sekolah. Cara membuat
menu News sebagai berikut :
3. Klik New.
4. Kolom Menu Title beri nama News dan kolom Alias biarkan kosong.
5. Pada menu tab Details, lakukan pengaturan :
 Menu Item Type  Articles  Category Blog
 Choose a category  News
Gambar 9.16 Item Type Menu News
6. Pada tab menu Blog Layout, lakukan pengaturan :
 # Leading Articles  0
 # Intro Articles  5
 # Columns  1
 # Links  0
7. Pada tab menu Options, lakukan pengaturan :
 Show Category  Hide
 Link Category  No
 Show Author  Hide
 Link Author  No
 Show Create Date  Hide
 Show Modify Date  Use Global
 Show Voting  Hide
 Show Title with Readmore  Hide
8. Pada tab menu Page Display, lakukan Pengaturan :
 Browser Page Title diisi dengan News.
Setelah di Save, lanjutkan dengan melihat tampilan frontend dari menu News.
Video tutorial mengedit menu home bisa Anda lihat pada CD  Video Tutorial  BAB
– 9 MENU  0902 – Menu News

9.5 Menu Gallery
Menu Gallery akan kita fungsikan untuk menampilkan konten (dokumentasi) album foto
kegiatan siswa-siswi atau sekolah. Untuk membuat menu Gallery kita membutuhkan modul dari
komponen RokGallery yang akan dibahas dilain bab.
Untuk saat ini kita akan membuat menu Galley sementara yang pada nantinya akan diedit lagi.
Membuat menu Gallery fiktif caranya sebagai berikut :
3. Klik New.
4. Menu Title beri nama Gallery.
 Menu item type  Sistem Links  External URL.
 Link isikan #.
9.6 Menu Contact
Menu Contact digunakan untuk menampilkan kontak informasi sekolah seperti alamat sekolah,
email sekolah, google map sekolah, dan contact form. Sebelum membuat menu Contact, hal pertama
yang harus kita lakukan adalah membuat Contact terlebih dahulu, caranya sebagai berikut :
2. Klik Components  Contacts.
3. Klik New.
4. Kolom Name diisi dengan Hubungi Kami dan kolom Alias biarkan kosong.
5. Pada tab menu New Contact silahkan diisi dengan informasi mengenai sekolah
terserah Anda atau ikuti pengisian seperti yang penulis lakukan di bawah ini :
 Image pilih gambar contact.jpg (sebagai contoh).
 Email diisi dengan info@smkcybersatria.tk (silahkan diisi dengan alamat email
sekolah yang valid).
 Address diisi dengan Jalan Gerilya No. XX.
 City or Suburb diisi dengan Purwokerto.
 State or Province diisi dengan Jawa Tengah.
 Postal / Zip Code diisi dengan 53142.
 Country diisi dengan Indonesia.
 Telephone diisi dengan (0281) XXXXXX.
 Mobile diisi dengan 085XXXXXXXXX

Gambar 9.17 Contact
6. Pada tab menu Display, lakukan pengaturan :
 Show Category  Hide
 Display Format  Tabs
Langkah selanjutnya adalah membuat menu Contact, caranya sebagai berikut :
3. Klik New.
4. Kolom Menu Title diisi dengan Contact dan kolom Alias biarkan kosong.
 Menu Item Type  Contacts  Single Contact
 Select Contact  Hubungi Kami
 Browser Page Title diiisi dengan Kontak Sekolah
Buka halaman frontend menu Contact dan lihat tampilannya seperti di bawah ini.
Gambar 9.18 Tampilan Menu Contact
Pasti Anda akan bertanya-tanya, jika ada pengunjung website datang dan mengirim email
melalui Contact Form, email pengunjung itu akan dikirim kemana? Email pengunjung tersebut akan
dikirim ke alamat email Administrator website sekolah, alamat email yang digunakan saat menginstal
CMS Joomla.

9.7 Menu Admin
Menu Admin merupakan menu yang hanya bisa diakses oleh Admin dan Manajer website
sekolah dengan cara harus login terlebih dahulu melalui login form pada frontend website. Apabila
Admin tidak login, maka menu tersebut tidak akan nampak.
Untuk membuat membuat menu Admin caranya sebagai berikut :
2. Klik New.
3. Pada kolom Menu Title diisi dengan Admin, pada kolom Alias biarkan kosong.
4. Lihat pada sisi sebelah kanan terdapat berbagai pengaturan dan lakukan pengaturan
pada bagian Access rubah menjadi Registered. Maksudnya adalah yang bisa
mengakses menu Admin adalah pengguna yang sudah terdaftar.
Gambar 9.19 Access Registered
5. Pada tab menu Details, Menu item type pilih Articles  Single Article. Lalu pada
Select Article pilih Informasi Admin Website.
6. Bergulir ke tab menu Page Display, Browser Page Title diisi dengan Halaman
Admin.
Ketika Anda membuka halaman frontend website sekolah maka Anda tidak akan melihat menu
Admin. Menu Admin akan nampak ketika Anda login melalui login form pada frontend, tetapi sampai
saat ini kita belum membuat Login Form pada frontend website sekolah, login form akan kita buat pada
BAB 11.
9.8 Menu Create Article
Menu Create Article merupakan menu untuk membuat artikel melalui frontend, menu ini
ditujukan untuk memudahkan Anda ketika akan membuat artikel baru tanpa harus login ke dalam
halaman backend Administrator. Langkah-langkah untuk membuat menu Create Article sebagai berikut
:
1. Klik Menus  Admin Menu.
2. Klik New.
3. Pada kolom Menu Title diisi dengan Create Article, dan pada kolom Alias biarkan
kosong seperti biasa.
pada bagian Access rubah menjadi Registered.
5. Pada tab menu Details, Menu item type pilih Articles  Create Article.

6. Bergulir ke tab menu Options, pada Default category rubah menjadi Yes dan Choose
a category rubah menjadi News.
7. Bergulir ke tab menu Page Display, Browser Page Title diisi dengan Membuat
Artikel Baru.
9.9 Menu Edit User Profile
Menu Edit User Profile merupakan menu berisi halaman untuk mengedit informasi user
(pengguna). Pengguna dapat merubah profil bahkan melakukan konfigurasi seperti merubah Editor,
Time Zone, Bahasa, dan lain sebagainya.
1. Klik Menus  Admin Menu.
2. Klik New.
3. Pada kolom Menu Title diisi dengan Edit User Profle, dan pada kolom Alias biarkan
kosong seperti biasa.
pada bagian Access rubah menjadi Registered.
5. Pada tab menu Details, Menu item type pilih Users Manager  Edit User Profile.
6. Bergulir ke tab menu Page Display, Browser Page Title diisi dengan Mengubah
Profil Pengguna.
Menu Create Article dan Menu Edit User Profile setelah dibuat tidak akan langsung nampak pada frontend. Untuk
membuat menu tersebut nampak, Anda harus mengatur modul menu terlebih dahulu pada Module Manager.
Selengkapnya nanti akan dibahas pada Bab 11 – Bekerja Dengan Modul.
9.10 Menu Options
Ketika Anda membuat menu Joomla, Anda akan menemukan tab menu Options pada halaman
pengaturan menu. Di dalam tab menu Options Anda dapat mengatur tampilan informasi konten seperti
Show Title, Show Intro Text, Show Category, dan masih banyak lagi.
Gambar 9.20 Options Menu
Sebagai contoh coba Anda buka menu Home pada frontend website sekolah, terdapat informasi
konten seperti gambar di bawah ini.

JOOMLA GANTRY

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (16)

Semelhante a JOOMLA GANTRY

Semelhante a JOOMLA GANTRY (20)

JOOMLA GANTRY