• Tidak ada hasil yang ditemukan

Modul Praktikum WEB Bootstrap

N/A
N/A
Protected

Academic year: 2021

Membagikan "Modul Praktikum WEB Bootstrap"

Copied!
34
0
0

Teks penuh

(1)

Membuat Website Sederhana dengan

Responsive Web Design

Nur Alamsyah M Kom

FAKULTAS TEKNOLOGI INFORMASI UNIVERSITAS ISLAM KALIMANTAN (UNISKA)

MUHAMMAD ARSYAD ALBANJARY BANJARMASIN

(2)

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

(3)

iii

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

(4)

iv 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

(5)

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

(6)

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.

(7)

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

Tablet (Potrait) Smartphone (Potrait)

(8)

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

Tablet (Potrait) Smartphone (Potrait)

(9)

3. http://teixido.co/

Gambar 1. 4 Tampilan Website Teixido

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

(10)

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.

(11)

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

(12)

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.

(13)

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.

(14)

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

(15)

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/

(16)

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

(17)

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

(18)

Gambar 2. 3 Typography

Tables

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

(19)

Forms

Untuk membuat formulir inputan pada halaman web.

Gambar 2. 5 Forms

Buttons

Komponen buttons yang disediakan memiliki banyak tema warna yang menarik.

(20)

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

(21)

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.

(22)

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.

(23)

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.

(24)

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.

(25)

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

(26)

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

(27)

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

(28)

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 .

(29)

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

(30)

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

2

(31)

Gambar 3. 3 Menu

Kalau dikecilkan layarnya maka menjadi seperti ini:

(32)

3.4 Membuat Bagian Banner Halaman Tambahkan Coding berikut:

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

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

(33)

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:

(34)

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.

Gambar

Gambar 1. 1 Beberapa ukuran layar yang ada (sumber gambar: http://line25.com)
Gambar 1. 2 Tampilan Website Okezone
Gambar 1. 3 Tampilan Website stephencaver
Gambar 1. 4 Tampilan Website Teixido
+7

Referensi

Dokumen terkait

Identifikasi sistem dilakukan saat kondisi mesin pada kondisi idle dengan mengubah variasi sinyal masukan. Pada percobaan ini, terdapat tiga variasi sinyal masukan yaitu

Atxagaren kasuan itzulpengintza ikasketen eta lite- ratura konparatuaren arteko lotura ondo ikus daiteke, harentzat hain justu itzulpena delako literatura nazionalaren eredu

(1) Apabila terjadi kelambatan atau kegagalan oleh salah satu pihak untuk memenuhi kewajiban sebagaimana tercantum dalam perjanjian ini, yang disebabkan oleh karena keadaan

bahwa sehubungan dengan penataan organisasi perangkat daerah, maka Keputusan Walikota Surabaya Nomor 47 Tahun 2003 tentang Nomor Kode Lokasi dan Nomor Kode Barang Daerah

Hasil penelitian yang dilakukan penulis bahwa (X 2 ) self efficacy berpengaruh secara positif dan signifikan terhadap kinerja karyawan PT PLN (Persero) Area Manado, dengan

Kesimpulan dari penelitian ini adalah penerapan Active Learning melalui metode Predict, Observe, Explain (POE) disertai media Teka Teki Silang (crossword puzzle) dapat

Pertama, jika dilihat dari aspek kegiatan memulai pembelajaran, dari tabel 2 terlihat bahwa nilai keempat guru yang menjadi subjek penelitian perolehan skornya berturut-turut 13, 14,

Kepemimpinan manajerial merupakan suatu proses pengarahan dan pemberian pengaruh pada kegiatan dari sekelompok anggota yang saling berhubungan tugasnya (Handoko 2001 : 291),