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.
This page allows authorized users to add new blocks to the system.
After a few entries, a user can build a complete second page.
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).
