Pada tutorial kali ini saya akan menulis tentang bagaimana Tutorial Membuat Login menggunakan password hash dan password verify pada CodeIgniter 3, ada beberapa alasan mengapa memilih menulis CodeIgniter versi 3 terlebih dahulu, karena saya akan coba berbagi secara bertahap untuk tutorialnya nantikan saja ya untuk versi 4.
disini kita akan mengimplementasikan password hash dan password verify untuk login pada CodeIgniter 3. pada tutorial ini akan lumayan panjang, jdi siapkan kopi dan cemilan ya untuk membaca step by stepnya :)
Pengetahuan dasar Password Hash dan Password Verify pada PHP :
Password Hash adalah salah satu fungsi pada php untuk melakukan ( one way hashing ) atau hashing satu arah untuk merubah plain text menjadi suatu kode acak atau kode enkripsi. metode ini cocok untuk mengamankan password anda, karena algoritma one way hashing ini tidak bisa kembali lagi ke data / plainteks sebelumnya
Contoh penerapan password_hash() dengan kode script :
<?php $p = password_hash('123', PASSWORD_DEFAULT); echo $p; ?>
PASSWORD_DEFAULT
disini kita akan coba mengubah plaintext (123) menjadi kode acak yg memiliki output sebagai berikut :
$2y$10$87QvYJZ7v45/ndgHAWJ9.O.tD7.Gx/8omK6mRhoyN7ZIpPW0UacwK
Sekarang bagaimana cara nya agar password yg sudah di hashing pada database akan cocok dengan input password yang berupa plaintext pada form login ?
pada jawabannya ialah kita menggunakan password_verify().
Implementasi Password Hash dan Password Verify pada login dengan CodeIgniter 3 :
Jika anda pengguna framework CodeIgniter 3, implementasi ini akan cocok untuk anda sambil belajar membuat authentikasi login dengan codeigniter 3, untuk penerapan pada php dan framework lainnya hampir sama hanya saja akan beda penulisannya dan struktur code saja.
Langkah pertama
Seperti biasa kita akan download kerangka kerja / framework CodeIgniter 3 terlebih dahulu, pada link : https://codeigniter.com/download download yg versi 3 yaa .
Struktur folder kita buat dengan nama login-ci3 pada htdocs dan extract file codeigniternya dan menjadiseperti ini pada tampilan text editor vscode :
Langkah kedua : Setting dan Konfigurasi CodeIgniter 3
pada langkah ini kita akan konfigurasi CodeIgniter 3 :
$config['base_url'] = '';
menjadi :
$config['base_url'] = ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == "on") ? "https" : "http"); $config['base_url'] .= "://" . $_SERVER['HTTP_HOST']; $config['base_url'] .= str_replace(basename($_SERVER['SCRIPT_NAME']), "", $_SERVER['SCRIPT_NAME']);
- keterangan base_url ini akan secara dinamis membaca url root.setting index_page : disini kita akan menghilangkan / menyembunyikan index.php pada url :
$config['index_page'] = 'index.php';
$config['index_page'] = '';
lalu setting juga .htaccess, buatlah .htaccess pada root folder lalu isikan script berikut :
RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ index.php/$1 [L]
- ket : pada setting index_page dan .htaccess ini mempunyai penjelasan untuk menghilangkan index.php pada url dengan contoh url sebelum di setting :
http://localhost/login-ci3/index.php/welcome
setelah disetting :
http://localhost/login-ci3/welcome
- sumber referensi penjelasan lengkapnya tentang menghilangkan index.php url codeigniter 3 : https://www.malasngoding.com/menghilangkan-index-php-pada-codeigniter/
$autoload['libraries'] = array('database','session');
Setting helper nya juga untuk kita bisa memanggil fungsi penggunaan base_url() :
$autoload['helper'] = array('url');
$route['default_controller'] = 'welcome';
$route['default_controller'] = 'login';
Langkah ketiga : Membuat database
langkah ini kita akan membuat database, kita akan beri nama db tutorial_loginci3 dengan nama table login dengan field :
atau copy dan import script tutorial_loginci3.sql :
-- phpMyAdmin SQL Dump -- version 5.0.2 -- https://www.phpmyadmin.net/ -- -- Host: localhost -- Generation Time: Mar 13, 2021 at 07:39 PM -- Server version: 10.4.14-MariaDB -- PHP Version: 7.4.9 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; START TRANSACTION; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Database: `tutorial_loginci3` -- -- -------------------------------------------------------- -- -- Table structure for table `login` -- CREATE TABLE `login` ( `id` int(11) NOT NULL, `user` varchar(255) NOT NULL, `pass` varchar(255) NOT NULL, `nama` varchar(255) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; -- -- Dumping data for table `login` -- INSERT INTO `login` (`id`, `user`, `pass`, `nama`) VALUES (1, 'admin', '$2y$10$XG7ickJghZ3jFvp1oDALne7YpNzaXqlL4Sa0oU/bXbM6MNLdxdCDW', 'Fauzan Falah'); -- -- Indexes for dumped tables -- -- -- Indexes for table `login` -- ALTER TABLE `login` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `login` -- ALTER TABLE `login` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2; COMMIT; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
pada database diatas kita sudah mempunyai record atau isi :
Langkah keempat : setting koneksi database codeigniter 3 ke mysql
masuk ke langkah selanjutnya, kita akan mengkoneksikan codeigniter 3 ke mysql yang terletak pada folder : application/config/database.php
$db['default'] = array( 'dsn' => '', 'hostname' => 'localhost', 'username' => 'root', //ubah username 'password' => '', // ubah password 'database' => 'tutorial_loginci3', // ubah nama databasenya 'dbdriver' => 'mysqli', 'dbprefix' => '', 'pconnect' => FALSE, 'db_debug' => (ENVIRONMENT !== 'production'), 'cache_on' => FALSE, 'cachedir' => '', 'char_set' => 'utf8', 'dbcollat' => 'utf8_general_ci', 'swap_pre' => '', 'encrypt' => FALSE, 'compress' => FALSE, 'stricton' => FALSE, 'failover' => array(), 'save_queries' => TRUE );
- ket : setting saja yg sudah diberi keterangan / comments diatas
Langkah kelima : Membuat Controller dan Views Form Login
1. Membuat Controller Login.php
pada langkah ini kita akan implementasikan login nya, pada controller buat file Login.php pada folder application/controller dan membuat function index :
Controller Login.php
<?php defined('BASEPATH') OR exit('No direct script access allowed'); class Login extends CI_Controller { public function __construct() { parent::__construct(); } public function index() { $this->load->view('login/index'); } }
2. Membuat views login/index.php
lalu kita akan membuat tampilan form login nya pada folder file application/views/login/index.php
views login/index.php
<!doctype html> <html lang="en"> <head> <title>Login</title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body style="background:#1689c7;"> <div class="container"> <!-- grid --> <div class="row"> <div class="col-sm-5 mx-auto mt-5 pt-5"> <?php if(!empty($this->session->flashdata('failed'))){?> <div class="alert alert-danger alert-dismissible fade show" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> <span class="sr-only">Close</span> </button> <?= $this->session->flashdata('failed');?> </div> <?php }?> <div class="card"> <div class="card-header"> Form Login </div> <div class="card-body"> <form method="POST" action="<?= base_url('login/proses');?>"> <div class="form-group"> <label for="">Username</label> <input type="text" required class="form-control" name="user" id="user" placeholder="Masukan Username"> </div> <div class="form-group"> <label for="">Password</label> <input type="password" required class="form-control" name="pass" id="pass" placeholder="Masukan Password"> </div> <button type="submit" class="btn btn-primary btn-md float-right">Login</button> </form> </div> <div class="card-footer text-muted"> Copyright © <?= date('Y');?> codekop </div> </div> </div> </div> <!-- grid --> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </body> </html>
3. hasil tampilan :
Langkah keenam : Membuat Proses Login dengan menggunakan Password Hash dan Password Verify
selanjutnya kita akan implementasikan password hash dan password verify di function proses() pada controller Login.php, karena action form login mengarah pada script <?= base_url('login/proses');?> untuk melakukan authentikasi data login
<?php defined('BASEPATH') OR exit('No direct script access allowed'); class Login extends CI_Controller { public function __construct() { parent::__construct(); } public function index() { $this->load->view('login/index'); } public function proses() { $user = $this->input->post('user', TRUE); $pass = $this->input->post('pass', TRUE); // select * from login where user = ? $cek = $this->db->get_where('login',['user' => $user]); // cek username if($cek->num_rows() > 0) { // kita ambil isi dari record $hasil = $cek->row(); if(password_verify($pass, $hasil->pass)) { // membuat session $this->session->set_userdata('id', $hasil->id); $this->session->set_userdata('is_login', TRUE); // redirect ke admin redirect(base_url('home')); }else{ // jika password salah $this->session->set_flashdata('failed','Password salah !'); redirect(base_url('login')); } }else{ // jika username salah $this->session->set_flashdata('failed','Username tidak Tersedia !'); redirect(base_url('login')); } } }
Langkah ketujuh : Membuat Home Admin untuk Login
1. Membuat Controller Home.php
pada langkah ini, setelah membuat proses login untuk authentikasi ke halaman admin, sekarang kita akan membuat controller Home.php pada folder application/controller, sebagai page admin dan testing apakah user berhasil login atau belum :
Controller Home.php
<?php defined('BASEPATH') OR exit('No direct script access allowed'); class Home extends CI_Controller { public function __construct() { parent::__construct(); if(!empty($this->session->userdata('is_login') == FALSE)){ // alert peringatan bahwa harus login $this->session->set_flashdata('failed','Anda Belum login, silahkan login terlebih dahulu !'); redirect(base_url('login')); } } public function index() { $this->data = [ 'title_web' => 'Dashboard', 'userx' => $this->db->get_where('login', ['id' => $this->session->userdata('id')])->row(), ]; $this->load->view('home/index',$this->data); } }
2. Membuat Views Home Admin :
lalu kita akan membuat tampilan home setelah login nya pada folder file application/views/home/index.php
views home/index.php
<!doctype html> <html lang="en"> <head> <title><?= $title_web;?></title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body> <nav class="navbar navbar-expand-sm navbar-dark bg-primary"> <div class="container"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId" aria-expanded="false" aria-label="Toggle navigation"></button> <div class="collapse navbar-collapse" id="collapsibleNavId"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="<?= base_url('login/logout');?>">Logout</a> </li> </ul> </div> </div> </nav> <div class="container mt-5"> <div class="jumbotron"> <p class="lead">Welcome, <?= $userx->nama;?>, anda sudah login !</p> <hr class="my-2"> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </body> </html>
3. Tampilan setelah Login ( dengan username : admin dan password : 123 )
Langkah kedelapan : Membuat Logout pada Controller Login.php
pada langkah ini kita akan membuat function logout(), pada Controller Login.php dimana function logout() ini berfungsi untuk logout dari sistem :
<?php defined('BASEPATH') OR exit('No direct script access allowed'); class Login extends CI_Controller { public function __construct() { parent::__construct(); } public function index() { $this->load->view('login/index'); } public function proses() { $user = $this->input->post('user', TRUE); $pass = $this->input->post('pass', TRUE); // select * from login where user = ? $cek = $this->db->get_where('login',['user' => $user]); // cek username if($cek->num_rows() > 0) { // kita ambil isi dari record $hasil = $cek->row(); if(password_verify($pass, $hasil->pass)) { // membuat session $this->session->set_userdata('id', $hasil->id); $this->session->set_userdata('is_login', TRUE); // redirect ke admin redirect(base_url('home')); }else{ // jika password salah $this->session->set_flashdata('failed','Password salah !'); redirect(base_url('login')); } }else{ // jika username salah $this->session->set_flashdata('failed','Username tidak Tersedia !'); redirect(base_url('login')); } } public function logout() { $this->session->sess_destroy(); redirect(base_url('login')); } }
Langkah terakhir : Uji coba / testing Login dan Logout
1. Masuk url Login :
2. Lakukan testing dengan username salah, Jika salah, Username akan mengeluarkan peringatan Username tidak Tersedia !
3. Lakukan testing dengan password salah, Jika Password Salah maka akan mengeluarkan peringatan Password salah !
4. Lakukan testing dengan username dan password dengan benar, maka akan masuk halaman home admin
5. lakukan Logout dan sekali lagi akses home admin, jika posisi kita sudah logout atau belum login maka tidak bisa mengakses home admin
Akhir kata :
Pembahasan ini untuk Tutorial Lengkap Membuat Login menggunakan Password Hash dan Password Verify pada CodeIgniter 3, Terima kasih sudah berkunjung, semoga tutorial ini bermanfaat, mohon maaf bila ada salah salah kata, dan kekurangan pada pembuatan tutorial kali ini. salam koding.
* Temukan berbagai postingan dan produk yang kamu cari