Lesson 6 - NOO-CMS - Article editor in PHP

In the previous lesson, NOO-CMS - User registration in PHP, we finished up the administration page for our simple content management system in PHP. In today's lesson, we will be adding a user log-in form as well as an article editor.

Signing-in

Let's create a sign-in.php script. The HTML part will be as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <title>Sign-in to administration</title>
</head>

<body>
    <article>
        <div id="centerer">
            <header>
                <h1>Sign in to administration</h1>
            </header>
            <section>
                <?php
                if (isset($notice))
                    echo('<p>' . $notice . '</p>');
                ?>

                <form method="post">
                    Name<br />
                    <input type="text" name="name" /><br />
                    password<br />
                    <input type="password" name="password" /><br />
                    <input type="submit" value="Sign-in" />
                </form>

                <p>If you don't have an account yet, <a href="sign-up.php">sign-up</a>.</p>
            </section>
            <div class="clear"></div>
        </div>
    </article>
</body>
</html>

HTe code above includes a PHP directive used for error notice printing (if needed) and a form with name and password input fields. The code is almost the same as the registration form and should be easy to understand.

Now insert the following block of PHP above the HTML:

<?php
session_start();
require('Db.php');
Db::connect('127.0.0.1', 'noocms_db', 'root', '');

if (isset($_SESSION['user_id']))
{
    header('Location: administration.php');
    exit();
}

if ($_POST)
{
    $user = Db::queryOne('
        SELECT user_id, admin
        FROM user
        WHERE name=? AND password=SHA1(?)
    ', $_POST['name'], $_POST['password'] . "t&#ssdf54gh");
    if (!$user)
        $notice = 'Invalid name or password.';
    else
    {
        $_SESSION['user_id'] = $user['user_id'];
        $_SESSION['user_name'] = $_POST['name'];
        $_SESSION['user_admin'] = $user['admin'];
        header('Location: administration.php');
        exit();
    }
}
?>

The first couple of lines make the session accessible and establish a connection with the database. If the user is already signed in, we don't display the sign-in page. Instead, we redirect him/her to the administration page and terminate the script.

If the form is sent, we "salt" the password with the same salt we used for signing-in. Using the SHA1() SQL function we will, once again, compute a hash. The script will then try to find users with the given name and hash, we store an error notice in case of failure. If the query is successful, we sign the user in by storing the data provided by the session. Last of all, we redirect him/her to the administration page.

Go ahead and test it out by signing back in. If you are still signed in from last time, sign-out and sign back in again.

Users sign-in in PHP - Databases in PHP for Beginners

Assigning admin role

Each and every user has an admin column, which contains either a value of 0 or 1 based on whether a user is an administrator. This value can only be set by an administrator through phpMyAdmin. Let's move to phpMyAdmin and switch the value from 0 to 1 (all you have to do is click on it and change the value).

Administrator privileges in phpMyAdmin - Databases in PHP for Beginners

Now sign-out and sign back in again.

Article editor

Great, now let's move on to the article editor! Create an editor.php file and insert the following block of HTML into it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <title>Article editor</title>
</head>

<body>
    <article>
        <div id="centerer">
            <header>
                <h1>Article editor</h1>
            </header>
            <section>
                <?php
                if (isset($notice))
                    echo('<p>' . $notice . '</p>');
                ?>

                <form method="post">
                    <input type="hidden" name="article_id" value="<?= htmlspecialchars($article['article_id']) ?>" /><br />
                    title<br />
                    <input type="text" name="title" value="<?= htmlspecialchars($article['title']) ?>" /><br />
                    URL<br />
                    <input type="text" name="url" value="<?= htmlspecialchars($article['url']) ?>" /><br />
                    Description<br />
                    <input type="text" name="description" value="<?= htmlspecialchars($article['description']) ?>" /><br />
                    <textarea name="content"><?= htmlspecialchars($article['content']) ?></textarea>
                    <input type="submit" value="Submit" />
                </form>
            </section>
            <div class="clear"></div>
        </div>
    </article>
    <script type="text/javascript" src="//cdn.tinymce.com/4/tinymce.min.js"></script>
    <script type="text/javascript">
        tinymce.init({
            selector: "textarea[name=content]",
            plugins: [
                "advlist autolink lists link image charmap print preview anchor",
                "searchreplace visualblocks code fullscreen",
                "insertdatetime media table contextmenu paste"
            ],
            toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
            entities: "160,nbsp",
            entity_encoding: "named",
            entity_encoding: "raw"
        });
    </script>
</body>
</html>

All the code is, is a simple HTML form and an error notice printing condition. Data is filled into the form fields through the $article array. One last thing, the form has a hidden field with the ID of a given article. Based on whether the user is publishing a new article (in which case the hidden field will be empty) or editing an existing article (in which case it would contain the article ID).

At the bottom of the file, things get quite interesting. We load the TinyMCE WYSIWIYG editor, an editor that has the same interface as MS Word. It generates an HTML code based on what we click.

The first script references a content delivery network (CDN), from which we download the TinyMCE. The second contains the configuration needed to use the editor. The way it is set up now means that we chose to create an editor from a textarea named content. The following code sets the plugins and turns-off the encoding that converts accent characters to entities, which causes very nasty problems in countries that use them.

Add the following block of PHP above the HTML code:

<?php
session_start();
if (empty($_SESSION['user_admin']))
    die('Access denied');

require('Db.php');
Db::connect('127.0.0.1', 'noocms_db', 'root', '');

$article = array(
    'article_id' => '',
    'title' => '',
    'content' => '',
    'url' => '',
    'description' => '',
);
if ($_POST)
{
    if (!$_POST['article_id'])
    {
        Db::query('
            INSERT INTO article (title, content, url, description)
            VALUES (?, ?, ?, ?)
        ', $_POST['title'], $_POST['content'], $_POST['url'], $_POST['description'], $_POST['keywords']);
    }
    else
    {
        Db::query('
            UPDATE article
            SET title=?, content=?, url=?, description=?
            WHERE article_id=?
        ', $_POST['title'], $_POST['content'], $_POST['url'], $_POST['description'], $_POST['keywords'], $_POST['article_id']);
    }
    header('Location: index.php?article=' . $_POST['url']);
    exit();
}
else if (isset($_GET['url']))
{
    $loadedArticle = Db::queryOne('
        SELECT *
        FROM article
        WHERE url=?
    ', $_GET['url']);
    if ($loadedArticle)
        $article = $loadedArticle;
    else
        $message = 'Article was not found';
}

?>

If a user is not an administrator, we terminate the entire script and print an error message. To check whether an administrator has signed-in, the isset() function will not suffice. In this case, we'll have to use the empty() function. Remember, that there may be a 'user_admin' key in the session, but it must contain a value of 0 to meet the requirements.

After that, we connect to the database and prepare an array with empty values and store it in a variable named $article. We do this to keep the form empty in case a new article is created and also to avoid having PHP notify us of non-existing variables.

If the form was submitted, we check the hidden field. If it's empty, we insert a new article into the database. If there already is a value, we update the article with the given ID. We have yet to use the SQL UPDATE command yet but don't worry, it's very simple. All we'll have to do is set the needed columns using SET. The main thing here is not to forget the WHERE clause. We'll have to specify which rows are to be updated. Every single article would be updated with the new values otherwise!

We redirect to the article after adding or editing it.

If the form wasn't submitted, we check whether there is an article URL in GET. Meaning that we're trying to edit an article, so we try to load data into the $article variable from the actual article through the URL. The data would then be filled into form fields. We print an error message in case of failure.

Now run the editor and insert a new article with the URL set to "home". This article will be our homepage:

TinyMCE article editor in PHP - Databases in PHP for Beginners

Make sure you save the article into the database! In the next lesson, NOO-CMS - Displaying articles in PHP, we will add the finishing touches to our NOO-CMS.

Did you have a problem with anything? Download the sample application below and compare it with your project, you will find the error easily.

Download

By downloading the following file, you agree to the license terms

Downloaded 93x (391.82 kB)
Application includes source codes in language PHP

Article has been written for you by David Capka Hartinger

User rating:

1 votes

The author is a programmer, who likes web technologies and being the lead/chief article writer at ICT.social. He shares his knowledge with the community and is always looking to improve. He believes that anyone can do what they set their mind to.

David learned IT at the Unicorn University - a prestigious college providing education on IT and economics.

Activities