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 |
<!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">×</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 |
Kodinganya seperti dibawah ini
asdasd
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">×</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">×</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
Nah perhatikan pada bagian arian-labelledby="free123" ini harus sama dengan kodingan dibawah ini
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.
<button type="button" class="btn btn-primary ml-5" data-toggle="modal" data-target="#free">
Gratis
</button><div class="modal fade" id="free" tabindex="-1" role="dialog" aria-labelledby="free123" aria-hidden="true">Nah perhatikan pada bagian arian-labelledby="free123" ini harus sama dengan kodingan dibawah ini
<h5 class="modal-title" id="free123">Belajar Codeigniter Gratis</h5>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
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">×</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 |
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 »</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 »</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 »</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">×</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">×</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 |
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
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