Dalam tutorial ini, kita akan membuat form login sederhana di CodeIgniter dengan fungsi session logout. Dalam tutorial sebelumnya, kita belajar membuat form registrasi sederhana dengan verifikasi email pengguna/user. Sebelum melangkah lebih jauh anda harus membaca tutorial sebelumnya tentang form registrasi untuk memahami database tutorial ini karena kita menggunakan database yang sama untuk membuat form login.
Membuat Form Register Dengan Codeignniter
Let's Go To Ngoding
Pertama, kita akan membuat file controller kita yang mengontrol arus login pengguna ke aplikasi kita. Di sini, kami menggunakan file controller sebelumnya yang telah kami buat dalam formulir pendaftaran di tutorial kami sebelumnya.
Controller File
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 45 46 47 48 49 50 51 52 53 54 | public function login()
{
$this->load->view('login');
}
public function check_login()
{
$email = $_POST['email'];
$pass = hash('md5', $_POST['password']);
$this->form_validation->set_rules('email', 'Email', 'required|valid_email');
$this->form_validation->set_rules('password', 'Password', 'required|min_length[6]|max_length[15]');
if($this->form_validation->run() == FALSE)
{
$this->load->view('login');
}
else
{
$res = $this->user_model->check_user($email , $pass);
if(!empty($res))
{
if($res[0]['status'] == '1')
{
$data['user'] = $res[0]['fname'];
$this->setSession($res[0]['id'],$res[0]['fname']);
$this->load->view('profile', $data);
}
else
{
$this->session->set_flashdata('msg','<div class="alert alert-danger text-center">Verify your email address first to login...</div>');
redirect(base_url().'user/login');
}
}
else
{
$this->session->set_flashdata('msg','<div class="alert alert-danger text-center">email/password not found</div>');
redirect(base_url().'user/login');
}
}
}
function setSession($userId,$userName) {
$userSession = array('userId'=>$userId,
'userName'=>$userName,
'loggedIn'=>TRUE );
$this->session->set_userdata($userSession);
}
function logout(){
$this->session->sess_destroy();
redirect(base_url().'user/login', 'refresh');
}
|
Copy dan paste kode diatas ke file controller. Disini, kita menggunakan empat method yaitu login(), check_login(), setSession() dan logout().
method login() memuat formulir login yang akan segera kita buat di direktori tampilan CodeIgniter kita.
Method check_login() mengendalikan semua aliran proses login dalam aplikasi kita. Method ini pertama kali memeriksa validasi data masukan dengan bantuan fungsi form_validation form.validation CodeIgniter. Pada validasi yang berhasil, ia memeriksa email dan password pengguna di database dan mengembalikan hasil array dari file model yang kita simpan ke variabel $ res dan pada kegagalan validasi, load form login dengan error msg seperti gambar di bawah ini.
dan jika statusnya 1 maka pengguna berhasil masuk ke aplikasi kita dan profilnya dengan link logout akan ditampilkan seperti gambar di bawah ini atau hal lain yang ingin ditampilkan kepada pengguna.
Method setSession() digunakan disini untuk mengatur sesi login bagi pengguna, ini untuk melacak aktivitasnya. Untuk mengetahui lebih lanjut tentang sesi Codeigniter mohon membaca tutorial selanjutnya yaitu Bagaimana Cara Menggunakan Session di CodeIgniter
Method logout() digunakan untuk log out pengguna berhasil dari aplikasi dengan menghancurkan sesi. Bila pengguna mengklik link logout maka fungsi logout akan dipanggil untuk log out pengguna dan sesi akan dihancurkan(baca: destroyed).
Model File
1 2 3 4 5 6 | public function check_user($email,$pass)
{
$sql = "SELECT status , id , fname FROM user where email = ? and password = ?";
$data = $this->db->query($sql, array($email,$pass));
return ($data->result_array()) ;
}
|
Salin kode di atas dan tempelkan ke file model Anda. Kode diatas bisa anda pahami sendiri, jadi tidak perlu dijelaskan secara rinci. Di sini kita cukup menjalankan query untuk mengecek email pengguna dan kata sandi dan mengembalikan hasil array ke file controller.
View File
Untuk membuat tampilan form login kita, kita menggunakan framework bootstrap yang terkenal itu(katanya hehe). Disini kita buat dua view file login.php untuk menampilkan form login ke user dan profile.php untuk menampilkan profil pengguna pada login yang berhasil.
login.php file
1: <!DOCTYPE html>
2: <html lang="en">
3: <head>
4: <title>Login</title>
5: <meta charset="utf-8">
6: <meta http-equiv="X-UA-Compatible" content="IE=edge">
7: <meta name="viewport" content="width=device-width, initial-scale=1">
8: <!-- Latest compiled and minified CSS -->
9: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
10: <style type="text/css">
11: .form-box{
12: max-width: 500px;
13: position: relative;
14: margin: 5% auto;
15: }
16: </style>
17: </head>
18: <body>
19: <div class="wrapper">
20: <div class="container">
21: <div class="row">
22: <div class="form-box">
23: <div class="panel panel-primary">
24: <div class="panel-heading text-center">
25: <h3>Login</h3>
26: </div>
27: <div class="panel-body">
28: <div class="row">
29: <div class="col-sm-12">
30: <?php echo $this->session->flashdata('msg'); ?>
31: </div>
32: </div>
33: <form action="<?php echo base_url() ;?>user/check_login" method="post">
34: <div class="form-group">
35: <label class="control-label" for="pswd">Email</label>
36: <div>
37: <input type="email" class="form-control" id="email" name="email" placeholder="Email" required="">
38: <span class="text-danger"><?php echo form_error('email'); ?></span>
39: </div>
40: </div>
41: <div class="form-group">
42: <label class="control-label" for="pswd">Password</label>
43: <div>
44: <input type="password" class="form-control" id="pswd" name="password" placeholder="Password" required="">
45: <span class="text-danger"><?php echo form_error('password'); ?></span>
46: </div>
47: </div>
48: <div class="form-group">
49: <div class="row">
50: <div class="col-sm-offset-5 col-sm-3 btn-submit">
51: <button type="submit" class="btn btn-success">Login</button>
52: </div>
53: </div>
54: </div>
55: </form>
56: </div>
57: <div class="panel-footer text-center">
58: <p><a href="<?php echo base_url() ?>"> Don't Have an Account? REGISTER</a></p>
59: <h5><a href="#">Click Here for more tutorials</a></h5>
60: </div>
61: </div>
62: </div>
63: </div>
64: </div>
65: </div>
66: <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
67: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
68: <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
69: </body>
70: </html>
profile.php file
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 45 46 47 48 49 50 51 52 | <!DOCTYPE html> <html lang="en"> <head> <title>Profile</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" > <style type="text/css"> .form-box{ max-width: 500px; position: relative; margin: 5% auto; } </style> </head> <body> <div class="wrapper"> <div class="container"> <div class="row"> <div class="form-box"> <div class="panel panel-primary"> <div class="panel-heading text-center"> <h3>Profile Summary</h3> </div> <div class="panel-body"> <div class="alert alert-success"> Successfully Login </div> <h1> Welcome <?php echo $user ?> </h1> </div> <div class="panel-footer text-center"> <a href="<?php echo base_url(); ?>user/logout">Logout</a> </div> </div> </div> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html> |
Terima kasih telah membaca tutorial ini. Semoga Anda sudah mendapatkan konsep sistem login di CodeIgniter. Jika anda memiliki pertanyaan tentang tutorial ini dan saran atau peningkatan apa pun kemudian beri tahu saya melalui komentarnya. Terimakasih
0 komentar :
Post a Comment