Membuat Tampilan Login Menggunakan Codeigniter 3
Berikut merupakah langkah membuat login menggunakan codeigniter 3 :
1. Buatlah file .htaccess pada folder belajarcodeigniter.test yang telah dibuat pada blog sebelumnya.
2. isi file dengan src sebagai berikut
2. isi file dengan src sebagai berikut
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]
$config['base_url'] = 'http://belajarcodeigniter.test';
4. Selanjutnya buka file autoload.php pada folder config, tambahkan url pada baris 92 atau pada baris 'helper'
4. Selanjutnya buka file autoload.php pada folder config, tambahkan url pada baris 92 atau pada baris 'helper'
$autoload['helper'] = array('url');
5. Buatlah models user dengan nama file M_user.php pada folder models, isi file dengan src sebagai berikut :
6. Selanjutnya buat file login.php pada folder views dan salin src dari login.html yang ada pada folder assets
5. Buatlah models user dengan nama file M_user.php pada folder models, isi file dengan src sebagai berikut :
- <?php
- defined('BASEPATH') OR exit('No direct script access allowed');
- class M_user extends CI_Model
- {
- public function getuserlogin($data)
- {
- return $this->db->get_where('tb_user',$data,1)->row();
- }
- }
- /* End of file M_user_model.php and path \application\models\M_user_model.php */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin 2 - Login</title>
<!-- Custom fonts for this template-->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,
700,700i,800,800i,900,900i"
rel="stylesheet">
<!-- Custom styles for this template-->
<link href="css/sb-admin-2.min.css" rel="stylesheet">
</head>
<body class="bg-gradient-primary">
<div class="container">
<!-- Outer Row -->
<div class="row justify-content-center">
<div class="col-xl-10 col-lg-12 col-md-9">
<div class="card o-hidden border-0 shadow-lg my-5">
<div class="card-body p-0">
<!-- Nested Row within Card Body -->
<div class="row">
<div class="col-lg-6 d-none d-lg-block bg-login-image"></div>
<div class="col-lg-6">
<div class="p-5">
<div class="text-center">
<h1 class="h4 text-gray-900 mb-4">Welcome Back!</h1>
</div>
<form class="user">
<div class="form-group">
<input type="email" class="form-control form-control-user"
id="exampleInputEmail" aria-describedby="emailHelp"
placeholder="Enter Email Address...">
</div>
<div class="form-group">
<input type="password" class="form-control form-control-user"
id="exampleInputPassword" placeholder="Password">
</div>
<div class="form-group">
<div class="custom-control custom-checkbox small">
<input type="checkbox" class="custom-control-input"
id="customCheck">
<label class="custom-control-label" for="customCheck">
Remember Me</label>
</div>
</div>
<a href="index.html" class="btn btn-primary btn-user btn-block">
Login
</a>
<hr>
<a href="index.html" class="btn btn-google btn-user btn-block">
<i class="fab fa-google fa-fw"></i> Login with Google
</a>
<a href="index.html" class="btn btn-facebook btn-user btn-block">
<i class="fab fa-facebook-f fa-fw"></i> Login with Facebook
</a>
</form>
<hr>
<div class="text-center">
<a class="small" href="forgot-password.html">Forgot Password?</a>
</div>
<div class="text-center">
<a class="small" href="register.html">Create an Account!</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="js/sb-admin-2.min.js"></script>
</body>
</html>
<form class="user" action="<?= base_url('auth/checklogin') ?>" method="POST">
8. Tambahkan name pada baris email dan password<div class="form-group">
<input type="email" name="email" class="form-control form-control-user" id="exampleInputEmail" aria-describedby="emailHelp" placeholder="Enter Email Address...">
</div>
<div class="form-group">
<input type="password" name="password" class="form-control form-control-user"
id="exampleInputPassword" placeholder="Password">
</div>
9. Untuk membuat button login, beri komentar pada baris 67 atau pada baris link index.html. Tambahkan baris baru untuk membuat button
login yang baru.
<!-- <a href="index.html" class="btn btn-primary btn-user btn-block">Login</a> -->
<button class="btn btn-primary btn-user btn-block">Login</button>
<link href="<?= $base_url ?>vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<!-- Bootstrap core JavaScript-->
<script src="<?= $base_url ?>vendor/jquery/jquery.min.js"></script>
<script src="<?= $base_url ?>vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="<?= $base_url ?>vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="<?= $base_url ?>js/sb-admin-2.min.js"></script>
12. Buka file Auth.php pada folder controllers, samakan nama checklogin baris 17 atau baris public function dengan nama checklogin yang ada
pada file login.php
public function checklogin()
Buatlah database pada localhost/127.0.0.1 dengan nama database kelas_tifb. Gunakan 4 kolom yang berisi email, nama, password, dan aktif.
Berikut merupakan hasil dari membuat tampilan login menggunakan framework Codeigniter 3
Berikut merupakan hasil dari saat klik button login
Komentar
Posting Komentar