Building a basic PHP E-Commerce Application using CodeIgniter Framework – Part 1
03. Feb, 2009 
32 Comments
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. Writing this tutorial doesn’t mean I’m planning to compete them 
. Even if I will, I still couldn’t (lol).
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.
$config['base_url'] = 'http://localhost/tutorial/';
And this is how to make your base URL setting movable.
$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.
$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.
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.
<?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.
<?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.
Our CI installation is now ready for the next part which is building our e-commerce application.
I’m a Web Developer and Designer from Cebu City, Philippines. I am good at Wordpress, CodeIgniter, PHP, mySQL, jQuery and a standard compliant XHTML and CSS.
Thanks for the article, can’t wait to see the next part!
It will be awesome
Look forward to the part II.
Great tutorial!
wow! thanks for sharing…
cool tutorial, good job in the base URL script, its a good idea that you dont have to edit your config file during app migration.
Awesome effort. It would have been great if we could see a working example of this within part one itself.
@Dileep K Sharma Yes I am working on a demo and the Part 2 of the tutorial right now. Thanks
Hello.
First off all, great tutorial. It’s simple basic. In this first part, it’s look like how to install CI.
I’m using CI a long time (since 1.5.X), and I would make some suggestions
- 1.7.X version has some improvements and you do something differents, specially in Form Validation and Active Record.
- I don’t know if you will use hooks, extends library/helpers and so. Will be great if you use that. All my CI projects I used and it’s great!
I’m making a tutorial in CI, but I’ll try to do something more tecnique. Now I’m just ending the project. (http://projetos.elrafael.net/videos).
Will be the MCV pattern (when you put things in Model, in Controller) and how to use helpers, extends library…
Good luck
Rafael V. de Oliveira
very interesting would you be interested in developing a dynamic showcase with our selection engine? http://bit.ly/mvvyC
Insic, I recommend working with Ruby on Rails or even Python with Django over PHP for MVC applications… but nonetheless, nice tutorial!
Oh very nice thanks.
Nice Article insic2.0… I again just came across to your blog and found it interesting with some nice tutorials.
There is one more thing…did you redesigned your blog recently.. coz i kinda remember your blog name but I’m sure i never saw this design in past.
DKumar M.
Pfft! When’d you get so good?
Thanks, I was looking for a simple eCommerce solution. I’ll let you know if I put this solution in effect.
interesting article! waiting for next parts
@w1sh thanks. just let me know.
WOW!!!, nice, i need to build a e-commerce site
Thanks u
I can’t wait to use this on my up and coming project. Thank you for a wonderful Tutorial.
wew,, nice CI tutorial.
i’ll try it ^^
i’ll bookmark your web..
i’m waiting for the newest article of CI
Thanks
Owh is great, I love this tutorial,
Very useful for me, thank’s for insic design.
you can send me the files?
mine has error as i run the index.php
Deprecated: Assigning the return value of new by reference is deprecated in C:\Documents and Settings\isarmiento\My Documents\wamp\www\codeigniter\system\codeigniter\Common.php on line 130
Deprecated: Assigning the return value of new by reference is deprecated in C:\Documents and Settings\isarmiento\My Documents\wamp\www\codeigniter\system\codeigniter\Common.php on line 136
A PHP Error was encountered
Severity: 8192
Message: Function set_magic_quotes_runtime() is deprecated
Filename: codeigniter/CodeIgniter.php
Line Number: 60
A PHP Error was encountered
Severity: 8192
Message: Assigning the return value of new by reference is deprecated
Filename: libraries/Loader.php
Line Number: 255
Good work , nice tutorial…
waiting for the next article for CI
Tutorial added to thewebtuts.com
good tutorial. Thank you. I now start to learn code igniter.
hi friend….thanks for the sharing…happy new year
don’t forget to visit me at IT Skill isn’t enough
I’ve seen some tutorials on CodeIgniter, but you were the first onde I saw use the template parser class. That was pretty cool!
Congratulations!
What is the advantage using the parser?
Im not sure, really
. I just find it clean in my template, coz I do not have to put < ?php echo $vars; ?>.