Postingan ini akan melanjutkan tutorial sebelumnya (part 2), kali ini kita akan membahas tentang membuat layout di CodeIgniter. Sekedar mengingatkan kembali, template HTML yang digunakan pada tutorial CI ini menggunakan template yang pernah dibahas di postingan sebelumnya tentang membuat website menggunakan Bootstrap.
Di part sebelumnya, kita sudah membuat 2 file dengan nama home.php, 1 file berada di folder views dan satunya berada di controllers, sebelum melanjutkan kebawah, saya ingin mengganti nama home.php yang ada di folder bontrollers (pergantian nama ini dilakukan supaya tidak bingung saja, kalo gak mau ganti jgua gak apa-apa). Saya mengganti nama dari home.php menjadi contoh.php.
Selain itu, saya juga akan mengganti nama class yang ada didalam file contoh.php ini. Sebelumnya nama class nya adalah home, saya akan ganti juga menjadi contoh (supaya gak bingung juga). Maka jadi seperti ini:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class contoh extends CI_Controller {
public function index()
{
$this->load->view('home);
}
}
?>
Karena kita sudah menggantinya menjadi contoh, maka di routes.php nya juga harus diganti. Silahkan buka file routes.php yang berada di dalam folder config lalu ganti default_controller nya menjadi contoh:
Baca Juga:
$route['default_controller'] = 'contoh'; $route['404_override'] = ''; $route['translate_uri_dashes'] = FALSE;
Itulah perubahan yang saya lakukan, jika tidak ingin merubahnya tidak masalah asal nanti kedepannya harus sesuaikan aja nama-nama nya. Sekarang waktunya membuat layout !
Membuat Layout CodeIgniter
Langkah awal dalam membuat layout adalah membuat folder terlebih dahulu, yang mana folder ini akan digunakan sebagai wadah layout. Silahkan buat folder baru didalam folder views dengan nama misalnya “layout” dan buat 1 lagi dengan nama misalnya “laman“. Kemudian buatlah 3 file baru didalam folder layout dengan nama head.php (untuk menyimpan code yang ada di tag <head>), nav.php (untuk menyimpan menu). dan footer.php (untuk menyimpan kode footer). Sekarang buatlah file baru didalam folder laman dengan nama misalnya detail.php, detail.php ini akan kita gunakan untuk menampilkan halaman detail pos (pos tunggal) seperti postingan sebuah blog.
Catatan: Nama-nama folder dan file tersebut tidak perlu sama, bisa dibuat dengan nama yang berbeda. Asal nanti sesuaikan aja dalam pemanggilannya.
Selain itu, supaya terlihat lebih rapih lagi, kita pindahkan file home.php (yang ada didalam folder views) ke dalam folder laman (ini akan memudahkan kita juga dalam memanggil sistem layout nantinya). Maka sekarang strukturnya akan terlihat seperti ini:
Sekarang, silahkan buka file home.php yang didalamnya sudah kita masukkan code HTML untuk halaman beranda (homepage) pada part 2 kemarin. Begini isinya:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Tutorial Rio Bermano</title>
<!-- Bootstrap -->
<link href="<?php echo base_url(); ?>assets/css/bootstrap.min.css" rel="stylesheet">
<link href="<?php echo base_url(); ?>assets/css/style.css" rel="stylesheet">
<link href="<?php echo base_url(); ?>assets/media/image/fav.png" rel="shortcut icon">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Navigasi →</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Rio Bermano</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#">Blog</a></li>
<li><a href="pages/portfolio.html">Portfolio</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Kategori <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Artikel</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Tutorial</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Terlaris</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Cari...">
</div>
<button type="submit" class="btn btn-default">Cari</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Login</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Daftar <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Penulis Blog</a></li>
<li><a href="#">Pekerjaan</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Kustom</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid atas">
<div class="container">
<div class="row">
<div class="col-md-6 text-atas">
<h1>Contoh Judul</h1>
<p>rem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover. rem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover</p>
<p><a href="https://posciety.com" target="_blank" class="btn btn-default btn-lg">Tombol Nih</a></p>
</div>
<div class="col-md-6">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/stsQT6Z8Fzw"></iframe>
</div>
</div>
</div>
</div>
</div><!-- akhir class atas -->
<div class="container">
<div class="row">
<div class="col-sm-12 judul text-center">
<h1><span class="glyphicon glyphicon-user" aria-hidden="true"></span> About Me</h1>
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="<?php echo base_url(); ?>assets/media/image/foto/foto1.jpg" class="img-responsive">
</div>
<div class="col-md-8">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="col-sm-12 judul text-center">
<h1>My Skills</h1>
</div>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<h1><span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span></h1>
<h2>Skill 1</h2>
<p>90%</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<h1><span class="glyphicon glyphicon-cloud" aria-hidden="true"></span></h1>
<h2>Skill 2</h2>
<p>85%</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<h1><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></h1>
<h2>Skill 3</h2>
<p>80%</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<h1><span class="glyphicon glyphicon-star" aria-hidden="true"></span></h1>
<h2>Skill 4</h2>
<p>75%</p>
</div>
</div>
</div>
</div><!-- akhir class row skill pertama-->
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<h1><span class="glyphicon glyphicon-film" aria-hidden="true"></span></h1>
<h2>Skill 1</h2>
<p>90%</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<h1><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></h1>
<h2>Skill 2</h2>
<p>85%</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<h1><span class="glyphicon glyphicon-off" aria-hidden="true"></span></h1>
<h2>Skill 3</h2>
<p>80%</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<h1><span class="glyphicon glyphicon-cog" aria-hidden="true"></span></h1>
<h2>Skill 4</h2>
<p>75%</p>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid myprojects">
<div class="container">
<div class="col-sm-12 judul-myprojects text-center">
<h1>My Projects</h1>
</div>
<div class="row">
<div class="col-md-4 item-project">
<a href="portfolio/portfolio1.html"><img src="<?php echo base_url(); ?>assets/media/image/test1.jpg" class="img-responsive"></a>
</div>
<div class="col-md-4 item-project">
<a href=""><img src="<?php echo base_url(); ?>assets/media/image/test2.jpg" class="img-responsive"></a>
</div>
<div class="col-md-4 item-project">
<a href=""><img src="<?php echo base_url(); ?>assets/media/image/test3.jpg" class="img-responsive"></a>
</div>
</div>
<div class="row">
<div class="col-md-4 item-project">
<a href=""><img src="<?php echo base_url(); ?>assets/media/image/test2.jpg" class="img-responsive"></a>
</div>
<div class="col-md-4 item-project">
<a href=""><img src="<?php echo base_url(); ?>assets/media/image/test3.jpg" class="img-responsive"></a>
</div>
<div class="col-md-4 item-project">
<a href=""><img src="<?php echo base_url(); ?>assets/media/image/test1.jpg" class="img-responsive"></a>
</div>
</div>
<div class="row">
<div class="col-md-4 item-project">
<a href=""><img src="<?php echo base_url(); ?>assets/media/image/test3.jpg" class="img-responsive"></a>
</div>
<div class="col-md-4 item-project">
<a href=""><img src="<?php echo base_url(); ?>assets/media/image/test1.jpg" class="img-responsive"></a>
</div>
<div class="col-md-4 item-project">
<a href=""><img src="<?php echo base_url(); ?>assets/media/image/test2.jpg" class="img-responsive"></a>
</div>
</div>
<div class="row">
<div class="col-sm-12 text-center">
<button class="btn btn-lg btn-default tombol-projects"><a href="pages/portfolio.html">Lihat Semua Projects</a></button>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="col-sm-12 judul-our-services">
<h2 class="text-center">Our Services</h2>
</div>
<div class="col-md-6 col-sm-12 service-kiri">
<div class="item-service">
<ul>
<li>
<div class="gambar-item-service">
<img src="<?php echo base_url(); ?>assets/media/image/service/service1.png">
</div>
<div class="deskripsi-item-service">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</li>
<li>
<div class="gambar-item-service">
<img src="<?php echo base_url(); ?>assets/media/image/service/service1.png">
</div>
<div class="deskripsi-item-service">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</li>
<li>
<div class="gambar-item-service">
<img src="<?php echo base_url(); ?>assets/media/image/service/service1.png">
</div>
<div class="deskripsi-item-service">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</li>
<li>
<div class="gambar-item-service">
<img src="<?php echo base_url(); ?>assets/media/image/service/service1.png">
</div>
<div class="deskripsi-item-service">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</li>
<li>
<div class="gambar-item-service">
<img src="<?php echo base_url(); ?>assets/media/image/service/service1.png">
</div>
<div class="deskripsi-item-service">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</li>
</ul>
</div>
</div>
<div class="col-md-6 col-sm-12 service-kanan">
<div class="item-service">
<ul>
<li>
<div class="gambar-item-service">
<img src="<?php echo base_url(); ?>assets/media/image/service/service1.png">
</div>
<div class="deskripsi-item-service">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</li>
<li>
<div class="gambar-item-service">
<img src="<?php echo base_url(); ?>assets/media/image/service/service1.png">
</div>
<div class="deskripsi-item-service">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</li>
<li>
<div class="gambar-item-service">
<img src="<?php echo base_url(); ?>assets/media/image/service/service1.png">
</div>
<div class="deskripsi-item-service">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</li>
<li>
<div class="gambar-item-service">
<img src="<?php echo base_url(); ?>assets/media/image/service/service1.png">
</div>
<div class="deskripsi-item-service">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</li>
<li>
<div class="gambar-item-service">
<img src="<?php echo base_url(); ?>assets/media/image/service/service1.png">
</div>
<div class="deskripsi-item-service">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</li>
</ul>
</div>
</div>
</div> <!-- AKHIR CONTAINER FLUID OUR SERVICE -->
<div class="container testimonial">
<div class="row">
<div class="col-xs-12">
<h2 class="text-center">Testimonial</h2>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="<?php echo base_url(); ?>assets/media/image/bg/bg-testimonial.jpg">
<div class="carousel-caption">
<h1 class="hidden-xs"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></h1>
<h4>Nama Pengguna 1</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p>
</div>
</div><!-- AKHIR CLASS ITEM -->
<div class="item">
<img src="<?php echo base_url(); ?>assets/media/image/bg/bg-testimonial.jpg">
<div class="carousel-caption">
<h1 class="hidden-xs"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></h1>
<h4>Nama Pengguna 2</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p>
</div>
</div><!-- AKHIR CLASS ITEM -->
<div class="item">
<img src="<?php echo base_url(); ?>assets/media/image/bg/bg-testimonial.jpg">
<div class="carousel-caption">
<h1 class="hidden-xs"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></h1>
<h4>Nama Pengguna 3</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p>
</div>
</div><!-- AKHIR CLASS ITEM -->
<div class="item">
<img src="<?php echo base_url(); ?>assets/media/image/bg/bg-testimonial.jpg">
<div class="carousel-caption">
<h1 class="hidden-xs"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></h1>
<h4>Nama Pengguna 4</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p>
</div>
</div><!-- AKHIR CLASS ITEM -->
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Sebelumnya</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Selanjutnya</span>
</a>
</div>
</div>
</div>
</div>
<!-- akhir .testimonial -->
<!-- Our Partners MD -->
<div class="container our-partners hidden-xs hidden-sm">
<div class="col-xs-12 judul-our-services">
<h2 class="text-center">Our Partners</h2>
</div>
<div class="row">
<div class="col-md-1">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/1.jpg" class="img-responsive">
</div>
<div class="col-md-1">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/2.jpg" class="img-responsive">
</div>
<div class="col-md-1">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/3.jpg" class="img-responsive">
</div>
<div class="col-md-1">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/4.jpg" class="img-responsive">
</div>
<div class="col-md-1">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/5.jpg" class="img-responsive">
</div>
<div class="col-md-1">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/6.jpg" class="img-responsive">
</div>
<div class="col-md-1">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/7.jpg" class="img-responsive">
</div>
<div class="col-md-1">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/8.jpg" class="img-responsive">
</div>
<div class="col-md-1">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/1.jpg" class="img-responsive">
</div>
<div class="col-md-1">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/2.jpg" class="img-responsive">
</div>
<div class="col-md-1">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/3.jpg" class="img-responsive">
</div>
<div class="col-md-1">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/4.jpg" class="img-responsive">
</div>
</div>
</div>
<!-- akhir .Our Partners MD -->
<!-- Our Partners XS -->
<div class="container our-partners visible-xs">
<div class="col-xs-12 judul-our-services">
<h2 class="text-center">Our Partners</h2>
</div>
<div class="row">
<div class="col-xs-2">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/1.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/2.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/3.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/4.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/5.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/6.jpg" class="img-responsive">
</div>
</div>
</div>
<!-- akhir .Our Partners XS -->
<!-- Our Partners SM -->
<div class="container our-partners visible-sm">
<div class="col-xs-12 judul-our-services">
<h2 class="text-center">Our Partners</h2>
</div>
<div class="row">
<div class="col-xs-2">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/1.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/2.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/3.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/4.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/5.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/6.jpg" class="img-responsive">
</div>
</div>
</div>
<!-- akhir .Our Partners SM -->
<div class="container-fluid">
<div class="row copyright text-center">
<p>All Rights Reserved 2016 | <a href="">Tutorial Rio Bermano</a></p>
</div>
</div>
<script src="<?php echo base_url(); ?>assets/js/jqueryo.js"></script>
<script src="<?php echo base_url(); ?>assets/js/bootstrap.min.js"></script>
</body>
</html>
Sekarang mulai membagi kode ke dalam file nya masing-masing yang tadi sudah kita buat di dalam folder layout, potong / cut kode dari mulai paling atas (doctype html) sampai <body>. Pindahkan ke dalam file head.php, maka isi dari head.php sekarang adalah seperti ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Tutorial Rio Bermano</title>
<!-- Bootstrap -->
<link href="<?php echo base_url(); ?>assets/css/bootstrap.min.css" rel="stylesheet">
<link href="<?php echo base_url(); ?>assets/css/style.css" rel="stylesheet">
<link href="<?php echo base_url(); ?>assets/media/image/fav.png" rel="shortcut icon">
</head>
<body>
Selanjutnya cut / potong dari mulai <nav> sampai penutup </nav>, pindahkan ke dalam file nav.php tadi. Maka sekarang isi dari nav.php seperti ini:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Navigasi →</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Rio Bermano</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#">Blog</a></li>
<li><a href="pages/portfolio.html">Portfolio</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Kategori <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Artikel</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Tutorial</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Terlaris</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Cari...">
</div>
<button type="submit" class="btn btn-default">Cari</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Login</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Daftar <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Penulis Blog</a></li>
<li><a href="#">Pekerjaan</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Kustom</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Selanjutnya bagian footer, potong kode di bagian footer mulai dari copyright sampai penutup </html>. Pindahkan ke dalam file footer.php, jadi seperti inilah isi dari file footer.php:
<div class="container-fluid">
<div class="row copyright text-center">
<p>All Rights Reserved 2016 | <a href="">Tutorial Rio Bermano</a></p>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="<?php echo base_url(); ?>assets/js/jqueryo.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="<?php echo base_url(); ?>assets/js/bootstrap.min.js"></script>
</body>
</html>
Nah, setelah membagi beberapa potongan kode ke file nya masing-masing, maka sekarang di file home.php tersisa kontennya saja. Jadi seperti ini:
<div class="container-fluid atas">
<div class="container">
<div class="row">
<div class="col-md-6 text-atas">
<h1>Contoh Judul</h1>
<p>rem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover. rem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover</p>
<p><a href="https://posciety.com" target="_blank" class="btn btn-default btn-lg">Tombol Nih</a></p>
</div>
<div class="col-md-6">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/stsQT6Z8Fzw"></iframe>
</div>
</div>
</div>
</div>
</div><!-- akhir class atas -->
<div class="container">
<div class="row">
<div class="col-sm-12 judul text-center">
<h1><span class="glyphicon glyphicon-user" aria-hidden="true"></span> About Me</h1>
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="<?php echo base_url(); ?>assets/media/image/foto/foto1.jpg" class="img-responsive">
</div>
<div class="col-md-8">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="col-sm-12 judul text-center">
<h1>My Skills</h1>
</div>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<h1><span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span></h1>
<h2>Skill 1</h2>
<p>90%</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<h1><span class="glyphicon glyphicon-cloud" aria-hidden="true"></span></h1>
<h2>Skill 2</h2>
<p>85%</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<h1><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></h1>
<h2>Skill 3</h2>
<p>80%</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<h1><span class="glyphicon glyphicon-star" aria-hidden="true"></span></h1>
<h2>Skill 4</h2>
<p>75%</p>
</div>
</div>
</div>
</div><!-- akhir class row skill pertama-->
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<h1><span class="glyphicon glyphicon-film" aria-hidden="true"></span></h1>
<h2>Skill 1</h2>
<p>90%</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<h1><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></h1>
<h2>Skill 2</h2>
<p>85%</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<h1><span class="glyphicon glyphicon-off" aria-hidden="true"></span></h1>
<h2>Skill 3</h2>
<p>80%</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<h1><span class="glyphicon glyphicon-cog" aria-hidden="true"></span></h1>
<h2>Skill 4</h2>
<p>75%</p>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid myprojects">
<div class="container">
<div class="col-sm-12 judul-myprojects text-center">
<h1>My Projects</h1>
</div>
<div class="row">
<div class="col-md-4 item-project">
<a href="portfolio/portfolio1.html"><img src="<?php echo base_url(); ?>assets/media/image/test1.jpg" class="img-responsive"></a>
</div>
<div class="col-md-4 item-project">
<a href=""><img src="<?php echo base_url(); ?>assets/media/image/test2.jpg" class="img-responsive"></a>
</div>
<div class="col-md-4 item-project">
<a href=""><img src="<?php echo base_url(); ?>assets/media/image/test3.jpg" class="img-responsive"></a>
</div>
</div>
<div class="row">
<div class="col-md-4 item-project">
<a href=""><img src="<?php echo base_url(); ?>assets/media/image/test2.jpg" class="img-responsive"></a>
</div>
<div class="col-md-4 item-project">
<a href=""><img src="<?php echo base_url(); ?>assets/media/image/test3.jpg" class="img-responsive"></a>
</div>
<div class="col-md-4 item-project">
<a href=""><img src="<?php echo base_url(); ?>assets/media/image/test1.jpg" class="img-responsive"></a>
</div>
</div>
<div class="row">
<div class="col-md-4 item-project">
<a href=""><img src="<?php echo base_url(); ?>assets/media/image/test3.jpg" class="img-responsive"></a>
</div>
<div class="col-md-4 item-project">
<a href=""><img src="<?php echo base_url(); ?>assets/media/image/test1.jpg" class="img-responsive"></a>
</div>
<div class="col-md-4 item-project">
<a href=""><img src="<?php echo base_url(); ?>assets/media/image/test2.jpg" class="img-responsive"></a>
</div>
</div>
<div class="row">
<div class="col-sm-12 text-center">
<button class="btn btn-lg btn-default tombol-projects"><a href="pages/portfolio.html">Lihat Semua Projects</a></button>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="col-sm-12 judul-our-services">
<h2 class="text-center">Our Services</h2>
</div>
<div class="col-md-6 col-sm-12 service-kiri">
<div class="item-service">
<ul>
<li>
<div class="gambar-item-service">
<img src="<?php echo base_url(); ?>assets/media/image/service/service1.png">
</div>
<div class="deskripsi-item-service">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</li>
<li>
<div class="gambar-item-service">
<img src="<?php echo base_url(); ?>assets/media/image/service/service1.png">
</div>
<div class="deskripsi-item-service">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</li>
<li>
<div class="gambar-item-service">
<img src="<?php echo base_url(); ?>assets/media/image/service/service1.png">
</div>
<div class="deskripsi-item-service">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</li>
<li>
<div class="gambar-item-service">
<img src="<?php echo base_url(); ?>assets/media/image/service/service1.png">
</div>
<div class="deskripsi-item-service">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</li>
<li>
<div class="gambar-item-service">
<img src="<?php echo base_url(); ?>assets/media/image/service/service1.png">
</div>
<div class="deskripsi-item-service">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</li>
</ul>
</div>
</div>
<div class="col-md-6 col-sm-12 service-kanan">
<div class="item-service">
<ul>
<li>
<div class="gambar-item-service">
<img src="<?php echo base_url(); ?>assets/media/image/service/service1.png">
</div>
<div class="deskripsi-item-service">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</li>
<li>
<div class="gambar-item-service">
<img src="<?php echo base_url(); ?>assets/media/image/service/service1.png">
</div>
<div class="deskripsi-item-service">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</li>
<li>
<div class="gambar-item-service">
<img src="<?php echo base_url(); ?>assets/media/image/service/service1.png">
</div>
<div class="deskripsi-item-service">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</li>
<li>
<div class="gambar-item-service">
<img src="<?php echo base_url(); ?>assets/media/image/service/service1.png">
</div>
<div class="deskripsi-item-service">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</li>
<li>
<div class="gambar-item-service">
<img src="<?php echo base_url(); ?>assets/media/image/service/service1.png">
</div>
<div class="deskripsi-item-service">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</li>
</ul>
</div>
</div>
</div> <!-- AKHIR CONTAINER FLUID OUR SERVICE -->
<div class="container testimonial">
<div class="row">
<div class="col-xs-12">
<h2 class="text-center">Testimonial</h2>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="<?php echo base_url(); ?>assets/media/image/bg/bg-testimonial.jpg">
<div class="carousel-caption">
<h1 class="hidden-xs"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></h1>
<h4>Nama Pengguna 1</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p>
</div>
</div><!-- AKHIR CLASS ITEM -->
<div class="item">
<img src="<?php echo base_url(); ?>assets/media/image/bg/bg-testimonial.jpg">
<div class="carousel-caption">
<h1 class="hidden-xs"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></h1>
<h4>Nama Pengguna 2</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p>
</div>
</div><!-- AKHIR CLASS ITEM -->
<div class="item">
<img src="<?php echo base_url(); ?>assets/media/image/bg/bg-testimonial.jpg">
<div class="carousel-caption">
<h1 class="hidden-xs"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></h1>
<h4>Nama Pengguna 3</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p>
</div>
</div><!-- AKHIR CLASS ITEM -->
<div class="item">
<img src="<?php echo base_url(); ?>assets/media/image/bg/bg-testimonial.jpg">
<div class="carousel-caption">
<h1 class="hidden-xs"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></h1>
<h4>Nama Pengguna 4</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p>
</div>
</div><!-- AKHIR CLASS ITEM -->
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Sebelumnya</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Selanjutnya</span>
</a>
</div>
</div>
</div>
</div>
<!-- akhir .testimonial -->
<!-- Our Partners MD -->
<div class="container our-partners hidden-xs hidden-sm">
<div class="col-xs-12 judul-our-services">
<h2 class="text-center">Our Partners</h2>
</div>
<div class="row">
<div class="col-md-1">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/1.jpg" class="img-responsive">
</div>
<div class="col-md-1">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/2.jpg" class="img-responsive">
</div>
<div class="col-md-1">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/3.jpg" class="img-responsive">
</div>
<div class="col-md-1">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/4.jpg" class="img-responsive">
</div>
<div class="col-md-1">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/5.jpg" class="img-responsive">
</div>
<div class="col-md-1">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/6.jpg" class="img-responsive">
</div>
<div class="col-md-1">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/7.jpg" class="img-responsive">
</div>
<div class="col-md-1">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/8.jpg" class="img-responsive">
</div>
<div class="col-md-1">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/1.jpg" class="img-responsive">
</div>
<div class="col-md-1">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/2.jpg" class="img-responsive">
</div>
<div class="col-md-1">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/3.jpg" class="img-responsive">
</div>
<div class="col-md-1">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/4.jpg" class="img-responsive">
</div>
</div>
</div>
<!-- akhir .Our Partners MD -->
<!-- Our Partners XS -->
<div class="container our-partners visible-xs">
<div class="col-xs-12 judul-our-services">
<h2 class="text-center">Our Partners</h2>
</div>
<div class="row">
<div class="col-xs-2">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/1.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/2.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/3.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/4.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/5.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/6.jpg" class="img-responsive">
</div>
</div>
</div>
<!-- akhir .Our Partners XS -->
<!-- Our Partners SM -->
<div class="container our-partners visible-sm">
<div class="col-xs-12 judul-our-services">
<h2 class="text-center">Our Partners</h2>
</div>
<div class="row">
<div class="col-xs-2">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/1.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/2.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/3.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/4.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/5.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="<?php echo base_url(); ?>assets/media/image/logo-partners/6.jpg" class="img-responsive">
</div>
</div>
</div>
Tanpa ada isi head, navigasi, dan footer, gak perlu khawatir. Mungkin sekarang ketika di reload halamannya akan terlihat berantakan, itu wajar karena kita sudah hapus beberapa potongan kode di dalam home.php. Biarkan dulu seperti itu sementara, sekarang silahkan buat file baru didalam folder layout dengan nama misalnya master.php. Ini adalah master layout yang akan kita tetapkan untuk semua halaman nantinya.
Didalam master.php, kita panggil semua kode yang tadi dipotong-potong termasuk konten home nya, buatlah kode berikut didalam master.php:
<?php $this->load->view('layout/head'); ?>
<?php $this->load->view('layout/nav'); ?>
<?php $this->load->view('laman/' . $tampilan); ?>
<?php $this->load->view('layout/footer'); ?>
Silahkan baca dengan teliti, pasti paham apa maksud dari kode tersebut. Ya, kita memanggil masing-masing file dan dijadikan satu tapi dalam struktur yang berbeda. Lalu apa itu $tampilan ? $tampilan adalah value dari sebuah sistem dalam memanggil isi konten, sistem ini kita buat di controller. Sekarang pasti halaman menjadi error, makanya sekarang kita harus atur dulu sistemnya.
Buka contoh.php yang ada di dalam folder controller, pastikan isi didalamnya seperti ini:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class contoh extends CI_Controller {
public $data = array('tampilan' => 'Maaf, Data Tidak Ditemukan');
public function index()
{
$this->data['tampilan'] = 'home';
$this->load->view('layout/master', $this->data);
}
public function detail()
{
$this->data['tampilan'] = 'detail';
$this->load->view('layout/master', $this->data);
}
}
Sekarang didalam contoh.php sudah terdapat sistem layouting, silahkan diikuti.
array memiliki value tampilan, yang mana tampilan ini di tampilkan dibelakang dari layout/master, jadi ketika mendapati file home maka akan memanggil file home.php (views/laman) di struktur master.php, begitu juga ketika mendapati detail maka akan memanggil file detail.php (views/laman) didalam struktur master.php tadi.
Silahkan simpan dan lihat hasilnya di url project localhost/tutorialcirio atau di localhost/tutorialcirio/index.php/contoh (untuk beranda) dan localhost/tutorialcirio/index.php/contoh/detail (untuk halaman detail). Saat ini, ketika mengakses url halaman detail, pasti masih kosong atau ada error, memang kita belum isi apa-apa didalam detail.php.
Sekarang saatnya mengisi detail.php, siapkan kode HTML untuk halaman detail, saya pernah membuat halaman detail di tutorial membuat website menggunakan Bootstrap dan bentuknya seperti ini:
Kalo pernah mengikuti tutorial itu pasti sekarang sudah punya kode nya, atau kalo gak punya silahkan gunakan kode HTML yang ada aja. Salin kode halaman ini dan tempelkan di file detail.php.
Catatan: Salin hanya kode kontennya saja, karena head, navigasi, dan footer sudah tersedia tadi di dalam folder layout.
Simpan dan lihat hasilnya ! Selesai, sekarang kita sudah berhasil membuat layout di CodeIgniter. Ketika terhubung dengan database, tinggal di isi aja dengan data yang ada di database.
Masih bingung ? Lihat : Video tutorial cara membuat template CodeIgniter.
Selamat mencoba !