joomla

Upload: behomb-arif

Post on 15-Jul-2015

422 views

Category:

Documents


0 download

TRANSCRIPT

Pelatihan WEB DESIGN

HA. Mooduto Rahmat Hidayat Yuhefizar

Workshop WEB DESIGN, 1-4 Juli 2006

Kata PengantarModul 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

Workshop WEB DESIGN, 1-4 Juli 2006

Daftar ISiBab I. Website dan Perkembangannya1.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 .... 143.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 ........................................................ 526.3 Mengelola User ............................................................. 64

Bab VII. Memodifikasi Tampilan Joomla 7.1 Mengganti Header ................................................... 75 7.2 Mengganti Footer ......................................................... 787.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 ......................................................... 1038.3 Mengelola Menu ............................................................ 114

Workshop WEB DESIGN, 1-4 Juli 2006

BAB IWEBSITE 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

Workshop WEB DESIGN, 1-4 Juli 2006

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.

Workshop WEB DESIGN, 1-4 Juli 2006

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.

Workshop WEB DESIGN, 1-4 Juli 2006

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 ?

Workshop WEB DESIGN, 1-4 Juli 2006

BAB IIKONSEP 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.

Workshop WEB DESIGN, 1-4 Juli 2006

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.

Workshop WEB DESIGN, 1-4 Juli 2006

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.

Workshop WEB DESIGN, 1-4 Juli 2006

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.

Workshop WEB DESIGN, 1-4 Juli 2006

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

Workshop WEB DESIGN, 1-4 Juli 2006

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)

Workshop WEB DESIGN, 1-4 Juli 2006

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

Workshop WEB DESIGN, 1-4 Juli 2006

BAB IIIPENGENALAN 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 .

Workshop WEB DESIGN, 1-4 Juli 2006

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.

Workshop WEB DESIGN, 1-4 Juli 2006

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.

Workshop WEB DESIGN, 1-4 Juli 2006

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/

Workshop WEB DESIGN, 1-4 Juli 2006

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

Workshop WEB DESIGN, 1-4 Juli 2006

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 :

Workshop WEB DESIGN, 1-4 Juli 2006

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.

Workshop WEB DESIGN, 1-4 Juli 2006

BAB IVINSTALLASI 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

Workshop WEB DESIGN, 1-4 Juli 2006

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 :

Workshop WEB DESIGN, 1-4 Juli 2006

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 :

Workshop WEB DESIGN, 1-4 Juli 2006

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 :

Workshop WEB DESIGN, 1-4 Juli 2006

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 :

Workshop WEB DESIGN, 1-4 Juli 2006

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 :

Workshop WEB DESIGN, 1-4 Juli 2006

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 :

Workshop WEB DESIGN, 1-4 Juli 2006

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 :

Workshop WEB DESIGN, 1-4 Juli 2006

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

Workshop WEB DESIGN, 1-4 Juli 2006

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

Workshop WEB DESIGN, 1-4 Juli 2006

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 :

Workshop WEB DESIGN, 1-4 Juli 2006

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.

Workshop WEB DESIGN, 1-4 Juli 2006

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 : [email protected]. 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 :

Workshop WEB DESIGN, 1-4 Juli 2006

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 :

Workshop WEB DESIGN, 1-4 Juli 2006

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

Workshop WEB DESIGN, 1-4 Juli 2006

BAB VKONSEP 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.

Workshop WEB DESIGN, 1-4 Juli 2006

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

Workshop WEB DESIGN, 1-4 Juli 2006

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 :

Workshop WEB DESIGN, 1-4 Juli 2006

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.

2

3

4

Secara bertahap kita akan bahas lebih fungsi setiap menu yang terdapat pada jendela back end pada bab-bab berikutnya.

Workshop WEB DESIGN, 1-4 Juli 2006

BAB VIADMINISTRATOR 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 :

Workshop WEB DESIGN, 1-4 Juli 2006

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 :

Workshop WEB DESIGN, 1-4 Juli 2006

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.

Workshop WEB DESIGN, 1-4 Juli 2006

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

Workshop WEB DESIGN, 1-4 Juli 2006

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 :

Workshop WEB DESIGN, 1-4 Juli 2006

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 :

Workshop WEB DESIGN, 1-4 Juli 2006

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.

Workshop WEB DESIGN, 1-4 Juli 2006

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

Workshop WEB DESIGN, 1-4 Juli 2006

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 :

Workshop WEB DESIGN, 1-4 Juli 2006

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

Workshop WEB DESIGN, 1-4 Juli 2006

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

Workshop WEB DESIGN, 1-4 Juli 2006

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 :

Workshop WEB DESIGN, 1-4 Juli 2006

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.

Workshop WEB DESIGN, 1-4 Juli 2006

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.

Workshop WEB DESIGN, 1-4 Juli 2006

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.

Workshop WEB DESIGN, 1-4 Juli 2006

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 :

Workshop WEB DESIGN, 1-4 Juli 2006

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 :

Workshop WEB DESIGN, 1-4 Juli 2006

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.

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

Ceklish4.

5.

6.

7.

Workshop WEB DESIGN, 1-4 Juli 2006

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,

Workshop WEB DESIGN, 1-4 Juli 2006

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 :

Workshop WEB DESIGN, 1-4 Juli 2006

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 :

Workshop WEB DESIGN, 1-4 Juli 2006

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.

Workshop WEB DESIGN, 1-4 Juli 2006

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

Workshop WEB DESIGN, 1-4 Juli 2006

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 :

Workshop WEB DESIGN, 1-4 Juli 2006

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.

Workshop WEB DESIGN, 1-4 Juli 2006

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

Workshop WEB DESIGN, 1-4 Juli 2006

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 :

Workshop WEB DESIGN, 1-4 Juli 2006

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.

Workshop WEB DESIGN, 1-4 Juli 2006

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.

Workshop