modul praktikum web bootstrap
DESCRIPTION
Praktikum WEB 1 UNISKA BanjarmasinTRANSCRIPT
-
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.