Selasa, 13 Maret 2018

tutorial bikin from login HTML

HTML
 <?php
    session_start();
    if(isset($_SESSION["salah"])){
        if($_SESSION["salah"] >= 3){
            echo '<h1>ANDA DI BLOKIR</h1>';
            exit();
        }
    }
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>tugas proweb2</title>
        <link rel="icon" href="assest/images/logo-uty-png.png">
        <link rel="stylesheet" href="assest/css/login.css">
        <link rel="stylesheet" href="asset/css/bootstrap.css">
        <link rel="stylesheet" href="asset/css/floating-labels.css">
   
    </head>
    <body>
        <form id="frm01" name="frm01" method="POST" action="login.php"
              class="login">
            <img class="pictre" width="200" height="200" src="assest/images/logo-uty-png.png" style="width:200px;height:200px;">
  <h1 class="login-header">Silakan Masuk</h1>
  <h3 class="login-center">Isi Email dan Password dengan benar</h3>


  <div class="login-container">
      <p><input name="email" type="email" id="email" placeholder="Email"></p>
      <p><input  name="password" type="password" id="password" placeholder="Password"></p>
      <p><input  type="submit" name="submit" value="login"  type="submit" value="Log in"></p>
    <a href="https://www.instagram.com/">
        <img src="assest/images/1b2ca367caa7eff8b45c09ec09b44c16-instagram-icon-logo-by-vexels.png" alt="facebook" style="width: 50px;height:50px "  </a>
    <a href="https://mail.google.com/">
        <img src="assest/images/gmail.png" alt="gmail" style="width: 50px;height:50px" </a>
  </div>
        <script src="asset/js/jquery.min.js"></script>
        <script src="asset/js/popper.min.js"></script>
        <script src="asset/js/bootstrap.min.js"></script>
        </form>
    </body>
</html>

CSS
body {
  background: #9fcdff;
  font-family: 'Coiny', cursive;
}

.login {
  width: 500px;
  margin: 16px auto;
  font-size: 16px;
}



/* Reset top and bottom margins from certain elements */
.login-header,
.login p {
  margin-top: 10;
  margin-bottom: 0;
}

.login-center{
    margin-top: 0.5;
  margin-bottom: 0.3;
}


.pictre{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.login-center{
    background: #28d;
    padding: 20px;
    font-size: 1.0em;
    font-weight: normal;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
}
.login-header {
  background: #28d;
  padding: 10px;
  font-size: 1.4em;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
}
/*kotak pada login*/
.login-container {
  background: #ebebeb;
  padding: 12px;
}

/* Every row inside .login-container is defined with p tags */
.login p {
  padding: 12px;
}



.login input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  border-width: 1px;
  border-style: solid;
  padding: 16px;
  outline: 0;
  font-family: inherit;
  font-size: 0.95em;
}

.login input[type="email"],
.login input[type="password"] {
  background: #fff;
  border-color: #bbb;
  color: #555;
}

/* klik pada email dan passsword */
.login input[type="email"]:focus,
.login input[type="password"]:focus {
  border-color:greenyellow ;
}

.login input[type="submit"] {
  background: green;
  border-color: transparent;
  color: #fff;
  cursor: pointer;
}

.login input[type="submit"]:hover {
  background: chartreuse;
}

/* Buttons' focus effect */
.login input[type="submit"]:focus {
  border-color: black;
}


.login-logo {
  background: black;
  padding: 12px;

}

JSS
<?php
session_start();
$user = $_POST["email"];
$pass = $_POST["password"];
//====================================
$dbuser = "admin@gmail.com";
$dbpass = "admin123";
//====================================
if($user == $dbuser && $pass == $dbpass){
    echo '<h1> SELAMAT DATANG </h1>';
}else{
    if(isset($_SESSION["salah"])){
        $_SESSION["salah"]++;
    }else{
        $_SESSION["salah"] = 1;
    }
   header("location:index.php");//redirect
}
?>
<script>
    function myFunction(){
        alert("WELCOME")
    }
   
</script>
<script>
    myFunction()
</script>
<?php

?>