Belajar Menggunakan Pop Up Atau Modal Part 4 Bootstrap 4 - Bewok Tekno

STAY HUNGRY STAY FOOLISH

Breaking

Home Top Ad

Wednesday, March 6, 2019

Belajar Menggunakan Pop Up Atau Modal Part 4 Bootstrap 4


bewoksatukosong.com | Halo semuanya balik lagi dengan om bewok, kali ini om bewok akan melanjutkan Tutorial Bootstrap 4 mengenai Popup atau di sebut juga dengan Modal atau Dialog atau apapun lah namanya. 

Oke Langsung saja kita mulai pelajarannya

Seperti biasa kamu buat folder baru dengan nama Part 4 Popup Bootstrap 4 dan buat file bernama latihan1.html

Gambar 1. Buat Folder Part 4 Popup Bootstrap 4
Langsung kita mulai kodinganya, 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>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary ml-5" data-toggle="modal" data-target="#exampleModal">
      Kursus Codeigniter
    </button>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Penawaran Menarik</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="col-md-12">
                <h1 class="mb-4">Waktunya upgrade skill !</h1>
                <img src="ebook.jpg" alt="ebook ci">
                <h3 class="text-center mt-4">Hanya 45 ribu</h3>
                <h3 class="text-center mt-4">Hub 021-85765041</h3>
            </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Jangan Tampilkan Lagi</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal">Ya Saya Mau</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>

Hasil seperti gambar dibawah ini

Gambar 2. Klik Button Kursus Codeigniter

Gambar 3. Ketika Button Kursus Codeigniter di klik
Oke selanjutnya kita buat file baru bernama latihan2.html, kali ini kita membuat 2 button modal atau popup, om bewok di sini mengajarkan agar popup nya tidak sama munculnya, jadi ada beberapa id atau class yang harus diganti dari default-Nya.

Kodinganya seperti dibawah ini 
asdasd
<!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>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary ml-5" data-toggle="modal" data-target="#exampleModal">
      Bayar
    </button>

    <button type="button" class="btn btn-primary ml-5" data-toggle="modal" data-target="#free">
        Gratis
      </button>
      
      <!-- Gratis-->
      <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">Belajar Codeigniter Gratis</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <h3>
                <a href="https://www.bewoksatukosong.com/">Kamu bisa kunjungi website disini bewoksatukosong.com</a>
              </h3>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
    <!-- Bayar -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Penawaran Menarik</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="col-md-12">
                <h1 class="mb-4">Waktunya upgrade skill !</h1>
                <img src="ebook.jpg" alt="ebook ci">
                <h3 class="text-center mt-4">Hanya 45 ribu</h3>
                <h3 class="text-center mt-4">Hub 021-85765041</h3>
            </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Jangan Tampilkan Lagi</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal">Ya Saya Mau</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>

Hasilnya seperti dibawah ini
Gambar 4. Membuat 2 Button Bayar Dan Gratis

Gambar 5. Ketika Button Bayar Di Klik

Gambar 6. Ketika Button Gratis Di Klik
Penjelasan-Nya mengenai latihan 2. perhatikan kodingan yang di bold

 <button type="button" class="btn btn-primary ml-5" data-toggle="modal" data-target="#free">
        Gratis
 </button>
Perhatikan data-target="#free" harus sama dengan div id nya. coba cek dibawah ini

<div class="modal fade" id="free" tabindex="-1" role="dialog" aria-labelledby="free123" aria-hidden="true">
Id "free" sama seperti data-target, harus sama ya. 
Nah perhatikan pada bagian arian-labelledby="free123" ini harus sama dengan kodingan dibawah ini
<h5 class="modal-title" id="free123">Belajar Codeigniter Gratis</h5>
nah arian-labelldby harus sama dengan h5 id yaitu free123.

Itu yang paling penting dan harus diperhatikan, jadi jika data-target="#pulsa" maka div id nya harus pulsa juga, dan jika aria-labelledby nya = "pulsa123" maka h5 id nya harus pulsa 123. Semoga bisa dimengerti ya.

Selanjutnya kalian buat file lagi bernama latihan3.html, sengaja om bewok kasih contoh - contoh popup yang banyak, biar teman - teman disini paham dan mengerti (hiya apa bedanya paham dan mengerti 😁). kali ini kita akan buat kodingan seperti login atau signup, biasanya di website - website jika kita ingin daftar atau login, ketika klik button tiba - tiba muncul popup. nah itu yang akan kita buat. 
Kodinganya seperti dibawah ini ya
ssss
<!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>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary ml-5" data-toggle="modal" data-target="#login">
      Klik Login
    </button>

    <!-- Modal Login -->
    <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">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>
            </form>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal">Login</button>
          </div>
        </div>
      </div>
    </div>
    <!-- End Modal Login -->
    <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>

Hasilnya seperti dibawah ini ya
Gambar 7. Klik Button Login

Gambar 8. Ketika Button Login Di Klik Tampil Form Login
Oke yang kita tunggu - tunggu, kali ini kita akan melanjutkan template bootstrap kita yang part sebelumnya, sudah kita buat. Kalau teman - teman mau lihat Daftar Tutorial-Nya bisa lihat disini atau kamu juga bisa lihat source code di github om bewok di sini

Tugas kita Selanjutnya adalah  
Kita akan menambahkan Button Sign Up dan Button Login, ketika di klik dia akan memunculkan popup atau dialog yang berisikan form yang isinya email, username, password dan button daftar dan button login.
Tidak perlu berlama - lama lagi, mari kita buat tutorialnya 

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>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>
      /* .row {
        background: #dcdcdc;
        color: #fff;
      } */

      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="container-fluid">
      <!-- Example row of columns -->
      <div class="row p-3 bg-dark text-light">
        <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>

Hasilnya seperti dibawah ini ya

Gambar 9. Membuat Button Signup Dan Login

Gambar 10. Ketika Button Sign Up Di Klik

Gambar 11. Ketika Button Sign In Di Klik
Terimakasih sudah membaca Tutorial Bootstrap 4 Mengenai Pop up atau Modal Atau Dialog pop up, kalau masih ada yang bingung bisa tanyakan di komentar dibawah. 

Kalau kamu mau download source kodenya bisa di github om bewok, link-Nya nanti dibawah dan kalau mau lihat Daftar Tutorial Bootstrap 4 ada di bawah ini.
Daftar Tutorial Boostrap 4
Download Source Kode Github 

Semua link pokoknya ada dibawah ini kalau ga lupa ya hehe. Sampai Jumpa 
di tutorial selanjutnya 

No comments:

Post a Comment