fbpx

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

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
First, let me first introduce myself. My Name is Shehzad Ahmed and I am a full-time developer with over 7+ years of experience. In that time, I’ve worked as a developer with many big and small firms and was teaching web design and development skills to many keen learners and by the time passes I’ve found a great passion and potential on myself as a teacher on this particular field and now I am a full-time teacher and working as a freelancer. Web design and development constantly developing every day with new trends, ideas, and innovations. That’s why nowadays you need to learn and keep yourself up-to-date with everything daily and that’s what I do and that is something that I love because I am so passionate about it! When I have spare time I use to give time to my web development community. Teaching kids, managing online programming groups, attending a conference and making blogs, I like keeping myself up-to-date and engaged in my field always. I have my expertise in (PHP, Codeigniter, Laravel, Bootstrap, WordPress, SQL, Query Optimization, Data Science and Design Patterns). Anyone who wants to learn and know anything about web development and design I am always available for that and would love to help out. I always love to be looking out for new things and that is why I spend a lot of my time learning new techniques and helping other people learn web development and design through various groups and web development tutorials as well as online courses.

Leave a Reply

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

WhatsApp chat