Creating a Website Tutorial
The following is a quick tutorial for creating a simple website. This tutorial will cover the differrent ways to create a page in FUEL as well as how to create menu structures, layouts, and reusable block elements. Our website will have the following pages:
Make sure the configuration of fuel_mode is set to AUTO in the application/config/MY_fuel.php file.
Creating a Static Page - about
Opt-In Controller Method
There are several ways to create a page in FUEL. The easest way is to simply create a view file. We call this method the Opt-In Controller Method. This allows you to create pages without the need for a controller. A URI path of about/contact would have a view file created at views/about/contact.php. The method has some extra benefits like having deep path structures and hyphens in the path without the need of routing.
For this tutorial we will make the about page a static view file. To do that, create the following file at application/views/about.php:
Hello World
This is our about page
Note how the about page should automatically have a header and footer applied to it. This is because the application/views/_variables/global.php file specifies the main layout file to be applied to it (more about passing variables below). Layout files exist in the application/views/_layouts/ folder (more about layouts below as well).
The home view file is reserved as the index page for the site.
Passing Variables to a Page
FUEL provides several ways to pass variables to view files without the need of creating controllers. By default, the $vars array variable in the application/views/_variables/global.php file gets passed to every page created using the Opt-In Controller Method. For this tutorial, we would like add an additional variable to be used on each page called $bigpic. We want this variable to represent the top main picture of the page and change for each section of the site. We add this variable to the application/views/_variables/global.php file as seen below:
// declared here so we don't have to in controller variable files' $CI =& get_instance(); // generic global page variables used for all pages $vars = array(); $vars['layout'] = 'main'; $vars['page_title'] = ''; $vars['meta_keywords'] = ''; $vars['meta_description'] = ''; $vars['js'] = ''; $vars['css'] = ''; $vars['body_class'] = $CI->uri->segment(1).' '.$CI->uri->segment(2); // big pic image at top of the site $vars['bigpic'] = 'my_bigpic.jpg'; // page specific variables $pages = array();
We then create an application/views/_variables/about.php variables file and add the following "controller-level" variable which will apply the $bigpic value of about_bigpic.jpg to all pages in the about section, overriding the global variables file:
// big pic image at top of the site $vars['bigpic'] = 'about_bigpic.jpg';
Using Controllers - about/contact
FUEL still allows you to create pages using the standard MVC way in CodeIgniter. For the purposes of this tutorial, we will use a controller for the about/contact because it has a webform we may want to use for processing. We can also leverage the variables specified in the application/views/_variables/ file like so:
class About extends CI_Controller {
function __construct()
{
parent::__construct();
}
function contact()
{
// set your variables
$vars = array('page_title' => 'Contact : My Website');
//... form code goes here
// load the fuel_page library class and pass it the view file you want to load
$this->load->module_library(FUEL_FOLDER, 'fuel_page', array('location' => 'about/contact'));
$this->fuel_page->add_variables($vars);
$this->fuel_page->render();
}
}
Creating an Editable Page - about/team
For the create about/team page we will login to the FUEL admin by going to http://mysite.com/fuel (where mysite.com is your domain) and entering the username of admin with the password (which is probably admin as well if you haven't changed it). Click on the Pages menu item on the left and follow the directions seen here to create a page. For the location value type in about/team and for the body value, put in the value below, click save and then view the page:
Team
This is our team page
Module Page: news
A module page is a combination of a static page and a module that is used to generate the contents of that page. This page will be the most involved For this tutorial, we will have a news page that will list all the news items and a news detail page that will show the contents of those news items. This requires the following:
- A database table
- A model
- Modify the application/config/MY_fuel_modules.php file
- A view file
- A variables file
SQL Database Table
Run the following SQL statement to create the news table.
CREATE TABLE `news` (
`id` int(10) unsigned NOT NULL auto_increment,
`headline` varchar(255) collate utf8_unicode_ci NOT NULL,
`slug` varchar(255) collate utf8_unicode_ci NOT NULL default '',
`release_date` date NOT NULL,
`content` text collate utf8_unicode_ci NOT NULL,
`link` varchar(255) collate utf8_unicode_ci NOT NULL,
`published` enum('yes','no') collate utf8_unicode_ci NOT NULL default 'yes',
PRIMARY KEY (`id`),
UNIQUE KEY `permalink` (`slug`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci ;
News Model
The following is the news model we are using. For a tutorial on creating modules specifically click here.
<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
require_once(FUEL_PATH.'models/base_module_model.php');
class News_model extends Base_module_model {
public $required = array('headline');
public $record_class = 'News_item';
public $parsed_fields = array('content');
function __construct()
{
parent::__construct('news'); // table name
}
function list_items($limit = NULL, $offset = NULL, $col = 'release_date', $order = 'desc')
{
$this->db->select('id, headline, slug, published');
$data = parent::list_items($limit, $offset, $col, $order);
return $data;
}
function on_before_clean($values)
{
if (empty($values['slug'])) $values['slug'] = url_title($values['headline'], 'dash', TRUE);
if (!intval($values['release_date'])) $values['release_date'] = datetime_now();
return $values;
}
function form_fields($values = array())
{
$fields = parent::form_fields();
$fields['slug']['comment'] = 'If no slug is provided, one will be provided for you';
$fields['release_date']['comment'] = 'A release date will automatically be created for you of the current date if left blank';
return $fields;
}
function _common_query()
{
parent::_common_query(); // to do active and published
$this->db->order_by('release_date desc');
}
}
class News_item_model extends Base_module_record {
protected $_date_format = 'F d, Y';
function get_url()
{
if (!empty($this->link)) return $this->link;
return site_url('news/'.$this->slug);
}
function get_excerpt_formatted($char_limit = NULL, $readmore = '')
{
$this->_CI->load->helper('typography');
$this->_CI->load->helper('text');
$excerpt = $this->content;
if (!empty($char_limit))
{
// must strip tags to get accruate character count
$excerpt = strip_tags($excerpt);
$excerpt = character_limiter($excerpt, $char_limit);
}
$excerpt = auto_typography($excerpt);
$excerpt = $this->_parse($excerpt);
if (!empty($readmore))
{
$excerpt .= ' '.anchor($this->get_url(), $readmore, 'class="readmore"');
}
return $excerpt;
}
}
?>
MY_fuel_modules.php Configuration Change
Add the following module to the application/config/MY_fuel_modules.php file:
$config['modules']['news'] = array(
'preview_path' => 'news/{slug}'
);
View File
You could use a controller to do the url segment logic but for this tutorial, we will just use a single view. The following view file uses the fuel_model and custom record objects.
<?php
$slug = uri_segment(2);
if (!empty($slug))
{
$news_item = fuel_model('news', array('find' => 'one', 'where' => array('slug' => $slug)));
if (empty($news_item)) show_404();
}
else
{
$news = fuel_model('news');
}
?>
News
<?php if (!empty($news_item)) : ?>
<?php fuel_set_var('page_title', $news_item->headline); ?>
<div class="news_item">
<h2><?=$news_item->headline?></h2>
<div class="date"><?=$news_item->release_date_formatted?></div>
<?=$news_item->content_formatted?>
</div>
<?php else: ?>
<?php foreach($news as $item) : ?>
<div class="news_item">
<h2><a href="<?=$item->url?>"><?=$item->headline?></a></h2>
<div class="date"><?=$item->release_date_formatted?></div>
<?=$item->get_excerpt_formatted(300, 'Read Full Story »')?>
<hr />
</div>
<?php endforeach; ?>
<?php endif; ?>
News Variables File
The last thing we will do is create a news variables file and use the special variable view to specify the news view file for any page under the news section. This will allow us to use the same view file for both the list view and detail view of the news.
<?php
$vars['news'] = array('view' => 'news');
?>