Php Mysql Jquery Real Time User Login Status
This is a tutorial for creating a login organisation with the help of HTML, PHP, and MySQL. Your website needs to be dynamic and your visitors demand to have instant access to information technology. Therefore, they desire to log in every bit many times equally possible. The login authentication system is very mutual for any web application. It allows registered users to access the website and members-just features. It is as well helpful when nosotros desire to store data for users. It covers everything from shopping sites, educational sites, and membership sites, etc.
This tutorial is covered in iv parts.
Table of Contents
- Signup System
- Login Organization
- Welcome Page
- Logout Script
i) Building a Signup system
In this office, We volition create a signup system that allows users to create a new business relationship to the system. Our first footstep is to create a HTML registration course. The form is pretty simple to create. It just asks for a name, e-mail, password, and confirm countersign. Email addresses will be unique for every user. Multiple accounts for the aforementioned email address are not allowed. Information technology will prove an fault message to the users who endeavour to create multiple accounts with the same e-mail address.
Step i: Creating Registration Form in HTML
We will create a PHP file named register.php with the following code in it. This is a unproblematic HTML form with some basic validation. If yous are non familiar with HTML so you tin get it from many online sites who give ready-made html5 login form templates.
<!DOCTYPE html> <html lang="en"> <caput> <meta charset="UTF-8"> <title>Sign Upwards</championship> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.iv.1/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-dr.-12"> <h2>Register</h2> <p>Please make full this class to create an account.</p> <form action="" method="post"> <div class="course-group"> <label>Full Proper name</label> <input blazon="text" proper name="name" class="grade-control" required> </div> <div class="grade-grouping"> <label>Email Address</characterization> <input blazon="electronic mail" proper noun="e-mail" grade="course-control" required /> </div> <div form="form-group"> <label>Password</label> <input blazon="password" proper name="password" form="course-control" required> </div> <div course="form-group"> <label>Confirm Countersign</label> <input type="password" proper noun="confirm_password" class="grade-control" required> </div> <div course="form-group"> <input type="submit" name="submit" form="btn btn-chief" value="Submit"> </div> <p>Already have an account? <a href="login.php">Login here</a>.</p> </form> </div> </div> </div> </trunk> </html> The output of the to a higher place HTML form will await like this.
All the input fields are required by adding the "required" attribute which is the default HTML aspect. The use of type="e-mail" will validate the e-mail address provided past users and gives an fault if the email address is not valid. For the registration form, nosotros accept used bootstrap for rapid development. If you desire to salvage your time on HTML code you lot tin always use some free html5 templates for your project.
Stride 2: Creating the MySQL Database Tabular array
Y'all will demand to create a new database with whatsoever suitable name y'all want. Later that please execute the below SQL query to create the user's table within your newly created MySQL database.
CREATE Table `users` ( `id` int(11) unsigned NOT Zilch AUTO_INCREMENT, `name` varchar(75) Not Zero, `password` varchar(255) NOT NULL, `email` varchar(100) Non Zilch, PRIMARY Central (`id`), UNIQUE Cardinal `e-mail` (`e-mail`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1; Footstep 3: Creating Database Configuration File
Now, nosotros have created the users table. Permit'due south create a new PHP file named config.php to connect with the MySQL database. Paste the following code in the config.php file and change the database name to whatsoever you choose while creating the database.
<?php define('DBSERVER', 'localhost'); // Database server define('DBUSERNAME', 'root'); // Database username define('DBPASSWORD', ''); // Database password define('DBNAME', 'demo'); // Database proper name /* connect to MySQL database */ $db = mysqli_connect(DBSERVER, DBUSERNAME, DBPASSWORD, DBNAME); // Check db connection if($db === fake){ dice("Error: connexion fault. " . mysqli_connect_error()); } ?> Step 4: Creating a Session File
Let'due south create a file named session.php. In this file, we volition kickoff the session and check if a user is already logged in, if yes then we will redirect the user to welcome.php file.
<?php // Start the session session_start(); // if the user is already logged in then redirect user to welcome folio if (isset($_SESSION["userid"]) && $_SESSION["userid"] === true) { header("location: welcome.php"); exit; } ?> Pace 5: Create Registration Grade in PHP
Finally, it'due south time to create a PHP code that allows users to annals their accounts into the system. This PHP lawmaking will warning users with an fault if any user is already registered with the aforementioned email address.
Replace the following code in the register.php file.
<?php require_once "config.php"; require_once "session.php"; if ($_SERVER["REQUEST_METHOD"] == "Postal service" && isset($_POST['submit'])) { $fullname = trim($_POST['proper name']); $email = trim($_POST['email']); $countersign = trim($_POST['password']); $confirm_password = trim($_POST["confirm_password"]); $password_hash = password_hash($password, PASSWORD_BCRYPT); if($query = $db->prepare("SELECT * FROM users WHERE email = ?")) { $error = ''; // Demark parameters (southward = cord, i = int, b = blob, etc), in our case the username is a string so nosotros utilise "s" $query->bind_param('s', $email); $query->execute(); // Store the result so we can check if the account exists in the database. $query->store_result(); if ($query->num_rows > 0) { $mistake .= '<p grade="error">The email address is already registered!</p>'; } else { // Validate password if (strlen($password ) < half-dozen) { $error .= '<p class="mistake">Password must have atleast 6 characters.</p>'; } // Validate confirm password if (empty($confirm_password)) { $error .= '<p class="error">Please enter confirm password.</p>'; } else { if (empty($error) && ($password != $confirm_password)) { $fault .= '<p class="error">Countersign did non match.</p>'; } } if (empty($error) ) { $insertQuery = $db->prepare("INSERT INTO users (proper noun, electronic mail, countersign) VALUES (?, ?, ?);"); $insertQuery->bind_param("sss", $fullname, $email, $password_hash); $result = $insertQuery->execute(); if ($result) { $mistake .= '<p class="success">Your registration was successful!</p>'; } else { $error .= '<p grade="fault">Something went wrong!</p>'; } } } } $query->shut(); $insertQuery->close(); // Close DB connection mysqli_close($db); } ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <championship>Sign Up</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.four.i/css/bootstrap.min.css"> </head> <body> <div grade="container"> <div class="row"> <div class="col-md-12"> <h2>Register</h2> <p>Please fill this form to create an account.</p> <?php echo $success; ?> <?php echo $error; ?> <form action="" method="postal service"> <div class="form-group"> <characterization>Full Name</label> <input type="text" name="name" class="form-control" required> </div> <div form="class-group"> <label>Electronic mail Accost</label> <input type="electronic mail" name="email" class="grade-control" required /> </div> <div class="form-group"> <label>Password</label> <input type="password" name="password" grade="form-control" required> </div> <div class="form-group"> <label>Confirm Password</label> <input type="password" name="confirm_password" class="form-control" required> </div> <div class="form-group"> <input type="submit" proper noun="submit" course="btn btn-primary" value="Submit"> </div> <p>Already have an account? <a href="login.php">Login here</a>.</p> </form> </div> </div> </div> </body> </html> Once user click on submit button it will check if $_SERVER["REQUEST_METHOD"] == "POST" and $_POST['submit'] variable has been set. For security concerns, nosotros ever suggest non to shop the password as plain text in the database. We accept used password_hash() function which creates a new password hash using a stiff one-way hashing algorithm.
The above PHP script volition validate that no user is registered with the same email address and besides validate countersign. Later validation is confirmed we store the user-provided information in the users' table and alarm the user that registration was successful.
2) Edifice a Login Arrangement
In this part, we will create a login form to allow users to access the restricted area of the system. In our case, the restricted area is a welcome page which we will comprehend in the next office.
Stride 1: Creating a Login Form in HTML
Below is the Login Form in HTML. Paste it in a file named login.php
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login</championship> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> </head> <trunk> <div class="container"> <div form="row"> <div course="col-md-12"> <h2>Login</h2> <p>Please fill in your electronic mail and countersign.</p> <grade activeness="" method="post"> <div class="form-group"> <characterization>Electronic mail Accost</characterization> <input type="email" proper noun="email" course="class-control" required /> </div> <div class="grade-group"> <label>Password</characterization> <input type="password" proper noun="password" class="form-control" required> </div> <div grade="form-grouping"> <input type="submit" proper name="submit" class="btn btn-master" value="Submit"> </div> <p>Don't have an account? <a href="register.php">Annals hither</a>.</p> </form> </div> </div> </div> </body> </html> The output of the above lawmaking volition wait similar this
Step two: Creating a Login Arrangement in PHP
Afterward creating the login form in HTML, we volition write a code to validate login credentials. On form submit we will cheque that the electronic mail and countersign are filled. If they filled and then we will execute a SELECT query to find the record in a database on the footing of email and password. If any record found, then we will shop the "userID" in session and the user is redirected to the welcome.php file, otherwise, the user is alerted with an mistake message.
Let's supplant the following code in the login.php file.
<?php require_once "config.php"; require_once "session.php"; $error = ''; if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['submit'])) { $e-mail = trim($_POST['email']); $countersign = trim($_POST['password']); // validate if email is empty if (empty($email)) { $mistake .= '<p course="fault">Delight enter e-mail.</p>'; } // validate if countersign is empty if (empty($password)) { $error .= '<p class="mistake">Delight enter your password.</p>'; } if (empty($mistake)) { if($query = $db->set up("SELECT * FROM users WHERE email = ?")) { $query->bind_param('s', $email); $query->execute(); $row = $query->fetch(); if ($row) { if (password_verify($password, $row['password'])) { $_SESSION["userid"] = $row['id']; $_SESSION["user"] = $row; // Redirect the user to welcome page header("location: welcome.php"); go out; } else { $error .= '<p class="error">The password is not valid.</p>'; } } else { $fault .= '<p form="error">No User exist with that email address.</p>'; } } $query->close(); } // Close connection mysqli_close($db); } ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/four.4.1/css/bootstrap.min.css"> </caput> <trunk> <div class="container"> <div class="row"> <div class="col-md-12"> <h2>Login</h2> <p>Delight fill in your e-mail and countersign.</p> <?php repeat $fault; ?> <form action="" method="post"> <div course="form-group"> <label>Electronic mail Accost</label> <input type="electronic mail" name="email" grade="form-control" required /> </div> <div class="form-grouping"> <characterization>Password</label> <input type="password" proper noun="password" class="form-control" required> </div> <div class="class-group"> <input type="submit" proper name="submit" class="btn btn-main" value="Submit"> </div> <p>Don't accept an business relationship? <a href="register.php">Register hither</a>.</p> </form> </div> </div> </div> </body> </html> 3) Creating a Welcome Page
Below is the code for the welcome.php file. Users volition exist redirected to this folio after a successful login process. Nosotros have added some code at the top of the page to check if the user is not logged in, then redirect the user to the login folio.
Let'southward create a welcome.php file and paste the post-obit lawmaking in it.
<?php // starting time the session session_start(); // Check if the user is not logged in, then redirect the user to login page if (!isset($_SESSION["userid"]) || $_SESSION["userid"] !== true) { header("location: login.php"); exit; } ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-viii"> <title>Welcome <?php repeat $_SESSION["name"]; ?></title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/iv.iv.1/css/bootstrap.min.css"> </caput> <torso> <div class="container"> <div class="row"> <div class="col-doctor-12"> <h1>Hullo, <strong><?php repeat $_SESSION["name"]; ?></potent>. Welcome to demo site.</h1> </div> <p> <a href="logout.php" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Log Out</a> </p> </div> </div> </body> </html> 4) The Logout script
Finally, Let's create a logout.php file with the following lawmaking in it.
<?php // Beginning the session session_start(); // Destroy the session. if (session_destroy()) { // redirect to the login page header("Location: login.php"); exit; } ?> Once the user clicks on the Log Out link, the above script, will exist called to destroy the session and redirect user to the login.php file.
Conclusion
In this tutorial, I explained how you lot can create a Login System using HTML, PHP and MySQL. Once you understand how simple it is to create a login system yous can add other features like reset password, forgot password, verify email address, edit user'due south profile, etc.
Php Mysql Jquery Real Time User Login Status
DOWNLOAD HERE
Source: https://habr.com/en/sandbox/140948/
Posted by: 9newsonlinehhg.blogspot.com
comment 0 comments
more_vert