html form validation using php - php

Question

I have created a html form which has signup as well as login. Firstly I want to register the user using signup form and then make him login then redirect to another page. For this I'm using php with apache(xampp) server. The signup panel is working fine, but when I try to login, black column is added to database
My html code is like this
<form method="POST" action="yoga_signup.php">
<div class="row" style=" margin-top:4rem; margin-left:24rem;">
<div class="col-md-6 mx-auto p-0">
<div class="card">
<div class="login-box">
<div class="login-snip"> <input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1" class="tab">Login</label> <input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab">Sign Up</label>
<div class="login-space">
<div class="login">
<input type="hidden" name="for_page" value="login">
<div class="group"> <label for="user" class="label">Username</label> <input id="user" type="text" class="input" name="username" placeholder="Enter your username" > </div>
<div class="group"> <label for="pass" class="label">Password</label> <input id="pass" type="password" name="password_1" class="input" data-type="password" placeholder="Enter your password" > </div>
<div class="group"> <input id="check" type="checkbox" class="check" checked> <label for="check"><span class="icon"></span> Keep me Signed in</label> </div>
<div class="group"> <input type="submit" class="button" value="Sign In"> </div>
<div class="hr"></div>
</div>
<div class="sign-up-form">
<input type="hidden" name="for_page" value="signup">
<div class="group"> <label for="user" class="label">Username</label> <input id="user" type="text" name="username" class="input" placeholder="Create your Username"> </div>
<div class="group"> <label for="pass" class="label">Password</label> <input id="pass" type="password" name="password_1" class="input" data-type="password" placeholder="Create your password" > </div>
<div class="group"> <label for="pass" class="label">Repeat Password</label> <input id="pass" type="password" name="password_2" class="input" data-type="password" placeholder="Repeat your password"> </div>
<div class="group"> <label for="pass" class="label">Email Address</label> <input id="pass" type="text" class="input" name="email" placeholder="Enter your email address" > </div><br>
<div class="group"> <input type="submit" class="button" value="Sign Up"> </div>
<div class="hr"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
and my php code is this
<?php
session_start();
$conn= new mysqli("localhost","root","","yoga");
if($_SERVER["REQUEST_METHOD"]=="POST"){
$TypeOfRequest=$_POST['for_page'];
if($TypeOfRequest=="signup"){
$user=$_POST['username'];
$pass_1=$_POST['password_1'];
$pass_2=$_POST['password_2'];
$mail=$_POST['email'];
if($pass_1===$pass_2){
$val=" INSERT INTO yoga_login(username,password_1,password_2,email) VALUES('$user','$pass_1','$pass_2','$mail')";
if($conn->query($val)===TRUE){
header('Location: login.html');
}else{
echo "registration unsucessfull";
}
}
if($pass_1!==$pass_2){
echo "please enter the same password";
}
}
$TypeofRequest = $_POST['for_page'];
if($TypeofRequest=="login"){
$user=$_POST['username'];
$pass_1=$_POST['password_1'];
$sql="SELECT * FROM yoga_login WHERE username='$user' AND password='$pass_1'";
$RunQuery = mysqli_query($conn,$sql);
$CheckNumberOfUsers = mysqli_num_rows($RunQuery);
//echo $CheckNumberOfUsers;
if($CheckNumberOfUsers==1){
$_SESSION['username'] = $user;
header('location:blogs.html');
}else{
echo "invalid credential";
}
}
mysqli_close($conn);
}

Answer 1

You can dump out what you are sending in the yoga_signup.php at the start of the file:
die('<pre>' . print_r($_POST, true) . '</pre>');
Then you can see this:
Array
(
[tab] => on
[for_page] => signup
[username] =>
[password_1] =>
[password_2] =>
[email] =>
)
so the for_page field's value is signup - and I was pressing the Sign In button
Then you go back to the HTML file and you can see that you are using the same form for the request, so with the second <input type="hidden" name="for_page" value="signup">, you are overwriting the first for_page value.
So instead of this you should create 2 forms and set them like this:
<div class="row" style=" margin-top:4rem; margin-left:24rem;">
<div class="col-md-6 mx-auto p-0">
<div class="card">
<div class="login-box">
<div class="login-snip">
<input id="tab-1" type="radio" name="tab" class="sign-in" checked>
<label for="tab-1" class="tab">Login</label>
<input id="tab-2" type="radio" name="tab" class="sign-up">
<label for="tab-2" class="tab">Sign Up</label>
<div class="login-space">
<form method="POST" action="yoga_signup.php">
<div class="login">
<input type="hidden" name="for_page" value="login">
<div class="group">
<label for="user" class="label">Username</label>
<input id="user" type="text" class="input" name="username" placeholder="Enter your username" >
</div>
<div class="group">
<label for="pass" class="label">Password</label>
<input id="pass" type="password" name="password_1" class="input" data-type="password" placeholder="Enter your password" >
</div>
<div class="group">
<input id="check" type="checkbox" class="check" checked>
<label for="check">
<span class="icon">
</span> Keep me Signed in
</label>
</div>
<div class="group"> <input type="submit" class="button" value="Sign In"> </div>
<div class="hr"></div>
</div>
</form>
<form method="POST" action="yoga_signup.php">
<div class="sign-up-form">
<input type="hidden" name="for_page" value="signup">
<div class="group"> <label for="user" class="label">Username</label> <input id="user" type="text" name="username" class="input" placeholder="Create your Username"> </div>
<div class="group"> <label for="pass" class="label">Password</label> <input id="pass" type="password" name="password_1" class="input" data-type="password" placeholder="Create your password" > </div>
<div class="group"> <label for="pass" class="label">Repeat Password</label> <input id="pass" type="password" name="password_2" class="input" data-type="password" placeholder="Repeat your password"> </div>
<div class="group"> <label for="pass" class="label">Email Address</label> <input id="pass" type="text" class="input" name="email" placeholder="Enter your email address" > </div><br>
<div class="group"> <input type="submit" class="button" value="Sign Up"> </div>
<div class="hr"></div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
Parameters in the PHP file after modification:
Array
(
[for_page] => login
[username] => asdf
[password_1] => asdf
)
Helpful sidenotes to improve your code:
passwords should be encrypted in the database
the mysql query is vulnerable against SQL injection
the second password field used to be required, because if the input type is password, then you can't see the characters, so it's like a proofread for the user to make sure that you won't miss the password. Because of this you don't need to store it in the database, but use it to check if it was written correctly in the first field.
use the redirection headers with die
close the mysql connection before the redirection
I found some issues at the login part of the code.
Instead of the password filed in the SQL query string you should use an existing password field from your database; for example the password_1 field.
Replacing that and fixing some minor issues, plus a bit of beautifying you will get this code for the login part:
if($TypeofRequest=="login"){
$username = $_POST['username'];
$password = $_POST['password_1'];
$sql="SELECT * FROM yoga_login WHERE username='{$username}' AND password_1='{$password}'";
$result = $conn->query($sql);
$conn->close();
if (empty($result)) {
die('invalid credentials');
}
$_SESSION['username'] = $user;
header('location:blogs.html');
die();
}