Source Code Aplikasi Peminjaman Barang Berbasis Web Dengan PHP dan MySQL - Part 1 : Desain Login Form dan Proses Login

ullprasetio Januari 15, 2020
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 
Tags:

Posting Komentar

11 Komentar

  1. Firmantya29 Januari 2020 pukul 02.21

    terus data yang benar nya mana?

    BalasHapus
    Balasan
    1. ullprasetio29 Januari 2020 pukul 09.55

      Jika sudah dibuat untuk tabel users, kemudian kita tambahkan datanya. bisa dengan menggunakan query pada menu SQL atau tambahkan lewat menu Insert.

      Contoh query:
      INSERT INTO users (nama, username, password, id_level) VALUES ('PlajariKode', 'admin', 'sha1(admin)', 1)

      Hapus
  2. valleyzcha_gurl13 Maret 2020 pukul 05.54

    Bagaimana cara membuat index.php untuk admin dan index.php untuk operator ?
    Untuk dimasukkan dalam folder admin dan folder operator

    BalasHapus
    Balasan
    1. ullprasetio15 Maret 2020 pukul 13.01

      Pada file proses_login.php ada kode berikut:

      if($result['id_level'] == 1) {
      header('Location: ../admin/index.php');
      } else {
      header('Location: ../operator/index.php');
      }

      Kode diatas berfungsi untuk mengecek id_level, apabila id_levelnya 1 maka diarahkan ke halaman admin, selain 1 maka diarahkan ke halaman operator.

      Hapus
  3. Eko Rizky Blogger12 Februari 2021 pukul 18.50

    tidak running di php7, tolong update kak

    BalasHapus
  4. gilang17 Februari 2021 pukul 13.54

    Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  5. gilang17 Februari 2021 pukul 14.31

    mas saya sudah berhasil buat form login, tapi pas tak masukin username sama passwor sudah benar keterangannya malah "data yang anda masukan salah, silahkan coba lagi"

    BalasHapus
    Balasan
    1. ullprasetio20 Februari 2021 pukul 04.37

      Apa password pada tabel users formatnya sudah diganti jadi SHA1 kaya gambar diatas bang?

      Hapus
    2. gilang22 Februari 2021 pukul 12.47

      sudah mas username admin password juga admin terus SHA1, kalo sudah berhasil nanti keterangannya gimana mas?

      Hapus
    3. gilang22 Februari 2021 pukul 14.33

      makasih bang ini sudah berhasil

      Hapus
  6. anggraito2 Maret 2021 pukul 08.39

    terima kash mas atas scripnya,,tapi pas coba login di xampp munculnya sperti ini
    Warning: require_once(file:///I|/xampp/config/db.php): failed to open stream: Invalid argument in I:\xampp\htdocs\proses\login_proses.php on line 6

    Fatal error: require_once(): Failed opening required 'file:///I|/xampp/config/db.php' (include_path='I:\xampp\php\PEAR') in I:\xampp\htdocs\proses\login_proses.php on line 6

    ini bgmana ya mas

    BalasHapus