Bootstrap 5
https://getbootstrap.com/docs/5.0/getting-started/introduction/
https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css
CREATE TABLE `tblusers` (
`id` int(11) NOT NULL,
`name` varchar(100) NOT NULL,
`email` varchar(100) NOT NULL,
`password` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | //login.php <?php session_start(); if (isset( $_SESSION [ "user" ])) { header( "Location: index.php" ); } ?> <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta http-equiv= "X-UA-Compatible" content= "IE=edge" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title>Login and Register using PHP Mysql password_hash password_verify</title> <link rel= "stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" > </head> <body> <section class = "vh-100" > <div class = "container py-5 h-100" > <p><h1>Login and Register using PHP Mysql password_hash password_verify</h1></p> <div class = "row d-flex align-items-center justify-content-center h-100" > <div class = "col-md-8 col-lg-7 col-xl-6" > <img src= "login.png" class = "img-fluid" alt= "Phone image" > </div> <div class = "col-md-7 col-lg-5 col-xl-5 offset-xl-1" > <?php if (isset( $_POST [ "login" ])) { $email = $_POST [ "email" ]; $password = $_POST [ "password" ]; require_once "database.php" ; $sql = "SELECT * FROM tblusers WHERE email = '$email'" ; $result = mysqli_query( $conn , $sql ); $user = mysqli_fetch_array( $result , MYSQLI_ASSOC); if ( $user ) { if (password_verify( $password , $user [ "password" ])) { //https://www.php.net/manual/en/function.password-verify.php session_start(); $_SESSION [ "user" ] = "yes" ; header( "Location: index.php" ); die (); } else { echo "<div class='alert alert-danger'>Password does not match</div>" ; } } else { echo "<div class='alert alert-danger'>Email does not match</div>" ; } } ?> <form action= "login.php" method= "post" > <div class = "form-outline mb-4" > <input type= "email" id= "email" name= "email" class = "form-control form-control-lg" /> <label class = "form-label" for = "email" >Email address</label> </div> <div class = "form-outline mb-4" > <input type= "password" name= "password" id= "password" class = "form-control form-control-lg" /> <label class = "form-label" for = "password" >Password</label> </div> <div class = "d-flex justify-content-around align-items-center mb-4" > <div class = "form-check" > <input class = "form-check-input" type= "checkbox" value= "" id= "form1Example3" checked /> <label class = "form-check-label" for = "form1Example3" > Remember me </label> </div> <a href= "#!" >Forgot password?</a> </div> <input type= "submit" value= "Sign in" name= "login" class = "btn btn-primary btn-lg btn-block" > <p>Not registered yet <a href= "registration.php" >Register Here</a></p> <div class = "divider d-flex align-items-center my-4" > <p class = "text-center fw-bold mx-3 mb-0 text-muted" >OR</p> </div> <a class = "btn btn-primary btn-lg btn-block" style= "background-color: #3b5998" href= "#!" role= "button" > <i class = "fab fa-facebook-f me-2" ></i>Continue with Facebook </a> <a class = "btn btn-primary btn-lg btn-block" style= "background-color: #55acee" href= "#!" role= "button" > <i class = "fab fa-twitter me-2" ></i>Continue with Twitter</a> </form> </div> </div> </div> </section> <style> .divider:after, .divider:before { content: "" ; flex: 1; height: 1px; background: #eee; } </style> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 | //database.php <?php $hostName = "localhost" ; $dbUser = "root" ; $dbPassword = "" ; $dbName = "projectdb" ; $conn = mysqli_connect( $hostName , $dbUser , $dbPassword , $dbName ); if (! $conn ) { die ( "Something went wrong;" ); } ?> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | //registration.php <?php session_start(); if (isset( $_SESSION [ "user" ])) { header( "Location: index.php" ); } ?> <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta http-equiv= "X-UA-Compatible" content= "IE=edge" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title>Login and Register using PHP Mysql password_hash password_verify</title> <link rel= "stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" > </head> <body> <section class = "vh-100" > <div class = "container py-5 h-100" > <p><h1>Login and Register using PHP Mysql password_hash password_verify</h1></p> <div class = "row d-flex align-items-center justify-content-center h-100" > <div class = "col-md-8 col-lg-7 col-xl-6" > <img src= "signup.svg" class = "img-fluid" alt= "" > </div> <div class = "col-md-7 col-lg-5 col-xl-5 offset-xl-1" > <?php if (isset( $_POST [ "submit" ])) { $name = $_POST [ "name" ]; $email = $_POST [ "email" ]; $password = $_POST [ "password" ]; $passwordRepeat = $_POST [ "repeat_password" ]; $passwordHash = password_hash( $password , PASSWORD_DEFAULT); $errors = array (); if ( empty ( $name ) OR empty ( $email ) OR empty ( $password ) OR empty ( $passwordRepeat )) { array_push ( $errors , "All fields are required" ); } if (!filter_var( $email , FILTER_VALIDATE_EMAIL)) { array_push ( $errors , "Email is not valid" ); } if ( strlen ( $password )<8) { array_push ( $errors , "Password must be at least 8 charactes long" ); } if ( $password !== $passwordRepeat ) { array_push ( $errors , "Password does not match" ); } require_once "database.php" ; $sql = "SELECT * FROM tblusers WHERE email = '$email'" ; $result = mysqli_query( $conn , $sql ); $rowCount = mysqli_num_rows( $result ); if ( $rowCount >0) { array_push ( $errors , "Email already exists!" ); } if ( count ( $errors )>0) { foreach ( $errors as $error ) { echo "<div class='alert alert-danger'>$error</div>" ; } } else { $sql = "INSERT INTO tblusers (name, email, password) VALUES ( ?, ?, ? )" ; $stmt = mysqli_stmt_init( $conn ); $prepareStmt = mysqli_stmt_prepare( $stmt , $sql ); if ( $prepareStmt ) { mysqli_stmt_bind_param( $stmt , "sss" , $name , $email , $passwordHash ); mysqli_stmt_execute( $stmt ); echo "<div class='alert alert-success'>You are registered successfully.</div>" ; } else { die ( "Something went wrong" ); } } } ?> <form action= "registration.php" method= "post" > <div class = "form-outline mb-4" > <input type= "text" id= "name" name= "name" class = "form-control form-control-lg" /> <label class = "form-label" for = "name" >Full Name</label> </div> <div class = "form-outline mb-4" > <input type= "email" id= "email" name= "email" class = "form-control form-control-lg" /> <label class = "form-label" for = "email" >Email address</label> </div> <div class = "form-outline mb-4" > <input type= "password" name= "password" id= "password" class = "form-control form-control-lg" /> <label class = "form-label" for = "password" >Password</label> </div> <div class = "form-outline mb-4" > <input type= "password" name= "repeat_password" id= "repeat_password" class = "form-control form-control-lg" /> <label class = "form-label" for = "repeat_password" >Repeat Password</label> </div> <div class = "d-flex justify-content-around align-items-center mb-4" > <div class = "form-check" > <input class = "form-check-input" type= "checkbox" value= "" id= "form1Example3" checked /> <label class = "form-check-label" for = "form1Example3" > Remember me </label> </div> <a href= "#!" >Forgot password?</a> </div> <input type= "submit" class = "btn btn-primary btn-lg btn-block" value= "Register" name= "submit" > <p>Already Registered <a href= "login.php" >Login Here</a></p> </form> </div> </div> </div> </section> <style> .divider:after, .divider:before { content: "" ; flex: 1; height: 1px; background: #eee; } </style> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | //index.php <?php session_start(); if (!isset( $_SESSION [ "user" ])) { header( "Location: login.php" ); } ?> <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta http-equiv= "X-UA-Compatible" content= "IE=edge" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title>User Dashboard</title> <link rel= "stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" > </head> <body> <div class = "container" > <h1>Welcome to Dashboard</h1> <a href= "logout.php" class = "btn btn-warning" >Logout</a> </div> </body> </html> |
1 2 3 4 5 6 | //logout.php <?php session_start(); session_destroy(); header( "Location: login.php" ); ?> |