Untitled

<!DOCTYPE html>
<html>
<head>
    <title>Halaman Administrator</title>

    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../css/costum.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script type="text/javascript" src="../jquery/jquery-2.0.2.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript">
$(function(){
   $('.alert').hide();
   $('.panel-body').submit(function(){
      $('.alert').hide();
      if($('input[name=username]').val() == ""){
         $('.alert').fadeIn().html('Kotak input <b>Username</b> masih kosong!');
      }else if($('input[name=password]').val() == ""){
         $('.alert').fadeIn().html('Kotak input <b>Password</b> masih kosong!');
      }else{
         $.ajax({
            type : "POST",
            url : "login_cek.php",
            data : 'username='+$('input[name=username]').val()+'&password='+$('input[name=password]').val(),
            success : function(data){
               if(data == "ok") window.location = "index.php";
               else $('.alert').fadeIn().html(data);
            }
         });
      }
      return false;
   });
});
</script>

</head>
<body>
<div class="container" style="margin-top: 100px;">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <div class="alert alert-danger" role="alert">
            </div>
            <div class="panel panel-default">
            <h4>login with</h4><br>
            <span><i class="fa fa-facebook"></i></span>
            <span><i class="fa fa-twitter"></i></span>
            <span><i class="fa fa-google-plus"></i></span>
            <br><br>
            <h4>OR</h4><hr>
                <div class="panel-body">

                    <form action="">
                                <div class="input-group">
                                         <div class="input-group-addon"><i class="glyphicon glyphicon-user"></i></div>
                                              <input type="text" name="username" placeholder="Username" autofocus class="form-control">
                                </div><br/>

                                <div class="input-group">
                                          <div class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></div>
                                                <input type="password" name="password" placeholder="Password" class="form-control" >
                                 </div><br/>

                         <button class="btn btn-danger pull-right login-button">
                              <i class="glyphicon glyphicon-log-in"></i> Login Administrator
                         </button><br/><!--form-group-->
                </form><!--from-->
             </div><!--panel-body-->
                 <div class="lock"><i class="fa fa-lock fa-2x"></i></div>
                 <div class="label">LOGIN FORM</div>
                  <div class="label12"></div>
            </div><!--panel -->
        </div><!--col-->
    </div><!--row-->
</div> <!--container-->
</body>
</html>