Friday, February 20, 2015

Home » » Cara membuat form login dengan validasi login menggunakan bootstrap

Cara membuat form login dengan validasi login menggunakan bootstrap

By 8 comments
Banyak sekali teman-teman saya di forum dan group facebook yang ingin menanyakan cara membuat form login dengan validasi login. Nah saya jadi kepikiran untuk membuat nya selain itu untuk membantu teman-teman saya juga yang belum begitu paham tentang cara membuat form login berserta validasi login nya. Seperti yang sudah saya ceritakan sedikit diatas pada postingan saya kali ini saya ingin membuat tutorial cara membuat form login dengan validasi login nya.


form login.php 
oke langsung saja persiapan yang harus teman-teman lakukan adalah pastikan teman-teman sudah membuat database nya pada phpmyadmin atau biasa disebut localhost untuk login.
nah disini sebagai contoh :
Database : admin
Tabel : login
di dalam tabel login buat atribut nama username dan password lalu isi value pada username dan password nya terserah. itu untuk teman-teman login nanti.
Oke sekarang kita akan buat form login.php dan dibawah ini adalah source code nya:
<!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">
    <title>System File Transfer Protocol (FTP)</title>

     <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/bootstrap-theme.min.css" rel="stylesheet"/>
</head>

 <body>
<p><br/><br/><br/><br/></p>
<div class="container">
      <div class="row">  
<div class="col-md-4">
     <div class="panel panel-default">
       <div class="panel-body">
          <div class="page-header">
         <h3>Login Area</h3>
      </div>
      <form action="validasilogin.php" method="post" accept-charset="utf-8" role="form">
         <div class="form-group">
            <label for="username">Username</label>
            <div class="input-group">
           <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
           <input type="text" class="form-control" name="username" placeholder="Enter username" required />
        </div>
         </div>
         <div class="form-group">
            <label for="password">Password</label>
            <div class="input-group">
           <span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span>
           <input type="password" class="form-control" name="password" placeholder="Password" required />
        </div>
         </div>
         <hr/>
         <a href="#"><button type="button" class="btn btn-success"><span class="glyphicon glyphicon-arrow-left"></span> Back</button></a>
         <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-lock"></span> Login</button>
         <p>
</p>
      </form>
       </div>
    </div>
    
     </div>
  </div>
    </div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
</body>
</html>
Selanjutnya kita buat form validasilogin.php dan dibawah ini adalah source code nya :

<?php
//koneksi ke database
mysql_connect("localhost", "root", "");
mysql_select_db("datafile");
//validasi login
$username=$_POST['username']; 
$password=$_POST['password']; 
$query=mysql_query("select * from admin where username='$username' and password='$password'"); 
$cek=mysql_num_rows($query); 
if($cek){ 
$_SESSION['username']=$username; 
header("location:index.php");
}else{ 
echo'<!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">
    <title>System File Transfer Protocol (FTP)</title>

     <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/bootstrap-theme.min.css" rel="stylesheet"/>
</head>

 <body>
<p><br/><br/><br/><br/></p>
<div class="container">
      <div class="row">
<div class="col-md-4">
     <div class="panel panel-default">
       <div class="panel-body">
          <div class="page-header">
         <h3>Login Area</h3>
      </div>
 <form action="validasilogin.php" method="post" accept-charset="utf-8" role="form">
 <div class="alert alert-warning"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true"><div class="glyphicon glyphicon-volume-off"></div></span><span class="sr-only">Close</span></button>
Maaf, Username dan password yang anda masukkan tidak cocok. Silahkan coba lagi!
</div>
      <form action="validasiid1.php" method="post" accept-charset="utf-8" role="form">
         <div class="form-group">
            <label for="username">Username</label>
            <div class="input-group">
           <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
           <input type="text" class="form-control" name="username" placeholder="Enter username" required />
        </div>
         </div>
         <div class="form-group">
            <label for="password">Password</label>
            <div class="input-group">
           <span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span>
           <input type="password" class="form-control" name="password" placeholder="Password" required />
        </div>
         </div>
         <hr/>
         <a href="home.php"><button type="button" class="btn btn-success"><span class="glyphicon glyphicon-arrow-left"></span> Back</button></a>
         <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-lock"></span> Login</button>
         <p>
</p>
      </form>
       </div>
    </div>
    
     </div>
  </div>
    </div>

<!-- jQuery necessary for Bootstrap -->
    <script src="js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
</body>
</html>
';
}
?>
Nah dibawah ini adalah untuk tampilan form validasilogin.php nya, jika misalkan teman-teman gagal login nanti akan muncul alert-info nya pada form login tersebut.
form validasilogin.php

Oke jika sudah yang terakhir kita akan buat form index.php nya untuk mengetahui kalo kita telah berhasil melakukan login. dan dibawah ini adalah source code nya:

<!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">
    <title>System File Transfer Protocol (FTP)</title>

     <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/bootstrap-theme.min.css" rel="stylesheet"/>
</head>

 <body>
<p><br/><br/><br/><br/></p>
<div class="container">
      <div class="row">  
<div class="col-md-4">
     <div class="panel panel-default">
       <div class="panel-body">
          <div class="page-header">
         <h3>Selamat anda berhasil login</h3>
      </div>
 <a href="login.php"><button type="button" class="btn btn-success"><span class="glyphicon glyphicon-arrow-left"></span> Back</button></a>
       </div>
    </div>
    
     </div>
  </div>
    </div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
</body>
</html>
Dan jika teman-teman berhasil melakukan login maka nanti akan muncul form index.php. atau bisa dilihat pada gambar dibawah ini.
form index.php
Oke selesay.

8 comments:

  1. Kak dolopMay 13, 2015 at 5:18 PM

    makasih mas atas tutorialnya sngat membantu sekali.

    ReplyDelete
  2. gatewanAugust 29, 2015 at 7:01 AM

    Rekomendasi Artikel Terkait --> Membuat Validasi Form HTML5 Dengan JavaScript

    ReplyDelete
  3. UnknownSeptember 15, 2015 at 10:56 AM

    bisa donlot source code nya gx... library bootstrap nya gx ad tuh

    ReplyDelete
  4. Belajar Pemrograman WebsiteJanuary 28, 2016 at 7:24 AM

    tutorial yang bagus.. jangan lupa gunakan MySQLi karena untuk PHP versi 5.3 keatas MySQL sudah tidak support.. dan gunakan juga MySQLi Prepare Statement untuk menyaring $_POST sekaligus menghindari SQL injection..

    berikut contohnya : https://www.onphpid.com/membuat-form-login-dengan-bootstrap-dan-php.html

    ReplyDelete
  5. AnonymousMarch 3, 2016 at 12:18 AM

    mantep bro. pr ane nih di kuliah.
    bro, janga lupa mampir di blog sederhana ane ya:

    Link -> cakbabe.com

    ReplyDelete
  6. AnonymousMarch 3, 2016 at 12:19 AM

    mantep bro. pr ane nih di kuliah.
    bro, janga lupa mampir di blog sederhana ane ya:

    Link -> cakbabe.com

    ReplyDelete
  7. UnknownApril 1, 2020 at 2:09 PM

    Terimakasih postingannya kak, tutorialnya membantu sekali, mudah dipahami dan dicoba langsung ke aplikasinya, sintaxnya juga menarik, terus berkarya kak, semoga blog kakak diminati semua orang, perkenalkan nama saya : Shofi Rachmawati, NIM : 1922500133, dan jangan lupa kunjungi link web kampus saya ya, :https://www.atmaluhur.ac.id/

    ReplyDelete