route66
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Route 66 CMS</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
html,body {
margin:0;padding:0
}
body {
background: #7a7a7a url(route66-images/bg.png) repeat;
color: #363636;
font: 13px/20px verdana,arial,sans-serif;
text-align: center;
}
div#header-h1 {
font-size: 31px;
font-weight: normal;
letter-spacing: 4px;
margin: 0;
padding: 20px 0 60px 20px;
}
div#header-{
background: #363636 url(route66-images/bg_header.jpg) no-repeat right;
color: #ccc;
}
div#container {
text-align: left;
}
div#maintext {
margin: 20px;
}
div#leftcolumn {
background:#fff;
}
div#footer {
background: #363636 url(route66-images/bg_footer.jpg) no-repeat 0% 0%;
color: #fff;
margin: 0;
font-size: 12px;
padding: 15px 0 5px 0;
text-align: center;
clear: both;
width: 100%;
}
div#container {
background: #a3a3a3 url(route66-images/bg_content.jpg) repeat-y;
border-right: 2px solid #363636;
border-left: 2px solid #363636;
width: 960px;
margin: 0 auto;
}
div#content {
border-top: 2px solid #363636;
float: left;
width: 760px;
}
div#leftcolumn {
border-top: 2px solid #363636;
float: right;
width: 200px;
}
/* BEGIN NAVIGATION */
#menu {
padding-left: 0;
margin: 0;
width: 200px;
}
#menu li {
list-style: none;
margin: 0;
padding: 0;
}
#menu li a
{
font-size: 11px;
background: #6c6c6c url(route66-images/nav_arrow_off.gif) no-repeat right;
color: #fff;
display: block;
width: 100%;
line-height: 2.6em;
border-top: 1px solid #a3a3a3;
border-bottom: 2px solid #363636;
outline:none;
text-decoration: none;
text-indent: 10px;
text-transform: uppercase;
}
#menu li a:hover {
color: #363636;
background: #ccc url(route66-images/nav_arrow_over.gif) no-repeat right;
}
/* END NAVIGATION */
/* BEGIN MORE SITE STYLES */
a {
color: #363636;
font-weight: bold;
outline: none;
text-decoration: underline;
}
a:hover {
color: #6c6c6c;
text-decoration: none;
}
#footer a {
color: #fff;
}
#footer a:hover {
color: #f1f1f1;
text-decoration: none;
}
h1,h2,h3 {
font-size: large;
letter-spacing: 1px;
}
h4,h5,h6 {
font-size: medium;
letter-spacing: 1px;
margin: 10px 0;
}
h1,h2,h3,h4,h5,h6 {
display: block;
clear: both;
}
blockquote {
margin-left: 25px;
margin-right: 0;
padding: 0;
font: bold 14px/20px verdana,arial,sans-serif;
}
.pagename {
background-color: #a3a3a3;
font-size: 14px;
font-weight: bold;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
padding: 4px 5px 4px 5px;
}
.headline {
background-color: #6c6c6c;
border-top: 1px solid #a3a3a3;
border-right: 2px solid #363636;
border-bottom: 2px solid #363636;
border-left: 1px solid #a3a3a3;
font-size: 21px;
font-weight: bold;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 35px;
margin: 0 0 0 25px;
padding: 3px 5px 3px 5px;
}
* html .headline {padding: 2px 5px 3px 5px;}
.infobox {
font-size: 12px;
background: url(route66-images/bg_infobox.gif) no-repeat 0% 0%;
border-bottom: 2px solid #363636;
padding: 5px 10px 5px 10px;
}
.infobox h4 {
font-size: small;
margin: 0;
}
.infobox p {
padding: 0;
}
div.scrollbox {
border: 1px solid #363636;
background-color: #fff;
height: 300px;
margin: 10px 0 10px 0;
padding: 0 10px 0 10px;
overflow: auto;
width: 695px;
}
code {
display: block;
border: 1px solid #363636;
background-color: #fff;
padding: 5px;
margin: 10px 0 10px 0;
}
pre {
margin: 0;
padding: 0;
}
strong, b {
color: #b70005;
}
img {
border: 0;
vertical-align: middle;
}
.imgleft {
float: left;
margin: 5px 10px 0 0;
border-top: 1px solid #ccc;
border-right: 2px solid #a3a3a3;
border-bottom: 2px solid #a3a3a3;
border-left: 1px solid #ccc;
background-color: #fff;
padding: 5px;
}
.imgright {
line-height: normal;
float: right;
margin: 5px 0 0 10px;
border-top: 1px solid #ccc;
border-right: 2px solid #a3a3a3;
border-bottom: 2px solid #a3a3a3;
border-left: 1px solid #ccc;
background-color: #fff;
padding: 5px;
}
hr {
clear: both;
border: 0;
height: 1px;
color:#a3a3a3;
background-color: #a3a3a3;
margin: 0;
}
.clear {
clear: both;
}
form {
width: 480px;
margin-top: 20px;
}
#contactleft {
width: 180px;
float: left;
}
#contactright {
float: right;
width: 300px;
}
.input {
border-top: 1px solid #ccc;
border-right: 2px solid #a3a3a3;
border-bottom: 2px solid #a3a3a3;
border-left: 1px solid #ccc;
width: 160px;
}
.button {
border: 1px solid #6c6c6c;
background-color: #6c6c6c;
color: #fff;
font-weight: bold; padding: 2px;
}
textarea {
border-top: 1px solid #ccc;
border-right: 2px solid #a3a3a3;
border-bottom: 2px solid #a3a3a3;
border-left: 1px solid #ccc;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
line-height: 20px;
width: 270px;
height: 190px;
}
.thumbnail {
float: left;
width: 80px;
height: 60px;
border-top: 1px solid #ccc;
border-right: 2px solid #a3a3a3;
border-bottom: 2px solid #a3a3a3;
border-left: 1px solid #ccc;
background-color: #fff;
margin: 10px 20px 10px 0;
padding: 5px;
}
a.gallery, a.gallery:visited {
position:relative;
z-index:1;
}
a.gallery b {
position:absolute;
visibility:hidden;
width:320px;
height:0;
border-top: 1px solid #ccc;
border-right: 3px solid #a3a3a3;
border-bottom: 3px solid #a3a3a3;
border-left: 1px solid #ccc;
background-color: #fff;
padding: 10px;
left:0;
top:-150px;
}
a.gallery:hover {
text-decoration:none;
border:0;
z-index:1000;
}
a.gallery:hover b {
visibility: visible;
height: 240px;
cursor: pointer;
z-index:500;
}
a.gallery:hover b img {
border:0;
}
/* END MORE SITE STYLES */
</style>
</head>
<body>
<!-- ##### BEGIN LAYOUT ##### -->
<div id="container">
<!-- ##### BEGIN header-##### -->
<div id="header">
<h1>Route 66</h1>
</div>
<!-- ##### END header-##### -->
<div id="wrapper">
<!-- ##### BEGIN CONTENT ##### -->
<div id="content">
<div id="maintext"> <span class="pagename">Create a Simple CMS</span> <br />
<span class="headline">How to create a simple CMS with PHP</span>
<blockquote>If you're in need of a <strong>CMS</strong> (Content Management System) for small sites based on PHP and flat files (*.txt), just follow the <strong>5 steps</strong> below to create a <strong>really simple</strong> one within <strong>a few minutes</strong>.</blockquote>
<h4>Requirements:</h4>
<ul>
<li>A custom-made <a href="http://www.free-css.com/">website template</a> or a self-made one</li>
<li>A <a href="http://www.free-css.com/">source code editor</a></li>
<li><a href="http://www.free-css.com/">PHP</a> installed on your server</li>
</ul>
<h4>Step 1:</h4>
<p>Rename your index.html/index.htm to <strong>index.php</strong> and put the code below at the very beginning of the page.</p>
<code> <?php<br />
<br />
/* The variable below is an array of valid pages. When you add a new page, it must be added to this array. */<br />
<br />
$validPages = array(<br />
'<strong>news</strong>',<br />
'<strong>about</strong>',<br />
'<strong>gallery</strong>',<br />
'<strong>links</strong>',<br />
'<strong>contact</strong>'<br />
);<br />
?><br />
<!-- HTML code begins here --><br />
<!DOCTYPE html PUBLIC etc... </code>
<h4>Step 2:</h4>
<p>Create the navigation list as shown below. Study exactly the code, how the additional pages will be created according to the array of valid pages shown in <strong>Step 1</strong>.</p>
<code> <!-- ##### BEGIN NAVIGATION ##### --><br />
<br />
<ul id="menu"><br />
<li><a href="index.php">Home</a></li><br />
<li><a href="index.php?p=<strong>news</strong>">News</a></li><br />
<li><a href="index.php?p=<strong>about</strong>">About us</a></li><br />
<li><a href="index.php?p=<strong>gallery</strong>">Gallery</a></li><br />
<li><a href="index.php?p=<strong>links</strong>">Links</a></li><br />
<li><a href="index.php?p=<strong>contact</strong>">Contact</a></li><br />
</ul><br />
<br />
<!-- ##### END NAVIGATION ##### --> </code>
<h4>Step 3:</h4>
<p>Copy and paste the code below, where your content goes, whereas <strong>home.txt</strong> will be the default content for the index.php.</p>
<code> <!-- ##### BEGIN CONTENT ##### --><br />
<br />
<?php<br />
if (isset($_GET['p']) && in_array($_GET['p'], $validPages) && file_exists("includes/" . $_GET['p'] . ".txt")) {<br />
<br />
include("includes/" . $_GET['p'] . ".txt");<br />
} else {<br />
<br />
include("includes/<strong>home.txt</strong>");<br />
}<br />
?><br />
<br />
<!-- ##### END CONTENT ##### --> </code>
<h4>Step 4:</h4>
<p>With a normal <a href="http://www.free-css.com/">source code editor</a> create your content files <strong>home.txt</strong>, <strong>about.txt</strong>, <strong>gallery.txt</strong>, <strong>links.txt</strong> and <strong>contact.txt</strong> and store them in a folder named <strong>includes</strong>.</p>
<p>Fill in your content in the individual *.txt files using usual HTML code and CSS for formatting, for e.g.:</p>
<code> <h1>Welcome to our Homepage!</h1><br />
<br />
<p>Here goes your text...</p><br />
<br />
<p><a href="http://www.openDesigns.org">Open Designs</a></p> </code>
<h4>Step 5:</h4>
<p>Upload the files (<strong>index.php</strong> and folder <strong>includes</strong> with the *.txt.files) to your host via <a href="http://www.free-css.com/">FTP</a> and <strong>you're done</strong>!</p>
<p>Update the content of your sites by simply editing the individual *.txt files and upload them again.</p>
<p>If you want more sites, edit the index.php as described in Step 1 as well as the navigation list (Step 2), create the additional *.txt files and upload them to your server.</p>
<h4>Tips:</h4>
<p>For the <strong>News</strong> section in the right column you can use a simple PHP include, for e.g.:</p>
<code> <!-- ##### BEGIN NEWS ##### --><br />
<br />
<strong><?php include("includes/shortnews.txt"); ?></strong><br />
<br />
<!-- ##### END NEWS ##### --> </code>
<p>Create a <strong>shortnews.txt</strong> file, fill in the content and store it as well in the <strong>includes</strong> folder on your server.</p>
<p>If you want internal links, use e.g. HTML code like this:</p>
<code> <a href="<strong>index.php?p=news</strong>">Read more...</a> </code>
<p>If you want to expand your little CMS, use a small web-based <strong>file manager</strong> written in PHP like <a href="http://www.free-css.com/">ile Thingie</a>, in order to edit and upload files, to create new folders etc. directly on your server <strong>without FTP</strong>.</p>
<p>With the power of PHP you can have a simple working CMS for small sites within a few minutes and a few steps, using only one page. Isn't that easy?</p>
<h4>Credits:</h4>
<p><a href="http://www.free-css.com/">InfernoForums</a> (Site Templating System Using PHP - Version 1)</p>
</div>
</div>
<!-- ##### END CONTENT ##### -->
</div>
<!-- ##### BEGIN LEFT COLUMN ##### -->
<div id="leftcolumn">
<ul id="menu">
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="cms.html">Create a Simple CMS</a></li>
<li><a href="contact.html">Contact Form</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="rss.html">RSS feed</a></li>
<li><a href="page.html">Empty Page</a></li>
</ul>
<div class="infobox">
<h4>News</h4>
HTML, short for Hypertext Markup Language, is the predominant markup language for the creation of web pages. It provides a means to describe the structure of text-based information in a document - by denoting certain text as headings, paragraphs, lists, and so on - and to supplement that text with interactive forms, embedded images, and other objects.
<p><a href="http://www.free-css.com/">Read more...</a></p>
</div>
</div>
<!-- ##### END LEFT COLUMN ##### -->
<!-- ##### BEGIN FOOTER ##### -->
<div id="footer"> © Copyright 2007 by Your Name | Design by <a href="http://www.wfiedler-online.de">wfiedler</a> </div>
<!-- ##### END FOOTER ##### -->
</div>
<!-- ##### END LAYOUT ##### -->
</body>
</html>
Related examples in the same category