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

Webee Cafe
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>

 

Latest Posts

Kiwifruit

Kiwifruit

Kiwifruit, also known simply as kiwi, is a small, fuzzy fruit with a brown, hairy skin and bright green flesh. It is known for its unique, sweet-tart flavor and vibrant green color. The scientific name for the most common variety is Actinidia deliciosa. Kiwifruit is native to China and was originally called Chinese gooseberry, but it was later renamed kiwifruit or kiwi in reference to the New Zealand national bird, the kiwi, which has a similar brown, fuzzy exterior.

Golden Temple Kushalnagar, Coorg's

Golden Temple Kushalnagar, Coorg's

The Golden Temple in Kushalnagar, Coorg, is officially known as the Namdroling Monastery. It is a significant Tibetan Buddhist monastery and is one of the largest teaching centers of the Nyingma lineage of Tibetan Buddhism outside Tibet.

Mysore Palace

Mysore Palace

The Mysore Palace, also known as the Amba Vilas Palace, is a historical palace located in the city of Mysore in the southern state of Karnataka, India. It is one of the most famous tourist attractions in the country and is renowned for its magnificent architecture and rich cultural heritage.

All about the King Cobra - 2 incidents, Power, Venom, Style, Speed

All about the King Cobra - 2 incidents, Power, Venom, Style, Speed

We all know that the king of the jungle is the lion. Because of its strength, majestic gait and roar that shakes the entire forest. Similarly, how much do you know about the snake king? Yes, its name itself says Raja Naga. That means King Cobra. Its scientific name is called ophiophagus hanna. It is the world's largest venomous snake. Its poison is so dangerous that once the poison from its mouth is distributed to 10 people, ten people will lose their lives.

Leave a reply

Exevor's Affordable Elegance: Top Picks for Budget-Savvy Shoppers

Discover unbeatable deals at Exevor Shop's featured product section! Explore a curated selection of budget-friendly yet high-quality items for the savvy shopper in you.