Dear Reader in This Tutorial let us We Know that “How we can Create Header/Footer and Navigation with Bootstrap”, So in this Tutorial, We Learn Step By Step Header/Footer and Navigation Process.
In Every Website or Blog Header and Footer are very important part, So we need to Create Header and Footer, If we don’t create header and footer then we have many problems like we need to write same code in every file of project and if we require modification in header or footer portion then we require to change in every file, similarly if we create Header and footer and we link that Header and footer we need only change header and footer file and link that files in every file, so in this situation we prevent redefine same code again and again.
Navigation is also very important Factor in every website and blog which is required to link all pages, so we easily move one location to another location.
We assumed that you have already Configure Codeigniter if you don’t Configure Codeigniter don’t worry you need to Configure Codeigniter first here
How to Install CodeIgniter Framework in Windows Operating System
After Configuration CodeIgniter lets start to Create Header/Footer and Navigation ..
Step 1:- At First Create Home.php Controller in your project location
your_project_name\application\controllers
like
ci_demo\application\controllers
and paste the below code in Home.php Controller
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<?php defined('BASEPATH') OR exit('No direct script access allowed'); class Home extends CI_Controller { /** * Index Page for this controller. * * Maps to the following URL * http://example.com/index.php/login * - or - * http://example.com/index.php/login/index * - or - * Since this controller is set as the default controller in * config/routes.php, it's displayed at http://example.com/ * * So any other public methods not prefixed with an underscore will * map to /index.php/welcome/<method_name> * @see https://codeigniter.com/user_guide/general/urls.html */ public function index() { $this->load->helper('url'); $this->load->view('header'); $this->load->view('home'); $this->load->view('footer'); } } |
Step 2:- After Creation of Controller Create header.php and footer.php view files in your project location
your_project_name\application\views
like
ci_demo\application\views
Create header.php(view file) and paste the below code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<body> <nav class="navbar navbar-inverse" id="header"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="<?php echo base_url(); ?>home">Web Preparations</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="#"><a href="<?php echo base_url(); ?>home">Home</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="<?php echo base_url(); ?>users/registration"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> <li><a href="<?php echo base_url(); ?>users/login"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> </ul> </div> </div> </nav> |
Create footer.php(view file) and paste the below code
1 2 3 |
<div id="footer"> <footer> Footer</footer> </div> |
Step 3:- After Creation of View files Create style.css CSS file in your project location
your_project_name\assets\css
like
ci_demo\assets\css
Create style.css(css file) and paste the below code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
#header{ background-color: #449D44; color: #fff; border-color: #449D44; } #header a{ color: #fff; } #header a:hover{ background-color: #414cf4; } #footer{ width: 100%; background-color: #000; height: 100px; color: #fff; padding: 30px; } #home-title{ width:90%; margin-left: auto; margin-right: auto; } |
Step 4:- After Creation of CSS file Create home.php view file in your project location
your_project_name\application\views
like
ci_demo\application\views
Create home.php(view file) and paste the below code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?> <!DOCTYPE html> <html lang="en"> <head> <title>Web Preparations</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="<a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><?php echo base_url();?>assets/css/bootstrap.min.css</a>"> <link rel="stylesheet" href="<?php echo base_url();?>assets/css/style.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link href="<?php echo base_url(); ?>assets/css/style.css" rel='stylesheet' type='text/css' /> <script src="<?php echo base_url();?>assets/js/jquery.min.js"></script> <script src="<?php echo base_url();?>assets/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div id ="home-title" class="alert alert-success"> Welcome On Web Preparatios</div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"> <img src="<?php echo base_url();?>assets/images/mysql.jpg" class="img-responsive"> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle"> <img src="<?php echo base_url();?>assets/images/codeigniter.png" class="img-responsive"> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"> <img src="<?php echo base_url();?>assets/images/php.jpeg" class="img-responsive"> </div> </div> </body> </html> |
Step 5:- Now open your browser run project as
your_project_name/home
like
localhost/ci_demo/home
Congratulations you have created Header and Footer with Bootstrap Navigation as you can see in below snapshot
If you have any query then Contact Us or comment below, Thanks