Pengembangan Prototipe Content Management System Kompaskarier.com

Bonar

Ultimatics Vol. 3 No.1, Juni 2011

Pengembangan Prototipe Content Management System Kompaskarier.com MARCEL BONAR1, WINARNO2 Program Studi Teknik Informatika, Fakultas Teknologi Informasi dan Komunikasi Universitas Multimedia Nusantara Gading Serpong, Tangerang, INDONESIA [email protected]; [email protected] Abstract— Content Management System (CMS) situs www.kompaskarier.com yang dikembangkan oleh IT Department PT Kompas Cyber Media telah berjalan dengan versi beta namun pengaturan konten di dalamnya dinilai masih kurang oleh pengembang. Untuk memenuhi kebutuhantersebut, serta meningkatkan kualitas situs, efektifitas penulis konten, dan penyimpanan konten dalam basis data maka diperlukan prototipe CMS berbasis web. Prototipe menyediakan fungsi dan fitur baru yang melengkapi CMS versi beta. Fungsi dan fitur CMS meliputi pengaturan iklan berupa artikel dan banner untuk administrator, pengaturan profil dan userlogin, iklan yang dihasilkan menggunakan webservices, dan pengaturan kategori artikel. Prototipe yang dihasilkan dapat dikembangkan lebih lanjut oleh pengembang menjadi sistem yang terintegrasi dengan www.kompaskarier.com. Prototipe CMS dibangunmenggunakan aplikasi Apache web server, PHP, MySQL Server, NetBeans IDE, JavaScript dan HTML.

Keywords— pengaturan konten, Content Management System, CMS, prototipe, PT Kompas Cyber Media, www.kompaskarier.com

I. PENDAHULUAN Saat ini trend world wide web sudah begitu pesat, banyak perusahaan sudah menjadikan website sebagai salah satu media komunikasi utamanya dengan para konsumen. Namun terkadang untuk mengatur sebuah website di dalam perusahaan diperlukan suatu sistem untuk memudahkan para pengguna website yang tentu saja bukan hanya konsumen atau awam melainkan administratorataupun manager dari perusahaan tersebut di berbagai divisi, yang tidak harus mengerti bahasa pemrograman web untuk ambil bagian dari pembuatan website. Dalam hal

134

inilah mengapa Content Management System (CMS) dibutuhkan. Berdasarkan data dari CMSWire.com, pertumbuhan market pemakai CMS pada tahun 2010 naik menjadi 12% dalam domain di Asia Pasifik. Hal ini menunjukkan kebutuhan akan CMS untuk suatu website telah berkembang, khususnya untuk penyedia layanan-layanan web seperti blogspot, wordpress, wiki, dan tidak ketinggalan situs yang berasal dari Indonesia yang membuka portal informasi seperti kompas.com, detik.com, dan banyak situs lain termasuk kompaskarier.com di dalamnya. CMS dibutuhkan suatu website harus disesuaikan dengan kebutuhan website Distribusi Data Listrik

Ultimatics Vol.3 No. 1, Juni 2011

tersebut. Blog misalnya, butuh WYSIWYG (What You See Is What You Get) Editor, sementara aplikasi jejaring sosial butuh Gallery Photo seperti di Facebook atau pengarsipan teks seperti di Twitter. Kebutuhan akan fungsi dan fitur CMS beragam dalam satu website dan inilah yang terkadang menjadi kendala bagi website yang mempunyai layanan beragam. Kompaskarier.com sebagai salah satu portal informasi bursa kerja, tidak hanya memfasilitasi lowongan pekerjaan saja, namun juga mengimplementasikan banyak layanan. Tips karir, konsultasi karir, bahkan bisnis banner iklan juga merupakan bagian layanan yang disediakan kompaskarier.com. Oleh karena itu fungsi yang harus ada dalam CMS dalam kompaskarier.com harus mencakup pengaturan semua layanan. Saat ini CMS dalam kompaskarier.com telah sampai dalam rilis versi beta. CMS yang diimplementasikan masih belum menyediakan layanan untuk pengaturan iklan berupa artikel dan banner untuk administrator, pengaturan profil dan userlogin, iklan yang dihasilkan menggunakan webservices, dan pengaturan kategori artikel. Di sinilah, sebuah Prototipe CMS akan membantu dalam menyelesaikan kelemahan aplikasi CMS kompaskarier.com yang ada saat ini. Kebutuhan akan pembuatan prototipe CMS untuk kompaskarier.com membuka peluang programmer dalam PT Kompas Cyber Media yang membawahi banyak portal situs di Indonesia. Seiring dengan kegiatan magang kerja yang diberikan oleh Universitas Multimedia Nusantara, maka digunakanlah kesempatan untuk mengisi peluang programmer yang ditawarkan PT Kompas Cyber Media sekaligus memenuhi kewajiban magang kerja dari Universitas Multimedia Nusantara. Hal-hal yang telah disebutkan menjadi dasar dan latar belakang dalam pembuatan penelitian dengan judul “Pengembangan Prototipe Content Management System kompaskarier.com”.

Distribusi Data Listrik

Bonar

II. TELAAH LITERATUR A. Content Management System (CMS)

Sistem manajemen konten (Inggris: Content Management System, disingkat CMS), adalah perangkat lunak yang memberikan akses kepada seseorang untuk menambahkan maupun memanipulasi isi dari suatu situs Web. Umumnya, sebuah CMS (Content Management System) terdiri dari dua elemen yaitu. aplikasi manajemen isi (ContentManagement Application, (CMA)) dan aplikasi pengiriman isi (ContentDelivery Application (CDA)). Elemen CMA memperbolehkan administrator CMS isi yang mungkin tidak memiliki pengetahuan mengenai HTML (HyperText Markup Language), untuk mengatur pembuatan, modifikasi, dan penghapusan isi dari suatu situs Web tanpa perlu memiliki keahlian sebagai seorang Webmaster. Elemen CDA menggunakan dan menghimpun informasi-informasi yang sebelumnya telah ditambah, dikurangi atau diubah oleh si empunya situs web untuk meng-update atau memperbaharui situs Web tersebut. Kemampuan atau fitur dari sebuah sistem CMS berbeda-beda, walaupun begitu, kebanyakan dari software ini memiliki fitur publikasi berbasis Web, manajemen format, kontrol revisi, pembuatan index, pencarian, dan pengarsipan. Contoh pemanfaatan CMS adalah website perusahaan, bisnis, organisasi atau komunitas, portal, galeri foto, aplikasi e-commerce, mengelola website pribadi / blog, dan lain-lain. Dalam perkembangannya hal-hal yang bisa diatur oleh sebuah CMS semakin banyak. Contohnya block atau modulposition, frontpage manager, bahkan templates atau themes (tema) dari tampilan CMS itu sendiri. Struktur CMS secara garis besar terdiri dari dua bagian, yaitu Frontend dan Backend. Frontend adalah tampilan halaman web kita, yaitu halaman yang diakses oleh pengunjung umum. sedangkan Backend adalah bagian administrasi yang hanya bisa diakses sang pemilik web 135

Bonar

maupun orang-orang yang telah ditunjuk untuk melakukan manajemen website. Istilah umumnya halaman admin (admin page).CMS bisa dapat dibuat sendiri. Namun untuk membuatnya harus mempunyai pengetahuan yang memadai tentang bahasa pemrograman dan database . B. RDMS (Relational Database Management System)

Relational Database adalah salah satu konsep penyimpanan data, dimana sebelum konsep database relasional muncul ada dua model database yaitu Network Database dan Hierarchy Database. Dalam database relasional, data disimpan dalam bentuk relasi atau tabel dua dimensi, dan antar tabel satu dengan tabel lainnya terdapat hubungan atau relationship, sehingga sering kita baca diberbagai literatur, database didefinisikan sebagai “kumpulan dari sejumlah tabel yang saling berhubungan atau memiliki keterkaitan”. Kumpulan dari data yang diorganisasikan sebagai tabel tersebut disimpan dalam bentuk data elektronik di dalam harddisk komputer. Untuk membuat struktur tabel, mengisi data ke tabel, mengubah data jika diperlukan dan menghapus data dari tabel diperlukan software. Software yang digunakan membuat tabel, isi data, ubah data dan hapus data disebut Relational Database ManagementSystem atau dikenal dengan singkatan RDBMS sedangkan perintah yang digunakan untuk membuat tabel, isi, ubah dan hapus data disebut perintah SQL yang merupakan singkatan dari Structure Query Language. Selain berfungsi untuk membuat tabel, mengisi data, mengubah dan menghapus data, RDBMS juga berfungsi untuk manajemen data dalam skala besar agar dapat mendukung proses bisnis kontinyu dan real time, suatu RDBMS dituntut untuk mempunyai kemampuan manajemen user dan keamanan data, backup dan recovery data serta kemampuan lainnya yang berkaitan dengan kecepatan pemrosesan data (performance) . C. Konsep Perancangan Sistem

136

Ultimatics Vol. 3 No.1, Juni 2011

Nama model ini sebenarnya adalah “Linear Sequential Model”. Model ini sering disebut dengan “classic life cycle” atau model waterfall. Model ini adalah model yang muncul pertama kali yaitu sekitar tahun 1970 sehingga sering dianggap kuno, tetapi merupakan model yang paling banyak dipakai didalam Software Engineering (SE). Model ini melakukan pendekatan secara sistematis dan urut mulai dari level kebutuhan sistem lalu menuju ke tahap analisis, desain, coding, testing / verification, dan maintenance. Disebut dengan waterfall karena tahap demi tahap yang dilalui harus menunggu selesainya tahap sebelumnya dan berjalan berurutan. Sebagai contoh tahap desain harus menunggu selesainya tahap sebelumnya yaitu tahap requirement. III. ANALISIS MASALAH Kompaskarier.com telah mengimplementasikan CMS sebelum prototipe ini dibuat, namun dalam CMS tersebut terdapat permasalahan dan dinilai kurang memadai oleh pengembang CMS. Keterbatasan CMS yang ada antara lain. 1. Penulisan artikel-artikel dalam kompaskarier.com dilakukan dengan metode semi-manual yaitu para penulis artikel terdaftar memberikan tulisannya ke pengurus kompaskarier.com (dimana kompaskarier.com sendiri tidak memiliki redaksi) lalu kemudian oleh pengurus, tulisan tersebut kemudian diunggahlewat CMS yang ada. Jadi, penulis artikel tidak bisa mendapatkan akses langsung ke dalam CMS untuk mengunggah tulisannya. 2. Peletakkan dan pengunggahan iklan di dalam kompaskarier.com dilakukan dengan cara hardcoding . Hal ini menyebabkan yang bisa meletakkan iklan hanya programmer saja, bukan pengurus kompaskarier.com sedangkan hak bisnis iklan dipegang oleh pengurus (Catatan : pengurus Distribusi Data Listrik

Ultimatics Vol.3 No. 1, Juni 2011

3.

4.

5.

6.

kompaskarier.com bukanlah orang IT ataupun programmer, merupakan orang-orang manajerial yang mengatur tentang lowongan pekerjaan yang didaftar lewat KCM). Kendala yang sama ditemukan untuk banner affiliate dari kompaskarier.com dan banner kompaskarier.com sendiri. Fitur tanya jawab ahli karier yang ada dalam kompaskarier.com. Diserahkan secara manual oleh ahli karier kemudian diunggah dengan cara hardcoding di dalam kompaskarier.com. Pengaturan kategori konten yang rancu dan belum punya bentuk yang tetap dalam kompaskarier.com. Profil ahli karier yang ada di kompaskarier.com hanya dibatasi dua saja dan spesifik, tidak bisa menambah jumlah ahli karier yang bersedia ikut menyumbangkan tulisan atau tipsnya ataupun mengganti kedua ahli karier yang sudah terdaftar. Generasi iklan lowongan pekerjaan yang ada di dalam webservice khusus yang dimiliki Kompas Cyber Media belum mempunyai standard yang tetap dan penulisannya tidak konsisten.

IV. PENGEMBANGAN CMS Berdasarkan kendala yang ditemui, solusi yang ditawarkan adalah pembuatan prototipe CMS. Selanjutnya, prototipe dapat dikembangkan lebih lanjut oleh KCM.Prototipe CMS ini dibangun menggunakan PHP scripting language, memakai RDMS MySQL, dan tampilan dari CMS merupakan gabungan dari HTML, CSS dan JavaScriptprogramming (keseluruhan spesifikasi mendetail akan dijelaskan lebih lanjut dalam poin 4.4.1 tentang instalasi sistem) dan diimplementaiskan pada server lokal KCM. Untuk mengatasi kendala-kendala teknis yang telah diuraikan, maka prototipe CMS ini terdiri dari beberapa modul. 1. Modul Login& Logout

Distribusi Data Listrik

Bonar

2.

3.

4.

5.

Modul Login berfungsi untuk membuka akses untuk publik (penulis, editor dan admin kompaskarier.com dan memberikan keamanan ke dalam database server). Logout sendiri menjadi bagian dari modul ini. Modul Forget Password Modul Forget Password berfungsi untuk mengembalikan password yang lupa atau hilang bagi user yang mempunyai account dalam CMS kompaskarier.com. Prosedur lewat reset dari email. Modul Menu Utama Tampilan atau bentuk dasar isi dari CMS yang utama yang menjembatani modul fitur dengan Modul Login. Modul Fitur (masing-masing terdapat modul view, edit, save to file dan query controller). Modul yang menyediakan fungsi-fungsi untuk mengatur content apa saja yang ingin ditambah, diedit, dihapus atau digenerasi menjadi file lain dari kompaskarier.com . Modul ini berhubungan dengan input ke dalam database, file di server dan Front end CMS. 1) Modul Artikel Modul pengaturan artikel-artikel yang ada dalam kompaskarier.com erat hubungannya dengan kategori, lewat modul ini penulis artikel dapat mengunggah tulisannya di kompaskarier.com. Disediakan WYSIWYG Editor dan pengunggah gambar artikel. 2) Modul Pertanyaan Modul pengaturan tanya jawab dengan ahli-ahli karier yang terdaftar di kompaskarier.com. Hal ini memungkinkan seluruh pertanyaan dapat di-inputonline dari orang awam kemudian dapat dijawab oleh ahli-ahli karier. Bahkan administrator dapat memfilter pertanyaan yang dirasa kurang pantas. 3) Modul Profil Modul pengaturan para ahli karier atau penulis artikel yang terdaftar di 137

Bonar

kompas.com. sehingga user dapat melihat langsung kredibilitas penulis ataupun ahli karier yang ada. 4) Modul Banner Modul yang mengatur banner yang dapat diunggah dan digenerasi. Modul ini dibagi 3 berdasarkan besar gambar yang akan diunggah dan kebutuhan akan penempatannya dalam Front end CMS. a) Banner Perusahaan (Ukuran besar) b) Banner Iklan (Ukuran sedang) c) Banner Affiliate(Ukuran kecil) 5) Modul Kategori: Modul pengaturan kategori artikel 6) Modul User Modul pengaturan user,dimana hak akses user akan diatur dan modul apa saja yang dapat dipanggil oleh user tersebut dibatasi dengan pengaturan dalam modul ini. 7) Modul Latest Job Generasi lowongan kerja yang disediakan di webservice untuk kemudian ditampung dan dapat difilter ataupun disorting untuk dipilih mana saja lowongan yang infonya lengkap yang akan ditampilkan di Front end CMS. 6. Front end CMS 7. Front end adalah bentuk tampilan setelah content-content diunggah. Sebagai catatan, tampilan diambil dari HTML yang ada di kompaskarier.com, jadi tidak membuat berdasarkan desain sendiri namun mengimplementasikan langsung dalam CSS dan HTML dari kompaskarier.com yang asli. Proses pengembangan CMS dimulai dengan membuat data flow diagram (DFD), entity relationship diagram (ERD), sketsa layar, dan top-down design. Berikut ini adalah Data flow diagramdari prototipe CMS menggunakan versi Yourdan dan DeMarco.

138

Ultimatics Vol. 3 No.1, Juni 2011

Gambar 11. DFD level 0

Perancangan prototipe database mengacu pada kebutuhan data content kompaskarier.com. Tertulis dalam ERD berikut tipe data, field dan constraint untuk masing-masing tabel database.

Gambar 22. Entity Relationship Diagram (ERD)

Keterangan gambar 2 ERD. a. Gambar kunci merupakan primary key b. Gambar sharp (#) merupakan foreign key c. Normalisasi tidak dilakukan karena spesifikasi kebutuhan data dan field tiap tabel diperoleh dari user requirements. Sebelum dilakukan pengembangan terhadap tampilan dari prototipe CMS maka dibuat sketsa layarnya untuk tiap modul yang memiliki tampilan(beberapa modul seperti pada modul querycontroller dari modul fitur tidak mempunyai tampilan). Sketsa layar masing-masing modul ditunjukkan pada gambar 3 dan 4.

Distribusi Data Listrik

Ultimatics Vol.3 No. 1, Juni 2011

Bonar

diharapkan akan memberikan kontrol yang baik untuk penggunaan tiap fungsi pada tampilan layar dan juga untuk mencegah error terjadi. Langkah terakhir dari proses pengembangan CMS adalah membuat topdown design CMS.

Gambar 33. Sketsa laman index.php

Untuk sketsa layar login.php, confirm.php, dan forget.php, konsep pembuatan didasari dengan konsistensi untuk membuat suatu form username password yang tidak berubah dan peletakan pesan kesalahan (konsep pemberian feedback untuk user) yang tetap dan memakai warna terang. Tujuan adanya pesan kesalahan adalah untuk menghindari error yang terus menerus dilakukan user. Jika tidak ada pesan kesalahan maka user tidak tahu ada salah pada bagian apa. Konsep kotak form yang ditaruh di tengah dan sederhana bertujuan untuk mereduksi user untuk melihat dan memproses hal-hal yang tidak perlu ditampilkan.

Gambar 44. Sketsa layar [nama_modul]editor.php

Sketsa layar index.php menjadi container utama untuk modul-modul fitur,konsep pembuatan dari juga bagian dari konsistensi user interface, sehingga cukup dibuat 1 tampilan untuk keseluruhan fungsi back end CMS. Dengan adanya index.php ini juga mengurangi kebutuhan user untuk memproses tampilan yang berbeda-beda tiap fitur. Kemudian dengan penggunaan JavaScript pada modul fitur yang dikombinasikan dengan index.php Distribusi Data Listrik

V. IMPLEMENTASI SISTEM Implementasi sistem dalam server lokal KCM. Instalasi Sistem dijalankan di atas PHP dan MySQL server KCM dengan program administrator phpmyadmin. PHP Server& database MySQL diinstalasi menggunakan Zend Engine Version 2.2.0. Berikut spesifikasi PHP Server dan MySQL Servernya dengan konfigurasi server seperti terlampir di lampiran ke-9(L9). Prototipe dijalankan di dalam root folder dari localhostserver KCM, terbagi atas dua bagian. / (root folder) adalah tempat file Back end CMS / html2karier / adalah tempat Front end CMS untuk melihat tampilan. Instalasi CMS dengan menggunakan FTP dengan program FileZilla Client.File-file php yang dikerjakan ditransfer ke dalam IP 10.50.12.193 (IP lokal dari KCM). CMS dapat diakses melalui web browser melalui URL IP lokal KCM. User akan diarahkan ke menu index.php. Untuk dapat mengakses CMS, user terlebih dahulu harus login. Jika login sukses, maka akan diarahkan ke laman utama CMS. Dalam modul [nama_modul].php ini field-field akan keluar sesuai dengan fitur masing masing. Dalam screenshot adalah tampilan untuk modul artikel atau artikel.php. Modul lain akan mempunyai tampilan yang sama namun hanya nama field-nya saja berbeda-beda, tergantung model data tiap modul dalam database.

139

Bonar

Ultimatics Vol. 3 No.1, Juni 2011

field-nya saja berbeda-beda, tergantung model data tiap modul dalam database.

Gambar 5. Screenshot[nama_modul].php

Perlu diingat bahwa penamaan modul digunakan untuk penamaan tabel dalam database, jadi generasi item untuk setiap field hanya menggunakan query dan controller IF yang disediakan oleh PHP (keterangan lebih lanjut dapat dibaca di source code dalam lampiran). Khusus untuk modul latest job akan dijelaskan selanjutnya karena merupakan modul khusus yang berhubungan dengan webservice. (Catatan: jika nama field di klik maka list item dapat diurutkan berdasarkan item dalam field yang diklik tersebut).

VI. SIMPULAN Prototipe CMS telah diimplementasikan di server lokal KCM dan bertujuan untuk membantu pengembang kompaskarier.com untuk membuat versi rilis yang resmi ke depannya. Aplikasi yang telah diimplementasikan ini telah menampung semua fungsi yang dibutuhkan kompaskarier.com. Prototipe yang dibangun telah memenuhi user requirements. Sehingga, dapat dijadikan role model untuk pengembangan dikemudian hari. REFERENSI [1]

[2]

[3]

[4]

[5]

[6]

Gambar 6. Screenshot[nama_modul]editor.php

Dalam modul [nama_modul].php ini field-field akan keluar sesuai dengan fitur masing masing. Dalam screenshot adalah tampilan untuk modul artikel atau artikel.php. Modul lain akan mempunyai tampilan yang sama namun hanya nama

140

[7]

[8] [9]

Anonim. 2009. PHP for Beginners: Building Your First Simple CMS. Diakses tanggal 20 Desember 2010 dari URL: http://css-tricks.com/php-for-beginners-buildingyour-first-simple-cms/. Anonim. 2009. System Website CMS yang Tangguh dan Fleksibel. Diakses tanggal 20 Desember 2010 dari URL : http://www.cmsplaza.com/content-management-websitecms.html. Anonim. 2010. PHP. Diakses tanggal 21 Desember 2010 dari URL: http://unindra.net/web/publikasi/20054357001%20PHP%2 0server-side%20scripting%20.pdf. Anonim. 2010. Website Ideas and Purposes. Diakses tanggal 30 Desember 2010 dari URL: http://www.icms.info/create-website/website-ideas. Binanto, Iwan. 2008. 8 Aturan Emas Desain User Interface, Diakses tanggal 20 Desember 2010 dari URL: http://iwanbinanto.wordpress.com/2008/07/21/8-aturanemas-desain-user-interf ace/. Effendi, Ruddi. 2009. Web Server. Diakses tanggal 20 Desember 2010 dari URL: http://www.ittelkom.ac.id/library/index.php?view=article& catid=10:jaringan&id=406:-web-server&option=com_content&Itemid=15. Justinus, Tony. 2007. Waterfall Process Model, Diakses tanggal 20 Desember 2010 dari URL: http://tonyjustinus.wordpress.com/2007/11/11/waterfallprocess-model/. Kendall & Kendall. 2006.System Analysis and Design.New Jersey: Pearson International Edition . Nugroho, Hery Setiawan. 2009. Metode Prototipe. Diakses tanggal 30 Desember 2010 dari URL: http://herysetiawanugroho.blogspot.com/2009/03/metodeprototipe.html

Distribusi Data Listrik