Developing a Simple CMS with GridlessBuilder.js

This guide explains, in a simple step-by-step manner, how to implement GridlessBuilder.js in PHP environment to create a simple CMS application.

Note: GridlessBuilder.js is a client-side Javascript library (server independent), so it can be used in almost any server environment, such as .NET, Node.js, etc. The GridlessBuilder.js implementation in this guide should still be relevant in most cases. You may also check the readme file in the GridlessBuilder.js package for more usage info.

If you haven’t used GridlessBuilder.js, get the package here. Or you can just follow the guide to get the idea on how to create your own CMS.

If you are GridlessBuilder.js users, this simple CMS project is included in your GridlessBuilder.js package. You can download the project files in your account area and follow the installation instruction in the readme file.

Please feel free to use the simple CMS for your websites or clients’ projects (personal or commercial). You may want to improve the CMS according to your needs.

Step 1: Displaying Content from Database

Example file: example1.php

We will start by creating a simple PHP page for displaying content from MySQL database. First, we create a table called pages to store our web pages’ content. The table consists of the following fields:

id
filename
title
description
content (for storing HTML content)
css (for storing stylesheet for the content)
js (for storing custom script)

Then, insert a few sample records:

id	filename	title
1	index	Home
2	about	About

If you have installed the project code, the pages table and sample records should have been be created..

We can get a page’s data by running a query based on a given page’s filename. For example, to get the About page:

$filename = 'about';

$sql = 'SELECT * FROM pages where filename= :filename'; 
$s = $pdo->prepare($sql);
$s->bindValue(':filename', $filename);
$s->execute();
if($row = $s->fetch()) {
	$id = $row['id'];
	$title = $row['title'];
	$description = $row['description'];
	$content = $row['content'];
	$css = $row['css'];
	$js = $row['js'];
}

To display a web page with the data we use a simple HTML structure below:

<!DOCTYPE html>
<html lang="en">
<head>    
    <meta charset="utf-8">
    <title><?php echo $title; ?></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="<?php echo $description; ?>">
    
    <!-- Gridless CSS framework -->
    <link href="assets/gridless/gridless.css" rel="stylesheet" type="text/css" />

    <!-- Stylesheet -->
    <style id="_content_css">
        <?php echo $css; ?>
    </style>

</head>
<body style="touch-action: pan-y">
    
<!-- Content -->
<div class="is-wrapper">
    <?php echo $content; ?>
</div>

<!-- Gridless CSS framework -->
<script src="assets/gridless/gridless.js"></script>

<!-- JavaScript -->
<script id="_content_js">
    <?php echo $js; ?>
</script>

</body>
</html>

The $title is rendered inside <title> element.
The $description is rendered inside <meta> element.
The $css is rendered inside <style id=”_content_css”> element (this is a must).
The $content is rendered inside <div class=”is-wrapper”> element (this is a must).
And the $js is rendered inside <script id=”_content_js”> element (this is a must).

As our content will be created using GridlessBuilder.js, we also need to include Gridless CSS framework. As seen, we include two files: gridless.css and gridless.js.

For the complete code and to try the example, please open example1.php.

http://localhost/mysite/example1.php

Step 2: Editing with GridlessBuilder.js

About | Privacy | Delivery & Return