Aplikasi peminjaman barang part 1

Hai, berjumpa lagi, pada artikel kali ini kita akan plajari Membuat Aplikasi Peminjaman Barang Berbasis Web Dengan PHP dan MySQL step by step. Pada part 1 ini kita akan membuat desain form login beserta prosesnya atau kalian bisa gunakan form login lain yang pernah kita plajari pada artikel sebelumnya.

Beberapa file yang akan kita buat pada tutorial kali ini adalah sebagai berikut:

  • index.php - Berisi kode untuk desain form login
  • config/db.php - Berisi kode untuk koneksi database
  • proses/login_proses.php - Berisi kode PHP untuk proses login
  • admin/index.php - Berisi kode untuk desain form admin
  • operator/index.php - Berisi kode untuk desain form operator



Strukturnya kurang lebih akan seperti berikut:

  • index.php
  • config (folder)
    • db.php
  • proses (folder)
    • login_proses.php
  • admin (folder)
    • index.php
  • operator (folder)
    • index.php

Membuat Desain Form Login

  1. Buat file baru dengan nama index.php
  2. Ketikan kode berikut

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Aplikasi Kasir RPL</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>

  <?php
  session_start();
  // memunculkan pesan error
  if(isset($_SESSION['error'])) {
  ?>

  <div class="alert alert-warning alert-dismissible fade show" role="alert">
    <center><?= $_SESSION['error']; ?></center>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
    </button>
  </div>

  <?php
  }
  ?>

  <div class="card col-sm-4 mx-auto mt-5">
    <h5 class="card-header">Form Login</h5>
    <div class="card-body">
      <form action="proses/login_proses.php" method="POST" autocomplete="off">
        <div class="form-group">
          <label for="username">Username</label>
          <input type="text" name="username" class="form-control" placeholder="Masukan Username" autofocus>
        </div>
        <div class="form-group">
          <label for="password">Password</label>
          <input type="password" name="password" class="form-control" placeholder="Masukan Password">
        </div>
        <div class="form-group">
          <label for="level">Sebagai</label>
          <select name="level" class="form-control">
            <option value="">-- Masuk Sebagai ---</option>
            <option value="2">Operator</option>
            <option value="1">Admin</option>
          </select>
        </div>
        <button type="submit" class="btn btn-primary btn-block">Masuk</button>
      </form>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

Jika dijalankan maka outputnya akan seperti ini:
Desain Form Login Aplikasi Inventaris

Membuat Database

  • Buat database dengan nama inv

Membuat Tabel

Yang akan kita gunakan untuk proses login ini hanya tabel users saja, struktur tabelnya kurang lebih seperti berikut:

Struktur tabel users
Tabel users

Membuat Koneksi

  1. Buat file baru dengan nama db.php dan simpan pada folder config.
  2. Ketikan kode berikut:

<?php

try {
  $conn = new mysqli('localhost', 'root', '', 'inv');
} catch (Exception $e) {
  echo $e->getMessage();
}

?>

Proses Login

  1. Buat file dengan nama login_proses.php lalu letakan pada folder proses
  2. Kemudian ketikan kode berikut:

<?php

session_start();

require_once '../config/db.php';

// mencegah sql injection menggunakan fungsi mysql_real_escape_string()
$username = mysql_real_escape_string($_POST['username']);
$password = sha1(mysql_real_escape_string($_POST['password']));
$level = $_POST['level'];

if(empty($username) || empty($password) || empty($level)) {
  header('Location: ../index.php');
}

$sql = "SELECT * FROM users WHERE username = '" .$username. "' AND password = '" .$password. "' AND id_level = '" .$level. "'";
$query = $conn->query($sql);
$result = $query->fetch_assoc();
var_dump($result);

if($query->num_rows > 0) {
  $_SESSION['name'] = $result['nama'];
  $_SESSION['id_user'] = $result['id_user'];

  if($result['id_level'] == 1) {
    header('Location: ../admin/index.php');
  } else {
    header('Location: ../operator/index.php');
  }
} else {
  $_SESSION['error'] = "Data yang anda masukan salah, silahkan coba lagi";
  header('Location: ../index.php');
}

?>

Insert Data

  1. Buka phpMyAdmin
  2. Klik pada database inv, lalu pilih tabel users
  3. Pilih menu Insert, kita tambahkan data Admin dan Operator dari sini

    4. Insert data lewat phpmyadmin
    Untuk password kita ubah nilai Functionnya menjadi SHA1

  4. Kemudian klik Go, maka hasilnya akan seperti ini:
Dasa users

Nah, sekarang pergi ke form login dan silahkan coba login sebagai Admin, jika ada yang salah maka akan muncul pesan kesalahan seperti ini:

Pesan gagal login
Dan jika memasukan data yang benar maka akan diarahkan ke halaman Admin. Sekian untuk tutorial part 1 ini, sampai jumpa ditutorial selanjutnya dan terimakasih.

Simak videonya disini.

Selanjutnya : Desain Dashboard Admin dan Form Data Barang