Cara Mudah Membuat Form Login dengan Codeigniter dan MySQL
Rizaldi Maulidia Achmad
Beberapa waktu yang lalu saya sudah membuat catatan / tutorial mengenai Cara Mudah Membuat Form Login dengan Session PHP. Berbeda dengan tutorial yang akan kita bahas kali ini, pada tutorial ini kita akan membuat form login dengan menggunakan Framework Codeigniter 3 dan Database MySQL. Tentunya dalam tutorial ini kita akan menggunakan yang namanya “Session“. Apa itu Session? Session dapat menyimpan sebuah informasi dimana informasi tersebut bisa kita akses pada semua halaman website yang kita buat. Secara default, Session akan terhapus sampai Anda menutup browser. Jadi intinya Session ini bisa menyimpan informasi yang bisa di akses pada semua halaman sampai browser nya ditutup.
Akun User
Saya telah menyiapkan 2 data user untuk tutorial ini, diantaranya :
- User 1
Username : rizaldi
Password : 12345678 - User 2
Username : siska
Password : siska123
DEMO
Sebelum masuk ke tutorialnya. Mungkin ada yang mau lihat demonya terlebih dahulu. Silahkan klik link berikut untuk melihat demonya : Lihat Demo.
STEP 1 – PERSIAPAN
Berikut ini adalah hal-hal yang harus dipersiapkan :
- Download Framework Codeigniter, klik link berikut : download.
- Buat sebuah folder baru dengan nama login_ci, lalu simpan pada folder xampp/htdocs/.
- Ekstrak codeigniter_v3.7z yang telah di download tadi.
- Copy semua file dan folder yang ada di folder codeigniter_v3 yang telah di ekstrak tadi ke folder xampp/htdocs/login_ci/.
STEP 2 – DATABASE
Pada step ini, kita akan membuat databasenya. ikuti langkah-langkah berikut ini :
- Buat sebuah database dengan nama mynotescode.
- Buat sebuah tabel dengan nama user. Struktur tabelnya sebagai berikut :
CREATE TABLE `user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(20) NOT NULL, `password` varchar(50) NOT NULL, `nama` varchar(200) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1
STEP 3 – KONFIGURASI
Karena dibuat dengan Codeigniter, pertama kita harus melakukan konfigurasi terlebih dahulu pada framework codeigniternya.
- Buka folder xampp/htdocs/login_ci/application/config/
- Buka file config.php
Cari kode berikut$config['base_url'] = '';Ubah kode tersebut jadi seperti ini :$config['base_url'] = 'http://localhost/login_ci/';
Kode diatas digunakan untuk menset baseurlnya.
Lalu simpan file tersebut. - Buka file autoload.php
Cari kode berikut ini :$autoload['libraries'] = array(); $autoload['helper'] = array();
Ubah jadi seperti ini :
$autoload['libraries'] = array('database', 'session'); $autoload['helper'] = array('url');Kode diatas digunakan untuk memuat (menload) class database dan url.
Lalu simpan file tersebut. - Buka file routes.php
Cari kode berikut ini :$route['default_controller'] = 'welcome';
Ubah jadi seperti ini :
$route['default_controller'] = 'auth';
Kode diatas digunakan untuk menset controller mana yang akan diload pertama kali. Secara default, Codeigniter telah menset default controller yaitu welcome. Disini kita set default controller menjadi auth.
Lalu simpan file tersebut. - Buka file database.php
Cari kode berikut ini :'hostname' => 'localhost', 'username' => '', 'password' => '', 'database' => '',
Ubah jadi seperti ini :
'hostname' => 'localhost', // Nama host 'username' => 'root', // Username 'password' => '', // Jika menggunakan password isi, jika tidak kosongkan saja 'database' => 'mynotescode', // Nama databasenya
Kode diatas digunakan untuk koneksi ke database.
Lalu simpan file tersebut.
STEP 4 – BUAT MODEL
Langkah selanjutnya adalah membuat modelnya. Buat sebuah file dengan nama UserModel.php, Lalu simpan pada folder xampp/htdocs/login_ci/application/models/. Berikut kodenya :
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class UserModel extends CI_Model {
public function get($username){
$this->db->where('username', $username); // Untuk menambahkan Where Clause : username='$username'
$result = $this->db->get('user')->row(); // Untuk mengeksekusi dan mengambil data hasil query
return $result;
}
}
Fungsi get() berguna untuk melakukan query ke tabel user berdasarkan username yang diinput pada form login. Fungs ini akan menghasilkan query sebagai berikut : SELECT * FROM user WHERE username=’$username’.
STEP 5 – BUAT CONTROLLER AUTH
Pada tahap ini, kita akan membuat controller untuk proses login dan logout. Buat sebuah file dengan nama Auth.php, lalu simpan pada folder xampp/htdocs/login_ci/application/controllers/. Berikut ini kodenya :
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Auth extends CI_Controller {
public function __construct(){
parent::__construct();
$this->load->model('UserModel');
}
public function index(){
if($this->session->userdata('authenticated')) // Jika user sudah login (Session authenticated ditemukan)
redirect('page/welcome'); // Redirect ke page welcome
$this->load->view('login'); // Load view login.php
}
public function login(){
$username = $this->input->post('username'); // Ambil isi dari inputan username pada form login
$password = md5($this->input->post('password')); // Ambil isi dari inputan password pada form login dan encrypt dengan md5
$user = $this->UserModel->get($username); // Panggil fungsi get yang ada di UserModel.php
if(empty($user)){ // Jika hasilnya kosong / user tidak ditemukan
$this->session->set_flashdata('message', 'Username tidak ditemukan'); // Buat session flashdata
redirect('auth'); // Redirect ke halaman login
}else{
if($password == $user->password){ // Jika password yang diinput sama dengan password yang didatabase
$session = array(
'authenticated'=>true, // Buat session authenticated dengan value true
'username'=>$user->username, // Buat session username
'nama'=>$user->nama // Buat session authenticated
);
$this->session->set_userdata($session); // Buat session sesuai $session
redirect('page/welcome'); // Redirect ke halaman welcome
}else{
$this->session->set_flashdata('message', 'Password salah'); // Buat session flashdata
redirect('auth'); // Redirect ke halaman login
}
}
}
public function logout(){
$this->session->sess_destroy(); // Hapus semua session
redirect('auth'); // Redirect ke halaman login
}
}
if($this->session->userdata(‘authenticated’))
Kode diatas berfungsi untuk mengecek apakah session dengan nama authenticated ada atau tidak. Jika ada, artinya user sudah login. Jika tidak ada, berarti user belum login.
$user = $this->UserModel->get($username)
Kode diatas berfungsi untuk memanggil fungsi get() yang ada di UserModel.php untuk mendapatkan data user yang ada didatabase berdasarkan username.
$this->session->set_flashdata(‘message‘, ‘Username tidak ditemukan‘)
Kode diatas untuk membuat session flashdata. Session ini sifatnya hanya sementara, jadi ketika sudah dibaca, maka akan otomatis terhapus. Struktur dasar kodenya adalah $this->session->set_flashdata(‘nama_session‘, ‘isi_session‘). Lebih jelasnya soal session flashdata anda bisa baca disini.
$this->session->set_userdata($session)
Kode diatas berfungsi untuk membuat session. Sebenarnya di codeigniter ada 2 opsi cara membuat array antara lain :
- Jika anda ingin membuat session lebih dari 1, sebaiknya pakai cara ini :
(dalam tutorial ini, kita menggunakan cara ini)
$session = array(
‘nama_session1’=>’isi_session1’,
‘nama_session2’=>’isi_session2’,
‘nama_session3’=>’isi_session3’
);$this->session->set_userdata($session); - Jika anda ingin membuat hanya 1 session, pakai cara ini :
$this->session->set_userdata(‘nama_session1’, ‘isi_session1’);
STEP 6 – BUAT FORM LOGIN
Pada tahap ini, kita akan membuat form loginnya. Buat sebuah file dengan nama login.php, lalu simpan pada folder xampp/htdocs/login_ci/application/views/. Berikut ini tampilan dan kodenya :
<html>
<head>
<title>Form Login</title>
</head>
<body>
<h1>Silahkan login terlebih dahulu...</h1>
<div style="color: red;margin-bottom: 15px;">
<?php
// Cek apakah terdapat session nama message
if($this->session->flashdata('message')){ // Jika ada
echo $this->session->flashdata('message'); // Tampilkan pesannya
}
?>
</div>
<form method="post" action="<?php echo base_url('index.php/auth/login') ?>">
<label>Username</label><br>
<input type="text" name="username" placeholder="Username"><br><br>
<label>Password</label><br>
<input type="password" name="password" placeholder="Password"><br><br>
<button type="submit">Login</button>
</form>
</body>
</html>
if($this->session->flashdata(‘message‘))
Kode diatas berfungsi untuk memanggil session flashdata dengan nama message yang dibuat pada controller auth fungsi login (jika data user tidak ditemukan). Struktur dasar kodenya adalah $this->session->flashdata(‘nama_session‘).
STEP 7 – BUAT CORE SENDIRI
Pada tahap ini, kita akan membuat sebuah core. Core ini berfungsi untuk mengkontrol akses ke halaman setelah login. Buat sebuah file dengan nama MY_Controller.php, lalu simpan pada folder xampp/htdocs/login_ci/application/core/. Berikut ini kodenya :
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class MY_Controller extends CI_Controller{
public function __construct(){
parent::__construct();
// Cek apakah terdapat session dengan nama authenticated
if( ! $this->session->userdata('authenticated')) // Jika tidak ada
redirect('auth'); // Redirect ke halaman login
}
}
Seperti yang saya bilang, core ini akan kita manfaatkan untuk mengkontrol akses ke halaman setelah login. Core ini nanti harus di gunakan pada controller-controller yang bisa diakses setelah login.
public function __construct(){
Kode diatas berguna sebagai fungsi awal yang akan dieksekusi setiap kali Core MY_Controller dipanggil. Jadi sebelum mengeksekusi fungsi lainnya, kode yang ada didalam fungsi __construct() akan terlebih dahulu dieksekusi diawal.
if( ! $this->session->userdata(‘authenticated’))
Fungsi dari kode diatas adalah untuk mengecek apakah session dengan nama authenticated ada atau tidak. Pada if kondisi diatas saya menambahkan tanda seru “!“. Tanda seru tersebut artinya kebalikannya, jadi If disitu jika di terjemahkan adalah jika session authenticated tidak ada, maka redirect ke halaman login.
STEP 8 – BUAT CONTROLLER PAGE
Selanjutnya, kita akan membuat controller page. Buat sebuah file dengan nama Page.php, lalu simpan pada folder xampp/htdocs/login_ci/application/controllers/. Berikut ini kodenya :
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Page extends MY_Controller {
public function welcome(){
$this->load->view('welcome');
}
public function thanks(){
$this->load->view('thanks');
}
}
Controller ini hanya bisa di akses setelah login. Seperti yang saya bilang pada step sebelumnya, controller yang hanya bisa diakses setelah login harus menggunakan core MY_Controller yang tadi kita buat. Pertanyaannya, cara menggunakannya gimana? Dari kode diatas, anda bisa lihat bahwa controller Page meng-extends ke MY_Controller (class Page extends MY_Controller {). Secara default ketika kita menggunakan Framework Codeigniter, maka setiap controller harus meng-extends ke CI_Controller. Tapi karena pada kasus ini kita telah membuat Core sendiri dengan nama MY_Controller, maka ketika kita akan menggunakan core tersebut, controllernya harus meng-extends ke MY_Controller.
Jadi setiap kita membuka salah satu fungsi di dalam controller Page, maka dia akan mengeksekusi terlebih dahulu kode yang ada di dalam fungsi __construct() pada core MY_Controller, baru setelah itu dia akan mengeksekusi kode yang ada didalam fungsi yang kita buka / panggil.
Kesimpulannya, dengan cara ini, Kode kita akan lebih efisiensi karena kita tidak perlu lagi menambahkan fungsi if untuk mengecek apakah user sudah login atau belum pada setiap fungsi. Karena sudah kita letakan kode tersebut pada core MY_Controller.
STEP 9 – BUAT VIEW WELCOME
Selanjutnya, kita akan membuat tampilan selamat datang yang akan ditampilkan setelah login. Buat sebuah file dengan nama welcome.php, lalu simpan pada folder xampp/htdocs/login_ci/application/views/. Berikut ini tampilan dan kodenya :
<html>
<head>
<title>Welcome Page</title>
</head>
<body>
<h1>Selamat datang <?php echo $this->session->userdata('nama'); ?></h1>
<h4>Anda berhasil login ke dalam aplikasi. Halaman ini hanya bisa diakses setelah login.</h4>
<a href="<?php echo base_url('index.php/page/thanks') ?>">Thanks Page</a> |
<a href="<?php echo base_url('index.php/auth/logout') ?>">Logout</a>
</body>
</html>
$this->session->userdata(‘nama‘)
Kode diatas berfungsi untuk memanggil session dengan nama nama yang dibuat pada controller auth fungsi login. Struktur dasar kodenya adalah $this->session->userdata(‘nama_session‘).
STEP 10 – BUAT VIEW THANKS
Selanjutnya, kita akan membuat tampilan selamat datang yang akan ditampilkan setelah login. Buat sebuah file dengan nama thanks.php, lalu simpan pada folder xampp/htdocs/login_ci/application/views/. Berikut ini tampilan dan kodenya :
<html>
<head>
<title>Welcome Page</title>
</head>
<body>
<h1>Terimakasih <?php echo $this->session->userdata('nama'); ?></h1>
<h4>Ini adalah halaman thanks yang hanya bisa di akses setelah login</h4>
<a href="<?php echo base_url('index.php/page/welcome') ?>">Welcome Page</a> |
<a href="<?php echo base_url('index.php/auth/logout') ?>">Logout</a>
</body>
</html>
Mungkin sekian untuk catatan kali ini. Semoga bisa bermanfaat. Jika ada yang kurang dipahami, langsung tanyakan pada form komentar dibawah ini. Jangan lupa LIKE dan SHARE nya, Terimakasih banyak.
Happy Coding ^_^
SOURCE CODE
Untuk mengunduh source code nya, klik link berikut ini : Download.
SUMBER & REFERENSI
Dokumentasi Codeigniter : https://www.codeigniter.com/user_guide
Cara mudah membuat form login dengan codeigniter dan mysql, tutorial lengkap membuat form login dengan codeigniter dan mysql, tutorial step by step membuat form login dengan codeigniter dan MySQL
POST YOUR COMMENTS