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="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom fonts for this template -->
<link href="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="css/clean-blog.min.css" rel="stylesheet">

</head>

<body>

<!-- Navigation -->


<!-- Page Header -->
<?=base_url()?>assets/img/home-bg.jpg')">





Clean Blog


A Blog Theme by Start Bootstrap





footer.php

<!-- Footer -->











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

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

</body>
</html>

home.php



<!-- Main Content -->



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 :)