Selasa, 04 Februari 2014

2/04/2014
5
Kali ini saya akan sedikit memberikan contoh penggunaan atau pemakaian ajax untuk proses login pada EasyUI dan CodeIgniter. Tentunya karena ini menggunakan teknologi Ajax, sehingga untuk proses login dan logout tidak perlu pindah halaman dan tidak berat pula. Sebab semua komunikasi data yang dikirim dan diterima dalam bentuk JSON.

Sebelum memulai ke pembuatan kode, silahkan Anda buat database dan table user terlebih dahulu. Karena ini hanya contoh, saya disini menggunakan database test dan membuat table dengan struktur berikut:

CREATE TABLE IF NOT EXISTS `tbl_user` (
  `id` int(3) NOT NULL AUTO_INCREMENT,
  `nama` varchar(100) NOT NULL,
  `username` varchar(50) NOT NULL,
  `password` varchar(32) NOT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `username` (`username`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8;

INSERT INTO `tbl_user` (`id`, `nama`, `username`, `password`) VALUES
(1, 'Dida Nurwanda', 'admin', '21232f297a57a5a743894a0e4a801fc3'); 

Jika pembuatan database sudah, selanjutnya siapkan project codeigniter baru dan siapkan juga jquery dan jquery easyui Anda. Oya, jangan lupa atur konfigurasi databasenya. Kemudian buka folder libraries dan buat library baru dengan nama Auth.php

<?php

class Auth {
    
    public $core;
    
    public function __construct() {
        $this->core =& get_instance();
        $this->core->load->library('session');
    }

    public function authenticate(CI_DB_result $query) {
        $data = $query->row();
        $this->core->session->set_userdata(array(
            'id' => $data->id,
            'logged_in' => TRUE
        ));
    }
    
    public function is_guest() {
        if($this->core->session->userdata('logged_in') == TRUE) {
            return FALSE;
        }
        return TRUE;
    }
    
    public function get_id() {
        return $this->core->session->userdata('id');
    }
    
    public function logout() {
        $this->core->session->sess_destroy();
    }

}

Setelah itu buka controller dan edit file Welcome.php

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

class Welcome extends CI_Controller {

    public function __construct() {
        parent::__construct();
        $this->load->helper('url');
        $this->load->library('Auth');
        $this->load->database();
    }

    public function index()
    {
        $this->load->view('index');
    }
    
    public function main()
    {
        $this->load->view('main');
    }

    public function login()
    {
        $this->load->view('login');
    }
    public function logout()
    {
        $this->auth->logout();
    }
    
    public function proses_login()
    {
        $this->output->set_content_type('application/json');
        if (isset($_POST))
        {
            $this->db->where('username', $this->input->post('username'));
            $this->db->where('password', md5($this->input->post('password')));
            $db = $this->db->get('tbl_user');

            if($db->num_rows() > 0) {
                $this->auth->authenticate($db);
                echo json_encode(array(
                    'success'=>true, 
                    'auth_id'=>$this->auth->get_id()
                ));
            } else {
                echo json_encode(array('success'=>false));
            }
        }
    }
}

Jika sudah, kita mulai pembuatan view. Buat file pada folder view dengan nama index.php

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>EasyUI Ajax Login</title>
    <link rel="stylesheet" href="<?php echo base_url('assets/themes/default/easyui.css'); ?>" />
    <link rel="stylesheet" href="<?php echo base_url('assets/themes/icon.css'); ?>" />
    <script type="text/javascript" src="<?php echo base_url('assets/jquery.min.js'); ?>"></script>
    <script type="text/javascript" src="<?php echo base_url('assets/jquery.easyui.min.js'); ?>"></script>
    <style type="text/css">
        .fill 
        {
            background-color: #DFE8F6;
        }
        body
        {
            margin: 0;
            padding: 0;
            color: #555;
            font: normal 10pt Arial,Helvetica,sans-serif;
            background: #DFE8F6;
        }
        .header-view
        {
            padding-left: 10px;
            color: #555;
        }
    </style>
</head>
<body class="easyui-layout">

<!-- north -->
<div region="north" class="fill header-view" style="height: 110px" border="false" split="true">
    <h1>CodeIgniter EasyUI</h1>
    <h2>Implementasi Ajax Login pada CodeIgniter dan Easyui</h2>
</div>

<!-- west -->
<div region="west" class="fill" border="true" title="Navigation" style="width: 250px" split="true">
    <div class="easyui-accordion" fit="true" border="false" iconCls="icon-redo">
        <div title="Menu 1" iconCls="icon-reload">
            <ul class="easyui-tree">
                <li><a href="javascript:void(0)" id="log">Logout</a></li>
                <li>Child Menu 1</li>
                <li>Child Menu 2</li>
            </ul>
        </div>
        <div title="Menu 2" iconCls="icon-search">
            <ul class="easyui-tree">
                <li>Child Menu 1</li>
                <li>Child Menu 2</li>
                <li>Child Menu 3</li>
            </ul>
        </div>
        <div title="Menu 3" iconCls="icon-help">
            <ul class="easyui-tree">
                <li>Child Menu 1</li>
                <li>Child Menu 2</li>
                <li>Child Menu 3</li>
            </ul>
        </div>
    </div>
</div>

<!-- center -->
<div region="center" split="true" title="Main Content" id="content">

</div>

<!-- south -->
<div region="south" class="fill" style="height: 35px; padding: 5px;" split="true">
Copyright &copy; 2014 - Dida Nurwanda
</div>

<script type="text/javascript">
var AUTH_ID = '<?php echo $this->auth->get_id(); ?>';
jQuery(function($) {
    if(AUTH_ID == '') {
        show_login_view();
    } else {
        show_main_view();
    }
    
    $('#log').click(function() {
        if (AUTH_ID != '') {
            $.get('<?php echo site_url('welcome/logout'); ?>', [], function(e) {
                show_login_view();
                AUTH_ID = '';
            });
        }
    });
});

function show_login_view() {
    $('#log').html('Login');
    $('#content').panel('refresh', '<?php echo site_url('welcome/login'); ?>');
}
    
function show_main_view() {
    $('#log').html('Logout');
    $('#content').panel('refresh', '<?php echo site_url('welcome/main'); ?>');
}
</script>

</body>
</html>

Atur path untuk jquery dan jquery easyui anda. Kemudian buat file login.php

<div style="padding: 13% 30%">
    <div class="easyui-panel fill" style="width: 450px; height: 200px;" title="Login" iconCls="icon-redo">
        <form id="form-login" method="post" style="padding: 20px;" novalidate onsubmit="return false">
            <div class="form-item">
                <label for="username">Username</label> 
                <br />
                <input type="text" name="username" class="easyui-validatebox" required="true" style="width: 100%" />
            </div>
            <div class="form-item">
                <label for="password">Password</label> 
                <br />
                <input type="password" name="password" class="easyui-validatebox" required="true" style="width: 100%" />
            </div>
            <div class="form-item">
                <br />
                <a id="submit-login" class="easyui-linkbutton" iconCls="icon-ok">Login</a>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript">
    $('#submit-login').click(function() {
        $.post('<?php echo site_url('welcome/proses_login'); ?>', $('#form-login').serialize(), function(e) {
            if (e.success == true) {
                AUTH_ID = e.auth_id;
                show_main_view();
            }
        });
    });
</script>
Buat juga file dengan nama main.php

<div id="main-content" class="easyui-tabs" data-options="fit:false,border:false" style="padding:1px" >
    <div title="Selamat Datang" data-options="iconCls: 'icon-filter'">
        <h1>Selamat Datang</h1>
    </div>
</div> 

Selesai deh, silahkan di analisa dan di kembangkan. Untuk username dan password yaitu "admin"

Berikut penampakannya :


Download
Download
Password : didanurwanda.blogspot.com

5 komentar:

Mohon tidak mencantumkan URL pada komentar yang bersifat promosi.