'How to make a login form in HTML/PHP [closed]

I am working on a chatting app in HTML.

I have made the sign up page with this HTML code:

<!DOCTYPE html>
<html>
<head>
<title>THE HOMEPAGE</title>
<noscript>No one loves u</noscript>
<script src="https://kit.fontawesome.com/2432f73816.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="./teacher.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<form id="CreateAccount" action="techer.php" method="GET">
<div class="main">
<div class="Title">
<h1>Enter your details.</h1>
</div>
<div class="inputs">
<label for="skool">SchoolName:</label>
<input type="text" id="skool" placeholder ="Put the school name" name="skool"></input>
<i class="fa-solid fa-circle-xmark"></i>
<i class="fa-solid fa-circle-check"></i>
<p>Error Message</p>
</div>
<div class="inputs">
<label for="username">Username:</label>
<input type="text" id="username" placeholder ="Username" name="username">
<i class="fa-solid fa-circle-xmark"></i>
<i class="fa-solid fa-circle-check"></i>
<p id="p">Error Message</p>
</div>
<div class="inputs">
<label for="password">Password</label>
<input type="password" id="password" placeholder =" Password" name="password"></input>
<i class="fa-solid fa-circle-xmark"></i>
<i class="fa-solid fa-circle-check"></i>
<p id="p">Error Message</p>
</div>
<div class="inputs">
<label for="confpassword">Confirm Password</label>
<input type="password" id="confpassword" placeholder =" Confirm Password" name="confpassword"></input>
<i class="fa-solid fa-circle-xmark"></i>
<i class="fa-solid fa-circle-check"></i>
<p>Error Message</p>
</div>
<div class="inputs">
<label for="email">Email:</label>
<input type="email" id="email" placeholder ="Email" name="email"></input>
<i class="fa-solid fa-circle-xmark"></i>
<i class="fa-solid fa-circle-check"></i>
<p>Error Message</p>
</div>
<button class="submitbtn" type="submit">Submit</button>
</div>
</div>
</form>
<script src="./teacher.js"></script>
</body>

and with this PHP code:

<?php
$servername = "host";
$username = "username";
$password = "password";
$dbname = "demo";


$name = $_GET['username'];
$skool = $_GET['skool'];
$email = $_GET['email'];
$pwd = $_GET['password'];
mkdir($skool, 0700);
$myfile = fopen("$skool/index.html", "w");
$myfile1 = fopen("$skool/index.css", "w");
$myfile2 = fopen("$skool/submit.php", "w");
$script = "";
$txt = "<!doctype HTML>
<html>
  <head>
    <form action='submit.php'>
    <title>Welcome!!</title>
    <link rel='stylesheet' href='index.css'/>
    <script src='index.js'></script>
  </head>
  <body>
    <div>
      <h1>Welcome!!</h1>
      <h4>We hope you enjoy using our website. So that you can <br>see the right things for your students, please answer<a href='#' style='text-decoration:none;'>A Few Questions</a></h4></div>
      <li>
    <h3>What sort of school do you run?</h3>
    
    <div>
        <input type='radio' name='question-1-answers' id='question-1-answers-A' value='A' />
        <label for='question-1-answers-A'> A Primary School </label>
    </div>
    
    <div>
        <input type='radio' name='question-1-answers' id='question-1-answers-B' value='B' />
        <label for='question-1-answers-B'> A Secondary School</label>
    </div>
    
    <div>
        <input type='radio' name='question-1-answers' id='question-1-answers-C' value='C' />
        <label for='question-1-answers-C'>A University</label>
    </div>
    <h3>What part of the Uk do you live in?</h3>
    
    <div>
        <input type='radio' name='question-2-answers' id='question-1-answers-A' value='A' />
        <label for='question-1-answers-A'>England</label>
    </div>
    
    <div>
        <input type='radio' name='question-2-answers' id='question-1-answers-B' value='B' />
        <label for='question-1-answers-B'>Scotland</label>
    </div>
    
    <div>
        <input type='radio' name='question-2-answers' id='question-1-answers-C' value='C' />
        <label for='question-1-answers-C'>Wales</label>
    </div>
    <h3>Name of reward system</h3>
    <div>
        <input class='input'type='text' placeholder='Reward Name'></input>
    </div>
    <button class='button' onclick ='sub()'>Submit</button>
    ";
$txta = "input{
    width:100%;
    
}
.input{
    width:35%;
    }
.button{
    padding 20px 40px;
    background: #ee00bb;
}";
fwrite($myfile, $txt);
fwrite($myfile1, $txta);
fclose($myfile);
fclose($myfile1);
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

$sql = "INSERT INTO `teacher` (`School`, `Email Address`, `Password`, `Username`)
VALUES ('$skool', '$email', '$pwd', '$name')";

if ($conn->query($sql) === TRUE) {
  echo "New record created successfully";
} else {
  echo "Error: " . $sql . "<br>" . $conn->error;
}



$conn->close();

?>

This is the HTML/PHP code for the signup page. I am not sure how to use the content inserted into this database to make a login page that checks if a row has all the correct credentials. I have tried tutorials but that hasn't worked out for me. how do I use this code to make a login page? I know how to code the elements, i just need help with the PHP side

javascriptphphtmljquerycss


Solution 1:[1]

Before we get into my answer, I need to warn you that your code is prone to SQL injection, you will need to ensure that any user-defined input is passed to the query as a parameter that a tool, such as PDO will take into account and pass to the query in a safer way (PDO is not the only possibility, but it's certainly a possibility), because the user might be a malicious hacker. A solution is to use PDO, where your parameters would be passed as query parameters and sanitized by PDO for you. The exception from this rule is $pwd, because you need to behave in a special manner with it.

If you store the email, the username and the password as they were defined by the user, then, if any malicious person or program gets access by any means to your database, they will find out which email (identity) is protected by which password. And then they will be able to hack the account of the user. Also, if the user happens to use the same password across websites (which is frequently the case), then the hacker will also gain access to their other accounts, like gmail, paypal, etc. So, to protect against such threats, you should generate a secure hash for the password and do that consistently. This means that not even the program will know the actual password. So, the login would work as follows:

  • the user enters email/username
  • the program searches for the user by email/username, like select password from teacher where username = ?
  • if there are no records found, then the user is surely not existent
  • if there was a record, then call your function that generate a secure hash for the password and compare its result with the stored hash generated from the password when the user registered or changed his/her password for the last time. If there is a match, then the login should succeed, otherwise it should fail
  • if the login has succeeded, store the user's id into $_SESSION and if it failed, then provide a response that ensures that the user will know about the failure
  • whenever you need to check whether the user is logged in, check whether there is an entry for it in $SESSION, like isset($_SESSION["id"])

At the registration don't store the actual password. Generate a secure hash for the password and store the result. To make sure that you do not store the wrong password, have two fields for the password: one for the actual password and another for confirming that the password was typed in correctly.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions