Tutorial Cara Membuat Login

Session Dengan CodeIgniter dan

Bootstrap

Fika Ridaul Maulayya

Software Engineering Enthusiast.
9 Maret 2018

Log Masuk atau Login adalah proses untuk mengakses sebuah sistem
komputer dengan memasukkan identitas dari akun pengguna sebagai hak
akses.

Pada tutorial kali ini kita akan mengimplementasi sebuah sistem login
menngunakan Framework CodeIgniter dan Bootstrap, pertama download
CodeIgniter di situs resminya di www.codeigniter.com, setelah berhasil
diunduh / didownload, silahkan extract di folder htdocs (jika menggunakan
xampp).

Rename hasil extract CodeIgniter tadi dengan nama "ci-login".

Setelah itu buatlah sebuah database baru di http://localhost/phpmyadmin,

dengan nama "ci-login", kemudian buka database tersebut dan masukkan
kode berikut ini kedalam menu SQL

-- MySQL dump 10.13 Distrib 5.6.22, for osx10.8 (x86_64)

--
-- Host: localhost Database: ci-login
-- ------------------------------------------------------
-- Server version 5.7.17

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;

/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
/*!40103 SET @OLD_TIME_ZONE=@@TIME_ZONE */;
/*!40103 SET TIME_ZONE='+00:00' */;
/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */
;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;

--
-- Table structure for table `tbl_users`
--

DROP TABLE IF EXISTS `tbl_users`;

/*!40101 SET @saved_cs_client = @@character_set_client */;
/*!40101 SET character_set_client = utf8 */;
CREATE TABLE `tbl_users` (
`id_user` int(150) NOT NULL AUTO_INCREMENT,
`nama_user` varchar(150) NOT NULL,
`username` varchar(150) NOT NULL,
`password` varchar(150) NOT NULL,
`created_at` datetime NOT NULL,
`updated_at` datetime NOT NULL,
PRIMARY KEY (`id_user`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=latin1;
/*!40101 SET character_set_client = @saved_cs_client */;

--
-- Dumping data for table `tbl_users`
--

LOCK TABLES `tbl_users` WRITE;

/*!40000 ALTER TABLE `tbl_users` DISABLE KEYS */;
INSERT INTO `tbl_users` VALUES (1,'Administrator','admin','21232f297a57a5a743894a0
e4a801fc3','2017-02-21 04:14:16','2017-03-06 13:42:37');
/*!40000 ALTER TABLE `tbl_users` ENABLE KEYS */;
UNLOCK TABLES;
/*!40103 SET TIME_ZONE=@OLD_TIME_ZONE */;

/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;

/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;

-- Dump completed on 2017-11-17 22:44:05

Maka jika berhasil maka kurang lebih tampilannya akan seperti ini:
Oke, selanjutnya ada beberapa konfigurasi didalam CodeIgniter yang perlu
kita perhatikan sebelumnya, mari kita bahas satu-persatu

Pertama, buka file config.php di folder application/config, kemudia rubah

kode berikut ini:

$config['base_url'] = "";

Menjadi seperti berikut ini:

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

Selanjutnya buka file autoload.php di folder application/config, kemudian

rubah kode berikut ini:

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

Menjadi seperti berikut ini:

$autoload['libraries'] = array('database', 'session', 'form_validation');

kemudian bagian kode berikut ini:

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

Menjadi seperti berikut ini:

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

Selanjutnya buka file database.php di folder application/config, ubah kode

berikut ini:

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => '',
'password' => '',
'database' => '',
'dbdriver' => 'mysqli',
'dbprefix' => '',
'pconnect' => FALSE,
'db_debug' => (ENVIRONMENT !== 'production'),
'cache_on' => FALSE,
'cachedir' => '',
'char_set' => 'utf8',
'dbcollat' => 'utf8_general_ci',
'swap_pre' => '',
'encrypt' => FALSE,
'compress' => FALSE,
'stricton' => FALSE,
'failover' => array(),
'save_queries' => TRUE
);

Menjadi seperti berikit ini:

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '', //sesuaikan password MYSQL kalian
'database' => 'ci-login',
'dbdriver' => 'mysqli',
'dbprefix' => '',
'pconnect' => FALSE,
'db_debug' => (ENVIRONMENT !== 'production'),
'cache_on' => FALSE,
'cachedir' => '',
'char_set' => 'utf8',
'dbcollat' => 'utf8_general_ci',
'swap_pre' => '',
'encrypt' => FALSE,
'compress' => FALSE,
'stricton' => FALSE,
'failover' => array(),
'save_queries' => TRUE
);
Oke setelah konfigurasi diatas selesai, sekarang kita akan coba membuat
sebuah controller baru di folder application/controllers, dan beri nama
dengan Login.php, berikut kodenya:

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

class Login extends CI_Controller {

public function __construct()

{
parent::__construct();
//load model admin
$this->load->model('admin');
}

public function index()

{

if($this->admin->logged_id())
{
//jika memang session sudah terdaftar, maka redirect ke halaman da
hsboard
redirect("dashboard");

}else{

//jika session belum terdaftar

//set form validation

$this->form_validation->set_rules('username', 'Username', 'require
d');
$this->form_validation->set_rules('password', 'Password', 'require
d');

//set message form validation

 $this->form_validation->set_message('required', '<div class="alert
alert-danger" style="margin-top: 3px">
<div class="header"><b><i class="fa fa-exclamation-circle"></i
> {field}</b> harus diisi</div></div>');

//cek validasi
if ($this->form_validation->run() == TRUE) {

//get data dari FORM

$username = $this->input->post("username", TRUE);
$password = MD5($this->input->post('password', TRUE));

//checking data via model

$checking = $this->admin->check_login('tbl_users', array('username
' => $username), array('password' => $password));

//jika ditemukan, maka create session

if ($checking != FALSE) {
foreach ($checking as $apps) {

$session_data = array(
'user_id' => $apps->id_user,
'user_name' => $apps->username,
'user_pass' => $apps->password,
);
//set session userdata
$this->session->set_userdata($session_data);

redirect('dashboard/');

}
}else{

$data['error'] = '<div class="alert alert-danger" style="margi

n-top: 3px">
<div class="header"><b><i class="fa fa-exclamation-circle"
></i> ERROR</b> username atau password salah!</div></div>';
$this->load->view('login', $data);
 }

}else{

$this->load->view('login');
}

}
}

Selanjutnya buatlah sebuah model baru di folder application/models, dengan

nama Admin.php, dan masukkan kodenya seperti berikut ini:

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

class Admin extends CI_Model

{
//fungsi cek session
function logged_id()
{
return $this->session->userdata('user_id');
}

//fungsi check login

function check_login($table, $field1, $field2)
{
$this->db->select('*');
$this->db->from($table);
$this->db->where($field1);
$this->db->where($field2);
$this->db->limit(1);
 $query = $this->db->get();
if ($query->num_rows() == 0) {
return FALSE;
} else {
return $query->result();
}
}
}

Oke, selanjutnya buat sebuah file baru di folder application/views, dan beri
nama login.php dan masukkan kode berikut ini:

<html>
<head>
<title>Login - CodeIgniter</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/b
ootstrap/3.3.7/css/bootstrap.min.css">
<style>
.form-signin
{
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.form-signin .form-signin-heading, .form-signin .checkbox
{
margin-bottom: 10px;
}
.form-signin .checkbox
{
font-weight: normal;
}
.form-signin .form-control
{
 position: relative;
font-size: 16px;
height: auto;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-signin .form-control:focus
{
z-index: 2;
}
.form-signin input[type="text"]
{
margin-bottom: -1px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.form-signin input[type="password"]
{
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.account-wall
{
margin-top: 20px;
padding: 40px 0px 20px 0px;
background-color: #f7f7f7;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.login-title
{
color: #555;
 font-size: 18px;
font-weight: 400;
display: block;
}
.profile-img
{
width: 96px;
height: 96px;
margin: 0 auto 10px;
display: block;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.need-help
{
margin-top: 10px;
}
.new-account
{
display: block;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container" style="margin-top: 50px">
<div class="row">
<div class="col-sm-6 col-md-4 col-md-offset-4">
<h1 class="text-center login-title">Masuk Administrator</h1>
<?php if(isset($error)) { echo $error; }; ?>
<div class="account-wall">
<img class="profile-img" src="https://lh5.googleusercontent.com/-b
0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120"
alt="">
<form class="form-signin" method="POST" action="<?php echo base_ur
l() ?>index.php/login">
 <div class="form-group">
<input type="text" class="form-control" name="username" placeh
older="Masukkan Username Anda" autofocus>
<?php echo form_error('username'); ?>
</div>
<div class="form-group">
<input type="password" name="password" class="form-control" pl
aceholder="Masukkan Password Anda">
<?php echo form_error('password'); ?>
</div>

<button class="btn btn-lg btn-primary btn-block" name="btn-login"

id="btn-login" type="submit">
Masuk</button>

<label class="checkbox pull-left">

<input type="checkbox" value="remember-me">
Ingatkan Saya
</label>
<a href="#" class="pull-right need-help">Butuh bantuan? </a><span
class="clearfix"></span>
</form>
</div>
<a href="#" class="text-center new-account">Buat Akun </a>
<div id="error" style="margin-top: 10px"></div>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"><
/script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.
7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-
validate/1.17.0/jquery.validate.min.js"></script>
</body>
</html>
Selanjutnya buat file baru di dalam folder application/controllers, dan beri
nama file tersebut dengan "Dashboard.php", kemudian masukkan kode
berikut ini:

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

class Dashboard extends CI_Controller {

public function __construct()

{
parent::__construct();
//load model admin
$this->load->model('admin');
}

public function index()

{
if($this->admin->logged_id())
{

$this->load->view("dashboard");

}else{

//jika session belum terdaftar, maka redirect ke halaman login

redirect("login");

}
}

public function logout()

{
$this->session->sess_destroy();
redirect('login');
 }

Selanjutnya buat file baru di folder application/views, dan beri nama

dengan "dashboard.php", dan masukkan kode berikut ini:

<!DOCTYPE html>
<html>
<head>
<title> Dashboard - Login CodeIgniter & Bootstrap</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/b
ootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/f
ont-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="colla
pse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Login CodeIgniter & Bootstrap</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<div class="navbar-form navbar-right">
<a href="<?php echo base_url() ?>index.php/dashboard/logout" type=
"submit" class="btn btn-success"><i class="fa fa-sign-out"></i> Logout</a>
</div>
 </div>
</nav>
<div class="container" style="margin-top: 80px">
<div class="row">
<div class="col-md-3">
<div class="list-group">
<a href="#" class="list-group-item active" style="text-align: center
;background-color: black;border-color: black">
ADMINISTRATOR
</a>
<a href="dashboard.php" class="list-group-item"><i class="fa fa-dash
board"></i> Dashboard</a>
<a href="#" class="list-group-item"><i class="fa fa-book"></i> Blog<
/a>
<a href="#" class="list-group-item"><i class="fa fa-folder"></i> Kat
egori</a>
<a href="#" class="list-group-item"><i class="fa fa-comments-o"></i>
Komentar</a>
<a href="logout.php" class="list-group-item"><i class="fa fa-sign-ou
t"></i> Logout</a>
</div>
</div>
<div class="col-md-9">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-dashboard"></i> Dashboard<
/h3>
</div>
<div class="panel-body">
Selamat Datang <b><?php echo $this->session->userdata("user_nama")
?></b> di halaman Administrator System
</div>
</div>
</div>
</div>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"><

/script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.
7/js/bootstrap.min.js"></script>
</body>
</html>

Oke, terakhir buka file routes.php di folder application/config, ubahkan

kode berikut ini:

$route['default_controller'] = 'welcome';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;

Menjadi seperti berikut ini:

$route['default_controller'] = 'login';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;

Oke, sekarang coba jalankan projectnya dengan mengetikan di adress bar

browser, http://localhost/ci-login, maka jika berhasil tampilannya kurang
lebih seperti berikut ini:
Silahkan coba masukkan dengan username dan password
menggunakan "admin", maka kurang lebih tampilan dashboardnya akan
seperti berikut ini:
Untuk source code silhkan download
di https://github.com/rubypedia/codeigniter-login-session-bootstrap