Merubah tampilan dengan getbootstrap

Setelah menyelesaikan praktek 3 yang membahas controller, kita sudah dapat melihat hasil program web yang kita buat, tetapi tentu saja tampilan program web yang kita lihat saat ini sangat sederhana sekali, karena itu kita perlu merapikan dan mempercantik tampilan web yang kita buat, untuk itu pada modul ini kita akan menggunakan modul getbootstrap untuk memperbaiki penampilan web yang kita buat

Membuat tampilan dengan getbootstrap

Memanggil modul javascript getbootstrap

  • Jalankan program sublime
    • Pilih menu File, Open folder, pilih folder c:\sites\intomyidea
  • Memanggil modul javascript agar nantinya bisa digunakan oleh program yang kita buat
    • dengan menggunakan program sublime, buka file app/assets/javascripts/application.js
    • hapus isinya dan ganti dengan program berikut
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery.ui.datepicker
//= require jquery.ui.autocomplete
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
  • pada program diatas, kita memanggil salah satunya modul bootstrap yang bernama bootstrap-sprockets

Memanggil modul css getbootstrap

  • dengan sublime, pilih menu File, New
    • lakukan copy - paste pada program css dibawah ini
    • setelah copy - paste, tekan ctrl + S untuk menyimpan
    • simpan di lokasi app/assets/stylesheets/custom.css.scss
/* 1. Import bootstrap */

@import "bootstrap-sprockets";
@import "bootstrap";

/* Main Variable color */
/* sumber ide warna diambil dari web www.colourlovers.com */
/* link: http://www.colourlovers.com/palette/49963/let_them_eat_cake */

$header-background-color: #774F38; /* header */
$navbar-brand-color: #C5E0DC;      /* brand */
$navbar-menu-color: #F1D4AF;       /* right menu color no hover */
$navbar-menu-hover-color: #E08E79; /* hover */

$content-color: #ECE5CE;           /* main content + enable important */

$footer-background-color: #774F38; /* footer */
$footer-text-color: #F1D4AF;

$icon-bar-color: #FFFFFF;

/* Font setting */

$basic-font-family: 'Verdana';

/* main setting */

html,body {
  overflow-x: hidden; /* Prevent scroll on narrow devices */ 
}

body {
  padding: 50px 0;  /* top padding below navbar */
  color: $text-color;
  font-family: $basic-font-family;
  font-size: 1.6em;  /* basic font size */
  background: $content-color !important; 
}


/* navbar header and footer */

#header { 
  background: $header-background-color; 
}

#footer {
  color: $footer-text-color;
  background: $footer-background-color;
}

/* navbar brand */

.navbar-default .navbar-brand { 
  font-size: 24px;
  font-family: 'UbuntuBold';
  letter-spacing: 3px;
  color: $navbar-brand-color;
}

/* navbar link with nesting sass */

.navbar-default .navbar-nav > li > a {
    color: $navbar-menu-color;
    &:hover {     
      color: $navbar-menu-hover-color;
    }
    &:focus {
      color: $navbar-brand-color;
    }
}


.navbar-default .navbar-toggle .icon-bar {
    background-color: $icon-bar-color;
}
  • pada program diatas, kita melakukan import file css bootstrap

Merubah tampilan Layout halaman

  • dengan sublime, buka File, app/views/layouts/application.html.erb
    • lakukan copy - paste dari ketikan dibawah ini
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

  <title><%= yield(:title) %></title>
  <%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
  <%= csrf_meta_tags %>
  </head>

  <body>
    <div id="header" class="navbar navbar-fixed-top navbar-default" role="navigation">
      <div class="container-fluid">
        <!-- menu for mobile -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-megadropdown-tabs">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">INTO MY IDEA</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-megadropdown-tabs">
          <!-- navbar for left menu 
            <ul class="nav navbar-nav">
              <li><a href="#">Menu 1</a></li>
              <li><a href="#">Menu 2</a></li>
          </ul> -->

          <ul class="nav navbar-nav navbar-right">
              <li><%= link_to "IDEA",    root_path %></li>
              <li><%= link_to "HELP",    "" %></li>
              <li><%= link_to "CONTACT",    "" %></li>
              <li><%= link_to "REGISTER", "" %></li>
              <li><%= link_to "LOGIN", "" %></li> 
          </ul> <!-- navbar-right  -->
        </div><!-- end navbar-collapse -->
      </div> <!-- end fluid -->
    </div> <!-- end navbar -->

    <!-- Content web -->
    <div id="content" class="container">
      <% flash.each do |key, value| %> <!-- start flash message... -->
        <div class="alert alert-<%= key == "success" ? "success" : "danger"  %>">
          <%= value %>
        </div>
      <% end %> <!-- end flash message -->

      <%= yield %>

    </div><!-- end Content -->

    <!-- footer
    <div id="footer" class="text-center navbar navbar-inner navbar-fixed-bottom">
      &copy; kelasdigital.com <%= Date.today.year %>
    </div>
    -->

  </body>
</html>
  • klik start, ketik command , klik command prompt with ruby
  • cd intomyidea
  • jalankan servernya dengan mengetik rails server
  • buka browser dan ketik localhost:3000
    • bila anda mendapatkan hasil web dengan berwarna, berarti css anda berhasil
  • langkah selanjutnya anda melakukan test javascript
    • geser mouse pada setiap menu, bila berubah warna berarti ok
    • perkecil tampilan browser, bila menu bisa melipat sendiri sehingga di sudut kanan atas
    • hanya tampak 3 garis saja berarti fasilitas responsive dari bootstrap juga berhasil dengan baik.