Pemrograman Berorientasi Platform Responsive Web Design dengan Bootstrap

Responsive Web • Web Responsive Design (RWD) pada dasarnya menunjukkan bahwa situs web dibuat menggunakan W 3 C CSS 3 media dengan cairan proporsi berbasis grid, untuk beradaptasi tata letak dengan melihat lingkungan platform dan gambar fleksibel sebagai hasilnya, pengguna di berbagai platform dan browser akan memiliki akses ke satu sumber konten, ditata sehingga mudah dibaca dan navigasi dengan minimal mengubah ukuran, panning dan scrolling.

. . . • Istilah Responsive Web Design sendiri pertama kali diperkenalkan oleh Ethan Marcotte dalam bukunya yang berjudul “Responsive Web Design”. Dibahas mengenai 3 teknik yang digunakan dalam membangun sebuah Responsive Web Design, yaitu: flexible grid layout, flexible images dan media queries.

Pengenalan • Bootstrap adalah framework ataupun tools untuk membuat aplikasi ataupun situs web responsive secara cepat, mudah dan gratis. • Bootstrap terdiri dari CSS dan HTML untuk menghasilkan Grid Layout, Typography, Table, Form, Navigation, dan lain-lain. • Terdapat komponen UI: Transition, Dropdown, Tab, Alert, Button, dan lain-lain.

Sejarah Bootstrap • Bootstrap diciptakan oleh 2 orang programmer Twitter: Mark Otto dan Jacob Thornton pada tahun 2011. • Dikenal pertama kali dengan nama Twitter Bootstrap. • Sampai saat ini digunakan di berbagai website di seluruh dunia. • https: //bootstrapbay. com/blog/built-withbootstrap/

Contoh Web dengan Bootstrap • HBO NOW (https: //order. hbonow. com/)

. . . • Woodies Clo (https: //woodiesclo. com/)

. . . • New Relic (https: //newrelic. com/)

Struktur Boostrap • Bootstrap dapat didownload di: http: //getbootstrap. com • http: //getbootstrap. com/examples/theme/ • Versi terbaru: v 3. 3. 7 • Terdapat 3 folder: – css – fonts – js

Template Dasar HTML 5 <!DOCTYPE html> <head> <title>HTML 5 Template</title> </head> <body> <h 1>Hello World</h 1> </body> </html>

Contoh Penggunaan (1) <html> <head> <title>Latihan Layout Bootstrap</title> <link rel="stylesheet" href="css/bootstrap. min. css"> <link rel="stylesheet" href="css/css_kita. css"> </head> <body> < br> </body> </html>

Contoh Penggunaan (2) Pada bagian body tambahkan: <div class="container"> <div class="header"> <a class="judul">Judul Website</a> </div> <div class="content"> Selamat datang di website bla bla. . . </div> <div class="footer"> © 2016. Designed by xxx </div>

Contoh Penggunaan (3) Pada bagian body ganti dengan: <div class="header"> <div class="container"> <a class="judul">Judul Website</a> </div> <div class="content"> <div class="container"> Selamat datang di website bla bla. . . </div> <div class="footer"> <div class="container"> © 2016. Designed by xxx </div>

Template Dasar HTML + Bootstrap <!DOCTYPE html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1. 0">  <link href="bootstrap/css/bootstrap. min. css" rel="stylesheet" media="screen"> </head> <body> <h 1>Hello, world!</h 1> <script src="bootstrap/js/jquery. js"></script>  <script src="bootstrap/js/bootstrap. min. js"></script> </body> </html>

penjelasan • Viewport: menggambarkan alat (notebook, tablet, dekstop PC, cellular phone, dll) yang dapat menampilkan halaman web. meta viewport ini digunakan untuk mengatur tampilan browser pada mobile device / tablet. • Tag content=“width=device-width” digunakan untuk mengatur lebar tampilan awal browser sesuai dengan lebar device yang digunakan.

. . . • Tag “initial-scale=1. 0” digunakan untuk mengatur level zoom dari tampilan saat ditampilkan. • Untuk mengaktifkan fitur responsive web, tambahkan tag berikut ini: <link href = "bootstrap/css/bootstrapresponsive. min. css" rel="stylesheet">

Grid dan Layout • Grid adalah struktur 2 dimensi yang terdiri dari sumbu horizontal dan vertikal (baris dan kolom). • Dalam dunia web digunakan sebagai metode efektif dalam menghasilkan layout yang konsisten menggunakan HTML dan CSS. • Sistem grid pada Bootstrap merupakan variasi dari 960 Grid System lebar grid 940 px dan jumlah maksimal kolom 12 pada layar lebar (dekstop). • Kelebihan: sintaks mudah dan bisa responsive.

Sistem Grid pada Bootstrap

Grid Option • Grid System Bootstrap dapat bekerja berbagai device yang terbagi 4 device yaitu: - Extra Small (col-xs) : Smarthphone < 768 px - Small (col-sm) : Tablet >= 768 px - Medium (col-md) : Desktop >= 992 px - Large (col-lg) : Large Desktop > =1200 px

Fixed dan Fluid Grid System • Fixed Grid System terdiri dari 12 kolom dengan lebar container 940 px. Ukuran setiap kolom adalah 60 px dengan offset 20 px. • Jika fitur responsive diaktifkan, maka lebar akan menjadi 724 px atau 1170 px (tergantung viewport di mana halaman ditampilkan). • Pada lebar di bawah 724 px (layar smartphone / tablet), kolom akan otomatis menjadi “fluid” yang mengisi seluruh lebar viewport dan kolom akan bertumpuk secara vertikal.

Grid Dasar • Bootstrap menggunakan kelas CSS. row untuk menghasilkan baris horizontal dan kelas CSS. spanx untuk membuat kolom, di mana nilai x pada. spanx menunjukkan banyaknya kolom yang ditampilkan. • Nilai x = 1 12 kolom, x = 2 6 kolom, dst. • Contoh: <div class="row"> <div class="span 4"><p> Ini kolom ke 1, Class span 4</p></div> <div class="span 4"><p> Ini kolom ke 2, Class span 4</p></div> <div class="span 4"><p> Ini kolom ke 3, Class span 4</p></div>

Fixed Layout dan Fluid Layout • Fixed layout adalah lebar kolom di-set 940 px, bisa bersifat responsive atau tidak. • Untuk menghasilkan fixed layout, digunakan satu div yang digunakan sebagai wrapper (pembungkus seluruh elemen) dengan class. container.

. . . <style>. container{margin-top: 10 px; background-color: #ccc; textalign: center; } p{margin-top: 10 px; font-size: 16 px; }</style> </head> <body> <div class="container"> <p >Ini adalah fixed layout dengan lebar 940 px menggunakan class '. container'</p> </div> </body>

Fixed Layout + Responsive

Cara Kerja Fitur Responsive Bootstrap • Metode untuk menampilkan halaman web pada berbagai macam device dan ukuran layar, dalam CSS 3 disebut dengan Media Queries. Langkahlangkah Media Queries dalam Bootstrap: – Mengubah lebar kolom dalam grid. – Menumpuk elemen halaman di manapun ketika dibutuhkan. – Membesarkan atau mengecilkan (resizing) judul-judul dan teks pada halaman web disesuaikan dengan devicenya.

Perubahan Layar pada Bootstrap Device Lebar Layout Lebar Kolom Jarak Kosong antar kolom Display besar 1200 px ke atas 70 px 30 px Default 980 px ke atas 60 px 20 px Potrait tablet 768 px ke atas 42 px 20 px Cellular phone tablet 767 px ke bawah Fluid kolom (lebar tidak tetap) Cellular phone 480 px ke bawah Fluid kolom (lebar tidak tetap)

Tipografi dengan Bootstrap • Typography adalah seni huruf. • Bootstrap menggunakan jenis huruf (tipografi) Helvetica Neue, Helvetica, Arial dan Sans Serif sebagai standarnya. • Heading • Paragraph • List (ordered, unordered, description list) • dll

. . . • Text align <h 4 class="text-left">Text Alignment</h 4> <p class="text-left">Kalimat ini rata di kiri. </p> <p class="text-center" >Kalimat ini rata di tengah. </p> <p class="text-right">Kalimat ini rata di sebelah kanan. </p>

. . . • Addresses <address> <strong>Universitas Kristen Satya Wacana</strong> Jl. Diponegoro 52 -60 Salatiga, Jawa Tengah <abbr title="Phone">P: </abbr> 0298 -321212 </address> <strong>Informasi: </strong> <a href="mailto: #">info@uksw. edu</a> </address>

. . . • List <h 3>Favorite Outdoor Activities</h 3> <ul class="unstyled"> <li>Backpacking in Yosemite</li> <li>Hiking in Arches <ul> <li>Delicate Arch</li> <li>Park Avenue</li> </ul> </li> <li>Biking the Flintstones Trail</li> </ul>

Tabel <table class="table"> <caption> Data User </caption> <thead> <tr> <th>#</th> <th align="center">Nama</th> <th align="center">User ID</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Budi</td> <td>hhalat</td> </tr>

. . . <tr class="success"> <td>2</td> <td>Susi</td> <td>eesula</td> </tr> <td>3</td> <td>Eva</td> <td>mmridh</td> </tr> <tr class="info"> <td>4</td> <td>Solikin</td> <td>ffazza</td> </tr>

Form <form> <fieldset> <legend>Legend</legend> <label>Label name</label> <input type="text" placeholder="Type something"> <span class="help-block">Example block-level help text here. </span> <label class="checkbox"> <input type="checkbox"> Check me out </label> <button type="submit" class="btn">Submit</button> </fieldset> </form>

bersambung. . .