CodeIgniter HTML Helper
2020-02-21 12:42:02

CodeIgniter HTML Helper

The HTML helper function is used in CodeIgniter to provide various functionality, such as headings, images, links, list tags, etc.

Loading the HTML Helper

Before using the html helper function, you must load the helper in the controller's files.

Syntax 

$this->load->helper (‘html’);

Function of HTML Helper:

1.heading(): A heading() function is used to create a heading in the HTML form.

Syntax 

heading ( [ $data = ‘ ‘ [, $h = ‘1’ [, $attributes
= ‘ ‘] ] ]);

It has three parameters:

  • $data: In this parameter, you have to defined the content.
  • $h: It defines the heading level in html such as 1 to 6.
  • $attributes: In this fields, you can define the html attributes such as class and id.

Example

echo heading('Welcome to the tutorials and example', 3);
 echo heading('Here, we have described about the html helper', 4, array('id' => 'helper', 'class' => 'codeigniter'));

2. img(): This function is used to display images in html pages.

Syntax 

img ( [ $src = ’ ‘ [, $index_page = FALSE
[, $attributes = ‘ ‘] ] ]);
  • $src : It represents the image source path in html page.
  • $index_page : It define whether to pass $src as a routed URL string.
  • $attributes: If you want to show additional functionalities in the HTML page, you can define in this attribute.

Example

$show_image1 = array( 'src'  
=> 'images/cloud.jpg' , 'width' => '300', 'height' => '200');
 echo img($show_image1);

3. link_tag(): A link_tag () function is used to create links and transfer controls to some other HTML / CSS pages.

Syntax

link_tag ( [ $href  = ‘’ [, $ref = ‘stylesheet’ [, $type =
‘text/css’ [, $title = ‘‘ [, $media = ‘ ‘ [, $index_page = FALSE ] ] ] ] ] ] );

Parameters lists:

  • $href = In this field, you can define a stylesheet link as well as other link to transfer control.
  • $rel = It defines the relation type such as stylesheet.
  • $type = It defines related file types such as text, css and javascript, which you have defined in link_tag.
  • $title = It defines the link title.
  • $media = It represents the media type in the link_tag.
  • $index_page = It defines whether you want to treat $src as a routed url string to pass control to other files.

Example

$link = array(
         'href'  => 'css/hello.css',
         'rel'   => 'stylesheet',
         'type'  => 'text/css',
         'media' => 'file' 
 );
 echo link_tag($link);

4. ul(): It defines the list of items in unordered format.

Syntax

ul ( $list , $attributes = ‘ ‘] );

It has two parameters:

  • $list = It contains an array of un-order list.
  • $attributes = It contains HTML attributes such as class and id that you can define in <div> tag.

Example

$list = array(
             'STAR',
             'PLANET',
             'GALAXY',
             'MOON'
         );
         echo nbs(3);
         $attributes = array( 
             'class' => 'atmosphere',
             'id'    => 'mylist'
         );
         echo ul($list, $attributes);

5. ol(): This function defines all items in the ordered structure.

Syntax

ol ( $list, $attributes = ‘ ‘ );
  • $list:  It contains an array of order list.
  • $attributes = It contains HTML attributes such as class and id that you can define in <div> tag.

Example

$list = array(
             'apple',
             'mango', 
             'banana',
             'orange'
         );
         $attributes = array(
             'class' => 'show_list',
             'id'    => 'list'
         );
         echo ol($list, $attributes);

6. meta(): It is used to provide all information about an html document. The content of the meta tag doesn’t display on the web page. You can also define web page related keywords in meta tag to access in search engines.  

Syntax

meta ( [ $name = ‘ ‘ [, $content = ‘ ‘ [,
$type = ‘ name’ [, $newline = ‘n’ ] ] ] ]);

Parameters list:

  • $name: It contains meta name such as keywords, content-type, robots, description in html file.
  • $content: As its name suggests, you can define the content in this parameter.
  • $type: It defines the type of meta tags such as http-equiv or name.
  • $newline: It represents the new line characters.

Example

echo meta( array( ‘name’ = ‘view’, 
‘content’ = ’view’, ‘charset’ = ‘utf-8’));

7. br(): This generates a break tag in two continuous lines or paragraphs in an html web page. It is simple in CodeIgniter because you have to define numbers only in the br() function, and it will generate the space according to the number passed in the function.

Syntax 

br([ $count = 1 ]);
 $count = It contains a numeric number which is used to display number of times to repeat the <br> tag.

Example

echo br(4); // it will create 4 times <br><br><br><br>

8. nbs(): It is used to create space between two consecutive words.

Syntax

nbs( [ $num = 1 ]);

Parameter List:

$num = It contains a numerical value that is used to produce space between two or more words.

Example

 echo nbs(4); // it shows 4 times (&nbsp) (&nbsp) (&nbsp) (&nbsp)

Example of HTML helper

Create a controller file Online.php and save it in application/controller/. After that, write the following program in your controller file.

Online.php

<?php
 class Online extends CI_Controller
 {
     public function html_helper() { 
      $this->load->helper('html'); // load the html helper
       echo "<title> Tutorial and Example</title>";
         $link = array(
             'href'  => '#.css',
             'rel'   => 'stylesheet',
             'type'  => 'text/css', 
             'media' => 'audio'
         );
         echo link_tag($link);
         echo heading("Hello Learner", 2);
         echo heading('Welcome to the tutorials and example', 3);
         echo heading('Here, we have described about the html helper', 4, array('id' => 'question', 'class' => 'green')); 
         echo br(2);
         $image_properties = array(
             'src'   => 'images/welcome.png', 
             'alt'   => 'sorry for the issue we are working on it',
             'class' => 'my_images',
             'width' => '300',
             'height'=> '200', 
             'title' => ' image gallery',
             'rel'   => 'roundbox'
         );
         $show_image1 = array( 'src'   => 'images/cloud.jpg' , 'width' => '300', 'height' => '200');
         $show_image2 = array( 'src'   => 'images/download.jpg', 'width' => '300', 'height' => '200' );
         $show_image3 = array( 'src'   => 'images/valley', 'width' => '300', 'height' => '200'  );
         echo img($image_properties);
         echo img($show_image1); 
         echo img($show_image2);
         echo img($show_image3;
        $list = array(
         'STAR',
         'PLANET',
         'GALAXY',
         'MOON'
     );  
     $attributes = array( 
         'class' => 'atmosphere',
         'id'    => 'mylist'
     );
     echo ul($list, $attributes);   
         $list = array(
             'apple',
             'mango', 
             'banana',
             'orange'
         );
         $attributes = array(
             'class' => 'show_list',
             'id'    => 'list'
         );
         echo ol($list, $attributes);   
     }
 }
 ?>

When you execute the above program in localhost by invoking the URL localhost/CodeIgniter-3.1.11/index.php/online/, it shows the output, as shown below.

HTML HELPER