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
Universitas Gunadarma |10108111 – AGUS RAHMAT HERBOWO
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
Universitas Gunadarma |10108111 – AGUS RAHMAT HERBOWO
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
Universitas Gunadarma |10108111 – AGUS RAHMAT HERBOWO
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
Universitas Gunadarma |10108111 – AGUS RAHMAT HERBOWO
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
Universitas Gunadarma |10108111 – AGUS RAHMAT HERBOWO
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
Universitas Gunadarma |10108111 – AGUS RAHMAT HERBOWO
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.
Universitas Gunadarma |10108111 – AGUS RAHMAT HERBOWO
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
Universitas Gunadarma |10108111 – AGUS RAHMAT HERBOWO
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 .
Universitas Gunadarma |10108111 – AGUS RAHMAT HERBOWO
10
