Cara Membuat Aplikasi Kasir Laravel Vue JS untuk Pemula

Kalau kamu seorang developer atau pemilik UMKM yang mencari cara membuat aplikasi kasir sendiri, kombinasi Laravel sebagai backend dan Vue.js sebagai frontend adalah pilihan yang praktis. Laravel punya struktur yang rapi, ekosistem luas, dan dukungan API yang kuat. Sementara Vue.js memberikan antarmuka yang responsif dan interaktif — cocok banget buat halaman kasir yang butuh update real-time saat produk ditambah ke keranjang.

Artikel ini adalah tutorial step-by-step membuat aplikasi kasir (Point of Sale) sederhana dengan Laravel API dan Vue.js SPA, fokusnya ke fitur inti: manajemen produk, transaksi penjualan, keranjang belanja, dan pengurangan stok otomatis. Jika kamu ingin solusi lebih cepat, di bagian akhir ada referensi ke aplikasi kasir / POS siap pakai dan product categories di Kios Koding.

Kenapa pilih Laravel + Vue.js buat aplikasi kasir?

Ada beberapa alasan mengapa kombinasi Laravel Vue.js sering dipakai buat aplikasi kasir atau POS berbasis web:

• Laravel memberikan struktur backend yang mudah di-scale: routing API, Eloquent ORM, migrasi database, dan fitur autentikasi (Sanctum) yang siap pakai.
• Vue.js ringan dan mudah diintegrasikan ke dalam project Laravel, cocok buat tampilan kasir yang harus cepat dan intuitif.
• Pola Laravel API + Vue.js untuk aplikasi kasir memisahkan concern dengan jelas: backend jadi sumber kebenaran data, frontend fokus ke pengalaman pengguna.

Banyak developer Indonesia yang mulai dari sini, dan kalau kamu juga dalam tahap belajar, kamu bisa memulai dari template Laravel atau produk Laravel siap pakai yang tersedia di marketplace — misalnya di produk & template Laravel siap pakai.

Persiapan sebelum mulai

Sebelum masuk ke kode, pastikan environment kamu siap:

• PHP 8.2+ (sesuai versi Laravel terbaru)
• Composer
• Node.js & npm
• Database (MySQL atau SQLite untuk development)

Instalasi Laravel

Buat project Laravel baru:

composer create-project laravel/laravel kasir-app
cd kasir-app

Kalau kamu butuh starter kit autentikasi, Laravel Breeze bisa membantu — tapi untuk tutorial ini kita fokus ke pola API + Vue.js SPA.

Integrasi Vue.js ke dalam Laravel

Kamu bisa mengintegrasikan Vue.js ke dalam Laravel dengan beberapa cara. Salah satu yang umum dan praktis adalah:

• Setup Vite (sudah jadi default di Laravel)
• Install Vue 3 plus router dan axios
• Buat komponen Vue untuk halaman kasir
• Compile asset dengan npm run dev atau npm run build

Misalnya, kamu bisa memulai interaksi Vue di layout Blade yang utama, atau membangun halaman sebagai SPA mandiri yang berkomunikasi lewat API. Kalau kamu lebih suka pendekatan full-stack tanpa API terpisah, Inertia.js juga bisa jadi alternatif — tapi tutorial ini kita pakai Laravel API + Vue.js terpisah.

Untuk referensi integrasi yang lebih lengkap, lihat panduan Laravel Vue.js dari sumber terpercaya seperti Brillian Solution — Sistem Kasir Laravel 12 & Vue.js.

Desain database untuk aplikasi kasir

Database adalah fondasi aplikasi kasir. Tabel yang umum dibutuhkan:

Tabel kategori

Schema::create('categories', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->text('description')->nullable();
    $table->boolean('is_active')->default(true);
    $table->timestamps();
});

Tabel produk

Schema::create('products', function (Blueprint $table) {
    $table->id();
    $table->foreignId('category_id')->constrained()->cascadeOnDelete();
    $table->string('name');
    $table->string('barcode')->nullable();
    $table->decimal('sell_price', 12, 2);
    $table->integer('stock')->default(0);
    $table->boolean('is_active')->default(true);
    $table->timestamps();
});

Tabel transaksi dan detail transaksi

Schema::create('transactions', function (Blueprint $table) {
    $table->id();
    $table->string('invoice_number')->unique();
    $table->decimal('total', 12, 2);
    $table->decimal('paid', 12, 2);
    $table->decimal('change', 12, 2)->nullable();
    $table->string('payment_method')->nullable();
    $table->timestamps();
});

Schema::create('transaction_items', function (Blueprint $table) {
    $table->id();
    $table->foreignId('transaction_id')->constrained()->cascadeOnDelete();
    $table->foreignId('product_id')->constrained();
    $table->integer('qty');
    $table->decimal('price', 12, 2);
    $table->decimal('subtotal', 12, 2);
    $table->timestamps();
});

Struktur ini cukup untuk aplikasi kasir sederhana yang punya fitur: produk, kategori, transaksi, dan rincian item.

Membuat API untuk produk dan transaksi

Laravel akan bertindak sebagai backend API. Buat controller dan route yang sesuai.

CRUD produk

Contoh simplest product controller:

// ProductController.php
public function index()
{
    return response()->json(Product::active()->with('category')->get());
}

public function store(Request $request)
{
    $validated = $request->validate([
        'name' => 'required|string',
        'category_id' => 'required|exists:categories,id',
        'sell_price' => 'required|numeric',
        'stock' => 'required|integer',
    ]);

    $product = Product::create($validated);
    return response()->json($product, 201);
}

API transaksi & pengurangan stok

Bagian ini paling kritis: transaksi harus menyimpan data penjualan dan mengurangi stok secara bersamaan dalam satu transaction database.

public function store(Request $request)
{
    $validated = $request->validate([
        'items' => 'required|array',
        'items.*.id' => 'required|exists:products,id',
        'items.*.qty' => 'required|integer|min:1',
        'paid' => 'required|numeric',
        'payment_method' => 'nullable|string',
    ]);

    $total = $this->calculateTotal($validated['items']);

    DB::beginTransaction();
    try {
        $transaction = Transaction::create([
            'invoice_number' => 'INV-' . strtoupper(uniqid()),
            'total' => $total,
            'paid' => $validated['paid'],
            'change' => $validated['paid'] - $total,
            'payment_method' => $validated['payment_method'] ?? 'cash',
        ]);

        foreach ($validated['items'] as $item) {
            $product = Product::findOrFail($item['id']);
            $subtotal = $product->sell_price * $item['qty'];

            TransactionItem::create([
                'transaction_id' => $transaction->id,
                'product_id' => $product->id,
                'qty' => $item['qty'],
                'price' => $product->sell_price,
                'subtotal' => $subtotal,
            ]);

            $product->decrement('stock', $item['qty']);
        }

        DB::commit();
        return response()->json(['success' => true, 'transaction' => $transaction]);
    } catch (\Exception $e) {
        DB::rollBack();
        return response()->json(['error' => $e->getMessage()], 500);
    }
}

Dengan pola ini, stok otomatis berkurang saat transaksi berhasil.

Membuat halaman kasir dengan Vue.js

Di frontend, Vue.js bertugas menampilkan daftar produk, keranjang belanja, dan form checkout.

Keranjang belanja (cart)

// Cashier.vue (simplified)
import { ref, computed } from 'vue'
import axios from 'axios'

const products = ref([])
const cart = ref([])

const total = computed(() =>
  cart.value.reduce((sum, item) => sum + item.sell_price * item.qty, 0)
)

function addToCart(product) {
  const existing = cart.value.find(p => p.id === product.id)
  if (existing) {
    existing.qty++
  } else {
    cart.value.push({ ...product, qty: 1 })
  }
}

Checkout dan menyimpan transaksi

async function checkout(paid, paymentMethod = 'cash') {
  try {
    await axios.post('/api/transactions', {
      items: cart.value,
      paid: paid,
      payment_method: paymentMethod,
    })
    cart.value = []
    // Tampilkan notifikasi atau redirect ke halaman laporan
  } catch (err) {
    console.error('Checkout gagal:', err)
    // Tampilkan error ke pengguna
  }
}

Dengan logika sederhana ini, kamu sudah punya halaman kasir yang bisa menambah produk ke keranjang, menghitung total, dan menyimpan transaksi ke database.

Tips tambahan & kapan boleh pakai source code siap pakai

Beberapa hal yang sering luput dari tutorial kasir sederhana:

• Validasi & keamanan: selalu validasi input di backend (Laravel validation) dan jangan expose logic sensitif ke frontend.
• Autentikasi: kalau aplikasi kasir butuh login kasir/owner, gunakan Laravel Sanctum untuk API authentication.
• Pencetakan struk (opsional): kalau toko butuh struk fisik, kamu bisa integrasi library thermal printer seperti Escpos-Php; ada contoh implementasi di beberapa source code POS open-source.
• Laporan sederhana: kamu bisa menambahkan halaman yang menampilkan total penjualan harian/bulanan dari data transaksi.

Kalau kamu sedang dikejar waktu atau ingin hasil cepat tanpa build dari nol, source code siap pakai bisa jadi alternatif yang masuk akal. Misalnya, kamu bisa lihat kategori aplikasi kasir/pos yang sudah ada di marketplace: aplikasi kasir / POS siap pakai, atau source code siap pakai untuk memulai dengan fondasi yang sudah terstruktur, lalu kustomisasi sesuai kebutuhan toko.

Kesimpulan

Membuat aplikasi kasir dengan Laravel dan Vue.js adalah proyek yang realistis dan bernilai: kamu belajar API design, state management di frontend, dan desain database transaksi yang benar. Fokuslah pada fitur inti dulu — produk, keranjang, transaksi, dan pengurangan stok — lalu tambahkan fitur seperti autentikasi, laporan, atau cetak struk kalau dibutuhkan.

Dan kalau kamu lebih ingin langsung pakai daripada build dari nol, kamu tetap punya pilihan: mulai dari source code yang sudah ada, atau manfaatkan produk dan kategori yang relevan di Kios Koding.