Laptop

2 Vol

SSE ER RIIA AL LE EB BO OO OK K JJO OO OM ML LA A

Panduan Website Dinamis

Membuat Website Joomla 2.5 di PC/Laptop

SERIAL EBOOK JOOMLA. PANDUAN WEBSITE DINAMIS.

Membuat Website Joomla 2.5 di PC/Laptop

author

LUCKY PERMANA

published by EbookJoomla2012

page

www.Facebook.com/Tutor.Joomla

email

[email protected]

diperkenankan menyebarluaskan serial EbookJoomla ini tanpa ijin dari penerbit/penulis. diperkenankan mengutip sebagian atau seluruh isi serial EbookJoomla ini dengan menyebutkan sumbernya.

Daftar isi Daftar isi ..................................................................................... i Tentang penulis ..........................................................................ii Rencanakan dulu website Anda ................................................ 1 Memahami lebih jauh skema perencanaan website ................. 3 Halaman Publik ............................................................................... 3 Halaman User ................................................................................. 4

Menambahkan kategori artikel .................................................. 7 Menambahkan artikel .............................................................. 11 Menambahkan kategori Direktori Website .............................. 15 Membuat Direktori Website ..................................................... 17 Menambahkan Contact ........................................................... 21 Menambahkan kategori Contact ................................................... 21 Menambahkan data Contact ......................................................... 22

Membuat Menu User ............................................................... 25 Menambahkan item-menu pada Menu Utama & Menu User .. 27 Item-menu pada Menu Utama ...................................................... 27 Item-menu pada Menu User ......................................................... 32

Pengaturan module website Joomla ....................................... 35 Mengubah nama module main menu ............................................ 36 Mengubah urutan (ordering) module ............................................. 36 Mengatur login/logout redirection page ......................................... 37

Preview website Joomla dan beberapa tips ............................ 39 Mendaftarkan user ........................................................................ 40 Mengubah level user ..................................................................... 42 Mengubah Header default website Joomla ................................... 44

Bacaan Joomla........................................................................ 51

Tentang penulis Lahir di Kudus pada 1 September 1971, Lucky Permana menjalani pendidikan dasarnya di beberapa kota di Papua (Irian Jaya waktu itu) yaitu Manokwari, Sentani, Serui, dan Jayapura sebelum akhirnya menyelesaikan pendidikan menengahnya di Jakarta. Pendidikan lanjutnya di Akademi Ilmu Statistik (AIS) yang diselesaikan pada 1994, dan Sekolah Tinggi Ilmu Statistik (STIS) jurusan Komputasi Statistik yang diselesaikan pada 1999, menghantarkannya bekerja di Badan Pusat Statistik (BPS) tepatnya di Provinsi Jawa Timur hingga saat ini. Berbagai pengalaman praktis dalam bidang Komputer dan Internet, mendorong Lucky Permana menuliskannya di www.Cangkruk.com. Lucky juga menuangkan pengetahuan dan pengalaman praktisnya itu dalam bentuk buku dan artikel di media komputer. Buku berjudul “Mengelola Website Joomla 1.7 dengan 70 Ekstensi Terpopuler” adalah bukunya yang keempat, setelah sebelumnya terbit buku pertama berjudul “Panduan Lengkap Website Dinamis Joomla!” disusul buku kedua berjudul “20 Harta Karun Google. kemudahan dan keunggulannya begitu menggoda”, dan buku ketiga berjudul “Membuat Website Profesional dengan BlogSpot”. Sedangkan artikel komputer yang pernah ditulisnya dan dimuat di Majalah Mikrodata media penggemar komputer adalah “Membuat Komponen Hotspot” dan “Membuat Image Map”. Pembaca yang ingin berkorespondensi dengan penulis, dapat melakukannya dengan mengirim email ke [email protected] atau melalui contact form di www.cangkruk.com. Sedangkan untuk saling bertukar informasi seputar Joomla, silahkan bergabung di halaman www.facebook.com/tutor.joomla.

Peringatan dan pernyataan Tulisan ini dimaksudkan untuk membantu siapapun dalam membangun website dinamis menggunakan Joomla di PC/Laptop berdasarkan pengalaman penulis, dengan tanpa kendala dan kerusakan apapun yang muncul sebagai akibat. Meskipun demikian, tidak ada pernyataan atau jaminan apapun akan diperoleh hasil yang sama dengan mengikuti tulisan ini. Dengan kata lain, penulis tidak bertanggungjawab kepada apapun atau siapapun apabila tidak memenuhi kebutuhan, atau terdapat ketidaksesuaian hasil atau ketidakberhasilan atau kerusakan atau hal lainnya yang mungkin muncul sebagai akibat dari mengikuti tulisan ini.

S E R I A L E B O O K J O O M L A M E M B U A T W E B S I T E J O O M L A

2 . 5

D I

P C / L A P T O P

1 Notes

Rencanakan dulu website Anda Sebelum mulai membuat apalagi mengelola website Joomla, perlu direncanakan terlebih dahulu website seperti apa yang akan dibangun.

P

embaca serial ebookjoomla berjudul "Menggunakan Joomla 2.5 di PC/Laptop", pastinya sudah mengerti apa saja yang diperlukan dan bagaimana cara meng-install Joomla di PC/Laptop. Pembaca juga sudah mengenal backend Joomla, bagaimana mengaksesnya, dan mengenal fitur apa saja yang tersedia untuk mulai membuat dan mengelola website. Meskipun demikian, sebelum mulai membuat apalagi mengelola website Joomla, perlu direncanakan terlebih dahulu website seperti apa yang akan dibangun. Mari kita mulai merencanakan dengan menjawab beberapa pertanyaan ini: WHAT: Website seperti apa yang ingin dibangun? apakah personal profile? atau company profile? atau bisnis? atau komunitas? atau social network? atau lainnya? misal jawabannya adalah: “Melalui website, Saya ingin orang mengenal Saya sebagai penulis buku teknologi informasi, dan mengetahui karya-karya Saya. Saya juga ingin berbagi pengetahuan dan pengalaman dengan menuliskannya dalam bentuk artikel. Sayapun ingin memberi kesempatan kepada mereka yang ingin berbagi pengetahuan dan pengalaman dengan menuliskannya di website yang Saya bangun”. WHO: Siapa yang diharapkan menjadi target pengunjungnya? misal jawabannya adalah: “Semua peminat teknologi informasi, baik pembaca ataupun mereka yang ingin berperan serta menulis artikel teknologi informasi di website Saya”. HOW: Bagaimana informasi ditampilkan? misal jawabannya adalah: “Saya ingin menampilkan informasi profil Saya, biodata/CV, karya-karya, direktori website yang dikirim oleh para user, dan menyediakan Form Contact untuk mengirim email ke Saya. Saya juga ingin 1


2 . 5

D I

P C / L A P T O P

menampilkan artikel tulisan. Saya ingin menyediakan Form Login dan halaman khusus pengguna yang diberi hak untuk mengirim artikel dan mengirim informasi link ke website lainnya yang bermanfaat. Satu lagi, Saya ingin mengelola website Saya secara dinamis dengan menggunakan teknologi Content Management System (CMS)”. Berdasarkan jawaban dari tiga pertanyaan di atas pembaca sudah dapat membuat skema perencanaan website, kira-kira seperti berikut: Halaman Publik 

Menu Utama Profil Saya Biodata/CV Karya Saya Artikel Komputer Direktori Website Contact



Form Login

Halaman User 

Menu User Profil User Kirim Artikel Kirim Weblink

Langkah perencanaan di atas hanyalah satu cara untuk menyusun rencana website yang akan dibangun. Apabila pembaca memiliki langkah sendiri dalam merencanakan website, silahkan saja diterapkan... yang perlu digarisbawahi disini adalah, RENCANAKAN DULU WEBSITE ANDA sebelum mulai membangunnya.

2


2 . 5

D I

P C / L A P T O P

2 Notes

Memahami lebih jauh skema perencanaan website ada baiknya memahami terlebih dahulu 'halaman web' seperti apa yang akan disiapkan dan ditampilkan menggunakan Joomla.

P

embaca telah membuat skema perencanaan website, dan tentunya berpikir bahwa sekaranglah saatnya untuk mempersiapkan dan menampilkan halaman web. Pemikiran itu ada benarnya, tetapi sebelum mulai, ada baiknya memahami terlebih dahulu 'halaman web' seperti apa yang akan disiapkan dan ditampilkan menggunakan Joomla. Mari perhatikan kembali skema perencanaan website pada Notes-1. Skema tersebut terdiri dari dua macam halaman web yaitu Halaman Publik dan Halaman User. Halaman Publik merupakan jenis halaman web yang disiapkan untuk dapat diakses oleh siapapun pengunjung website, sedangkan Halaman User merupakan jenis halaman web yang hanya dapat diakses oleh pengunjung yang telah terdaftar sebagai user.

Halaman Publik Secara umum, jenis Halaman Publik ini terdiri dari dua macam fitur yaitu fiturfitur di dalam Menu Utama, dan Form Login. Fitur-fitur di dalam Menu Utama disiapkan untuk menampilkan halaman web berupa informasi berjenis artikel (Profil Saya, Biodata/CV, Karya Saya, dan Artikel Komputer), Direktori Website untuk menampilkan informasi link website yang dikirim oleh user, serta Form Contact untuk mengirim email. Fitur Form Login disiapkan bagi pengunjung untuk masuk ke dalam Halaman User. Lebih jauh lagi, Pembaca perhatikan, informasi berjenis artikel dapat dikelompokkan ke dalam dua kategori yaitu kategori [About Me] untuk tulisantulisan mengenai informasi pribadi (Profil Saya, Biodata/CV, Karya Saya) dan kategori [Artikel Komputer] untuk tulisan-tulisan mengenai komputer.

3


2 . 5

D I

P C / L A P T O P

Lebih jelasnya, skema HALAMAN PUBLIK yang akan pembaca siapkan nantinya adalah seperti berikut ini: {Main Menu} 

Menu Utama {menu untuk menampilkan fitur-fitur utama di halaman publik} { kategori [About Me] } Profil Saya {item-menu untuk menampilkan artikel mengenai profil pemilik web} Biodata/CV {item-menu untuk menampilkan artikel mengenai biodata/cv pemilik web} Karya Saya {item-menu untuk menampilkan artikel mengenai hasil karya pemilik web} { kategori [Artikel Komputer] } Artikel Komputer {item-menu untuk menampilkan artikel komputer dari pemilik web dan user} {Weblink} Direktori Website {item-menu untuk menampilkan direktori website yang dikirim oleh user} {Contact Form} Contact {item-menu untuk menampilkan form mengirim email}

{Login Form} 

Form Login {form untuk masuk ke Halaman User}

Halaman User Halaman User disiapkan untuk pengunjung yang telah terdaftar sebagai user di website Joomla. Fitur-fitur di halaman ini tersedia pada Menu User, sesuai skema perencanaan website, yaitu Profil User, Kirim Artikel, dan Kirim Weblink. Fitur Profil User untuk menampilkan dan mengubah informasi user. Fitur Kirim Artikel untuk menulis dan mengirimkan artikel. Fitur Kirim Weblink untuk mengirim informasi berupa link ke website tertentu. Lebih jelasnya, skema HALAMAN USER yang akan pembaca siapkan nantinya adalah seperti berikut ini: 4


2 . 5

D I

P C / L A P T O P

{User Menu} 

Menu User {menu untuk menampilkan fitur-fitur utama di halaman user} {user profile} Profil User {item-menu untuk menampilkan dan mengubah informasi profil user} {create article} Kirim Artikel {item-menu untuk menulis dan mengirim artikel} {submit a weblink} Kirim Weblink {item-menu untuk menulis dan mengirim link ke website tertentu}

Pembaca perhatikan skema perencanaan website di atas, penjelasan bertanda kurung kurawal adalah yang nantinya akan disiapkan sesuai jenis fitur yang tersedia pada backend Joomla.

5


2 . 5

6

D I

P C / L A P T O P


2 . 5

D I

P C / L A P T O P

3 Notes

Menambahkan kategori artikel Kedua jenis kategori tersebut dapat pembaca tambahkan dengan memanfaatkan fitur [Category Manager] yang tersedia pada menu [Content] di backend Joomla.

S

kema perencanaan website sudah pembaca buat, sekarang saatnya mulai membangun website menggunakan Joomla. Secara berurut mulai dari Notes 3 ini sampai dengan Notes 11 ke depan, penulis akan berupaya menjelaskan cara membangun website sesuai dengan skema perencanaan website yang telah dibuat sebelumnya. Adapun topik pembahasan pada notes tersebut adalah seperti berikut ini: Notes-3. Menambahkan kategori artikel Notes-4. Menambahkan artikel Notes-5. Menambahkan kategori Direktori Website Notes-6. Menambahkan Direktori Website Notes-7. Menambahkan Contact Notes-8. Membuat Menu User Notes-9. Menambahkan item-menu pada Menu Utama dan Menu User Notes-10. Pengaturan module website Joomla Notes-11. Preview website Joomla Pada skema perencanaan website di Notes 1 dan Notes 2, pembaca mengelompokkan artikel di website Joomla ke dalam dua jenis kategori yaitu [About Me] yang disiapkan untuk tulisan-tulisan mengenai informasi pribadi (Profil Saya, Biodata/CV, Karya Saya) dan [Artikel Komputer] yang disiapkan untuk tulisan-tulisan mengenai komputer/teknologi informasi. Kedua jenis kategori tersebut dapat pembaca siapkan dengan memanfaatkan fitur [Category Manager] yang tersedia pada menu [Content] di dalam halaman backend Joomla. Adapun langkah-langkahnya adalah seperti penjelasan berikut: 1. Login ke dalam backend Joomla (halaman Administrator), 7


2 . 5

D I

P C / L A P T O P

2. Klik menu [Content|Category Manager|Add New Category], atau klik menu [Content|Category Manager] dan lanjutkan klik New,

3. Pada halaman Category Manager: Add A New Articles Category, isikan nama kategori pada Title (yaitu: About Me) dan klik Save & Close untuk mengakhiri.

4. Lakukan langkah yang sama untuk menambahkan kategori artikel lainnya (yaitu: Artikel Komputer). Kategori-kategori yang Pembaca tambahkan di atas, akan tampil di halaman Category Manager: Articles seperti pada gambar di bawah ini.

8


2 . 5

9

D I

P C / L A P T O P


2 . 5

10

D I

P C / L A P T O P


2 . 5

D I

P C / L A P T O P

4 Notes

Menambahkan artikel artikel/tulisan pada kedua jenis kategori tersebut dapat Pembaca siapkan dengan memanfaatkan fitur [Article Manager] yang tersedia pada menu [Content]

P

embaca sudah membuat dua macam kategori artikel yaitu [About Me] dan [Artikel Komputer]. Sebagaimana skema perencanaan website yang telah disiapkan sebelumnya, tulisan/artikel mengenai informasi pribadi (Profil Saya, Biodata/CV, Karya Saya) akan disimpan pada kategori [About Me], sedangkan artikel/tulisan mengenai komputer/teknologi informasi yang dikirim oleh Pembaca dan/atau User yang diberi hak akan disimpan pada kategori [Artikel Komputer]. Sebagai Administrator, artikel/tulisan pada kedua jenis kategori tersebut dapat Pembaca siapkan dengan memanfaatkan fitur [Article Manager] yang tersedia pada menu [Content] di dalam halaman backend Joomla. Adapun langkahlangkahnya adalah seperti penjelasan berikut: 1. Login ke dalam backend Joomla (halaman Administrator), 2. Klik menu [Content|Article Manager|Add New Article], atau klik menu [Content|Article Manager] dan lanjutkan klik New,

11


2 . 5

D I

P C / L A P T O P

3. Pada halaman Article Manager: Add New Article, isikan judul artikel pada Title (misal: Profil Saya). Kemudian pada Category, pilih kategori artikel yang sesuai (pada contoh ini artikel Profil Saya masuk kategori [About Me]). 4. Selanjutnya pada Article Text, ketikkan isi artikel. Pembaca dapat juga menentukan format tulisan pada artikel sesuai fitur yang tersedia, diantaranya yaitu menebalkan huruf (Bold), memberi efek miring pada huruf (Italic), menggarisbawahi huruf/kata/kalimat (Underline), menengahkan tulisan (Center), dan lain sebagainya. 5. Akhiri dengan meng-klik Save & Close untuk menyimpan tulisan yang baru saja dibuat.

6. Lakukan langkah yang sama untuk menambahkan artikel-artikel lainnya, baik pada kategori [About Me] ataupun kategori [Artikel Komputer]. Artikel apa saja yang telah Pembaca tambahkan, akan terlihat di halaman Article Manager: Articles seperti pada gambar di bawah ini.

12


2 . 5

D I

P C / L A P T O P

Menambahkan artikel mengikuti langkah-langkah di atas hanya dapat dilakukan di halaman backend Joomla, oleh Anda sebagai Administrator website Joomla. Sedangkan User yang diberi hak untuk menulis artikel, dapat mengirimkannya melalui menu User yang akan Anda siapkan mengikuti penjelasan di Notes-8 dan Notes-9.

13


2 . 5

14

D I

P C / L A P T O P


2 . 5

D I

P C / L A P T O P

5 Notes

Menambahkan kategori Direktori Website Pembaca dapat menambahkan kategori Direktori Website dengan memanfaatkan fitur [Weblinks] yang tersedia pada menu [Components]

D

irektori Website merupakan salah satu item-menu pada Menu Utama. Sebelum mulai membuat item-menu Direktori Website tersebut, Pembaca perlu mempersiapkan terlebih dahulu website apa saja yang ingin ditampilkan pada Direktori Website.

Pada contoh di EbookJoomla ini, Direktori Website yang disiapkan tersebut akan dikelompokkan ke dalam beberapa kategori yang dibedakan menurut jenisnya yaitu: kategori [Pemrograman], [Pengembangan Web], dan [Tips & Tricks]. Pembaca dapat menambahkan kategori Direktori Website dengan memanfaatkan fitur [Weblinks] yang tersedia pada menu [Components] di dalam halaman backend Joomla. Adapun langkah-langkahnya adalah seperti berikut ini: 1. Login ke dalam backend Joomla (halaman Administrator), 2. Klik menu [Components|Weblinks|Categories] dan lanjutkan klik New,

15


2 . 5

D I

P C / L A P T O P

3. Isikan nama kategori Direktori Website pada Title, lalu akhiri dengan klik Save & Close.

4. Lakukan langkah yang sama untuk menambahkan kategori Direktori Website lainnya. Kategori-kategori Direktori Website yang telah Pembaca tambahkan, akan terlihat di halaman Category Manager: Weblinks seperti pada gambar di bawah ini.

16


2 . 5

D I

6 Notes

P C / L A P T O P

Membuat Direktori Website Direktori Website yang dimaksud disini merupakan suatu link ke alamat URL website tertentu yang menyajikan informasi terkait teknologi informasi.

D

irektori Website yang dimaksud disini merupakan kumpulan link ke alamat URL dari website yang menyajikan informasi terkait teknologi informasi.

Pembaca akan menambahkan link website sesuai kategori Direktori Website yang telah dibuat sebelumnya yaitu [Pemrograman], [Pengembangan Web], dan [Tips & Tricks]. Sebagai contoh, link website yang akan ditambahkan adalah seperti tersebut di bawah ini: 



[Pemrograman] -

PHP Scripting Language. http://php.net/manual/en/index.php

-

Visual Basic Development us/vstudio/hh388568

http://msdn.microsoft.com/en-

[Pengembangan Web] -



Skills.

Webmaster Resource Center. http://www.ilmuwebsite.com/

[Tips & Tricks] -

Tips dan Trik Komputer. http://www.tipstrikkomputer.com/

-

Tips n Trick. http://www.tipsntrick.net/

Sebagai Administrator Joomla, Pembaca dapat menambahkan link website tersebut di atas dengan memanfaatkan fitur [Weblinks] yang tersedia pada menu [Components] di dalam halaman backend Joomla. Caranya adalah seperti berikut ini: 1. Login ke dalam backend Joomla (halaman Administrator), 2. Klik menu [Components|Weblinks|Links] dan lanjutkan dengan klik New, 17


2 . 5

D I

P C / L A P T O P

3. Kemudian pada halaman Web Links Manager: Web Link, isikan judul Website pada Title, isikan URL website pada URL, pilih kategori yang sesuai pada Category, dan akhiri dengan klik Save & Close.

4. Lakukan langkah yang sama untuk menambahkan link Website lainnya. Langkah-langkah membuat Direktori Website seperti dijelaskan di atas hanya dapat dilakukan di halaman backend Joomla oleh Anda sebagai Administrator website Joomla. Adapun User yang diberi hak mengirimkan link website untuk ditambahkan ke dalam Direktori Website, dapat melakukannya melalui Menu User yang akan disiapkan mengikuti penjelasan di Notes-8 dan Notes-9. Direktori Website yang telah dibuat mengikuti langkah-langkah di atas, akan tampil di halaman Web Links Manager: Web Links seperti pada gambar berikut ini. 18


2 . 5

19

D I

P C / L A P T O P


2 . 5

20

D I

P C / L A P T O P


2 . 5

D I

P C / L A P T O P

7 Notes

Menambahkan Contact Pembaca perlu membuat data Contact terlebih dahulu sebelum membuat halaman Contact, agar pesan dari pengunjung dapat terkirim ke alamat email yang ditentukan.

P

embaca tentunya pernah menemukan sebuah website yang menyediakan halaman berisi form untuk mengirimkan pesan/email. Itulah yang Penulis maksud dengan halaman Contact. Melalui halaman Contact, pengunjung dapat menghubungi webmaster dengan mengirimkan email langsung dari website untuk memberikan feedback berupa testimoni, saran, kritik, pertanyaan, atau masukan penting lainnya. Sebelum mulai membuat halaman Contact, Pembaca perlu menambahkan data Contact terlebih dahulu, agar pesan/email yang dikirim oleh pengunjung dapat terkirim ke alamat email yang telah ditentukan. Caranya adalah seperti dijelaskan berikut ini:

Menambahkan kategori Contact 1. Login ke dalam backend Joomla (halaman Administrator), 2. Klik menu [Components|Contacts|Categories] dan lanjutkan dengan klik New,

21


2 . 5

D I

P C / L A P T O P

3. Pada halaman Category Manager: Add A New Contact Category, isikan nama kategori Contact pada Title (misalkan: Owner), lalu akhiri dengan klik Save & Close.

Menambahkan data Contact 4. Kategori Contact sudah dibuat, selanjutnya untuk menambahkan data Contact, klik menu [Components|Contacts|Contacts] lalu lanjutkan dengan klik New,

5. Pada halaman Contact Manager: Contact, isikan nama Contact pada Name (misalkan: Lucky Permana), kemudian pada Category pilihlah kategori Contact yang sesuai (contoh pada tulisan ini adalah kategori Owner), lalu pada Contact Details isikan data Anda seperti jabatan (Position), alamat email (Email), alamat (address), dan data lainnya pada kotak yang tersedia. 22


2 . 5

D I

P C / L A P T O P

Pembaca juga dapat menambahkan foto diri dengan meng-klik tombol Select pada Image. Akhiri dengan klik Save & Close

Data Contact yang telah Pembaca tambahkan mengikuti langkah-langkah di atas, akan terlihat di halaman Contact Manager: Contacts seperti pada gambar di bawah ini.

Pembaca telah melakukan langkah-langkah untuk mempersiapkan data Contact mengikuti petunjuk di atas, sedangkan untuk menampilkan halaman Contact di frontend Joomla akan dijelaskan lebih lanjut pada pembahasan di Notes-9.

23


2 . 5

24

D I

P C / L A P T O P


2 . 5

D I

P C / L A P T O P

8 Notes

Membuat Menu User Berbeda dengan Menu Utama (Main Menu) yang tersedia secara default sewaktu install Joomla, Pembaca perlu membuat Menu User terlebih dahulu.

B

erbeda dengan Menu Utama (Main Menu) yang tersedia secara default sewaktu install Joomla, Pembaca perlu membuat Menu User terlebih dahulu. Lakukan langkah-langkah berikut ini untuk membuat Menu User:

1. Login ke dalam backend Joomla (halaman Administrator), 2. Klik menu [Menus|Menu Manager|Add New Menu],

3. Pada halaman Menu Manager: Add Menu, isikan nama menu pada Title (yaitu: User Menu), isikan Menu type dengan usermenu, dan isikan Description dengan deskripsi dari menu user (misalkan: The user menu for the site). Akhiri dengan klik Save & Close. 25


2 . 5

D I

P C / L A P T O P

4. Lanjutkan dengan klik pada link Add a module for this menu type,

5. Pada halaman Module Manager: Module Menu, ketikkan Menu User pada Title, ketikkan position-7 pada Position, lalu pilih Registered pada Access, dan akhiri dengan klik Save & Close.

26


2 . 5

D I

P C / L A P T O P

9 Notes

Menambahkan item-menu pada Menu Utama & Menu User Kecuali item-menu Home yang sudah tersedia pada Menu Utama (Main Menu) secara default, Pembaca masih perlu menambahkan item-menu lainnya seperti telah dirancang pada skema perencanaan website.

P

embaca sudah memiliki Menu Utama dan sudah membuat Menu User, tetapi, kecuali item-menu Home yang sudah tersedia pada Menu Utama (Main Menu) secara default, Pembaca masih perlu menambahkan itemmenu lainnya pada skema perencanaan website (lihat kembali skema perencanaan website di Notes-1 dan Notes-2). Item-menu yang akan ditambahkan pada Menu Utama yaitu: Biodata/CV, Karya Saya, Artikel Komputer, Direktori Website, dan Contact, sedangkan item-menu yang akan ditambahkan pada Menu User yaitu: Profil User, Kirim Artikel, dan Kirim Weblink. Masih tersisa satu, yaitu Profil Saya. Item-menu Home yang semula secara default menampilkan Featured Articles, akan diubah agar menampilkan content Profil Saya. Seperti biasa, lakukan langkah-langkah di bawah ini setelah sebelumnya login dan tetap berada di dalam halaman backend Joomla (halaman Administrator):

Item-menu pada Menu Utama Mengubah tipe item-menu (item menu type) Home 1. Klik pada menu [Menus|Main Menu] untuk masuk ke halaman Menu Manager: Menu Items, lalu klik item-menu Home untuk masuk ke halaman Menu Manager: Edit Menu Item, 27


2 . 5

D I

P C / L A P T O P

2. Lanjutkan dengan klik tombol Select pada Details-Menu Item Type untuk menampilkan daftar pilihan Select a Menu Item Type:, kemudian klik Single Article yang ada di grup Articles,

3. Klik tombol Select/Change pada Select Article di Required Settings, 28


2 . 5

D I

P C / L A P T O P

4. Lanjutkan klik judul content Profil Saya, dan Akhiri dengan klik Save & Close.

Menambahkan item-menu Biodata/CV dan Karya Saya 1. Klik pada menu [Menus|Main Menu|Add New Menu Item] untuk masuk ke halaman Menu Manager: New Menu Item,

2. Lanjutkan dengan klik tombol Select pada Details-Menu Item Type untuk menampilkan daftar pilihan Select a Menu Item Type:, klik Single Article yang ada di grup Articles,

29


2 . 5

D I

P C / L A P T O P

3. Isikan judul item-menu Biodata/CV pada Title, dan pastikan pada Menu Location sudah terpilih Main Menu, 4. Klik tombol Select/Change pada Select Article di Required Settings, 5. Lanjutkan klik judul content Biodata/CV, dan Akhiri dengan klik Save & Close.

6. Lakukan langkah-langkah yang sama untuk menambahkan item-menu Karya Saya, bedanya, pada langkah ke-3 isikan judul item-menu Karya Saya di Title dan pada langkah ke-5 klik judul content Karya Saya.

Menambahkan item-menu Artikel Komputer 1. Klik pada menu [Menus|Main Menu|Add New Menu Item] untuk masuk ke halaman Menu Manager: New Menu Item, 2. Lanjutkan dengan klik tombol Select pada Details-Menu Item Type untuk menampilkan daftar pilihan Select a Menu Item Type:, klik Category Blog yang ada di grup Articles, 3. Isikan judul item-menu Artikel Komputer pada Title, dan pastikan pada Menu Location sudah terpilih Main Menu, 4. Pilih kategori Artikel Komputer pada Choose a category di Required Settings, 5. Akhiri dengan klik Save & Close.

Menambahkan item-menu Direktori Website 1. Klik pada menu [Menus|Main Menu|Add New Menu Item] untuk masuk ke halaman Menu Manager: New Menu Item, 30


2 . 5

D I

P C / L A P T O P

2. Lanjutkan dengan klik tombol Select pada Details-Menu Item Type untuk menampilkan daftar pilihan Select a Menu Item Type:, klik List All Web Link Categories yang ada di grup Weblinks,

3. Isikan judul item-menu Direktori Website pada Title, dan pastikan pada Menu Location sudah terpilih Main Menu, 4. Akhiri dengan klik Save & Close.

Menambahkan item-menu Contact 1. Klik pada menu [Menus|Main Menu|Add New Menu Item] untuk masuk ke halaman Menu Manager: New Menu Item, 2. Lanjutkan dengan klik tombol Select pada Details-Menu Item Type untuk menampilkan daftar pilihan Select a Menu Item Type:, klik Single Contact yang ada di grup Contacts, 3. Isikan judul item-menu Contact pada Title, dan pastikan pada Menu Location sudah terpilih Main Menu, 4. Klik tombol Change Contact pada Select Contact di Required Settings kemudian pilih (klik) data Contact yang sudah Pembaca buat di Notes-7, 31


2 . 5

D I

P C / L A P T O P

5. Akhiri dengan klik Save & Close.

Item-menu pada Menu User Menambahkan item-menu Profil User 1. Klik pada menu [Menus|Main Menu|Add New Menu Item] untuk masuk ke halaman Menu Manager: New Menu Item, 2. Lanjutkan dengan klik tombol Select pada Details-Menu Item Type untuk menampilkan daftar pilihan Select a Menu Item Type:, klik User Profile yang ada di grup Users Manager, 3. Isikan judul item-menu Profil User pada Title, dan pastikan pada Menu Location sudah terpilih User Menu,


Menambahkan item-menu Kirim Artikel 1. Klik pada menu [Menus|Main Menu|Add New Menu Item] untuk masuk ke halaman Menu Manager: New Menu Item, 2. Lanjutkan dengan klik tombol Select pada Details-Menu Item Type untuk menampilkan daftar pilihan Select a Menu Item Type:, klik Create Artikel yang ada di grup Articles, 32


2 . 5

D I

P C / L A P T O P

3. Isikan judul item-menu Kirim Artikel pada Title, dan pastikan pada Menu Location sudah terpilih User Menu, 4. Pada Basic Options, pilih Yes di Default category, dan pilih Artikel Komputer di Choose a category, 5. Akhiri dengan klik Save & Close.

Menambahkan item-menu Kirim Weblink 1. Klik pada menu [Menus|Main Menu|Add New Menu Item] untuk masuk ke halaman Menu Manager: New Menu Item, 2. Lanjutkan dengan klik tombol Select pada Details-Menu Item Type untuk menampilkan daftar pilihan Select a Menu Item Type:, klik submit a Web Link yang ada di grup Weblinks, 3. Isikan judul item-menu Kirim Weblink pada Title, dan pastikan pada Menu Location sudah terpilih User Menu, 4. Akhiri dengan klik Save & Close.

33


2 . 5

34

D I

P C / L A P T O P


2 . 5

D I

P C / L A P T O P

Notes

10 Pengaturan module website Joomla Pengaturan module website Joomla dapat dilakukan di halaman Module Manager yang tersedia di dalam backend Joomla..

P

embaca masih ingat apa yang dimaksud module pada Joomla, bukan? Silahkan baca kembali Notes-9 di serial EbookJoomla Vol.1 tentang Mengenal frontend Joomla. Pada Notes-10 di serial EbookJoomla Vol. 2 ini, Penulis akan menjelaskan beberapa pengaturan mendasar yang perlu diketahui Pembaca, pada tiga macam module yang telah disiapkan sebelumnya yaitu: Menu Utama, Menu User, dan Login Form. Pengaturan module website Joomla dapat dilakukan di halaman Module Manager: Modules yang tersedia di dalam backend Joomla. Silahkan login ke dalam backend Joomla, dan klik menu [Extensions|Module Manager] untuk menampilkannya.

35


2 . 5

D I

P C / L A P T O P

Beberapa pengaturan module yang akan dilakukan oleh Pembaca yaitu: Mengubah nama module main menu, Mengubah urutan (ordering) module, dan Menentukan login/logout redirection page.

Mengubah nama module main menu Pada halaman Module Manager: Modules, silahkan Pembaca klik nama module Main Menu (lihat gambar di atas), kemudian pada Title ubahlah Main Menu menjadi Menu Utama. Jangan lupa akhiri dengan klik Save & Close.

Mengubah urutan (ordering) module Pembaca perhatikan gambar halaman Module Manager: Modules, module Menu User berada di urutan teratas sebelum Menu Utama dan Form Login. Urutan module yang diinginkan adalah Menu User diletakkan pada urutan terbawah setelah Menu Utama dan Login Form. Ubah urutan module dengan melakukan langkah-langkah berikut ini: 1. Klik pada judul kolom Ordering sehingga muncul icon bergambar disket, 2. Pada kotak di kolom Ordering, isikan 3 untuk Menu User, 1 untuk Menu Utama, dan 2 untuk Login Form.

3. Simpan dengan klik icon bergambar disket. Perhatikan, urutan module setelah Breadcrumbs akan berubah menjadi Menu Utama (1), Menu User (2), dan Login Form (3).

36


2 . 5

D I

P C / L A P T O P

Mengatur login/logout redirection page Pengaturan redirection page ini bermaksud untuk menentukan halaman web yang akan ditampilkan setelah User melakukan login/logout melalui Login Form. Caranya adalah seperti berikut ini: 1. Masih di halaman Module Manager: Modules, klik pada Login Form, 2. Selanjutnya di Basic Options, pilih Profil User pada Login Redirection Page, dan pilih Home pada Logout Redirection Page.


37


2 . 5

38

D I

P C / L A P T O P


2 . 5

D I

P C / L A P T O P

Notes

11 Preview website Joomla dan beberapa tips Caranya mudah, seperti telah Pembaca ketahui, ketikkan saja alamat website Joomla di browser , atau kalau masih di dalam backend Joomla klik saja link View Site.

S

ampai disini, Pembaca telah selesai membuat website Joomla sesuai dengan skema perencanaan website. Sekarang saatnya melihat seperti apa tampilan frontend website Joomla yang telah dibuat tersebut. Caranya mudah, seperti telah Pembaca ketahui, ketikkan saja alamat website Joomla di browser (pada contoh EbookJoomla ini yaitu localhost/belajarjoomla/), atau kalau masih berada di dalam backend Joomla klik link View Site di pojok kanan atas. Selanjutnya, silahkan menjelajahi website Joomla dan mencoba semua fitur yang sudah Pembaca siapkan mengikuti petunjuk di Notes-1 s/d Notes-10.

39


2 . 5

D I

P C / L A P T O P

Mendaftarkan user Pembaca sebagai Administrator Joomla dapat menulis artikel dan menambahkan link Direktori Website, tetapi tidak demikian halnya dengan pengunjung website Joomla. Pengunjung yang berminat untuk menulis artikel atau mengirim link website, harus terdaftar terlebih dahulu sebagai User di website Joomla milik Pembaca. Ada dua cara pendaftaran user, yaitu melalui backend Joomla dan melalui frontend Joomla.

Pendaftaran User melalui backend Joomla Pendaftaran user hanya dapat dilakukan dilakukan oleh Pembaca sebagai Administrator Joomla. Pembaca memerlukan sedikitnya dua macam data untuk mendaftarkan user, yaitu Nama dan alamat Email. Adapun cara mendaftarkan user melalui backend Joomla adalah sebagai berikut: 1. Login ke dalam backend Joomla (halaman Administrator), 2. Klik menu [Users|User Manager|Add New User] untuk masuk ke halaman User Manager: Add New User,

3. Isikan nama pada Name, username untuk login pada Login Name, password untuk login pada Password dan Confirm Password, dan isikan alamat email pada Email. Akhiri dengan klik Save & Close. 40


2 . 5

D I

P C / L A P T O P

Pendaftaran User melalui frontend Joomla Berbeda dengan pendaftaran user melalui backend Joomla yang hanya dapat dilakukan oleh Administrator, Pengunjung website Joomla dapat mendaftar sebagai user melalui frontend Joomla dengan memanfaatkan module Login Form. Caranya adalah seperti dijelaskan berikut ini: 1. Pada halaman Home di frontend Joomla, pengunjung meng-klik link Create an account yang tersedia di bagian bawah Login Form, 2. Selanjutnya Pengunjung mengisikan namanya pada Name, username untuk login pada Login Name, password untuk login pada Password dan Confirm Password, dan mengisikan alamat email pada Email Address dan Confirm email Address. Akhiri dengan klik tombol Register.

41


2 . 5

D I

P C / L A P T O P

3. Pengunjung akan menerima link aktivasi yang dikirim ke alamat email yang didaftarkannya, dengan meng-klik link aktivasi tersebut maka Pengunjung akan resmi berstatus sebagai user dan dapat menggunakan Username dan Password-nya untuk Login di website Joomla.

Mengubah level user User website Joomla sekarang dapat menggunakan username dan password yang telah didaftarkan dan diaktivasi, untuk login ke dalam halaman User. Pembaca perhatikan baik-baik, setelah melakukan login, Menu User yang tadinya tidak terlihat di frontend Joomla sekarang telah muncul. User pun langsung diarahkan ke halaman Profil User sebagaimana telah diatur pada Login Redirection Page di pembahasan pada Notes-10.

42


2 . 5

D I

P C / L A P T O P

Sekarang, cobalah klik item-menu Kirim Artikel dan/atau Kirim Weblink, apa yang terjadi?.. akan tampil pesan error seperti pada gambar di bawah.

Pesan error tersebut muncul karena, secara default, level user yang diberikan kepada pengunjung terdaftar adalah level Registered, sedangkan untuk dapat mengirim Artikel dan/atau Weblink, User harus berada pada level minimal Author. Pembaca sebagai Administrator dapat mengubah level user dari Registered menjadi Author mengikuti langkah-langkah berikut ini: 1. Login ke dalam backend Joomla (halaman Administrator), 2. Klik menu [Users|User Manager] dan lanjutkan klik pada nama user yang akan diubah level-nya.

43


2 . 5

D I

P C / L A P T O P

3. Pada Assigned User Groups, beri tanda centang (check) di Author. Akhiri dengan klik Save & Close.

4. Sekarang, pengunjung yang login di frontend Joomla sudah dapat menulis dan mengirim Artikel, dan/atau mengirim link ke Direktori Website.

Mengubah Header default website Joomla Website Joomla yang telah Pembaca buat masih belum sempurna karena masih menampilkan Header default bawaan Joomla.

44


2 . 5

D I

P C / L A P T O P

Pembaca perlu mengubahnya agar menampilkan informasi yang sesuai dengan keinginan. Beberapa hal yang akan diubah mengikuti petunjuk di Notes-11 ini adalah Logo, Site Description, dan Background header.

Mengubah Logo dan Site Description pada Header Website Logo dan Site Description (deskripsi website) yang tampil pada header default adalah logo dan site description milik Joomla, sehingga tentu saja Pembaca perlu menggantinya dengan logo dan site description milik sendiri bukan? Caranya adalah seperti dijelaskan berikut ini: 1. Login ke dalam backend Joomla (halaman Administrator), 2. Klik menu [Extensions|Template Manager] untuk masuk ke halaman Template Manager: Styles. Pada halaman ini, perhatikan tanda Bintang berwarna kuning-emas di kolom Default menunjukkan jenis template yang sedang digunakan, yaitu template Beez_20 untuk Site (digunakan di frontend) dan template Bluestork untuk Administrator (digunakan di backend). Pada pembahasan selanjutnya, Pembaca akan lebih banyak mengelola jenis template untuk Site (Beez_20).

3. Lanjutkan dengan klik pada link Beez2-Default untuk masuk ke halaman Template Manager: Edit Style, 4. Perhatikan pada kelompok Advanced Options di halaman Template Manager: Edit Style tersebut. Logo adalah informasi file image (gambar) yang akan digunakan sebagai Logo website Joomla, Site Title adalah judul website Joomla yang akan dimunculkan apabila tidak menggunakan logo (informasi logo dikosongkan), dan Site Description adalah deskripsi singkat yang menggambarkan isi website Joomla secara umum. 45


2 . 5

D I

P C / L A P T O P

5. Klik tombol Select pada Logo untuk memilih gambar logo yang akan ditampilkan. Apabila gambar logo yang diinginkan belum tersedia, upload terlebih dahulu file gambar logo yang diinginkan tersebut dengan meng-klik tombol Choose File, lalu browse dan pilih file yang diinginkan, dan klik tombol Start Upload untuk mulai meng-upload-nya. Setelah selesai upload, pilih (klik) pada gambar logo kemudian klik tombol Insert.

6. Selanjutnya pada halaman Template Manager: Edit Style, hapus (kosongkan) isian Site Title, dan pada Site Description isikan deskripsi website misalkan: Website Personal Profile Lucky Permana. Akhiri dengan 46


2 . 5

D I

P C / L A P T O P

klik tombol Save & Close. Silahkan preview dengan klik View Site untuk melihat hasilnya.

Mengubah Background pada Header Website Joomla Pembaca perhatikan header website Joomla pada gambar di atas, terdapat tulisan We are volunteers yang tidak sesuai dengan website Joomla milik Anda dan mungkin juga mengurangi kenyamanan para pengunjung. Apabila diinginkan, Pembaca dapat menghilangkannya dengan cara mengubah background header. Langkah pertama yang harus dilakukan adalah mempersiapkan terlebih dahulu file image .PNG berukuran (1060 x 288) px.

Selanjutnya, Pembaca dapat mengubah file image background default dengan mengikuti salah satu dari dua cara berikut: Cara pertama, File image background header default (Beez_20) tersimpan pada folder c:\wamp\www\BelajarJoomla\templates\beez_20\images\personal\ (pembaca dapat menyesuaikan BelajarJoomla dengan nama folder yang sudah dibuat), dengan nama file personal2.png. Pada cara pertama ini, Pembaca akan mengubah nama file background yang telah disiapkan menjadi sama seperti nama file background default yaitu personal2.png. Langkah selanjutnya, tentu saja Pembaca harus meng-copy file background tsb ke c:\wamp\www\BelajarJoomla\templates\beez_20\images\personal\ untuk mengganti (replace) file personal2.png yang sudah ada disana sebelumnya.

47


2 . 5

D I

P C / L A P T O P

Cara kedua, Cara pertama merupakan cara termudah yang dapat dilakukan untuk mengubah header website Joomla. Pembaca cukup menyiapkan file background, memberi nama file dengan personal2.png, lalu meng-copy-nya ke folder yang sudah ditentukan. Tetapi bagi Pembaca yang tidak ingin mengubah nama file dan meng-copy-nya ke folder yang sudah ditentukan, dapat mencoba cara kedua yang dijelaskan berikut ini: 1. Sama seperti cara pertama, siapkan terlebih dahulu file image untuk background header. File image bisa dalam format file image lainnya seperti .JPG, tidak harus dalam fomat .PNG. 2. Login ke dalam backend Joomla (halaman Administrator), 3. Klik menu [Content|Media Manager] untuk masuk ke halaman Media Manager. 4. Pada halaman Media Manager, klik tombol Choose File, browse dan pilih file background, lalu klik Start Upload. Sampai langkah ini, Pembaca sudah meng-upload file background ke website Joomla. Ikuti langkah selanjutnya.

48


2 . 5

D I

P C / L A P T O P

5. Lanjutkan dengan klik menu [Extensions|Template Manager] untuk masuk ke halaman Template Manager: Styles kemudian klik link Beez_20 di kolom Templates (lihat gambar pada pembahasan mengenai Mengubah Logo dan Site Description pada Header Website Joomla, di Notes-11 ini). Pembaca akan masuk ke halaman Template Manager: Customise Template, lalu klik pada link Edit css/personal.css,

6. Selanjutnya pada halaman Template Manager: Edit File, cari dan temukan baris code di bawah ini: background: #0c1a3e URL(../images/personal/personal2.png ) no-repeat bottom right ;

lalu ubah code URL(../images/personal/personal2.png) dengan code URL(http://localhost/belajarjoomla/images/back-header.png) sehingga baris code seutuhnya menjadi seperti di bawah ini: background: #0c1a3e URL(http://localhost/belajarjoomla/ /images/back-header.png) no-repeat bottom right ;

Perhatikan, /belajarjoomla/ dan back-header.png pada baris code di atas dapat Pembaca sesuaikan dengan nama folder website joomla dan nama file background yang sudah disiapkan mengikuti langkah-langkah membuat website Joomla sampai sejauh ini.

49


2 . 5

D I

P C / L A P T O P

7. Terakhir, seperti biasanya, akhiri dengan klik Save & Close. Silahkan preview, website Joomla sekarang sudah tampil dengan header yang baru.

50


2 . 5

D I

P C / L A P T O P

Bacaan Joomla Graf, Hagen. 2011. Joomla! 1.6 Beginner’s Guide. Ebook: www.cocoate.com: cocoate.com/2011/02/joomla-16-beginners-guide. Graf, Hagen. 2011. Joomla! 1.7 Beginner’s Guide. Ebook: www.cocoate.com: cocoate.com/2011/07/joomla-17-beginners-guide. Graf, Hagen. 2012. Joomla! 2.5 Beginner’s Guide. Ebook: www.cocoate.com: cocoate.com/2012/02/joomla-25-beginners-guide. Hayne, Kevin. 2008. Joomla! 1.5 Quick Start Guide. Ebook: www.joomla.org: http://help.joomla.org/ghop/feb2008/task048/. Joomla.org. 2008 – 2011. “Absolute Beginner’s Guide to Joomla!”. Website: www.joomla.org: docs.joomla.org/Beginners. Permana, Lucky. 2008 – 2012. “Pojok Joomla”. Website: www.cangkruk.com. Permana, Lucky. 2010. Panduan Lengkap Website Dinamis Joomla. Jakarta: Elex Media Komputindo. Permana, Lucky. 2011. Mengelola Website Joomla 1.7 dengan 70 Ekstensi Terpopuler. Jakarta: Elex Media Komputindo. Permana, Lucky. 2012. “Menggunakan Joomla di PC/Laptop for Dummy”. Web page: www.facebook.com: facebook.com/Tutor.Joomla?sk=notes. Permana, Lucky. 2012. “Membuat website Joomla di PC/Laptop for Dummy”. Web page: www.facebook.com: facebook.com/Tutor.Joomla?sk=notes. Ramsay, James. 2008. Joomla! Core Features V1.2. Ebook: www.joomla.org: http://help.joomla.org/ghop/feb2008/task020/.

51


2 . 5

52

D I

P C / L A P T O P

Laptop

Recommend Documents