Joomla 3 Dan Gantry Framework 4 - Free Version

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)
WWW.DIGTUTS.COM ii
KATA PENGANTAR
Puji syukur penulis panjatkan kepada Allah SWT, karena izin-Nya, buku digital 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
WWW.DIGTUTS.COM iii
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.4.x …………………………………………………….. 11
3.2.1 Frontend Joomla 3.4.x ………………………………………………... 11
3.2.2 Backend Joomla 3.4.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
WWW.DIGTUTS.COM iv
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
WWW.DIGTUTS.COM v
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
WWW.DIGTUTS.COM vi
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
WWW.DIGTUTS.COM vii
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
WWW.DIGTUTS.COM viii
BAB 1 – JOOMLA
1.1 Apa itu Joomla

Asal kata Joomla sendiri berasal dari kata Swahili jumla yang mengandung arti "kebersamaan".
Joomla merupakan Content Management System (CMS) yang dibangun dengan PHP dan MySQL untuk
membuat website dan aplikasi online yang sederhana ataupun kompleks. Content Management System
adalah perangkat lunak untuk menambahkan, mengedit, menghapus, atau mengelola konten website.
Joomla merupakan CMS berlisensi General Public License (GPL) yang bebas digunakan dan
dikembangkan oleh siapa saja.
Gambar 1.1 Joomla
Apa itu General Public License? Mungkin kita sering mendengar tentang istilah ini. Tapi
ternyata belum banyak dari kita yang belum memahaminya. GPL adalah sebuah lisensi yang
menyatakan bahwa sebuah karya intelektual (biasanya software) bebas dipakai, disalin, diedarkan,
bahkan dikembangkan oleh siapapun tanpa harus membayar atau ijin terlebih dulu. GPL atau bila
diterjemahkan menjadi Lisensi Publik Umum pertama kali dibuat oleh Richard Stallman untuk proyek-
proyek pembuatan software di bawah bendera GNU.
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. Hal tersebut menjadi salah satu faktor dimana Joomla memiliki
komunitas pengembang dari seluruh dunia termasuk Indonesia dan oleh sebab itu Joomla menjadi CMS
yang populer dan telah dianugerahi Award-Winning Content Management System.
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
FREE VERSION WWW.DIGTUTS.COM 1

1.2 Kebutuhan Sistem Joomla
Joomla dirancang agar mudah diinstal, 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 yang bisa Anda lihat di halaman resminya
www.joomla.org. Saat buku digital ini ditulis, CMS Joomla 3 versi terbaru adalah Joomla versi 3.4.1
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 2.x + 2.x + http://www.apache.org
mod_zlib)
Nginx 1.1 1.0 http://wiki.nginx.org/
Microsoft IIS 7 7 http://www.iis.net
Tabel 1 Kebutuhan Sistem Joomla 3.4.x
Dengan mengetahui kebutuhan sistem CMS Joomla, Anda dapat mempersiapkan web server
dan database yang tepat sesuai dengan kebutuhan sistem Joomla sehingga website atau aplikasi online
yang dibangun dengan Joomla dapat berjalan dengan baik tanpa adanya masalah.
Menurut pengamatan penulis, banyak kasus yang terjadi akibat kelalaian seorang pengguna
Joomla dengan tidak memperhatikan kebutuhan sistem Joomla. Akibatnya pada saat penginstallan
Joomla di web server sering terjadi masalah seperti proses install tidak berjalan dengan baik (gagal
install).

BAB 2 – PERSIAPAN
M 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, pekerja, dan lain-lain. Membangun sebuah website
pun demikian, dibutuhkan juga rencana dan berbagai persiapan seperti desain website, konten website,
dana, 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 karena pada nantinya kita akan membuat
website online.
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.
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:\xampp\php\php.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
S 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

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:\xampp\htdocs lalu buat folder dengan nama joomla.
2. Copy file Joomla_3.4.1-Stable-Full_Package.zip yang terdapat dalam CD  cms ke
dalam folder joomla (C:\xampp\htdocs\joomla) 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.4.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.4.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.4.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.4.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
E 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.

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
G 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 4. Flexible Grid Layout System
support dengan berbagai platform web Mengontrol ukuran tiap blok layout dan
browser seperti smartphone, tablet, dan posisi modul dengan mudah hanya tinggal
desktop. drag saja.
2. Stunning New Administrator Interface
Gantry menyediakan antarmuka yang user-
friendly untuk mengatur segala aspek desain
template.
Gambar 5.1 Gantry Framework Interface Gambar 5.3 Grid Layout System
3. Preset Style 5. Advanced Typography

Mempermudah dalam merubah desain Memanfaatkan kehebatan typography dari
template dan dapat dikonfigurasi kapanpun. Bootstrap untuk membuat table, form, dan
berbagai elemen interface lainnya.
Gambar 5.2 Preset Style

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://docs.gantry.org/gantry4.
5. Memiliki komunitas pengguna dan support yang baik dari developer, Anda bisa
bergabung di http://www.rockettheme.com/forum/gantry-framework.
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.4 Cara Instal Gantry Framework
5.4.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:\xampp\htdocs.
Gambar 5.4 Folder Sekolah

3. Copy file Joomla_3.4.1-Stable-Full_Package.zip yang di dalam CD folder cms ke
dalam direktori C:\xampp\htdocs\sekolah.
4. Ekstrak Joomla_3.4.1-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.4.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.4.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
S 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.

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 :
Sejarah
Sekolah
Sambutan
Kepala Sekolah
Guru
Home
Staf
Profiles
Siswa
Main Menu News
Organisasi
Siswa
Gallery
Prestasi
Menu Manager Sekolah
Contact
Fasilitas
Sekolah
Create Article
Admin Menu
User Profile
Gambar 6.1 Struktur Menu
Main Menu item

No. Sub Menu Keterangan
Menu Type
Halaman awal ketika pengguna
1. Home - Single article mengakses website sekolah. Pada
halaman ini berisi informasi utama.
Halaman yang berisi artikel (konten)
2. Profiles Sejarah Sekolah Single article
mengenai informasi sejarah sekolah.

Sambutan Kepala Halaman yang berisi artikel (konten)
Single article
Sekolah mengenai sambutan kepala sekolah.
Halaman yang berisi informasi guru-guru
Guru RokGallery
/ pengajar di sekolah.
Halaman yang berisi informasi Staf Tata
Staf RokGallery
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 Halaman berupa blog yang berisi segala
- Category blog artikel (konten) mengenai berita atau
pengumuman terbaru dari sekolah.
4. Gallery Halaman yang berisi album photo
- RokGallery
sekolah.
5. Contact - Contacts Halaman informasi kontak sekolah.
Tabel 2 Main Menu
Admin Menu item

No. Sub Menu Keterangan
Menu Type
Halaman khusus admin untuk membuat
1. Create Article - Create article
artikel melalui frontend.
Halaman khusus admin untuk mengedit
2. User Profile - Edit User Profile
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 sidebar-a
User Profile
7. Module Custom HTML bottom-a
8. Copyright copyright-a
To-Top Scroller 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
K 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.
Artikel 1
Profiles Artikel 2
Seterusnya..
Artikel 1
Kategori News Artikel 2
Seterusnya..
Artikel 1
General Artikel 2
Seterusnya..
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)

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
P 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

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
Main Sub
Menu navigasi web. Masing-masing butir menu
Menu 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)

Gambar 9.2 Admin Menu
9.2 Memahami Menu Item Type

Sebelum bekerja dengan menu lebih jauh sebaiknya Anda memahami dulu apa itu menu item
type. Menu item type adalah jenis atau tipe link konten (artikel, komponen, kontak, dan lain
sebagainya). Menu item type menentukan jenis konten yang akan ditampilkan pada halaman menu.
Joomla menyediakan 29 menu item type, jika Anda menginstal ekstensi pihak ketiga bisa jadi jumlah
menu item type bertambah lebih banyak lagi.
Lebih jelasnya buka halaman Administrator  Menus  Main Menu  Add New Menu
Item untuk membuat menu baru. Pada halaman membuat menu baru lihat bagian Menu Item Type.
Gambar 9.3 Bagian Menu Item Tipe
Pada bagian Menu Item Type klik tombol Select maka akan terbuka jendela baru berisi daftar
tipe item untuk konten halaman menu..
Gambar 9.Daftar Menu Item Tipe

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. Leading Articles selalu
tampil dengan satu kolom.
• # 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.
Profiles
Sambutan
Sejarah Sekolah Guru Staf Siswa Organisasi Prestasi Fasilitas
Kepala Sekolah
Gambar 9.8 Sub Menu Profiles

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 • # Columns  1
• # Intro Articles  5 • # Links  0
7. Pada tab menu Options, lakukan pengaturan :
• Show Category  Hide • Show Create Date  Hide
• Link Category  No • Show Modify Date  Use Global
• Show Author  Hide • Show Voting  Hide
• Link Author  No • 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.
– 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.

Gambar 9.21 Informasi Konten
Apabila Anda ingin menghilangkan informasi tersebut, Anda dapat mengaturnya melalui
Options yang ada pada Menu Manager menu Home. Caranya sebagai berikut :
1. Pada halaman Administrator klik Menus  Menu Manager  Home
2. Klik tab menu Options, lalu lakukan pengaturan seperti di bawah ini :
• Show Category  Hide • Show Navigation  Hide
• Show Parent  Hide • Show Print Icon  Hide
• Show Author  Hide • Show Email Icon  Hide
• Show Publish Date  Hide • Show Hits  Hide
4. Buka frontend dan lihat menu Home maka semua informasi konten akan hilang.
5. Ulangi cara di atas untuk menghilangkan informasi konten pada menu-menu lainnya.
Kecuali pada menu News, Show Navigation biarkan saja Show.
Selain melalui Options pada Menu, Anda dapat menghilangkan informasi konten melalui Options pada Article
Manager ataupun Category Manager.
9.11 Merubah Alias Pada Menu

Alias digunakan untuk membuat Search Engine Friendly URL pada menu, artikel, dan kategori
Joomla. Pada Joomla Anda diizinkan untuk menentukan Alias dengan format berupa angka, huruf kecil,
dan tanda strip (-). Apabila pada saat membuat menu, artikel, atau kategori Anda tidak mengisi kolom
Alias, maka Joomla secara otomatis akan membuat alias dengan mengambil dari judul menu, artikel,
ataupun kategori saat di simpan (save).
Saat ini kita akan mengedit alias dari salah satu menu yaitu menu Profiles, hal ini dikarenakan
pada saat kita membuat menu Profiles kita tidak mendapati adanya kolom Alias. Ya kan? Maka ketika
menu Profiles di Save secara otomatis Joomla membuat alias berdasarkan tanggal ketika menu tersebut
dibuat. Jika tidak percaya silahkan Anda buka halaman frontend dan klik salah satu sub menu dari menu
Profiles, contohnya menu Sejarah Sekolah.
Ketika Anda membukan menu Sejarah Sekolah Anda akan melihat URL seperti di bawah ini.

Gambar 9.22 URL Sejarah Sekolah
Sekarang kita akan merubah URL tersebut dengan cara sebagai berikut :
2. Klik Menus  Main Menu  Sejarah Sekolah.
3. Pada kolom Menu Item Type dari External URL ganti menjadi Articles  Featured
Articles.
4. Pada kolom Alias edit menjadi profiles.
Gambar 9.23 Alias Menu Profiles

5. Klik Save.
6. Lalu kembalikan ke semula, dari Featured Articles menjadi External URL.
7. Save & Close.
Buka halaman frontend dan klik menu Sejarah Sekolah dan lihat URL nya
Gambar 9.24 URL Baru Sejarah Sekolah

BAB 10 – BEKERJA DENGAN COMPONENT
C omponent atau yang kita sebut sebagai komponen merupakan unit fungsi utama joomla
seperti halnya aplikasi mini. Komponen merupakan tipe ekstensi yang paling kompleks
dibandingkan dengan tipe ekstensi yang lain. Pada bab ini kita akan bekerja dengan komponen
RokGallery untuk membuat berbagai kebutuhan konten website sekolah.
10.1 Ekstensi Komponen RokGallery

RokGallery adalah ekstensi galeri yang revolusioner, dikembangkan untuk menjadi fleksibel,
serba guna, dan user friendly. RokGallery dibangun dengan sistem arsitektur berbasis kustom tag
dengan kemampuan untuk membuat galeri berbasis tag. RokGallery merupakan ekstensi bertipe
komponen dan dapat ditampilkan sebagai modul. RokGallery dikembangkan oleh pengembang yang
sama dengan Gantry Framework yaitu Rockettheme dan bisa Anda download secara gratis melalui
situsnya di http://www.rockettheme.com/joomla/extensions/rokgallery.
10.1.1 Kebutuhan Sistem RokGallery

RokGallery memiliki kebutuhan sistem untuk dapat berjalan dengan baik. Kebutuhan sistem
sebagai berikut :
Berjalan pada joomla versi 2.5 dan 3, pastikan menggunakan versi yang up to date.
Kompatibel dengan web browser terbaru Mozilla, Chrome, Safari, IE8+, dan Opera.
Gunakan PHP versi 5.2.7 atau versi terbarunya.
MySQL mendukung InnoDB.
PHP mendukung SQLite PDO driver.
PHP mendukung MySQL PDO driver.
10.1.2 Fitur RokGallery

Fitur RokGallery dari sisi backend Administrator, sebagai berikut :
HTML5 / Flash multi-file uploader foto dengan indikator status upload.
Dapat melakukan slices foto serta zoom/crop ukurannya.
Memberi tag pada foto.
Dapat melakukan multi seleksi foto lalu menggeser-gesernya dengan cara menekan
tombol Shift + Klik bersama.
Membuat beberapa galeri hanya menggunakan tag.
Dan masih banyak lagi

Gambar 10.1 Backend RokGallery
Fitur RokGallery dari sisi frontend, sebagai berikut :

Pengaturan tampilan galeri dapat disesuaikan kebutuhan.
Mendukung kustomisasi tata letak / layout melalui pengeditan HTML, CSS, dan
Javascript.
Dapat memberikan ‘love’ layaknya ‘like’ pada status Facebook.
View counter pada Foto.
Memberikan detail informasi foto secara lengkap, untuk detail informasi dapat
diupdate kapanpun.
Dan masih banyak lainnya.
Gambar 10.2 Frontend RokGallery
Mungkin untuk fitur-fitur RokGallery yang penulis sampaikan masih samar-samar dipikiran
Anda, namun saat pengaplikasiannya Anda akan sedikit-sedikit mulai memahaminya.
10.2 Instalasi RokGallery

Kita akan menggunakan komponen RokGallery versi 2.29 yang terdapat di dalam CD. Cara
instalasi RokGallery pada joomla 3 sebagai berikut :
2. Klik menu Extensions Extensions Manager.

Gambar 10.3 Extension Manager
3. Pada form Upload and Install Joomla Extension klik Pilih File.
4. Cari file rokgallery-2.29.zip yang terdapat di dalam CD  extensions, jika sudah
ketemu maka pilih dan klik tombol Upload & Install.
Gambar 10.4 Upload Komponen RokGallery

5. Tunggu beberapa saat, jika instalasi sukses maka akan nampak tampilan seperti gambar
berikut.
Gambar 10.5 Sukses Install RokGallery
10.3 Menu Guru Dengan RokGallery

Di Bab 9 kita sudah mencoba membuat menu Guru namun belum ada kontennya dan sekarang
kita akan mengeditnya untuk menampilkan konten informasi guru menggunakan RokGallery.
10.3.1 Membuat Galeri Guru

Langkah awal yang harus kita lakukan menggunakan komponen RokGallery adalah
mengunggah foto, menerbitkan foto (publish) memberi tag foto, dan membuat galeri. Bagaimana
caranya? Caranya sebagai berikut:
2. Klik menu Components  RokGallery.
3. Klik tombol Upload.
Gambar 10.6 Tombol Upload

4. Upload semua foto-foto contoh guru yang terdapat pada CD  images  guru.
5. Tunggu beberapa saat proses upload sedang berjalan, setelah selesai klik Close.
6. Lalu seleksi semua foto-foto guru yang baru di upload dengan cara tekan tombol Shift
+ Klik bersama.
Gambar 10.7 Seleksi Semua Foto Guru

7. Klik tombol Publish.
8. Hilangkan tanda seleksi pada semua foto guru.
9. Klik tombol Galleries, setelah itu lakukan pengaturan sebagai berikut:
• Create New Content …
• Kolom Name diisi dengan konten-guru.
• Kolom Tags diisi dengan guru.
• Images size  300x470 lalu beri tanda centang pada Keep Aspect Ratio
sedangkan pada Forced Images jangan beri tanda centang.
• Thumbnail Size 150x235 dan beri tanda centang pada Keep Aspect Ratio.
Background Color biarkan kosong tidak perlu diisi.
• Advanced Options beri centang semuanya.
• Lalu klik Save. (Apabila tidak muncul tombol Save refresh halaman dan ulangi
lagi cara di atas)
Gambar 10.8 Pengaturan Galleries

10. Seleksi semua foto guru, lalu klik tombol Tag.
• Pilih Galleries konten-guru.

• Kolom Tags diisi dengan guru.
• Action to perform pilih Add.
• Klik Apply.
Gambar 10.9 Multiple Files Tag
– 10 BEKERJA DENGAN COMPONENT  1001 – Membuat Galeri Guru
10.3.2 Mengedit Menu Guru

Sekarang waktunya untuk mengedit menu guru untuk menampilkan konten-guru dari
RokGallery. Sebelumnya pada komponen RokGallery kita sudah membuat galeri konten-guru. Untuk
menampilkan galeri konten-guru di menu Guru caranya sebagai berikut:
2. Klik Menus Main Menu.
3. Klik menu Guru.
4. Pada tab menu Details, lakukan pengaturan:
• Menu Item Type  RokGallery Gallery View.
• Pada kolom Alias diedit lalu diisi dengan guru.
5. Pada tab menu Gallery Selection and Options, lakukan pengaturan:
• Gallery  Select Gallery  konten-guru.
• Lalu Save
6. Pada tab menu Page Layout Options, lakukan pengaturan:
• Available Sorts diisi dengan Title, Loves, dan Views. Gunanya adalah untuk
menampilkan pengaturan penyortiran konten di halaman frontend.
• Available Layouts Shown diisi dengan Grid View – 3 Columns dan Grid View
4 Columns. Gunanya untuk menampilkan pengaturan layout di halaman
frontend.
Gambar 10.10 Page Layout Options

7. Beralih ke tab menu Gallery Page Options, pada Show Caption rubah menjadi No.

8. Pada tab menu Page Display, lakukan pengaturan:
• Browser Page Title diisi dengan Informasi Guru.
10. Buka menu Guru untuk melihat tampilan frontend.
Gambar 10.11 Tampilan Menu Guru
– 10 BEKERJA DENGAN COMPONENT  1002 – Mengedit Menu Guru
10.3.3 Mengedit Informasi Guru

Disini kita beranggapan informasi Guru yang ingin ditampilkan yaitu Foto, Nama Guru, Nomor
Identitas Pegawai Negeri Sipil (NIP), Mata Pelajaran yang diampuh. Jika melihat tampilan frontend
galeri pada menu Guru maka yang nampak hanya foto guru dan nama foto.
Jika Anda me-klik salah satu foto Guru akan nampak tampilan halaman detail seperti gambar
di bawah ini :
Gambar 10.12 Halaman Detail Informasi Guru

Untuk merubah dan menambah beberapa informasi guru, caranya sebagai berikut:
1. Buka Halaman Administrator.
2. Klik Components  RokGallery.
3. Pilih salah satu foto, sebagai contoh pilih foto bu-guru-01.
4. Klik tombol Edit di foto.
Gambar 10.13 Tombol Edit Foto

5. Setelah halaman editor foto terbuka, lakukan pengaturan:
• Title dirubah menjadi Ayu Farida, S.pd
• Slug tidak perlu diedit. Slug sama saja dengan alias untuk memberi nama URL
foto.
• Pada kolom Description tuliskan source code HTML berikut :
<p><b>NIP: 197108272005011001 <br/>
Mata Pelajaran : Matematika<b></p>
6. Setelah itu klik Save maka akan otomatis menyimpan.

Lakukan cara di atas untuk merubah detail informasi guru-guru lainnya.
– 10 BEKERJA DENGAN COMPONENT  1003 – Mengedit Informasi Guru
10.3.4 Merapikan Halaman Detail Guru

Ketika kita membuka salah satu foto guru di halaman menu Guru maka tampilan yang terlihat
akan seperti gambar di bawah ini :
Gambar 10.14 Detail Guru

Saat ini kita akan merapikan halaman detail guru dengan menghilangkan tombol download
serta caption yang terdapat di dalam foto, jelasnya seperti yang diberi tanda garis merah dalam Gambar
10.14 di atas. Untuk caranya sebagai berikut :
3. Klik menu Guru.
4. Klik tab menu Detail Page Options, dan lakukan pengaturan:
• Show Caption  No.
• Show Download Link  No.
10.4 Menu Staf Dengan RokGallery

Membuat menu Staf dengan RokGallery langkah-langkahnya hampir sama dengan membuat
menu Guru dengan RokGallery. Perbedannya hanya informasi yang ditampilkan, informasi yang
ditampilkan seperti Foto, Nama, NIP dan Jabatan.
10.4.1 Membuat Galeri Staf

Langkah-langkah membuat galeri Staf sebagai berikut:
4. Upload semua contoh foto-foto staf yang terdapat pada CD  images  staf.
5. Setelah proses upload selesai klik tombol Close.
6. Seleksi semua foto-foto staf yang baru di upload dengan cara tekan tombol Shift + Klik
bersama.
8. Hilangkan tanda seleksi pada semua foto staf.
• Kolom Name diisi dengan konten-staf.
• Kolom Tags diisi dengan staf.
Lalu Background Color biarkan kosong tidak perlu diisi.
• Lalu klik Save.

Gambar 10.15 Pengaturan Galeri Staf
10. Seleksi semua foto staf, lalu klik tombol Tag. Lalu lakukan pengaturan:
• Pilih Galleries  konten-staf.
• Kolom Tags diisi dengan staf.
• Klik Apply.
10.4.2 Mengedit Menu Staf

Langkah-langkah mengedit menu Staf untuk menampilkan konten menggunakan RokGallery
sebagai berikut :
3. Klik menu Staf.
• Menu Item Type  RokGallery  Gallery View.
• Pada kolom Alias isinya diedit menjadi staf.
Gambar 10.16 Alias Menu Staf

5. Pada tab menu Gallery Selection and Options, lakukan pengaturan:
• Gallery  Select Gallery  konten-staf.
• Save
• Available Sorts diisi dengan Title, Loves, dan Views.
• Available Layouts Shown diisi dengan Grid View – 3 Columns dan Grid View
4 Columns.
7. Beralih ke tab menu Gallery Page Options, pada Show Caption rubah menjadi No.
• Browser Page Title diisi dengan Informasi Staf.

10.4.3 Mengedit Informasi Staf

Untuk merubah dan menambah beberapa informasi Staf, caranya sebagai berikut:
3. Pilih salah satu foto, sebagai contoh pilih foto staf-pria-01.
4. Klik tombol Edit di foto.
5. Setelah halaman editor foto terbuka, lakukan pengaturan:
• Title dirubah menjadi Hermawan Santosa, SH.
• Slug tidak perlu diedit.
6. Pada kolom Description tuliskan source code HTML berikut:
<p><b>NIP : 1985 0330 2003 1210 02 <br/>
Jabatan : Kepala Tata Usaha</b><p>
7. Setelah itu klik Save.
Gambar 10.17 Halaman Detail Informas Staf

Lakukan cara yang sama untuk foto-foto merubah informasi staf yang lain.
10.4.4 Merapikan Halaman Detail Staf

Merapikan halaman detail staf dengan menghilangkan tombol download serta caption yang
terdapat di dalam foto, caranya sebagai berikut:
3. Klik menu Staf.
4. Klik tab menu Detail Page Options, dan lakukan pengaturan:
• Show Caption  No.
• Show Download Link  No.

10.5 Menu Gallery Dengan RokGallery
Banyak kegiatan-kegiatan sekolah yang diabadikan melalui foto. Menu Gallery ini ditujukan
untuk memajang foto-foto segala kegiatan sekolah yang menarik untuk dipamerkan kepada pengunjung
web.
10.5.1 Membuat Galeri

Seperti sebelum-sebelumnya, di awal pasti kita akan bekerja dengan Galleries Manager
RokGallery, langsung saja ke caranya sebagai berikut:
4. Upload semua contoh foto-foto galeri yang terdapat pada CD  images  galeri.
5. Seleksi semua foto-foto galeri yang baru diupload dengan cara tekan tombol Shift +
Klik bersamaan.
7. Hilangkan tanda seleksi pada semua foto galeri.
• Kolom Name diisi dengan konten-galeri.
• Kolom Tags diisi dengan galeri.
Lalu Background Color biarkan kosong tidak perlu diisi.
• Lalu klik Save.
9. Seleksi semua foto galeri, lalu klik tombol Tag. Lalu lakukan pengaturan:
• Pilih Select a Gallery  konten-galeri.
• Kolom Tags diisi dengan galeri.
• Klik Apply.
10.5.2 Mengedit Menu Gallery

Mengedit menu Gallery caranya sebagai berikut:
3. Klik menu Gallery.
• Menu Item Type  RokGallery  Gallery View.
• Pada kolom Alias isinya diedit menjadi gallery.
5. Pada tab menu Gallery Selection and Options, lakukan pengaturan :
• Gallery  Select Gallery  konten-galeri  Save.
• Default Gallery View  Grid View – 3 Columns.
• Default Style  Dark.

• Available Sorts diisi dengan Loves dan Views.
• Available Layouts Shown  Grid View - 3 columns dan Grid View - 4
columns.
7. Pada tab menu Gallery Page Options, lakukan pengaturan:
• Show Title  No
• Show Caption  No
• Show Create Date  No
Selain yang penulis sebutkan di atas tidak perlu dirubah pengaturannya. Namun jika Anda ingin
mencoba melakukan pengaturan sesuai keinginan silahkan-silahkan saja.
8. Pada tab menu Detail Page Options, lakukan pengaturan:
• Show Title  No
• Show Caption  No
• Show Create Date  No
• Show Updated Date  No
• Show File Size  No
• Show Image Dimensions  No
• Show Download Link  No
• Show Gallery Info  No
Selain yang penulis sebutkan di atas tidak perlu dirubah pengaturannya. Namun jika Anda ingin
mencoba melakukan pengaturan sesuai keinginan silahkan-silahkan saja.
9. Pada tab menu Page Display, lakukan pengaturan:
• Browser Page Title diisi dengan Gallery.
10.5.3 Mengedit Informasi Gallery

Informasi galeri yang dimaksud adalah keterangan mengenai foto-foto galeri tersebut. Ya,
seperti Anda upload foto di Facebook lalu memberi keterangan pada foto tersebut. Langsung praktek
saja, caranya seperti ini :
3. Pilih salah satu foto galeri, lalu klik tombol Edit yang terdapat pada foto tersebut.
Gambar 10.16 Edit Foto

4. Pada kolom Description tinggal tuliskan keterangan foto tersebut. Dalam contoh
penulis menuliskan Praktek Multimedia di Lab Komputer.

Gambar 10.17 Deskripsi Foto
5. Klik tombol Save.
Mari kita lihat hasil dari halaman menu Gallery, untuk tampilan galeri akan nampak seperti
gambar di bawah ini :
Gambar 10.18 Antarmuka Album
Untuk halaman detail informasi fotonya akan nampak seperti gambar di bawah ini :
Gambar 10.19 Informasi Foto

BAB 11 – BEKERJA DENGAN MODULE
11.1 Kebutuhan Modul Web Sekolah

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. Anda dapat membuat, menghapus, dan mengelola modul di Module Manager.
Gambar 11.1 Module Manager
Di dalam pembangunan website sekolah dibutuhkan beberapa modul seperti :

No. Modul Kegunaan
1. RokGallery Module RokGallery Module merupakan modul yang berasal dari
komponen RokGallery. Pada nantinya modul tersebut akan kita
gunakan untuk membuat animasi gambar slideshow.
2. BT Google Maps Modul yang berguna untuk menampilkan gambar peta sekolah
menggunakan Google Map. Untuk menggunakan modul ini Anda
perlu menginstalnya terlebih dahulu.
3. Login Form Modul bawaan Joomla yang akan kita gunakan untuk membuat
form login pengguna (users).
4. Breadcrumbs Modul untuk menampilkan navigasi halaman (breadcrumbs).
5. Custom HTML Modul bawaan Joomla, dengan menggunakan modul ini Anda
dapat menyisipkan kode HTML.
6. Articles Category Modul ini menampilkan daftar kategori dari satu kategori induk.
Tabel 4 Kebutuhan Modul

11.2 Posisi Modul Template Gantry
Pada frontend, modul dapat diletakan dimanapun disesuaikan dengan posisi modul (module
positions) yang ada dari template tersebut. Setiap template memiliki typography dan module positions
yang berbeda-beda. Gantry memiliki 78 posisi modul, setiap posisi modul bisa Anda edit dan dipakai
sesuai dengan kebutuhan konten pada website. Anda bisa melihatnya di http://demo.gantry-
framework.org/features/module-positions.
Anda dapat mengatur modul posisi pada template Gantry, caranya sebagai berikut :
2. Klik Extensions  Template Manager.
3. Klik Gantry – Default.
4. Klik tab menu Layouts.
5. Sekarang sesuaikan modul posisinya seperti gambar di bawah ini, cara
menyesuaikannya hanya dengan menggeser panel slider pada setiap posisi modul
template gantry:

Gambar 11.2 Posisi Modul Template Gantry
6. Jika sudah, klik tombol Save.
11.3 Instalasi Modul Google Maps

Pada bab 11.1 sudah dijelaskan kebutuhan modul apa saja dibutuhkan, kekurangannya hanya
modul BT Google Maps yang belum diinstal. Untuk menginstal modul BT Google Maps caranya
sebagai berikut :
1. Pada halaman Administrator Klik Extensions  Extensions Manager.
2. Pada Upload Package File klik Pilih File lalu cari modul BT Google Maps di dalam
CD  extensions  mod_bt_googlemaps_j2.5&j3.x_v2.0.8.zip.
3. Klik Upload & Install.
4. Instalasi Sukses
Gambar 11.3 Instal Modul Google Maps
Untuk penggunaan modul BT Google Maps nanti akan dipraktekan pada bab 11.10 Peta
Sekolah.

11.4 Membuat Slideshow
Slideshow merupakan kumpulan gambar yang bergantian secara teratur dalam hitungan waktu.
Slideshow berguna untuk mempercantik tampilan website. Pada website sekolah ini kita akan membuat
slideshow yang berukuran besar untuk ditampilkan pada halaman utama atau halaman Home.
11.4.1 Membuat Galeri Slideshow

Terlebih dahulu kita harus membuat galeri slideshow menggunakan komponen RokGallery,
untuk caranya sebagai berikut :
Gambar 11.4 Tombol Upload
4. Upload semua foto-foto yang terdapat pada CD  images  slideshow.
Gambar 11.5 Upload Foto Slideshow
5. Seleksi semua foto-foto slideshow yang baru di upload dengan cara tekan tombol Shift
+ Klik bersama. Lalu klik tombol Publish.
Gambar 11.6 Publish
6. Hilangkan tanda seleksi pada semua foto slideshow.

7. Klik tombol Galleries, setelah itu lakukan pengaturan sebagai berikut :
• Select Gallery  Create New Content
• Kolom Name diisi dengan slideshow.
• Kolom Tags diisi dengan slideshow.
• Thumbnail Size  1150x500 dan beri tanda centang pada Keep Aspect Ratio.
Background Color biarkan kosong tidak perlu diisi.
• Pada Advanced Options beri centang semuanya.
• Lalu klik Save.
8. Seleksi semua foto slideshow, lalu klik tombol Tag dan lakukan pengaturan :
• Pilih Select a Gallery  slideshow.
• Kolom Tags diisi dengan slideshow.
• Klik Apply.
11.4.2 Membuat Modul Slideshow

Untuk membuat modul slideshow caranya sebagai berikut :
1. Klik Extensions  Modul Manager.
2. Klik New, untuk membuat modul baru.
3. Pilih RokGallery Module.
4. Kolom Title diisi dengan Slideshow.
5. Pada tab menu Module, lakukan pengaturan:
✓ Gallery  Select a Gallery  slideshow. ✓ Navigation Type  None.
✓ Show Title  No. ✓ Animation Duration (ms)  1000.
✓ Show Caption  No. ✓ Autoplay  Enabled with Progress.
✓ Galery Layout  Slideshow. ✓ Autoplay Delay  3
✓ Show Arrows  Only on Hover.
Gambar 11.7 Modul Gallery
6. Show Title dirubah menjadi Hide dan Position dirubah menjadi showcase-a. Jangan
lupa Status  Published.

Gambar 11.8 Posisi Modul Slideshow
7. Pada tab menu Menu Assignment, lakukan pengaturan :

Module Assignment  Only on the Pages Selected. Beri tanda centang hanya pada
Home. Maksudnya modul slideshow ini hanya akan nampak di halaman web menu
Home.
Buka halaman frontend dan lihat hasilnya akan nampak seperti di bawah ini :
Gambar 11.9 Slideshow Front Page
11.5 Membuat Pesan Selamat Datang

Pesan selamat datang ini ditujukan untuk menyambut pengunjung website. Pesan tersebut akan
kita letakan pada menu Home tepatnya di bawah slideshow. Pesan selamat dibuat menggunakan modul
Custom HTML. Untuk caranya sebagai berikut :
1. Klik Extensions  Module Manager.
2. Klik New  Custom HTML.
3. Pada kolom Title diisi dengan Selamat Datang.
4. Rubah teks editor menjadi Toggle editor, lalu sisipkan skrip HTML berikut ini:
<h1 style="text-align: center;"><b>Selamat datang di Website Resmi SMK Cyber
Satria</b></h1>
5. Show Title dirubah menjadi Hide, Position dirubah menjadi maintop-a. Jangan lupa
untuk Status harus Published.

Gambar 11.10 Posisi Modul Selamat Datang
6. Beralih ke tab menu Menu Assignment, Module Assignment rubah menjadi Only on
the Pages Selected dan beri centang hanya pada Home.
7. Beralih ke tab menu Advanced, pada Module Class Suffix diisi dengan box1.
Module Class Suffix berguna untuk mengaplikasikan class dari CSS variasi modul.
Nah box1 merupakan salah satu dari class CSS variasi modul template Gantry.
Selengkapnya mengenai variasi modul template Gantry bisa Anda pahami di
http://demo.gantry-framework.org/features/module-variations.
11.6 Membuat Modul Search

Modul Search pada halaman web bermanfaat untuk mencari artikel / konten di dalam website
dengan cepat. Untuk membuat modul Search caranya sebagai berikut :
2. Buat modul baru dengan klik New lalu pilih Search.
3. Pada kolom Title diisi dengan Search, Show Title biarkan tetap Show, Position
dirubah menjadi sidebar-a. Jangan lupa untuk Status harus Published.
4. Pada tab menu Module, lakukan pengaturan :
✓ Box Width diisi 30 ✓ Search Button pilih Yes
✓ Box Text diisi Search.. ✓ Button Position diisi Bottom
5. Beralih ke tab menu Menu Assignment, Module Assignment dirubah pengaturannya
menjadi On all pages except those selected lalu beri centang pada Create Article, Edit
User Profile, Gallery, Contact, dan Admin.
6. Pada tab menu Advanced  Module Class Suffix diisi dengan box2 title3.
7. Setelah itu klik Save & Close.
Silahkan lihat tampilan frontend website sekolah dengan mengetikan http://localhost/sekolah
di web browser, disebelah kanan halaman (sidebar) akan nampak modul Search seperti gambar di bawah
ini.
Gambar 11.11 Modul Search Box

11.7 Membuat Login Form
Login form adalah gateway yang digunakan pengguna terdaftar untuk masuk ke dalam halaman
administrasi. Halaman administrasi yang dimaksud adalah menu Admin yang berisi pengaturan untuk
membuat artikel dan mengedit profil user. Saat ini kita akan membuat login form yang akan akan
diletakan pada halaman frontend website sekolah. Login form tersebut nantinya akan digunakan oleh
pengguna (Admin/Manajer) untuk masuk ke dalam menu Admin. Untuk cara membuat login form
caranya sebagai berikut :
1. Pada halaman Administrator klik Extensions  Module Manager.
2. Buat modul baru dengan klik tombol New.
3. Pilih Login.
4. Pada kolom Title diisi dengan Login Form, Show Title biarkan tetap Show, Position
dirubah menjadi sidebar-a. Jangan lupa untuk Status harus Published.
5. Pada tab menu Module, pada Login Redirection Page ubah Default menjadi Admin.
Maksud dari pengaturan tersebut adalah ketika pengguna berhasil login, pengguna akan
langsung diarahkan ke halaman menu Admin.
6. Pada tab menu Menu Assignment, rubah Module Assignment menjadi Only on the
pages selected dan beri centang pada Home saja.
Gambar 11.12 Login Form
Sekarang silahkan Anda coba login melalui login form yang terdapat pada frontend
menggunakan username dan password Admin. Seperti yang penulis jelaskan di atas, begitu Anda
berhasil login maka akan langsung diarahkan ke halaman menu Admin. Sayangnya setelah kita melihat
halaman menu Admin tidak ada pengaturan administrasi untuk website sekolah, seperti pengaturan
yang ada pada backend Administrator. Hal itu disebabkan karena kita belum menambahkan menu
pengaturan ke dalam halaman menu Admin. Untuk menambahkan berbagai menu pengaturan tersebut
akan dibahas pada Bab 13.
11.8 Membuat Daftar Link Berita Terbaru

Ingat pada Bab 7, 8, 9 kita sudah membuat kategori dan artikel yang ditampilkan pada halaman
Menu News. Nah, sekarang kita akan membuat daftar link dari artikel-artikel pada kategori news
menggunakan modul Articles Category untuk ditampilkan pada sidebar website sekolah. Tujuannya

adalah supaya pengunjung website sekolah dapat lebih mudah mengetahui berita-berita tersebut tanpa
harus membuka halaman atau menu News.
Caranya membuat sebagai berikut :
1. Buka halaman Administrator lalu klik Extensions  Module Manager.
2. Buat modul baru dengan cara klik New.
3. Pilih Articles Category.
4. Kolom Title diisi dengan nama News.
5. Show Title biarkan saja Show, pada Positions dirubah menjadi sidebar-a. Sedangkan
Status pastikan Published.
6. Pada tab menu Menu Assignment, pada bagian Module Assignment biarkan saja On
All Pages. Maksudnya bahwa modul Link Berita Terbaru (News) ini akan tampil
diseluruh halaman website.
7. Pada tab menu Filtering Options, pada bagian category rubah menjadi news.
Maksudnya adalah menampilkan judul artikel dari kategori news.
Gambar 11.13 Filtering Options
8. Pada tab menu Ordering Options, pada bagian Article Field to Order By rubah
menjadi Start Publishing Date.
10. Setelah itu klik Save & Close.
11.9 Logo Organisasi Siswa

Organisasi siswa merupakan organisasi yang dijalankan dan diatur oleh siswa dalam arahan
dan pengawasan pihak sekolah. Setiap sekolah tentu mempunyai berbagai organisasi siswa di dalamnya
seperti OSIS, Pramuka, PMR, dan lain sebagainya. Oleh sebab itu sekolah ingin menampilkan informasi
singkat organisasi siswa apa saja yang ada di dalam sekolah kepada masyarakat dengan menampilkan
logo-logo organisasi siswa pada website sekolah.
Hal pertama yang perlu Anda siapkan adalah copy paste logo organisasi.png yang terdapat di
dalam CD  images ke dalam direktori C:\xampp\htdocs\sekolah\images\logo. Nah loh tidak ada folder
logo di dalam folder images? Buat dulu folder logo di dalam folder images lalu pastekan gambar logo
di dalam folder logo.
Untuk menampilkan logo organisasi caranya sebagai berikut:
2. Klik New  Custom HTML.
3. Kolom Title diisi dengan Organisasi Siswa.

4. Pada teks editor rubah menjadi Toggle Editor, lalu tuliskan source code HTML
berikut:
<div style="text-align: center;"><img title="Organisasi Siswa"
src="images/logo/organisasi.png" alt="Organisasi Siswa" /></div>
Jika Anda kurang paham mengenai source code HTML di atas, Anda bisa
mempelajarinya di http://www.w3schools.com/html/html_images.asp.
5. Pada Show Title rubah menjadi Hide, terus Position rubah menjadi bottom-a,
selanjutnya Status rubah menjadi Published.
Gambar 11.14 Modul Custom HTML Organisasi Siswa
6. Bergeser ke tab menu Menu Assignment, pada Module Assignment pilih On All
Pages.
7. Bergeser lagi ke tab menu Advanced, pada kolom Module Class Suffix diisi dengan
box2.
8. Terakhir klik Save & Close.
Gambar 11.15 Logo Organisasi Siswa
11.10 Peta Sekolah

Teknologi saat ini berkembang dengan pesat, saat ini kita kenal peta canggih yang disebut
Google Maps. Anda bisa mengakses berbagai lokasi di seluruh dunia hanya membuka Google Maps
melalui berbagai perangkat seperti komputer, laptop, dan smartphone. Pada website sekolah SMK
Cyber Satria akan ditampilkan peta lokasi sekolah menggunakan Google Maps bertujuan
mempermudah siapapun untuk mencari atau menemukan lokasi sekolah.
Hal pertama yang harus kita lakukan adalah mencari tahu koordinat dari GPS berupa latitude
(garis lintang) dan longitude (garis bujur) lokasi sekolah. Untuk mencari tahu caranya sebagai berikut :
1. Buka url http://itouchmap.com/latlong.html.
2. Ketikkan alamat sekolah Anda, karena dalam contoh kasus ini alamat sekolahnya
adalah Jalan Gerilya, Purwokerto. Maka penulis memberi contoh dengan
mengetikkan alamat tersebut.

Gambar 11.16 Peta Sekolah
3. Lalu klik GO.

4. Setelah itu akan nampak peta lokasi beserta informasi yang kita butuhkan yaitu latitude
dan longitude. Untuk latitude -7.440441 dan longitude 109.241349.
Gambar 11.17 Latitude dan Longitude
Setelah informasi koordinat lokasi didapatkan, langkah selanjutnya adalah menampilkan peta
sekolah dengan menggunakan modul BT Google Maps. Langkah-langkahnya dijelaskan di bawah ini :
2. Klik BT Google Maps, yang telah kita instal pada bab sebelumnya.
3. Pada kolom Title edit BT Google Maps menjadi dengan Peta Sekolah.
4. Rubah Show Title  Hide, rubah Position  showcase-a, dan pastikan Status 
Published.
5. Pada tab menu Module, lalukan pengaturan pada kolom Map Address Type rubah
menjadi Coordinate. Lalu pada Map Coordinate diisi dengan -7.440441, 109.241349
sesuai informasi longitude dan latitude yang sudah kita ketahui sebelumnya.
Gambar 11.18 Map Coordinate
6. Bergulir ke tab menu Menu Assignment, lakukan pengaturan dengan Module

Assignment dirubah menjadi Only on the page selected dan hanya pilih Contact saja.
7. Lanjut bergulir ke tab Marker Manager untuk memberi gambar panah pada titik
lokasi dan informasi sekolah. Lakukan pengaturan :
• Klik Add Marker.
• Title Marker diisi dengan SMK Cyber Satria.

• Marker Type  Coordinate.
• Coordinate  7.440441,109.241349.
• Info Windows diisi dengan source code HTML.
<font color="red"><b>SMK Cyber Satria</b></font>
• Klik Create Marker.
Gambar 11.19 Membuat Tanda Peta
8. Bergulir ke tab menu Advanced, pada kolom Module Class Suffix diisi dengan box2.
Sekarang lihat hasilnya dengan melihat pada halaman menu Contact akan nampak seperti
gambar di bawah ini :
Gambar 11.20 Peta Sekolah

11.11 Admin Menu
Pada bab 9.8, dan 9.9 kita sudah mencoba membuat menu Create Article dan Edit User Profile
yang hanya bisa diakses melalui menu Admin oleh pengguna yang memiliki hak akses tertentu, namun
menu tersebut belum terlihat ketika Anda login melalui frontend dan membuka menu Admin. Hal
tersebut disebabkan menu Create Article dan Edit User Profile merupakan bagian dari Admin Menu
bukan Main Menu. Pada template Gantry, Main Menu sudah terkonfigurasi secara otomatis dengan
mengikuti posisi modul menu pada template Gantry. Lihat saja dengan membuka Template Manager
 Gantry  Menu.
Gambar 11.21 Menu Template Gantry
Supaya Admin Menu nampak pada halaman website ikuti langkah-langkah di bawah ini :
1. Buka Module Manager.
2. Klik Main Menu.
3. Pada kolom Title silahkan ganti Main Menu menjadi Admin Menu.
4. Position dirubah menjadi sidebar-a.
5. Lihat tab menu Module, pada Select Menu ganti Main Menu menjadi Admin Menu.
Gambar 11.22 Pengaturan Admin Menu
6. Pada tab menu Menu Assignment, Module Assignment ganti menjadi Only on the
pages selected lalu hanya beri centang pada Create Article, Edit User Profile, dan
Admin.
7. Bergulir ke tab menu Advanced, pada Module Class Suffix edit _menu menjadi box1.
Buka halaman frontend website sekolah dan login melalui form login, lalu klik menu Admin
dan lihat pada sidebar halaman web maka akan terlihat Admin Menu Create Article dan Edit User
Profile.

Gambar 11.23 Frontend Admin Menu
11.12 Ordering Modul

Ordering modul dimaksudkan untuk menyusun urutan modul. Sebagai contoh silahkan Anda
buka menu Admin, pada sidebar akan terlihat modul News dan Admin Menu.
Gambar 11.24 Modul News dan Admin Menu
Modul News terletak di atas modul Admin Menu begitupun sebaliknya. Saat ini kita akan
merubah susunan modul yaitu modul Admin Menu menjadi di atas modul News. Langkah-langkah yang
harus dilakukan untuk merubah susunan modul seperti contoh di atas sebagai berikut:
3. Klik icon segitiga kecil
Gambar 11.25 Icon Ordering Module
4. Lalu tekan dan tahan tanda pada modul Admin Menu lalu geser ke atas modul
News.

Gambar 11.26 Drag & Drop Module
5. Jika sudah diletakan dengan benar maka urutan modul akan otomatis tersimpan.
Buka menu Admin pada frontend dan lihat hasilnya.
Gambar 11.27 Posisi Modul Setelah Dirubah

BAB 12 – BEKERJA DENGAN PLUGIN
P lugin merupakan ekstensi Joomla yang berinteraksi dengan sistem untuk menambah
fungsionalitas Joomla secara spesifik. Pada bab ini kita akan bekerja dengan plugin untuk
merubah link URL halaman login Administrator Joomla dengan alasan untuk meningkatkan keamanan
website sekolah. Ekstensi plugin Joomla yang akan kita gunakan adalah JLSecure My Site.
12.1 Instal Plugin JLSecure My Site

Ekstensi Plugin JLSecure My Site merupakan plugin yang memiliki fungsi untuk merubah URL
halaman login Administrator Joomla dengan menambah key dan value pada URL halaman login
Administrator. Standar login halaman Administrator Joomla ketika diinstal di localhost adalah
localhost/…../administrator, namun dengan plugin JLSecure MySite URL halaman login Administrator
dapat diubah menjadi localhost/…../administrator/?key=value.
Untuk instalasi plugin JLSecure My Site caranya sebagai berikut :

2. Pilih file, lalu cari plugin JL Secure My Site yang terdapat pada CD  extensions 
jlsecuremysite_1.0.2.zip.
Gambar 12.1 Upload Plugin JL Secure My Site

3. Jika sudah, Upload & Install.
4. Instalasi plugin JLSecure My Site berhasil.
Gambar 12.2 Instalasi Plugin JL Secure My Site Berhasil

12.2 Konfigurasi Plugin JLSecure My Site
Setelah Plugin JLSecure My Site terinstal URL halaman login Administrator tidak langsung
berubah secara otomatis, tetapi kita harus melakukan konfigurasi terlebih dahulu. Cara konfigurasinya
sebagai berikut :

2. Cari plg_system_jlsecuremysite lalu klik plugin tersebut jika sudah ketemu.
3. Pada kolom Secure key diisi dengan karakter yang terdiri dari huruf a-z A-Z, dalam
contoh penulis mengisi dengan smk. (atau terserah Anda)
4. Pada kolom Secure value diisi dengan alpha numeric yang terdiri dari a-z A-Z 0-9,
dalam contoh penulis mengisi dengan 2014. (terserah Anda)
Gambar 12.3 Konfigurasi JLSecure My Site

5. Jangan lupa untuk Status rubah menjadi Enable.
6. Klik Save.
Setelah Anda klik Save, secara otomatis halaman Administrator akan mereload dan redirect
membuka halaman frontend website sekolah. Untuk login ke halaman Administrator kembali Anda
tinggal mengetikkan URL localhost/sekolah/administrator/?smk=2014 pada web browser.

BAB 13 – AKSES PENGGUNA
13.1 Menu Users

Joomla memiliki sistem registrasi dan pengelolaan pengguna melalui menu Users pada backend
Administrator. Di dalam menu Users terdapat berbagai pengaturan seperti User Manager, Groups,
Access Levels, User Notes, User Note Categories dan Mass Mail Users.
Gambar 13.1 Menu Users Administrator
Dengan pengaturan-pengaturan tersebut Anda dapat membuat, melihat, mengedit, menghapus

pengguna hingga memberi pengumuman secara massal kepada pengguna.
1. User Manager
Pada halaman User Manager Anda dapat membuat, menghapus, mengedit, dan melihat
daftar pengguna.
2. Groups
Pada halaman Groups Anda dapat membuat, menghapus, dan mengedit grup untuk
pengguna.
3. Access Levels
Pada halaman Access Levels Anda dapat membuat, menghapus, dan mengedit tingkatan
(level) hak akses pengguna. Tingkatan akses berguna untuk mengontrol pengguna dalam
mengakses konten website. Setiap tingkatan memiliki kemampuan akses yang berbeda-
beda.
4. User Notes
Pada halaman User Notes Anda dapat membuat catatan untuk pengguna lain contohnya
membuat pengumumna, tata tertib, atau tata cara dalam mengakses website untuk pengguna
yang lain.
5. User Note Categories
Pada halaman User Notes Categories Anda dapat membuat kategori untuk mengelompokan
setiap catatan-catatan yang dibuat.
6. Mass Mail Users
Pada halaman Mass Mail Users Anda dapat membuat email untuk dikirim ke seluruh
pengguna yang lain.

13.2 Daftar Kendali Akses
Setelah mengetahui apa saja pengaturan pada menu User, saat ini kita akan belajar lebih dalam
tentang daftar kendali akses pada Joomla. Daftar Kendali Akses atau yang dikenal dengan Access
Control List (ACL) merupakan salah satu fitur pada Joomla untuk mengontrol hak akses pengguna atau
grup. ACL pada Joomla memiliki dua manfaat, yaitu:
1. Mengontrol akses pengguna atau grup di dalam website (can see). Sebagai contoh, Anda
dapat mengontrol pengguna/grup untuk melihat konten website tertentu (menu, modul, dan
lain sebagainya).
2. Mengontrol apa yang bisa dilakukan pengguna atau grup di dalam website (can do).
Sebagai contoh, pengguna tertentu memiliki tingkatan akses tertentu dapat membuat,
mengedit, dan menerbitkan konten baik melalui frontend maupun backend serta dapat
mengakses beberapa pengaturan administrasi pada halaman backend Administrator.
Mari kita lihat bagaimana ACL bekerja, silahkan Anda buka halaman Administrator 
Global Configuration  Permissions. Seperti yang Anda lihat, terdapat 4 (empat) kolom Permissions
Settings yaitu User Groups, Actions, Select New Setting (Permissions), dan Calculated Setting.
Gambar 13.3 Hirarki Grup ACL
Sehingga alur kerja dari ACL adalah User Groups  Actions  Select New Setting
(Permissions)  Calculated Setting. Maksudnya adalah setiap grup pengguna dapat melakukan apa
saja (actions) disesuaikan dengan perizinannya (permissions).
Pada Joomla 3.4.x ada 10 (sepuluh) Actions pada ACL yaitu:

1. Site Login
Memungkinkan pengguna di dalam grup untuk login ke dalam frontend website.
2. Admin Login
Memungkinkan pengguna di dalam grup untuk login ke dalam backend Administrator.
3. Offline Access
Memungkinkan pengguna di dalam grup dapat mengakses frontend website ketika website
sedang offline.

4. Super User
Pengguna dengan izin ini dapat melakukan pengaturan apa saja. Hanya pengguna dengan
izin ini dapat mengubah pengaturan Global Configuration. Perlu diingat, harap hati-hati
jika ingin memberikan izin ini ke pengguna lain.
5. Access Administration Interface
Memungkinkan pengguna di dalam grup untuk mengakses semua pengaturan di dalam
backend administrator, kecuali pengaturan Global Configuration.
6. Create
Memungkinkan pengguna di dalam grup untuk membuat konten apa saja dengan semua
ekstensi yang ada.
7. Delete
Memungkinkan pengguna di dalam grup untuk menghapus konten apa saja dengan semua
ekstensi yang ada.
8. Edit
Memungkinkan pengguna di dalam grup untuk mengedit konten apa saja dengan ekstensi
yang ada.
9. Edit State
Memungkinkan pengguna di dalam grup untuk merubah status pada konten seperti
menerbitkan (Publish), tidak menerbitkan (Unpublish), Sampah (Trash), Arsip (Archieve).
10. Edit Own
Memungkinkan pengguna di dalam grup untuk mengedit konten yang telah dibuat sendiri.
Pada Joomla 3.3.x secara default terbagi menjadi beberapa grup hak akses seperti:
1. Public
Public merupakan top-level grup pengguna, jika dilihat pada kolom Select New Setting
semua Action grup pengguna Public adalah Not Set.
Gambar 13.4 Grup Pengguna Public

Hal ini dapat sedikit membingungkan, karena Not Set sama dengan Inherited (turunan).
Public adalah top-level grup pengguna, sedangkan Global Configuration adalah top-level
dari komponen, karena keduanya tidak memiliki turunan dari manapun jadi Not Set
digunakan sebagai Inherited.

2. Guest
Guest merupakan sub atau ‘anak’ grup Public dengan semua pengaturannya Inherited
(turunan). Guest merupakan default grup pengguna pada User Manager dan hanya bisa
melihat frontend (tidak bisa login).
Gambar 13.5 Grup Pengguna Guest
3. Manager
Manager merupakan sub atau anak grup Public dengan semua pengaturannya Allowed
(diizinkan) kecuali pada tindakan (action) Super User dan Access Administration Interface.
Gambar 13.6 Grup Pengguna Manager
4. Administrator
Administrator merupakan grup turunan dari Manager, semua perizinannya diizinkan untuk
mengakses semua komponen.

Gambar 13.7 Grup Pengguna Administrator
5. Registered
Sama dengan grup pengguna Public, bedanya grup pengguna Registered dapat login ke
dalam frontend. Semua sub atau ‘anak’ dari grup Registered akan mewarisi izin login
frontend juga.
Gambar 13.8 Grup Pengguna Registered
6. Author
Author merupakan sub atau ‘anak’ dari grup Registered dan mewarisi perizinan dari grup
Registered ditambah dengan perizinan Create dan Edit Own. Pengguna grup Author dapat
membuat dan mengedit konten yang dibuatnya sendiri hanya bisa melalui frontend, tidak
bisa melalui backend Administrator.

Gambar 13.10 Grup Pengguna Author
7. Editor
Editor merupakan sub atau ‘anak’ dari grup Author. Perizinan pada Editor merupakan
turunan dari Author dengan tambahan perizinan Edit.
Gambar 13.11 Grup Pengguna Editor
8. Publisher
Editor merupakan sub atau ‘anak’ dari grup Author. Perizinan pada Editor merupakan
turunan dari Author dengan tambahan perizinan Edit State.
Gambar 13.12 Grup Pengguna Publisher

9. Super Users
Pengguna dengan grup Super Users mempunyai perizinan penuh dan dapat melakukan apa
saja termasuk mengedit pengaturan yang ada di dalam Global Configuration. Pengguna
dengan izin Super User memiliki karakteristik seperti:
• Pengguna dapat melakukan pengaturan apapun di dalam website baik melalui fron-
end maupun backend.
• Hanya pengguna Super Admin dapat membuat, mengedit, atau menghapus
pengguna grup Super Admin lainnya.
Sebagai catatan, Penerapan ACL di dalam Joomla 3.4.x mengizinkan fleksibilitas yang lebih
luas ke dalam perizinan hak akses setiap pengguna grup, sehingga setiap pengguna grup bisa memiliki
tingkatan akses lebih dari satu.
13.3 Membuat Pengguna Baru

Setelah Anda mempelajari bagaimana pengelolaan pengguna (users) pada Joomla, saat ini kita
akan kembali ke praktek membuat pengguna baru dengan grup pengguna yang memiliki perizinan
akses tertentu. Sudah dijelaskan pada bab 6.5 mengenai kebutuhan Admin Website Sekolah 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
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.
Saat ini kita akan membuat pengguna baru yang akan dijadikan sebagai Manajer, untuk Admin
(Super User) tidak perlu dibuat karena dasarnya yang menjadi Admin adalah yang membuat website
sekolah yaitu Anda sendiri sehingga kita. Langkah-langkah membuat pengguna baru sebagai berikut:
2. Klik Users  User Manager.
3. Klik New.
4. Pada tab menu Account Details, isikan informasi pengguna sebagai Manajer yang Anda
inginkan. Sebagai contoh:
• Name  Diisi dengan Nama Manajer.
• Login Name  Diisi dengan Username untuk login Manajer.
• Password  Diisi dengan.
• Confirm Password  Ketik ulang password untuk konfirmasi password
pengguna.
• Email  Isikan dengan email Manajer yang valid.
• Selebihnya biarkan saja
5. Beralih pada tab menu Assigned User Groups beri tanda centang pada Manager dan
Registered.

Gambar 13.13 Assigned User Groups
6. Beralih pada tab menu Basic Setting, Anda dapat memberikan konfigurasi tambahan
seperti Backend Template Style, Backend Language, Frontend Language, Editor, Help Site,
dan Time Zone untuk Manajer. Saran penulis biarkan saja sesuai aslinya.
13.4 Menonaktifkan Pendaftaran Pengguna

Lihat login form pada frontend website sekolah, di bawah login form terdapat link Forgot your
password?, Forgot your username?, dan Create an account.
Gambar 13.14 Login Form Frontend
Sekarang kita akan menghilangkan link Create an account karena kita tidak ingin menerima
pengguna umum untuk registrasi menjadi member/pengguna di website sekolah.
Untuk menghilangkan link Create an account caranya sebagai berikut :
1. Pada halaman Administrator klik Users  Users Manager.
2. Klik tombol Options yang terletak di sebelah kanan atas.

Gambar 13.2 Tombol Options
3. Pada Allow User Registrations rubah menjadi No.
Gambar 13.3 Allow User Registration

Setelah Allow User Registration dirubah menjadi No maka pada link Create an account akan
hilang.
Gambar 13.4 Create An Account Hilang
13.5 Hak Akses Pengguna Grup Manager

Walaupun sudah dijelaskan pada bab 13.2 mengenai perizinan yang dimiliki pengguna grup
Manager, penulis akan menjelaskan kembali mengenai perizinan akses Manager dalam website sekolah.
Pasti Anda ingin tahu apa saja kemampuan pengguna Manager dalam mengelola website.
1. Pengguna dengan grup akses Manager dapat login melalui frontend login form, setelah
login pengguna akan memiliki perizinan akses Menu Admin, pada menu Admin itulah
pengguna tersebut dapat membuat artikel dan mengedit profil pengguna.

2. Pengguna dengan grup akses Manager bisa login ke dalam backend Administrator dan
dapat melakukan pengaturan terbatas.
Gambar 13.15 Backend Manager

BAB 14 - BEKERJA DENGAN TEMPLATE GANTRY
Gantry menyediakan antarmuka yang user-friendly untuk mengatur segala aspek desain
template. Anda dapat mengatur segala aspek desain template Gantry dengan mudah tanpa harus
mengedit source code atau coding, tinggal klak klik saja. Antarmuka tersebut bisa Anda akses dengan
membuka halaman Administrator  Extensions  Template Manager  Gantry-Default.
Di bab ini penulis hanya memberikan contoh konfigurasi template Gantry disesuaikan dengan
kebutuhan dasar website sekolah SMK Cyber Satria seperti mengedit logo, preset style, menghilangkan
brand Gantry, mengedit copyright, dan membuat tombol back to top.
14.1 Mengedit Logo Template Gantry

Logo merupakan simbol atau lambang yang mempunyai arti tertentu. Setiap sekolah pasti
mempunyai logo yang mencerminkan sekolah tersebut. Ada beberapa hal yang perlu diperhatikan untuk
merubah logo pada template Gantry.
1. Kita harus mengetahui ukuran logo pada template gantry, sehingga ketika kita mengganti
logo template gantry itu ukurannya pas. Cara mengetahuinya adalah dengan cara arahkan
kursor tepat pada logo gantry, lalu klik kanan dan periksa halaman menggunakan web
browser (Google Chrome). Setelah itu buka link gambar logo gantry dan lihat ukurannya
atau dengan melihat CSS pad rt-logo Ukuran untuk logo pada Template Gantry adalah
112x46 pixel.
Gambar 14.1 Periksa Halaman

2. Siapkan logo sekolah dengan ukuran 112x46 pixel dengan format .png dengan background
transparan.
Sekarang mari kita praktekan cara merubah logo template gantry.
1. Buka panel konfigurasi template Gantry dengan cara buka halaman Administrator klik
Extensions  Template Manager  Gantry – Default.
2. Klik tab menu Style, dan lihat pada Logo.
3. Pada Type rubah menjadi custom dan akan muncul pengaturan Custom Logo.

Gambar 14.2 Tab Menu Style
4. Pada Custom Logo ganti RokGallery menjadi MediaManager lalu klik Select.
Gambar 14.3 Custom Logo Template Gantry

5. Pada layar Media Manager klik folder logo dan pilih file logo.png lalu klik Insert.
Gambar 14.4 Direktori Logo Media Manager


14.2 Preset Style Template Gantry
Gantry memiliki fitur preset style untuk merubah tampilan desain template dengan mudah.
Template Gantry memiliki 4 (empat) variasi desain yang bisa Anda gunakan melalui tombol Presets
yang terdapat pada panel konfigurasi template Gantry.
Gambar 14.5 Preset Style Template Gantry
Penulis akan menggunakan Preset 4 untuk website sekolah, untuk menggantinya Anda
tinggal klik pada gambar Preset 4 lalu klik Save.
14.3 Menyembunyikan Brand Gantry

Di bagian bawah setiap halaman terdapat logo brand (merek) Gantry. Apabila Anda tidak suka
adanya logo brand tersebut, Anda dapat dengan mudah menyembunyikannya. Langkah-langkah
menyembunyikan logo brand Gantry sebagai berikut:
1. Buka panel konfigurasi template Gantry.
2. Klik tab menu Features.
3. Pada konfigurasi Branding rubah Show menjadi Off.
Gambar 14.6 Konfigurasi Branding Template Gantry

4. Klik Save.
14.4 Membuat Copyright Website

Copyright atau hak cipta merupakan bentuk perlindungan yang disediakan untuk penulis atau
pencipta atas karya originalnya, termasuk ebook, jurnal, buku, literatur, musik, seni, dan berbagai karya
intelektualnya, baik yang dipublikasikan maupun tidak. Fungsi copyright pada halaman website sekolah
adalah untuk melindungi kekayaan intelektual yang diterbitkan di dalam website.
Saat ini kita akan membuat informasi copyright yang akan diletakan di semua halaman website
sekolah. Langkah-langkah membuat informasi copyright sebagai berikut:

3. Pada konfigurasi Copyright pastikan Show rubah jadi On, Position tetap copyright-a dan
pada kolom Text hapus tulisan Designed by Rockettheme dan diganti dengan source code
berikut:
<b>© 2014 SMK Cyber Satria Purwokerto. All rights reserved.</b>
Gambar 14.7 Konfigurasi Copyright Template Gantry

4. Klik Save.
14.5 Tombol Back To Top

Membuat pengalaman pengguna yang baik pada website Anda sangatlah penting untuk
menjaga pengguna betah berselancar disetiap halaman. Cara terbaik menciptakan pengalaman
pengguna yang baik adalah membuat kemudahan bagi pengguna, jika website Anda memiliki interface
dan navigasi yang sulit maka pengguna akan malas untuk berkunjung kembali.
Pada halaman website yang memiliki banyak informasi (konten) tentu akan membuat pengguna
bergulir jauh ke bawah halaman saat membacanya. Tombol Back To Top merupakan tombol yang
berguna untuk menggulir halaman kembali ke atas.
Langkah-langkah membuat tombol Back To Top sebagai berikut:
3. Pada konfigurasi To-Top Scroller rubah Show menjadi On, Position tetap copyright-b,
dan Text tidak perlu diedit.
Gambar 14.8 Konfigurasi Tombol Back To Top Template Gantry

4. Klik Save.
14.6 Membuat Favicon Website Sekolah

Apa itu favicon? favicon adalah sebuah singkatan dari kata favorite icon yang berarti sebuah
gambar favorit yang digunakan sebagai icon atau logo website yang bersangkutan. Favicon sangat
mudah kita lihat karena letaknya berada dipaling atas yaitu pada sebuah tab menu web browser atau
disamping pada sebuah title atau judul website yang ada pada tab menu web browser. Favicon ini juga
mempermudah kita dalam mencari atau menemukan website dalam sebuah history pada browser
pengguna Internet. Langkah-langkah untuk membuat favicon di website sekolah sebagai berikut:
1. Siapkan logo sekolah dengan ukuran 16x16 pixel dengan format .png atau .jpg. Terserah
Anda, tetapi penulis memakai format .png.
2. Rubah nama logo tersebut menjadi favicon.png atau favicon.jpg.
3. Setelah logo siap, akses www.favicon-generator.org.

4. Lalu pada tab menu Generator klik tombol Pilih File, cari file logo yang akan dijadikan
favicon untuk diupload dan dirubah formatnya menjadi .ico. Jangan lupa beri tanda centang
pada Maintain Image Dimensions (don't resize to 16x16 pixel square).
Gambar 14.9 Upload Logo Favicon

5. Lalu upload logo favicon tersebut dengan klik tombol Create Favicon.
6. Setelah proses upload berhasil akan terbuka halaman baru, klik link Download the
generated favicon.
Gambar 14.10 Download Favicon

7. Maka file favicon.ico akan tersimpan ke dalam hardisk komputer Anda.
8. Copy file favicon.ico lalu pastekan file tersebut ke dalam direktori template gantry yaitu
C:\xampp\htdocs\sekolah\templates\gantry.
9. Buka web browser lalu buka website sekolah dan lihat hasilnya pada tab menu web browser
akan muncul logo favicon tersebut.
Gambar 14.11 Favicon Berhasil Muncul di Tab Menu Web Browser

14.7 Custom CSS Template Gantry
CSS (Cascading Style Sheet) adalah bahasa style sheet yang digunakan untuk mengatur
tampilan desain website. Template Gantry memiliki struktur aturan CSS dan properti yang dikompilasi
dari LESS. LESS adalah preprosesor CSS yang memberikan sentuhan dinamis kepada CSS dengan fitur
variabel, mixin, serta operasi dan fungsi yang dimilikinnya. Tujuan dibuatnya LESS sendiri adalah
untuk memberikan kemudahan dan keringkasan dalam membangun tampilan website yang
menggunakan CSS. Selebihnya tentang LESS CSS bisa Anda pelajari di http://lesscss.org/.
Custom CSS dimaksudkan untuk menambahkan stylesheet kustom ke template Gantry tanpa
khawatir tentang perubahan hilang ketika template atau kerang Gantry diperbarui. Kita tidak perlu
mengedit source code pada salah satu file (.css atau .less) template.
Di bab ini kita akan belajar bagaimana mengedit font pada menu menjadi lebih tebal agar lebih
terlihat jelas dengan cara menambahkan kustom css ke template Gantry.
Gambar 14.12 Periksa Elemen Menu Template Gantry
Langkah-langkah menambahkan kustom css untuk mengedit font pada menu template Gantry
sebagai berikut:
1. Login ke dalam CPanel hosting premium Anda.
2. Buka menu File Manager.
3. Buka folder templates  gantry  css.
4. Trus klik menu New File yang terletak di atas halaman, dan buatlah file gantry-custom.css.
Jika Anda bertanya mengapa nama file tersebut gantry-custom.css, itu asalnya dari
[TEMPLATE]-custom.css.
Gambar 14.13 Membuat File Baru di File Manager Cpanel

5. Setelah file gantry-custom.css dibuat, klik kanan file tersebut lalu klik Code edit.

Gambar 14.14 Code Edit File Manager CPanel
6. Pada halaman editor ketikkan kode css di bawah ini
.gf-menu {margin: 10px auto 0; list-style: none; font-weight: bold;}
7. Setelah itu klik Save Changes.

8. Buka frontend website sekolah dan lihat font pada menu website sekolah terlihat lebih tebal
dan jelas.
Gambar 14.15 Menu Setelah di Custom CSS

BAB 15 – WEB ONLINE
Setelah membuat website sekolah di localhost (server lokal), di bab ini kita akan belajar
membuat website sekolah menjadi online sehingga bisa diakses oleh siapa saja dan kapan saja melalui
jaringan internet.
15.1 Mendaftar Domain Gratis

Domain adalah nama unik yang diberikan untuk mengidentifikasikan server, baik itu web
server atau email server dikomputer. Bahasa gampangnya, domain adalah nama website kita. Sebagai
contoh, untuk alamat website www.google.com maka nama domainnya adalah google.com. Nama
domain dari website-website diseluruh dunia ini bersifat unik alias berbeda satu dengan yang lainnya.
Jadi jika nama domain sudah digunakan oleh orang lain maka Anda tidak bisa menggunakan nama
domain tersebut. Domain memiliki bermacam-macam ekstensi domain, contoh ekstensi domain
premium (berbayar) seperti .com, .net, .info, .org, .id, dan lain sebagainya.
Saat ini kita akan membuat nama domain dengan ekstensi .tk. Domain .tk ini gratis dan
memiliki cara kerja yang sama seperti domain premium. Setelah Anda mendapatkan nama .tk Anda
harus mengarahkan domain Anda ke DNS (Domain Name Server) server hosting yang Anda miliki
persis sama dengan Anda memiliki nama domain premium.
Untuk mendaftarkan nama domain .tk ikuti langkah berikut ini:
1. Akses www.dot.tk
2. Pada bagian Get a Free .TK Domain Name isikan dengan nama domain yang Anda
inginkan. Nantinya nama domain Anda akan memiliki ekstensi .tk. Sebagai contoh penulis
mengisikan dengan nama smkcybersatria, ingat nama domain tidak bisa dimiliki oleh dua
orang. Jadi silahkan Anda memilih nama domain yang lainnya. Jika sudah klik tombol GO.
Gambar 15.1 Mendaftar Domain Dot TK

3. Pada halaman berikutnya Anda harus mengarahkan nama domain ke alamat IP server
hosting yang Anda miliki, karena Anda belum memiliki server hosting maka akan kita isi
asal-asalan dulu, baru setelah Anda memiliki server hosting Anda bisa mengubah
pengaturannya nanti. Pada bagian Use you new domain tandai pilihan Use DNS.
4. Pada kolom IP address isikan saja asal IP. Kita akan mengubah settingan ini nanti setelah
Anda memiliki server hosting.

Gambar 15.2 Mengisi Dengan Asal Alamat IP Server
5. Lalu pada bagian Registrasi Length rubah menjadi 12 month agar nama domain Anda
bisa dipakai selama satu tahun penuh. Setelah satu tahun Anda bisa memperpanjang.
Jangan lupa tuliskan karakter yang terlihat.
Gambar 15.3 Lama Pendaftaran dan Karakter Keamanan

6. Klik SIGN UP.
7. Klik link email address yang terdapat di bagian paling bawah form pendaftaran untuk
melakukan pendaftaran via email.
8. Tuliskan nama email yang valid, setelah itu isikan nama dan password yang Anda inginkan
untuk membuat akun.
9. Klik Create Account.
Gambar 15.4 Membuat Akun di Dot TK

10. Buka email Anda, lalu cari email konfirmasi dari Dot TK. Jika Anda tidak menemukannya
di folder inbox, carilah pada folder SPAM, biasanya nyasar disana emailnya.
11. Jika sudah ketemu, buka email dari Dot TK dan baca email tersebut. Di dalam email
tersebut terdapat informasi akun Anda di Dot TK serta kode dan link untuk melakukan
konfirmasi. Klik link konfirmasi yang diberikan.

Gambar 15.5 Kode Konfirmasi Akun Dot TK
12. Pada halaman konfirmasi masukan kode konfirmasi yang tadi diberikan pada email lalu
klik tombol Confirm.
Gambar 15.6 Validasi Konfirmasi Dot TK

13. Setelah konfirmasi berhasil maka nama domain tersebut telah resmi menjadi milik Anda.
15.2 Mendaftar Server Hosting Gratis

Setelah kita memiliki nama domain gratisan (dalam contoh sekarang penulis memiliki domain
smkcybersatria.tk), sekarang saatnya mencari “rumah” untuk file-file website. Server hosting yang akan
kita gunakan adalah server hosting gratisan, karena hosting gratis bagus dan pas untuk latihan membuat
website online.
Kenapa server hosting bisa gratis? Mungkin itu karena salah satu strategi marketing perusahaan
hosting tersebut untuk mempromosikan layanan mereka. Dalam bab ini penulis akan menggunakan
layanan hosting gratis dari idhostinger.com karena layanan hosting gratis lokal dari segi fitur yang
diberikan idhostinger cukup lumayan.
Idhostinger merupakan perusahaan hosting lokal yang menawarkan hosting gratisan sebagai
media promosi mereka. Sebenarnya idhostinger adalah cabang dari perusahaan hosting internasional
yaitu hostinger. Layanan hosting gratisan dari idhostinger memiliki fitur:
Disk Space 2GB, artinya Anda memiliki kapasitas penyimpanan pada server hosting
sebesar 2GB.
Data Transfer 100GB, artinya Anda memiliki kapasitas bandwidth untuk transfer data
sebesar 100GB perbulan.
PHP, MySQL, PhpMyAdmin, Akses FTP dan masih banyak lagi.
Perbandingan fitur hosting gratis dengan hosting premium idhostinger bisa Anda akses di
http://www.idhostinger.com/web-hosting.

Langkah-langkah mendapatkan hosting gratis di idhostinger.com sebagai berikut:
1. Akses www.idhostinger.com.
2. Lihat pada bagian sebelah kanan atas, lalu klik Buat Akun.
Gambar 15.7 Link Buat Akun

3. Selanjutnya akan terbuka form pendaftaran, silahkan isi form pendaftaran tersebut dengan
data-data Anda yang valid.
4. Jangan lupa tuliskan karakter keamanan sesuai gambar dan beri centang pada Saya setuju
dengan Ketentuan Penggunaan Layanan.
5. Klik Buat Akun, setelah itu Anda akan dibawa ke halaman pemilihan layanan idhostinger.
Gambar 15.8 Form Pendaftaran Idhostinger

6. Anda belum bisa mengakses layanan apabila Anda belum melakukan aktivasi akun
idhostinger melalui link aktivasi yang dikirimkan dari idhostinger ke email Anda.
Gambar 15.9 Layanan Idhostinger

7. Buka email Anda dan cek email dari Hostinger Indonesia lalu klik link aktivasi yang
diberikan untuk mengaktifkan akun idhostinger Anda.

Gambar 15.10 Link Aktivasi Akun Idhostinger
8. Anda akan dibawa ke halaman pemilihan paket idhostinger. Pilih yang gratis dengan cara
menekan tombol Order pada bagian Gratis.
Gambar 15.11 Order Hosting Idhostinger

9. Pada halaman berikut yaitu halaman Order Hosting Baru, isikan data sebagai berikut:
Ubah Tipe Domain: ganti Subdomain menjadi Domain.
Domain: isikan dengan domain Dot TK yang sebelumnya sudah Anda daftarkan.
Sebagai contoh penulis mengisikan dengan nama domain smkcybersatria.tk.
Password: isikan dengan password untuk akun hosting Anda.
Ulangi Password: ketika ulang password.
Gambar 15.12 Input Domain Untuk Membuat Akun Hosting Gratis
10. Lalu klik Lanjutkan.

11. Berikutnya pada Konfirmasi Order Anda, isikan karakter Captcha dengan benar dan beri
centang pada Saya setuju dengan ketentuan penggunaan layanan.
12. Lalu klik Order.
13. Selamat sekarang Anda sudah memiliki akun hosting gratis di idhostinger.

Gambar 15.13 Akun Paket Hosting Gratis Telah Aktif
15.3 Pointing Nama Domain ke Server Hosting

Anda sudah memiliki domain dan server hosting gratis, walaupun gratis namun fungsi dan cara
kerjanya tidak berbeda dengan yang premium. Perlu diingat, ketika Anda membuat domain di Dot TK
domain tersebut belum diisi dengan data nama server hosting yang benar alias masih asal-asalan.
Pada tahap ini kita akan mengarahkan (pointing) nama domain Anda ke server hosting Anda, sehingga
ketika orang mengetikkan nama domain Anda maka file atau data website yang diupload ke server
hosting bisa ditampilkan.
15.3.1 Mengetahui Name Server Idhostinger

Name server (nama server) adalah nama untuk web server yang disediakan untuk mengarahkan
sebuah domain ke server yang dituju. Biasanya penamaan server ini seperti ns.1.namaserver.com,
ns2.nameserver.com. Dengan memasukkan parameter name server ke isian name server melalui panel
kontrol domain, maka domain kita akan bisa diarahkan untuk hosting di server yang dituju.
1. Akses URL cpanel.idhostinger.com.
2. Login dengan akun idhostinger yang telah Anda buat sebelumnya.
3. Setelah berhasil login, klik menu Hosting  Akun Hosting.
Gambar 15.14 Akun Hosting SMK Cyber Satria

4. Klik menu Detail, setelah itu akan nampak informasi name server idhostinger.
Gambar 15.15 Detail Nameserver Akun Hosting

15.3.2 Pointing Nama Domain ke Server Hosting
Setelah Anda mengetahui nameserver dari hosting Anda, selanjutnya kita akan mengatur agar
nama domain Dot TK Anda mengarah ke server hosting Anda. Untuk itu ikuti langkah berikut:
1. Buka www.dot.tk dan klik tombol Login ke My Dot TK yang terletak di sebelah kanan
atas.
2. Anda akan diarahkan ke halaman login. Lalu pada bagian Or use your email and password
combination terdapat form login, silahkan isikan dengan informasi akun Dot TK yang telah
Anda buat sebelumnya.
Gambar 15.16 Form Login Dot TK

3. Setelah login berhasil, Anda akan diarahkan ke halaman
https://my.freenom.com/clientarea.php
4. Klik Domains  My Domains.
Gambar 15.17 Menu My Domain Client Area Freenom

5. Pada halaman berikutnya, klik Manage Domain pada domain Dot TK Anda.
Gambar 15.18 Tombol Manage Domain

6. Pada halaman berikutnya klik tab menu Management Tools  Name Server.

Gambar 15.19 Menu Nameservers
7. Pada halaman berikutnya pilih Use custom nameservers (enter below) lalu edit semua
name server yang ada dengan name server dari idhostinger.
8. Setelah itu klik Change Nameservers.
Gambar 15.20 Form Custom Nameservers Domain
15.3.3 Mempercepat Propagasi Domain Name Server di Windows 7 dan 8

Domain yang diarahkan ke server hosting tidak serta merta langsung bisa diakses menggunakan
browser, bahkan jika Anda melakukan ping menggunakan command prompt, Anda tidak
mendapatkan reply / mendapatkan pesan request could not find host. Penyebabnya adalah proses
propagasi DNS (Domain Name Server)
Propagasi DNS adalah istilah dari pendistribusian record DNS baru, biasanya memerlukan
waktu antara 1×24 jam sampai dengan 3×24 jam setelah penggantian record DNS lama, agar DNS baru
dapat diakses dengan sempurna, lama waktu pendistribusian record DNS ini berbeda beda (bisa lebih
cepat atau sebaliknya), tergantung kebijakan ISP Anda dalam meraih record DNS baru tersebut. Pada
masa Propagasi DNS ini, biasanya domain tersebut tidak dapat diakses dengan sempurna.
Agar domain dapat cepat diakses maka diperlukan trik untuk mempercepat proses propagasi
DNS. Langkah-langkah mempercepat progasi DNS menggunakan Windows 7 dan 8 sebagai berikut:
1. Pada Windows, buka direktori C:\Windows\System32\Drivers\etc.
2. Copy file hosts lalu pastekan ke partisi atau direktori lain.

Gambar 15.21 File Hosts Sebelum di Folder etc.
3. Buka file hosts dengan Notepad++ atau Notepad.
Gambar 15.22 Kode Hosts Sebelum di Edit

4. Silahkan tambahkan baris IP server hosting idhostinger dan domain seperti pada gambar
yang ditandai kotak merah:
Gambar 15.23 Alamat IP server hosting dan Domain

5. Pada baris kode diatas, rubah smkcybersatria.tk dengan nama domain Anda. Alamat IP
yang ditambahkan di atas berasal dari IP name server idhostinger.
6. Lalu Save.
7. Copy file hosts yang telah diedit dan pastekan kembali file tersebut ke direktori
C:\Windows\System32\Drivers\etc.
8. Buka Command Prompt Windows lalu ketikan ipconfig /flushdns lalu tekan Enter.

Gambar 15.24 Command Prompt IPConfig Flush DNS
9. Lalu coba buka lagi domain Anda melalui browser. Jika belum bisa silahkan bersihkan
cache browser atau restart komputer anda.
10. Jika domain Anda berhasil dibuka biasanya akan diarahkan ke halaman CGI tampilannya
akan seperti di bawah ini:
Gambar 15.25 Halaman CGI Ketika Domain di Akses
15.4 Upload Website Sekolah ke Server Hosting

Agar website dapat diakses secara online semua file website yang berada di komputer harus
kita upload ke server hosting, ada dua cara mengupload file ke server hosting yaitu melalui File Manager
dan menggunakan FTP (File Transfer Protocol).
15.4.1 Cara Masuk Kontrol Panel Idhostinger

Untuk masuk ke dalam kontrol panel idhostinger ikuti langkah-langkah berikut ini:
1. Akses www.idhostinger.com dan loginlah menggunakan email dan password yang Anda
gunakan saat mendaftar hosting gratis di idhostinger.
2. Pada halaman berikutnya klik menu Hosting  Akun Hosting Anda.
Gambar 15.26 Akun Hosting SMK Cyber Satria

3. Dan selamat datang di kontrol panel hosting gratis idhostinger.
Gambar 15.27 Kontrol Panel Hosting Gratis Idhostinger
15.4.2 Upload File Website Melalui File Manager

Pada kontrol panel akun hosting gratis idhostinger terdapat menu File Manager 1 dan File
Manager 2 yang bisa Anda gunakan salah satunya untuk mengupload file-file website. Namun,
sebelum upload file-file website di komputer ke server hosting idhostinger menggunakan file manager
ada beberapa hal yang perlu Anda perhatikan, yaitu:
1. Akun hosting gratis idhostinger hanya diberikan batasan upload sebesar 9765.625 kB
(kurang lebih 10MB). Jika semua file website yang ada di dalam direktori
C:\xampp\htdocs\sekolah dikompres menjadi .zip, besar file .zip tersebut melebihi batas
upload akun hosting gratis di idhostinger. Sehingga tidak mungkin untuk menguploadnya,
terkecuali dipecah menjadi beberapa bagian.
2. Upload melalui hosting gratis idhostinger sering bermasalah.
3. Kita tidak mungkin mengupload satu persatu file secara manual melalui file manager,
karena sangat melelahkan apabila mengupload ribuan file.
4. Proses upload tidak bisa disambung jika koneksi internet terputus.
Karena dari masalah-masalah itulah penulis tidak membahas lebih jauh bagaimana cara
mengupload melalui file manager, namun penulis akan membahasnya dengan cara lain yaitu melalui
FTP Client.
15.4.3 Upload File Website Melalui FTP Client

Untuk mengupload menggunakan FTP Anda harus menginstal FTP Client. FTP Client yang
paling populer adalah FileZilla yang bisa Anda copy di dalam CD  software 
FileZilla_3.9.0.5_win32-setup.exe, lalu silahkan instal di komputer Anda. Kelebihan mengupload
menggunakan FTP adalah lebih stabil dan bisa disambung jika koneksi internet terputus.
1. Setelah FileZilla diinstal, silahkan jalankan aplikasi FileZilla.
2. Pada bagian atas FileZilla terdapat form input Host, Username, Password, dan Port. Host
diisi dengan ftp domain atau nama domain Anda. Username diisi dengan username FTP
Anda. Password diisi dengan password akun hosting gratis idhostinger, untuk Port biarkan
saja kosong atau tidak perlu diisi.

Gambar 15.28 Form Input FTP di FileZilla
Untuk mengetahui informasi Username FTP dan Password Anda bisa melihatnya dengan
mengecek dan membaca email dari Hostinger Indonesia pada saat membuat akun hosting
gratis.
Gambar 15.29 Informasi FTP di Email

Atau Anda dapat melihat melalui informasi Username FTP tersebut pada kontrol panel
idhostinger.
Gambar 15.30 Informasi Hosting di Kontrol Panel Idhostinger

3. Jika Host, Username, Password, sudah diisi, klik tombol Quickconnect.
Gambar 15.31 Tombol Quickconnect FileZilla

4. Apabila muncul Message Box Remember passwords? Pilih Remember Passwords dan
klik OK. Maksudnya adalah apabila FileZilla di-restart maka FileZilla akan melakukan
koneksi otomatis sesuai data yang tersimpan.
Gambar 15.32 Message Box Remember Passwords FileZilla

5. Setelah terkoneksi dengan server hosting Anda, selanjutnya pada panel sebelah kiri pada
FileZilla cari dan buka folder sekolah dimana file-file website sekolah terletak di dalamnya.
Jika Anda ingin mencarinya dengan cepat ketikan path direktori C:\xampp\htdocs\sekolah\
pada kolom Local site.
Gambar 15.33 Path Folder Sekolah

6. Lalu pada kolom di bawahnya secara otomatis akan membuka semua isi dari folder sekolah,
dimana di dalam folder sekolah berisi semua file-file website sekolah. Seleksi semua file
dan folder yang terdapat di dalam folder sekolah dengan cara klik folder administrator lalu
tekan Shift dan tahan, terus gulir ke bawah dari cari file web.config.txt dan klik file
tersebut.
Gambar 15.34 Path Folder Sekolah

7. Setelah semua folder dan file terseleksi, klik kanan dan tekan Upload.

Gambar 15.35 Upload Folder dan File Website Sekolah
8. Proses upload akan berjalan, apabila ada file yang gagal upload secara otomatis akan masuk
ke dalam tab menu Failed Transfer dan untuk meneruskannya kembali Anda tinggal klik
kanan pada file tersebut lalu klik Reset dan requeue all untuk mengulang proses upload
pada semua file yang gagal upload.
Gambar 15.36 Mengulang File Gagal Upload

9. Setelah semua file berhasil diupload, pada panel sebelah kanan cari file default.php dan
.htaccess, jika sudah ketemu hapus kedua file tersebut dengan cara seleksi lalu klik kanan
dan tekan Delete. Kedua file tersebut dihapus karena kedua file tersebut merupakan bagian
dari file website sekolah, namun file bawaan dari server hosting idhostinger.
Gambar 15.37 Menghapus File Dengan FileZilla
15.5 Upload Database Website Sekolah

Setelah mengupload semua file website sekolah (joomla), masih ada satu lagi yang perlu
diupload ke server hosting yaitu database. Database website sekolah di localhost perlu dipindah ke
database server hosting dengan cara mengimpor database.

15.5.1 Ekspor Database di Localhost
Sebelum mengimpor database ke database hosting, terlebih dahulu Anda harus mengekspor
database dari database localhost (PhpMyAdmin) ke hardisk komputer Anda. Cara ekspor database di
localhost sebagai berikut:
1. Buka kontrol panel XAMPP lalu Start Apache dan MySQL.
2. Buka web browser dan ketikkan url localhost/phpmyadmin.
3. Pada halaman PhpMyAdmin, pilih nama database yang ingin di ekspor dan klik database
tersebut untuk membukanya. (database tersebut terletak di sisi kiri halaman PhpMyAdmin)
Gambar 15.38 Database Sekolah di PhpMyAdmin

4. Klik tab menu Ekspor, jika sudah terbuka halaman Ekspor langsung klik Kirim.
Gambar 15.39 Ekspor Database di PhpMyAdmin

5. Save databasenya ke hardisk PC anda, pastikan file yang di simpan sudah benar dengan
ekstensi file .sql (seharusnya nama_database.sql, nama database yang diekspor dengan
ekstensi .sql)
15.5.2 Membuat Database di Hosting Gratis Idhostinger

Jika sudah melakukan ekspor database di localhost, langkah selanjutnya adalah membuat
database di hosting gratis idhostinger. Cara membuat database di hosting gratis idhostinger sebagai
berikut:
1. Login ke kontrol panel hosting idhostinger.
2. Klik menu Database MySQL.

Gambar 15.40 Kontrol Panel Database MySQL
3. Pada form Buat Database dan User Database MySQL isikan data-data seperti penjelasan
di bawah ini:
Nama Database MySQL diisi dengan nama database yang akan dibuat, nama
database hanya bisa diisi dengan lima (5) karakter misal diisi dbase maka nanti
nama databasenya menjadi u471589437_dbase.
Username MySQL diisi dengan nama pengguna untuk database, misal diisi
mimin maka nanti username databasenya menjadi u471589437_mimin.
Password diisi dengan password database.
Masukkan Password Kembali silahkan ketik ulang password database.
Klik Buat.
Gambar 15.41 Buat Database dan User Database MySQL Idhostinger
4. Setelah klik Buat, maka database dan user database yang telah dibuat akan masuk ke dalam
tabel Daftar Database dan User Database MySQL.
5. Pada Daftar Database dan User Database MySQL terdapat informasi Database MySQL
(nama database), User MySQL (pengguna database), dan Host MySQL. Satu lagi password
database juga jangan sampai lupa, karena semua informasi tersebut nantinya akan kita
gunakan disaat konfigurasi website sekolah di server hosting yang akan di bahas pada bab
15.6.

Gambar 15.42 Daftar Database dan User Database MySQL Idhostinger
15.5.3 Impor Database ke Hosting Gratis Idhostinger

Database di server hosting sudah dibuat, sekarang kita akan mengimpor database dari komputer
ke database server hosting gratis idhostinger.
1. Masih menyambung bab sebelumnya, pada tabel Daftar Database dan User Database
MySQL klik menu PhpMyAdmin atau Anda bisa membukanya melalui halaman kontrol
panel lalu cari menu PhpMyAdmin.
Gambar 15.43 Menu PhpMyAdmin

2. Setelah halaman PhpMyAdmin terbuka, klik tab menu Impor.
3. Pada bagian Berkas Untuk Diimpor klik Pilih File lalu cari database sekolah (sekolah.sql)
yang telah Anda ekspor dari database localhost.
Gambar 15.44 Impor Database di PhpMyAdmin

4. Lalu klik tombol Kirim untuk mengupload database.
5. Jika database berhasil diimpor maka akan muncul pesan seperti di bawah ini.

Gambar 15.45 Impor Database Berhasil
15.5.4 Konfigurasi Website Sekolah di Server Hosting Gratis

Walaupun semua file dan database website sekolah (joomla) sudah kita upload ke server
hosting, tidak langsung membuat website bisa diakses. Silahkan buka web browser lalu akses domain
Dot TK Anda, pasti akan muncul pesan Error displaying the error page: Application Instantiation
Error: Could not connect to MySQL. Pesan itu muncul karena belum adanya koneksi antara database
dengan file website sekolah. Agar tidak muncul pesan seperti itu dan website sekolah bisa diakses,
masih ada satu hal lagi yang harus kita lakukan yaitu konfigurasi website sekolah (joomla) di server
hosting. Biar lebih jelas langsung aja ke prakteknya.
1. Buka kontrol panel hosting Anda.
2. Klik menu File Manager 1 atau File Manajer 2, penulis akan menggunakan File Manajer
2 karena jika ingin menggunakan File Manajer 1 Anda harus menginstal File Manajer 1
terlebih dahulu.
Gambar 15.46 File Manajer 1 dan File Manajer 2

Jika Anda ingin menggunakan File Manajer 1 cara instalnya gampang, Di kontrol panel
hosting Anda tinggal buka menu File Manajer 1 terus akan ada pengaturan Install File
Manajer, Pilih Bahasa lalu klik Install.
Gambar 15.47 Instal File Manajer 1

3. Di dalam File Manajer 2 klik folder public_html.

Gambar 15.48 Folder public_html di File Manajer 2
4. Di dalam folder public_html cari file configuration.php lalu buka file tersebut dengan
cara klik Edit. File configuration.php berisi source code untuk mengatur semua aspek
website Joomla.
Gambar 15.49 Impor Database Berhasil

5. Pertama cari baris kode public $host = 'localhost'; lalu edit menjadi public $host = public
$host = 'mysql.idhostinger.com';. mysql.idhostinger.com merupakan Host MySQL
hosting gratis idhostinger.
6. Kedua cari baris kode public $user = 'adsek'; lalu edit adsek dengan User MySQL
database Anda di hosting gratis idhostinger. Dalam contoh penulis mengeditnya menjadi
public public $user = 'u471589437_gantry';.
7. Ketiga cari baris kode public $password = '12345'; lalu edit 12345 dengan Password
MySQL hosting Anda. Dalam contoh penulis mengeditnya menjadi public $password =
'gantry';.
8. Keempat cari baris kode public $db = 'sekolah'; lalu diedit sekolah dengan Database
MySQL hosting Anda. Dalam contoh penulis mengeditnya menjadi public $db =
'u471589437_dbase';.
Gambar 15.50 Host User Password dan Database Setelah Diedit

9. Kelima cari baris kode public $log_path = 'C:\\xampp\\htdocs\\sekolah/logs'; lalu diedit
menjadi public $log_path = '/home/UsernameHostingAnda/public_html/logs';.
Log Path merupakan direktori folder logs (joomla) untuk menyimpan informasi masalah
(error) Joomla. Dalam contoh ini penulis mengeditnya menjadi public $log_path =
'/home/u471589437/public_html/logs' .
10. Keenam cari baris kode public $tmp_path = 'C:\\xampp\\htdocs\\sekolah/tmp'; lalu
diedit menjadi public $tmp_path = '/home/UsernameHostingAnda/public_html/tmp';.

Tmp Path merupakan direktori folder tmp Joomla untuk menyimpan data-data temporari
website Joomla.
Gambar 15.51 Log Path dan Tmp Path Setelah Diedit

11. Klik tombol Disket disebelah atas kiri halaman untuk Save kode configuration.php yang
telah diedit.
Gambar 15.52 Tombol Save Editor Idhostinger
Jika file configuration sudah diedit dengan benar, sekarang buka web browser dan silahkan
buka domain Dot Tk Anda maka website sekolah sudah bisa diakses secara online.
Sayangnya ketika membuka satu persatu halaman terdapat halaman yang bermasalah (error),
yaitu halaman Menu Guru, Staf, dan Gallery.
Gambar 15.53 Pesan Error RokGallery Database MySQL Tidak Support InnoDB
Hal itu disebabkan karena konten pada menu tersebut berasal dari komponen RokGallery,
sedangkan RokGallery mempunyai kebutuhan sistem database MySQL support InnoDB ( untuk lebih
jelasnya silahkan akses halaman dokumentasi kebutuhan sistem ekstensi RokGallery
http://www.rockettheme.com/docs/joomla/extensions/rokgallery/INDEX.md#requirements). MySQL
hosting gratis dari idhostinger tidak support dengan InnoDB. Layanan web hosting yang support dengan
database MySQL InnoDB adalah layanan web hosting premium. Saran penulis adalah gunakan web
hosting premium untuk website sekolah Anda, karena selain lebih profesional, juga fiturnya lebih
lengkap. Cara kerja membuat website sekolah online di hosting gratis dan premium tidaklah berbeda
dari membuat database, impor database, hingga konfigurasi website sekolah (Joomla). Untuk domain
sendiri juga harus premium karena umumnya website sekolah di Indonesia menggunakan domain
.sch.id atau .com.
Membeli web hosting dan domain tidak harus di idhostinger.com, banyak penyedia layanan
web hosting dan domain premium lainnya yang memiliki kualitas dan support yang baik seperti
rumahweb.com, qwords.com, jagoanhosting.com, dan lain sebagainya. Pilihlah layanan web hosting
yang memiliki harga terjangkau, rekam jejak yang baik dengan membaca testimoni konsumen mereka.
Pada bab selanjutnya penulis anggap Anda sudah menggunakan domain dan web
hosting premium, sehingga pesan error pada halaman Menu Guru, Staf, dan Gallery
sudah hilang dan website sekolah sudah bisa diakses secara normal seperti waktu
dibuat di localhost.

BAB 16 – GLOBAL CONFIGURATION
Global Configuration adalah antarmuka pengaturan global Joomla dimana pengguna dengan
atribut Super User (Administrator) yang dapat mengaksesnya untuk mengatur semua kebutuhan website
secara luas. Di bab ini akan dibahas pengaturan-pengaturan dasar di Global Configuration untuk
meningkatkan kemanana website sekolah yang dibuat dengan CMS Joomla.
16.1 Mengaktifkan Captcha

Captcha adalah program yang melindungi situs terhadap bot dengan menghasilkan dan tes
penilaian bahwa manusia dapat lulus tapi program komputer tidak bisa. Sebagai contoh, manusia dapat
membaca teks terdistorsi seperti yang ditunjukkan di bawah, namun program komputer saat ini tidak
bisa:
Gambar 16.1 ReCaptcha
Captcha biasa digunakan pada form input data seperti form komentar, form email, dan lain
sebainya untuk mencegah spam oleh bot. Pada menu Contact website sekolah terdapat Form Contact
yang rawan diserang oleh bot Spam, oleh sebab itu penting untuk mengaktifkan Captcha.
Langkah-langkah mengaktifkan Captcha sebagai berikut:
1. Akses http://www.google.com/recaptcha/intro/
2. Lalu klik tombol Get ReCAPTCHA yang terletak disebelah atas pojok kanan.
3. Pada halaman berikutnya, klik tombol Sign Up Now.
4. Silahkan login dengan email Gmail Anda. Jika belum punya akun Gmail maka Anda
diharuskan membuat akun Gmail terlebih dahulu.
5. Apabila sudah login ke dalam, isikan kolom domain dengan nama domain Anda, sebagai
contoh penulis mengisikan dengan www.smkcybersatria.com (domain premium) lalu klik
tombol CREATE.
Gambar 16.2 Mendaftarkan Nama Domain ke ReCaptcha

6. Pada halaman berikutnya di bawah tombol Add a New Site terdapat link domain Anda.
Klik link tersebut maka Anda akan diarahkan ke halaman informasi ReCAPTCHA untuk
domain Anda.

Gambar 16.3 Akun ReCaptcha
7. Terdapat informasi Public Key dan Privat Key yang akan kita gunakan untuk
mengaktifkan Captcha di Joomla.
Gambar 16.4 Public Key dan Private Key ReCaptcha

8. Sekarang buka halaman Administrator.
10. Cari plugin Captcha – ReCaptcha, jika sudah ketemu klik pada nama plugin tersebut.
Gambar 16.5 Plugin Captcha - ReCaptcha

11. Pada halaman konfigurasi plugin Captcha terdapat kolom Public Key dan Privat Key, isi
dengan Public Key dan Private Key yang sudah Anda dapatkan sebelumnya.
12. Untuk Theme silahkan pilih sesuai dengan keinginan Anda. Penulis menggunakan Theme
Red.
Gambar 16.6 Input Public Key dan Private Key

13. Beralih ke sisi kanan halaman, pada Status rubah menjadi Enable.
14. Klik tombol Save & Close.
15. Setelah itu beralih ke menu System  Global Configuration.
16. Pada halaman Global Configuration, tepatnya pada tab menu Site cari konfigurasi Default
Captcha lalu rubah menjadi Captcha – ReCaptcha.
Gambar 16.7 Global Configuration Captcha

18. Buka menu Contact di frontend lalu klik tab menu Contact Form dan lihat hasilnya.
Gambar 16.8 ReCaptcha Website Sekolah
Google ReCaptcha tidak akan muncul pada halaman website yang menggunakan domain
gratis .tk karena Google ReCaptcha diblok oleh sistem domain .tk.
16.2 Pengaturan Global Configuration Server Joomla

Buka menu Global Configuration Joomla terus beralih ke tab menu Server, Anda akan
menjumpai berbagai konfigurasi server untuk CMS Joomla seperti pengaturan server, zona waktu, FTP,
Proxy, Database, dan Mail.
Pengaturan Global Configuration untuk website sekolah ditujukan untuk
Konfigurasi CMS Joomla untuk mempercepat proses loading konten website dengan
mengaktifkan GZIP Page Compression. Dengan mengaktifkan Gzip Page Compression
maka web server akan mengompres file atau konten joomla sebelum mengirim ke

pengguna. Hal ini akan mempercepat loading halaman website terutama untuk
pengunjung website yang memiliki koneksi bandwidth rendah (lemot).
Menonaktifkan Error Reporting, ketika PHP (Joomla) melakukan laporan kesalahan,
laporan tersebut tidak muncul di halaman frontend atau backend Joomla. Error
Reporting adalah salah satu fitur Joomla yang berguna untuk memecahkan masalah
kesalahan PHP di situs Joomla Anda. Fungsi ini memberikan beberapa petunjuk
tentang apa dan dimana masalah PHP. Apabila terjadi masalah PHP pada Joomla maka
pesan error PHP tersebut akan muncul di frontend maupun backend situs.
Mengatur zona waktu.
Untuk mengaktifkan Gzip Page Compression, pada konfigurasi Gzip Page Compression rubah
menjadi Yes.
Lalu untuk menonaktifkan Error Reporting, pada konfigurasi Error Reporting silahkan rubah
menjadi None.
Gambar 16.9 Gzip Page Compression
Yang terakhir untuk pengaturan zona waktu, pada Server Time Zone disesuaikan dengan zona
waktu daerah Anda tinggal.
Gambar 16.10 Server Time Zone
Setelah itu klik tombol Save & Close.

BAB 17 – LANGUAGE
Language merupakan tipe ekstensi yang menerjemahkan bahasa string teks Joomla. Paket
ekstensi language menyediakan terjemahan untuk sistem Joomla. Ekstensi tersebut merubah bahasa
pada frontend dan backend Administrator Joomla. Di bab akan dijelaskan bagaimana cara menginstal
ekstensi language bahasa Indonesia untuk merubah bahasa frontend dan backend website sekolah
(Joomla).
17.1 Language Manager

Pada Joomla 3.4.x Anda dapat menginstal dan mengelola ekstensi Language melalui
Extensions  Language Manager. Di halaman Language Manager, tepatnya disisi sebelah kiri
terdapat menu pengaturan seperti:
• Installed – Site: Pada Installed-Site Anda dapat melihat daftar ekstensi Language yang
terinstal, lalu memilih salah satu ekstensi untuk dijadikan bahasa frontend.
• Installed – Administrator: Pada Installed-Administrator Anda dapat melihat daftar ekstensi
Language yang terinstal, lalu memilih salah satu ekstensi untuk dijadikan bahasa frontend.
• Content: Di dalam menu Content Anda dapat mengatur segala konfigurasi bahasa seperti
Native Title, Language Code, dan lain sebagainya. Konfigurasi pada menu Content ini
biasanya dilakukan untuk membuat website dengan multibahasa.
• Overrides: Di dalam menu Overrides Anda dapat merubah teks pada bahasa.
Yang akan lakukan untuk merubah bahasa website sekolah adalah dengan cara menginstal
ekstensi languange, jadi kita tidak akan menggunakan menu Content ataupun Overrides.
17.2 Merubah Bahasa Frontend dan Backend Website Sekolah

Untuk menginstal ekstensi (Language) Bahasa Indonesia langkah-langkahnya sebagai berikut:
1. Pada halaman Language Manager klik tombol Install Languages.
2. Lalu pada kolom search isikan dengan nama Indonesia dan tekan Enter.
3. Setelah muncul daftar paket bahasa Indonesia, beri tanda centang pada ekstensi tersebut
lalu klik tombol Install.
Gambar 17.1 Install Languages Bahasa Indonesia

4. Setelah instalasi berhasil, klik Extensions  Language Manager.

Gambar 17.2 Install Languages Bahasa Indonesia Berhasil
5. Pada menu Installed – Site pada baris Bahasa Indonesia klim tombol Bintang untuk
menjadikan Bahasa Indonesia sebagai bahasa utama pada frontend.
Gambar 17.3 Default Languages

6. Beralih ke menu Installed – Administrator lakukan hal yang sama seperti point nomor 5
untuk menjadikan Bahasa Indonesia sebagai bahasa utama pada Backend.
7. Secara otomatis semua bahasa pada frontend dan backend website sekolah berubah menjadi
Bahasa Indonesia.
Dalam pembahasan bab selanjutnya, penulis masih menggunakan bahasa Inggris pada
backend Administrator Joomla, yang dirubah hanya bahasa pada frontend website sekolah.

BAB 18 - SEO
S earch Engine Optimization atau disingkat SEO merupakan cara atau teknik
mengoptimalkan website agar mudah terindeks oleh mesin pencari seperti Google, Yahoo,
Bing, dan lain sebagainya. Tujuan SEO adalah untuk meningkatkan volume dan kualitas trafik
kunjungan melalui mesin pencari tersebut.
Teknik SEO itu banyak sekali, pada bab ini Anda akan dijelaskan bagaimana mengoptimalkan
SEO website sekolah yang dibuat dengan CMS Joomla dan Gantry Framework.
18.1 Mengaktifkan SEF URL Joomla

Salah satu teknik optimisasi SEO Joomla adalah dengan membuat Search Engine Friendly
(SEF) URL. SEF URL merupakan URL yang mudah dibaca oleh manusia maupun mesin pencari seperti
Google, Bing, Yahoo, dan lain sebagainya. Lebih jelasnya lihat contoh perbandingan URL Joomla
berikut ini:
• URL Joomla tanpa mengaktifkan SEF URL
http://www.domain_anda.com/index.php?option=com_content&view=article&id=1:sela
mat-datang-ke-joomla&catid=1:berita-terkini&Itemid=50
• URL Joomla setelah mengaktifkan SEF URL
http://www.domain_anda.com/berita/1-berita-terkini/1--selamat-datang-ke--joomla
Dengan melihat perbandingan URL di atas tentu SEF URL lebih mudah dibaca bukan?
Membuat SEF URL pada Joomla ada dua cara, yaitu:
• Dengan membuat alias pada artikel dan menu.
• Dengan mengaktifkan fitur SEF pada Global Donfiguration lalu mengedit file htaccess.txt.
Cara pertama sudah kita lakukan ketika membuat artikel dan menu untuk website sekolah
dengan mengisi kolom Alias dengan judul artikel atau menu. Sebagai contoh lihat URL pada halaman
Sambutan Kepala Sekolah http://domain_anda/index.php/profiles/sejarah-sekolah.
URL tersebut akan lebih mudah terbaca lagi apabila kita mengaktifkan SEF URL dengan
mengedit file htaccess. Untuk mengaktifkan SEF URL menggunakan htaccess silahkan ikut langkah-
langkah berikut ini:
1. Login ke halaman Administrator Joomla.
2. Klik menu System  Global Configuration.
3. Pada bagian SEO Setting jadikan Search Engine Friendly URLs 'Yes' dan Use URL
rewriting 'Yes'.
Gambar 18.1 Global Configuration SEF URL

4. Save.
5. Lalu login ke dalam CPanel Hosting Anda.
6. Klik menu File Manager, buka folder public_html dan cari file dengan nama
htaccess.txt.
7. Rename (ubah nama) htaccess.txt menjadi .htaccess.
Gambar 18.2 Rename .htaccess di Cpanel

8. Silahkan reload website Joomla Anda dan lihat perubahan URL nya.
Contoh perubahan URL yang akan terjadi pada website sekolah seperti berikut:
http://domain_anda/index.php/profiles/sejarah-sekolah akan berubah menjadi
http://domain_anda/profiles/sejarah-sekolah
18.2 Meta Decriptions dan Meta Keywords

Meta descriptions merupakan ringkasan konten pada halaman website dalam satu paragraf.
Sedangkan meta keywords adalah kata kunci untuk konten pada halaman website, kata kunci itu
umumnya terdiri dari 1 – 3 kata yang dipisahkan dengan tanda koma. Meta descriptions dan meta
keywords digunakan oleh mesin pencari untuk menampilkan deskripsi halaman ketika menampilkan di
halaman hasil mesin pencari (SERPs).
Gambar 18.3 Contoh Hasil Pencarian Mesin Pencari
Contoh Gambar 18.3 merupakan hasil pencarian dengan menggunakan keyword joomla, lalu
keyoword joomla akan muncul dengan huruf tebal pada deskripsi situs hasil pencarian mesin pencari.

Anda dapat menambahkan meta descriptions dan meta keywords pada setiap item Joomla
seperti menu, artikel, komponen, kontak, dan lain sebagainya dengan cara menginputkan meta
descriptions dan meta keywords pada tab menu Metadata (pada Menu) atau Publishing (pada Artikel).
Gambar 18.4 Tab Menu Metadata Menu Sejarah Sekolah
18.3 Submit Website ke Mesin Pencari Google

Agar website sekolah menjadi lebih akrab dengan mesin pencari google, dan pengunjung
website sekolah kita jadi meningkat, ini memerlukan usaha publikasi website sekolah ke mesin pencari
Google.
Cara mendaftarkan website sekolah ke mesin pencari Google sebagai berikut:
1. Akses www.google.com/addurl.
2. Ketika halaman berhasil diakses, silahkan login dengan akun Gmail Anda.
3. Ketikkan nama domain Anda pada kolom URL lalu ketikkan kode keamanan sesuai dengan
gambar.
Gambar 18.5 Submit Website ke Google

4. Klik tombol Submit Request.
Perlu di ingat bahwa Anda cukup mendaftarkan website sekolah Anda satu kali saja tanpa perlu
mengulanginya lagi. Anda juga tidak perlu memasukkan semua halaman-halaman website sekolah yang
ada untuk didaftarkan, cukup halaman utama saja.
Selain Google silahkan website sekolah Anda daftarkan ke mesin pencari lain seperti Yahoo,
Bing, dan lain sebagainya.

18.4 Membuat Sitemap Dengan Komponen Xmap
Kita akan kembali bekerja dengan komponen, komponen yang dimaksud adalah komponen
Xmap untuk membuat sitemap website. Penulis sengaja pembahasan komponen Xmap tidak
dimasukkan ke dalam pembahasan Bab 10 - Bekerja Dengan Komponen dengan pertimbangan lebih
tepat dimasukkan ke dalam pembahasan SEO.
18.4.1 Instal Komponen Xmap

Xmap adalah komponen generator sitemap Joomla. Xmap memungkinkan Anda untuk
membuat sitemap (peta situs) website Anda menggunakan struktur menu. Langkah-langkah instalasi
Xmap sebagai berikut:
1. Login halaman Administrator Joomla.
3. Klik tombol Pilih File lalu cari pkg_xmap-2.3.4.zip di dalam CD  extensions.
Gambar 18.6 Upload dan Instal Paket Komponen Xmap

4. Setelah itu klik Tombol Upload & Install.
5. Xmap berhasil diinstal.
Gambar 18.7 Instal Xmap Berhasil

6. Setelah Xmap berhasil diinstal sekarang buka menu Extensions  Plugin Manager.
7. Lalu pada kolom Search masukkan kata Xmap dan tekan tombol Enter keyboard.
8. Setelah keluar daftar plugin Xmap, beri centang pada Xmap - Content Plugin lalu klik
tombol Enable.

Gambar 18.8 Mengaktifkan Xmap Content Plugin
18.4.2 Membuat Sitemap Dengan Komponen Xmap

Langkah-langkah membuat sitemap website sekolah sebagai berikut:
1. Pada halaman Administrator klik Components  Xmap.
2. Klik tombol New.
3. Pada halaman berikutnya lakukan konfigurasi seperti penjelasan di bawah ini:
• Kolom Title diisi dengan judul Sitemap, misal SMK Cyber Satria.
• Kolom Alias diisi dengan sitemap.
• Status rubah menjadi Published.
• Access biarkan Public.
• Intro Text diisi dengan penjelasan Sitemap, misal diisi dengan Sitemap website
sekolah SMK Cyber Satria Purwokerto.
Gambar 18.9 Konfigurasi Sitemap
4. Beralih ke tab menu Menus, beri tanda centang hanya pada Main Menu. Untuk Priority
dan Change Frequency bisa Anda rubah sesuai dengan keinginan.

Gambar 18.10 Konfirgurasi Menus untuk Sitemap
6. Untuk melihat Sitemap yang sudah dibuat klik pada XML Sitemap.
Gambar 18.11 Melihat XML Sitemap
XML Sitemap itu nantinya akan kita submit ke dalam Google Webmaster Tools, sehingga
semua halaman website sekolah dapat terindeks oleh mesin pencari Google.
18.4.3 Submit XML Sitemap ke Google Webmaster Tools

Setelah sitemap website sekolah sudah dibuat, sekarang saatnya kita submit sitemap tersebut
ke Google Webmaster Tools, silahkan ikuti langkah-langkah di bawah ini:
1. Akses https://www.google.com/webmasters/tools/.
2. Lalu login dengan Akun Gmail Anda.
3. Klik tombol Tambahkan Situs.
4. Lalu isikan nama domain Anda, misal www.smkcybersatria.tk, lalu klik tombol Terus.
Gambar 18.12 Tambahkan Situs

5. Pada halaman berikutnya klik link Unduh file verifikasi HTML ini.
6. Setelah di download, upload file tersebut ke hosting Anda ke dalam folder public_html.

Gambar 18.13 Upload File Verifikasi ke public_html CPanel
7. Setelah diupload, klik tombol Verifikasi.
Gambar 18.14 Verifikasi Kepemilikan Website

8. Jika verifikasi berhasil maka Anda akan diarahkan ke halaman baru dengan pesan Selamat
Anda telah berhasil memverifikasi kepemilikan http://www.smkcybersatria.com/
Anda.
Gambar 18.15 Verifikasi Kepemilikan Website Berhasil

9. Lalu klik Lanjutkan.
10. Anda akan diarahkan ke halaman baru, pada sisi kiri halaman klik Perayapan  Peta Situs.
Gambar 18.16 Menu Peta Situs

11. Klik tombol TAMBAHKAN/UJIPETASITUS.

12. Masukkan URL Sitemap XML yang telah dibuat menggunakan Xmap tanpa menggunakan
domain. Contoh: index.php?option=com_xmap&view=xml&tmpl=component&id=1
Gambar 18.17 URL Sitemap

13. Klik tombol Mengirim Peta Situs.
Gambar 18.18 Kirim Peta Situs

14. Lalu klik link Segarkan Halaman.
15. Proses pengiriman sitemap itu butuh waktu mungkin satu hari, dua hari, bahkan sampai
satu minggu, tergantung perayap mesin pencari.
18.5 Google Analytics

Google Analytics adalah layanan gratis dari Google yang menampilkan statistik pengunjung
sebuah situs web. Google Analytics dapat menelusuri pengunjung berdasarkan informasi halaman
pengacu, termasuk mesin pencari, iklan, jaringan pay-per-click, email marketing, dan juga tautan yang
terkandung dalam dokumen PDF.
Dengan mendaftarkan website sekolah ke Google Analytics, Anda dapat dengan mudah
memantau dan menganalisa semua statistik pengunjung website sekolah baik secara demografi,
kepentingan, lokasi pengunjung ketika mengakses website sekolah, teknologi, jumlah pengunjung per
hari, dan lain sebagainya. Langkah-langkah mendaftarkan website sekolah ke Google Analytics sebagai
berikut:
1. Akses www.google.com/analytics/
2. Silahkan Sign In dengan Akun Gmail Anda.
3. Setelah berhasil Sign In, klik tombol Sign Up yang terletak pada sisi sebelah kanan
halaman.
Gambar 18.19 Sign Up Google Analytics

4. Pada halaman Sign Up, silahkan isi data-data pada tab menu Website sesuai dengan data
website sekolah. Sebagai contoh:
• Account Name diisi dengan SMK Cyber Satria.
• Website Name diisi dengan SMK Cyber Satria.
• Website URL diisi dengan www.smkcybersatria.com.
• Industry Category pilih Science.
• Reporting Time Zone pilih Indonesia.
• Data Sharing Settings beri tanda centang semua.
Gambar 18.20 Membuat Akun di Google Analytics

5. Setelah diisi dengan benar klik tombol Get Tracking ID.
6. Ketika muncul pesan Google Analytics Terms Of Service Agreement klik I Accept.
7. Setelah itu Anda akan diarahkan ke halaman Google Analytics, di halaman tersebut
terdapat Tracking ID yang nanti akan kita masukkan ke dalam Template Gantry.
Gambar 18.21 Tracking ID Google Analytics

8. Langkah selanjutnya buka halaman Administrator Website Sekolah (Joomla).
9. Klik Extensions  Template Manager  Gantry – Default.

10. Pada halaman konfigurasi Template Gantry klik tab menu Features, lalu beralih ke bawah
cari konfigurasi Google Analytics.
11. Pada konfigurasi Google Analytics rubah menjadi Enable, lalu pada kolom UA Code
diisikan dengan Tracking ID yang sudah Anda dapatkan ketika mendaftarkan website ke
Google Analytics.
Gambar 18.22 Mengaktifkan Google Analytics di Template Gantry

12. Klik Save.
13. Sekarang website sekolah sudah berhasil terintegrasi dengan Google Analytics, dan Anda
dapat menganalisa arus pengunjung website sekolah melalui Google Analytics.
18.6 Merubah Meta Tag Name Generator Joomla

Meta tag generator pada Joomla berfungsi untuk mendeklarasikan nama dari alat penerbitan
untuk membuat halaman web. Lebih jelasnya Anda buka halaman frontend website lalu tekan tombol
Ctrl+U untuk melihat sumber halaman.
Gambar 18.23 Meta Tag Name Generator Joomla
Pada Gambar 18.23 terlihat <meta name="generator" content="Joomla! - Open Source Content
Management" /> dan kita ingin merubah meta name generator tersebut. Untuk merubah meta name
generator terdapat dua cara yaitu cara pertama dengan mengedit source code pada Joomla dan cara
kedua menggunakan ekstensi ekstensi Joomla ByeByeGenerator yang bisa Anda download gratis di
Joomla download ekstensi direktori.
Namun saat ini penulis hanya akan mempraktekan bagaimana cara merubah meta tag name
generator pada Joomla dengan mengedit source code.
1. Login ke dalam Cpanel hosting premium Anda.
2. Buka File Manager.
3. Pada File Manager buka direktori public_html/libraries/joomla/document/html/renderer.
4. Lalu buka file head.php dengan code edit.
Gambar 18.23 Meta Tag Name Generator Joomla

5. Temukan baris kode di bawah ini (pencarian cepat dengan cara tekan Ctrl+F)
$buffer .= $tab . '<meta name="generator" content="' . htmlspecialchars($generator) . '"
/>' . $lnEnd;
6. Setelah itu edit menjadi

$buffer .= $tab . '<meta name="generator" content="SMK Cyber
Satria - Generator" />' . $lnEnd;
7. Klik Save Changes.

Jika Anda mengedit meta name generator dengan mengedit source code, ketika Anda
memperbarui Joomla kemungkinan source yang diedit akan ditimpa oleh source code update Joomla.
Jadi, Anda harus mengedit source code lagi.
Apabila Anda merubah meta name generator dengan cara menggunakan ekstensi, maka beban
website Anda untuk loading halaman akan bertambah oleh sebab itu penulis tidak menggunakan
ekstensi untuk merubah meta tag name generator.

BAB 19 – PENUTUP
Penulis menyadari bahwa materi yang diajarkan di dalam media pembelajaran Joomla 3 dan
Gantry Framework masih terlalu sederhana, oleh sebab itu bagi Anda yang masih bingung atau terjadi
kendala ketika mempelajari semua materi yang diajarkan pada media pembelajaran ini bisa ditanyakan
melalui forum diskusi online DIGTUTS. Anda juga dapat langsung menyampaikan kritik dan saran
kepada penulis secara langsung melalui forum diskusi online DIGTUTS, penulis berharap dengan kritik
dan saran yang membangun dari Anda dapat menjadi tolak ukur penulis untuk membuat karya media
pembelajaran yang lebih baik lagi.
Jika Anda ingin belajar lebih mendalam tentang Joomla dan Gantry Framework Anda tidak bisa
hanya mengandalkan dari buku digital ini, Anda wajib mencari referensi-referensi lain untuk
menambahkan wawasan Anda tentang Joomla 3 dan Gantry Framework.
Demikianlah akhir dari media pembelajaran ini, mohon maaf jika banyak kekurangan di
dalamnya dan sampai jumpa di karya-karya penulis dan DIGTUTS selanjutnya.

DAFTAR PUSTAKA
Joomla! Documentation, September 2014. Tersedia dari: http://docs.joomla.org/Main_Page.

Gantry Documentation, September 2014. Tersedia dari: http://gantry-framework.org/documentation.
ADA PERTANYAAN ?
Saya tahu pembahasan di buku digital ini masih jauh dari sempurna, oleh sebab itu saya akan
meluangkan waktu untuk menjawab pertanyaan Anda. Silahkan gabung ke forum yang saya buat khusus
untuk tanya jawab masalah Anda di http://www.digtuts.com/community

Joomla 3 Dan Gantry Framework 4 - Free Version

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Joomla 3 Dan Gantry Framework 4 - Free Version

Diunggah oleh

Hak Cipta:

Format Tersedia

JOOMLA 3 & GANTRY FRAMEWORK

© Yohanes Bintang Hutabarat

Diterbitkan pertama kali oleh DIGTUTS.

Terbitan Pertama: Agustus, 2014

Penulis : Yohanes Bintang Hutabarat

Hak Cipta dilindung oleh undang-undang.

Undang-Undang Republik Indonesia Nomor 19 Tahun 2002 tentang Hak Cipta

Lingkup Hak Cipta

2. Barangsiapa dengan sengaja menyiarkan, memamerkan, mengedarkan, atau menjual kepada

Purwokerto, Oktober 2014

Yohanes Bintang Hutabarat

KATA PENGANTAR ………………………………………………………... iii

BAB 1 – JOOMLA …………………………………………………………… 1

BAB 2 – PERSIAPAN ……………………………………………………….. 3

BAB 3 – MENGENAL JOOMLA …………………………………………… 7

BAB 4 – EKSTENSI JOOMLA …………………………………………….. 14

BAB 5 – GANTRY FRAMEWORK ………………………………………… 19

BAB 7 – KATEGORI ………………………………………………………… 31

BAB 8 – ARTIKEL …………………………………………………………... 34

BAB 9 – MENU ………………………………………………………………. 43

BAB 11 – BEKERJA DENGAN MODUL …………………………………... 72

BAB 12 – BEKERJA DENGAN PLUGIN ………………………………….. 87

BAB 14 – BEKERJA DENGAN TEMPLATE GANTRY …………………. 99

BAB 15 – WEB ONLINE …………………………………………………….. 106

BAB 16 – GLOBAL CONFIGURATION …………………………………... 126

BAB 17 – LANGUAGE ………………………………………………………. 130

BAB 19 – PENUTUP …………………………………………………………. 143

1.1 Apa itu Joomla

Gambar 1.1 Joomla

FREE VERSION WWW.DIGTUTS.COM 1

Joomla dikembangkan dengan mengikuti perkembangan teknologi web secara global,

Database dan Web Server Rekomendasi Minimum Informasi

Tabel 1 Kebutuhan Sistem Joomla 3.4.x

FREE VERSION WWW.DIGTUTS.COM 2

M embangun sebuah website membutuhkan persiapan dan perencanaan yang matang.

2.1 Sistem Operasi

2.2 Sumber Daya

2.3 Web Browser

2.4 Teks editor

2.6 Koneksi Internet

FREE VERSION WWW.DIGTUTS.COM 3

Gambar 2.1 XAMPP

Gambar 2.2 Qustion XAMPP

Gambar 2.3 Warning XAMPP

FREE VERSION WWW.DIGTUTS.COM 4

Gambar 2.5 Setup XAMPP

Gambar 2.6 Control Panel XAMPP

FREE VERSION WWW.DIGTUTS.COM 5

Gambar 2.7 Modul XAMPP

Gambar 2.8 Upload Limit XAMPP

2.9 Domain dan Web Hosting

FREE VERSION WWW.DIGTUTS.COM 6

3.1 Membuat Database

Gambar 3.1 Modul XAMPP

Gambar 3.2 Membuat Database

FREE VERSION WWW.DIGTUTS.COM 7

Gambar 3.3 Tambahkan Pengguna Database

Gambar 3.4 Form Pengguna Database

Gambar 3.5 Hak Akses Global Database

FREE VERSION WWW.DIGTUTS.COM 8

Gambar 3.6 Ekstrak File

Gambar 3.7 Contoh Konfigurasi Utama Instal Joomla

FREE VERSION WWW.DIGTUTS.COM 9