Cara Include, Load CSS / JS CodeIgniter 3

Publish: 15 09, 2023

Updated: 16/08/24 21:21:42

CodeIgniter 3 CSS / JS: Load File Assets template Bootstrap. Cara Masukan / Load Kode CSS di Codeigniter itu sangat mudah, biasanya kita menggunakan template seperti bootstrap atau custome sehingga harus include kedalam kode views.

Menambahkan CSS atau JS pada codeigniter

Berikut ini adalah cara menambahkan file code CSS dan JS external (bukan inline) pada codeigniter.

Tahap 1 :

Buatlah folder assets / tema pada root project latihan kamu, sehingga struktur folder tampak seperti gambar dibawah:

Tahap 2 :

Tambahkan file css dan js, pada latihan ini kita menggunakan template bootstrap 4 versi home-blog. Jadi saya buat folder baru bernama: tema/blog-home/

Buat file

OK, Setelah folder tema dibuat selanjutnya tinggal load file css / js pada folder views:

header.php
footer.php

kode header.php

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Blog Home - Start Bootstrap Template</title>

  <!-- Bootstrap core CSS -->
  <link href="<?php echo base_url('tema/blog-home/');?>vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="<?php echo base_url('tema/blog-home/');?>css/blog-home.css" rel="stylesheet">

</head>

keterangan:

Edit link css dengan menambahkan kode: <?php echo base_url(‘tema/blog-home/’);?> pada awal links.

kode footer.php

  <footer class="py-5 bg-dark">
    <div class="container">
      <p class="m-0 text-center text-white">Copyright &copy; Your Website 2019</p>
    </div>
    <!-- /.container -->
  </footer>

  <!-- Bootstrap core JavaScript -->
  <script src="<?php echo base_url('tema/blog-home/');?>vendor/jquery/jquery.min.js"></script>
  <script src="<?php echo base_url('tema/blog-home/');?>vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

</body>

</html>

keterangan:

Edit link js dengan menambahkan kode: <?php echo base_url(‘tema/blog-home/’);?> pada awal links, Secara umum kita menggunakan function php: base_url(); bawaan default codeigniter.

Kesimpulan

Edit semua kode dalam folder view: ini berlaku untuk file (CSS / JS / IMG) sesuai standard bootstrap, Demikilah cara menambahkan CSS dan JS pada Codeigniter.

__ Semoga bermanfaat & Selamat belajar!

READ : Jasa PHP Web Developer Banjarnegara