Tutorial Codeigniter Part 11, Cara Membuat Template di Codeigniter

January 11, 2020August 7, 2020 Aris Samsudin 1 Comment

Selamat datang di tutorial warung belajar, dalam tutorial kali ini kita akan belajar untuk mengatur tampilan template di codeigniter.

Dalam proses pembuatan aplikasi, pastinya kita membutuhkan tampilan template, dimana pada bagian – bagian tertentu seperti contohnya header, menu, serta bagian footer akan bersifat statis (tidak berubah), sedangkan untuk bagian content akan bersifat dinamis karena akan menyesuaiakan tampilan dari menu yang diakses.

Baik kita disini akan contohkan menggunakan template contoh dari bootstrap, bisa teman teman akses dalam alamat berikut ini :

https://getbootstrap.com/docs/4.0/examples/sticky-footer-navbar/

Untuk pembagian bagian templatenya adalah sebagai berikut :

Secara garis besar template diatas kita akan bagi menjadi 3 bagian ya :

Header
Content
Footer

Untuk bagian header dan footer akan bersifat statis, dan untuk bagian content akan bersifat dinamis dimana akan menyesuaikan dari fitur yang sedang diakses.

Baik untuk langkah – langkahnya adalah sebagai berikut :

Mempersiapkan File codeigniter

disini kita telah mempersiapkan file framework codeigniter, yang telah kita letakkan di dalam direktori web server, karena kita menggunakan xampp, jadi kita letakkan di Drive C:/xampp/htdocs

saya simpan dalam folder dengan nama codeignitertemplate

Setting Bagian Config

Sebelum kita mengatur untuk bagian tampilan template, kita akan setting terlebih dahulu untuk file config, silahkan buka file application/config/config.php

Rubah bagian base_url

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

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

kita set menjadi http://localhost/codeignitertemplate karena kita akan sesuaikan dengan folder dari framework codeigniternya

Lalu buka file dengan nama application/config/autoload.php

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

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

pada bagian autoload helper kita menuliskan helper url, agar dapat mengakses dari url dari aplikasinya.

Membuat Bagian Template

Berikutnya kita akan membuat bagian dari templatenya, silahkan buat folder dengan nama _partials didalam folder application/views

dalam folder _partials ini nanti kita akan simpan bagian dari templatenya, seperti header dan footer, untuk penamaan folder tidak selalu _partials anda bisa memberikan nama lainnya.

Membuat Bagian Header

buat file dengan nama header.php dan simpan pada folder _partials, dan untuk isi codenya adalah sebagai berikut :

<!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="">
    <link rel="icon" href="<?php echo base_url('assets/favicon.ico') ?>">

    <title>Sticky Footer Navbar Template for Bootstrap</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/sticky-footer-navbar/">

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

    <!-- Custom styles for this template -->
    <link href="<?php echo base_url('assets/sticky-footer-navbar.css') ?>" rel="stylesheet">
	
	    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="<?php echo base_url('assets/jquery-3.2.1.slim.min.js') ?>" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="<?php echo base_url('assets/popper.min.js') ?>"></script>
    <script src="<?php echo base_url('assets/bootstrap.min.js') ?>"></script>
  </head>

  <body>

    <header>
      <!-- Fixed navbar -->
      <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <a class="navbar-brand" href="#">Fixed navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="<?php echo base_url(); ?>index.php/page/index">Home<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="<?php echo base_url(); ?>index.php/page/profil">Profil</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="<?php echo base_url(); ?>index.php/page/about">About</a>
            </li>
          </ul>
          <form class="form-inline mt-2 mt-md-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
      </nav>
    </header>

<!doctype html>

<head>

<title>Sticky Footer Navbar Template for Bootstrap</title>

<!-- Bootstrap core JavaScript

================================================== -->

</head>

<body>

<a class="navbar-brand" href="#">Fixed navbar</a>

</button>

<a class="nav-link" href="<?php echo base_url(); ?>index.php/page/index">Home<span class="sr-only">(current)</span></a>

</li>

<a class="nav-link" href="<?php echo base_url(); ?>index.php/page/profil">Profil</a>

</li>

<a class="nav-link" href="<?php echo base_url(); ?>index.php/page/about">About</a>

</li>

</ul>

<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

</form>

</div>

</nav>

</header>

Untuk bagian menu dimulai dari line 40 kita menggunakan helper base_url serta memanggil controller page, disertai dengan function yang akan kita buat di controller page nantinya.

Membuat bagian footer

Berikutnya buat file dengan nama footer.php dengan isi code seperti berikut ini :

<footer class="footer">
      <div class="container">
        <span class="text-muted">Place sticky footer content here.</span>
      </div>
    </footer>
  </body>
</html>

<span class="text-muted">Place sticky footer content here.</span>

</div>

</footer>

</body>

</html>

Sehingga untuk isi dari folder _partials kurang lebih seperti berikut ini :

Mempersiapkan library JS dan CSS

Untuk dapat menampilkan template sesuai dari contoh, anda perlu mempersiapkan untuk library CSS dan JS, silahkan buat folder dengan nama assets didalam direktori project codeigniter.

Berikutnya silahkan download untuk file berikut yang berisi library css dan js untuk keperluan template, untuk download klik disini

setelah download dan extract, berikutnya letakkan file library css dan library js, ke dalam folder assets

Buat Controller

Berikutnya silahkan buat controller, dalam contoh ini saya buat controller dengan nama Page.

untuk isi codenya adalah sebagai berikut :

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

class Page extends CI_Controller {

    public function index()
	{
        $this->load->view('_partials/header');
        $this->load->view('home');
        $this->load->view('_partials/footer');
    }

	public function profil()
	{
        $this->load->view('_partials/header');
        $this->load->view('profil');
        $this->load->view('_partials/footer');
    }

    public function about()
	{
        $this->load->view('_partials/header');
        $this->load->view('about');
        $this->load->view('_partials/footer');
    }
    
}

<?php

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

class Page extends CI_Controller {

public function index()

{

$this->load->view('_partials/header');

$this->load->view('home');

$this->load->view('_partials/footer');

}

public function profil()

{

$this->load->view('_partials/header');

$this->load->view('profil');

$this->load->view('_partials/footer');

}

public function about()

{

$this->load->view('_partials/header');

$this->load->view('about');

$this->load->view('_partials/footer');

}

Keterangan :

kita buat 3 function yaitu :

index
profil
about

dimana masing – masing function menuliskan 3 kali load view, yaitu :

load view header untuk file berada di folder _partials/header.php
load view yang berisi content, nah untuk bagian ini akan berbeda ditiap function, karena nantinya isinya juga dinamis disesuaikan dengan menu yang diakses.
load view footer untuk file berada di folder _partials/footer.php

yang terpenting adalah load view content, setiap anda membuat menu baru, anda harus membuat view baru.

Membuat File View

Buat file home.php didalam folder view, dengan code seperti berikut ini :

<main role="main" class="container">
      <h1 class="mt-5">Home Page</h1>
      <p class="lead">Selamat Datang Pada Halaman Home</p>
      <p>Back to <a href="../sticky-footer/">the default sticky footer</a> minus the navbar.</p>
    </main>

<p class="lead">Selamat Datang Pada Halaman Home</p>

<p>Back to <a href="../sticky-footer/">the default sticky footer</a> minus the navbar.</p>

</main>

Buat file profil.php didalam folder view, dengan code seperti berikut ini :

<main role="main" class="container">
      <h1 class="mt-5">Profil Page</h1>
      <p class="lead">Selamat Datang Pada Halaman Profil</p>
      <p>Back to <a href="../sticky-footer/">the default sticky footer</a> minus the navbar.</p>
    </main>

<h1 class="mt-5">Profil Page</h1>

<p class="lead">Selamat Datang Pada Halaman Profil</p>

<p>Back to <a href="../sticky-footer/">the default sticky footer</a> minus the navbar.</p>

</main>

Buat file about.php didalam folder view, dengan code seperti berikut ini :

<main role="main" class="container">
      <h1 class="mt-5">Profil Page</h1>
      <p class="lead">Selamat Datang Pada Halaman Profil</p>
      <p>Back to <a href="../sticky-footer/">the default sticky footer</a> minus the navbar.</p>
    </main>

<h1 class="mt-5">Profil Page</h1>

<p class="lead">Selamat Datang Pada Halaman Profil</p>

<p>Back to <a href="../sticky-footer/">the default sticky footer</a> minus the navbar.</p>

</main>

Jadi kurang lebih seperti berikut ini :

Keterangan :

Jadi kita buat 3 file view, dengan berbeda tampilan, harapannya nanti ketika kita mengakses halaman yang berbeda maka tampilannya akan juga berbeda.

Testing tampilan template

Berikutnya kita akan coba untuk mengakses tampilan templatenya.

akses alamat : http://localhost/codeignitertemplate/index.php/page

akses alamat : http://localhost/codeignitertemplate/index.php/page/profil

akses alamat : http://localhost/codeignitertemplate/index.php/page/about

Jadi ketika kita mengakses dimenu yang berbeda yang berubah hanyalah tampilan content saja (bagian tengah) untuk bagian header dan footer tidak akan berubah.

Baik sekian dulu teman – teman tutorial kali ini, untuk download dari hasilnya bisa klik disini : Download Source Code

Jika ada yang ingin didiskusikan silahkan di kolom komentar, sekian dulu sampai jumpa di tutorial selanjutnya.

ANDA INGIN SERIUS BELAJAR FRAMEWORK CODEIGNITER ?

Seperti yang anda ketahui bahwa saat ini skill di bidang pemrograman sangatlah dibutuhkan, salah satunya adalah pemograman PHP.
Untuk anda yang ingin serius belajar pemrograman PHP, Khususnya menggunakan Framework PHP Codeigniter, Warung Belajar Memiliki Beberapa Paket Tutorial yang bisa membantu anda dalam belajar menggunakan Framework PHP Codeigniter, dari mulai step – step dasar hingga mampu membuat aplikasi berbasis web dengan menggunakan Framework PHP Codeigniter.

Paket Tutorial ini berisi video tutorial belajar pemrograman berbahasa indonesia, cocok sekali untuk anda yang sedang belajar Framework PHP Codeigniter, bahkan untuk orang awam sekalipun.

Paket Tutorial ini juga dilengkapi dengan study kasus yang akan mempermudah pemahaman anda dalam belajar pemrograman, Mari berinvestasi untuk menambah skill dalam menguasai Framework PHP Codeigniter

Warung Belajar

Tutorial Codeigniter Part 11, Cara Membuat Template di Codeigniter

Mempersiapkan File codeigniter

Setting Bagian Config

Membuat Bagian Template

Membuat Bagian Header

Membuat bagian footer

Mempersiapkan library JS dan CSS

Buat Controller

Membuat File View

Testing tampilan template

ANDA INGIN SERIUS BELAJAR FRAMEWORK CODEIGNITER ?

Tutorial Singkat Langsung Jago Framework Codeigniter

Tutorial Seminggu Jago Framework Codeigniter Dan Bootstrap

Tutorial Membangun Sistem Informasi Akademik Sekolah Dengan Codeigniter Dan Ajax

Tutorial Membangun Toko Online Responsive Dengan Codeigniter Dan Bootstrap

Tutorial Membangun Sistem Informasi Rumah Sakit Dengan Codeigniter MySQL Dan Ajax

Kursus Online – Pemrograman Web dan Android – Membuat Aplikasi Kasir

Related

One thought on “Tutorial Codeigniter Part 11, Cara Membuat Template di Codeigniter”

Leave a Reply Cancel reply

Mempersiapkan File codeigniter

Setting Bagian Config

Membuat Bagian Template

Membuat Bagian Header

Membuat bagian footer

Mempersiapkan library JS dan CSS

Buat Controller

Membuat File View

Testing tampilan template

ANDA INGIN SERIUS BELAJAR FRAMEWORK CODEIGNITER ?

Tutorial Singkat Langsung Jago Framework Codeigniter

Tutorial Seminggu Jago Framework Codeigniter Dan Bootstrap

Tutorial Membangun Sistem Informasi Akademik Sekolah Dengan Codeigniter Dan Ajax

Tutorial Membangun Toko Online Responsive Dengan Codeigniter Dan Bootstrap

Tutorial Membangun Sistem Informasi Rumah Sakit Dengan Codeigniter MySQL Dan Ajax

Kursus Online – Pemrograman Web dan Android – Membuat Aplikasi Kasir

Share this:

Related

You May Also Like

Tutorial Codeigniter Part 3 – Mengenal Konsep Routing di Codeigniter

Tutorial Codeigniter Part 23 – Membuat Fitur Register, Login dan Logout di Codeigniter

Tutorial Codeigniter Part 20 – Cara Menggunakan Query Builder di Codeigniter

One thought on “Tutorial Codeigniter Part 11, Cara Membuat Template di Codeigniter”

Leave a Reply Cancel reply