Codeigniter 4: HTML Helper

Selamat datang di Rumah code tempat dimana kamu bisa belajar berbagai macam bahasa pemograman dan linux. Kali ini Rumah Code akan membahas tentang html helper. 

Apa itu HTML Helper?

HTML helper pada codeigniter 4 berfungsi untuk memudahkan kita untuk menggunakan beberapa tag html. Kenapa saya bilang beberapa tag? Karena belum semua tag html di dukung oleh HTML Helper.

Cara Menggunakan HTML Helper

Jika kita ingin menggunakan HTML helper kita cukup mememanggil helper nya dengan menggunakan perintah berikut

helper('html');

Tag Html yang sudah di dukung Oleh HTML Helper

Berikut ini akan saya sebutkan dan saya berikan contoh penggunaanya:

• img adalah tag html untuk menampilkan gambar
  Contoh 1 :

  echo img('images/rumahcode.jpg');
  // <img src="http://alamat-website.com/images/rumahcode.jpg" />​

  Contoh 2 :

  echo img('images/rumahcode.jpg', true);
  // <img src="http://alamat-website.com/index.php/images/rumahcode.jpg" alt="" />

  Contoh 3 :

  $imgProperties = [
      'src'    => 'images/rumahcode.jpg',
      'alt'    => 'Contoh HTML helper IMG',
      'class'  => 'class_gambar',
      'width'  => '200',
      'height' => '200',
      'title'  => 'Judul',
  ];
  
  img($imgProperties);
  // <img src="http://alamat-website.com/index.php/images/rumahcode.jpg" alt="Contoh HTML helper IMG" class="lass_gambar" width="200" height="200" title="Judul"/>

• link_tag berfungsi untuk menghubungkan halaman utama sebuah website dengain file pendukung, bisanya digunakan untuk memanggil fole css
  Contoh 1:

  echo link_tag('css/web.css');
  // <link href="css/web.css" rel="stylesheet" type="text/css" />​

  Contoh 2:

  echo link_tag('favicon.ico', 'shortcut icon', 'image/ico');
  // <link href="favicon.ico" rel="shortcut icon" type="image/ico" />
  
  echo link_tag('feed', 'alternate', 'application/rss+xml', 'RSS Feed');
  // <link href="http://alawamt-website.com/feed" rel="alternate" type="application/rss+xml" title="RSS Feed" />

• script_tag di gunakan untuk memanggil java script ata script
  Contoh:

  echo script_tag('js/script.js');
  // <script src="http://alamat-web.com/js/cript.js" type="text/javascript"></script>​

• Ul untuk menampilkan tag ul
  Contoh :

  $list = [
      'red',
      'blue',
      'green',
      'yellow'
  ];
  
  $attributes = [
      'class' => 'boldlist',
      'id'    => 'mylist'
  ];
  
  echo ul($list, $attributes);​

  contoh di atas akan manghasikan kode html sebagai berikut

  <ul class="boldlist" id="mylist">
      <li>red</li>
      <li>blue</li>
      <li>green</li>
      <li>yellow</li>
  </ul>

• Ol fungsi dan cara menggunakan nya sama dengan ul jadi saya tik afan menjelaskan nya
• Video bersufnsi untuk memutar sebuah video
  Contoh :

  $tracks =
  [
      track('subtitles_no.vtt', 'subtitles', 'no', 'Norwegian No'),
      track('subtitles_yes.vtt', 'subtitles', 'yes', 'Norwegian Yes')
  ];
  
  echo video('test.mp4', 'Your browser does not support the video tag.', 'controls');
  
  echo video
  (
      'http://www.codeigniter.com/test.mp4',
      'Your browser does not support the video tag.',
      'controls',
      $tracks
  );
  
  echo video
  (
      [
        source('movie.mp4', 'video/mp4', 'class="test"'),
        source('movie.ogg', 'video/ogg'),
        source('movie.mov', 'video/quicktime'),
        source('movie.ogv', 'video/ogv; codecs=dirac, speex')
      ],
      'Your browser does not support the video tag.',
      'class="test" controls',
      $tracks
   );​

  Perintah di atas akan menampilkan kode html seperti di bawah ini

  <video src="test.mp4" controls>
    Your browser does not support the video tag.
  </video>
  
  <video src="http://www.codeigniter.com/test.mp4" controls>
    <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian No" />
    <track src="subtitles_yes.vtt" kind="subtitles" srclang="yes" label="Norwegian Yes" />
    Your browser does not support the video tag.
  </video>
  
  <video class="test" controls>
    <source src="movie.mp4" type="video/mp4" class="test" />
    <source src="movie.ogg" type="video/ogg" />
    <source src="movie.mov" type="video/quicktime" />
    <source src="movie.ogv" type="video/ogv; codecs=dirac, speex" />
    <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian No" />
    <track src="subtitles_yes.vtt" kind="subtitles" srclang="yes" label="Norwegian Yes" />
    Your browser does not support the video tag.
  </video>

   

Itulah beberapa tag html yang telah di dukung oleh HTML helper, Jika ada tag html yang inign kamu gunakan melalui helper kamu dapat membuat helper sendiri

Baca Juga : Membuat Helper Sendiri