Bazaar – php example code – part 6 – user login with SESSIONS and COOKIES

This new year article will focus on using $_SESSION and $_COOKIE variables in proces on login user into a application. As first part of our next topics focused on user validation and diferentiation app behavior we will take closer look on signing up and login of page user.

Login mechanism in closer look

In our previeous application of mailer, we used for restricting access in to a specific page only HTTP header authentication mechanism. This approach is very simple but not scale well in larger sites with different pages with partialy or complet access restrictions.

New approach relays on login ability created by login.php script. Login script obtain user login credentials, compare it with those stored in database (passwords can not be stored as plain text, but we store only sha1 hashes and make comparisn with hashes together for deciding about corect or incorrect login).

After succesfull login $_SESSION variables are set. For better persistency there is made combination with $_ COOKIES variable. COOKIES are stored in local users browser and are available only if they are enabled by user, that must be keept in mind.

In all pages are SESSION started in first parts of php code and from COOKIES restore sessions among all pages where login restrictions must be made. In our next article, we take a closer look how limiting or difrentiating page looks for different category of users introduced with category of users database field.

For logout, there is available logout script with mechanism for invalidatin COOKIES and clearing SESSIONS variables.

Creating new users with sign up script

Our application need mechanism for subscribing new users for deeper access in pages for submitting items for sell ore more specific page available only for admin role of user – adminpage.

New user provide username, e-mail and type 2x password. Username must be unique and not used by another user. This mechanism is implemented in sql query but in our approach not in UNIQUE restriction in database field.

After succesfull login credentials creation, user can log in with existing login script.

Now we can take closer look at mentionied pages.

Sign Up script

User provide from sign up form username, e-mail and password. If username is unique (no unique e-mail is needed, because we can expect different logins of seler for different account with the same e-mail) user login credentials are added and user with role „user“ is introduced into bazar_user database table.

User role grant ability to buy and sell items, but not provide management ability mark items as eligible for visibility on title page of bazaar.

Listening of our script follows.

<!– ***************************************************************** –>
<!– PHP „self“ code handling sign up for membership on the bazaar app   –>
<!– ***************************************************************** –>
<!– Vrsion: 1.0        Date: 24.10-24.10.2020 by CDesigner.eu                            –>
<!– ***************************************************************** –>

<?php
 require_once(‚appvars.php‘); // including variables for database
   
 // two variables for message and styling of the mesage with bootstrap
 $msg = “;
 $msgClass = “;
 $u_name = “;
 $usr_passwd = “;
/* Attempt MySQL server connection.  */
$dbc = mysqli_connect(DB_HOST, DB_USER, DB_PW, DB_NAME);

if(isset($_POST[‚submit‘])) { 
    // obtaining submitted data from POST
    $u_name = htmlspecialchars($_POST[‚u_name‘]);
    $u_pass_1 = htmlspecialchars($_POST[‚u_pass_1‘]);
    $u_pass_2 = htmlspecialchars($_POST[‚u_pass_2‘]);
    $email = htmlspecialchars($_POST[‚email‘]);

    if(!empty($u_name) && !empty($email) && !empty($u_pass_1) && !empty($u_pass_2) && ($u_pass_1 = $u_pass_2)) {
     // make sure that username is available and is not registered for someone else
     $sql = „SELECT * FROM bazaar_user WHERE username = „.“‚$u_name'“ ;
     $data = mysqli_query($dbc, $sql);   
 
       if(mysqli_num_rows($data) == 0) {
           // username is unique and have not been used by any previous user
           $usr_passwd_sha1 =  sha1($u_pass_2);
           $sql = „INSERT INTO bazaar_user (username, pass_word, write_date, email, nickname) 
                   VALUES (‚$u_name‘, ‚$usr_passwd_sha1‘ , now(), ‚$email‘,’$u_name‘)“; // by default nickname and username are the same, next user can change

           if(mysqli_query($dbc, $sql)){
            $msg = ‚ Your new account has been created successfully. 
            You are now ready to <a href=“login.php“>log in</a>‘;
            $msgClass = ‚alert-success‘;
           } else{
               echo „ERROR: Could not able to execute $sql. “ . mysqli_error($dbc); // if database query problem
           }
           //success confirmation for registered user
         
           

            // Free result set
      mysqli_free_result($data);
            // Close connection
            
            //exit(); if used blank page will be displayed without any other redirecting

       } else { // an account already exists for this username, so display an error message
           
            $msg = ‚ An account for submitted username already exsts. Please use different username …‘;
            $msgClass = ‚alert-danger‘;
       } 
    } else {
     
            $msg = ‚ Your must enter all of the required data, including contact e-mail address.‘;
            $msgClass = ‚alert-danger‘;
    }
      
}   
    // Close connection 
    mysqli_close($dbc);    
?>

<!– **************************************** –>
<!– HTML code containing Form for submitting –>
<!– **************************************** –>
<!DOCTYPE html>
<html>
<head>
  <title> Bazaar signup page  </title>
  <link rel=“stylesheet“ href=“./css/bootstrap.min.css“> <!– bootstrap mini.css file –>
  <link rel=“stylesheet“ href=“./css/style.css“> <!– my local.css file –>
    <script src=“https://code.jquery.com/jquery-3.1.1.slim.min.js“ integrity=“sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n“ crossorigin=“anonymous“></script>
        <script src=“https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js“ integrity=“sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb“ crossorigin=“anonymous“></script>
  
</head>
<body>
  <nav class=“navbar navbar-default“>
      <div class=“container“>
        <div class=“navbar-header“>    
          <a class=“navbar-brand“ href=“index.php“>Bazaar – Signup for submitting/ buying your items</a>
        </div>
      </div>
    </nav>
    <div class=“container“ id=“formcontainer“>  
        
    <?php if($msg != “): ?>
        <br> 
        <div class=“alert <?php echo $msgClass; ?>“><?php echo $msg; ?></div>
      <?php endif; ?> 
         
      
      
        
        <br> 
        <img id=“calcimage“ src=“./images/login.png“ alt=“bazaar image“ width=“150″ height=“150″>
        <br>

        <form  method=“post“ action=“<?php echo $_SERVER[‚PHP_SELF‘]; ?>“>
           <div id=“login“>
                <legend> Please register for Bazaar membership <legend>
                    <label>Username:</label>
                    <input type=“text“ onfocus=“this.value='<?php echo isset($_POST[‚u_name‘]) ? $u_name : “; ?>'“ name=“u_name“ class=“form-control“ value=“<?php echo isset($_POST[‚u_name‘]) ? $u_name : ‚Login name‘; ?>“>

                    <label>e-mail:</label>
                    <input type=“text“ onfocus=“this.value='<?php echo isset($_POST[‚email‘]) ? $email : “; ?>'“ name=“email“ class=“form-control“ value=“<?php echo isset($_POST[‚email‘]) ? $email : ‚@‘; ?>“>
                    <label>Password:</label>
                    <input type=“password“ onfocus=“this.value='<?php echo isset($_POST[‚u_pass_1‘]) ? “ : “; ?>'“ name=“u_pass_1″ class=“form-control“ value=“<?php echo isset($_POST[‚u_pass_1‘]) ? “ : “; ?>“>

                    <label>Password:</label>
                    <input type=“password“ onfocus=“this.value='<?php echo isset($_POST[‚u_pass_2‘]) ? “ : “; ?>'“ name=“u_pass_2″ class=“form-control“ value=“<?php echo isset($_POST[‚u_pass_2‘]) ? “ : “; ?>“>
            </div>
           <input id=“loginsubmitt“ type=“submit“ name=“submit“ class=“btn btn-info“ value=“Sign In“> 
           <br>

        </form>

   
      </div>
    
<div class=“footer“> 
   <a class=“navbar-brand“ href=“https://cdesigner.eu“> Visit us on CDesigner.eu </a>
 </div>
 

</body>
</html>

Front look at signup page follows.

Login page

Code for loginpage take place only if user is not allready loged in. In this option is not set !isset($_SESSION[‚users_id‘]) . After verfication of login credentials SESSION variables and COOKIES are set for loged in user. Also loed in user is redirected on index.php main page as it contains next code.

<!– ***************************************************************** –>
<!– PHP „self“ code handling login into the bazaar app                                  –>
<!– ***************************************************************** –>
<!– Vrsion: 1.0        Date: 11.10-24.10.2020 by CDesigner.eu                            –>
<!– ***************************************************************** –>

<?php
 require_once(‚appvars.php‘); // including variables for database
 session_start(); // start the session
   
 // two variables for message and styling of the mesage with bootstrap
 $msg = “;
 $msgClass = “;
 $usr_username = “;
 $usr_passwd = “;

//get info that user is loged in, if not try it looking at cookies
//if(!isset($_COOKIE[‚s‘])) { old solution with cookies
  if(!isset($_SESSION[‚users_id‘])) { //new with session variables
    if(isset($_POST[‚submit‘])) {
        /* Attempt MySQL server connection.  */
             $dbc = mysqli_connect(DB_HOST, DB_USER, DB_PW, DB_NAME);
             
                // accessing user entered login data
             $usr_username = htmlspecialchars($_POST[‚u_name‘]);    
             $usr_passwd = htmlspecialchars($_POST[‚u_pass‘]);
             

             if(!empty($usr_username) && !empty($usr_passwd)) {
              // try lookup user database
              $usr_passwd_SHA = sha1($usr_passwd);
              $sql = „SELECT users_id, username, user_role FROM bazaar_user WHERE username = „.“‚$usr_username'“. “ AND pass_word = „.“‚$usr_passwd_SHA'“ ;
              // debug output echo  $usr_username; 
              // echo  $usr_passwd;
              //echo $usr_passwd_SHA;
              $data = mysqli_query($dbc, $sql);   
              
              if(mysqli_num_rows($data) == 1) {
                  // login is ok, set user  ID and username cookies and redirect to the homepage
                  $row = mysqli_fetch_array($data);
                  //setcookie(‚users_id‘, $row[‚users_id‘]); old solution with cookies
                  //setcookie(‚username‘, $row[‚username‘]);
                  $_SESSION[‚users_id‘] = $row[‚users_id‘]; // sloution with sessions
                  $_SESSION[‚username‘] = $row[‚username‘];
                  $_SESSION[‚user_role‘] = $row[‚user_role‘]; // added user_role session variable
                  // new cookies for login persistency that expires after 30 days without logout combination SESSION with COOKIES is awailable
                  setcookie(‚users_id‘, $row[‚users_id‘], time()+(60+60*24*30));
                  setcookie(‚username‘, $row[‚username‘], time()+(60+60*24*30));
                  setcookie(‚user_role‘, $row[‚user_role‘], time()+(60+60*24*30))// cookie for user_role of loged in user added

                  $home_url = ‚http://‘. $_SERVER[‚HTTP_HOST‘] . dirname($_SERVER[‚PHP_SELF‘]) . ‚/index.php‘;
                  header(‚Location:‘. $home_url);

                  // Free result set
                  mysqli_free_result($data);
                  // Close connection
                  mysqli_close($dbc);

              } else  {
                  // urename/ password are incorrect – error meesage is displayed
                  $msg = „Incorrect username or password. Login denied!  „;
                  $msgClass = ‚alert-danger‘;
   
            }     

              
            } else {
                // username/ password were not entered – display error message
                $msg = „Sorry, you must eneter username and password to log in. „;
                $msgClass = ‚alert-danger‘;
   
            }     
    }  

?>

<!– **************************************** –>
<!– HTML code containing Form for submitting –>
<!– **************************************** –>
<!DOCTYPE html>
<html>
<head>
  <title> Bazaar login page  </title>
  <link rel=“stylesheet“ href=“./css/bootstrap.min.css“> <!– bootstrap mini.css file –>
  <link rel=“stylesheet“ href=“./css/style.css“> <!– my local.css file –>
    <script src=“https://code.jquery.com/jquery-3.1.1.slim.min.js“ integrity=“sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n“ crossorigin=“anonymous“></script>
        <script src=“https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js“ integrity=“sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb“ crossorigin=“anonymous“></script>
  
</head>
<body>
  <nav class=“navbar navbar-default“>
      <div class=“container“>
        <div class=“navbar-header“>    
          <a class=“navbar-brand“ href=“index.php“>Bazaar – Login page</a>
        </div>
      </div>
    </nav>
    <div class=“container“ id=“formcontainer“>  
    <?php if($msg != “): ?>
        <br> 
        <div class=“alert <?php echo $msgClass; ?>“><?php echo $msg; ?></div>
      <?php endif; ?> 
      
      <?php 
            //if(empty($_COOKIE[‚users_id‘])) { solution with cookies
              if(empty($_SESSION[‚users_id‘])) { // solution with sessions
                // only show for if session with name users_id does not exist
                //echo ‚ <br> ‚;
                //echo  ‚<p class=“alert alert-danger“>‘ . $msg . ‚</p>‘;
       ?> 
        
        <br> 
        <img id=“calcimage“ src=“./images/login.png“ alt=“bazaar image“ width=“150″ height=“150″>
        <br>

        <form  method=“post“ action=“<?php echo $_SERVER[‚PHP_SELF‘]; ?>“>
           <div id=“login“>
                <legend> Log In <legend>
                <label>Username:</label>
                    <input type=“text“ onfocus=“this.value='<?php echo isset($_POST[‚u_name‘]) ? “ : “; ?>'“ name=“u_name“ class=“form-control“ value=“<?php echo isset($_POST[‚u_name‘]) ? ‚Please reenter‘ : ‚Login name‘; ?>“>

                    <label>Password:</label>
                    <input type=“password“ onfocus=“this.value='<?php echo isset($_POST[‚u_pass‘]) ? “ : “; ?>'“ name=“u_pass“ class=“form-control“ value=“<?php echo isset($_POST[‚u_pass‘]) ? ‚Please reenter‘ : ‚Login name‘; ?>“>
            </div>
           <input id=“loginsubmitt“ type=“submit“ name=“submit“ class=“btn btn-info“ value=“Log In“> 
           <br>

        </form>

        <?php }  else { 
                 // successfull login
                  // cookie solution echo ‚<p class=“alert alert-success“> You are loged in as ‚ . $_COOKIE[‚username‘]. ‚</p>‘;
                  echo ‚<br>‘;
                  echo ‚<p class=“alert alert-success“> You are loged in as <em>‘ . $_SESSION[‚username‘]. ‚</em></p>‘; // session solution
                  echo ‚<p class=“alert alert-success“> If you will logout or login with anither credentials, please first <a href=“logout.php“>logout!. </a></p>‘;
              } 
        ?>  
      </div>

          
    
    
<div class=“footer“> 
   <a class=“navbar-brand“ href=“https://cdesigner.eu“> Visit us on CDesigner.eu </a>
 </div>
 

</body>
</html>

Next pictures display output on page after difrenet state of login process.

Log In page of Bazaar app

Error messaging after unsuccesfull login

Logout script

Last and shortest code page is logout page. After hitting link for logout, user sessions and cokkies are inmediatly destroyed and user is loged out. Without logout with cookies enabled, user is loged in in browser for 30 days. If brower disables cookies, user is loged in only if sessions are active up to closing browser windows.

Full code follows:

<!– ***************************************************************** –>
<!– PHP „self“ code handling logout procedure into the bazaar app       –>
<!– ***************************************************************** –>
<!– Vrsion: 1.0        Date: 24.10-24.10.2020 by CDesigner.eu           –>
<!– ***************************************************************** –>

<?php
 require_once(‚appvars.php‘); // including variables for database
    // part for SESSION solution for login persistence and its ending

    //even when logging out you have to first start the session in order to access the session variables
    session_start();
    if(isset($_SESSION[‚users_id‘])) {
        $_SESSION = array(); // deleting session vars
               
    };

    // if session cookie exists, then delete it
    if(isset($_COOKIE[session_name()])) {
        setcookie(‚session_name()‘,“,time() – 3600);
        
               
    };

    // Destroy session
    session_destroy();
    // logout user by deleting cookie – for COOKIES persistence solution
    
   /* if(isset($_COOKIE[‚users_id‘])) {
        setcookie(‚user_id‘,“,time() – 3600);
        setcookie(‚username‘,“,time() – 3600);
        echo „deleted cookies“;
               
    }; */

    // for our final solution SESSIONS+ longer login persistency with COOKIES must be also cokies deleted
    setcookie(‚users_id‘, $row[‚users_id‘], time()-3600);
    setcookie(‚username‘, $row[‚username‘], time()-3600);
    setcookie(‚user_role‘, $row[‚user_role‘], time()-3600); // added deletion of user_role cookie – after altering table for user_role

    // redirect to homepage in logout state
    $home_url = ‚http://‘. $_SERVER[‚HTTP_HOST‘] . dirname($_SERVER[‚PHP_SELF‘]) . ‚/index.php‘;
    header(‚Location:‘. $home_url);

 ?>

Conclusion and final thoughts

In this article we take focus on way how to grant user limited access in to a page resources. This solution uses sessions with suporting role by cookies.

In our next article we will focus how to use session log in information for diferentiating page display for diferent roles of page users (anonymous = unloged, user-s and admin-s).

Full code in as is state can be obtained from github here.