TUTORIAL WEB DESIGN

MENGGUNAKAN JOOMLA 1.5.22 Oleh : Mochamad Subecha, SE

Dalam membuat web design alangkah baiknya jika kita merencanakan terlebih dahulu informasi apa yang ingin kita berikan bagi para user, karena tujuan utama dari web sendiri adalah untuk memberikan informasi seluas-luasnya bagi para user. Selain itu website bisa dijadikan sebagai simbol kredibilitas dan prestige si pemilik web. Sehingga perlu diperhatikan benar konten dari website tersebut, dan sekali lagi harus diingat bahwa konten akan mempengaruhi respon dari para user. Untuk merancang konten yang tepat diperlukan bantuan site map yang gunanya untuk mempermudah kita dalam membuat desainnya. Melalui site map tersebut kita akan mengetahui kira-kira website tersebut sudah memberikan informasi yang diinginkan oleh user atau belum. Untuk mempermudah pembelajaran mengenai pembuatan website ini, kita akan melakukan studi kasus membuat web design sebuah mini banking syariah. Contoh site map yang kita gunakan seperti dibawah ini. Site map untuk Mini Banking Syariah berisi tentang: • Tentang Kami yang berisikan tentang profil perusahaan • Produk dan Layanan berisikan tentang produk apa yang dihasilkan oleh perusahaan tersebut dan

perusahaan tersebut memberikan layanan jasa apa saja. • Kontak Kami berisikan tentang alamat perusahaan yang bisa dihubungi • Agenda kegiatan berisikan tentang agenda kegiatan perusahaan tersebut yang mungkin user bisa

ikut berpartisipasi didalamnya. • Galeri foto untuk menunjukkan kepada user berbagai macam kegiatan yang ada di perusahaan

melalui media foto. • Buku Tamu bisa digunakan oleh user bila ingin menyampaikan saran atau kritik • Webmail merupakan media bagi user untuk menyampaikan saran atau kritik atau apapun melalui

email. • Berita dapat dibagi menjadi dua bentuk yaitu berita utama dan artikel. Berita Utama bisa meliputi

berita yang berkaitan dengan bank syariah pada khususnya, atau bidang ekonomi dan social pada umumnya. Sedangkan artikel adalah berita yang berisi tentang bidang-bidang lainnya.

• Info dibagi menjadi dua yaitu laporan dan opini. Laporan berisikan tentang laporan-laporan yang yang dihasilkan oleh perusahaan tersebut. Misalnya saja laporan perkembangan usaha, laporan prestasi dll, sedangkan opini yaitu semua saran atau kritik dari para user dapat diangkat menjadi suatu opini

Mini Banking Syariah

Setelah membuat site map, langkah selanjutnya adalah melakukan proses penginstalan Joomla. Setelah selesai proses penginstalan kita akan belajar mengolah web ini. Misalnya alamat web kita yaitu http://ebiz-tutorial.com/namakelas. Dengan mengetikkan alamat tersebut pada mesin pencari situs akan muncul seperti gambar dibawah ini. Gambar dibawah ini merupakan gambar asli dari Joomla. Agar bisa tampilan kelihatan cantik masih harus diperlukan mengganti tamplatenya (atau untuk lebih mudahnya mengganti baju web ini). Dan untuk itu masih harus diperlukan menginstal templatenya. Tetapi penjelasan mengenai penggantian template akan dibicarakan lebih lanjut.

Bentuk awal Joomla sebelum dilakukan proses pengolahan lebih lanjut. LOG IN Proses selanjutnya adalah melakukan LOG IN. Proses ini harus melalui administrator. Buka Tab baru, ketik http://ebiz-tutorial.com/namakelas/administrator . Setelah itu Anda akan melihat seperti gambar di bawah ini.

Isi username dan password sesuai dengan yang ada pada penginstalan tadi

Setelah proses login disetujui Anda dapat masuk, ditunjukkan dengan gambar dibawah ini. Tetapi bila pengisian username dan password Anda salah maka login Anda salah dan Anda diwajibkan untuk membenarkannya terlebih dahulu

Control panel yang horizontal terdiri atas : • Site terdapat control panel, user manager, media manager, global configuration dan log

out • Menus terdapat menu manager dan menu-menu lain • Content terdapat article manager, article trash, section manager, category manager dan

front page manager • Components terdapat banner, contact, news feeds, polls, search, web links • Extensions terdapat install/uninstall (untuk menginstal template, modul, component

atau menghapuskan template, modul, component), Module manager (untuk mengatur

modul), Plugin manager (untuk ), Template manager (untuk mengganti template website, atau apapun yang berhubungan dengan template), Language manager

• Tools terdapat • Help

Control panel yang bergambar untuk mempermudah pengelola. Terdiri atas: • Add new article bila ingin membuat artikel baru • Article manager bila ingin mengetahui keseluruhan artikel, membuat artikel baru bisa

melalui artikel manager dengan mengetik new ataupun mengeditnya. • Front page manager untuk mengetahui artikel yang berada di posisi frontpage (muka),

selain itu juga dapat mengarsipkan artikel, meng-unpublish artikel atau juga menghapusnya

• Section manager digunakan bila ingin membuat atau mengubah section untuk sebuah artikel. Akan dijelaskan lebih lanjut.

• Category manager digunakan bila ingin membuat atau mengubah category untuk sebuah artikel. Akan dijelaskan lebih lanjut

• Media manager berisikan tentang foto atau gambar yang dipakai sebagai banner, iklan, logo atau sisipan gambar

• Menu manager berisikan tentang berbagai macam menu yang ada, sekaligus untuk mengubah menu atau menambah menu

• Language manager berisikan tentang bahasa yang digunakan • User manager merupakan pihak yang berkepentingan dalam pengolahan web ini. Ada

yang bertindak sebagai super administrator, maka dia mempunyai hak penuh dalam pengelolaan. Akan dijelaskan lebih lanjut

• Global Configuration berisikan tentang Pada dasarnya semua control panel yang bergambar ada pada control panel yang horizontal diatasnya. Hanya saja fungsinya untuk memudahkan pembuat dalam pengelolaan website ini. PENAMBAHAN ARTIKEL Setelah mengetahui sekilas tentang control panel dan fungsinya maka langkah selanjutnya adalah membuat artikel. Tetapi terlebih dahulu kita tentukan apakah artikel yang akan kita buat bersifat statis atau dinamis. Dikatakan statis jika artikel yang dimaksud hampir dikatakan jarang terjadi perubahan. Mungkin dalam satu tahun tidak akan ada perubahan. Untuk itu kita mengklasifikasi artikel ini sebagai artikel yang uncategory (artikel yang tidak berkategori). Artikel yang bersifat dinamis jika dalam perkembangannya mengalami perubahan, atau bisa jadi setiap hari mengalami perubahan. Biasanya artikel yang bersifat dinamis ini berupa berita. Untuk itu kita perlu membuat section dan categorynya. Section merupakan induknya sedangkan category merupakan sub bagiannya. Misalnya saja pada site map Mini Banking Syariah terdapat section berita dan info. Sedangkan category untuk berita adalah berita utama dan artikel. Sedangkan untuk info memiliki category laporan dan opini. Bila Anda sudah mengetahui artikel mana yang dimasukkan sebagai artikel statis dan mana yang bersifat dinamis, akan mempermudah Anda membuat menu nantinya. Pembuatan menu akan dijelaskan lebih lanjut. Selanjutnya untuk membuat artikel baru, terlebih dahulu Anda harus membuat section dan category. Untuk membuat section, klik Content ? Section Manager ? New. Tulis judul section, alias bisa dikosongi. Bila sudah mengisi jangan lupa untuk menyimpannya. Dan untuk membuat category juga hampir sama. Klik Content ? Category Manager ? New. Tulis Judul category, untuk alias bisa dikosongi. Setelah selesai jangan lupa untuk menyimpannya. Setelah siap Anda bisa memulai membuat artikel. Untuk membuat artikel baru dapat melalui control panel horizontal atau yang bergambar. Jika melalui control panel atas, klik Content ? Article Manager ? New. Akan muncul gambar dibawah ini.

Tulis judul artikel, alias bisa Anda kosongi karena joomla akan mengaturnya untuk Anda. Setelah itu pilih section dan category. Jika tidak ada, pilih uncategory. Untuk publish bila diklik yes berarti artikel tersebut akan terpublish (akan ditampilkan), jika dipilih no secara otomatis akan tidak ditampilkan. Front page jika dipilih no, maka artikel tidak akan berada di tampilan muka. Tetapi jika dipilih yes maka artikel akan berada ditampilan muka. Pada bagian bawah artikel terdapat tombol-tombol yang perlu Anda perhatikan. • Image digunakan jika Anda ingin memasukkan (mensisipkan) gambar atau foto untuk

menambah atau memperjelas informasi yang Anda berikan. • Pagebreak digunakan jika Anda ingin mengkaitkan antara artikel yang satu dengan yang lain • Readmore digunakan untuk memotong artikel. Hal ini berkaitan dengan tampilan artikel pada

halaman muka. Akan tampak aneh jikalau artikel pada halaman muka tampak secara keseluruhan. Apalagi kalau artikel itu panjang. Ditambah lagi artikel yang akan ditampilkan di muka tidak hanya satu, tapi beberapa. Bisa Anda bayangkan bagaimana tampilan halaman muka. Begitu panjang. Untuk lebih cantik dan meringkas isi artikel bisa menggunakan readmore ini.

• Toggle Editor digunakan untuk menghilangkan panel untuk editor pada artikel.

Selain itu parameter yang ada di sebelah kanan dapat diisi. Tapi bila tidak diisipun tidak akan apa-apa, karena joomla akan mengaturnya untuk Anda. Itulah kehebatan joomla. Pada parameter Anda dapat mengatur apakah artikel tersebut memperlihatkan judul atau tidak, memperlihatkan si penulis atau tidak, mencantumkan section dan categorynya atau tidak, mencantumkan tanggal, jam, memperlihatkan symbol PDF, Print atau email atau tidak. Semuanya terserah Anda. Anda hanya perlu penyesuaian kapan parameter tersebut perlu diubah atau tidak.

MEMASUKKAN IMAGE (MENYISIPKAN GAMBAR ATAU FOTO)

Untuk memilih berkas image di file Anda, kemudian upload Atur penempatannya dan insert Cara untuk menyisipkan image (gambar atau foto), klik image akan muncul gambar diatas. Setelah itu klik pilih berkas untuk memilih data mana yang akan Anda ambil, setelah itu klik Start Upload. Setelah itu Anda insert image yang telah Anda upload tadi. Tetapi sebelumnya jangan lupa untuk memilih dimana image itu akan ditempatkan, di kiri, kanan atau tidak diatur. Semua ini sangat berpengaruh pada tampilan artikel nantinya. MEMBUAT PAGE BREAK

Untuk membuat pagebreak, cukup Anda blog kalimat yang ingin Anda kaitkan dengan artikel lain, kemudian Anda klik pagebreak. Tulis judul artikel yang akan dikaitkan dengan tulisan tadi. Table of Contents Alias bisa dikosongi.

MEMBUAT READMORE

Untuk membuat readmore, Anda tulis terlebih dahulu sebagian kalimat yang bisa dibilang sebagai pembukaan. Sebelum memasuki alinea selanjutnya Anda klik readmore. Akan muncul garis-garis seperti contoh diatas, kemudian Anda dapat meneruskan kembali artikel Anda dibawah garis tersebut. PEMBUATAN MENU Setelah pembuatan artikel telah dilakukan, langkah selanjutnya adalah membuat menu. Seperti halnya bila kita masuk ke sebuah restoran, kita akan diberikan daftar menu untuk mempermudah kita memilih makanan apa yang akan kita pesan. Menu yang akan kita buat pada website ini dapat dikatakan sama dengan menu makanan tadi. Artinya dengan menu, para user dapat dengan mudah mengetahui informasi apa saja yang ada dalam website ini. Dengan bantuan site map yang tadi kita buat, kita dapat membuat menu. "Tentang Kami" dan "Produk dan Layanan" dapat digolongkan sebagai artikel yang statis. Karena tidak mungkin profil perusahaan akan sering berubah. Begitupun halnya dengan Produk dan Layanan juga akan jarang berubah. Sedangkan "Contact Us" dan "Web Mail" merupakan bentuk component Mengenai Component Contact akan dibahas lebih lanjut. Begitupun halnya dengan "Agenda Kegiatan", "Galeri Foto", "Buku Tamu". Khusus untuk Agenda Kegiatan karena ini merupakan suatu latihan maka tidak akan menggunakan component, tapi kita nanti akan mempergunakan artikel biasa yang bersifat category. Jadi dianggap suatu berita yang akan sering berubah. Mengenai module akan dijelaskan lebih lanjut. Untuk berita dan info termasuk kedalam artikel yang berkategori. Karena dapat berubah sewaktu-waktu. Setelah mengetahui klasifikasi artikel yang dibuat, langkah selanjutnya untuk membuat menu adalah masuk ke Menu manager untuk membuat menu baru atau mengubah menu yang sudah ada. Sebelum membuat menu, terlebih dahulu saya akan jelaskan tentang tampilan muka website.

Keterangan :

1. News Flash menggunakan module newsflash 2. Logo 3. Main menu menggunakan module menu 4. Resouces menggunakan module menu 5. Key concepts menggunakan module menu 6. Top menu menggunakan module menu 7. Latest News menggunakan module latests news 8. Popular menggunakan module most popular 9. Merupakan front page 10. Polls menggunakan component polling (akan dibahas lebih lanjut)

Setelah itu kita akan membuat menu yang berisikan item menu yang disesuaikan dengan yang ada di site map. Untuk mempermudah lebih baik jika semua konten kecuali berita dan info dijadikan satu dalam Main Menu. Sedangkan untuk berita dan info kita buatkan menu baru yang kita beri judul "Topik". Langkah pertama untuk mengubah isi Main Menu adalah dengan cara masuk ke Menus ? Main Menu. Akan muncul gambar seperti dibawah ini.

1 2

3

4

5

6

7 8

9 10

Pada gambar diatas terlihat pada Home terdapat tanda bintang (default) yang menunjukkan bahwa bila Home diklik akan kembali ke tampilan muka. Tanda default juga berarti bahwa Home tidak bisa dihapus atau dibuang. Untuk tidak menampilkan menu item yang tidak diinginkan caranya dengan mengklik tanda centang menu item yang dimaksud. Atau bila menu item yang akan di unpublish lebih dari satu, untuk menghemat waktu bisa dengan mengklik kotak sebelah kiri menu item yang dimaksud kemudian klik unpublish. Beda antara trash dan unpublish seperti yang ada di panel atas adalah bila trash langsung dibuang atau dihapus. Tetapi bila dikehendaki bisa diambil kembali datanya. Sedangkan di-unpublish hanya tidak ditampilkan. Selanjutnya kita akan membuat Main Menu yang berisi tentang Tentang Kita, Produk dan Layanan, Kontak Kami, Agenda Kegiatan, Galeri Foto, Buku Tamu dan Webmail. Berhubung pada tampilan muka yang dapat dipakai hanya Home dan Contact Us, maka semua menu item di-unpublish. Setelah itu baru kita buat menu item baru. Pertama klik New, Anda akan melihat gambar seperti dibawah ini.

Article Anda dapat memilih seperti yang Anda butuhkan. Misalnya untuk menu item Tentang Kami dan Produk dan Layanan karena sama-sama merupakan bentuk artikel yang statis (uncategory), maka klik Article. Selanjutnya Anda pilih Article layout. Setelah itu Anda diminta untuk menulis judul artikel "Tentang Kami", kemudian lihat parameter di sebelah kanan terdapat kalimat Select Article , klik select akan muncul daftar artikel. Pilih yang sama dengan judul Tentang Kami. Sedangkan yang lainnya tidak perlu terlalu diperhatikan. Terakhir jangan lupa disimpan. Lihat contoh gambar dibawah.

Untuk Produk dan Layanan juga sama seperti Tentang Kami. Jadi Anda cukup menuliskan judulnya "Produk dan Layanan", klik Select Article, pilih artikel tentang Produk dan Layanan. Langkah terakhir simpan. Kita kembali pada Main Menu. Sekarang sudah tampak Home, Contact Us, Tentang Kami dan Produk dan Layanan. Nah, kita ingin Tentang Kami dan Produk dan Layanan berada diatas Contact Us. Bagaimana caranya agar posisi Contact Us bisa turun ke bawah? Caranya lihat gambar dibawah ini. Di gambar tersebut ada kolom order. Nah dari situ Anda bisa menyesuaikan. Bila menginginkan Tentang Kami dan Produk dan Layanan berada di atas Contact Us, berarti Contact Us bisa diturunkan dengan mengklik tanda ke bawah (move down) sampai berada di bawah Produk dan Layanan. Nah sekarang Anda bisa me-refreshnya. Perhatikan apa yang terjadi di tampilan muka. Sekarang Anda coba buka artikel "Tentang Kami" dan "Produk dan Layanan". Bila sudah tampil berarti apa yang telah Anda kerjakan sudah benar. Dan Anda bisa meneruskan ke langkah berikutnya.

Selanjutnya kita akan membuat menu baru yang berisi tentang berita dan info. Mengapa dibuatkan menu baru karena kita tidak ingin menu berita bercampur dalam Main Menu. Untuk itu kita perlu membuat menu khusus untuk berita yang bisa kita beri nama Topik. Caranya masuk ke Menus ? Menu Manager ? New. Akan muncul Menu : New. Disitu Anda tuliskan unique name, title, description, dan module titlenya. Misalnya saja Anda beri unique namenya topik (pergunakan huruf kecil), titlenya Topik, descriptionnya boleh memakai nama yang sama atau terserah Anda, dan module titlenya juga dengan nama sama tidak masalah. Setelah Anda simpan, Anda akan kembali ke Menu Manager. Pada Menu Manager, Menu Topik belum memiliki menu item. Untuk membuatnya, Anda klik tanda menu item. Anda akan menemukan halaman Menu Item Manager untuk Topik dalam kondisi masih kosong. Untuk membuat menu item, klik new. Dan tulis seperti Anda membuat Tentang Kami atau Produk dan layanan tadi. Hanya saja, yang akan Anda masukkan nanti adalah artikel yang bersifat dinamis atau berkategori. Untuk itu perhatikan pada pemilihan bentuk artikel, tidak lagi Article layout, melainkan Category Blog Layout atau Category List Layout.

Sebelumnya saya akan coba menjelaskan secara singkat tentang pemilihan jenis artikel. • Archives dipilih jika Anda menginginkan membuat arsip. Jadi artikel yang akan Anda buat nanti

sudah tersusun dalam sebuah arsip. Dan artikel yang telah masuk dalam arsip tidak dapat ditampilkan dimuka. Sehingga jarang digunakan. Bila menginginkan untuk mengarsipkan harus menunggu beberapa waktu yang akan datang.

• Article dibagi menjadi dua yaitu article layout yang hanya menampilkan satu artikel, sedangkan Article Submission Layout hanya dipakai untuk kalangan sendiri.

• Category dibagi menjadi dua yaitu Category Blog Layout dipilih jika Anda menginginkan artikel yang tampil tidak hanya judul saja tetapi juga sebagian isinya sehingga dapat menarik orang untuk membaca. Sedangkan Category List Layout dipilih jika artikel yang akan ditampilkan hanya berupa kumpulan judul saja. Category dipilih jika sudah jelas akan membuat artikel yang berkategori atau menurut kategorinya. Sedangkan pemilihan blog dan list tergantung pembuat kapan yang tepat untuk menunjukkan blog kapan waktu yang tepat untuk hanya berupa list.

• Front page dipilih jika menginginkan artikel yang dibuat untuk front page. Sebetulnya tanpa membuat dari sini, jika sudah membuat artikel akan diberikan pilihan apakah artikel tersebut diletakkan di front page atau tidak. Sehingga jarang digunakan.

• Section dibagi menjadi dua yaitu Section Blog Layout dan Section layout. Section ini dipilih jika kita ingin membuat artikel yang berdasarkan sectionnya. Ini juga jarang digunakan, karena kita biasanya membuat artikel yang berdasarkan kategori. Tetapi jika Anda berkeinginan membuat artikel yang berdasarkan section Anda bisa gunakan ini.

Kembali ke pembuatan menu item, kita sudah membuat category berita utama, artikel, laporan dan opini. Untuk itu kita pilih category. Karena bentuknya berita lebih baik bila berupa blog layout. Untuk itu pilih Category Blog Layout. Seperti biasa tulis judulnya misalnya Berita Utama, alias dikosongi saja. Yang perlu diperhatikan adalah parameter sebelah kanan. Lihat Select category, disitu Anda akan menemukan Section dan category yang Anda maksud. Misalnya untuk Berita Utama, maka categorynya pilih Berita/Berita Utama. Untuk Description dan Description Image biarkan saja, sekarang perhatikan angka 1-4-2-4. Angka 1 menunjukkan satu artikel yang ditampilkan sebagai artikel utama. Angka 4 menunjukkan empat artikel yang akan ditampilkan di muka. Angka 2 menunjukkan setelah artikel utama aka nada 2 kolom untuk artikel. Angka 4 menunjukkan jumlah item yang bersifat sebagai links. Untuk parameter lainnya silahkan Anda sesuaikan dengan kebutuhan dan keinginan Anda, karena hal itu akan mempengaruhi tampilan dari website Anda. Bila sudah Anda masukkan semua, maka hasilnya akan seperti gambar dibawah ini.

Tetapi misalnya Anda ingin merubah laporan tidak berbentuk blog tetapi berbentuk list, maka yang Anda lakukan adalah Anda klik kembali laporan. Anda akan kembali ke menu item: edit. Setelah itu klik change type. Ganti dengan Category List Layout. Pilih kembali category yang dimaksud dan terakhir simpan. Dibawah category ada Links yang menunjukkan angka 10 artinya bahwa judul yang akan muncul sebanyak 10 artikel. Bila Anda menginginkan kurang atau lebih dari 10 sesuaikan saja angkanya. Bila sudah selesai simpan. Tahapan untuk membuat menu baru sudah kita kerjakan. Anda dikatakan telah benar menjalankannya jika Anda dapat menampilkannya di muka. PENAMBAHAN MODULE Setiap kali kita selesai melakukan pekerjaan, kita ingin melihat hasilnya. Bila Anda me-refresh mungkin Anda masih belum melihat hasilnya. Sekarang yang harus Anda perhatikan adalah bila kita membuat menu seperti pada awal tadi kita diminta untuk menuliskan judul modulnya. Nah sekarang itulah yang akan kita lakukan. Kita harus menambahkan modul biar menu yang kita buat tadi bisa tampil. Sekarang klik Extensions ? Module Manager. Akan muncul gambar seperti dibawah ini.

Perhatikan "Topik" diberi tanda silang merah. Hal ini menunjukkan Topik tidak ditampilkan. Untuk bisa menampilkannya, klik tanda merah sehingga berubah menjadi centang hijau. Sekarang anda melakukan re-fresh pada tampilan muka (Front page). Anda akan menemukan Topik disana. Pada dasarnya penambahan module bisa dilakukan melalui Menu Manager atau melalui Module Manager. Bila melalui Menu Manager secara otomatis module yang digunakan adalah Module Menu. Tetapi bila lewat Module Manager, module yang digunakan akan beragam. Misalnya untuk berita bisa menggunakan module Latest News, Newsflash, Most Read Content, tergantung dari kebutuhan. Tetapi adakalanya apa yang disediakan oleh Joomla tidaklah lengkap. Misalnya bila kita ingin membuat Agenda Kegiatan, module yang akan dipakai tidak ada. Jadi kita perlu menginstalnya. Berhubung hal ini menyangkut masalah Extensions akan dibicarakan secara tersendiri. Sementara kita perlu mengetahui masalah penambahan module dengan memakai module yang sudah ada. PENGENALAN MODULE Dalam Module Manager kita akan melihat sebuah tabel yang berisi tentang modul-modul. Ada kolom yang berisi nama modul (yang kita inginkan), enabled (yang menunjukkan module tersebut aktif atau mati), order (yang dapat menentukan di posisi manakah module tersebut akan ditempatkan), Access Level (siapa yang berhak untuk mengaksesnya), Position (posisi module/nama tempatnya), Pages (apakah module tersebut ditempatkan pada semua halaman ataukah hanya sebagian saja), Type (module apa yang digunakan) dan ID (identitas module tersebut). Setelah itu kita mengenal module secara sekilas, selanjutnya kita dapat melakukan pengaturan module dengan cara menambahnya, men-disable (menon-aktifkan), sekaligus mengatur penempatannya. Sebelumnya kita sudah mempelajari penambahan module, sekarang kita akan membahas pen-disable-an module serta penataannya sehingga penampilan website semakin menarik. Pen-disable-an Module adalah Module yang dianggap tidak perlu ditampilkan lebih baik di-disable (dimatikan) tetapi jangan dihapus (trash) terlebih dahulu. Supaya bila nanti dirasa perlu untuk menampilkannya tidak perlu lagi membuat yang baru. Bila sekiranya setelah perjalanan waktu module itu dianggap benar-benar tidak perlu bisa dihapus. Misalnya saja kita tidak memerlukan menu-menu Resources, Key Concepts, User Menu, dan Example Pages, oleh sebab itu menu-menu tersebut kita disable. Caranya dengan mengklik tanda silang merahnya. Untuk menyingkat waktu juga bisa dilakukan mencentang kotak disebelah kiri menu-menu tadi dan setelah semuanya tercentang, kita klik disable. Contoh seperti gambar dibawah ini.

Sekarang lihat hasil tampilan muka. Apa yang terjadi? Menu-menu tersebut tidak muncul bukan. Mungkin yang bisa Anda lihat hanya Resources dan Key Concepts. Sedangkan User Menu tidak akan tampil jika tidak melalui Login Form, dan Example Pages hanya merupakan contoh dari Joomla. Selain itu saya juga akan mendisable Advertisement, karena kita anggap tidak terlalu penting. Sehingga Advertisement tidak akan tampil. Setelah belajar bagaimana men-disable module, sekarang yang akan kita pelajari adalah penataan tempat module. Tetapi sebelumnya kita akan belajar tentang tempat-tempat module melalui templatenya. Yang harus kita ketahui bersama bahwa setiap template memiliki posisi-posisi module yang berbeda. Untuk lebih jelasnya mari kita mulai mempelajari templatenya. Kita buka dulu Extensions ? Template ? rhuk milkyway ? Preview. Akan tampak seperti gambar dibawah ini. Ada posisi top, breadcrumb, left, right, user 1, user 2, user 3, user 4, footer. Sebelumnya pada posisi top menggunakan module newsflash. Tetapi berhubung kita disable (kita non aktifkan module tersebut), pada tampilan newsflash tersebut tidak muncul. Sebenarnya pada posisi top bisa kita kasih module apa saja, asalkan memang enak dipandang mata. Kita harus ingat bahwa web desain juga merupakan seni, jadi alangkah baiknya jika dalam penempatan modul disesuaikan dengan fungsi dan keindahannya. Pada posisi breadcrumb menggunakan module breadcrumb, pada posisi left ditempati banyak modul. Misalnya ada module mainmenu, module login, dan masih banyak lagi modul yang lain. Begitupun halnya dengan posisi right, bisa diisi dengan banyak modul. Sesuaikan dengan kebutuhan dan keindahannya.

Diklik tanda centang menjadi berubah silang merah

User 1 menggunakan module latestnews, user 2 menggunakan module mostread, user 3 menggunakan module mainmenu, user 4 menggunakan module search. Setiap module bisa berpindah posisi, tergantung dari kebutuhannya dan faktor keindahaannya. Bisa saja pada posisi top dapat diisi module mainmenu, tapi apakah kelihatan bagus jika pada posisi tersebut diisi dengan module mainmenu. Sekarang kita coba men-disable Top Menu, kemudian kita pindahkan Latest News dari posisi semula ke posisi Right. Begitupun halnya dengan Popular. Coba bagaimana nanti tampilannya. Bila ingin mendisable Top Menu cukup dengan mengklik tanda centang. Sedangkan untuk memindahkan Latest News yang anda lakukan adalah klik Latest News, perhatian position menunjukkan user 1. Sekarang ganti user 1 dengan right. Setelah itu save. Perhatikan apa yang terjadinya.

Setelah itu untuk memindahkan Popular, klik Popular, perhatikan posisi modul berada pada user 2. Ganti dengan right. Setelah save. Perhatikan apa yang terjadi. Pada tampilan muka coba Anda re-fresh. Maka Anda akan menemukan gambar seperti contoh dibawah ini.

MENGELOLA POLLING Poling atau jajak pendapat merupakan sarana untuk mendekatkan diri dengan user (pengguna/penikmat), karena dengan jajak pendapat tersebut dapat menunjukkan keterikatan emosi para pengguna dengan web yang kita buat. Pada Joomla sudah diberikan seperti apa poling tersebut. Anda dapat mengganti topik poling yang ada dengan topic pilihan Anda sendiri. Caranya dengan masuk ke Component klik Polls. Disitu Anda melihat judul poling. Sekarang coba buat poling baru. Klik new, setelah itu Anda ketik Judul Poling, alias dikosongi saja, klik published menjadi yes, kemudian tuliskan pilihannya. Misalnya judul poling adalah Sebagai perbankan Syariah, Bagaimana Pelayanan Kami Terhadap Anda. Pilihannya untuk opsi pertama sangat memuaskan, opsi kedua memuaskan, opsi ketiga biasa-biasa saja, opsi keempat tidak puas dan opsi kelima mengecewakan. Setelah semua terisi, simpan. Sekarang untuk memunculkan poling Anda, maka sekarang Anda masuk Extensions klik Module Manager. Anda cari module poll yang ada, kemudian klik judul pollsnya. Perhatikan modul parameternya. Pada kolom select poll klik judul yang telah Anda buat tadi. Kemudian simpan. Sekarang re-fresh tampilan muka. Perhatikan apa yang terjadi. Bila Anda melihat gambar seperti yang ada di bawah berarti Anda sudah melakukannya dengan benar.

Bila Anda menginginkan judul Polls diganti dengan Jajak Pendapat maka kembali ke Extensions klik Module Manager, klik judul Polls ganti judul tersebut dengan Jajak Pendapat. Bila sudah segera simpan. Setelah itu perhatikan perubahannya. Maka hasilnya akan seperti gambar di bawah ini.

Penggantian judul untuk semua yang ada di tampilan ini bisa dilakukan dengan cara yang sama. Misalnya untuk Main Menu diganti dengan Menu Utama, Latest News diganti dengan Berita Terkini, Popular diganti dengan Topik Populer. Semua diubah melalui Module Manager. Sekarang coba Anda lakukan, bila sudah selesai akan tampak seperti gambar dibawah ini.

Dalam setiap module ada menu assignment yang berisi pilihan penempatan menu. Apakah ditampilkan di semua halaman, tidak ditampilkan, atau hanya sebagian tergantung pada halaman yang dibutuhkan. Bila hanya ditampilkan sebagian berarti pilih halaman yang paling pas untuk bisa menampilkan materi atau kontennya. DEFINISI TEMPLATE Definisi Template Joomla dan Anatominya Secara sederhana Template Joomla dapat didefinisikan sebagai sekumpulan file-file joomla yang berfungsi mengontrol bentuk perwajahan dari situs. File-file ini terdiri dari: 1. File Index.php yang berisi instruksi-instruksi program yang nantinya akan meramu semua

komponen dan komposisi yang ada pada Joomla dan kemudian menerjemahkannya kedalam sebuah tampilan website sesuai dengan keinginan.

2. File template_css.css yang nantinya berfungsi untuk mendefinisikan fungsi-fungsi css yang nantinya akan dipakai untuk perwajahan situs. Biasanya disimpan kedalam sebuah folder dengan nama css

3. File template_thumbnail.png yang berupa gambar berukuran kecil/snapshot dari template yang nantinya akan digunakan oleh template detail.xml untuk menampilkan mini preview template. Digunakan juga pada beberapa modul tertentu, misalnya modul pemilih template

4. File templateDetails.xml yang nantinya digunakan sebagai file penyimpan informasi detail tentang template, sekaligus menyimpan instruksi-instruksi yang digunakan pada saat menginstall template pada Joomla. Dengan kata lain sebagai installernya template.

File inti dengan ranting urutan direktorinya Keempat file diatas adalah adalah file-file inti yang harus dimiliki sebuah template yang sempurna. Dengan hanya memiliki 4 file ini, kita sebenarnya sudah bisa membuat sebuah template yang baik dan indah sesuai standar minimum Joomla. Akan tetapi biasanya akan diperlukan file-file tambahan seperti file image/gambar, flash, javascript, bahkan tidak menutup kemungkinan juga penambahan file-file php yang nantinya digunakan sesuai dengan kebutuhan template itu sendiri. MENGGANTI TEMPLATE Template diibaratkan sebagai pakaian dari web itu sendiri. Untuk dapat mengganti Template langkah-langkah yang harus diambil adalah cari dulu template yang cocok untuk web kita. Yang bisa menggambarkan keinginan kita. Kita tidak perlu membuat sendiri, karena template yang sudah jadi sudah beredar luas di luar sana. Ada yang gratisan tetapi ada juga yang premium alias dijual. Nah karena kita sedang belajar lebih baik jika gunakan saja template yang gratisan. Cara Menginstal Joomla Template adalah : 1. Download file template. Tipe file nya harus .zip 2. Masuk ke Extensions klik Install 3. Klik upload, lalu pilih file template-nya 4. Setelah muncul tulisan install succes, pilih template manager 5. Pilih template yang akan dipakai, lalu klik default Misalnya saja Anda telah mendownload file Template dengan nama siteground-j15-82.zip. Lakukan seperti langkah-langkah diatas. Jika langkah-langkah Anda sudah benar maka template Anda akan berubah menjadi seperti gambar di bawah ini.

Menginstall module dan component lakukan seperti cara-cara diatas. Pesan error yang muncul biasa nya file yang akan di install tipenya bukan .zip atau meskipun sudah .zip di dalamnya masih ada banyak file .zip lainnya. Bila Anda menginginkan mengganti template karena template yang Anda pilih tadi dirasa kurang bagus menurut Anda, maka Anda dapat menginstal template baru dengan melakukan langkah-langkah yang sama seperti diatas, dan sebaiknya template yang lama Anda hapus. MENGEDIT CONTACT US Untuk mengedit Contact Us yang dilakukan terlebih dahulu mengedit contact yang ada di Component. Sekarang Anda klik Component ? Contact. Klik Name. Ganti semua apa yang ada dalam daftar kontak tersebut dengan alamat Anda. Misalnya kita akan mengganti judulnya dengan Kontak Kami, contact position diisi kantor Bank Syariah, alamat di Jl airlangga 10 Surabaya, Telp 031-321321, Miscellanous info ditulis " Jika Anda ingin menghubungi kami secara online, silahkan isi form online di bawah ini" bila memang Anda menginginkan ada kontak online dengan user web Anda, tetapi jika tidak maka sebaiknya tidak diisi. Setelah itu coba Anda perhatikan parameternya. Pilihlah yang sesuai dengan keinginan Anda, misalnya apakah Anda mencantumkan semuanya atau hanya tertentu saja. Hal itu patut Anda pertimbangkan. Selanjutnya Anda simpan. Setelah itu Anda ubah Contact us yang ada di Menu Utama, ganti dengan menggunakan Kontak Kami. Caranya masuk ke Menus ? Main Menu. Pada Main Menu disitu tertulis mempergunakan category contact, sekarang coba Anda rubah menjadi standart contact karena kontaknya tidak membutuhkan banyak alamat hanya satu. Caranya klik Contact Us kemudian klik change type. Ganti menjadi standart contact. Setelah itu judulnya diganti dengan Kontak Kami. Kemudian simpan. Anda akan menemukan gambar seperti dibawah ini.

Sekarang coba Anda refresh tampilan mukanya. Bila Anda mendapati seperti gambar dibawah ini, berarti apa yang telah Anda kerjakan sudah benar.

MEMBUAT AGENDA KEGIATAN Agenda kegiatan dibuat untuk menyampaikan informasi seputar kegiatan yang akan dilaksanakan, apalagi bila kegiatan tersebut ada kaitannya dengan para user akan sangat membantu bagi user. Kegiatan yang diagendakan bisa bersifat sering (mingguan, bulanan) atau yang bersifat jarang (tahunan). Bila mengingat banyaknya agenda kegiatan yang akan ditampilkan, maka Agenda Kegiatan

bisa menggunakan artikel yang berkategori. Untuk membuatnya sebelumnya kita buat Section Agenda dan Category Kegiatan. Setelah itu kita buat item menu Agenda Kegiatan di Menu Utama. Klik New ? Category List Layout. Bila Anda ingin menampilkan agenda kegiatan di halaman muka maka Anda harus menggunakan module, misalnya dengan module newsflash. Caranya Anda masuk Extensions klik module manager kemudian klik New, pilih module newsflash. Anda isi judulnya, tentukan letak posisinya yang sesuai misalnya posisi right, select categorynya dengan memilih agenda/kegiatan. Selanjutnya simpan. Sekarang Percobaan Anda membuat Agenda Bakti Sosial yang dilakukan setiap Minggu pertama tiap 2 bulan sekali ditempat yang telah Anda tentukan sebelumnya. Bila pekerjaan Anda benar maka Anda akan mendapati seperti gambar dibawah ini.

MEMBUAT GALERI FOTO Prosesnya hampir sama dengan membuat agenda kegiatan. Hanya saja untuk membuat galeri foto diperlukan component Phoca Gallery dan tidak memerlukan adanya plugin maupun module, karena kita tidak ingin menampilkan secara tersendiri pada tampilan muka. Tetapi jika anda menginginkan menampilkan galeri foto di tampilan muka maka Anda install plugin dan modulenya. Setelah terinstal, Anda akan diberikan pilihan install atau upgrade. Pilihlah install karena Anda baru pertama kali menginstalnya. Setelah itu Anda akan menemukan gambar dibawah ini.

Pada gambar diatas Anda menemukan control panel bergambar, dimana harus Anda olah sesuai dengan kebutuhan Anda. Misalnya sebelum melakukan proses memasukkan gambar atau foto, Anda buat categorynya terlebih dahulu. Misalnya Anda buat kategori Kegiatan Bank. Kemudian simpan.

Setelah itu klik Image untuk memasukkan foto-foto kegiatan Anda. Isi nama foto Anda misalnya Anda beri nama Bakti Sosial, Pilih category-nya, kemudian klik image. Bila Anda pertama kali mengambil gambar dari file Anda, browse file Anda kemudian upload. Setelah itu untuk menginsert foto tersebut klik tanda panah hijau yang terdapat tulisan insert image. Nama file foto akan muncul pada kotak filename. Anda bisa menambahkan tanggalnya. Setelah itu simpan.

Untuk memunculkannya di tampilan muka harus dipanggil melalui Menu Utama. Caranya dengan masuk ke Menus terlebih dahulu kemudian klik menu utama, lalu klik new dan pilih Phoca Gallery Category Layout. Isi judulnya dengan Galeri Foto, kemudian perhatikan parameters basic, pilih kategorinya. Untuk parameter yang lain bisa Anda abaikan karena semua sudah diatur oleh Joomla. Sekarang Anda bisa melakukan re-fresh tampilan muka. Sekarang Anda perhatikan apakah galeri foto Anda sudah muncul, artinya jika Anda membuka galeri foto melalui Menu Utama maka Anda akan mendapati galeri foto tersebut. Nah, dari situlah Anda dapat mengetahui apakah galeri foto yang Anda buat tadi sudah benar atau masih error. MEMBUAT BUKU TAMU Prosesnya juga sama dengan kedua membuat galeri foto. Untuk membuat buku tamu diperlukan component Phoca Guestbook. Sehingga perlu menginstal component tersebut. Caranya klik install dan browse file com_phocaguestbook_v.1.4.2., kemudian install. Setalah proses install tersebut

berhasil Anda Anda diberikan pilihan install atau up grade. Jika Anda menginstal untuk pertama kali maka Anda klik install, sedangkan upgrade untuk memperbarui component ini. Pada component tersebut yang perlu Anda perhatikan adalah kolom Guestbooks. Anda diharuskan membuat judul buku tamu supaya dapat dipanggil melalui Menu Utama. Untuk itu klik Guestbooks setelah itu klik New lalu isi judulnya dan abaikan kolom yang lain.

Setelah itu simpan. Untuk bisa memanggil Buku Tamu harus membuat item menu pada Menu Utama. Caranya klik Menu Utama ? New ? pilih Phoca Guestbooks. Isi judulnya dan perhatikan select guestbook pada parameters basic, pilih sesuai dengan yang tadi dibuat. Untuk parameter yang lain tidak masalah bila harus diabaikan. Setelah itu Anda simpan. Anda sekarang bisa mere-fresh tampilan muka. Apakah di Menu Utama sudah terdapat item menu Buku Tamu. Jika sudah coba Anda klik Buku Tamu tersebut. Bila Buku Tamu dapat ditampilkan berarti apa yang Anda lakukan tadi sudah benar.