Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

 |  |  | 
Anda ingin membuat website?
Untuk Anda yang sedang mencari orang untuk jasa pembuatan website, Saya akan bantu buatkan aplikasi sesuai kebutuhan Anda. Segera hubungi : [email protected] Selengkapnya tentang profil saya klik www.rizaldimaulidia.com.

Codeigniter Tips and Trick

Cara Membuat 1 File Template untuk Semua Tampilan dengan Codeigniter

img-responsive

Sesuai permintaan dari teman saya. Kali ini saya akan mencoba share Tips & Trik bagaimana cara membuat 1 file template yang bisa digunakan untuk semua tampilan sehingga akan lebih efisien dan efektif ketika ada perubahan pada template. Mengerti maksdunya? saya beri sebuah contoh, misalnya saya mempunyai sebuah website yang didalamnya mempunyai tampilan untuk Home, Berita, dan Galeri. Nah, apabila kita tidak membuat 1 file template untuk semua tampilan, otomatis ketika misalnya kita ingin menambahkan menu Kontak berarti kita harus mengubah semuafile tampilan home, berita, dan juga galeri. Pada kasus ini masih bisa kita atasi apabila ada perubahan template karena file tampilannya juga cuma sedikit. Bagaiman kalau kita membuat website dengan banyak tampilan bukan hanya 3 tampilan, Pasti akan merepotkan ketika ada perubahan template. Kita harus satu per satu merubah semua tampilan.

Tapi sekarang Anda tidak perlu khawatir karena saya akan berbagi bagaimana cara mengatasi masalah tersebut. Kali ini saya akan membuatnya dengan Framework Codeigniter. Tapi apabila bagi Anda yang tidak menggunakan Codeigniter, Saya juga akan coba share catatan mengenai masalah ini tanpa Framework Codeigniter pada catatan selanjutnya. Langsung saja biar tidak penasaran ikuti langkah-langkah berikut ini :

STEP 1 – INSTALASI

  1. Download framework Codeigniternya, klik link berikut : Download. Pada catatan ini, saya menggunakan Codeigniter 2.2
    Bingung cara downloadnya? klik disini untuk melihat caranya.
  2. Buat sebuah folder baru dengan nama latihan_template pada xampp/htdocs/
  3. Copy dan Ekstrak file Codeigniter yang Anda download, lalu simpan di dalam folder latihan_template yang tadi Anda buat (xampp/htdocs/latihan_template/).

STEP 2 – KONFIGURASI
Karena disini kita menggunakan Framework Codeigniter, maka kita harus lakukan konfigurasi terlebh dahulu pada Codeigniternya. Ikuti langkah-langkah berikut ini :

  1. Buka folder latihan_template/application/config/
  2. Buka file config.php
    Cari kode berikut ini :

    $config['base_url'] = '';

    Ubah jadi seperti ini :

    $config['base_url'] = 'http://localhost/latihan_template';

    Kode diatas digunakan untuk menset baseurlnya.
    Lalu simpan file tersebut.

  3. Buka file autoload.php
    Cari kode berikut ini :

    $autoload['helper'] = array();

    Ubah jadi seperti ini :

     $autoload['helper'] = array('file','url');
    

    Kode diatas digunakan untuk memuat (menload) class database, file, dan url.
    Lalu simpan file tersebut.

  4. Buka file routes.php
    Cari kode berikut ini :

    $route['default_controller'] = "welcome";

    Ubah jadi seperti ini :

     $route['default_controller'] = "main";

    Lalu simpan file tersebut.
    Kode diatas digunakan untuk menset controller mana yang akan diload pertama kali. Secara default, Codeigniter telah menset default controller yaitu welcome. Disini kita set default controller menjadi main.


STEP 3 – BUAT TEMPLATE
Sekarang kita masuk ke tahap pembuatan templatenya. pada catatan ini saya membagi-bagi templatenya ke dalam 3 file yaitu index.php, header.php, dan footer.php. Sebelum membuat kodenya, buat terlebih dahulu folder template lalu simpan di latihan_template/application/views/. Lalu simpan ketiga file template yang akan kita buat pada folder template tersebut. Berikut ini kode dari masing-masing file tersebut :

index.php

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My Site</title>

  <style type="text/css">
  #header{
    background: black;
    padding: 2px;
  }
  #header ul > li{
    display: inline;
    list-style-type: none;
    padding-right: 10px;
  }
  #header li a{
    color: white;
    text-decoration: none;
    padding: 5px;
  }
  #header li > a:hover{
    background: white;
    color: black;
  }
  #content{
    background: #EBEBEB;
    min-height: 450px;
    padding: 10px;
  }
  #footer{
    background: black;
    padding: 5px;
    color: white;
    text-align: center;
  }
  </style>
</head>
<body>

<div id="header">
  <?php 
  /*
   * Variabel $headernya diambil dari libraries template.php
   * (application/libraries/template.php)
   * */
  echo $headernya; ?>
</div>

<div id="content">
  <?php 
  /*
   * Variabel $contentnya diambil dari libraries template.php
   * (application/libraries/template.php)
   * */
  echo $contentnya; ?>
</div>

<div id="footer">
  <?php 
  /*
   * Variabel $footernya diambil dari libraries template.php
   * (application/libraries/template.php)
   * */
  echo $footernya; ?>
</div>

</body>
</html>

header.php

<ul>
  <li style="color: white;font-size: 25px;font-weight: bold">My Site &raquo;</li>
  <li><a href="<?php echo base_url('index.php/main'); ?>">Home</a></li>
  <li><a href="<?php echo base_url('index.php/main/berita'); ?>">Berita</a></li>
  <li><a href="<?php echo base_url('index.php/main/tentang'); ?>">Tentang Kami</a></li>
</ul>

footer.php

Copyright &copy; My Notes Code

STEP 4 – BUAT TAMPILAN (CONTENT WEBSITE)
Pada tahap ini kita akan membuat content/tampilan untuk websitenya. Pada catatan ini, saya membuat 3 tampilan yaiu home, berita, dan tentang kami. Simpan ketiga file tampilan tersebut di latihan_template.application/views/.Berikut ini kode dari masing-masing tampilan :

home.php

<h3 style="margin: 0;">Halaman Home</h3>
 Welcome to My Site, Enjoy your day 😀

berita.php

<h3 style="margin: 0;">Halaman Berita</h3><br>

<div style="text-align: justify;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
<a href="#">Readmore &raquo;</a>
</div><hr>

<div style="text-align: justify;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
<a href="#">Readmore &raquo;</a>
</div><hr>

<div style="text-align: justify;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
<a href="#">Readmore &raquo;</a>
</div><hr>

tentang.php

<h3 style="margin: 0;">Halaman Tentang Kami</h3>
My Site
Telepon : 022-0123456
Jl.Jend. Gatot Subroto No.123 Bandung

STEP 5 – BUAT LIBRARI / CORE TEMPLATE
Disini saya akan men-share 2 cara. Cara yang pertama yaitu dengan memanfaatkan fitur librari pada Codeigniter. Cara yang kedua yaitu dengan memanfaatkan firtur core pada Codeigniter. Tapi saya lebih merekomendasikan untuk menggunakan Cara 2.

CARA 1 – MENGGUNAKAN LIBRARI
Disini kita akan membuat 1 file librari yang diberi nama template.php. Lalu simpan file tersebut pada folder latihan_template/application/libraries/. Librari tersebut berfungsi sebagai jembatan/penghubung antar controller dengan template websitenya. Berikut ini kodenya :

<?php
class Template{
    protected $_ci;
    
    function __construct(){
        $this->_ci = &get_instance();
    }
    
  function utama($content, $data = NULL){
    /*
     * $data['headernya'] , $data['contentnya'] , $data['footernya']
     * variabel diatas ^ nantinya akan dikirim ke file views/template/index.php
     * */
        $data['headernya'] = $this->_ci->load->view('template/header', $data, TRUE);
        $data['contentnya'] = $this->_ci->load->view($content, $data, TRUE);
        $data['footernya'] = $this->_ci->load->view('template/footer', $data, TRUE);
        
        $this->_ci->load->view('template/index', $data);
    }
}

Saya akan coba sedikit jelaskan mengenai kode diatas.

$data['headernya'] = $this->_ci->load->view('template/header', $data, TRUE);

Kode diatas berfungsi untuk me-load file header.php yang berada di application/views/template/. Lalu menyimpannya pada array $data[] dengan nama index array headernya.

$data['contentnya'] = = $this->_ci->load->view($content, $data, TRUE);

Kode diatas berfungsi untuk me-load file content sesuai dengan yang diminta pada file controllernya. Pada kode diatas, ada variabel $content, variabel ini digunakan untuk mengambil permintaan untuk menampilkan file content dari controller. Lalu menyimpannya pada array $data[] dengan nama index array contennya.

$data['footernya'] = $this->_ci->load->view('template/footer', $data, TRUE);

Kode diatas berfungsi untuk me-load file footer.php yang berada di application/views/template/. lalu menyimpannya pada array $data[] dengan nama index array footernya.

CARA 2 – MENGGUNAKAN CORE

Pada cara yang kedua, silahkan buat sebuah file baru dengan nama MY_Controller.php. Lalu simpan pada folder latihan_template/application/core/. Berikut ini kodenya :

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

class MY_Controller extends CI_Controller{
  function render_page($content, $data = NULL){
    /*
     * $data['headernya'] , $data['contentnya'] , $data['footernya']
     * variabel diatas ^ nantinya akan dikirim ke file views/template/index.php
     * */
        $data['headernya'] = $this->load->view('template/header', $data, TRUE);
        $data['contentnya'] = $this->load->view($content, $data, TRUE);
        $data['footernya'] = $this->load->view('template/footer', $data, TRUE);
        
        $this->load->view('template/index', $data);
    }
}

STEP 6 – BUAT CONTROLLER
Sekarang kita akan membuat file controllernya. Berikut ini kodenya :

CARA 1
Jika pada STEP 5 Anda memilih CARA 1 (Menggunakan Librari). maka kode untuk controllernya seperti berikut ini :

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

class Main extends CI_Controller {
  public function __construct(){
    parent::__construct();
    $this->load->library('template');
  }

  public function index(){
    $this->template->utama('home');
  }

  public function berita(){
    $this->template->utama('berita');
  }

  public function tentang(){
    $this->template->utama('tentang');
  }
}

Lalu simpan file tersebut di latihan_template/application/controllers/ dengan nama main.php. Berikut penjelasan dari kode diatas :

public function __construct(){ .... }

kode diatas berfungsi untuk menjalankan suatu aksi ketika controller main diload.

$this->load->library('template');

kode diatas berfungsi untuk me-load file librari template.php.

$this->template->utama('home');

kode diatas berfungsi untuk me-load file tampilan home.php yang berada di application/views/. Pada kode ini, kita menggunakan librari template untuk me-load templatenya. pada kode ini terdapat kode template->, ini berarti kita memanggil librari template. lalu ada kode utama('home'),  ini berarti kita memanggil function utama($content, $data) pada file librari template.php. karena function utama($content, $data) membutuhkan paramater $content, maka kita isikan nama file tampilan yang ingin kita load untuk dijadikan contentnya. Nah untuk parameter $data, disitu kita gunakan apabila kita ingin mengirimkan data dari controller ke file tampilannya.

$this->template->utama('berita');

kode diatas berfungsi untuk me-load file tampilan berita.php yang berada di application/views/.

$this->template->utama('tentang');

kode diatas berfungsi untuk me-load file tampilan tentang.php yang berada di application/views/.

CARA 2
Jika pada STEP 5 Anda memilih CARA 2 (Menggunakan Core). maka kode untuk controllernya seperti berikut ini :

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

class Main extends MY_Controller {

  public function index(){
    $this->render_page('home');
  }

  public function berita(){
    $this->render_page('berita');
  }

  public function tentang(){
    $this->render_page('tentang');
  }
}

Lalu simpan file tersebut di latihan_template/application/controllers/ dengan nama main.php.

Yang perlu diperhatikan apabila Anda memilih CARA 2, pada kode diatas kita buat controllernya tidak lagi extends CI_Controller. Tapi ubah menjadi extends MY_Controller agar kita bisa mengakses function render_page() yang ada di file MY_Controller.php. Jadi apabila suatu saat Anda ingin menambahkan lagi sebuah controller baru, pastikan untuk mengubah extends CI_Controller nya menjadi extends MY_Controller.

$this->render_page('tentang');

Kode diatas berfungsi untuk memanggil function render_page() yang ada di file MY_Controller.php. function render_page() ini memiliki 2 parameter. Parameter yang pertama yaitu $content, parameter ini diisi dengan file tampilan yang ingin dijadikan sebagai contentnya. Parameter kedua yaitu $data, paramater ini diisi apabila ingin mengirim sebuah datadari controller ke file tampilannya.


STEP 7 – TESTING

Sekarang kita coba websitenya. ketik localhost/latihan_template pada browser. Jangan lupa untuk menjalankan xampp » apache terlebih dahulu. Selamat mencoba.

Source Code
Untuk mengunduh source code nya silahkan klik link berikut : Download.
Bingung cara downloadnya? klik disini untuk melihat caranya.

Sekian untuk catatan kali ini. Bila ada yang ingin ditanyakan, langsung saja tanyakan pada bagian komentar dibawah ini. Terimakasih.


Tutorial Membuat 1 File Template untuk Semua Tampilan dengan Codeigniter, Cara membuat template dinamis dengan Codeigniter, Tutorial membuat template dinamis dengan Codeigniter

1 File Template

(Total : 8,878 viewers, 4 viewers today)
cara-membuat-1-file-template-untuk-semua-tampilan-dengan-codeigniter

ABOUT THE AUTHOR

Interested in android programming, long time focused on web development. Visit My Profile Site at www.rizaldimaulidia.com

POST YOUR COMMENTS

Your email address will not be published. Required fields are marked *

Name *

Email *

Website

40 − = 31

25 Comments

  1. muhrrois

    terimakasih mas, mantap

    • Rizaldi Maulidia Achmad

      Sama-sama om. Senang bisa membantu 😀

  2. apendika

    mantap bro, semoga bermanfaat untuk semuanya.

    • Rizaldi Maulidia Achmad

      Amiin om amiin. Terimakasih 😀

  3. Pak Wahyudi

    saya coba meload konten di view “data karyawan ” melalui fungsi index () pada Controller welcome, bisa muncul tabelnya dengan template defaultnya(display).
    $this->template->load(‘display’, ‘karyawan/list’);

    tetapi saat saya panggil via controler Karyawan, tidak bisa meload templatenya, hanya tampil kontennya saja.

    poin masalahnya dimana ya gan.
    matursuwun

    • Rizaldi Maulidia Achmad

      coba kirimkan source code nya ke saya om. kirim via message di fans pag fb kami. nanti saya cek

  4. Fajar setya

    Sangat membantu mas

    • Rizaldi Maulidia Achmad

      Alhamdulillah, senang bisa membantu om 😀

  5. adi candra

    mantap omm, ijin copas. heheh.
    mkasih

    • Rizaldi Maulidia Achmad

      silahkan om. sama-sama 😀

  6. edwin

    gan gmn cara load data dari database masukin ke view via array gmn caranya klo pake themplate ini ????

    • Rizaldi Maulidia Achmad

      Pada controllernya tinggal tambahkan array tersebut di parameter kedua ketika memanggil templatenya.
      contoh jika memakai cara 1 (pakai librari) :
      public function index(){
      $dataygdikirim = array(‘data1’=>’isidata1′,’data2’=>’isidata2’);
      $this->template->utama(‘home’, $dataygdikirim);
      }
      contoh jika memakai cara 2 (pakai core) :
      public function index(){
      $dataygdikirim = array(‘data1’=>’isidata1′,’data2’=>’isidata2’);
      $this->render_page(‘home’, $dataygdikirim);
      }

      • Athar Jatnika

        gan ini kan udah pake framework yah.. kalo misalnya masih native gmana caranya dan berdasarkan kasus yang sama diatas.

      • Athar Jatnika

        gan ini kan udah pake framework yah.. kalo misalnya masih native gmana caranya dan berdasarkan kasus yang sama diatas.

        • Rizaldi Maulidia Achmad

          Bisa saja om. Dengab memanfaatkan switch case dan parameter pada url. Mungkin kalau om mau nunggu. Saya bisa buatkan tutorialnya. Tapi saya publish di akhir bulan mei.

  7. hanya command

    sangat jelas dan menarik untuk yang baru belajar ci… barakallah

    • Rizaldi Maulidia

      Alhamdulillah kalo bermanfaat bagi om..
      Thanks sudah berkunjug om..
      Jangan bosan kunjungi blog sy..nanti rencana sy mau buat tutorial untuk export ke excelnya

  8. rully

    Gan ane nambahin $this->load->model(‘client’); di controllernya kok gak bisa ya?
    apa caranya pemanggilan modelnya beda kalo menggunakan template?

    • Rizaldi Maulidia

      maksudnya agan ingin nambahin di file librari template.php bukan gan?
      kalo iyah..cara pemanggilannya harus menggunakan _ci setelah $this nya..
      contoh:
      $this->_ci->load->model(‘client’);

  9. Harjito

    wow… sip mas. Dengan sering berbagi Insya Allah ilmunya lebih cepat brrysmbah dan barokah….

NOTE ARCHIVES