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

ii

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

iii

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

iv

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

1

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-web-

design/ (Marcotte, 2010)

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

6

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/

7

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

12

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

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

24

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=cara-

menggunakan-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

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 dan include

javascript files di paling akhir dari tag , jangan di atas.

1

2

3

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 di head

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

fixed-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

30

DAFTAR PUSTAKA

Johan. (2013, Maret 19). Cara Menggunakan jquery. Retrieved from

http://www.ilmugrafis.com/web-jquery.php?page=cara-menggunakan-

jquery

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.