Setelah berhasil mengintegrasikan CodeIgniter dan Template Admin Bootstrap, selanjutnya pada postingan kali ini saya akan memberikan tutorial Membuat Form Login Dengan CodeIgniter. Agar lebih jelas dan berhasil mencoba contoh tutorial ini sebaiknya baca dan ikuti postingan sebelumnya mengenai Cara Menghilangkan index.php dan Pengaturan Dasar Pada CodeIgniter dan Integrasi CodeIgniter dan Template Admin Bootstrap. Karena pada contoh ini saya akan menggunakan Template SB admin Bootstrap dan pada postingan ini saya tidak menjelaskan lagi langkah - langkah settingan awal CodeIgniter dan mengintegrasikan CodeIgniter dan Template Admin Bootstrap. Ok, langsung saja, berikut langkah - langkahnya :
1. Buat database MySQL (contoh : db_latihan), dan tabel tbl_user dengan struktur tabel sebagai berikut :
--
-- Table structure for table `tbl_user`
--
CREATE TABLE IF NOT EXISTS `tbl_user` (
`nama_user` varchar(50) COLLATE latin1_general_ci NOT NULL,
`password` varchar(50) COLLATE latin1_general_ci NOT NULL,
`nama_lengkap` varchar(100) COLLATE latin1_general_ci NOT NULL,
PRIMARY KEY (`nama_user`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci;
--
-- Dumping data for table `tbl_user`
--
INSERT INTO `tbl_user` (`nama_user`, `password`, `nama_lengkap`) VALUES
('admin', '21232f297a57a5a743894a0e4a801fc3', 'Jaka Kharisma Dhona');
2. Setting koneksi database, buka file database.php yang berada di dalam folder config, ubah pada bagian berikut :
$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'root'; //diisi sesuai nama user mysql
$db['default']['password'] = ''; //diisi sesuai password mysql
$db['default']['database'] = 'db_latihan'; //diisi sesuai nama database mysql
$db['default']['dbdriver'] = 'mysql';
$db['default']['dbprefix'] = '';
$db['default']['pconnect'] = TRUE;
$db['default']['db_debug'] = TRUE;
$db['default']['cache_on'] = FALSE;
$db['default']['cachedir'] = '';
$db['default']['char_set'] = 'utf8';
$db['default']['dbcollat'] = 'utf8_general_ci';
$db['default']['swap_pre'] = '';
$db['default']['autoinit'] = TRUE;
$db['default']['stricton'] = FALSE;
3. Buka file config.php yang berada di dalam folder config, ubah pada bagian $config['base_url'] sebagai berikut :
$config['base_url'] = 'http://localhost/latihan/'; //diisi sesuai url utama / domain yang kita buat
dan $config['encryption_key'] ubah sebagai berikut :
$config['encryption_key'] = 'alkarizma'; // bisa diisi sesuai keinginan
4. Selanjutnya buka file config.php yang berada di dalam folder config, ubah pada bagian $autoload['libraries'] sebagai berikut :
$autoload['libraries'] = array('database','session','form_validation');
5. Karena halaman awal yang akan diload adalah halaman login, jadi perlu kita rubah dahulu settingan default_controller pada file routes.php yang berada di dalam folder config sebagai berikut :
$route['default_controller'] = "login";
6. Sesuai dengan konsep MVC (Model, View, Controller), langkah pertama yang kita buat adalah file model yang berisi function query data untuk cek login user. Buat file m_user di dalam folder models, ketikkan kode sebagai berikut :
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class M_user extends CI_Model {
function cek($nama_user, $password) {
$this->db->where("nama_user", $nama_user);
$this->db->where("password", $password);
return $this->db->get("tbl_user");
}
}
7. Setelah itu kita buat view desain form login, tapi sebelumnya karena pada Template SB admin Bootstrap tidak ada desain form login, kama kita perlu membuat desain css untuk form login. buat file login.css di dalam folder assets/css (baca : Integrasi CodeIgniter dan Template Admin Bootstrap), ketikkan script css sebagai berikut :
/** Login Page **/
#login {
padding-top: 40px;
padding-bottom: 40px;
}
#login .form-signin {
max-width: 300px;
padding: 19px 29px 29px;
margin: 0 auto 20px;
background-color: #fff;
border: 1px solid #e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
#login .form-signin .form-signin-heading,
#login .form-signin .checkbox {
margin-bottom: 10px;
}
#login .form-signin input[type="text"],
#login .form-signin input[type="password"] {
font-size: 16px;
height: auto;
margin-bottom: 15px;
padding: 7px 9px;
}
8. Berikutnya kita buat desain view form login, buat file login.php di dalam folder views/admin (baca : Integrasi CodeIgniter dan Template Admin Bootstrap), ketikkan kode sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title>Admin Login</title>
<!-- Bootstrap -->
<link href="<?php base_url() ?>assets/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="<?php base_url() ?>assets/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
<link href="<?php base_url() ?>assets/css/login.css" rel="stylesheet" media="screen">
</head>
<body id="login">
<div class="container">
<form class="form-signin" action="<?php echo base_url('login/proses'); ?>" method="post">
<h2 class="form-signin-heading">Silahkan Login</h2>
<?php
if (validation_errors() || $this->session->flashdata('result_login')) {
?>
<div class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Warning!</strong>
<?php echo validation_errors(); ?>
<?php echo $this->session->flashdata('result_login'); ?>
</div>
<?php } ?>
<input type="text" class="input-block-level" name="namauser" placeholder="Nama User">
<input type="password" class="input-block-level" name="password" placeholder="Password">
<button class="btn btn-primary" type="submit">Login</button>
</form>
</div> <!-- /container -->
</body>
</html>
9. Selanjutnya kita membuat file di dalam folder controllers dengan nama login.php lalu ketikkan code sebagai berikut :
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Login extends CI_Controller {
function __construct() {
parent::__construct();
session_start();
$this->load->model('m_user');
}
function index()
{
$this->load->view('admin/login');
}
function proses() {
$this->form_validation->set_rules('namauser', 'namauser', 'required|trim|xss_clean');
$this->form_validation->set_rules('password', 'password', 'required|trim|xss_clean');
if ($this->form_validation->run() == FALSE) {
$this->session->set_flashdata('result_login', '<br>Nama atau Password belum diisi.');
redirect();
} else {
$tgl_login=date("Y-m-d");
$jam_login=date("H:i:s");
$usr = $this->input->post('namauser');
$psw = $this->input->post('password');
$u = mysql_real_escape_string($usr);
$p = md5(mysql_real_escape_string($psw));
$cek = $this->m_user->cek($u, $p);
if ($cek->num_rows() > 0) {
//login berhasil, buat session
foreach ($cek->result() as $qad) {
$sess_data['nama'] = $qad->nama_lengkap;
$sess_data['u_name'] = $qad->nama_user;
$sess_data['pwd'] = $qad->password;
$sess_data['tgl_login'] = $tgl_login;
$sess_data['jam_login'] = $jam_login;
$this->session->set_userdata($sess_data);
}
redirect('dashboard');
} else {
$this->session->set_flashdata('result_login', '<br>Username atau Password yang anda masukkan salah.');
redirect();
}
}
}
function logout() {
$this->session->sess_destroy();
redirect('login');
}
}
Sekarang bisa kita coba test login, buka browser, ketikkan url localhost/latihan, lalu coba masukkan nama user : admin dan pasword : admin. Ketika login berhasil maka kita akan di arahkan ke halaman dashboard yang pernah kita buat sebelumnya pada postingan Integrasi CodeIgniter dan Template Admin Bootstrap.
makasih gan, tutorialnya mantabs
ReplyDeleteTempat Pengiriman Barang Terdekat