Membuat Login dengan framework Codeiginiter. Untuk menjaga keamanan sebuah sistem, tentu proses login sangat dibutuhkan untuk mengatur proses identifikasi para pengguna. Kali ini saya akan bahas mengenai pembuatan sistem login pada Codeigniter dengan Jquery dan Jquery EasyUi.
Silahkan disimak….
Persiapan :
- Database
- Framework Codeiginter. Silahkan download di situs Resminya.
- Jquery dan Jquery EasyUi. Download
Database :
- Buat Database dengan nama apa saja (Terserah anda). Saya menggunakan nama blog
- Untuk lebih cepatnya silahkan import atau copy paste query berikut, kemudian jalankan query pada SQL phpMyAdmin/ tool favorit anda.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
USE `blog`; /*Table structure for table `operator` */ DROP TABLE IF EXISTS `operator`; CREATE TABLE `operator` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(255) DEFAULT NULL, `password` varchar(255) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=latin1; /*Data for the table `operator` */ insert into `operator`(`id`,`username`,`password`) values (1,'admin','21232f297a57a5a743894a0e4a801fc3'); |
Framework Codeigniter :
Aktifkan library database dan session pada file application/config/autoload.php. Hal ini untuk menggunakan fungsi yang telah disiapkan oleh codeiginter.
|
1 |
$autoload['libraries'] = array('database','session'); |
Aktifkan juga helper url dan form pada file application/config/autoload.php
|
1 |
$autoload['helper'] = array('url','form'); |
Isikan encryption key pada file application/config/config.php. isikan sesuai keinginan, pada kasus ini saya menggunakan onhacker.
|
1 |
$config['encryption_key'] = 'onhacker'; |
Koneksikan Codeigniter dengan mysql pada file application/config/database.php
Pada baris hostname : localhost, username : root, password dikosongkan jika mysql tidak menggunakan password, database : blog.
|
1 2 3 4 |
'hostname' => 'localhost', 'username' => 'root', 'password' => '', 'database' => 'blog', |
Membuat Form Login
- Membuat Controller login.php
Buat sebuah file dengan nama Login.php pada folder apllication/controllers. didalam file ini, kita akan membuat function index untuk menampilkan halaman login, fungction ceklogin untuk melakukan pengecekan/validasi proses login, function logout dan function home setelah login berhasil.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<?php defined('BASEPATH') OR exit('No direct script access allowed'); class Login extends CI_Controller { function __construct() { parent::__construct(); } function index(){ $this->load->view('login_view'); } function ceklogin(){ $data = $this->input->post(); $this->db->where("username",$data['username']); $this->db->where("password",md5($data['password'])); $res = $this->db->get("operator"); $rows = $res->row(); if($res->num_rows() == 1 ) { // login berhasil $this->session->set_userdata("operator_login",true); $this->session->set_userdata("operator_username",$data['username']); $ret = array("success"=>true); } else { $ret = array("success"=>false,"pesan"=> "Login Gagal. Username dan password tidak diterima"); } echo json_encode($ret); } function home(){ $this->load->view('home'); } function logout(){ $this->session->unset_userdata("operator_login"); $this->session->unset_userdata("operator_username"); redirect("login"); } } |
- Membuat View login_view.php
Jika kita perhatikan pada baris ke 12 script diatas, function tersebut memerintahkan untuk menampilkan file yang bernama login_view.php pada folder apllication/views. Selanjutnya kita akan membuat file tersebut dengan cara buat sebuah file dengan nama login_view.php pada folder application/views.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<form id="login_form" method="post"> <table> <tr> <td>Username</td> <td>:</td> <td><input type="text" name="username"></td> </tr> <tr> <td>Password</td> <td>:</td> <td><input type="password" name="password"></td> </tr> <tr> <td colspan="2"><a href="javascript:void(0)" onclick="go_login()">Login</a></td> </tr> </table> </form> |
Selanjutnya panggil file jquery dan jquery EasyUi yang telah didownload tadi, letakkan kedua file tersebut terlebih dahulu pada folder assets. Buat folder assets jika belum ada. Jika sudah, copy dan paste script berikut tepat paling bawah pada file login_view.php.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script src="<?php echo base_url("assets") ?>/jquery.min.js"></script> <script src="<?php echo base_url("assets") ?>/jquery.easyui.min.js"></script> <script type="text/javascript"> function go_login(){ $('#login_form').form('submit',{ url: '<?php echo site_url("login/ceklogin"); ?>', success: function(result){ console.log(result); result = result.replace(/\s+/g, " "); obj = $.parseJSON(result); if (obj.success == false ){ alert(obj.pesan); } else { location.href='<?php echo site_url("login/home") ?>' } } }); return false; } </script> |
- Membuat View home.php
Perhatikan baris ke 34 pada file Login.php. Function tersebut memerintahkan untuk menampilkan file bernama home.php yang terletetak pada folder views. Function ini akan di ekseskusi setelah login berhasil. Selanjutnya buat file home.php tersebut, copy dan pastekan script berikut
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <title>Home</title> </head> <body> <p>Selamat datang <?php echo $this->session->userdata("operator_username") ?></p> <p><a href="javascript:void(0)" onclick="javascript:location.href=('<?php echo site_url("login/logout") ?>')"><span>Logout</span></a></p> </body> </html> |
Silahkan Akses http://localhost/blog/login/
Jika username/ password yang dimasukkan salah
Login Berhasil
Silahkan tinggalkan komentar jika ada pertanyaan
