LOGIN/SIGNUP FORM WITH SESSION IN PHP MYSQL - CULT CODE

-




In this tutorial, We will learn how to create a Signup and Login form in PHP MySql with Session Management and Exist condition.

1. Create a table name user.

 Use the code below to create a table:

CREATE TABLE `user` (
  `id` int(251) NOT NULL,
  `username` text NOT NULL,
  `email` text NOT NULL,
  `password` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

2. Now create a file connect.php:

This file will help us to connect PHP to Mysql.
<?php   
 $connect = mysqli_connect("localhost", "root", "password", "demo");
 ?>
 

3. Now create a file index.php:

After Signup/Sign-in user will be redirected to this page.

<?php 
session_start();
 if (!isset($_SESSION['username'])) {
  header("location: login.php");
 }
 elseif (isset($_GET['logout'])) {
  session_destroy();
  unset($_SESSION['username']);
  header("location: login.php");
 }
?>

<!DOCTYPE html>
<html>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}

input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

button {
  background-color: grey;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

button:hover {
  opacity:1;
}

.registerbtn {
  padding: 14px 20px;
  background-color: #4CAF50;
}
.registerbtn, .loginbtn {
  float: center;
  width: 50%;
}

/* Add padding to container elements */
.container {
  padding: 16px;
}

.modal {
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: #474e5d;
  padding-top: 50px;
}

.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
 
.close {
  position: absolute;
  right: 35px;
  top: 15px;
  font-size: 40px;
  font-weight: bold;
  color: #f1f1f1;
}

.close:hover,
.close:focus {
  color: #f44336;
  cursor: pointer;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

@media screen and (max-width: 300px) {
  .registerbtn, .loginbtn {
     width: 100%;
  }
}
</style>
<body>


  <form class="modal-content" method="POST" action="">
    <div class="container">
 <center>
      <h1>Hi, <?php echo $_SESSION['username']; ?></h1>
   </center>
      <hr>
  <center>
        <button type="button" onclick="location.href='index.php?logout=1'" name="login_user" class="loginbtn">Log Out</button>
  </center>
      </div>
    </div>
  </form>

</body>
</html>
 

4. Now create a file register.php:

This file will be used for a new user to sign up.

<?php 
session_start();
include('connect.php');
 
if (isset($_POST['register_user'])) {
  
 $username = mysqli_real_escape_string($connect, $_POST['username']);
 $email = mysqli_real_escape_string($connect, $_POST['email']);
 $password = mysqli_real_escape_string($connect, $_POST['password']);
  

 $sql_e = "SELECT * FROM user WHERE email='$email'";
 $res_e = mysqli_query($connect, $sql_e);

 if(mysqli_num_rows($res_e) > 0){
   echo '<script> alert("Email already exist!");</script>';
 }else{
$query = "INSERT INTO user (username, email, password) VALUES ('$username', '$email','$password')";
if(mysqli_query($connect, $query)); {
    $_SESSION['username'] = $username;
    echo '<script>
  location.replace("index.php");
     </script>';
   exit();
  }
  }
 }
?>

<!DOCTYPE html>
<html>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}

input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

button {
  background-color: grey;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

button:hover {
  opacity:1;
}

.registerbtn {
  padding: 14px 20px;
  background-color: #4CAF50;
}
.registerbtn, .loginbtn {
  float: left;
  width: 50%;
}

/* Add padding to container elements */
.container {
  padding: 16px;
}

.modal {
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: #474e5d;
  padding-top: 50px;
}

.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
 
.close {
  position: absolute;
  right: 35px;
  top: 15px;
  font-size: 40px;
  font-weight: bold;
  color: #f1f1f1;
}

.close:hover,
.close:focus {
  color: #f44336;
  cursor: pointer;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

@media screen and (max-width: 300px) {
  .registerbtn, .loginbtn {
     width: 100%;
  }
}
</style>
<body>


  <form class="modal-content" method="POST" action="">
    <div class="container">
      <h1>Sign Up</h1>
      <hr>
      <input type="text" placeholder="Enter Email" name="email" required>
      <input type="text" placeholder="Enter Username" name="username" required>
      <input type="password" placeholder="Enter Password" name="password" required>
  <div class="clearfix">
        <button type="submit" name="register_user" class="registerbtn">Sign Up</button>
        <button type="button" onclick="location.href='login.php'" class="loginbtn">Sign In</button>
      </div>
    </div>
  </form>

</body>
</html>
 

5. Now create a file login.php:

This file will be used for an existing user to sign in.
 
<?php 
session_start();
include('connect.php');
if (isset($_POST['login_user'])) {
  $username = mysqli_real_escape_string($connect, $_POST['username']);
  $password = mysqli_real_escape_string($connect, $_POST['password']);

 
   $query = "SELECT * FROM user WHERE username='$username' AND password='$password'";
   $results = mysqli_query($connect, $query);
   if (mysqli_num_rows($results) == 1) {

    $_SESSION['username'] = $username;
     echo '<script type="text/javascript">
    location.replace("index.php");
     </script>';  
    ?>
    <?php
   }else {
 echo '<script> alert("Invalid Username/Password!");</script>';
   }
 }

?>
<!DOCTYPE html>
<html>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}

input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

button {
  background-color: grey;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

button:hover {
  opacity:1;
}

.registerbtn {
  padding: 14px 20px;
  background-color: #4CAF50;
}
.registerbtn, .loginbtn {
  float: left;
  width: 50%;
}

/* Add padding to container elements */
.container {
  padding: 16px;
}

.modal {
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: #474e5d;
  padding-top: 50px;
}

.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
 
.close {
  position: absolute;
  right: 35px;
  top: 15px;
  font-size: 40px;
  font-weight: bold;
  color: #f1f1f1;
}

.close:hover,
.close:focus {
  color: #f44336;
  cursor: pointer;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

@media screen and (max-width: 300px) {
  .registerbtn, .loginbtn {
     width: 100%;
  }
}
</style>
<body>


  <form class="modal-content" method="POST" action="">
    <div class="container">
      <h1>Sign In</h1>
      <hr>
      <input type="text" placeholder="Enter Username" name="username" required>
      <input type="password" placeholder="Enter Password" name="password" required>
  <div class="clearfix">
        <button type="submit" name="login_user" class="loginbtn">Sign In</button>
        <button type="button" onclick="location.href='register.php'" class="registerbtn">Sign Up</button>
      </div>
    </div>
  </form>

</body>
</html>

6. Run your project.

Step 1: Fill the details and click on Signup
.
Step 2: After Sign up successfully, Now click on the Logout button to Sign in/Signup with a different account.




 


 



 Step 3: Now try to log in.


















 










































Comments











Post a Comment






























Popular posts from this blog









HOW TO UPDATE+FETCH DATA IN PHP - CULT CODE






-














Image







         In this tutorial, we will learn how to UPDATE+FETCH data in PHP using HTML form.           1. Create a table name  user.     Use the code below to create a table:     CREATE TABLE `user` (   `id` int(11) NOT NULL,   `username` varchar(251) NOT NULL,   `email` varchar(251) NOT NULL,   `password` varchar(251) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;                                       2. Now create a file connect.php:   This file will help us to connect PHP to Mysql.     <?php      $connect = mysqli_connect("localhost", "root", "password", "demo");      ?>      3. Now create a file index.php:   In this file, we will create an HTML form and fetch data using PHP.      <?php    include('connect.php');   include('update.php');   $data_query = "SELECT * FROM user LIMIT 1";   $data_result = mysqli_query($connect, $data_query);   if(mysqli_num_rows($data_result) > 0)...








Read more










HOW TO FETCH DATA FROM MYSQL WITH WHERE CONDITION USING PHP - CULT CODE






-














Image







                In this tutorial, we will learn how to fetch Selected rows from a table in PHP with the  WHERE condition.           1. Create a table name  user.     Use the code below to create a table:      CREATE TABLE `user` (   `id` int(11) NOT NULL,   `name` varchar(251) NOT NULL,   `email` varchar(251) NOT NULL,   `password` varchar(251) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;              2. Now create a file connect.php:   This file will help us to connect PHP to Mysql.     <?php     $connect = mysqli_connect("localhost", "root", "password", "demo");  ?>      3. Now create a file index.php:   Paste the below code in your index.php file.     <?php  include('connect.php'); $data_query = "SELECT * FROM user WHERE id='5'"; $data_result = mysqli_query($connect, $data_query); if(mysqli_num_rows($data_result) > 0)                   {                        while($row = mysqli_fetch_array($data_resu...








Read more