Script for login logout and view using php mysql and bootstrap

Question

In this tutorial, we are going to learn how to engender a secure PHP 7 utilizer authentication and authenticate system with MySQL database utilizing procedural programming approach. In the following demo, you can check out the final output of this PHP 7 Authenticate system tutorial.
Utilizer authentication is a standard security mechanism, It sanctions identified users to access any digital application or website. It rigorously obviates unidentified users from accessing web or mobile application.

Nội dung chính Show

What We Will Learn:
Prerequisite
PHP 7 File & Folder Structure
Create Database & Table in MySQL

We utilize digital products such as Facebook, Twitter, Gmail in our day to day life and we are virtually acclimated with utilizer registration and authenticate mechanism. You engender an account afore authenticate in to these applications this way you can utilize their features.

What We Will Learn:

In this article, we will highlight some of the core features that are required to build a complete login and registration system with PHP & MySQL.

Creating Signin and Signup forms with Bootstrap 4
Making MySQL database connection with PHP 7 project
Managing user data in session
PHP server-side validation
Handling error messages
Sending user verification email using SwiftMailer plugin
Securing a password with the password hash mechanism
Password verification
URL redirection based on user’s logged-in state
Display logged-in user’s data using PHP 7 session
Logout and destroying the session

Prerequisite

Before you start creating a secure PHP 7 Login & User Registration system, you must set up a local web server using MAMP or XAMPP.

PHP 7 File & Folder Structure

Open MAMP or XAMPP and start your web server then and go to htdocs folder and create the following folder and files which are essential to develop our user authentication system.

\-- php-user-authentication
  |-- config
      |--- db.php
  |-- controllers
      |--- login.php
      |--- register.php
      |--- user_activation.php
  |-- css
      |--- style.css
  |-- lib
      |--- 3rd party plugins
  |-- dashboard.php
  |-- header.php
  |-- index.php
  |-- logout.php
  |-- signup.php
  |-- user_verification.php

Create Database & Table in MySQL

Our local web server is up and running, go to <a href="http://localhost:8888/phpMyAdmin" rel="noopener noreferrer" target="_blank">PHPMyAdmin</a>.</p> <p>First create database <code>`your_database_name`</code>.</p> <p>Create table <code>`table_name`</code> in the MySQL database.</p> <p>You can create columns manually or even you can execute the below sql script from <code>SQL</code> tab to create columns with following values.</p> <pre><code class="language-sql">CREATE TABLE `users` ( `id` int(11) NOT NULL, `firstname` varchar(100) NOT NULL, `lastname` varchar(100) NOT NULL, `email` varchar(50) NOT NULL, `mobilenumber` varchar(50) NOT NULL, `password` varchar(255) NOT NULL, `token` varchar(255) NOT NULL, `is_active` enum('0','1') NOT NULL, `date_time` date NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8;</code></pre> <h2>Connect Database with PHP 7</h2> <p><span id="ezoic-pub-ad-placeholder-113" class="ezoic-adpicker-ad"></span><span class="ezoic-ad ezoic-at-0 banner-1 banner-1113 adtester-container adtester-container-113" data-ez-name="laravelcode_com-banner-1"><span id="div-gpt-ad-laravelcode_com-banner-1-0" ezaw="336" ezah="280" style="position:relative;z-index:0;display:inline-block;padding:0;width:100%;max-width:1200px;margin-left:auto!important;margin-right:auto!important;min-height:280px;min-width:336px" class="ezoic-ad"><script data-ezscrex="false" data-cfasync="false" type="text/javascript" style="display:none">if(typeof ez_ad_units != 'undefined'){ez_ad_units.push([[336,280],'laravelcode_com-banner-1','ezslot_6',113,'0','0'])};__ez_fad_position('div-gpt-ad-laravelcode_com-banner-1-0');Add the following code in <strong>config/db.php</strong> file.</p> <pre><code class="language-php"><?php // Enable us to use Headers ob_start(); // Set sessions if(!isset($_SESSION)) { session_start(); } $hostname = "localhost"; $username = "phpdemo"; $password = "4Mu99BhzK8dr4vF1"; $dbname = "positronx_db"; $connection = mysqli_connect($hostname, $username, $password, $dbname) or die("Database connection not established.") ?></code></pre> <p>The <a href="https://www.php.net/manual/en/function.ob-start.php" rel="noopener noreferrer" target="_blank">ob_start()</a> method keeps an eye on output buffering and allow us to use Header.</p> <p><span id="ezoic-pub-ad-placeholder-114" class="ezoic-adpicker-ad"></span><span class="ezoic-ad ezoic-at-0 large-leaderboard-2 large-leaderboard-2114 adtester-container adtester-container-114" data-ez-name="laravelcode_com-large-leaderboard-2"><span id="div-gpt-ad-laravelcode_com-large-leaderboard-2-0" ezaw="300" ezah="250" style="position:relative;z-index:0;display:inline-block;padding:0;min-height:250px;min-width:300px" class="ezoic-ad"><script data-ezscrex="false" data-cfasync="false" type="text/javascript" style="display:none">if(typeof ez_ad_units != 'undefined'){ez_ad_units.push([[300,250],'laravelcode_com-large-leaderboard-2','ezslot_5',114,'0','0'])};__ez_fad_position('div-gpt-ad-laravelcode_com-large-leaderboard-2-0');The <strong>$_SESSION</strong> allow us to save data that we can use in our PHP application, session are alive as long as the browser window is open.</p> <h2>Design User Registration & Login Form UI with Bootstrap 4</h2> <p>To design a user registration & login form UI we are using Bootstrap 4, add the Bootstrap CSS, JavaScript and jQuery link in the head section of the HTML layout.</p> <p>Add the following code in the <strong>signup.php</strong>.</p> <pre><code class="language-html"><!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <link rel="stylesheet" href="./css/style.css"> <title>PHP User Registration System Example</title>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> </head> <body> <div class="App"> <div class="vertical-center"> <div class="inner-block"> <form action="" method="post"> <h3>Register</h3> <div class="form-group"> <label>First name</label> <input type="text" class="form-control" name="firstname" id="firstName" /> </div> <div class="form-group"> <label>Last name</label> <input type="text" class="form-control" name="lastname" id="lastName" /> </div> <div class="form-group"> <label>Email</label> <input type="email" class="form-control" name="email" id="email" /> </div> <div class="form-group"> <label>Mobile</label> <input type="text" class="form-control" name="mobilenumber" id="mobilenumber" /> </div> <div class="form-group"> <label>Password</label> <input type="password" class="form-control" name="password" id="password" /> </div> <button type="submit" name="submit" id="submit" class="btn btn-outline-primary btn-lg btn-block"> Sign up </button> </form> </div> </div> </div> </body> </html></code></pre> <p>Add the following code in the <strong>index.php</strong> to create a login form layout.</p> <pre><code class="language-html"><!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> <title>PHP Login System</title>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> </head> <body>  <div class="App"> <div class="vertical-center"> <div class="inner-block"> <form action="" method="post"> <h3>Login</h3> <div class="form-group"> <label>Email</label> <input type="email" class="form-control" name="email_signin" id="email_signin" /> </div> <div class="form-group"> <label>Password</label> <input type="password" class="form-control" name="password_signin" id="password_signin" /> </div> <button type="submit" name="login" id="sign_in" class="btn btn-outline-primary btn-lg btn-block">Sign in</button> </form> </div> </div> </div> </body> </html></code></pre> <p>To add styling in PHP user authentication app go to <strong>css/style.css</strong> and add the following code.</p> <pre><code class="language-css">* { box-sizing: border-box; } body { font-weight: 400; background-color: #EEEFF4; } body, html, .App, .vertical-center { width: 100%; height: 100%; } .navbar { background: #1833FF!important; width: 100%; } .btn-outline-primary { border-color: #1833FF; color: #1833FF; } .btn-outline-primary:hover { background-color: #1833FF; color: #ffffff; } .vertical-center { display: flex; text-align: left; justify-content: center; flex-direction: column; } .inner-block { width: 450px; margin: auto; background: #ffffff; box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2); padding: 40px 55px 45px 55px; transition: all .3s; border-radius: 20px; } .vertical-center .form-control:focus { border-color: #2554FF; box-shadow: none; } .vertical-center h3 { text-align: center; margin: 0; line-height: 1; padding-bottom: 20px; } label { font-weight: 500; }</code></pre> <h2>Build User Registration System</h2> <p>To create a secure user registration system, we need to get inside the <strong>controllers/register.php</strong> file and place the following code inside of it.</p> <pre><code class="language-php"><?php // Database connection include('config/db.php'); // Swiftmailer lib require_once './lib/vendor/autoload.php'; // Error & success messages global $success_msg, $email_exist, $f_NameErr, $l_NameErr, $_emailErr, $_mobileErr, $_passwordErr; global $fNameEmptyErr, $lNameEmptyErr, $emailEmptyErr, $mobileEmptyErr, $passwordEmptyErr, $email_verify_err, $email_verify_success; // Set empty form vars for validation mapping $_first_name = $_last_name = $_email = $_mobile_number = $_password = ""; if(isset($_POST["submit"])) { $firstname = $_POST["firstname"]; $lastname = $_POST["lastname"]; $email = $_POST["email"]; $mobilenumber = $_POST["mobilenumber"]; $password = $_POST["password"]; // check if email already exist $email_check_query = mysqli_query($connection, "SELECT * FROM users WHERE email = '{$email}' "); $rowCount = mysqli_num_rows($email_check_query); // PHP validation // Verify if form values are not empty if(!empty($firstname) && !empty($lastname) && !empty($email) && !empty($mobilenumber) && !empty($password)){ // check if user email already exist if($rowCount > 0) { $email_exist = ' <div class="alert alert-danger" role="alert"> User with email already exist! </div> '; } else { // clean the form data before sending to database $_first_name = mysqli_real_escape_string($connection, $firstname); $_last_name = mysqli_real_escape_string($connection, $lastname); $_email = mysqli_real_escape_string($connection, $email); $_mobile_number = mysqli_real_escape_string($connection, $mobilenumber); $_password = mysqli_real_escape_string($connection, $password); // perform validation if(!preg_match("/^[a-zA-Z ]*$/", $_first_name)) { $f_NameErr = '<div class="alert alert-danger"> Only letters and white space allowed. </div>'; } if(!preg_match("/^[a-zA-Z ]*$/", $_last_name)) { $l_NameErr = '<div class="alert alert-danger"> Only letters and white space allowed. </div>'; } if(!filter_var($_email, FILTER_VALIDATE_EMAIL)) { $_emailErr = '<div class="alert alert-danger"> Email format is invalid. </div>'; } if(!preg_match("/^[0-9]{10}+$/", $_mobile_number)) { $_mobileErr = '<div class="alert alert-danger"> Only 10-digit mobile numbers allowed. </div>'; } if(!preg_match("/^(?=.*\d)(?=.*[@#\-_$%^&+=§!\?])(?=.*[a-z])(?=.*[A-Z])[<a target="_blank" href="https://laravelcode.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f5c5d8ccb4d8af94d88fb5">[email protected]</a>#\-_$%^&+=§!\?]{6,20}$/", $_password)) { $_passwordErr = '<div class="alert alert-danger"> Password should be between 6 to 20 charcters long, contains atleast one special chacter, lowercase, uppercase and a digit. </div>'; } // Store the data in db, if all the preg_match condition met if((preg_match("/^[a-zA-Z ]*$/", $_first_name)) && (preg_match("/^[a-zA-Z ]*$/", $_last_name)) && (filter_var($_email, FILTER_VALIDATE_EMAIL)) && (preg_match("/^[0-9]{10}+$/", $_mobile_number)) && (preg_match("/^(?=.*\d)(?=.*[@#\-_$%^&+=§!\?])(?=.*[a-z])(?=.*[A-Z])[<a target="_blank" href="https://laravelcode.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e4d4c9dda5c9be85c99ea4">[email protected]</a>#\-_$%^&+=§!\?]{8,20}$/", $_password))){ // Generate random activation token $token = md5(rand().time()); // Password hash $password_hash = password_hash($password, PASSWORD_BCRYPT); // Query $sql = "INSERT INTO users (firstname, lastname, email, mobilenumber, password, token, is_active, date_time) VALUES ('{$firstname}', '{$lastname}', '{$email}', '{$mobilenumber}', '{$password_hash}', '{$token}', '0', now())"; // Create mysql query $sqlQuery = mysqli_query($connection, $sql); if(!$sqlQuery){ die("MySQL query failed!" . mysqli_error($connection)); } // Send verification email if($sqlQuery) { $msg = 'Click on the activation link to verify your email. <br><br> <a href="http://localhost:8888/php-user-authentication/user_verificaiton.php?token='.$token.'"> Click here to verify email</a> '; // Create the Transport $transport = (new Swift_SmtpTransport('smtp.gmail.com', 465, 'ssl')) ->setUsername('<a target="_blank" href="https://laravelcode.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb92849e99b48e868a8287ab8c868a8287c5888486">[email protected]</a>') ->setPassword('your_email_password'); // Create the Mailer using your created Transport $mailer = new Swift_Mailer($transport); // Create a message $message = (new Swift_Message('Please Verify Email Address!')) ->setFrom([$email => $firstname . ' ' . $lastname]) ->setTo($email) ->addPart($msg, "text/html") ->setBody('Hello! User'); // Send the message $result = $mailer->send($message); if(!$result){ $email_verify_err = '<div class="alert alert-danger"> Verification email coud not be sent! </div>'; } else { $email_verify_success = '<div class="alert alert-success"> Verification email has been sent! </div>'; } } } } } else { if(empty($firstname)){ $fNameEmptyErr = '<div class="alert alert-danger"> First name can not be blank. </div>'; } if(empty($lastname)){ $lNameEmptyErr = '<div class="alert alert-danger"> Last name can not be blank. </div>'; } if(empty($email)){ $emailEmptyErr = '<div class="alert alert-danger"> Email can not be blank. </div>'; } if(empty($mobilenumber)){ $mobileEmptyErr = '<div class="alert alert-danger"> Mobile number can not be blank. </div>'; } if(empty($password)){ $passwordEmptyErr = '<div class="alert alert-danger"> Password can not be blank. </div>'; } } } ?></code></pre> <p>Include the database to handle the user data. The <strong>isset()</strong> method is checking the form data when a user clicks on the submit button the same name attribute we passed in the signup form.</p> <p>Extract the user data such as <strong>firstname, lastname, email, mobilenumber</strong> and <strong>password</strong> using the HTTP <strong>$_POST[”]</strong> method.</p> <p><span id="ezoic-pub-ad-placeholder-119" class="ezoic-adpicker-ad"></span><span class="ezoic-ad ezoic-at-0 large-mobile-banner-2 large-mobile-banner-2119 adtester-container adtester-container-119" data-ez-name="laravelcode_com-large-mobile-banner-2"><span id="div-gpt-ad-laravelcode_com-large-mobile-banner-2-0" ezaw="728" ezah="90" style="position:relative;z-index:0;display:inline-block;padding:0;width:100%;max-width:1200px;margin-left:auto!important;margin-right:auto!important;min-height:90px;min-width:728px" class="ezoic-ad"><script data-cfasync="false">

kode php Login logout github

Bài Viết Liên Quan

Cara menggunakan save image temporary python

Script for login logout and view using php mysql and bootstrap

What We Will Learn:

Prerequisite

PHP 7 File & Folder Structure

Create Database & Table in MySQL

Bài Viết Liên Quan

Có thể bạn quan tâm

Xem Nhiều

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội