Prototype Web Responsive Design Pada Uin Syarif Hidayatullah Jakarta Menggunakan Framework Bootstrap
ｲ］ＧＢＭｾ＠
..,, ｾＭＮＬﾷ＠
{"'"""""- .. .
PROTOTYPE ｗｅｂｒｓｐｏｎｩｶＮｄｾｊ｢＠
ｩｾＺＢＷ＠
PADA
UIN SYARIF HIDAYATULLAH JAKARTA MENGGUNAKAN
FRAMEWORK BOOTSTRAP
Skripsi
Sebagai salah satu syarat memperoleh gelar Sarjana Komputer
FADLANREZA
108091000065
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS SAINS DAN TEKNOLOGI
UIN SYARIF HIDAYATULLAH JAKARTA
2014 MI 1435 H
PROTOTYPE WEB RESPONSIVE DESIGN PADA
UIN SYARIF HIDAYATULLAH JAKARTA MENGGUNAKAN
FRAMEWORK BOOTSTRAP
Skripsi
Sebagai Salah Satu Syarat untuk Memperoleh Gelar Sarjana Komputer
Oleh:
FADLANREZA
108091000065
PROGRAM STUD! TEKNIK INFORMATIKA
FAKULTAS SAINS DAN TEKNOLOGI
UIN SYARIF HIDAYATULLAH JAKARTA
2014 M/1435 H
Tgl
LEMBARPENGESAHAN
WEB RESPONSIVE DESIGN UNTUK PERGURUAN TINGGI
MENGGUNAKAN FRAMEWORK BOOTSTRAP
(Studi Kasus : UIN Syarif Hidayatullah Jakarta)
Skripsi
Sebagai Salah Satu Syarat untuk Memperoleh Gelar Sarjana Komputer
Fakultas Sains dan Teknologi
UIN SyarifHidayatullah Jakarta
Oleh:
FADLANREZA
NIM : 108091000065
Menyetujui,
Pembimbing I,
Pembimbing II,
Viva Arifin MMS
NIP. 19730810 200604 001
Arini, MT
NIP. 197601312009012001
Mengetahui,
Ketua Program tudi Teknik Informatika
Nurh
ati P . D
1'TTP 1o;;orn1;; 1 00001 ,, oo-,
PERNYATAAN
DENGAN INI SAYA MENYATAKAN BAHWA SKRIPSI !NI BENARBENAR HASIL KARYA SENDIRI YANG BELUM PERNAH DIAJUKAN
SEBAGAI SKRIPSI ATAU KARYA ILMIAH PADA PERGURUAN TINGGI
ATAU LEMBAGA MANAPUN.
Jakaita, September 2014
Fadlan Reza
108091000065
Fadhm Reza, Prototype Web Responsive Design Pada VIN Syarif Hidayatullah
Jakarta Menggunakan Framework Bootstrap, dibimbing oleh Viva Arifin, MMSI
dan Arini, MT.
ABSTRAK
Angka akses website VIN Syarif Hidayatullah Jakarta dengan menggunakan
perangkat mobile mencapai 30% dari total kunjungan dan dari 59 jenis resolusi
layar, 42 adalah perangkat mobile selama I Januari - 17 Februari 2014 (Data
Primer PVSTIPANDA, 2014). Secara global angka akses internet menggunakan
perangkat mobile meningkat, menurut Morgan Stanley Research dalam laporan
Global The Mobile Internet Report, 2009, pada 2014 diprediksi akses internet
dengan perangkat mobile akan melampaui akses internet dengan perangkat
mobile. Pada 2012 menurut HIS iSuppli Research angka penjualan perangkat
desktop mengalami penurunan sebesar 1,2 % dibanding tahun 2011, dampak dari
meningkatnya jumlah penjualan perangkat mobile. Hal ini menimbulkan
pertanyaan pada apakah website VIN SyarifHidayatullah Jakarta pada 2014 sudah
siap menghadapai akses dari perangkat mobile yang begitu beragam? Menurut
Ethan Marcotte, semakin banyaknya perangkat yang muncul dengan berbagai
ukuran, maka sebuah situs perlu mengenali ukuran perangkat pengguna (Marcotte,
2011: 8). Responsive web design adalah pendekatan desain webite yang dapat
beradaptasi dengan masalah pada web browser dan perangkat keras yang
menjalankannya untuk menciptakan respon terhadap kebutuhan pengguna
(Marcotte, 2011: 9). Responsive web design terdiri atas 3 komponen yaitu: tata
letak fleksibel berbasis grid, gambar dan media fleksibel, media queries. Pada
penulisan skripsi ini penulis menggunakan metodologi Web Site Design Method
(WSDM) dalam pembuatan website VIN Syarif Hidayatullah Jakarta dengan
tahapan proses pernyataan misi dengan pengumpulan data berupa observasi dan
wawancara, pemodelan pengguna, desain konseptual, desain implementasi, dan
implementasi. Hasil proses pembuatan adalah website VIN Syarif Hidayatullah
Jakarta dengan tampilan baru yang mengadopsi teknologi responsive web design,
sehingga bisa beradaptasi pada setiap ukuran resolusi layar yang berbeda-beda
baik dengan perangkat mobile maupun desktop.
Kata kunci
: Website, Responsive Web Design, Resolusi Layar, Mobile,
Web Site Design Method (WSDM).
: 26 (1998 -2013)
Daftar Pustaka
Jumlah Halaman : 5 BAB + 116 Halaman + 33 Gambar + 13 Tabel + 6
Lampiran
Faizal, Fariz Yuliono, Hafizhan Irawan, Ilham Tri Saputra, Muchtar Aham,
Muhammad Ardiansyah, Priyangga, Rahmad Hamidi, Rizqon Syauqi, dan
Eko Suganda. Language Theory & Automata Band.
6.
Teman-teman Muhammad Fajar, Vina Alfiani, Aji Prastio Wibowo, Indah
Permata Sari, Ninda Firstri Oktidila, dan Adina Siti Maryam Talogo atas
do'a, dukungan, dan semangatnya.
7.
Rekan-rekan
PUSTIPANDA
UIN
Syarif Hidayatullah
Jakarta
atas
kesempatan riset dan data penelitiannya.
8.
Teman-teman Teknik Informatika C 2008 (Ticcer) dan Teman Teknik
Informatika Multimedia 2008.
9.
Keluarga Besar Dapur Seni atas ilmu dan pengalaman bermusiknya. Temanteman band dan lainnya.
I 0. Selumh pihak yang telah membantu meski tak penulis sebutkan khusus.
Terima kasih banyak atas do'a, bantuan, dan dukungannya semoga Allah SWT
membalas dengan segala kebaikan dan keberkahan. Mohon maaf atas segala
kekurangan yang masih terdapat dalam skripsi ini.
Demikian, penulis berharap skripsi ini dapat memberikan manfaat. Untuk
kritik dan saran dapat menghubungi penulis melalui email facHm1@Joutlook.com.
Jakarta, September 2014
Fadlan Reza
DAFTARISI
Halaman
HALAMAN SAMPUL ............................................................................ .
HALAMAN JUDUL ................................................................................
ii
HALAMAN PENGESAHAN ..................................................................
iii
HALAMAN PENGESAHAN UJIAN .....................................................
iv
HALAMAN PERNYATAAN ..................................................................
v
ABSTRAK ...............................................................................................
vi
KATA PENGANTAR ..............................................................................
vii
DAFTAR ISI ............................................................................................
ix
DAFTAR GAMBAR ..................................................................................
xii
DAFTAR TABEL ....................................................................................
xiv
BAB 1 PENDAHULUAN ......................................................................
1
I. I Latar Belakang .....................................................................
I
1.2 Rumusan Masaiah . .. ...... .. .... ...... ..... ..... .. ...... ... ....... .. .............
3
I .3 Batasan Masai ah .. .. ....... .. ...... .... .. .. .. ...... .. .... .. ............. .... ..... ..
4
I .4 Tujuan Penelitian ..................................................................
4
1.5 Manfaat Penelitian ................................................................
5
1.6 Sistematika Penelitian ...........................................................
6
BAB Il LANDASAN TEORI .................................................................
7
2. I Responsive Web Design .........................................................
7
2. l. l Tata Letak Fleksibel Berbasis Grid ..............................
7
2. l.2 Gambar dan Media Fleksibel .......................................
8
2.1.3 Media Queries .............................................................
9
2.2 Framework Responsive Web Design ......................................
10
2.2. l Bootstrap .....................................................................
11
2.2.2 Foundation ..................................................................
11
2.2.3 Skeleton ......................................................................
12
2.2.4 Perbandingan 3 Framework Responsive Web Design....
13
2.2.5 Alasan Menggunakan Framework Bootstrap ................
15
2.3 Desain Web ...........................................................................
15
2.3.1 HyperText Markup Language 5 (HTML5) ...................
15
2.3.2 Cascading Style Sheet 3 (CSS3) ..................................
16
2.4 Usabilitas ..............................................................................
17
2.5 Studi Pustaka .........................................................................
19
2.6 Web Site Design Method (WSDM)........................................
19
2. 7 Unified Modeling Language (UML) ......................................
25
BAB m METODOLOGI PENELITIAN ..............................................
27
3 .1 Metode Pengumpulan Data ..... .. .... ....... .. ... .. ..... .. .. .. .. ... .. ......
27
3.1.1 Data Primer...............................................................
27
3.1.1.1 Wawancara ....................................................
27
3.1.1.2 Observasi ......................................................
27
3.1.2 Data Sekunder ..........................................................
28
3.1.2.1 Studi Pustaka .................................................
28
3.2 Metode Web Site Design Method (WSDM) ........................
29
3.2.1 Pernyataan Misi .........................................................
29
3.2.2 Pemodelan Pengguna ................................................
30
3.2.3 Desain Konseptual .....................................................
30
3.2.3. l Pemodelan lnfonnasi .....................................
31
3.2.3.2 Pemodelan Fungsi .........................................
3I
3.2.3.3 Desain Navigasi ............................................
31
3.2.4 Desain Implementasi .................................................
32
3.2.4. I Desain Halaman ............................................
32
3.2.4.2 Desain Presentasi ..........................................
33
3.2.5 Implementasi .............................................................
34
3.2.6 Pengujian ..................................................................
34
3.3 Alasan Menggunakan WSDM .............................................
35
3.4 Kerangka Berfikir ...............................................................
36
BAB IV HASIL DAN PEMBAHASAN ••••••••••••••.••••••.•••.•...•..••••••••••••••••
37
4. I Web Site Design Method (WSDM) ......................................
37
4.1.1 Pemyataan Misi .........................................................
37
4.1.2 Pemodelan Pengguna ................................................
45
4.1.2.1 Klasifikasi Pengguna ...................................
45
4.1.2.2 Karakterisasi Pengguna ...............................
54
4.1.3 Desain Konseptual .....................................................
55
4.1.3.1 Pemodelan Informasi ..................................
55
4.1.3.2 Pemodelan Fungsi .......................................
56
4.1.3.3 Desain Navigasi ..........................................
61
4.1.4 Desain Implementasi .................................................
63
4.1.4.1 Desain Halaman ..........................................
63
4.1.4.2 Desain Presentasi ........................................
75
4.1.5 Implementasi .............................................................
80
4.3 Pengujian ............................................................................
83
4.4 Perbandingan Website UIN Syarif Hidayatullah Sebelum dan
Sesudah Menggunakan Teknologi Responsive Web Design.........
86
BAB V PENUfUP ..................................................................................
87
5.1 Kesimpulan ...........................................................................
87
5.2 Saran .... ....... ..... .. .... ...... ...... .. ..... .... ......... ..... ....... ..... ...... ....... .
88
DAFTAR PUSTAKA ...............................................................................
89
LAMPIRAN .............................................................................................
92
DAFTAR TABEL
Halaman
Tabel 2.1 Perbandingan 3 Framework Responsive Web Design ..................
13
Tabel 4.1 Resolusi Layar Pengguna Website VIN SyarifHidayatullah
Jakarta .......................................................................................................
38
Tabel 4.2 Browser Pengguna Website UIN SyarifHidayatullah Jakarta .....
39
Tabel 4.3 Jenis Perangkat Mobile Pengguna Website UIN SyarifHidayatullah
Jakarta .......................................................................................................
41
Tabel 4.4 Durasi Pengguna Website VIN Syarif Hidayatullah Jakarta.........
43
Tabel 4.5 Pemyataan Misi Website VIN Syarif Hidayatullah Jakarta ..........
45
Tabel 4.6 Deskripsi Use Case Akses Website..............................................
46
Tabel 4. 7 Deskripsi Use Case Login Administrator.....................................
47
Tabel 4.8 Deskripsi Use Case Manage Berita .............................................
47
Tabel 4.9 Deskripsi Use Case Manage Artikel............................................
48
Tabel 4.10 Deskripsi Use Case Manage Kolom Rektor...............................
49
Tabel 4.11 Deskripsi Use Case Manage Halaman Kategori ........................
49
Tabel 4.12 Pengujian Website.....................................................................
84
BABI
PENDAHULUAN
1.1
Latar Belalumg
Vniversitas Islam Negeri Syarif Hidayatullah Jakarta sebagai lembaga
pendidikan tinggi dengan arah pengembangan menuju universitas kelas dunia
sebagaimana ditulis dalam Buku Pedoman Akademik tahun 2010-2011, VIN
Syarif Hidayatullah Jakarta menjadi jendela keunggulan akademis Islam
Indonesia (window of academic excellence of Islam in Indonesia) dan barometer
perkembangan,
pembelajaran,
penelitian,
dam
kerja-kerja
sosial
yang
diselenggarakan kaum Muslim Indonesia dalam berbagai bidang ilmu (Tim
Penyusun Pedoman Akademik, 2010: 14). Hal ini perlu ditunjang media informasi
yang menerapkan teknologi terbam sebagai jendela awal pencarian informasi
mengenai VIN Syarif Hidayatullah di dunia internet. Website sebagai media
informasi yang penting guna mendukung kelancaran informasi dan komunikasi
antara sivitas akademika dengan seluruh unit yang ada di lingkungan VIN Syarif
Hidayatullah Jakarta (Tim Penyusun Pedoman Akademik, 20 I 0: 23).
Hasil observasi yang dilakukan pada website VIN Syarif Hidayatullah
Jakarta, bahwa pada 1 Januari 2014 sampai 17 Februari 2014 website belum
menerapkan teknologi responsive web design. Data statistik kunjungan
menunjukkan dari 100% kunjungan, 30% sudah mengakses website VIN Syarif
Hidayatullah Jakarta dengan perangkat mobile, dari angka 30% terdiri dari 143
2
jenis perangkat mobile dari total 4 77 jenis perangkat yang digunakan untuk
mengakses
(Data Primer PUSTIPANDA Statistik
Website
VIN
Syarif
Hidayatullah Jakarta).
Fenomena bertambahnya jenis perangkat keras dengan beraneka variasi
ukuran resolusi layar serta perilaku pengguna yang cendemng akan lebih banyak
menggunakan internet secara mobile berdampak pada masalah mengenai faktor
usabilitas dari sebuah produk digital dalam penelitian ini pada masalah website.
Semakin banyaknya perangkat yang muncul dengan berbagai ukuran, maka
sebuah situs perlu mengenali ukuran perangkat pengguna (Marcotte, 2011: 8).
Dalam
bukunya Responsive
Web
Design
pada 2011,
Ethan
Macotte
memperkenalkan teknologi Responsive Web Design sebagai solusi untuk
bagaimana membuat sebuah website mampu untuk mengenali ukuran perangkat
pengguna dan membuat website dapat memberikan tampilan yang sesuai dengan
ukuran perangkat pengguna, tanpa mernsak tampilan website tersebut, sehingga
tingkat usabilitas pada jenis-jenis perangkat tetap maksimal. Penulisan skripsi ini
menggunakan framework Bootstrap untuk perancangan tampilan website UIN
Syarif Hidayatullah Jakarta, Bootstrap dikembangkan oleh Twitter. Bootstrap
menjadi framework responsive web design terpopuler dengan menjadi proyek
yang paling banyak dilihat di fornm GitHub sebanyak 33.000 anggota forum.
Dalam penerapannya Bootstrap membagi kategori ukuran resolusi perangkat ke
dalam 4 kategori, yaitu: large devices, medium devices, small devices, dan extra
small devices.
6
1.6
Sistematika Penelitian
Dalam penyusunan tugas akhir ini, penulis menyajikan badasan dalam
lima pokok bahasan, yang secara singkat akan diuraikan sebagai berikut :
BABI
PENDAIDJLUAN
Bab ini akan diuraikan tentang latar belakang, perumusan
masalah, batasan masalah, tujuan penelitian, manfaat
penelitian, dan sistematika penulisan.
BABil
LANDASAN TEORJ:
Bab ini akan diuraikan mengenai landasan teori yang
digunakan dalam pembahasan penulisan skripsi ini dan
sumber landasan teori tersebut.
BABilI
METODOLOGI PENELITIAN
Bab ini berisikan metode dan tahap-tahap yang akan
digunakan dalam penelitian tugas akhir atau skripsi.
BAB IV
HASIL DAN PEMBAHASAN
Bab ini akan diuraikan dan membahas proses perancangan
dan pengembangan antarmuka (user inteiface) website
dengan teknologi
responsive web design yang meliputi
hasil dari metodologi penelitian yang telah dilakukan.
BABV
KESIMPULAN DAN SARAN
Bab ini akan disajikan kesimpulan dan saran-saran yang di
angkat dalam penelitian berdasarkan pembahasan pada babbab sebelumnya.
BABU
LANDASAN TEORI
2.1
Responsive Web Design
Responsive web design adalah pendekatan desain web yang dapat
beradaptasi dengan masalah pada web browser dan perangkat keras yang
menjalankannya untuk menciptakan respon terhadap kebutuhan pengguna
(Marcotte, 2011: 9). Google perusahaan yang bergerak di bidang teknologi dan
mesin pencarian infonnasi di internet dalam portal Google Developer mengenai
"Building Mobile-Optimized Websites" merekomendasikan langsung responsive
web design bagi pengembang website untuk dapat melayani kebutuhan para
pengguna agar optimal pada setiap jenis perangkat dekstop maupun mobile.
Responsive web design memiliki satu aspek dimana hanya diperlukan satu website
untuk berbagai perangkat dan tetap memberikan user-experience yang baik. Ada 3
elemen utama dalam teknologi responsive web design, yaitu:
a. Tata Letak Fleksibel Berbasis Grid
b. Gambar dan Media Fleksibel
c. Media Queries
2.1.1
Tata Letak Fleksibel Berbasis Grid
Tata letak berbasis grid merupakan salah satu pilar penting dalam
desain responsif. Tata letak responsif adalah menggunakan CSS untuk posisi dan
untuk meletakkan margin dan spasi untuk menerapkan berbagai jenis tata letak
8
web dengan cara baru. Tata letak dan ukuran teks biasanya dinyatakan dalam pixel
tata letak berbasis presentase dan ukuran berbasis "em".
Dengan mendasarkan ukuran pada teks, lebar, dan margin presentase
atau di "em" dengan unit pengukuran berdasarkan ukuran titikfont, ukuran yang
dirubah adalah ukuran tetap menjadi ukuran relatif untuk mencapai grid yang
fleksibel dan sistem ukuran teks, dengan rumus perhitungan "em"
Target + Konteks = Hasil
(Marcotte,2011 :20)
Contoh:
Konteks normal ukuran/ont "body" adalah 16 piksel. Jika perancang menetapkan
bahwa "HI" harus 24 piksel dapat dihitung menjadi: 24+16=1.5 maka hasil yang
digunakan dalam kode CSS :
hl{
Font size: 1.5em;
}
2.1.2
Gambar Dan Media Fleksibel
Menurut Ethan Marcotte dalam bukunya Responsive Web Design
salah satu masalah terbesar yang dapat dijawab oleh responsive web design adalah
penggunaan gambar dalam website. Ada beberapa teknik yang dapat digunakan
dalam mengatur ukuran gambar secara proporsional. Salah satu yang paling
populer yang ditulis Ethan Macotte dalam artikelnya tentang fluid images adalah
9
penggunaan "max-width" dalam CSS, teknik ini pertama kali diuji coba oleh
Richard Rutter.
Saat aturan tentang ukuran gambar ini belum ada, pada umumya
setiap gambar akan memuat dalam ukuran aslinya, kecuali area tampilan menjadi
lebih sempit dari lebar asli gambar itu. Lebar maksimum gambar diatur ke 100%
dari lebar layar atau browser, sehingga ketika itu 100% menjadi lebih sempit
maka ukuran gambar tidak akan berubah. Gagasan dibalik fluid-image adalah
bahwa Anda memberikan gambar pada ukuran maksimum yang akan digunakan.
Anda tidak mendeklarasikan tinggi dan lebar dalam kode Anda, tetapi biarkan
browser mengubah ukuran gambar yang diperlukan saat menggunakan CSS untuk
membimbing ukuran size secara relatif (Knight, 2012: 13).
2.1.3
Media Queries
Media query adalah mekanisme untuk mengidentifikasi jenis media,
karakteristik fisik perangkat, dan browser yang digunakan (Marcotte, 2011: 74).
Perangkat yang sudah mendukung CSS3 akan mendukung fitur media query, jadi
memanggil media query untuk mendeteksi target ukuran perangkat. Fitur barn
pada CSS3 juga mencakup orientasi (potret dan landscape), dengan mendeteksi
ukuran resolusi layar sehingga dapat membuat beberapa style sheet serta
perubahan tata letak dasar didefiniskan sesuai dengan rentang lebar bahkan untuk
orientasi landscape dan potret. Contoh penggunaan media query:
10
/* Smartphones (portrait and landscape)
*/
@media only screen
320px)
and (min-device-width
480px)
and {max-device-width
/* Styles */
)
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 32lpx)
I* Styles */
{
)
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
Secara umum media query telah didukung banyak browser (Firefox 3.6+, Safari
4+, Chrome 4+, Opera 9.5+, iOS Safari 3.2+, Opera Mobile IO+, Android 2.1+,
dan Internet Explorer 9+) (Frain, 2012: 35).
2.2
Framework Responsive Web Design
Framework adalah kumpulan perintah atau fungsi dasar yang membentuk
aturan-aturan tertentu dan saling berinteraksi satu sama lain sehingga dalam
pembuatan aplikasi website, kita harus mengikuti aturan dari framework tersebut
(Wardana, 2010: 3).
Dalam pemrograman tampilan webite dengan teknologi responsive web
design, telah dikembangkan yaitu Bootstrap yang dikembangkan oleh Twitter
Inc., Zurb Foundation yang dikembangkan oleh Zurb, Skeleton dan lainnya.
Sebuah framework selain menyediakan lingkungan pengembangan
sendiri juga menyediakan berbagai macam fungsi siap pakai yang bisa digunakan
dalam pembuatan sebuah tampilan website, berikut penjelasan framework
responsive web design (Bootstrap, Foundation, dan Skeleton):
11
2.2.1
Bootstrap
Bootstrap adalah open-source front-end toolkit yang dikembangkan
oleh Mark Otto dan Jacob Thornton dari perusahaan yang berkecimpung dalam
bidang sosial media yaitu Twitter, dirilis pada Agustus 2011. Bootstrap
dikembangkan dengan tujuan untuk membantu desainer dan pengembang dalam
membangun front-end sebuah website secara cepat dan efisien. Twitter Bootstrap
secara cepat menjadi proyek yang paling di dilihat pada GitHub dengan lebih
33.000 pengguna GitHub yang melihat, dua kali lipat lebih banyak dibanding
posisi kedua (Cochran, 2012: 2). Framework Bootstrap mengkategorisasikan
ukuran resolusi layar ke dalam 4 kategori, yaitu:
I. Large Devices (dengan ukuran resolusi layar ?J200px)
2. Medium Devices (dengan ukuran resolusi layar ?992px)
3. Small Devices (dengan ukuran resolusi layar 2:768px)
4. Extra Small Devices (dengan ukuran resolusi layar
..,, ｾＭＮＬﾷ＠
{"'"""""- .. .
PROTOTYPE ｗｅｂｒｓｐｏｎｩｶＮｄｾｊ｢＠
ｩｾＺＢＷ＠
PADA
UIN SYARIF HIDAYATULLAH JAKARTA MENGGUNAKAN
FRAMEWORK BOOTSTRAP
Skripsi
Sebagai salah satu syarat memperoleh gelar Sarjana Komputer
FADLANREZA
108091000065
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS SAINS DAN TEKNOLOGI
UIN SYARIF HIDAYATULLAH JAKARTA
2014 MI 1435 H
PROTOTYPE WEB RESPONSIVE DESIGN PADA
UIN SYARIF HIDAYATULLAH JAKARTA MENGGUNAKAN
FRAMEWORK BOOTSTRAP
Skripsi
Sebagai Salah Satu Syarat untuk Memperoleh Gelar Sarjana Komputer
Oleh:
FADLANREZA
108091000065
PROGRAM STUD! TEKNIK INFORMATIKA
FAKULTAS SAINS DAN TEKNOLOGI
UIN SYARIF HIDAYATULLAH JAKARTA
2014 M/1435 H
Tgl
LEMBARPENGESAHAN
WEB RESPONSIVE DESIGN UNTUK PERGURUAN TINGGI
MENGGUNAKAN FRAMEWORK BOOTSTRAP
(Studi Kasus : UIN Syarif Hidayatullah Jakarta)
Skripsi
Sebagai Salah Satu Syarat untuk Memperoleh Gelar Sarjana Komputer
Fakultas Sains dan Teknologi
UIN SyarifHidayatullah Jakarta
Oleh:
FADLANREZA
NIM : 108091000065
Menyetujui,
Pembimbing I,
Pembimbing II,
Viva Arifin MMS
NIP. 19730810 200604 001
Arini, MT
NIP. 197601312009012001
Mengetahui,
Ketua Program tudi Teknik Informatika
Nurh
ati P . D
1'TTP 1o;;orn1;; 1 00001 ,, oo-,
PERNYATAAN
DENGAN INI SAYA MENYATAKAN BAHWA SKRIPSI !NI BENARBENAR HASIL KARYA SENDIRI YANG BELUM PERNAH DIAJUKAN
SEBAGAI SKRIPSI ATAU KARYA ILMIAH PADA PERGURUAN TINGGI
ATAU LEMBAGA MANAPUN.
Jakaita, September 2014
Fadlan Reza
108091000065
Fadhm Reza, Prototype Web Responsive Design Pada VIN Syarif Hidayatullah
Jakarta Menggunakan Framework Bootstrap, dibimbing oleh Viva Arifin, MMSI
dan Arini, MT.
ABSTRAK
Angka akses website VIN Syarif Hidayatullah Jakarta dengan menggunakan
perangkat mobile mencapai 30% dari total kunjungan dan dari 59 jenis resolusi
layar, 42 adalah perangkat mobile selama I Januari - 17 Februari 2014 (Data
Primer PVSTIPANDA, 2014). Secara global angka akses internet menggunakan
perangkat mobile meningkat, menurut Morgan Stanley Research dalam laporan
Global The Mobile Internet Report, 2009, pada 2014 diprediksi akses internet
dengan perangkat mobile akan melampaui akses internet dengan perangkat
mobile. Pada 2012 menurut HIS iSuppli Research angka penjualan perangkat
desktop mengalami penurunan sebesar 1,2 % dibanding tahun 2011, dampak dari
meningkatnya jumlah penjualan perangkat mobile. Hal ini menimbulkan
pertanyaan pada apakah website VIN SyarifHidayatullah Jakarta pada 2014 sudah
siap menghadapai akses dari perangkat mobile yang begitu beragam? Menurut
Ethan Marcotte, semakin banyaknya perangkat yang muncul dengan berbagai
ukuran, maka sebuah situs perlu mengenali ukuran perangkat pengguna (Marcotte,
2011: 8). Responsive web design adalah pendekatan desain webite yang dapat
beradaptasi dengan masalah pada web browser dan perangkat keras yang
menjalankannya untuk menciptakan respon terhadap kebutuhan pengguna
(Marcotte, 2011: 9). Responsive web design terdiri atas 3 komponen yaitu: tata
letak fleksibel berbasis grid, gambar dan media fleksibel, media queries. Pada
penulisan skripsi ini penulis menggunakan metodologi Web Site Design Method
(WSDM) dalam pembuatan website VIN Syarif Hidayatullah Jakarta dengan
tahapan proses pernyataan misi dengan pengumpulan data berupa observasi dan
wawancara, pemodelan pengguna, desain konseptual, desain implementasi, dan
implementasi. Hasil proses pembuatan adalah website VIN Syarif Hidayatullah
Jakarta dengan tampilan baru yang mengadopsi teknologi responsive web design,
sehingga bisa beradaptasi pada setiap ukuran resolusi layar yang berbeda-beda
baik dengan perangkat mobile maupun desktop.
Kata kunci
: Website, Responsive Web Design, Resolusi Layar, Mobile,
Web Site Design Method (WSDM).
: 26 (1998 -2013)
Daftar Pustaka
Jumlah Halaman : 5 BAB + 116 Halaman + 33 Gambar + 13 Tabel + 6
Lampiran
Faizal, Fariz Yuliono, Hafizhan Irawan, Ilham Tri Saputra, Muchtar Aham,
Muhammad Ardiansyah, Priyangga, Rahmad Hamidi, Rizqon Syauqi, dan
Eko Suganda. Language Theory & Automata Band.
6.
Teman-teman Muhammad Fajar, Vina Alfiani, Aji Prastio Wibowo, Indah
Permata Sari, Ninda Firstri Oktidila, dan Adina Siti Maryam Talogo atas
do'a, dukungan, dan semangatnya.
7.
Rekan-rekan
PUSTIPANDA
UIN
Syarif Hidayatullah
Jakarta
atas
kesempatan riset dan data penelitiannya.
8.
Teman-teman Teknik Informatika C 2008 (Ticcer) dan Teman Teknik
Informatika Multimedia 2008.
9.
Keluarga Besar Dapur Seni atas ilmu dan pengalaman bermusiknya. Temanteman band dan lainnya.
I 0. Selumh pihak yang telah membantu meski tak penulis sebutkan khusus.
Terima kasih banyak atas do'a, bantuan, dan dukungannya semoga Allah SWT
membalas dengan segala kebaikan dan keberkahan. Mohon maaf atas segala
kekurangan yang masih terdapat dalam skripsi ini.
Demikian, penulis berharap skripsi ini dapat memberikan manfaat. Untuk
kritik dan saran dapat menghubungi penulis melalui email facHm1@Joutlook.com.
Jakarta, September 2014
Fadlan Reza
DAFTARISI
Halaman
HALAMAN SAMPUL ............................................................................ .
HALAMAN JUDUL ................................................................................
ii
HALAMAN PENGESAHAN ..................................................................
iii
HALAMAN PENGESAHAN UJIAN .....................................................
iv
HALAMAN PERNYATAAN ..................................................................
v
ABSTRAK ...............................................................................................
vi
KATA PENGANTAR ..............................................................................
vii
DAFTAR ISI ............................................................................................
ix
DAFTAR GAMBAR ..................................................................................
xii
DAFTAR TABEL ....................................................................................
xiv
BAB 1 PENDAHULUAN ......................................................................
1
I. I Latar Belakang .....................................................................
I
1.2 Rumusan Masaiah . .. ...... .. .... ...... ..... ..... .. ...... ... ....... .. .............
3
I .3 Batasan Masai ah .. .. ....... .. ...... .... .. .. .. ...... .. .... .. ............. .... ..... ..
4
I .4 Tujuan Penelitian ..................................................................
4
1.5 Manfaat Penelitian ................................................................
5
1.6 Sistematika Penelitian ...........................................................
6
BAB Il LANDASAN TEORI .................................................................
7
2. I Responsive Web Design .........................................................
7
2. l. l Tata Letak Fleksibel Berbasis Grid ..............................
7
2. l.2 Gambar dan Media Fleksibel .......................................
8
2.1.3 Media Queries .............................................................
9
2.2 Framework Responsive Web Design ......................................
10
2.2. l Bootstrap .....................................................................
11
2.2.2 Foundation ..................................................................
11
2.2.3 Skeleton ......................................................................
12
2.2.4 Perbandingan 3 Framework Responsive Web Design....
13
2.2.5 Alasan Menggunakan Framework Bootstrap ................
15
2.3 Desain Web ...........................................................................
15
2.3.1 HyperText Markup Language 5 (HTML5) ...................
15
2.3.2 Cascading Style Sheet 3 (CSS3) ..................................
16
2.4 Usabilitas ..............................................................................
17
2.5 Studi Pustaka .........................................................................
19
2.6 Web Site Design Method (WSDM)........................................
19
2. 7 Unified Modeling Language (UML) ......................................
25
BAB m METODOLOGI PENELITIAN ..............................................
27
3 .1 Metode Pengumpulan Data ..... .. .... ....... .. ... .. ..... .. .. .. .. ... .. ......
27
3.1.1 Data Primer...............................................................
27
3.1.1.1 Wawancara ....................................................
27
3.1.1.2 Observasi ......................................................
27
3.1.2 Data Sekunder ..........................................................
28
3.1.2.1 Studi Pustaka .................................................
28
3.2 Metode Web Site Design Method (WSDM) ........................
29
3.2.1 Pernyataan Misi .........................................................
29
3.2.2 Pemodelan Pengguna ................................................
30
3.2.3 Desain Konseptual .....................................................
30
3.2.3. l Pemodelan lnfonnasi .....................................
31
3.2.3.2 Pemodelan Fungsi .........................................
3I
3.2.3.3 Desain Navigasi ............................................
31
3.2.4 Desain Implementasi .................................................
32
3.2.4. I Desain Halaman ............................................
32
3.2.4.2 Desain Presentasi ..........................................
33
3.2.5 Implementasi .............................................................
34
3.2.6 Pengujian ..................................................................
34
3.3 Alasan Menggunakan WSDM .............................................
35
3.4 Kerangka Berfikir ...............................................................
36
BAB IV HASIL DAN PEMBAHASAN ••••••••••••••.••••••.•••.•...•..••••••••••••••••
37
4. I Web Site Design Method (WSDM) ......................................
37
4.1.1 Pemyataan Misi .........................................................
37
4.1.2 Pemodelan Pengguna ................................................
45
4.1.2.1 Klasifikasi Pengguna ...................................
45
4.1.2.2 Karakterisasi Pengguna ...............................
54
4.1.3 Desain Konseptual .....................................................
55
4.1.3.1 Pemodelan Informasi ..................................
55
4.1.3.2 Pemodelan Fungsi .......................................
56
4.1.3.3 Desain Navigasi ..........................................
61
4.1.4 Desain Implementasi .................................................
63
4.1.4.1 Desain Halaman ..........................................
63
4.1.4.2 Desain Presentasi ........................................
75
4.1.5 Implementasi .............................................................
80
4.3 Pengujian ............................................................................
83
4.4 Perbandingan Website UIN Syarif Hidayatullah Sebelum dan
Sesudah Menggunakan Teknologi Responsive Web Design.........
86
BAB V PENUfUP ..................................................................................
87
5.1 Kesimpulan ...........................................................................
87
5.2 Saran .... ....... ..... .. .... ...... ...... .. ..... .... ......... ..... ....... ..... ...... ....... .
88
DAFTAR PUSTAKA ...............................................................................
89
LAMPIRAN .............................................................................................
92
DAFTAR TABEL
Halaman
Tabel 2.1 Perbandingan 3 Framework Responsive Web Design ..................
13
Tabel 4.1 Resolusi Layar Pengguna Website VIN SyarifHidayatullah
Jakarta .......................................................................................................
38
Tabel 4.2 Browser Pengguna Website UIN SyarifHidayatullah Jakarta .....
39
Tabel 4.3 Jenis Perangkat Mobile Pengguna Website UIN SyarifHidayatullah
Jakarta .......................................................................................................
41
Tabel 4.4 Durasi Pengguna Website VIN Syarif Hidayatullah Jakarta.........
43
Tabel 4.5 Pemyataan Misi Website VIN Syarif Hidayatullah Jakarta ..........
45
Tabel 4.6 Deskripsi Use Case Akses Website..............................................
46
Tabel 4. 7 Deskripsi Use Case Login Administrator.....................................
47
Tabel 4.8 Deskripsi Use Case Manage Berita .............................................
47
Tabel 4.9 Deskripsi Use Case Manage Artikel............................................
48
Tabel 4.10 Deskripsi Use Case Manage Kolom Rektor...............................
49
Tabel 4.11 Deskripsi Use Case Manage Halaman Kategori ........................
49
Tabel 4.12 Pengujian Website.....................................................................
84
BABI
PENDAHULUAN
1.1
Latar Belalumg
Vniversitas Islam Negeri Syarif Hidayatullah Jakarta sebagai lembaga
pendidikan tinggi dengan arah pengembangan menuju universitas kelas dunia
sebagaimana ditulis dalam Buku Pedoman Akademik tahun 2010-2011, VIN
Syarif Hidayatullah Jakarta menjadi jendela keunggulan akademis Islam
Indonesia (window of academic excellence of Islam in Indonesia) dan barometer
perkembangan,
pembelajaran,
penelitian,
dam
kerja-kerja
sosial
yang
diselenggarakan kaum Muslim Indonesia dalam berbagai bidang ilmu (Tim
Penyusun Pedoman Akademik, 2010: 14). Hal ini perlu ditunjang media informasi
yang menerapkan teknologi terbam sebagai jendela awal pencarian informasi
mengenai VIN Syarif Hidayatullah di dunia internet. Website sebagai media
informasi yang penting guna mendukung kelancaran informasi dan komunikasi
antara sivitas akademika dengan seluruh unit yang ada di lingkungan VIN Syarif
Hidayatullah Jakarta (Tim Penyusun Pedoman Akademik, 20 I 0: 23).
Hasil observasi yang dilakukan pada website VIN Syarif Hidayatullah
Jakarta, bahwa pada 1 Januari 2014 sampai 17 Februari 2014 website belum
menerapkan teknologi responsive web design. Data statistik kunjungan
menunjukkan dari 100% kunjungan, 30% sudah mengakses website VIN Syarif
Hidayatullah Jakarta dengan perangkat mobile, dari angka 30% terdiri dari 143
2
jenis perangkat mobile dari total 4 77 jenis perangkat yang digunakan untuk
mengakses
(Data Primer PUSTIPANDA Statistik
Website
VIN
Syarif
Hidayatullah Jakarta).
Fenomena bertambahnya jenis perangkat keras dengan beraneka variasi
ukuran resolusi layar serta perilaku pengguna yang cendemng akan lebih banyak
menggunakan internet secara mobile berdampak pada masalah mengenai faktor
usabilitas dari sebuah produk digital dalam penelitian ini pada masalah website.
Semakin banyaknya perangkat yang muncul dengan berbagai ukuran, maka
sebuah situs perlu mengenali ukuran perangkat pengguna (Marcotte, 2011: 8).
Dalam
bukunya Responsive
Web
Design
pada 2011,
Ethan
Macotte
memperkenalkan teknologi Responsive Web Design sebagai solusi untuk
bagaimana membuat sebuah website mampu untuk mengenali ukuran perangkat
pengguna dan membuat website dapat memberikan tampilan yang sesuai dengan
ukuran perangkat pengguna, tanpa mernsak tampilan website tersebut, sehingga
tingkat usabilitas pada jenis-jenis perangkat tetap maksimal. Penulisan skripsi ini
menggunakan framework Bootstrap untuk perancangan tampilan website UIN
Syarif Hidayatullah Jakarta, Bootstrap dikembangkan oleh Twitter. Bootstrap
menjadi framework responsive web design terpopuler dengan menjadi proyek
yang paling banyak dilihat di fornm GitHub sebanyak 33.000 anggota forum.
Dalam penerapannya Bootstrap membagi kategori ukuran resolusi perangkat ke
dalam 4 kategori, yaitu: large devices, medium devices, small devices, dan extra
small devices.
6
1.6
Sistematika Penelitian
Dalam penyusunan tugas akhir ini, penulis menyajikan badasan dalam
lima pokok bahasan, yang secara singkat akan diuraikan sebagai berikut :
BABI
PENDAIDJLUAN
Bab ini akan diuraikan tentang latar belakang, perumusan
masalah, batasan masalah, tujuan penelitian, manfaat
penelitian, dan sistematika penulisan.
BABil
LANDASAN TEORJ:
Bab ini akan diuraikan mengenai landasan teori yang
digunakan dalam pembahasan penulisan skripsi ini dan
sumber landasan teori tersebut.
BABilI
METODOLOGI PENELITIAN
Bab ini berisikan metode dan tahap-tahap yang akan
digunakan dalam penelitian tugas akhir atau skripsi.
BAB IV
HASIL DAN PEMBAHASAN
Bab ini akan diuraikan dan membahas proses perancangan
dan pengembangan antarmuka (user inteiface) website
dengan teknologi
responsive web design yang meliputi
hasil dari metodologi penelitian yang telah dilakukan.
BABV
KESIMPULAN DAN SARAN
Bab ini akan disajikan kesimpulan dan saran-saran yang di
angkat dalam penelitian berdasarkan pembahasan pada babbab sebelumnya.
BABU
LANDASAN TEORI
2.1
Responsive Web Design
Responsive web design adalah pendekatan desain web yang dapat
beradaptasi dengan masalah pada web browser dan perangkat keras yang
menjalankannya untuk menciptakan respon terhadap kebutuhan pengguna
(Marcotte, 2011: 9). Google perusahaan yang bergerak di bidang teknologi dan
mesin pencarian infonnasi di internet dalam portal Google Developer mengenai
"Building Mobile-Optimized Websites" merekomendasikan langsung responsive
web design bagi pengembang website untuk dapat melayani kebutuhan para
pengguna agar optimal pada setiap jenis perangkat dekstop maupun mobile.
Responsive web design memiliki satu aspek dimana hanya diperlukan satu website
untuk berbagai perangkat dan tetap memberikan user-experience yang baik. Ada 3
elemen utama dalam teknologi responsive web design, yaitu:
a. Tata Letak Fleksibel Berbasis Grid
b. Gambar dan Media Fleksibel
c. Media Queries
2.1.1
Tata Letak Fleksibel Berbasis Grid
Tata letak berbasis grid merupakan salah satu pilar penting dalam
desain responsif. Tata letak responsif adalah menggunakan CSS untuk posisi dan
untuk meletakkan margin dan spasi untuk menerapkan berbagai jenis tata letak
8
web dengan cara baru. Tata letak dan ukuran teks biasanya dinyatakan dalam pixel
tata letak berbasis presentase dan ukuran berbasis "em".
Dengan mendasarkan ukuran pada teks, lebar, dan margin presentase
atau di "em" dengan unit pengukuran berdasarkan ukuran titikfont, ukuran yang
dirubah adalah ukuran tetap menjadi ukuran relatif untuk mencapai grid yang
fleksibel dan sistem ukuran teks, dengan rumus perhitungan "em"
Target + Konteks = Hasil
(Marcotte,2011 :20)
Contoh:
Konteks normal ukuran/ont "body" adalah 16 piksel. Jika perancang menetapkan
bahwa "HI" harus 24 piksel dapat dihitung menjadi: 24+16=1.5 maka hasil yang
digunakan dalam kode CSS :
hl{
Font size: 1.5em;
}
2.1.2
Gambar Dan Media Fleksibel
Menurut Ethan Marcotte dalam bukunya Responsive Web Design
salah satu masalah terbesar yang dapat dijawab oleh responsive web design adalah
penggunaan gambar dalam website. Ada beberapa teknik yang dapat digunakan
dalam mengatur ukuran gambar secara proporsional. Salah satu yang paling
populer yang ditulis Ethan Macotte dalam artikelnya tentang fluid images adalah
9
penggunaan "max-width" dalam CSS, teknik ini pertama kali diuji coba oleh
Richard Rutter.
Saat aturan tentang ukuran gambar ini belum ada, pada umumya
setiap gambar akan memuat dalam ukuran aslinya, kecuali area tampilan menjadi
lebih sempit dari lebar asli gambar itu. Lebar maksimum gambar diatur ke 100%
dari lebar layar atau browser, sehingga ketika itu 100% menjadi lebih sempit
maka ukuran gambar tidak akan berubah. Gagasan dibalik fluid-image adalah
bahwa Anda memberikan gambar pada ukuran maksimum yang akan digunakan.
Anda tidak mendeklarasikan tinggi dan lebar dalam kode Anda, tetapi biarkan
browser mengubah ukuran gambar yang diperlukan saat menggunakan CSS untuk
membimbing ukuran size secara relatif (Knight, 2012: 13).
2.1.3
Media Queries
Media query adalah mekanisme untuk mengidentifikasi jenis media,
karakteristik fisik perangkat, dan browser yang digunakan (Marcotte, 2011: 74).
Perangkat yang sudah mendukung CSS3 akan mendukung fitur media query, jadi
memanggil media query untuk mendeteksi target ukuran perangkat. Fitur barn
pada CSS3 juga mencakup orientasi (potret dan landscape), dengan mendeteksi
ukuran resolusi layar sehingga dapat membuat beberapa style sheet serta
perubahan tata letak dasar didefiniskan sesuai dengan rentang lebar bahkan untuk
orientasi landscape dan potret. Contoh penggunaan media query:
10
/* Smartphones (portrait and landscape)
*/
@media only screen
320px)
and (min-device-width
480px)
and {max-device-width
/* Styles */
)
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 32lpx)
I* Styles */
{
)
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
Secara umum media query telah didukung banyak browser (Firefox 3.6+, Safari
4+, Chrome 4+, Opera 9.5+, iOS Safari 3.2+, Opera Mobile IO+, Android 2.1+,
dan Internet Explorer 9+) (Frain, 2012: 35).
2.2
Framework Responsive Web Design
Framework adalah kumpulan perintah atau fungsi dasar yang membentuk
aturan-aturan tertentu dan saling berinteraksi satu sama lain sehingga dalam
pembuatan aplikasi website, kita harus mengikuti aturan dari framework tersebut
(Wardana, 2010: 3).
Dalam pemrograman tampilan webite dengan teknologi responsive web
design, telah dikembangkan yaitu Bootstrap yang dikembangkan oleh Twitter
Inc., Zurb Foundation yang dikembangkan oleh Zurb, Skeleton dan lainnya.
Sebuah framework selain menyediakan lingkungan pengembangan
sendiri juga menyediakan berbagai macam fungsi siap pakai yang bisa digunakan
dalam pembuatan sebuah tampilan website, berikut penjelasan framework
responsive web design (Bootstrap, Foundation, dan Skeleton):
11
2.2.1
Bootstrap
Bootstrap adalah open-source front-end toolkit yang dikembangkan
oleh Mark Otto dan Jacob Thornton dari perusahaan yang berkecimpung dalam
bidang sosial media yaitu Twitter, dirilis pada Agustus 2011. Bootstrap
dikembangkan dengan tujuan untuk membantu desainer dan pengembang dalam
membangun front-end sebuah website secara cepat dan efisien. Twitter Bootstrap
secara cepat menjadi proyek yang paling di dilihat pada GitHub dengan lebih
33.000 pengguna GitHub yang melihat, dua kali lipat lebih banyak dibanding
posisi kedua (Cochran, 2012: 2). Framework Bootstrap mengkategorisasikan
ukuran resolusi layar ke dalam 4 kategori, yaitu:
I. Large Devices (dengan ukuran resolusi layar ?J200px)
2. Medium Devices (dengan ukuran resolusi layar ?992px)
3. Small Devices (dengan ukuran resolusi layar 2:768px)
4. Extra Small Devices (dengan ukuran resolusi layar