Home » Tutorial » Membuat Modal Login & SignUp/Daftar Bootstrap 4
bootstrap modal signup

Membuat Modal Login & SignUp/Daftar Bootstrap 4

Membuat Modal Login & SignUp/Daftar Bootstrap 4

Modal login dengan bootstrap 4, pada tutorial kali ini wowotek akan membagikan tutorial membuat modal form untuk login dan signup atau pendaftaran.

Beberapa bahan yang perlu disiapkan adalah:

  • Bootstrap compiler
  • Font awesome (opsional)
  • Jquery

Begini struktur file dan folder yang wowotek buat

file struktur
Struktur file

Sebelum kita lanjut ke tutorialnya, wowotek anggap anda telah membuat struktur file seperti contoh di atas.

Langkah 1 : Buka File index.html

Silahkan anda buka file indexnya kemudian includekan file css & js yang kita perlukan, wowotek include bootstrap.css, all.css(font awesome), jquery-3.3.1.min.js, bootsrap.js, all.js(font awesome) dan validasi.js(custom javascript untuk validasi password).

Begini kode yang dihasilkan :

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<!-- Bootstrap CSS -->

<link rel="stylesheet" href="assets/css/bootstrap.css">

<!-- Font Awesome -->

<link rel="stylesheet" href="assets/css/all.css">

</head>

<body>

<!-- Javascript -->

<script src="assets/js/jquery-3.3.1.min.js"></script>

<script src="assets/js/bootstrap.js"></script>

<script src="assets/js/all.js"></script>

<script type="text/javascript" src="validasi.js"></script>

</body>

</html>

Langkah 2 : Membuat Navbar Untuk Link Modal Login Bootstrap Dan SignUp

Selanjutnya kita membuat navbar di dalam file index tersebut caranya pergi ke bagian <body> kemudian tuliskan script kode berikut <body> disini… :

<!-- Navbar -->

<nav class="navbar navbar-expand-lg navbar-light bg-light">

<div class="container">

<a class="navbar-brand" href="#"><i class="fab fa-facebook text-success"></i> FakeCok</a>

<ul class="nav justify-content-end">

<li class="nav-item">

<a class="nav-link" href="#" data-toggle="modal" data-target="#masuk"><i class="fa fa-key"></i> Masuk</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#" data-toggle="modal" data-target="#singup"><i class="fa fa-user"></i> Daftar</a>

</li>

</ul>

</div>

</nav>

<!-- End Navbar -->

 

Di dalam navbar tersebut ada sebuah brand dan juga 2 buah link/tombol yang nantinya ketika di klik akan memunculkan form modal.

Langkah 3 : Membuat Modal Login Bootstrap

Langkah ke 3 kita akan membuat form modal login, caranya silahkan anda ketikkan script kode berikut tepat setelah <!– End Navbar –> :

<!-- Modal Login -->

<div class="modal fade" id="masuk" tabindex="-1" role="dialog" aria-labelledby="masuk" aria-hidden="true">

<div class="modal-dialog" role="document">

<div class="modal-content">

<div class="modal-header">

<h5 class="modal-title" id="exampleModalLabel">Masuk</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="email">Email address</label>

<input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">

</div>

<div class="form-group">

<label for="password">Password</label>

<input type="password" class="form-control" id="password" placeholder="Password">

</div>

<button type="submit" class="btn btn-primary">Masuk</button>

<small class="text-muted">Atau</small>

<a href="#" class="text-info">lupa Password?</a>

</form>

</div>

</div>

</div>

</div>

<!-- End Modal Login -->

Oke modal login sudah selesai di buat, anda bisa langsung mengeceknya di browser, jika saat anda klik link masuk modal tidak muncul berarti ada sedikit kesalahan saat penulisan javascript dan jquerynya, pastikan penulisannya berurutan seperti langkah 1.

Baca :  Tutorial Bootstrap: Cara Membuat Menu Dropdown

Langkah 4 : Membuat Modal SignUp/Daftar

Langkah selanjutnya kita perlu membuat modal signup, sama seperti langkah sebelumnya silahkan anda ketikkan kode berikut tepat setelah kode <!– End Modal Login –> :

<!-- Modal Sing-Up -->

<div class="modal fade" id="singup" tabindex="-1" role="dialog" aria-labelledby="singup" aria-hidden="true">

<div class="modal-dialog" role="document">

<div class="modal-content">

<div class="modal-header">

<h5 class="modal-title" id="exampleModalLabel">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">

<div class="body-form">

<form action="#" method="post" name="validasi_form">

<div class="form-group">

<label for="username">Username</label>

<input type="text" class="form-control" id="username" placeholder="Username" required>

</div>

<div class="form-group">

<label for="password">Email</label>

<input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email" required>

</div>

<div class="form-group">

<label for="password">Password</label>

<input type="password" class="form-control" placeholder="Password" onchange="checkPass()" id="password_1" name="password_1" required>

</div>

<div class="form-group">

<label for="password">Ulangi Password</label>

<input type="password" class="form-control" onchange="checkPass()"  id="password_2" name="password_2" placeholder="Ulangi Password">

<span id="pesan" class="pesan-confirm"></span>

</div>

<input type="submit" name="daftar_process" class="btn btn-success btn-lg btn-block" value="DAFTAR"/>

</form>

</div>

</div>

</div>

</div>

</div>

<!-- End Modal Sing-up -->

Kini telah selesai 2 modal login dan signup, namun untuk memberikan validasi signupnya agar password yang dimasukkan harus sama maka kita harus membuat file validasi.js.

Langkah 5 : Membuat validasi.js

Buka file validasi.js ketikkan kode di bawah ini kemudian simpan

//membuat validasi password 1 dan password 2 (pencocokan)

function checkPass() {




//mengambil object dan dimasukan ke variabel

var pass_1 = document.getElementById('password_1');

var pass_2 = document.getElementById('password_2');

//mengambil object dan dimasukan ke variabel

var message = document.getElementById('pesan');

//inisialisasi warna didalam variabel

var warnabenar = "#66cc66";

var warnasalah = "#ff6666";

//membandingkan 2 variabel




if(pass_1.value == pass_2.value){

//ketika password benar

document.validasi_form.daftar_process.disabled=false;

message.style.color = warnabenar;

message.innerHTML = "password cocok"

}else{

//ini ketika password tidak cocok

document.validasi_form.daftar_process.disabled = true;

message.style.color = warnasalah;

message.innerHTML = "password tidak cocok"

}

}

Nah sampai tahap ini kita telah selesai membuat dan anda bisa langsung menjalankannya, namun jika anda ingin sedikit menghiasi halaman indexnya mungkin menambahkan jumbotron adalah pilihan yang tepat.

Langkah 6 : Membuat Jumbotron

Langkah terakhir kita akan membuat jumbotron sebagai penghias agar tampilannya sedikit lebih rame caranya silahkan anda ketikkan kode berikut tepat di bawah <!-- End Modal Sing-up -->

<!-- Jumbotron -->

<div class="container">

<div class="jumbotron">

<h1 class="display-3"><i class="fab fa-facebook text-success"></i> FakeCok</a></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>

</div>

<!-- End Jumbotron -->

Nah kita telah selesai membuatnya dan seperti inilah tampilannya:

Baca :  Bootstrap Tutorial: Membuat Footer Responsive Keren
modal login
modal login
index html
Halaman Index

Jika ingin source codenya anda bisa mengunduhnya melalui link download di bawah ini

Download Modal Login & SingUp


Informasi

Nama : bootstrap4 modal

Format : rar

Ukuran : 580 KB

Harga : Gratis

Download


Wowotek kira cukup sekian untuk tutorial kali ini semoga tutorialnya bermanfaat untuk kita semua.

Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *