COUCH CMS techonroad

How to make HTML5 template into CMS system?

There are plenty of free HTML5 templates available in the internet which you can use for your web project. Most of them follow the latest technical standards and responsiveness but lack CMS system. So, they are perfect for every devices. But, they are not CMS system and when we need to update the content then we need to play with the HTML and CSS to do the changes and again upload it to the web hosting server. This is a difficult process for non technical person.

So, in this post I will be using HTML5 template and COUCH CMS which is a PHP framework to make CMS system. On this system, non technical person can also login using the username and password and do the update of the content.

Download HTML5 Template | Download COUCH CMS

How to make HTML5 template into CMS system?

HTML5 Template:

For demonstration purpose I have used Hyperspace Template from the website https://html5up.net

make HTML5 template into CMS system

Once you download the template, you can see the structure of files like this:

COUCH CMS SYSTEM

There are total 3 pages as “elements.html”, “generic.html” and “index.html”.

Also, download the COUCH CMS from www.couchcms.com. This is simple open source CMS for designers and no knowledge of PHP required at all. Simply, you can use HTML/CSS template and convert it into CMS quickly.

Now, copy your downloaded COUCH CMS and template into single folder at htdocs of XAMPP as shown in fig below.

Screen Shot 2016-06-17 at 4.20.50 PM Screen Shot 2016-06-17 at 4.21.33 PM

When you run the localhost on your browser you can see the website as shown below. If you are not able to see the website on your browser then please check your localhost.

How to make HTML5 template into full CMS system

It proves that you have loaded all your template and COUCH CMS correctly.

Lets move further and make the Hyperspace as CMS system. For this, we need to create a database, so go to your browser and type in localhost.

You can see the screen as on your browser.

Making html to cos system easily

Click phpMyAdmin and screen will prompt you to create database.

Once you created your database, you need to define the database details on config file.

Goto the folder htdocs > mywebsite > couch > config.example.php
// Name of the database
define( ‘K_DB_NAME’, ‘database_name’ );
// Database username
define( ‘K_DB_USER’, ‘database_username’ );
// Database password
define( ‘K_DB_PASSWORD’, ‘database_password’ );

After entering all the details, save the file as config.php

Now, goto your browser and type in localhost/mywebsite/couch

You can see the registration page, where you need to put your desired username and password and click install.

Screen Shot 2016-06-19 at 4.34.36 PM

Screen Shot 2016-06-19 at 4.35.12 PM

Here you have finished the configuration and you have setup a database as well.

So, now you can go to the admin portal with login prompt. For this type in localhost>mywebsite>couch

html to cos system

Click login button to login to your CMS admin portal.

Till now we have set up CMS system but still our template is in static mode so, now we need to update the template as well.

For this goto the mywebsite folder and chage the extension .html to .php.

 

how to make html into cos system

Open index.php and put <?php require_once( ‘couch/cms.php’); ?> at very top of the page.

Also, put this code  <?php COUCH::invoke(); ?>at the very bottom of the page.

Example:

<?php require_once( 'couch/cms.php'); ?>

<html>

<head></head>

<body>

</body>

</html>

<?php COUCH::invoke(); ?>

The static template index.html has been converted to index.php CMS template and it is listed in the admin CMS portal as shown in fig below. Now, add top and bottom script to all pages (generic.php and elements.php). And, those two pages will be displayed in the admin area as well.

make HTML5 template into CMS system

All three static html pages has been converted to CMS template.

Now, we need to add scripts which will enable the content to be edited from this admin area.

Let’s take index.php first.

We need to update the content of the index.php from the admin section.

Edit the heading of the index.php, for this find the <h1> in the index.php page, h1 and its content should be just below the <body>.

make HTML5 template into CMS system

Add the script in-between the Hyperspace and save the index.php, refresh the index.php page.

CMS System

When you refresh index.php page you can’t see the Hyperspace (Previous heading), because it has been deleted and there is no title in the database. So, now login to the admin and you can see there is new component in index.php template.

CMS System

Enter new title as “New Heading For Testing” and click save, now click view to see whether it has been displayed in front page or not. Once you click view new tab opens and you can see the title has been changed as per we entered.

Screen Shot 2016-06-19 at 5.04.57 PM

Similarly, change the description which is under the heading from the back end admin area. For this we need to put script again in “index.php” template.

After this again, refresh the index.php and on the admin area you can see the new section where you can update the content.

COUCH CMS with HTML5

Once you save the description, you can click view to see if the changes has been reflected on first page or not.

Screen Shot 2016-06-19 at 5.13.25 PM

We can see the changes has been done on the index page.

Basically, putting the script in the place where required you can make simple HTML5 template into full CMS system.

Go through the COUCH CMS Documentation