Belajar Menggunakan Jumbotron Part 5 Bootstrap 4 - Bewok Tekno

STAY HUNGRY STAY FOOLISH

Breaking

Home Top Ad

Thursday, March 7, 2019

Belajar Menggunakan Jumbotron Part 5 Bootstrap 4


bewoksatukosong.com | Hallo semuanya balik lagi dengan om bewok, kali ini om bewok akan melanjutkan Tutorial Mengenai Bootstrap 4 yaitu mengenai JUMBOTRON. Jumbotron adalah fitur yang disediakan oleh bootstrap untuk menampilkan sebuah informasi di halaman utama website.

Mari kita buat Tutorial-Nya

Ada 2 cara dalam pembuatan jumbotron.Tapi sebelum ngoding kita buat folder terlebih dahulu seperti tutorial sebelumnya bernama Part 5 Jumbotron Bootstrap 4 seperti gambar dibawah ini

Gambar 1. Buat Folder Part 5 Jumbotron Bootstrap 4
Jangan lupa untuk membuat file latihan1.html

Untuk kodingan-Nya seperti dibawah ini ya
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Popup Boostrap 4</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  </head>
  <body>  
      <div class="jumbotron jumbotron-fluid bg-dark">
        <div class="container">
          <h1 class="display-4  text-light">Jumbotron menggunakan fluid</h1>
          <p class="lead text-light">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
        </div>
      </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </body>
</html>

Hasil-Nya seperti gambar dibawah ini ya
Gambar 2. Hasil latihan2.html
Untuk cara ke-2 kita buat file terlebih dahulu namanya latihan2.html
Kodingan-Nya seperti dibawah ini ya
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Popup Boostrap 4</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  </head>
  <body>
    
      <div class="jumbotron">
          <h1 class="display-4">Hello, world!</h1>
          <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
          <hr class="my-4">
          <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
          <p class="lead">
            <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
          </p>
      </div>
    
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </body>
</html>
Hasil-nya seperti dibawah ini ya
Gambar 3. Hasil dari latihan2.html
Perbedaan latihan1 dan latihan2 apa sih om ? nah om juga ga ngerti hehe bercanda.

Jadi intinya kalau kamu ingin width nya full dan 
kotak (tidak melengkung /round courner) kamu bisa menambahkan  jumbotron fluid.
 
Tapi kalau kamu suka round courner kamu menambahkan jumbotron.

Kalian harus explore sendiri biar lebih paham
 
Selanjutnya kita praktekin di real, sebenarnya jumbotron suka dipake buat apa sih, nah kali ini kita akan membuat pencarian fitur menggunakan jumbotron dan akan di tambahkan juga pada template bootstrap yang part sebelumnya kita buat. oke kita buat file lagi bernama latihan3.html

Kodinganya seperti dibawah ini ya
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Popup Boostrap 4</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <style>
      .row {
        background: #2980b9;
        color: #fff;
      }

      h2  {
        font-family: 'Times New Roman', Times, serif;
      }
      .btn {
        border: 1px solid #fff;
      }
    </style>
  </head>
  <body>
      <div class="jumbotron jumbotron-fluid bg-dark">
        <div class="container">
          <h1 class="display-4 text-center text-light">Pencarian Artikel</h1>
          <p class="lead text-center text-light">Kamu bisa mencari artikel apapun yang kamu mau.</p>
          <div class="input-group mb-3">
              <input type="text" class="form-control" placeholder="Cari Artikel" aria-label="Recipient's username" aria-describedby="basic-addon2">
              <div class="input-group-append">
                <button class="btn btn-dark" id="search">Search</button>
              </div>
            </div>
        </div>
      </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </body>
</html>
Maka hasilnya seperti dibawah ini ya
Gambar 4. Membuat Fitur pencarian menggunakan jumbotron
Oke selanjutnya kita akan melanjutkan Template Bootstrap yang kita buat sebelum-Nya pada Tutorial Part 4. Jadi kali ini kita akan menambahkan Jumbotron yang berfungsi untuk pencarian artikel. Mungkin pembaca baru belum mengerti maksudnya apa sih om ?, kalau belum mengerti, kalian harus baca dari Tutorial Boostrap dari awal ya karena tutorial ini akan berlanjut terus, jadi ketika sampai final, kalian sudah bisa membuat template yang real menggunakan bootstrap 4 walaupun masih standart bukan seperti theme seperti di theme forest. 

Om bewok kasih Tutorial Daftar Bootstrap-Nya ya.
Daftar Tutorial Bootstrap 4

Kodingan-Nya seperti dibawah ini ya
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Grid Bootstrap 4</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <style>
      h2  {
        font-family: 'Times New Roman', Times, serif;
      }
      .btn {
        border: 1px solid #fff;
      }
    </style>
  </head>
  <body>
      <nav class="navbar navbar-expand-lg navbar navbar-dark bg-dark">
        <a class="navbar-brand" href="#">bewoksatukosong</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto my-2 my-lg-0">
              <li class="nav-item active">
                  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#">About us</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Blog</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Contact us</a>
              </li>
              <li class="nav-item mr-2">
                  <a class="nav-link btn btn-dark" href="#" tabindex="-1" data-toggle="modal" data-target="#kampret">Signup</a>
              </li>
              <li class="nav-item mr-2">
                  <a class="nav-link btn btn-dark" href="#" tabindex="-1" data-toggle="modal" data-target="#free">Login</a>
              </li>
          </ul>
        </div>
      </nav>
      <div class="jumbotron jumbotron-fluid bg-dark">
        <div class="container">
          <h1 class="display-4 text-center text-light">Pencarian Artikel</h1>
          <p class="lead text-center text-light">Kamu bisa mencari artikel apapun yang kamu mau.</p>
          <div class="input-group mb-3">
              <input type="text" class="form-control" placeholder="Cari Artikel" aria-label="Recipient's username" aria-describedby="basic-addon2">
              <div class="input-group-append">
                <button class="btn btn-dark" id="search">Search</button>
              </div>
            </div>
        </div>
      </div>

    <div class="container-fluid">
      <!-- Example row of columns -->
      <div class="row p-3 bg-light text-dark">
        <div class="col-md-4">
          <h2>Cara Install Bootstrap 4 Part 1</h2>
          <p>bewoksatukosong.com | Untuk pelajaran pertama yang perlu dilakukan adalah Install Boostrap 4. Ada beberapa cara untuk menginstall boostrap 4. Tapi kali ini om bewok akan memberikan cara install-Nya yang sudah sering digunakan oleh para developer. Ada 2 cara untuk install boostrap 4. 
              Offline : kamu tidak membutuhkan internet untuk meload website tersebut.</p> 
          <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
          <h2>Cara Menambahkan Emoji</h2>
          <p>bewoksatukosong.com | Emoji sudah menjadi hal yang umum bagi pengguna handphone android iphone, dan laptop apple. Tapi ternyata windows juga tidak mau kalah untuk mengeluarkan       emoji. om bewok tidak tau apakah ini resmi atau tidak dalam windows, karena dalam pengunaan ini bener-bener
              tricky. kita ga perlu berlama - lama lagi mari kita langsung saja coba
               </p>
          <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
          <h2>Cara Install Codeigniter 2018</h2>
          <p>bewoksatukosong.com | Hallo semuanya balik lagi dengan om bewok, kali ini om bewok akan share ke kamu "Cara Install Codeigniter 2018", gampang banget untuk install codeigniter. oke mari kita mulai cara install nya
          Kamu kunjugi website https://www.codeigniter.com/download.</p>
          <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
        </div>
      </div>
      <hr>
    </div> <!-- /container -->


    <!-- Modal -->
    <div class="modal fade" id="kampret" tabindex="-1" role="dialog" aria-labelledby="kampret123" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="kampret123">Daftar</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                      <label for="exampleInputEmail1">Email address</label>
                      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
                      <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">Username</label>
                        <input type="text" class="form-control" id="username" aria-describedby="emailHelp" placeholder="Enter username">
                      </div>
                    <div class="form-group">
                      <label for="exampleInputPassword1">Password</label>
                      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                    </div>
                    <div class="form-check">
                      <input type="checkbox" class="form-check-input" id="exampleCheck1">
                      <label class="form-check-label" for="exampleCheck1">Check me out</label>
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                  </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Daftar</button>
            </div>
          </div>
        </div>
      </div>

     <!-- Modal -->
     <div class="modal fade" id="free" tabindex="-1" role="dialog" aria-labelledby="free123" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="free123">Login</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                      <label for="exampleInputEmail1">Email address</label>
                      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
                      <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                    </div>
                    <div class="form-group">
                      <label for="exampleInputPassword1">Password</label>
                      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                    </div>
                    <div class="form-check">
                      <input type="checkbox" class="form-check-input" id="exampleCheck1">
                      <label class="form-check-label" for="exampleCheck1">Check me out</label>
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                  </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Login</button>
            </div>
          </div>
        </div>
      </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </body>
</html>
Maka hasilnya akan seperti gambar dibawah ini
Gambar 5. Hasil Lanjutan dari Tutorial sebelumnya

Dengan melihat hasil template diatas berarti kita sudah membuat navigation bar, jumbotron, grid layout dan popup menggunakan bootstrap

Selanjutnya kita akan belajar mengenai Card Pada Bootstrap 4

Kalau mau melihat dari awal kamu bisa melihat Daftar Tutorial Bootstrap 4 dibawah ini dan Kalau kamu ingin melihat Source Kode-Nya bisa di lihat dibawah ini juga ya

Daftar Tutorial Bootstrap 4
Source Kode Bootstrap 4

No comments:

Post a Comment