Getting started with the Content Management System

Quick 'n Easy Web Builder has a built-in (PHP based) Content Management System to allow you or your customers to manage content online.

The basic idea is that the content of the page will be displayed inside a fixed area on the page, this is the CMS View. You can think of this as a frame or content place holder, although the content will be dynamically merged with the rest of the page when the page is requested from the server. Basically this means that you only need only one page for the entire website and the rest of the content is managed on the server. The layout of the page (also called the master border) can be designed with the standard Quick 'n Easy Web Builder tools. The navigation (CMS Menu) will be automatically generated based on the site structure on the server, so you don't have to fill the menus manually.

Key features:
Online administrator panel to add/edit/copy and remove pages. 
The administrator panel supports several popular editors like CKEditor, TinyMCE, CLEditor and SummerNote.
You can hide pages from the menu structure which are currently under construction.
Uses several individual 'design blocks' to give maximum flexibility so you can easily integrate the tools into your existing layouts.
A CMS View object, which is a place holder for the online content.
A CMS Menu object, which can be used to navigate between online pages. The menu has many customizable options.
A CMS search object, which can be used to search online content. The search index will automatically be created/updated by the CMS.
A CMS label object, this can be used to display the title of the page, the creation date, author, page views etc anywhere on the page.
Supports (optional) AJAX to allow the user to quickly navigate between pages without having to reload the whole page!
CMS integrates with the login tools so you can assign different users to the CMS but also have a global admin.
The CMS keeps track of the page views.
The CMS supports external pages, so you can mix online content with standard pages. Or even pages from other websites.
Plugin support, for example: user manager, comments, downloads, file manager, form, guestbook, photo album, tell-a-friend, blog etc.
The plugins are standard PHP scripts so advanced users can modify the behavior if needed.

The CMS tools require a web server with PHP and MySQL support, so the first step is to check whether your web host supports PHP/MySQL!
Click to enlarge
Step 1
Read the help and/or manual.
The help contains all the basic information about the Content Management System. It also explains the meaning of all properties.
Step 6
Using one of the optional editors

Quick 'n Easy Web Builder has a simple text based built-in editor (TextArea), but it  also supports several popular editors like CKEditor, TinyMCE and SummerNote.

Due to license restrictions we are not allowed to distribute some of these editors with Quick 'n Easy Web Builder so you will have to manually upload them to the server before you will be able to use them! QnEWB will take care of adding the required scripts to the HTML.

For your convenience, we have created a zip file for each of the supported editors.

WWB Editor (created by the QnEWB team)
WWB editor is a very basic editor with tools for formatting, bullets, links and embedded images.

CL Editor (
CLEditor is an open source jQuery plugin which provides a lightweight, full featured, cross browser, extensible, WYSIWYG HTML editor.
TinyMCE (
TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control.
CK Editor (
CKEditor (formally known as FCK Editor) is a text editor to be used inside web pages. It's a WYSIWYG editor, which means that the text being edited on it looks as similar as possible to the results users have when publishing it.

nicEditor (
NicEdit is extremely lightweight and has built-in support for file uploads.
SCEditor (
SCEditor is another lightweight editor with support for emoticons, YouTube and much more.
Summernote (
Summernote is a simple, clean and flexible WYSIWYG Editor with lots of options like tables, images, videos etc.

Sunedit (
A lightweight editor with many features: pasting from Microsoft Word/Excel, advanced tables, media embed, image upload and much more!

Trumbowyg (
Trumbowyg is a light, translatable and customizable jQuery plugin. Supports images through base64
Most editors can also be customized, for example to add or remove buttons in the toolbars. The additional options can be added via 'Editor Settings'. The options will be inserted "AS IS".

Demo Project

Online Demo

Content Management System FAQ:

Related tutorial:
Using CMS plug-ins

Step 6a
Download the editor you want to use.

Step 6b
Unzip the files to a local folder and then manually upload the entire folder to the server.
The folder should be uploaded to the same folder as the CMS Admin page.

Step 6c
After uploading the editor you can select the 'Editor Type' in the CMS admin properties.

If you choose an editor that is not uploaded to the server or if you have uploaded the editor files to the wrong folder then it' will not work!
Step 3
Open the demo project
A fully functional example project can be downloaded here:
This project demonstrates how to use the CMS tools of Quick 'n Easy Web Builder.

Please first take your time to study the demo project before including the CMS tools in your own project.
The most common reason for the CMS tools not to work on a website is due to configuration mistakes of the user!

After downloading the project and unzipping it to a folder on your local computer, you can open "cms.qwb" via the File menu.
Start by reading the information of the 'Getting started' page.

To make the demo work on your website you need to configure the MySQL properties of the following objects:
CMS Admin object, this object is placed on the 'administrator' page of the template.
CMS View object, this object is placed on the 'content' page of the template.

For now do not change any of the other settings.
Step 4
Publish the entire project (all pages) to a server with MYSQL/PHP.
Make sure you don't overwrite your existing website! Use a different folder...
Step 2
Setup a database on the server.
The CMS requires a database to store the page data and other related information. This system uses MySQL, so your hosting account must have access to a MySQL database. Most paid hosting accounts do have database support included. And otherwise please contact your host to upgrade your existing hosting plan.

After checking if your website supports MySQL you should either create a new database or write down the details of an existing database. Please consult the documentation of your host for more details on how to create a database. This is different for each host so there are no generic instructions we can give you for that. To be able to use the CMS tools you need to following information:

Specifies the MySQL database server. Some web hosts use 'localhost' while others have a dedicated database server. Consult the documentation of your host for the exact server name. 

Specifies the MySQL database name. Either your host created (and named) the database for you or you will have to create a new database yourself in your host's Control Panel. See the documentation of your website for more details.

Specifies the MySQL username.

Specifies the MySQL password.

Note that the required tables will automatically be created by the online admin tool (see later in this tutorial), so you do not have to create the tables manually. However if you want you can also create them yourself. See the help for more details about that.
Step 5
1. Go to the administator page to setup your first page. The default password is 'password'.
2. Add a new page by clicking the 'New page' option.
3. In the Name field enter the name of the page. This name will be displayed in the CMS Menu.
4. The Content field contains the content of the page. If you have setup one of the editors then you will see a What-You-See-Is-What-You-Get editor. Otherwise you will see the standard text input which allows you to either enter plain text or HTML code.
5. The External URL field can be used to specify a link to an external page. This field should empty  for standard pages! See 'How to include external pages' for more details.
6. The Extra data field can be used to assign extra data to a page and make it part of the layout. See 'How to assign extra data and display it on the page?' in the help for more details.
7. Visible specifies whether the page should be displayed in the CMS Menu.
8. Click Save to save the new page.
9. For the first page click "Home page" in the page overview to make it the initial page to be displayed, else no contents will not display.

The first page should now be visible in the 'content 'page of the demo website.
Copyright 2024 Quick 'n Easy Web Builder
Follow us on: