Memasang Template Dinamis Bootstrap 4 di CodeIgniter

Cara Pasang template dinamis Bootstap 4 dengan Codeigniter

Guna mempercantik tampilan / desain website menjadi responsive (mobile friendly) yang dibuat dengan codeigniter maka paling enak pakai template dari bootstrap versi 4. pada latihan Codeigniter ini kita menggunakan model tema “Blog” yang bisa didownload secara gratis di: https://startbootstrap.com/templates/blog-home/

Baca juga materi sebelumnya:

Belajar Konsep MVC Codeigniter lengkap!

Setelah template bootstrap berhasil download , silahkan extra file & rename menjadi “blog-home” kemudian buat folder baru pada folder root utama htdocs: teme/blog-home, untuk keperluan menyimpan media berupa file & gambar buat folder: “media” didalam folder “tema”.

  • Unduh file: sample.png
  • simpan pada folder “tema/media”.

 

Pasang Bootstrap dengan codeigniter

Membuat sistem template dinamis bootstrap vs Codeigniter membutuhkan kode libraries tambahan yang telah kita buat, dan ini bisa kamu pakai:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Template 
{
  var $template_data = array();
  function set($name, $value)
    {
    $this->template_data[$name] = $value;
    }
 
  function load($template = '', $view = '' , $view_data = array(), $return = FALSE)
    {               
    $this->CI =& get_instance();
    $this->set('contents', $this->CI->load->view($view, $view_data, TRUE));			
    return $this->CI->load->view($template, $this->template_data, $return);
    }
}

Silahkan buat file libraries baru: application/libraries/template.php

Jangan lupa tambahakn pula pada setingan: config/autoload.php

$autoload['libraries'] = array('session', 'database', 'form_validation','template');

Template Codeigniter Dinamis

Selajutnya kita akan membuat template bootstrap menjadi dinamis dengan membagi 4 bagian, buat masing file pada folder: application/views

  1. header.php (statis)
  2. home.php (dinamis)
  3. sidebar.php (statis)
  4. footer.php (statis)
  5. role.php (statis)

Silahkan ubah Kode masing2 file seperti yang kita lampirkan dibawah:

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>

<body>

  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">CI Bootstrap 4</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home
              <span class="sr-only">(current)</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
<div class="container">
<div class="row">

home.php

<!-- Blog Entries Column -->
<div class="col-md-8">

  <h1 class="my-4">Page Heading
    <small>Secondary Text</small>
  </h1>

  <!-- Blog Post -->
  <div class="card mb-4">
    <img class="card-img-top" src="<?php echo base_url('tema/media/sample.png');?>" alt="Card image cap">
    <div class="card-body">
      <h2 class="card-title">Post Title</h2>
      <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis soluta, a laboriosam. Dicta expedita corporis animi vero voluptate voluptatibus possimus, veniam magni quis!</p>
      <a href="#" class="btn btn-primary">Read More &rarr;</a>
    </div>
    <div class="card-footer text-muted">
      Posted on January 1, 2017 by
      <a href="#">Start Bootstrap</a>
    </div>
  </div>

  <!-- Pagination -->
  <ul class="pagination justify-content-center mb-4">
    <li class="page-item">
      <a class="page-link" href="#">&larr; Older</a>
    </li>
    <li class="page-item disabled">
      <a class="page-link" href="#">Newer &rarr;</a>
    </li>
  </ul>
</div>

sidebar.php

<!-- Sidebar Widgets Column -->
<div class="col-md-4">

  <!-- Search Widget -->
  <div class="card my-4">
    <h5 class="card-header">Search</h5>
    <div class="card-body">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search for...">
        <span class="input-group-btn">
          <button class="btn btn-secondary" type="button">Go!</button>
        </span>
      </div>
    </div>
  </div>

  <!-- Categories Widget -->
  <div class="card my-4">
    <h5 class="card-header">Categories</h5>
    <div class="card-body">
      <div class="row">
        <div class="col-lg-6">
          <ul class="list-unstyled mb-0">
            <li>
              <a href="#">Web Design</a>
            </li>
            <li>
              <a href="#">HTML</a>
            </li>
            <li>
              <a href="#">Freebies</a>
            </li>
          </ul>
        </div>
        <div class="col-lg-6">
          <ul class="list-unstyled mb-0">
            <li>
              <a href="#">JavaScript</a>
            </li>
            <li>
              <a href="#">CSS</a>
            </li>
            <li>
              <a href="#">Tutorials</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <!-- Side Widget -->
  <div class="card my-4">
    <h5 class="card-header">Side Widget</h5>
    <div class="card-body">
      You can put anything you want inside of these side widgets. They are easy to use, and feature the new Bootstrap 4 card containers!
    </div>
  </div>

</div></div></div>

footer.php

<!-- Footer -->
  <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>

role.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

require'header.php';
echo $contents;
require'sidebar.php';
require'footer.php';

keterangan: kode file role.php berfungsi untuk menggabungkan file2 template secara dinamis.

 

Edit class template CI

folder: application/controllers/welcome.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Welcome extends CI_Controller {

  public function index()
  {
   $this->template->load('role','home'); 
  }
}

ket: kode class templet memanggil file home dari folder: views/home.php untuk ditampilkan secara default bersama bootstap 4.

Sampai pada tahap ini proses memasang template bootstrap 4 di codeigniter telah selesai & berhasil, untuk ujicoba silahkan buka url: http://localhost/latihanCI

 

Download Boostrap 4 + Codeigniter

Jika dalam proses latihan masih mengalami error / kesalahan bisa langsung coba file jadi yang kita sediakan secara gratis: latihanCI.zip

 

Next Tutorial CI ?

Kita akan belajar & latihan codeigniter tentang materi CRUD secara sederhana:

Belajar CRUD CodeIgniter (xampp, Mysql) + Bootstrap 4

__Semoga bermanfaat & selamat belajar !

Editor: | Update: Mei 23, 2019

Baca Juga:

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *