Framework maturing

The current framework is being used in an application inspired by my son. It seems to hold up well. One of the reasons this MVC framework is better is because it uses controllers at the model and view level.

Pre-thoughts…

Just remember, we’re building a website. Which means that each webpage is its own island. Web pages are supposed to be script, not objects. We’re not developing a desktop application. So, with that said, remember, we’re building this procedurally.

First, the .htaccess file. This is the very first entry point in every page. We need to specify some routing. Basically, if the file exists, we do not reroute. We use the existing page. If the file doesn’t exist, we try to route. Our first step in the controller part of the website.

1
2
3
4
# Page redirect - if page doesn't exist, output URL as querystring
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*) index.php?route=$1 [L]

Second, the index.php file explained. This is our second hit as we’re attempting to render our page, whatever the page may be.

1
2
3
4
// Basic session start
session_start();
// load in your database connections and other common functions
require_once( $_SERVER['DOCUMENT_ROOT'].'/helpers/functions.php' );

The configurations in the index.php file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Currently our configurations are set in an array. We can easily move this to another file.
$_config = array();

$_config['site_domain'] = 'http://'.$_SERVER['SERVER_NAME'];
$_config['section'] = '';
$_config['showadminheadercontent'] = true;
// we use the page config variable to determine the page we're requesting.
// If it's blank, we're obviously grabbing the index page.
$_config['page'] = 'index';
// Same concept as above, a pagelet is a sort of a modular page.
// If the pagelet is not requested in the URL, we set it as "main" for every page.
// We use this in order to grab different pages or views, or to determine what
//   files we need to request.
$_config['pagelet'] = 'main';
...

The router in the index.php file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// This is where we get the router as passed in by our .htaccess file.
if (isset($_GET['route'])) {
    // a simple explode to get all of our values from the URL.
    // The format of the incoming URL will always be /part1/part2/part3/etc...
    $route = explode("/",$_GET['route']);

    // we check to see if our route contains anything in the first part.
    if (isset($route[0])) {
        // if we have an admin section, this is where we would check for that.
        if ($route[0] == 'admin') {
            // This means that we're in the admin section. So, we can set this in our configuration.
            $_config['section'] = '/admin';
        } else {
            $_config['section'] = '/';
        }
    }
}

You can continue with the rest of the routing the same way. $route[1] can be your page call, $route[2] can be an action call, and $route[3] and beyond can be variable values passed along.

You can also set your $_config[‘page’] as $route[0] or $route[1] depending on if you’re in the admin section or not. We do this in order to store the value in ONE variable instead of the $route[0] or $route[1] variable, and constantly use a conditional to determine the page we’re on.

Next step in the index.php file is the models. We want to load the models after we’ve gathered all information required. If you want to add a “language” setting to the site, do it before the models.

1
2
3
4
5
6
7
8
9
10
// define your model name here.
// the folder structure for models is: /models/<section>/<page>_model.php
$model_name = "/models".$_config['section'].'/'.$_config['page']."_model.php";
if (is_file($_SERVER['DOCUMENT_ROOT'].$model_name)) {
    $_SESSION['error'] = '';
    require_once($_SERVER['DOCUMENT_ROOT'].$model_name);
} else {
    $_SESSION['error'] = "Model $model_name not found.<br>";
    echo '<div style="border:1px solid #f00;">'.$_SESSION['error'].'</div>';
}

Our models are based on a folder structured mentioned in the code:

1
/models/
/ _model.php so if your URL looks something like this:

http://website.com/info

There will be an attempt to load the model: /model/info_model.php

If that model does not exist, an error will display.

Following the next step, it’s time to write some HTML out to the page. This is where the Doctype, html, head, body tags are send to the page for rendering.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en-US">;
    <head>
        <!--[if IE]><link rel="stylesheet" href="/css/main-ie.css" type="text/css" /><![endif]-->
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="/css/site_<?php require_once($_SERVER['DOCUMENT_ROOT'].'/helpers/combine_css.php'); ?>.css">
        <link rel="stylesheet" type="text/css" href="/css<?php echo $_config['section']; ?>/main.css">
        <?php
       if ( function_exists ("loadMoreCss") ) {
           loadMoreCss();
       }
       ?>
    </head>
    <body>

Notice several things above. We’ve added an ie css link for those of you that need to tweak css for IE. This section is where you load your CSS ONLY, do not attempt to load any javascript. Javascript will be taken care of in the footer.

Another thing to notice was that I used a CSS combiner to combine all of my common CSS, like jQuery UI CSS, Fancybox CSS, and other standard CSS that I use on all my projects.

Also notice that loadMoreCss() function. This is in case your page will require additional CSS to be rendered, we don’t want to include it EVERY page on our site.

All of the above should be placed in the loadHeader() function. Don’t forget to global your $_config array.

The body will be explained in a different post. I will also make this tutorial available in the pages section.