Assalamualikum Wr, Wb
Topik Kali ini kita akan bahas mengenai pembuatan login di aplikasi pengaduan jaringan berbasis web, fitur ini adalah bagian awal untuk membuat aplikasi, kenapa mesti pakai login di aplikasi, login diperlukan untuk mencegah user melihat data data kita, biasanya digunakan untuk masuk di level administrator, langsung saja
Perlengkapan / Donwload
- Framework Codeigniter v-3
- Admin Lte v-2.40
Langkah Langkah
- Membuat tabel user
- Membuat controller login
- Membuat model login
- Membuat view/tampilan
Membuat tabel user, sebelum membuat tabel user buat dulu database, struktur tabel user, insert data di tabel user
CREATE TABLE `user` (
`user_id` int(11) NOT NULL,
`id_desa` varchar(11) NOT NULL DEFAULT 'kosong',
`id_upt` varchar(11) NOT NULL DEFAULT 'kosong',
`id_opd` varchar(11) NOT NULL DEFAULT 'kosong',
`username` varchar(255) NOT NULL,
`password` varchar(255) NOT NULL,
`no_telp` varchar(13) NOT NULL,
`level` enum('0','1') NOT NULL DEFAULT '1'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
Insert data user, jalankan kode dibawah ini di phpmyadmin
INSERT INTO `user` (`user_id`, `id_desa`, `id_upt`, `id_opd`, `username`, `password`, `no_telp`, `level`) VALUES
(17, '', '', '19', 'admin', '255297dc48c4087a1fe0096c802c33336e01f268', '946467457648', '0'),
Membuat Controller Login
Buat file baru di folder controller, example penamaan file Auth.php kodenya seperti ini:
<?php
defined('BASEPATH') or exit('No direct script access allowed');
class Auth extends CI_Controller
{
function __construct()
{
parent::__construct();
$this->load->model('user_m');
$this->load->library('form_validation');
}
public function login()
{
check_already_login();
$data['judul'] = "Login Admin";
$this->load->view('login', $data);
}
public function proses()
{
$post = $this->input->post(null, true);
if (isset($_POST['login'])) {
$this->load->model('user_m');
$query = $this->user_m->login($post);
if ($query->num_rows() > 0) {
$row = $query->row();
$params = array(
'userid' => $row->user_id,
'level' => $row->level
);
$this->session->set_userdata($params);
$this->session->set_flashdata('success', 'Login Berhasil!');
redirect('administrator');
} else {
echo "<script>
alert('Login Gagal! Password atau Username Yang Anda Masukkan Salah');
window.location = '" . site_url('login') . "';
</script>";
}
}
}
<?php
defined('BASEPATH') or exit('No direct script access allowed');
class User_m extends CI_Model
{
public function login($post)
{
$this->db->select('*');
$this->db->from('user');
$this->db->where('username', $post['username']);
$this->db->where('password', sha1($post['password']));
// $this->db->where('level != "0"');
$query = $this->db->get();
return $query;
}
Membuat File view login.php
<?php
defined('BASEPATH') or exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><?= $judul ?></title>
<link rel="icon" href="<?= base_url() ?>assets/img/icon.png">
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="<?php echo base_url() ?>assets/template/bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="<?php echo base_url() ?>assets/template/bower_components/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="<?php echo base_url() ?>assets/template/bower_components/Ionicons/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="<?php echo base_url() ?>assets/template/dist/css/AdminLTE.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="<?php echo base_url() ?>assets/template/plugins/iCheck/square/blue.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Google Font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<div id="flash-data" data-flashdata="<?= $this->session->flashdata('success'); ?>"></div>
<body class="hold-transition login-page">
<div class="login-box">
<div class="login-logo">
<a href="<?php echo base_url() ?>assets/index2.html"><b>Admin</b>Masuk</a>
</div>
<!-- /.login-logo -->
<div class="login-box-body">
<p class="login-box-msg">Silahkan Masuk</p>
<form action="<?php echo site_url('auth') ?>" method="post">
<div class="form-group has-feedback">
<input type="text" class="form-control" name="username" placeholder="username" required />
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" name="password" placeholder="Password" required />
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-8">
<div class="checkbox icheck">
<label>
<input type="checkbox"> Ingat Saya?
</label>
</div>
</div>
<!-- /.col -->
<div class="col-xs-4">
<button type="submit" name="login" class="btn btn-primary btn-block btn-flat">Masuk</button>
</div>
<!-- /.col -->
</div>
</form>
</div>
<!-- /.login-box-body -->
</div>
<script src="<?php echo base_url() ?>assets/template/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="<?php echo base_url() ?>assets/template/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- iCheck -->
<script src="<?php echo base_url() ?>assets/template/plugins/iCheck/icheck.min.js"></script>
<!-- sweetalert -->
<script src="<?= base_url('assets/sweetalert2.all.min.js') ?>"></script>
<!-- <script src="<?= base_url('assets/popup.js') ?>"></script> -->
<script>
$(function() {
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%' /* optional */
});
});
</script>
<script>
var flashData = $('#flash-data').data('flashdata');
// console.log(flashData);
if (flashData) {
Swal.fire({
icon: "success",
title: "Logout Berhasil!",
text: "Jangan Lupa Beristirahat",
})
}
// else{
// Swal.fire({
// title: "Login Gagal",
// text: "Username atau Password Anda Tidak terdaftar",
// icon: "error",
// });
// }
</script>
<script>
// $("#gagal").click(function(){
// swal.fire({
// title : "Login Gagal!",
// text : "Password atau Username Yang Anda Masukkan Salah",
// icon : "Warning",
// })
// })
// var masuk = $('#salah').data('gagal');
// if(masuk){
// swal.fire({
// title : "Login Gagal!",
// text : "Password atau Username Yang Anda Masukkan Salah",
// icon : "Warning",
// })
// }
</script>
</body>
</html>
Jalankan projec di web tampilan seperti dibawah ini
Semoga bermanfaat next postingan akan membuat tampilan dashboard setelah login 🙏🙏
Tidak ada komentar:
Tulis komentar