Lebak Cyber Tips dan Trik Komputer
Membuat Aplikasi Penjualan Dengan Codeigniter – Membuat Halaman Login
lebakcyber.net – Membuat Aplikasi Penjualan Dengan Codeigniter – Membuat Halaman Login. Pada tutorial kali ini kita akan coba untuk membuat halaman login yang nantinya digunakan untuk mengautentikasi apakah pengguna tersebut memang terdaftar untuk bisa masuk kedalam aplikasi penjualan atau tidak.
Didalam halaman login ini kita akan form untuk username dan password, check box untuk menampilkan password dan juga sebuah tombol untuk melakukan proses login dengan menggunakan codeigniter.
Untuk langkah awal kita ubah terlebih dahulu file routes.php yang ada didalam folder config -> routes.php, lalu pada bagian $route[‘default_controller’] kita ubah nilainya menjadi seperti dibawah ini :
$route['default_controller'] = 'home';
Mengapa route tersebut kita ubah nilainya? agar pada saat kita buka url localhost/penjualan, kita akan langsung diarahkan ke halaman login yang akan kita buat dibawah ini.
Membuat Views login.php
Pertam kita buat dulu file login.php didalam folder views lalu masukan perintah dibawah ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Login User</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
body {
color: #fff;
background: #199c49;
}
.form-control {
min-height: 41px;
background: #fff;
box-shadow: none !important;
border-color: #e3e3e3;
}
.form-control:focus {
border-color: #70c5c0;
}
.form-control, .btn {
border-radius: 2px;
}
.login-form {
width: 350px;
margin: 0 auto;
padding: 100px 0 30px;
}
.login-form form {
color: #7a7a7a;
border-radius: 2px;
margin-bottom: 15px;
font-size: 13px;
background: #ececec;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
position: relative;
}
.login-form h2 {
font-size: 22px;
margin: 35px 0 25px;
}
.login-form .avatar {
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
top: -50px;
width: 95px;
height: 95px;
border-radius: 50%;
z-index: 9;
background: #70c5c0;
padding: 15px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}
.login-form .avatar img {
width: 100%;
}
.login-form input[type="checkbox"] {
position: relative;
top: 1px;
}
.login-form .btn, .login-form .btn:active {
font-size: 16px;
font-weight: bold;
background: #70c5c0 !important;
border: none;
margin-bottom: 20px;
}
.login-form .btn:hover, .login-form .btn:focus {
background: #50b8b3 !important;
}
.login-form a {
color: #fff;
text-decoration: underline;
}
.login-form a:hover {
text-decoration: none;
}
.login-form form a {
color: #7a7a7a;
text-decoration: none;
}
.login-form form a:hover {
text-decoration: underline;
}
.login-form .bottom-action {
font-size: 14px;
}
</style>
</head>
<body>
<div class="login-form">
<form action="<?php echo base_url('index.php/home/login') ?>" method="post">
<div class="avatar">
<img src="<?php echo base_url('assets/') ?>image/login/avatar.png" alt="Avatar">
</div>
<h2 class="text-center">Login User</h2>
<div class="flash-data" data-flashdata="<?php echo $this->session->flashdata('pesan') ?>"></div>
<div class="form-group">
<input type="text" class="form-control" name="username" placeholder="Username" required>
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" id="password" placeholder="Password" required>
</div>
<div class="form-group">
<input type="checkbox" id="checkbox"> Show Password
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg btn-block">
<div class="fa fa-sign-in"></div> Sign in
</button>
</div>
</form>
</div>
</body>
<script src="<?php echo base_url('assets/sweetalert') ?>/sweetalert.min.js"></script>
<script>
const flashData = $('.flash-data').data('flashdata');
if (flashData){
swal({
title: "Failed!",
text: flashData,
icon: "error",
button: "Ok!",
});
}
</script>
<script>
$(document).ready(function() {
$('#checkbox').click(function() {
if($(this).is(':checked')){
$('#password').attr('type','text');
} else {
$('#password').attr('type','password');
}
});
});
</script>
</html>
Nanti tampilan dari halaman login tersebut seperti pada gambar dibawah ini :
Membuat Models M_model.php
Selanjutnya kita buat sebuah model baru didalam folder Models dan berinama model baru tersebut dengan nama M_model.php yang akan kita gunakan untuk melakukan proses input, update, delete dan juga get ke database db_penjualan yang pada tutorial sebelumnya sudah kita buat.
Silahkan teman-teman masukan perintah dibawah ini didalam file M_model.php :
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class M_model extends CI_Model {
public function get_where($where, $table)
{
return $this->db->get_where($table, $where);
}
public function insert($data, $table)
{
$this->db->insert($table, $data);
}
public function get($table)
{
$this->db->ORDER_BY('id', 'DESC');
return $this->db->get($table);
}
public function delete($where, $table)
{
$this->db->delete($table, $where);
}
public function update($where, $data, $table)
{
$this->db->where($where);
$this->db->update($table, $data);
}
}
Membuat Controllers Home.php
Setelah membuat views dan juga model, sekarang kita buat Controller Home.php untuk memproses dan juga melakukan pengecekan pada saat user melakukan login, jika user tersebut memang terdaftar di database atau sistem, maka aplikasi akan membuka halaman aplikasi. Jika user tidak terdaftar maka user tersebut tidak akan bisa masuk ke halaman dashboard aplikasi penjualan.
Silahkan teman-teman masukan perintah dibawah ini didalam controllers Home.php :
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Home extends CI_Controller {
public function index()
{
$this->load->view('login');
}
public function login()
{
$username = $_POST['username'];
$password = $_POST['password'];
$where = array(
'username' => $username,
'password' => md5($password)
);
$cek = $this->m_model->get_where($where, 'tb_user')->num_rows();
if(!empty($cek)) {
$user = $this->m_model->get_where($where, 'tb_user')->result();
foreach ($user as $usr) {
$datauser = array(
'id' => $usr->id,
'nama' => $usr->nama,
'username' => $usr->username,
'level' => $usr->level,
'createDate' => $usr->createDate
);
$this->session->set_userdata($datauser);
if($usr->level == 'Admin'){
redirect('admin/dashboard');
} else {
echo 'User';
}
}
} else {
$this->session->set_flashdata('pesan', 'Username atau Password anda salah!');
redirect('home');
}
}
public function logout()
{
$this->session->sess_destroy();
redirect('home');
}
}
Pada perintah diatas bisa kita lihat kalau controller Home.php akan melakukan pengecekan terlebih dahulu apakah username dan password yang dimasukan ada didalam tabel tb_user pada database, jika memang ada maka user akan dibawa ke halaman admin/dashboard yang nanti akan kita buat. Jika user yang dimasukan tidak terdaftar maka akan ada pesan yang memberikan informasi kalau username atau password salah.
Membuat Views admin/dashboard
Selanjutnya kita buat sebuah folder baru didalam folder views dengan nama admin, dan didalam folder admin tersebut kita buat sebuah file php baru dengan nama dashboard.php, lalu teman-teman masukan perintah seperti dibawah ini didalam file dashboard.php tersebut :
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Dashboard
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
<li class="active">Dashboard</li>
</ol>
</section>
</div>
<!-- /.content-wrapper -->
Jadi setelah user berhasil melakukan login, maka user tersebut akan dibawa ke halaman admin/dashboard yang tampilannya seperti pada gambar dibawah ini :
Oke sekarang kita sudah berhasil masuk kehalaman dashboard admin, pada lanjutan tutorial membuat aplikasi penjualan dengan codeigniter nanti kita akan membuat rekap untuk jumlah kategori, jumlah produk, jumlah transaksi dan juga total user atau pengguna.
