Codeigniter tutorial Part-2- Creating pages, subpages and passing data from controller

Codeigniter 4 is MVC framework,  MVC refers to Model, View and Controller. Here controller is used to backend, model is used to manage tables (database). And view used to user interface.

Codeigniter 4 is MVC framework,  MVC refers to Model, View and Controller. Here controller is used to backend, model is used to manage tables (database). And view used to user interface.

Step 1:

Modify Home.php in controller.

First divide your page into three sections like header, content and footer.

      
<?php namespace App\Controllers;
      class Home extends BaseController{
            public function index()
            {

                  $data=[
                      'title'=>'Home | CI tutorial'
                  ];

                  echo view('layouts/header',$data);
                  echo view('home');
                  echo view('layouts/footer');
            }
      }
      

Controller file name should be start with uppercase letter and class name should be same as controller file.

Create user interface in views for

echo view('layouts/header',$data);

echo view('layouts/footer');

 

Create layouts folder in views and create file header.php  and footer.php inside that.

Create another page services and create subpages web services and email services under services.

      
<?php namespace App\Controllers;
      class Services extends BaseController
      {
            public function index(){
                  
                  $data=[
                    'title'=>'Services | CI tutorial'
                  ];

                  echo view('layouts/header',$data);
                  echo view('services');
                  echo view('layouts/footer');

            }
      

            public function web_services(){
                  $data=[
                      'title'=>'Web services | CI tutorial'
                  ];
                       
                  echo view('layouts/header',$data);
                  echo view('web_services');
                  echo view('layouts/footer');
            }


            public function email_services(){    

                  $data=[

                        'title'=>'Email services | CI tutorial'

                  ];

                  echo view('layouts/header',$data);
                  echo view('email_services');
                  echo view('layouts/footer');

            }

      } 
      

 

Here we can pass data from controller to user interface (views) using an array.

Here I passed title for all pages from controller using array

For example,

Controller

      
$data=[
      'title'=>'Email services | CI tutorial'
];
      

Views

<title><?= $title; ?></title>

Now create view files services.php, web_services.php and email_services.php for services.

 

Step 2:

Run your project

This is url for your home page

http://localhost/ci_tutorial/

And

ci_tutorial/index.php/services ci_tutorial/index.php/services/web_services ci_tutorial/index.php/services/email_services

for services page

If you want to run your project without index.php create .htacces file in your root folder like this

and paste this code and save.

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

 

Now you can run project directly without index.php,

ci_tutorial /services ci_tutorial/services/web_services ci_tutorial/services/email_services

Step 3:

Add bootstrap layout and meta tags for your user interface.

paste this inside of head tag and

      
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
      

 

Paste this before end of the body tag

<script data-src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script data-src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Now add bootstrap navigation header after body tag

     
<nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="<?= base_url(); ?>">CI Tutorials</a>

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
      </button>


      <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                  <li class="nav-item active">
                        <a class="nav-link" href="<?= base_url(); ?>">Home</a>
                  </li>
                  <li class="nav-item">
                        <a class="nav-link" href="<?= base_url('services'); ?>">Services</a>
                  </li>
                  <li class="nav-item">
                        <a class="nav-link" href="<?= base_url('services/web_services'); ?>">Web Services</a>
                  </li>
                  <li class="nav-item">
                        <a class="nav-link" href="<?= base_url('services/email_services'); ?>">Email Services</a>
                  </li>           
            </ul>

            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
      </div>
</nav>
     

Here base_url(); is your site URL.

Open App.php file inside config folder and define your base url,

public $baseURL = 'http://localhost/ci_tutorial/';

Add base_url(); to tag

<a href="<?= base_url(); ?>">Home</a>