Tutorial Membuat Form Login di CodeIgniter 4 - latifah016/form-login-CI_4 GitHub Wiki
-
Download CodeIgniter 4 .zip/.rar di website CodeIgniter.com/download
-
Extrak file hasil download tadi di xampp/htdocs/ dan rename menjadi ci_4-login.
-
Buka xampp dan jalankan apache dan mysql.
-
Buka cmd, pastikan letak cmd di folder ci_4-login dan jalankan ci_4-login dengan mengetika code berikut dan enter,
php spark serve
-
Buka browser ketikan url ci_4-login
-
Buat database praktikum dan buat tabel user seperti di bawah ini:
-
Buka folder ci_4-login menggunakan sublimetext
-
Setting database ci_4-login di app/Config/database.php ketikan seperti database yang di buat sebelumnya:
- Membuat Model untuk mengkoneksikan form-login dengan database di app/Models/M_user.php ketikan code seperti berikut:
`<?php namespace App\Models;
use CodeIgniter\Model;
class M_user extends Model { #Membuat fungsi getdata dari tabel database user public function getData($email, $password) { return $this->db->table('user') ->where(array('user_email' => $email,'user_pass'=> $password)) ->get()->getRowArray();
}
//--------------------------------------------------------------------
}`
- Buat Controllers untuk menampikan user_form /form-login di app/Controllers/login.php ketikan code seperti berikut:
`<?php namespace App\Controllers; use CodeIgniter\Controller; use App\Models\M_user;
class Login extends BaseController { public function index() { return view('user_form'); } # Controllers untuk menampilakan tampilan ketika login berhasil public function login_action() { #mengecek email dan password yang dimasukan sesuai tidak dengan database $muser = new M_user();
$email = $this->request->getPost('email');
$password = $this->request->getPost('password');
$cek = $muser->getData($email, $password);
#Jika sesuai maka akan di arahkan ke usr_view.php if (($cek['user_email'] == $email) && ($cek['user_pass'] == $password)) { session()->set('user_email', $cek['user_email']); session()->set('user_nama', $cek['user_nama']); session()->set('user_id', $cek['user_id']); return redirect()->to(base_url('usr')); } else {
#Membuat metode Flashdata untuk menampilkan alert warning ketika login gagal session()->setFlashdata('gagal','Username/ password salah'); return redirect()->to(base_url('login')); } }
#untuk mengembalikan ke login awal ketika logout public function logout() { session()-> destroy(); return redirect()->to(base_url('login')); }
//--------------------------------------------------------------------
}`
- Buat view untuk membuat tampilan user_form /form-login di app/Views/user_form.php ketikan code seperti berikut:
`
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>
Login Form
</title>
<div class="container">
<div class="row">
<div class="col-md-4 mx-auto pt-5">
<form method="POST" action="<?= base_url('login/login_action'); ?>"> #Membuat action ke tetika form di submit menampilkan login/login_action
<div class="form-group" align="center">
<label><h1>Form Login</h1></label>
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" name="email" class="form-control" id="email" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" class="form-control" id="password">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
#Menampilkan alert Warning ketika data yang di masukan salah
<p>
<?php if(!empty(session()->getFlashdata('gagal'))) { ?>
<div class="alert alert-warning">
<?php echo session()->getFlashdata('gagal') ?>
</div>
<?php }?>
</p>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
- Buat Controllers untuk menampikan usr_view (tampilan setelah login berhasil) di app/Controllers/usr.php ketikan code seperti berikut:
`<!doctype html>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Usr</title>
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
It uses utility classes for typography and spacing to space content out within the larger container.
Logout<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
-
Tampilan runing Login: login
-
Tampilan runing **Login dengan User dan Password Salah **: login Salah
-
Tampilan runing **Login dengan User dan Password Benar **: login Berhasil
-
Tampilan runing ketika menekan tombol logout : logout Berhasil
