Tutorial Codeigniter Part 11, Cara Membuat Template di Codeigniter
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
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
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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<!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> |
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 :
1 2 3 4 5 6 7 |
<footer class="footer"> <div class="container"> <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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?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 :
1 2 3 4 5 |
<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> |
Buat file profil.php didalam folder view, dengan code seperti berikut ini :
1 2 3 4 5 |
<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> |
Buat file about.php didalam folder view, dengan code seperti berikut ini :
1 2 3 4 5 |
<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> |
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
-
Tutorial Singkat Langsung Jago Framework Codeigniter
Rp98,000 Add to cart -
Tutorial Seminggu Jago Framework Codeigniter Dan Bootstrap
Rp90,000 Add to cart -
Tutorial Membangun Sistem Informasi Akademik Sekolah Dengan Codeigniter Dan Ajax
Rp145,000 Add to cart -
Tutorial Membangun Toko Online Responsive Dengan Codeigniter Dan Bootstrap
Rp135,000 Add to cart -
Tutorial Membangun Sistem Informasi Rumah Sakit Dengan Codeigniter MySQL Dan Ajax
Rp145,000 Add to cart -
Kursus Online – Pemrograman Web dan Android – Membuat Aplikasi Kasir
Rp300,000 Add to cart
Artikel ini sangat bermanfaat.
Terima kasih.