CodeIgniter-4-Include-Stylesheets-and-Javascript-files

CI 4 Include Style & Scripts To Template

When we develop an application then it uses css, javascript, jquery code for it’s development. We have three options available to include stylesheets and javascript files to view template files.

  • By using HTML helper functions
  • Include javascript & stylesheet files to templates (Direct by their tags)
  • Attach javascript & stylesheet files template specific (For particular template file)

By HTML helper functions

HTML helper provide few functions available to include script and stylesheet files.

  1. link_tag()
  2. script_tag()

link_tag()

By using link_tag() function, we can add stylesheet files i.e css files into templates.

link_tag('CSS FILE PATH')

Suppose,

style.css file is inside /public/css folder.

<?= link_tag('public/css/style.css') ?>

script_tag()

By using script_tag() function, we can add javascript files i.e js files into templates.

script_tag('JS FILE PATH')

Suppose,

script.js file is inside /public/js folder.

<?= script_tag('public/js/script.js') ?>

Include javascript & stylesheet files to templates

We can include CSS and JS files to master layout by using direct tags or even we can use HTML helper functions.

Let’s consider a template file and add few css and js files in it.

<html>

     <head>
  
        <title>Site Title</title>
        
        <!-- Using Tag -->
        <link rel="stylsheet" href="<?= base_url('public/css/style.css') ?>"/>
        
        <!-- Using HTML helper function -->
        <?= link_tag('public/css/style.css') ?>
  
     </head>

     <body>

       <?=$this->renderSection("content")?>

      <!-- Using Tag -->
      <script src="<?= base_url('public/js/script.js') ?>"></script>
  
      <!-- Using HTML helper function -->
      <?= script_tag('public/js/script.js') ?>

     <body>

</html>

Attach javascript & stylesheet files template specific

If in case, you want to include CSS and JS files to any specific template. When we add to master layout it will add those files to all templates which extends that.

Let’s create master layout 

<html>

     <head>

        <title>Site Title</title>
  
        <?= $this->renderSection("styles"); ?>

     </head>

     <body>
        <!--Area for dynamic content -->
        <?= $this->renderSection("content"); ?>
          
        <?= $this->renderSection("scripts"); ?>

     <body>

</html>

Here, you can see we have three sections where we can define dynamic content i.e styles, content, and scripts.

Next,

We have suppose two view files as about.php and contact.php

While extending layout in these view files, we need to give contents for these dynamic placeholders.

<?=$this->extend("layout/master")?>

<?=$this->section("content")?>
<h1>Welcome to About us page</h1>
<?=$this->endSection()?>
  
<?=$this->section("styles")?>
<script src="<?= base_url('public/css/about.css') ?>"></script>
<?=$this->endSection()?>  
  
<?=$this->section("scripts")?>
<script src="<?= base_url('public/js/about.js') ?>"></script>
<?=$this->endSection()?>

Here, we have included about.css and about.js which is for only about page.

<?=$this->extend("layout/master")?>

<?=$this->section("content")?>
<h1>Welcome to Contact us page</h1>
<?=$this->endSection()?>
  
<?=$this->section("styles")?>
<script src="<?= base_url('public/css/contact.css') ?>"></script>
<?=$this->endSection()?>  
  
<?=$this->section("scripts")?>
<script src="<?= base_url('public/js/contact.js') ?>"></script>
<?=$this->endSection()?>

Here, contact.css and contact.js which is for only contact page.

Next Topic >> What are routes?