html form validation using 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);
}

having no idea about that can u help me in more detailed way — Codewizard_26, May 15 '20 at 19:32
@Codewizard PDO is an alternative to mysqli, generally considered a better alternative. [Here is the manual](https://www.php.net/manual/en/book.pdo.php). There are also wrapper classes that people have created that make using PDO easier. There are dozens of these, but I personally recommend [GrumpyPDO](https://github.com/GrumpyCrouton/GrumpyPDO) (Disclaimer: I am the author of GrumpyPDO) — GrumpyCrouton, May 15 '20 at 19:36

Random Dude · Accepted Answer · 2020-05-15T20:35:10.400

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();
    }

it showss the following error whenever i login Warning: mysqli_num_rows() expects parameter 1 to be mysqli_result, bool given in C:\xampp\htdocs\yoga_signup.php on line 38 invalid credential — Codewizard_26, May 15 '20 at 20:02
should i place the php changes above the if condition of login — Codewizard_26, May 15 '20 at 20:08
That one line php code is just to help you debugging your application. Since you got a new error it seems like you have one more issue in your php code. Checking for ya' — Random Dude, May 15 '20 at 20:11
I added the fixes for the php code too for you. All you need to do is to replace the if case of the login and you are done. — Random Dude, May 15 '20 at 20:36

html form validation using php

1 Answers1