Modul Praktikum Web

Membuat Website Sederhana dengan

Responsive Web Design

Nur Alamsyah M Kom

FAKULTAS TEKNOLOGI INFORMASI

UNIVERSITAS ISLAM KALIMANTAN (UNISKA)
MUHAMMAD ARSYAD ALBANJARY
BANJARMASIN
2015

DAFTAR ISI

Halaman
Modul Praktikum Web.............................................................................................................i
DAFTAR ISI............................................................................................................................ ii
DAFTAR GAMBAR .............................................................................................................. iii
BAB I MENGENAL RESPONSIVE WEB DESIGN ........................................................... 1
1.1 Apa Itu Responsive Web ................................................................................................. 1
1.2 Perbedaan Desain Web Static, liquid, Adaptive dan Responsive .................................... 6
1.3 Framework untuk Responsive Web Design ................................................................... 10
BAB II MENDESAIN WEB DENGAN BOOTSTRAP ..................................................... 12
2.1 Apa itu Bootstrap ? ........................................................................................................ 12
2.2 Fitur Bootstrap ............................................................................................................... 12
2.3 Komponen Bootstrap ..................................................................................................... 13
2.3.1 CSS Component ...................................................................................................... 13
2.3.2 Base Component ..................................................................................................... 16
2.3.3 Javascript Component ............................................................................................. 21
BAB III DESAIN SEDERHANA HALAMAN WEB DENGAN BOOTSTRAP ............. 24
3.1 Tools Yang digunakan ................................................................................................... 24
3.2 Cara menggunakan Bootstrap ........................................................................................ 24
3.3 Membuat Menu Dropdwon ............................................................................................ 26
3.4 Membuat Bagian Banner Halaman ................................................................................ 28
3.5 Membuat Bagian Konten Halaman Web ....................................................................... 29
DAFTARPUSTAKA .............................................................................................................. 30

ii

DAFTAR GAMBAR

Gambar 1. 1 Beberapa ukuran layar yang ada (sumber gambar: http://line25.com) ................. 2
Gambar 1. 2 Tampilan Website Okezone .................................................................................. 3
Gambar 1. 3 Tampilan Website stephencaver ........................................................................... 4
Gambar 1. 4 Tampilan Website Teixido .................................................................................... 5
Gambar 1. 5 Tampilan Website cognition ................................................................................. 5
Gambar 1. 6 Desain web antar device ....................................................................................... 6
Gambar 1. 7 Web Responsive Design ....................................................................................... 9
Gambar 1. 8 Halaman Dokumentasi bootstrap ........................................................................ 10
Gambar 1. 9 Framework Foundation ....................................................................................... 10
Gambar 1. 10 Framework Metro UI ........................................................................................ 11
Gambar 2. 1 Browser Support ................................................................................................. 12
Gambar 2. 2 Grid System......................................................................................................... 13
Gambar 2. 3 Typography ......................................................................................................... 14
Gambar 2. 4 Tables .................................................................................................................. 14
Gambar 2. 5 Forms .................................................................................................................. 15
Gambar 2. 6 Buttons ................................................................................................................ 15
Gambar 2. 7 Images ................................................................................................................. 16
Gambar 2. 8 Glyphicons .......................................................................................................... 16
Gambar 2. 9 Dropdown............................................................................................................ 17
Gambar 2. 10 Navbar ............................................................................................................... 17
Gambar 2. 11 Pagination.......................................................................................................... 18
Gambar 2. 12 Jumbotron.......................................................................................................... 18
Gambar 2. 13 Thumbnails........................................................................................................ 19
Gambar 2. 14 Alerts ................................................................................................................. 19
Gambar 2. 15 Progress Bar ...................................................................................................... 20
iii

Gambar 2. 16 List Group ......................................................................................................... 20

Gambar 2. 17 Panels ................................................................................................................ 20
Gambar 2. 18 Modal ................................................................................................................ 21
Gambar 2. 19 Tab .................................................................................................................... 21
Gambar 2. 20 Tooltip ............................................................................................................... 22
Gambar 2. 21 Popover ............................................................................................................. 22
Gambar 2. 22 Alert .................................................................................................................. 22
Gambar 2. 23 Collapse ............................................................................................................. 23
Gambar 2. 24 Corousel ............................................................................................................ 23
Gambar 3. 1 Folder Praktikum................................................................................................. 24
Gambar 3. 2 Folder js............................................................................................................... 25
Gambar 3. 3 Menu ................................................................................................................... 27
Gambar 3. 4 Menu Dropdown ................................................................................................. 27
Gambar 3. 5 Banner Halaman .................................................................................................. 28
Gambar 3. 6 Hasil Akhir Halaman Web Sederhana yang Responsive .................................... 29

iv

BAB I
MENGENAL RESPONSIVE WEB DESIGN
1.1 Apa Itu Responsive Web
Mungkin kita sudah tidak asing lagi dengan halaman web seperti facebook.com, twitter.com,
detik.com dan sebagainya. Jika kita mengunjungi halaman halaman tersebut menggunakan
perangkat mobile, maka kita akan didirect (dialihkan) menuju halaman web versi mobile
mereka (m.facebook.com, m.twitter.com, m.detik.com, dst) yang terpisah dengan halaman
fullsitenya (halaman versi desktop). (Mulhim, 2014)
Dari hal tersebut, sebagai seorang web programmer, maka kita harus membuat dua buah
tampilan website untuk versi fullsite dan mobile. Itu artinya kita harus kerja ekstra, bagi
pemilik website maka ini bearti biaya ekstra yang harus dikeluarkan, belum lagi kerepotan
dalam mengupdate konten dan maintenance website yang harus dilakukan pada kedua versi
website(fullsite dan mobile).
Dengan berkembangnya teknologi, khususnya dalam pemrograman web, maka muncul sebuah
gagasan baru yaitu bagaimana caranya membuat sebuah halaman web yang dapat
menyesuaikan tampilannya/ layoutnya secara otomatis dengan ukuran layar perangkat ataupun
jendela web browser. Ketika ukuran layar perangkat kecil atau jendela web browser dikecilkan
beberapa elemen web akan menyesuaikan baik dari segi ukuran maupun posisi, misal pada
menu navigasi yang berada diatas dan sidebar yang berada disebelah kanan akan berpindah
kebawah. Lalu gambar-gambar akan ikut mengecil seiring mengecilnya layar perangkat
ataupun jendela web browser. Hal demikian diartikan bahwa halaman web tersebut sudah
menerapkan teknik Responsive Web Design (RWD).
Responsive Web Design (RWD) semakin popular sekitar pertengahan 2010 lalu, ini berawal
dari sebuah artikel Desain Web Responsif yang ditulis oleh Ethan Marcotte pada website
alistapart.com. Pada artikel tersebut mengusulkan bagaimana sebuah desain web bisa
menyesuaikan sendiri baik dari segi ukuran maupun komponen website pada perangkat mobile
dan Desktop secara fleksibel tanpa harus membuat desain yang berbeda untuk perangkat
berbeda dengan konten isinya sama. Dari situ maka lahirlah sebuah konsep Responsive Web
Design yang lebih fleksibel dan bisa beradaptasi hampir disemua layar berbeda. Anda dapat
membacanya dengan mengunjungi halaman http://alistapart.com/article/responsive-webdesign/ (Marcotte, 2010)
1

2
Pengertian Responsive Web Design menurut http://www.wikipedia.org/ yang dalam bahasa
indonesianya:
Responsive Web Desain adalah sebuah desain web/situs yang dibuat untuk
memberikan pengalaman menjelajah web secara optimal, mudah dibaca dan
bernavigasi, dengan minimum resizing, panning dan scrolling diberbagai perangkat
(desktop dan mobile).
Secara sederhana teknik Responsive Web Design adalah membuat website dapat dibuka
melalui media apa saja baik desktop maupun mobile tanpa kehilangan konten atau isi dari
website tersebut dan tetap mudah dalam hal navigasi dan membaca isi dari web tersebut.

Gambar 1. 1 Beberapa ukuran layar yang ada (sumber gambar: http://line25.com)

Responsive Web Design sangat popular ditahun 2013 dan bisa dipastikan terus berlanjut,
mengingat semakin banyak orang yang mengakses internet menggunakan perangkat mobile
yang memiliki ukuran layar serta resolusi yang berbeda satu sama lain. Berikut ini adalah
gambaran seperti apa sebuah website yang menerapkan teknik Responsive Web Design.

3
1. http://www.okezone.com/
Desktop (Widescreen)

Tablet (Potrait)

Smartphone (Potrait)

Gambar 1. 2 Tampilan Website Okezone

4
2. http://stephencaver.com/
Desktop (Widescreen)

Tablet (Potrait)

Smartphone (Potrait)

Gambar 1. 3 Tampilan Website stephencaver

5
3. http://teixido.co/

Gambar 1. 4 Tampilan Website Teixido

4. http://cognition.happycog.com/

Gambar 1. 5 Tampilan Website cognition

Dan masih banyak website lainnya yang menggunakan Responsive Web Design seperti:
http://seesparkbox.com/
http://foodsense.is/
http://www.bostonglobe.com/
http://teegallery.com/
http://www.about.com/
https://yiibu.com/
1.2 Perbedaan Desain Web Static, liquid, Adaptive dan Responsive
Membuat sebuah desain web yang baik dan menarik harus menjadi prioritas mutlak. Terlebih
lagi dengan perkembangan sekarang, desainer web dituntut agar dapat membuat desain web
yang dapat berjalan diberbagai perangkat dan web browser.

Gambar 1. 6 Desain web antar device

Mari sejenak kita memperhatikan apa sih sebenarnya perbedaan diantara desain web static,
liquid, adaptive dan responsive ? Mana yang harus dipilih seandainya saya akan mendesain
sebuah web ? Cobalah untuk me-resize (mengecilkan & membesarkan) tampilan web browser
agar Anda dapat melihat perbedaan setiap desainnya.
http://www.liquidapsive.com/

1. Desain Web Static

Desain web static (statis) atau juga disebut fixed merupakan teknik desain web tradisional.
Desain web ini memiliki desain yang sama di semua perangkat baik di desktop, ponsel ataupun
tablet. Umumnya ketika proses pembuatan desain, desainer akan fokus pada 1 perangkat
(resolusi saja) misal 1024 px. Ketika membuka desain web ini di perangkat dengan resolusi
yang kecil seperti ponsel misalnya, maka Anda membutuhkan scroll horizontal untuk dapat
melihat keseluruhan desain web.
Kelebihan :
-

Ketika proses pembuatan, waktu yang dibutuhkan lebih cepat dan biasanya juga lebih
murah

Dalam proses desain, persiapan dan kebutuhan yang diperlukan sangat kecil

Kekurangan :
-

Pengunjung akan memiliki kesan yang buruk, terlebih jika mereka menggunakan
perangkat dengan resolusi yang kecil (ponsel)

Tidak memiliki desain optional pada ukuran layar yang berbeda

Harus membuat situs terpisah untuk pengguna ponsel

2. Desain Web Liquid

Desain web liquid (atau fluid) merupakan desain web yang menggunakan perhitungan
persentase (%) dalam implementasinya. Desain ini bisa dikatakan sedikit lebih baik
dibandingkan desain web static terlebih untuk membuatnya juga sangat mudah. Namun perlu
diingat, hampir bisa dipastikan jika web ini dibuka diperangkat ponsel akan terlihat sangat
buruk.
Kelebihan :
-

Lebih fleksibel dari desain web static

Baik digunakan untuk target pengunjung yang menggunakan perangkat komputer

desktop

8
Kekurangan :
-

Hasil desain web akan terlihat buruk di layar perangkat ponsel dan tablet yang kecil

Tampilan konten web terlihat tidak konsisten

3. Desain Web Adaptive

Desain web adaptive merupakan desain web yang memiliki layout yang berbeda untuk resolusi
yang berbeda. Desain web ini dibuat dengan target resolusi tertentu misal untuk perangkat
ponsel, tablet dan desktop. Teknik desain web adaptive bisa dikatakan hampir sama dengan
teknik desain web static, dimana desain web dibuat dengan teknik static namun memiliki
beragam desain untuk perangkat tertentu.
Kelebihan :
-

Desain web tersedia pada perangkat tertentu

Lebih memanjakan pengunjung karena desain web tersedia dalam beberapa perangkat

Kekurangan :
-

Dibutuhkan waktu yang relatif lama dalam proses pembuatannya.

Desain web hanya ter-target pada perangkat tertentu, sehingga akan terlihat tidak
optimal pada perangkat dengan resolusi yang unik

4. Desain Web Responsive

Desain web responsive ialah gabungan 2 desain web utama yaitu desain web liquid dan
responsive. Desain web responsive ialah pilihan desain web terbaik untuk saat ini. Dengan
desain web responsive, secara otomatis tampilan konten akan menyesuaikan diri (beradaptasi)
dengan berbagai resolusi perangkat. Perlu diingat, desain web responsive tidak dibuat hanya
untuk resolusi tertentu melainkan desain dapat menyesuaikan diri pada berbagai perangkat dan
resolusi.

9
Kelebihan :
-

Sangat baik, dikarenakan desain web tersedia untuk semua perangkat & resolusi

Pengelolaan web akan sangat mudah terutama dalam hal desain

Kekurangan :
-

Membutuhkan perencanaan dan persiapan yang lebih (matang) pada tahap desain

Membutuhkan waktu yang lama dalam proses pembuatannya

Kesimpulan
Dengan mengetahui perbedaan, kelebihan serta kekurangan setiap desain, nantinya Anda dapat
menentukan pilihan mana yang terbaik sesuai dengan kebutuhan. Pemilihan desain yang tepat
akan sangat berbengaruh ketika proses pembuatan dan pengembangan sebuah desain web
nantinya. Dengan harapan, setiap desain yang dihasilkan dapat memberikan kemudahan serta
nilai lebih kepada pengunjung.

Gambar 1. 7 Web Responsive Design

10
1.3 Framework untuk Responsive Web Design
Jika kita ingin membuat sebuah desain web yang responsive dengan cara yang cepat dan instant
tanpa direpotkan menulis code dari awal, maka diperlukan kerangka kerja (framework) yang
dapat digunakan untuk proyek desain web responsive diantaranya:

1. Bootstrap
Bootstrap adalah salah satu framework untuk mengembangkan website dengan tampilan yang
responsive secara cepat dan mudah tanpa perlu membuat code yang rumit dan panjang.
Bootstrap juga dikenal dengan Twitter Bootstrap bisa diunduh di http://getbootstrap.com/

Gambar 1. 8 Halaman Dokumentasi bootstrap

2. Foundation
Selain menggunakan Bootstrap, ada alternative lain sebagai pilihan dalam mendesain web
responsive secara cepat yaitu foundation, dengan menggunakan framework ini kita dapat
dengan mudah membuat website dengan kerangka yang sudah disediakan dan konsisten
diberbagai browser. Bisa diunduh di http://foundation.zurb.com/develop/download.html

Gambar 1. 9 Framework Foundation

11

3. Metro UI
Metro UI merupakan sebuah framework untuk mendesain tampilan web yang responsive
secara cepat dan mudah. Metro UI mempunyai tampilan seperti Windows 8. Bisa diunduh di
http://metroui.org.ua/

Gambar 1. 10 Framework Metro UI

BAB II
MENDESAIN WEB DENGAN BOOTSTRAP

2.1 Apa itu Bootstrap ?

Bootstrap merupakan sebuah framework yang dikembangkan oleh tim Twitter yang
berfungsi sebagai kerangka kerja untuk memudahkan dan mempercepat dalam
membuat tampilan website yang responsive dan terstandar.
Bootstrap menyediakan komponen-komponen antarmuka siap pakai yang telah
dirancang sedemikian rupa untuk digunakan dalam membuat tampilan halaman
website responsive. Bootstrap juga menyediakan sarana untuk membuat layout
halaman web dengan mudah dan rapi yaitu menggunakan grid system 12 kolom.
Bootstrap dibangun dengan teknologi HTML, CSS dan Javascript yang dapat
membuat layout halaman website, table, tombol, form, navigasi, dan komponen
lainnya dalam sebuah website hanya dengan memanggil fungsi class dalam berkas
HTML.
2.2 Fitur Bootstrap
Bootstrap sudah mendukung kompatibilitas untuk hamper semua browser terbaru
saat ini. Sejak versi 2.0 bootstrap juga sudah mendukung untuk desain responsive,
ini berarti tata letak komponen dalam halaman web dapat menyesuaikan secara
dinamis dengan mempertimbangkan karakteristik dari perangkat yang digunakan
(desktop maupun mobile) untuk informasi kompatibilitas browser yang didukung
oleh bootstrap dapat dilihat pada gambar 2.1 berikut ini

Gambar 2. 1 Browser Support

12

13

2.3 Komponen Bootstrap

Bootstrap memiliki banyak komponen-komponen yang dapat digunakan dalam
membuat sebuah tampilan halaman web yang responsive. Bootstrap memiliki 3
jenis komponen, yaitu CSS Component, Base Component dan Javascript
Component.
2.3.1 CSS Component
Terdapat beberapa komponen diantaranya:

Grid System
Grid System menggunakan system grid 12 kolom yang akan memudahkan dalam
melayout sebuah halaman web, berikut contoh grid system bootstrap.

Gambar 2. 2 Grid System

Typography
Typography akan membuat tampilan teks pada halaman web menjadi rapi, mudah
dibaca, dan nyaman dilihat dengan menggunakan font dan ukuran huruf tertentu

14

Gambar 2. 3 Typography

Tables
Tampilan komponen Tabel yang memiliki style menarik sehingga data yang
ditampilkan lebih rapi.

Gambar 2. 4 Tables

15

Forms
Untuk membuat formulir inputan pada halaman web.

Gambar 2. 5 Forms

Buttons
Komponen buttons yang disediakan memiliki banyak tema warna yang menarik.

Gambar 2. 6 Buttons

16

Images
Komponen images dapat disesuaikan dengan beberapa jenis style

Gambar 2. 7 Images

2.3.2 Base Component

Membuat tampilan halaman website tampak menarik dengan tampilan yang khas
ala twitter. Komponen-komponen tersebut antara lain adalah sebagai berikut:

Glyphicons
Icon-icon yang dapat digunakan untuk mempercantik tampilan

Gambar 2. 8 Glyphicons

17

Dropdown
Dengan komponen Dropdown yang disediakan akan memudahkan jika ingin
membuat sebuah menu dropdown.

Gambar 2. 9 Dropdown

Navbar
Navbar merupakan salah satu komponen yang dapat digunakan sebagai header
navigasi pada halaman web.

Gambar 2. 10 Navbar

18

Pagination
Tampilan navigasi halaman yang sederhana.

Gambar 2. 11 Pagination

Jumbotron
Sebuah komponen yang ringan, fleksibel yang dapat digunakan untuk menampilkan
content penting dari website.

Gambar 2. 12 Jumbotron

19

Thumbnails
Thumbnails Bootstrap dirancang untuk menampilkan gambar yang terkait dengan
link.

Gambar 2. 13 Thumbnails

Alerts
Komponen Alerts dirancang untuk menampilkan tanda atau peringatan tertentu
pada halaman web dengan banyak pilihan tema warna.

Gambar 2. 14 Alerts

20

Progress Bar
Komponen Progress Bar dapat digunakan untuk menampilkan kemajuan proses
secara up to date

Gambar 2. 15 Progress Bar

List Group
List Group merupakan komponen yang fleksibel untuk menampilkan daftar dengan
konten yang dapat disesuaikan.

Gambar 2. 16 List Group

Panels
Panels untuk menampilkan daya atau konten tertentu dalam sebuah kotak.

Gambar 2. 17 Panels

21

2.3.3 Javascript Component

Tampilan dengan efek-efek dan animasi yang sangat menarik, berikut beberapa
komponen javascript Bootsatrap

Modal
Menampilkan dialog propmpt

Gambar 2. 18 Modal

Tabs
Menampilkan konten web dalam beberapa tab

Gambar 2. 19 Tab

22

Tooltip
Menampilkan informasi tambahan pada elemen tertentu misal pada sebuah teks

Gambar 2. 20 Tooltip

Popover
Menampilkan informasi tambahan dengan menampilkan popup

Gambar 2. 21 Popover

Alert
Untuk menampilkan pesan kesalahan

Gambar 2. 22 Alert

23

Collapse
Memiliki tampilan yang fleksibel, content didalamnya dapat dibuka dan ditutup

Gambar 2. 23 Collapse

Carousel
Untuk menampilkan slideshow image atau gambar yang dapat berjalan otomatis

Gambar 2. 24 Corousel

BAB III
DESAIN SEDERHANA HALAMAN WEB DENGAN
BOOTSTRAP
3.1 Tools Yang digunakan
1. File Bootstrap ( bisa diunduh di http://getbootstrap.com/ ).
2. jQuery (bisa diunduh di http://jquery.com/ ) dan cara menggunakannya
bisa lihat di http://www.ilmugrafis.com/web-jquery.php?page=caramenggunakan-jquery (Johan, 2013)
3. Text Editor
Silahkan gunakan text editor yang disukai seperti:
-

Notepad

Notepad++ ( https://notepad-plus-plus.org/ )

Sublime Text ( http://www.sublimetext.com/ )

Adobe Dreamweaver (versi Terserah aja)

3.2 Cara menggunakan Bootstrap

Pertama, download http://getbootstrap.com/ (saya menggunakan versi 3.3.4) buat
folder (nama terserah, misal praktikum). Ekstrak zip bootstrap, copy semua folder
(css, img, js) ke dalam folder praktikum. lalu buat file dengan nama index.html .

Gambar 3. 1 Folder Praktikum

24

25

Kedua, download jQuery di http://jquery.com/download/ dan letakkan file nya di

folder js seperti dibawah ini:

Gambar 3. 2 Folder js

Ketiga, isi file index.html jangan lupa untuk menambahkan !DOCTYPE di awal
karena kita akan menggunakan HTML5

Tambahkan seperti dibawah ini:

26

Penjelasan:
1. meta name="viewport" umumnya digunakan untuk mengatur tampilan
browser pada mobile device dan tablet.
2. Pada tag content="width=device-width untuk mengatur lebar tampilan
awal browser disesuaikan dengan lebar layar mobile device.
3. Pada tag initial-scale=1.0 untuk mengatur level zoom dari tampilan pada
saat ditampilkan. Semakin besar nilai scale nya semakin besar tampilannya.

3.3 Membuat Menu Dropdwon

Tambahkan link ke file bootstrap.css di folder css dalam tag <head> dan include
javascript files di paling akhir dari tag <body> , jangan di atas.
1

27

Gambar 3. 3 Menu

Kalau dikecilkan layarnya maka menjadi seperti ini:

Gambar 3. 4 Menu Dropdown

28

3.4 Membuat Bagian Banner Halaman

Tambahkan Coding berikut:

Kemudian tambahkan css <style></style> di head

Kemudian untuk merapikan tampilannya ubah navbar-static-top menjadi navbarfixed-top

Gambar 3. 5 Banner Halaman

29

3.5 Membuat Bagian Konten Halaman Web

Untuk membuat konten halaman atau isi halaman web silahkan ketikkan coding
berikut:

untuk bagian Footer, silahkan ketikkan coding berikut:

Gambar 3. 6 Hasil Akhir Halaman Web Sederhana yang Responsive

DAFTAR PUSTAKA
Johan. (2013, Maret 19). Cara Menggunakan jquery. Retrieved from
http://www.ilmugrafis.com/web-jquery.php?page=cara-menggunakanjquery
Marcotte, E. (2010, Mei 2010). Responsive Web Design . Retrieved from
http://alistapart.com/article/responsive-web-design/
Mulhim, I. (2014). Desain Web untuk Desktop dan Mobile dengan Responsive
Web Design. Palembang: maxikom.

30