Framework Code Igniter

MODUL

PEMBUATAN WEBSITE
DENGAN CODE IGNITER
By Dede Andi Ismayanto

Copyright © 2016. All right Reserved.

 BAB I
PENDAHULUAN

A. Framework
Sebenarnya apa sih yang disebut dengan framework itu? Framework bisa diartikan sebagai alat
yang digunakan untuk membantu pekerjaan. Karena untuk pembuatan website maka framework disini
dapat diartikan sebagai alat yang dapat digunakan untuk mempermudah pembuatan website.
Sebuah framework selain menyediakan lingkungan pengembangan sendiri-sendiri juga
menyediakan berbagai macam fungsi siap pakai yang bisa kita gunakan dalam pembuatan wenbsite.
Sehingga tidak perlu kaget jika akan banyak kode atau fungsi yang terlihat tidak seperti biasanya, karena
fungsi-fungsi tersebut merupakan fungsi bawaan framework dan bukan fungsi asli dari PHP. Fungsi
tersebut terkadang merupakan pengembangan atau penyesuaian fungsi asli PHP agar lebih mudah
digunakan atau agar lebih sesuai dengan kebutuhan pengguna.

B. CodeIgniter
CodeIgniter merupakan salah satu dari sekian banyak framework PHP yang ada. CodeIgniter
dikembangkan oleh Rick Ellis (http://www.ellislab.com).

Tujuan dari pembuatan framework CodeIgniter ini menurut user manualnya adalah untuk
menghasilkan framework yang akan dapat digunakan untuk pengembangan proyek pembuatan website
secara lebih cepat dibandingkan dengan pembuatan website dengan cara koding secara manual, dengan
menyediakan banyak sekali pustaka yang dibutuhkan dalam pembuatan website, dengan antarmuka yang
sederhana dan struktur logika untuk mengakses pustaka yang dibutuhkan. CodeIgniter membiarkan kita
untuk memfokuskan diri pada pembuatan website dengan meminimalkan pembuatan kode untuk berbagai
tujuan pembuatan website.

C. Kelebihan CodeIgniter
Ada banyak sekali framework PHP yang beredar di internet. Lantas kenapa kita memilih
CodeIgniter bukan yang lain? Berikut alasan-alasannya:
1. Gratis
CodeIgniter dilisensikan dibawah lisensi Apache/BSD style open source license, ini berarti
kita dapat menggunakannya sesuai dengan keinginan kita.
2. Berjalan di PHP versi 4 dan 5
Sekarang ini PHP sudah mencapai versi ke 5, meskipun begitu masih banyak orang yang
tetap menggunakan PHP versi 4, oleh sebab itu CodeIgniter dikembangkan agar tetap kompatibel
dengan PHP versi 4 dan dapat dijalankan pada PGP versi 5.
3. Ringan dan cepat
Secara default CodeIgniter hanya berjalan dengan me load beberapa pustaka saja, dengan
demikian hanya membutuhkan resource yang sedikit sehingga ringan dan cepat dijalankan.
Pustaka-pustaka lain yang nantinya akan digunakan bisa di load sesuai dengan kebutuhan.
4. Menggunakan MVC
CodeIgniter menggunakan lingkungan pengembangan dengan metode Model View
Controller (MVC) yang membedakan antara logika dan presentasi/tampilan, sehingga tugas bisa
lebih mudah dipecah-pecah. Ada bagian yang khusus membuat tampilan dan bagian yang
membuat core programnya.
 5. Dokumentasi
Salah satu hal yang bisa dijadikan barometer apakah sebuah aplikasi benar-benar
dikembangkan atau tidak bisa dilihat dari dokumentasinya. Dalam hal ini CodeIgniter sangat luar
biasa, terdapat dokumentasi yang sangat lengkap tentang semua hal yang ada dalam CodeIgniter.
Mulai dari langkah instalasi sampai dokumentasi fungsi-fungsi nya tersedia. Adanya dokumentasi
sangat memudahkan bagi pemula dalam mempelajari lingkungan pengembangan website dengan
CodeIgniter.
6. Pustaka yang lengkap
CodeIgniter dilengkapi dengan berbagai pustaka siap pakai untuk berbagai kebutuhan,
misalnya saja koneksi database, email, session dan cookies, keamanan, manipulasi gambar dan
banyak lagi.

D. Fitur CodeIgniter
Berikut fitur-fitur yang didukung oleh CodeIgniter :
1. Sistem berbasis Model View Controller
2. Kompatibel dengan PHP versi 4
3. Terdapat dukungan untuk berbagai basis data
4. Mendukung Active Record Database
5. Mendukung form dan validasi data masukan
6. Keamanan dan XSS filtering
7. Tersedia pengaturan session
8. Tersedia class untuk mengirim email
9. Tersedia class untuk manipulasi gambar (cropping,resizing, rotate dan lain-lain)
10. Tersedia class untuk upload file
11. Tersedia class yang mendukung transfer via FTP
12. Mendukung lokalisasi bahasa
13. Tersedia class untuk melakukan pagination (membuat tampilan perhalaman)
14. Mendukung enkripsi data
15. Mendukung benchmarking
16. Mendukung caching
17. Pencatatan error yang terjadi
18. Tersedia class untuk membuat calendar
19. Tersedia class untuk mengetahui user agent, misalnya tipe browser dan sistem operasi yang
digunakan pengunjung
20. Tersedia class untuk pembuatan template website
21. Tersedia class untuk membuat trackback
22. Tersedia pustaka untuk bekerja dengan XMP-RPC
23. Menghasilkan clean URL
24. URI routing yang felksibel
25. Mendukung hooks, ekstensi class dan plugin
26. Memiliki helper yang sangat banyak jumlahnya
E. Model View Controller
Seperti sudah disebutkan di muka bahwa CodeIgniter menerapkan lingkungan pengembangan
dengan metode MVC (Model View Controller). MVC memisahkan antara logika pembuatan kode dengan
pembuatan template atau tampilan website. Penggunaan MVC membuat pembuatan sebuah proyek
website menjadi lebih terstruktur dan lebih sederhana. Secara sederhana konsep MVC terdiri dari tiga
bagian yaitu bagian Model, bagian View dan bagian Controller.
1. Model
Biasanya didalam model akan berisi class dan fungsi untuk mengambil, melakukan update
dan menghapus data website. Karena sebuah website biasanya memnggunakan basis data dalam
menyimpan data maka bagian Model biasanya akan berhubungan dengan perintah-perintah query
SQL. Model bisa dibilang khusus digunakan untuk melakukan koneksi ke basis data oleh karena itu
logika-logika pemrograman yang berada didalam model juga harus yang berhubungan dengan
basis data. Misalnya saja pemilihan kondisi tetapi untuk memilih melakukan query yang mana.
2. View
Merupakan informasi yang ditampilkan kepada pengunjung website. Sebisa mungkin didalam
View tidak berisi logika-logika kode tetapi hanya berisi variabel-variabel yang berisi data yang siap
ditampilkan. View bisa dibilang adalah halaman website yang dibuat menggunakan HTML dengan
bantuan CSS atau JavaScript. Didalam view jangan pernah ada kode untuk melakukan koneksi ke
basis data. View hanya dikhususkan untuk menampilkan data-data hasil dari model dan controller.
3. Controller
Controller merupakan penghubung antara Model dan View. Didalam Controller inilah terdapat
class dan fungsi-fungsi yang memproses permintaan dari View kedalam struktur data didalam
Model. Controller juga tidak boleh berisi kode untuk mengakses basis data. Tugas controller adalah
menyediakan berbagai variabel yang akan ditampilkan di view, memanggil model untuk melakukan
akses ke basis data, menyediakan penanganan error, mengerjakan proses logika dari aplikasi serta
melakukan validasi atau cek terhadap input.

Jadi secara singkat urutan dari sebuah request adalah sebagai berikut: user berhubungan
dengan view, dimana didalam view inilah semua informasi ditampilkan. Saat user melakukan
permintaan atau request, misal klik tombol maka request tersebut akan diproses oleh Controller.
Apa yang harus dilakukan, data apa yang diinginkan, apakah ingin melihat data, atau memasukan
data atau mungkin melakukan validasi data terlebih dahulu, semua diproses oleh Controller.
Kemudian Controller akan meminta Model untuk menyelesaikan request, entah itu melakukan
query atau apapun. Dari Model, data akan dikirim kembali untuk di proses lebih lanjut di dalam
Controller dan baru dari Controller data akan ditampilkan di View.
 BAB II
INSTALASI

A. Download CodeIgniter
Silahkan kunjungi alamat http://codeigniter.com/download. Berikut tampilan dari halaman
download:

Gambar 1.1 Tampilan halaman download CodeIgniter.

Kemudian download CodeIgniter dengan versi 2.x pada bagian kanan halaman. Jika sudah
silahkan ekstrak hasil download tersebut. Dan hasil ekstrak dari file tersebut seperti ini.

Gambar 1.2 Isi folder CodeIgniter versi 2.x.

Jika sudah salin seluruh folder dan file yang ada di Folder yang sudah di ekstrak tadi ke dalam
htdocs(pastikan sudah menginstall xampp). Ubah nama folder tersebut dengan Folder yang diinginkan.
Misal yang saya gunakan “Latihan_CI”.
B. Instalasi CodeIgniter
1. Buat file .htaccess
Buka Notepad(direkomendasikan dengan menggunakan Notepad++). Simpan didalam folder
Latihan_CI dengan nama .htaccess

RewriteEngine On
RewriteCond %{REQUEST_URI} ^/system.*
RewriteRule ^(.*)$ index.php?/$1 [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.+)$ index.php?/$1 [L]

2. Mengkonfigurasi file Autoload

Buka folder Latihan_CI, lalu buka folder config. Disitu terdapat file autoload.php kemudian
klik kanan dan edit melalui Notepad++. Cari sintak ini:

$autoload['libraries'] = array();

Lalu simpan sintak dibawah ini kedalam kurung array:

'database','session','form_validation','image_lib','upload','pagination','email','us
er_agent','encrypt'

Kalau sudah, cari lagi sintak seperti ini:

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

Seperti sebelumnya, simpan sintak dibawah ini kedalam kurung array:

'file','html','form','url','captcha','security','cookie'

Autoload berfungsi untuk memanggil otomatis dalam hal ini fungsi-fungsi dari libraries dan
helper untuk dipakai saat pembuatan website.
 3. Mengkonfigurasi file Config
Buka lagi folder config. Edit file dengan nama config.php. Cari sintak berikut ini:

$config['base_url'] = '';

Pada bagian $config[„base_url‟] berfungsi untuk menentukan alamat URL utama pada
aplikasi. Sintak dibawah ini akan otomatis membaca alamat URL utama yang anda gunakan.

Lalu rubah dengan sintak ini:

$config['base_url'] = "http://".$_SERVER['HTTP_HOST'];
$config['base_url'] .=
str_replace(basename($_SERVER['SCRIPT_NAME']),"",$_SERVER['SCRIPT_NAME']);

Hapus index.php pada sintak ini:

$config['index_page'] = 'index.php';

Dan hasilnya akan seperti ini:

$config['index_page'] = '';

Terakhir pada file config. Cari sintak dengan kode berikut:

$config['encryption_key'] = '';

Kemudian isi dengan kata apapun. Boleh bebas. Nama atau apapun. Jangan memakai
(spasi).

4. Mengkonfigurasi file Database

Sebelum mengkonfigurasi file database, sebaiknya buat dulu Database. Misal saya akan
membuat database dengan nama latihan_ci.
Didalam folder DATABASE sudah saya buatkan struktur tabel dan database.

Masih dalam folder config. Buka dengan notepad++ file database.php. Masukan konfigurasi
basis data sesuai dengan aplikasi basis data yang kita miliki. Misalnya hostname tempat server
basis data berada, nama basis data yang akan digunakan, dll.
Dan inilah sintak file konfigurasi database.php yang saya gunakan:

$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'root';
$db['default']['password'] = '';
$db['default']['database'] = 'latihan_ci';
 Oke, sampai sejauh ini kita akan coba website tersebut dengan mengunjungi
http://localhost/nama_folder_kalian (nama folder harus sesuai dengan penulisan), dan hasilnya
akan tampak seperti ini:

Gambar 1.3 Tampilan default dari CodeIgniter.

5. Mengkonfigurasi file Routes

Langkah terakhir adalah mengkonfigurasi file routes.php. Silahkan ubah sintak dibawah:

$route['default_controller'] = "welcome";

Pada bagian $route['default_controller'] anda dapat mengisikannya dengan file controller

yang akan dijalankan secara default. Untuk sekarang controller yang akan digunakan menjadi
berikut ini:

$route['default_controller'] = "web";
 BAB III
IMPLEMENTASI WEBSITE

1. Administrator
Template
Pertama kita salin folder assets yang ada didalam folder TEMPLATE ke folder Latihan_CI
yang sudah kita buat tadi.
Buka folder Latihan_CI, kemudian application, lalu views.
Lalu buat folder, pertama dengan nama frontend kedua dengan nama backend.
Folder frontend untuk tampilan/template halaman depan website dan folder backend untuk
halaman administrator.
Dalam kedua folder tersebut buat lagi 2 folder dengan nama layout dan pages.
(Jika ada view default dari CodeIgniter dengan nama file welcome_message.php boleh
dihapus).
Dan hasilnya akan seperti ini:

Gambar 2.1 Isi dari folder views.

Gambar 2.2 Isi dari folder backend.

Gambar 2.3 Isi dari folder frontend.

 A. Models
Kita lanjut ke model dari CodeIgniter. Pertama kita akan membuat model untuk halaman
administrator. Langsung saja, kita buka notepad++, kemudian tulis sintak berikut ini:

<?php

class M_admin extends CI_Model{

function __construct(){
parent::__construct();
}

//================ DATA PENGGUNA ================//

function get_data_login($np, $ks){
return $this->db->query("SELECT * FROM pengguna WHERE
nama_pengguna='$np' AND kata_sandi='$ks'");
}

//================ DASHBOARD ================//

function get_jml_siswa(){
return $this->db->query("SELECT * FROM siswa")->num_rows();
}

//================ DATA SISWA ================//

function get_data_siswa(){
return $this->db->query("SELECT * FROM siswa ORDER BY NIS ASC");
}

function get_data_id_siswa($id){
return $this->db->query("SELECT * FROM siswa WHERE id_siswa='$id'");
}

//================ SIMPAN DATA ================//

function input_data($tbl, $data){
$query = $this->db->insert($tbl, $data);
return $query;
}

//================ EDIT DATA ================//

function edit_data($tbl, $data, $fd, $id){
$this->db->where($fd, $id);
$query = $this->db->update($tbl ,$data);
return $query;
}

//================ HAPUS DATA ================//

function hapus_data($tbl, $fd, $id){
$query = $this->db->query("DELETE FROM $tbl WHERE $fd='$id'");
return $query;
}

//================ HAPUS SEMUA ================//

function hapus_semua_data($tbl){
$query = $this->db->query("TRUNCATE TABLE $tbl");
return $query;
}
}

Simpan dengan nama m_admin.php di folder models.

Seperti yang sudah dijelaskan sebelumnya. Model Admin ini untuk memproses database
dalam halaman Administrator.
 B. Views
Dalam view kita akan membagi kedalam 2 bagian, yaitu satu untuk layout dan kedua untuk
content dari halaman administrator.
Pertama buka lagi notepad++, kemudia masukan sintak berikut ini:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Latihan Framework CodeIgniter</title>

<link href="<?php echo base_url() ?>assets/backend/css/bootstrap.css"

rel="stylesheet" />
<link href="<?php echo base_url() ?>assets/backend/css/font-awesome.css"
rel="stylesheet" />
<link href="<?php echo base_url() ?>assets/backend/js/morris/morris-
0.4.3.min.css" rel="stylesheet" />
<link href="<?php echo base_url() ?>assets/backend/css/custom-styles.css"
rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'
type='text/css' />
<link href="<?php echo base_url()
?>assets/backend/js/dataTables/dataTables.bootstrap.css" rel="stylesheet" />
</head>

<body>
<div id="wrapper">
<nav class="navbar navbar-default top-navbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".sidebar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="<?php echo base_url()
?>administrator/dashboard">Latihan</a>
</div>

<ul class="nav navbar-top-links navbar-right">

<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-
expanded="false">
<?php
$session_data = $this->session-
>userdata('logged_in');
?>
<i class="fa fa-user fa-fw"></i> Hallo, <?php echo
$session_data['nama_pengguna']; ?>! <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li>
<a href="<?php echo base_url()
?>administrator/logout"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
</li>
</ul>
</li>
</ul>
</nav>

Lanjut ke halaman berikutnya, masih dalam file yang sama.

<nav class="navbar-default navbar-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li>
<a class="<?php if ($halaman == 'dashboard') { echo 'active-
menu'; } ?>" href="<?php echo base_url() ?>administrator/dashboard">
<i class="fa fa-laptop"></i>
Dashboard
</a>
</li>

<li>
<a class="<?php if ($halaman == 'siswa') { echo 'active-
menu'; } ?>" href="<?php echo base_url() ?>administrator/siswa">
<i class="fa fa-user"></i>
Siswa
</a>
</li>
</ul>
</div>
</nav>

<div id="page-wrapper">
<div id="page-inner">

Simpan dengan nama v_header.php di folder views\backend\layout. v_header.php ini adalah

layout untuk bagian header dari website.

Selanjutnya kita buat lagi tab baru, tulis sintak ini:

<footer>
<p>All right reserved. Template by: <a
href="http://webthemez.com">WebThemez</a></p>
</footer>
</div>
</div>
</div>

<!-- JS Scripts-->
<script src="<?php echo base_url() ?>assets/backend/js/jquery-
1.10.2.js"></script>
<script src="<?php echo base_url()
?>assets/backend/js/bootstrap.min.js"></script>
<script src="<?php echo base_url()
?>assets/backend/js/jquery.metisMenu.js"></script>
<script src="<?php echo base_url() ?>assets/backend/js/morris/raphael-
2.1.0.min.js"></script>
<script src="<?php echo base_url()
?>assets/backend/js/morris/morris.js"></script>
<script src="<?php echo base_url()
?>assets/backend/js/dataTables/jquery.dataTables.js"></script>
<script src="<?php echo base_url()
?>assets/backend/js/dataTables/dataTables.bootstrap.js"></script>
<script>
$(document).ready(function () {
$('#dataTables-tabel').dataTable();
});
</script>
<script src="<?php echo base_url() ?>assets/backend/js/custom-
scripts.js"></script>
</body>
</html>

Simpan dengan nama v_footer.php di dalam folder yang sama dengan v_header.php yaitu di
views\backend\layout.

Dan v_footer.php ini merupakan bagian footer dari website halaman Administrator.
 Buat lagi file baru, dan ketikan sintak berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Latihan Framework CodeIgniter</title>

<link href="<?php echo base_url() ?>assets/backend/css/bootstrap.css"

rel="stylesheet" />
<link href="<?php echo base_url() ?>assets/backend/css/font-awesome.css"
rel="stylesheet" />

<link href="<?php echo base_url() ?>assets/backend/css/custom-styles.css"

rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'
type='text/css' /></head>

<body>
<div id="page-login">
<div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-
4 col-md-offset-4">
<div class="login-panel panel panel-default">
<div class="panel-heading">Login Administrator</div>
<div class="panel-body">

<?php
if($this->session->flashdata('error')) { ?>
<div class="alert alert-danger">
<strong>Kesalahan!</strong> <?php echo
$this->session->flashdata('error'); ?>
</div>
<?php } ?>

<form role="form" method="POST" action="<?php echo

base_url() ?>proses_admin/login">
<fieldset>
<div class="form-group">
<label>Nama Pengguna</label>
<input class="form-control"
placeholder="Nama Pengguna" name="nama_pengguna" type="text" autofocus="" required>
</div>
<div class="form-group">
<label>Kata Sandi</label>
<input class="form-control"
placeholder="Kata Sandi" name="kata_sandi" type="password" required>
</div>

<input type="submit" class="btn btn-

primary btn-block" value="Login" />
</fieldset>
</form>
</div>
</div>
</div>
</div>
</body>
</html>

Simpan dengan nama v_login.php, di folder views\backend\pages.

Sintak diatas merupakan halaman login untuk masuk sebagai Administrator.

 Buat lagi file baru, ketikan kode dibawah ini:

<div class="row">
<div class="col-md-12">
<h1 class="page-header">
Dashboard <small>Ikhtisar untuk website Anda</small>
</h1>
</div>
</div>

<div class="row">
<div class="col-md-3 col-sm-12 col-xs-12">
<div class="panel panel-primary text-center no-boder bg-
color-green">
<div class="panel-body">
<i class="fa fa-user fa-5x"></i>
<h3><?php echo $this->m_admin->get_jml_siswa();
?></h3>
</div>
<div class="panel-footer back-footer-green">
Data Siswa
</div>
</div>
</div>
<div class="col-md-3 col-sm-12 col-xs-12">
<div class="panel panel-primary text-center no-boder bg-
color-blue">
<div class="panel-body">
<i class="fa fa-user fa-5x"></i>
<h3>52,160 </h3>
</div>
<div class="panel-footer back-footer-blue">
Data Guru
</div>
</div>
</div>
<div class="col-md-3 col-sm-12 col-xs-12">
<div class="panel panel-primary text-center no-boder bg-
color-red">
<div class="panel-body">
<i class="fa fa fa-comments fa-5x"></i>
<h3>15,823 </h3>
</div>
<div class="panel-footer back-footer-red">
Komentar
</div>
</div>
</div>
<div class="col-md-3 col-sm-12 col-xs-12">
<div class="panel panel-primary text-center no-boder bg-
color-brown">
<div class="panel-body">
<i class="fa fa-users fa-5x"></i>
<h3>36,752 </h3>
</div>
<div class="panel-footer back-footer-brown">
Total pengunjung
</div>
</div>
</div>
</div>

Lanjut ke halaman berikutnya, masih dalam file yang sama.

 <div class="row">
<div class="col-md-9 col-sm-12 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
Bar Chart Example
</div>
<div class="panel-body">
<div id="morris-bar-chart"></div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-12 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
Donut Chart Example
</div>
<div class="panel-body">
<div id="morris-donut-chart"></div>
</div>
</div>
</div>
</div>
<!-- /. ROW -->

Simpan dengan nama v_dashboard.php dan simpan satu folder dengan v_login.php yaitu di
views\backend\pages.

v_dashboard merupakan konten dari halaman beranda. Kira-kira kalau digambarkan dalam
proses diatas seperti ini:

v_header.php

v_dashboard.php (KONTEN)

v_footer.php

Jadi v_header dan v_footer akan terus di load dalam setiap halaman di Administrator. Namun
yang membedakan isi dari tiap halaman yang akan dibuat. Dan selanjutnya akan membuat konten
Data Siswa, jadi kita hanya perlu membuat konten v_siswa.php tanpa membuat header dan footer
yang sama, apalagi data yang digunakan banyak tentu akan memakan waktu yang lama.
Keuntungan yang lain juga jika ada perubahan dalam header ataupun footer kita hanya mengubah
satu file yaitu v_header atau v_footer sendiri.
 Terakhir untuk view administrator, kita buat file dengan nama v_siswa.php di folder yang
sama dengan v_login.php dan v_dashboard.php yaitu di views\backend\pages. Dan tulis sintak
tersebut:

<div class="row">
<div class="col-md-12">
<h1 class="page-header">
Siswa <small>Pengolahan data Siswa</small>
</h1>
</div>
</div>

<?php
switch ($this->uri->segment(3)) {
default:
?>
<!-- HALAMAN UNTUK DATA SISWA -->
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
Data Siswa
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<a href="<?php
echo base_url() ?>administrator/siswa/tambah" class="btn btn-default">
Tambah
Data Siswa
</a>
<a href="<?php
echo base_url() ?>proses_admin/hapus_semua_siswa" class="btn btn-danger"
onclick="return confirm('Yakin akan menghapus semua data Siswa?')">
Hapus
Semua Siswa
</a>

<p />

<?php
if($this-
>session->flashdata('success')) {
?>
<div class="alert
alert-success">

<strong>Berhasil!</strong> <?php echo $this->session->flashdata('success');

?>
</div>

<?php }
elseif($this->session->flashdata('error')) { ?>

<div class="alert
alert-danger">

<strong>Kesalahan!</strong> <?php echo $this->session->flashdata('error'); ?>

</div>
<?php } ?>

Lanjut ke bawah dalam file yang sama.

<table class="table table-striped table-bordered table-hover" id="dataTables-tabel">
<thead>
<tr>

<th>No.</th>

<th>NIS</th>

<th>Nama Siswa</th>

<th>Jenis Kelamin</th>

<th>Alamat</th>

<th width="15%">#</th>

</tr>
</thead>
<tbody>

<?php

$i = 0;

foreach ($siswa as $data_siswa) {

$i = $i+1;
?>
<tr>

<td><?php echo $i; ?></td>

<td><?php echo $data_siswa->NIS; ?></td>

<td><?php echo $data_siswa->nama_siswa; ?></td>

<td><?php echo $data_siswa->jenis_kelamin; ?></td>

<td><?php echo $data_siswa->alamat; ?></td>

<td class="center">

<a href="<?php echo site_url('proses_admin/hapus_siswa/'. $data_siswa-

>id_siswa)?>" class="btn btn-sm btn-danger" onclick="return confirm('Yakin akan
menghapus data ini?')">

Hapus

</a>

<a href="<?php echo site_url('administrator/siswa/edit/'. $data_siswa-

>id_siswa)?>" class="btn btn-sm btn-default">

Edit

</a>

</td>

</tr>

<?php } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>

Lanjut ke bawah dalam file yang sama.

<?php
break;
case "tambah":
?>
<!-- HALAMAN UNTUK TAMBAH DATA SISWA -->
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
Tambah Data Siswa
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<form
role="form" method="POST" action="<?php echo base_url()
?>proses_admin/tambah_siswa">
<div
class="form-group">

<label>NIS</label>

<input type="text" class="form-control" name="NIS" placeholder="NIS"

required>
</div>

<div
class="form-group">

<label>Nama Siswa</label>

<input type="text" class="form-control" name="nama_siswa" placeholder="Nama

Siswa" required>
</div>

<div
class="form-group">

<label>Jenis Kelamin</label>

<select class="form-control" name="jenis_kelamin">

<option value="Laki-laki">Laki-laki</option>

<option value="Perempuan">Perempuan</option>

</select>
</div>

<div
class="form-group">

<label>Alamat</label>

<input type="text" class="form-control" name="alamat" placeholder="Alamat"

required>
</div>

<input
type="submit" class="btn btn-primary" value="Simpan" />
<a
href="<?php echo base_url() ?>administrator/siswa" class="btn btn-
default">Kembali</a>
</form>
</div>
</div>
</div>
</div>
</div>
</div>

Lanjut ke bawah dalam file yang sama.

<?php
break;
case "edit":

$id_siswa = $this->uri-
>segment(4);
if ($this->m_admin-
>get_data_id_siswa($id_siswa)->num_rows() > 0) {
$data_siswa = $this->m_admin-
>get_data_id_siswa($id_siswa)->row();
?>
<!-- HALAMAN UNTUK EDIT DATA SISWA -->
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
Edit Data Siswa
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<form
role="form" method="POST" action="<?php echo base_url() ?>proses_admin/edit_siswa">
<div
class="form-group">

<label>NIS</label>

<input type="hidden" class="form-control" name="id_siswa" value="<?php echo

$id_siswa; ?>">

<input type="text" class="form-control" name="NIS" placeholder="NIS"

value="<?php echo $data_siswa->NIS; ?>" required>
</div>

<div
class="form-group">

<label>Nama Siswa</label>

<input type="text" class="form-control" name="nama_siswa" placeholder="Nama

Siswa" value="<?php echo $data_siswa->nama_siswa; ?>" required>
</div>

<div
class="form-group">

<label>Jenis Kelamin</label>

<select class="form-control" name="jenis_kelamin">

<option value="Laki-laki" <? echo ($data_siswa->jenis_kelamin == 'Laki-

laki')?"selected":""; ?>>Laki-laki</option>

<option value="Perempuan" <? echo ($data_siswa->jenis_kelamin ==

'Perempuan')?"selected":""; ?>>Perempuan</option>

</select>
</div>

<div
class="form-group">

<label>Alamat</label>

<input type="text" class="form-control" name="alamat" placeholder="Alamat"

value="<?php echo $data_siswa->alamat; ?>" required>
</div>

<input
type="submit" class="btn btn-primary" value="Simpan" />
<a
href="<?php echo base_url() ?>administrator/siswa" class="btn btn-
default">Kembali</a>
</form>

Lanjut ke bawah dalam file yang sama.

</div>
</div>
</div>
</div>
</div>
</div>
<?php
} else {
$this->session-
>set_flashdata('error', "ID Siswa tidak ada dalam Database.");
redirect('administrator/siswa');
}
}
?>

Jika semua sudah beres, kita lanjut ke controller di halaman selanjutnya.

 C. Controllers
Selanjutnya kita buat controller untuk halaman administrator.
Salin sintak ini kedalam notepad++. Simpan dengan nama administrator.php didalam folder
controller.
(Jika ada controller default dengan nama welcome.php boleh dihapus).

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

class Administrator extends CI_Controller {

function __construct(){
parent::__construct();
session_start();
$this->load->model('m_admin');
}

function index(){
if($this->session->userdata('logged_in')) {
redirect('administrator/dashboard');
} else {
redirect('administrator/login');
}
}

function login(){
if($this->session->userdata('logged_in')) {
redirect('administrator/dashboard');
} else {
$this->load->view('backend/pages/v_login');
}
}

function logout(){
$this->session->unset_userdata('logged_in');
session_destroy();
redirect('administrator/login');
}

function dashboard(){
if($this->session->userdata('logged_in')) {
$data = array(
'halaman' => 'dashboard',
'jumlah_siswa' => $this->m_admin->get_jml_siswa(),
);

$this->load->view('backend/layout/v_header', $data);
$this->load->view('backend/pages/v_dashboard');
$this->load->view('backend/layout/v_footer');
} else {
redirect('administrator/login');
}
}

function siswa(){
if($this->session->userdata('logged_in')) {
$data = array(
'halaman' => 'siswa',
'siswa' => $this->m_admin-
>get_data_siswa()->result(),
);

$this->load->view('backend/layout/v_header', $data);
$this->load->view('backend/pages/v_siswa');
$this->load->view('backend/layout/v_footer');
} else {
redirect('administrator/login');
}
}
}

Oke, selesai untuk file controller administrator.php.

File administrator.php ini untuk mengontrol akses database dari modul dan dan menampilkan
dari file views.
 Selanjutnya kita buka lagi notepad++atau buka tab baru. Tulis sintak berikut:

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

class Proses_admin extends CI_Controller {

function __construct(){
parent::__construct();
session_start();
$this->load->model('m_admin');
}

function index(){
redirect('administrator/dashboard');
}

function login(){
$np = $this->input->post('nama_pengguna');
$ks = md5($this->input->post('kata_sandi'));
$pengguna = $this->m_admin->get_data_login($np, $ks)->result();

if ($this->m_admin->get_data_login($np, $ks)->num_rows() > 0) {

$sess_array = array();
foreach($pengguna as $data_pengguna){
$sess_array = array(
'id_pengguna' => $data_pengguna->id_pengguna,
'nama_pengguna' => $data_pengguna->nama_pengguna
);
$this->session->set_userdata('logged_in', $sess_array);
}

redirect('administrator/dashboard');
} else {
$this->session->set_flashdata('error', "Login gagal!");
redirect('administrator/login');
}
}

function tambah_siswa(){
if ($this->input->post()){
$data_siswa = array(
'NIS' => $this->input->post('NIS'),
'nama_siswa' => $this->input->post('nama_siswa'),
'jenis_kelamin' => $this->input-
>post('jenis_kelamin'),
'alamat' => $this->input->post('alamat'),
);

if ($this->m_admin->input_data('siswa', $data_siswa)){
$this->session->set_flashdata('success', "Data sudah
berhasil disimpan.");
redirect('administrator/siswa');

} else {
$this->session->set_flashdata('error', "Data gagal
disimpan.");
redirect('administrator/siswa');
}
}
}

Lanjut ke halaman berikutnya, masih dalam file yang sama.

 function edit_siswa(){
if ($this->input->post()){
$id_siswa = $this->input->post('id_siswa');
$data_siswa = array(
'NIS' => $this->input->post('NIS'),
'nama_siswa' => $this->input->post('nama_siswa'),
'jenis_kelamin' => $this->input-
>post('jenis_kelamin'),
'alamat' => $this->input->post('alamat'),
);

if ($this->m_admin->edit_data('siswa', $data_siswa, 'id_siswa',

$id_siswa)){
$this->session->set_flashdata('success', "Data sudah
berhasil diedit.");
redirect('administrator/siswa');

} else {
$this->session->set_flashdata('error', "Data gagal
diedit.");
redirect('administrator/siswa');
}
}
}

function hapus_siswa(){
$id = $this->uri->segment(3);

if ($this->m_admin->hapus_data('siswa', 'id_siswa', $id)){

$this->session->set_flashdata('success', "Data sudah berhasil
dihapus.");
redirect('administrator/siswa');
} else {
$this->session->set_flashdata('error', "Data gagal dihapus.");
redirect('administrator/siswa');
}
}

function hapus_semua_siswa(){
if ($this->m_admin->hapus_semua_data('siswa')){
$this->session->set_flashdata('success', "Semua data sudah
terhapus.");
redirect('administrator/siswa');
} else {
$this->session->set_flashdata('error', "Data gagal dihapus
semua.");
redirect('administrator/siswa');
}
}
}

Jika sudah, simpan dengan nama proses_admin.php di folder controllers.

Silahkan akses http://localhost/nama_folder_website/administrator untuk melihat hasilnya.
Pastikan data pengguna sudah memiliki data untuk proses login ke halaman Administrator. Untuk
kata sandi memakai md5.
2. Halaman Depan Website
Template
Untuk template tadi sudah sekaligus untuk website halaman depan jadi langsung ke tahap
berikutnya. Proses selanjutnya tidak jauh berbeda dari halaman Administrator.
A. Models
Pertama kita buat file baru. Ketik sintak berikut:

<?php

class M_app extends CI_Model{

function __construct(){
parent::__construct();
}

//================ DATA SISWA ================//

function get_data_siswa(){
return $this->db->query("SELECT * FROM siswa ORDER BY NIS ASC");
}
}

Kalau sudah beri nama m_app.php dan simpan di folder models, satu folder dengan
m_admin.php.
B. Views
Sama seperti halaman administrator kita buat v_header, v_footer, dan konten.
Sekarang, kita buat file baru dan tulis sintak berikut 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">

<title>Latihan Framework CodeIgniter</title>

<link href="<?php echo base_url() ?>assets/frontend/css/bootstrap.min.css"

rel="stylesheet">
<link href="<?php echo base_url() ?>assets/frontend/css/freelancer.css"
rel="stylesheet">
<link href="<?php echo base_url() ?>assets/frontend/font-awesome/css/font-
awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700"
rel="stylesheet" type="text/css">
<link
href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic"
rel="stylesheet" type="text/css">
<link href="<?php echo base_url()
?>assets/frontend/js/dataTables/dataTables.bootstrap.css" rel="stylesheet" />
</head>

<body id="page-top" class="index">

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="<?php echo base_url()
?>web/beranda">Latihan</a>
</div>

Lanjut ke halaman selanjutnya dalam file yang sama.

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="page-scroll">
<a href="<?php echo base_url() ?>web/beranda">Beranda</a>
</li>
<li class="page-scroll">
<a href="<?php echo base_url() ?>web/siswa">Siswa</a>
</li>
</ul>
</div>
</div>
</nav>

Simpan dengan nama v_header.php kedalam folder views/frontend/layout.

Buat lagi file baru dan tulis sintak dibawah ini:

<!-- Footer -->

<footer class="text-center">
<div class="footer-above">
<div class="container">
<div class="row">
<div class="footer-col col-md-4">
<h3>Location</h3>
<p>Jl. Ciwaas - Tamansari<br>Kota Tasikmalaya, 46196</p>
</div>
<div class="footer-col col-md-4">
<h3>Our Social Media</h3>
<ul class="list-inline">
<li><a href="#" class="btn-social btn-outline"><i
class="fa fa-fw fa-facebook"></i></a></li>
<li><a href="#" class="btn-social btn-outline"><i
class="fa fa-fw fa-google-plus"></i></a></li>
<li><a href="#" class="btn-social btn-outline"><i
class="fa fa-fw fa-twitter"></i></a></li>
<li><a href="#" class="btn-social btn-outline"><i
class="fa fa-fw fa-linkedin"></i></a></li>
<li><a href="#" class="btn-social btn-outline"><i
class="fa fa-fw fa-dribbble"></i></a></li>
</ul>
</div>
<div class="footer-col col-md-4">
<h3>About Us</h3>
<p>Disini tulis tentang Perusahaan/Yayasan/Instansi
Anda.</p>
</div>
</div>
</div>
</div>
<div class="footer-below">
<div class="container">
<div class="row">
<div class="col-lg-12">Copyright &copy; Latihan 2016. All right
reserved.</div>
</div>
</div>
</div>
</footer>

Lanjut kebawah dalam file yang sama.

<script src="<?php echo base_url() ?>assets/frontend/js/jquery.js"></script>
<script src="<?php echo base_url()
?>assets/frontend/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-
easing/1.3/jquery.easing.min.js"></script>
<script src="<?php echo base_url() ?>assets/frontend/js/classie.js"></script>
<script src="<?php echo base_url()
?>assets/frontend/js/cbpAnimatedHeader.js"></script>
<script src="<?php echo base_url()
?>assets/frontend/js/dataTables/jquery.dataTables.js"></script>
<script src="<?php echo base_url()
?>assets/frontend/js/dataTables/dataTables.bootstrap.js"></script>
<script>
$(document).ready(function () {
$('#dataTables-tabel').dataTable();
});
</script>

<script src="<?php echo base_url() ?>assets/frontend/js/freelancer.js"></script>

</body>
</html>

Simpan dengan nama v_footer.php dalam folder yang sama dengan v_header.php yaitu di
views/frontend/layout.
Selanjutnya kita akan membuat konten untuk beranda pada halaman depan.
Tulis sintak ini:

<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="<?php echo base_url()
?>assets/frontend/img/profile.png" alt="">
<div class="intro-text">
<span class="name">LATIHAN</span>
<hr class="star-light">
<span class="skills">Membuat Website dengan Framework
CodeIgniter</span>
</div>
</div>
</div>
</div>
</header>

Terakhir untuk views yaitu konten data siswa dari halaman depan. Tulis sintak ini:

<section style="margin-top: 50px;">

<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Siswa</h2>
<hr class="star-primary">
</div>
</div>
<div class="row">
<div class="col-lg-12">
<table class="table table-striped table-bordered
table-hover" id="dataTables-tabel">
<thead>
<tr>
<th>No.</th>
<th>NIS</th>
<th>Nama Siswa</th>
<th>Jenis Kelamin</th>
<th>Alamat</th>
</tr>
</thead>

Lanjut kebawah dalam file yang sama.

 <tbody>
<?php
$i = 0;
foreach ($siswa as
$data_siswa) {
$i = $i+1;
?>
<tr>
<td><?php echo $i; ?></td>
<td><?php echo $data_siswa-
>NIS; ?></td>
<td><?php echo $data_siswa-
>nama_siswa; ?></td>
<td><?php echo $data_siswa-
>jenis_kelamin; ?></td>
<td><?php echo $data_siswa-
>alamat; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
</div>
</section>

Simpan dengan nama v_siswa.php kedalam folder views/frontend/pages.

Selesai sudah untuk bagian views dari halaman depan website. Lanjut untuk proses terakhir
yaitu controller.
 C. Controllers
Silahkan buka lagi notepad++ kalian. Ketik sintak berikut ini:

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

class Web extends CI_Controller {

function __construct(){
parent::__construct();
session_start();
$this->load->model('m_app');
}

function index(){
redirect('web/beranda');
}

function beranda(){
$this->load->view('frontend/layout/v_header');
$this->load->view('frontend/pages/v_beranda');
$this->load->view('frontend/layout/v_footer');
}

function siswa(){
$data = array(
'siswa' => $this->m_app->get_data_siswa()->result(),
);

$this->load->view('frontend/layout/v_header', $data);
$this->load->view('frontend/pages/v_siswa');
$this->load->view('frontend/layout/v_footer');
}
}

Simpan kedalam folder controllers dan beri nama web.php.

Jika sudah selesai sampai disini silahkan akses web tersebut dengan url
http://localhost/nama_folder_website/

** Semoga berhasil tanpa adanya kesalahan! **

 CONTACT ME

Jika ada kesalahan bisa kalian tanyakan ke penulis dengan cara menghubungi kontak dibawah ini:

foreachid@gmail.com /ForeachID /ForeachID

** HAPPY CODING **