Powered by Blogger.

How to setup CodeIgniter

August 30, 2020 , , ,

How to setup CodeIgniter


Are you new to Codeigniter? if you are, you're in the right place. This tutorial is intended for beginners who want to learn the Codeigniter framework from scratch.

Brief introduction


Codeigniter Framework is developed by EllisLab and is now maintained by the British Columbia Institute of Technology. It is a robust, light-weight Framework that lets you develop web applications in a short time. It is a very small footprint, built for developers who need a simple but elegant toolkit to create full-featured web applications. The framework loosely follows Mode-View-Controller (MVC) pattern. 

The Model-View-Controller pattern separates application logic from user interface and database communication. Codeigniter, however, does not force you to follow such an architectural pattern. Although, it would be great to follow the MVC to organize your code.

  • Model - Represents your data structure. It is typically a class that contains functions that help you retrieve, insert, and update data in your database.
  • View - It is the information presented to the end-user. Basically, it is a webpage, but in CodeIgniter, it could be a page fragment that is appended to another page fragment to form a web page.
  • Controller - Serves as an intermediary between the view and the model. It controls what is sent to the view and to the model. It is also where libraries and helpers are loaded.

Bootstrap CSS library. Every designer should at least have a good grasp on how to use this library, most likely you would be working on projects which implement bootstrap. This doesn't just boost development time but also takes out the burden of having to create your own way of displaying stuff. It's really helpful to people who prefer to focus on development rather than on UI. We won't be using this library on this tutorial but it's crucial that you should know about it. There are tons of things to explore in this library so be sure to check that out.

Bootstrap Alpha 5 has just been released after Alpha 4 with some major feature improvements and a boatload of bug fixes. Bootstrap handles most of the things you may want your user interface to look like. There are tons of free bootstrap template out there which you could use in case your wondering how to start using it.

Integrating Bootstrap with your Codeigniter project saves the hassle of having to write a thousand lines of CSS stylesheet and lets you focus on the development. You could then write your own style sheet to suit your need. This is one of the advantages of the MVC pattern since your application logic is separated from the presentation/UI. It allows you to modify the look and feel of the app without affecting your application logic.

Codeigniter Step By Step Tutorial for Beginners


You probably heard a couple times about getting your hands dirty. This is true in many cases wherein you have no idea what you're doing. So the first and foremost is setting up the working environment. 
 Install xampp server then extract codeigniter zip. Navigate to “xampp/htdocs” folder located on C:\ and paste codeigniter folder. This is where all your project is stored. You should rename the codeigniter folder to "ci_proj".

Codeigniter Folder Structure

Codeigniter directory structure consists of three folders namely system, application, and user_guide.
  1. The system contains the core application files and should not be edited. You could, however, make your own system classes on "application/core/some_class.php" then extend it to your controllers.
  2. Application is where you would find yourself working most of the time. It contains a bunch of sub-directories. We would be focusing on three sub-directories which are the Models, Views, and Controllers.
  3. User_guide contains CodeIgniter Documentation similar to what is online which is great when you prefer working offline or simply you don't have an internet connection at home. Be sure to remove this folder when you move the application to the production environment.

Configure and Setup CodeIgniter Environment

Before we could start building our project we should make some modifications to the CodeIgniter config file.
  1. Open up application/config/config.php file.
  2. We need to set the "base_url" of our application.
$root = "http" . ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == "on") ? "s" : "") . "://" . $_SERVER['HTTP_HOST'] . str_replace(basename($_SERVER['SCRIPT_NAME']), "", $_SERVER['SCRIPT_NAME']);
$config['base_url'] = $root;

We can now then call base_url and get the application base URL path. THE base URL is basically the same with site_url() without the index.php.

CodeIgniter URL Structure

Step 1. Enable Mod Rewrite Option on XAMPP Server


We need to enable the mod_rewrite option on xampp before we create the ".htaccess" file. To do that, open your XAMPP and right-click on the config button shown below then click on "appache(httpd.conf)".

Look for "LoadModule rewrite_module modules/mod_rewrite.so" and remove "#" as shown below.


Step 2. Create '.htaccess' File


By default, CodeIgniter adds index.php on the URL which you might not want so we're getting rid of it. The default structure looks like this,
<base_url>/index.php/<controller_name>/<controller_function_name>
What we want is a clean URL without index.php hanging around. To generate clean URLs, we have to create a “.htaccess”  file. 



Inside ".htaccess" paste this code and save it

 
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.*)$ index.php?/$1 [L]
</IfModule>

 If your planning on pushing your app on a sub-directory instead of root domain-like http://personal.com/blog/ instead of http://personal.com/ then paste the following code instead,

 
<IfModule mod_rewrite.c>
    Options +FollowSymLinks
    RewriteEngine on
    RewriteBase /SubDomain
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php?$1 [L]
</IfModule>

 We're not done yet,

Step 3. Modify CodeIgniter Config Settings


Navigate back to "config.php" file under application folder and search for the line,

$config['index_page'] = 'index.php';

Then remove index.php to make it look like this,

$config['index_page'] = '';

You have to restart your XAMPP then check your project URL on your browser by typing in "localhost/ci_proj". If you see the image below, Congratulation! go get a coffee. If not, keep trying.


If it's not working, try to change your uri_protocol on your config.php file
Look for the following code and change it to

$config['uri_protocol'] = 'REQUEST_URI';

Then restart your XAMPP and try to access your project URL again.

Post a Comment

No comments

Subscribe to: Post Comments ( Atom )