Blog

You are currently viewing Tutorial Membuat Fungsi Login dan Registrasi Menggunakan Codeigniter 3

Tutorial Membuat Fungsi Login dan Registrasi Menggunakan Codeigniter 3

Tutorial Membuat Fungsi Login dan Registrasi Pada Codeigniter 3 – Hallo teman–teman bagaimana nih kabarnya? semoga pada baik-baik saja ya. Pada tutorial kali ini kita akan belajar tentang bagaimana cara membuat form login dan registrasi menggunakan Codeigniter 3. Pada tutorial kali ini kita akan menggunakan database untuk menyimpan dan menampilkan informasi data user yang melakukan login dan registrasi ke dalam sistem.

Baca Juga: Membuat CRUD Dengan CodeIgniter 3 – Menampilkan Data Dari Database

Sebelum kita masuk ke dalam pembahasannya, disini sudah tau belum pengertian dari Framework ini sendiri? Framework merupakan kerangka kerja yang digunakan untuk pembuatan suatu aplikasi sehingga memudahkan developer dalam mengembangkan suatu sistem. Keuntungan kita menggunakan Framework ini karena sudah menggunakan konsep MVC (Model-View-Controller). Konsep MVC ini merupakan konsep untuk memisahkan antara data, tampilan dan fungsi pemprosesan terhadap data dan tampilan tersebut.

Persiapan Instalasi Codeigniter 3

Sebelum memulai pembuatan suatu project menggunakan Codeigniter 3 (CI-3) ini. Pertama-tama kita harus download terlebih dahulu framework Codeigniter 3 (CI-3) yang akan kita gunakan dengan cara mengakses situs resmi dari Codeigniter ini di www.codeigniter.com.

Setelah kita mendownload source code Framework yang kita gunakan, selanjutnya extract file tersebut dan rename menjadi nama dari project kita. Disini contoh dari nama project tersebut adalah “TutorialLogin“. Setelah itu simpan project ini ke dalam server local kita seperti xampp>htdocs.

Terlebih dahulu aktifkan dulu library database, session dan url pada file autoload.php Codeigniter di application/config/autoload.php.

$autoload['libraries'] = array('database', 'session');
$autoload['helper'] = array('url');

Selanjutnya sesuaikan pengaturan database kita pada file database.php CodeIgniter di application/config/database.php. Sesuaikan dengan informasi database yang kita gunakan.

$db['default'] = array(
    'dsn'	=> '',
    'hostname' => 'localhost',
    'username' => 'root',
    'password' => '',
    'database' => 'crud',
    '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
);

Sekarang konfigurasi link url dari project yang kita buat ini pada file config.php Codeigniter di application/config/config.php.

$config['base_url'] = 'http://localhost/TutorialLogin/';
$config['index_page'] = '';

Baca Juga: Cara Instalasi dan Konfigurasi Codeigniter 3

Setelah Itu Kita Buat Sebuah File Baru Dengan Nama .Htaccess Di Folder Utama Dari Project Codeigniter Kita dan Tambahkan Sintak Berikut

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]

Persiapan Membuat Database dengan Codeigniter 3

Karena kita akan bermain dengan database, maka yang menjadi langkah awal yang harus kita siapkan yaitu mempersiapkan database yang akan digunakan. Pada artikel kali ini kita akan membuat database dengan nama crud. dan membuat sebuah tabel dengan nama tb_login yang berisikan kolom username, password dan nama. Jadi langkah-langkah yang harus kita siapkan terlebih dahulu adalah

  1. Membuat Database dengan nama crud
  2. Membuat sebuah tabel dengan nama tb_login yang berisikan kolom (username, password dan nama)

Gambar diatas merupakan contoh dari konfigurasi dan pembuatan tabel pada database kita. Tetapi teman-teman juga dapat langsung membuat database dengan sintak dibawah ini. Berikut ini file sql yang bisa teman-teman langsung import pada database. Cara untuk melakukan import database tersebut pertama-tama kita buat dulu nama database. Lalu pilih menu import dan upload file .sql dibawah ini. Tetapi teman-teman juag dapat melakukan Copy Paste sql berikut ini pada kolom editing Query database teman-teman.

-- phpMyAdmin SQL Dump
-- version 4.8.2
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Jul 02, 2022 at 04:38 PM
-- Server version: 10.1.34-MariaDB
-- PHP Version: 5.6.37

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
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: `crud`
--

-- --------------------------------------------------------

--
-- Table structure for table `tb_login`
--

CREATE TABLE `tb_login` (
  `username` varchar(50) NOT NULL,
  `password` varchar(255) NOT NULL,
  `nama` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tb_login`
--

INSERT INTO `tb_login` (`username`, `password`, `nama`) VALUES
('admin', 'e10adc3949ba59abbe56e057f20f883e', 'Administrator'),
('ivan', 'e10adc3949ba59abbe56e057f20f883e', 'Ivan Chatisa');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tb_login`
--
ALTER TABLE `tb_login`
  ADD PRIMARY KEY (`username`);
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 */;

Persiapan Membuat Website dengan Codeigniter 3

Pertama-tama kita buat terlebih dahulu sebuah file model baru dengan nama Mpengguna.php pada Codeigniter kita di di application/models/Mpengguna.php. Lalu tambahkan beberapa method / function yang digunakan untuk mengakses Query SQL yang digunakan.

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

class Mpengguna extends CI_Model {

    function insertData($data) {
        $this->db->insert('tb_login', $data);
    }

    function getDataUser($username) {
        $this->db->where('username', $username);
        $query = $this->db->get('tb_login');
        return $query->row();
    }

    function getLoginUser($username, $password) {
        $this->db->where('username', $username);
        $this->db->where('password', $password);
        $query = $this->db->get('tb_login');
        return $query->row();
    }

}

/* End of file Mpengguna.php */
/* Location: ./application/models/Mpengguna.php */

Adapun penjelasan dari masing-masing Function atau method pada Class Model ini sebagai berikut:

  1. Function insertData() digunakan untuk memanggil Query SQL dalam proses tambah data kedalam database.
  2. Function getDataUser() digunakan untuk menampilkan data pengguna berdasarkan kolom username pengguna.
  3. Function getLoginUser() digunakan untuk memanggil data pengguna berdasarkan kolom username dan password. Sintak inilah yang digunakan dalam proses pengecekan data yang dimasukkan oleh user pada database

Setelah itu buatlah sebuah folder baru pada lokasi utama dari project ini dengan nama assets. Folder ini berguna untuk menyimpan seluruh aset yang kita butuhkan seperti template website (style), gambar dan sebagainya.

Tambahkan sebuah file .css dengan nama style.css untuk menyimpan tampilan dari halaman website yang kita buat ini.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Alata", sans-serif;
}

.login {
    display: flex;
    height: 100vh;
}

.left {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 40%;
    padding: 5%;
    text-align: center;
}

.left h1 {
    color: #51384d;
}

.left span {
    color: #51384d;
    margin-top: -3px;
    margin-bottom: 5px;
    text-align: center;
    font-weight: 700;
}

.left h3 {
    color: #51384d;
    margin-top: 10px;
    margin-bottom: 20px;
}

.group {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    text-align: left;
}

.group label {
    color: #51384d;
    margin-bottom: 15px;
    font-weight: bold;
}

.group input {
    padding: 12px 12px 12px 55px;
}

.group i.fa {
    position: absolute;
    width: 50px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background-color: #9d5ed1;
    border-radius: 5px 0 0 5px;
    top: 34px;
}

button, label, p, input {
    font-size: 14px;
}

button {
    display: inline flex;
    width: 100%;
    cursor: pointer;
    margin-top: 20px;
    font-size: 14px;
    padding: 10px;
    background-color: #9d5ed1;
    border: 0;
    color: white;
    font-size: 14px;
    border-radius: 5px;
}

.group input {
    border-radius: 5px;
    border: 1px solid #aaa;
    margin-left: 5px;
}

button i {
    margin-right: 5px;
}

.right {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 60%;
    color: white;
    background-color: #b683e0;
    padding: 6%;
    text-align: center;
}

.right h1 {
    margin-bottom: 30px;
    font-size: 40px;
}

.right img {
    width: 350px;
    object-fit: contain;
}

a {
    font-weight: bold;
    margin-top: -10px;
}

Sekarang kita buat sebuah Controller pada Codeigniter kita. Pada tutorial kali ini kita menggunakan Controller default yang telah disediakan oleh Codeigniter ini ketika proses instalasi selesai. Adapun nama Controller ini adalah Welcome.php terletak di application/controllers/Welcome.php.

Setelah itu tambahkan sebuah function dengan nama __construct() yang berfungsi untuk memanggil file Model yang kita gunakan pada halaman website kita.

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

class Welcome extends CI_Controller {

    public function __construct() {
        parent::__construct();
        $this->load->model("Mpengguna");
    }
}

Selanjutnya buatlah sebuah file view baru dengan nama hal_tambah.php  di application/views/hal_tambah.php.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Halaman Registrasi</title>
    <link href="https://fonts.googleapis.com/css2?family=Alata&display=swap" rel="stylesheet">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="<?= base_url('assets/style.css') ?>">
</head>
<body>
    <div class="login">
        <div class="left">
            <h3>-- Tambah Anggota Baru --</h3>

            <form action="<?= base_url('welcome/add_user') ?>" method="post">
                <div class="group">
                    <label>Username</label>
                    <input type="text" name="username" placeholder="Masukkan Username">
                    <i class="fa fa-envelope"></i>
                </div>
                <div class="group">
                    <label>Password</label>
                    <input type="password" name="password" placeholder="Masukkan Password">
                    <i class="fa fa-key"></i>
                </div>
                <div class="group">
                    <label>Nama Lengkap</label>
                    <input type="text" name="nama" placeholder="Masukkan Nama Lengkap">
                    <i class="fa fa-user"></i>
                </div>

                <button><i class="fa fa-send"></i> Tambah</button>
            </form>
        </div>

        <div class="right">
            <img src="<?= base_url('assets/logo.png') ?>">
            <h1>Dashboard Kecoak Sakti Official</h1>
        </div>
    </div>
    
</body>
</html>

Sekarang tambahkan function baru dengan nama hal_tambah() untuk menampilkan halaman dari form tambah tersebut pada Controller Welcome.php kita di application/controllers/Welcome.php.

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

Sekarang Kita Coba Akses Halaman View Yang Baru Saja Kita Buat Ini Dengan Cara Mengakses Halaman Localhost Lalu Panggil Folder Project Dan Panggil Nama Controller Serta Fungsi Yang Kita Buat Sebelumnya

http://localhost/TutorialLogin/welcome/hal_tambah

Ketika Dijalankan Maka Akan Tampil Halaman View Yang Sudah Kita Buat Sebelumnya Seperti Gambar Dibawah Ini

Coba perhatikan pada view tambah sebelumnya, terdapat sintak Form Action yang memanggil fuction add_user. Sintak ini digunakan untuk mengirimkan data yang diinginkan untuk diproses. Jadi sekarang kita tambahkan function baru dengan nama add_user() untuk menyimpan data yang telah diinputkan pada halaman form tambah ini. Function ini kita tambahkan pada Controller Welcome.php kita di application/controllers/Welcome.php.

public function add_user()
{
    $username = $this->input->post('username');
    $password = $this->input->post('password');
    $nama = $this->input->post('nama');

    $arrInsert = array(
        'username' => $username,
        'password' => md5($password),
        'nama' => $nama,
    );

    $this->Mpengguna->insertData($arrInsert);
    $this->session->set_flashdata('msg', '2');
    redirect(base_url());
}

Selanjutnya buatlah sebuah file view baru dengan nama hal_login.php  di application/views/hal_login.php. Halaman ini berisikan Form untuk melakukan login kedalam sistem berdasarkan username dan password yang telah didaftarkan sebelumnya.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Halaman Login</title>
    <link href="https://fonts.googleapis.com/css2?family=Alata&display=swap" rel="stylesheet">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="<?= base_url('assets/style.css') ?>">
</head>
<body>
    <div class="login">
        <div class="left">
            <h1>LOGIN</h1>
            <span>(Kecoak Sakti Official)</span>
            <h3>-- Sign in Your Account --</h3>

            <form action="<?= base_url('welcome/cekLoginUser') ?>" method="post">
                <div class="group">
                    <label>Username</label>
                    <input type="text" name="username" placeholder="Masukkan Username">
                    <i class="fa fa-envelope"></i>
                </div>
                <div class="group">
                    <label>Password</label>
                    <input type="password" name="password" placeholder="Masukkan Password">
                    <i class="fa fa-key"></i>
                </div>

                <button><i class="fa fa-send"></i> Masuk</button>
            </form>
            <h3>Atau</h3>
            <a href="<?= base_url('welcome/hal_tambah') ?>">Daftar Anggota Baru</a>
        </div>

        <div class="right">
            <img src="<?= base_url('assets/logo.png') ?>">
            <h1>Dashboard Kecoak Sakti Official</h1>
        </div>
    </div>

    <script>
        <?php if ($this->session->flashdata('msg') == '1') { ?>
            alert('Username / Password Salah!!!');
        <?php } ?>

        <?php if ($this->session->flashdata('msg') == '2') { ?>
            alert('Data Berhasil Ditambahkan');
        <?php } ?>
    </script>
    
</body>
</html>

Coba perhatikan pada sintak view hal_home.php ini. terdapat sintak session flash yang berfungsi untuk memberikan alert atau notifikasi aksi yang kita masukkan.

<script>
    <?php if ($this->session->flashdata('msg') == '1') { ?>
        alert('Username / Password Salah!!!');
    <?php } ?>

    <?php if ($this->session->flashdata('msg') == '2') { ?>
        alert('Data Berhasil Ditambahkan');
    <?php } ?>
</script>

Sintak ini berfungsi memberikan informasi sebuah aksi yang dilakukan. Misalnya jika nilai session flashnya adalah 1 maka menampilkan pesan Login gagal sedangkan jika session flashnya adalah 2 maka menampilkan informasi penambahan data  berhasil. Informasi ini didapatkan dari Controller ketika melakukan login dan registrasi user.

Sekarang tambahkan function baru dengan nama index() untuk menampilkan halaman dari form login tersebut pada Controller Welcome.php kita di application/controllers/Welcome.php.

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

Sekarang Kita Coba Akses Halaman View Yang Baru Saja Kita Buat Ini Dengan Cara Mengakses Halaman Localhost Lalu Panggil Folder Project Dan Panggil Nama Controller Serta Fungsi Yang Kita Buat Sebelumnya

http://localhost/TutorialLogin/

Ketika Dijalankan Maka Akan Tampil Halaman View Yang Sudah Kita Buat Sebelumnya Seperti Gambar Dibawah Ini

Coba perhatikan pada view login sebelumnya, terdapat sintak Form Action yang memanggil fuction cekLoginUser. Sintak ini digunakan untuk mengirimkan data yang diinginkan untuk diproses. Jadi sekarang kita tambahkan function baru dengan nama cekLoginUser() untuk mengecek terhadap informasi data user yang telah diinputkan pada halaman form login ini. Function ini kita tambahkan pada Controller Welcome.php kita di application/controllers/Welcome.php.

public function cekLoginUser()
{
    $username = $this->input->post('username');
    $password = md5($this->input->post('password'));

    $userData = $this->Mpengguna->getLoginUser($username, $password);
    if (!empty($userData)) {
        $sess = array (
            'username' => $userData->username,
        );
        $this->session->set_userdata($sess);
        redirect('welcome/hal_home');
    } else {
        $this->session->set_flashdata('msg', '1');
        redirect(base_url());
    }
}

Coba perhatikan pada sintak ini, kita memanggil data yang dikirim dari form input sebelumnya menggunakan sintak post. Pada bagian sintak password, disini kita menambahkan sintak md5() yang digunakan untuk mengencripsi password yang kita inputkan. setelah itu kita akan memanggil method pada Model kita untuk mengecek informasi dari user yang melakukan login. Jika proses login berhasil, sistem akan menyimpan informasi username pada session untuk proses menampilkan informasi detail user pada halaman home kita.

Selanjutnya buatlah sebuah file view baru dengan nama hal_home.php  di application/views/hal_home.php. Halaman ini berisikan Informasi user yang melakukan login kedalam sistem.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Halaman Home</title>
    <style>
        body {
            min-height: 90vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        h2 {
            text-align: center;
            text-transform: uppercase;
        }

        .center {
            padding: 10px;
            width: 500px;
            text-align: center;
            border-radius: 5px;
            box-shadow: 0 4px 10px rgb(0 0 0 / 0.2);
        }

        button {
            background-color: #4caf50;
            font-weight: bold;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="center">
        <h2> == Selamat Datang == <br>(<?= $DATA->nama ?>)</h2>
        <button onclick="window.location.href='<?php echo base_url('welcome/logout') ?>'">LOGOUT</button>
    </div>	
</body>
</html>

Sekarang tambahkan function baru dengan nama hal_home() yang berfungsi untuk menampilkan informasi user yang berhasil melakukan login ke dalam sistem ini pada Controller Welcome.php kita di application/controllers/Welcome.php.

public function hal_home()
{
    $dtSession = $this->session->userdata('username');
    $userData = $this->Mpengguna->getDataUser($dtSession);

    if (empty($dtSession)) {
        redirect(base_url());
    } else {
        $this->load->view('hal_home', ['DATA' => $userData]);
    }
}

Coba perhatikan pada sintak Controller diatas, disini kita memanggil fungsi session yang kita peroleh dari halaman login sebelumnya. Session yang kita kirim yaitu username dari user yang berhasil login ke dalam sistem. Username ini digunakan untuk menampilkan informasi user yang berhasil login kedalam sistem. Pada sintak ini kita juga melakukan pemeriksaan terhadap sistem. Jika session kosong maka kita akan diarahkan ke halaman login sedangkan jika session ada maka kita akan masuk ke halaman home.

Selanjutnya tambahkan function baru pada Controller Controller Welcome.php kita di application/controllers/Welcome.php dengan nama logout(). Function ini berfungsi untuk melakukan logout dari sistem dan menghapus segala session yang ada pada sistem kita.

public function logout()
{
    $this->session->sess_destroy();
    redirect(base_url());
}

Sekarang Kita Coba Jalankan Aplikasi Kita Untuk Melihat Hasil Dari Fungsi Hapus Yang Baru Saja Kita Buat Ini. Pertama-Tama Kita Akses Link Localhost Dari Project Kita Ini.

http://localhost/TutorialLogin/

Sekarang Kita Coba masukkan username dan password yang telah kita daftarkan sebelumnya pada sistem. Misalnya usernamenya adalah admin dan passwordnya adalah 123456

Jika proses login berhasil maka kita akan diarahkan ke halaman home dan menampilkan informasi nama dari user yang login

Sekian tutorial Cara membuat Fungsi Login dan Registrasi pada Codeigniter 3 (CI-3). Untuk Project lengkapnya dapat didownload pada link ((GITHUB)) kami ini.

Baca Juga: Membuat CRUD (Create, Read, Update, Delete) Dengan PHP Dasar – Menampilkan Data Dari Database

Tags: , ,

Leave a Reply