Creating a Portofolio CMS with Codeigniter

We are starting a new series of Codeigniter application tutorial. We are going to create a Portfolio CMS by using this free website template from Nettus. The template has index, about, portfolio, services and contact page.

This template has nice jquery effects for showing large images in the index and individual product page.
Portfolio page shows all the categories and their product thumbnails. This page leads to a individual product page.

We are going to show you how to convert this html to a Codeigniter powered CMS. We will try to modify BeP code as little as possible. We can achieve this by adding new files rather than adding codes to Bep files. However there are times when we add codes to BeP because it save more time and codes.

Let’s get started.

Demo

Download link will come soon.

Download page

Intro

As we did in Codeigniter shopping cart Kaimono Kago, we are going to use a powerful BackendPro for our backend. This will save a lot of time rather than creating a new administration area from scratch.

So first things first. Credits go to the following applications and authors.

1. Ellis Lab who is behind of Codeigniter
2. Adam Price who is a creator of BackendPro
3. phpletter.com who created Ajax file manager
4. Matt Corner who created the html template Aurelius for Nettus

I’d like to thank them for their work.

Download Codeigniter and place it in your local server.
Download BackendPro and overwrite over the Codeigniter.

Then we need to update BackendPro for PHP5.3 first.

Small updates of BeP for php5.3

If you want to use BeP for PHP5.3 environment such as XAMPP 1.7.3, you need to modify BeP.

1. remove the ‘&’ sign from line 414 in application/libraries/loader.php

2. Change line 100 of /modules/preferences/libraries/Preference_form.php

$this->field[$field]['label'] = ucwords(preg_replace('/_/',' ',$field));

3. Line 42 modules/auth/views/admin/access_control/resources.php
Change to

$offset = $this->access_control_model->buildPrettyOffset($obj,$tree);

Installing BeP on Codeigniter

Go to http://127.0.0.1/ci_aurelius/install and enter necessary information.
Use this website to create an encryption key. http://www.ideaspace.net/misc/hash/.
Keep system folder ‘system’ and application folder ‘application’
After a successful installation, delete the /install directory.

Open application/config.php and check your $config['base_url'].

$config['base_url']= "http://127.0.0.1/ci_aurelius/";

Taking out the application folder out of the system folder

We are going to move the application folder out of the system folder and also get rid of index.php in URL.

Add .htaccess file with the following code.

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond $1 !^(index\.php|assets|robots\.txt)
RewriteRule ^(.*)$ /ci_aurelius/index.php/$1 [L]

Open config/config.php and change the following.

$config['index_page'] = "";

Open config/matchbox.php to point to the new modules folder.
Change line 65.

// change from
 $config['directories'] = array('../../modules');

// to this
$config['directories'] = array('../modules');

Visit http://127.0.0.1/ci_aurelius/auth/login to check if your login works.

Backend summary

Now we are going to start working on the administration back-end.
You can see the folder/file structure in the left image. Please click to enlarge the image.

New back-end administration pages and some of functions are followings.
We need admin areas to add/edit menus, pages, file manager, categories and products. If you have used our Kaimono Kago, they have very similar functions.

We are going to add Webdesign, Logos and Prints in the category. When you create a new category, a function will create a new folder and thumbnail folder automatically.

File manager allow you to add, delete and upload files or folders.

Menu page will create a menu link and you are going allocate a page you want to show.

We are going to add content and other information in page area.

We are going to add multiple images in the products page for each portfolio. When you assign ‘Main frontpage’ in ‘featured’ field, it will be shown in the index page.

Config files

Open application/config/config.php and add the following libraries, helper etc.

$autoload['libraries'] = array('form_validation','validation');

$autoload['helper'] = array('form','security','mytools','language');

$autoload['plugin'] = array();

$autoload['config'] = array('portfolio');

$autoload['language'] = array('extension');

We are going to create mytools.php, portfolio.php and extension_lang.php soon.
BeP uses validation libraries in stead of a new form validation. So we need to auto-load it as well.

Next, create application/config/portfolio.php and add the following.

$config['backendpro_template_dir'] = ""; // you need this line
$config['backendpro_template_portfolio'] = $config['backendpro_template_dir'] . "portfolio/";

Language file

Create application/config/languages/english/extension_lang.php and add the following.
You will find the same contents as Kaimono Kago. You can add your own as you wish.
Since we autoloaded language helper, we can use these languages like lang(‘web_folder’). And this will output portfolio.

You can change this files and it will change in all the files where you used rather than changing one by one.

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

/* CI Shoping cart */
$lang['general_login'] = 'Log in';
$lang['general_logout'] = 'Log out';
$lang['general_not_logged_in'] = 'You are not logged in';
$lang['general_cart'] = 'Cart';
$lang['general_shopping_cart'] ='Shopping Cart';
$lang['general_search_results'] ='Search Results';
$lang['general_name'] = "Name";
$lang['general_email'] = "Email Address";
$lang['general_subject'] = "Subject";
$lang['general_message'] = "Message";
$lang['general_pass_word'] = "Password";
$lang['general_register'] = "Register";
$lang['genral_login_msg'] = "Or click <span class='login'>%s</span> if you are already registered.";
$lang['genral_logged_in'] = "You are logged in";
$lang['general_hello'] = "Hello ";
$lang['general_web_shop'] = 'Web shop';
$lang['general_check_out'] = 'Go to check out';

/* All Main Controller Names and menu items */
$lang['backendpro_general'] = 'General';
$lang['backendpro_admins'] = 'Admins';
$lang['backendpro_calendar'] = 'Calendar';
$lang['backendpro_categories'] = 'Categories';
$lang['backendpro_customers'] = 'Customers';
$lang['backendpro_menus'] = 'Menus';
$lang['backendpro_messages'] = 'Messages';
$lang['backendpro_orders'] = 'Orders';
$lang['backendpro_pages'] = 'Pages';
$lang['backendpro_products'] = 'Products';
$lang['backendpro_subscribers'] = 'Subscribers';
$lang['backendpro_file_manager'] = 'File Manager';

/* For Preference Extensions */
$lang['preference_extension_1'] = "Menu Configuration";
$lang['preference_extension_2'] = "Slideshow Settings";

/* Module names*/
$lang['backendpro_messages'] = 'Messages';
$lang['backendpro_general'] = 'General';
$lang['backendpro_calendar'] = 'Calendar';
$lang['backendpro_menus'] = 'Menus';

/**
 * Transferred from modules\auth\language\english\userlib_lang.php
 *
 *
 */

/* Categories module */
$lang['userlib_category_created'] = 'Category created';
$lang['userlib_category_updated'] = 'Category updated';
$lang['userlib_category_deleted'] = 'Category deleted';
$lang['userlib_category_reassigned'] = 'Category deleted and products reassigned';
$lang['userlib_category_status'] = 'Category status changed';

/**
 * Transferred from modules/preferences/language/english/preferences_lang.php
 *
 */

// for Webshop label and description
$lang['preference_label_main_nav_parent_id'] = 'Main navigation ID for website';
$lang['preference_desc_main_nav_parent_id'] = 'In order to show your main navigation, enter the ID where parent id is 0 from Menus';
$lang['preference_label_categories_parent_id'] = 'Category ID for website';
$lang['preference_desc_categories_parent_id'] = 'Enter an ID for your website on the left column. Find it in the Categories';
$lang['preference_label_admin_email'] = 'Admin Email to receive email messages';
$lang['preference_desc_admin_email'] = 'Enter admin email address to receive email messages from customers';

// for Slideshow Settings label and description
$lang['preference_label_webshop_slideshow'] = 'Slideshow type for webshop front page';
$lang['preference_desc_webshop_slideshow'] = 'Select a slideshow type for webshop front page';
$lang['preference_label_slideshow_two'] = 'Slideshow type for other page';
$lang['preference_desc_slideshow_two'] = 'Select a slideshow type for other pages';

/**
 *
 *  Additional for Portfolio
 *
**************************/

// Change this according to your module folder name.
$lang['website_name'] = 'Aurelius';
$lang['web_folder'] = 'portfolio';
$lang['webshop_buy'] = 'BUY';

// modules/webshop/views/customerlogin.php
$lang['customer_login_enjoy_shopping'] = 'Enjoy your shopping!';
$lang['customer_login_plz_login'] = 'Please login. This will fill up your details at check out automatically.';

// modules/webshop/views/shoppingcart.php
$lang['webshop_update'] = 'Update';
$lang['webshop_delete'] = 'DELETE';
$lang['webshop_checkout'] = 'Go to Checkout';
$lang['webshop_no_items_to_show'] = 'No item to show';
$lang['webshop_will_be_added'] = 'will be added';
$lang['webshop_shipping_charge'] = 'Shipping charge';
$lang['webshop_currency'] = 'dollars';
$lang['webshop_currency_symbol'] = '$'; // &#36;
$lang['webshop_shoppingcart_empty'] = 'Shopping cart is empty';
$lang['webshop_search'] = 'search';

// modules/webshop/views/registration.php
$lang['webshop_email'] = 'Email';
$lang['webshop_email_confirm'] = 'Email Confirmation';
$lang['webshop_pass_word'] = 'Password';
$lang['webshop_first_name'] = 'First Name';
$lang['webshop_last_name'] = 'Last Name';
$lang['webshop_mobile_tel'] = 'Mobile/Telephone';
$lang['webshop_shipping_address'] = 'Shipping Address';
$lang['webshop_post_code'] = 'Postal Code';
$lang['webshop_city'] = 'City';
$lang['webshop_register'] = 'Register';
$lang['webshop_regist_plz_here'] = 'Please register here. ';
$lang['webshop_price'] = 'Price';
$lang['webshop_registed_before'] = 'Your email is in our database. Please login.';
$lang['webshop_thank_registration'] = 'Thank you for your registration! You may log in now.';

// modules/webshop/controllers/webshop.php for function messages
$lang['webshop_message_contact_us'] = 'Contact us';
$lang['webshop_message_contact'] = 'Contact';
$lang['webshop_message_subject'] = 'Email message form Portfolio website.';
$lang['webshop_message_sender'] = 'Sender ';
$lang['webshop_message_sender_email'] = 'Sender email ';
$lang['webshop_message_message'] = 'Message ';
$lang['webshop_message_thank_for_message'] = 'Thanks for your message! You have sent email.';

$lang['message_message'] = 'Message ';

$lang['genral_login_msg'] = "Or click <span class='login'>%s</span> if you are already registered.";
$lang['genral_logged_in'] = "You are logged in";
$lang['general_hello'] = "Hello ";
$lang['general_web_shop'] = 'Web shop';
$lang['general_check_out'] = 'Go to check out';
$lang['genral_login'] = "Log in";

/* Strings used on general page */
$lang['general_login'] = 'Log in';
$lang['general_logout'] = 'Log out';
$lang['general_not_logged_in'] = 'You are not logged in.';
$lang['general_cart'] = 'Cart';
$lang['general_shopping_cart'] ='Shopping cart';
$lang['general_search_results'] ='Search Results';
$lang['general_name'] = "Name";
$lang['general_pass_word'] = "Password";
$lang['general_register'] = "Register";
$lang['genral_login_msg'] = "Or click <span class='login'>%s</span> if you are already registered.";
$lang['genral_logged_in'] = "You are logged in";
$lang['general_hello'] = "Hello ";
$lang['general_web_shop'] = 'Web shop';
$lang['general_check_out'] = 'Go to check out';

/* orders */
$lang['orders_added_cart'] = "We have added this product to the shopping cart.";
$lang['orders_product_removed'] = "Product removed.";
$lang['orders_not_in_cart'] = "Product not in shopping cart!";
$lang['orders_no_records'] = "No records";
$lang['orders_record'] = "record";
$lang['orders_records'] = "records";
$lang['orders_updated'] = "updated";
$lang['orders_no_changes_detected'] = "No changes detected";
$lang['orders_nothing_to_update'] = "Nothing to update";
$lang['orders_nothing_in_cart'] = "Nothing in cart!";
$lang['orders_no_item_yet'] = "You have no item yet!";
$lang['orders_total_price'] = "Total Price";

/* views/shoppingcart.php*/
$lang['orders_no_items_to_show'] = "No items to show here!";
$lang['orders_shipping_charge'] = "The shipping charge ";
$lang['orders_will_be_added'] = " will be added to this price.";
$lang['orders_delete'] = "delete";
$lang['orders_update'] = "update";
$lang['orders_checkout'] = "Go to Checkout";

/* view/confirmorder.php*/
$lang['orders_plz_confirm'] = "Please Confirm Your Order and Fill up Your Details";
$lang['orders_confirm_before'] = "Please confirm your order before clicking the Email Your Order Now button below. Vis du har changes, ";
$lang['orders_go_to_cart'] = "go back to your shopping cart";
$lang['orders_sub_total_nor'] = "SUB-TOTAL :NOR ";
$lang['orders_shipping_nor'] = "Shipping: NOR ";
$lang['orders_total_with_shipping'] = "TOTAL (with shipping):NOR ";
$lang['orders_name'] = "Name";
$lang['orders_first_name'] = "First Name";
$lang['orders_last_name'] = "Last Name";
$lang['orders_mobile_tel'] = "Mobile/Telephone";
$lang['orders_email'] = "Email";
$lang['orders_email_confirm'] = "Email Confirm";
$lang['orders_shipping_address'] = "Shipping Address";
$lang['orders_post_code'] = "Post number";
$lang['orders_city'] = "City";
$lang['orders_email_order'] = "Email Order";

/*ordersuccess.php */
$lang['orders_thank_you'] = "Thank you for your order! We will get in touch as soon as possible. Please check your email. We have sent confirmation email.";

/* controllers/webshop/emailorder*/

$lang['email_here_is'] = "Here is the details of order submitted to www.webshop.com";
$lang['email_number_of_order'] = "Nummer of bestilling";
$lang['email_product_name'] = "Product navn";
$lang['email_product_price'] = "product pris";
$lang['email_we_will_call'] = "Thank you for your order. We will call you as soon as possible.";
$lang['email_order_conf'] = "Order confirmation";

/* views/contact.php */

$lang['contact_your_message']="Your message";
$lang['contact_captcha']= "Type the two words please";
$lang['contact_send']= "Send";
$lang['contact_if_you_human'] = "If you are human, please input six letters or nummers. Please try again!";
$lang['contact_all_field_required'] = "All fields are required . Please try ingen!";

// modules/webshop/controllers/subscribe function
$lang['subscribe_newsletter'] = 'Newsletter';
$lang['subscribe_subscribe'] = 'Subscribe';
$lang['subscribe_unsubscribe'] = 'Unsubscribe';
$lang['subscribe_name'] = 'Name';
$lang['subscribe_registed_before'] = 'Your email is already in our list.';
$lang['subscribe_thank_for_subscription'] = 'Thanks for subscribing our newsletter!';
$lang['subscribe_you_been_subscribed'] = 'You have been unsubscribed!';
$lang['subscribe_need_login'] = 'You need to login first';
$lang['subscribe_you_been_unsubscribed'] = 'You have been unsubscribed from Newsletter';

// modules/webshop/controllers/login function
$lang['login_logged_in'] = 'You are logged in!';
$lang['login_email_pw_incorrect'] = 'Sorry, your email or password is incorrect!';

/* End of file shop_lang.php */
/* Location: ./system/application/language/english/shop_lang.php */

New libraries

We need to create a new library for our front-end controller.
Create application/libraries/Portfolio_frontend_controller.php and add the following.

We extends Site_Controller, then define the view container, load all the module models and create a menu.

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Portfolio_Frontend_Controller extends Site_Controller
{
	function Portfolio_Frontend_Controller()
	{
		parent::Site_Controller();

		// Loading sytem/application/config/portfolio.php
		// $this->load->config('portfolio');

		// Set container variable
		$this->_container = $this->config->item('backendpro_template_portfolio') . "container.php";

		// Set public meta tags
		//$this->bep_site->set_metatag('name','content',TRUE/FALSE);

		log_message('debug','BackendPro : Aurelius_Frontend_Controller class loaded');

		// Loading all the module models here instead of autoload.php
		$this->load->module_model('categories','MCats');
		$this->load->module_model('menus','MMenus');
		$this->load->module_model('pages','MPages');
		$this->load->module_model('products','MProducts');

		// main nav
		// portfolio config main_nav_parent_id
		$tree = array();
	    // it used to be like this $parentid = 107;
		// set this in the backend and keep it in DB
	    $parentid = $this->preference->item('main_nav_parent_id');
		$this->MMenus->generateTree($tree,$parentid);
	    $this->data['mainnav'] = $tree;

	}
}

/* End of Portfolio_frontend_controller.php */
/* Location: ./system/application/libraries/Portfolio_frontend_controller.php */

Open application/libraries/MY_Controller.php and add the following at the end.

include_once("Portfolio_frontend_controller.php");

Settings.php

We need to tell BeP to display our new admin menus.
Open application/controllers/admin/settings and add the following after line 49 ‘maintenance’ in $confilg['group'] array .

'menu'	  => array('name'=> $this->lang->line('preference_extension_1'),'fields'=>'main_nav_parent_id,categories_parent_id,admin_email'),

We will continue working on the Administration back-end in the next article.