Persiapan Proyek dan Login Sistem Kasir Laravel

Pada tahap pertama kita akan menyiapkan fondasi aplikasi Sistem Kasir Laravel. Hasil akhirnya bukan hanya proyek Laravel kosong, tetapi aplikasi yang sudah terhubung ke MySQL, memiliki halaman login, logout, dashboard, dua jenis pengguna yaitu administrator dan kasir, serta middleware untuk membatasi halaman berdasarkan role.

Bagian autentikasi dibuat manual menggunakan autentikasi session bawaan Laravel. Dengan cara ini, alur login lebih mudah dipahami karena kita dapat melihat langsung proses validasi, pemeriksaan akun, pembuatan session, sampai logout.

Setelah menyelesaikan tahap ini, aplikasi akan siap digunakan sebagai dasar untuk membuat database produk, pelanggan, supplier, transaksi penjualan, pembelian, stok, laporan, dan nota pada bagian berikutnya.

Hasil yang Akan Dibuat

Pada tahap ini kita akan menghasilkan:

• proyek Laravel 13 bernama kasir-laravel;
• database MySQL kasir_laravel;
• konfigurasi koneksi database melalui .env;
• tambahan kolom role dan is_active pada tabel users;
• role admin dan cashier;
• login menggunakan email dan password;
• opsi Ingat saya;
• logout yang menghapus session dengan aman;
• middleware role untuk membatasi halaman administrator;
• layout Bootstrap yang dapat digunakan pada halaman berikutnya;
• halaman login;
• halaman dashboard;
• akun administrator awal;
• pengujian login, logout, akun tidak aktif, dan pembatasan role.

Persiapan

Tutorial ini menggunakan:

• PHP 8.3 atau yang kompatibel dengan Laravel 13;
• Composer;
• MySQL atau MariaDB;
• Laravel 13;
• Bootstrap 5 melalui CDN;
• browser;
• editor kode seperti Visual Studio Code.

Pastikan PHP, Composer, dan MySQL sudah dapat dijalankan sebelum melanjutkan.

Cek versi PHP:

php -v

Cek Composer:

composer -V

Jika kedua perintah tersebut menampilkan versi yang terpasang, kita dapat melanjutkan membuat proyek.

1. Membuat Proyek Laravel 13

Buka Terminal atau Command Prompt pada folder tempat proyek akan disimpan, kemudian jalankan:

composer create-project laravel/laravel kasir-laravel "^13.0"

Masuk ke folder proyek:

cd kasir-laravel

Generate application key jika diperlukan:

php artisan key:generate

Untuk memastikan proyek dapat berjalan, gunakan:

php artisan serve

Secara default aplikasi dapat dibuka melalui:

http://127.0.0.1:8000

Hentikan server sementara dengan Ctrl + C jika ingin melanjutkan konfigurasi melalui terminal yang sama.

2. Membuat Database MySQL

Buat database baru bernama kasir_laravel.

Jika menggunakan phpMyAdmin, buka menu Database, masukkan nama kasir_laravel, lalu buat database.

Jika menggunakan MySQL melalui terminal, jalankan:

CREATE DATABASE kasir_laravel
CHARACTER SET utf8mb4
COLLATE utf8mb4_unicode_ci;

Database ini akan digunakan untuk menyimpan pengguna, produk, pelanggan, supplier, transaksi, stok, dan data lainnya pada bagian tutorial berikutnya.

3. Mengatur File .env

Buka file .env pada root proyek.

Sesuaikan konfigurasi utama menjadi seperti berikut:

APP_NAME="Kasir Laravel"
APP_ENV=local
APP_KEY=
APP_DEBUG=true
APP_URL=http://localhost:8000
APP_LOCALE=id

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=kasir_laravel
DB_USERNAME=root
DB_PASSWORD=

SESSION_DRIVER=database

Jangan menghapus nilai APP_KEY jika sebelumnya sudah terisi oleh perintah php artisan key:generate.

Jika MySQL pada komputer menggunakan password, isi DB_PASSWORD sesuai password MySQL yang digunakan.

Contoh:

DB_USERNAME=root
DB_PASSWORD=passwordmysql

Setelah mengubah .env, bersihkan cache konfigurasi:

php artisan config:clear

4. Memahami Tabel Users

Laravel sudah menyediakan model User dan migration pengguna pada instalasi awal. Kita akan memanfaatkan tabel users tersebut untuk akun administrator dan kasir.

Data pengguna minimal yang kita perlukan adalah:

• name untuk nama pengguna;
• email untuk login;
• password untuk autentikasi;
• role untuk menentukan hak akses;
• is_active untuk mengaktifkan atau menonaktifkan akun.

Role yang digunakan pada tutorial ini adalah:

admin
cashier

admin digunakan untuk administrator, sedangkan cashier digunakan untuk kasir.

Kita menggunakan nilai role berbahasa Inggris pada database agar konsisten dengan kode program. Label yang tampil kepada pengguna tetap dapat ditulis sebagai Administrator dan Kasir.

5. Menambahkan Role dan Status Pengguna

Buat migration baru:

php artisan make:migration add_role_and_is_active_to_users_table

Buka file migration yang baru dibuat pada folder:

database/migrations

Tambahkan import berikut jika belum tersedia:

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

Isi method up() dan down() seperti berikut:

public function up(): void
{
    Schema::table('users', function (Blueprint $table) {
        $table->string('role', 20)
            ->default('cashier')
            ->after('password');

        $table->boolean('is_active')
            ->default(true)
            ->after('role');
    });
}

public function down(): void
{
    Schema::table('users', function (Blueprint $table) {
        $table->dropColumn(['role', 'is_active']);
    });
}

Jalankan seluruh migration:

php artisan migrate

Jika berhasil, tabel users sekarang memiliki kolom role dan is_active.

Untuk memeriksa status migration, gunakan:

php artisan migrate:status

6. Mengatur Model User

Buka:

app/Models/User.php

Ubah menjadi:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;

class User extends Authenticatable
{
    use HasFactory, Notifiable;

    protected $fillable = [
        'name',
        'email',
        'password',
        'role',
        'is_active',
    ];

    protected $hidden = [
        'password',
        'remember_token',
    ];

    protected function casts(): array
    {
        return [
            'email_verified_at' => 'datetime',
            'password' => 'hashed',
            'is_active' => 'boolean',
        ];
    }

    public function isAdmin(): bool
    {
        return $this->role === 'admin';
    }

    public function isCashier(): bool
    {
        return $this->role === 'cashier';
    }
}

Penjelasan Model User

$fillable menentukan kolom yang boleh diisi menggunakan mass assignment.

protected $fillable = [
    'name',
    'email',
    'password',
    'role',
    'is_active',
];

Password menggunakan cast hashed:

'password' => 'hashed',

Dengan demikian, ketika password diberikan ke model, Laravel akan menyimpannya dalam bentuk hash. Password asli tidak disimpan sebagai teks biasa di database.

Kolom is_active diubah menjadi boolean:

'is_active' => 'boolean',

Method berikut mempermudah pemeriksaan role pada kode program:

public function isAdmin(): bool
{
    return $this->role === 'admin';
}

dan:

public function isCashier(): bool
{
    return $this->role === 'cashier';
}

7. Membuat AuthController

Buat controller autentikasi:

php artisan make:controller AuthController

Buka:

app/Http/Controllers/AuthController.php

Isi dengan kode berikut:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\RedirectResponse;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\View\View;

class AuthController extends Controller
{
    public function create(): View
    {
        return view('auth.login');
    }

    public function store(Request $request): RedirectResponse
    {
        $credentials = $request->validate([
            'email' => ['required', 'email'],
            'password' => ['required', 'string'],
        ]);

        $remember = $request->boolean('remember');

        if (! Auth::attempt([
            'email' => $credentials['email'],
            'password' => $credentials['password'],
            'is_active' => true,
        ], $remember)) {
            return back()
                ->withErrors([
                    'email' => 'Email atau password salah, atau akun tidak aktif.',
                ])
                ->onlyInput('email');
        }

        $request->session()->regenerate();

        return redirect()->intended(route('dashboard'));
    }

    public function destroy(Request $request): RedirectResponse
    {
        Auth::logout();

        $request->session()->invalidate();
        $request->session()->regenerateToken();

        return redirect()->route('login');
    }
}

8. Memahami Proses Login

Method create() hanya menampilkan halaman login:

public function create(): View
{
    return view('auth.login');
}

Method store() memproses data login.

Pertama, email dan password divalidasi:

$credentials = $request->validate([
    'email' => ['required', 'email'],
    'password' => ['required', 'string'],
]);

Kemudian nilai checkbox Ingat saya dibaca:

$remember = $request->boolean('remember');

Autentikasi dilakukan menggunakan Auth::attempt():

Auth::attempt([
    'email' => $credentials['email'],
    'password' => $credentials['password'],
    'is_active' => true,
], $remember)

Perhatikan bahwa is_active juga diperiksa. Artinya pengguna dengan email dan password benar tetap tidak dapat login apabila akunnya dinonaktifkan.

Setelah autentikasi berhasil, session diregenerasi:

$request->session()->regenerate();

Langkah ini penting untuk keamanan session setelah login.

Saat logout, Laravel menghapus autentikasi dan session lama:

Auth::logout();
$request->session()->invalidate();
$request->session()->regenerateToken();

9. Membuat Middleware Role

Autentikasi hanya memastikan pengguna sudah login. Kita masih membutuhkan middleware tambahan untuk membedakan akses administrator dan kasir.

Buat middleware:

php artisan make:middleware RoleMiddleware

Buka:

app/Http/Middleware/RoleMiddleware.php

Isi dengan:

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;
use Symfony\Component\HttpFoundation\Response;

class RoleMiddleware
{
    public function handle(Request $request, Closure $next, string ...$roles): Response
    {
        $user = $request->user();

        if (! $user || ! in_array($user->role, $roles, true)) {
            abort(403, 'Anda tidak memiliki akses ke halaman ini.');
        }

        return $next($request);
    }
}

Middleware menerima satu atau lebih role yang diizinkan.

Contoh:

->middleware('role:admin')

berarti hanya administrator yang boleh mengakses route tersebut.

Contoh lain:

->middleware('role:admin,cashier')

berarti administrator dan kasir sama-sama diizinkan.

10. Mendaftarkan Middleware Role di Laravel 13

Buka:

bootstrap/app.php

Tambahkan import:

use App\Http\Middleware\RoleMiddleware;
use Illuminate\Foundation\Configuration\Middleware;

Kemudian pastikan konfigurasi middleware memiliki alias role.

Contoh bootstrap/app.php:

<?php

use App\Http\Middleware\RoleMiddleware;
use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;

return Application::configure(basePath: dirname(__DIR__))
    ->withRouting(
        web: __DIR__.'/../routes/web.php',
        commands: __DIR__.'/../routes/console.php',
        health: '/up',
    )
    ->withMiddleware(function (Middleware $middleware): void {
        $middleware->alias([
            'role' => RoleMiddleware::class,
        ]);
    })
    ->withExceptions(function (Exceptions $exceptions): void {
        //
    })->create();

Jika bootstrap/app.php sudah memiliki isi tambahan dari proyek Anda, jangan mengganti konfigurasi yang tidak berhubungan. Cukup tambahkan alias middleware role di dalam withMiddleware().

Setelah didaftarkan, alias dapat digunakan pada route seperti:

Route::middleware(['auth', 'role:admin'])->group(function () {
    // Route khusus administrator.
});

Middleware ini akan digunakan kembali pada CRUD master data dan fitur administrasi pada tahap berikutnya.

11. Membuat Route Login, Dashboard, dan Logout

Buka:

routes/web.php

Isi dengan:

<?php

use App\Http\Controllers\AuthController;
use Illuminate\Support\Facades\Route;

Route::redirect('/', '/dashboard');

Route::middleware('guest')->group(function () {
    Route::get('/login', [AuthController::class, 'create'])
        ->name('login');

    Route::post('/login', [AuthController::class, 'store'])
        ->middleware('throttle:5,1')
        ->name('login.store');
});

Route::middleware('auth')->group(function () {
    Route::view('/dashboard', 'dashboard')
        ->name('dashboard');

    Route::post('/logout', [AuthController::class, 'destroy'])
        ->name('logout');
});

Penjelasan Middleware Guest

Route login ditempatkan dalam middleware:

Route::middleware('guest')->group(function () {

Artinya halaman login ditujukan untuk pengguna yang belum login.

Penjelasan Middleware Auth

Dashboard dan logout berada dalam:

Route::middleware('auth')->group(function () {

Artinya pengguna harus login sebelum dapat membuka halaman tersebut.

Membatasi Percobaan Login

Route POST login menggunakan:

->middleware('throttle:5,1')

Ini digunakan untuk membatasi percobaan login berulang dalam waktu singkat.

12. Mengecek Route

Untuk melihat route yang telah dibuat, jalankan:

php artisan route:list

Pastikan terdapat route utama berikut:

GET|HEAD  login
POST      login
GET|HEAD  dashboard
POST      logout

Nama route yang digunakan adalah:

login
login.store
dashboard
logout

13. Membuat Layout Bootstrap

Buat folder:

resources/views/layouts

Kemudian buat file:

resources/views/layouts/app.blade.php

Isi:

<!doctype html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>@yield('title', 'Dashboard') - {{ config('app.name') }}</title>

    <link
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
        rel="stylesheet"
    >

    <style>
        body {
            background: #f4f7fb;
        }

        .card {
            border: 0;
            box-shadow: 0 .25rem 1rem rgba(15, 23, 42, .08);
        }

        @media print {
            .d-print-none,
            .navbar {
                display: none !important;
            }
        }
    </style>

    @stack('styles')
</head>
<body>
    <nav class="navbar navbar-dark bg-primary d-print-none">
        <div class="container">
            <a class="navbar-brand fw-bold" href="{{ route('dashboard') }}">
                Kasir Laravel
            </a>

            @auth
                <div class="d-flex align-items-center gap-3 text-white">
                    <div class="text-end lh-sm">
                        <div>{{ auth()->user()->name }}</div>
                        <small>
                            {{ auth()->user()->isAdmin() ? 'Administrator' : 'Kasir' }}
                        </small>
                    </div>

                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit" class="btn btn-outline-light btn-sm">
                            Logout
                        </button>
                    </form>
                </div>
            @endauth
        </div>
    </nav>

    <main class="container py-4">
        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif

        @if ($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        @yield('content')
    </main>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>

    @stack('scripts')
</body>
</html>

Layout ini akan digunakan kembali pada artikel berikutnya agar tampilan aplikasi konsisten.

@stack('styles') dan @stack('scripts') disiapkan agar halaman tertentu dapat menambahkan CSS atau JavaScript khusus tanpa mengubah layout utama.

14. Membuat Halaman Login

Buat folder:

resources/views/auth

Kemudian buat:

resources/views/auth/login.blade.php

Isi:

<!doctype html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Login - {{ config('app.name') }}</title>

    <link
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
        rel="stylesheet"
    >
</head>
<body class="bg-light">
    <main class="container min-vh-100 d-flex align-items-center justify-content-center py-4">
        <div style="width: 100%; max-width: 420px;">
            <div class="text-center mb-4">
                <h1 class="h3 mb-1">Kasir Laravel</h1>
                <p class="text-secondary mb-0">Silakan login untuk melanjutkan.</p>
            </div>

            <form
                method="POST"
                action="{{ route('login.store') }}"
                class="card shadow-sm border-0 p-4"
            >
                @csrf

                @if ($errors->any())
                    <div class="alert alert-danger">
                        {{ $errors->first() }}
                    </div>
                @endif

                <div class="mb-3">
                    <label for="email" class="form-label">Email</label>
                    <input
                        type="email"
                        id="email"
                        name="email"
                        value="{{ old('email') }}"
                        class="form-control"
                        autocomplete="email"
                        required
                        autofocus
                    >
                </div>

                <div class="mb-3">
                    <label for="password" class="form-label">Password</label>
                    <input
                        type="password"
                        id="password"
                        name="password"
                        class="form-control"
                        autocomplete="current-password"
                        required
                    >
                </div>

                <div class="form-check mb-3">
                    <input
                        class="form-check-input"
                        type="checkbox"
                        name="remember"
                        value="1"
                        id="remember"
                    >
                    <label class="form-check-label" for="remember">
                        Ingat saya
                    </label>
                </div>

                <button type="submit" class="btn btn-primary w-100">
                    Login
                </button>
            </form>
        </div>
    </main>
</body>
</html>

Mengapa Form Login Menggunakan @csrf?

Setiap form POST pada Laravel harus dilindungi CSRF token.

Kode:

@csrf

akan menghasilkan token yang diperiksa Laravel ketika form dikirim.

Jika @csrf tidak ditambahkan, request POST dapat ditolak oleh aplikasi.

15. Membuat Halaman Dashboard

Buat file:

resources/views/dashboard.blade.php

Isi:

@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
    <div class="row g-4">
        <div class="col-12">
            <div class="card">
                <div class="card-body p-4">
                    <h1 class="h3 mb-2">Dashboard</h1>

                    <p class="mb-1">
                        Selamat datang, <strong>{{ auth()->user()->name }}</strong>.
                    </p>

                    <p class="text-secondary mb-0">
                        Anda login sebagai
                        <strong>
                            {{ auth()->user()->isAdmin() ? 'Administrator' : 'Kasir' }}
                        </strong>.
                    </p>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-body">
                    <h2 class="h5">Status Aplikasi</h2>
                    <p class="mb-0 text-secondary">
                        Login dan session sudah aktif. Data transaksi akan ditambahkan pada tahap berikutnya.
                    </p>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-body">
                    <h2 class="h5">Hak Akses</h2>
                    <p class="mb-0 text-secondary">
                        Role akun: <strong>{{ auth()->user()->role }}</strong>.
                    </p>
                </div>
            </div>
        </div>
    </div>
@endsection

Dashboard ini masih sederhana karena data penjualan dan stok belum dibuat. Pada tahap dashboard dan laporan nanti, halaman ini akan dikembangkan menjadi dashboard kasir yang menampilkan ringkasan transaksi dan stok.

16. Membuat Akun Administrator Pertama

Sebelum login, kita membutuhkan akun pengguna.

Jalankan:

php artisan tinker

Kemudian masukkan:

App\Models\User::create([
    'name' => 'Administrator',
    'email' => 'admin@example.com',
    'password' => 'admin12345',
    'role' => 'admin',
    'is_active' => true,
]);

Jika berhasil, Tinker akan menampilkan data model pengguna yang baru dibuat.

Keluar dari Tinker:

exit

Password akan disimpan dalam bentuk hash karena model User sudah menggunakan cast hashed.

Akun sementara yang digunakan untuk pengujian:

Email    : admin@example.com
Password : admin12345
Role     : admin

Jangan gunakan password contoh ini pada aplikasi produksi.

17. Membuat Akun Kasir untuk Pengujian

Agar middleware role dapat diuji sejak awal, buat juga satu akun kasir.

Jalankan kembali:

php artisan tinker

Kemudian:

App\Models\User::create([
    'name' => 'Kasir Demo',
    'email' => 'kasir@example.com',
    'password' => 'kasir12345',
    'role' => 'cashier',
    'is_active' => true,
]);

Keluar dengan:

exit

Akun pengujian:

Email    : kasir@example.com
Password : kasir12345
Role     : cashier

18. Menguji Middleware Role

Kita dapat membuat route sementara untuk memastikan middleware role benar-benar bekerja.

Tambahkan di dalam group middleware auth pada routes/web.php:

Route::get('/admin-test', function () {
    return 'Halaman ini hanya dapat dibuka administrator.';
})->middleware('role:admin')->name('admin.test');

Bagian group auth menjadi:

Route::middleware('auth')->group(function () {
    Route::view('/dashboard', 'dashboard')
        ->name('dashboard');

    Route::get('/admin-test', function () {
        return 'Halaman ini hanya dapat dibuka administrator.';
    })->middleware('role:admin')->name('admin.test');

    Route::post('/logout', [AuthController::class, 'destroy'])
        ->name('logout');
});

Login menggunakan akun administrator, lalu buka:

http://localhost:8000/admin-test

Administrator seharusnya dapat membuka halaman tersebut.

Kemudian logout dan login menggunakan akun kasir. Buka URL yang sama.

Kasir seharusnya mendapatkan response 403 Forbidden.

Setelah pengujian selesai, route /admin-test boleh dihapus karena hanya digunakan untuk memastikan middleware bekerja. Middleware role tetap dipertahankan karena akan dipakai pada halaman administrator di tahap berikutnya.

19. Menjalankan Aplikasi

Jalankan server:

php artisan serve

Buka:

http://127.0.0.1:8000/login

Login menggunakan:

Email    : admin@example.com
Password : admin12345

Jika login berhasil, pengguna akan diarahkan ke:

/dashboard

20. Pengujian Tahap 1

Sebelum melanjutkan ke struktur database, lakukan pengujian berikut.

Pengujian 1 - Login Administrator

Masukkan email dan password administrator yang benar.

Hasil yang diharapkan:

Login berhasil dan pengguna diarahkan ke dashboard.

Pengujian 2 - Password Salah

Gunakan email administrator tetapi masukkan password yang salah.

Hasil yang diharapkan:

Login gagal dan muncul pesan bahwa email atau password salah, atau akun tidak aktif.

Pengujian 3 - Mengakses Dashboard Tanpa Login

Logout, kemudian buka langsung:

http://127.0.0.1:8000/dashboard

Hasil yang diharapkan:

Pengguna diarahkan ke halaman login.

Pengujian 4 - Logout

Login terlebih dahulu, kemudian klik tombol Logout.

Hasil yang diharapkan:

Session login berakhir dan pengguna diarahkan kembali ke halaman login.

Setelah logout, coba buka /dashboard kembali. Pengguna seharusnya diminta login.

Pengujian 5 - Role Administrator

Login sebagai administrator, lalu buka route /admin-test jika route pengujian masih digunakan.

Hasil yang diharapkan:

Administrator dapat membuka halaman.

Pengujian 6 - Role Kasir

Login sebagai kasir, lalu buka route /admin-test.

Hasil yang diharapkan:

Kasir mendapatkan response 403 Forbidden.

Pengujian 7 - Akun Tidak Aktif

Untuk menguji status akun, buka Tinker:

php artisan tinker

Nonaktifkan akun kasir:

$user = App\Models\User::where('email', 'kasir@example.com')->first();
$user->update(['is_active' => false]);

Coba login menggunakan akun kasir tersebut.

Hasil yang diharapkan:

Login ditolak walaupun email dan password benar.

Aktifkan kembali agar dapat dipakai pada tutorial berikutnya:

$user->update(['is_active' => true]);

Keluar dari Tinker:

exit

21. Struktur File Setelah Tahap 1

File penting yang sudah kita gunakan atau buat adalah:

kasir-laravel/
├── app/
│   ├── Http/
│   │   ├── Controllers/
│   │   │   └── AuthController.php
│   │   └── Middleware/
│   │       └── RoleMiddleware.php
│   └── Models/
│       └── User.php
├── bootstrap/
│   └── app.php
├── database/
│   └── migrations/
│       └── xxxx_xx_xx_xxxxxx_add_role_and_is_active_to_users_table.php
├── resources/
│   └── views/
│       ├── auth/
│       │   └── login.blade.php
│       ├── layouts/
│       │   └── app.blade.php
│       └── dashboard.blade.php
├── routes/
│   └── web.php
└── .env

Memahami lokasi file ini akan mempermudah mengikuti bagian selanjutnya.

22. Kesalahan Umum

Unknown database kasir_laravel

Jika muncul pesan seperti:

Unknown database 'kasir_laravel'

pastikan database sudah dibuat dan nama pada .env benar:

DB_DATABASE=kasir_laravel

Access denied for user root

Periksa username dan password MySQL pada .env:

DB_USERNAME=root
DB_PASSWORD=

Sesuaikan dengan konfigurasi MySQL pada komputer Anda.

Target class role does not exist

Jika middleware role tidak ditemukan, periksa kembali alias middleware pada:

bootstrap/app.php

Pastikan terdapat:

$middleware->alias([
    'role' => RoleMiddleware::class,
]);

serta import:

use App\Http\Middleware\RoleMiddleware;

Halaman 419 Page Expired Saat Login

Pastikan form login memiliki:

@csrf

Email dan Password Benar tetapi Tidak Bisa Login

Periksa nilai is_active pengguna.

Akun hanya dapat login jika:

is_active = 1

Route Login Tidak Ditemukan

Jalankan:

php artisan route:list

Pastikan route login dan login.store tersedia.

Perubahan .env Tidak Terbaca

Bersihkan cache konfigurasi:

php artisan config:clear

23. Catatan Keamanan

Beberapa prinsip keamanan yang sudah diterapkan pada tahap ini adalah:

• password tidak disimpan sebagai teks biasa;
• session diregenerasi setelah login;
• session diinvalidate saat logout;
• CSRF digunakan pada form POST;
• percobaan login dibatasi menggunakan throttle;
• akun nonaktif tidak dapat login;
• route terlindungi menggunakan middleware auth;
• route khusus administrator dapat dilindungi menggunakan middleware role:admin.

Saat aplikasi masuk production, jangan menggunakan password contoh dari tutorial dan jangan membiarkan APP_DEBUG=true.

Konfigurasi production akan dibahas pada tahap pengujian dan deployment.

24. Checkpoint Tahap 1

Sebelum melanjutkan, pastikan semua poin berikut sudah berhasil:

[ ] Laravel 13 berhasil dibuat.
[ ] Aplikasi dapat dijalankan dengan php artisan serve.
[ ] Database kasir_laravel sudah dibuat.
[ ] Laravel berhasil terhubung ke MySQL.
[ ] Migration berhasil dijalankan.
[ ] Tabel users memiliki role dan is_active.
[ ] Model User sudah diperbarui.
[ ] AuthController sudah dibuat.
[ ] Login berhasil menggunakan akun administrator.
[ ] Login gagal jika password salah.
[ ] Akun tidak aktif tidak dapat login.
[ ] Logout bekerja.
[ ] Dashboard tidak dapat dibuka oleh guest.
[ ] Middleware role sudah terdaftar.
[ ] Administrator dapat membuka route khusus admin.
[ ] Kasir mendapatkan 403 saat membuka route khusus admin.
[ ] Layout Bootstrap tampil dengan benar.

Jika seluruh checkpoint sudah terpenuhi, fondasi autentikasi sistem kasir sudah siap.

Ringkasan

Pada tahap pertama kita telah menyiapkan proyek Sistem Kasir menggunakan Laravel 13 dan MySQL. Aplikasi sudah memiliki autentikasi berbasis session, halaman login, dashboard, logout, role administrator dan kasir, status akun aktif, serta middleware untuk membatasi akses berdasarkan role.

Fondasi ini penting karena halaman master data dan transaksi pada tahap berikutnya akan menggunakan autentikasi dan middleware yang sudah dibuat di sini.

Selanjutnya kita akan membuat struktur database utama untuk kategori, satuan, produk, pelanggan, supplier, penjualan, pembelian, detail transaksi, pergerakan stok, dan pengaturan aplikasi.

Lanjut: Membuat Struktur Database Sistem Kasir

Referensi Resmi

• Laravel 13 Documentation - Installation and Configuration
• Laravel Documentation - Authentication
• Laravel Documentation - Middleware
• Bootstrap 5 Documentation