How to Easily Make an Advance Level Login system

You are currently viewing How to Easily Make an Advance Level Login system
  • Post category:HTML/CSS / PHP
  • Reading time:99 mins read

How to Make an Advance Level Login system Easily with PHP
Today I will tell you about something new. This will useful and simple login system based on COOKIES. So we will store few info about logged member directly in cookies of browser. This technology help us to remember member

Step 1. HTML

As usual, we start with the HTML. This is login form code.

login_form.html

HTML
<form class="login_form" method="post" action="index.php">
    <div>Username: <input type="text" name="username" /></div>
    <div>Password: <input type="password" name="password" /></div>
    <div><input type="submit" value="Login" name="Login" /></div>
</form>
<div>You can use username "User1" of "User2" and password "qwerty" to login in system</div>

Step 2. CSS

Here are used CSS styles.

styles.css

CSS
.login_form {
    border: 1px solid #AAA;
    padding:10px;
}

Step 3. PHP

Now that we followed all the code on the front-end, it is now time for the last part of this tutorial – the PHP back-end.

As we can see – this is just pure class with functions for login system.

I used next functions:

getLoginBox – function return login form. In case if member logged – it will return Hello member record and possibility for logout

simple_login – perform login to system (storing necessary information in cookies)

simple_logout – perform logout (clearing used cookies)

check_login – return true in case if username and password exists in system

index.php

PHP
// initialization of login system and generation code
$oSimpleLoginSystem = new SimpleLoginSystem();
echo $oSimpleLoginSystem->getLoginBox();

// class SimpleLoginSystem
class SimpleLoginSystem {

    // variables
    var $aExistedMembers; // Existed members array

    // constructor
    function SimpleLoginSystem() {
        $this->aExistedMembers = array(
            'User1' => 'd8578edf8458ce06fbc5bb76a58c5ca4',  //Sample: MD5('qwerty')
            'User2' => 'd8578edf8458ce06fbc5bb76a58c5ca4'
        );
    }

    function getLoginBox() {
        ob_start();
        require_once('login_form.html');
        $sLoginForm = ob_get_clean();

        $sLogoutForm = '<a href="'.$_SERVER['PHP_SELF'].'?logout=1">logout</a>';

        if ((int)$_REQUEST['logout'] == 1) {
            if (isset($_COOKIE['member_name']) && isset($_COOKIE['member_pass']))
                $this->simple_logout();
        }

        if ($_REQUEST['username'] && $_REQUEST['password']) {
            if ($this->check_login($_REQUEST['username'], MD5($_REQUEST['password']))) {
                $this->simple_login($_REQUEST['username'], $_REQUEST['password']);
                return 'Hello ' . $_REQUEST['username'] . '! ' . $sLogoutForm;
            } else {
                return 'Username or Password is incorrect' . $sLoginForm;
            }
        } else {
            if ($_COOKIE['member_name'] && $_COOKIE['member_pass']) {
                if ($this->check_login($_COOKIE['member_name'], $_COOKIE['member_pass'])) {
                    return 'Hello ' . $_COOKIE['member_name'] . '! ' . $sLogoutForm;
                }
            }
            return $sLoginForm;
        }
    }

    function simple_login($sName, $sPass) {
        $this->simple_logout();

        $sMd5Password = MD5($sPass);

        $iCookieTime = time() + 24*60*60*30;
        setcookie("member_name", $sName, $iCookieTime, '/');
        $_COOKIE['member_name'] = $sName;
        setcookie("member_pass", $sMd5Password, $iCookieTime, '/');
        $_COOKIE['member_pass'] = $sMd5Password;
    }

    function simple_logout() { 
        setcookie('member_name', '', time() - 96 * 3600, '/');
        setcookie('member_pass', '', time() - 96 * 3600, '/');

        unset($_COOKIE['member_name']);
        unset($_COOKIE['member_pass']);
    }

    function check_login($sName, $sPass) {
        return ($this->aExistedMembers[$sName] == $sPass);
    }
}

Conclusion

I described one of easy and useful login system based on cookies. You can use this material to create own login systems into your startups. Good luck!