## RANCANG BANGUN RESPONSIVE WEB LAYOUT DENGAN MENGGUNAKAN BOOTSTRAP FRAMEWORK

## Ahmad Zakir
Teknik Informatika Sekolah tinggi Teknik Harapan Medan Jl.HM Joni No 70 A Medan 20152 Indonesia
suratzakir@gmail.com
Abstrak —  Internet  sebagai  salah  satu  media  informasi  yang  dapat  diakses  setiap  orang  kapan saja  dan  dimana  saja,  saat  ini  internet  telah  menjadi  salah  satu  kebutuhan  masyarakat  dalam memperoleh informasi, hal ini didukung oleh perkembangan berbagai perangkat seperti, tablet dan smartphone yang semakin memudahkan banyak orang untuk mengakses informasi. Untuk mendukung  berbagai  perangkat  dalam  mengakses  informasi  (website)  melalui  internet  maka aplikasi  harus  menyesuaikan  dengan  perangakat  yang  digunakan  terutama  dalam  hal pengelolaan  layout  web.  Web  layout  merupakan  salah  satu  bagian  terpenting  yang  harus direncanakan  dengan  baik  agar  website  dapat  berjalan  dengan  baik,  cepat  dan  dapat  dengan mudah  diakses  oleh  berbagai  macam  browser  serta  dapat  berjalan  diberbagai  macam  flatform. Bootstrap  merupakan  sebuah  framework  yang  dapat  menyelesaikan  permasalahan  dalam mendesain sebuah layout web yang responsive.

## Keywords
— Web Responsive, Bootstrap, Teknologi Web Desain.

## I. PENDAHULUAN
Teknologi  informasi  saat  ini  berkembang  dengan pesat  di  berbagai  bidang  kehidupan  manusia. Penggunaan  internet  saat  ini  dirasakan  manfaatnya dalam berbagai bidang dan seluruh lapisan masyarakat khusunya  teknologi  web.  Tantangan  baru  teknologi web  khususnya  untuk  para  penyedia  informasi  adalah bagaimana  menyajikan  informasi  dengan  cepat,  tepat dan mudan dijangkau oleh seluruh lapisan masyarakat serta  dapat  diakses  oleh  berbagai  media  dan  dengan berbagai flatform.
Menurut  lembaga  riset  pasar  e-Marketer,    populasi pengguna  internet  di  Indonesia  mencapai  83,7  juta orang  pada  2014.  Angka  yang  berlaku  untuk  setiap orang  yang  mengakses  internet  setidaknya  satu  kali setiap  bulan  itu  mendudukkan  indonesia  di  peringkat ke-6  terbesar  di  dunia  dalam  hal  jumlah  pengguna internet.  Pada  2017,  e-Marketer  memperkirakan pengguna  internet  di  Indonesia  bakal  mencapai  112 juta  orang,  mengalahkan  Jepang  di  peringkat  ke-5 yang pertumbuhan jumlah  pengguna  internetnya lebih lamban.  Pada  tahun  2018,  diperkirakan  sebanyak  3,6 miliar  manusia  di  bumi  bakal  mengakses  internet setidaknya sekali tiap satu bulan.
Rancang  bangun  web  layout  merupakan  salah  satu faktor  utama  yang  harus  direncanakan  dengan  baik agar  website  dapat  berjalan  dengan  baik,  cepat  dan dapat  diakses  oleh  berbagai  macam  browser  serta dapat  berjalan  diberbagai  macam  flatform.  Bootstrap merupakan sebuah framework yang dapat menyelesaikan  permasalahan  dalam  mendesain  web. Slogan dari framework ini adalah “Sleek, intuitive, and powerful  front-end  framework  for  faster  and  easier web development”, yang berarti kita dapat mendesain sebuah  website  dengan  lebih  rapi,  cepat  dan  mudah.
Selain  itu  Bootstrap  juga  responsive  terhadap  banyak platform,  artinya  tampilan  halaman  website  yang menggunakan  Bootstrap  ini  akan  tampak  tetap  rapi, baik versi mobile maupun desktop.

## II. METODE DAN PERANCANGAN
Twiter Boostrap merupakan kerangka font-end yang berfungsi untuk pengembangan responsive web layout lebih  cepat  dan  lebih  mudah.  Dalam  merancang bangun responsive  web  layout ada  beberapa  hal  yang harus  diketahui  didalam  penggunaan Framewok Bootstrap yaitu:
1. Mobile first approach Framework  bootstrap fokus  utama  terhadap pendekatan layout berbasis ponsel
2. Browser support
Bootstrap  didukung  oleh  semua browser populer seperti Firefox, Google Chrome, Internet Explorer, Opera, Safari dan browser-browser lainnya.
3. Knowledge to get started HTML dan CSS merupakan  pengetahuan  dasar yang  hasus  dimiliki  agar  dapat  menggunakan Framework Bootstrap .
4. Responsive desain Bootsraps  responsive  CSS yang  dibangun  dapat menyesuaikan  tapilan  layar  desktop,  tablet  dan mobiles.
Beberapa  paket  yang  terdapat  didalam framework bootstrap yaitu:
1. Scaffolding Struktur Framework  Bootstrap menyediakan struktur  dasar  dengan Grid  System , link  style dan background .
2. CSS ( Cascading Style Sheets ) Framework  Bootsrap menampilkan  pengaturan CSS secara global, elemen dasar HTML ditata dan
ditingkatkan dengan extensible class dan advanced grid  system . 3. Components Bootstrap memiliki  banyak  komponen  yang  dapat digunakan  kembali  seperti  penggunaan  navigasi, dropdowns, alert dan lain-lain.
4. Javascript plugins Bootstrap juga  memilikai  banyaka plugin  jQuery yang  dapat  digunakan  dan  dapat  dimodifikasi sesuaikan dengan kebutuhan.
5. Customize Komponen-komponen yang terdapat Bootstrap dan plugin  jQuery dapat  dirubah  atau  dikembangkan kedalam versi terbarunya.

## A. Ruang Lingkup Struktur File
Terdapat  beberapa  struktur  file  didalam Bootstrap framework yaitu :
1. Precompiled Bootstrap Berikut  ini  adalah  struktur  file  /  direktori  pada Framework Bootsrap :
2. Bootstrap Source Code
Berikut  ini  adalah  source  code  struktur  file  /  direktori pada Framework Bootsrap :

## B. Bootstrap Grid System
Grid  System  pada bootstrap  merupakan  pengaturan ukuran  yang  di  tampilkan  pada  monitor.  grid  system berfungsi untuk membuat pengaturan untuk lebar dari masing-masing  komponen  web  sehingga  kita  dapat dengan  bebas  mengatur  ke-responsivan  halaman website  yang  kita  buat  dengan  bootstrap.  Bootstrap memiliki  12  grid.  yang  nantinya  kita  akan  dapat menggunakan  class  berikut  ini  untuk  mengatur keresponsive an halaman website dengan mengaturnya menggunakan  12  grid  bootstrap.  Bootstrap  memiliki beberapa class grid yang masing-masing nya memiliki kegunaannya masing-masing.
Berikut ini Bootstrap Grid System :
1.  col-lg-*
Digunakan  untuk  mengatur  grid  pada  monitor komputer yang berukuran besar.
2.  col-md-*
Digunakan untuk mengatur grid pada layar monitor komputer yang berukuran sedang.
3.  col-sm-*
Digunakan untuk mengatur grid pada monitor yang berukuran tablet.
4.  col-xs-*
Digunakan  untuk  mengatur  grid  untuk  ukuran handphone.
<!DOCTYPE html>
<html> <head>
<title>Bootstrap Part 16 : Mengenal Grid System Bootstrap </title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script><style type="text/css"> div{ background: #2ea3f2;
text-align: center; border: 1px solid #fff; padding: 10px; color: #fff; } </style> </head> <body> <center><h1>Mengenal Grid System Bootstrap | www.malasngoding.com</h1></center>
<br/> <div class="col-md-12">.col-md-12</div> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-3">.col-md-3</div> <div class="col-md-3">.col-md-3</div> <div class="col-md-3">.col-md-3</div> <div class="col-md-3">.col-md-3</div> <div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div> <div class="col-md-2">.col-md-2</div> <div class="col-md-2">.col-md-2</div> <div class="col-md-2">.col-md-2</div> <div class="col-md-2">.col-md-2</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </body> </html>

## C. HTML Template
Berikut  ini  template  HTML  dasar  menggunakan Bootstrap akan terlihat seperti dibawah ini :

## III. HASIL DAN PEMBAHASAN
A. Bootstrap Grid Option
Tabel  berikut  merangkum  aspek  bagaimana  sistem grid Bootstrap bekerja di beberapa perangkat:
TABEL I B OOTSTRAP G RID S ISTEM

## B. Responsive Utilities
Bootstrap  memberikan  beberapa  bantuan  untuk pengembangan  perangkat  lunak,  ini  dapat  digunakan untuk  menampilkan  dan  menyembunyikan  konten didalam  perangkat  melalui  permintaan  media  yang dikombinasikan  dengan  perangkat  yang  miliki  layar berukuran besar, kecil dan menengah. :
TABEL II RESPONSIVE UTILITIES Classes Devices .visible-xs .visible-sm Extra small (less than 768px) visible Small (up to 768 px) visible .visible-md Medium (768 px to 991 px) visible .visible-lg Larger (992 px and above) visible .hidden-xs Extra small (less than 768px) hidden .hidden-sm Small (up to 768 px) hidden .hidden-md Medium (768 px to 991 px) hidden .hidden-lg Larger (992 px and above) hidden
Gbr.2 Responsive Design Illustration

## IV. KESIMPULAN
Kesimpulan  yang  penulis  ambil  dari  pembahasan diatas adalah  sebagai berikut : 1.  Kerangka framework Bootstrap dibangun menggunakan  Less,  sebuah  teknologi  CSS  yang sederhana  dan  mudah  untuk  digunakan.  Less  juga menawarkan lebih banyak kekuatan dan fleksibilitas dari CSS pada umumnya. Dengan Less, pengembang  dapat  mengakses  dengan  mudah informasi  dan  fungsi  warna,  variabel,  dan  operasi penggunaan.
2.  Responsive  layout  dan  12  column  grid  system. Dengan responsive layout maka aplikasi web yang didesain  dengan  menggunakan  Bootstrap    akan langsung  menyesuaikan  dengan  lebar  dari  media perambahnya.  Sehingga  tampilan  web  akan  tetap rapih  dibuka  dengan  media  apapun  baik  itu handphone, tablet, laptop ataupun PC desktop. Jadi, tampilan tidak akan terganggu dengan resolusi dari layar. Sedangkan 12-column grid system sederhananya  adalah  Bootstrap  akan  membagi lebar layar menjadi 12 bagian. Sehingga pembagian  kolom  per  kolom  tampilan  web  akan menjadi lebih mudah
R EFERENSI
[1] Alatas,  Husein.  2013.  Responsive  Web  Design  dengan  PHP dan Bootstrap. Yogyakarta: Loko Media
[2] Birminggham.  2013.  Responsive  Web  Design  by  Example Beginner's Guide. UK: Packt Publishing Ltd.
[3] Jonathan Fielding. 2014. Beginning Responsive Web  Design with HTML5 and CSS3. New York: Apress Media
[5]      http://www.tutorialspoint.com/bootstrap/index.html
[6]      http://getbootstrap.com/
[7]      http://tekno.kompas.com/read/2014/11/24/07430087/ Pengguna.Internet.Indonesia.Nomor.Enam.Dunia