Lesson 4 - Programming of NOOCMS

In the previous lesson, Form handling and printing database data into table in PHP, we finished our simple user registration form in PHP and printed users from a MySQL database into a table. That means we already have some elementary database knowledge and nothing can stop us from programming fully-functional CMS in PHP.

NOOCMS

In the next couple of lessons, we are going to create a system that will allow us to sign in and publish articles through the article editor. This type of system is called NOOCMS, Non-Object-Oriented Content Management System, and has the following attributes:

• The entire system is written exclusively using basic PHP functions. In other words, without objects or templates. The only exception is the database wrapper since we wouldn't be able to access databases without it.
• The entire system consists of only 6 PHP files
• No file is longer than 100 lines. (editor.php breaks this rule because there are empty lines for improved readability).
• We will create the system at a rapid pace. We'll get it all done in four lessons
• The system includes user roles, registration, signing in, displaying articles, and an interactive article editor.

The system was written in a way that makes it easy for anyone to use it and expand on it no matter what his/her experience level with PHP is. It works without objects, libraries and all of the other advanced stuff thanks to compromises, simplification, and minimal requirements. This system is not meant for serious projects and it does not show you how to program information systems in PHP. It shows you how to achieve the desired result in the simplest way. For serious information systems you will have have to consult the MVC framework. At ICT.social, we have several advanced courses and materials that go further into things like that.

Preparing projects

Before we get to scripting, we'll have to set up a page layout, and a database structure.

Layout

First of all, let's design a layout (HTML structure), into which we will add the needed functions with a little help from PHP. We won't be coding it from scratch, we'll just borrow the one we made in our web course. Open the final lesson of the First website step-by-step course, download the entire website and explore it. If there is something that you don't understand, you will find a detailed explanation in the corresponding course lesson. The website is pure HTML, so you should not run into any problems.

Let's create a new PHP project and copy the content from HoBi's website archive into it (make sure you remove all of the HTML pages).

Database

We will also copy the Db.php wrapper to our project folder (download it from this course's 2nd lesson).

Open PHPMyAdmin and create a new database, I named it noocms_db. Don't forget to set the collation to utf8_general_ci.

Open up the database, and create the needed tables. We will only need two in this case.

Users

Create a new table named user, that consists of 4 columns (fields):

• user_id - int - primary key, autoincrement
• name - varchar - length 255
• password - varchar - length 255
• admin - int

Column admin specifies whether the user is an administrator (0/1).

The table with the applied design should look like this:

(Don't forget to set the primary key and click AI check box for the user_id field. Not shown in the picture.)

Then, save it with the save button found in the bottom-hand side.

Articles

Now add another table and name it article. This one will consist of 5 columns (fields).

• article_id - int type - primary key, autoincrement
• title - varchar type - length 255
• content - text type
• url - varchar - length 255
• description - varchar- length 255

Here's what it should look like:

(Again, don't forget to set a primary key and autoincrement for the article_id field)

The URL column will contain a URL address, which we will use to access articles. For example, an article with the title "Introductory article" would have a URL value of "introductory-article". Some systems display articles solely based on their ID, which is not very user-friendly and leads is a bad SEO practice. We will use the text data type for the article text because varchar is used mainly for short texts.

Let's confirm and continue by clicking the Save button. Now, nothing can stop us from writing the PHP scripts.

PHP scripts

We are going to have six scripts total. Each script will be split up into 2 parts. The first half will have a block of PHP that handles page logic. Whereas, the second half will be the HTML code and additional PHP code that *prints the output**. The two parts will be strictly separated and will be in separate files. As I said, simplicity is our number one priority, so our application's design will have to suffer a bit in order to deliver what we have promised. Doing things this way will work for very small projects, however, if you were to design something bigger this way, you would quickly run into trouble.

First and foremost, we will set up user registration in our system. To do that, we add the sign-up.php file in the root of out project folder.

Add the following HTML code to the file:

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

<body>
    <article>
        <div id="centerer">
            <header>
                <h1>Sign-up</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 />
                    Password confirmation<br />
                    <input type="password" name="password_confirmation" /><br />
                    Enter current year (antispam)<br />
                    <input type="text" name="captcha" /><br />
                    <input type="submit" value="Sign-up" />
                </form>
            </section>
            <div class="clear"></div>
        </div>
    </article>
</body>
</html>

Short and simple, as promised. It contains the HTML structure and the new user registration form. A user enters his/her name, and password (twice, for confirmation purposes) and the current year, which is a simple form of protection against spam. Then, we have some PHP in the HTML code, which prints out the text in the $notice variable, if said variable exists. We will use this variable to pass the notice from the PHP block (the application logic layer) to the HTML block (the application presentation layer).

Our website should now look like this:

In the next lesson, NOO-CMS - User registration in PHP, we will add the PHP block.