My Cart 0

Why you need to break your HTML Content into multiple views in codeigniter

If you are working on Any MVC Framework like Laravel or Codeigniter you definitely create the view for your HTML content especially in CodeIgniter and as a programmer, it’s your duty to reduce the code and improve the performance for your web application/website. We always load our view inside any controller or method and if you have many plugins on your site then its hard to manage the website performance because we know that if we have 30 plugins that means we have 30 CSS and JS files and you are going to attach 60 CSS and JS files then definitely it will decrease your performance this is the main problem if you considering the performance.
Here is your home controller.

<?php
class Home extends CI_Controller
{
function __construct()
{
parent::__construct();
$this->clear_cache();
}
public function index()
{
          $this->load->view('home');
        }
}
?>

Here is home.php view

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
Your all css files here
</head>
<body>
   Navigation bar here

your content here

your footer here
your all js files here
</body>
</html>

Consider above code if you are coding like that with a single view this is not a good practice because it’s just a single method if you have multiple controllers and multiple methods then its hard to manage your code. Now you have to ask why..? because when you update the navigation section from a specific method then definitely you have to update the others method as well and if you have thousands of methods then how can you update the navigation bar from all the methods.
The other problem is your plugins, if you are following the above approach then definitely you add you’re all CSS and JS files,  ok its fine but whats wrong with this approach. Suppose If you have 5 plugins and each plugin you are going to add in a specific method then you have only one choice you have to add all your CSS and JS files in your view.

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
  <link type="text/css" rel="" href="plugin1">
  <link type="text/css" rel="" href="plugin2">
  <link type="text/css" rel="" href="plugin3">
  <link type="text/css" rel="" href="plugin4">
  <link type="text/css" rel="" href="plugin5">
 </head>
 <body>
  <script type="text/javascript" src="plugin1"></script>
  <script type="text/javascript" src="plugin2"></script>
  <script type="text/javascript" src="plugin3"></script>
  <script type="text/javascript" src="plugin4"></script>
  <script type="text/javascript" src="plugin5"></script>
 </body>
</html>

Suppose if you have 100 plugins and you want to add all your plugins in a specific method i.e aboutus,contactus so this is not good for your site these are main reasons or problems but what about the solution….? before going to solve the problem just survey the site i.e(wwww.shakzee.com) or any website definitely they have header, navigation bar, content section and footer section these are the common section available on each website.
Now what you have to do..? you just need to break your HTML content into multiple views i.e for navigation bar create your view for navigation and also header, footer and load these view in your every method, if you have the single view and you are loading that view in your all methods, whenever you want to update any section from the view what you need you just need to open that view i.e navigation bar and update the view its simply because you have now single view for your specific section.
Now create these view inside your view directory headercssnavbarhomefooterchtml.

Now open your header.php view and add code to your view

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta name="msvalidate.01" content="1D36512A9BDA241273B640F61C6222BF" />
  <title>
  </title>

Now open your css.php view and below the code make sure you have to add those CSS files which is required for all methods i.e bootstrap and your custom style.

<link href="<?php echo base_url('bootstrap') ?>" rel="stylesheet">
<link href="<?php echo base_url('custom sytle') ?>" rel="stylesheet">

Open your navbar.php view and add your navigation code.

</head>
<body>
navigation bar here

And now open your home.php view and add your main content related to your method.

<h6>content </h6>
<h6>content </h6>

Open your footer.php view and add your footer section here make sure add your jquery and those js files which is required for all methods i.e custom.js file

<!-- Jquery -->
<script src="jquery"></script>
<script src="customjsfile"></script>

Finally, open your chtml.php view and close your HTML and body.

</body>
</html>

Now your code looks like this.

public function yourMethod(){
  $this->load->view('header');
  $this->load->view('css');
  $this->load->view('navbar');
  $this->load->view('home',$data);
  $this->load->view('footer');
  $this->load->view('chtml');
}

And Now what about your extra plugin which you want to add in your specific method its simple just load new view below the CSS view and add your extra js files below the footer, check the below code.

public function yourSpecifiMethod(){
   $this->load->view('header');
   $this->load->view('css');
   $this->load->view('extra css plugin');//specific plugin
   $this->load->view('navbar');//Your are closing the head tag here
   $this->load->view('contentRelatedWithYourMethod',$data);
   $this->load->view('footer');
   $this->load->view('extra js plugin');//specific plugin
   $this->load->view('chtml');// your are closing the body and html tag here
}

https://www.youtube.com/watch?v=GEZQVL8791w
shakzee
administrator
I have been in the web design and development sector for over 5 years. I always provide high-quality courses which can be useful and practical for students, I am working for my community since 6 years and I have created thousands of lectures related to web development and different programming languages. Before selecting any course please make sure the language of the course because I am providing many courses in URDU and English language.

Leave a Reply

Your email address will not be published. Required fields are marked *

WhatsApp chat