DBMS MICROPROJECT

 HTML login page with SQL database


Sign-up Page Code:

<?php
$showAlert = false;
$showError = false;
if($_SERVER["REQUEST_METHOD"] == "POST"){
    include 'partials/_dbconnect.php';
    $fname = $_POST["fname"];
    $lname = $_POST["lname"];
    $username = $_POST["username"];
    $password = $_POST["password"];
    $cpassword = $_POST["cpassword"];
    $exists=false;
    if($lname!="" &&  $fname!="" && $username!="" && $password!="" ){
        if(($password == $cpassword) && ($exists==false))
        {
        $sql = "INSERT INTO `users` ( `fname`,`lname`,`username`, `password`, `dt`) VALUES ('$fname','$lname','$username','$password',current_timestamp())";
        $result = mysqli_query($conn, $sql);
            if ($result){
                $showAlert = true;
            }
        }
        else{
            $showError = "Passwords do not match";
        }
    }
    else{
        $showError = "It is Mandatory to enter all informtion**";
    }
}
   
?>

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>SignUp</title>
    <style>
        body {
        }


        .text-center{color: red;}
    </style>
     <link rel="stylesheet" href="partials/styling.css">

  </head>

  <body>
    <?php require 'partials/_nav.php' ?>
    <?php
    if($showAlert){
    echo ' <div class="alert alert-success alert-dismissible fade show" role="alert">
        <strong>Success!</strong> Your account is now created and you can login
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">×</span>
        </button>
    </div> ';
    }
    if($showError){
    echo ' <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <strong>Error!</strong> '. $showError.'
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">×</span>
        </button>
    </div> ';
    }
    ?>
    <!-- SignUp Form -->
    <div class="signup-box3">
   
    <div class="container my-4">
     <h3 class="text-center" >Signup to our website</h3>
     <form action="/loginsystem/signup.php" method="post">

        <div class="form-group">
            <input style="width: 163px;" type="text" placeholder="First name"  id="fname" name="fname" aria-describedby="emailHelp">
            <input style="width: 169px;" type="text" placeholder="Last name" id="lname" name="lname" aria-describedby="emailHelp">
        </div>
       
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Username" id="username" name="username" aria-describedby="emailHelp">
        </div>

        <div class="form-group">
            <input type="password" class="form-control" placeholder="Password" id="password" name="password">
        </div>
       
        <div class="form-group">
           
            <input type="password" class="form-control" placeholder="Confirm Password" id="cpassword" name="cpassword">
            <small id="emailHelp" class="form-text text-muted" >Make sure to type the same password</small>
        </div>

        <button type="submit" class="btn btn-primary">SignUp</button>
        Already have an account? <a href="/loginsystem/login.php" style="color: red;" >Login</a>
     </form>
    </div>

    </div>
    <!-- Sign up Form Close -->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>



Login page code:

<?php
$login = false;
$showError = false;
if($_SERVER["REQUEST_METHOD"] == "POST"){
    include 'partials/_dbconnect.php';
    $username = $_POST["username"];
    $password = $_POST["password"];
   
     
    $sql = "Select * from users where username='$username' AND password='$password'";
    $result = mysqli_query($conn, $sql);
    $num = mysqli_num_rows($result);
    if ($num == 1){
        $login = true;
        session_start();
        $_SESSION['loggedin'] = true;
        $_SESSION['username'] = $username;
        header("location: welcome.php");

    }
    else{
        $showError = "Invalid Credentials";
    }
}
   
?>

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Login</title>

    <link rel="stylesheet" href="partials/styling.css">

    <script src="https://kit.fontawesome.com/3a3e121ecf.js" crossorigin="anonymous">
    </script>

  </head>
  <body>
    <?php require 'partials/_nav.php' ?>
    <?php
    if($login){
    echo ' <div class="alert alert-success alert-dismissible fade show" role="alert">
        <strong>Success!</strong> You are logged in
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">×</span>
        </button>
    </div> ';
    }
    if($showError){
    echo ' <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <strong>Error!</strong> '. $showError.'
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">×</span>
        </button>
    </div> ';
    }
    ?>
<!-- ................Login Form................ -->
<div class="signup-box">
<img src="img/wallpaperflare.com_wallpaper.jpg" alt="Code Fed">
<div class="container my-4">
<h3 class="text-center">Login to our website</h3>
<form action="/loginsystem/login.php" method="post" name="suForm" id="supform">
    <div class="form-group">

        <input type="text" class="form-control" placeholder="username" id="username"  name="username" aria-describedby="emailHelp" onclick="resetBtn()" maxlength="30">
    </div>

    <div class="form-group">
        <input type="password" class="form-control" placeholder="Password" id="password" name="password" onclick="resetBtn()">
    </div>

        <input type="submit" id="submit-btn" class="btn btn-primary" value="Login" onmouseover="mouseOver()">
   
</form>
</div>
</div>

<div class="signup-box2" >
Don't have an account? <a href="/loginsystem/signup.php">Signup</a>
</div>

<script>

    var a = 0;

    function mouseOver(){
       
        const name = document.forms['suForm']['username'].value;
        const pass = document.forms['suForm']['password'].value;


        if((name == "" || pass == "") && a==0){
        buttonMoveLeft();
        a = 1;
        return false;
        }

        if((name == "" || pass == "") && a==1){
        buttonMoveRight();
        a = 2;
        return false;
        }

        if((name == "" || pass == "") && a==2){
        buttonMoveLeft();
        a = 1;
        return false;
        }

        else{

            // document.getElementById('submit-btn').click();  
            document.getElementById('submit-btn').style.cursor = 'pointer';
            return false;
        };

    };


   

    function buttonMoveLeft(){

        const button = document.getElementById('submit-btn');
        button.style.transform = 'translateX(-160%)';

    };


    function buttonMoveRight(){

        const button = document.getElementById('submit-btn');
        button.style.transform = 'translateX(0%)';

    };


    function resetBtn(){
        const button = document.getElementById('submit-btn');
        button.style.transform = 'translateX(0%)';
    };


</script>
<!--.....................login Form Close................... -->
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>




Welcome page code:

<?php
session_start();

if(!isset($_SESSION['loggedin']) || $_SESSION['loggedin']!=true){
    header("location: login.php");
    exit;
}


?>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Welcome - <?php $_SESSION['username']?></title>
  </head>
  <body>
    <?php require 'partials/_nav.php' ?>
    Welcome - <?php echo $_SESSION['username']?>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>



Logout page code:

<?php
session_start();

session_unset();
session_destroy();

header("location: login.php");
exit;
?>

db_connect.php:

<?php

$server = "localhost";
$username = "root";
$password = "";
$database = "users";

$conn = mysqli_connect($server, $username, $password, $database);
if (!$conn){
//      echo "success";
//  }

// else{
    die("Error". mysqli_connect_error());
}

?>



_nav.php:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="/loginsystem">iSecure</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="/loginsystem/welcome.php">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/loginsystem/login.php">Login</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/loginsystem/signup.php">Signup</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/loginsystem/logout.php">Logout</a>
      </li>
       
     
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>



styling.css:

.signup-box{
    width: 80%;
    max-width: 370px;
    border: 1px solid rgba(116, 116, 116, 0.76);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: .75rem;
    padding: 10px 0;
}
.signup-box3{
    width: 80%;
    max-width: 370px;
    border: 1px solid rgba(116, 116, 116, 0.76);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: .75rem;
    padding: 10px 0;
}
.signup-box2{
    width: 80%;
    max-width: 370px;
    border: 1px solid rgba(116, 116, 116, 0.76);
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: .75rem;
    padding: 10px 0;
}

.signup-box img {
    width: 50%;
    height: auto;
    margin: 20px auto;
    display: block;
    border-radius: 60%;
}

.signup-box input{
    width: 85%;
    height: 40px;
    margin: 12px auto;
    display: block;
    border: 1px solid rgba(116, 116, 116, 0.76);
    border-radius: .75rem;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 17px;
    padding-left: 15px;
}
.signup-box input:focus{
    outline: none;
}


#check{
    width: 20px;
    max-width: 20px;
    margin: 0 0 0 5%;
    padding: 0;
    height: 20px;
    display: inline;
}
.label{
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    padding-left: 9px;
    position: absolute;
}

#submit-btn {
  width: auto;
  padding: 0 30px;
  background-color: #5271FF;
  border: 1px solid transparent;
  border-radius: .75rem;
  color: #FFFFFF;
  cursor: pointer;
  font-family: "Inter var",ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-size: 1.125rem;
  font-weight: 600;
  height: 50px;
  transition: 0.15s;
  float: right;
  margin: 35px 5% 12px 0;
  cursor: default;
}

.submit-div{
    height: 200px;
    width: 80%;
    max-width: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    border-radius: .75rem;
    border: 1px solid rgba(116, 116, 116, 0.76);
    background-color: #FFFFFF;
    box-shadow: 10px 10px 50px rgba(43, 43, 43, 0.247);
    display: block;
}
.submit-div i{
    font-size: 40px;
    padding-top: 50px;
    color: #5271FF;
}
.submit-div h1{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}





No comments:

Post a Comment

Subscribe to: Posts (Atom)

Login And Registration Updated

OOP Microproject....... (Codeblocks is recommended to perform this Program) #include <iostream> #include <conio.h> #include <...

  • 3d Car Animation
    3d Car Animation Working Model #include<graphics.h> #include<conio.h> #include<dos.h> #include<stdlib.h> #include...
  • Flying Rocket
    FLYING  ROCKET #include<iostream.h> #include<conio.h> #include<dos.h> #include<stdlib.h> #include<graphics.h> ...