Skip to main content

How to Remove Index.Php in the URL of Codeigniter Application

Screenshot
Body

Installing CodeIgniter

If you don't have CodeIgniter installed yet, you can use this link to download the latest version of CodeIgniter which is 3.1.7 that I've used in this source code. After downloading, extract the file in the folder of your server. Since I'm using XAMPP as my localhost server, I've put the folder in htdocs folder of my XAMPP. Then, you can test whether you have successfully installed codeigniter by typing your app name in your browser. In my case, I named my app as codeigniter_htaccess so I'm using the below code.
  1. localhost/codeigniter_htaccess/
codeigniter successful install

Enabling mod_rewrite in our Apache

Next, we need to configure our apache to enable mod_rewrite so that we can create our .htaccess file to rewrite our URLs. 1. Open httpd.conf in a text editor located in xampp/apache/conf folder where xampp is the location of your XAMPP application. 2. Find and remove # in the ff line: #LoadModule rewrite_module modules/mod_rewrite.so 3. Find all occurrences of AllowOverride and change the value if it is None to All. Make sure that all the values are change to All. 4. Save changes and restart XAMPP.

Creating our .htaccess File

In the root directory of your CodeIgniter application, which in my case codeigniter_htaccess, create a file and name it as .htaccess and paste the below code.
  1. <IfModule mod_rewrite.c>
  2. RewriteEngine On
  3. RewriteCond %{REQUEST_FILENAME} !-f
  4. RewriteCond %{REQUEST_FILENAME} !-d
  5. RewriteRule ^(.*)$ index.php/$1 [L]
  6. </IfModule>
This is just a simple rule that removes index.php.

Initiating our Test Example

To test this changes, we are going to create a simple routing application to test our URL.

Configuring our App

First, we are going to configure our app by setting our base_url and removing index.php in our index_page. 1. In your codeigniter app folder, open config.php located in application/config folder. 2. Find the ff line $config['base_url']. 3. Add the path of your app, in my case http://localhost/codeigniter_htaccess/. 4. Find the line $config['index_page'] and remove the index.php value.

Creating our Default Controller

Next, we are going to create the default controller of our app. Means that if there no value in our URL, it will automatically go to our defined controller. Open routes.php located in application/config folder and set the default route to our user controller. Note: While we name controllers using CAPITAL letter in this first letter, we refer to them in SMALL letter.
  1. $route['default_controller'] = 'routes';

Creating our Controller

Next step is to create our controller. Create a file named Routes.php in application/controllers folder of our app and put the ff codes.
  1. <?php
  2. defined('BASEPATH') OR exit('No direct script access allowed');
  3.  
  4. class Routes extends CI_Controller {
  5.  
  6. function __construct(){
  7. parent::__construct();
  8. $this->load->helper('url');
  9. //$this->load->model('users_model');
  10. }
  11.  
  12. public function index(){
  13. $this->load->view('home');
  14. }
  15.  
  16. public function about(){
  17. $this->load->view('about');
  18. }
  19.  
  20. public function blog(){
  21. $this->load->view('blog');
  22. }
  23.  
  24. }

Creating our Views

Lastly, we create the views of our app. Take note that I've use Bootstrap in the views. You may download bootstrap using this link. Create the ff files inside application/views folder. home.php
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>CodeIgniter htaccess And Routing</title>
  6. <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>bootstrap/css/bootstrap.min.css">
  7. </head>
  8. <body>
  9. <nav class="navbar navbar-default">
  10. <div class="container">
  11. <div class="navbar-header">
  12. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  13. <span class="sr-only">Toggle navigation</span>
  14. <span class="icon-bar"></span>
  15. <span class="icon-bar"></span>
  16. <span class="icon-bar"></span>
  17. </button>
  18. <a class="navbar-brand" href="https://www.sourcecodester.com">SourceCodester</a>
  19. </div>
  20. <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  21. <ul class="nav navbar-nav">
  22. <li class="active"><a href="<?php echo base_url(); ?>routes/index">Home</a></li>
  23. <li><a href="<?php echo base_url(); ?>routes/about">About</a></li>
  24. <li><a href="<?php echo base_url(); ?>routes/blog">Blog</a></li>
  25. </ul>
  26. </div>
  27. </div>
  28. </nav>
  29. <div class="container">
  30. <div class="jumbotron">
  31. <h1 class="text-center">This is the <b>Home</b> page</h1>
  32. </div>
  33. </div>
  34. </body>
  35. </html>
about.php
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>CodeIgniter htaccess And Routing</title>
  6. <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>bootstrap/css/bootstrap.min.css">
  7. </head>
  8. <body>
  9. <nav class="navbar navbar-default">
  10. <div class="container">
  11. <div class="navbar-header">
  12. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  13. <span class="sr-only">Toggle navigation</span>
  14. <span class="icon-bar"></span>
  15. <span class="icon-bar"></span>
  16. <span class="icon-bar"></span>
  17. </button>
  18. <a class="navbar-brand" href="https://www.sourcecodester.com">SourceCodester</a>
  19. </div>
  20. <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  21. <ul class="nav navbar-nav">
  22. <li><a href="<?php echo base_url(); ?>routes/index">Home</a></li>
  23. <li class="active"><a href="<?php echo base_url(); ?>routes/about">About</a></li>
  24. <li><a href="<?php echo base_url(); ?>routes/blog">Blog</a></li>
  25. </ul>
  26. </div>
  27. </div>
  28. </nav>
  29. <div class="container">
  30. <div class="jumbotron">
  31. <h1 class="text-center">This is the <b>About</b> page</h1>
  32. </div>
  33. </div>
  34. </body>
  35. </html>
blog.php
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>CodeIgniter htaccess And Routing</title>
  6. <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>bootstrap/css/bootstrap.min.css">
  7. </head>
  8. <body>
  9. <nav class="navbar navbar-default">
  10. <div class="container">
  11. <div class="navbar-header">
  12. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  13. <span class="sr-only">Toggle navigation</span>
  14. <span class="icon-bar"></span>
  15. <span class="icon-bar"></span>
  16. <span class="icon-bar"></span>
  17. </button>
  18. <a class="navbar-brand" href="https://www.sourcecodester.com">SourceCodester</a>
  19. </div>
  20. <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  21. <ul class="nav navbar-nav">
  22. <li><a href="<?php echo base_url(); ?>routes/index">Home</a></li>
  23. <li><a href="<?php echo base_url(); ?>routes/about">About</a></li>
  24. <li class="active"><a href="<?php echo base_url(); ?>routes/blog">Blog</a></li>
  25. </ul>
  26. </div>
  27. </div>
  28. </nav>
  29. <div class="container">
  30. <div class="jumbotron">
  31. <h1 class="text-center">This is the <b>Blog</b> page</h1>
  32. </div>
  33. </div>
  34. </body>
  35. </html>
That ends this tutorial. Happy Coding :)

Add new comment