Setting template dinamis Bootstap 4 dengan Codeigniter 3. Mempercantik tampilan desain website menjadi responsive (mobile friendly) yang dibuat dengan codeigniter maka paling enak pakai template dari bootstrap versi 4.
Latihan Codeigniter ini kita menggunakan model tema “Blog” yang bisa didownload secara gratis
- di: https://startbootstrap.com/templates/blog-news
- atau bisa pilih tema bootstrap: https://startbootstrap.com/templates
Baca juga materi sebelumnya:
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”.
Libraries Template dinamis Codeigniter
Membuat sistem template dinamis bootstrap vs Codeigniter membutuhkan libraries baru 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
- header.php (statis)
- home.php (dinamis)
- sidebar.php (statis)
- footer.php (statis)
- 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 →</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="#">← Older</a>
</li>
<li class="page-item disabled">
<a class="page-link" href="#">Newer →</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 © 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