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

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 ta๏ปฟg 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>

 
Leave a reply
Latest Posts
Smallest Cricket Stadium In The India By Boundary
Smallest Cricket Stadium In The India By Boundary

Cricket is more than just a sport in Indiaโ€”itโ€™s a passion! From big stadiums like Wankhede and Eden Gardens to smaller, cozier grounds, each has its own charm. But have you ever wondered which is the smallest cricket stadium in India? In this guide, weโ€™ll explore the top 12 "smallest cricket stadiums in the India by boundary", their unique features, and why theyโ€™re special. Whether you're a cricket fan or just curious, this fun and easy-to-read article will give you all the details!

 Best Fielder in the World of All Time
Best Fielder in the World of All Time

In cricket, fielding is a genuine skill. Over the years, I have seen hundreds of matches across formatsโ€”Test, ODI, and T20. From stunning dives to lightning-fast reactions, I've always been astonished by players who rescue valuable runs and make unbelievable catches. That is why I chose to discuss the "Best fielder in the world of all time". Using data, personal experiences, and a passion for the game, this blog will guide you over the field of fielding.

Asia Cup 2025 Schedule:
Asia Cup 2025 Schedule:

Hey there, cricket fans! Sharing what I know about the Asia Cup 2025 makes me quite happy.

Whatever the Bishnoi community says, it is difficult for Salman Khan to apologize in the black buck case
Whatever the Bishnoi community says, it is difficult for Salman Khan to apologize in the black buck case

Salman Khan has been advised by the Bishnoi community of Rajasthan to apologize in the blackbuck poaching case - but will the matter end if Salman Khan does so? And will Salman Khan want to take this path?