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.
How to make HTML5 template into CMS system?
For demonstration purpose I have used Hyperspace Template from the website https://html5up.net
Once you download the template, you can see the structure of files like this:
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.
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.
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.
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.
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
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.
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.
<?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.
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>.
Add the script in-between the Hyperspace and save the index.php, refresh the index.php page.
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.
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.
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.
Once you save the description, you can click view to see if the changes has been reflected on first page or not.
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.