A typical website structure (Coldfusion)

Some people, reading this post have asked to me how organize a site structure for Coldfusion projects. The approach is the same that I have used with a general PHP project:



How you can see, conceptually is the same of a PHP web project; the difference is the Application.cfm file that replaces config.php. This file is usefull to define the coldfusion application's profile and global variables.

We open Dreamweaver and we create a file called Application.cfm in the site root. We open the file and, in the code view, we cancel all dreamweaver default code. Now we have an empty page and we copy and paste the following code:

<cfapplication sessionmanagement="yes" setclientcookies="yes" name="myApplicationName">
<cfset dbName="myDatabaseName">
<cfset thisPage=GetFileFromPath(GetTemplatePath())>
<cfset queryString=Iif(CGI.QUERY_STRING NEQ "",DE("?"&(CGI.QUERY_STRING)),DE(""))>

Coldfusion <cfapplication> tag, defines the scope of a ColdFusion application; enables and disables storage of Client variables; specifies the Client variable storage mechanism; enables Session variables; and sets Application variable timeouts.

The dbName variable store the database name and ca be used into <cfquery> tag.

The thisPage variable, store the current path when an user visit a page (for ex. index.cfm). It's usefull, for example, when you submit a form that reload the same page and execute some coldfusion code. You can replace the file name for example (insertpost.cfm) whith #thisPage#

The queryString variable get the current URL variable name, if is defined an URL variable in the browser navigation bar.

At this moment, our Application.cfm file no require other lines of code.

Conceptual design for index.cfm page layout using CSS is the same I have explained in this post.

Load pages using URL variables with Coldfusion cfinclude and cfif tag

The same approach used in all previous post can be used with other server-side languages, for example Coldfusion. This post show how to load pages using Coldfusion URL variables with <cfinclude> and <cfif> tag.



A coldfusion URL Variable is defined simply with this dotted code (URL + . + 'varname'):

URL.varname

Copy and paste this code inside the #main section in index.cfm file (see this post to examine the page structure):

<!-- If is defined URL variable 'aboutme' -->
<cfif isDefined('URL.aboutme')>
<!-- include page 'about me' -->
<cfinclude template="include/in-aboutme.cfm">
<!-- else if is defined URL variable 'interests' -->
<cfelseif isDefiend('URL.interests')>
<!-- include page 'interests' -->
<cfinclude template="include/in-interests.cfm">
<cfelse>
<!-- in all other cases include the home page -->
<cfinclude template="include/in-home.cfm">
</cfif>

The result is the same obtained with PHP in the previous post.

Load pages using URL variables and PHP include() function

In the previous post we have seen the conceptual design for index.php page. This page can be defined the "container" of our site. Inside the #main section we will load all the other pages, arranging the use of URL variables and PHP include() function. In this way, we will have a single page that define the global layout for our site (index.php: topbar, navigation bar, footer).
An URL variable is a variable visible from the user into the browser navigation bar identify from the char "?" + "varname". This is the typical approach using URL variable:



A PHP URL variable is identified from the following code:

$_GET['varname']

Imagine our site have only tree pages: Home, About me, Interests; we want to use URL variables to load the relative pages saved into include folder of our site root (take a look to the complete site structure post).


Copy and paste this code inside the #main section:

<div id="main">
<?php
//If is defined URL variable 'aboutme'
if(isset($_GET['aboutme'])){
// include page about me
include('include/in-aboutme.php');
//else if is defined URL variable 'interests'
}else if(isset($_GET['interests'])){
// include page interests
include('include/in-interest.php');
// in all other cases include the home page
} else {
include('include/in-home.php');
}
?>
</div>

In this way, when is defined an URL variable that satisfies some criteria (in this case the name), the PHP code load the relative page. In all other cases, or if is not defined a URL variable, load the default page in-home.php (our home page).


In the next lesson I will explain an example of a typical navigation bar that use link with URL variable to navigate on your site.

Conceptual design for site's layout

This post explains how to organize the HTML code to design index.php page's layout using the default.css file created previously; (for other informations about this argument see this post about the website structure, and this post about the page's layout using CSS).

Step 1: HTML code
First step, we create a file called index.php in the site root; in the previous post we have added a link to CSS file (default.css) in the index.php <head> tag and now, we use it to create the page's layout structure wich will be like this:



All pages will be loaded into main section using URL variables. Open index.php and copy and paste this code into the <body> tag:

<body>
<div id="container">
<div id="topbar"> ...topbar content... </div>
<div id="navbar"> ...navbar content... </div>
<!-- the main section where all pages will be loaded using URL variables and PHP include() function -->
<div id="main">
<div id="column_left"> ...column left content... </div>
<div id="column_right"> ...column right content... </div>
<!-- this layer solve some issue about the css design, forced the #main layer height equal to height of two column layer (#columnt_left and #column_right) inside itself -->
<div class="spacer"></div>
<!-- close #main content -->
</div>
<!-- close #container -->
</div>
</body>

Step 2: CSS file

Copy and paste this code into default.css file:

/* ------------------------------
PAGE STRUCTURE
------------------------------ */

/*
#container has an absolute width (780 pixel)
The width of inner elements is set to auto,
in this way all inner elements have the same
width of the element which contains them
*/

#container{width:780px; margin:0 auto;}
#topbar{width:auto; display:block; height:80px;}
#navbar{width:auto; display:block; height:24px;}

#main{width:auto; display:block;}
#column_left{width:560px; margin-right:20px; float:left;}
#column_right{width:200px; float:left;}

/*
div.spacer, solve an issue with #container height
in css 2 column layout.
*/

div.spacer{clear:both; height:10px; display:block;}

#footer{width:auto; display:block; height:24px;}

The graphic result will be like this:

Now, our site structure is ready to be completed adding other elements that we will see in the next lessons.

Design page layout using CSS

Today's lesson will explains how to design page's layout for your site using a css file. In the previous lesson we have seen a typical website structure which we can use to project our site. In the css folder create a new css file called default.css where insert the css code to design the page's elements.

Now, open index.php and put this code into <head> tag:

<link href="css/default.css" rel="stylesheet" type="text/css" />

In this way index.php will get all informations about the page's design from the CSS file default.css

Page layout and CSS code
Before you proceed, it's useful to have an idea about page's sections. I suggest to use this layout (2 column fixed size):




Copy and paste this code into default.css file:

/* ------------------------------
PAGE STRUCTURE
------------------------------ */

/*
#container has an absolute width (780 pixel)
The width of inner elements is set to auto,
in this way all inner elements have the same
width of the element which contains them
*/

#container{width:780px; margin:0 auto;}
#topbar{width:auto; display:block; height:80px;}
#navbar{width:auto; display:block; height:24px;}

#main{width:auto; display:block;}
#column_left{width:560px; margin-right:20px; float:left;}
#column_right{width:200px; float:left;}

/*
div.spacer, solve an issue with #container height
in css 2 column layout.
*/

div.spacer{clear:both; height:10px; display:block;}

#footer{width:auto; display:block; height:24px;}

The basic page structure is ready! In the next lesson we will format index.php file, adding layer using default.css file.

Related Posts
Optimize CSS files to improve code readability

Config.php: define your database connection's parameters

In this lesson we will create a new MySQL database using phpMyAdmin and a config.php file in the site root with connection's parameters for the database (database name, database host, username, password).



Open config.php and copy and paste the code replacing the value of variables $db_host, $db_name, $username, $password, with correct parameters.

<?php
// Connection's Parameters
$db_host="localhost";
$db_name="database_name";
$username="database_username";
$password="database_password";
$db_con=mysql_connect($db_host,$username,$password);
$connection_string=mysql_select_db($db_name);
// Connection
mysql_connect($db_host,$username,$password);
mysql_select_db($db_name);
?>

Now, in the site root, create index.php file and use PHP include() function to include config.php into the page.

<?php include('config.php') ?>

This is a simple way to enstablish a connection with your database MySQL to be used when you need to execute a SQL query.
The index.php structure will be explained in the next lessons.

A typical website structure

This is a typical website structure that I use in my web projects. To create this structure using Dreamweaver, select from the menu the option Windows > Files and start creating new pages and folders.



- index.php is the "container" of your site. Inside this page we will define the page's principal sections (topbar, navigation's bar, main content, footer);

- config.php contains the connection's strings for MySQL database (host name, user, password);

- image folder contains all the graphical elements for your site (gif, jpeg, png);

- css folder contains the style sheets files (.css);

- include folder contains all the web pages that will be loaded into the index.php "main content" section using URL variables.

See also: Load pages using URL variables and PHP include() function