PHP: Confirm Password

To stop our webpage from having thousands of accounts that are not being used because people entered their passwords wrong and then had to sign up again, we chose to set up a confirm password field. Because I was not sure how to do it, I had to do some research. I found a YouTube tutorial that explained the whole thing very well. You can see it below:

To make sure I had the knowledge to set it up, I then read some threads on stackoverflow.com where people tried to do similar things. I will cite them in my references. Then, I moved to our code. The very first thing I needed was the field. So, I added that to the form we already had in the index.php file:


<input type="password" name="confirm_password" value="" placeholder="Confirm Password"/>

The rest that was needed was to compare the two entered passwords and send out an alert message in case they would not match. You can see the code I used for that in the following:


&amp;lt;?php

    if(isset($_POST[&amp;quot;signup&amp;quot;])) {

        …

        $password = $_POST['password'];

        $confirm_password = $_POST['confirm_password'];

        …

        if ($password != $confirm_password) {

            $if ($password != $confirm_password) {
             $message = "Passwords do not match. ";
             echo '<div class="message">'.$message.'</div>';

        …

        } else {

            $query = "INSERT INTO users (name, password, student_id, gender) VALUES ('{$name}', '{$password}', '{$student_id}','{$gender}')";

            $result = mysqli_query($connect, $query); 

            $message = "Your account has been registered!";

            echo $message; 

                if($result) {

                        $message = "Success, your account was added!";   

                    } else {

                        $message = "Sorry, something went wrong!"; 

                    }

        …

        $password = ""; 

        $confirm_password = "";

        …

 

In the end, I tested it. To show that better, I temporarily changed my input type to “text” :

 <input type="text" name="password" value="" placeholder="Password"/>
 <input type="text" name="confirm_password" value="" placeholder="Confirm Password"/>

In the picture, you can see me entering two different passwords and then the alert message at the top of the page:

 Screenshot (264) Screenshot (265)


References:

Learn More, 2013. PHP & MySQL Confirm Password. Available from: https://www.youtube.com/watch?v=byAXL0E_5sA [Accessed: 13th March 2015]

User3665022, 2014. Stack Overflow. PHP confirm password and check if user already exists in mySQL [closed]. Available from: http://stackoverflow.com/questions/23806936/php-confirm-password-and-check-if-user-already-exists-in-mysql [Accessed: 13th March 2015]

Vijaykarthik, 2014. Stack Overflow. How to validate email id and password & confirm password in php. Available from http://stackoverflow.com/questions/27216595/how-to-validate-email-id-and-password-confirm-password-in-php [Accessed: 13th March 2015]

Advertisements

New Design for Login page, Color Scheme and where to find Turtle-Talks

After I spent a lot of time working on the PHP part of my project and setting up the connection to the database as well as the Sign-up, Log-in and Post form, I felt like it was alright to work a bit on the design and layout. Since we decided on our Name (Turtle-Talks), we thought it might be a good idea to stick to ocean and turtle related colours, like green and blue. Also, my group decided that we wanted a modern design.

In our last workshop, we learned how to use jQuery and how to make a menu toggle down. We thought it would be a nice touch for our Login page. So far, once the page is accessed, people see this:

Screenshot (262)

They can either enter their login information or click on “No account?”. Doing that, a small form pops up that enables a new user to register. Once that is done, the user can log in:

Screenshot (263)

Here, you can see the code for the toggle up menu. To get it to work, I created two “div” classes called “sign_up_box” and “login_toggle” in our index.php file:

Extract from our scripts2.js file:

$(document).ready(function() {
 
 $(".sign_up_box").hide();
 $(".login_toggle").click(function(){
 console.log("clicked box");
 $(".sign_up_box").slideToggle();
 });
 
});

Extract from our index.php file:

<div class="sign_up_box">
<p>No account? Sign up.</p>
<form action="index.php" method="post" autocomplete="off">
<div class="register-switch">
<input type="radio" name="gender" value="female" id="sex_f" class="register-switch-input" checked>
<label for="sex_f" class="register-switch-label">Female</label>
<input type="radio" name="gender" value="male" id="sex_m" class="register-switch-input">
<label for="sex_m" class="register-switch-label">Male</label>
</div>
<input type="text" name="name" value="" placeholder="Name"/>
<input type="password" name="password" value="" placeholder="Password"/>
<input type="password" name="confirm_password" value="" placeholder="Confirm Password"/>
<input type="text" name="student_id" value="" placeholder="Student ID"/>
<div class="dropdown">
<input type="submit" name="signup" value="Sign up!"/> </p>
</form>
</div>

Also, we now uploaded a temporary version of Turtle Talks to the Dakar server. It has been updated since then and has to be uploaded again, but it can still be accessed. It can be found here: http://dakar.bournemouth.ac.uk/~dbuttner/project/public/index.php

References:

Buttner, D., Hughes, R., Tina, C., Negasi, I., 2015. Turtletalks. Available from: http://dakar.bournemouth.ac.uk/~dbuttner/project/public/index.php [Accessed: 13th March 2015]