Creating Your Backlit Website

Template files for a Backlit powered website are amazingly simple. The following is the full index.php file for the demo site:

index.php
1
2
3
4
5
6
7
8
9
10
11
12

<?php
require_once 'curiousfind/backlit/class.backlitarticle.php';
$article_id = (isset($_GET['article_id'])) ? $_GET['article_id'] : 1;
$article = new BacklitArticle($article_id);
$page_title = 'Fabulous Fun Land : ' . $article->getTitle();
require_once 'includes/header.php';
if ($article->getParentID() != 0) echo '$lt;div id="breadcrumbs">' . $article->getBreadcrumbTrail() . '</div>';
echo '<div id="content">';
if ($article->getShowTitle()) echo '<h1 class="page_title">' . $article->getTitle() . '</h1>';
echo $article->getContent();
require_once 'includes/footer.php';
?>
  • Line 2 imports the BacklitArticle class
  • Line 3 sets the variable $article_id to the value passed in the URL or to 1 if none is present
  • Line 4 creates an instance of BacklitArticle, passing the $article_id variable to the constructor
  • Line 5 sets the page title (the title that appears at the top of the browser)
  • Line 6 includes the header.php file (see below)
  • Line 7 creates the breadcrumb trail if the article has a non-zero parent_id (the home page has a parent_id of 0)
  • Line 9 sets the title inside a <h1> tag if the article's Show Title property is set
  • Line 10 prints the article's content
  • Line 11 includes the footer.php file (see below)
header.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><?php echo $page_title; ?></title>
<link rel="shortcut icon" href="/favicon.ico" />
<link href="/css/wrapper.css" rel="stylesheet" type="text/css" />
<link href="/css/content.css" rel="stylesheet" type="text/css" />
<!--[if gte IE 5.5000]>
    <![if gte IE 7.0000]><link href="/css/fix_ie7.css" rel="stylesheet" type="text/css" /><![endif]>
    <![if lt IE 7.0000]><link href="/css/fix_ie6.css" rel="stylesheet" type="text/css" /><![endif]>
<![endif]-->
</head>
<body>
<div id="wrapper">
    <div id="top"></div>
    <div id="middle">
        <div id="horz_menu">
            <ul>
                <li id="horz_menu_home"><a href="/">Home</a></li>
                <li id="horz_menu_batting_cages"><a href="/article/3">Batting Cages</a></li>
                <li id="horz_menu_billiards"><a href="/article/5">Billiards</a></li>
                <li id="horz_menu_bowling"><a href="/article/2">Bowling</a></li>
                <li id="horz_menu_cinema"><a href="/article/7">Cinema</a></li>
                <li id="horz_menu_go_carts"><a href="/article/6">Go Carts</a></li>
                <li id="horz_menu_miniature_golf"><a href="/article/4">Miniature Golf</a></li>
            </ul> 
        </div>
footer.php
1
2
3
4
5
6
7

            <div class="clearit"></div>
        </div>
    </div>
    <div id="bottom"></div>
</div>
</body>
</html>

The other two templates used are album.php and photo.php. They are also very simple.

album.php
1
2
3
4
5
6
7
8
9
10
11
12
13

<?php
require_once 'curiousfind/backlit/class.backlitalbum.php';
$album_id = (isset($_GET['album_id'])) ? $_GET['album_id'] : 1;
$album = new BacklitAlbum($album_id);
$page_title = 'Fabulous Fun Land : ' . $album->getTitle();
require_once 'includes/header.php';
echo '<div id="breadcrumbs">' . $album->getBreadcrumbTrail() . '</div>';
echo '<div id="content">';
echo '<h1 class="page_title">' . $album->getTitle() . '</h1>';
echo '<div class="photo_album_page align_center">' . $album->getPhotosAsTable() . '</div>';
if (count($album->getChildren()) != 0) echo '<div class="clearit"></div><p><strong>This album contains the following child albums:</strong></p>' . $album->getChildrenAsList();
require_once 'includes/footer.php';
?>
photo.php
1
2
3
4
5
6
7
8
9
10
11
12

<?php
require_once 'curiousfind/backlit/class.backlitphoto.php';
$photo_id = (isset($_GET['photo_id'])) ? $_GET['photo_id'] : 1;
$photo = new BacklitPhoto($photo_id);
if ($_GET['action'] == 'download') $photo->downloadOriginal();
$page_title = 'Fabulous Fun Land : ' . $photo->getCaption();
require_once 'includes/header.php';
echo '<div id="breadcrumbs">' . $photo->getBreadcrumbTrail() . '</div>';
echo '<div id="content">';
echo '<div class="photo_album_page align_center">' . $photo->getPhotoAsTable() . '</div>';
require_once 'includes/footer.php';
?>

There you have it. Other than the CSS files, that is all there is to the frontend of the demo site!

The BacklitArticle, BacklitAlbum, and BacklitPhoto classes have additional methods so you can build many types of templates. For more information, consult the documentation by clicking one of the classes.