Indar Sugiarto, Rintiani Paarrang, Iwan Handoyo Putro. Pembuatan

Seminar Nasional Teknologi Informasi 2009 A2

1

PEMBUATAN JOOMLA EXTENSION UNTUK PENGEMBANGAN WEBSITE LABORATORIUM AKADEMIK

BERBASIS CMS-JOOMLA

Indar Sugiarto 1) Rintiani Paarrang 2) Iwan Handoyo Putro 3)

1,2,3) Jurusan Teknik Elektro – Universitas Kristen Petra Jl. Siwalankerto 121-131, Surabaya – 60236, Indonesia

email : [email protected]

ABSTRACT

Dalam pembuatan situs berbasis open source CMS (content management system), kreativitas dan produktivitasnya dapat ditingkatkan dengan memanfaatkan modul-modul tambahan untuk menambah fungsionalitas dari fungsi-fungsi pokok yang tersedia dalam program utama CMS tersebut. CMS berbasis Joomla! menggunakan konsep yang disebut extension untuk melengkapi program inti dari Joomla!. Extension yang banyak dipakai oleh komunitas pengguna joomla! rata-rata dikembangkan untuk memenuhi kebutuhan yang spesifik bagi pengembangan sebuah website. Dalam makalah ini, dijelaskan mekanisme dan hasil pembuatan Joomla! extension yang digunakan untuk mengembangkan sebuah website yang mengelola informasi dan administrasi laboratorium akademik terutama yang berhubungan dengan manajemen praktikum di laboratorium tersebut. Informasi yang akan disajikan melalui website tersebut dapat berupa pengumuman, jadwal praktikum, tugas, informasi nilai dan pendaftaran kelas praktikum secara online. Extension tersebut dibuat untuk Joomla! 1.5 dengan menggunakan bahasa pemrograman PHP&MySQL. Untuk melakukan pemrosesan data, komponen dibuat pada bagian backend administrator yang dikhususkan hanya untuk admin dan frontend untuk tampilan pada web yang diakses oleh mahasiswa. Berdasarkan hasil pengujian secara online, Joomla! extension yang dibuat dapat berfungsi baik.

Key words

CMS, Joomla! extension, website laboratorium akademik

1. Pendahuluan

Sampai saat ini internet telah dimanfaatkan dalam dunia pendidikan khususnya di perguruan tinggi. Berbagai pelayanan terhadap mahasiswa dapat dilakukan secara online tanpa harus melalui tatap muka antara mahasiswa

dengan dosen ataupun karyawan. Di beberapa jurusan yang menggunakan fasilitas laboratorium juga membutuhkan fasilitas internet untuk memberikan layanan informasi kepada mahasiswa. Hal ini akan memudahkan mahasiswa untuk menjangkau informasi seputar kegiatan laboratorium. Komunikasi antar para asisten, laboran, dosen dan mahasiswa bisa ditingkatkan menjadi lebih efektif.

Membuat sebuah website yang menyajikan informasi seputar kegiatan laboratorium tidaklah sederhana. Karena itu dalam makalah ini diusulkan sebuah metode pengembangan website laboratorium dengan konsep CMS. Platform CMS yang digunakan adalah Joomla! versi 1.5. Akan tetapi, karena inti program utama Joomla! tidak dilengkapi dengan modul-modul yang menunjang sistem informasi laboratorium, maka kami mengusulkan untuk membuat komponen tambahan yang bersifat generik bagi Joomla! yang dapat dipasang pada semua instalasi Joomla! versi 1.5 sebagai sebuah extension. Tujuan dari penelitian ini adalah untuk menghasilkan extension yang secara khusus dapat dimanfaatkan untuk manajemen aktivitas laboratorium. Extension ini dibuat dengan pendekatan open source dengan harapan dapat digunakan dan mendapat dukungan dari institusi-institusi pendidikan tinggi penyelenggara kegiatan akademik berupa praktikum di laboratorium. Metode yang digunakan adalah pembuatan Joomla! extension berupa komponen dan modul yang dapat diinstal pada situs web yang menggunakan platform Joomla! versi 1.5.

2. Disain dan Implementasi

2.1 Konsep CMS berbasis Joomla!

Joomla! adalah platform CMS yang meupakan produk open source yang dirilis dalam 2 versi GPL license. Joomla! menjadi satu open source CMS yang paling popular, dimana terbukti dengan banyaknya penghargaan

A2 Seminar Nasional Teknologi Informasi 2009

8

besar yang diperoleh dari komunitas online. Salah satu hal yang membuat Joomla! sangat popular adalah banyaknya extension Joomla! yang dapat diaplikasikan yang dapat diperoleh baik secara gratis maupun secara komersial [1]. Hal tersebut memungkinkan pengguna dapat mengembangkan lebih jauh dari menejemen konten yang sederhana.

Pada Joomla! terdapat beberapa proses umum seperti pengambilan konten, memformatnya dan kemudian mengembalikan ke web browser.

Gambar 1. Proses layanan yang dilakukan oleh CMS Joomla! [2] Gambar 1 menunjukkan kondisi saat browser me-

request suatu halaman pada web server. Request ini menyebabkan bagian-bagian Joomla! dimasukkan ke web server dan memulai eksekusi oleh PHP engine pada server [2]. Joomla! manganalisa permintaan dalam menentukan konten apa yang diminta, dan kemudian sistem Joomla! membuka koneksi ke server basis data lalu mengambil bagian yang sesuai dari database misalnya artikel. Ketika konten artikel diambil, Joomla! akan memformat artikel tersebut dengan style yang dipilih sesuai dengan template user. Joomla! akan membuat tampilan HTML dan mengirim kembali ke browser, dan pada saat itu artikel muncul pada user dalam bentuk file HTML statis.

Terdapat tiga bagian penting pada Joomla! dan sangat berkaitan dengan perluasan (extension) fungsionalitas Joomla! yang berada pada bagian inti sistem. Semua yang berhubungan dengan extension dikerjakan pada bagian backend Ketiga bagian tersebut adalah components, modules, dan plugins [3]. Terdapat juga languages dan template namun kedua bagian ini semata-mata untuk mengubah tampilan halaman output. • Components adalah bagian yang paling dasar dalam

Joomla! extension. Komponen inilah yang menghasilkan output untuk ditampilkan pada area utama. Komponen ditandai dengan prefix “com_”.

• Modules digunakan untuk menampilkan bagian konten, biasanya berada pada bagian kiri, kanan, atas ataupun bawah tampilan halaman. Modul Joomla! selalu mempunyai nama dengan prefix “mod_<nama file>”. File penyusun suatu modul paling tidak terdiri dari 2 buah file. Yang pertama adalah file berekstensi “.php”, yaitu file utama penyusun modul tersebut. Sedangkan yang kedua adalah file berekstensi “.xml”, yaitu file yang berguna untuk proses instalasi modul Joomla! tersebut dan untuk keperluan pengaturan parameter-parameter modul. Secara umum, komponen bisa memiliki asosiasi dengan satu atau lebih modul.

• Plugins digunakan untuk memformat konten sebelum ditampilkan oleh sebuah modul. Terdapat beberapa tipe plugin, masing-masing dapat digunakan secara berbeda; namun hampir semua plugin dijalankan pada setiap event.

2.2 Pembuatan Extension

Pada implementasi website laboratorium akademik dengan CMS Joomla! ini, dibuat beberapa komponen antara lain: • com_matprak. Komponen ini dibuat dalam rangka

membuat aplikasi untuk manajemen praktikum, jadwal praktikum, agenda praktikum, jumlah mahasiswa dan asisten koordinator yang bertanggung jawab pada praktikum tersebut. Komponen ini dibuat pada direktori administrator dan direktori components. Komponen ini akan bekerja sama dengan basis data yakni tabel “jos_components”, tabel “jos_matprak” dan tabel “jos_matprak_daftars”.

• com_subjects. Komponen ini dibuat untuk mengatur daftar-daftar mahasiswa berdasarkan matakuliah atau praktikum yang mereka ambil beserta dengan pengaturan nilai-nilai yang diperoleh selama praktikum. Data-data akan diproses melalui komponen ini dan dimasukkan ke basis data yang dapat dipanggil sewaktu-waktu pada saat diperlukan. Komponen ini adalah bagian yang sangat penting karena berhubungan dengan autentikasi mahasiswa dalam melakukan pendaftaran praktikum dan melihat nilai. Komponen com_subjects akan bekerja sama dalam basis data dengan beberapa tabel yakni “jos_users”, “jos_categories”, “jos_matprak” dan “jos_matprak_daftars”.

• com_asisten. Komponen ini akan digunakan untuk mengatur data asisten dan komentar-komentar para mahasiswa atau user terhadap kinerja asisten. Komponen ini akan dibuat pada direktori administrator untuk sistem backend dan juga pada direktori components untuk aplikasi frontend karena data ini akan ditampilkan pada website laboratorium. Komponen ini akan berhubungan dengan basis data pada tabel “jos_components” dan tabel komponen ini sendiri yaitu “jos_asisten”

• com_dosen. Komponen ini untuk mengatur data atau keterangan mengenai dosen – dosen jurusan teknik elektro yang mungkin akan dibutuhkan oleh mahasiswa. Sama seperti com_asisten, com_dosen juga akan dibuat pada direktori admnistator dan components untuk aplikasi yang sama yakni mengatur data pada backend dan frontend. Komponen ini akan berhubungan dengan basis data pada tabel “jos_components” dan tabel komponen ini sendiri yaitu “jos_dosen”.


9

Sebelum melalui pengkodean, terdapat beberapa folder yang harus dibuat dan juga query yang akan dijalankan. Ini adalah hal pertama yang akan dibuat dalam membangun komponen baru. Folder tersebut akan dibuat dalam direktori components dan diberi skema penamaan yang spesifik karena nama setiap komponen harus berbeda dengan komponen lain (unik) tanpa menggunakan spasi. Kode dimasukkan dalam dua folder yakni direktori components dan administrator dimana setiap nama folder komponen harus diberi prefix “com_”. Pada saat komponen di-load dari frontend, Joomla! kan melihat file dengan nama unik pada bagian akhir dalam ekstensi “.php”. Dalam folder “components/com_[nama komponen]” pertama kali akan dibuat file “[nama komponen].php” sebagai kode untuk frontend. Begitu juga dengan backend, dibuat file dengan nama “admin. [nama komponen].php” dalam folder “administarator/components/com_[nama komponen]”.

Untuk menambahkan komponen com_matprak, tabel yang harus di isi pada basis data adalah tabel “jos_components”. Tabel “jos_components” merupakan tabel yang berisi semua keterangan tentang komponen-komponen yang ada pada Joomla!. adapun proses pengisianya adalah seperti ditunjukkan pada gambar berikut.

Gambar 2. Konfigurasi komponen “com_matprak” pada tabel

“jos_components”. Kode partama yang akan dibuat adalah kode untuk

membuat aplikasi toolbar yang digunakan untuk editing, saving, deleting dan publishing:

<?php defined( '_JEXEC' ) or die( 'Restricted access' ); class TOOLBAR_matprak { function _NEW() {

JToolBarHelper::save(); JToolBarHelper::apply(); JToolBarHelper::cancel();

} function _DEFAULT() {

JToolBarHelper::title( JText::_( 'Matakuliah Praktikum' ), 'generic.png' );

JToolBarHelper::publishList(); JToolBarHelper::unpublishList(); JToolBarHelper::editList(); JToolBarHelper::deleteList(); JToolBarHelper::addNew();

} } ?>

Kode di atas disimpan pada folder

administrator/components/com_asisten dan diberi nama toolbar.matprak.html.php. Selanjutnya setelah class toolbar didefinisikan, selanjutnya akan dibuat kode yang akan memanggil toolbar mana yang akan ditampilkan sesuai dengan kondisi pemanggilan. Pada backend, untuk memanggil toolbars, Joomla! secara otomatis pertama kali memanggil file yang memiliki nama sama dengan nama akhir komponen dan berekstensi “.php”. oleh karena itu dibuat file yang memiliki nama sesuai dengan komponen dan dalam format php akan tetapi harus diawali dengan kata toolbar untuk segera dikenali oleh Joomla!. File yang akan dibuat diberi nama “toolbar.matprak.php” dan dimasukkan dalam folder yang sama yakni folder administrator/components/com_matprak:

<?php defined( '_JEXEC' ) or die( 'Restricted access' ); require_once( JApplicationHelper::getPath( 'toolbar_html' ) ); switch($task) {

case 'edit': case 'add':

TOOLBAR_matprak::_NEW(); break;

default: TOOLBAR_matprak::_DEFAULT(); break;

} ?>

Sehingga toolbar yang akan ditampilkan disesuaikan dengan variabel $task. Setelah file ini disimpan maka pada browser backend akan terlihat window seperti gambar berikut.

Gambar 3. Toolbars backend pada “$task=default”.


10

Secara keluruhan, proses yang terjadi pada matakuliah praktikum di frontend ditunjukkan dalam flow chart seperti gambar berikut.

Gambar 4. Flow chart proses informasi dan pendaftaran praktikum pada website laboratorium yang dibuat.

Untuk komponen com_subjects, karena komponen

ini hanya digunakan pada proses pengelolaan data, maka komponen com_subjects hanya dibuat pada direktori administrator/components/ dengan membuat folder “jos_subjects” di dalamnya. Di dalam folder “jos_subjects” terdapat beberapa file program dan folder, yang membangun komponen subjects: • “subjects.php” • “controller.php” • “models/subjects.php “ • “models/subject.php” • “views/subject/views.html.php” • “views/subject/tmpl/form.php” • “views/subjects/view.html.php” • “views/subjects/tmpl/default.php”

File-file di atas bekerja sama dalam sistem komponen “subjects” dan file dibagi dalam beberapa bagian penting mengikuti Models, Views, Controller (desain MVC) dengan tujuan antara lain; models digunakan untuk mendefinisikan cara-cara yang berbeda dalam bagaimana data diakses sedangkan views bertugas melakukan generate data dan controller yang akan menerima perintah dan mengarahkan perogram untuk berkoresponden dengan task views. Sama seperti komponen lainya, untuk membuat komponen baru harus dilakukan registrasi komponen pada basis data, yakni pada tabel “jos_components” seperti pada gambar berikut.

Gambar 5. Konfigurasi komponen “com_subjects” pada tabel

“jos_components”. Setelah seluruh program disimpan dan dijalankan

pada backend, berikut adalah tampilan yang diperoleh:

Gambar 6. Tampilan data backend komponen “subject” pada daftar

mahasiswa matakuliah. Komponen com_asisten adalah komponen yang

digunakan untuk menyimpan data-data yang berkaitan dengan asisten laboratorium. Data asisten dibutuhkan agar dalam memberikan informasi praktikum kepada mahasiswa nama asisten yang menkoordinir praktikum tersebut dapat diikutkan dalam informasi. Sama seperti komponen “com_matprak”, komponen “com_asisten” dibuat pada frontend dan backend.

Seperti komponen-komponen lainya, selain membuat basis data untuk komponen “com_asisten”, komponen tersebut harus diregistrasikan pada tabel “jos_components” pada basis data seperti pada gambar berikut.


11

Gambar 7. Registrasi komponen “com_asisten” pada tabel

“jos_components”. Berikut ini adalah tampilan dari komponen

com_asisten yang berjalan pada backend.

Gambar 8. Tampilan daftar asisten pada backend.

3. Hasil Percobaan

Berikut ini adalah tampilan akhir pada backend ketika extension yang dibuat dalam penelitian ini diintegrasikan dengan Joomla! yang sudah terinstal di server.

Gambar 9. Extension yang dibuat untuk melengkapi website laboratorium

menggunakan CMS Joomla! Seperti ditunjukkan pada gambar 4, pada proses

pendaftaran praktikum yang ditangani oleh komponen com_matprak terjadi beberapa hal pokok antara lain

penampilkan jadwal, agenda, asisten koordinator dan mahasiswa yang terdaftar pada suatu praktikum matakuliah. Kemudian pada bagian ini juga dapat dilakukan pendaftaran matakuliah dan review nilai tugas.

Setelah bagian backend dan frontend dari sistem selesai dibuat, dilakukan pengujian online sebagai berikut. Untuk dapat melakukan pendaftaran, mahasiswa sudah harus terdaftar sebelumnya pada matakuliah tersebut. Program akan mencocokkan username user dengan NRP mahasiswa pada tabel “jos_subjects” yang berisi daftar nama matakuliah mahasiswa. Jika mahasiswa tersebut berhak, maka selanjutnya program akan melihat lagi status mahasiswa tersebut pada tabel “jos_matprak”_daftars apabila telah terdaftar sebelumnya pada praktikum tersebut, maka form daftar praktikum tidak akan ditampilkan lagi. Sebaliknya jika belum maka mahasiswa tersebut dapat melakukan pendaftaran melalui form pendaftaran yang dipanggil oleh program. Kemudian hal yang sama juga dalam menampilkan nilai yakni jika mahasiswa telah melakukan pendaftaran praktikum maka mahasiswa yang bersangkutan dapat melihat nilainya. Mahasiswa hanya bisa melihat nilai berdasarkan praktikum yang diambil dan hanya boleh melihat nilainya sendiri. Hasil ujicoba dari mekanisme ini ditunjukkan oleh gambar berikut.

Gambar 10. Tampilan review untuk pengujian com_matprak dan

com_subjects yang sudah terintegrasi dengan elemen-elemen komponen yang lain.


12

Gambar 11. Tampilan form pendaftaran praktikum setelah user

mendapatkan informasi yang diatur oleh com_matprak dan com_subjects.

Gambar 12. Mahasiswa berhasil terdaftar di praktikum dan juga dapat

mengakses nilai.

Pengujian terhadap komponen com_asisten juga dilakukan baik di sisi backend maupun frontend. Gambar berikut menunjukkan hasil pengujian setelah Joomla! merespon request yang dikirimkan via web browser.

Gambar 13. Form untuk memasukkan profil asisten di sisi backend.

Gambar 14. Tampilan daftar asisten pada backend.

Gambar 15. Komponen profil asisten yang berisi list asisten di sisi

frontend.

Secara umum, komponen-komponen dari Joomla! extension yang dibuat telah berhasil diuji dengan baik. Dari hasil ujicoba yang melibatkan 14 orang mahasiswa sebagai penguji/responden, keempat komponen dari Joomla! extension yang dibuat menunjukkan hasil yang


13

sangat baik. Tabel berikut menujukkan fungsi-fungsi yang diuji dari keempat komponen yang telah dibuat.

Tabel 1. Hasil pengujian fungsi web secara online oleh 14 user.

Fungsi-fungsi yang diuji Berjalan Tidak Berjalan

1. Membuat account baru 14 0 2. Sistem Email 14 0 3. Aktivasi email 14 0 4. Login User 14 0 5. Fungsi Pendaftaran Praktikum 14 0 6. Fungsi pembagian quota kelas 14 0 7. Fungsi Nilai 14 0 8. Fungsi Profil Asisten dan komentar 14 0 9. Fungsi Profil Dosen 14 0 10. Fungsi download*) 13 1 11. Fungsi upload*) 13 1

*) fungsi ini memanfaatkan modul bawaan Joomla! sehingga sangat tergantung core script dari Joomla! sendiri

4. Kesimpulan

Sebuah mekanisme dan hasil pembuatan Joomla! extension yang digunakan untuk mengembangkan sebuah website yang mengelola informasi dan administrasi laboratorium akademik terutama yang berhubungan dengan manajemen praktikum di laboratorium tersebut telah dipaparkan. Informasi yang akan disajikan melalui website tersebut dapat berupa pengumuman, jadwal praktikum, tugas, informasi nilai dan pendaftaran kelas praktikum secara online. Extension yang dibuat dalam penelitian ini ditujukan untuk diimplementasikan menggunakan Joomla! 1.5 dengan menggunakan bahasa pemrograman PHP & MySQL. Untuk melakukan pemrosesan data, komponen dibuat pada bagian backend administrator yang dikhususkan hanya untuk admin dan frontend untuk tampilan pada web yang diakses oleh mahasiswa. Berdasarkan hasil pengujian secara online, Joomla! extension yang dibuat dapat berfungsi baik. REFERENSI [1] Kennard, James., 2007, “Mastering Joomla! 1.5 Extension

and Framework Development - The Professional's Guide to Programming Joomla!”, Birmingham - Mumbai: PACKT Publishing.

[2] Rahmel, Dan., 2007, “Beginning Joomla! From Novice to Professional. Berkeley”, CA: Apress.

[3] LeBlanc, Joseph., 2007, “Learning Joomla! 1.5 Extension Development - Creating Modules, Components, and Plug-Inswith PHP”, Birmingham - Mumbai: PACKT Publishing.

Indar Sugiarto, memperoleh gelar S.T dari Institut Teknologi Sepuluh Nopember (Surabaya) tahun 2001 dan M.Sc dari University Of Bremen (Jerman) tahun 2008. Saat ini bekerja sebagai Staf Pengajar Jurusan Teknik Elektro Universitas Kristen Petra Surabaya. Rintiani Paarrang, memperoleh gelar S.T dari Universitas Kristen Petra (Surabaya) tahun 2009. Saat ini bekerja sebagai karyawan perusahaan swasta di Surabaya. Iwan Handoyo Putro, memperoleh gelar S.T dari Universitas Gajah Mada (Yogyakarta) tahun 2002 dan M.Dig.Comm dari Monash University (Australia) tahun 2006. Saat ini bekerja sebagai Kepala Laboratorium Telematika dan juga Staf Pengajar Jurusan Teknik Elektro Universitas Kristen Petra Surabaya.

Documents

Indar Sugiarto, Rintiani Paarrang, Iwan Handoyo Putro. Pembuatan