How to Allow User-Generated Content on Your HTML5 and CSS3 Site

By Andy Harris

In HTML5 and CSS3 programming, the hallmark of a CMS is the ability of users with limited technical knowledge to add content to the system. This very simple CMS illustrates a limited way to add data to the CMS.

image0.jpg

This page allows authorized users to add new blocks to the system.

image1.jpg

After a few entries, a user can build a complete second page.

image2.jpg

The system is simple but effective. The user builds blocks, and these blocks are constructed into pages. First, look over the buildBlock.html page.

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Build new block</title>
 <link rel = "stylesheet"
  type = "text/css"
  href = "csStd.css" />
 <style type = "text/css">
 label {
 float: left;
 width: 10em;
 clear: left;
 text-align: right;
 padding-right: 1em;
 }
 input, select, textarea {
 float: left;
 width: 20em;
 }
 button {
 display: block;
 clear: both;
 margin: auto;
 }
 </style>
</head>
<body>
 <div id = "all">
 <div id = "heading">
  <h1>Build a new block</h1>
 </div>
 <div class = "content">
  <form action = "buildBlock.php"
   method = "post">
  <fieldset>
   <label>
   password
   </label>
   <input type = "password"
     name = "password" />
   <label>block type</label>
   <select name = "blockType">
   <option value = "1">head</option>
   <option value = "2">menu</option>
   <option value = "3">content1</option>
   <option value = "4">content2</option>
   <option value = "5">footer</option>
   </select>
   <label>title</label>
   <input type = "text"
     name = "title" />
   <label>content</label>
   <textarea name = "content"
     rows = "10"
     cols = "40"></textarea>
   <label>page</label>
   <select name = "pageID">
   <option value = "1">main page</option>
   <option value = "2">page 2</option>
   </select>
   <button type = "submit">
   submit
   </button>
  </fieldset>
  </form>
 </div>
 </div> 
</body>
</html>

This code is a reasonably standard HTML form. Here are the highlights:

  • Add CSS for consistency: It’s important that the user understands she is still in a part of the system, so include the same CSS used to display the output. You can also add local CSS to improve the form display.

  • Build a form that calls buildBlock.php: The purpose of this form is to generate the information needed to build an SQL INSERT statement. The buildBlock.php program provides this vital service.

  • Ask for a password: You don’t want just anybody modifying your forms. Include a password to make sure only those who are authorized add data.

  • Get other data needed to build a block: Think about the INSERT query you’ll be building. You’ll need to get all the data necessary to add a new record to the cmsBlock table.

In a real system, this data would be pulled from the database (ideally through AJAX).