Sistem Inventori Sederhana 4

13 Aug 2020

Web sistem inventori sederhana ini aku bangun pake PHP. Aku coba pisahkan antara tampilan (frontend) dan logika aplikasinya atau pengolahan datanya (backend), sehingga akan banyak menggunakan konsep ajax.

Struktur foldernya seperti ini.

• inventori
  • public (root folder aplikasi)
    • actions
      • items.php
      • login.php
      • logout.php
    • css (dari template)
    • fragments
    • js (dari template)
    • template-files (dari template)
    • vendor (dari template)
    • dashboard.php
    • index.php
    • m_items.php
  • middleware.php

Semisal untuk halaman login, untuk sisi tampilan aku buat file public/index.php sedang untuk pengolahan aku buat file public/actions/login.php.

Pada halaman login ini, setelah si user meng-klik tombol Login, dengan bantuan javascript jQuery kulakukan ajax request dengan metode POST ke file backend. Yang selanjutnya backend akan merespon dengan status success atau error. Jika success, maka halaman akan dipindahkan ke halaman dashboard.

Seperti ini:

• Sisi frontend

$('#frmLogin').submit(function(e) {
    $.ajax({
        url: 'actions/login.php', 
        method: 'POST', 
        data: $(this).serialize(),
        success: function(res) {
            window.location = 'dashboard.php';
        },
        error: function(res) {
            console.log(res);
        }
    });

    e.preventDefault();
});

Link file.

• Sisi backend

...

$username = mysqli_real_escape_string($conn, $_POST['username']);
$password = md5($_POST['password']);

$sql = "SELECT * FROM m_user WHERE username='$username'";
$results = mysqli_query($conn, $sql);
if (mysqli_num_rows($results) == 0) {
    echo json_encode(['message' => 'username not found']);
    http_response_code(400);
    die();
}

$user =  mysqli_fetch_assoc($results);
if ($user['password'] !== $password) {
    echo json_encode(['message' => 'wrong password']);
    http_response_code(400);
    die();
}

// set session
$_SESSION["name"] = $user['name'];
$_SESSION["username"] = $user['username'];

echo json_encode("success");

Link file.

Untuk contoh CRUD (create, read, update, delete) bisa dilihat di file Master User. Berikut link frontend, backend.

Untuk project secara keseluruhannya bisa diambil di sini github. Disini aku mengerjakannya dengan temen ku, Sapuan namanya.