joomla 3 dan gantry framework

TRACKING CODE 01102314SPDIG001 WWW.DIGTUTS.COM ii

JOOMLA 3 & GANTRY FRAMEWORK © Yohanes Bintang Hutabarat

Diterbitkan pertama kali oleh DIGTUTS.

Perumahan Griya Karang Indah Blok E No. 2, Purwokerto 53142

Terbitan Pertama: Agustus, 2014

Penulis : Yohanes Bintang Hutabarat

Editor : Yohanes Bintang Hutabarat

Desain Cover : Yohanes Bintang Hutabarat Desain Video : Yohanes Bintang Hutabarat

Hak Cipta dilindung oleh undang-undang.

Dilarang memperbanyak sebagian atau seluruh isi buku digital ini tanpa izin tertulis dari Penerbit.

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

Lingkup Hak Cipta

Pasal 2 :

1. Hak Cipta merupakan hak eksklusif bagi Pencipta atau Pemegang Hak Cipta untuk

mengumumkan atau memperbanyak Ciptaannya, yang timbul secara otomatis setelah suatu

ciptaan dilahirkan tanpa mengurangi pembatasan menurut peraturan perundang-undangan yang

berlaku.

Ketentuan Pidana

Pasal 72

1. Barangsiapa dengan sengaja dan tanpa hak melakukan perbuatan sebagaimana dimaksud dalam

Pasal 2 ayat (1) atau Pasal 49 ayat (1) dan ayat (2) dipidana dengan pidana penjara masing-

masing paling singkat 1 (satu) bulan dan/atau denda paling sedikit Rp. 1.000.000 (satu juta

rupiah), atau pidana paling lama 7 (tujuh) tahun dan/atau denda paling banyak Rp 5.000.000.000

(lima miliar rupiah)

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

umum suatu Ciptaan atau barang hasil pelanggaran Hak Cipta atau Hak Terkait sebagaimana

dimaksud pada ayat (1) dipidana dengan pidana penjara paling lama 5 (lima) tahun dan/atau

denda paling banyak Rp 500.000.000 (lima ratus juta rupiah)

TRACKING CODE 01102314SPDIG001 WWW.DIGTUTS.COM iii

KATA PENGANTAR

Puji syukur penulis panjatkan kepada Allah SWT, karena izin-Nya, buku digital tentang Joomla

3 dan Gantry Framework ini berhasil disusun.

Joomla merupakan open source Content Management System (CMS) yang sangat populer

untuk membangun website dengan mudah. Sedangkan yang dimaksud dengan Content Management

System adalah perangkat lunak untuk menambahkan, mengedit, menghapus, atau mengelola konten

website.

Gantry Framework merupakan kerangka kerja yang dikembangkan oleh Rockettheme untuk

mempermudah dalam mengembangkan desain template CMS Joomla yang fleksibel dan solid. Sama

seperti Joomla, Gantry Framework berlisensi GPL (General Public License) sehingga Anda bebas

menggunakan dan mengembangkannya.

Dalam buku digital ini penulis membahas dari dasar apa itu Joomla dan Gantry Framework

sehingga para pembaca yang ingin belajar membuat website dapat mudah memahami. Disisi lain

penulis sertakan secara lengkap video tutorial dan segala file pendukung untuk menunjang proses

belajar. Pembaca akan diajak membuat website sekolah yang dinamis dan interaktif menggunakan

Joomla 3 dan Gantry Framework.

Penulis menyadari bahwa masih banyak sekali kekurangan di dalam buku digital ini, karenanya

penulis berharap kritik dan saran dari pembaca, agar buku digital ini dapat diperbaiki lagi sehingga

menjadi lebih baik dan bermanfaat.

Purwokerto, Oktober 2014

Penulis

Yohanes Bintang Hutabarat

TRACKING CODE 01102314SPDIG001 WWW.DIGTUTS.COM iv

DAFTAR ISI

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

DAFTAR ISI …………………………………………………………………….. iv

BAGIAN I – DASAR JOOMLA …………………………………………. iv

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

1.1 Apa itu Joomla ……………………………………………………………….. 1

1.2 Kebutuhan Sistem Joomla …………………………………………………… 1

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

2.1 Sistem Operasi ………………………………………………………………. 3

2.2 Sumber Daya ………………………………………………………………… 3

2.3 Web Browser ………………………………………………………………… 3

2.4 Teks Editor …………………………………………………………………... 3

2.5 Koneksi Internet ……………………………………………………………... 3

2.5 Localhost …………………………………………………………………….. 3

2.8 Konfigurasi XAMPP ………………………………………………………… 5

2.9 Domain dan Web Hosting …………………………………………………… 6

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

3.1 Membuat Database …………………………………………………………... 7

3.2 Instal Joomla Database Contoh Data ………………………………………… 9

3.3 Menelusuri Joomla 3.3.x …………………………………………………….. 11

3.2.1 Frontend Joomla 3.3.x ………………………………………………... 11

3.2.2 Backend Joomla 3.3.x ………………………………………………… 12

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

4.1 Plugin ………………………………………………………………………... 14

4.2 Component …………………………………………………………………... 15

4.3 Module ………………………………………………………………………. 15

4.4 Language …………………………………………………………………….. 17

4.5 Template ……………………………………………………………………... 17

4.6 Instal Extensions …………………………………………………………….. 17

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

5.1 Fitur Gantry Framework …………………………………………………….. 19

5.2 Mengapa Gantry Framework ………………………………………………… 20

5.3 Kebutuhan Sistem …………………………………………………………… 20

5.3 Cara Instal Gantry Gantry Framework ………………………………………. 21

5.3.1 Instal Joomla Tanpa Contoh Data ……………………………………. 21

5.3.2 Download Gantry …………………………………………………….. 23

5.3.3 Instal Gantry ………………………………………………………….. 24

TRACKING CODE 01102314SPDIG001 WWW.DIGTUTS.COM v

BAB 6 – PERENCANAAN & PERANCANGAN …………………………. 26

6.1 Tujuan Dan Manfaat Website Sekolah ……………………………………… 26

6.2 Konten Website Sekolah ……………………………………………………. 26

6.3 Struktur Menu Website Sekolah …………………………………………….. 27

6.4 Desain Tata Letak Website Sekolah …………………………………………. 28

6.5 Pengguna Website Sekolah …………………………………………………... 29

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

7.1 Membuat Kategori Profiles ………………………………………………….. 31

7.2 Membuat Kategori News …………………………………………………….. 32

7.3 Mengedit Kategori …………………………………………………………… 32

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

8.1 Cara Membuat Artikel ……………………………………………………….. 34

8.2 Pengaturan Teks Editor ………………………………………………………. 35

8.3 Menambahkan Gambar ………………………………………………………. 36

8.4 Menyisipkan Video Youtube ………………………………………………… 38

8.5 Artikel Website Sekolah ……………………………………………………... 38

8.5.1 Artikel Sejarah Sekolah ………………………………………………. 39

8.5.2 Artikel Sambutan Kepala Sekolah ……………………………………. 40

8.5.3 Artikel Organisasi Siswa ……………………………………………... 40

8.5.4 Artikel Prestasi Sekolah ………………………………………………. 40

8.5.5 Artikel Fasilitas Sekolah ……………………………………………… 41

8.5.6 Artikel Contoh Berita ………………………………………………… 41

8.5.7 Artikel Informasi Admin ……………………………………………... 42

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

9.1 Membuat Menu Di Menu Manager ………………………………………….. 43

9.2 Mengedit Menu Home ……………………………………………………….. 44

9.3 Menu Profiles ………………………………………………………………... 46

9.3.1 Membuat Menu Sejarah Sekolah …………………………………….. 47

9.3.2 Membuat Menu Sambutan Kepala Sekolah ………………………….. 48

9.3.3 Membuat Menu Guru ………………………………………………… 49

9.3.4 Membuat Menu Staf ………………………………………………….. 49

9.3.5 Membuat Menu Siswa ………………………………………………... 50

9.3.6 Membuat Menu Organisasi …………………………………………... 51

9.3.7 Membuat Menu Prestasi ……………………………………………… 51

9.3.8 Membuat Menu Fasilitas ……………………………………………... 51

9.4 Menu News …………………………………………………………………... 52

9.5 Menu Gallery ………………………………………………………………… 53

9.6 Menu Contact ………………………………………………………………... 53

9.7 Menu Admin …………………………………………………………………. 55

9.8 Menu Create Article ………………………………………………………….. 55

9.9 Menu Edit User Profile ………………………………………………………. 56

9.10 Menu Options ………………………………………………………………. 56

9.11 Merubah Alias Pada Menu ………………………………………………...... 57

TRACKING CODE 01102314SPDIG001 WWW.DIGTUTS.COM vi

BAB 10 – BEKERJA DENGAN KOMPONEN …………………………….. 59

10.1 Ekstensi Komponen RokGallery …………………………………………… 59

10.1.1 Kebutuhan Sistem RokGallery ……………………………………… 59

10.1.2 Fitur RokGallery …………………………………………………….. 59

10.2 Instalasi RokGallery ………………………………………………………... 60

10.3 Menu Guru Dengan RokGallery ……………………………………………. 61

10.3.1 Membuat Galeri Guru ……………………………………………… 61

10.3.2 Mengedit Menu Guru ………………………………………………. 63

10.3.3 Mengedit Informasi Guru …………………………………………... 64

10.3.4 Merapikan Halaman Detail ………………………………………… 65

10.4 Menu Staf Dengan RokGallery …………………………………………….. 66

10.4.1 Membuat Galeri Staf ………………………………………………. 66

10.4.2 Mengedit Menu Staf ………………………………………………. 67

10.4.3 Mengedit Informasi Staf …………………………………………… 68

10.4.4 Merapikan Halaman Detail Staf …………………………………… 68

10.5 Menu Gallery Dengan RokGallery …………………………………………. 69

10.5.1 Membuat Galeri ……………………………………………………. 69

10.5.2 Mengedit Menu Gallery ……………………………………………. 69

10.5.3 Mengedit Informasi Gallery ………………………………………... 70

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

11.1 Kebutuhan Modul Web Sekolah ……………………………………………. 72

11.2 Posisi Modul Template Gantry ……………………………………………... 73

11.3 Instalasi Modul Google Maps ………………………………………………. 74

11.4 Membuat Slideshow ………………………………………………………... 75

11.4.1 Membuat Galeri Slideshow ………………………………………… 75

11.4.2 Membuat Modul Slideshow ………………………………………... 76

11.5 Membuat Pesan Selamat Datang …………………………………………… 77

11.6 Membuat Modul Search …………………………………………………….. 78

11.7 Membuat Login Form ………………………………………………………. 79

11.8 Membuat Link Berita Terbaru ……………………………………………… 79

11.9 Logo Organisasi Siswa …………………………………………………… 80

11.10 Peta Sekolah ………………………………………………………………. 81

11.11 Admin Menu ………………………………………………………………. 84

11.12 Ordering Modul …………………………………………………………… 85

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

12.1 Instal Plugin JLSecure My Site ……………………………………………... 87

12.2 Konfigurasi Plugin JLSecure My Site ……………………………………… 88

TRACKING CODE 01102314SPDIG001 WWW.DIGTUTS.COM vii

BAB 13 – AKSES PENGGUNA …………………………………………….. 89

13.1 Menu Users …………………….…………………………………………… 89

13.2 Daftar Kendali Akses ………………………………………………………. 90

13.3 Membuat Pengguna Baru …………………………………………………… 95

13.4 Menonaktifkan Pendaftaran Pengguna ……………………………………... 96

13.5 Hak Akses Pengguna Grup Manager ………………………………………. 97

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

14.1 Mengedit Logo Template Gantry …………………………………………… 99

14.2 Preset Style Template Gantry ………………………………………………. 101

14.3 Menyembunyikan Brand Gantry …………………………………………… 101

14.4 Membuat Copyright Website ……………………………………………….. 101

14.5 Tombol Back To Top ………………………………………………………. 102

14.6 Membuat Favicon Website Sekolah ………………………………………... 102

14.7 Custom CSS Template Gantry ……………………………………………… 104

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

15.1 Mendaftar Domain Gratis …………………………………………………... 106

15.2 Mendaftar Server Hosting Gratis …………………………………………… 108

15.3 Pointing Nama Domain ke Server Hosting ………………………………… 111

15.3.1 Mengetahui Name Server Idhostinger ……………………………… 111

15.3.2 Pointing Nama Domain ke Server Idhostinger ……………………... 112

15.3.3 Mempercepat Propagasi Domain Name Server ……………………. 113

15.4 Upload Website Sekolah ke Server Hosting ……………………………….. 115

15.4.1 Cara Masuk Kontrol Panel Idhostinger ……………………………. 115

15.4.2 Upload File Website Melalui File Manager ……………………….. 116

15.4.3 Upload File Website Melalui FTP Client ………………………….. 116

15.5 Upload Database Website Sekolah …………………………………………. 119

15.5.1 Ekspor Database di Localhost …………………………………….. 120

15.5.2 Membuat Database ke Hosting Gratis Idhostinger ……………….. 120

15.5.3 Impor Database ke Hosting Gratis Idhostinger …………………… 122

15.5.4 Konfigurasi Website Sekolah di Server Hosting Gratis ……..……. 123

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

16.1 Mengaktifkan Captcha ……………………………………………………… 126

16.2 Pengaturan Global Configuration Server Joomla ………………………….. 128

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

17.1 Language Manager …………………………………………………………. 130

17.2 Merubah Bahasa Frontend dan Backend Website Sekolah …………………. 130

TRACKING CODE 01102314SPDIG001 WWW.DIGTUTS.COM viii

BAB 18 – SEO ………………………………………………………………… 132

18.1 Mengaktifkan SEF URL Joomla ……………………………………………. 132

18.2 Meta Descriptions dan Meta Keywords …………………………………….. 133

18.3 Submit Website ke Mesin Pencari Google …………………………………. 134

18.4 Membuat Sitemap Dengan Komponen Xmap ……………………………… 135

18.4.1 Instal Komponen Xmap …………………………………………… 135

18.4.2 Membuat Sitemap Dengan Komponen Xmap …………………….. 136

18.4.3 Submit XML Sitemap ke Google Webmaster Tools ……………… 137

18.5 Google Analytics …………………………………………………………… 139

18.6 Merubah Meta Tag Name Generator Joomla ………………………………. 141

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

TRACKING CODE 06103114SPDIG001 WWW.DIGTUTS.COM 1

BAB 1 – JOOMLA

1.1 Apa itu Joomla

Joomla merupakan open source Content Management System (CMS) yang sangat populer

untuk membangun website dengan mudah. Content Management System adalah perangkat lunak untuk

menambahkan, mengedit, menghapus, atau mengelola konten website.

Gambar 1.1 Joomla

CMS Joomla memiliki fitur yang sangat kompleks sehingga Anda dapat menggunakannya

untuk membuat website seperti :

Website Pribadi / Blog

Website Perusahaan

Website Sekolah

Website Portal Berita

Website Ecommerce (Toko Online)

Online Reservations seperti website pemesanan tiket

Website Pemerintah

Website Organisasi

Dan masih banyak lagi

Karena Joomla mempunyai lisensi General Public License (GPL) yang bersifat open source,

Anda dapat menggunakannya dengan gratis serta bebas berkarya untuk mengembangkan CMS Joomla

sesuai dengan keinginan Anda. Itulah sebabnya Joomla menjadi CMS yang populer dan telah

mendapatkan Award-Winning Content Management System.

1.2 Kebutuhan Sistem Joomla

Joomla dirancang agar mudah diisntal, diatur dan digunakan oleh para pengguna. Karena

Joomla sangat mudah digunakan, sebagai seorang desainer atau pengembang web, Anda dapat dengan

mudah dan cepat membangun situs untuk bisnis Anda menggunakan Joomla.

Joomla dikembangkan dengan mengikuti perkembangan teknologi web secara global,

sehingga Joomla selalu merilis update versi terbarunya. Saat buku digital ini ditulis, CMS Joomla 3

versi terbaru adalah Joomla versi 3.3.6 dengan kebutuhan sistem seperti:


Database dan Web Server Rekomendasi Minimum Informasi

PHP (Magic Quotes GPC off) 5.4+ 5.3.10+ http://www.php.net

MySQL (InnoDB support required) 5.1+ 5.1+ http://www.mysql.com

PostgreSQL 10.50.1600.1+ 10.50.1600.1+ http://www.microsoft.com/sql

Apache (mod_mysql, mod_xml, dan

mod_zlib)

2.x + 2.x + http://www.apache.org

Nginx 1.1 1.0 http://wiki.nginx.org/

Microsoft IIS 7 7 http://www.iis.net

Tabel 1 Kebutuhan Sistem Joomla 3.3.6

Dengan mengetahui kebutuhan sistem CMS Joomla 3, Anda dapat mempersiapkan web server

dan database yang tepat sesuai dengan kebutuhan sistem Joomla sehingga CMS Joomla yang diinstal

dapat berjalan dengan baik


BAB 2 – PERSIAPAN

embangun sebuah website membutuhkan persiapan dan perencanaan yang matang.

Seperti ketika kita akan membangun sebuah rumah tentu dibutuhkan persiapan dan

perencanaan seperti uang, desain rumah, material, tukang, dan lain-lain. Membangun sebuah website

pun demikian, dibutuhkan juga rencana dan berbagai persiapan seperti desain website, materi untuk

konten website, serta perangkat lunak penunjang. Namun dalam bab ini akan dibahas mengenai

persiapan perangkat lunak apa saja yang dibutuhkan untuk membangun sebuah website menggunakan

Joomla. Untuk Perencanaan & Perancangan website akan dibahas di Bab 6.

2.1 Sistem Operasi

Agar tidak terjadi berbagai permasalahan penulis menganjurkan Anda untuk menggunakan

sistem operasi Windows 7, 8, dan 8.1 ketika mempraktekan semua materi yang ada di dalam ebook ini,

sehingga Anda dapat mempelajari semua materi yang ada dengan lebih mudah.

2.2 Sumber Daya

Segala kebutuhan yang ada di dalam buku ini seperti software, video tutorial, contoh materi

untuk konten website, dan file lainnya telah penulis sertakan di dalam CD, diharapkan dapat

mempermudah dalam mempelajari semua materi yang ada.

2.3 Web Browser

Mengakses halaman web dibutuhkan aplikasi web browser seperti Internet Explorer, Google

Chrome, Mozilla Firefox, Opera, dan lain sebagainya. Gunakanlah web browser versi terbaru dalam

mengikuti semua tutorial untuk menghindari terjadinya masalah yang disebabkan oleh web browser.

2.4 Teks editor

Teks editor (text editor) merupakan perangkat lunak yang berguna untuk mengubah konfigurasi

file atau menulis source code bahasa pemrograman. Teks editor yang akan digunakan adalah Notepad

dan Notepad++. Teks editor Notepad++ telah disertakan di dalam CD, Anda tinggal melakukan instalasi

seperti menginstal aplikasi Windows pada umumnya.

2.6 Koneksi Internet

PC atau laptop yang selalu terkoneksi dengan internet.

2.7 Localhost

Localhost atau local hosting merupakan web server yang terinstal di komputer Anda. Cara

mudah membuat web server untuk membangun website secara offline adalah dengan menggunakan

software XAMPP. XAMPP merupakan kombinasi dari berbagai perangkat lunak dalam satu paket

seperti Apache yang berguna sebagai web server, PHP sebagai bahasa pemrograman, dan MySQL

sebagai database, Filezilla sebagai FTP untuk transfer data, dan masih banyak lagi lainnya.

M


Gambar 2.1 XAMPP

XAMPP yang akan kita gunakan dalam pembelajaran ini merupakan XAMPP yang berjalan

pada sistem operasi Windows. Cara instalasi XAMPP pada setiap versi OS Windows baik 7, 8, dan 8.1

tidaklah jauh berbeda. Software XAMPP telah penulis sertakan di dalam CD folder software.

Langkah-langkah instalasi XAMPP sebagai berikut :

1. Copy software XAMPP yang terdapat di dalam CD ke hardisk PC Anda.

2. Setelah di copy, klik kanan software XAMPP lalu pilih Run as administrator dan klik

Yes.

3. Akan keluar peringatan Pertanyaan yang berarti “Terlihat ada memiliki Anti Virus yang

sedang berjalan. Dalam beberapa kasus, mungkin akan menghambat atau mengganggu

proses instalasi software. Lanjutkan instalasi?”, klik Yes saja.

Gambar 2.2 Qustion XAMPP

4. Akan muncul message box lagi yang menginformasi bahwa sebaiknya jangan instal

XAMPP di dalam direktori program files, karena dapat mengganggu hak akses pada

XAMPP. Lalu klik OK.

Gambar 2.3 Warning XAMPP

5. Pada tampilan Setup Klik Next.

6. Pilih direktori folder dimana XAMPP akan diinstal. Sesuai default saja yaitu C:\xampp\

dan klik NEXT.

Gambar 2.4 Folder Instalasi XAMPP


7. Pada tampilan Bitnami for XAMPP hilangkan tenda centang pada “Learn more about

Bitnami for XAMPP” selanjutnya klik Next.

8. Pada tampilan Ready to Install klik Next.

9. Tunggu proses instalasi selesai.

Gambar 2.5 Setup XAMPP

10. Pada tampilan Completing the XAMPP Setup Wizard. Pastikan beri tanda centang

pada Do you want to start the Control Panel now. Lalu klik Finish.

11. Control Panel XAMPP akan terbuka, dari Control Panel itulah Anda dapat mengaktifkan

berbagai modul XAMPP hanya dengan menekan tombol Start.

Gambar 2.6 Control Panel XAMPP

Video Tutorial cara instalasi XAMPP di Windows bisa Anda lihat pada CD Video

Tutorial BAB 2 – PERSIAPAN 0201 – Instal XAMPP di Windows 8.1

2.8 Konfigurasi XAMPP

Konfigurasi XAMPP ini dimaksudkan untuk menghindari terjadinya error ketika mengunggah

atau upload file berukuran besar ke dalam web server. Secara default batas upload XAMPP yaitu 2 MB.

Batas upload tersebut dapat dirubah dengan cara mengedit source code php.ini. Langkah-langkah

mengedit source code php.ini sebagai berikut:

1. Pastikan pada Control Panel XAMPP tidak terdapat modul yang aktif.


Gambar 2.7 Modul XAMPP

2. Cari file php.ini yang terdapat pada direktori C:\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

ebelum lebih jauh bekerja dengan Joomla, sebaiknya kita mengenal terlebih dahulu Joomla

itu seperti apa dan bagaimana. Hal pertama yang harus dilakukan adalah melakukan

instalasi Joomla terlebih dulu di localhost. Instalasi Joomla yang akan kita lakukan yaitu menginstal

Joomla menggunakan database contoh data (sample data). Maksud dari instal Joomla menggunakan

contoh data adalah melakukan instalasi Joomla dengan menggunakan database yang berisi data / konten

fiktif, database tersebut memang sudah disediakan dari pihak developer Joomla sendiri dengan tujuan

sebagai contoh website bagi pengguna Joomla yang masih pemula.

3.1 Membuat Database

Database secara ringkas digambarkan sebagai repositori untuk data. Setiap penginstalan Joomla

membutuhkan database untuk menyimpan data seperti artikel, kategori, menu, pengguna, dan lain

sebagainya. Nantinya pada proses penginstalan Joomla membutuhkan informasi database, pengguna

database, dan password pengguna database. Semua informasi tersebut bisa Anda dapatkan setelah

membuat database melalui phpMyAdmin yang terdapat pada XAMPP. Langkah-langkah pembuatan

database melalui phpMyAdmin sebagai berikut:

1. Jalankan XAMPP Control Panel lalu Start pada modul Apache dan MySQL.

Gambar 3.1 Modul XAMPP

2. Buka web browser lalu ketikkan localhost/phpmyadmin.

3. Klik tab menu Basis Data dan buatlah basis data, sebagai contoh nama basis datanya

joomla dan klik tombol Buat.

Gambar 3.2 Membuat Database

S


4. Setelah basis data dibuat, beralih ke tab menu Pengguna untuk membuat pengguna basis

data.

5. Klik Tambahkan Pengguna.

Gambar 3.3 Tambahkan Pengguna Database

6. Anda akan dihadapkan dengan form Informasi Masuk untuk pembuatan pengguna.

Lakukan pengaturan sebagai berikut :

Username Gunakan Text Field Silahkan diisi dengan nama pengguna.

Host Lokal Localhost.

Kata Sandi Gunakan Text Field Silahkan diisi dengan password Anda.

Ketik Ulang Ketik ulang kata sandi tadi.

Hasilkan kata Sandi Tidak perlu / Biarkan saja

Gambar 3.4 Form Pengguna Database

7. Bergulir ke halaman bawah terdapat form Hak Akses Global lalu beri tanda centang pada

Pilih Semua.

Gambar 3.5 Hak Akses Global Database

8. Jika sudah dipastikan semua benar, klik tombol Kirim yang terdapat di bawah halaman.


3.2 Instal Joomla Database Contoh Data

Pada sebelumnya kita sudah membuat database, sekarang kita lanjut melakukan instalasi

Joomla dengan database contoh data sebagai berikut:

1. Buka direktori C:\xampp\htdocs lalu buat folder dengan nama joomla.

2. Copy file Joomla_3.3.6-Stable-Full_Package.zip yang terdapat dalam CD cms ke

dalam folder joomla (C:\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.3.x

Sebelumnya kita sudah melakukan instalasi Joomla menggunakan contoh data, saat ini kita

memulai mempelajari apa saja yang ada pada Joomla 3.

3.3.1 Frontend Joomla 3.3.x

Pengembang web menyebut frontend adalah tampilan antarmuka (interface) web yang dilihat

dan langsung berinteraksi dengan pengguna ketika mengakses website tersebut. Frontend pada

umumnya terdapat logo, menu, artikel, form, kolom samping (sidebar) dan lain sebagainya. Frontend

Joomla versi 3.3.x terdiri dari dua (2) template bawaan Joomla yaitu Protostar dan Beez3 yang bisa

Anda gunakan dengan memilih salah satunya melalui Template Manager.

Protostar

Beez3

Gambar 3.10 Template Protostar dan Beez3

CMS Joomla telah menggunakan teknologi Bootstrap sehingga interface Joomla mampu

menyesuaikan web browser ketika diakses dari berbagai platform seperti smartphones, ipad, laptop,

maupun PC (responsive design).

Gambar 3.11 Joomla Responsive Design


3.3.2 Backend Joomla 3.3.x

Backend merupakan halaman administrator untuk mengelola segala kebutuhan website. Di

dalam backend Joomla terdapat berbagai menu pengaturan untuk mengelola segala fitur-fitur Joomla

seperti :

Gambar 3.12 Backend Joomla 3

1. System

Di dalam menu System terdapat berbagai pilihan konfigurasi sistem CMS Joomla seperti

Control Panel, Global Configuration, Global Check-in, Clear Cache, Purge Expired

Cache, dan System Information. Pada menu System itulah seorang administrator web

dapat melakukan konfigurasi Joomla secara global.

2. Users

Menu Users memungkinkan administrator web untuk mengelola segala kebutuhan

sistem registrasi atau mengelola pengguna melalui pengaturan Users, Groups, Access

Levels, User Notes, User Note Categories dan Mass Mail Users.

3. Menus

Menu Menus memungkinkan administrator web membuat berbagai menu disesuaikan

dengan segala kebutuhan item untuk keperluan navigasi pengguna web.

4. Content

Menu Content berisi berbagai pengaturan seperti Article Manager, Category Manager,

Featured Articles, dan Media Manager.

Pada Article Manager Anda dapat membuat, mengedit, menerbitkan, dan

menghapus artikel untuk konten web.

Pada Category Manager Anda dapat membuat berbagai kategori untuk

mengorganisasi semua artikel yang dibuat.

Pada Featured Articles Anda dapat mengelola segala artikel pilihan.

Pada Media Manager Anda dapat mengupload, mengelola, bahkan menghapus

gambar/foto.

5. Components

Menu Components dalam backend Joomla berfungsi untuk mengkonfigurasi atau

mengelola segala aspek ekstensi komponen yang terinstal.

6. Extensions

Menu Extensions berisi berbagai konfigurasi untuk menginstal, mengelola, dan

menghapus extensions Joomla seperti components, module, plugins, template, dan

language.

7. Media Manager

Menu Media Manager terdapat sub menu dari menu Content. Menu Media Manager

berfungsi untuk mengupload, mengelola, dan menghapus file gambar seperti .jpeg, .gif,

dan .png. Media Manager terintegrasi dengan artikel teks editor, sehingga Anda dapat

dengan mudah menyisipkan gambar pada artikel.


8. Help

Menu Help berisi berbagai informasi dan panduan untuk Anda jika mengalami masalah

atau kesulitan mengenai CMS Joomla.


BAB 4 – EXTENSIONS JOOMLA

xtensions atau yang kita sebut ekstensi merupakan perangkat lunak tambahan yang diinstal

ke dalam Joomla, ekstensi berguna untuk menambah fungsi atau fitur Joomla. Tipe

ekstensi pada pada Joomla yaitu plugin, module, component, library, package, language, dan template.

Berbagai ekstensi Joomla dapat Anda download di http://extensions.joomla.org/.

Gambar 4.1 Joomla Extensions Directory

Dalam bab ini akan dijelaskan mengenai lima (5) tipe ekstensi dasar Joomla seperti plugin,

component, module, language, dan template.

Gambar 4.2 Extensions Joomla

4.1 Plugin

Plugin merupakan ekstensi Joomla yang berinteraksi dengan sistem untuk menambah

fungsionalitas Joomla secara spesifik. terjadinya event dan dapat berinteraksi dengan sistem maupun

ektensi yang lain untuk memperluas fungsionalitas Joomla secara spesifik. Pada dasarnya plugin

dirancang untuk menampilkan konten di dalam komponen dan modul. Namun, terkadang ada beberapa

ekstensi seperti komponen atau bahkan modul dapat berjalan dengan syarat harus menginstal plugin

dan mengaktifkannya lebih dulu melalui Plugin Manager. Setelah plugin diinstal, plugin akan

menambah fungsi pada sistem Joomla itu sendiri tergantung dari plugin itu dibuat untuk apa.

E

http://extensions.joomla.org/


Gambar 4.3 Plugin Manager

Pada Joomla download direktori, jenis ektensi Plugin ditandai dengan icon

4.2 Component

Components atau komponen merupakan unit fungsi utama Joomla seperti aplikasi mini.

Analoginya seperti ini, jika joomla merupakan sistem operasi maka komponen merupakan aplikasi

dekstopnya. Komponen merupakan ekstensi yang paling kompleks dibanding lainnya, pada umumnya

komponen terdiri dari beberapa ekstensi seperti plugin dan modul. Pada layar kerja Joomla, komponen

memiliki dua bagian yaitu backend Administrator dan frontend. Sebagai contoh komponen Banners

(com_banners) adalah komponen yang menangani banner (banners).

Gambar 4.4 Direktori Component

Di bagian frontend, pengguna dapat melihat banner yang diterbitkan dan di bagian backend

administrator dapat mengelola banner untuk diterbitkan. Contoh komponen standar bawaan dari Joomla

3 seperti : Content (com_content), Banners (com_banners), Contact (com_contact) , News Feeds

(com_newsfeeds), dan Weblinks (com_weblinks), Search (com_search) dan lain sebagainya.

Pada Joomla download direktori, jenis ektensi Component ditandai dengan icon

4.3 Module

Module atau modul merupakan tipe ekstensi Joomla yang hampir sama dengan komponen,

namun tidak sekompleks komponen. Oleh sebab itu modul lebih ringan dan fleksibel dibandingkan

komponen. Sebagai contoh pemahaman, sebuah sepeda motor membutuhkan lampu hias yang kelap-

kelip untuk mempercantik motor, maka dibuatlah lampu hias yang nanti dipasang pada bagian mana


saja pada sepeda motor. Lampu itu kita anggap seperti modul, yang menambah fungsi dan bisa kita

pasang dimana saja.

Pada frontend, modul dapat diletakan dimanapun disesuaikan dengan module positions (posisi

modul) dari template tersebut. Anda bisa melihat posisi modul sebuah template dengan membaca

dokumentasi dari template yang ingin Anda gunakan. Jika Anda ingin melihat posisi modul dari sebuah

template yang terinstal, dalam contoh ini misal template Protostar. Caranya seperti di bawah ini :

1. Login ke dalam Administrator Joomla (localhost/joomla/administrator).

2. Klik Extensions Template Manager.

3. Klik Options (terletak di sebelah kanan atas).

4. Pada Previews Module Positions jadikan Enabled lalu klik Save & Close.

5. Klik gambar mata pada Template Protostar.

Gambar 4.5 View Protostar

6. Hasil tampilan posisi modul template protostar.

Gambar 4.6 Module Position Protostar

Dari contoh Gambar 4.6 di atas kita dapat melihat bahwa salah satu modul, yaitu module login

terletak pada position-7. Untuk modul lainnya bisa Anda lihat melalui Module Manager.

Pada Joomla download direktori, jenis ektensi Module ditandai dengan gambar


4.4 Language

Language merupakan tipe ekstensi yang menerjemahkan bahasa string teks Joomla. Ekstensi

ini berefek dengan merubah bahasa yang terdapat pada bagian frontend dan backend Administrator

Joomla. Pada Joomla 3 Anda dapat menginstal dan mengelola ekstensi Language melalui Extensions

Language Manager.

Gambar 4.7 Language Manager

4.5 Template

Template merupakan desain antarmuka web, dengan ekstensi template Anda dapat merubah

desain tampilan antarmuka frontend maupun backend Joomla. Anda dapat mengakses pengaturan

template melalui Extensions Template Manager.

Gambar 4.8 Template Manager

Di halaman Template Manager terdapat pengaturan Styles dan Templates. Jika Anda memilih

template pada halaman Styles, maka Anda akan dihadapkan dengan halaman WYSWYG (What You

See What You Get) pengaturan desain template. Maksudya di halaman Styles Anda tinggal mengatur

template sesuai dengan keinginan Anda hanya tinggal klik klik saja tidak perlu repot.

Sedangkan jika Anda klik pengaturan Templates lalu memilih salah satu template untuk di

edit, maka Anda akan dihadapkan dengan halaman pengaturan file atau source code template. Pada

halaman itu lah Anda dapat mengedit seperti file php, css, less dan lain sebagainya.

4.6 Instal Extensions

Sebelum menginstal ekstensi Joomla, pastikan terlebih dahulu ektensi yang akan Anda instal

telah support dengan versi CMS Joomla yang Anda gunakan sehingga tidak terjadi error saat proses

instalasi ekstensi tersebut. Bagaimana cara mengetahui ekstensi tersebut telah support dengan versi

CMS Joomla yang kita pakai? Untuk mengetahuinya, pada halaman download ekstensi pastikan Anda


baca dengan seksama mengenai informasi ekstensi tersebut. Perhatikan mengenai informasi tipe

ekstensi dan kompatibilitasnya lalu baca juga dokumentasi dari ekstensi tersebut.

Gambar 4.9 Informasi Ektensi

Sebagai contoh pada Gambar 4.9 tipe ekstensi RokGallery adalah Component, Module, dan

Plugin, sedang ekstensi RokGallery kompatibel dengan Joomla 2.5 dan Joomla 3. Ketika Anda klik

tombol Documentation maka Anda akan diarahkan ke halaman web dokumentasi ekstensi tersebut.

Cara instalasi ekstensi Joomla seperti Plugin, Component, Module, Language, dan Template

akan kita praktekan satu persatu disaat mengerjakan contoh kasus membuat website sekolah.


BAB 5 – GANTRY FRAMEWORK

antry Framework merupakan kerangka kerja yang dikembangkan oleh Rockettheme

untuk mempermudah pengembangan desain template CMS Joomla yang fleksibel dan

solid. Pada backend Joomla, Gantry Framework berguna untuk mengatur aspek desain template. Gantry

Framework mempermudah pengembang template untuk menulis kode (web programming) template.

Sama seperti Joomla, Gantry Framework berlisensi GPL (General Public License) sehingga

Anda bebas menggunakan dan mengembangkannya.

5.1 Fitur Gantry Framework

Gantry Framework dikemas penuh fitur yang diciptakan untuk pengembangan desain layout

template. Gantry Framework memiliki fitur-fitur diantaranya seperti :

1. Responsive Design

Menggunakan teknologi Bootstrap sehingga

support dengan berbagai platform web

browser seperti smartphone, tablet, dan

desktop.

2. Stunning New Administrator Interface

Gantry menyediakan antarmuka yang user-

friendly untuk mengatur segala aspek desain

template.

Gambar 5.1 Gantry Framework Interface

3. Preset Style

Mempermudah dalam merubah desain

template dan dapat dikonfigurasi kapanpun.

Gambar 5.2 Preset Style

4. Flexible Grid Layout System

Mengontrol ukuran tiap blok layout dan

posisi modul dengan mudah hanya tinggal

drag saja.

Gambar 5.3 Grid Layout System

5. Advanced Typography

Memanfaatkan kehebatan typography dari

Bootstrap untuk membuat table, form, dan

berbagai elemen interface lainnya.

G


Untuk mempermudah pemahaman mengenai gantry framework beserta dengan fitur-

fiturnya, Anda dapat melihat official video Gantry Framework yang terdapat pada

CD Video Tutorial BAB 5 – Gantry Framework 0501 – Gantry4 Joomla

Overview dan 0502 – Gantry4 Joomla Features

5.2 Mengapa Gantry Framework?

Selalu ada alasan dibalik setiap pilihan. Dan alasan penulis memilih Gantry Framework adalah

sebagai berikut :

1. Gantry Framework berlisensi GPL dan gratis untuk digunakan.

2. Gantry Framework merupakan kerangka kerja yang solid, fleksibel, dan canggih untuk

mengembangkan desain template CMS Joomla.

3. Gantry Framework memiliki banyak fitur.

4. Gantry Framework memiliki dokumentasi yang lengkap dan bisa Anda lihat di

http://gantry-framework.org/documentation.

5. Memiliki komunitas dan support yang baik, bisa Anda lihat di http://gantry-

framework.org/support.

5.3 Kebutuhan Sistem

Agar dapat berjalan dengan baik Gantry Framework (Template Gantry) memiliki beberapa

kebutuhan sistem. Di bawah ini merupakan beberapa kebutuhan sistem Gantry Framework.

1. Kebutuhan Joomla

Sangat direkomendasikan untuk selalu menggunakan Joomla versi 2.5.x dan 3.x terbaru.

2. Kebutuhan Server

Persyaratan minimum server untuk menjalankan Gantry Framework adalah:

PHP 5.2.17+ (disarankan 5.3+)

MySQL 3.23 (disarankan 5+)

Apache 1.3 (disarankan 2.2+)

mod_mysql

mod_xml

mod_zlib

3. Kebutuhan Browser

Kebutuhan web browser untuk mengakses interface Gantry Framework (Template Gantry):

Firefox 4+

Safari 5+

Google Chrome 10+

Opera 10+

Internet Explorer 8+

http://gantry-framework.org/documentation

http://gantry-framework.org/support

http://gantry-framework.org/support


5.3 Cara Instal Gantry Framework

5.3.1 Instal Joomla Tanpa Contoh Data

Pada bab 3.2 sudah dijelaskan bagaimana cara instalasi Joomla menggunakan contoh data,

namun pada bagian ini kita akan menginstal Joomla 3 tanpa menggunakan contoh data alias ‘kosongan’

karena pada nantinya kita akan membuat konten itu sendiri sesuai dengan contoh kasus yang akan kita

kerjakan yaitu membuat website sekolah sederhana.

Langkah-langkah instalasi :

1. Buka XAMPP lalu Start Apache & MySQL.

2. Buat folder sekolah di dalam direktori C:\xampp\htdocs.

Gambar 5.4 Folder Sekolah

3. Copy file Joomla_3.3.6-Stable-Full_Package.zip yang di dalam CD folder cms ke

dalam direktori C:\xampp\htdocs\sekolah.

4. Ekstrak Joomla_3.3.6-Stable-Full_Package.zip tersebut.

5. Buka web browser, ketikkan url localhost/phpmyadmin untuk membuat database.

6. Klik tab menu Basis data lalu pada kolom Buat basis data diisi dengan sekolah (atau

terserah Anda).

Gambar 5.6 Buat Basis Data Sekolah

7. Setelah Database dibuat, klik database tersebut yang terletak disisi kiri halaman

PhpMyAdmin.

Gambar 5.7 Database Sekolah


8. Lalu klik tab menu Hak Akses dan klik Tambahkan Pengguna.

9. Pada halaman Tambahkan Pengguna dibagian Informasi Masuk silahkan isi informasi

pengguna database sesuai keinginan Anda.

Username: diisi adsek (atau terserah Anda)

Host: Semua Inang dirubah menjadi Lokal (localhost).

Password : untuk password sebagai contoh diisi 12345 (atau terserah Anda)

10. Jangan lupa pada hak akses global pengguna pilih semua dan klik Kirim.

Gambar 5.8 Hak Akses Pengguna

11. Pada web browser buka new tab lalu ketikkan url localhost/sekolah.

12. Pada halaman Konfigurasi Utama isikan data-data sebagai berikut :

Pilih Bahasa : Bahasa Indonesia

Nama Situs : SMK Cyber Satria

Deskripsi : SMK Cyber Satria merupakan Sekolah Menengah Kejuruan yang

berkonsentrasi dalam pendidikan Teknologi Informasi.

Email Admin : isikan dengan email Anda.

Nama Pengguna Admin : diisi terserah Anda

Password : untuk passwordnya diisi terserah Anda.

Konfirmasi sandi admin : silahkan masukkan password kembali

Gambar 5.9 Konfigurasi Utama

Padamkan Situs : Tidak

13. Jika sudah Klik Berikutnya.


14. Pada halaman Konfigurasi Database isikan data-data database yang sebelumnya telah

dibuat melalui PhpMyAdmin.

Type Database : MySQLi

Nama Host : localhost

Nama Pengguna : tuliskan nama pengguna database

Sandi : tuliskan password pengguna databasenya

Nama Database : sekolah

Awalan Tabel : biarkan saja default

Gambar 5.10 Konfigurasi Database

15. Klik Berikutnya.

16. Pada halaman Finalisasi pada Pasang Contoh Data silahkan pilih Tidak ada

Dibutuhkan untuk dasar pembuatan situs multibahasa. Dan klik Pasang.

Gambar 5.11 Finalisasi Instal Joomla

17. Jangan lupa untuk menghapus direktori Instalasi Joomla.

5.3.2 Download Gantry Template Bundle

Gantry Template Bundle merupakan paket lengkap yang berisi Template Gantry, Gantry

Framework, Modul RokNavMenu, dan asosiasi plugin lainnya. Gantry Template Bundle bisa Anda

download di http://gantry-framework.org/download. Pada halaman download Gantry Framework untuk

Joomla Anda akan dihadapkan dengan berbagai pilihan download Gantry For Joomla seperti :

a. Gantry Framework for Joomla 2.5 + 3.2

b. Gantry Default Template for Joomla 2.5 + 3.2

c. Gantry Template Bundle for Joomla 2.5 + 3.2

d. Gantry Rocketlauncher for Joomla 2.5

e. Gantry Rocketlauncher for Joomla 3.2

http://gantry-framework.org/download


Dalam contoh kasus yang akan dikerjakan, penulis akan mendownload Template Bundle for

Joomla 2.5 + 3.2 yang sudah disertakan dalam CD folder extensions karena penulis akan menggunakan

template Gantry beserta framework dan ektensi penunjangnya yang sudah dipaket menjadi satu.

5.3.3 Instal Gantry Template Bundle

Perlu diperhatikan, Anda tidak dapat menggunakan template Gantry tanpa menginstal Gantry

Framework sebab Gantry Framework merupakan sistem utama sebagai landasan untuk mengatur segala

aspek desain template Gantry. Cara instalasi Gantry Template Bundle sebagai berikut:

1. Aktifkan Apache dan MySQL (XAMPP).

2. Buka url localhost/sekolah/administrator di web browser, lalu Login

3. Klik Extensions Extensions Manager.

Gambar 5.12 Extension Manager

4. Upload & Install gantry-4.1.25-bundle.zip. (CD extensions)

Gambar 5.13 Upload Gantry Template Bundle

5. Setelah instalasi sukses silahkan klik Extensions Template Manager.

Gambar 5.14 Install Gantry Sukses

6. Jadikan Gantry menjadi template default dengan klik tombol (bintang).

Gambar 5.15 Template Default


7. Check frontend, dengan membuka url localhost/sekolah di web browser.

Gambar 5.16 Frontend Template Gantry

8. Anda telah berhasil melalukan instalasi Gantry Template Bundle.


BAB 6 – PERENCANAAN

etelah mempelajari mengenai dasar-dasar instalasi Joomla dan Gantry Framework, kali ini

penulis akan mengajak Anda melakukan perencanaan dasar membuat website sekolah

sederhana yang interaktif dan dinamis menggunakan Joomla dan Gantry Framework. Mengapa website

sekolah? Karena penulis menyadari masih banyak sekali sekolah-sekolah di Indonesia yang belum

memanfaatkan teknologi informasi dengan membuat website sekolah. Website sekolah yang akan

dibuat adalah website Sekolah Menengah Kejuruan (SMK) Cyber Satria.

Perencanaan merupakan langkah pertama yang paling penting dalam membangun sebuah

website, mengapa demikian? Karena dengan perencanaan yang matang dan baik maka terciptalah

website yang baik. Tanpa adanya proses perencanaan maka proses pembuatan website sekolah tidak

akan berjalan secara sistematis dan tentunya akan terjadi banyak kesalahan.

6.1 Tujuan Dan Manfaat Website Sekolah

Ketika Anda ingin membuat rumah apa yang Anda pikirkan pertama kali? Tentu tujuan rumah

itu untuk apa bukan? Sama seperti ketika kita ingin membuat website sekolah. Hal pertama yang harus

kita pikirkan adalah apa tujuan sekolah membuat website. Dasar dalam perencanaan website sekolah

adalah kita harus memahami tujuan dan manfaat website sekolah itu sendiri. Adapun tujuan SMK Cyber

Satria membangun website sekolah yaitu sebagai media informasi pelayanan sekolah kepada

masyarakat yang bisa diakses oleh siapa saja, kapan saja dan dimana saja melalui jaringan internet.

Ada tujuan pasti ada manfaat yang ingin dirasakan. Dari tujuan pembangunan website sekolah

di atas maka akan ada manfaat bagi SMK Cyber Satria diantaranya seperti :

1. Meningkatkan citra sekolah tersebut.

2. Sebagai media promosi online.

3. Memperkenalkan profiles sekolah kepada masyarakat.

4. Memperkenalkan kegiatan dan program belajar yang diadakan oleh sekolah.

5. Sebagai bahan pertimbangan calon siswa untuk memilih sekolah.

6. Sebagai layanan dan sarana sekolah kepada siswa.

6.2 Konten Website Sekolah

Masih sama halnya dengan membuat rumah. Setelah mengetahui tujuan rumah itu untuk apa,

maka kita pasti akan berpikir nantinya di dalam rumah itu akan diisi apa saja? Isi dalam rumah sama

saja dengan konten di dalam website. Setelah mengetahui apa tujuan SMK Cyber Satria membuat

website sekolah maka akan timbul pertanyaan sederhana seperti ‘Informasi apa saja yang akan

ditampilkan di dalam website sekolah?’. SMK Cyber Satria ingin mempunyai website untuk

menampilkan informasi mengenai profil sekolah dan berita sekolah. Profil sekolah yang ingin

ditampilkan seperti sejarah sekolah, sambutan kepala sekolah, guru, staf, siswa, organisasi siswa di

sekolah, prestasi sekolah, fasilitas sekolah, galeri untuk dokumentasi album foto sekolah, dan kontak

sekolah. Berita sekolah bisa saja mengenai pengumuman sekolah kepada siswa ataupun informasi

terbaru lainnya.

S


Dari ilustrasi di atas kita menjadi tahu konten apa saja yang dibutuhkan untuk diterbitkan di

dalam website sekolah? Dan kebutuhan apa saja untuk membuat konten tersebut. Nah disini tugas kita

adalah mencari tahu (analisa) kebutuhan-kebutuhan konten tersebut. Cara paling mudah untuk mencari

tahu adalah dengan bertanya langsung kepada pihak sekolah misalnya bertanya kepada Kepala Sekolah

lalu mengumpulkan data-data untuk konten website sekolah.

Disini penulis memberi contoh kebutuhan untuk konten yang akan diterbitkan dalam website

sekolah adalah :

Artikel tentang profil sekolah dan berita sekolah.

Foto Guru, Staf, Siswa, dan Fasilitas Sekolah.

Kontak sekolah seperti alamat, nomer telephone, email.

Dan lain sebagainya.

6.3 Struktur Menu Website Sekolah

Tugas kita selanjutnya adalah membuat struktur menu website sekolah. Menu-menu apa saja

yang dibutuhkan? Kebutuhan menu tergantung dari konten, menu adalah navigasi pengguna ketika

mengakses website. Penulis menyimpulkan dari kebutuhan konten website sekolah, maka dibuatlah

struktur menu seperti gambar di bawah ini :

Gambar 6.1 Struktur Menu

No. Main

Menu Sub Menu

Menu item

Type Keterangan

1. Home - Single article

Halaman awal ketika pengguna

mengakses website sekolah. Pada

halaman ini berisi informasi utama.

2. Profiles Sejarah Sekolah Single article Halaman yang berisi artikel (konten)

mengenai informasi sejarah sekolah.

Menu Manager

Main Menu

Home

Profiles

Sejarah Sekolah

Sambutan Kepala Sekolah

Guru

Staf

Siswa

Organisasi Siswa

Prestasi Sekolah

Fasilitas Sekolah

News

Gallery

Contact

Admin Menu

Create Article

User Profile


Sambutan Kepala

Sekolah Single article

Halaman yang berisi artikel (konten)

mengenai sambutan kepala sekolah.

Guru RokGallery Halaman yang berisi informasi guru-guru

/ pengajar di sekolah.

Staf RokGallery

Halaman yang berisi informasi Staf Tata

Usaha / karyawan di sekolah.

Siswa RokGallery Halaman yang berisi informasi Siswa.

Organisasi Siswa Single article


mengenai organisasi sekolah untuk siswa.

Prestasi Sekolah Single article


mengenai prestasi sekolah selama ini.

Fasilitas Sekolah Single article


mengenai sarana dan prasarana sekolah.

3. News

- Category blog

Halaman berupa blog yang berisi segala

artikel (konten) mengenai berita atau

pengumuman terbaru dari sekolah.

4. Gallery - RokGallery

Halaman yang berisi album photo

sekolah.

5. Contact - Contacts Halaman informasi kontak sekolah.

Tabel 2 Main Menu

No. Admin

Menu Sub Menu

Menu item

Type Keterangan

1. Create Article - Create article Halaman khusus admin untuk membuat

artikel melalui frontend.

2. User Profile - Edit User Profile Halaman khusus admin untuk mengedit

profil melalui frontend.

Tabel 3 Admin Menu

Alur penampilan konten pada Joomla adalah Menu Menu Item Type. Maksudnya menu

tersebut menampilkan konten dari artikel, kontak, komponen dan lain sebagainya. Mengenai menu akan

lebih mudah dimengerti ketika Anda bekerja membuat menu yang akan dijelaskan pada Bab 9 - MENU.

6.4 Desain Tata Letak Website Sekolah

Desain tata letak website sama saja seperti mendesain ruangan-ruangan di dalam rumah. Kita

analogikan ruangan di dalam rumah itu sama seperti dengan halaman di dalam website, setiap ruangan

di dalam rumah tentu mempunyai tata letak perabotan yang berbeda-beda.

Desain tata letak (layout) website sangat penting untuk perencanaan tampilan antarmuka web.

Dalam hal ini, desain tata letak yang dimaksud adalah mendesain konten apa saja yang akan ditampilkan

dalam satu halaman web karena tidak pasti setiap halaman website memiliki konten yang sama. Dari

desain tersebut dapat dijadikan acuan membangun tampilan website yang interaktif bagi pengguna.

Pada Joomla, desain tata letak sama dengan mengatur posisi modul.

Penulis memberikan contoh desain layout halaman menu Home pada website sekolah

disesuaikan dengan posisi modul pada template Gantry.


Gambar 6.2 Posisi Modul Menu Home Website Sekolah

No. Module Module Position

1. Logo header-a

2. Menu (main menu) header-b

3. Slideshow showcase-a

4. Module Custom HTML maintop-a

5. Content mainbody

6. Module Search, Login Form, Articles Category, Create Article, dan Edit

User Profile

sidebar-a

7. Module Custom HTML bottom-a

8. Copyright

To-Top Scroller

copyright-a

copyright-b

Tabel 2 Module Position Web Sekolah

Gambar 6.2 merupakan desain tata letak menu Home website sekolah yang disesuaikan dengan

posisi modul pada template Gantry. Dari desain tata letak halaman menu Home itulah nantinya akan

digunakan sebagai dasar untuk tata letak halaman menu lainnya, namun tidak semua modul pada menu

Home dipakai di menu lainnya. Untuk cara mengatur posisi modul pada template Gantry akan dibahas

di Bab 11 – Bekerja Dengan Modul.

Mendesain layout untuk website sekolah dapat dilakukan dengan corat-coret di secarik

kertas atau memanfaatkan berbagai software yang bisa Anda dapatkan melalui internet.

Search di Google saja dengan keywords ‘Free Mockup and Wireframe Tools’.

6.5 Pengguna Website Sekolah

Pengguna website sekolah dimaksud adalah siapa saja orang-orang yang bertanggung jawab

untuk mengurus website sekolah. Karena banyak kasus seperti sekolah membuat website namun

website tersebut hanya buat pajangan, setelah dibuat tidak diurus sama sekali. Percuma punya website

bagus-bagus tetapi tidak ada yang merawatnya, pengunjung yang datang bisa ketinggalan informasi dan

malas membuka website sekolah. Jika sudah seperti itu siapa yang rugi? Sekolah dong, bisa jadi sekolah

kehilangan calon murid yang siapa tahu bisa tertarik untuk mendaftar di sekolah tersebut.


Website juga perlu dijaga dan dirawat agar banyak pengunjung yang selalu datang untuk

melihat informasi terbaru. Terus siapa sajakah yang pada nantinya menjadi Administrator website

sekolah yang bertugas menjaga, merawat, dan meng-update website sekolah itu?

Dalam contoh kasus website SMK Cyber Satria penulis menentukan bahwa sekolah tersebut

mempunyai 2 (dua) orang pengguna dengan hak akses yang berbeda. Yang satu sebagai Admin (Super

User) dengan mempunyai tugas sebagai penanggung jawab penuh atas website sekolah. Sedangkan

yang satunya lagi hanya sebagai Manajer yang bertugas mengelola konten website sekolah seperti

meng-update artikel berita/pengumuman sekolah.

Dasarnya, yang menjadi Admin (Super User) adalah yang membuat website sekolah yaitu

Anda sendiri. Dan yang nanti menjadi Manajer adalah orang lain entah itu guru, staf, atau bisa jadi

siswa-siswi di sekolah Anda. Untuk mengelola pengguna website sekolah akan di bahas pada Bab 13

– Akses Pengguna.


BAB 7 – KATEGORI

ategori berguna untuk mengelompokkan berbagai item type atau tipe konten yang saling

berkaitan isinya. Joomla mempunyai banyak cara untuk menampilkan konten yang

dikendalikan oleh kategori. Tipe konten yang dapat dikategorisasi adalah artikel, banner, kontak, dan

tautan web.

Saat akan membuat dan menetapkan kategori-kategori, Anda harus memiliki struktur yang

terencana. Sebagai contoh, kebutuhan kategori untuk website sekolah yang akan kita buat yaitu profiles,

news, dan general. Kategori profiles berguna untuk mengelompokan artikel-artikel profiles sekolah,

sedangkan kategori news mengelompokan artikel-artikel pengumuman atau berita terbaru mengenai

sekolah dan siswa. Kategori general mengelompokan artikel-artikel lainnya.

Gambar 7.1 Struktur Kategori

7.1 Membuat Kategori Profiles

Kategori profiles berguna untuk mengelompokan artikel-artikel mengenai profiles sekolah.

Untuk membuat kategori baru, seperti ini langkah-langkahnya :

1. Login ke halaman Administrator web sekolah (localhost/sekolah/administrator).

2. Klik menu Content Category Manager.

3. Klik New. Lalu isikan data-data sebagai berikut :

Kolom Title diisi dengan profiles.

Kolom Alias biarkan kosong

Description diisi dengan ‘Kategori profiles SMK Cyber Satria’. (tanpa tanda petik)

Kategori

Profiles

Artikel 1

Artikel 2

Seterusnya..

News

Artikel 1

Artikel 2

Seterusnya..

General

Artikel 1

Artikel 2

Seterusnya..

K


Gambar 7.2 Membuat Kategori Profiles.

4. Klik Save & Close.

Video tutorial membuat kategori profiles bisa Anda lihat pada CD Video Tutorial

BAB – 7 KATEGORI 0701 – Membuat Kategori Profiles

7.2 Membuat Kategori News

Kategori news akan digunakan untuk mengelompokan artikel-artikel yang berisi tentang

pengumuman atau berita terbaru mengenai sekolah dan siswa. Sedangkan angkah-langkah membuat

kategori news sama dengan membuat kategori profiles, namun bedanya dipengisian deskripsinya.

1. Pada Category Manager klik New.

2. Isikan data-data sebagai berikut :

Kolom Title diisi dengan news.

Kolom Alias diisi news atau biarkan kosong

Description diisi dengan ‘Kategori news berisi berita terbaru SMK Cyber Satria’.

(tanpa tanda petik)


Video tutorial membuat kategori news bisa Anda lihat pada CD Video Tutorial BAB

– 7 KATEGORI 0702 – Membuat Kategori News

7.3 Mengedit Kategori

Kita telah membuat dua (2) kategori yaitu profiles dan news. Jika kita melihat pada halaman

Category Manager terdapat satu kategori bawaan Joomla yaitu kategori Uncategorised. Sekarang kita

ingin merubah kategori Uncategorised menjadi menjadi kategori general. Caranya sebagai berikut:

1. Beri tanda centang pada Uncategorised.

2. Klik Edit.

Gambar 7.3 Merubah Kategori

3. Rubah datanya sebagai berikut :


Kolom Title dirubah menjadi general.

Kolom Alias rubah dirubah menjadi general.

Description diisi dengan ‘kategori untuk artikel yang lainnya’. (tanpa tanda petik)

Gambar 7.4 Kategori General


Video tutorial mengedit kategori bisa Anda lihat pada CD Video Tutorial BAB – 7

KATEGORI 0703 – Mengedit Kategori


BAB 8 – ARTIKEL

ada Joomla, artikel merupakan konten utama. Artikel bisa saja berisi teks (HTML),

gambar, video maupun dokumen. Cara membuat artikel di Joomla sangatlah mudah. Hal

pertama yang harus dilakukan sebelum membuat artikel adalah Anda harus membuat kategori terlebih

dahulu. Kenapa harus membuat kategori? Karena pada setiap artikel yang kita buat harus

dikategorisasikan. Hal ini disebabkan artikel pada Joomla berada pada hirarki paling akhir.

Kategori Artikel

Kategori sub Kategori Artikel

Kategori sub Kategori sub Kategori Artikel

Di dalam bab ini kita akan belajar bagaimana cara membuat artikel pada CMS Joomla dan

membuat artikel untuk contoh kasus website sekolah yaitu website SMK Cyber Satria yang akan

disesuaikan dengan kategori yang telah dibuat pada bab sebelumnya.

8.1 Cara Membuat Artikel

Anda dapat mengelola artikel (membuat, mengedit, menerbitkan, dan menyimpan) melalui

Article Manager. Langkah-langkah membuat artikel baru sebagai berikut:

1. Buka halaman Administrator.

2. Klik Content Article Manager Add New Article.

3. Setelah itu isi kolom Title dengan judul artikel yang ingin Anda buat, sedangkan

disebelahnya terdapat kolom Alias biarkan kosong saja karena secara otomatis ketika

artikel di Save maka kolom alias tersebut akan terisi dengan judul Title yang nantinya akan

dipakai sebagai URL artikel.

Gambar 8.1 Kolom Judul Artikel

4. Tuliskan artikel pada teks editor yang memiliki interface tidak berbeda jauh dengan

program Office yang biasa Anda gunakan untuk menulis. Sebagai contoh jika Anda ingin

menulis dengan huruf tebal tinggal tekan tombol B pada teks editor lalu tulis suatu

kata/kalimat.

Gambar 8.2 Teks Editor

P


5. Pada teks editor Anda bisa beralih ke Toggle Editor untuk membuat/mengedit artikel

menggunakan kode HTML. Cara untuk beralih ke Toggle Editor adalah dengan klik

tombol yang terletak di bawah teks editor. Jika Anda telah beralih ke Toggle

Editor maka Anda bisa menulis artikel menggunakan kode HTML.

Gambar 8.3 Toggle Editor

Judul sudah diisi, artikel sudah diketik, langkah selajutnya lihat pada sisi kanan sebelah teks

editor. Anda akan melihat pengaturan Category, Tags, Status, Featured, Access, Language, Version

Note. Anda juga bisa melakukan konfigurasi artikel sesuai dengan kebutuhan untuk artikel yang telah

Anda tulis dengan cara bergulir dari tab menu Content ke tab menu lainnya seperti Publishing, Images

and Links, Options, Configure Edit Screen, dan Permissions.

Category: Pilih kategori yang sesuai dengan topik artikel Anda. Semisal Anda menulis artikel tentang berita

maka pilih kategori berita.

Tags: Untuk menandai artikel dengan nama yang unik.

Status: Untuk menerbitkan atau tidak menerbitkan artikel.

Featured: Untuk memilih artikel pilihan agar ditampilkan pada Menu Featured Articles.

Access: Pilih level hak akses untuk melihat artikel

Language: Pilih fitur bahasa.

Version Note: Memberikan catatan versi artikel

Informasi Selengkapnya bisa Anda baca di http://docs.joomla.org/Help33:Content_Article_Manager_Edit


BAB – 8 ARTIKEL 0801 – Cara Membuat Artikel

8.2 Pengaturan Teks Editor

Default teks editor pada Joomla 3 adalah editor TinyMCE yang sudah Anda lihat bahwa fitur

pengaturan teks pada editor tersebut masih sangat sederhana sekali. Jika dirasa kurang lengkap dan

ingin menambahkan fitur yang lengkap pada teks editor agar lebih komplek sehingga pada saat menulis

artikel menjadi lebih mudah ikuti cara berikut ini :

1. Klik Extensions Plugin Manager.

2. Cari plugin Editor – TinyMCE lalu klik plugin tersebut.

3. Pada Functionality rubah menjadi Extended.

Gambar 8.4 Plugin Editor TinyMCE


4. Apabila pada nantinya jika Anda ingin mengembed video Youtube di dalam artikel,

yang harus Anda lakukan adalah beralih ke kolom Prohibited Elements dan hapus

kode iframe. Dengan menghapus kode iframe dimaksudkan untuk menghilangkan

blocking pada kode HTML elemen iframe oleh teks editor TinyMCE.

Gambar 8.5 Prohibited Elements TinyMCE


Sekarang teks editor memiliki fitur pengaturan teks yang lebih lengkap jika dibandingkan

sebelumnya.

Gambar 8.6 Extended Editor TinyMCE


BAB – 8 ARTIKEL 0802 – Pengaturan Teks Editor

8.3 Menambahkan Gambar di Artikel

Banyak cara untuk menambahkan gambar ke dalam artikel, pertama dengan cara menyisipkan

link gambar dari situs lain, yang kedua adalah dengan cara mengupload gambar ke dalam website

menggunakan Media Manager, dan yang ketiga adalah dengan menggunakan tombol Image yang

terdapat di bawah teks editor artikel.

Sebagai contoh, penulis akan menjelaskan ketiga cara tersebut satu persatu. Menambahkan

gambar dengan cara menyisipkan link gambar dari situs lain caranya yaitu pada teks editor tekan

tombol insert/edit image lalu pastekan link gambar tersebut.

Gambar 8.7 Insert Image


Nah, jika Anda ingin menambahkan gambar ke dalam artikel dengan cara mengupload gambar

tersebut ke dalam website, Anda bisa menggunakan Media Manager yang terdapat pada Content

Media Manager. Karena pada nantinya dibutuhkan gambar untuk website sekolah, maka sekalian saja

kita upload gambar-gambar tersebut melalui Media Manager.

1. Klik Content Media Manager.

Gambar 8.8 Media Manager

2. Buat folder fasilitas dan logo dengan cara klik tombol Create New Folder.

3. Setelah itu klik tombol Upload Choose Files.

4. Di dalam CD images sudah terdapat berbagai gambar yang telah disediakan dan

disesuaikan dengan folder masing-masing. Silahkan upload gambar yang terdapat di

dalam folder fasilitas dan logo serta gambar lainnya seperti contact.jpg, kepala

sekolah.jpg, dan piala.gif. Selain gambar itu jangan diupload dulu.

5. Setelah semuanya diupload, hapus folder banners, headers, dan sampledata karena

semua gambar yang terdapat di dalam folder tersebut tidak kita gunakan.

Gambar 8.9 Folder Image

Yang terakhir yaitu dengan cara menambahkan gambar melalui tombol image yang berada di

bawah teks editor artikel.

Gambar 8.10 Tombol Image

Video tutorial menambahkan gambar ke dalam artikel bisa Anda lihat pada CD Video

Tutorial BAB – 8 ARTIKEL 0803 – Menambahkan Gambar di Artikel


8.4 Menyisipkan Video Youtube

Sebelumnya pada bab 8.2 kita sudah mengatur teks editor dengan menghilangkan kode Iframe,

iframe adalah tag HTML untuk menyisipkan dokumen lain. Dalam contoh ini kita akan mencoba

menyisipkan video dari Youtube ke dalam artikel.

1. Dalam contoh ini buka URL https://www.youtube.com/watch?v=AdFZRiRxgSk.

2. Di bawah video Youtube tersebut klik Share Embed.

3. Copy source code iframe dari video Youtube tersebut.

Gambar 8.11 Youtube

4. Pada halaman Administrator klik Content Article Add New Article.

5. Klik Toggle Editor lalu pastekan source code tersebut.

Gambar 8.12 Iframe Video Youtube

Nanti ketika artikel diterbitkan maka video tersebut akan muncul. Di atas hanya contoh

bagaimana cara menyisipkan video Youtube ke dalam artikel.

Video tutorial menyisipkan video youtube ke dalam artikel bisa Anda lihat pada CD

Video Tutorial BAB – 8 ARTIKEL 0804 – Menyisipkan Video Youtube

8.5 Artikel Website Sekolah

Semua contoh artikel untuk website sekolah bisa Anda copy dari CD articles. Di dalam CD

ada beberapa contoh artikel yang telah dikelompokkan sesuai dengan kategori.

JUDUL ARTIKEL KATEGORI

Sejarah Sekolah Profiles

Sambutan Kepala Sekolah Profiles

Organisasi Siswa Profiles

Prestasi Sekolah Profiles

Fasilitas Sekolah Profiles

Contoh Berita 1 News




Informasi Admin Website General

Tabel 3. Artikel Web Sekolah

https://www.youtube.com/watch?v=AdFZRiRxgSk


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

http://www.w3schools.com/


8.5 2 Artikel Sambutan Kepala Sekolah

Anggap saja website sekolah ini merupakan website sekolah yang baru dibuat untuk SMK

Cyber Satria, oleh sebab itu Kepala Sekolah selaku pihak yang mempunyai andil atas adanya website

sekolah menyampaikan beberapa patah kata sambutan untuk website sekolah yang telah diterbitkan

secara resmi. Langkah-langkah membuat artikel sambutan kepala sekolah sebagai berikut :


2. Kolom Title diisi dengan Sambutan Kepala Sekolah, kolom Alias biarkan saja

kosong.

3. Klik tombol Toggle Editor yang terletak di bawah teks editor.

4. Copy source code artikel Sambutan Kepala Sekolah yang terdapat di dalam CD

articles profiles Sambutan Kepala Sekolah.txt

5. Pastekan source code artikel tersebut ke dalam Toggle Editor.




Isi dari artikel Sambutan Kepala Sekolah dapat Anda rubah sesuai dengan keinginan Anda

8.5.3 Artikel Organisasi Siswa

Organisasi dapat kita temukan dimanapun baik di lingkungan masyarakat, institusi

pemerintahan, hingga lingkungan sekolah. Di dalam sekolah terdapat berbagai organisasi siswa yang

memang berperan dalam pendewasaan siswa agar mampu berinteraksi dengan lingkungan sosial.

Sebagai contoh, SMK Cyber Satria terdapat lima organisasi siswa yaitu OSIS, Pramuka, PMR, ROHIS,

dan Pecinta Alam.

Semua informasi singkat tentang organisasi yang ada di sekolah ingin ditampilkan di dalam

website, maka dibuatlah artikel tentang organisasi siswa dengan cara sebagai berikut :


2. Kolom Title diisi dengan Organisasi Siswa, kolom Alias biarkan saja kosong.


4. Copy source code artikel Organisasi Siswa yang terdapat di dalam CD articles

profiles Organisasi Siswa.txt





Isi dari artikel Organisasi Siswa dapat Anda rubah sesuai dengan keinginan Anda

8.5.4 Artikel Prestasi Sekolah

Semakin banyak prestasi yang di dapat baik oleh siswa ataupun sekolah maka brand dari

sekolah pun semakin melejit, saat ini pun masing-masing sekolah berlomba-lomba untuk menunjukan

prestasi agar mendapatkan predikat sekolah favorit. Karena dengan menjadi sekolah favorit maka setiap

penerimaan siswa tahun ajaran baru sekolah tersebut akan menjadi tujuan utama calon siswa yang ingin

mendaftar.

SMK Cyber Satria pun tidak ingin ketinggalan dengan ingin menampilkan prestasi apa saja

yang telah di dapat. Maka dibuatlah artikel yang berisi informasi sekolah dengan cara sebagai berikut :



2. Kolom Title diisi dengan Prestasi Sekolah, kolom Alias biarkan saja kosong.


4. Copy source code artikel Prestasi yang terdapat di dalam CD articles profiles

Prestasi Sekolah.txt





Isi dari artikel Prestasi dapat Anda rubah sesuai dengan keinginan Anda

8.5.5 Artikel Fasilitas Sekolah

Fasilitas sangat penting untuk menunjang proses belajar mengajar di dalam sekolah. Dengan

fasilitas yang lengkap tentunya guru dapat mengajar dengan maksimal dan siswa dapat belajar dengan

optimal. Fasilitas di SMK Cyber Satria cukup lengkap dan semua fasilitas yang ada ingin diterbitkan

pada halaman website sekolah. Kita tinggal membuat artikel yang berisi segala informasi fasilitas yang

dimiliki sekolah dengan cara sebagai berikut :


2. Kolom Title diisi dengan Fasilitas Sekolah, kolom Alias biarkan saja kosong.


4. Copy source code artikel Fasilitas Sekolah yang terdapat di dalam CD articles

profiles Fasilitas Sekolah.txt





Isi dari artikel Fasilitas Sekolah dapat Anda rubah sesuai dengan keinginan Anda

8.5.6 Artikel Contoh Berita

Tidak hanya menampilkan informasi tentang profil sekolah, website sekolah juga dapat

menjadi sarana publikasi berita terbaru atau pengumuman kepada warga sekolah serta masyarakat.

Sebenarnya cara membuat artikel untuk berita tidak berbeda jauh dengan membuat artikel-artikel

sebelumnya, karena kita akan membuat 4 (empat) contoh artikel berita yang akan dimasukkan ke

dalam kategori news.


2. Kolom Title diisi dengan Contoh Berita 1, kolom Alias biarkan saja kosong.


4. Copy source code artikel Contoh Berita 1 yang terdapat di dalam CD articles

news Contoh Berita 1.txt



Category news dan Status Published.



Untuk artikel berita lainnya yang terdapat CD articles news silahkan Anda buat sendiri

dengan cara seperti di atas.

8.5.7 Artikel Informasi Admin Website

Pada bab 6.5 sudah dijelaskan mengenai kebutuhan Admin untuk website sekolah. Karena pada

nantinya Admin website tidak hanya satu, maka dibuatlah informasi untuk para admin agar mengetahui

tata cara mengelola website sekolah. Langkah-langkah membuat artikel Informasi Admin Website

sebagai berikut :


2. Kolom Title diisi dengan Informasi Admin Website, kolom Alias biarkan saja

kosong.


4. Copy source code artikel Informasi Admin Website yang terdapat di dalam CD

articles general Informasi Admin Website.txt



Category general dan Status Published.


Ada dua cara untuk menulis artikel, yaitu dengan cara menggunakan teks editor what you see what

you get atau dengan cara menulis kode HTML melalui toggle editor. Pilihlah cara termudah bagi

Anda. Jika Anda tidak paham bahasa HTML, penulis menyarankan Anda untuk memahami bahasa

HTML karena HTML adalah bahasa dasar untuk pemrograman web.


BAB 9 - MENU

Di dalam Joomla! Sebuah Menu adalah

sekumpulan menu yang digunakan sebagai

navigasi web. Masing-masing butir menu

menentukan URL ke halaman situs Anda, dan

setiap menu dapat diatur untuk mengendalikan

konten (artikel, daftar kategori, modul, dll) halaman tersebut. Selain itu, masing-masing menu

memiliki menu type (jenis menu), yang ditampilkan dibagian pengelolaan menu (Menu Manager). Tipe

Menu sebenarnya adalah nama unik atau alias yang akan dipakai untuk membuat URL.

Sebuah menu tidak otomatis ditampilkan pada frontend halaman web manapun. Anda perlu untuk

membuat modul menu untuk menampilkan menu pada semua atau beberapa halaman web. Setiap menu

dapat ditampilkan oleh satu atau lebih modul (sehingga memungkinkan untuk menampilkan menu yang

sama di posisi yang berbeda).

Pada BAB 6 sudah dijelaskan mengenai menu-menu apa saja yang akan dibuat untuk website

sekolah. Dan Pada Bab 8 Anda sudah belajar membuat artikel yang nantinya akan digunakan sebagai

item menu.

9.1 Membuat Menu Di Menu Manager

Menu Manager memungkinkan Anda untuk membuat kustom menu pada website Joomla Anda.

Buka halaman Administrator Menus Menu Manager, terdapat Main Menu yang akan kita

gunakan sebagai menu utama di dalam website sekolah. Pada bab 6.3 sudah dijelaskan mengenai

kebutuhan menu yaitu Main Menu dan Admin Menu. Karena Main Menu sudah ada, saat ini kita akan

membuat menu baru yaitu Admin Menu dengan cara sebagai berikut :


2. Klik Menus Menu Manager Add New Menu.

Gambar 9.1 Membuat Menu Baru

3. Title diisi dengan Admin Menu.

4. Menu Type diisi dengan admin-menu. Menu Type berguna untuk mengindentifikasi

menu tersebut. Untuk penulisan Menu Type tidak boleh menggunakan spasi, namun

diperbolehkan menggunakan karakter – atau _.

5. Description diisi dengan ‘menu untuk halaman Admin’. (tanpa tanda petik)

Main Menu

MenuSub

Menu


Gambar 9.2 Admin Menu


9.2 Mengedit Menu Home

Menu Home merupakan halaman utama di dalam sebuah website karena menu Home

merupakan halaman awal yang langsung berinteraksi dengan pengguna ketika mengakses website.

Dalam menu Home penulis akan menampilkan konten berupa artikel pilihan menggunakan menu item

type Featured Article, dengan langkah-langkah sebagai berikut :


2. Klik menu Content Article Manager.

3. Pada Article Manager, pilih artikel yang akan ditampilkan pada halaman menu Home

dengan memberi tanda centang. Sebagai contoh penulis memberikan tanda centang 5

(lima) artikel yaitu artikel Sambutan Kepala Sekolah, Contoh Berita 1, Contoh Berita

2, Contoh Berita 3, dan Contoh Berita 4.

4. Setelah diberi centang, klik tombol Featured yang terletak di atas halaman Article

Manager.

Gambar 9.3 Memilih Artikel Untuk Djadikan Featured Article

5. Artikel yang telah dijadikan Featured akan muncul tanda bintang berwarna kuning.


Gambar 9.4 Artikel Setelah Menjadi Featured Articles

6. Setelah memilih artikel untuk ditampilkan pada halaman Home, langkah selanjutnya

adalah klik Menus Main Menu.

7. Klik menu Home.

8. Pada tab menu Details, biarkan saja sesuai default karena untuk Menu Item Type-nya

sudah Featured Articles.

9. Beralih ke tab menu Layout, lakukan pengaturan sebagai berikut:

# Leading Articles diisi dengan angka 0 atau biarkan kosong. # Leading

Articles berguna untuk mengatur banyaknya artikel yang nampak dengan

menggunakan lebar penuh dari halaman website.

# Intro Articles diisi dengan angka 5. # Intro Articles berguna untuk

mengatur banyakya artikel yang muncul setelah Leading Articles. Jika kita isi

dengan angka 5 maka artikel yang muncul sebanyak 5 artikel di halaman

website.

# Columns diisi dengan angka 1. # Columns berguna untuk mengatur

banyaknya kolom pada Intro Articles. Misal Anda diisi dengan angka 2 maka

lebar halaman website akan terbagi menjadi 2 bagian, setiap bagian

menampilkan artikel dari Intro Articles.

# Links diisi dengan angka 0 atau biarkan kosong. # Links berguna untuk

mengatur jumlah link untuk ditampilkan pada bagian halaman Links. Link ini

memungkinkan pengguna untuk menghubungkan dengan Artikel tambahan.

Biarkan kosong atau diisi dengan angka 0 untuk menggunakan nilai default

dari pilihan komponen.

Category Order diubah menjadi No Order.

Article Order diubah menjadi Most recent first. Jadi artikel yang terakhir

diterbitkan akan muncul di atas sendiri menumpuk artikel yang lama.


Gambar 9.6 Pengaturan Tab Menu Layout di Menu Home

10. Beralih pada tab menu Page Display, lakukan pengaturan

Browser Page Title isi dengan SMK Cyber Satria. Browser Page Title

berfungsi untuk menampilkan judul halaman pada tab web browser.

Show Page Heading No.

Gambar 9.7 Browser Page Title Menu Home


Video tutorial mengedit menu home bisa Anda lihat pada CD Video Tutorial BAB

– 9 MENU 0901 – Mengedit Menu Home

9.3 Menu Profiles

Menu Profiles dibuat sebagai menu utama dari sub-sub menu Profiles. Ketika di klik menu

Profiles tidak akan menampilkan konten apapun, namun menu Profiles akan menampilkan sub-sub

menunya. Menu Profiles memiliki sub-sub menu untuk menampilkan halaman-halaman tentang

sekolah.

Gambar 9.8 Sub Menu Profiles

Profiles

Sejarah SekolahSambutan

Kepala SekolahGuru Staf Siswa Organisasi Prestasi Fasilitas


Berikut ini merupakan cara membuat menu Profiles :


2. Klik Menus Main Menu.

3. Klik New.

4. Menu Title beri nama Profiles.

5. Alias biarkan kosong.

6. Pada tab menu Details, lakukan pengaturan :

Menu item type System Links External URL.

Link isi dengan #.

Gambar 9.9 Item Type Menu Profiles

7. Klik tab menu Dropdown Menu Options, lakukan pengaturan :

Drop-Down Width (px) 200. Drop-Down Width berfungsi untuk memberi

lebar kolom dropdown menu.

Gambar 9.10 Mengatur Lebar Kolom Drop-down


Setelah di Save, coba Anda buka halaman frontend (localhost/sekolah) lalu klik menu Profiles

maka tidak ada efek apa-apa, hal itu disebabkan menu Profiles berisi link # (kosong).

9.3.1 Membuat Menu Sejarah Sekolah

Menu Sejarah Sekolah merupakan menu untuk menampilkan artikel Sejarah Sekolah. Menu

Sejarah Sekolah merupakan sub menu dari menu Profiles. Untuk membuat menu Sejarah Sekolah

caranya yaitu :



3. Klik New.

4. Menu Title beri nama Sejarah Sekolah.



Menu item type Articles Single Article.


Select Article Sejarah Sekolah.

7. Pada menu dropdown Parent Item pilih Profiles. Nah disinilah setelan untuk membuat

sub menu dari menu Profiles.

Gambar 9.11 Parent Item Menu

8. Pada tab menu Page Display, lakukan pengaturan :

Browser Page Title isi dengan Sejarah Sekolah.


Buka halaman frontend lalu arahkan kursor pada menu Profiles maka akan nampak tampilan

menu menjadi seperti di bawah ini dan ketika menu Sejarah Sekolah di klik maka akan terbuka halaman

yang berisi artikel Sejarah Sekolah.

Gambar 9.12 Menu Sejarah Sekolah

9.3.2 Membuat Menu Sambutan Kepala Sekolah

Menu Sambutan Kepala Sekolah berisi artikel Sambutan Kepala Sekolah mengenai website

sekolah yang baru. Menu Sambutan Kepala Sekolah merupakan sub menu Profiles. Di bawah ini

merupakan cara membuat menu Sambutan Kepala Sekolah :



3. Klik New.

4. Menu Title beri nama Sejarah Sekolah.




Select Article Sambutan Kepala Sekolah.

7. Pada menu dropdown Parent Item pilih Profiles.


Browser Page Title isi dengan Sambutan Kepala Sekolah.



Selanjutnya buka halaman frontend lalu arahkan kursor pada menu Profiles maka seharusnya

akan nampak tampilan menu menjadi seperti di bawah ini.

Gambar 9.13 Menu Sambutan Kepala Sekolah

Ketika Anda klik menu Sambutan Kepala Sekolah akan terbuka halaman yang berisi artikel

Sambutan Kepala Sekolah.

9.3.3 Membuat Menu Guru

Menu Guru merupakan sub menu Profiles untuk menampilkan halaman informasi mengenai

guru-guru di sekolah. Informasi yang dimaksud yaitu Foto, Nama Guru, Nomor Identitas Pegawai

Negeri Sipil (NIP), dan Mata Pelajaran. Saat ini kita hanya akan membuat menu Guru sementara karena

untuk membuat konten yang akan ditampilkan di dalam menu Guru kita membutuhkan komponen

RokGallery. Sedangkan membuat konten menu Guru menggunakan RokGallery akan di bahas pada

Bab 10 – Bekerja Dengan Komponen.

Membuat menu Guru sementara, caranya sebagai berikut :



3. Klik New.

4. Menu Title beri nama Guru.



Menu item type System Links External URL.

Link isikan #.



Ingat, untuk menu Guru nanti akan diedit kembali setelah menginstal komponen RokGallery.

9.3.4 Membuat Menu Staf

Menu Staf merupakan sub menu Profiles, yang gunanya untuk menampilkan halaman informasi

mengenai staf di sekolah. Informasi yang dimaksud yaitu Foto, Nama Staf, NIP, dan Jabatan. Sama

seperti menu Guru, menu Staf untuk saat ini sifatnya hanya sementara yang pada nantinya akan diedit

lagi. Membuat menu Staf sementara caranya sebagai berikut :



3. Klik New.

4. Menu Title beri nama Staf.



Menu item type Sistem Links External URL.


Link isikan #.



Selanjutnya membuat menu Siswa.

9.3.5 Membuat Menu Siswa

Menu Siswa merupakan sub menu Profiles, yang gunanya untuk menampilkan informasi siswa

dengan cara menginputkan Nomor Induk Siswa Nasional (NISN) atau Nama Siswa. Tenang, Kita tidak

perlu repot-repot menginputkan satu persatu data siswa ke dalam database, ada cara mudah yaitu dengan

cara menggunakan fitur Iframe Wrapper pada Joomla.

Kita akan menampilkan halaman website http://nisn.data.kemdiknas.go.id/page/data ke dalam

halaman menu Siswa dengan cara sebagai berikut :



3. Klik New.

4. Menu Title beri nama Siswa.



Menu item type Wrapper Iframe Wrapper.

URL isikan http://nisn.data.kemdiknas.go.id/page/data.


8. Beralih pada tab menu Scroll bars Parameters, pada kolom Height diisi 700.

Gambar 9.14 Scroll Bar Parameters

9. Beralih pada tab menu Advanced, pada Frame border ganti menjadi No.

Gambar 9.15 Frame Border

10. Beralih pada menu Page Display, pada kolom Browser Page Title diisi dengan

Nomor Induk Siswa Nasional.


Pastikan PC atau laptop Anda terhubung dengan internet, selanjutnya pada frontend website

sekolah silahkan klik Menu Siswa dan lihat hasilnya.


9.3.6 Membuat Menu Organisasi Siswa

Menu Organisasi Siswa merupakan sub menu Profiles, yang gunanya untuk menampilkan

artikel mengenai organisasi-organisasi siswa di sekolah. Langsung saja, cara membuat menu Organisasi

sebagai berikut:



3. Klik New.

4. Menu Title beri nama Organisasi Siswa.




Select Article Organisasi Siswa.



Browser Page Title isi dengan Organisasi Siswa.


9.3.7 Membuat Menu Prestasi Sekolah

Menu Prestasi Sekolah merupakan sub menu Profiles, yang gunanya untuk menampilkan

konten / artikel mengenai prestasi sekolah maupun siswa sekolah tersebut. Untuk membuat menu

Prestasi Sekolah langkah-langkahnya sebagai berikut:



3. Klik New.

4. Kolom Menu Title beri nama Prestasi dan kolom Alias biarkan kosong.


Menu item type Articles Single Article

Select Article Prestasi Sekolah



Browser Page Title diisi dengan Prestasi Sekolah.

8. Klik Save Close.

9.3.8 Membuat Menu Fasilitas Sekolah

Menu Fasilitas Sekolah merupakan sub menu Profiles, yang gunanya untuk menampilkan

konten mengenai fasilitas atau sarana dan prasarana yang dimiliki sekolah. Langkah-langkah membuat

menu Fasilitas Sekolah sebagai berikut:



3. Klik New.

4. Kolom Menu Title beri nama Fasilitas dan Alias biarkan kosong.

5. Pada menu tab Details, lakukan pengaturan :

Menu item type Articles Singel Article

Select Article Fasilitas




Browser Page Title diisi dengan Fasilitas Sekolah.


9.4 Menu News

Menu News merupakan menu yang berisi artikel-artikel dari kategori news. Menu News

ditujukan untuk menampilkan berbagai berita terbaru atau pengumuman dari sekolah. Cara membuat

menu News sebagai berikut :



3. Klik New.

4. Kolom Menu Title beri nama News dan kolom Alias biarkan kosong.

5. Pada menu tab Details, lakukan pengaturan :

Menu Item Type Articles Category Blog

Choose a category News

Gambar 9.16 Item Type Menu News

6. Pada tab menu Blog Layout, lakukan pengaturan :

# Leading Articles 0

# Intro Articles 5

# Columns 1

# Links 0

7. Pada tab menu Options, lakukan pengaturan :

Show Category Hide

Link Category No

Show Author Hide

Link Author No

Show Create Date Hide

Show Modify Date Use Global

Show Voting Hide

Show Title with Readmore Hide

8. Pada tab menu Page Display, lakukan Pengaturan :

Browser Page Title diisi dengan News.


Setelah di Save, lanjutkan dengan melihat tampilan frontend dari menu News.


– 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 [email protected] (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

mailto:info@smkcybersatria.


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 Parent Hide

Show Author Hide

Show Publish Date Hide

Show Navigation Hide

Show Print Icon Hide

Show Email Icon 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

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

C

http://www.rockettheme.com/joomla/extensions/rokgallery


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:



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.



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.



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:

http://demo.gantry-framework.org/features/module-positions

http://demo.gantry-framework.org/features/module-positions


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.




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.

Show Title No.

Show Caption No.

Galery Layout Slideshow.

Show Arrows Only on Hover.

Navigation Type None.

Animation Duration (ms) 1000.

Autoplay Enabled with Progress.

Autoplay Delay 3

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

Box Text diisi Search..

Search Button pilih Yes

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

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

P


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.3.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.3.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.

http://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.

http://lesscss.org/


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.

http://www.google.com/


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.

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.

http://www.idhostinger.com/


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.

http://www.dot.tk/

https://my.freenom.com/clientarea.php


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

http://www.idhostinger.com/


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.

http://www.rockettheme.com/docs/joomla/extensions/rokgallery/INDEX.md#requirements


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.

http://www.google.com/recaptcha/intro/

http://www.smkcybersatria.com/


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.3.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

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

S

http://domain_anda/index.php/profiles/sejarah-sekolah


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.

http://domain_anda/index.php/profiles/sejarah-sekolah

http://domain_anda/profiles/sejarah-sekolah


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.

http://www.google.com/addurl


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.

https://www.google.com/webmasters/tools/

http://www.smkcybersatria.tk/

https://www.google.com/webmasters/verification/verification-file-dl?hl=in&siteUrl=http://www.smkcybersatria.tk/&authuser=0&security_token=ysfGtP-57eQusk2_LxcgcFdivXY:1412522497045


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.

http://www.smkcybersatria.com/


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

http://www.google.com/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.

http://www.smkcybersatria./


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.

joomla 3 dan gantry framework

Technology