Image Load

Hello world,

Pada pembahasan kali ini kita akan coba membuat halaman baru yaitu halaman yang statis menggunakan framework Codeigniter. Untuk membuat sebuah halaman baru kita membutuhkan sebuah file controller dan view. Controller berfungsi sebagai penghubung antara Model, View, dan resource lainnya yang dibutuhkan untuk memproses request dan logic. View berisi tampilan/halaman/interface yang ditampilkan kepada pengguna/pengunjung yang berisi code HTML CSS dan JS.

Pada contoh kali ini kita akan coba menggunakan template blog dari startbootstrap yang bisa didownload di sini. Silakan didownload dulu. Kemudian kita ambil folder css, js, vendor dan img lalu kita buat dan masukkan ke folder bernama assets. Hasilnya kira-kira menjadi seperti berikut.


Tahap selanjutnya kita buat sebuah file pada folder application/controllers/ dan kita beri nama Blog.php. Kemudian isi dengan code berikut.

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

class Blog extends CI_Controller {

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

Dilihat dari controller di atas kita akan membagi file view dari template kita tadi menjadi 3 bagian yaitu header, home yang merupakan konten dan footer.

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>Clean Blog - Start Bootstrap Theme</title>

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

<!-- Custom fonts for this template -->
<link href="<?=base_url()?>assets/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>

<!-- Custom styles for this template -->
<link href="<?=base_url()?>assets/css/clean-blog.min.css" rel="stylesheet">

</head>

<body>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="post.html">Sample Post</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>

<!-- Page Header -->
<header class="masthead" style="background-image: url('<?=base_url()?>assets/img/home-bg.jpg')">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="site-heading">
<h1>Clean Blog</h1>
<span class="subheading">A Blog Theme by Start Bootstrap</span>
</div>
</div>
</div>
</div>
</header>

footer.php

<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<ul class="list-inline text-center">
<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<p class="copyright text-muted">Copyright &copy; Your Website 2019</p>
</div>
</div>
</div>
</footer>

<!-- Bootstrap core JavaScript -->
<script src="<?=base_url()?>assets/vendor/jquery/jquery.min.js"></script>
<script src="<?=base_url()?>assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- Custom scripts for this template -->
<script src="<?=base_url()?>assets/js/clean-blog.min.js"></script>

</body>
</html>

home.php


<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Man must explore, and this is exploration at its greatest
</h2>
<h3 class="post-subtitle">
Problems look mighty small from 150 miles up
</h3>
</a>
<p class="post-meta">Posted by
<a href="#">Start Bootstrap</a>
on September 24, 2019</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
I believe every human has a finite number of heartbeats. I don't intend to waste any of mine.
</h2>
</a>
<p class="post-meta">Posted by
<a href="#">Start Bootstrap</a>
on September 18, 2019</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Science has not yet mastered prophecy
</h2>
<h3 class="post-subtitle">
We predict too much for the next year and yet far too little for the next ten.
</h3>
</a>
<p class="post-meta">Posted by
<a href="#">Start Bootstrap</a>
on August 24, 2019</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Failure is not an option
</h2>
<h3 class="post-subtitle">
Many say exploration is part of our destiny, but it’s actually our duty to future generations.
</h3>
</a>
<p class="post-meta">Posted by
<a href="#">Start Bootstrap</a>
on July 8, 2019</p>
</div>
<hr>
<!-- Pager -->
<div class="clearfix">
<a class="btn btn-primary float-right" href="#">Older Posts &rarr;</a>
</div>
</div>
</div>
</div>

<hr>

Pada tanda kuning di atas kita harus mengubah url pada setiap asset kita dengan <?=base_url()?>assets/ dimana itu adalah lokasi project kita. Sebagai catatan juga kita harus menambahkan helper URL pada controller agar dapat membaca base_url dan url lainnya seperti berikut.

$this->load->helper('url);

Hasilnya menjadi seperti berikut:

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

class Blog extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->helper('url');
}

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


Atau kita isi helper pada file application/config/autoload.php (baris 92) dengan helper url seperti berikut.

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

Nah sampai di sini kita udah bisa akses dengan cara membuka halaman http://localhost/codeigniter-modul/blog, hasilnya kira-kira seperti berikut:


Selamat mencoba dan akan ada lanjutan untuk part 2 :)