WEB RESPONSIVE DESIGN UNTUK SITUS BERITA MENGGUNAKAN FRAMEWORK CODEIGNITER AGUS RAHMAT HERBOWO (10108111) Tugas Akhir, Jurusan Sistem Informasi, Fakultas Ilmu Komputer dan Teknologi Informasi, Universitas Gunadarma. 2012 Jl. Kecapi Blok C.98 RT 09 / RW 003 Kelapa Dua Wetan, Jakarta Timur 13730 Telepon (021) 87709220 Email : gus.droidx@gmail.com ABSTRAK Teknologi dan informasi semakin berkembang seiring waktu berjalan dimulai dari menyampaikan berita melewati media non-elektronik hingga sekarang menggunakan teknologi informasi khususnya melalui situs. Saat ini mengakses situs berita menggunakan perangkat atau platform mobile seperti smartphone dan tablet meningkat pesat. Semakin banyaknya perangkat atau platform yang muncul dengan berbagai ukuran, maka sebuah situs perlu untuk mengenali setiap ukuran perangkat pengguna. Tujuan penulisan ini membuat web responsive design yang dapat menampilkan halaman situs sesuai dengan layar perangkat atau platform. Situs berita ini dibuat menggunakan framework codeigniter, yang dibuat untuk meningkatkan kenyamanan membaca konten berita dengan menggunakan perangkat atau platform, sehingga pembaca dengan nyaman dan mudah membaca konten berita tanpa harus mengeser layar kesamping. Penulisan ini menggunakan metode kepustakaan untuk mencari bahan-bahan yang dapet dijadikan referensi kemudian analisis kebutuhan aplikasi, desain, konstruksi menggunakan framework codeigniter, HTML 5 dan CSS 3 setelah itu tahap pengujian dan implementasi secara publikasi dengan hosting untuk bisa diakses secara online kemudian pengujian dilakukan menggunakan perangkat atau platform dengan ukuran layar yang berbeda-beda. Setelah terbuatnya web responsive design untuk situs berita Universitas Gunadarma 10108111 AGUS RAHMAT HERBOWO 1
menggunakan framework codeigniter maka permasalahan perkembangan perangkat dan variasi layar terpecahkan oleh teknologi web responsive design selain itu juga mempermudah kerja dari web administrator dalam memperbarui berita dan karena pembuatan menggunakan framework codeigniter maka waktu pengerjaan pembuatan situs jadi lebih singkat, kode program lebih mudah dibaca dan menjadi pilihan tepat untuk mempercepat kerja teamwork. Kata Kunci : Web Responsive Design, Berita, CodeIgniter, Framework, Situs PENDAHULUAN Latar Belakang Masalah Teknologi dan informasi semakin berkembang seiring waktu berjalan dimulai dari menyampaikan berita melewati media non-elektronik hingga sekarang menggunakan teknologi informasi khususnya melalui situs. Sudah banyak media cetak yang awalnya hanya menyampaikan berita melalui koran, buletin atau majalah yang biasanya hanya terbit beberapa hari sekali sekarang sudah bisa menyampaikan berita menggunakan situs yang bisa diperbarui beritanya hingga hitungan menit atau detik. Perkembangan teknologi dan informasi menghasilkan dampak besar bagi masyarakat yang mengejar berita. Berdasarkan data dari penelitian Nielsen s Managing Director, Matt Bruce (2011) Konsumen di Asia Tenggara dengan cepat mengadopsi teknologi baru seperti smartphone dan tablet yang dapat menyediakan akses internet di mana saja. Menurut data dari Nielsen (2011) 48% pengguna internet di Indonesia mengakses internet melalui handphone dan selain melalui handphone, terdapat 13% pengguna internet di Indonesia yang mengakses internet melalui perangkat mobile non handphone seperti tablet. Angka yang cukup besar ini memperlihatkan seberapa besar tinggi akses internet mobile di Indonesia. Diprediksikan dalam 12 bulan kedepan pengguna internet di Indonesia akan mengakses internet melalui handphone meningkat sebesar 53% dan 30% mengaksesnya melalui tablet. Universitas Gunadarma 10108111 AGUS RAHMAT HERBOWO 2
Situs berita adalah salah satu situs penting karena mempunyai beragam berita setiap harinya untuk dicari dan tingkat kenyamanan konsumen untuk membaca konten tersebut juga harus disesuaikan, semakin nyaman membaca maka semakin sering juga akan mengakses situs berita tersebut. Salah satu perusahaan yang bergerak dibidang usaha penyiaran televisi di Indonesia ingin mendirikan situs berita yang dikelola dengan mandiri oleh perusahan tersebut. Perusahaan yang sudah lama bergerak dibidang penyiaran televisi ini sudah memiliki siaran berita tetapi untuk situs berita masih tergantung terhadap situs berita perusahaan lain yang bergerak dibidang yang sama. Semakin berkembang kemajuan teknologi dan informasi membuat masyarakat sudah bisa mengakses internet kapanpun dan dimanapun, situs berita yang diharapkan oleh perusahaan adalah situs berita yang dapat dilihat dan dibaca dengan nyaman dari segala bentuk perangkat atau platform demi menarik banyak pengunjung di situs berita yang ingin didirikan. Permasalahan yang terjadi adalah situs berita yang menampilkan isi berita tidak bisa mengikuti ukuran layar dari perangkat atau platform yang digunakan oleh pengakses situs berita, perbedaan ukuran layar yang ditampilkan oleh situs berita dengan layar platform akan menghasilkan pembacaan berita kurang nyaman karena harus menggeser layar kesamping. Permasalahan ini menjadi kendala bagi perusahaan untuk membuat situs berita yang dapat menyesuaikan layar platform pengunjung situs berita karena semakin nyaman pengunjung membaca isi berita semakin sering juga pengunjung kembali mengakses situs berita tersebut. Solusi permasalahan diatas adalah dengan menggunakan teknologi baru yaitu web responsive design maka tampilan layar situs berita bisa menyesuaikan dengan layar perangkat atau platform pengakses situs berita. Ethan Marcotte (2011) berpendapat bahwa web responsive design ini muncul dari kebingungan para web designer untuk memecahkan masalah perkembangan platform dengan variasi layar yang berbeda-beda untuk mengakses satu konten dari halaman yang sama dengan mengutamakan Universitas Gunadarma 10108111 AGUS RAHMAT HERBOWO 3
tingkat kenyamanan membaca konten di setiap ukuran layar yang berbeda. Permasalahan yang terjadi pada perusahaan penyiar televisi inilah yang melatarbelakangi penulis untuk mengembangkan web responsive design untuk situs berita dan membuat situs berita perusahaan penyiar televisi untuk dijadikan studi kasus. Tujuan Penelitian Tujuan penulisan ini adalah membuat situs berita untuk salah satu perusahaan penyiar televisi di Indonesia dengan tampilan yang responsif dengan menyesuaikan layar tampilan perangkat atau platform. Landasan Teori Web Responsive Design Web Responsive Design (RWD) pada dasarnya menunjukkan bahwa situs web dibuat menggunakan W3C CSS3 media dengan cairan proporsi berbasis grid, untuk beradaptasi tata letak dengan melihat lingkungan platform dan gambar fleksibel sebagai hasilnya, pengguna di berbagai platform dan browser akan memiliki akses ke satu sumber konten, ditata sehingga mudah dibaca dan navigasi dengan minimal mengubah ukuran, panning dan scrolling. Web responsive design pertama kali diperkenalkan oleh Ethan Marcotte pada artikelnya yang sangat inspiratif Web Responsive Design. Semakin banyaknya perangkat yang muncul dengan berbagai ukuran, maka sebuah situs perlu untuk mengenali ukuran perangkat pengguna. Ketika masih berpikir saat ada perangkat baru yang dirilis dan akan memperbarui situs agar sesuai, maka harus mencari solusi yang lebih efektif dan responsif bagaimana cara agar situs hanya mengakui lebar browser saja tanpa melakukan pembaruan yang lebih spesifik. CSS 3 CSS 3 adalah versi CSS terbaru yang masih dikembangkan oleh W3C. Namun beberapa web browser sudah mendukung CSS 3. CSS 2 didukung seutuhnya oleh CSS 3 dan tidak ada perubahan, hanya ada beberapa penambahan, sehingga ketika bermigrasi dari CSS 2 ke CSS 3, tidak perlu mengubah apapun. CSS 3 memiliki beberapa fitur baru, seperti: Animasi, sehingga pembuatan Universitas Gunadarma 10108111 AGUS RAHMAT HERBOWO 4
animasi tidak memerlukan program sejenis Adobe Flash dan Microsoft Silverlight Beberapa efek teks, seperti teks berbayang, kolom koran, dan "word-wrap". Jenis huruf eksternal, sehingga dapat menggunakan huruf yang tidak termasuk "web-safe fonts". Beberapa efek pada kotak, seperti kotak yang ukurannya dapat diubah-ubah, transformasi 2 dimensi dan 3 dimensi, sudut-sudut yang tumpul dan bayangan. HTML 5 HTML5 adalah revisi kelima dari HTML yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997 dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin. HTML5 merupakan salah satu karya World Wide Web Consortium, W3C untuk mendefinisikan sebuah bahasa markah tunggal yang dapat ditulis dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban atas pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan secara berbeda-beda oleh banyak perangkat lunak pembuat situs. CodeIgniter Codeigniter adalah sebuah framework php yang dapat membantu mempercepat developer dalam pengembangan aplikasi web berbasis php dibandingkan jika menulis semua kode program dari awal. Codeigniter menyediakan banyak library untuk mengerjakan tugas-tugas yang umumnya ada pada sebuah aplikasi berbasis web. Selain itu, struktur dan susunan logis dari codeigniter membuat aplikasi menjadi semakin teratur dan rapi. Metode Penelitian Kepustakaan Metode penelitian yang pertama digunakan dalam pembuatan penulisan tugas akhir ini adalah metode studi kepustakaan, dimana penulis menggunakan fasilitas jaringan internet untuk mencari bahan-bahan yang dapat dijadikan referensi serta buku-buku yang berhubungan dengan Web Responsive design, CSS3 dan HTML 5. Universitas Gunadarma 10108111 AGUS RAHMAT HERBOWO 5
Analisis Kebutuhan Aplikasi Analisis kebutuhan aplikasi ini digunakan untuk mengetahui kebutuhan dan keinginan perusahaan terhadap situs berita yang akan didirikan. Analisis dilakukan secara berdialog langsung dengan salah satu staff bagian marketing di perusahaan penyiar televisi tersebut. Desain Situs berita diimplementasikan dengan web responsive design, ketika pengunjung mengakses situs berita maka situs berita akan responsif dan menyesuaikan tampilan situs dengan platform pengunjung situs. Hal ini dapat memudahkan dan memberikan kenyamanan dalam membaca konten berita. beberapa platform dengan ukuran layar yang berbeda-beda disetiap perangkat atau platform. Pembahasan Analisis Tahap awal dalam pembuatan situs berita ini adalah melakukan analisis kebutuhan aplikasi. Analisis ini dilakukan dengan cara berdialog langsung dengan staff asisten manager marketing perusahaan yang membutuhkan situs berita tersebut. Setelah melakukan dialog diambil kesimpulan bahwa perusahaan yang bergerak dibidang penyiaran televisi ini membutuhkan situs berita yang mandiri karena saat ini perusahan masih tergantung terhadap situs berita yang dimiliki bukan dari nama perusahaan. Pengujian dan Implementasi Pengujian dilakukan didalam localhost untuk mengetahui tampilan dari rancangan setiap resolusi berjalan dengan baik. Kemudian dilakukan hosting untuk implementasi secara online. Setelah situs berita sudah bisa diakses secara online maka langkah berikutnya adalah implementasi menggunakan Kebutuhan terdahap situs berita dikarenakan persaingan terhadap perusahaan penyiaran televisi yang hampir semua memiliki situs berita masing-masing. Perusahan menginginkan situs berita dibuat secara bertahap dengan melihat kondisi pengunjung situs berita dan juga seiringnya pertambahan sdm di perusahaan yang akan mengelola situs berita secara mandiri. Perusahaan juga Universitas Gunadarma 10108111 AGUS RAHMAT HERBOWO 6
berencana akan menambahkan situs berita secara mobile nantinya dikarenakan pertumbuhan teknologi yang sangat cepat selain dari itu kebutuhan perusahan terhadap situs berita dengan tampilan yang mudah dibaca dari segala jenis perangkat atau platform. Setelah mendengarkan keinginan dan kebutuhan dari staff asisten manager marketing penulis memberikan usulan dan solusi dengan membuat situs berita dengan tampilan responsif untuk memenuhi kebutuhan permintaan dari perusahan. Diagram Use Case resolusi width 736px, tampilan resolusi width 455px, dan tampilan resolusi width 454px. Pembaca berita sebagai aktor dalam diagram use case mmbuka dan mengakses situs berita dengan perangkatnya, kemudian tampilan dari situs berita akan mengikuti sesuai dengan tampilan resolusi perangkat pembaca berita. Keterangan <<extend>> menunjukkan bahwa satu use case merupakan tambahan fungsional dari use case yang lain jika kondisi atau syarat tertentu dipenuhi, syarat disini adalah tampilan resolusi perangkan pembaca berita. Pembuatan Situs Berita Pembuatan situs berita menggunakan framework codeigniter dengan sistem aplikasi MVC ( Model, View, Controller). Gambar 1. Diagram Use Case Pada diagram use case user di gambar 1 menggambarkan sistem lanjutan dari penerbitan berita pada situs berita. Situs berita memiliki 4 tampilan untuk resolusi yang berbeda-beda dari ukuran terbesar hingga terkecil yaitu tampilan resolusi width 950px, tampilan MVC, maka memungkinkan pemisahan antara layer applicationlogic dan presentation. Sehingga, dalam sebuah tim pengembangan website, seorang programmer berkonsentrasi pada core-system, sedangkan web designer bisa berkonsentrasi pada tampilan web. Menariknya skrip PHP, query MySQL, Javascript dan CSS bisa saling terpisah-pisah, tidak dibuat dalam Universitas Gunadarma 10108111 AGUS RAHMAT HERBOWO 7
satu skrip berukuran besar yang membutuhkan resource besar pula untuk mengeksekusinya. Dengan demikian yang akan dibuat mudah dimaintenance dan dikembangkan lebih lanjut. Dalam konteks CodeIgniter dan aplikasi berbasis web, maka penerapan konsep MVC mengakibatkan kode program dapat dibagi menjadi tiga kategori : 1. Model. Kode program (berupa OOP class) yang digunakan memanipulasi database. 2. View. Berupa template HTML/XHTML atau PHP untuk menampilkan data pada browser. 3. Controller. Kode program (berupa OOP class) yang digunakan untuk mengontrol aliran aplikasi (sebagai pengontrol Model dan View). Pembuatan Web Responsive Design Responsive web design adalah sebuah cara agar hasil desain yang dibuat dapat menyesuaikan lebar maupun posisi di sebagian atau semua resolusi dari perangkat yang digunakan. Fungsi dari @media adalah untuk mentapkan browser membaca ukuran layar yang akan ditampilkan. User Acceptence Testing Untuk mengetahui apakan sebuah situs berita masih terdapat kekurangan atau sudah sesuai dengan kebutuhan pengguna maka ujicoba kepada pengguna merupakan titik utama keberhasilan baik dari sisi tampilan, kinerja, maupun pengolahan data. Dalam hal ini kuisioner digunakan untuk memperoleh data-data untuk menganalisis. Dalam hal ini kuisioner digunakan untuk memperoleh data-data untuk menganalisis. Skala Likert Skala Likert adalah suatu skala psikometrik yang umum digunakan dalam kuesioner, dan merupakan skala yang paling banyak digunakan dalam riset berupa survei. Nama skala ini diambil dari nama Rensis Likert, yang menerbitkan suatu laporan yang menjelaskan penggunaannya. Sewaktu menanggapi pertanyaan dalam skala Likert, responden menentukan tingkat persetujuan mereka terhadap suatu pernyataan dengan memilih salah satu dari pilihan yang tersedia. Universitas Gunadarma 10108111 AGUS RAHMAT HERBOWO 8
Publikasi Publikasi dilakukan supaya situs berita bisa diakses secara online dan dapat diimplementasikan diberbagai perangkat atau platform. Publikasi situs dilakukan secara hosting file web. Hosting dapat diartikan sebagai ruangan yang terdapat dalam harddisk tempat menyimpan berbagai file yang akan ditampilkan di situs. Besarnya data yang bisa dimasukkan tergantung dari besarnya hosting yang disewa. Berikut merupakan cara melakukan hosting file web. Namun sebelumnya harus memiliki domain terlebih dahulu Penutup Kesimpulan Setelah dilakukan perancangan, pengkodean dengan menggunakan framework codeigniter, serta dilakukan tahapan uji coba, maka terbentuklah sebuah web responsive design untuk situs berita yang berguna mempermudah membaca konten berita dan meningkatkan kenyamanan. Situs berita ini dilengkapi dengan susunan data yang lebih mudah dimengerti oleh web administrator. Web responsive design mempermudah kerja dari web administrator dalam memperbarui berita, cukup dengan satu kali menambahkan berita yang akan tampil disemua resolusi layar perangkat. Permasalahan yang timbul dari munculnya layar tampilan berbeda di setiap perangkat bisa terpecahkan oleh teknologi web responsive design. Kendala yang terjadi di dalam penulisan ini adalah jika pengaksesan situs berita menggunakan perangkat yang masih belom mendukung HTML 5 di browsernya dan dari tingkat kecepatan akses jaringan dari perangkat tersebutt sangat berpengaruh, hasilnya jika mengakses berita dengan jaringan dibawah 3G kemungkinan akan sedikit mengalami kelambatan. Saran Sebaiknya situs berita ini segera diimplemtasikan ke tahap lebih lanjut dengan menambahkan beberapa fitur baru dan kategori baru sehigga situs berita ini bisa di publikasikan ke masyarakat luas. Di dalam pembuatan situs berita ini masih belum begitu memperhatikan tingkay keamanan situs oleh karena itu harus dilakukan tahap pengemanbangan lebih lanjut terhadap fungsi keamanan. website oleh karena Universitas Gunadarma 10108111 AGUS RAHMAT HERBOWO 9
itu dapat dilakukan pengembangan lebih lanjut terhadap fungsi keamanan. DAFTAR PUSTAKA [1]. Amir Kamiruddin, Nielsen: Pengguna Ponsel untuk Berinternet di Asia Tenggara Semakin Tinggi dalam http://dailysocial.net/post/nielsenpenggunaan-ponsel-untukberinternet-di-asia-tenggarasemakin-tinggi diunduh pada Senin, 13 Agustus 2012 Jam 11.25. [6]. Pearce James, Proffesional Mobile Web Development with Wordpress, Joomla!, and Drupal, John Wiley & Sons, New York, 2010 [7]. Smashing Magazine, Responsive Design, Smashing Media GmbH, Freiburg, 2012. [2]. Marcotte Ethan, Fluid Images dalam http://unstoppablerobotninja.com/ entry/fluid-images diunduh pada Kamis, 21 Juni 2012 Jam 21.47. [3]. Marcotte Ethan, Responsive Web Design dalam http://www.alistapart.com/articles/ responsive-web-design diunduh pada Kamis, 21 Juni 2012 Jam 21.20. [4]. Marcotte Ethan, Where Our Standards Wen Wrong dalam http://www.alistapart.com/articles/ whereourstandardswentwrong/ diunduh pada Jumat, 29 Juni 2012 Jam 11.32. [5]. Mohammad Jeprie, Panduan Mudah Desain Web Profesional, PT. Elex Media Komputindo, Jakarta, 2012. Universitas Gunadarma 10108111 AGUS RAHMAT HERBOWO 10