JURNAL PENULISAN

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

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

JURNAL PENULISAN 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

Bruce

(2011)

Konsumen

di

Asia

Latar Belakang Masalah

Tenggara dengan cepat mengadopsi semakin

teknologi baru seperti smartphone dan

berkembang seiring waktu berjalan

tablet yang dapat menyediakan akses

dimulai

berita

internet di mana saja. Menurut data dari

melewati media non-elektronik hingga

Nielsen (2011) 48% pengguna internet

sekarang

di Indonesia mengakses internet melalui

Teknologi

dan

dari

informasi

menyampaikan

menggunakan

teknologi

melalui

situs.

handphone

cetak

yang

handphone, terdapat 13% pengguna

awalnya hanya menyampaikan berita

internet di Indonesia yang mengakses

melalui koran, buletin atau majalah

internet melalui perangkat mobile non

yang biasanya hanya terbit beberapa

handphone seperti tablet. Angka yang

hari

cukup

informasi Sudah

khususnya

banyak

sekali

media

sekarang

sudah

bisa

besar

dan

ini

selain

melalui

memperlihatkan

menggunakan

seberapa besar tinggi akses internet

situs yang bisa diperbarui beritanya

mobile di Indonesia. Diprediksikan

hingga hitungan menit atau detik.

dalam 12 bulan kedepan pengguna

menyampaikan

berita

internet di Indonesia akan mengakses Perkembangan teknologi dan informasi

internet melalui handphone meningkat

menghasilkan

sebesar 53% dan 30% mengaksesnya

masyarakat Berdasarkan

dampak yang data

besar

mengejar dari

bagi berita.

melalui tablet.

penelitian

Nielsen’s Managing Director, Matt


2

JURNAL PENULISAN Situs berita adalah salah satu situs

Permasalahan yang terjadi adalah situs

penting karena mempunyai beragam

berita yang menampilkan isi berita tidak

berita setiap harinya untuk dicari dan

bisa

tingkat kenyamanan konsumen untuk

perangkat atau platform yang digunakan

membaca konten tersebut juga harus

oleh pengakses situs berita, perbedaan

disesuaikan, semakin nyaman membaca

ukuran layar yang ditampilkan oleh

maka

situs berita dengan layar platform akan

semakin

sering

juga

akan

mengakses situs berita tersebut.

mengikuti

ukuran

layar

dari

menghasilkan pembacaan berita kurang nyaman karena harus menggeser layar

Salah satu perusahaan yang bergerak

kesamping. Permasalahan ini menjadi

dibidang usaha penyiaran televisi di

kendala

bagi

perusahaan

untuk

Indonesia ingin mendirikan situs berita

membuat

situs

berita

dapat

yang dikelola dengan mandiri oleh

menyesuaikan

perusahan tersebut. Perusahaan yang

pengunjung situs berita karena semakin

sudah lama bergerak dibidang penyiaran

nyaman pengunjung membaca isi berita

televisi ini sudah memiliki siaran berita

semakin

tetapi

kembali mengakses situs berita tersebut.

untuk

tergantung

situs

berita

masih

terhadap

situs

berita

yang

layar

sering

juga

pengunjung

perusahaan lain yang bergerak dibidang

Solusi

yang

dengan menggunakan teknologi baru

sama.

Semakin

kemajuan

teknologi

membuat

masyarakat

berkembang

dan

informasi

diatas

adalah

yaitu web responsive design maka

bisa

tampilan

dan

menyesuaikan dengan layar perangkat

dimanapun, situs berita yang diharapkan

atau platform pengakses situs berita.

oleh perusahaan adalah situs berita yang

Ethan Marcotte (2011) berpendapat

dapat dilihat dan dibaca dengan nyaman

bahwa

dari segala bentuk perangkat atau

muncul dari kebingungan para web

platform

banyak

designer untuk memecahkan masalah

pengunjung di situs berita yang ingin

perkembangan platform dengan variasi

didirikan.

layar

mengakses

internet

demi

sudah

permasalahan

platform

kapanpun

menarik

layar

web

yang

situs

berita

responsive

bisa

design

berbeda-beda

ini

untuk

mengakses satu konten dari halaman yang

sama


dengan

mengutamakan

3

JURNAL PENULISAN tingkat kenyamanan membaca konten di

mengubah

setiap ukuran layar yang berbeda.

scrolling.

Permasalahan

yang

terjadi

ukuran,

panning

dan

pada

perusahaan penyiar televisi inilah yang

Web responsive design pertama kali

melatarbelakangi

untuk

diperkenalkan oleh Ethan Marcotte pada

mengembangkan web responsive design

artikelnya yang sangat inspiratif Web

untuk situs berita dan membuat situs

Responsive Design. Semakin banyaknya

berita perusahaan penyiar televisi untuk

perangkat yang muncul dengan berbagai

dijadikan studi kasus.

ukuran, maka sebuah situs perlu untuk

penulis

mengenali ukuran perangkat pengguna. Tujuan Penelitian

Ketika

Tujuan penulisan ini adalah membuat

perangkat baru yang dirilis dan akan

situs berita untuk salah satu perusahaan

memperbarui situs agar sesuai, maka

penyiar televisi di Indonesia dengan

harus mencari solusi yang lebih efektif

tampilan

dengan

dan responsif bagaimana cara agar situs

menyesuaikan layar tampilan perangkat

hanya mengakui lebar browser saja

atau platform.

tanpa melakukan pembaruan yang lebih

yang

responsif

masih

berpikir

saat

ada

spesifik.

Landasan Teori Web Responsive Design

CSS 3

Web Responsive Design (RWD) pada

CSS 3 adalah versi CSS terbaru yang

dasarnya menunjukkan bahwa situs

masih

web dibuat menggunakan W3C CSS3

Namun beberapa web browser sudah

media dengan cairan proporsi berbasis

mendukung CSS 3. CSS 2 didukung

grid,

seutuhnya oleh CSS 3 dan tidak ada

untuk

beradaptasi

dengan melihat

tata

letak

lingkungan platform

dikembangkan

perubahan,

hanya

oleh

W3C.

ada

beberapa

sehingga

ketika

dan gambar fleksibel sebagai hasilnya,

penambahan,

pengguna di berbagai platform dan

bermigrasi dari CSS 2 ke CSS 3, tidak

browser akan memiliki akses ke satu

perlu mengubah apapun.

sumber konten, ditata sehingga mudah dibaca dan navigasi dengan minimal

CSS 3 memiliki beberapa fitur baru, seperti: Animasi, sehingga pembuatan


4

JURNAL PENULISAN animasi tidak memerlukan program

XHTML 1.1 yang selama ini berjalan

sejenis Adobe Flash dan Microsoft

terpisah, dan diimplementasikan secara

Silverlight Beberapa efek teks, seperti

berbeda-beda oleh banyak perangkat

teks berbayang, kolom koran, dan

lunak pembuat situs.

"word-wrap". Jenis huruf eksternal, sehingga dapat menggunakan huruf

CodeIgniter

yang tidak termasuk "web-safe fonts".

Codeigniter adalah sebuah framework

Beberapa efek pada kotak, seperti kotak

php yang dapat membantu mempercepat

yang ukurannya dapat diubah-ubah,

developer

transformasi 2 dimensi dan 3 dimensi,

aplikasi web berbasis php dibandingkan

sudut-sudut yang tumpul dan bayangan.

jika menulis semua kode program dari

dalam

pengembangan

awal. HTML 5 HTML5 adalah revisi kelima dari

Codeigniter

HTML yang pertama kali diciptakan

library untuk mengerjakan tugas-tugas

pada tahun 1990 dan versi keempatnya,

yang

HTML4, pada tahun 1997 dan hingga

aplikasi

berbasis

bulan

dalam

struktur

dan

utama

codeigniter membuat aplikasi menjadi

Juni

pengembangan.

2011

masih

Tujuan

pengembangan HTML5 adalah untuk

menyediakan

umumnya

ada

banyak

pada

web.

susunan

sebuah

Selain

itu,

logis

dari

semakin teratur dan rapi.

memperbaiki teknologi HTML agar mendukung

teknologi

multimedia

Metode Penelitian

terbaru, mudah dibaca oleh manusia dan

Kepustakaan

juga mudah dimengerti oleh mesin.

Metode

penelitian

yang

pertama

digunakan dalam pembuatan penulisan HTML5 merupakan salah satu karya

tugas akhir ini adalah metode studi

World Wide Web Consortium, W3C

kepustakaan,

untuk mendefinisikan sebuah bahasa

menggunakan fasilitas jaringan internet

markah tunggal yang dapat ditulis

untuk mencari bahan-bahan yang dapat

dengan cara HTML ataupun XHTML.

dijadikan referensi serta buku-buku

HTML5

atas

yang

dan

Responsive design, CSS3 dan HTML 5.

merupakan

pengembangan

jawaban

HTML

4.01

dimana

berhubungan


penulis

dengan

Web

5

JURNAL PENULISAN beberapa platform dengan ukuran layar

Analisis Kebutuhan Aplikasi Analisis

kebutuhan

aplikasi

ini

digunakan untuk mengetahui kebutuhan

yang berbeda-beda disetiap perangkat atau platform.

dan keinginan perusahaan terhadap situs berita yang akan didirikan. Analisis

Pembahasan

dilakukan secara berdialog langsung

Analisis

dengan

bagian

Tahap awal dalam pembuatan situs

marketing di perusahaan penyiar televisi

berita ini adalah melakukan analisis

tersebut.

kebutuhan

salah

satu

staff

aplikasi.

dilakukan

dengan

Analisis cara

ini

berdialog

Desain

langsung dengan staff asisten manager

Situs berita diimplementasikan dengan

marketing

web

ketika

membutuhkan situs berita

berita

Setelah

responsive

pengunjung

design,

mengakses

situs

perusahaan

melakukan

yang tersebut.

dialog

diambil

maka situs berita akan responsif dan

kesimpulan bahwa perusahaan yang

menyesuaikan tampilan situs dengan

bergerak dibidang penyiaran televisi ini

platform pengunjung situs. Hal ini dapat

membutuhkan situs berita yang mandiri

memudahkan

karena

dan

memberikan

saat

ini

perusahan

masih

kenyamanan dalam membaca konten

tergantung terhadap situs berita yang

berita.

dimiliki bukan dari nama perusahaan.

Pengujian dan Implementasi

Kebutuhan

Pengujian dilakukan didalam localhost

dikarenakan

untuk

perusahaan penyiaran televisi

mengetahui

rancangan

setiap

tampilan resolusi

dari

berjalan

dengan

baik.

Kemudian

dilakukan

hosting

untuk

implementasi

secara

online.

terdahap

situs

persaingan

berita terhadap yang

hampir semua memiliki situs berita masing-masing.

Perusahan

menginginkan situs berita dibuat secara bertahap

dengan

melihat

pengunjung

situs

Setelah situs berita sudah bisa diakses

seiringnya

pertambahan

secara online maka langkah berikutnya

perusahaan yang akan mengelola situs

adalah

berita secara mandiri. Perusahaan juga

implementasi

menggunakan


berita

kondisi dan

juga

sdm

6

di

JURNAL PENULISAN berencana akan menambahkan situs

resolusi

berita



width

736px,

tampilan

mobile

nantinya

resolusi width  455px, dan tampilan

pertumbuhan

teknologi

resolusi width  454px. Pembaca berita

yang sangat cepat selain dari itu

sebagai aktor dalam diagram use case

kebutuhan perusahan terhadap situs

mmbuka dan mengakses situs berita

berita dengan tampilan yang mudah

dengan

perangkatnya,

dibaca dari segala jenis perangkat atau

tampilan

dari

platform.

mengikuti

secara

dikarenakan

resolusi

kemudian

situs

sesuai

berita

dengan

perangkat

akan

tampilan

pembaca

berita.

Setelah mendengarkan keinginan dan

Keterangan <> menunjukkan

kebutuhan dari staff asisten manager

bahwa

marketing penulis memberikan usulan

tambahan fungsional dari use case yang

dan solusi dengan membuat situs berita

lain jika kondisi atau syarat tertentu

dengan

dipenuhi, syarat disini adalah tampilan

tampilan

responsif

untuk

memenuhi kebutuhan permintaan dari

satu

use

case

merupakan

resolusi perangkan pembaca berita.

perusahan. Pembuatan Situs Berita Diagram Use Case

Pembuatan situs berita menggunakan framework codeigniter dengan sistem aplikasi

MVC

(

Model,

View,

Controller).

MVC, Gambar 1. Diagram Use Case

maka

memungkinkan

pemisahan antara layer applicationlogic dan presentation. Sehingga, dalam

Pada diagram use case user di gambar 1

sebuah tim pengembangan website,

menggambarkan sistem lanjutan dari

seorang

penerbitan berita pada situs berita. Situs

pada

berita

designer

memiliki

4

tampilan

untuk

programmer

core-system, bisa

berkonsentrasi

sedangkan

web

berkonsentrasi

pada

resolusi yang berbeda-beda dari ukuran

tampilan web. Menariknya skrip PHP,

terbesar hingga terkecil yaitu tampilan

query MySQL, Javascript dan CSS bisa

resolusi width  950px , tampilan

saling terpisah-pisah, tidak dibuat dalam


7

JURNAL PENULISAN satu

skrip

berukuran

membutuhkan untuk

besar

yang

@media

besar

pula

browser membaca ukuran layar yang

resource

mengeksekusinya.

Dengan

adalah

untuk

mentapkan

akan ditampilkan.

demikian yang akan dibuat mudah dimaintenance dan dikembangkan lebih

User Acceptence Testing

lanjut.

Untuk mengetahui apakan sebuah situs berita masih terdapat kekurangan atau

Dalam konteks CodeIgniter dan aplikasi

sudah

berbasis web, maka penerapan konsep

pengguna

maka

MVC mengakibatkan kode program

pengguna

merupakan

dapat dibagi menjadi tiga kategori :

keberhasilan baik dari sisi tampilan,

1. Model.

Kode

program

kinerja,

sesuai

dengan

maupun

kebutuhan

ujicoba titik

kepada utama

pengolahan

data.

(berupa OOP class) yang

Dalam hal ini kuisioner digunakan

digunakan

untuk

memanipulasi

database. 2. View.

data-data

untuk

menganalisis. Dalam hal ini kuisioner Berupa

template

HTML/XHTML atau PHP untuk

memperoleh

menampilkan

digunakan untuk memperoleh data-data untuk menganalisis.

data

pada browser.

Skala Likert

3. Controller. Kode program

Skala

Likert

adalah

suatu

skala

(berupa OOP class) yang

psikometrik yang umum digunakan

digunakan untuk mengontrol

dalam kuesioner, dan merupakan skala

aliran

yang paling banyak digunakan dalam

aplikasi

pengontrol

(sebagai

Model

dan

View).

riset berupa survei. Nama skala ini diambil dari nama Rensis Likert, yang menerbitkan

suatu

laporan

yang

Pembuatan Web Responsive Design

menjelaskan penggunaannya. Sewaktu

Responsive web design adalah sebuah

menanggapi pertanyaan dalam skala

cara agar hasil desain yang dibuat dapat

Likert, responden menentukan tingkat

menyesuaikan lebar maupun posisi di

persetujuan

sebagian atau semua resolusi dari

pernyataan dengan memilih salah satu

perangkat yang digunakan. Fungsi dari

dari pilihan yang tersedia.


mereka

terhadap

suatu

8

JURNAL PENULISAN Publikasi

memperbarui berita, cukup dengan satu

Publikasi dilakukan supaya situs berita

kali menambahkan berita yang akan

bisa diakses secara online dan dapat

tampil

diimplementasikan

perangkat.

diberbagai

disemua

resolusi

layar

perangkat atau platform. Publikasi situs dilakukan secara hosting file web.

Permasalahan

Hosting dapat diartikan sebagai ruangan

munculnya layar tampilan berbeda di

yang terdapat dalam harddisk tempat

setiap perangkat bisa terpecahkan oleh

menyimpan berbagai file yang akan

teknologi

ditampilkan di situs. Besarnya data yang

Kendala yang terjadi di dalam penulisan

bisa

dari

ini adalah jika pengaksesan situs berita

besarnya hosting yang disewa. Berikut

menggunakan perangkat yang masih

merupakan cara melakukan hosting file

belom

web.

browsernya dan dari tingkat kecepatan

dimasukkan

Namun

tergantung

sebelumnya

harus

memiliki domain terlebih dahulu

yang

web

timbul

responsive

mendukung

dari

design.

HTML

5

di

akses jaringan dari perangkat tersebutt sangat

berpengaruh,

mengakses

Kesimpulan

dibawah 3G kemungkinan akan sedikit

dilakukan

perancangan,

dengan

menggunakan

pengkodean

dengan

jika

Penutup Setelah

berita

hasilnya

jaringan

mengalami kelambatan.

framework codeigniter, serta dilakukan

Saran

tahapan uji coba, maka terbentuklah

Sebaiknya

sebuah web responsive design untuk

diimplemtasikan ke tahap lebih lanjut

situs

berguna

dengan menambahkan beberapa fitur

mempermudah membaca konten berita

baru dan kategori baru sehigga situs

dan meningkatkan kenyamanan.

berita ini bisa di publikasikan ke

berita

yang

situs

berita

ini

segera

masyarakat luas. Di dalam pembuatan Situs berita ini

dilengkapi dengan

situs berita ini masih belum begitu

mudah

memperhatikan tingkay keamanan situs

dimengerti oleh web administrator. Web

oleh karena itu harus dilakukan tahap

responsive design mempermudah kerja

pengemanbangan lebih lanjut terhadap

dari

fungsi keamanan. website oleh karena

susunan

data

web

yang

lebih

administrator

dalam


9

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


10

JURNAL PENULISAN

Recommend Documents