Building My Class Website (Day 2 | Configuring CodeIgniter)

23 May

Ok, so in the previous tutorial we’ve learned how to download and install the tools we needed to build our website.

Today, we are going to tweak some parts of our framework to suit our website and secure some parts of it. By these, we mean configuring the CodeIgniter files and setting up the environment and databases.

Task 2: Configuring CodeIgniter and Setting up the Environment and Database

Step 1: Configuring CodeIgniter:

Since we’ve used CodeIgniter as our framework, it is now our duty to configure the framework according to its use in our website.

Now since we don’t want our application folder and system folder to be accessible from the public folder (for security reasons), we will have to move it up one level from the current folder:

Install CodeIgniter 5

Install CodeIgniter 6

Now, let’s refresh our webpage to check the effect:

Install CodeIgniter 7.PNG

As we can see, it had greatly affected our website. Now we need to some work around.

To fix that, let’s open up the index.php file from the myweb folder:

Install CodeIgniter 8

And then change the ‘system’ and ‘application’ entries to ‘../system’ and ‘../application’ .

Note:  “../” means that we are pointing to the file located one level up.

Install CodeIgniter 9

Save it and then refresh the browser to see the result:Install CodeIgniter 4

And we’re up again! 🙂

Now we need to set up the environment because we want to run our website on development servers, staging servers and production servers but with the exact same code base.

So the next thing that we will do is to setup the environment.

Step 2: Setting up the Environment:

To start, let’s assign a variable that will hold the root directory name and then dump it in the webpage.

In the index.php file, type in:

 $root = dirname(__FILE__);

Configure CodeIgniter 6.PNG

Save it and then refresh the page to view the values returned by the var_dump function:

Configure CodeIgniter 6.PNG

As we can see, a string is then returned which is the current directory we are in.

Now, copy the string returned by the var_dump function and plug it in the case argument of the following switch statement:

 switch (dirname(__FILE__)) {
     case '\xampp\htdocs\myweb':
        define('ENVIRONMENT', 'development');

        define('ENVIRONMENT', 'production');

Note: The switch statement means that if we are in that directory, the environment are set to development server. Consequently, if we are not in that directory, then the environment is set to production server. Why we are doing it? It’s because we may have different configurations in each of the environment. For instance, if we are in the production server, we don’t want our error setting set as ‘on’, it should be off there and must be set ‘on’ in the development server. So that’s it.

Configure CodeIgniter 7.PNG

Now let’s set the error reporting set to on in the development environment:

Add the following script to the defined environment:


Configure CodeIgniter 8

Configure CodeIgniter 9

Save it and then close the index.php file.

Now we don’t want to display index.php in the URL everytime we want to view the main page.

To do that, we will create an configuration file called htaccess file. It is a configuration file used by Apache-based web servers that controls the directory that it “lives” in–as well as all the sub-directories underneath that directory [1].

So let’s create a new file in the root directory. Name it .htaccess

Note: The dot prefix in the “.htaccess” file name is very important so don’t remove it. Also, it doesn’t have any file extension so it’s just an htaccess file.

Configure CodeIgniter 10.PNG

Now, let’s open the file and write some rules inside it:

<IfModule mod_rewrite.c>

     Options +FollowSymLinks
     RewriteEngine on

     # Send request via index.php
     RewriteCond %{REQUEST_FILENAME} !-f
     RewriteCond %{REQUEST_FILENAME} !-d
     RewriteRule ^(.*)$ index.php/$1 [L]


Configure CodeIgniter 11.PNG

What does the script do?

  • <IfModule mod_rewrite.c>
    • checks if the mod_rewrite is already loaded
  • RewriteEngine on
    • turn the rewrite engine to on
  • RewriteRule ^(.*)$ index.php/$1 [L]
    • rewrite all requests through index.php
  • RewriteCond %{REQUEST_FILENAME} !-f
    • except that the request is an existing file
  • RewriteCond %{REQUEST_FILENAME} !-d
    • or a directory

Now, save and close the file.

Let’s open up the browser and check if it really works:

On the URL type in: http://localhost/myweb/index.php/welcome/index

Configure CodeIgniter 12

Now, taking away the index.php:

Configure CodeIgniter 13

As we can see, it still works. 😀

Now, the next thing that we will do is to set up the database in each of the environments.

Step 3: Setting Up the Database in each Environment

To start, go to xampp>htdocs>application>config folder:

Configure CodeIgniter 14

Then, create directories for development and production:

Configure CodeIgniter 15

Next, move the database file to development directory:
Configure CodeIgniter 16

Configure CodeIgniter 17

Then create a copy of it in the production folder:

Configure CodeIgniter 18

Configure CodeIgniter 19

Then next, we will now configure the database that we will use in each of the environment.

So let’s start with the database in the development environment.

Open up the database file and set the entries as the one set in the screenshot below:Configure CodeIgniter 20

Save it then go to the production directory and open up the database file there.

Set the entries as the one below:
Configure CodeIgniter 21

So we’re done with the database configuration.

Now, we need to prepare a configuration file that we can use for customized configuration.

To create, go to xampp>htdocs>application>config folder and create a php file named cws_config:
Configure CodeIgniter 22.PNG

Open it and let’s put the following entries:

$config['site_name'] = 'My Class Website';

Configure CodeIgniter 23.PNG

Now, we need to load it automaticaly.

To set it up, open up the autoload.php file and then scroll down to the config files and add cws_config to the array:

Configure CodeIgniter 24.PNG

Let’s autoload the database as well:
Configure CodeIgniter 25.PNG

Save it and let’s check the web page if it’s running perfectly:

Configure CodeIgniter 26.PNG

Perfect! 😀

So next, we now need to lay out the foundation as we will see in the next tutorial.

Thank you! 😀



Tags: , , ,

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: