Login Session Using CodeIgniter and Bootstrap
To make this session login program then create a new folder in the web root, then copy the plugin codeigniter and bootstrap into the new folder. The plugin file consists of the folder application, folder system, folder User guide, and folder bootstrap (subfolder css , subfolder js, and subfolder fonts). Create a new database with the name mydata or up to you then copy the syntax below and paste it into sql menu the application of the mysql server such as phpmyadmin or mysql workbench.
CREATE DATABASE IF NOT EXISTS `mydata` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `mydata`;
CREATE TABLE IF NOT EXISTS `login` (
`idlogin` int(11) NOT NULL AUTO_INCREMENT,
`fullname` varchar(45) NOT NULL,
`username` varchar(100) NOT NULL,
`password` varchar(100) NOT NULL,
PRIMARY KEY (`idlogin`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;
INSERT INTO `login` (`idlogin`, `fullname`, `username`, `password`) VALUES
(1, 'Ghazali', 'ghazali', 'a7b0175aa46d84f8ecc5c2973b2887e7'),
(2, 'admin', 'admin', '21232f297a57a5a743894a0e4a801fc3');
Find the file /var/www/html/main/new folder/application/config/autoload.php and edit the syntax as below.
$autoload['libraries'] = array('database', 'session', 'form_validation');
$autoload['helper'] = array('url', 'file', 'html', 'form');
$autoload['model'] = array('mlogin');
Find the file /var/www/html/main/new folder/application/config/config.php and edit the syntax as below.
$config['base_url'] = 'http://localhost/main/new folder/';
$config['encryption_key'] = 'tezadiedata';
Find the file /var/www/html/main/new folder/application/config/database.php and edit the syntax as below.
$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'root';
$db['default']['password'] = 'pidie';
$db['default']['database'] = 'mydata';
$db['default']['dbdriver'] = 'mysql';
Find the file /var/www/html/main/new folder/application/controllers/welcome.php and edit the syntax as below.
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Welcome extends CI_Controller {
/**
* Index Page for this controller.
*
* Maps to the following URL
* http://example.com/index.php/welcome
* - or -
* http://example.com/index.php/welcome/index
* - or -
* Since this controller is set as the default controller in
* config/routes.php, it's displayed at http://example.com/
*
* So any other public methods not prefixed with an underscore will
* map to /index.php/welcome/<method_name>
* @see http://codeigniter.com/user_guide/general/urls.html
*/
public function index()
{
$this->load->view('vlogin');
}
}
/* End of file welcome.php */
/* Location: ./application/controllers/welcome.php */
Make /var/www/html/main/new folder/application/views/vlogin.php
<!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>Login CodeIgniter</title>
<!-- Bootstrap -->
<link href="<?php echo base_url() ?>bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- 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="<?php echo base_url() ?>bootstrap/js/html5shiv.min.js"></script>
<script src="<?php echo base_url() ?>bootstrap/js/respond.min.js"></script>
<![endif]-->
</head>
<body style="background:#eeeeee;">
<p>
</p>
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-body">
<h3><small>Silahkan Login Dulu!</small></h3><hr/>
<?php echo form_open('clogin'); ?>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" name="username" placeholder="Enter Username">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Enter Password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<?php echo form_close(); ?>
</div>
</div>
</div>
<div class="col-md-4"></div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="<?php echo base_url() ?>bootstrap/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="<?php echo base_url() ?>bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Make /var/www/html/main/new folder/application/views/vhome.php
<!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>Login CodeIgniter</title>
<!-- Bootstrap -->
<link href="<?php echo base_url() ?>bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- 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="<?php echo base_url() ?>bootstrap/js/html5shiv.min.js"></script>
<script src="<?php echo base_url() ?>bootstrap/js/respond.min.js"></script>
<![endif]-->
</head>
<body style="background:#eeeeee;">
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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() ?>index.php/chome">MyLogin</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<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="#">Article</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Download <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="<?php echo base_url() ?>index.php/chome"><?php echo $nama; ?></a></li>
<li><a href="<?php echo base_url() ?>index.php/chome/logout">Logout</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="jumbotron">
<h1>Hello, <?php echo $nama; ?>!</h1>
<p>Selamat Datang Pada Website Operator ini</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="<?php echo base_url() ?>bootstrap/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="<?php echo base_url() ?>bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Make /var/www/html/main/new folder/application/models/mlogin.php
<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
class Mlogin extends CI_Model {
function __construct() {
parent::__construct();
$this->load->database();
}
function login($username, $password) {
$this->db->select('idlogin,fullname, username, password');
$this->db->from('login');
$this->db->where('username', $username);
$this->db->where('password', md5($password));
$this->db->limit(1);
$query = $this->db->get();
if($query->num_rows() == 1) {
return $query->result();
} else {
return false;
}
}
}
/* End of file modelog.php */
/* Location: ./application/models/mlogin.php */
Make /var/www/html/main/new folder/application/controllers/clogin.php
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Clogin extends CI_Controller {
function __construct() {
parent::__construct();
}
function index() {
$this->form_validation->set_rules('username', 'Username', 'trim|required|xss_clean');
$this->form_validation->set_rules('password', 'Password', 'trim|required|xss_clean|callback_check_database');
if($this->form_validation->run() == FALSE) {
$this->load->view('vlogin');
} else {
redirect(base_url('index.php/chome'), 'refresh');
}
}
function check_database($password) {
$username = $this->input->post('username');
$result = $this->mlogin->login($username, $password);
if($result) {
$sess_array = array();
foreach($result as $row) {
$sess_array = array('idlogin' => $row->idlogin,'fullname' => $row->fullname,'username' => $row->username);
$this->session->set_userdata('logged_in', $sess_array);
}
return TRUE;
} else {
$this->form_validation->set_message('check_database', 'Invalid username or password');
return FALSE;
}
}
}
/* End of file verifylogin.php */
/* Location: ./application/controllers/clogin.php */
Make /var/www/html/main/new folder/application/controllers/chome.php
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Chome extends CI_Controller {
function index() {
if($this->session->userdata('logged_in'))
{
$session_data = $this->session->userdata('logged_in');
$data['nama'] = $session_data['fullname'];
$data['username'] = $session_data['username'];
$data['id'] = $session_data['idlogin'];
$this->load->view('vhome', $data);
} else {
redirect('welcome', 'refresh');
}
}
function logout() {
$this->session->unset_userdata('logged_in');
$this->session->sess_destroy();
redirect(base_url('index.php/welcome'), 'refresh');
}
}
/* End of file welcome.php */
/* Location: ./application/controllers/chome.php */
Complete, run in your favorite browser.
