Joomla

Pelatihan WEB DESIGN
HA. Mooduto Rahmat Hidayat Yuhefizar
Workshop WEB DESIGN, 1-4 Juli 2006
Kata Pengantar
Modul WEB DESIGN Content Managemet System dengan Joomla dirancang dan ditulis untuk membantu anda dalam kelancaran kegiatan Workshop WEB DESIGN di Hotel Graha Dinar Bogor pada tanggal 1-4 Juli 2006. Dalam modul ini, anda akan dipandu dalam bentuk tutorial. Untuk memudahkan pembaca, kami juga menyertakan sebuah CD pendamping yang didesain khusus untuk pembaca. CD ini terdiri dari source code seperti komponen, modul dan template dan juga software/tool yang free yang bermanfaat seperti Apache, PHP, MySQL, PhpMyAdmin, NVU dan firefox. Puji syukur ke hadirat Allah SWT atas berkat dan rahmat-Nya sehingga penulis dapat menyelesaikan modul ini. Mudah-mudahan dapat diterbitkan dalam bentuk buku komputer dimasa yang akan datang. Terima kasih sebesar-besarnya kami berikan kepada Joomla-er Germany : Martin Hberle, Nebil Messaoudi, Theresa Rickmann and Frank Ully dalam bukunya Joomla Einsteiger-Tutorial Die erste Website mit einem Content-ManagementSystem Akhir kata, kami berharap modul ini dapat bermanfaat bagi banyak orang. Mohon maaf jika ada kekurangan. Saran dan kritik anda sangat kami harapkan untuk penyempurnaan lebih lanjut.
Padang, Juni 2006 HA Mooduto - Rahmat Hidayat - Yuhefizar
Daftar ISi
Bab I. Website dan Perkembangannya
1.1 1.2 1.3 1.4 Pengertian Website ....... Jenis-Jenis Web ............................................................. Peralatan Dalam Perancangan Web ...................................... Perkembangan Website Saat Ini .......................................... 1 2 3 4
Bab II. Konsep Content Management System (CMS) 2.1 Pengertian CMS ....................................................... 5 2.2 Jenis-Jenis WCMS ... 5 2.3 Kenapa Menggunakan Web Berbasis CMS ..... 6 Bab III. Pengenalan Joomla 3.1 Tentang Joomla .. 12 3.2 Struktur File dan Direktori Joomla .... 14
3.3 3.4 Istilah-Istilah Penting pada Joomla ...................................... 16 Aplikasi Pendukung Joomla .............................................. 16
Bab IV. Installasi Joomla 4.1 Installasi Apache, MySQL dan PHP ................................ 19 4.2 Installasi Joomla ........................................................... 25 Bab V. Konsep Pengelolaan Joomla 5.1 Front End ............................................................. 34 5.2 Back End .................................................................... 36 Bab VI. Administrator Website Joomla 6.1 Konfigurasi Awal ..................................................... 38 6.2 Memilih Template ........................................................ 52
6.3 Mengelola User ............................................................. 64
Bab VII. Memodifikasi Tampilan Joomla 7.1 Mengganti Header ................................................... 75 7.2 Mengganti Footer ......................................................... 78
7.3 7.4 7.5 Mengganti Warna Dasar .................................................... 79 Mengatur Tata Letak ....................................................... 81 Menonaktifkan Fasilitas Yang Tidak di Perlukan ....................... 87
Bab VIII. Mengelola Berita dan Menu 8.1 Static Content ........................................................ 93 8.2 Dynamic Content ......................................................... 103
8.3 Mengelola Menu ............................................................ 114
BAB I
WEBSITE DAN PERKEMBANGANNYA
Perkembangan internet yang sangat pesat telah membuat sebuah dunia baru yang kita sebut dunia maya. Melalui dunia maya ini kita dapat melakukan aktifitas apa saja layaknya seperti dunia real yang dihadapi sehari-hari. Misalnya saja, jika kita hendak membeli sesuatu, kita tinggal mengakses website e-commerce kemudian melakukan transaksi jual beli secara online dan barang yang dibeli akan sampai di rumah kita, Begitu juga halnya, kalau ingin kuliah, kita tinggal mendaftar pada website-website yang menyediakan jasa layanan e-learning, proses perkuliahan dapat dilakukan secara online walau dibatasi oleh jarak Tidak itu saja, sampai dengan pemesanan ticket pesawat, pemesanan makanan, transaksi perbankan, egoverment, dan lain sebagainya, semuanya dapat dilayani oleh internet melalui media yang disebut website. Kalau kita tinjau secara historisnya, website tidak lain adalah salah satu layanan yang di tawarkan oleh internet diantara layanan-layanan lainnya. Website bisa berjalan di internet seperti saat sekarang ini tidak lain adalah berkat penemuan metode pemrograman web yang disebut HTML oleh Tim Barners Lee pada tahun 1989. Tim Barners Lee adalah salah seorang staff ahli dari CERN (Conseil Europeen pour la Recherche Nucleaire), sebuah organisasi penelitian yang berlokasi di jenewa, Swiss. HTML adalah singkatan dari HyperText Markup Language yang merupakan suatu kode semi pemrograman yang menjadi dasar terwujudnya web. Kode-kode yang digunakan dalam HTML disebut Tag. Pada tahun 1994 dibentuklah W3C (World Wide Web Consorsium) sebagai otorita tunggal bagi pengembangan web serta berwenang menetapkan standar yang berlaku di dalamnya. World Wide Web (www) atau web adalah sebuah sistem penyebaran informasi melalui internet. Informasi yang dikirimkan tersebut dapat berupa text, suara (audio), animasi, gambar dan bahkan dalam format video yang dapat diakses melalui sebuah software yang disebut browser, seperti internet explorer, mozilla firefox, opera dan lain-lain. 1.1 Pengertian Website Website adalah keseluruhan halaman-halaman web yang terdapat dari sebuah domain yang mengandung informasi. Sebuah website biasanya dibangun atas banyak halaman web yang saling berhubungan. Hubungan antara satu halaman web dengan halaman web yang lainnya di sebut dengan Hyperlink sedangkan teks yang dijadikan media penghubung disebut Hypertext. Domain adalah nama unik yang dimiliki oleh sebuah institusi sehingga bisa di akses melalui internet, misalnya : lintau.com, yahoo.com, google.com, dan lain-lain. Untuk mendapat sebuah domain kita harus melakukan register pada registar-registar yang ditentukan. Istilah lain yang sering ditemui sehubungan dengan web site ini adalah Homepage. Homepage adalah halaman awal dari sebuah domain. Misalnya, anda membuka
website www.lintau.com, maka halaman pertama yang muncul disebut dengan home page, jika anda meng-klik menu-menu yang ada dan meloncat ke lokasi yang lainnya, itu disebut web page, sedangkan keseluruhan isi/content dari domain tersebut disebut website.
Gambar 1.1 : Contoh Tampilan Website Menggunakan Joomla 1.2 Jenis-Jenis Web Seiringan dengan perkembangan teknologi informasi yang begitu cepat, website juga mengalami perkembangan yang sangat berarti. Dalam pengelompokkan jenis web, lebih diarahkan berdasarkan kepada fungsi, sifat dan bahasa pemrograman yang digunakan. Jenis-jenis web berdasarkan sifatnya : Website Dinamis, merupakan sebuah website yang menyediakan content atau isi yang selalu berubah-ubah setiap saat. Misalnya website berita, seperti, www.kompas.com, www.detik.com, www.polinpdg.ac.id, dan lain-lain. Website statis, merupakan website yang contentnya sangat jarang diubah. Misalnya : web profile organisasi, dan lain-lain.
Berdasarkan pada tujuannya, website terbagi atas : Personal web, website yang berisi informasi pribadi seseorang, Corporate web, website yang dimiliki oleh sebuah perusahaan, Portal web, website yang mempunyai banyak layanan, mulai dari layanan berita, email dan jasa-jasa lainnya. Forum web, sebuah web yang bertujuan sebagai media untuk diskusi. Disamping itu juga ada website e-Government, e-Banking, e-Payment, eProcurement, dan lain sebagainya.
Gambar 1.2 : Website Politeknik Negeri Padang Ditinjau dari segi bahasa pemrograman yang digunakan, website terbagi atas : Server Side, merupakan website yang menggunakan bahasa pemrogram yang tergantung kepada tersedianya server, seperti : PHP, ASP dan lain sebagainya. Jika tidak ada server, maka website yang dibangun menggunakan bahasa pemrograman diatas tidak akan dapat berfungsi sebagaimana mestinya. Client Side, adalah website yang tidak membutuhkan server dalam menjalankannya, cukup diakses melalui browser saja. Misalnya : html.
1.3 Peralatan Dalam Perancangan Web Dalam merancang dan membangun sebuah website yang baik diperlukan beberapa skill. Oleh karena itu biasanya dalam pengerjaan sebuah website dibutuhkan tim, agar tujuan pembuatan web yang baik tercapai. Berikut ini beberapa skill yang sebaiknya di miliki oleh seorang webmaster. Skill dalam bidang bahasa pemrograman, misalnya bahasa pemrograman PHP, ASP, JSP, Javascript, HTML dan lain-lain. Skill dalam bidang desain, misalnya menguasai software photoshop, illustrator, paint shop pro, dan lain-lain. Skill dalam bidang animasi, misalnya menguasai :flash, swish, image ready, swift, gif animator, dan lain-lain.
1.4 Perkembangan Website Saat ini Saat ini website adalah aplikasi layanan internet yang paling banyak di pakai (populer). Sedemikian populernya hingga banyak orang yang keliru mengidentikkan website dengan internet. Hampir 80% layanan internet disedot oleh website. Pertumbuhan website sangat cepat sekali, boleh dibilang setiap hari bermunculan puluhan bahkan ribuan web baru, hal ini tidak terlepas dari pengaruh perkembangan teknologi internet dan teknologi komunikasi data serta banyaknya tersedia tool-tool untuk membuat website secara gratis di internet. Hingga saat ini, jumlah halaman web yang dapat di akses melalui internet sudah mencapai angka miliaran. Faktor utama yang membuat website begitu cepat berkembang adalah karena penyebaran informasi melalui website sangat cepat dan mencakup area yang luas (dunia), tidak dibatasi oleh jarak dan waktu, Disamping itu, saat sekarang juga lagi trend pembuatan website-website pribadi atau blogger, disamping e-banking, ecommerce, e-learning dan lain sebagainya. Kalau dulu kita bertemu rekan kerja atau kawan lama, selalu saling bertukar kartu nama, namun sekarang bukan zamannya lagi, media yang tepat untuk mempromosikan diri adalah melalui website. Nah..mungkin suatu waktu kita bertemu dan pertanyaan saya adalah : Alamat website anda apa ya ?
BAB II
KONSEP CONTENT MANAGEMENT SYSTEM (CMS)
2.1 Pengertian CMS Content Management System atau disingkat CMS adalah suatu metoda dalam mengelola sebuah content/isi. Content bisa berupa teks, suara, gambar video, animasi dan aplikasi lainnya yang disimpan dalam sebuah database sehingga mudah dalam pengelolaannya.. CMS yang banyak dipakai saat ini adalah website CMS (WCMS). WCMS adalah perangkat lunak yang berfungsi untuk membangun dan memelihara/updating web, yang dirancang sedemikian rupa sehingga proses pembuatan dan pemeliharaan web lebih mudah, efektif dan efisien, baik bagi orang yang mengerti tentang teknologi web maupun yang tidak. Kebanyakan WCMS yang banyak beredar di internet saat ini menggunakan : Bahasa Pemrograman PHP Web Server Apache, dan Database MySQL
Ketiga aplikasi tersebut dapat dengan mudah kita peroleh dan yang penting adalah legal, karena aplikasi tersebut berlisensi GNU/GPL. GNU/GPL adalah lisensi yang memperbolehkan kita untuk menyalin, menyebarluaskan, memodifikasi aplikasinya dengan tetap mengacu kepada aturan GNU/GPL tersebut. 2.2 Jenis-Jenis WCMS Berdasarkan pada fungsinya, WCMS dapat di bagi atas : WCMS Portal, adalah sebuah website CMS yang mempunyai banyak layanan, seperti layanan berita, forum, mailing list, email dan lain sebagainya. Misalnya : joomla, mambo, phpnuke, postnuke, dll. WCMS E-Commerce, adalah sebuah website CMS yang bertujuan agar dapat melakukan proses transaksi online. Misalnya : OsCommerce, phpShop dan lain-lain WCMS E-Learning, adalah website CMS yang bertujuan untuk keperluan proses belajar mengajar jarak jauh. Misalnya : aTutor, Moodle dan lain sebagainya. WCMS Forum, adalah website CMS yang menyediakan media untuk proses diskusi secara online, misalnya : phpBB, MyBB, MiniBB dan lain sebagainya. WCMS Gallery, adalah website CMS yang menyediakan wadah untuk menampilkan gallery foto. Misalnya : Galery, Copermine dan lain sebagainya.
Disamping penggolongan diatas, WCMS juga dapat dikelompokkan berdasarkan kepada sifatnya, yaitu : WCMS Komersial, jenis WCMS seperti ini jelas kita harus membayar untuk menggunakannya serta untuk mendapatkan source codenya. WCMS Open Source, ini merupakan jenis WCMS yang paling banyak beredar diinternet,karena bersifat open source dan berlisensi GPL.
2.3 Kenapa Menggunakan Web Berbasis CMS ? Manfaat CMS Selain dari beberapa hal yang telah disebutkan di atas, CMS juga dapat memberikan sejumlah manfaat kepada penggunanya yang dapat dijabarkan sebagai berikut: Manajemen data Ini merupakan fungsi utama dari CMS. Semua data/informasi baik yang telah ditampilkan ataupun belum dapat diorganisasi dan disimpan secara baik. Suatu waktu data/informasi tadi dapat dipergunakan kembali sesuai dengan kebutuhan. Selain itu, CMS juga mendukung berbagai macam format data, seperti XML, HMTL, PDF, dll., indexing, fungsi pencarian, dan kontrol terhadap revisi yang dilakukan terhadap data/informasi. Untuk menggunakan CMS biasanya pengetahuan tentang bahasa pemograman tidaklah terlalu dibutuhkan, karena semua proses berjalan dengan otomatis (WYSIWYG). Begitupula dengan proses update, dapat dilakukan dengan cepat sehingga menjamin kemutakhiran informasi yang ditampilkan. Mengatur siklus hidup website Banyak CMS memberikan fasilitas kepada para penggunanya untuk mengelola bagian atau isi mana saja yang akan ditampilkan, masa/waktu penampilan dan lokasi penampilan di website. Tak jarang sebelum ditampilkan, bagian atau isi yang dimaksud terlebih dahulu di-review oleh editor sehingga dijamin kevaliditasannya. Mendukung web templating dan standarisasi Setiap halaman website yang dihasilkan berasal dari template yang telah terlebih dahulu disediakan oleh CMS. Selain dapat menjaga konsistensi dari tampilan secara keseluruhan, para penulis dan editor dapat berkonsentrasi secara penuh dalam melaksanakan tugasnya menyediakan isi website. Bila isi telah tersedia, maka proses publikasi dapat berjalan dengan mudah karena sudah ada template sebelumnya. Beberapa bagian dari website biasanya telah ditetapkan sedemikian rupa sehingga tidak dapat diubah begitu saja. Hal ini dilakukan untuk memberikan standarisasi kepada seluruh bagian dari website.
Personalisasi website Sekali sebuah isi ditempatkan ke dalam CMS, isi tersebut dapat ditampilkan sesuai dengan keinginan dan kebutuhan dari penggunanya. Terlebih lagi dengan kelebihan CMS yang dapat memisahkan antara desain dan isi, menyebabkan proses personalisasi dapat berjalan dengan mudah. Sindikasi Sindikasi memberikan kemungkinan kepada sebuah website untuk membagi isinya kepada website-website yang lain. Format data yang didukung juga cukup variatif, mulai dari rss, rdf, xml hingga backend scripting. Sama halnya dengan personalisasi, sindikasi juga dapat dilakukan dengan mudah karena isi dan desain telah dibuat terpisah. Akuntabilitas Oleh karena CMS mendukung alur kerja dan hak akses yang jelas kepada para penggunanya, data/informasi yang disampaikan dapat dipertanggungjawabkan dengan baik. Setiap penulis ataupun editor memiliki tugas masing-masing dengan hak akses yang berbeda-beda pula. Dengan demikian setiap perubahan yang terjadi di website dapat ditelusuri dan diperbaiki seperlunya dengan segera. Pemanfaatan CMS Pembuatan website dapat dilakukan dengan menggunakan tools dan cara yang tradisional. Kelemahan dari cara ini adalah kebutuhan akan tenaga kerja yang banyak dan memakan biaya yang besar. Sebagai contoh dalam merubah kata dalam sebuah web page dibutuhkan seorang tenaga ahli yang telah menguasai HTML. Jika sebuah website yang terdiri dari ratusan web page ingin dirubah isi maupun tampilannya maka dibutuhkan beberapa orang tenaga ahli agar perubahan dapat segera teratasi dengan baik dan cepat, tentunya biaya yang besar perlu dikeluarkan itu hal tersebut. Dengan menggunakan CMS pengaturan isi dan penampilan dapat dilakukan oleh user yang tidak menguasai HTML sekalipun. Dalam hal ini web designer berperan dalam merancang penampilan dan isi dari CMS website dan web programmer berperan dalam membuat modul-modul baru untuk diintegrasikan kedalam CMS. Setelah website selesai dibuat proses perawatannya (add, edit, delete) dapat dilakukan oleh user yang telah dilatih dalam menggunakan CMS. Terdapat beberapa keuntungan dalam menggunakan CMS antara lain:

Dapat menampilkan informasi yang up to date, konsisten dan berkualitas. Memiliki fasilitas yang dapat memanfaatkan kembali content yang sudah ada. Meningkatkan produktifitas dan kepuasan dari sebuah team (web designer, web programmer, web administrator). Pembuatan website dapat dilakukan secara desentralisasi (dilakukan oleh beberapa orang dari berbagai tempat). Memiliki fasilitas untuk mendefinisikan alur kerja dari sebuah team dan melakukan pengaturan terhadap proses approval dan pangaturan-pengaturan lainnya.
Memilih CMS Dengan tersedianya berbagai solusi CMS di pasaran, sudah menjadi suatu keharusan bagi kita untuk memilih sebuah CMS yang akan dipakai dengan bijaksana. Sama halnya dengan produk software lainnya, setiap penyedia jasa/produsen CMS tentunya akan menawarkan produk andalan mereka dengan sejumlah feature yang terkadang hampir mirip satu sama lainnya. Tidak jarang pula mereka menawarkan solusi yang lain daripada yang lain, tapi apakah itu yang benarbenar kita inginkan? Ibarat membeli sebuah mobil, kepuasan dalam pemakaian juga memegang peranan penting. Bukan radio, CD player atau AC yang menjadi daya tarik kita membeli mobil tersebut, tapi lebih kepada seberapa jauh mobil tersebut bermanfaat dalam kehidupan sehari-hari. Demikian pula dalam memilih sebuah CMS. Tidak mudah memang menemukan CMS yang benar-benar sesuai dengan kebutuhan kita. Bahkan sudah menjadi suatu hal yang biasa, bila kita senantiasa berganti dari satu CMS ke CMS yang lainnya untuk sekedar mencari tahu atau bereksperimen. Bagi dunia bisnis dan dagang, membeli sebuah CMS adalah sebuah investasi yang harus dapat dihitung 'Return On Investment' (ROI) -nya. Hal ini berarti sebuah CMS itu harus dapat memenuhi kebutuhan saat ini dan kebutuhan di masa yang akan datang dengan segala fungsionalitasnya dan juga memberikan keuntungan. Namun, tidak jarang dikarenakan kurangnya informasi dan pengalaman, investasi tersebut menjadi sia-sia belaka. Suatu hal yang tentunya sangat tidak kita harapkan terjadi. Untuk dapat memilih CMS yang sesuai dengan kebutuhan dan keinginan anda sekaligus memperoleh manfaat yang optimal darinya, beberapa langkah berikut mungkin dapat membantu. 1. Kenalilah terlebih dahulu tujuan dan target yang hendak dicapai dengan penerapan CMS beserta strategi-strategi yang dibutuhkan. Bila dapat ajaklah semua pihak yang berkepentingan. Kemudian rumuskanlah di atas kertas dan usahakan memiliki proyeksi jauh ke depan. Mengidentifikasi kebutuhan dan kemampuan yang anda miliki secara organisatoris, seperti berapa jumlah penulis/editor/pengguna yang ada, lokasi geografis dari pengguna, kemampuan teknis yang dikuasai, jenis isi yang akan dipublikasikan, dan lain sebagainya. Perlu diingat juga, setiap orang memiliki kebutuhan dan kemampuan yang berbeda-beda. Cobalah untuk mencari jalan tengah guna menjembatani perbedaan ini. Menjabarkan kebutuhan teknis yang diinginkan dan yang telah dimiliki, serta waktu yang dialokasikan untuk mengelola CMS. Yang termasuk di sini antara lain berapa jumlah personal IT yang bekerja di organisasi anda beserta keahlian yang dikuasai, hardware dan software yang dimiliki, dan lain sebagainya. Sebuah prinsip yang harus diperhatikan untuk dua poin di atas, lebih baik lebih dari pada kurang. Hal ini diperlukan untuk mengantisipasi hal-hal yang tidak diduga di masa yang akan datang. Menentukan jumlah biaya yang akan dikeluarkan. Jangan sampai besar pasak daripada tiang nantinya.
2.
3.
4.
5.
6.
Setelah tujuan, strategi dan kebutuhan baik secara organisatoris maupun teknis telah teridentifikasi dengan baik, inilah saatnya untuk menentukan jenis CMS apayang akan dipakai. Pilihlah CMS yang paling dapat memenuhi semua kriteria yang telah anda tentukan sebelumnya. Tentunya setelah disesuaikan dengan kemampuan finansial anda, mengingat implementasi dari CMS bukanlah suatu hal yang murah. Hal ini dapat dilakukan dengan cara: a. Mengadakan tender, undanglah penyedia CMS yang anda minati untuk mengikuti tender dan minta mereka memberikan penawaran terbaiknya kepada anda sebagai bahan pertimbangan. b. Melalui demonstrasi langsung dari produk CMS yang ada di pasaran. Dari sini anda dapat melihat dengan mata kepala sendiri, produk mana yang terbaik bagi anda. c. Berdasarkan survey yang dilakukan oleh organisasi profesional independen/konsultan CMS. Secara periodik mereka menyusun daftar CMS beserta kelebihan dan kekurangannya, sehingga memudahkan anda mengadakan seleksi tanpa harus berhubungan langsung dengan para penyedia CMS yang terdapat di daftar tersebut. d. Melalui search engine, mailing list, atau dari mulut ke mulut. Metode ini merupakan metode yang paling mudah untuk dilakukan dan juga tidak mahal. Kekurangannya adalah informasi yang anda peroleh bisa jadi kurang lengkap atau tidak sesuai dengan kenyataan di lapangan. Jadi adakan juga pemeriksaan silang, bila dibutuhkan.
7.
8. Bila anda memilih CMS komersial, perhatikan bahwa anda membeli lisensi yang sesuai dengan kondisi organisasi anda. Tidak kurang dan tidak pula berlebihan. Pergunakanlah pelayanan purna jual dari penyedia CMS anda sebaik mungkin, karena dengan demikian biaya yang telah anda keluarkan dapat berbanding lurus dengan hasil yang diperoleh. Mintalah selalu garansi terhadap produk yang dibeli. 9. Bila anda memilih untuk menggunakan CMS Open Source, perlu disadari bahwa untuk jenis CMS yang satu ini tidak menyediakan pelayanan purna jual seperti halnya CMS komersial. Jadi setiap kali ada permasalahan dalam implementasinya, anda diharapkan dapat mencari jalan keluarnya sendiri. Atau dengan mengunjungi berbagai forum yang telah disediakan. Singkat kata, untuk menggunakan CMS Open Source terkadang membutuhkan usaha lebih keras dan memakan waktu yang banyak. Tapi semuanya dikembalikan kepada anda sendiri sebagai pengguna. 10. Usahakan secara periodik memperbaharui software CMS yang anda pakai, dengan demikian dapat menjamin kemutakhiran software dan anda dapat menikmati semua feature yang ditawarkan dengan baik. Open Source (CMS yang didistribusikan secara gratis ) Paket CMS di bawah ini di distribusikan dan dikembangkan secara bebas oleh pembuatnya, biasanya berupa komunitas tertentu yang berkembang di dunia maya Jenis dari CMS ini diantaranya : Nama Komunitas Zope Midgard Project Nama Produk CMS Content Management Framework Midgard 1.4
OpenCms Cofax OpenACS Apache Project Bricolage PostNuke Joomla Open Source Drupal Xaraya WebGUI Plone eZ Publish Typo3 Campsite
OpenCms Cofax.CMS Open Architecture Community System Cocoon Framework Bricolage PostNuke Joomla Open Source Drupal Xaraya WebGUI Plone eZ Publish Typo3 Campsite
www.phpnuke.com www.joomla.org
www.xoops.com
www.typo3.com
Dilain pihak opensource CMS bisa didapatkan tanpa harus membayar. Opensource CMS juga merupakan produk yang memiliki fitur yang sudah lengkap, stabil, dapat diandalkan dan biasanya dibuat dari server side script yang berlisensi opensource juga. Sebuah perusahaan atau organisasi dapat memilih diantara keduanya tergantung dari strategi dan kebijakan yang ada dari perusahaan tersebut. Perusahaan atau organisasi yang ingin mengimplementasikan CMS sebaiknya perlu mencoba dulu fitur-fitur yang ada dalam opensource CMS. Setelah mengetahui fiturfitur tersebut perusahaan atau organisasi dapat memutuskan apakah akan menggunakan opensource CMS atau mencari proprietary CMS yang memiliki fiturfitur yang diinginkan. Untuk membuat suatu CMS tentunya dibutuhkan tools dan script tertentu. Tools yang dibutuhkan antara lain web browser, web server, database server, script engine, software upload dan script editor. Sedangkan script CMS yang dapat digunakan adalah dengan jenis opensource CMS. Tabel dibawah ini menjelaskan tentang software-software tersebut yang berjalan dibawah sistem operasi Window:

Web Browser (Internet Explorer) Web Server (Apache)
Database Server (MySQL) Script Engine (PHP) Script Editor (Dreamweaver) Software Upload (WS FTP Pro) CMS Script (Joomla Server)
Kesimpulan Mengenai CMS Perkembangan informasi yang sangat cepat di internet menyebabkan kebutuhan akan manajemen informasi yang baik dan efisien semakin meningkat. Berawal dari adanya kebutuhan inilah, lahir Content Management System atau yang lebih populer dengan singkatan CMS. Dengan berbagai kelebihan yang dimilikinya, CMS memberikan kemudahan kepada para pengguna untuk mengelola informasi yang ada di sebuah website tanpa harus tahu sebelumnya tentang segala hal yang bersifat teknis. Pemisahan antara isi dan desain turut menjaga konsistensi tampilan yang mempermudah penggunaan kembali berbagai informasi di website, di samping beberapa manfaat lainnya yang dapat anda baca dalam tulisan ini. Disadari, tidak mudah memang untuk memilih produk CMS yang sesuai dengan kebutuhan dan keinginan pengguna. Terlebih lagi dengan tersedianya berbagai produk CMS di pasaran. Terkadang dibutuhkan juga sedikit eksperimen dan nasib baik. Namun yang jelas, sesuaikanlah selalu dengan tujuan dan target yang hendak dicapai melalui penerapan CMS, di satu sisi. Dan di sisi lainnya, ukurlah seberapa jauh kesiapan organisasi anda baik secara organisatoris maupun teknis untuk menerapkan CMS tersebut. Persiapan dan perhitungan yang matang tentunya akan menjamin keberhasilan implementasi dari CMS. Sehingga investasi yang anda tanam di CMS dapat bertahan lama dan memberikan dampak positif terhadap usaha yang anda lakukan, baik secara langsung maupun tidak langsung. (Disadur dari tulisan Kemas Yunus Antonius _ Pengantar CMS , dipakai atas ijin pemilik kyantonius@kyantonius.com )
BAB III
PENGENALAN JOOMLA
3.1 Tentang Joomla Joomla adalah sebuah Content Managemen System yang dapat digunakan oleh siapa saja untuk keperluan pembuatan website, mulai dari yang sangat sederhana sampai dengan website yang sangat komplek. Berikut beberapa jenis website yang dapat dibangun dengan Joomla :

Website corporate atau portal Website e-commerce Website untuk perusahaan kecil Website untuk organisasi Non-profit Website untuk Pemerintahan Website untuk keperluan intranet Website untuk sekolah dan Perguruan Tinggi Website Pribadi atau blog Website untuk komunitas dan portal Website untuk majalah, koran dan tabloid Dan masih banyak lagi.
Begitu banyak aplikasi yang dapat di handel oleh Joomla, maka tak heran kalau Joomla menjadi pilihan banyak orang dalam pembuatan websitenya, disamping itu, joomla juga mudah di installasi, mudah dalam pengelolaannya dan dapat dimodifikasi sesuai kebutuhan kita. Oleh karena itu Joomla mempunyai prinsip : Flexible, Simple, Elegant, Customizable dan Powerful. Joomla merupakan pengembangan dari open source project Mambo, yang dahulu sering disebut sebagai Mambo Open Source atau MOS. Mambo sebenarnya dikembangkan oleh sebuah perusahaan yang bernama Miro. Miro memberikannya kepada komunitas open source (komunitas pengembang) sebuah variant WCMS yang gratis untuk dikembangkan. Setelah menyerahkannya pada komunitas, MOS berkembang dengan baik. Pada bulan Agustus 2005 terjadi perselisihan prinsip antara pihak komunitas pengembang MOS dengan MIRO . Akibat dari perbedaan prinsip ini, maka beberapa orang TIM MOS keluar dari project tersebut dan akhirnya membentuk project open source baru yang diberi nama Joomla. Kata Joomla sendiri diambil dari kata Jumla, bahasa Suaheli dari penduduk Kenya dan Tanzania di benua Afrika yang berarti all this together .
Gambar 3.1 : Website resmi Joomla Pada tanggal 17 September 2005, direlease Joomla versi 1.0.0. Versi ini merupakan versi alias dari Mambo versi 4.5.3. Berikut perkembangan versi Joomla sampai dengan saat ini : No. 1 2 3 4 5 6 7 8 9 10 Versi 1.0.0 1.0.1 1.0.2 1.0.3 1.0.4 1.0.5 1.0.6 1.0.7 1.0.8 1.0.9 Tanggal Release 17 September 2005 21 September 2005 2 Oktober 2005 14 Oktober 2005 21 Nopember 2005 24 Desember 2005 15 Januari 2006 : 16:00 15 Januari 2006 : 21:00 26 Februari 2006 5 Juni 2006 Code name Sunrise Sunburst Sunset Sunlight Sundial Sunspot Sunscreen Sunburst Sunshade Sunshine
Joomla secara terus menerus dikembangkan melalui berbagai aktivitas oleh komunitas yang sangat aktif dan tertarik dengan sistem ini. Tutorial pada buku ini mengacu pada version 1.0.9.
3.2 Struktur File dan Direktori Joomla Dibagian ini kita belajar tentang struktur file dan Direktory yang digunakan oleh Joomla. Seperti kita ketahui bahwa Joomla adalah sebuah website content management yang powerfull, maka sudah pasti mempunyai banyak file dan direktori. 3.2.1 Struktur File
File yang kita bahas adalah file-file penting yang terletak di root direktori dari server Joomla, yaitu : index.php, merupakan file utama untuk menampilkan halaman web dari Joomla. Beberapa pengaturan joomla terdapat pada file ini. Jika kita mengakses file ini, berarti kita membuka halaman depan dari website Joomla. Misalnya : www.lintau.com/index.php configuration.php, merupakan file yang terbentuk saat kita melakukan proses instalasi Joomla. Pada file ini terdapat pengaturan untuk koneksi ke database, dan pangaturan penting lainnya. Jika file ini rusak, maka website Joomla tidak akan berfungsi. copyright.php, file berisi tentang hak cipta dari website CMS Joomla, walaupun sebenarnya lebih tepat disebut copyleft. license.php, file ini berisi informasi tentang lisensi dari website CMS Joomla. mainbody.php, ini merupakan file pendukung yang sangat penting dalam mengatur tampilan berita di website Joomla. pathway.php, sebuah file yang berfungsi untuk menggambarkan urutan proses dari aplikasi yang ada di Joomla. Struktur Direktori
3.2.2
Joomla mempunyai beberapa direktori yang mempunyai fungsi tersendiri. Setiap direktori mempunya subdirektori dan file-file pendukung sesuai dengan fungsinya. Berikut ini adalah struktur direktori dari Joomla : Administrator, ini merupakan direktori khusus administrator untuk keperluan pengelolaan website Joomla. Mulai dari proses installasi modul, komponen, mambot, bahasa sampai dengan proses maintenance web secara keseluruhan. Cache, sebuah direktori khusus yang berfungsi untuk menyimpan data sementara di komputer pengguna, tujuannya adalah mempercepat proses loading web jika di buka diwaktu lain. Fungsinya sama dengan memori komputer. Components, merupakan directory tempat menyimpan seluruh komponen yang terinstall di website Joomla.. Editor, sebuah direktori yang berfunsgi untuk menyimpan berbagao editor yang dinstall pada website Joomla. Help, sebuah direktori khusus untuk menampilkan bantuan jika kita menemukan kendala dalam menggunakan Joomla. Images, adalah direktori tempat menampung file-file gambar guna keperluan website Joomla. Includes, ini merupakan directory pendukung bagi aplikasi Joomla yang lainnya.
Installation, directori yang digunakan dalam proses installasi website Joomla. Jika proses installasi telah selesai maka direktori ini sebaiknya dihapus, demi pertimbangan keamanan web dimasa dating. Language, sebuah directori khusus untuk menampung jenis-jenis bahasa yang dapat digunakan di website Joomla. Sehingga kita bias membuat sebuah website yang multi bahasa. Mambots, sebuah directori untuk menampung tool tambahan dari Joomla, missal : Mos Images dll. Media , sebuah directori yang diperuntukkan untuk meyimpan dan mengupload file-file ke dalam website Joomla, baik file gambar maupun file video atas animasi. Modules, tempat menyimpan modul-modul yang terinstal di website Joomla. Templates, tempat menyimpan semua template yang terinstal di website Joomla.
Berikut tampilan directory pada Joomla administrator/backups/ administrator/components/ administrator/modules/ administrator/templates/ cache/ components/ images/ images/banners/ images/stories/ language/ mambots/ mambots/content/ mambots/editors/ mambots/editors-xtd/ mambots/search/ mambots/system/ media/ modules/ templates/
3.3 Istilah-Istilah Penting pada Joomla. Banyak istilah-istilah yang kedengaran baru, jika kita betul-betul pemula dengan Joomla. Agar pemahaman kita terhadap Joomla lebih mudah, maka berikut ini diberikan penjelasan terhadap beberapa istilah yang akan sering digunakan nantinya. Module, adalah bagian unit fungsi dari Joomla yang berguna untuk menampilkan fitur-fitur utama joomla serta menampilkan beberapa komponen yang terkait. Secara default, joomla telah menyediakan beberapa modul, seperti : modul banner, menu, login, newsfeed, statistic, arsip, sindikasi, polling dan lain sebagainya serta module-module yang disediakan oleh pihak ketiga. Componen, adalah sebuah aplikasi yang menambah nilai guna dari joomla. Misalnya Komponen weblink, contact form, polling dan lain sebagainya. Mambots, sebuah unit fungsi dari joomla yang disisipkan untuk memanipulasi ataupun menterjemahkan konten yang diproses sebelum ditampilkan. Seperti : Mambots Editor, Mos Image, dan lain sebagainya. Templates, sebuah aplikasi yang berfungsi untuk mengatur tampilan website Joomla secara keseluruhan. Template ini mirip dengan istilah theme di windows atau skin di winamp. Pada template ini diatur sedemikian rupa sehingga website dapat tampil sesuai dengan keinginan kita. Content, semua barita/artikel/module/komponen yang terdapat dalam website secara keseluruhan.
Semua aplikasi pendukung Joomla tersebut terus dikembangkan oleh developer dan pihak ketiga, sehingga saat ini tersedia sampai dengan ratusan ribu module, component, mambots dan templates yang dapat di download secara gratis di internet, walaupun ada beberapa yang bersifat komersial. 3.4 Aplikasi Pendukung Joomla Seperti telah kita bahasa di awal, bahwa Joomla adalah salah satu website yang bersifat Content Management System (CMS) yang sangat banyak digunakan saat ini. Sebagai suatu CMS yang berlisensi GNU General Pubic License http://www.gnu.org/copyleft/gpl.html#SEC1, maka semua aplikasi pendukungannya adalah aplikasi yang berlisensi yang sama. Berikut ini adalah aplikasi pendukung yang mutlak ada sebelum Joomla di install pada komputer anda : Aplikasi PHP, aplikasi PHP mutlak diperlukan karena Joomla sendiri dibuat menggunakan bahasa pemrograman PHP. Aplikasi PHP ini dapat anda download di website resminya : www.php.net
Gambar 3.2 : Website Resmi PHP Untuk langsung menuju ke link downloadnya, silahkan anda buka url : http://www.php.net/downloads.php Web Server Apache, karena Joomla menggunakan bahasa pemrograman PHP, maka diperlukan sebuah server untuk mendukung aplikasi tersebut. PHP adalah bahasa pemrograman web yang bersifat server side. Aplikasi server yang dibutuhkan oleh Joomla adalah Apache. Silahkan di download di alamat www.apache.org
Gambar 3.3 : Website Resmi Apache Sedangkan link downloadnya, http://httpd.apache.org/download.cgi. dapat anda akses pada :
Database MySQL, database MySQL merupakan pilihan Joomla tempat menyimpan seluruh content web. MySQL merupakan Relational Database Management System yang berlisensi GNU/GPL dan dapat di download secara gratis di www.mysql.com
Gambar 3.4 : Webiste MySQL Sedangkan link downloadnya, dapat anda akses pada : http://dev.mysql.com Pastikan semua aplikasi diatas sudah anda download dan telah terinstal dengan baik di komputer anda. Kalau anda mendownload file tersebut secara satu persatu, artinya kita juga menginstal secara satu persatu. Namun untuk memudahkan kita, saat ini banyak juga beredar yang bersifat multi aplikasi, artinya dengan sekali install, ketiga aplikasi pendukung tersebut langsung terinstal dan terkonfigurasi dengan baik. Aplikasi tersebut adalah PHPTRIAD, WAMP (Window Apache Mysql dan PHP), LAMP (Linux Apache Mysql dan PHP), XAMPP, EasyPHP, Dongkrak dan lain sebagainya. Semua aplikasi tersebut dapat berjalan di Joomla, namun perhatikan versinya. Yang terbaik tentu aplikasi dengan versi yang lebih baru dan stabil.
BAB IV
INSTALLASI JOOMLA
4.1 Installasi Apache, MySQL dan PHP Dalam tutorial ini, untuk menginstall aplikasi Apache, MySQL dan PHP, kita menggunakan aplikasi yang bernama WAMP versi 5.1.6.3. Silahkan ikuti panduan berikut ini : Tahap Installasi WAMP5. 1. Copykanlah file installer WAMP5_1.6.3.exe dari CD ke harddisk anda. 2. Lakukan doble klik terhadap file tersebut, sehingga terbuka jendela installasi, seperti berikut :
Gambar 4.1 : Jendela 1 Installasi WAMP 3. Klik tombol Next, sehingga tampil jendela License Agreement berikut :
Gambar 4.2 : Jendela 2 Installasi WAMP
Pada jendela ini dapat kita ketahui bahwa WAMP5 ini mempunyai : Server Apache versi 2.0.55 PHP versi 5.1.4 PHPMyAdmin versi 2.8.0.3 Database MySQL versi 5.0.21
Spesifikasi software diatas sudah sangat mencukupi untuk keperluan JOOMLA agar dapat berjalan dengan baik di localhost (komputer yang belum terhubung dengan internet). Silahkan anda baca agreement yang ditawarkan oleh software ini dengan cara meng-klik scrollbar yang terletak dibagian kanan jendela ini. 4. Klik Option I accept the agreement dan kemudian klik tombol Next.
Gambar 4.3 : Jendela 3 Installasi WAMP Pada jendela ini, kita harus menentukan lokasi folder tempat penyimpanan file-file WAMP nantinya. Secara default WAMP telah menset pada lokasi c:\wamp. Anda dapat merubahnya dengan cara mengetikkan lokasi lainnya atau dengan cara mengklik tombol Browse Untuk saat ini, biarkan saja apa adanya, kemudian klik tombol Next., sehingga tampil jendela berikut :
Gambar 4.4 : Jendela 4 Installasi WAMP Bagian ini menentukan nama folder menu pada menu program di windows anda. Biarkan saja apa adanya pilihan ini. 5. Klik tombol Next, perhatikan jendela yang tampil :
Gambar 4.5 : Jendela 5 Installasi WAMP Silahkan anda klik kotak check box, seperti terlihat pada gambar diatas. Pilihan ini bertujuan agar WAMP otomatis aktif sewaktu system operasi windows di aktifkan. Kalau tidak, anda terpaksa haru sengaktifkan WAMP secara manual setiap kali dibutuhkan. 6. Klik Tombol Next untuk meloncat ke jendela berikutnya :
Gambar 4.6 : Jendela 6 Installasi WAMP Jendela ini sekedar memberitahukan, bahwa sofwatr WAMP siap untuk di install. 7. Klik tombol Install untuk mengeksekusinya, tunggu beberapa saat hingga proses installasi menampilkan jendela berikut :
Gambar 4.7 : Jendela 7 Installasi WAMP Pada jendela ini kita diberi kebebasan untuk menentukan lokasi document root (file-file web), tempat kita meletakkan file-file Joomla nantinya. Secara default WAMP telah menetapkan pada folder www (c:\wamp\www). INGAT : folder www merupakan tempat kita meletakkan seluruh file-file joomla. Untuk saat ini biarkan saja apa adanya. 8. klik tombol OK., sehingga tampil jendela berikut :
Gambar 4.8 : Jendela 8 Installasi WAMP Pada jendela ini, kita diberi kebebasan untuk menentukan aplikasi browser default untuk menjalan joomla nantinya. Biarkan saja apa adanya. 9. Klik tombol Open untuk menyelesaikan proses installasi software WAMP ini. Perhatikna gambar berikut :
Gambar 4.9 : Jendela 9 Installasi WAMP SELAMAT, anda telah sukses menginstall aplikasi WAMP. 10. Silahkan klik tombol Finish dan WAMP akan segera aktif ditandai dengan muncul icon WAMP ( ) pada sebelah kanan taskbar windows anda. Perhatikan gambar berikut :
Gambar 4.10 : Icon aktif WAMP 11. Klik icon WAMP tersebut, sehingga tampil menu seperti berikut :
Gambar 4.11 : Daftar Menu WAMP Anda dapat menggunakan menu-menu tersebut untuk keperluan web nantinya.
12. Anda dapat mencek, apakah server Apache, PHP dan Database MySQL sudah aktif dan berjalan dengan baik, dengan cara : Bukalah browser anda atau Internet Explorer. Ketikkan localhost pada bagian addressnya. Pastikan halaman yang tampil adalah seperti berikut :
Gambar 4.12 : WAMP running Congratullation..sekarang anda sudah siap untuk menginstal Joomla,. 4.2 Installasi Joomla Berikut ini kita akan belajar bagaimana cara menginstal paket Joomla agar dapat berjalan di komputer stand alone/pribadi. Tahap Persiapan Installasi 1. Downloadlah terlebih dahulu paket installer Joomla terbaru versi stabil di website resminya www.joomla.org. Sewaktu buku ini dibuat, versi stabil yang terbaru adalah 1.0.9. Biasanya file paket joomla ini dikompres dalam bentuk file .zip dan atau .tar.gz. Untuk versi 1.0.9 telah kami sediakan pada CD yang disertai bersama buku ini dengan nama file Joomla_1.0.9-Stable-Full-Package.zip. 2. Buatlah sebuah folder khusus untuk meletakkan file-file joomla anda. Folder baru tersebut harus berada pada document root di lokasi c:\wamp\www. Misalnya anda buat sebuah folder dengan nama myweb, sehingga sekarang terbentuk struktur c:\wamp\www\myweb. Perhatikan gambar berikut :
Gambar 4.13 : Struktur Folder WAMP 3. Extraklah file paket Joomla dan tempatkan hasilnya pada older myweb (c:\wamp\www\myweb). Perhatikan gambar berikut :
Gambar 4.14 : Struktur File dan Folder Joomla
SEBELUM MASUK KE TAHAP INSTALASI, PASTIKAN APLIKASI WAMP TELAH BERJALAN DENGAN BAIK.
Tahap Instalasi 4. Selanjutnya, silahkan buka internet explorer, dan di bagian addressnya ketikkan : http://localhost/myweb, jika aplikasi WAMP berfungsi dengan baik, maka di browser anda akan muncul tampilan seperti berikut :
Gambar 4.15 : Jendela Pre-Installasi Joomla Pada jendela ini dijelaskan tentang setting-setting yang dibutuhkan oleh Joomla termasuk setting permission terhadap file dan direktori. Gunakan scrollbar untuk menggeser layar kearah bawah. Semua setting berwarna hijau yang menandakan konfigurasi di komputer kita telah sesuai dengan kebutuhan Joomla, jika tidak, maka akan muncul dalam bentuk warna merah. 5. Klik tombol Next yang terletak di bagian kanan atas untuk masuk ke jendela berikutnya. Perhatikan gambar yang muncul :
Gambar 4.16 : Jendela Licensi Joomla
Jendela ini sifatnya memberitahukan kepada kita tentang lisensi dari Joomla. Joomla merupakan aplikasi yang bersifat open source dengan lisensi GNU/GPL. Gunakan tombol scrollbar di bagian kanan, untuk mengetahui lebih jelas tentang jenis lisensi GNU/GPL ini. Pada prinsipnya jenis lisensi ini, memperbolehkan kepada kita untuk meng-copy, memodifikasi dan menyebarluaskan kembali paket aplikasi tanpa tersandung dengan masalah copyright. Lisensi GNU/GPL terkadang disebut juga copyleft. 6. Klik tombol Next untuk masuk ke tahap berikut :
Gambar 4.17 : Step 1 Installasi Joomla Ini merupakan tahap yang sangat penting, karena disini kita harus menentukan setting untuk database. Hostname, diisi dengan nama komputer yang digunakan untuk menempatkan file-file joomla. Biasanya diisi dengan localhost. MySQL User Name, diisi dengan nama user yang berhak untuk mengakses database. Jika kita bekerja di komputer pribadi, biasanya diisi dengan root. Root merupakan sebuah derajat tertinggi user dalam sebuah sistem komputer. MySQL Password, diisi dengan Password dari database MySQL anda. Untuk kasus localhost dengan user root, maka pilihan password ini di abaikan saja. MySQL Database Name diisi dengan nama dari database MySQL yang akan digunakan untuk menyimpan data nantinya. Misalnya myDB MySQL Table Prefix, isian berfungsi untuk memberi prefix (awalan) dari setiap table yang diinstall nantinya. Dafaultnya adalah jos_ (Joomla Open Source). Tujuannya tidak lain sekedar memberitahukan bahwa table ini
digunakan oleh aplikasi Joomla. Anda boleh saja menggantinya dengan pilihan lain, tapi sangat disaran untuk jangan merubah demi kompabilitas dengan Joomla versi terbarunya nantinya. Kotak Check Box Drop Existing Table, berfungsi untuk menghapus table yang telah ada, jika ini adalah proses installasi kita yang kedua atau lebih. Jika pilihan ini kita beri tanda ceklist, maka data table yang sebelumnya ada akan terhapus, Kotak Check Box Backup Old Table, berfungsi untuk membackup table yang lama, jika ini adalah proses installasi kita yang kedua atau lebih. Jika pilihan ini kita beri tanda ceklist, maka data table yang sebelumnya akan di backup dan tidak akan dihapus, Kotak Check Box Install Sample Data, secara default, pilihan ini telah di ceklist yang menandakan bahwa web Joomla yang kita buat sekarang ini , hasilnya nanti akan diberikan dengan data-data contoh. Pilihan ini sangat bagus di pilih, kalau kita baru pertama kali menggunakan Joomla (Pemula).
7. Untuk latihan saat ini, silahkan anda isi pilihan-pilihan tersebut dengan data berikut : Hostname = localhost. MySQL User Name = root. MySQL Password = dikosongkan saja MySQL Database Name = myDB MySQL Table Prefix = jos_ Kotak Check Box Drop Existing Table = dikosongkan saja Kotak Check Box Backup Old Table = dikosongkan saja Kotak Check Box Install Sample Data = beri tanda ceklist 8. Klik tombol Next, sehingga muncul jendela komfirmasi seperti berikut :
Gambar 4.18 : Konfirmasi Step 1 Joomla Jendela ini meyakinkan kita, apakah setting database yang telah dibuat tadi sudah benar atau belum. 9. Klik tombol OK jika anda merasa setting yang diisi sudah benar. Tunggu beberapa saat, sehingga muncul jendela berikut :
Gambar 4.19 : Step 2 Installasi Joomla Pada langkah ini, kita di suruh memasukan nama dari website yang akan dibuat. Untuk kasus saat ini, kita akan membuat website pribadi. Maka bisa diisi dengan kata-kata Welcome to My Resources Online. Silahkan diisi dengan nama lain sesuai dengan keinginan anda. 10. Silahkan klik tombol Next untuk masuk ke jendela berikutnya :
Gambar 4.20 : Step 3 Installasi Joomla Pada jendela ini kita diberitahu tentang : Alamat URL (Uniform Resource Locator) dari website yang sedang dibuat, yaitu http://localhost/myweb. ini merupakan alamat dari website kita.
Path merupakan lokasi tempat menyimpan file-file aplikasi Joomla pada komputer. Your Email, secara default masih kosong, maka harus di isi dengan alamat email kita. Misalnya : ephi@lintau.com. Admin Password, merupakan password admin yang digunakan untuk masuk ke jendela administrator nantinya. Sebaiknya anda ganti isian password yang ada sekarang dengan password pilihan anda yang mudah diingat.
HATI-HATI : JANGAN SAMPAI LUPA PASSWORD ADMIN ANDA INI

Pilihan File dan Direktory Permission biarkan saja apa adanya karena ini menyangkut masalah hak akses terhadap sebuah file dan directory.
11. Klik tombol Next untuk menuju ke tahap berikutnya. Perhatikan gambar yang muncul :
Gambar 4.21 : Step 4 Installasi Joomla SELAMAT ANDA TELAH BERHASIL MENGINSTALL JOOMLA Sampai tahap ini, anda telah berhasil menginstal paket aplikasi Joomla, namun ada beberapa hal yang mesti anda lakukan dan ketahui : Hapuslah dan atau rubahlah nama folder installation yang terdapat pada c:\wamp\www\myweb. Untuk saat ini, anda cukup ubah nama folder tersebut menjadi installation01, perhatikan gambar berikut :
Gambar 4.22 : Mengganti Nama Folder Installasi Joomla Sebaikanya folder tersebut di hapus,. kalau web anda sudah online diinternet, demi pertimbangan keamanannya. Catat informasi tentang admin login yang diberikan, dalam contoh ini : Username = admin Password = 123456 Ini merupakan data anda yang sangat penting untuk masuk ke jendela administrator web joomla nantinya. 12. Silahkan klik tombol View Site yang terletak di bagian kanan atas, untuk melihat hasil installasi paket Joomla yang telah anda lakukan.
Gambar 4.23 : Tampilan Awal Website Joomla CONGRATULLATION TO YOU 13. Untuk masuk ke jendela Administrator, dari browser anda ketikkan : http://localhost/myweb/administrator sehingga tampil jendela berikut :
Gambar 4.24 : Jendela Login Administrator Silahkan isi user name dengan : admin dan password yang telah anda catat tadi. Dalam kasus dibuku ini passwordnya adalah 123456. 14. Klik tombol Login, sehingga tampil jendela administrator seperti berikut :
Gambar 4.25 : Joomla Untuk saat ini biarkan saja apa adanya, nanti akan kita bahas lebih luas pada bab berikutnya. Sekali lagi Selamat.anda berhak atas secangkir kopi..and relax..
BAB V
KONSEP PENGELOLAAN JOOMLA
Dalam mengelola sebuah website yang dibangun menggunakan Content Management System, seperti Joomla ini, dikenal dua konsep utama, yaitu Konsep Front End dan Konsep back End. Konsep Front End dan Back End mempunyai fungsi yang berbeda tapi saling menunjang dalam proses pengelolaan web. 5.1 Front End Front End merupakan website anda yang sesungguhnya, karena tampilan jendela front end inilah yang akan dilihat oleh public (pengunjung). Tampilan Front End dari Joomla terdiri atas beberapa bagian yang mempunyai fungsi tersendiri. Bagian yang sangat menentukan sekali tampilan sebuah web adalah template. Template adalah suatu struktur dasar yang mengatur tata letak, pewarnaan, jenis huruf, dan lainnya dari website secara keseluruhan. Secara default, Joomla telah menyediakan dua jenis template, yaitu madeyourweb dan rhuk_solarflare_ii. Perhatikan tampilan front end berikut yang menggunakan template default rhuk_solarflare_ii, beserta strukturnya. Berikut penjelasan dari bagian yang ditandai pada front end tersebut berdasarkan nomor urutannya. 1. Top Menu, merupakan deretan menu yang diletakkan pada bagian paling atas dari website, biasanya terdiri dari menu Home, Contact Us, News dan Links. 2. Modul Search, berfungsi untuk melakukan pencarian berita/artikel yang terdapat dalam website. 3. Header, tempat meletakkan logo, gambar, animasi dan lain sebagainya yang selalu muncul di setiap halaman website. 4. NewsFlash, biasanya digunakan untukmenampilkan berita singkat dan penting. 5. Banner, tempat meletakkan banner/iklan dari website. 6. Menu Utama, merupakan menu utama yang selalu muncul di setiap halaman website. 7. Latest News, merupakan sebuah modul yang berfungsi menampilkan judul berita-berita terbaru dari website, jumlah judul yang tampil dapat di setting pada halaman administrator. 8. Popular, tempat menampilkan judul berita yang paling banyak dibaca oleh pengunjung. Defaultnya hanya 5 judul, namun ini bisa diubah sesuai keinginan pada halaman administrator. 9. Komponen Polling, sebuah komponen yang berfungsi layaknya sebuah polling atau jajak pendapat. 10. Other Menu, menu lain yang tidak terdapat pada menu utama.
Gambar 5.1 : Tampilan Default Joomla 11. Content, tempat meletakkan berita atau artikel dari website. 12. Modul Who Is Online, sebuah modul yang berfungsi untuk menampilkan jumlah pengunjung yang sedang online. 13. Login Form, sebuah modul yang berfungsi sebagai media login bagi user yang terdaftar dengan cara memasukkan username dan passwordnya. 14. Content, sama dengan no 11. 15. Syndicate, sebuah layanan, dimana berita yang ada pada website kita dapat juga ditampilkan pada website lain. 16. Footer, bagian yang selalu muncul di bagian bawah setiap halaman web. Biasanya diisi dengan alamat perusahaan, copyright, alamat email website. Secara default berisi keterangan tentang Lisensi dari Joomla. Selain dari bagian-bagian yang disebutkan di atas, masih banyak lagi komponen dan modul serta template yang mendukung tampilan dari website, begitu juga halnya
dengan tata letaknya, bisa diatur serta dapat dipindah-pindahkan sesuai keinginan kita. Semua pengaturan ini dapat dilakukan pada halaman administrator atau Back End 5.1 Back End Back End adalah bagian dari website yang khusus di peruntukan bagi para administrator untuk mengelola websitenya (management web). Semua yang tampil di front end di olah terlebih dahulu pada bagian back end ini. Jendela Back End ini sering juga disebut jendela administrator. Orang yang mempunyai hak akses sebagai administrator disebut admin. Berdasarkan fungsinya admin terdiri atas tiga tingkatan yaitu Super administrator, administrator dan manager. Penjelasan tentang hal ini akan di bahas pada bab berikutnya. Untuk masuk ke halaman back end ini, anda harus memiliki user name dan password sebagai administrator, kemudian dari browser anda ketikkan : http://localhost/myweb/administrator, perhatikan jendela yang muncul berikut :
Gambar 5.2 : Jendela Login Silahkan masukan user name dan password administrator anda. Dalam kasus dibuku ini, kita telah mempunyai user name = admin dan password = 123456. Klik Login. Jika username dan password yang dimasukkan benar, maka akan muncul jendela administrator seperti berikut ini :
Gambar 5.3 : Jendela Administrator Berikut penjelasan dari tampilan yang terlihat sesuai dengan tanda nomor yang diberikan : Nomor 1 Keterangan Kumpulan sederetan menu yang berfungsi untuk mengelola tampilan web secara keseluruhan, masing-masing menu mempunyai beberapa sub menu. Bagian informasi buat admin seperti pesan dan informasi jumlah user yang online, serta faslitas log out (keluar) bagi admin merupakan icon dari menu-menu yang sering digunakan. Semua icon yang ada di bagian control panel ini terdapat juga pada menu bagian atas. Tujuan dari control panel ini tidak lain adalah memudahkan kita dalam mengelola web (jalan pintas). Berisikan informasi terhadap website, berupa : Logged : Menampilkan informasi user yang sedang online Components : menampilkan daftar komponen yang terinstal Popular : menampilkan frekuensi bagian yang dikunjungi pada website. Latest Items : menampilkan content yang terbaru di masukan ke website Menu Stats : menampilkan status menu yang digunakan pada website.
Secara bertahap kita akan bahas lebih fungsi setiap menu yang terdapat pada jendela back end pada bab-bab berikutnya.
BAB VI
ADMINISTRATOR WEBSITE JOOMLA
Administrator website Joomla adalah proses pengelolaan website yang dilakukan oleh user dengan level administrator. Dalam melakukan proses pengelolaan website, seorang administrator harus login terlebih dahulu sebagai administrator melalui jendela : http://www.domainanda.com/administrator atau http://localhost/myweb/administrator, dan dapat juga melalui modul login form yang terdapat pada halaman depan (frontend) website Joomla. Namun proses login yang terakhir ini, seorang administrator hanya bisa mengedit, menambahkan serta mempublish suatu content. 6.1 Konfigurasi Awal Konfigurasi awal yang sebaiknya dilakukan oleh seorang administrator dalam pengelolaan webnya adalah pengaturan pada menu Global Configurationi. Global Configuration merupakan konfigurasi utama dalam Joomla, karena setiap perubahan yang dilakukan pada jendela ini akan berpengaruh pada file configuration.php. Ikuti langkah-langkah berikut untuk mengatur global configuration : 1. Loginlah terlebih dahulu sebagai administrator web 2. Dari jendela administrator yang muncul, klik Configuration, perhatikan gambar berikut : menu Site->Global
Gambar 6.1 : Cara Mengaktifkan Global Configuration Sehingga muncul jendela global configuration seperti berikut :
Gambar 6.2 : Jendela Global Configuration Pada jendela ini terdapat 10 (sepuluh) tab konfigurasi, yaitu : Tab Site Tab Locale Tab Content Tab Database Tab Server Tab Metadata Tab Mail Tab Cache Tab Statistic Tab SEO (Search Engine Optimization) Agar kita dapat melakukan konfigurasi pada jendela ini, maka file configuration.php harus dalam kondisi Writeable. Jika tertulis Unwriteable berarti apapun pengaturan yang diberikan tidak akan tersimpan. Untuk lebih jelas fungsi dari masing-masing item dari setiap tab tersebut diatas, maka akan kita bahas secara satu persatu. 1. Tab Site Tab site ini berfungsi dalam mengatur hal-hal yang berhubungan situs. Perhatikan kembali gambar diatas. Berikut penjelasan dari setiap item konfigurasi. Site Offline, berfungsi untuk mengaktifkan atau menonaktifkan website untuk sementara waktu. Hanya ada dua pilihan, yaitu Yes atau No. Jika kita memilih Yes, berarti website tidak akan aktif. Hal ini biasanya dilakukan jika kita melakukan proses update data yang sangat penting. Jika telah selesai, jangan lupa untuk menset ke pilihan No kembali. Berikut tampilan default jika diset Yes :
Gambar 6.3 : Offline Message Offline Message, adalah pesan yang akan ditampilkan jika pilihan Site Offline di set Yes. Anda boleh mengganti dengan pesan yang ingin disampaikan, misalnya Mohon Maaf, website kami sedang dalam Maintenance. System Error Message, merupakan pesan yang ditampilkan jika terhadi kesalahan pada system. Kesalahan yang sering terjadi adalah adanya gangguan dengan koneksi kepada Database MySQL. Silahkan anda ganti pesan tersebut sesuai dengan keinginan. Berikut tampilan standar jika terjadi kesalahan pada system Joomla.
Gambar 6.4 : System Error Message Site Name, merupakan nama situs yang akan ditampilkan dibeberapa komponen/module dari website serta ditampilkan pada browser sebagai title dari website anda. Perhatikan tampilan berikut :
Gambar 6.5 : Site Name Show Unauthorised Links, jika anda pilih Yes, maka pengunjung akan dapat melihat link-link pada content yang teregister. Biasanya pilihan ini di set NO, karena ada beberapa content di website yang hanya dapat diakses oleh user yang telah terdaftar.
Allow User Registration, jika diset Yes, maka link registrasi yang terdapat pada module login di halaman front end akan ditampilkan dan user dapat mendaftar pada website kita. Perhatikan gambar berikut :
Allow User Registration = Yes
Allow User Registration = No
Gambar 6.6 : Login Form Use New Account Activation, Jika di set Yes, maka user yang mendaftar di website tidak bisa langsung aktif. Proses pengaktifan dilakukan melalui email, karena secara otomatis Joomla akan mengirimkan pesan mengenai tata cara pengaktifan serta passwordnya melalui email. Jika di set NO, maka user dapat mendaftar langsung dan membuat password sendiri. Required Unique Email, jika pilihan ini di set Yes, maka sebuah alamat email hanya bisa mendaftar satu kali di website Joomla. Jika ada yang sama, maka proses pendaftaran akan otomatis di tolak oleh system. Berikut pesan kesalahan yang muncul :
Gambar 6.7 : Aktivasi Via E-mail Jika di set NO, maka tidak ada batasan sebuah email yang sama untuk mendaftar di website Joomla. Front End Login, jika diset Yes, maka module user login (login form) akan ditampilkan pada halaman depan web (front end), Jika diset No, maka halaman login tidak akan tampil, dan itu berarti user tidak bisa mendaftar dan tidak bisa juga login kedalam website. Berikut tampilan modul login form
Gambar 6.8 : Modul Login Form
Pengaturan penampilan setiap modul yang terdapat pada website Jomla, dapat diatur pada menu Module Frontend User Params, jika diset NO maka fungsi parameter user tidak akan aktif. Debug Site, jika diset Yes, jika terjadi kesalahan pada pemrograman PHPnya, maka system otomatis menampilkan pesan kesalahan, sehingga membantu kita untuk menelusuri dimana letak kesalahannya. Default WYSIWYG Editor, pilihan ini berguna untuk memilih editor standar yang digunakan dalam proses pengelolaan website, secara default Joomla telah menyertakan editor TinyMCE WYSIWYG. WYSIWYG kependekan dari What You See Is What You Get, merupakan editor dalam bentuk grafis seperti aplikasi MS. Word, sehingga proses maintenance dan update content di website jadi lebih mudah. Contoh tampilan editor WYSIWYG TinyMCE :
Gambar 6.9 : Editor TinyMCE Masih banyak lagi editor WYSIWYG yang dibuat oleh pihak ketiga, biasanya untuk menambahkam editor ini harus diinstallasi terlebih dahulu sebagai mambots. List Length, Menset jumlah list pada jendela administrator untuk semua user, defaultnya adalah 30, anda dapat merubahnya sesuai kebutuhan. Favourites Site Icon, menentukan jenis kumpulan icon yang digunakan oleh website. Standarnya adalah file favicon.ico. 2. Tab Locale Tab Locale berfungsi untuk mengatur hal-hal yang bersifat local. Perhatikan gamber berikut :
Gambar 6.10 : Tab Locale Language, adalah pilihan untuk menentukan jenis bahasa yang akan digunakan dalam website. Secara default hanya bahasa English yang telah terinstall. Anda dapat menginstal bahasa tambahan, seperti bahasa Indonesia, jerman dan lain sebagainya dari menu Installer->language, yang tentunya terlebih dahulu harus sudah di download file bahasa tersebut. Anda juga dapat mengedit file bahasa yang standar tersebut menjadi bahasa yang diinginkan. Pengaturan ini terletak pada menu Site->Language Manager. Pilih jenis bahasa yang akan di edit kemudian klik icon Edit. Perhatikan contoh berikut : Sebelum di edit :
DEFINE('_CMN_YES','Yes'); DEFINE('_CMN_NO','No'); DEFINE('_CMN_SHOW','Show'); DEFINE('_CMN_HIDE','Hide');
Setelah di edit :
DEFINE('_CMN_YES','Ya'); DEFINE('_CMN_NO','Tidak'); DEFINE('_CMN_SHOW','Tampilkan); DEFINE('_CMN_HIDE','Sembunyikan);
Terlihat bahwa yang boleh diubah adalah bagian akhir yang terdapat dalam tanda kutip satu. Setelah melakukan perubahan jangan lupa untuk meng-klik tombol Save yang terletak dibagian kanan atas.
Time Offset, pilihan ini digunakan untuk menentukan pengaturan waktu menurut aturan GMT, yang akan aktif dalam website. Untuk Negara Indonesia ditambahkan +7 jam. Sehingga tampilan waktu di website akan sesuai dengan negara Indonesia. Server Offset, sekedar memberitahukan kondisi time offset yang aktif pada server saat sekarang. Country Locale, setting untuk pengaturan Negara, secara default adalah en_GB yang menandakan Negara English. Untuk Negara Indonesia, settingnya adalah id_ID, namun sebelum ini diganti sebaiknya terlebih dahulu harus diganti juga setting language ke bahasa Indonesia. Pengaturan ini juga berefek pada penampilan tanggal di website nantinya, dan tentunya juga tergantung kepada kondisi server yang mendukung pengaturan setting negara ini. 3. Tab Content Tab Content merupakan tempat kita melakukan pengaturan-pengaturan terhadap tampilan content di website. Seperti diketahui bahwa kebanyakan informasi yang ditampilkan pad website adalah berupa content. Perhatikan gambar berikut :
Gambar 6.11 : Tab Content Pilihan yang kita pilih hanya ada dua yaitu show/hide atau yes/no. Perhatikan contoh content berikut :
Gambar 6.12 : Tampilan Sebuah Content Berikut ini keterangan dari item yang ada pada tab content ini : Linked Titles, biasanya dari sebuah content yang ditampilkan pada halaman depan adalah paragraph pertama saja, sedangkan paragraph selanjutnya akan ditampilkan jika di klik link Read More. jika pilihan ini di set Yes maka judul dari content fungsinya sama dengan link Read More tersebut. Jika di set No, maka judul dari content tidak akan mempunyai efek jika di klik.
Read More Link, merupakan link yang berfungsi untuk menampilkan content secara keseluruhan, jika jenis bahasanya di set dengan bahasa Indonesia, link ini biasanya diberi nama Selanjutnya atau Selengkapnya Item Rating/Voting, secara default pilihan ini adalah hide. Jika di set show maka sebuah content dapat diberikan fasilitas rating, sehingga dapat dinilai oleh user. Terdapat lima (5) pilihan rating. Pilihan ini baru terlihat jika user membaca content secara keseluruhan (di klik link Read More..), perhatikan content berikut yang ditampilkan ratingnya :
Gambar 6.13 : Item Rating Author Names, pilihan ini digunakan untuk menampilkan nama penulis dari sebuah artikel. Secara default nama penulis ini ditampilkan (show), seperti : Written by Web Master. Created Date and Time, digunakan untuk menampilkan tanggal dan waktu sebuah content di publish ke website. Seperti : Saturday, 1 July 2006. Jam tidak tampil karena tidak di set sewaktu content tersebut di buat. Modified Date and Time, digunakan untuk menampilkan atau menyembunyikan tanggal dan waktu di modifikasi sebuah content yang pernah di publish. Tanggal dan waktu modifikasi ini akan tampil di bagian bawah dari content. Seperti : Last Updated ( Saturday, 1 July 2006 ). Hits, digunakan untuk menampilkan atau menyembunyikan jumlah kunjungan user terhadap sebuah content. PDF Icon, Print Icon dan Email Icon merupakan icon yang ditampilkan pada sebuah content, sehingga content tersebut dapat di baca dalam format file PDF (klik PDF Icon), di cetak dengan printer (klik Print Icon) dan dapat dikirim melalui email dengan mengklik Email icon. Icon-icon ini akan tampil di sebelah kanan atas content jika kita membaca sebuah content dalam kondisi penuh (klik link read more..). Perhatikan tampilan icon berikut : Icons, jika pilihan ini di pilih Show, maka tampilan PDF Icon, Print Icon dan Email Icon seperti gambar diatas. Jika di set Hide, maka icon-icon tersebut akan digantikan oleh teks, karena ada sebagian user yang lebih mengerti dengan tampilan teks daripada icon. Perhatikan tampilan berikut :
Gambar 6.14 : PDF, Print dan E-Mail Icon
Table of Contents on multi-page items, pilihan ini berguna untuk membagibagi sebuah content yang panjang menjadi beberapa halaman, dengan cara menambahkan perintah {mospagebreak} pada baris kosong disetiap akhir sebuah halaman. Efek dari pilihan ini juga akan memunculkan sebuah daftar isi dari jumlah halaman pada content tersebut. Perhatikan tampilan berikut :
Gambar 6.15 : Contents Multi-page Back Button, berfungsi untuk menampilkan atau menyembunyikan tombol back yang terdapat pada setiap content yang sedang dibaca. Jika tombol ini di klik, maka akan kembali ke halaman sebelumnya. Tombol ini selalu terletak dibagian akhir dari sebuh content. Perhatikan gambar berikut :
Gambar 6.16 : Back Button Model tombol ini sangat bergantung kepada jenis template yang digunakan. Content Item Navigation, berguna menambahkan tombol navigasi disetiap akhir content dengan tujuan untuk memudahkan dalam berpindah dari satu content ke content yang lainnya.
Gambar 6.17 : Navigation Button 4. Tab Database Tab database berisi informasi tentang database yang digunakan, user name, password dan lain sebagainya. Data yang ditampil pada jendela adalah hasil dari proses installasi. Perhatikan jendela berikut :
Gambar 6.18 : Tab Database Pada jendela ini terdapat empat item yaitu :
Gambar 6.19 : Konfigurasi Database Hostname, mewakili nama host dari computer server. Defaultnya adalah localhost. MySQL Username adalah nama user yang berhak mengakses database secara langsung. Defaultnya adalah root. MySQL Database adalah nama dari database MySQL yang digunakan. Dalam kasus dibuku ini, kita menggunakan nama database mydb. MySQL Database Prefix, adalah awalan nama table yang digunakan dalam database. Default prefix untuk Joomla adalah jos_ (joomla open source) Sebaiknya jangan melakukan perubahan pada tab database ini, kecuali kalau anda telah memahami prinsip/konsep kerjanya. 5. Tab Server Tab server adalah tempat pengaturan hal-hal yang berhubungan dengan server. Berikut tampilannya :
Gambar 6.20 : Tab Server
Berikut penjelasan dari masing-masing item. Absolute Path, adalah lokasi file-file joomla yang disimpan pada computer server. Dalam kasus dibuku ini kita menyimpannya di folder c:/wamp/www/myweb. Live Site, merupakan alamat situs dari website yang dibuat. Sehingga bisa di akses pada browser menggunakan alamat ini. Dalam kasus dibuku live site http://localhost/myweb. Secret Word, adalah kata-kata unik yang tercipta sewaktu installasi. Berfungsi sebagai bagian dari security web. GZIP Page Compression, pilihan ini berfungsi untuk mengkompress output buffer, sehingga lebih cepat dalam pengaksesan web, tentunya hal ini harus didukung server dari website. Site Session Lifetime adalah jumlah waktu tidak beraktivitas yang diperlukan oleh seorang user yang terdaftar. Jika ternyata si user tidak aktif dalam rentang waktu yang ditentukan (dihitung dalam detik), maka joomla otomatis akan menset log out. Admin Session Lifetime, adalah jumlah waktu standby admin. Jika seorang admin idle (tidak beraktifitas) dalam rentang waktu yang ditentukan, maka joomla otomatis akan menset log out terhadap status admin tersebut. Hal ini dilakukan tidak lain demi masalah security web saja. Bayangkan saja, anda sebagai administrator web setelah login, kemudian meninggalkan computer karena ada keperluan tertentu, sehingga siapa saja yang menggunakan computer tersebut setelah anda pergi, akan dapat merubah-merubah data pada website tersebut. Tapi jika kita set waktu standbynya, maka dalam rentang waktu yang ditentukan, joomla otomatis akan melakukan log out terhadap status admin kita. Remember Expired Admin page, adalah fasilitas untuk mengingatkan si admin, jika tidak aktif dalam rentang waktu yang ditentukan, defaultnya setiap 10 menit. Session Authentication Method, suatu metode untuk autentifikasi dalam hal keamanan dari web. Pilihan ini jangan di ubah, kecuali kalau anda mengerti dan faham dengan fungsinya. Error Reporting, adalah metode pesan error yang diberikan oleh system jika terjadi kesalahan pada website joomla. Terdapat empat pilihan, yaitu : Sistem default, pesan error diberikan dengan mengikuti aturan yang terdapat pada file php.ini. None, pesan error tidakdi tampilkan. Simple, pesan error diberikan dalam bentuk yang lebih sederhana. Maximun, pesan error ditampilkan dalam bentuk yang lebih lengkap.
Help Server adalah alamat web server untuk menu bantuan, apabila anda menemui masalah dengan Joomla. Alamatnya adalah http://help.joomla.org
File Creation dan Directory Creation, adalah suatu metode pengaturan terhadap sebuah file atau direktori yang dibuat, Pengaturan ini ditentukan dalam bentuk hak akses. Lebih di kenal dengan istilah CHMOD (Change Mode). Dalam CHMOD terdapat tiga pilihan hak akses terhadap file/direktori, yaitu level user, group fan world/public dengan tingkatan hak akses read, write dan executable. 6. Tab Metadata Metadata adalah suatu metode dalam dunia web, agar website kita dapat dengan mudah dikenali oleh mesin pencari (search engine). Berikut tampilan item pada tab metadata ini.
Gambar 6.21 : Tab Metadata Global Site Meta Description, adalah tempat menuliskan deskripsi singkat tentang website anda. Global Site Meta Keywords, merupakan kata-kata kunci yang menggambarkan website anda, sehingga mudah di cari oleh search engine. Gunakan tanda koma (,) sebagai pemisah setiap katanya. Semakin banyak kata kuncinya semakin bagus. Misalnya : Joomla, Free, Gratis, Tutorial, CMS dan lain sebagainya. 7. Tab Mail Tab Mail berfungsi mengatur hal-hal yang berkaitan dengan proses pengiriman mail dari server. Perhatikan gambar berikut :
Gambar 6.22 : Tab Mail Mailer adalah jenis pilihan proses pengiriman yang dilakukan oleh server. Terdapat tiga jenis pilihan, yaitu : PHP Mail Function, Sendmail, dan SMTP Server. Mail From adalah alamat email yang mendefinisikan alamat email pengirim pada setiap email yang dikirim melalui website. Secara default adalah alamat email yang diisi sewaktu proses installasi Joomla. From Name, menjelaskan nama dari pengirim email dari web joomla anda. Sendmail Path, SMTP Auth, SMTP User, SMTP Pass dan SMTP Host adalah setting yang harus anda isi, jika pada pilihan Mailer memilih selain dari PHP Mail Function. Silahkan tanya kepada webhosting anda tentang setting tersebut.
Tab Cache Tab Cache berfungsi mengatur proses chacing pada website anda.
Gambar 6.23 : Tab Cache Caching berfungsi untuk memilih apakah fasilitas caching diaktifkan atau tidak. Jika anda pilih Yes, maka halaman web yang pernah diakses akan lebih cepat waktu loadingnya sesuai dengan besaran ukuran pada cache time. Cache Folder sekedar memberitahukan kepada anda bahwa proses caching disimpan pada lokasi folder yang telah ditentukan. Defaultnya adalah C:/wamp/www/myweb/cache Cache Time, adalah lamanya waktu (dalam ukuran detik) sebuah file cache dapat tersimpan pada cache folder. 8. Tab Statistic Tab statistic berfungsi untuk mengatur hal-hal yang berhubungan dengan statistic website anda.
Gambar 6.24 : Tab Statistic Statistic, berisi pilihan no atau yes. Jika anda pilih Yes, berarti fungsi statistic akan akltif di website anda. Data yang akan direkam nantinya adalah jenis Broser, OS, Domain dan Page Impression dari setiap pengunjung. Hasilnya dapat anda lihat pada menu Site->Statistic Log Content Hits by Date, pilihan ini berfungsi apakah anda akan mengumpulkan statistic web berdasarkan tanggal. Jika di pilih Yes, maka anda akan membutuhkan space yang besar untuk menyimpan log statistic setiap harinya.
Log Search Strings, pilihan ini berguna untuk mencatat semua keyword yang digunakan oleh user pada website anda dengan menggunakan fasilitas search yang ada. 9. Tab SEO (Search Engine Optimization) Tab SEO ini berfungsi untuk mengatur konfigurasi Search Engine Optimization pada website anda.
Gambar 6.25 : Tab SEO Search Engine Friendly URLs adalah sebuah pilihan apakah setiap uRL pada website anda akan ditampilkan dalam bentuk yang disukai oleh search engine atau tidak. Secara default tampilan sebuah dapat seperti ini http://domain-anda.com/index.php?option=com_content&task=view&id=1&Itemid=2 ini merupakan jenis URL yang kurang disukai oleh sebuah engine. Jika anda pilih Yes, maka Joomla akan mengganti URL ini dengan menggunakan fasilitas mod_rewrite yang ada pada server Apache menjadi link yang disukai oleh Search engine, seperti berikut : http://domain-anda.com/content/view/4/8 Agar fungsi ini dapat berjalan dengan baik, maka file htaccess.txt yang terdapat pada root direktori web joomla harus diganti menjadi file .htaccess Dynamic Page Titles, pilihan ini berguna untuk menentukan apakah website anda akan menampilkan judul halaman secara dynamic atau tidak sesuai dengan judul content yang sedang dibuka. Menyimpan Hasil Konfigurasi. Setelah anda melakukan semua konfigurasi pada jendela Global Configuration ini, jangan lupa untuk meng-klik tombol save untuk menyimpan konfigurasi ke dalam file configuration.php. 6.2 Memilih Template Template merupakan satu kesatuan struktur yang mengatur penampilan website Joomla anda secara keseluruhan, mulai dari tata letak modul, komponen dan lain sebagainya sampai dengan pengaturan warna dan jenis huruf yang digunakan. Terdapat dua jenis template pada system Joomla, yaitu template untuk situs (template site) dan template untuk halaman administrator (template administrator). Yang dibahas pada buku ini lebih ditekankan kepada template untuk situs, karena template inilah yang akan di lihat dan digunakan oleh user nantinya.
Secara default, Joomla telah menyediakan dua jenis template situs yang dapat anda gunakan. Kedua template tersebut di beri nama madeyourweb dan rhuk_solarflare_ii. rhuk_solarflare_ii adalah template yang otomatis terpilih saat anda selesai menginstall Joomla. 6.2.1 Mengaktifkan dan Menonaktifkan Template
Untuk mengganti jenis template situs yang digunakan, dapat dilakukan melalui menu Site->Template Manager-> Site Template.
Gambar 6.26 : Mengaktifkan Site Template Jika anda belum melakukan modifikasi terhadap template site ini, maka akan muncul tampilan seperti berikut :
Gambar 6.27 : Template Manager Terlihat bahwa yang terpilih menjadi template situs saat ini adalah template rhuk_solarflare_ii, dengan adanya tanda ceklish ( ) pada kolom defaultnya. Jika anda ingin mengganti template default menjadi template madeyourweb, maka anda harus meng-klik option pada bagian kiri template madeyourweb menjadi kondisi terpilih seperti kemudian klik icon default. Sehingga tampilan template manager anda menjadi seperti berikut :
Gambar 6.28 : Mengganti Default Template Dalam dalam kondisi seperti itu, berarti website anda sekarang sudah berganti wajah dengan tampilan template madeyourweb. Silahkan browse website anda dan pastikan tampilannya menjadi seperti berikut :
Gambar 6.29 : Template made your web Dan bandingkan dengan tampilan template rhuk_solarflare_ii dibawah ini :
Gambar 6.30 : Template rhuck_solarflare_ii Terlihat sangat jauh berbeda bukan !, namun anda harus ingat bahwa content dari website tetap sama, yang berganti hanya wajahnya saja. Tersedia ratusan model template yang dapat anda download di internet. Berikut ini keterangan bagian-bagian yang terdapat pada template manager : No. 1 Bagian/Icon Fungsi Menandakan sebuah template dalam kondisi terpilih.
Option
2. 3. Nama salah satu template yang tersedia Template yang bertanda ceklish ini merupakan template default dari website sekarang. Icon yang di klik untuk menjadikan template yang telah dipilih sebagai template default. Icon yang berfungsi untuk memberikan template yang berbeda pada bagian content tertentu. Jika anda meng-klik icon, nanti akan muncul daftar content yang ada. Silahkan pilih salah satu content yang akan menggunakan template yang sedang dipilih. Icon yang berfungsi untuk menghapus template yang sedang terpilih. Icon yang berfungsi untuk mengedit file HTML dari template yang dipilih, file yang di edit tersebut adalah file index.php dari template. File index,php harus dalam kondisi writeable.
Ceklish
4.
5.
6.
7.
8.
Icon yang berfungsi untuk mengedit file CSS dari template yang dipilih, file yang di edit tersebut adalah file template_css.css dari template. File template_css.css harus dalam kondisi writeable. Icon yang berfungsi untuk menginstallasi template yang baru.
9.
6.2.2
Mendownload Template Baru
Seiringan dengan pesatnya perkembangan Joomla, sehingga banyak tenaga volunter atau pihak ketiga yang menyediakan tool-tool pendukung agar website Joomla betul-betul menjadi yang terbaik. Begitu juga halnya dengan template Joomla ini, tersedia ratusan atau bahkan ribuan template Joomla yang beredar di internet dan itu selalu bertambah setiap harinya. Mulai dari template yang berisfat gratis hingga pada yang sifatnya komersial. Gunakan saja search engine untuk menemukan template yang diinginkan dengan cara mengetikkan keyword free template joomla. website bagus yang kami sarankan adalah www.joomlaos.de dan www.joomlaya.com. Pada website tersebut, anda dapat melihat terlebih dahulu screenshot dari templatenya, kalau anda suka baru dilakukan proses pendownloadan. Berikut cara mendownload template di website www.joomlaos.de Pastikan terlebih dahulu computer anda sudah terhubungan dengan internet. Pada browser, ketikkan : http://www.joomlaos.de. Sehingga tampil jendela berikut :
Gambar 6.31 : Website Joomlaos.de Terlihat bahwa website tersebut tidak berbahasa Inggris, namun secara anda akan dapat memahami fungsi dari menu-menu yang ada. Terlihat pada website diatas terdapat tiga jenis template baru yang dapat anda download,
yaitu DJ Template, Siteground, dan Silverflarex. Ingat, tampilan website ini selalu berubah. Untuk saat ini, kita akan mendownload template DJ Template. Silahkan anda klik tempate tersebut, sehingga tampil jendela berikut :
Gambar 6.32 : Memilih Template Klik link Download yang terdapat dibagian bawah dari halan tersebut. Sehingga tampil jendela berikut :
Gambar 6.33 : Mendownload Template Silahkan Klik link Download yang terdapat pada kanan atas. Sehingga tampil jendela konfirmasi berikut :
Gambar 6.34 : Konformasi Pendownloadan Klik tombol Save untuk menyimpannya di harrdisk anda. Dari jendela yang muncul, silahkan anda tentukan lokasi penyimpanan file template ini. Perhatikan contoh berikut :
Gambar 6.35 : Lokasi Penyimpanan File Terlihat saya menyimpannya di sebuah folder yang bernama template, dengan nama filenya dj. Klik Tombol Save untuk benar-benar menyimpannya pada lokasi tersebut. Proses pendownloadan hanya sebentar, karena file template ini di compress dalam bentuk file .Zip. Maka, tidak berapa lama akan muncul jendela berikut :
Gambar 6.36 : Jendela Download Complete Yang menandakan proses download telah selesai. Silahkan anda klik Open Folder, untuk mencek apakah file template tersebut telah tersimpan dengan baik. Perhatikan gambar berikut :
Gambar 6.37 : File yang Telah di Download 6.2.3 Selamat..anda telah sukses mendownload sebuah template baru.. Menginstall Template Baru
Setelah anda mendownload template yang disukai, selanjutnya adalah proses menginstallasi template tersebut pada website Joomla anda. Ikuti tahap-tahap berikut : Loginlah terlebih sebagai administrator pada website anda. Dari halaman administrator, pilih menu Installer->Template Site.
Gambar 6.38 : Cara Mengaktifkan Installer Site Sehingga tampil halaman berikut :
Gambar 6.39 : Jendela Install New Template Sebelum anda melakukan proses installasi, pastikan folder media, administrator templates, templates dan images/stories yang ada gunakan dalam kondisi Writeable. Jika keempat folder tersebut dalam kondisi Unwriteable, maka anda tidak akan bisa melakukan proses installasi template. Pada gambar diatas terdapat tombol : Browse, gunakan tombol ini untuk mencari lokasi file template yang akan anda install. File template biasanya dalam format file kompres. Seperti .zip atau tar.gz. Silahkan anda klik tombol browse ini, dan pilih template yang telah anda download sebelumnya, yang nama filenya adalah dj.zip. Perhatikan gambar berikut :
Gambar 6.40 : Installasi Template
Upload File & Install, merupakan tombol yang harus anda klik setelah melakukan proses browse, tujuannya adalah untuk mengupload file template tersebut serta menginstallasinya. Silahkan anda klik tombol Upload File & Install. Perhatikan jendela yang tampil.
Gambar 6.41 : Jendela Upload Template Muncul pesan Upload template Success yang menandakan bahwa proses upload dan installasi template telah berhasil. Nama template yang baru saja andainstall adalah DJTemplate. Pada gambar diatas juga dijelaskan deskripsi dari template tersebut. Silahkan klik tombol Continue, sehingga anda sekarang berada pada jendela template manager :
Gambar 6.42 : Template Telah Terinstall Terlihat pada gambar diatas adalah template rhuk_solarflare_ii sebagai template default. Berikut ini anda akan belajar bagaimana cara mengganti template default tersebut. Mengaktifkan Template DJ (DJTemplate) Silahkan klik option yang terdapat disebelah kiri template DJTemplate yang baru saja anda install, sehingga menjadi seperti : Selanjutnya klik tombol Default. Sehingga posisi tampilan template manager seperti gambar berikut :
Gambar 6.43 : Mengaktifkan Template Terlihat tanda ceklish ( ) sekarang berada pada posisi DJTemplale, yang menandakan bahwa sekarang yang aktif adalah template tersebut. Silahkan buka halaman web anda untuk melihat hasil akhirnya. Pastikan tampilan akhirnya seperti gambar berikut :
Gambar 6.44 : Template DJ di bawah ini adalah contoh tampilan menggunakan template yang bernama Joomlas.
Gambar 6.45 : Template Joomlas Kemudian bandingkan dengan template yang sebelumnya digunakan (rhuk_solarflare_ii).
Gambar 6.46 : Template rhuck_solarflare_ii Kalau seandainya anda masih kurang puas dengan tampilan template yang ada, pada bab berikutnya kita akan bahas bagaimana cara memodifikasi template sehingga sesuai dengan selera kita, sabar ya.. 6.3 Mengelola User
Dalam konsep Joomla, User adalah pengunjungan yang telah melakukan proses login (memasukan username dan password) melalui modul login form pada frontend atau melalui jendela administrator (backend). Artinya, user adalah orang yang telah terdaftar pada website. Pada Joomla, user di bagi atas dua kelompok (group), yaitu :
Gambar 6.47 : Jenis-Jenis User 1. Kelompok Public Frontend Ini merupakan kelompok user yang melakukan proses login hanya melalui modul login form yang terdapat pada sisi frontend, dan tidak mempunyai akses untuk login melalui sisi backend (administrator). Pada kelompok ini user terbagi atas empat level, yaitu : Registered adalah user yang dapat melakukan proses mengirimkan web link dan mengedit profilnya sendiri, seperti mengganti password, nama dan lainlain. Merupakan level user yang paling rendah. Author, merupakan user yang mempunyai hak seperti user register serta mempunyai hak tambahan untuk mengirim berita/artikel serta mengedit berita/artikel yang dia kirim sendiri. Tidak berhak mengedit berita/artikel kiriman dari user lain. Setingkat lebih tinggi dari user register. Editor, Mempunyai hak seperti user author, namun kelebihannya adalah dapat mengedit berita/artikel, baik kiriman dia sendiri maupun orang lain. Publisher, sesuai dengan namanya, maka kelebihan dari user ini adalah dapat mempublish berita/artikel yang dikirim oleh user, sehingga berita/artikel tersebut dapat tampil di halaman depan (frontend), disamping itu juga mempunyai hak seperti user editor.
2. Kelompok Public Backend Merupakan kelompok user yang dapat melakukan proses login baik dari sisi frontend (login form) maupun dari sisi backend (administrator). User dalam kelompok ini disebut pengelola situs (admin), Setiap user dalam kelompok ini sudah pasti memiliki semua hak akses yang dimiliki oleh kelompok public frontend. Ada tiga tingkat user dalam kelompok ini, yaitu :
Manager Adalah user yang dapat melakukan akses terhadap : Media manager Melihat statistic website Mengedit menu Mengelola content
Administrator Adalah user yang dapat melakukan akses terhadap : Media manager statistic website Mengedit menu Mengelola content Global Configuration Trash manager Menu user Menambah menu Frontpage Manager Archive Manager Komponen Modul Mambot
Super Administrator Adalah penguasa tertinggi dari website Joomla, yang sudah pasti mempunyai semua hak yang dimiliki oleh user. Salah satu kelebihannya dari user administrator adalah mempunyai hak untuk mengakses menu Global Checkin. Global Checkin adalah sebuah menu yang berfungsi untuk mengaktifkan semua content yang dalam kondisi terkunci ( ). Sebuah content dalam kondisi terkunci (check out), tidak akan dapat di edit. Perhatikan gambar sebuah content dalam kondisi terkunci berikut :
Gambar 6.48 : Content dalam kondisi Checkout Sebuah content dapat terkunci, disebabkan oleh : 1. Gagal dalam proses penyimpanan, misalnya, sewaktu proses menyimpan content, tiba-tiba koneksi internet terputus. 2. Sewaktu mengedit sebuah content, tiba-tiba lampu mati. Artinya, content akan terkunci kalau proses pembuatan dan atau pengeditan sebuah content tidak selesai. Maka yang berhak mengembalikan content ke kondisi semula hanyalah user Super Administrator, dengan cara meng-klik menu System-Global Checkin yang terdapat halaman administrator. Berikut contoh proses dari global check-in.
Gambar 6.49 : Global Checkin 6.3.1 Menambah User
Proses penambahan user dapat dilakukan dengan dua cara, yaitu : 1. User mendaftar sendiri. Seorang pengunjung dapat melakukan proses pendaftaran sendiri melalui jendela form login yang terdapat pada tampilan depan (frontend). Perhatikan gambar form login berikut :
Cara melakukan proses pendaftaran oleh user : Klik link Register yang terdapat pada modul login form, sehingga tampil jendela berikut :
Gambar 6.50 : Form Registrasi Name, adalah lengkap anda. Username adalah nama login anda nantinya. E-mail adalah alamat email anda. Password adalah password anda untuk login nanti.
Verify Password, isi dengan password yang sama dengan password yang anda masukan sebelumnya. Ini hanya sekedar verifikasi saja. Silahkan isi form tersebut, dengan catatan ; Semua item wajib isi Username tidak boleh menggunakan spasi Email harus diisi dalam format email, misal : ephi@lintau.net dan jangan memasukan e-mail palsu, karena link aktivasi akan dikirim melalui email yang anda berikan ini. Password minimal 6 karakter.
Berikut contoh pengisian form tersebut :
Gambar 6.51 : Contoh Pengisian Form Registrasi Klik tombol Send Registration, kalau tidak ada kesalahan, maka akan muncul pesan seperti berikut :
Gambar 6.52 : Registration Complete via E-mail Sebuah pesan yang menyatakan bahwa proses registrasi telah selesai dan link aktivasi sudah dikirimkan ke alamat email anda. Silahkan buka email anda dan lakukan proses aktivasi. Jika sudah, maka anda telah terdaftar di website, sebagai user register dan silahkan login melalui modul form login. Proses aktivasi melalui email seperti kasus diatas, terjadi karena dalam pengaturan pada Menu Site->Global Configuration, tab Site di bagian Use New Account Activation di set Yes. Jika pilihan ini anda set No, maka proses registrasi otomatis di aktivasi, maka sewaktu tombol Send Registration, akan muncul pesan seperti berikut :
Gambar 6.53 : Registration Complete
Dan user otomatis langsung dapat melakukan login pada modul login form. Masing-masing metode diatas mempunyai keunggulan dan kelemahan tersendiri. Jadi aturlah sesuai dengan kebutuhan anda. 2. Didaftarkan oleh Administrator Disamping cara diatas, seorang user juga dapat didaftarkan langsung oleh seorang administrator web. Dengan cara berikut : Loginlah terlebih dahulu sebagai seorang administrator. Dari jendela administrator klik menu Site->User Manager
Gambar 6.54 : Cara Mengaktifkan User Manager sehingga tampil form berikut :
Gambar 6.55 : Jendela User Manager Dari jendela diatas terlihat beberapa komponen penting, berikut penjelasannya.
Icon yang terdapat pada toolbar ini, berfungsi jika anda telah melakukan pemilihan (menceklish di bagian nama user, missal : ) terhadap satu atau lebih user, kecuali icon New. Icon Logout, berfungsi untuk menset, seorang user yang sedang login untuk logout.
Icon Delete, berfungsi untuk menghapus status user. Icon Edit, berfungsi untuk mengedit data seorang user. Mulai dari name, username, password, hak akses, email, sampai dengan jenis editor yang dapat digunakan oleh user tersebut. Icon New, berfungsi untuk membuat user baru.
Pada gambar diatas terdapat beberapa informasi, yaitu : Kolom # berisi nomor urut user yang telah terdaftar. Kolom , berfungsi untuk memberi tanda terhadap seorang user, untuk diproses lebih lanjut. Kolom Name, berisi nama lengkap dari seorang user. Kolom Logged In, berisi informasi status user saat sekarang. Jika terdapat tanda ceklish ( ) berarti user tersebut sedang aktif (online). Kolom Enabled. Berisi informasi tentang status user, apakah boleh login atau tidak. Jika boleh maka muncul tanda , jika tidak, maka muncul tanda . Kolom Group, memberikan informasi tentang group dari user. Kolom E-Mail, berisi tentang informasi email user. Kolom Last Visit, berisi keterangan tentang tanggal dan jam terakhir seorang user legin ke website. Kolom ID, berisi noor identitas seorang user.
item yang terdapat pada gambar diatas berfungsi untuk mengatur tampilan user di halaman menu manager sesuai dengan keinginan kita. Pengaturan ini dirasa perlu jika data user sudah banyak. Pilihan Select Group berfungsi untuk menampilkan data user berdasarkan group yang dipilih. Pilihan Select Log Status berfungsi untuk menampilkan data user yang sedang login saja. Cara Mendaftarkan User Baru. 1. Loginlah terlebih sebagai administrator 2. Dari jendela administrator klik menu Site->User Manager 3. Dari jendela yang muncul klik icon New, sehingga tampil jendela form berikut :
Gambar 6.56 : Jendela Uase : Add Isilah data diatas sesuai dengan permintaan user. Untuk group, silahkan anda klik pada level akses yang diinginkan. Pilihan Blok User, berisi No dan Yes. Jika anda pilih Yes, maka user tersebut tidak bias login. Defaultnya adalah No. Pada bagian parameter, anda dapat menentukan jenis editor yang akan digunakan oleh user ini, jika nantinya si user akan melakukan proses pengiriman artikel. Perhatikan contoh pengisian berikut :
Gambar 6.57 : Contoh Mendaftarkan User Baru
4. Jika telah selesai, silahkan anda klik tombol Save yang terdapat dibagian kanan atas jendela user manager ini. Sehingga data user akan bertambah seperti gambar berikut :
5. Jika anda ingin mambatalkan, silahkan klik tombol Cancel. SELAMATAnda telah berhasil menambahkan user batu. Cara Mengedit dan Menghapus User. 1. Loginlah terlebih sebagai administrator 2. Dari jendela administrator klik menu Site->User Manager 3. Dari jendela yang user manager yang muncul, pilih user yang accountnya akan diedit/dihapus :: Mengedit User :: Silahkan anda klik tombol Edit yang terdapat pada icon bar. Sehingga akan tampil data user tersebut. Silahkan anda edit, jika telah selesai jangan lupa untuk mengklik tombol Save untuk menyimpan hasil pengeditan. :: Menghapus User :: Silahkan anda klik tombol Delete, sehingga muncul jendela konfirmasi seperti berikut :
Gambar 6.58 : Jendela Konfirmasi Penghapusan User Jika anda klik OK, maka acoount user tersebut akan terhapus atau klik Cancel untuk membatalkannya. Pada Bab ini anda telah belajar banyak tentang bagaimana cara mengelola website Joomla serta pengelolaan template dan usernya.
BAB VII
MEMODIFIKASI TAMPILAN JOOMLA
Tampilan dasar sebuah website Jomla berdasarkan pada jenis template yang digunakan, semakin bagus templatenya, semakin bagus juga hasil akhirnya. Namun terkadang, sebagus apapun template yang ada, kalau tidak di modifikasi sesuai selera, rasanya masih kurang. Oleh karena itu, langkah awal yang perlu dilakukan adalah proses pemilihan template yang sesuai dengan misi dan visi dari website yang dibuat. Selanjutnya baru dilakukan proses modifikasi. Sebagai latihan dalam buku ini adalah kita akan memodifikasi template rhuck_solarflare_ii, karena ini merupakan template default dari Joomla. Oleh karena itu silahkan di set terlebih dahulu website Joomla anda dengan template defaultnya rhuck_solarflare_ii. Melalui halaman administrator, menu Site-Template Manager->Site Template. Perhatikan gambar berikut :
Gambar 7.1 : Template Manager Ada beberapa hal yang dapat kita lakukan dalam memodifikasi tampilan utama dari website Joomla ini, diantaranya : Mengganti logo atau gambar yang terletak pada bagain header Mengganti Footer Mengedit serta menambahkan menu baru Mengganti warna dasar. Menambahkan banner Mengganti posisi/tata letak dari modul/komponen Menonaktifkan fasilitas yang tidak diperlukan. Dan lain sebagainya. Berikut tampilan utuh dari template rhuck_solarflare_ii :
Gambar 7.2 : Tampilan Template Default Joomla Mengenai fungsi dan nama setiap item yang terdapat pada template Jomla telah kita bahas pada bab V. Silahkan anda pelajari kembali. Intinya, apapun yang terlihat pada tampilan diatas dapat dimodifikasi sesuai selera, karena semua file sourcenya telah tersedia. Agar tampilan website anda lebih bagus dan menarik, alangkah bagusnya jika anda juga menguasai software grafis, seperti photoshop, paint shop dan lain-lain, serta software-software animasi, seperti, Macromedia Flash, Image Ready, Gif Animator, Swiss dan lain sebagainya, Agar panduan yang terdapat dalam buku ini lebih terarah. Maka hasil akhir yang diharapkan nantinya adalah anda dapat membuat, memodifikasi dan memaintenance website Joomla. Berikut tampilan akhir yang diharapkan :
Gambar 7.3 : Tampilan Halaman Web yang Diinginkan
INGAT : Seluruh file yang terhubung dengan sebuah template, tersimpan pada folder Templates yang terdapat pada root directory website anda dan mempunyai sub folder yang bernama Images serta CSS. Folder Images berfung simenyimpan seluruh file-file gambar yang digunakan oleh template, sedangkan folder CSS berisi file CSS template.
7.1 Mengganti Header Header adalah gambar/logo yang terletak di bagian atas web, yang tampil disetiap halaman web. Biasanya pada header ini diletakkan logo perusahaan, foto pribadi, atau animasi yang berhubungan dengan website yang sedang dibuat web. Default header dari template rhuck_solarflare_ii ini adalah :
Gambar 7.4 : Header Template Default File header ini tersimpan pada root directory website anda dalam folder images dari template yang digunakan. Agar lebih jelasnya, perhatikan gambar berikut :
Gambar 7.5 : Lokasi File Header Sangat dianjurkan agar anda betul-betul memahami struktur folder dan directory Joomla, karena segala sesuatunya yang dimodfiikasi banyak berada pada struktur ini. Sebelum dilakukan perubahan terhadap file header ini, ada beberapa hal yang mesti kita ketahui dan siapkan, yaitu : Kita harus mengetahui ukuran dan nama file dari gambar header tersebut. Dalam kasus ini, nama filenya header_short.jpg dengan ukuran .height = 635 px dan width = 150 px. Anda dapat menggunakan software pengolah gambar untuk melihat ukuran file ini. Kita harus menyiapkan file penggantinya dengan ukuran dan format file yang sama. Saya telah siapkan file penggantinya seperti berikut :
Gambar 7.6 : File Pengganti Header Ingat, nama file serta ukurannya harus sama. Untuk mengganti logo/gambar header tersebut, cukup dengan cara mengcopy file pengganti tersebut ke folder images dan timpa file yang lama, sehingga sekarang logo/header website anda sudah berganti dengan yang baru. Silahkan buka browser anda, dan lihatlah perubahannya.
Gambar 7.7 : Hasil Penggantian Header Mudah bukan!!...saatnya uintuk relax men. Nah bagaimana halnya kalau file pengganti yang disediakan tidak sama dengan file dasarnya (header_short.jpg). misalnya file dalam format gif, karena ingin ada animasi ? Yah..ini memang kasus yang sering terjadi, solusinya tentu tidak bisa dengan cara diatas, berikut caranya : Copykanlah terlebih dahulu file pengganti dengan format yang berbeda tersebut ke folder image (sama dengan lokasi file header_short.jpg) tapi tetap dengan ukuran yang sama. Misalnya saya punya file dalam format gif dengan nama file : header.gif. File ini mempunyai animasi. Loginlah anda sebagai administrator. Kemudian klik menu Site-Template Manager->Site Template. Dari template manager yang tampil, pilih template rhuck_solarflare_ii dengan cara meng-klik tombol option yang berada disebelah kirinya.
Klik tombol Edit CSS, sehingga tampil jendela Edit CSS. Kemudian gunakan tombol scrollbar untuk menggeser contentnya sehingga anda menemukan kode berikut :
#header { float: left; padding: 0px; margin-right: 2px; width: 635px; height: 150px; background: url(../images/header_short.jpg) no-repeat;
Perhatikan gambar berikut :
Gambar 7.8 : Mengganti Header Melalui File CSS Perhatikan baris yang terakhir saja, karena perintah menampilkan header terletak pada baris tersebut. Silahkan anda ganti nama file header_short.jpg menjadi header.gif, sesuai dengan nama file yang anda sediakan sebelumnya. Sehingga baris kode tersebut menjadi seperti berikut :
background: url(../images/header.gif) no-repeat;
Klik tombol Save untuk menyimpan perobahan yang anda lakukan. Dan lihat hasilnya di halaman website anda.
SELAMAT. Sampai pada tahap ini anda telah bisa mengganti logo header dengan berbagai cara.
7.2 Mengganti Footer Footer adalah bagian dari website yang terletak di bagian paling bawah dan tampil di setiap halaman web. Biasanya footer ini berisi informasi tentang website, alamat, contact email dan lain sebagainya. Secara default, footer dari template rhuck_solarflare_ii adalah teks dengan tulisan :
2006 adalah tahun yang aktif dari computer server. Welcome To My Resources Online adalah nama dari website anda. Kita akan ganti footer tersebut, dengan kata-kata berikut :
Copyright @ rahmad.web.id | 2006 Silahkan kirim kritik dan saran anda melalui e-mail : rahmat@polinpdg.ac.id
Ikuti langkah-langkah berikut : Aktifkan windows explorer dan buka folder C:\wamp\www\myweb\includes Carilah file dengan nama footer.php yang terdapat pada folder tersebut. Bukalah file tersebut menggunakan editor PHP, kalau tidak ada, bisa menggunakan aplikasi WordPad. Dengan cara meng-klik kanan diatas nama file tersebut, kemudian klik open with dan pilih choose program. Dari daftar program yang tampil, anda klik WordPad kemudian klik tombol OK, sehingga tampil jendela berikut :
Gambar 7.9 : Mengedit File footer.php Perhatikan kode yang ditandai pada gambar tersebut !. Kode atau script tersebut adalah script PHP yang menghasilkan output untuk footer. Silahkan anda ganti kode tersebut dengan kode berikut :
// NOTE - You may change this file to suit your site needs ?> <div align="center"> Copyright @ Workshop WEB DESIGN,rahmad.web.id | 2006 1-4 Juli 2006 </div> <div align="center"> Silahkan kirim kritik dan saran anda melalui e-mail : rahmat@polinpdg.ac.id </div>
Simpanlah perubahan yang anda lakukan, dengan meng-klik tombol save. Kemudian bukalah web anda dan pastikan hasilnya seperti berikut :
7.3 Mengganti Warna Dasar Warna dasar dari template rhuck_solarflare_ii adalah putih. Anda dapat mengganti warna dasar ini dengan warna kesukaan anda. Format pengaturan warna dalam Joomla ini menggunakan konsep RGB (Red, Green, Blue), disimbolkan dengan menggunakan bilangan hexa decimal, seperti : Kode FF.FF.FF 00.00.00 99.00.00 FF.FF.00 FF.00.00 00.FF.FF 11.11.11 22.22.22 66.33.00 00.66.00 00.99.00 FF.FF.CC 00.CC.FF Warna putih hitam coklat kuning merah aqua Hitam agak samar Kelabu Coklat Hijau Hijau Muda Krem Biru
Anda dapat menggunakan software desain grafis atau editor html untuk melihat kode-kode jenis warna yang lainnya. Pada kasus ini, kita akan mengganti warna dasar template menjadi warna aqua dengan kode 00FFFF. Ikuti langkah-langkah berikut : Loginlah anda terlebih sebagai administrator. Kemudian klik menu Site-Template Manager->Site Template. Dari template manager yang tampil, pilih template rhuck_solarflare_ii dengan cara meng-klik tombol option yang berada disebelah kirinya. Klik tombol Edit CSS, sehingga tampil jendela Edit CSS. Kemudian gunakan tombol scrollbar untuk menggeser contentnya sehingga anda menemukan kode berikut :
.outline { border: 1px solid #cccccc; background: #ffffff; padding: 2px;
Perhatikan gambar berikut :
Gambar 7.10 : Mengganti Warna Dasar Perhatikan baris yang dilingkari pada gambar diatas, terlihat bahwa warna background yang aktif saat sekarang adalah ffffff (warna putih). Silahkan anda ganti kode warna tersebut menjadi 00ffff (warna aqua). Sehingga baris kode tersebut menjadi seperti berikut :
background: #00ffff; [00 = angka NOL bukan huruf O besar]
Klik tombol Save untuk menyimpan perobahan yang anda lakukan. Dan lihat hasilnya di halaman website anda.
Berikut contoh hasilnya :
Gambar 7.11 : Hasil Penggantian Warna Dasar 7.4 Mengatur Tata Letak Yang dimaksud dengan mengatur tata letak disini adalah melakukan perubahan terhadap penempatan dari komponen, modul dan content yang ada pada web sesuai dengan lokasi yang diinginkan. Namun sebelum itu akan kita pelajari terlebih dahulu
apa saja posisi penempatan modul/komponen/konten yang terdapat pada template rhuck_solarflare_ii ini. Terdapat beberapa posisi umum dari modul/komponen/component, yaitu : Nama Posisi User3 Lokasi penempatan Space yang terletak di bagian atas template. Biasanya digunakan untuk menempatkan menu bagian atas. Seperti : Home : Contact Us : News : Links. Space yang terletak dibagian kanan atas, yang berfungsi untuk menempatkan modul search. Space yang tersedia di bawah posisi top, biasanya berisi logo/image yang menggambarkan websitenya. Space yang terletak di bawah user4, biasanya space ini di isi oleh modul newsflash. space yang terletak dibagian sebelah kiri dari website, biasanya terdapat modul main menu, user menu, other menu, login form,syindicate, dan lain-lain. space yang terletak dibagian sebelah kanan dari website, biasanya terdapat modul Polls, Whos Online, Random Images, dan lain-lain. Space yang tersedia untuk penempatan banner dari website. Defaultnya terletak di bawah header. Space yang terletak di bawah banner sebelah kiri, biasanya digunakan untuk menempatkan modul Latest News. Space yang terletak di bawah banner sebelahkanan, biasanya digunakan untuk menempatkan modul Popular. Space yang disediakan untuk menempatkan keterangan struktur dari lokasi content yang sedang dibuka. Biasanya berada di bawah header. Misalnya seperti : Lokasi dari setiap posisi diatas sangat bergantung kepada template yang digunakan. Posisi dari setiap modul dan komponen dapat dilihat dari jendela administrator. Klik menu Modules-Site Modules. Setiap posisi tersebut dapat di isi dengan modul dan komponen yang disukai, maupun ditukar lokasinya atau pun dihilangkan sama sekali.
User4 Header Top Left
Right
Banner User1
User2
Pathway
Perhatikan posisi modul dan konten pada template rhuck_solarflare_ii berikut :
Gambar 7.12 : Nama-Nama Bagian Website Untuk latihan, kita akan memindahkan modul Newsflash yang berada pada posisi Top ke posisi Right tepat diatas Komponen Poll. Sedangkan Posisi Top akan di isi dengan Modul Random Image. Ikuti langkah-langklah berikut ini : Loginlah anda terlebih dahulu sebagai administrator web. Dari Jendela Administrator, klik Menu Modules-Site Modules, sehingga tampil jendela berikut :
Gambar 7.13 : Module Manager Dari jendela Module Manager diatas, anda cari modul yang bernama Newsflash.
Kliklah kotak Ceklish yang terdapat disebelah kiri dari modul newsflash, seperti , Klik Tombol Edit yang terdapat dibagian kanan atas. (anda juga bisa masukke halaman edit ini dengan cara meng-klik nama modulnya saja). Perhatikan jendela yang tampil berikut :
Gambar 7.14 : Konfigurasi Modul NewsFlash Untuk saat ini anda cukup mengganti item Position dengan cara mengklik kotak combo box yang disebelahnya, kemudia pilih Right. Klik tombol Save untuk menyimpan perubahan yang anda lakukan. Sampai pada langkah ini anda telah berhasil memindahkan modul newsflash ke posisi Right, namun belum pada posisi diatas komponen Poll. Pastikan anda sekarang kembali berada pada jendela Module manager, dan perhatikan module /komponen yang terinstall pada posisi Right.
Terlihat bahwa modul Newsflah terletak pada urutan no.. 3. Untuk menggesernya menjadi No. 1, anda dapat mengklik tombol reorder ( ) beberapa kali untuk menaikan posisinya, sehingga berada pada nomor urut 1. Sehingga sekarang tampilannya seperti berikut :
Artinya sekarang posisi modul Newsflash telah berada di atas komponen Polls. Buka website anda, dan lihat perubahan yang tampil. Jika tidak terlihat, mungkin anda belum mengklik tombol refresh pada browser yang digunakan.
Efek dari pemindahan tadi adalah posisi Top menjadi kosong. Posisi Top adalah posisi yang tidak boleh kosong, jika kosong, seperti kasus kita ini, maka pada posisi tersebut akan muncul sebuah image yang bertuliskan TOP MODULE EMPTY Untuk mengisi kekosongan tersebut, kita akan menempatkan modul Random image pada posisi tersebut. Modul Random Image adalah sebuah modul yang berfungsi untuk menampilkan image/gambar secara random, setiap kali user mengakses atau meng-klik refresh pada website anda. Berikut tahap yang harus anda lakukan : Menyiapkan gambar yang akan di tampilkan secara random dalam format file yang sama. Misalnya. JPG. Menyiapkan direktori penyimpanan. Tujuannya adalah untuk memudahkan dalam pengelolaannya. Karena ini file images, sebaiknya folder baru tersebut dibuat pada folder images dengan nama Random pada C:\wamp\www\myweb\images, sehingga menjadi : C:\wamp\www\myweb\images\random. Copykanlah seluruh file gambar yangtelah dipersiapkan pada posisi folder random, Perhatikan contoh file yang telah saya copykan :
Gambar 7.15 : Menambahkan Folder Random Saatnya anda untuk login ke website sebagai administrator. Dari Jendela Administrator, klik Menu Modules-Site Modules, sehingga tampil jendela module manager.
Kliklah nama modul Random Image, sehingga tampil jendela Site Module : Edit [ Random Image ]. Kemudian aturlah konfigurasinya seperti gambar dibawah ini :
Gambar 7.16 : Konfigurasi Modul Random Image Beberapa bagian yang berubah settingnya adalah : Show Title Position Width (px) Height (px) = No = Top = 160 = 150
Image folder = /image/random
Pages/items = klik All
Klik tombol Save untuk menyimpan perubahan yang dilakukan. Dan silahkan buka browser anda. Pastikan tampilannya sudah berubah seperti gambar berikut :
Gambar 7.17 : Hasil Konfigurasi Modul Random Image 7.5 Menonaktifkan Fasilitas Yang Tidak di Perlukan Jika kita lihat tampilan awal Joomla, terlihat banyak item yang tampil, padahal item tersebut tidak semuanya diperlukan. Misalnya, ada menu blog, joomla license, wrapper, FAQs, Newsfeed, Joomla Home, Joomla Forums dan lain sebagainya, nah ..bagaimana caranya kita menonaktifkan fasilitas tersebut. Dalam tampilan Joomla, terdapat beberapa item kelompok data, yaitu kelompok Menu, Module dan Component. Sebelum menonaktifkan sebuah item, maka terlebih dahulu anda harus tahu item tersebut masuk kelompok mana, karena setiap kelompok tersebut mempunyai cara yang berbeda dalam pengelolalaannya. 7.5.1 Menonaktifkan Item Menu Untuk latihan saat ini, kita akan menonaktifkan item menu Joomla! License, Blogs, News Feeds, FAQs dan Wrapper. Kesemua item tersebut terdapat dalam modul yang bernama main menu. Perhatikan gambar berikut :
Gambar 7.18 : Modul Main Menu Ikuti panduan berikut :: Loginlah terlebih dahulu sebagai Administrator.
Dari Jendela administrator pilih menu : Menu->Main Menu, sehingga tampil jendela berikut :
Gambar 7.19 : Menu Manager Pada gambar terlihat ada sebuah kolom yang bernama Published. Kolom ini berfungsi memberikan informasi tentang status sebuah item menu, dalam kondisi aktif atau tidak. Kalau pada kolom tersebut bertanda , ini berarti Menu tersebut aktif dan tampil di halaman depan, tapi jika bertanda , berarti menu tersebut dalam kondisi unpublished. Kembali kepada gambar diatas, terlihat kesemua item menu dalam kondisi aktif (Published), artinya semua item menu tampil di halaman depan dalam kelompok modul main menu. Untuk menonaktifkan sebuah item menu, anda tinggal melakukan klik pada tanda yang terdapat pada item menu tersebut. Jika tidak ada masalah, maka tanda tersebut otomatis berubah menjadi tanda . Begitu juga sebaliknya. Silahkan anda lakukan hal tersebut untuk itemmenu dibawah ini : a. Joomla! License, b. Blogs, c. News Feeds, d. FAQs dan e. Wrapper
Sehingga jendela Menu Manager [Mainmenu] akan berubah seperti gambar berikut :
Gambar 7.20 : Mengkonfigurasi Menu Manager Jika sudah seperti terlihat pada gambar diatas, maka sekarang item menu tersebut tidak akan tampil di halaman depan. Perhatikan gambar Modul Main Menu yang telah di rubah.
Gambar 7.21 : Hasil Modifikasi Modul Main Menu Mudah bukan....
7.5.2 Menonaktifkan Modul Kalau seandainya yang akan kita nonaktifkan itu adalah sebuah modul, bagaimana caranya ? Ok.akan kita bahas berikut ini. Dalam latihan ini kita akan menonaktifkan sebuah modul yang bernama Other Menu, karena item menu yang terdapat didalamnya tidak diperlukan. Module Other Menu adalah modul yang terletak di bawah modul main menu. Perhatikan gambar berikut :
Gambar 7.22 : Modul Other Menu Terlihat pada gambar, modul other menu ini tidak menampilkan judulnya. Hal ini bisa saja dilakukan pada Joomla. Judul dari sebuah modul dapat ditampilkan dan dapat juga disembunyikan. Ikuti langkah-langkah berikut untuk menonaktifkan modul ini : Loginlah terlebih dahulu sebagai administrator. Dari jendela administrator pilih menu Modules->Site Modules, sehingga tampil jendelaModule Manager berikut :
Gambar 7.23 : Module Manager Pada gambar diatas terdapat dua kolom utama yang kita bahas, yaitu : Kolom Module Name yang berisi daftar modul yang terisntall di website. Kolom Published, yang menjelaskan unpublish/non aktif dari sebuahmodul. tentang status publish/aktif dan
yang Untuk menonaktifkan, modul Other Menu, anda cuku meng-klik icon terdapat disebelah kanan dari modul tersebut. Sehingga sekarang icon tersebut berubah menjadi icon . Yang menandakan bahwa modul tersebut sekarang sudah tidak aktif lagi. Silahkan anda cek website anda dan pastikan bahwa sekarang tidak ada lagi modul Other Menu tampil di halaman depan.
7.5.3
Menonaktifkan Komponen
Untuk menonaktifkan komponen adalah dengan cara melakukan proses uninstall terhadap komponen tersebut. Untuk latihan, Silahkan anda nonaktifkan (Uninstall) komponen yang bernama Syndicate. Komponen Syndicate adalah sebuah component yang berfungsi sebagai sindikasi, sehingga content yang terdapat pada website kita dapat ditampilkan pada website lain. Berikut ini adalah tampilan dari komponen tersebut :
Gambar 7.24 : Komponen Syndicate Untuk melakukan proses uninstall komponen, dapat dilakukan dengan cara : Loginlah terlebih dahulu ke website sebagai seorang administrator. Dari jendela administrator, pilih menu Installer->Components, sehingga tampil jendela berikut :
Gambar 7.25 : Uninstal Komponen Jendela ini berfungsi untuk menginstall dan menguninstall komponen. Perhatikan item yang terdapat pada kelompok Installed Components. Terlihat pada bagian tersebut terdapat komponen Syndicate. Silahkan anda klik tombol option yang berada di sebelah kiri dari komponen syndicate, sehingga tampilan menjadi :
Klik tombol Uninstall (
) yang terletak dibagian kanan atas dari jendela ini.
Sehingga muncul pesan komfirmasi, seperti berikut :
Gambar 7.26 : Konfirmasi Uninstall Komponen Silahkan anda klik tombol OK untuk melakukan proses uninstall untuk komponen ini, atau klik tombol Cancel untuk membatalkannya. Jika anda klik OK, tunggu beberapa saat, sehingga muncul pesan Succed pada jendela tersebut. SEKARANG PERHATIKAN WEBSITE ANDA. Ternyata component Syndicate masih tetap tampil di halaman web ? Ini artinya bahwa, component syindicate tidak saja dalam bentuk component, tapi juga dalam bentuk Modul. Nah tentu saja Komponen tersebut tidak hilang, karena yang ditampilkan dihalaman depan adalah Modulnya. Untuk menonaktifkan modul ini, silahkan anda baca kembali sub bab sebelumnya (7.5.2 Menonaktifkan Modul). Pastikan modul yang bernama Syndicate sudah ) berubah status publishednya menjadi ( Perhatikan kembali tampilan akhir dari website anda setelah menyelesaikan bab ini. Pada bab selanjutnya kita bahas lebih luas lagi tentang teknik mengelola berita dan menu di website. .
BAB VIII
MENGELOLA BERITA DAN MENU
elebihan utama sebuah website Content Management System adalah kemudahan yang ditawarkan dalam mengelola content. Content yang dimaksud disini adalah berita/artikel yang di tampilkan pada website. Oleh karena itu, pada bab ini kita akan belajar bagaimana cara mengelola berita dan menghubungkannya dengan menu. Dalam konsep Joomla, sebuah content terbagi atas dua kelompok, yaitu : 1. Static Content
2. Dynamic Content Sebelum kita membahas lebih jauh tentang content ini, terlebih dahulu akan dibahas tentang hak akses. Hak akses adalah tingkatan level dari sebuah content, yang terdiri atas : Public, jika sebuah content di beri hak akses ini, berarti content tersebut dapat di baca oleh setiap pengunjung (umum). Registered, berarti content tersebut hanya bisa diakses/dibaca oleh user yang sudah terdaftar. Special, menandakan bahwa content tersebut hanya bisa diakses oleh user yang termasuk kelompok public backend (user manager, administrator dan super administrator) saja.
8.1 Static Content Static Content adalah sebuah content/berita/artikel yang sifatnya jarang diubah, misalnya, content tentang visi dan misi organisasi, struktur organisasi, profile, jenjang pendidikan dan lain sebagainya. Sebuah content yang dibuat dalam model static content ini hanya bisa ditampilkan hasilnya melalui link menu. Misalnya, anda telah membuat static content tentang struktur organisasi, agar struktur organisasi tersebut dapat tampil di halaman depan (frontend), maka anda harus membuat sebuah menu yang link ke static content tersebut. Berikut ini cara membuat sebuah static content : Loginlah terlebih dahulu sebagai administrator. Dari jendela administrator, pilih menu Content->Static Content Manager, sehingga tampil jendela berikut :
Gambar 8.1 : Static Content Manager Terdapat 10 kolom pada jendela tersebut, yaitu : Kolom #, berfungsi menampilkan nomor urutan static content. Kolom Ceklish ( ), berfungsi untuk menandai satu atau lebih static content untuk diproses lebih lanjut. Kolom Title, berfungsi untuk menampilkan judul dari static content. Kolom Published, berfungsi untuk memberikan informasi tentang status sebuah static content. Statusnya ada dua, yaitu Published ditandai dengan icon , yang berarti static content tersebut dapat diakses, dan yang kedua adalah Unpublished ditandai dengan icon , yang berarti static content tersebut tidak bisa diakses. Untuk berpindah dari status published ke unpublished atau sebaliknya, dapat dilakukan dengan meng-klik icon tersebut. Kolom Order, menampilkan informasi tentang urutan static content tersebut. Kolom Access, memberikan informasi tentang siapa yang berhak mengakses static content tersebut, lihat kembali keterangan tentang hak akses di awal bab ini. Kolom ID, sekedar informasi yang diperlukan oleh Joomla untuk menandakan identitas dari sebuah static content. Kolom Link, memberikan informasi tentang jumlah link yang terhubung ke static content tersebut. Kolom Author, menampilkan informasi tentang penulis static content tersebut. Kolom Date, berisi informasi tentang tanggal dipublishnya static content ini. Disamping informasi diatas, sebuah static content juga dilengkapi oleh icon-icon. Icon-icon ini berfungsi jika sebelumnya anda telah menandai satu atau lebih static content, kecuali untuk icon New. Perhatikan tabel berikut : Icon Fungsi Icon ini berfungsi untuk membuat static content menjadi bisa diakses. Fungsi adalah kebalikan dari fungsi icon publish, yaitu menonaktifkan satu atau lebih static content yang dipilih. Memindahkan satu atau lebih static content ke folder trash, sehingga tidak bisa diakses lagi. Trash ini mempunyai prinsip kerja yang sama dengan recycle bin di windows. Berfungsi untuk mengedit isi dan konfigurasi lainnya terhadap static content.
Berfungsi untuk yangbaru. Membuat Static Content Baru
membuat
sebuah
static
content
Silahkan klik icon New, sehingga tampil jendela Static Content Item :New, kemudian isilah seperti gambar berikut :
Gambar 8.2 : Contoh Mengisi Static Content Klik tombol Save yang terdapat pada bagian kanan atas, untuk menyimpan static content ini. Sehingga sekarang anda sudah mempunyai 2 static content. Perhatikan gembar berikut :
Gambar 8.3 : Static Content Telah Ditambahkan 8.1.1 Mengenal Editor Untuk Content
Editor merupakan sebuah aplikasi tempat anda mengetikkan sebuah content. Editor secara umum terbagi dua, yaitu Editor WYSIWYG, merupakan editor yang didukung aplikasi grafis, seperti MS. Word , sehingga sangat memudahkan dalam mengelola content. Secara default, Joomla telah menyediakan sebuah editor WYSIWYG yang bernama TinyMCE, dan ini merupakan editor default dari Joomla. Editor No WYSIWYG. Merupakan editor yang berbasis teks saja, seperti aplikasi Notepad. Editor ini lebih sederhana dan tentu saja proses loadingnya juga lebih cepat disbanding dengan editor WYSIWYG.
WYSIWYG merupakan singkatan dari What You See Is what You Get, maksudnya adalah seperti apa tampilan sewaktu anda mengetikkan sebuah content di editor WYISWYG, maka seperti itu pula nanti hasilnya yang diperoleh. Artinya kita sudah dapat melihat hasil akhir dari content yang sedang dibuat. Anda dapat saja mengganti editor standard untuk website, dengan cara mengganti konfigurasi pada bagian Global Configuration. Pada kesempatan ini, kita akan membahas beberapa fungsi yang terdapat pada editor TinYMCE. Perhatikan gambar berikut :
Gambar 8.4 : Menggunakan Editor Berikut beberapa keterangan dari icon-icon yang terdapat pada gambar editor diatas : Icon Fungsi Cetak tebal, miring, garis bawah dan mencoret teks yang di pilih/diblok. Mengatur perataan, rata kiri, tengah, kanan, dan rata kirikanan. Membuat daftar (list) dengan bul Icon untuk membuat Link, Unlink, dan anchor dari teks yang disorot. Untuk memasukkan gambar kedalam content. Untuk menghilangkan kode-kode default dari program penyunting teks ketika anda melakukan copy artikel dan mem-paste-kannya di editor TinyMCE ini. Help, masuk ke jendela HTML dan Preview content. Find dan Find and replace Memasukan tanggal dan jam Menambahkan symbol-simbol emosi. Membuat teks subscript dan superscript Memasukan file Flash dan Tabel. Lebih Lanjut Dengan Konfigurasi Static Content.
8.1.2
Sewaktu anda melakukan proses penambahan atau pengeditan dari sebuah content, terdapat 5 tab konfigurasi yang seharusnya anda lakukan, konfigurasi tersebut terletak disebelah kanan editor. Perhatikan gambar berikut :
Gambar 8.5 : Tab Publishing Pada Content Tab Publishing Berfungsi mengatur hal-hal yang berkaitan dengan publish sebuah content. Berikut item-item yang terdapat pada tab ini : State, memberikan informasi tentang satus dari content. Terdapat dua kondisi, yaitu Published, content dapat diakses dari frontend dan Draft Unpublished, content tidak dapat di akses dari halaman depan, biasanya masih bersifat draft. Published, berfungsi untuk mengatur, apakah content tersebut akan di publish atau tidak. Jika akan dipublish maka checkbox disebelah kanannya harus anda klik sehingga tampil seperti Access Level, berfungsi untuk menentukan level akses dari sebuah content. Author Alias, kotak isian ini berfungsi untuk mengganti nama penulis dari suatu content dengan nama lain. Change Creator, kotak pilihan ini berfungsi untuk mengganti pembuat dari suatu content. Kotak pilihan ini akan terisi secara otomatis, sesuai dengan tingkatan user yang berhak untuk mengirim content. Override Created Date, berfungsi untuk mengganti tanggal pembuatan sebuah yang terdapat pada bagian kanan item ini, content. Silahkan anda klik tombol sehingga tampil :
Gambar 8.6 : Mengisi Tanggal Content Silahkan anda pilih tanggal dengan tanggal dan atau tahun yang baru. Start Publishing, adalah tanggal mulai sebuah content ditampilkan. Jadi anda bisa saja mengatur penampilan sebuah content sesuai dengan tanggal yang diinginkan. Finish Publishing adalah tanggal berakhirnya sebuah content untuk tampil atau bisa diakses dari frontend. Jika ingin content ini tampil seterusnya, maka kotak isian ini anda isi dengan kata Never. Jika anda misalnya, berhalangan untuk mengupdate situs dalam waktu yang cukup lama, maka anda bisa menyiapkan contentnya saat ini, namun setiap content anda atur start publishingnya, misalnya per hari, maka otomatis situs anda akan selalu terlihat di update. Images
Tab Images ini berfungsi untuk mengatur penampilan image dalam sebuah content. Images yang anda pilih, baru akan tampil dalam sebuah content, jika anda telah memberikan perintah {mosimage} pada lokasi gambar akan ditempatkan. Perintah {mosimage} ini anda ketikkan pada jendela editor atau dengan cara meng-klik icon yang terdapat dibagian bawah editor. Anda harus memberikan perintah {mosimage} sesuai dengan jumlah gambar yang dimasukkan ke sebuah content. Perhatikan gambar berikut :
Gambar 8.7 : Tab Images Pada Content Gallery Images, adalah daftar gambar yang dapat dimasukkan kedalam sebuah content. Daftar gambar tersebut otomatis diambil dari C:\wamp\www\myweb\images\stories atau root webanda/imafes/stories. Jika anda punya gambar lain, maka harus anda masukan ke dalam folder tersebut. Dan anda juga dapat membuat subfolder dalam forlder tersebut. Jika anda pilih salah satu gambar, maka otomatis akan ditampilkan gambarnya di bagian sample images. Icon , berfungsi untuk memindahkan gambar yang anda pilih dari Gallery Images ke bagian Content Images. Icon , berfungsu untuk memindahkan gambar yang anda pilih dari Content Images ke bagian Gallery Images.
Content Images, adalah daftar gambar yang akan ditampilkan dalam sebuah content. Gambar disini akan ditampil dalam sebuah content sesuai dengan urutannya dan tentunya sesuai dengan jumlah perintah {mosimage} yang diberikan pada editor. Jika anda klik salah satu gambar, maka akan ditampilkan gambarnya di bagian Active Images. , berfungsi untuk mencari gambar lain dalam sub folder yang terdapat dalam folder images. Defaulnya Joomla telah menyediakan dua buah sub folder, yaitu food dan fruit. Source, menampilkan nama file dari gambar yang dipilih. Anda dapat saja menggantinya dengan file yang lain. Align, berfungsi untuk mengatur tampilan gambar nantinya, terdapat empat pilihan, yaitu None (dibiarkan apa adanya), Center (rata tengah) , Left (rata kiri) dan Right (rata kanan). Alt Text, adalah pesan yang akan muncul jika pengunjung mengarahkan mousenya diatas gambar ini. Sesuaikan isianya dengan gambar yang sedang dipilih. Border, adalah perintah untuk memberi bingkai pada gambar yang dipilih, jika di isi dengan 0, berarti tidak di beri bingkai. Jika anda ingin memberi bingkai, isilah dengan nilai 1. Anda dapat saja mengisi dengan nilai yang lebih besar dari 1, jika ingin lebar bingkai yang lebih besar. Perhatikan gambar di bawah ini :
Di beri nilai 0
Nilai 1
Nilai 5
Gambar 8.8 : Pengaturan Border Pada Images Caption adalah nama dari gambar yang dapat diatur penempatannya dibagian caption position (atas atau bawah) dan Caption align untuk mengatur perataannya. Misalnya, gambar jam diatas, saya isi dengan : Clock pada bagian caption, kemudian saya pilih Bottom dibagian caption position dan Left dibagian caption alignnya, maka tampilannya menjadi seperti berikut :
Gambar 8.9 : Images Menggunakan caption Width, diisi dengan nilai yang mengatur lebarnya gambar, misalnya 100, 200. dan lain sebagainya.
, adalah tombol yang wajib anda klik jika melakukan perubahan terhadap gambar yang akan ditampilkan. Perhatikan contoh berikut :
Gambar 8.10 : Cara Menggunakan {mosimage} Hasilnya adalah :
Gambar 8.11 : Content Yang Menggunakan Image Parameters Berisi beberapa pengaturan yang sifatnya mengubah dari pengaturan yang diberikan pada Global Configuration, dan pengaturan yang diset pada tab ini hanya berfungsi untuk content yang sedang di olah. Perhatikan tab parameter berikut :
Gambar 8.12 : Tab Parameter Pada Content Perhatikan pilihan Back Button, Item Rating, Author Names, Created Date and Time, Modified Date and Time, PDf Icon, Print Icon dan Email Icon, kesemua item tersebut juga terdapat pada bagian Global Configuration. Jika kita pilih option Use Global artinya kita menggunakan aturan yang terlah diatur pada bagian Global Configuration. Alternatif lain yang bisa pilih adalah Hide untuk menyembunyikan atau Show untuk menampilkannya. Misalnya, pilihan Author Names, dibagian global configuration anda set Show, namun pada bagian tab parameter ini anda set Hide, maka Author Names tidak akan ditampilkan dalam content tersebut. Ingat : Global Configuration berlaku umum, sedangkan tab Parameter hanya berlaku untuk artikel tertentu saja. Meta Info
Meta Info berfungsi untuk memberikan penjelasan tambahan dan keywords terhadap sebuah content, tujuannya adalah untuk memudahkan search engine menemukan content tersebut. Perhatikan contoh isian berikut :
Gambar 8.13 : Tab Meta Data Pada Content Link To Menu
Berfungsi untuk membuat content yang sedang diolah dapat langsung terhubung ke modul menu yang ada. Perhatikan gambar berikut :
Gambar 8.14 : Tab Link To Menu Pada Content Misalnya : kita akan menghubungkan static content dengan judul Tentang Saya kedalam modul Mainmenu. Sebelumnya, pastikan anda telah membuka static content Tentang Saya yang telah dibuat diawal materi ini, kemudian klik tab link menu, sehingga tampil seperti gambar diatas. Berikut caranya : Pada pilihan select a Menu, pilihlah mainmenu, karena kita akan menghubungkannya dengan modul. Pada Menu Item Name anda isi dengan nama About Me Klik tombol Link to Menu, sehingga sekarang static content ini telah terhubung dengan modul mainmenu, perhatikan informasi tambahan yang diberikan :
Gambar 8.15 : Content Yang Terhubung ke Menu Silahkan buka website anda, dan pastikan sekarang sudah terdapat sebuah item menu dengan nama Aboutme pada modul main menu. Lihat gambar berikut :
Gambar 8.16 : Tampilan Content Pada Menu Otomatis item menu tersebut menempati posisi paling bawah dari item menu yang lainnya. Anda dapat saja mengatur posisi ini dari jendela administrator, bagian main menu. :: LATIHAN :: Buatlah static content dengan judul seperti di bawah ini dan dengan data anda sesuikan sendiri. My Studi [ Berisi informasi tentang pendidikan anda ] My Activity [ Informasi tentang aktifitas hidup anda sehari-sehari] My Family [ Berisi informasi tentang keluarga anda ] My Portofolio [ Berisi informasi tentang portofolio anda ] Sangat disarankan untuk setiap static content diatas diserta dengan gambar. INGAT : latihan ini harus di kerjakan, kalau tidak nanti anda akan menemui kendala dalam bab berikutnya. 8.2 Dynamic Content Kalau melihat kepada namanya, Dynamic Content berarti content yang dinamis, yah..benar, dynamic content adalah sebuah content yang selalu berubah, yang berubah bukan contentnya tapi jumlah contentnya. Berbeda halnya dengan static content, yang hanya akan tampil hasilnya jika di klik link melalui menu, maka dynamic content adalah content yang otomatis tampil di halaman depan jika telah diset publish. Dalam konsep Joomla, dynamic content di olah berdasarkan atas section dan category. Tujuannya adalah untuk memudahkan dalam mengelola content yang banyak jenis dan modelnya. Sebuah content dapat juga ditampilan berdasarkan section atau category-nya saja 8.2.1 Section dan Category
Section adalah kelompok utama dari sebuah dynamic content, sedangkan Category adalah bagian dari sebuah section. Sebuah section dapat memiliki satu atau lebih category, namun tidak begitu sebaliknya. Misalnya kita akan membuat sebuah dynamic content dengan nama : section category = Campus News = 1. Berita Jurusan 2. Berita Program Studi 3. Berita Kampus
Terlihat bahwa content tersebut mempunyai 1 buah section dan 3 buah category. 8.2.2 Membuat Section Sebelum membuat sebauh category, anda harus membuat section terlebih dahulu. Ikuti panduan berikut : Loginlah sebagai administrator. Dari jendela administrator, pilih menu Content->Section Manager, sehingga tampil jendela berikut :
Gambar 8.17 : Jendela Section Manager Berikut informasi dari gambar section manager diatas : Kolom #, memberikan informasi tentang nomor urut dari sebuah section. Kolom Ceklish ( ), berfungsi untuk menandai satu atau lebih section untuk diproses lebih lanjut. Kolom Section Name, menampilkan nama dari section. Kolom Published, memberikan informasi tentang status sebuah section. Statusnya ada dua, yaitu Published ditandai dengan icon , yang berarti section tersebut dapat diakses, dan yang kedua adalah Unpublished ditandai dengan icon , yang berarti section tersebut tidak bisa diakses. Untuk berpindah dari status published ke unpublished atau sebaliknya, dapat dilakukan dengan meng-klik icon tersebut. Reorder, berfungsi untuk mengatur urutan letak sebuah content. Anda dapat untuk menurunkan satu tingkat atau tombol untuk meng-klik tombol menaikan satu tingkat. Disamping cara diatas, anda dapat juga mengatur urutan sebuah section dengan cara memasukkan nomor urutannya pada kotak isian Order, Klik gambar disket yang terletak dibagian atas, untuk menyimpan perubahannya. Kolom Order, menampilkan informasi tentang urutan section. Kolom Access, memberikan mengakses section. informasi tentang siapa yang berhak
Kolom Section ID, sekedar informasi tentang nomor ID dari section. Kolom Categories, memberikan informasi tentang jumlah category dari section.
Kolom Active, memberikan informasi tentang jumlah content terhubung dengan section.
yang
Kolom Trash, memberikan informasikan tentang jumlah content yang masuk dalam trash (recycle bin) dari sebuah section. Dalam deretan Icon Bar, terdapat beberapa icon yang mempunyai fungsi masing-masing, diantaranya : Icon Fungsi Mengcopy sebuah section beserta category yang terdapat didalamnya kedalam sebuah section baru. Menghapus sebuah section, sebelum menghapusnya, pastikan semua category yang terhubung dengan section tersebut sudah dihapus sebelumnya. Mengedit beberapa pengaturan yang terdapat pada section. Membuat section baru.
Membuat section baru ; Klik tombol New yang terdapat deretan Icon di bagian atas, sehingga tampil jendela Section: New [ New Section ] dan aturlah konfigurasinya seperti gambar berikut :
Gambar 8.18 : Menambahkan Section Manager Item Title, diisi dengan judul dari section Item Section Name, diisi dengan nama dari section Item Image, diisi dengan image yang anda inginkan untuk mewakili section ini, pilih option select image jika anda tidak ingin menampilkan image. Item Image Position, mengatur posisi penempatan dari sebuah image. Item access level, diisi dengan cara meng-klik level akses yang diberikan terhadap sebuah section. Item Published, hanya ada dua pilihan, No atau Yes. Item Description, digunakan untuk memberikan informasi tambahan tentang section. Klik icon Save yang terletak dibagian kanan atas untuk menyimpan perubahan yang anda lakukan.
Untuk latihan, silahkan anda tambahkan section baru dengan nama : 1. IT News 2. Islamic News 3. Tutorial Interaktif Pengaturan konfigurasinya anda atur sendiri, sehingga sekarang tampilan section manager anda seperti gambar berikut :
Gambar 8.19 : Hasil Penambahan Section Manager Terlihat ada 7 section, demi keperluan website yang akan dibuat, maka section News dan FAQs, tidak diperlukan. Oleh karena itu silahkan anda hapus kedua section tersebut, belum tahu caranya ? Ok nanti akan kita bahas pada sub bab 8.2.4. 8.2.3 Membuat Category Seperti telah dijelaskan diatas, bahwa category adalah bagian dari sebuah section, oleh karena ini sebuah category tidak dapat berdiri sendiri. Secara spesifik, tujuan dari kategori ini adalah untuk mempersempit cakupan content dari sebuah section. Misalnya, kita punya section dengan nama Berita dan categorynya juga Berita, maka apapun content yang akan di publish pada web pasti berita. Kalau content sudah banyak tentu kita akan kesulitan dalam mengelolanya. Oleh karena, sebuah category dibutuhkan untuk mempersempit cakupan dari sebuah section. Maka untuk section Berita diatas, kita bisa membuat category Berita kampus, Berita Ekonomi, Berita Selebriti, Berita Olah Raga dan lain sebagainya. Sehingga jika suatu saat kita ingin melihat berita seputar kampus saja, maka tinggal klik kategori kampus. Untuk latihan dalam buku ini, kita akan membuat category dari section Campus News yang telah dibuat diatas, dengan item seperti berikut : Berita Jurusan Berita Program Studi Berita Kampus Ikuti panduan berikut untuk membuat category seperti diatas : Loginlah terlebih dahulu sebagai administrator web. Dari jendela administrator, pilih menu Content->Category Manager. Sehingga tampil jendela content manager seperti berikut L
Gambar 8.20 : Jendela Catrgory Manager Dalam tampilan gambar diatas terlihat bahwa sekarang anda telah mempunyai sebuah category dengan nama NewsFlash yang merupakan category dari
section Hot News. Item yang tampil dihalaman tersebut hampir sama dengan item pada jendela section manager, jadi tidak akan kita bahas ulang.
, untuk membuat category baru, sehingga akan tampil Klik Icon New jendela Category : New [content], kemudian aturlah konfigurasinya seperti terlihat pada gambar berikut :
Gambar 8.21 : Menambahkan Category Baru Item Category Title, diisi dengan judul dari category, misalnya Berita Jurusan Item Category Name, diisi dengan nama dari category, misalnya Jurusan Item Section, pilih dengan section yang sesuai dengan category yang sedang dibuat ini. Misalnya : Campus News, karena sekarang anda sedang membuat category dari Section Campus News tersebut. HATI-HATIJANGAN SAMPAI SALAH MEMILIH SECTION Item Image, diisi dengan image yang anda inginkan untuk mewakili category ini, pilih option select image jika anda tidak ingin menampilkan image. Image yangtedapat dalam list tersebut berasal dari folder C:\wamp\www\myweb\images\stories, atau www.domainanda.com/images/stories. Anda dapat saja menambahkan image baru ke dalam folder tersebut, dengan cara meng-klik Icon Upload yang terdapat dibagian kanan atas jendela ini. Item Image Position, mengatur posisi penempatan dari sebuah image. Item access level, diisi dengan cara meng-klik level akses yang diberikan terhadap sebuah section.
Item Published, hanya ada dua pilihan, No atau Yes. Jika diisi dengan No, maka category ini tidak dapat diakses. Item Description, digunakan untuk memberikan informasi tambahan tentang section. Klik icon Save yang terletak dibagian kanan atas untuk menyimpan perubahan yang anda lakukan. Jika ada kesalahan, maka sekarang jenla category manager anda telah bertambah sebuah category baru, yaitu jurusan (Berita Berita).
:: LATIHAN :: Silahkan anda tambahkan lagi category dengan nama Berita Program Studi dan Berita Campus pada section Campus News. HATI-HATI..JANGAN SAMPAI ADA CATEGORY NAME YANG SAMA Pastikan hasil akhirnya seperti berikut :
Gambar 8.23 : Hasil Akhir Penambahan Category Manager 8.2.4 Menghapus Content, Category dan Section. Menghapus section tidak dapat dilakukan secara langsung, karena sebuah section memiliki beberapa category dan anda harus menghapus terlebih dahulu seluruh category yang terhubung dengan section tersebut dan jika category tersebut telah berisi dengan berita/artikel, maka anda harus menghapus berita/artikel tersebut lebih dahulu. Berikut tahapan, menghapus section News dan FAQs 1. Menghapus Content yang terhubungan dengan section Berikut cara untuk melihat apakah section News dan Faqs, mempunyai contents/isi : Loginlah terlebih dahulu sebagai administrator. Klik menu Content->All Contens Items, untuk menampilkan seluruh content yang telah ada., sehingga tampila jendela berikut :
Gambar 8.24 : Melihat Content Yang Akan Ditrash Terlihat pada gambar diatas, ada 7 (tujuh) content yang terhubung dengan section News dan FAQs Silahkan anda ceklish, Icon checkbox yang terletak di sebelah kanan dari ketujuh content tersebut. Seperti gambar berikut :
Gambar 8.25 : Menandai Content Yang Akan Ditrash Klik tombol Trash yang terletak di bagian kanan atas, untuk memindahkan content ini ke folder trash. Trash adalah proses menghapus sebuah content, tapi tidak secara fisik. Pastikan sekarang, Content Items Manager2 anda seperti gambar berikut :
Gambar 8.26 : Content Yang Telah Ditrash Untuk menghapus content tadi secara fisik, maka anda harus masuk ke menu Site->Trash Manager, sehingga terlihat ke tujuh content tadi berada dijendela ini.
Gambar 8.27 : Jendela Trash Manager Ceklish semua content tersebut, kemudia klik tombol Delete. Dari jendela yang muncul klik tombol Delete . Untuk menghapusnya secara fisik. Jika muncul pesan konfirmasi, klik OK. Sampai pada tahap ini, kita telah menghapus semua content yang terhubung dengan section News dan FAQs, langkah berikutnya dalah menghapus categorynya. 2. Menghapus Category Melihat Category yang terhubung dengan section News dan FAQs Loginlah terlebih dahulu sebagai administrator. Klik menu Content->Category Manager, sehingga tampil jendela berikut :
Gambar 8.28 : Menandai Category Yang Akan Dihapus Perhatikan kolom section pada gambar diatas, terlihat bahwa section News dan FAQs mempunyai category. Ceklislah kedua item tersebut, kemudian klik tombol Delete. Dari Jendela konfirmasi yang muncul, Klik OK untuk betul-betulmenghapus kategori ini.
Pastikan sekarang pada jendela category manager anda hanya terdapat satu category lagi, yaitu Newsflash. 3. Menghapus section
Ikuti panduan berikut untuk menghapus section News dan FAQs. Loginlah terlebih dahulu sebagai administrator. Klik menu Content->Section Manager, sehingga tampil jendela section manager. Ceklishlah section dengan nama News dan FAQs, seperti gambar berikut :
Gambar 8.29 : Menandai Section Yang Akan Dihapus Klik Icon Delete yang terdapat di deretan Icon Bar, sehingga tampil jendela konfirmasi. Silahkan anda klik OK untuk benar-benar menghapus section tersebut. Mengedit Section dan Category
8.2.5
Mengedit sebuah content adalah sebuah proses melakukan konfigurasi ulang terhadap sebuah content. Mengedit Section Untuk latihan, silahkan anda edit section dengan nama Newsflash menjadi Hot News. Ikuti panduan berikut : Loginlah terlebih dahulu sebagai administrator. Masuklah ke jendela section dengan cara meng-klik menu Content->Section Manager. Sehingga tampil jendela section manager. Dari jendela yang tampil, klik check box section yang bernama Newsflash, kemudia klik tombol Edit. Atau cukup dengan meng-klik nama dari section tersebut, sehingga tampil jendela Section: Edit. Dari Jendela yang tampil, anda cukup mengganti title dan section name-nya saja, menjadi Hot News. Kemudian klik tombol Save untuk menyimpan perubahan yang anda lakukan.
Mengedit Category Untuk latihan, silahkan anda edit category dengan nama Newsflash menjadi Hot News. Ikuti panduan berikut : Loginlah terlebih dahulu sebagai administrator. Masuklah ke jendela category dengan cara meng-klik menu Content>Category Manager. Sehingga tampil jendela category manager.
Dari jendela yang tampil, klik check box category yang bernama Newsflash, kemudia klik tombol Edit. Atau cukup dengan meng-klik nama dari category tersebut, sehingga tampil jendela Category: Edit. Dari Jendela yang tampil, anda cukup mengganti Category title dan Category name-nya saja, menjadi Hot News. Kemudian klik tombol Save untuk menyimpan perubahan yang anda lakukan.
SELAMATsampai disini anda telah belajar banyak tentang cara mengelola sebuah content. || LATIHAN || Sebagai bahan latihan, silahkan anda buat kategori berikut sesuai dengan sectionnya. (section Tutorial Interaktif dan Islamics News sudah pernah dibuat sebelumnya) : Section Category
Tutorial Windows Tutorial Linux Tutorial Interaktif Tutorial Joomla Tutorial HTML Kisah Nabi Hikmah Islamic News Humor Sufi Latihan ini harus anda kerjakan, karena hasil latihan ini akan digunakan nantinya dalam materi pengelolaan menu. Perhatikan hasil akhir dari section dan category yang telah dibuat : a. Section
b. Category.
Gambar 8.30 : Hasil Akhir Modifikasi Pada Section dan Category 8.3 Mengelola Menu Menu merupakan sekelompok item yang merujuk kepada sebuah static content, section, dan atau category dan lain sebagainya. Sehingga dengan menu anda dapat membuat jalan pintas terhadap sebuah content. Dalam konsep Joomla, menu dihubungkan (link) terhadap 5 (lima) kelompok, yaitu : 1. Content, dalam kelompok ini terdapat 9 jenis item lagi, yaitu : a. Blog-Content Category, adalah sebuah menu yang menampilkan sebuah content berdasarkan category-nya dalam bentuk blog. b. Blog-Content Category Archive, adalah sebuah menu yang menampilkan sebuah content berdasarkan category archive-nya dalam bentuk blog. c. Blog-Content Section, adalah sebuah menu yang menampilkan sebuah content berdasarkan section-nya dalam bentuk blog. d. Blog-Content Section Archive, adalah sebuah menu yang menampilkan sebuah content berdasarkan pada section archive-nya dalam bentuk blog. Blog adalah suatu cara menampilkan suatu content secara berurutan beserta paragraph pertamanya.
Gambar 8.31 :ContohTampilan Menu Blog. e. Link-Content Item, sebuah menu yang langsung dihubungkan dengan sebuah content item. f. Link-Static Content, sebuah menu yang dihubungkan dengan static content.
g. List-Content Section, sebuah menu yang dihubungkan dengan content section. h. Submit-Content, sebuah menu yang langsung masuk ke proses pengiriman artikel. Menu ini biasanya diset level = registered, karena user dengan status register yang boleh mengirim content. i. Table-Content Category, adalah sebuah menu yang menampilkan content berdasarkan kategorinya dalam bentuk tabel. Contoh :
Gambar 8.32 :ContohTampilan Menu Table-Content Category 2. Component, dalam kelompok ini terdapat 7 jenis item, yaitu : a. Component, sebuah menu yang langsung me-link ke sebuah component. b. Link-Component Item, sebuah menu yang langsung me-link ke sebuah component item.
c. Link-Contact Item, sebuah menu yang langsung me-link ke Contact Item. d. Link-NewsFeed, sebuah menu yang lansung me-link ke component newsfeed. e. Table-Contact Category, sebuah menu yang menampilkan daftar kontak website pada component contact berdasarkan category-nya dalam bentuk table. f. Table-Newsfeed category, sebuah menu yang menampilkan dalam bentuk table sebuah component Newsfeed berdasarkan kategorinya.
g. Table-Weblink category, sebuah menu yang menampilkan weblink berdasarkan kategori tertentu dalam bentuk table. 3. Links, berisi 6 jenis item menu, yaitu : a. Link-Component Item, sebuah menu yang langsung me-link ke component item. b. Link-Contact Item, sebuah menu yang langsung me-link ke contact item. c. Link-Content Item, sebuah menu yang langsung me-link ke content item. d. Link-Newsfeed, sebuah menu yang langsung me-link ke component newsfeed. e. Link-Static Content, sebuah menu yang langsung me-link ke static content. f. Link-URL sebuah menu yang langsung me-link ke sebuah URL yang ditentukan.
4. Submit Content, untuk kelompok ini hanya terdapat satu jenis menu, yaitu : Submit-Content. Lihat pembahasan tentang submit content diatas. 5. Miscelaneous, berisi jenis-jenis menu berikut : a. Separator/Placeholder, sebuah menu yang berfungsi untuk membuat garis pembatas antara menu yang satu dengan menu yang lainnya. Contoh :
Gambar 8.33 :ContohTampilan Menu Separator b. Wrapper, sebuah menu yang berfungsi menampilkan sebuah website tertentu dalam halaman web kita.
Gambar 8.34 :ContohTampilan Menu Wrapper
Sebelum membuat menu, maka anda harus menentukan terlebih dahulu jenis/model menu apa yang akan dibuat, dan tentunya content yang akan dihubungkan dengan menu tersebut harus sudah tersedia.
Berikut daftar menu yang akan kita buat. Modul mainmenu Menu Home Menu About Me -> Link-Static Content Menu My Study Me -> Link-Static Content Menu Activity -> Link-Static Content Menu My Family -> Link-Static Content Menu My Portofolio -> Link-Static Content Modul menunews (buat baru) Menu IT News -> Menu Islamics News -> Blog-Content Section Menu Campus News -> List Content Section Menu Tutorial Interaktif ->Table-Content Category Menu Submit Content ->Submit-Content Modul menuinteraktif (buat baru) Menu Contact Me -> Componen Menu Guest Book -> Componen Menu My Links-> Table-Weblink Category Menu Administrator-> Link-URL Tabel : Menu 8.3.1 Menonaktifkan menu yang tidak diperlukan.
Sebelum menonaktifkan menu yang tidak diperlukan, sebaiknya ditampikan kembali hasil akhir dari tutorial ini :
Terlihat pada menu diatas, terdapat menu News, Links, Contacs Us dan Search yang tidak kita butuhkan dalam rancangan web yang sedang dibangun, oleh karena itu, silahkan anda nonaktifkan (unpublished) menu-menu tersebut.
Baca kembali bab VII, sub bab 7.5.1 pada buku ini, tentang tata cara menonaktifkan Item menu. Sehingga sekarang modul main menu anda, hanya berisi menu Home dan About Me. 8.3.2 Menambahkan Item Menu
Yang dimaksud dengan menambahkan item menu disini adalah menambahkan menu baru dari sebuah modul menu yang telah ada. Misalnya, dalam latihan ini kita akan menambahkan item menu baru yang bernama My Study kedalam modul mainmenu yang telah ada. Ikuti panduan berikut : Loginlah terlebih dahulu sebagai administrator web. Dari jendela administrator, klik menu : Menu->mainmenu, sehingga tampil jendela Menu Manager : [mainmenu]. Klik Tombol New yang terdapat di deretan Icon pada bagian kanan atas, sehingga tampil jendela New Menu Item, seperti berikut :
Gambar 8.35 :Jendela New Menu Item Karena content My Study bertipe static content, maka pada pilihan diatas anda pilih option Link-Static Content, baik yang terletak pada kelompok Content maupun Links, karena fungsinya sama saja. Klik tombol Next yang terletak dibagian kanan atas, sehingga muncul jendela Add Menu Item :: Link - Static Content. Kemudian anda isilah form tersebut sesuai dengan gambar berikut :
Gambar 8.35 : Jendela Add Menu Item Berikut penjelasannya : Item Name : diisi dengan nama menu untuk static content ini, misalnya My Study. Item Static Content : anda harus memilih salah satu static content yang akan dihubungkan dengan menu ini. Silahkan anda klik MyStudy[MyStudy]. Hati-hati, JANGAN SAMPAI SALAH PILIH. Item On Click Open : terdapat tiga pilihan, yaitu: Parent Windows With Browser Navigation, artinya, jika anda meng-klik menu ini, maka hasilnya ditampilkan pada jendela browser yang sedang aktif beserta navigasinya. New Parent Windows With Browser Navigation, artinya, jika anda meng-klik menu ini, maka hasilnya ditampilkan pada jendela browser yang baru beserta navigasinya. Parent Windows Without Browser Navigation, artinya, jika anda mengklik menu ini, maka hasilnya ditampilkan pada jendela browser yang baru namun tidak ditampilkan navigasinya. Seperti gambar berikut :
Gambar 8.34 :Contoh Tampilan Menu Parent Windows Without Browser Navigation Untuk saat ini silahkan anda pilih Parent Windows With Browser Navigation, karena kita tidak ingin ditampilkan pada jendela browser yang baru. Parent Item : pilih Top, karena menu My Study bukan menjadi sub menu dari menu lainnya. Item Access Level : silahkan anda tentukan akses level dari menu ini. Jika anda pilih public, maka menu ini akan selalu tampil di frontend, jika anda pilih Registered, maka menu ini hanya akan muncul jika user telah login ke website anda, sedangkan pilih Special, mengakibatkan menu ini hanya akan tampil jika yang login adalah user backend saja yaitu user manager, administrator dan super administrator. Untuk saat ini anda pilih public saja. Item Published : hanya berisi dua pilihan yaitu No dan Yes. Silahkan anda pilih option Yes, karena kita akan menampilkan/mengaktifkan menu ini. Klik tombol Save , untuk menyimpan item menu ini.
Jika tidak ada kesalahan, maka menu My Study yang baru saja anda buat akan tampil di modul main menu. Pastikan hasilnya seperti gambar berikut : :: LATIHAN :: Silahkan anda lakukan dengan cara yang sama untuk membuat item menu : 8.3.3 My Activity My Family My Portofolio Membuat Menu Baru
Dibagian ini anda akan belajar bagaimana cara membuat menu baru. Sesuai dengan latihan sebelumnya, maka menu yang akan dibuat adalah seperti gambar berikut :
Ikuti panduan dibawah ini untuk membuat menu tersebut : Loginlah terlebih dahulu sebagai administrator. Dari Jendela administrator, pilih menu : Menu->Manu Manager, sehingga tampil jendel amenu manager seperti berikut :
Gambar 8.35 :Jendela Menu Manager Dalam gambar diatas terlihat bahwa terdapat 4 (empat) buah menu name yang telah disediakan oleh Joomla. Saat ini, kita akan membuat menu baru dengan nama menunews. Klik tombol New , sehingga tampil jendela Menu Details, dan isilah sesuai dengan gambar berikut.
Gambar 8.37 :Jendela Menu Details Menu Name : diisi dengan nama menu yang akan anda buat. Nama menu ini harus unik dan tidak boleh ada spasi. Saat ini, silahkan anda isi dengan nama menunews Module Title : diisi dengan judul dari modul menu ini, yang berfungsi untuk menampilkan menu ini nantinya.
Klik tombol Save
, untuk menyimpan menu news ini.
Perhatikan sekarang menu manager anda bertambah satu menu baru dengan nama menunews. Silahkan anda tambah item menu kedalam menunews dengan cara yang sama pada sub bab 8.3.2. sebagai panduan anda, lihat kembali table menu yang terdapat diatas. :: LATIHAN :: Dengan cara yang sama, silahkan anda buat menu berikutnya dengan nama menuinteraktif. Pastikan, sampai materi ini, daftar menu diwebsite anda seperti berikut :
Gambar 8.38 : Tampilan Akhir Modifikasi Menu Menu Interkatif terlihat masih kosong, karena kita belum memasukan item menu kedalamnya, karena item menu yang terdapat menu tersebut menggunakan Modul dan Componen. Pada bab berikutnya akan kita bahas. 8.3.4 Mengelola Conten (Berita)
Dibagian ini kita akan belajar bagaimana proses mengelola content. Aktivitas yang terlibat adalah proses menambahkan, mengedit, menghapus serta menonaktifkan content. 8.3.4.1 Menambahkan Content Baru Untuk menambahkan content, dapat anda lakukan dengan cara berikut : Loginlah terlebih dahulu sebagai administrator. Klik menu Content->All Content Items, sehingga tampil jendela Content Items Manager, yang menampilkan daftar content yang terdapat di website anda. Klik icon New, sehingga anda sekarang masuk ke jendela Content Item: New. Isilah berita dengan data yangterlihat pada gambar di bawah ini :
Gambar 8.39 :Contoh Cara Memasukkan Content Berikut keterangan dari gambar diatas : Title : diisi dengan judul dari berita yang dibuat. Title alias : diisi dengan nama lain judul. Section : diisi dengan nama section yang sesuai berita yang akan dibuat. Anda hanya bisa memilih dari section yang telah dibuat. Category : diisi dengan category yang sesuai. Category ini otomatis menyesuaikan diri dengan section yang dipilih. Intro Text (Required) : diisi dengan paragraph pertama dari berita yang dibuat. Teks yang terdapat pada Intro teks ini akan ditampilkan di halaman depan. Intro Text ini wajib diisi. Main Text (Optional) : diisi dengan berita selengkapnya (mulai dari paragraph kedua sampai akhir). Main text ini sifatnya pilihan, boleh diisi dan boleh tidak. NB : Untuk memasukkan artikel ke dalam Intro Text dan Main Text, anda dapat melakukan proses copy-paste.
Menu pada tab Publishing, images, parameter, meta info dan link to menu, sama fungsinya dengan yang telah dibahas pada sub bab 8.1.2. Silahkan anda pelajari kembali. Agar berita yang anda buat ini dapat langsung tampil di halaman depan, maka item Show on FrontPage yangterdapat pada tab Publishing harus anda pilih. Seperti gambar diatas. Klik tombol Save untuk menyimpan berita ini.
Silahkan buka website anda, dan pastikan sekarang sudah terdapat berita baru, dengan judul Pengenalan Joomla. Seperti gambar berikut :
Gambar 8.40 :Contoh Tampilan Content Catatan : Content yang dibuat melalu dynamin content (menggunakan section dan category) otomatis tampil dihalaman depan, beda halnya dengan static content yang akan tampil di halaman depan jika di klik sebuah menu yang me-link ke dirinya. :: LATIHAN :: Silahkan anda masukan berita, dengan dilengkapi gambar. Sekurang-kurangnya 5 buat berita. 8.3.4.2 Mengedit Content (berita) Untuk melakukan pengeditan content/berita dapat dilakukan dengan cara : Loginlah sebagai administrator. Klik Menu Content-> All Content Items, sehingga tampil jendela Content Items Manager, yang menampilkan daftar content yang terdapat di website anda. Dari daftar content yang muncul, cari judul content yang akan di robah. Klik Judul Content yang akan dirobah tersebut, sehingga muncul layar pengeditan, yang tampilannya sama dengan sewaktu melakukan proses menambahkan content baru. Lakukan pengeditan terhadap content tersebut.
Klik tombol Save untuk menyimpan perubahan ini.
8.3.4.3 Menghapus Content (Berita) Proses menghapus sebuah content tidak bisa secara langsung. Dalam konsep Joomla, sebuah content yang tidak diperlukan sebaiknya dipindahkan ke folder trash dan jika benar-benar ingin menghapus, maka content yang terdapat pada folder trash inilah yang akan dihapus. Content yang berada dalam folder trash tidak dapat diakses lagi namun masih dapat di kembalikan lagi (restore) jika di perlukan. Jadi prinsip kerjanya sama dengan recycle bin di MS. Windows. Berikut cara memindahkan sebuah content ke folder trash : Loginlah sebagai administrator. Klik Menu Content-> All Content Items, sehingga tampil jendela Content Items Manager, yang menampilkan daftar content yang terdapat di website anda. Dari daftar content yang muncul, cari judul content yang akan di robah. Klik option yang terdapat di sebelah kanan Judul Content yang akan ditrash. Klik tombol Trash . Sehingga sekarang content tersebut tidak berada lagi pada jendela Content Items Manager, karena telah berpindah ke folder trash, dan otomatis content tersebut tidak dapat lagi diakses.
8.3.4.4 Mengembalikan Content Yang Terhapus Jika sebuah content yang telah anda trash, maka sebenarnya content tersebut masih ada dan dapat dikembalikanlagi seperti semula. Ikuti langkah-langkah dibawah ini : Loginlah sebagai administrator. Klik Menu Site-> Trash Manager, sehingga tampil jendela Trash Manager, yang berisi daftar content yang telah anda trash sebelumnya. Tandailah content yang akan anda kembali ke posisinya semula dengan cara meng-klik checkbox yang terdapat di sebelah kanan Judul Content. Klik tombol Restore . Sehingga tampil jendela restore berikut :
Gambar 8.41 : Jendela Restore Klik tombol Restore yang terlihat pada gambar, Jika muncul pesan konfirmasi, Klik saja OK, sehingga sekarang content anda sudah menempati posisinya semula. Menata Tampilan Content Pada Halaman Depan
8.3.5
Halaman depan merupakan halaman pertama yang dilihat oleh pengunjung, dan juga merupakan pintu gerbang untuk mengakses content yang lainnya, sehingga pengaturan penempatan content dihalaman depan juga harus jadi perhatian. Dalam konsep Joomla, content di halaman depan diatur tata letaknya sesuai dengan selera kita. Misalnya kita ingin content pada halaman depan di bagi atas tiga kolom, atau dua kolom saja, atau content pertama 1 kolom, content kedua dan seterusnya ditampilkan dalam bentuk dua kolom, seperti gambar berikut ini yang menampilkan content dihalaman depan hanya dua buah dan dalam bentuk dua kolom.
Gambar 8.42 : Contoh Manata Tampilan Content Ikuti panduan berikut, tentang tata cara mengatur tampilan content pada halaman depan : Loginlah terlebih dahulu sebagai administrator web. Klik menu : Menu->mainmenu, sehingga tampil jendela Menu Manager [mainmenu], yang berisi daftar menu yang terdapat dalam modul main menu. Dari daftar yang ada, klik menu Home, sehingga anda akan di bawa ke jendela Edit Menu Item :: Component [ FrontPage ], perhatikan gambar berikut :
Gambar 8.43 :Cara Mengatur Tampilan Halaman Depan Dari gambar diatas, yang perlu anda perhatikan hanya 4 item saja, yaitu : 1. Leading, adalah jumlah content yang pertamanya (intro text) satu kolom penuh. akan ditampilkan paragraph
2. Intro, adalah jumlah content yang akan ditampilkan intro textnya. Tampilan intro ini di pengaruhi oleh Columns. 3. Columns, adalah jumlah kolom untuk menentukan penampilan intro. 4. Links, jumlah content yang ditampikan dalam bentuk link. Misalnya kita akan menampilkan content dengan leading = 1, intro = 2, Columns = 2 dan Links = 3, maka hasilnya akan seperti gambar berikut :
Klik tombol Save untuk menyimpan konfigurasi ini. Silahkan cek hasilnya pada website anda.
Gambar 8.44 :Contoh Modifikasi Tampilan Halaman Depan Sip..ya..saatnya secangkir teh panas..

Joomla

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Joomla

Diunggah oleh

Hak Cipta:

Format Tersedia

Pelatihan WEB DESIGN

HA. Mooduto Rahmat Hidayat Yuhefizar

Workshop WEB DESIGN, 1-4 Juli 2006

Padang, Juni 2006 HA Mooduto - Rahmat Hidayat - Yuhefizar

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Web Browser (Internet Explorer) Web Server (Apache)

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Gambar 4.2 : Jendela 2 Installasi WAMP

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Gambar 4.14 : Struktur File dan Folder Joomla

Workshop WEB DESIGN, 1-4 Juli 2006

Gambar 4.16 : Jendela Licensi Joomla

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

HATI-HATI : JANGAN SAMPAI LUPA PASSWORD ADMIN ANDA INI

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Allow User Registration = Yes

Allow User Registration = No

Gambar 6.8 : Modul Login Form

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Gambar 6.14 : PDF, Print dan E-Mail Icon

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006

Gambar 6.20 : Tab Server

Workshop WEB DESIGN, 1-4 Juli 2006

Workshop WEB DESIGN, 1-4 Juli 2006