PalComTech Publisher
JOOMLA!
langkah berkreasi dan berekspresi membangun website dinamis
Deddy Wijaya
PalComTech
Publisher
i
JOOMLA!
PalComTech Publisher
Penulis : Deddy Wijaya Editor : Hendra Gunawan Desain Kover : Deddy Wijaya
Diterbitkan pertama kali oleh : PalComTech Publisher
Cetakan Pertama, 2010
ii
PalComTech Publisher
JOOMLA!
Kata Pengantar Saat ini konten website bersifat CMS (Content Management System) semakin variatif di kalangan pengguna internet. Mulai dari Mambo, Joomla, Wordpress, Drupal, dan sebagainya. CMS ini hadir dengan menawarkan fasilitas yang canggih, aman, serta fleksibel. Joomla merupakan salah satu CMS yang cukup banyak digunakan mulai dari website ukuran kecil sampai besar seperti pemerintahan. Memiliki kelengkapan fitur serta kemudahan dalam instalasi ini menjadi CMS favorit dan layak bagi orang awam yang tertarik cara membuat website dengan sangat singkat. Bahkan orang yang belum mengenal bahasa pemograman pun bisa membuatnya. Lebih dari itu, beberapa extension seperti modul dan plugin akan membuat tampilan website jadi menarik. Buku ini disertai beberapa contoh kasus bagaimana pembuatan web secara sederhana dan bagaimana pengaturannya. Dengan adanya contoh kasus ini, diharapkan para pemula dapat dengan mudah memahami dan mengikuti langkah-langkah yang memang dibuat sangat sederhana. Serta mempelajari bagaimana agar website yang telah dibuat dapat dioperasikan dari offline menjadi online. Pada kesempatan ini, penulis ingin mengucapkan rasa syukur kepada Tuhan Yang Maha Esa, serta ucapan terimkasih kepada ibunda tercinta, saudara tersayang, serta teman-teman atas doa serta dukungannya. Penulis menyadari buku ini tidak luput dari kesalahan dan kekurangan. Penulis membuka diri untuk menerima segala bentuk tanggapan dan pertanyaan pembaca berkaitan dengan buku ini. Pembaca dapat menyampaikan saran, tanggapan, dan pertanyaan melalui email deddy_wijaya@ palcomtech.com. Palembang, November 2010
Deddy Wijaya
iii
JOOMLA!
PalComTech Publisher
Daftar Isi Chapter 1. Instalasi Web Server & Joomla ! •
Instalasi & Konfigurasi Apache
1
•
Menyimpan File di Local Lain
5
•
Meletakkan Joomla! pada www
7
•
Membuat Database
8
•
Instalasi & Konfigurasi Joomla!
9
Chapter 2. Portal Berita •
Pengaturan Content dalam Website
16
•
Membuat Section Baru
16
•
Membuat Kategori Baru
19
•
Mengubah Halaman Utama
20
•
Menulis Artikel
22
•
Opsi “Read More”
24
•
Mengganti Logo “Oke Berita”
26
Chapter 3. Rak Buku
iv
•
Membuat Section Baru
30
•
Membuat Category Baru
31
•
Membuat Halaman Informasi Buku Per Judul
32
•
Membuat Menu Informasi Buku
35
•
Membuat Halaman Informasi Daftar Buku Baru
39
•
Membuat Menu Informasi Buku Baru
40
•
Mengaktifkan Menu Jenis Buku pada Website
44
•
Membuat Informasi Cara Pemesanan
45
PalComTech Publisher
JOOMLA!
•
Membuat Pesan Menggunakan Modul HTML
46
•
Mengganti Template Website
49
Chapter 4. Kotak Musik •
Membuat Section Baru
52
•
Membuat Category Baru
53
•
Menulis Artikel Musik
54
•
Menambahkan Template Terbaru
56
•
Menambahkan Menu di Top Menu
58
•
Menghilangkan Title (Welcome to Frontpage)
61
•
Testimonial melalui Newsflash
64
•
Membuat Banner Baru & Mengupload Gambar
69
•
Membuat Banner Categories
71
•
Mengatur Banner
73
•
Menampilkan Banner ke Website
75
•
Membuat Partnership (Banner Berbentuk Tulisan)
77
•
Membuat Halaman Kontak
79
Chapter 5. Sparkling’s Blog •
Menambahkan Template Terbaru
86
•
Mengganti Footer Template
88
•
Membuat Section Baru
90
•
Membuat Category Baru
91
•
Membuat Artikel Baru
93
•
Membuat Halaman About
96
•
Menambahkan Blogroll
99
•
Menambahkan Jam Digital
104
•
Menampilkan Quote yang Memotivasi
106
v
JOOMLA!
PalComTech Publisher
•
Menambahkan Modul Yahoo Messenger!
110
•
Memasukkan Plugin “Simple Image Gallery”
113
•
Menambahkan Modul “Random Image”
123
•
Memasukkan Badge Status Facebook dan Twitter
129
•
Registrasi Shoutbox
134
•
Menyisipkan Shoutbox
138
•
Membuat Polling
140
Chapter 6. Hosting •
Membeli Domain dan Menyewa Web Hosting
143
•
Mendapatkan Subdomain dalam Web Hosting Gratis 145
•
Mengekspor Database
148
•
Upload File Joomla
150
•
Mengimpor Database
158
Chapter 7. Bagian - Bagian Joomla!
vi
•
Mengenal Back End
165
•
Mengenal Front End
173
PalComTech Publisher
JOOMLA!
Daftar Pustaka Media, Laksamana. 2009. Joomla! Membuat Blog itu Mudah. Mediakom : Yogjakarta. Natasyah, A. Agha dan SmitDev Community. 2008. CMS dengan Joomla untuk Pemula. Elex Media Komputindo : Jakarta. Nugroho, Bunafit dan Mohammad Fadhli. 2009. Joomla! 1.5.x Cara Instan Membangun Website. Universitas Atma Jaya : Yogjakarta. Wijoyo, Todi Adiatmo. 2009. Joomla! Untuk Pemula. www.sebutsajatodi. co.cc
www.extensions.joomla.org www.id-joomla.com www.joomla.org www.siteground.com www.themza.org
vii
JOOMLA!
viii
PalComTech Publisher
Instalasi Web Server & Joomla !
Chapter 1
Chapter 1 Instalasi Web Server & Joomla! A. Instalasi & Konfigurasi Apache Lakukan instalasi web server ke dalam PC atau notebook Anda. Praktek 1
Unggah paket file sumber appserv-win32-2.5.9.exe melalui situs http://apache.org.
2
Kemudian extract atau unzip paket file sumber Apache ke direktori yang dipilih.
3
Jalankan file appserv-win32-2.5.9.exe. Maka tampilan sebagai berikut.
Gambar 1. Instalasi awal Apache 4
Klik Next, maka akan tampil ke menu lisensi dari penggunaan Apache. Tekan Next lagi.
1
Chapter 1
Instalasi Web Server & Joomla !
Gambar 2. Persetujuan Lisensi Apache 5
Pilih lokasi penyimpanan server. Letakkan di lokal drive C:\
Gambar 3. Lokasi Penginstalan
6
2
Tekan Next pada pilihan komponen server. Pastikan semuanya dicontreng. Seperti pada gambar berikut.
Instalasi Web Server & Joomla !
Chapter 1
Gambar 4. Komponen-komponen AppServ
7
Isi server name dan email administrator. Misalnya server name adalah demo, sedangkan email administratornya adalah demo@ local.com
Gambar 5. Apache HTTP Server Information
8
Isikan password root pada konfigurasi MySQL Server. Misalnya 123456. Lalu tekan Install.
3
Chapter 1
Instalasi Web Server & Joomla !
Gambar 6. MySQL Server Configuration 9
Proses instalasi akan berjalan seperti gambar berikut.
Gambar 7. Proses Instalasi 10
4
Setelah proses instalasi selesai. Bukalah browser kemudian ketik alamat http://localhost. Maka tampilan gambar sebagai berikut.
Instalasi Web Server & Joomla !
Chapter 1
Gambar 8. Localhost
B. Menyimpan File di Local Lain Secara default semua file yang kita miliki harus disimpan di dalam folder :
C :/appserv/www
Lokasi ini bisa diubah ke tempat lain dengan cara mengedit sebuah file yang bernama httpd.conf. Praktek 1
Buka windows explorer dan buka folder appserv.
5
Chapter 1
Instalasi Web Server & Joomla !
Gambar 9. Folder conf 2
Buka lagi folder apache dan folder conf yang ada didalamnya.
3
Klik dua kali sebuah file yang bernama httpd.conf, tunggu sebentar dan pilih notepad untuk membuka file tersebut.
4
Masih di Notepad, klik Edit lalu pilih Find.
5
Isikan “documentroot”.
6
Ganti TIAP tulisan “C:/appserv/www” dengan nama folder yang Anda inginkan, misal “D:/goblog”, perhatikan HANYA bagian ini yang diubah, yang lain jangan diubah.
Gambar 10. DocumentRoot yang harus diubah 7
6
Simpan file tersebut, diikuti dengan me-refresh apache. Caranya klik Start lalu pilih Program kemudian Appserv dan Restart Apache.
Instalasi Web Server & Joomla !
Chapter 1
C. Meletakkan Joomla! pada www Sebelum kita memulai membangun situs diperlukan 3 hal yaitu: mengekstrak file-file Joomla!, membuat database untuk Joomla!, dan kemudian melakukan instalasi Joomla! Praktek 1
File harus ditempatkan pada direktori www. Buatlah folder baru dengan nama portalberita.
Gambar 11. Direktori Joomla dalam www 2
Kemudian ekstrak file Joomla Joomla_1.5.14-StableFull_Package ke dalam folder joomla yang telah dibuat.
Gambar 12. Isi folder portal berita
7
Chapter 1
Instalasi Web Server & Joomla !
D. Membuat Database Tahap selanjutnya dibutuhkan sebuah database untuk melakukan penyimpanan data. Langkah-langkahnya sebagai berikut: Praktek 1
Ketiklah pada browser alamat http://localhost/phpmyadmin untuk membuat database portal berita. Akan muncul kotak dialog otentifikasi yang mewajibkan kita untuk memasukkan nama pengguna dan sandi. Masukkan nama pengguna sesuai yang diinstal pada saat pertama kali. Misalnya:
Nama pengguna : root
Kata sandi : 123456
Maka tampilan gambar sebagai berikut.
Gambar 13. Login awal 2
Setelah berhasil otentifikasi awal, maka akan masuk ke halaman phpmyadmin seperti pada gambar berikut.
Gambar 14. PhpMyAdmin
8
Instalasi Web Server & Joomla !
3
Chapter 1
Buatlah database baru yang akan digunakan, misalnya dengan nama portalberita pada kotak isian. Lalu klik tombol Ciptakan.
Gambar 15. Database baru
E. Instalasi dan Konfigurasi Joomla! Langkah-langkah berikut untuk melakukan instalasi Joomla pada localhost. Buka browser kemudian ketik http://localhost/portalberita/ sehingga muncul halaman pertama sebelum instalasi. Praktek 1 : Language 1
Pada bagian ini kita dapat memilih berbagai macam bahasa yang akan digunakan. Contohnya, pilihlah English (United Kingdom) lalu tekan Next
Gambar 16. Language
9
Chapter 1
Instalasi Web Server & Joomla !
Praktek 2 : Pre-Installation Check
Gambar 17. Tampilan halaman pertama sebelum instalasi (Pre Installation Check)
2
Pada bagian ini installer Joomla! Ingin melihat apakah sistem Apache mampu menjalankan Joomla atau tidak. Jika pada bagian ini ada yang dituliskan No berwarna merah maka kita tidak bisa menginstall Joomla pada sistem kita seperti terlihat pada gambar berikut.
Gambar 18. Pengecekkan sistem oleh installer Joomla!
Praktek 3 : License 3
10
Pada bagian ini kita diminta untuk menyetujui lisensi yang digunakan oleh Joomla! yaitu lisensi GNU/GPL. Kita harus setujui dengan lisensi ini agar proses instalasi dapat berlanjut. Tekan Next untuk melanjutkan proses instalasi.
Instalasi Web Server & Joomla !
Chapter 1
Gambar 19. Tampilan halaman lisensi Joomla
Praktek 4 : Database 4
Pada bagian ini kita harus memasukkan parameter database yang akan digunakan untuk web Joomla!, sebelumnya kita sudah membuat sebuah database dengan nama “portalberita”.
Gambar 20. Tampilan halaman konfigurasi database
•
Isi Host Name dengan localhost.
•
Isi MySQL User Name dengan root.
•
MySQL Password diisi dengan 123456.
•
Isi MySQL Database Name dengan jom_db.
•
MySQL Table Prefix biarkan default (jos_).
11
Chapter 1
5
Instalasi Web Server & Joomla !
Kemudian tekan tombol Next untuk melanjutkan proses instalasi. Klik OK, apabila muncul konfirmasi seperti berikut ini.
Gambar 21. Tampilan dialog konfirmasi
Praktek 5 : FTP Configuration 6
Kita dapat men-skip langkah ini, tekan next saja.
Gambar 22. FTP Configuration
Praktek 6 : Configuration 7
12
Untuk halaman ini kita diminta untuk mengisi parameter dasar yang akan digunakan. Diantaranya nama situs, email administrator, dan password administrator.
Instalasi Web Server & Joomla !
Chapter 1
Gambar 23. Informasi dasar 8
Pastikan kolom Install Sample Data dalam keadaan aktif atau terpilih (default). Sample data sebagai pilihan kita akan mendapat web yang sudah diisi oleh Joomla! Sehingga memudahkan bagi kita yang masih pemula yang ingin berlatih menggunakan Joomla! tetapi tidak/belum mempersiapkan konten web yang akan dibuat.
Gambar 24. Install Sampel Data
Gambar 25. Sampel data berhasil diinstal
Praktek 7 : Finish 9
Pada halaman ini terdapat tulisan tebal berwarna merah yang mengharuskan kita untuk menghapus direktori Installation yang berada didalam direktori portalberita
13
Chapter 1
Instalasi Web Server & Joomla !
Gambar 26. Proses instalasi selesai
Gambar 27. Menghapus folder installation
10
Setelah selesai dihapus dan proses instalasi selesai, kita dapat mengecek web kita pada alamat: http://localhost/portalberita.
Gambar 28. Tampilan website Joomla!
14
Portal Berita
Chapter 2
Chapter 2 Portal Berita Portal berita saat ini selalu diminati orang untuk mendapat berita terbaru yang selalu diupdate. Bentuk templatenya sederhana namun tetap nyaman dibaca isinya. Perhatikan contoh berikut ini.
Gambar 1. Oke Berita
Pembuatan website portal berita ini sangat sederhana, hanya memasukkan komponen teks dan mengubah logo.
15
Chapter 2
Portal Berita
A. Pengaturan Content dalam Website Sebelum melangkah ke pembuatan website, terlebih dahulu kita akan mengatur content (isi/konten) website. Content digunakan untuk memudahkan dalam pembuatan menu baru dalam website. Materi yang akan Anda pelajari adalah pembuatan Section dan Category, kedua materi inilah yang menjadi penghubung bagi menu-menu dalam pembuatan website.
B. Membuat Section Baru Section manager digunakan untuk mengelola bagian-bagian. Secara default Joomla! memiliki beberapa section, selain itu section tersebut dapat ditambah, dihapus, diubah, dan lain sebagainya. Praktek 1
Masuklah pada halaman Administrator.
2
Dari menu utama, klik menu Content lalu Section Manager.
Gambar 2. Mengakses menu Section Manager
16
Portal Berita
Chapter 2
Gambar 3. Halaman utama Section Manager 3
Untuk membuat Section baru, klik ikon New yang terletak di kanan atas.
4
Akan masuk pada halaman Section: New (Section), isi data yang diperlukan misalnya pada bagian Title diisi dengan Nasional.
Gambar 4. Halaman Section baru 5
Jika sudah, klik tombol Save.
6
Jika langkah diatas berhasil, maka Anda akan kembali ke halaman Section Manager dan Anda bisa melihat datanya telah bertambah sesuai yang dimasukkan tadi.
17
Chapter 2
Portal Berita
Gambar 5. Section ‘Nasional’ 7
Seperti pada langkah diatas, buatlah Section lain seperti Internasional, Bisnis & Keuangan, Kesehatan, dan Gaya Hidup. Berikut contoh hasilnya:
Gambar 6. Section berhasil dibuat
18
Portal Berita
Chapter 2
C. Membuat Kategori Baru Category manager digunakan untuk mengelola kategori-kategori section atau dapat disebut juga dengan sub-bagian. Praktek 1
Masuklah pada halaman Administrator.
2
Kemudian klik Menu Content lalu pilih Category Manager.
Gambar 7. Mengakses Menu Category Manager 3
Klik tombol New yang terletak di sebelah kanan atas.
4
Akan masuk ke halaman Category: New (content), kemudian isilah data yang dibutuhkan. Misalnya pada bagian Title diisi dengan Nasional. Lalu Section pilih nilai Nasional.
Gambar 8. Halaman Category Baru 5
Jika data telah diisi dengan benar, klik tombol Save.
19
Chapter 2
Portal Berita
6
Jika langkah diatas berhasil, maka Anda akan kembali ke halaman Category Manager dan Anda bisa melihat datanya telah bertambah sesuai yang dimasukkan tadi.
7
Seperti pada langkah diatas, buatlah Category lain dari tiap-tiap Section seperti News & Tokoh (Internasional), Ekonomi (Bisnis & Keuangan), Kesehatan (Kesehatan), dan Gaya Hidup (Gaya Hidup). Berikut contoh hasilnya:
Gambar 9. Category berhasil dibuat
D. Mengubah Halaman Utama Halaman utama atau halaman index (Front Page) adalah halaman pertama kali yang tampil saat Anda membuka suatu website.
Praktek
20
1
Masuklah pada halaman Administrator
2
Dari menu utama, klik Content, lalu pilih Front Page Manager.
Portal Berita
Chapter 2
Gambar 10. Halaman Front Page Manager 3
Pada halaman Front Page Manager, terdapat beberapa title yang ditampilkan yaitu title Joomla! Community Portal. Judul ini nanti akan diganti dengan Selamat Datang di Oke Berita.
4
Untuk mengganti title pertama, klik pada title Joomla! Community Portal, sehingga masuk ke halaman Article : Edit.
Gambar 11. Artikel Joomla! Community Portal 5
Lalu ganti judul title “Joomla! Community Portal” dengan “Selamat Datang di Oke Berita”. Sedangkan pada bagian Alias ganti dengan “oke berita”.
6
Hapus semua tulisan pada teks editor yang berisi informasi title sebelumnya. Kemudian masukkan tulisan untuk title “Selamat Datang di Oke Berita”.
21
Chapter 2
Portal Berita
Gambar 12. Front Page Selamat Datang 7
Jika sudah selesai, klik tombol Save.
E. Menulis Artikel Portal berita ‘Oke Berita’ ini perlu diisikan dengan artikel/berita terbaru yang akan kita tampilkan. Artikel saya berasal dari artikel www. okezone.com. Praktek 1
Masuklah ke halaman Administrator.
2
Dari menu utama, klik Content lalu pilih Article Manager.
Gambar 13. Article Manager 3
22
Pada Article Manager, lalu pilih New. Maka akan tampil layar editor untuk kita menulis.
Portal Berita
Chapter 2
Gambar 14. Layar editor menulis artikel
4
Masukkan artikel yang akan dimuat. Pada kolom Title masukkan judul artikel, kemudian pilih Section sesuai jenis artikel yang dimuat. Lalu kolom Category pilih jenis kategori sesuai section.
Gambar 15. Artikel News
Pada opsi Published dan Front Page, opsi Published berfungsi apakah artikel yang kita buat akan dipublikasikan atau tidak. Sementara opsi Front Page berfungsi apakah artikel yang kita buat akan dimasukkan dalam halaman depan atau tidak. Untuk artikel ini akan diatur semuanya dalam keadaan : Published : yes Front Page : yes
23
Chapter 2
Portal Berita
F. Opsi “Read More� Berfungsi untuk membagi artikel yang panjang menjadi bagian yang muncul di depan dan sisanya adalah bagian yang akan muncul jikalau kita meng-klik judul tulisan Read-More.
Praktek 1
Buka artikel yang akan dibatasi.
Gambar 16. Artikel yang akan diedit
2
24
Pada perbatasan artikel yang akan dibatasin, klik Read More. Maka akan tampil garis berwarna merah terlihat pada gambar.
Portal Berita
Chapter 2
Gambar 17. Read More 3
Buka browser, lalu ketik http://localhost/portalberita. Maka Anda akan melihat tampilan artikel telah dibatasin oleh Read More.
Gambar 18. Tampilan Read More di Web Browser
25
Chapter 2
Portal Berita
G. Mengganti Logo ‘Oke Berita’ Jenis template yang kita pakai adalah bawaan pada saat instalasi Joomla! Template rhuk_milkyway memungkinkan kita untuk mengubah logo Joomla! dengan logo Oke Berita.
Gambar 19. Logo Joomla!
Praktek 1
Buka Window Explorer, kemudian cari lokasi penempatan template rhuk_milkyway yang terdapat di dalam folder templates.
2
Cari folder images, lalu temukan file gambar mw_joomla_logo. png.
Gambar 20. Lokasi penyimpanan file logo
26
Portal Berita
3
Chapter 2
Catat dimensi file logo untuk nanti diganti dengan logo baru.
Gambar 21. Dimensi logo 4
Buatlah logo menggunakan program desain sejenis Adobe Photoshop, lalu simpan file gambar dengan nama mw_joomla_logo. png.
Gambar 22. Logo ‘Oke Berita’ 5
Sebelumnya hapus dulu logo Joomla!. Pindahkan logo ‘Oke Berita’ ke dalam folder images template rhuk_milkyway.
Gambar 23. File logo ‘Oke Berita’
27
Chapter 2
6
Portal Berita
Jika berhasil, coba buka web browser Anda. Lihat perubahan yang terjadi.
Gambar 24. Hasil akhir
28
Rak Buku
Chapter 3
Chapter 3 Rak Buku Contoh kasus kali ini akan membuat semacam toko online yang berisikan informasi buku-buku terbaru yang dirangkum dalam kategori-kategori sesuai kebutuhan pencinta buku. Perhatikan contoh di bawah ini.
Gambar 1. Rak Buku
Pembuatan website informasi buku ini diharapkan dapat membantu Anda belajar membuat menu-menu, menggunakan modul html, dan mengganti template website. Persiapan untuk membuat website informasi buku hampir sama pada saat kita belajar membuat portal berita. Dibutuhkan Section dan Category untuk menjadi penghubung menumenu.
29
Chapter 3
Rak Buku
A. Membuat Section Baru Buatlah section berdasarkan jenis buku yang akan ditampilkan. Praktek 1
Masuklah pada halaman Administrator.
2
Dari menu utama, klik menu Content lalu pilih Section Manager.
3
Buatlah Section baru dengan title “Nonfiksi�.
Gambar 2. Halaman Section Baru 4
Jika sudah, klik tombol Save.
Gambar 3. Section-Section yang telah dibuat
30
Rak Buku
5
Chapter 3
Seperti langkah di atas, buatlah Section lain seperti Fiksi & Sastra, Buku Anak-Anak, Buku Baru, Best Seller, Tentang Kami, dan Cara Pesan.
B. Membuat Category Baru Buatlah category berdasarkan jenis section yang telah dibuat dan akan ditampilkan ke website. Praktek 1
Masuklah pada halaman Administrator.
2
Dari menu utama, klik menu Content lalu pilih Category Manager.
3
Buatlah Category baru dengan title “Nonfiksi�.
Gambar 4. Halaman Category baru 4
Jika sudah, klik tombol Save.
5
Seperti langkah di atas, buatlah Category lain seperti Fiksi & Sastra, Buku Anak-Anak, Buku Baru, Best Seller, Tentang Kami, dan Cara Pesan.
31
Chapter 3
Rak Buku
C. Membuat Halaman Informasi Buku Per Judul Pada bagian ini Anda akan belajar membuat link menu yang berisi halaman informasi buku. Artikel saya berasal dari http://www.gramedia. com. Praktek 1
Masuklah pada halaman Administrator
2
Dari menu utama, klik menu Content lalu pilih Article Manager.
3
Dari halaman utama Article Manager, klik tombol New.
4
Masukkan informasi detail bukunya.
Gambar 5. Membuat artikel baru 5
32
Supaya lebih menarik, masukkan gambar pada awal kalimat atau di sebelah kiri teks keterngan buku. Caranya klik tombol Image yang ada di bagian bawah.
Rak Buku
Chapter 3
Gambar 6. Menyisipkan gambar 6
Akan muncul kotak dialog, klik Telusuri untuk mencari gambar yang akan disisipkan. Lalu tekan Start Upload.
Gambar 7. Menggungah file gambar 7
Gambar yang berhasil diupload (diunggah) akan otomatis masuk ke dalam direktori gambar.
8
Pilih gambar yang akan disisipkan, lalu klik Insert.
33
Chapter 3
Rak Buku
Gambar 8. Gambar berhasil diunggah
9
Jika proses berhasil maka akan muncul gambar di awal kalimat.
Gambar 9. Gambar telah disisipkan
10
34
Klik tombol Save yang terletak di kanan atas halaman.
Rak Buku
Chapter 3
D. Membuat Menu Informasi Buku Setelah halaman isi yang berisi informasi-informasi buku telah selesai dibuat, langkah selanjutnya adalah membuat link menu yang mengarah pada halaman tersebut. Nantinya, link ini akan ditampilkan pada halaman utama website.
Praktek 1
Masuklah pada halaman Administrator.
2
Buatlah menu utama terlebih dahulu. Caranya, dari menu utama klik menu Menus lalu pilih Menu Manager.
3
Dari halaman Menu Manager, klik tombol New.
Gambar 10. Halaman Menu Manager 4
Akan masuk pada halaman Menu: [New], kemudian isi nama menu dan deskripsinya sesuai kebutuhan. Misalnya: •
Pada kotak unique name diisi dengan jenis buku.
•
Pada kotak Title diisi dengan jenis buku.
•
Pada kotak Description diisi dengan deskripsi menunya.
•
Pada kotak Module Title diisi dengan jenisbuku.
35
Chapter 3
Rak Buku
Gambar 11. Menu baru
5
Jika sudah, klik tombol Save.
Menu utama sudah berhasil dibuat. Selanjutnya tinggal membuat sub menu yang berisi jenis buku. Sub menu yang akan dibuat nantinya berada dibawah Jenis Buku. Praktek 1
Dari menu utama, klik menu Menus lalu pilih Jenis Buku.
Gambar 12. Halaman Jenis Buku 2
36
Akan masuk pada halaman Menu Item Manager: [jenis buku].
Rak Buku
Chapter 3
3
Untuk membuat daftar jenis bukunya, klik tombol New.
4
Akan masuk pada halaman Menu Item:[new]. Pada halaman ini Anda diminta untuk memilih Internal Link, gunanya untuk menentukan arah. Caranya, klik Articles lalu klik Section Blog Layout pada bagian Section
Gambar 13. Section Blog Layout
5
Akan masuk pada halaman pengaturan menu, isi informasi yang diperlukan. Misalnya: •
Pada bagian Title diisi dengan Nonfiksi.
•
Pada bagian Alias diisi dengan Nonfiksi.
•
Pada bagian Display In biarkan terpilih pada jenis buku.
37
Chapter 3
Rak Buku
Gambar 14. Menu Item Details 6
Pada bagian kanan, Parameter (Basic), pilih Section sesuai section yang dibuat.
Gambar 15. Parameter (Basic) 7
Jika sudah, klik tombol Save.
8
Dari langkah diatas, jika prosesnya berhasil maka Anda akan segera kembali ke halaman Menu Item Manager: [jenis buku] dan menemukan menu Nonfiksi yang baru saja dibuat.
Gambar 16. Menu-menu yang telah dibuat
38
Rak Buku
9
Chapter 3
Lakukan langkah diatas untuk memasukkan jenis buku lainnya.
E. Membuat Halaman Informasi Daftar Buku Baru Bagian ini akan menjadi latihan dalam membuat halaman informasi. Kita akan membuat halaman informasi tentang buku baru atau buku best seller. Buku baru ini adalah tempat untuk menginformasikan buku-buku baru yang baru terbit dan beredar dipasaran. Biasanya informasi akan tampil di halaman depan dan selalu di-update setiap saat. Praktek 1
Masuklah pada halaman Administrator.
2
Klik menu Content lalu pilih Article Manager.
3
Buatlah artikel baru, klik tombol New.
4
Masukkan data buku baru ke dalam editor Article. Kemudian ganti pada bagian Title menjadi Buku Baru.
Gambar 17. Artikel Buku Baru
39
Chapter 3
Rak Buku
5
Selanjutnya masukkan gambar ke masing-masing judul buku. Caranya sama dengan latihan yang sebelumnya, yaitu klik tombol Image.
6
Pilih gambar yang telah diunggah, atau klik tombol Telusuri untuk menggunggah file gambar lainnya.
7
Jika sudah, simpan dengan mengklik tombol Save.
8
Untuk melihat hasilnya, bukalah web browser dan ketikkan alamat: http://localhost/rakbuku/.
F. Membuat Menu Informasi Buku Baru Setelah halaman informasi buku baru dan buku best seller selesai dibuat, maka sekarang kita membuat menunya, sehingga informasinya dapat diakses dari halaman utama website. Praktek 1
Masuklah pada halaman Administrator.
2
Dari menu utama, klik menu Menus lalu pilih Main Menu.
Gambar 18. Halaman Main Menu
40
3
Akan masuk ke halaman Menu Item Manager: [main menu].
4
Sebelumnya, nonaktifkan terlebih dahulu semua menu yang tidak digunakan. Caranya, pilih semua nama menu dengan memberi tanda centang. Lalu klik tombol Unpublish.
Rak Buku
Chapter 3
Gambar 19. Menonaktifkan menu yang tidak digunakan 5
Untuk membuat menu baru, klik tombol New yang berada di kanan atas.
6
Akan masuk ke halaman Menu Item: [New], kemudian pilih Articles, lalu pilih Article Layout.
Gambar 20. Article Layout
41
Chapter 3
7
Rak Buku
Masukkan nama menu sesuai informasi yang akan dipanggil (ditampilkan). Pada bagian Title diisi dengan nilai Buku Baru.
Gambar 21. Article Layout 8
Pada bagian Parameters (Basic), terletak disebelah kanan halaman. Klik tombol Select.
Gambar 22. Parameters (Basic) 9
42
Akan muncul halaman baru, pilih artikel (yang sudah dibuat sebelumnya) yang akan diarahkan pada menu Buku Baru. Pilihlah artikel yang berjudul Buku Baru.
Rak Buku
Chapter 3
Gambar 23. Artikel Buku Baru 10
Jika berhasil, maka pada Parameters (Basic) telah berisi artikel buku baru.
Gambar 24. Select Article Buku Baru 11
Selanjutnya klik tombol Save.
12
Setelah disimpan, maka akan kembali ke halaman Menu Item Manager: [main menu]. Maka menu baru yaitu Buku Baru telah berhasil bertambah.
13
Lakukan langkah di atas untuk membuat menu buku Best Seller.
14
Untuk melihat hasil akhirnya, buka web browser Anda. Ketik alamat http://localhost/rakbuku.
43
Chapter 3
Rak Buku
Gambar 25. Tampilan Main Menu
G. Mengaktifkan Menu Jenis Buku Pada Website Pada latihan sebelumnya, kita telah membuat informasi jenis buku. Bagian ini kita akan belajar mengaktifkan menu yang sudah dibuat sebelumnya. Teknik ini nanti dapat Anda pakai untuk mengaktifkan semua menu yang sudah dibuat. Praktek 1
Masuklah pada halaman Administrator.
2
Dari menu utama, klik menu Extensions lalu pilih Module Manager.
Gambar 26. Module Manager
44
Rak Buku
3
Chapter 3
Akan masuk ke halaman Module Manager, carilah dan beri tanda centang pada nama menu “Jenis Buku”.
Gambar 27. Menu ‘Jenis Buku’ diaktifkan 4
Klik tombol Enable.
5
Untuk melihat hasilnya, buka web browser Anda melalui alamat http://localhost/rakbuku.
Gambar 28. Tampilan Jenis Buku
H. Membuat Informasi Cara Pemesanan Halaman info cara pemesanan ini nantinya akan tampil pada halaman utama. Sebagai informasi toko buku dan panduan cara pemesanan. Praktek 1
Masuklah pada halaman Administrator.
2
Dari menu utama, klik menu Content lalu pilih Article Manager.
45
Chapter 3
Rak Buku
3
Dari halaman Article Manager, klik tombol New.
4
Akan masuk pada halaman Article: [New], kemudian isilah datadata sesuai informasi yang ada.
Gambar 29. Artikel Informasi Cara Pemesanan
I. Membuat Pesan Menggunakan Modul HTML Pada bagian ini berguna untuk memasukkan skrip HTML apa saja untuk ditampilkan pada halaman website. Modul HTML ini digunakan untuk membuat menu pesan dengan cepat, dimana pada bagian menu pesan cepat terdapat ID YM (Yahoo Messenger) Praktek 1
Masuklah pada halaman Administrator.
2
Dari menu utama, klik menu Extensions lalu pilih Install/Uninstall.
Gambar 30. Menu Install/Uninstall
46
Rak Buku 3
Chapter 3
Dari halaman utama Extension Manager, klik tombol Telusuri. Carilah file modul html (mod_html.zip) yang dapat didownload (unduh) melalui situs http://extensions.joomla.org.
Gambar 31. Extension Manager 4
Klik Upload Package File.
5
Jika proses upload berhasil, maka akan muncul pemberitahuan Install Module Success pada halaman Extension Manager.
Gambar 32. Instalasi berhasil 6
Selanjutnya klik menu Extensions lalu pilih Module Manager.
7
Akan masuk ke halaman Module Manager. Kemudian beri tanda centang pada nama modul Html Module.
Gambar 33. Html Module 8
Klik tombol Edit.
9
Akan masuk ke halaman Module: [Edit]. Di sebelah kiri bagian De
47
Chapter 3
Rak Buku
tail ubahlah Title menjadi Pesan Online. Kemudian aktifkan Yes pada Enabled.
Gambar 34. Detail Html Module 10
Perhatikan pada bagian Module Parameters yang terletak di bagian kanan Parameters. Masukkan skrip html pada kolom HTML/Java Scripts.
<div align=”center”><strong>Mau Pesan Online?</strong></ div> <br>
<div align=”center”>Senin – Minggu</div> <br>
<div align=”center”>08127888688</div> <br>
<div align=”center”><a href=”ymsgr:sendIM?rakbuku”><i mg src=http://opi.yahoo.com/online?u=rakbuku$m=g&t=4 border=0></a></div> <br>
<div align=”center”>Customer Service Onlie</div> <br>
Gambar 35. Module Parameters
Untuk tulisan rakbuku nantinya diganti dengan ID YM Anda. 11
48
Setelah selesai, tekan tombol Save.
Rak Buku 12
Chapter 3
Untuk melihat hasilnya, buka web browser Anda melalui alamat http://localhost/rakbuku.
Gambar 36. Pesan Online
J. Mengganti Template Website Saat instalasi website joomla telah memberikan beberapa template yang dapat kita gunakan. Praktek 1
Masuk ke halaman Administrator.
2
Klik menu Extensions, lalu pilih Template Manager.
Gambar 37. Template Manager 3
Centang template bawaan pada saat instalasi (JA_Purity).
49
Chapter 3
Rak Buku
Gambar 38. Template pilihan 4
Klik Default.
5
Untuk melihat hasil perubahan, buka web browser melalui alamat http://localhost/rakbuku.
Gambar 39. Hasil akhir
50
Kotak Musik
Chapter 4
Chapter 4 Kotak Musik Musik sekarang menjadi kebutuhan kita untuk menghilangkan rasa suntuk. Apalagi kita bisa mendapatkan informasi terbaru musik lokal maupun internasional. Berikut kita akan membuat website yang berisi kumpulan informasi musik lokal maupun internasional. Lihatlah contoh berikut ini.
Gambar 1. Contoh Kotak Musik
Anda diharapkan dapat belajar membuat menu-menu, menggunakan modul html, dan mengganti template website. Persiapan untuk membuat website informasi musik dimulai dari membuat section dan category untuk menjadi penghubung menu-menu.
51
Chapter 4
Kotak Musik
A. Membuat Section Baru Buatlah section berdasarkan menu yang akan ditampilkan. Praktek 1
Masuklah pada halaman Administrator.
2
Dari menu utama, klik menu Content lalu pilih Section Manager.
Gambar 2. Section Manager 3
Buatlah Section baru dengan title â&#x20AC;&#x153;Newsâ&#x20AC;?.
Gambar 3. Halaman Section Baru
52
4
Pada pilihan Published, pilih Yes.
5
Jika sudah, klik tombol Save.
Kotak Musik
Chapter 4
Gambar 4. Section-Section yang telah dibuat 6
Seperti langkah di atas, buatlah Section lain seperti Reviews, Charts, dan About.
B. Membuat Category Baru Buatlah category berdasarkan jenis section yang telah dibuat dan akan ditampilkan ke website. Praktek 1
Masuklah pada halaman Administrator.
2
Dari menu utama, klik menu Content lalu pilih Category Manager.
Gambar 5. Category Manager 3
Buatlah Category baru dengan title â&#x20AC;&#x153;Reviewsâ&#x20AC;?.
53
Chapter 4
Kotak Musik
Gambar 6. Halaman Category baru 4
Pada pilihan Sections, pilih sesuai Section yang telah dikelompokkan.
5
Jika sudah, klik tombol Save.
6
Seperti langkah di atas, buatlah Category lain seperti News (Lokal & Internasional), Charts, About.
C. Menulis Artikel Musik Buatlah informasi musik terbaru, urutan tangga lagu, sampai review album musik terbaru. Artikel saya berasal dari http://www.kapanlagi. com. Praktek 1
Masuklah pada halaman Administrator.
2
Masuk ke menu Content lalu pilih Article Manager.
Gambar 7. Article Manager
54
Kotak Musik
3
Chapter 4
Setelah masuk ke dalam Article Manager, klik tombol New yang terletak di kanan atas untuk membuat artikel yang baru.
Gambar 8. Article Manager 4
Isi tulisan yang akan ditampilkan.
Gambar 9. Article yang dibuat 5
Jika sudah, tekan tombol Save.
55
Chapter 4
Kotak Musik
D. Menambahkan Template Terbaru Pada bagian ini Anda akan belajar menambahkan template terbaru yang didapat melalui download dari situs yang memberi template bersifat gratis. Praktek 1
Masuklah pada halaman Administrator.
2
Dari menu utama, klik Extensions lalu pilih Install/Uninstall.
Gambar 10. Menu Install/Uninstall 3
Pada menu Extension Manager, Klik Telusuri untuk meng-upload paket file template terbaru (themza_j15_14.zip). File template boleh didapat dari mengunduh dari situs www.themza.com.
Gambar 11. Upload Package File
4
56
Jika sudah, klik Upload File & Install.
Kotak Musik
5
Chapter 4
Kalau proses instalasi berhasil, maka akan muncul pesan kalau instalasi berhasil. Langkah selanjutnya, masuk ke menu Extensions lalu pilih Template Manager.
Gambar 12. Template Manager
6
Pada halaman Template Manager, pilihlah template terbaru yang telah diinstal. Kemudian klik tombol Default.
Gambar 13. Instalasi Template Terbaru
57
Chapter 4
7
Kotak Musik
Jika sudah, bisa lihat di browser Anda melalui alamat http://localhost/rakbuku.
E. Menambahkan Menu di Top Menu Pada bagian ini kita akan membuat menu yang akan menghubungkan ke halaman sesuai sectionnya. Menu-menu ini akan terletak di bagian atas (top menu). Praktek 1
Masuklah ke halaman administrator.
2
Masuk ke halaman Top Menu dengan cara Klik Menus lalu pilih Top Menu.
Gambar 14. Top Menu 3
58
Maka akan masuk ke halaman Menu Item Manager: [topmenu]..
Kotak Musik
Chapter 4
Gambar 15. Menu Item Manager 4
Untuk membuat menu baru, klik tombol New. Pada Internal Link, klik Articles kemudian pilih Article Layout.
Gambar 16. Article Layout 5
Masuk ke halaman Article Layout, masukkan pada title dengan nama News untuk membuat menu News. Pilihan Display In pada Top Menu. Dan pastikan Published dalam posisi Yes.
59
Chapter 4
Kotak Musik
Gambar 17. Halaman Aricle Layout Baru
6
Jika sudah, tekan tombol Save.
7
Lakukan langkah di atas untuk membuat menu-menu yang lain, misalnya Reviews, Charts, dan About.
8
Untuk melihat hasil melalui browser Anda melalui alamat http:// localhost/rakbuku.
Gambar 18. Top Menu Kotak Musik
60
Kotak Musik
Chapter 4
F. Menghilangkan Title (Welcome To Front page) Jika kita lihat tampilan website kita, akan ada tulisan Welcome to Frontpage pada halaman Home. Title tersebut dapat kita hilangkan atau isikan dengan title yang lain sesuai tema website kita.
Gambar 19. Tulisan Welcome To The Frontpage
Praktek 1
Masuklah ke menu administrator.
2
Klik Menus lalu pilih Main Menu.
Gambar 20. Main Menu 3
Maka anda akan masuk ke halaman Menu Item Manager: [mainmenu]. Setelah itu kliklah Home untuk masuk ke pengaturan Home.
61
Chapter 4
Kotak Musik
Gambar 21. Menu Item Manager 4
Setelah itu anda akan masuk ke Menu Item: [Edit].
Gambar 22. Front Page Blog Layout
5
62
Klik Parameter System yang terletak di sebelah kanan. Pada Page Title, gantilah tulisan “Welcome to the Frontpage” dengan “Kotak Musik Weblog”.
Kotak Musik
Chapter 4
Gambar 23. Parameters (System)
Gambar 24. Page Title setelah diedit 6
Jika sudah, klik tombol Save.
7
Lalu buka browser dan ketik alamat http://localhost/rakbuku. Tampilan akan seperti gambar berikut.
Gambar 25. Hasil akhir
63
Chapter 4
Kotak Musik
G. Testimonial Melalui Newsflash Kita bisa memanfaatkan fungsi Newsflash untuk keperluan testimonial dari pengunjung.
Gambar 26. Newsflash
Praktek 1
Masuklah pada halaman phpMyAdmin. Ketik pada browser alamat http://localhost/phpmyadmin.
2
Pertama kali akan diminta otorisasi login. Masukan nama pengguna (root) dan sandi (123456).
3
Pada halaman phpMyAdmin, pilih Database sesuai dengan database yang telah dibuat (kotakmusik).
Gambar 27. PhyMyAdmin
64
Kotak Musik
4
Masuk ke database jos_content.
5
Pilih Newsflash yang ingin diubah, klik tombol Ubah.
Chapter 4
Gambar 28. Database jos_content 6
Akan masuk ke Tabel: jos_content, editlah tulisan yang sudah ada sebelumnya. Masukkan dengan tulisan yang ingin ditampilkan.
Gambar 29. Newsflash yang telah ada
65
Chapter 4
Kotak Musik
Gambar 30. Newsflash yang telah diubah 7
Jika sudah, klik tombol Go.
Gambar 31. Menyimpan Newsflash 8
Untuk melihat hasil perubahan, buka web browser melalui alamat http://localhost/rakbuku.
Gambar 32. Newsflash baru
Cara lainnya, pengaturan Newsflash bisa melalui menu Article Manager. Praktek
66
1
Masuklah ke halaman Administrator.
2
Klik Content lalu pilih Article Manager.
Kotak Musik
Chapter 4
Gambar 33. Article Manager 3
Akan masuk ke halaman Article Manager. Carilah artikel yang berjudul Newsflash. Untuk lebih cepat, pada Filter tuliskan newsflash kemudian tekan Go.
Gambar 34. Memilih artikel dengan filter 4
Secara otomatis, artikel yang berjudul Newsflash akan segera ditemukan.
Gambar 35. Artikel Newflash
67
Chapter 4
5
Kotak Musik
Klik salah satu Newsflash yang akan diedit, maka akan masuk ke halaman Article: [edit].
Gambar 36. Artikel sebelum diedit 6
Gantilah tulisan yang lama dengan tulisan yang akan anda tampilkan.
Gambar 37. Artikel setelah diedit
68
7
Jika sudah, tekan Save.
8
Lakukan langkah diatas untuk mengganti Newsflash lainnya.
Kotak Musik
Chapter 4
H. Membuat Banner Baru & Mengupload Gambar Banner digunakan sebagai media promosi website agar pengunjung dapat mengenal lebih baik website kita. Hal pertama yang dilakukan adalah mengupload (menggunggah) gambar. Praktek 1
Masuklah pada halaman Administrator.
2
Dari menu utama, klik menu Site lalu pilih Media Manager.
Gambar 38. Media Manager 3
Pada halaman Media Manager, klik folder Banners untuk menyimpan semua file gambar banner website.
Gambar 39. Folder Banners
69
Chapter 4
4
Kotak Musik
Maka akan tampil beberapa contoh banner default pada saat instalasi.
Gambar 40. File default banner 5
Untuk mengunggah file gambar baru, klik tombol Browse pada bagian Upload File. Carilah file banner yang akan dimasukkan.
Gambar 41. Upload File 6
Jika sudah, klik tombol Start Upload.
7
Setelah proses upload/unggah selesai maka akan melihat file banner baru pada halaman Media Manager.
Gambar 42. File banner baru
70
Kotak Musik
Chapter 4
I. Membuat Banner Categories Pada bagian ini anda akan membuat kategori untuk banner. Praktek 1
Masuklah pada halaman Administrator.
2
Dari menu utama, klik Components lalu pilih Banner bagian Categories.
Gambar 43. Categories Banner 3
Akan masuk pada halaman Categories Manager : [Banner]
Gambar 44. Category Manager 4
Buatlah nama kategori baru dengan nama banner. Caranya, klik tombol New yang terletak di kanan atas.
5
Akan masuk halaman Category: [New]. Isilah dengan informasi kategori yang akan dibuat, untuk judul kategori dapat ditulis pada bagian Title.
71
Chapter 4
Kotak Musik
Gambar 45. Category baru 6
Jika sudah, klik tombol Save.
Langkah selanjutnya, kita akan membuat daftar klien yang akan dijadikan bagian untuk memasang banner. Praktek 1
Masih dalam halaman Administrator.
2
Dari menu utama, klik Component lalu pilih Banner untuk bagian Clients.
Gambar 46. Clients Banner
72
3
Akan masuk pada halaman Client Manager, lalu klik tombol New yang terletak di sebelah kanan atas.
4
Isi data dibagian details. Seperti tampak pada gambar.
Kotak Musik
Chapter 4
Gambar 47. Client Details 5
Jika sudah, tekan tombol Save.
J. Mengatur Banner Langkah berikutnya, anda akan mengatur banner yang akan ditampilkan. Praktek 1
Kembali ke menu utama, klik menu Component lalu pilih Banner pada Banners.
Gambar 48. Banners 2
Pada halaman Banner Manager, non-aktifkan terlebih dahulu banner yang telah ada. Centang ketiga banner tersebut lalu klik tombol Unpublish.
73
Chapter 4
Kotak Musik
Gambar 49. Category Manager 3
Selanjutnya klik tombol new, maka akan masuk ke halaman Banner: [New].
4
Masukkan data pada bagian Details.
Gambar 50. Banner Baru 5
74
Kemudian di bagian Banner Image Selector, pilih gambar yang telah diunggah sebelumnya (banner001.png).
Kotak Musik
Chapter 4
Gambar 51. Banner Image Selection 6
Jika sudah, klik tombol Save.
K. Menampilkan Banner ke Website Pada latihan ini, Anda akan menampilkan banner ke website. Praktek 1
Masih dalam halaman Administrator.
2
Masuk ke dalam Extensions kemudian pilih Module Manager.
Gambar 52. Module Manager 3
Pada halaman Module Manager, cari menu Banner lalu diklik.
75
Chapter 4
Kotak Musik
Gambar 53. Edit Banner 4
Akan masuk ke Module Manager: [Edit]
5
Ubahlah Title dan Positionnya sesuai pada gambar.
Gambar 54. Module Banner diedit 6
76
Pada Parameters yang terletak dibagian kanan, pastikan posisi Banner Client pada bagian Client yang telah dibuat sebelumnya. Juga Category sesuai dengan Category yang telah dibuat sebelumnya.
Kotak Musik
Chapter 4
Gambar 55. Parameter Module 7
Jika sudah, tekan tombol Save yang terletak di kanan atas.
8
Lihat di web browser melalui alamat http://localhost/rakbuku. Jika berhasil, berikut contohnya:
Gambar 56. Hasil akhir
L. Membuat Partnership (Banner Berbentuk Tulisan) Pada latihan ini, Anda dapat dengan mudah membuat banner tanpa gambar atau hanya tulisannya saja, sehingga kesannya seperti iklan baris. Praktek 1
Masuklah pada halaman Administrator.
77
Chapter 4
2
Kotak Musik
Dari menu utama, klik menu Component lalu pilih Banner pada Banner.
Gambar 57. Components Banner 3
Selanjutnya klik tombol New untuk membuat banner Text Ads baru.
4
Setelah masuk ke halaman Banner:[New], isilah dengan data yang dibutuhkan. •
Pada bagian Name diisi dengan Creative Disc
•
Pada bagian Show banner pilih Yes.
•
Pada bagian Category pilih Text Ads.
•
Pada bagian Client Name pilih dengan banner.
•
Pada bagian Custom Banner Code, isi dengan kodeberikut:
<a href=http://creativedisc.com target=”_blank”> Creative Disc </a> <br/>
Single-single terbaru pilihan CreativeDisc.com yang wajib kamu dengerin!
78
Kotak Musik
Chapter 4
Gambar 58. Informasi Banner 5
Jika sudah selesai, klik tombol Save.
6
Sebelum bisa tampil di website, non-aktifkan terlebih dahulu Text Ads yang sudah ada sebelumnya.
M. Membuat Halaman Kontak Halaman kontak umumnya digunakan untuk memudahkan pengunjung apabila ingin melakukan interaksi terhadap admin. Praktek 1
Masuklah ke halaman Administrator.
2
Buatlah kategori kontak baru dengan cara masuk ke bagian Components lalu pilih Contacts kemudian Categories.
79
Chapter 4
Kotak Musik
Gambar 59. Components Categories 3
Pada Category Manager, buatlah kategori baru dengan cara tekan New dan masukkan title dengan nama â&#x20AC;&#x153;Adminâ&#x20AC;?.
Gambar 60. Category Manager : [Contact Details]
Gambar 61. Category Baru 4
80
Selesai membuat kategori baru, selanjutnya masuk ke bagian Components lalu Contacts kemudian Contacts untuk menambahkan kontak baru.
Kotak Musik
Chapter 4
Gambar 62. Components Contacts 5
Tekan tombol New untuk membuat kontak baru. Isi dengan detail halaman kontak yang diperlukan.
Gambar 63. Contact Manager 6
Perlu diperhatikan pada halaman ini Name diisi sesuai nama orang yang akan menerima email, kemudian bagian Category dipilih Admin seperti kategori kontak yang telah dibuat sebelumnya dan pada bagian email diisi dengan email kontak.
81
Chapter 4
Kotak Musik
Gambar 64. Detail Contact
Gambar 65. Information Contact
Gambar 66. Parameters (Basic) 7
82
Buatlah menu baru yang akan ditampilkan di website. Menu baru ini berisi tentang halaman kontak untuk menghubungi Admin. Caranya masuk ke bagian Menu lalu Top Menu.
Kotak Musik
Chapter 4
Gambar 67. Top Menu 8
Pada Menu Item Manager, tekan New. Pilihlah Internal Link, kemudian Contacts dan Standard Contact Layout terlihat seperti pada gambar.
Gambar 68. Menu Item Contact Layout 9
Isikan title dengan â&#x20AC;&#x153;Contactâ&#x20AC;?. Untuk Parent Items pilih Top. Kemudian Select Content pilihlah kategori yang telah kita buat sebelumnya.
83
Chapter 4
Kotak Musik
Gambar 69. Standard Contact Layout 10
Jika sudah, tekan tombol Save.
11
Buka browser lalu ketik http://localhost/joomla. Maka tampilan halaman kontak akan seperti gambar berikut.
Gambar 70. Hasil Akhir
84
Sparklingâ&#x20AC;&#x2122;s Blog
Chapter 5
Chapter 5 Sparklingâ&#x20AC;&#x2122;s Blog Blog juga disebut diari online dimana pemilik (individu atau group) dapat mengupdate artikel, baik tulisan, gambar ataupun file multimedia lain secara rutin dimana semua entri tersusun berurutan. Berikut adalah contoh blog yang akan dibuat.
Gambar 1. Menu
Melalui pembuatan blog ini, Anda diharapkan dapat memahami penggunaan membuat menu-menu baru, me-non-aktifkan menu yang tidak digunakan, serta penggunaan modul dan plugin Joomla sebagai aksesoris blog.
85
Chapter 5
Sparklingâ&#x20AC;&#x2122;s Blog
A. Menambahkan Template Terbaru Pada bagian ini Anda akan belajar menambahkan template terbaru yang didapat melalui download dari situs yang memberi template bersifat gratis. Praktek 1
Masuklah pada halaman Administrator.
2
Dari menu utama, klik Extensions lalu pilih Install/Uninstall.
Gambar 2. Menu Install/Uninstall 3
Pada menu Extension Manager, Klik Telusuri untuk meng-upload paket file template terbaru. Pilihlah template yang akan diinstal. File template boleh didapat dari mengunduh dari situs www. themza.com.
Gambar 3. Upload Package File 4
86
Jika sudah, klik Upload File & Install.
Sparklingâ&#x20AC;&#x2122;s Blog
5
Chapter 5
Kalau proses instalasi berhasil, maka akan muncul pesan kalau instalasi berhasil. Langkah selanjutnya, masuk ke menu Extensions lalu pilih Template Manager.
Gambar 4. Template Manager 6
Pada halaman Template Manager, pilihlah template terbaru yang telah diinstal. Kemudian klik tombol Default.
Gambar 5. Instalasi Template Terbaru
87
Chapter 5
7
Sparklingâ&#x20AC;&#x2122;s Blog
Jika sudah, bisa lihat di browser Anda melalui alamat http://localhost/rakbuku.
B. Mengganti Footer Template Pada latihan ini anda akan mengganti footer template yang telah ada sebelumnya dengan tulisan footer yang anda inginkan.
Gambar 6. Footer
Praktek 1
Masuklah ke dokumen penyimpanan template yang aktif (default). Terletak di dalam web server pada folder www.
Gambar 7. Lokasi penyimpanan template 2
Carilah file bernama templates.php yang terdapat di dalam folder templates.
Gambar 8. File templates.php
88
Sparkling’s Blog
Chapter 5
3
Edit file templates.php dengan editor PHP yang Anda gunakan.
4
Maka tampilan awal kode HTML akan terlihat seperti gambar.
5
Ubahlah kode HTML:
<?php echo $mosConfig_live_site;?>, Powered by <a href=”http://joomla.org/” class=”sgfooter” target=”_blank”>Joomla!</a> and designed by SiteGround <a href=”http://www.siteground.com/” target=”_blank” class=”sgfooter”>web hosting</a>
Gambar 9. Footer sebelum diedit
Dengan tulisan Footer : Sparkling Weblog (2009) | Seluruh Isi Dilindungi dengan hak cipta.
Gambar 10. Footer setelah diedit
89
Chapter 5
Sparklingâ&#x20AC;&#x2122;s Blog
6
Simpan perubahan yang telah dilakukan.
7
Untuk melihat perubahan tampilan, buka web browser Anda melalui alamat http://localhost/blog. Maka tampilan footer akan terlihat seperti pada gambar.
Gambar 11. Hasil Akhir
C. Membuat Section Baru Persiapan untuk membuat website informasi buku hampir sama pada saat kita belajar membuat portal berita. Dibutuhkan Section dan Category untuk menjadi penghubung menu-menu. Buatlah section berdasarkan menu yang akan ditampilkan. Praktek 1
Masuklah pada halaman Administrator.
2
Dari menu utama, klik menu Content lalu pilih Section Manager.
Gambar 12. Section Manager 3
90
Buatlah Section baru dengan cara klik tombol New. Lalu ketiklah title â&#x20AC;&#x153;Blogâ&#x20AC;?.
Sparklingâ&#x20AC;&#x2122;s Blog
Chapter 5
Gambar 13. Halaman baru
Gambar 14. Detail Section 4
Pada pilihan Published, pilih Yes.
5
Jika sudah, klik tombol Save.
6
Seperti langkah di atas, buatlah Section lain
D. Membuat Category Baru Buatlah category berdasarkan jenis section yang telah dibuat dan akan ditampilkan ke website. Praktek 1
Masuklah pada halaman Administrator.
2
Dari menu utama, klik menu Content lalu pilih Category Manager.
91
Chapter 5
Sparkling’s Blog
Gambar 15. Category Manager 3
Buatlah Category baru dengan cara klik tombol New. Lalu isi title “Blog”.
Gambar 16. Halaman baru
Gambar 17. Halaman Category baru
92
4
Pada pilihan Sections, pilih sesuai Section yang telah dikelompokkan.
5
Jika sudah, klik tombol Save.
6
Seperti langkah di atas, buatlah Category lain.
Sparklingâ&#x20AC;&#x2122;s Blog
Chapter 5
E. Membuat Artikel Baru Latihan membuat postingan pertama kali! Praktek 1
Masuklah ke halaman Administrator.
2
Untuk membuat artikel baru, klik menu Content lalu pilih Article Manager.
Gambar 18. Content Article Manager
3
Pada halaman Article Manager, klik tombol New pada bagian kanan atas.
Gambar 19. Article Manager
4
Isi title dan pilih Section. Selanjutnya masukkan teks ke dalam editor. Tampak seperti gambar berikut.
93
Chapter 5
Sparklingâ&#x20AC;&#x2122;s Blog
Gambar 20. Title dan Section
Gambar 21. Artikel
5
Selain itu, juga bisa menambahkan karakter lain. Caranya klik ikon Insert Custom Character.
Gambar 22. Menyisipkan Karakter
94
Sparklingâ&#x20AC;&#x2122;s Blog
Chapter 5
Gambar 23. Custom Character
6
Jika sudah, tekan tombol Save. Maka hasil akhir akan seperti gambar.
Gambar 24. Hasil Akhir
95
Chapter 5
Sparklingâ&#x20AC;&#x2122;s Blog
F. Membuat Halaman About Buatlah satu halaman yang berisi tentang diri anda. Praktek 1
Masuklah ke halaman Administrator.
2
Buatlah artikel baru, klik menu Content lalu pilih Article Manager.
3
Klik tombol New, kemudian isi title dengan â&#x20AC;&#x153;About Sparklingâ&#x20AC;?. Pilih Section bagian Blog.
Gambar 25. Title dan Section
Gambar 26. Isi Halaman About 4
Jika sudah, tekan tombol Save.
Langkah selanjutnya, membuat menu yang nanti akan mengarah ke halaman About Sparkling. Praktek
96
1
Masih dalam halaman Administrator.
2
Klik Menus lalu pilih Top Menu.
Sparkling’s Blog
Chapter 5
Gambar 27. Top Menu 3
Pada halaman Top Menu, klik tombol New yang terletak dibagian kanan.
4
Akan masuk ke halaman Menu Item : [New]. Klik pada Internal Link lalu klik Articles dan Article Layout.
Gambar 28. Menu Item 5
Pada Article Layout, masukkan title dengan “About Sparkling”.
97
Chapter 5
Sparkling’s Blog
Gambar 29. Article Layout 6
Perhatikan pada Parameters yang terdapat di bagian kanan, klik Select pada Select Article. Akan muncul kotak dialog, pilihlah artikel “About Sparkling”.
Gambar 30. Parameters (Basic)
Gambar 31. Select Article
Gambar 32. Artikel telah dipilih
98
Sparklingâ&#x20AC;&#x2122;s Blog
7
Jika sudah, klik tombol Save.
8
Maka tampilan di web akan terlihat seperti pada gambar.
Chapter 5
Ganbar 33. Hasil akhir
G. Menambahkan Blogroll Blogroll digunakan untuk menaruh alamat-alamat blog informatif lainnya. Berikut adalah langkah-langkah menambahkan blogroll pada blog yang kita buat. Praktek 1
Masuklah ke halaman Administrator.
2
Klik Menus lalu pilih Menu Manager.
Gambar 34. Menu Manager
99
Chapter 5
3
Sparklingâ&#x20AC;&#x2122;s Blog
Masuk Menu Manager, klik tombol New untuk membuat menu baru. Isilah informasi menu seperti tampak pada gambar.
Gambar 35. Menu : [new] 4
Jika sudah, tekan tombol Save.
5
Maka menu Blogroll sudah berhasil dibuat, untuk mengakses menu Blogroll caranya klik Menus lalu pilih Blogroll.
Gambar 36. Menu Blogroll 6
100
Masuk di halaman Menu Item Manager : [Blogroll], klik tombol New.
Sparklingâ&#x20AC;&#x2122;s Blog
Chapter 5
Gambar 37. Menu Item Manager : [Blogroll]
7
Pada halaman Menu Item : [New]. Pilihlah External Link.
Gambar 38. External Link 8
Isilah title dan link. Pastikan Display in pada Blogroll.
101
Chapter 5
Sparklingâ&#x20AC;&#x2122;s Blog
Gambar 39. Halaman baru External Link 9
Jika sudah, tekan tombol Save. Maka akan kembali ke halaman Menu Manager.
Gambar 40. Kembali ke Halaman Menu Manager 10
102
Lakukan langkah di atas dengan menambahkan blogroll lainnya.
Sparklingâ&#x20AC;&#x2122;s Blog
11
Chapter 5
Selanjutnya, kita akan mengaktifkan menu Blogroll yang telah dibuat. Caranya, klik Extensions lalu pilih Module Manager.
Gambar 41. Extensions Module Manager 12
Pada halaman Module Manager, aktifkan pada pilihan Enabled.
Gambar 42. Module Blogroll 13
Hasilnya dapat dilihat melalui alamat http://localhost/blog.
Gambar 43. Blogroll
103
Chapter 5
Sparklingâ&#x20AC;&#x2122;s Blog
H. Menambahkan Jam Digital Pada latihan ini, Anda akan menambahkan jam digital sebagai aksesoris tambahan di website. Praktek 1
Masuklah ke halaman Administrator.
2
Klik menu Extensions lalu pilih Install/Uninstall.
Gambar 44. Extensions Install/Uninstall 3
Masuk halaman Extension Manager bagian Install. Klik Telusuri, carilah lokasi module jam digital (mod_MultiColorClock.zip) yang akan diinstal. Modul MultiColorClock dapat diunduh melalui situs http://extensions.joomla.org.
Gambar 45. Upload Package File 4
104
Jika sudah, tekan Upload File & Install. Kalau proses instalasi berhasil akan tampil pesan instalasi modul berhasil.
Sparklingâ&#x20AC;&#x2122;s Blog
Chapter 5
Gambar 46. Install Module Success 5
Selanjutnya, klik Extensions lalu pilih Module Manager.
Gambar 47. Extensions Module Manager 6
Edit Enabled pada tulisan Multi Color Clock.
Gambar 48. Module Multi Color Clock 7
Untuk melihat hasil, buka browser anda melalui http://localhost/ blog. Maka tampilan akan seperti gambar.
105
Chapter 5
Sparklingâ&#x20AC;&#x2122;s Blog
Gambar 49. Hasil Akhir
I. Menampilkan Quote yang Memotivasi Anda pun juga dapat memberi motivasi kepada pengunjung melalui module equotes seperti berikut ini. Praktek 1
Masuklah ke halaman Administrator.
2
Klik menu Extensions lalu pilih Install/Uninstall.
Gambar 50. Extensions Install/Uninstall
106
3
Masuk halaman Extension Manager bagian Install. Klik Telusuri, carilah lokasi module quote (mod_equote.zip) yang akan diinstal. Modul Equote dapat diunduh melalui situs http://extensions. joomla.org.
4
Jika sudah, tekan Upload File & Install. Kalau proses instalasi berhasil akan tampil pesan instalasi modul berhasil.
Sparkling’s Blog
Chapter 5
Gambar 51. Module berhasil diinstal 5
Selanjutnya, klik Extensions lalu pilih Module Manager.
Gambar 52. Extensions Module Manager 6
Edit Enabled pada tulisan eQuotes.
Gambar 53. Module eQuotes 7
Akan masuk ke Module : [Edit], gantilah Title dengan “Quote of The Day”, pastikan pilihan Enabled pada posisi Yes.
107
Chapter 5
Sparklingâ&#x20AC;&#x2122;s Blog
Gambar 54. Edit Module eQuotes 8
Pada bagian Module Parameters yang terletak di bagian kanan, pastikan pilihan Source Type pada Text File dan Default Text File pada Greate Quotes.
Gambar 55. Module Parameters
108
9
Jika sudah, tekan tombol Save.
10
Sebelum Quote dapat ditampilkan di website. Kita perlu mengatur peletakkan file teks quote yang terdapat didalam folder module quotes. Caranya, bukalah Window Explorer anda, lalu masuk ke bagian modules equotes yang terdapat dalam folder www.
Sparklingâ&#x20AC;&#x2122;s Blog
Chapter 5
Gambar 56. Lokasi penyimpanan mod_equotes 11
Klik dua kali folder mod_quotes. Pindahkan tiga file bawaan equotes(default.txt, montessori.txt, dan waldorf.txt) ke folder mod_equotes yang pertama kali.
Gambar 57. Menyalin lokasi equotes
109
Chapter 5
Sparklingâ&#x20AC;&#x2122;s Blog
Gambar 58. Memindahkan lokasi equotes
12
Untuk melihat hasil, buka browser anda melalui http://localhost/ blog. Maka tampilan akan seperti gambar.
Gambar 59. Hasil Akhir
J. Menambahkan Modul Yahoo Messenger! Pada latihan sebelumnya, kita dapat menampilkan status Yahoo Messenger menggunakan modul HTML. Kali ini anda akan belajar menggunakan modul khusus untuk Yahoo Messenger. Praktek
110
1
Masuklah ke halaman Administrator.
2
Klik menu Extensions lalu pilih Install/Uninstall.
Sparklingâ&#x20AC;&#x2122;s Blog
Chapter 5
Gambar 60. Extensions Install/Uninstall 3
Masuk halaman Extension Manager bagian Install. Klik Telusuri selanjutnya carilah lokasi module yahoo messenger (mod_ymstatus. zip) yang akan diinstal. Modul YM Status dapat diunduh melalui situs http://extensions.joomla.org.
4
Jika sudah, tekan Upload File & Install. Kalau proses instalasi berhasil akan tampil pesan instalasi modul berhasil.
Gambar 61. Module berhasil diinstal 5
Selanjutnya, klik Extensions lalu pilih Module Manager.
Gambar 62. Extensions Module Manager
111
Chapter 5
6
Sparklingâ&#x20AC;&#x2122;s Blog
Edit Enabled pada tulisan Multi Color Clock.
Gambar 63. Module Y!M Status 7
Akan masuk ke Module : [Edit], pastikan pilihan Enabled pada posisi Yes.
Gambar 64. Edit modul Y!M Status 8
112
Pada bagian Module Parameters yang terletak di bagian kanan, pastikan anda memasukkan akun ID Yahoo anda.
Sparklingâ&#x20AC;&#x2122;s Blog
Chapter 5
Gambar 65. Module Parameters 9
Jika sudah, tekan tombol Save.
10
Untuk melihat hasil, buka browser anda melalui http://localhost/ blog. Maka tampilan akan seperti gambar.
Gambar 66. Hasil Akhir
K. Memasukkan Plugin â&#x20AC;&#x153;Simple Image Galleryâ&#x20AC;? Plugin pendukung ini memudahkan kita apabila ingin membuat galeri kumpulan foto-foto. Berikut adalah langkah-langkah memasukkan plugin tersebut. Praktek 1
Masuklah ke halaman Administrator.
2
Klik menu Extensions lalu pilih Install/Uninstall.
113
Chapter 5
Sparklingâ&#x20AC;&#x2122;s Blog
Gambar 67. Extensions Install/Uninstall 3
Masuk halaman Extension Manager bagian Install. Klik Telusuri selanjutnya carilah lokasi plugin Simple Image Gallery (plugin_ jw_sig-v1.2.1r2_j1.5.zip). Plugin galeri foto dapat diunduh melalui http://code.google.com/p/joomlaworks/. Lalu tekan Upload File & Install.
Gambar 68. Upload Package File 4
114
Jika sudah, tekan Upload File & Install. Kalau proses instalasi berhasil akan tampil pesan instalasi modul berhasil.
Sparklingâ&#x20AC;&#x2122;s Blog
Chapter 5
Gambar 69. Modul berhasil diinstal 5
Setelah instalasi selesai, aktifkan plugin galeri foto ini terlebih dahulu dengan cara masuk ke menu Extensions lalu pilih Plugin Manager.
Gambar 70. Extensions Plugin Manager 6
Carilah â&#x20AC;&#x153;Simple Image Gallery Pluginâ&#x20AC;? kemudian klik untuk masuk ke dalam pengaturannya. Pada Enabled pilih Yes untuk mengaktfikan plugin galeri foto ini.
Gambar 71. Plugin Simple Image Gallery
115
Chapter 5
Sparklingâ&#x20AC;&#x2122;s Blog
Gambar 72. Plugin Simple Image Gallery 7
Setelah selesai menginstal plugin galeri foto ini, selanjutnya kita memasukkan kumpulan foto-foto ke dalam Media Manager yang akan menampung foto kita. Caranya masuk ke Site lalu pilih Media Manager.
Gambar 73. Site Media Manager 8
116
Pada halaman Media Manager, klik folder Stories.
Sparkling’s Blog
Chapter 5
Gambar 74. Folder Stories 9
Buatlah folder dengan nama “galeri” yang berada di dalam folder “stories”.
Gambar 75. Membuat folder baru 10
Pilih folder “galeri”, kemudian unggah lah file gambar-gambar yang akan dimasukkan ke dalam galeri foto. Caranya klik Telusuri, lalu cari file gambar. Terakhir klik Start Upload agar file gambar bisa tersimpan di dalam folder “galeri”.
117
Chapter 5
Sparklingâ&#x20AC;&#x2122;s Blog
Gambar 76. Folder Galeri
Gambar 77. Mengunggah file gambar
Gambar 78. Berhasil diunggah 11
118
Langkah selanjutnya, kita perlu membuat artikel baru dengan title â&#x20AC;&#x153;Art Workâ&#x20AC;?. Masuk ke Content lalu pilih Article Manager.
Sparklingâ&#x20AC;&#x2122;s Blog
Chapter 5
Gambar 79. Content Article Manager 12
Akan masuk ke halaman Article Manager, tekan tombol New yang ada di bagian atas.
Gambar 80. Menu Article Manager 13
Tulislah title dengan nama â&#x20AC;&#x153;Art Workâ&#x20AC;?, Lalu pada bagian isi artikel diisi dengan: {gallery}galeri{/gallery}. Kemudian pada Section, pilihlah Uncategorized.
Gambar 81. Isi artikel
119
Chapter 5
Sparklingâ&#x20AC;&#x2122;s Blog
14
Jika sudah, tekan Save.
15
Setelah membuat artikel tersebut, langkah selanjutnya kita membuat sebuah menu yang akan merujuk ke artikel yang kita buat tadi. Cara membuat menu sama seperti kita membuat menu lainnya. Masuk ke Menus lalu pilih Main Menu.
Gambar 82. Main Menu 16
Seperti biasa, untuk membuat menu baru kita nekan tombol New. Pada tampilan menu baru, pilih Article lalu Article Layout.
Gambar 83. Menu Item Manager
120
Sparkling’s Blog
Chapter 5
Gambar 84. Select Menu Item Type 17
Pada Menu Item Details, isilah title “Art Work”. Published pilih Yes. Lalu pada bagian Select Article, pilihlah Artikel yang sudah kita buat tadi.
Gambar 85. Article Layout
121
Chapter 5
18
Sparklingâ&#x20AC;&#x2122;s Blog
Pada bagian Select Article yang terdapat di Parameters bagian kanan. Klik Select, lalu pilihlah artikel â&#x20AC;&#x153;Art Workâ&#x20AC;? yang telah dibuat sebelumnya. Kemudian tekan Save untuk menyimpan menu baru.
Gambar 86. Parameters (Basic)
Gambar 87. Select Article
Gambar 88. Parameters telah dipilih 19
122
Buka browser, lalu ketik alamat http://localhost/joomla. Klik menu Art Work. Maka akan tampil galeri foto yang telah kita buat.
Sparklingâ&#x20AC;&#x2122;s Blog
Chapter 5
Gambar 89. Hasil Akhir 20
Klik salah satu gambar, maka tampilan akan berubah seperti gambar.
Gambar 90. Alternatif gambar
L. Menambahkan Modul â&#x20AC;&#x153;Random Imageâ&#x20AC;? Praktek 1
Masuklah ke halaman Administrator.
2
Klik menu Extensions lalu pilih Install/Uninstall.
123
Chapter 5
Sparklingâ&#x20AC;&#x2122;s Blog
Gambar 91. Extensions Install/Uninstall 3
Masuk halaman Extension Manager bagian Install. Klik Telusuri selanjutnya carilah lokasi modul Random Image (mod_random_image_plus.zip). Modul ini dapat diunduh melalui http://extensions. joomla.org. Lalu tekan Upload File & Install.
Gambar 92. Upload Package File 4
Masuk ke pengaturan modul. Caranya klik Extensions lalu pilih Module Manager.
Gambar 93. Extensions Module Manager 5
124
Pada halaman Module Manager, klik modul Random Image Plus.
Sparklingâ&#x20AC;&#x2122;s Blog
Chapter 5
Gambar 94. Module Random Image Plus 6
Maka akan masuk ke halaman Module : [Edit]. Gantilah title dengan â&#x20AC;&#x153;Photosâ&#x20AC;?. Pastikan pilihan Yes pada Enabled.
Gambar 95. Edit Module Random Image Plus 7
Pada Module Parameters yang terletak dibagian sebelah kanan, pastikan lokasi penempatan Images Folder sesuai dengan lokasi penyimpanan gambar di Media Manager.
125
Chapter 5
Sparklingâ&#x20AC;&#x2122;s Blog
Gambar 96. Module Parameters 8
Jika sudah, tekan tombol Save yang ada di bagian kanan atas.
9
Selanjutnya, masukkan gambar-gambar yang nantinya akan ditampilkan ke dalam Media Manager. Caranya klik Site lalu pilih Media Manager.
Gambar 97. Site Media Manager 10
126
Pada halaman Media Manager, klik folder Stories. Buatlah satu folder baru dengan nama Photos.
Sparklingâ&#x20AC;&#x2122;s Blog
Chapter 5
Gambar 98. Folder Stories
Gambar 99. Membuat folder Photos 11
Masuk ke folder Photos, unggah satu per satu gambar yang akan ditampilkan melalui tombol Telusuri.
Gambar 100. Folder Photos
127
Chapter 5
Sparklingâ&#x20AC;&#x2122;s Blog
Gambar 101. Berhasil diunggah 12
Jika sudah, buka web browser anda melalui http://localhost/blog untuk melihat hasilnya. Klik menu Art Work. Maka tampilan gambar sebagai berikut.
Gambar 102. Hasil akhir 13
Untuk melihat gambar dalam ukuran penuh, klik thumbnail gambar.
Gambar 103. Ukuran penuh gambar
128
Sparklingâ&#x20AC;&#x2122;s Blog
Chapter 5
M. Memasukkan Badge Status Facebook dan Twitter Buatlah badge Facebook melalui akun facebook anda. Praktek 1
Buka akun facebook anda.
2
Klik di bagian Profile.
Gambar 104. Profile Facebook 3
Lalu klik Create a New Badge yang terletak dibagian bawah profile.
Gambar 105. Create a Profile Badge 4
Atur bentuk badge yang diinginkan. Jika sudah, klik Save Badge.
129
Chapter 5
Sparklingâ&#x20AC;&#x2122;s Blog
Gambar 106. Pengaturan badge 5
Pada bagian Choose where to add the badge, pilih Other. Salin kode html tersebut.
Gambar 107. Code Badge
130
Sparklingâ&#x20AC;&#x2122;s Blog
Chapter 5
Setelah membuat badge facebook, selanjutnya akan disalin ke dalam website menggunakan module html, seperti berikut ini. Praktek 1
Masuklah ke halaman Administrator.
2
Install modul HTML, caranya klik Extensions lalu pilih Install/Uninstall.
Gambar 108. Extensions Install/Uninstall 3
Klik Telusuri kemudian cari file modul HTML (mod_html.zip), lalu klik Start Upload.
Gambar 109. Upload Package File 4
Buka Extensions lalu pilih Module Manager.
131
Chapter 5
Sparkling’s Blog
Gambar 110. Extensions Module Manager 5
Klik modul HTML untuk mengedit.
6
Pada bagian Title isi dengan “Sparkling Ada Disini”. Pastikan pilihan Yes pada Enabled.
Gambar 111. Edit Module HTML 7
Pada Module Parameters, masukkan kode HTML Facebook dan Twitter. Facebook
<!-- Facebook Badge START --><br><a href=”http:// www.facebook.com/cowok.ganteng” title=”Cowok Ganteng” target=”_TOP”><img src=”http://badge.facebook. com/badge/805029624.3337.5624267421.png” width=”120” height=”193” style=”border: 0px;” /></a><br/><!-- Facebook Badge END -->
132
Sparkling’s Blog
Chapter 5
Twitter <br>
<center>
<div id=”twitter_div”>
<h2 class=”twitter-title”>Tweet-Tweet</h2> <ul id=”twitter_update_list”></ul></div>
<script type=”text/javascript” src=”http://twitter.com/ javascripts/blogger.js”></script>
<script text=”text/javascript” src=”http://twitter.com/statuses/user_timeline/cowok.ganteng.json?callback=twitterCall back2&count=5”></script>
Gambar 112. Module Parameters 8
Jika sudah, tekan tombol Save.
9
Hasil akhir terlihat seperti gambar berikut.
133
Chapter 5
Sparklingâ&#x20AC;&#x2122;s Blog
Gambar 113. Badge Facebook
Gambar 114. Badge Twitter
N. Registrasi Shoutbox Shoutbox dapat digunakan sebagai media buku tamu bagi pengunjung. Berikut adalah langkah-langkah resgistrasi shoutbox. Praktek 1
134
Registrasi akun shoutbox melalui http://www.shoutboxes.com.
Sparklingâ&#x20AC;&#x2122;s Blog
Chapter 5
Gambar 115. Shoutbox Homepage 2
Klik Join Now! Maka akan masuk ke halaman Registration. Kemudian isilah identitas diri dan diakhiri dengan mengklik tombol Conclude The Registration.
Gambar 116. Halaman registrasi 3
Jika berhasil, maka akan diberikan Box ID.
135
Chapter 5
Sparklingâ&#x20AC;&#x2122;s Blog
Gambar 117. Proses registrasi berhasil 4
Login ke dalam akun untuk mengatur bentuk kotak shoutbox.
Gambar 118. Halaman login 5
136
Klik pada pilihan Generate Code
Sparklingâ&#x20AC;&#x2122;s Blog
Chapter 5
Gambar 119. Code Generator 6
Setelah selesai mengatur bentuk box yang diinginkan. Selanjutnya tekan tombol Generate Code.
Gambar 120. HTML-Code
137
Chapter 5
Sparklingâ&#x20AC;&#x2122;s Blog
O. Menyisipkan Shoutbox Setelah mendapat BOX ID, sekarang tinggal memasukkan ke dalam website menggunakan modul shoutbox. Praktek 1
Masuklah ke halaman Administrator.
2
Klik menu Extensions lalu pilih Install/Uninstall.
3
Klik Telusuri lalu pilih modul Shoutbox (mod_shoutbox.zip). Modul shoutbox dapat diunduh melalui situs http://extensions.joomla. org. Kemudian tekan Install & Start Upload.
4
Jika berhasil, selanjutnya klik Extensions lalu pilih Module Manager. Pilihlah modul Shoutbox untuk mengedit.
Gambar 121. Module Shoutbox 5
Isi keterangan pada details.
Gambar 122. Details Module
138
Sparklingâ&#x20AC;&#x2122;s Blog
6
Chapter 5
Pada Module Parameters, pilih Registered. Lalu masukkan Shoutboxes Box ID.
Gambar 123. Module Parameters
7
Jika sudah, tekan Save. Maka hasil akhirnya akan seperti gambar berikut.
Gambar 124. Hasil Akhir
139
Chapter 5
Sparklingâ&#x20AC;&#x2122;s Blog
P. Membuat Polling Polling biasanya digunakan untuk menanyakan pendapat pengunjung berdasarkan pertanyaan yang dibuat oleh admin. Untuk lebih jelasnya, berikut adalah langkah-langkah untuk membuat polling. PRAKTEK 1
Masuk ke bagian Components, lalu pilih Polls.
Gambar 125. Polls 2
Pada tampilan Polls Manager, pilih New untuk membuat polling terbaru.
Gambar 126. Polls Manager 3
Pada kali ini kita membuat polling tentang: Apa blog ini? Dengan pilihan: Biasa saja, Lumayan, Bagus.
Gambar 127. Polls New
140
Sparklingâ&#x20AC;&#x2122;s Blog
Chapter 5
Gambar 128. Menu Polls 4
Jika sudah selesai, klik Save.
Gambar 129. Polling berhasil dibuat 5
Langkah selanjutnya untuk menampilkan polling yang telah dibuat ke dalam website. Kita perlu menampilkan polling dalam sebuah modul. Masuk ke menu Extensions lalu pilh Module Manager.
Gambar 130. Module Manager 6
Pada Modul Manager, pilih Polls. Gantilah title dengan â&#x20AC;&#x153;Voteâ&#x20AC;?, lalu Position adalah right. Kemudian Module Parameters pilih dengan jenis polling yang telah dibuat. Maka tampilan gambar sebagai berikut.
141
Chapter 5
Sparklingâ&#x20AC;&#x2122;s Blog
Gambar 131. Menu Module Manager (pools)
Gambar 132. Module edit
Gambar 133. Menu Module Manager 7
Kemudian klik Save. Untuk melihat tampilan polling bisa login ke http://localhost/blog. Lihatlah tampilan pollingnya seperti pada gambar.
Gambar 134. Polling
142
Hosting
Chapter 6
Chapter 6 Hosting A. Membeli Domain dan Menyewa Web Hosting Agar website anda dapat berjalan secara online, maka diperlukan nama domain/subdomain serta web hosting. Berikut adalah langkah-langkah untuk membuat web hosting. PRAKTEK 1
Masuk ke salah satu penyedia web hosting, misalnya http://www. hosting.co.id.
2
Cek ketersediaan nama domain anda. Misalnya www.namakuspark.com
Gambar 1. Mengecek ketersediaan domain
3
Klik Lanjutkan, maka akan tampil halaman konfirmasi ketersediaan nama domain.
143
Chapter 6
Hosting
Gambar 2. Konfirmasi ketersediaan domain
4
Masih ada pilihan nama domain selain namakuspark.com, misalnya ekstensi .net, .co.id, dan sebagainya.
Gambar 3. List Domain Internasional
144
Hosting
Chapter 6
Gambar 4. List Domain Indonesia
5
Pembayaran pembelian domain dan penyewaan web hosting ini biasanya melalui transfer bank. Setelah kita menyelesaikan masalah administrasinya maka kita akan mendapat username dan password untuk mengakses website.
B. Mendapatkan Subdomain dalam Web Hosting Gratis Belum punya dana untuk membeli domain dan menyewa web hosting tapi ingin punya website sendiri? Banyak penyedia yang memberikan jasa domain dan web hosting gratis, tapi syaratnya disertain embelembel iklan dan pemakain domain mereka sebagai alamat web kita.
145
Chapter 6
Hosting
Saya menggunakan jasa web hosting gratis yang juga menyediakan nama subdomain gratis sehingga bagi anda yang memiliki budget terbatas untuk membeli dapat membuat website secara gratis. Praktek 1
Buka browser anda, ketikkan alamat www.000webhost.com.
2
Setelah masuk ke halaman utama, maka klik tombol Sign Up.
Gambar 5. Website www.000webhost.com
146
3
Isi nama subdomain di bagian I Will Choose Your Free Subdomain. Misalnya www.sparkling.site11.com.
4
Setelah itu, masukkan nama Anda dalam kotak teks Your Name dan alamat email anda dalam kotak teks Your Email.
5
Buatlah kata sandi yang berupa kombinasi huruf dan angka lalu ketikkan di dalam kotak teks Password dan Type Password Again.
6
Selanjutnya masukkan kode verifikasi yang anda lihat ke dalam kotak kosong, lalu klik kotak cek I Agree to Terms of Service.
7
Jika sudah, klik tombol Create My Account.
Hosting
Chapter 6
Gambar 6. Halaman Pendaftaran
8
Bila akun telah aktif, anda akan menerima informasi detail tentang akun tersebut yang perlu anda ingat atau simpan.
Gambar 7. Halaman akun
147
Chapter 6
Hosting
C. Mengekspor Database Agar data-data website yang telah dibuat dengan Joomla secara offline dapat diakses secara online, maka data-data harus dipindahkan dari local server ke online server. Praktek 1
Melalui web browser anda, masuklah ke dalam halaman phpmyadmin dengan mengakses alamat http://localhost/phpmyadmin/.
2
Setelah itu, pilih nama database Anda.
Gambar 8. Database phpMyAdmin 3
Akan masuk ke halaman database, lalu pilih opsi Export.
Gambar 9. Mengekspor database
148
Hosting 4
Chapter 6
Selanjutnya di bagian View Dump of Database pastikan seluruh data dalam keadaan terseleksi lalu pilih opsi SQL, untuk mengeksport database dlam format file .sql.
Gambar 10. Ekspor SQL
5
Beri centang pada opsi Save as File dan lanjutkan dengan menekan tombol Go.
Gambar 11. Penyimpanan SQL 6
Akan muncul box Opening, pilih opsi Save File lalu klik tombol Ok. Setelah itu, tentukan lokasi penyimpanan dan tekan tombol Ok.
149
Chapter 6
Hosting
Gambar 12. Membuka blog.sql 7
Tahap selanjutnya adalah mengkompres semua file dan folder yang terdapat dalam folder website ke dalam format .rar, .zip, atau .tar. Jika ukuran file terlalu besar, maka dapat dibagi dalam beberapa file kompres.
Gambar 13. Kompresi folder website
D. Upload File Joomla Ada dua cara yang bisa digunakan untuk mengupload file website. Pertama, bisa menggunakan fitur File Manager yang telah disediakan oleh web hosting atau bisa juga menggunakan aplikasi FTP Client.
150
Hosting
Chapter 6
Upload File melalui File Manager File Manager ini telah tersedia oleh web hosting. Praktek 1
Masuklah ke halaman Control Panel akun web hosting dengan mengakses alamat http://members.000webhost.com.
2
Ketikkan alamat email dan password masing-masing dalam kotak teks Your Email dan Password, lalu masukkan kode verifikasi yang tertera. Selanjutnya klik tombol Submit.
Gambar 14. Login akun 3
Setelah itu akan masuk ke dalam halaman akun, klik Go to CPanel.
Gambar 15. Halaman utama akun 4
Masuk halaman Control Panel, pilih File Manager.
151
Chapter 6
Hosting
Gambar 16. File Manager 5
Setelah masuk halaman File Manager, pilih folder public_html. Folder ini merupakan lokasi penyimpanan file website anda dan dapat diakses oleh publik.
Gambar 17. Folder public_html 6
Jika di dalamnya terdapat file default.php, hapus terlebih dahulu file tersebut. Caranya dengan memberi centang di depan file lalu klik tombol Delete.
Gambar 18. Hapus file default.php 7
152
Selanjutnya tekan ikon Submit.
Hosting
Chapter 6
Gambar 19. Menghapus file 8
Apabila sudah selesai, klik ikon Back untuk kembali ke dalam File Manager.
Gambar 20. File berhasil dihapus 9
Setelah itu tekanlah tombol Upload.
Gambar 21. Mengupload file 10
Pada halaman Upload Files and Archives, klik tombol Browse.
153
Chapter 6
Hosting
Gambar 22. Halaman upload file 11
Pilih file website yang berformat .rar atau format kompresi lainnya, lalu klik tombol Open.
12
Kemudian tekan ikon Submit untuk memulai proses upload. Anda perlu menunggu beberapa saat hingga proses upload berhasil dengan sempurna.
Gambar 23. Mengirim file
Upload File melalui FTP Client (FizeZilla) Alternatif lain untuk mentransfer file ke dalam web hosting adalah menggunakan software FTP Client. Saya menggunakan FileZilla sebagai software FTP Client. Software FileZilla dapat anda download secara gratis di alamat http:// www.filezilla-project.org/download.php.
154
Hosting
Chapter 6
Gambar 24. Situs Filezilla
Praktek 1
Bukalah aplikasi FileZilla.
2
Ketikan hostname FTP dari akun web hosting anda di dalam kotak teks Addreses. Lalu ketikkan username FTP dalam kotak teks User. Ketik juga password FTP dalam kotak teks Password. Isi Port dengan angka 21.
3
Selanjutnya klik tombol Quick Connect.
Gambar 25. FileZilla
155
Chapter 6
4
Hosting
Apabila berhasil terkoneksi dengan File Manager dalam web hosting anda, akan muncul status koneksi seperti tampak pada gambar.
Gambar 26. Berhasil masuk FTP Client 5
Pada bagian Remote Site, klik folder public_html.
Gambar 27. Remote Site 6
156
Sedangkan di bagian Local Site, pilihlah folder tempat penyimpanan file website yang akan di-upload.
Hosting
Chapter 6
Gambar 28. Local Site 7
Kemudian, klik kanan pada file dan pilih Upload.
Gambar 29. Mengupload File 8
Selanjutnya, proses upload akan berjalan dengan ditandai oleh progres bar yang terlihat seperti gambar.
Gambar 30. Proses pentransferan 9
Tunggu beberapa saat hingga proses selesai.
10
Setelah proses upload selesai, baik itu menggunakan File Manager dalam web hosting atau pun FileZilla, maka selanjutnya ekstraklah file tersebut langsung di dalam folder public_html. Caranya, beri tanda centang di depan file website anda dan tekan tombol Unzip.
157
Chapter 6
Hosting
E. Mengimpor Database Database yang telah ekspor selanjutnya akan diimpor ke dalam database website yang baru, seperti berikut ini. Praktek 1
Masuklah ke akun web hosting.
Gambar 31. Halaman login 2
Pada halaman utama, klik Go to CPanel.
Gambar 32. Halaman utama 3
158
Masuk halaman Control Panel, klik MySQL untuk membuat database baru.
Hosting
Chapter 6
Gambar 33. MySQL 4
Masuk halaman MySQL, ketiklah nama untuk database baru di dalam kotak teks MySQL Database Name. lalu ketikkan pula username di dalam kotak teks MySQL User Name.
5
Buatlah password baru untuk database baru yang dituliskan dalam kotak teks Password for MySQL User dan kotak teks Enter Password Again.
6
Klik tombol Create Database.
Gambar 34. Membuat database 7
Apabila database telah berhasil dibuat, maka akan diberi informasi untuk script PHP. Simpan informasi tersebut.
8
Selanjutnya, kembali ke halaman Control Panel dengan meng-klik Back to Control Panel.
159
Chapter 6
Hosting
Gambar 35. Informasi Database 9
Lalu klik phpMyAdmin dari halaman Control Panel untuk mengimport database.
Gambar 36. phpMyAdmin 10
160
Masuk halaman phpMyAdmin, klik Enter phpMyAdmin.
Hosting
Chapter 6
Gambar 37. Akses phpMyAdmin 11
Setelah masuk halaman phpMyAdmin, klik opsi Import.
Gambar 38. Database berhasil diimport 12
Pada bagian File to Import, tekan tombol Telusuri.
Gambar 39. File yang akan diimpor
161
Chapter 6 13
Hosting
Akan muncul kotak dialog File Upload. Pilihlah file database yang telah dibuat sebelumnya dalam bentuk .sql. Lalu tekan tombol Open.
Gambar 40. Lokasi file sql 14
Lalu tekan tombol Go. Maka akan muncul konfirmasi proses import berhasil dilakukan.
Gambar 41. Database berhasil diimport 15
Kembali lagi ke dalam File Manager, centanglah file configuration. php. Lalu klik Edit pada file tersebut.
Gambar 42. Configuration.php 16
Di dalam teks editor, carilah script yang mirip seperti berikut: var $host = ‘localhost’; var $user = ‘root’; var $db = ‘blog’; var $password = ‘’; var $live_site = ‘’;
162
Hosting
Chapter 6
var $log_path = ‘C:\\apache\\www\\blog\\logs’; var $tmp_path = ‘C=\\apache\\www\\blog\\tmp’;
Gambar 43. Text editor configuration.php
Adapun nama-nama dalam tanda petik adalah tergantung dari nama folder dan database yang telah anda buat dalam localhost. Gantilah script tersebut dengan informasi database anda dan lokasi folder public_html. Penjelasannya: • var $host = ‘localhost’; Diganti dengan nama host database anda dalam web hosting. Misalnya, var $host = ‘mysql13.000webhost.com’; • var $user = ‘root’; Diganti dengan nama username database anda dalam web hosting. Misalnya, var $user = ‘a1087275_blog’; • var $db = ‘blog’; Diganti dengan nama database anda dalam web hosting. Misalnya, var $db = ‘a1087275_blog’;
163
Chapter 6
Hosting
• var $password = ‘’; Diganti dengan nama password database anda dalam web hosting. • var $live_site = ‘’; Diganti dengan nama subdomain atau URL website yang akan digunakan agar publik dapat mengakses. Misalnya, var $live_site = ‘http://sparkling.site11.com’; • var $log_path = ‘C:\\apache\\www\\blog\\logs’; Diganti dengan path di mana folder logs diletakkan. Biasanya adalah home root dalam web hosting, diikuting dengan public_html. Misalnya, var $log_path = ‘/home/a1087275/public_html/logs’; • var $tmp_path = ‘C:\\apache\\www\\blog\\tmp’; Diganti dengan path di mana folder tmp/ diletakkan. Biasanya adalah home root dalam web hosting, diikuti dengan public_html. Misalnya, var $tmp_path = ‘/home/a1087275/public_html/tmp’;
164
17
Jika sudah, tekan tombol Save.
18
Kemudian keluarlah dari halaman File Manager dan Control Panel. Situs telah berhasil dibuat dan dapat diakses publik.
Bagian-Bagian Joomla!
Chapter 7
Chapter 7 Bagian - Bagian Joomla! Rangkaian proses instalasi sudah selesai. Sekarang saatnya untuk masuk ke dalam halaman control panel. Control panel sendiri merupakan menu admin untuk mengelola website. Sebelumnya, Joomla! sendiri memiliki dua bagian utama yaitu front end dan back end. Front end merupakan halaman depan situs kita. Sedangkan back end merupakan halaman administratif yang hanya bisa dimasuki oleh orang-orang tertentu saja. Berikut ini adalah langkah-langkah untuk membuat front end dan back end tersebut.
A. Mengenal Back End Praktek 1
Buka browser Anda.
2
Ketikan http://localhost/joomla/administrator lalu tekan enter.
3
Maka akan masuk ke halaman Joomla! Administrator Login. Masukkan user dan passwordnya. Terlihat seperti pada gambar berikut.
165
Chapter 7
Bagian-Bagian Joomla!
Gambar 1. Halaman utama untuk login administrator
Masukkan :
4
Username
: admin
Password
: 123456
Jika berhasil dalam proses login Administrator, maka akan masuk ke halaman utama control panel.
Gambar 2. Halaman utama Administrator setelah login
166
Bagian-Bagian Joomla!
Chapter 7
Berikut penjelasan gambar yang terlihat sesuai dengan nomor pada gambar di atas: 1
Menu Bar (batang menu), yang berisi kumpulan menu administrasi Joomla yang masing-masing memiliki beberapa sub menu
2
Control Panel, yang berisi ikon-ikon menu yang sering digunakan pada proses administrasi Joomla dan ikon ini bisa dikatakan jalan cepat (shortcut) untuk menuju menu tersebut. Menu-menu di sini dapat sobat temukan juga pada Menu Bar.
3
Preview untuk melihat tampilan front end website sobat, jumlah email masuk (gambar amplop surat), user online atau keterangan jumlah admin, serta fasilitas log out dari halaman admin.
4
Berisikan informasi mengenai CMS Joomla, user terdaftar yang sedang login, artikel dengan frekuensi akses paling banyak, artikel terbaru yang dimasukkan di website, dan jumlah menu yang ada pada website serta feed berita dari Joomla security Center.
Setelah berhasil login memasuki halaman control panel. Maka pada halaman pertama akan melihat kumpulan ikon-ikon yang bisa membantu pengaturan dalam pembuatan website.
Ikon
Keterangan
Ikon ini digunakan untuk membuat artikel.
Ikon ini digunakan untuk mengatur seluruh artikel yang ada baik menghapus dan menambah artikel atau memindahkannya sebagai arsip.
167
Chapter 7
Bagian-Bagian Joomla!
Ikon ini digunakan untuk mengatur item-item konten yang ditampilkan ada halaman depan (home) pada Joomla!
Ikon ini digunakan untuk mengelola section, juga bisa untuk menambah, mengedit, dan menghapus dan lain-lain.
Ikon ini digunakan untuk mengatur kategori yang ada dan juga bisa menambah atau mengedit kategori dengan memilih section.
Ikon ini digunakan untuk mengelola semua gambar yang ada dan juga bisa untuk menambah, mengedit, dan menghapus gambar.
Ikon ini digunakan untuk mengelola menu yang ada pada halaman Joomla! dan juga bisa menambah, menghapus, dan mengedit menu yang ada. Ikon ini digunakan untuk mengelola bahasa yang akan digunakan, misalnya: bahasa Inggris, Indonesia, atau bahasa lainnya. Syaratnya database harus terinstall komponen bahasanya.
168
Bagian-Bagian Joomla!
Chapter 7
Ikon ini digunakan untuk mengelola user yang menggunakan menu yang ada pada website Joomla! dan juga bisa menambah dan mengedit user yang ada. Ikon ini digunakan untuk pengaturan secara global. Di dalam bagian ini bisa mengatur seperti Site, Locale, Content, Database, Server, Metadata, Mail, Cache, Statistis, dan SEO. Tabel 1. Daftar Ikon dan keterangan pada halaman utama Admin
Pada halaman control panel juga terdapat ikon standar yang akan sering kita jumpai jika masuk ke dalam halaman pengaturan. Ikon ini digunakan untuk menampilkan item ke halaman Front Page (halaman utama atau index) situs, dimana telah ditandai sebelumnya.
Ikon ini digunakan untuk membatalkan item yang telah muncul di halaman frontpage/utama yang telah ditandai sebelumnya.
Ikon ini digunakan untuk mengkopi item yang telah ditandai sebelumnya.
169
Chapter 7
Bagian-Bagian Joomla!
Ikon ini digunakan untuk menghapus objek yang telah ditandai. Data yang telah terhapus akan terkumpul pada halaman Trash Manager.
Ikon ini digunakan untuk mengedit atau memodifikasikan item yang sebelumnya telah ditandai sebelumnya.
Ikon ini digunakan untuk membuat item baru baik berupa artikel, menu, dan sebagainya.
Ikon ini digunakan untuk menampilkan halaman baru yang terhubung secara online pada alamat URL: http://help.joomla.org, sehingga situs ini dapat memberikan bantuan. Ikon ini digunakan untuk melihat hasil sementara dari apa yang kita kerjakan, sehingga kita tidak harus keluar dari menus Administrator.
Ikon ini digunakan untuk menyimpan segala yang kita kerjakan pada database baik memasukkan atau mengedit konten-konten yang ada.
170
Bagian-Bagian Joomla!
Chapter 7
Ikon ini digunakan untuk menyetujui apa yang telah kita lakukan dengan tidak meninggalkan halaman yang sedang dijalankan.
Ikon ini digunakan untuk membatalkan apa yang telah kita lakukan.
Ikon ini digunakan untuk mengunggah file yang akan dimasukkan dalam website.
Ikon ini digunakan untuk mengarsip artikel, dimana artikel yang telah diarsip akan muncul pada halaman archive di website.
Ikon ini digunakan untuk mengubah file yang telah di arsip ke file biasa dan bisa dilihat pada halaman depan lagi.
Ikon ini digunakan untuk mengubah file yang telah di arsip ke file biasa dan bisa dilihat pada halaman depan lagi.
171
Chapter 7
Bagian-Bagian Joomla!
Ikon ini digunakan untuk membatalkan item yang telah muncul dihalaman frontpage/utama yang telah ditandai sebelumnya.
Ikon ini digunakan untuk membantu mengatur konten-konten yang telah diinstal sebelumnya secara global.
Tabel 2. Daftar ikon dan keterangan pada halaman proses
172
Bagian-Bagian Joomla!
Chapter 7
B. Mengenal Front End
Gambar 3. Halaman front end
Di bawah ini adalah penjelasan dari gambar halaman front end sesuai dengan nomor urutannya: 1
Header, tempat meletakkan logo, gambar, animasi, dan sebagainya. Umumnya dipakai sebagai identitas suatu website.
173
Chapter 7
174
Bagian-Bagian Joomla!
2
Newsflash, digunakan untuk menampilkan sejumlah artikel atau berita singkat yang ditampilkan bergantian secara acak (random).
3
Top Menu, menampilkan menu secara horizontal yang ditempatkan di bagian atas halaman website.
4
Breadcrumb, menampilkan lokasi halaman yang sedang dilihat berikut jalur yang telah dilalui.
5
Search, digunakan untuk menjalankan fungsi search pada website dalam rangka mencari kata atau kalimat yang sobat cari pada website joomla tersebut.
6
Main Menu, yakni berisi kumpulan menu utama sebuah website.
7
Resources, berisi menu-menu lain atau link-link sebagai sumber website CMS Joomla.
8
Key Concept, hampir sama dengan Resources.
9
Login Form, digunakan bagi user untuk mendaftar menjadi member maupun login ke website.
10
Latest News, menampilkan artikel-artikel terbaru dari website.
11
Popular, menampilkan artikel-artikel dengan frekuensi akses paling banyak.
12
Content, menampilkan konten-konten atau artikel-artikel dari website.
13
Polls, polling atau jejak pendapat bagi pengunjung website.
14
Whoâ&#x20AC;&#x2122;s Online, menampilkan jumlah pengunjung (visitor) yang sedang online.
15
Advertisement, menampilkan link bagi pemasang iklan di website sobat.
16
Banner, menampilkan banner iklan beserta linknya.
17
Footer, menampilkan keterangan dari website, perusahaan, pembuat, dan sebagainya yang terletak di bagian bawah website.
18
RSS/Syndicate (Feed Entries), layanan untuk menampilkan artikel secara ter-update pada website lain.
19
Pembuat mesin dan template website dan Validator XHTML dan CSS.