Login Script Tutorial

In this tutorial, we'll show you how to build a simple password protection system using TypeRoom Professional's plugin system. We'll assume you already have a published copy of your TypeRoom site on your web server.

The password protection system we will build will contain two plugins, one for logging in, and another for detecting if a user is logged in or not. Finally, we will create an admin interface for an administrator to modify the password. Let's get started!

Create empty plugins

First, create two empty files in the typeroom/plugins/ folder, one named auth.php, which will be used to check to see if visitors are logged in, and another named login.php, which will contain the login information.

login.php

1. Insert the following the code into login.php:


    <?php

    function typeroom_login(&$page, $params = array()) {

        #Configure the username and password
        $username = 'visitor'; 
        $password = 'password';

        if ('POST' == $_SERVER['REQUEST_METHOD']) {

            if ($_POST['username'] == $username && $_POST['password'] == $password) {

                #Set a cookie stating they are logged in and redirect to the protected area landing page
                setcookie("loggedIn", 1, time()+86400);
                header("Location:" . PUBLIC_PATH . "protected");
                exit;

            } else {

                #Set an error message
                $errorMsg = 'The username and password you entered does not match. Please try again.';

            }

        }

        if ('GET' == $_SERVER['REQUEST_METHOD'] && $_GET['action'] == 'logout') {

            #Delete the cookie to log out the user
            setcookie("loggedIn", 0);
            $successMsg = 'You have successfully logged out.';
        }

        if ($errorMsg) {
            $html .= '<p style="color:red; font-weight:bold;">' . $errorMsg . '</p>';
        }

        if ($successMsg) {
            $html .= '<p style="color:green; font-weight:bold;">' . $successMsg . '</p>';
        }


        $html .= '<form method="post" action="' . PUBLIC_PATH . 'login">';
        $html .= '<p>Username:<br />';
        $html .= '<input type="text" name="username" value="' . htmlentities($_POST['username']) . '"></p>';
        $html .= '<p>Password:<br />';
        $html .= '<input type="password" name="password" value=""></p>';
        $html .= '<p><input type="submit" name="submit" value="Login">';
        $html .= '</form>';

        return $html;
    }

First, we define the username and password. Next, check if the page is being posted to, and if so, see if the username and password match. If not, set an error message, otherwise, redirect to the protected section. Next we have a a few lines of code to allow for logging out. After that, we simply build the form HTML.

2. Create a new page named "login", edit the content and insert the plugin using the following code:


{{plugin name="login"}}

auth.php

1. Insert the following code into auth.php:


<?php
function typeroom_auth(&$page, $params = array()) {
    if (TR_PUBLISHED_VIEW) {
    	if (!$_COOKIE['loggedIn']) {
            header("Location:" . PUBLIC_PATH . "login");
            exit;

    	} else {
            return '<p>You are currently logged in. <a href="' . PUBLIC_PATH . 'login?action=logout">Logout</a></p>';
    	}
    } 
}

?>

First, we check to see if the plugin is being called in TypeRoom or on the published server, using the TR_PUBLISHED_VIEW constant. This allows us to only require login on the published view so we can still access the page in TypeRoom in case we need to edit it.

2. Create a new page named "protected", edit the content and insert the plugin using the following code:


{{plugin name="auth"}}

3. Publish your changes and browse to the protected page on the web server. You'll be automatically redirected to your login page. If you login, you'll now have access to the protected page, which you will be automatically redirected to.

Login screenshot:

Protected page screenshot:

Conclusion:

The "auth" plugin can now be included on any page you wish to be password protected. While this is a simple plugin, it should demonstrate the basic concept of developing with TypeRoom Professional. Additional features could easily be added to this login system, such as supporting multiple usernames and including a required username for each page, as a paramter of the plugin call (example: {{plugin name="auth" required_user="employee"}}). An Admin Interface could be created to administer the usernames and passwords, which could be linked to directly in the TypeRoom interface.

Learning Center

Login Script Tutorial

Create empty plugins

login.php

auth.php