Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Kali ini saya akan mencoba membagi Cara Membuat Login Form Menggunakan Modal di Bootstrap.
Teman-teman pasti pernah login pada suatu website dan di situ terdap suatu button lalu saat teman-teman klik munculah suatu pop up yang muncul, seperti pop up login. Dalam tutorial kali ini saya hanya akan membahas cara membuat desainnya saja tanpa terintegrasi dengan database.
Sekarang saya akan mencoba membuatnya dengan menggunakan framework bootstrap,karena di bootstrap sudah menyediakan suatu class untuk membuat pop-up tersebut. Berikut tutorial singkat tentang Cara Membuat Login Form Menggunakan Modal di Bootstrap:
– Pertama teman-teman download framework bootstrapnya dulu.
– Kedua buka text editor teman-teman lalu buka file bootstrap yang telah kita download dan buat file index.html dengan cara mengcopy default html yang sudah ada di website bootstrap, jangan lupa save di dalam folder bootstrap teman-teman
– Ketiga kita buat pop-upnya. Berikut kode html-nya:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<!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"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/custom.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <h2>Klik masuk untuk login</h2> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Masuk</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title text-center">Dumenity</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-sm-6 col-sm-offset-3 form-box"> <div class="form-top"> <h3>Silahkan Login</h3> <p>Masukan e-mail dan password anda:</p> </div> <div class="form-bottom"> <form role="form" action="" method="post" class="login-form"> <div class="form-group"> <label class="sr-only" for="form-username">Email</label> <input type="text" name="form-username" placeholder="Username..." class="form-username form-control" id="form-username"> </div> <div class="form-group"> <label class="sr-only" for="form-password">Password</label> <input type="password" name="form-password" placeholder="Password..." class="form-password form-control" id="form-password"> </div> <button type="submit" class="btn masuk">Masuk!</button> </form> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default tutup" data-dismiss="modal">Tutup</button> </div> </div> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html> |
– Ke-empat kita buat custom.css nya untuk memberi sedikit warna pada pop-up loginnya:
|
1 2 3 |
.modal-header{background: #3498db} .masuk {width: 269px; background: #2ecc71} .tutup {background: #2ecc71} |
– Hasilnya akan menjadi seperti ini:
Ketika kita klik tombol masuk maka akan munculah pop-up login tersebut
Bagaimana teman-teman cukup mudahkan Membuat Login Form Menggunakan Modal di Bootstrap Karena di bootstrap kita tinggal memasukan class saja maka akan terbentuk lah pop-up yang kita inginkan.
Sekian artikel saya hari ini tentang Cara Membuat Login Form Menggunakan Modal di Bootstrap Sehat selalu ya teman-teman, selamat mencoba.