Membangun Personal Web

Membangun Personal Web dengan XAMPP dan Joomla 1.5 Harindra Wisnu Pradhana (L2F004481)

Teknik Elektro Universitas Diponegoro [email protected], [email protected] Sebuah website pribadi merupakan satu hal yang telah umum dikenal di masyarakat. Baik berupa blog, profile, maupun galeri foto. Berbagai layanan tersedia di internet untuk menyimpan data-data pribadi tadi. Mulai dari layanan CMS seperti wordpress, joomla dan drupal, hingga layanan komunitas semacam friendster dan facebook dengan berbagai fitur yang ada. Sebenarnya kita dapat mengembangkan web pribadi semacam ini dengan menggunakan Content Management System (CMS). Dengan aplikasi gratisan yang bisa kita dapatkan di internet, kita bisa membangun server kita sendiri dan mengembangkan sebuah web pribadi. 1. Installasi Server Sebuah PC atau Laptop dapat kita jadikan sebagai web server. Disini akan dibahas installasi web server dengan fasilitas Apache 2, PHP 5, dan MySQL 5. Installasi dilakukan menggunakan sistem operasi Windows dan Linux menggunakan paket web server xampp. Paket ini digunakan karena kemudahan installasi di kedua sistem operasi tersebut. Serta kelengkapan servis yang disediakan. 1.1 XAMPP for Windows Merupakan satu paket installasi yang nantinya akan menginstall Server Apache, PHP, dan MySQL. Paket ini dapat di download di http://www.apachefriends.org/en/xampp-windows.html dengan mengikuti petunjuk yang ada pada situs. Setelah file berhasil di download, ekstrak file untuk mendapatkan aplikasi installasinya. Klik dua kali pada file tersebut untuk menjalankannya. Nantinya file-file hasil ekstraksi akan tersimpan di lokasi target. Seperti ditunjukkan pada gambar berikut.

Gambar 1 Tampilan File XAMPP for Windows Ada beberapa folder disana seperti apache, htdocs, dan lain-lain. Di dalam folder ini terdapat sebuah file bernama xampp-control.exe yang merupakan aplikasi pengendali server ini. Klik ganda pada file tersebut untuk menjalankannya, dan nantinya akan muncul tampilan sebagai berikut.

Gambar 2 Tampilan XAMPP-control Tampilan ini digunakan untuk mengendalikan servis. Disitu tampak ada beberapa modul yang terinstall diantaranya Apache, MySQL dan Filezilla. Apache ini menyediakan servis web yang termasuk di dalamnya PHP interpreter. Sedangkan MySQL menyediakan servis layanan basis data. Pada beberapa sistem, windows firewall maupun firewall bawaan antivirus akan memblok aktifitas server ini karena membuka port tertentu. Aturlah supaya sistem membukanya, dan membiarkan server bekerja seperti yang kita inginkan. Setelah servis-servis tadi dijalankan menggunakan tampilan tersebut, maka web server telah siap digunakan. Kita dapat mengaksesnya dengan menggunakan browser dengan mengetikkan alamat web server kita ke url browser. Alamat secara default adalah pada http://localhost/ atau http://127.0.0.1/ yang akan mengacu pada web server di mesin lokal. Atau kita juga bisa menggunakan alamat IP mesin kita. Bila installasi server berhasil, nantinya akan muncul halaman berikut pada browser.

dapat dilakukan pada file lampp selain start. Daftarnya dapat dilihat sebagai berikut. start Start XAMPP (Apache, MySQL and  eventually others)  startapache Start only Apache  startssl Start only SSL support  startmysql Start only MySQL  startftp Start only ProFTPD 

Gambar 3 Tampilan halaman web server 1.2 XAMPP for Linux Implementasi pada sistem berbeda memerlukan konfigurasi yang berbeda pula. Demikian halnya dengan XAMPP for Linux yang dapat di download melalui alamat http://www.apachefriends.org/en/xampplinux.html proses konfigurasi selanjutnya adalah dengan memindahkan paket file yang telah kita download tadi ke direktori /opt/ tentunya dengan akses sebagai root. Perintahnya dapat dilakukan dengan mengetikkan senarai berikut pada terminal. Misal lokasi awal file pada /home/ user/xampp-linux-1.6.5a.tar.gz $ sudo su # cp /home/user/xampp­ linux­1.6.5a.tar.gz /opt/

lalu kita ekstrak file tersebut dengan mengetikkan perintah dibawah ini tetap sebagai root # tar xvfz /opt/xampp­linux­1.6.5a.tar.gz

stop Stop XAMPP (Apache, MySQL and  eventually others)  stopapache Stop only Apache  stopssl Stop only SSL support  stopmysql Stop only MySQL  stopftp Stop only ProFTPD  reload Reload XAMPP (Apache, MySQL  and eventually others)  reloadapache Reload only Apache  reloadmysql Reload only MySQL  reloadftp Reload only ProFTPD  restart security

Stop and start XAMPP  Check XAMPP's security 

php5 php4 phpstatus active? 

Activate PHP5  Activate PHP4  Which version of PHP is 

backup Make backup file of your XAMPP  config, log and data files  panel Starts graphical XAMPP control  panel

Sebagaimana pada windows, nantinya aplikasi ini akan menjalankan web service meliputi Apache2, PHP5 atau PHP4 serta MySQL. Bila dicoba mengakses http://localhost/ atau http://127.0.0.1/ nantinya akan muncul halaman yang sama seperti yang ditampilkan pada sistem windows yang menunjukkan bahwa installasi telah berhasil dilakukan.

Gambar 4 Tampilan hasil ekstrak XAMPP for Linux Nantinya sistem akan membuat direktori baru bernama lampp di dalam direktori /opt. Disinilah nantinya semua folder dan file dari webserver kita diletakkan. Kita dapat langsung memulai servis web dan MySQL dengan mengetikkan perintah berikut pada terminal. # /opt/lampp/lampp start

Nantinya sistem akan menjalankan keseluruhan aplikasi server secara otomatis. Ada beberapa opsi yang

1.3 PhpMyAdmin phpMyAdmin merupakan aplikasi pengendali basis data berbasis web yang akan membantu kita dalam melakukan manajemen basis data. Mulai dari manajemen user, database, juga tabel-tabel serta record yang ada. Kita coba gunakan aplikasi ini untuk mempersiapkan user dan database baru untuk situs kita. Pertama kita akses aplikasi ini melalui link http://localhost/phpmyadmin yang nantinya akan memunculkan halaman sebagai berikut.

Gambar 5 Tampilan awal phpMyAdmin

sekali situs internet yang menyediakan layanan bagi pengguna Joomla baik itu berupa template web, modulmodul, komponen-komponen serta berbagai tutorial yang bisa didapatkan dengan mudah baik secara gratis maupun berbayar. Paket dasar CMS Joomla bisa didapatkan secara gratis dengan mendownload dari alamat http://joomlacode.org/gf/project/joomla/frs/ atau di situssitus lain yang menyediakan paket joomla. Proses installasi diawali dengan memindahkan paket yang kita ekstrak tadi ke direktori XAMPP yang sudah kita install. Masukkan ke sub direktori htdocs yang berisi file-file website. Setelah dipindahkan, lalu ekstrak file tersebut sehingga akan muncul satu direktori baru yang isinya keseluruhan paket Joomla. Kita bisa mengubah nama direktori tersebut sesuai kehendak kita. Misalnya seperti contoh berikut.

Masukkan username root dengan password kosong sebagaimana default awal setelah installasi. Lalu kita masuk ke menu privilege lalu klik link add user. Kita buat user baru untuk keamanan sehingga akses database terpisah dari user root yang cukup berbahaya bila di buka secara umum. Kita isi konfigurasi user baru seperti gambar di bawah ini.

(a)

Gambar 6 Tampilan pembuatan user baru pada basis data Isikan username dengan nama user baru yang kita inginkan. Lalu isikan host dengan localhost karena kita memasang basis data dan website pada mesin yang sama. Lalu isikan password untuk user baru yang kita buat. Jangan lupa pilih opsi “Create database with same name and grant all privileges” untuk membuat database baru untuk user yang kita buat. Lalu klik go dan jadilah user baru dengan database baru. 2. Installasi Joomla 1.5 Disini kita menggunakan Joomla sebagai CMS (Content Management System) yaitu sebuah aplikasi berbasis web dinamis yang berfungsi mengatur content atau isi dari suatu situs web. Joomla dipilih karena cukup fleksibel dengan kebutuhan sistem yang tidak terlalu berat. Serta proses installasinya cukup mudah dilakukan bahkan oleh orang awam sekalipun. Selain itu banyak

(b) Gambar 7 File joomla setelah di ekstrak (a) pada windows dan (b) pada linux Dengan asumsi kita ubah nama direktori menjadi joomla, kita bisa melakukan tahapan installasi melalui alamat http://localhost/joomla sesuai dengan nama direktori yang kita buat. Pastikan XAMPP sedang bekerja sebelum melakukan installasi. Akses alamat direktori yang kita buat tadi, lalu akan muncul halaman installasi

sebagai berikut.

Gambar 8 Halaman Installasi Joomla Tahap installasi yang pertama merupakan pemilihan bahasa. Gunakan bahasa Inggris sebagai default. Nantinya kita dapat menginstall modul bahasa Indonesia bila perlu. Tahapan selanjutnya adalah pemeriksaan kebutuhan sistem dan tampilan lisensi paket. Kita cukup mengikuti saja karena servis XAMPP telah memenuhi kebutuhan Joomla. Sedangkan di bagian lisensi, kita dapat mempelajarinya terlebih dahulu baru menekan tombol next. Tampilan kedua tahap installasi ini dapat dilihat pada gambar berikut.

pada gambar berikut.

Gambar 11 Tampilan konfigurasi basis data Langkah selanjutnya adalah konfigurasi FTP. Hal ini bisa kita isi konfigurasi FTP bila mesin yang kita gunakan memiliki servis FTP. Namun hal ini hanya opsional dan dapat dilewati. Kita langsung ke langkah selanjutnya yaitu konfigurasi situs. Disini kita isikan nama situs yang nantinya akan muncul di halamanhalaman web, serta e-mail dan password admin. Admin merupakan user pertama yang dibuat setiap kali installasi Joomla. Nantinya kita bisa menambah user baru dengan user ini. Tampilan konfigurasinya sebagai berikut.

Gambar 12 Tampilan konfigurasi situs

Gambar 9 Pemeriksaan sistem

Gambar 10 Tampilan lisensi produk Selanjutnya kita akan dibawa ke konfigurasi basis data. Kita gunakan user dan database yang telah kita buat pada bahasan sebelumnya. Pilih tipe basis data mysql, isikan host pada localhost dan isi username, password serta nama database seperti yang kita isikan pada saat membuat user baru. Tampilannya dapat dilihat

Setelah konfigurasi selesai, kita akan masuk ke bagian installasi sampel data. Bila kita menginstall sampel data ini, kita akan mendapati web yang sudah terisi bermacam-macam contoh content. Namun bila kita ingin membangun dari awal, kita bisa lewati saja bagian ini untuk mendapatkan website yang masih bersih tanpa content. Setelah melewati tahap ini, kita sampai pada halaman laporan installasi. Halaman ini menunjukkan bahwa installasi yang kita lakukan berhasil dan Joomla siap digunakan. Namun sebelum menggunakannya kita harus menghapus folder installation pada direktori Joomla kita karena CMS tidak akan bekerja bila folder ini masih ada. Tampilan halaman akhir installasi adalah sebagai berikut.

Gambar 13 Tampilan akhir installasi

berbagai menu yang bisa kita gunakan disini diantaranya site, menus, content, components, extensions, tools, dan help. Menu site digunakan untuk mengakses konfigurasi situs secara umum. Menus digunakan untuk mengatur menu-menu yang ada pada situs. Content digunakan untuk mengatur isi dari situs, baik itu section, category, maupun artikel-artikel di dalamnya. Menu components digunakan untuk mengatur komponen-komponen yang ada pada Joomla. Komponen ini bisa berupa komponen bawaan maupun hasil installasi kita. Menu extension berisi konfigurasi modul, template, plugin, serta bahasa. Modul-modul ini bisa ditambahkan atau dihapus melalui menu ini juga. Selain menu-menu di atas, terdapat pula tombol untuk mengakses konfigurasi secara langsung. Tomboltombol ini diantaranya adalah penambahan artikel baru, manajemen artikel, halaman depan, section, category, media, menu, bahasa, user, serta yang terakhir konfigurasi secara umum. Tampilan dari control panel Joomla 1.5 dapat dilihat sebagai berikut.

Gambar 14 Tampilan website joomla Tampilan situs Joomla awal setelah proses installasi dapat dilihat pada gambar diatas. Disana nampak beberapa konten default yang akan muncul bila kita menginstall sampel data. Tampilan ini sudah cukup lengkap dengan beberapa section dan category, newsflash, serta menu-menu yang cukup menarik. Halaman ini dapat diakses melalui browser dengan mengetik alamat dimana kita menginstall joomla tadi. 3. Administrasi Joomla 1.5 Administrasi joomla dapat dilakukan dengan mudah. Cukup mengakses halaman administrasi yang telah tersedia untuk setiap kali installasi. Halaman ini memiliki alamat yang sama dengan lokasi installasi hanya saja kita harus mengakses sub folder administrator. Setelah masuk ke subfolder ini, akan muncul halaman login administrator seperti gambar berikut.

Gambar 16 Tampilan Control Panel pada Joomla 1.5 3.1 Section, Category, Article Dalam Joomla dikenal istilah section, category, dan article. Keseluruhan konten pada joomla dikelompokkan dalam section-section. Pada setiap section ini dibagi lagi menjadi beberapa kategori yang mengelompokkan artikel-artikel pada joomla. Artikel inilah nantinya yang akan menjadi konten atau isi dari situs yang kita buat. Halaman depan section manager dan category manager dapat dilihat seperti pada gambar berikut.

(a)

Gambar 15 Tampilan login administrator Setelah melewati halaman login, anda akan dibawa ke sebuah sistem control panel. Dari sini kita bisa mengatur keseluruhan isi dari Joomla yang kita buat. Ada

3.2 Menu Sebagaimana dijelaskan pada awal bagian ini, menu yang dimaksud disini merupakan menu-menu yang nantinya akan muncul pada halaman website. Menu ini bisa diatur melalui menu manager dengan tamplan sebagai berikut.

(b) Gambar 17 Tampilan section manager (a) dan category manager (b) Melalui kedua halaman manajemen ini kita bisa menambahkan maupun menghapus section dan category dari artikel isi dari situs kita. Sedangkan artikel itu sendiri merupakan suatu isi dari situs. Dapat berupa gambar, tulisan, dan lain-lain sesuai dengan yang kita kehendaki. Pengaturan artikel dapat melalui article manager maupun pada halaman control panel dengan menekan tombol add new article. Perintah penambahan artikel baru akan membawa kita ke halaman editor artikel seperti tampak pada gambar berikut.

Gambar 19 Tampilan Menu Manager Disini kita bisa menambahkan menu, menghapus menu, serta mengatur item-item yang dimuat dari masing-masing menu. Item ini nantinya akan di list pada tampilan menu di website. Item ini dapat berupa link ke salah satu isi dari situs seperti artikel, berita, pencarian, pengguna, dan lain-lain. Juga dapat berupa link ke situssitus di luar website kita. Pemilihan tipe menu item yang akan kita buat merupakan langkah pertama yang dilakukan untuk menambahkan menu item sebelum mengatur isi dari itemnya. Tampilannya dapat dilihat seperti gambar berikut.

Gambar 18 Tampilan editor artikel Pada bagian ini kita bisa mengisi berbagai parameter dari suatu artikel seperti judul, alias, section dan kategori dimana artikel tersebut dikelompokkan, serta tentunya mengisi artikel tersebut. Ada berbagai tool yang bisa digunakan untuk mengisi artikel ini. Di bagian paling atas, kita bisa mengatur tipe, ukuran dan bentuk huruf, serta posisi heading apakah itu rata kiri, kanan atau tengah. Pada baris kedua kita bisa membuat penomoran, menambahkan gambar, animasi, serta berbagai objek lain pada artikel ini. Di baris terakhir, kita bisa menambahkan hyperlinks pada situs serta membuat dan mengatur komposisi suatu tabel. Disamping halaman utama editor terdapat parameter-parameter lain yang dapat kita atur isinya. Ada parameter tentang artikel tersebut, parameter tingkat lanjut, dan yang terakhir meta data dari artikel ini. Kita bisa mengatur parameter tersebut sesuai keinginan kita untuk pengguna Joomla yang telah mahir. Namun untuk pengguna pemula, kita bisa abaikan parameter-parameter ini yang nantinya akan secara otomatis diatur oleh Joomla.

Gambar 20 Tipe menu item Setelah tipe menu item dipilih, kita akan dibawa ke halaman menu editor dimana kita diminta mengisikan detail dari item suatu menu. Detail ini diantaranya adalah judul dari menu ini, alias yang akan dimunculkan pada menu, link tujuan dimana halaman akan berpindah bila menu ini di akses, serta lokasi item menu ini. Lokasi ini meliputi nama menu tempat item ini diletakkan, serta level menu ini, apakah menu utama atau sub menu dari

menu lain yang sudah ada juga urutan item ini dari itemitem yang lain pada satu menu. Selain itu kita juga perlu mengatur apakah menu ini dipublikasikan atau tidak, juga akses level yang menunjukkan user level apakah yang bisa mengakses menu ini. Apakah publik bisa mengaksesnya, atau harus register dan login terlebih dahulu. Pengaturan terakhir adalah bagaimana bila menu ini diakses, apakah dibuka pada halaman yang sama ataukah akan membuka halaman baru. Tampilan pengaturan detail menu itemnya adalah seperti gambar berikut.

dihapus melalui menu install/uninstall. Install/Uninstall dapat diakses dari menu ekstension. Untuk menginstall cukup kita masukkan file hasil installasi kita pada halaman module manager bagian install. Sedangkan untuk menghapus template, pada extension manager ada menu template. Disana nantinya kita bisa melihat template-template yang ada dan dapat kita hapus. Perlu diketahui, template yang bisa dihapus hanya template yang tidak sedang digunakan sebagai default. Tampilan extension managernya adalah sebagai berikut.

Gambar 23 Tampilan install pada extension manager

Gambar 21 Detail menu item 3.3 Template, Languages, Plugin Template merupakan tampilan dari suatu situs. Disini diatur posisi tiap-tiap menu serta berbagai bentuk yang ada pada tampilan suatu situs. Bisa dibilang template merupakan komposisi pengaturan susunan suatu situs. Template pada Joomla dapat dikonfigurasi melalui template manager. Disini kita bisa mengatur templatetemplate yang tersedia pada joomla. Kita bisa memilih template mana yang akan digunakan sebagai default, kita bisa juga mengubah isi dari template-template yang ada sesuai dengan fitur yang disediakan template tersebut. Tampilan template manager dapat dilihat pada gambar berikut.

Selain template, kita juga bisa menambahkan komponen, bahasa, dan lain-lain melalui extension manager dengan cara yang sama. Komponen-komponen ini bisa kita download dari internet di berbagai situs yang ada. Perlu diperhatikan kompatibilitas dari komponen tersebut mengingat sistem pada Joomla 1.5 dan 1.0 sedikit berbeda, beberapa komponen dari Joomla 1.0 tidak bisa bekerja pada Joomla 1.5. Kita bisa mengetahui komponen itu dapat diinstall pada Joomla 1.5 bila melihat ada logo atau tulisan 1.5 ready, atau 1.0 legacy. Legacy merupakan komponen pada sistem Joomla 1.5 yang mendukung komponen dari Joomla 1.0 3.4 Modules Modul merupakan bagian dari Joomla yang dapat ditambahkan pada situs yang kita buat. Kita dapat mengatur modul-modul yang ada pada situs kita melalui modul manager. Tampilan modul manager dapat kita lihat pada gambar berikut.

Gambar 24 Tampilan Modul Manager Gambar 22 Tampilan template manager Template hanya bisa ditambahkan maupun

Pada Modul Manager semua modul yang ada pada situs kita akan tampak sebagai list. Disini kita bisa mengatur posisi modul-modul tersebut, mengaktifkan dan menon-

aktifkan serta menghapus dan menambah modul baru. Setiap kali menambah modul baru, kita diminta memilih tipe modul tersebut. Tipe-tipe modul yang ada dapat dilihat pada gambar berikut.

mengunjungi situs. ➢Wrapper

: Frame dari web atau situs lain yang hendak ditampilkan pada situs kita.

Selain modul-modul yang ada di atas sebagai bawaan dari Joomla 1.5, kita bisa menambahkan modulmodul baru dengan menginstallnya seperti pada saat menginstall template dan komponen lain. Modul-modul ini bisa kita dapatkan dari internet baik secara gratis maupun berbayar tergantung kebutuhan kita.

Gambar 25 Tipe-tipe modul Tipe-tipe itu antara lain adalah: Content : Daftar Konten yang tersimpan pada situs ➢Banner : Banner atau iklan. ➢Breadcrumbs : Lokasi pengunjung saat ini pada situs. ➢Custom HTML : Modul dengan script yang bisa kita isi sendiri. ➢Feed Display : Feeder untuk menampilkan membaca isi situs melalui situs lain maupun feed reader lain. ➢Footer : Bagian bawah situs, biasa berisi copyright dan identitas pemilik serta pengembang situs. ➢ImageSlideShow : Penampil gambar secara acak yang bergantian berupa slide dari satu gambar ke gambar lain. ➢Latest News : Berita terbaru pada situs. ➢Login : Form login, lengkap dengan menu registrasi. ➢Menu : Menu baru. ➢Most Read Content : Daftar konten atau isi situs yang paling sering dibaca. ➢Newsflash : Tampilan satu kategori tertentu yang dijadikan sekilas info atau news flash pada situs. ➢Poll : Pemilihan polling, serta menu untuk melihat hasilnya. ➢Random Image : Penampilan gambar secara acak dari suatu folder yang ada pada situs. Berubah bila kita berpindah halaman. ➢Related Articles : Artikel-artikel yang berhubungan. ➢Search : Modul pencarian dari artikel yang ada pada situs. ➢Sections : Menu section yang ada pada situs untuk melihat artikel apa saja yang ditulis pada section tersebut. ➢Statistics : Statistik pengunjung situs. ➢Syndicate : Konetifitas situs dengan situssitus lain yang saling berhubungan. ➢Who's Online : Daftar pengunjung yang sedang ➢Archived

4. Penutup Joomla merupakan CMS yang open source, kita bisa mengubah dan mengganti isinya sesuai keinginan kita. Selain itu banyak sekali dukungan dari internet yang bisa kita dapatkan berkenaan dengan joomla baik itu forum untuk menjawab pertanyaan-pertanyaan kita, hingga dukungan komponen-komponen joomla yang bisa kita dapatkan dari internet baik itu berupa template, plugin, modul, dan lain-lain. Penulis menyarankan beberapa situs untuk dikunjungi diantaranya adalah sebagai berikut. ✔ http://help.joomla.org ✔ http://forum.joomla.org ✔ http://dev.joomla.org ✔ http://extensions.joomla.org Selain itu kreatifitas pengembang perlu diberdayakan untuk menciptakan suatu situs yang menarik dan dinamis. Penulis sangat mengharapkan kritik dan saran dari pembaca untuk kemajuan tulisan-tulisan selanjutnya, atau revisi tulisan ini bila diperlukan. Daftar Pustaka Graf, Hagen, Building Websites with Joomla! 1.5, PACKT Publishing, 2008. Wisnu, Harindra, Dasar-Dasar Web Design dengan PHP dan MySQL, Teknik Elektro Universitas Diponegoro, 2006. ______, Aplikasi Program PHP & MySQL untuk Membuat Website Interaktif, Penerbit Andi, 2004 Harindra Wisnu P ( L2F004481 ) Dilahirkan di Blora 21 tahun yang lalu. Berbekal pendidikan dasar dan menengah pertama di Blora, lalu melanjutkan pendidikan tingkat atas di semarang. Sejak tahun 2004 hingga kini sedang menempuh program strata 1 di Teknik Elektro Universitas Diponegoro dengan bidang konsentrasi Informatika dan Komputer. Aktif di berbagai kegiatan dan komunitas terutama di bidang teknologi informasi. Semarang, 13 Juni 2008