Building a basic PHP E-Commerce Application using CodeIgniter Framework – Part 1

Part 1 – Setting up CodeIgniter

E-commerce application nowadays is a must for those who are selling their product online. And yes there’s a lot of good open source e-commerce application available and ready to use.
This tutorial covered a basic sample on how to build your own e-commerce application using the power of CodeIgniter Framework. I try to show you how CI works and how flexible this framework is.
Now lets get started.

Installing CodeIgniter.

First you need to download CodeIgniter here. Then follow the simple steps below.
1. Unzip the package and upload the CodeIgniter folders and files to your server host. Normally the index.php file will be at your root. In this tutorial I put CI files in this directory http://localhost/tutorial/ . This is my folder structure looks like.

2. Open the application/config/config.php file with a text editor of your choice and set your base URL.
The basic way to do this is set the value of your base URL variable equal to the URL where you upload your CI files.

view plaincopy to clipboardprint?

1. $config['base_url'] = 'http://localhost/tutorial/';  

$config['base_url'] = 'http://localhost/tutorial/';

And this is how to make your base URL setting movable.

view plaincopy to clipboardprint?

1. $config['base_url'] =  ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == "on") ?  "https" : "http");  
2. $config['base_url'] .=  "://".$_SERVER['HTTP_HOST'];  
3. $config['base_url'] .=  str_replace(basename($_SERVER['SCRIPT_NAME']),"",$_SERVER['SCRIPT_NAME']);  

$config['base_url'] =  ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == "on") ?  "https" : "http");
  $config['base_url'] .=  "://".$_SERVER['HTTP_HOST'];
  $config['base_url'] .=  str_replace(basename($_SERVER['SCRIPT_NAME']),"",$_SERVER['SCRIPT_NAME']);

The code above is self-explanatory. This will saves you time in editing your base URL setting in your config.php whenever you move your application to another directory or in deployment period.
3. Since we have to use database in this tutorial we need to edit the CI database configuration file, open the application/config/database.php file with a text editor and set your database settings.
Here is the typical database configuration of CI.

view plaincopy to clipboardprint?

1. $db['default']['hostname'] = "localhost";  
2. $db['default']['username'] = "root";  
3. $db['default']['password'] = "";  
4. $db['default']['database'] = "ci_tutorial";  
5. $db['default']['dbdriver'] = "mysql";  
6. $db['default']['dbprefix'] = "";  
7. $db['default']['pconnect'] = TRUE;  
8. $db['default']['db_debug'] = TRUE;  
9. $db['default']['cache_on'] = FALSE;  
10. $db['default']['cachedir'] = "";  
11. $db['default']['char_set'] = "utf8";  
12. $db['default']['dbcollat'] = "utf8_general_ci";  

$db['default']['hostname'] = "localhost";
$db['default']['username'] = "root";
$db['default']['password'] = "";
$db['default']['database'] = "ci_tutorial";
$db['default']['dbdriver'] = "mysql";
$db['default']['dbprefix'] = "";
$db['default']['pconnect'] = TRUE;
$db['default']['db_debug'] = TRUE;
$db['default']['cache_on'] = FALSE;
$db['default']['cachedir'] = "";
$db['default']['char_set'] = "utf8";
$db['default']['dbcollat'] = "utf8_general_ci";

As you can see I set 'localhost' as my hostname, 'root' as username and I don’t use any password here but it would be a must that you set a password in your database. Especially in the live installation but in this case since I am working in a local web server, so it will not necessary.
If you wish to increase security by hiding the location of your CodeIgniter files you can rename the system folder to something more private. If you do rename it, you must open your main index.php file and set the $system_folder variable at the top of the page with the new name you’ve chosen. But in this tutorial I just use the default.
That’s it! You can now test run your installation. Open your browser then assuming we have the same location of our CI installation type http://localhost/tutorial/ in your address bar. There you can see the welcome page of CI which look like the image below.

Creating the .htaccess file.

In this tutorial I am making use of url alias. We need to create a file named .htaccess then save it to the root directory of our installation. The .htacces file we have to create will contains instructions that allows certain files and folders to be viewable on the web site.
This will also remove your index.php in the URL of any destination. Example if you access your welcome controller without .htaccess the url should looks like this http://localhost/tutorial/index.php/welcome. If your .htaccess file is present containing the following lines of code below, you can now access your welcome controller with this url http://localhost/tutorial/welcome.

view plaincopy to clipboardprint?

1. RewriteEngine on  
2. RewriteCond $1 !^(index\.php|images|css|js|robots\.txt|favicon\.ico)  
3. RewriteCond %{REQUEST_FILENAME} !-f  
4. RewriteCond %{REQUEST_FILENAME} !-d  
5. RewriteRule ^(.*)$ ./index.php/$1 [L,QSA]  

RewriteEngine on
RewriteCond $1 !^(index\.php|images|css|js|robots\.txt|favicon\.ico)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ ./index.php/$1 [L,QSA]

Creating a sample Model, Controller and View file.

The Model

Lets create our model first. Depending on your own style you can either create the view or the controller first. But best practice I think is its better to start in your model because it’s the main data foundation of the application and most of the controller function relies on your model.
Since we don’t have database yet, Lets just create our models initial structure.

view plaincopy to clipboardprint?

1. <?php  
2.   class TestModel extends Model{  
3.          function TestModel(){  
4.              parent::Model();  
5.          }  
6. }  

<?php
  class TestModel extends Model{
         function TestModel(){
             parent::Model();
         }
}

Basically this is what CodeIgniter Models initial structure looks like.

The Controller

For us to test further our CI installation lets create a new controller called test. To do this we have to create a new file in system/application/controllers directory name it test.php. Open the file in a text editor and put the sample code of our controller below.

view plaincopy to clipboardprint?

1. <?php  
2.   
3. class Test extends Controller  
4. {  
5.     function Test()  
6.     {  
7.         parent::Controller();  
8.         $this->load->library('parser');  
9.   
10.     }  
11.   
12.     function index()  
13.     {  
14.             $data['title']  = 'Building an e-commerce application using CodeIgniter ';  
15.             $data['header'] = 'Header of the Test Page';  
16.             $data['body']   = 'Test content here. Another content gooes here.';  
17.   
18.         $this->parser->parse('test_page', $data);  
19.     }  
20. }  

<?php

class Test extends Controller
{
    function Test()
    {
        parent::Controller();
        $this->load->library('parser');

    }

    function index()
    {
            $data['title']  = 'Building an e-commerce application using CodeIgniter ';
            $data['header'] = 'Header of the Test Page';
            $data['body']   = 'Test content here. Another content gooes here.';

        $this->parser->parse('test_page', $data);
    }
}

In our controller code above as you have notice I am using the CI Template Parser Class. More details about the template parser library can be found here.

The View

If we try to run our test controller, we get an error message. Because we don’t have our view file yet. Now lets create our view file. Open system/application/views directory then create a new file name test_page.php since this is what we used in our test controller.
The code of our view.

<html>
        <head>
        <title>{title} </title>
        </head>
        <body>
              <h1> {header} </h1>
              <p> {body} </p>
       </body>
  </html>

This should be the code of our view looks like if we don’t use the template parser class.

<html>
        <head>
        <title><?php echo $title; ?> </title>
        </head>
 <body>
               <h1><?php echo $header; ?></h1>
               <p><?php echo $body; ?> </p>
       </body>
  </html>

Note: if you don’t want to use the template parser class you need to change this line your controller ($this->parser->parse('test_page', $data);) to ($this->load->view('test_page', $data);).
We should now see our test controller running. With a simple view we just created.