Cara Menggunakan Template Bootstrap Colormag Sebagai Template Codeigniter
Muh. Ashhar Bustan

Cara Menggunakan Template Bootstrap Colormag Sebagai Template Codeigniter

Tutorial template Codeigniter ini merupakan lanjutan dari artikel sebelumnya yaitu membuat library template pada codeigniter dan cara menggunakannya. Silahkan baca artikel tersebut agar tidak kebingungan nantinya. Disini kita akan menggunakan sebuah template Bootstrap untuk digunakan di codeigniter. Template yang akan kita gunakan  adalah "Colormag", penampakannya seperti yang ada pada gambar.

Tamplate HTML Colormag

Baca Juga: Mengenal Bahasa Pemrograman Java



Sekarang ikuti langkah-langkah cara menggunakan template Bootsrap di Codeigniter:

Download versi terbaru Framework Codeigniter
Langkah paling pertama adalah downlod Codeigniter minimal versi 2.2 tetapi sebaiknya gunakan versi terbaru (di sini).

Download Template Colormag
Template yang akan kita gunakan adalah template Colormag yang sudah saya siapkan filenya, silahkan download di sini

Copy File Template Colormag Ke Codeigniter
Setelah Codeigniter dan template Colormag sudah siap, selanjutnya kita akan meletakkan file template ke Codeigniter. Pertama-tama buat folder di codeigniter untuk menempatkan template codeigniter. Sebagai contoh kita membuat folder "asset" (bisa disesuaikan sesuai keinginan Anda), agar lebih jelas perhatikan gambar dibawah.
Folder Asset

Selanjutnya buat folder baru didalam folder "asset", misalnya folder "colormag", setelah itu copy folder css, fonts, img dan js ke dalam folder asset > colormag (perhatikan gambar).

Folder Colormag


Membuat Class Library Template
Langkah selanjutnya adalah membuat librarynya atau class Template. Silahkan ketik script berikut dan simpan di folder application >librares dengan nama Template.php

<?php
class Template {
	protected $_ci;
	
	function __construct()
	{
		$this->_ci =&get_instance();
	}

	function display($template,$data=null)
	{
		$data['_content']=$this->_ci->load->view($template,$data, true);
		$this->_ci->load->view('template.php',$data);
	}
}


Membuat View Template
Ini merupakan tahap yang penting karena kita harus menentukan elemen-elemen mana dari template yang akan kita letakkan sebagai view template. Umumnya yang diletakkan di view template adalah elemen yang selalu ditampilkan dihalaman web seperti misalnya header, navbar, dan footer. Pada contoh tema atau template Colormag yang kita gunakan sekarang, ada dua file html yang akan kita gunakan yaitu file index.html dan single_page.html. Untuk view template kita akan mengambil elemen header, navbar dan footer dari index.php sehingga hasil seperti script dibawa.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?php echo $title;?></title>

    <!-- Bootstrap -->
    <link href="<?php echo base_url();?>asset/colormag/css/bootstrap.min.css" rel="stylesheet">

    <!-- for fontawesome icon css file -->
    <link href="<?php echo base_url();?>asset/colormag/css/font-awesome.min.css" rel="stylesheet">

    <!-- for content animate css file -->
    <link rel="stylesheet" href="<?php echo base_url();?>asset/colormag/css/animate.css">
    <link href='http://fonts.googleapis.com/css?family=Varela' rel='stylesheet' type='text/css'>
    <!-- main site css file -->
    <link href="<?php echo base_url();?>asset/colormag/css/structure.css" rel="stylesheet">



    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
     <!-- Preloader -->
    <div id="preloader">
      <div id="status">&nbsp;</div>
    </div>
    <!-- End Preloader -->

    <!-- start top add banner -->
      <div class="topadd_place">
        <!--<a href="#"><img src="asset/colormag/img/addbanner_728x90_V1.jpg" alt="img"></a>-->
      </div>
      <!-- End top add banner -->
  <a class="scrollToTop" href="#"><i class="fa fa-angle-up"></i></a>
    <!-- ==================start header=============== -->
    <header id="header">
      <div class="container">
         <!-- Static navbar -->
      <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html"><span>Color</span>Mag</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav custom_nav">
              <li class=""><a href="<?php echo base_url();?>">Home</a></li>
			  <li><a href="<?php echo base_url();?>web/detail">Halaman Detail</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Features</a>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#">Standard Blog Layout</a></li>
                  <li><a href="#">Post With Comments</a></li>
                  <li><a href="#">Page:Right Sidebar</a></li>
                </ul>
              </li>
              <li><a href="#">Shortcodes</a></li>
              <li><a href="#">Archive</a></li>
              <li><a href="#">Contact</a></li>
              <li><a href="#">Download Template</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>
      <form id="searchForm">
        <input type="text" placeholder="Search...">
        <input type="submit" value="">
      </form>
      </div>
    </header>
    <!-- ==================End header=============== -->

    <!-- ==================start content body section=============== -->
    <?php echo $_content;?>
    <!-- Variabel $_content adalah data yang dikirim dari class library template. perhatikan kembarli script Template.php di atas.-->

    <footer id="footer">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="footer_inner">
              <p class="pull-left">All Rights Reserved <a href="#">ColorMag</a></p>
              <p class="pull-right">Developed By <a href="http://www.wpfreeware.com" rel="nofollow">WpFreeware</a></p>
            </div>
          </div>
        </div>
      </div>
    </footer>
    <!-- ==================End content body section=============== -->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="<?php echo base_url();?>asset/colormag/js/bootstrap.min.js"></script>
    <!-- For content animatin  -->
    <script src="<?php echo base_url();?>asset/colormag/js/wow.min.js"></script>
    <!-- custom js file include -->
     <script src="<?php echo base_url();?>asset/colormag/js/custom.js"></script>

  </body>
</html>

Variabel $_content adalah data yang dikirim dari class library template. perhatikan kembarli script Template.php di atas. Simpan dengan nama template.php dan letakkan didalam folder View.

Baca Juga: Cara Mengirim Variabel Javascript Dari View Ke Controller Codeigniter


Membuat View Index
Dinakaman index karena file view index merupakan halaman yang akan ditampilkan pertamakali setiap halaman web diakses. Index view ini merupakan elemen <body> dari file view template.php, untuk lebih jelasnya silahkan perhatikan contoh scriptnya seperti dibawah ini:

<section id="contentbody">
      <div class="container">
        <div class="row">
        <!-- start left bar content -->
          <div class=" col-sm-12 col-md-6 col-lg-6">
            <div class="row">
              <div class="leftbar_content">
                <h2>The New Stuff</h2>
                <!-- start single stuff post -->
                <div class="single_stuff wow fadeInDown">
                  <div class="single_stuff_img">
                    <a href="single_page.html"><img src="asset/colormag/img/stuff_img1.jpg" alt="img"></a>
                  </div>
                  <div class="single_stuff_article">
                      <div class="single_sarticle_inner">
                          <a class="stuff_category" href="#">Technology</a>
                        <div class="stuff_article_inner">
                          <span class="stuff_date">Nov <strong>17</strong></span>
                          <h2><a href="single_page.html">Duis quis erat non nunc fringilla</a></h2>
                          <p>Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula...</p>
                        </div>
                      </div>
                  </div>
                </div>
                <!-- End single stuff post -->

                 <!-- start single stuff post -->
                <div class="single_stuff wow fadeInDown">
                  <div class="single_stuff_img">
                    <a href="#"><img src="asset/colormag/img/stuff_img1.jpg" alt="img"></a>
                  </div>
                  <div class="single_stuff_article">
                      <div class="single_sarticle_inner">
                          <a class="stuff_category" href="#">Technology</a>
                        <div class="stuff_article_inner">
                          <span class="stuff_date">Nov <strong>17</strong></span>
                          <h2><a href="#">Duis quis erat non nunc fringilla</a></h2>
                          <p>Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula...</p>
                        </div>
                      </div>
                  </div>
                </div>
                <!-- End single stuff post -->

                <!-- start single stuff post -->
                <div class="single_stuff wow fadeInDown">
                  <div class="single_stuff_img">
                    <a href="#"><img src="asset/colormag/img/stuff_img1.jpg" alt="img"></a>
                  </div>
                  <div class="single_stuff_article">
                      <div class="single_sarticle_inner">
                          <a class="stuff_category" href="#">Technology</a>
                        <div class="stuff_article_inner">
                          <span class="stuff_date">Nov <strong>17</strong></span>
                          <h2><a href="#">Duis quis erat non nunc fringilla</a></h2>
                          <p>Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula...</p>
                        </div>
                      </div>
                  </div>
                </div>
                <!-- End single stuff post -->

                <!-- start single stuff post -->
                <div class="single_stuff wow fadeInDown">
                  <div class="single_stuff_img">
                    <a href="#"><img src="asset/colormag/img/stuff_img1.jpg" alt="img"></a>
                  </div>
                  <div class="single_stuff_article">
                      <div class="single_sarticle_inner">
                          <a class="stuff_category" href="#">Technology</a>
                        <div class="stuff_article_inner">
                          <span class="stuff_date">Nov <strong>17</strong></span>
                          <h2><a href="#">Duis quis erat non nunc fringilla</a></h2>
                          <p>Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula...</p>
                        </div>
                      </div>
                  </div>
                </div>
                <!-- End single stuff post -->

                <!-- start single stuff post -->
                <div class="single_stuff wow fadeInDown">
                  <div class="single_stuff_img">
                    <a href="#"><img src="asset/colormag/img/stuff_img1.jpg" alt="img"></a>
                  </div>
                  <div class="single_stuff_article">
                      <div class="single_sarticle_inner">
                          <a class="stuff_category" href="#">Technology</a>
                        <div class="stuff_article_inner">
                          <span class="stuff_date">Nov <strong>17</strong></span>
                          <h2><a href="#">Duis quis erat non nunc fringilla</a></h2>
                          <p>Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula...</p>
                        </div>
                      </div>
                  </div>
                </div>
                <!-- End single stuff post -->

                <div class="stuffpost_paginatinonarea wow slideInLeft">
                  <ul class="newstuff_pagnav">
                    <li><a class="active_page" href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <!-- End left bar content -->

          <!-- start middle bar content -->
          <div class="col-sm-6 col-md-2 col-lg-2">
           <div class="row">
              <div class="middlebar_content">
              <h2 class="yellow_bg">What's Hot</h2>
              <div class="middlebar_content_inner wow fadeInUp">
                <ul class="middlebar_nav">
                  <li>
                    <a class="mbar_thubnail" href="#"><img src="asset/colormag/img/hot_img1.jpg" alt="img"></a>
                    <a class="mbar_title" href="#">Sed luctus semper odio aliquam rhoncus</a>
                  </li>
                   <li>
                    <a class="mbar_thubnail" href="#"><img src="asset/colormag/img/hot_img2.jpg" alt="img"></a>
                    <a class="mbar_title" href="#">Sed luctus semper odio aliquam rhoncus</a>
                  </li>
                   <li>
                    <a class="mbar_thubnail" href="#"><img src="asset/colormag/img/hot_img1.jpg" alt="img"></a>
                    <a class="mbar_title" href="#">Sed luctus semper odio aliquam rhoncus</a>
                  </li>
                   <li>
                    <a class="mbar_thubnail" href="#"><img src="asset/colormag/img/hot_img1.jpg" alt="img"></a>
                    <a class="mbar_title" href="#">Sed luctus semper odio aliquam rhoncus</a>
                  </li>
                    <li>
                    <a class="mbar_thubnail" href="#"><img src="asset/colormag/img/hot_img1.jpg" alt="img"></a>
                    <a class="mbar_title" href="#">Sed luctus semper odio aliquam rhoncus</a>
                  </li>
                    <li>
                    <a class="mbar_thubnail" href="#"><img src="asset/colormag/img/hot_img1.jpg" alt="img"></a>
                    <a class="mbar_title" href="#">Sed luctus semper odio aliquam rhoncus</a>
                  </li>
                    <li>
                    <a class="mbar_thubnail" href="#"><img src="asset/colormag/img/hot_img1.jpg" alt="img"></a>
                    <a class="mbar_title" href="#">Sed luctus semper odio aliquam rhoncus</a>
                  </li>
                    <li>
                    <a class="mbar_thubnail" href="#"><img src="asset/colormag/img/hot_img1.jpg" alt="img"></a>
                    <a class="mbar_title" href="#">Sed luctus semper odio aliquam rhoncus</a>
                  </li>
                </ul>
              </div>
              <div class="popular_categori  wow fadeInUp">
                <h2 class="limeblue_bg">Most Popular Categories</h2>
                <ul class="poplr_catgnva">
                    <li><a href="#">Business</a></li>
                    <li><a href="#">Gallery</a></li>
                    <li><a href="#">Life & Style</a></li>
                    <li><a href="#">Games</a></li>
                    <li><a href="#">Slider</a></li>
                    <li><a href="#">Sports</a></li>
                  </ul>
              </div>
            </div>
           </div>
          </div>
          <!-- End middle bar content -->

          <div class="col-sm-6 col-md-4 col-lg-4">
            <div class="row">
              <div class="rightbar_content">
              <!-- start featured post -->
                <div class="single_blog_sidebar wow fadeInUp">
                <h2>The Featured Stuff</h2>
                <ul class="featured_nav">
                  <li>
                    <a class="featured_img" href="#"><img src="asset/colormag/img/featured_img1.jpg" alt="img"></a>
                    <div class="featured_title">
                      <a class="" href="#">Sed luctus semper odio aliquam rhoncus</a>
                    </div>
                  </li>
                  <li>
                    <a class="featured_img" href="#"><img src="asset/colormag/img/featured_img1.jpg" alt="img"></a>
                    <div class="featured_title">
                      <a class="" href="#">Sed luctus semper odio aliquam rhoncus</a>
                    </div>
                  </li>
                  <li>
                    <a class="featured_img" href="#"><img src="asset/colormag/img/featured_img1.jpg" alt="img"></a>
                    <div class="featured_title">
                      <a class="" href="#">Sed luctus semper odio aliquam rhoncus</a>
                    </div>
                  </li>
                </ul>
                </div>
                <!-- End featured post -->

                <!-- start Popular Posts -->
                <div class="single_blog_sidebar wow fadeInUp">
                <h2>Popular Posts</h2>
                <ul class="middlebar_nav wow">
                  <li>
                    <a href="#" class="mbar_thubnail"><img alt="img" src="asset/colormag/img/hot_img1.jpg"></a>
                    <a href="#" class="mbar_title">Sed luctus semper odio aliquam rhoncus</a>
                  </li>
                   <li>
                    <a href="#" class="mbar_thubnail"><img alt="img" src="asset/colormag/img/hot_img2.jpg"></a>
                    <a href="#" class="mbar_title">Sed luctus semper odio aliquam rhoncus</a>
                  </li>
                   <li>
                    <a href="#" class="mbar_thubnail"><img alt="img" src="asset/colormag/img/hot_img1.jpg"></a>
                    <a href="#" class="mbar_title">Sed luctus semper odio aliquam rhoncus</a>
                  </li>
                   <li>
                    <a href="#" class="mbar_thubnail"><img alt="img" src="asset/colormag/img/hot_img1.jpg"></a>
                    <a href="#" class="mbar_title">Sed luctus semper odio aliquam rhoncus</a>
                  </li>
                </ul>
                </div>
                <!-- End Popular Posts -->

                <!-- start Popular Posts -->
                <div class="single_blog_sidebar wow fadeInUp">
                <h2>Popular Tags</h2>
                <ul class="poplr_tagnav">
                  <li><a href="#">Arts</a></li>
                  <li><a href="#">Games</a></li>
                  <li><a href="#">Nature</a></li>
                  <li><a href="#">Comedy</a></li>
                  <li><a href="#">Sports</a></li>
                  <li><a href="#">Tourism</a></li>
                  <li><a href="#">Videos</a></li>
                </ul>
                </div>
                <!-- End Popular Posts -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>


Membuat View Detail
View detail merupakan hasil modifikasi dari file single_page.html. View ini digunakan untuk menampilkan konten artikel atau berita secara utuh. Karena sebeleumnya pada view Template kita sudah memiliki elemen header, navbar dan footer maka pada view Detail ini kita cuku mengambil elemen content dari file single_page.html, lebih jelasnya perhatikan listing program dibawah.

<section id="contentbody">
  <div class="container">
    <div class="row">
    <!-- start left bar content -->
      <div class=" col-sm-12 col-md-6 col-lg-6">
        <div class="row">
          <div class="leftbar_content">
            <h2>The New Stuff</h2>

            <!-- start single stuff post -->
           <div class="singlepost_area">
             <div class="singlepost_content">
               <a href="#" class="stuff_category">Technology</a>
               <span class="stuff_date">Nov <strong>17</strong></span>
               <h2><a href="#">Duis quis erat non nunc fringilla</a></h2>
               <img class="img-center" src="<?php echo base_url();?>asset/colormag/img/hot_img1.jpg" alt="img">
               <p>Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla nunc dui, tristique in semper vel, congue sed ligula. Nam dolor ligula, faucibus id sodales in, auctor fringilla libero. Pellentesque pellentesque tempor tellus eget hendrerit. Morbi id aliquam ligula. Aliquam id dui sem. Proin rhoncus consequat nisl, eu ornare mauris tincidunt vitae. Vestibulum sodales ante a purus volutpat euismod. Proin sodales quam nec ante sollicitudin lacinia. Ut egestas bibendum tempor. Morbi non nibh sit amet ligula blandit ullamcorper in nec risus. Pellentesque fringilla diam faucibus tortor bibendum vulputate. Etiam turpis urna, rhoncus et mattis ut, dapibus eu nunc. Nunc sed aliquet nisi. Nullam ut magna non lacus adipiscing volutpat. Aenean odio mauris, consectetur quis consequat quis, blandit a nunc. Sed orci erat, placerat ac interdum ut, suscipit eu augue. Nunc vitae mi tortor. Ut vel justo quis lectus elementum </p>
               <blockquote>Donec volutpat nibh sit amet libero ornare non laoreet arcu luctus. Donec id arcu quis mauris euismod placerat sit amet ut metus. Sed imperdiet fringilla sem eget euismod. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque adipiscing, neque ut pulvinar tincidunt, est sem euismod odio, eu ullamcorper turpis nisl sit amet velit. Nullam vitae nibh odio, non scelerisque nibh. Vestibulum ut est augue, in varius purus.</blockquote>
               <ul>
                 <li>Nunc tincidunt, elit non cursus euismod, lacus augue</li>
                 <li>Nunc tincidunt, elit non cursus euismod, lacus augue</li>
                 <li>Nunc tincidunt, elit non cursus euismod, lacus augue</li>
                 <li>Nunc tincidunt, elit non cursus euismod, lacus augue</li>
                 <li>Nunc tincidunt, elit non cursus euismod, lacus augue</li>
                 <li>Nunc tincidunt, elit non cursus euismod, lacus augue</li>
               </ul>
               <p>Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut. Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc. Vivamus gravida vehicula arcu, vitae vulputate augue lacinia faucibus.</p>
               <h3>This is H3 Text Format</h3>
               <h4>This is H4 Text Format</h4>
               <h5>This is H5 Text Format</h5>
               <h6>This is H6 Text Format</h6>
              <a href="#" class="btn btn-primary">Primary</a>
              <a href="#" class="btn btn-success">Success</a>
              <a href="#" class="btn btn-info">Info</a>
              <a href="#" class="btn btn-danger">Danger</a>
              <a href="#" class="btn yellow_btn">Yellow</a>
              <a href="#" class="btn blue_btn">Blue</a>
              <a href="#">link</a>

              <!-- single page pagination  -->
              <div class="singlepage_pagination">
                <a class="previous_btn" href="#">Previous</a>
                <a class="next_btn" href="#">Next</a>
              </div>

            <!-- start social link area -->
              <div class="social_area wow fadeInLeft">
              <ul>
                <li><a href="#"><span class="fa fa-facebook"></span></a></li>
                <li><a href="#"><span class="fa fa-twitter"></span></a></li>
                <li><a href="#"><span class="fa fa-google-plus"></span></a></li>
                <li><a href="#"><span class="fa fa-linkedin"></span></a></li>
                <li><a href="#"><span class="fa fa-pinterest"></span></a></li>
               </ul>
              </div>
              <!-- author area-->
              <div class="author">
                <a href="#"><img src="http://lorempixel.com/100/100/" alt="img"></a>
                <div class="author_details">
                  <h3><a href="#">Author Name</a></h3>
                  <p>About Author Content lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc. Vivamus gravida vehicula arcu, vitae vulputate augue lacinia faucibus</p>
                </div>
              </div>
             </div>
           </div>
            <!-- End single stuff post -->

         <!-- start similar post -->
         <div class="similar_post_area">
           <h2>Similar Post You May Like <i class="fa fa-thumbs-o-up"></i></h2>
           <ul class="featured_nav similarpost_nav wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
              <li>
                <a href="#" class="featured_img"><img alt="img" src="<?php echo base_url();?>asset/colormag/img/featured_img1.jpg"></a>
                <div class="featured_title">
                  <a href="#" class="">Sed luctus semper odio aliquam rhoncus</a>
                </div>
              </li>
              <li>
                <a href="#" class="featured_img"><img alt="img" src="<?php echo base_url();?>asset/colormag/img/featured_img1.jpg"></a>
                <div class="featured_title">
                  <a href="#" class="">Sed luctus semper odio aliquam rhoncus</a>
                </div>
              </li>
              <li>
                <a href="#" class="featured_img"><img alt="img" src="<?php echo base_url();?>asset/colormag/img/featured_img1.jpg"></a>
                <div class="featured_title">
                  <a href="#" class="">Sed luctus semper odio aliquam rhoncus</a>
                </div>
              </li>
            </ul>
         </div>
          </div>
        </div>
      </div>
      <!-- End left bar content -->

      <!-- start middle bar content -->
      <div class="col-sm-6 col-md-2 col-lg-2">
       <div class="row">
          <div class="middlebar_content">
          <h2 class="yellow_bg">What's Hot</h2>
          <div class="middlebar_content_inner">
            <ul class="middlebar_nav wow fadeInDown">
              <li>
                <a class="mbar_thubnail" href="#"><img src="<?php echo base_url();?>asset/colormag/img/hot_img1.jpg" alt="img"></a>
                <a class="mbar_title" href="#">Sed luctus semper odio aliquam rhoncus</a>
              </li>
               <li>
                <a class="mbar_thubnail" href="#"><img src="<?php echo base_url();?>asset/colormag/img/hot_img2.jpg" alt="img"></a>
                <a class="mbar_title" href="#">Sed luctus semper odio aliquam rhoncus</a>
              </li>
               <li>
                <a class="mbar_thubnail" href="#"><img src="<?php echo base_url();?>asset/colormag/img/hot_img1.jpg" alt="img"></a>
                <a class="mbar_title" href="#">Sed luctus semper odio aliquam rhoncus</a>
              </li>
               <li>
                <a class="mbar_thubnail" href="#"><img src="<?php echo base_url();?>asset/colormag/img/hot_img1.jpg" alt="img"></a>
                <a class="mbar_title" href="#">Sed luctus semper odio aliquam rhoncus</a>
              </li>
                <li>
                <a class="mbar_thubnail" href="#"><img src="<?php echo base_url();?>asset/colormag/img/hot_img1.jpg" alt="img"></a>
                <a class="mbar_title" href="#">Sed luctus semper odio aliquam rhoncus</a>
              </li>
                <li>
                <a class="mbar_thubnail" href="#"><img src="<?php echo base_url();?>asset/colormag/img/hot_img1.jpg" alt="img"></a>
                <a class="mbar_title" href="#">Sed luctus semper odio aliquam rhoncus</a>
              </li>
                <li>
                <a class="mbar_thubnail" href="#"><img src="<?php echo base_url();?>asset/colormag/img/hot_img1.jpg" alt="img"></a>
                <a class="mbar_title" href="#">Sed luctus semper odio aliquam rhoncus</a>
              </li>
                <li>
                <a class="mbar_thubnail" href="#"><img src="<?php echo base_url();?>asset/colormag/img/hot_img1.jpg" alt="img"></a>
                <a class="mbar_title" href="#">Sed luctus semper odio aliquam rhoncus</a>
              </li>
            </ul>
          </div>
          <div class="popular_categori">
            <h2 class="limeblue_bg">Most Popular Categories</h2>
            <ul class="poplr_catgnva wow fadeInDown">
                <li><a href="#">Business</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Life & Style</a></li>
                <li><a href="#">Games</a></li>
                <li><a href="#">Slider</a></li>
                <li><a href="#">Sports</a></li>
              </ul>
          </div>
        </div>
       </div>
      </div>
      <!-- End middle bar content -->

      <div class="col-sm-6 col-md-4 col-lg-4">
        <div class="row">
          <div class="rightbar_content">
          <!-- start featured post -->
            <div class="single_blog_sidebar">
            <h2>The Featured Stuff</h2>
            <ul class="featured_nav wow fadeInDown">
              <li>
                <a class="featured_img" href="#"><img src="<?php echo base_url();?>asset/colormag/img/featured_img1.jpg" alt="img"></a>
                <div class="featured_title">
                  <a class="" href="#">Sed luctus semper odio aliquam rhoncus</a>
                </div>
              </li>
              <li>
                <a class="featured_img" href="#"><img src="<?php echo base_url();?>asset/colormag/img/featured_img1.jpg" alt="img"></a>
                <div class="featured_title">
                  <a class="" href="#">Sed luctus semper odio aliquam rhoncus</a>
                </div>
              </li>
              <li>
                <a class="featured_img" href="#"><img src="<?php echo base_url();?>asset/colormag/img/featured_img1.jpg" alt="img"></a>
                <div class="featured_title">
                  <a class="" href="#">Sed luctus semper odio aliquam rhoncus</a>
                </div>
              </li>
            </ul>
            </div>
            <!-- End featured post -->

            <!-- start Popular Posts -->
            <div class="single_blog_sidebar">
            <h2>Popular Posts</h2>
            <ul class="middlebar_nav wow fadeInDown">
              <li>
                <a href="#" class="mbar_thubnail"><img alt="img" src="<?php echo base_url();?>asset/colormag/img/hot_img1.jpg"></a>
                <a href="#" class="mbar_title">Sed luctus semper odio aliquam rhoncus</a>
              </li>
               <li>
                <a href="#" class="mbar_thubnail"><img alt="img" src="<?php echo base_url();?>asset/colormag/img/hot_img2.jpg"></a>
                <a href="#" class="mbar_title">Sed luctus semper odio aliquam rhoncus</a>
              </li>
               <li>
                <a href="#" class="mbar_thubnail"><img alt="img" src="<?php echo base_url();?>asset/colormag/img/hot_img1.jpg"></a>
                <a href="#" class="mbar_title">Sed luctus semper odio aliquam rhoncus</a>
              </li>
               <li>
                <a href="#" class="mbar_thubnail"><img alt="img" src="<?php echo base_url();?>asset/colormag/img/hot_img1.jpg"></a>
                <a href="#" class="mbar_title">Sed luctus semper odio aliquam rhoncus</a>
              </li>
            </ul>
            </div>
            <!-- End Popular Posts -->

            <!-- start Popular Posts -->
            <div class="single_blog_sidebar">
            <h2>Popular Tags</h2>
            <ul class="poplr_tagnav wow fadeInDown">
              <li><a href="#">Arts</a></li>
              <li><a href="#">Games</a></li>
              <li><a href="#">Nature</a></li>
              <li><a href="#">Comedy</a></li>
              <li><a href="#">Sports</a></li>
              <li><a href="#">Tourism</a></li>
              <li><a href="#">Videos</a></li>
            </ul>
            </div>
            <!-- End Popular Posts -->
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Seperti yang kita lihat pada listing program di atas, kita tidak lagi menyertakan header, navbar dan footer karena sudah kita tempatkan pada view Template. Pada view Index maupun view Detail kita cukup menuliskan elemen selain ketiga elemen-elemen tersebut di atas.

Membuat Controller
Langkah terkhirnya adalah membuat class controller. Pada Controller inilah kita akan mendefinisikan library template. Normalnya untuk menampilkan sebuah view kita menggunakan perintah $this->load->view('nama_view')  tapi setelah menggunakan library template untuk menampilkan sebuah view kita akan menggunakan fungsi display() yang ada pada class atau library Template. Lebih jelasnya perhatikan listing program dibawah:

<?php
class Web extends CI_Controller {

public function __construct(){
   parent::__construct();
   $this->load->library('template'); //Mendefinisikan library template'
   $this->load->helper('url'); //Untuk Menggunakan Fungsi base_url()
}

function index(){
	$data = array( 'title' => 'Contoh penggunaan template Bootstrap pada Codeigniter',
	'isi' => 'Ini isi Contoh penggunaan template pada Codeinginter');
	$this->template->display('index',$data); // Fungsi display() untuk menampilkan view index.php
}

function detail(){
	$data = array( 'title' => 'Contoh penggunaan template Bootstrap pada Codeigniter',
	'isi' => 'Ini isi Contoh penggunaan template pada Codeinginter');
	
	$this->template->display('detail',$data); // Fungsi display() untuk menampilkan view detail.php
}
}

 

Simpan listing program diatas dengan nama Web.php di folder Controller. Yang perlu diperhatikan adalah untuk menggunakan librari Template maka harus didefinisikan terlebih dahulu seperti yang terlihat pada  baris ke 5 listing program di atas. Selanjutnya perhatikan baris ke 13, disana kita menggunakan fungsi display() untuk menampilkan view dengan nama index.php.

Hasilnya seperti ini:
Hasil Penggunaan Template Colormag di Codeigniter

Sampai di sini kita sudah berhasil menggunakan template HTML/Bootsrap Colormag menjadi template Codeigniter. Anda bisa menggunakan template Bootstrap atau template HTML lainnya dengan cara yang sama. Sebagai bahan ujicoba silahkan download source code lengkapnya disini.

Selamat mencoba smiley

Baca Juga: Cara Membuat Galeri Foto Sederhana Menggunakan HTML, CSS Dan Javascript


YANG LAIN:

Komentar

Cari Artikel Lainnya Disini