Do-It-Yourself Content Management System

How to build a simple flat-file website framework for your blog or portfolio.   Basic knowledge of HTML, CSS and PHP are the only requirements.

DIY CMS Part 3


File Organization

LilaWorks separates files into 2 categories: Files containing user-specific information and general purpose files. That way, the framework can be moved and updated without disturbing the user's content or presentation.

The user files reside in the 'data' and 'design' folders.

The 'data' folder contains content - pages, posts, images, comments, etc.

The 'design' folder contains presentation information - the style sheet, header and footer code, and customization data such as passwords and menus.

The general purpose files contain the 'mechanics' that deliver the content to the browser.  They include the page  layouts,  code snippets that can be 'included', and the programs that perform the administrative functions. 

One administrative program displays the 'admin area' where all the content is listed,  Others allow the user to add and update posts, pages and content.   You can see these in action on the LilaWorks demo Admin  Panel .

The following shows the files that underly the LilaWorks framework.   Ckeditor is by far the largest.



data files


Stay tuned for Part 4...

Category: tutorial

Leave a Comment

Comments for DIY CMS Part 3

DIY CMS Part 2


How a Page is Built

The index.php file is the first file accessed upon a server request and has to do all the heavy lifting.    First, index.php has to figure out which page is requested.   If the request has come from one of the website pages, there will be a query string with the page name.   If the query string is empty - first time on website, or user clicks the header,  the default page is 'home'.

After learning which page is requested, index.php reads the character string associated with that page  This string tells index.php what layout to build and which blocks of content to collect.    When all information is on hand, index.php 'puts the cookies in the oven' - sends it all to the user's browser.

(In case you are worried that index.php is overworked, there are lots of 'includes' to bring in extra helpers.)


Here's the flow:


Example of a page composed of content blocks in a 2-column layout. 

page layout

Stayed tuned for Part 3

Category: tutorial

Leave a Comment

Comments for DIY CMS Part 2

DIY CMS Part 1



LilaWorks is a dynamic PHP website framework that uses text files in place of a database.  

How Does it Work?

If I'm making cookies, I need a recipe.  The recipe is a string of instructions that specify the ingredients to gather and the method for combining them.  In the same way, when someone clicks a menu page on LilaWorks, the server application uses a recipe to gather pieces of content along with instructions on how they should be displayed.  

The recipe for that page is the information encoded in a string of characters.  Each page has it's own string, compose of 'fields' separated by delimeter characters.. 

"Ingredients' are blocks of content.   This could be text, an image, links, or a menu for example.

Format for a page character string:

Title###layout###page-specific text###featured image###main section content blocks###sidebar section content blocks###footer content blocks

Example for a real page:

New Page###2-column-layout###This is a new page...who knows what you will find out!###new-image.jpg###latest-blog-post,,,###upcoming-events-box,,,,###latest-post-grid

Stayed tuned forPart 2...

Current Capabilities

So far, LilaWorks provides the following features.

  • an administrative area for authorized users and a login screen
  • a customization area for setting up the site title, logo, menu items, etc.
  • an area for setting up the components of a page
  • a choice of page layouts - 1 column, 2 column, etc.
  • an area for creating and editing posts
  • method for assigned post categories and status - 'draft' or 'published'
  • choices for how to display posts - full text, snippets, grid, etc.
  • an archive page showing previous posts by categories and date
  • an area for uploading images
  • a comment function for commenting on posts
  • an area for approving or unapproving comments for display
  • an area for creating and editing 'content blocks' such as sidebar messages and images
  • a method for preserving backups of pages and posts
  • collections of portfolio items that can be displayed as a grid or a slideshow
  • a method for arranging portfolio items in custom sequences

LilaWorks could  be useful for two groups of people: bloggers/website owners who want an easy way to set up their website themselves, and designers who need a quick way to update and maintain websites.

The out-of-the-box framework allows the user to set up a header and add menu items, pages and posts and images. Specialized options can be provided by the designer with very little effort.


LilaWorks Demo

If you are curious as to why I decided to do this, when there are so many CMS frameworks already available, you can read about it here.

Warning: This is not very complicated. The only code used is basic HTML, CSS and PHP. The only package I used was a free version of CKEditor.

Category: tutorial

Leave a Comment

Comments for DIY CMS Part 1