Creating a Login Page with the Usual Bootstrap Template with a Card
Let's create a login.php script using a Bootstrap template and add a Card for our content with a header for the title of the page, along with Bootstrap's client side JavaScript validation code:
login.php - Student Listing: Using Bootstrap Template with Card and Client Side Validation
<!DOCTYPE html><?phpsession_start();require_once('pagetitles.php');$page_title=SL_LOGIN_PAGE;?><html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <title><?=$page_title?></title> </head> <body> <div class="card"> <div class="card-body"> <h1><?=$page_title?></h1> <hr/> </div> </div> <script> // JavaScript for disabling form submissions if there are invalid fields (function () { 'use strict'; window.addEventListener('load', function () { // Fetch all the forms we want to apply custom Bootstrap validation styles to var forms = document.getElementsByClassName('needs-validation'); // Loop over them and prevent submission var validation = Array.prototype.filter.call(forms, function (form) { form.addEventListener('submit', function (event) { if (form.checkValidity() === false) { event.preventDefault(); event.stopPropagation(); } form.classList.add('was-validated'); }, false); }); }, false); })(); </script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> </body></html>
NOTE: Notice that we made a call to session_start() at the top of the script. Also notice the setting and usage of our page title ($page_title=SL_LOGIN_PAGE;) from our pagetitles.php constants script.
Self Referencing Page with Three Possible Different Outputs
When a user navigates to the login.php script, there are three possible states a the user can be in:
Not logged in
Just logged in (i.e. they selected the Login button on the login.php page)
Already logged in
If a user is not logged in we want them to see this form:
If a user selects the Login button on the login.php page, we want them to be redirected to the main Student Listing page:
And if a user navigates to the login.php script after they are already logged in, we want the login.php script to display:
Since we are using Session variables to achieve this, you'll need to add the following conditional statements directly below the <hr/> element:
login.php - Student Listing: Three Possible Conditions
1 2 3 4 5 6 7 8 9101112131415161718
...<h1><?=$page_title?></h1><hr/><?php// Not logged in and just submitted formif(empty($_SESSION['user_id'])&&isset($_POST['login_submission'])){}if(empty($_SESSION['user_id'])):// Not logged in?><?phpelseif(isset($_SESSION['user_name'])):// Already logged inecho"<h4><p class='text-success'>You are logged in as: <strong>{$_SESSION['user_name']}</strong>.</p></h4>";endif;?>...
Notice above, that the display output is already filled in if the user is already logged in.
Let's add the self referencing form for logging in users if they're not already logged in. Add the following code into the if(empty($_SESSION['user_id'])): condition:
login.php - Student Listing: Display Form if User not Logged in
...// Not logged in and just submitted formif(empty($_SESSION['user_id'])&&isset($_POST['login_submission'])){// Get user name and password$user_name=$_POST['user_name'];$password=$_POST['password'];if(!empty($user_name)&&!empty($password)){require_once('dbconnection.php');require_once('queryutils.php');$dbc=mysqli_connect(DB_HOST,DB_USER,DB_PASSWORD,DB_NAME)ortrigger_error('Error connecting to MySQL server for'.DB_NAME,E_USER_ERROR);// Check if user already exists$query="SELECT id, user_name, password_hash, access_privileges, studentListing_id "."FROM user WHERE user_name = ?";$results=parameterizedQuery($dbc,$query,'s',$user_name)ortrigger_error(mysqli_error($dbc),E_USER_ERROR);// IF user was found, validate passwordif(mysqli_num_rows($results)==1){$row=mysqli_fetch_array($results);if(password_verify($password,$row['password_hash'])){$_SESSION['user_id']=$row['id'];$_SESSION['user_name']=$row['user_name'];$_SESSION['user_access_privileges']=$row['access_privileges'];$_SESSION['user_student_listing_id']=$row['studentListing_id'];// Redirect to the home page$home_url=dirname($_SERVER['PHP_SELF']);header('Location: '.$home_url);}else{echo"<h4><p class='text-danger'>An incorrect user name or password was entered.</p></h4><hr/>";}}elseif(mysqli_num_rows($results)==0)// User does not exist{echo"<h4><p class='text-danger'>An account does not exist for this username:"."<span class='font-weight-bold'> ($user_name)</span>. "."Please use a different user name.</p></h4><hr/>";}else{echo"<h4><p class='text-danger'>Something went terribly wrong!</p></h4><hr/>";}}else{// Output error messageecho"<h4><p class='text-danger'>You must enter both a user name and password.</p></h4><hr/>";}}...
<?phpsession_start();require_once('pagetitles.php');$page_title=SL_LOGIN_PAGE;?><!DOCTYPE html><html> <head> <title><?=$page_title?></title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> </head> <body> <div class="card"> <div class="card-body"> <h1><?=$page_title?></h1> <hr/><?phpif(empty($_SESSION['user_id'])&&isset($_POST['login_submission'])){// Get user name and password$user_name=$_POST['user_name'];$password=$_POST['password'];if(!empty($user_name)&&!empty($password)){require_once('dbconnection.php');require_once('queryutils.php');$dbc=mysqli_connect(DB_HOST,DB_USER,DB_PASSWORD,DB_NAME)ortrigger_error('Error connecting to MySQL server for'.DB_NAME,E_USER_ERROR);// Check if user already exists$query="SELECT id, user_name, password_hash, access_privileges, studentListing_id "."FROM user WHERE user_name = ?";$results=parameterizedQuery($dbc,$query,'s',$user_name)ortrigger_error(mysqli_error($dbc),E_USER_ERROR);// IF user was found, validate passwordif(mysqli_num_rows($results)==1){$row=mysqli_fetch_array($results);if(password_verify($password,$row['password_hash'])){$_SESSION['user_id']=$row['id'];$_SESSION['user_name']=$row['user_name'];$_SESSION['user_access_privileges']=$row['access_privileges'];$_SESSION['user_student_listing_id']=$row['studentListing_id'];// Redirect to the home page$home_url=dirname($_SERVER['PHP_SELF']);header('Location: '.$home_url);}else{echo"<h4><p class='text-danger'>An incorrect user name or password was entered.</p></h4><hr/>";}}elseif(mysqli_num_rows($results)==0)// User does not exist{echo"<h4><p class='text-danger'>An account does not exist for this username:"."<span class='font-weight-bold'> ($user_name)</span>. "."Please use a different user name.</p></h4><hr/>";}else{echo"<h4><p class='text-danger'>Something went terribly wrong!</p></h4><hr/>";}}else{// Output error messageecho"<h4><p class='text-danger'>You must enter both a user name and password.</p></h4><hr/>";}}if(empty($_SESSION['user_id'])):?> <form class="needs-validation" novalidate method="POST" action="<?=$_SERVER['PHP_SELF']?>"> <div class="form-group row"> <label for="user_name" class="col-sm-2 col-form-label-lg">User Name</label> <div class="col-sm-4"> <input type="text" class="form-control" id="user_name" name="user_name" placeholder="Enter a user name" required> <div class="invalid-feedback"> Please provide a valid user name. </div> </div> </div> <div class="form-group row"> <label for="password" class="col-sm-2 col-form-label-lg">Password</label> <div class="col-sm-4"> <input type="password" class="form-control" id="password" name="password" placeholder="Enter a password" required> <div class="invalid-feedback"> Please provide a valid password. </div> </div> </div> <button class="btn btn-primary" type="submit" name="login_submission">Log In </button> </form><?phpelseif(isset($_SESSION['user_name'])):echo"<h4><p class='text-success'>You are logged in as: <strong>{$_SESSION['user_name']}</strong>.</p></h4>";endif;?> </div> </div> <script> // JavaScript for disabling form submissions if there are invalid fields (function () { 'use strict'; window.addEventListener('load', function () { // Fetch all the forms we want to apply custom Bootstrap validation styles to var forms = document.getElementsByClassName('needs-validation'); // Loop over them and prevent submission var validation = Array.prototype.filter.call(forms, function (form) { form.addEventListener('submit', function (event) { if (form.checkValidity() === false) { event.preventDefault(); event.stopPropagation(); } form.classList.add('was-validated'); }, false); }); }, false); })(); </script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> </body></html>