Setelah melakukan konfigurasi pertama codeigniter maka kita perlu membuat sebuah layout codeigniter, layout codeigniter ini nantinya berfungsi sebagai header dan footer.
Pada saat pertama kali kita meng-install codeigniter maka yang akan muncul di halaman utama adalah halaman Welcome to Codeigniter. Halaman ini perlu kita ubah atau hapus, kalau penulis membuat file baru tanpa menghapus file Welcome ini, akan tetapi apabila sudah masuk ke tahap production maka perlu menghapus file Welcome.
Maksud dari header dan footer adalah sebagai alat bantu penulisan kode html yang perlu kita siapkan sehingga kita tidak perlu menulis kode yang sama berulang-ulang pada halaman yang berbeda, kita hanya perlu memanggilkannya saja.
Sebagai contoh halaman html biasanya di awali dengan <html> dan di akhiri dengan </html>, bagaimana mungkin kita menulis tag tersebut berulang kali di halaman yang berbeda-beda? Tentunya akan menghambat proses coding kita, berikut ini gambaran layout sederhana didalam tutorial ini.
Membuat Bagian Header Layout Codeigniter
Pertama kita perlu membuat halaman header yang berisi informasi-informasi penting pada website, biasanya di header ini juga digunakan untuk penanganan meta tag yang bertujuan meningkatkan seo di google.
Buatlah folder baru di didalam folder /application/views dengan nama layouts, lalu didalam folder layouts tersebut buatlah sebuah file dengan nama header.php setelah itu masukan kode dibawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial CRUD Codeigniter</title>
<style type="text/css">
body {
width: 50%;
margin: 0 auto;
}
/* Judul Utama */
h1.title {
text-align: center;
}
/* Judul Halaman */
.header {
position: relative;
margin-bottom: 20px;
}
.header:before,
.header:after {
display: table;
content: '';
}
.header:after {
clear: both;
}
.header .title {
float: left;
}
.header .title h3 {
padding: 0;
margin: 0;
}
.header .action {
float: right;
}
/* Tombol */
.btn {
display: inline-block;
padding: 2px 5px;
margin-bottom: 0;
font-size: 14px;
color: #333;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-color: #ffffff;
-webkit-border-radius: 3px;
-webkit-border-radius: 3px;
-webkit-border-radius: 3px;
background-image: none !important;
border: none;
text-shadow: none;
box-shadow: none;
transition: all 0.12s linear 0s !important;
font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
text-decoration: none;
}
.btn-default {
color: #333;
background-color: #fff;
border: 1px solid #ccc;
}
.btn-danger {
color: #fff;
background-color: #d9534f;
border: 1px solid #d43f3a;
}
.btn-default, .btn-danger {
text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.075);
}
/* Alert */
.alert {
border-width: 1px;
border-color: #555555;
border-style: solid;
padding: 10px 15px;
margin-bottom: 15px;
border-radius: 3px;
}
.alert.alert-danger {
color: #721c24;
background-color: #f8d7da;
border-color: #f5c6cb;
}
.alert.alert-success {
color: #155724;
background-color: #d4edda;
border-color: #c3e6cb;
}
/* Forms */
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 5px;
}
input[type="text"],
input[type="date"],
input[type="number"] {
box-sizing : border-box;
width: 100%;
border: 1px solid #cccccc;
padding: 10px;
border-radius: 3px;
display: block;
}
/* Table */
table {
width: 100%;
border-spacing: 0;
}
table tr th,
table tr td {
padding: 5px;
}
table thead {
background-color: #333333;
}
table thead tr th {
color: #ffffff;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
text-align: left;
}
table thead tr th:first-child {
border-left: 1px solid #000000
}
table tbody tr td {
border-bottom: 1px solid #555555;
border-right: 1px solid #555555;
}
table tbody tr td:first-child {
border-left: 1px solid #555555;
}
footer {
margin-top: 20px;
color: #999999;
text-align: center;
}
</style>
</head>
<body>
<h1 class="title">Tutorial CRUD Codeigniter</h1>Code language: HTML, XML (xml)Jika sudah maka simpan file tersebut, selanjutnya kita akan membuat footer.
Membuat Bagian Footer Layout Codeigniter
Pada sebuah layout rasanya tidak lengkap jika tidak menyertakan Tulisa Copyright, disamping fungsinya sebagai penanda bahwa website tersebut memiliki hak cipta selain itu agar terlihat lebih professional.
Buatlah sebuah file dengan nama footer.php di folder /application/views/layouts/footer.php dan isikan dengan kode dibawah ini:
<footer>
     Copyright © <?php echo date('Y'); ?>. Warganet.
   </footer>
</body>
</html>Code language: HTML, XML (xml)Simpan file footer tersebut, daaan selesai pembuatan layout codeigniter, untuk selanjutnya kita membuat halaman tengah atau content yang dapat di isi dengan daftar pengguna, tambah, dan edit pengguna, mohon untuk mengikuti langkah-langkah tutorial agar lebih mudah dipahami sehingga dapat lebih cepat menguasai codeigniter ini.
