Membuat Aplikasi Point Of Sales Sederhana dengan Laravel dan Tailwindcss

Alhamdulillah, setelah lama vakum, saya kembali berbagi pengalaman lewat proyek iseng: membuat aplikasi Point of Sales (POS) sederhana menggunakan Laravel dan Tailwind CSS. Proyek ini cocok untuk pemula yang ingin belajar full-stack development, atau developer berpengalaman yang ingin membuat sistem kasir ringan untuk UMKM.

Dalam panduan ini, saya akan jelaskan langkah demi langkah lengkap — mulai dari setup lingkungan pengembangan lokal menggunakan Laragon 2025 v8.1.0, instalasi Laravel, hingga persiapan awal untuk integrasi Tailwind CSS. Semua dijelaskan secara rinci, praktis, dan tentunya tanpa Docker — karena saya paham betul rasanya coding di laptop “kentang” 😅.

cara membuat aplikasi point of sale laravel reactjs mysql

Kenapa Memilih Framework Laravel & Tailwind CSS untuk Sistem POS?

Laravel adalah framework PHP paling populer untuk membangun aplikasi web modern — MVC-nya rapi, fitur autentikasi dan database migration-nya powerful, serta komunitasnya sangat aktif. Sementara itu, Tailwind CSS memberi kebebasan desain tanpa perlu menulis CSS manual — cocok untuk UI kasir yang simpel tapi tetap elegan.

Kombinasi keduanya? Cepat, efisien, dan hasilnya profesional — bahkan jika Anda baru belajar.

Langkah 1: Download dan Menginstal Laragon sebagai Web Server Lokal

Karena target kita adalah pengembangan lokal yang ringan dan cepat, saya menggunakan Laragon — bukan XAMPP, bukan WAMP, apalagi Docker.

Keunggulan Laragon untuk Laptop Spesifikasi Rendah

Ringan & Cepat — tidak membebani RAM, cocok untuk laptop spek rendah.
All-in-One — sudah termasuk Apache/Nginx, MySQL 8.4/9.1, PHP 8.1-8.4, Node.js, Git, dan banyak lagi.
“Quick Add” — fitur ajaib untuk menambahkan versi PHP/database baru hanya dalam beberapa klik.
Auto Virtual Host — buat subdomain lokal (misal: pos-api.test) tanpa edit hosts manual.

Cara Download & Install Laragon 2025 v8.1.0

Buka situs resmi: https://laragon.org/download/
Download versi “Laragon Full (64-bit)” (ukuran ±229 MB).
Jalankan file installer — pilih direktori instalasi (default: C:\laragon).
Tunggu hingga proses instalasi selesai.
Restart komputer Anda — ini penting agar variabel PATH dan service berjalan sempurna.

Setelah restart, buka Laragon. Anda akan melihat antarmuka utama yang bersih dan intuitif.

Langkah 2: Install Composer Dependency Manager PHP

Composer adalah dependency manager untuk PHP — wajib ada untuk membuat project Laravel.

Download Composer dari: https://getcomposer.org/download/
Jalankan installer — pastikan centang opsi “Add to PATH”.
Buka Command Prompt atau Terminal Laragon (bisa diakses dari menu Laragon > Terminal).
Ketik perintah berikut untuk cek apakah Composer terinstall:
```
composer --version
```
Jika muncul versi (misal: Composer version 2.7.x), artinya berhasil.

Langkah 3: Membuat Project Laravel Baru

Sekarang, mari buat project Laravel pertama kita — bernama Pos-Api.

Buka Terminal Laragon (atau CMD/PowerShell biasa).
Navigasi ke folder www milik Laragon:
```
cd C:\laragon\www
```
Jalankan perintah berikut untuk membuat project Laravel:
```
composer create-project laravel/laravel Pos-Api
```
Catatan: Proses ini akan mengunduh semua dependensi Laravel. Pastikan koneksi internet stabil.
Tunggu hingga proses selesai (biasanya 3-10 menit tergantung kecepatan internet).

Langkah 4: Menjalankan Project Laravel di Laragon

Setelah project selesai dibuat, saatnya menjalankannya di browser.

Buka aplikasi Laragon.
Klik tombol “Start All” — untuk menjalankan Apache dan MySQL.
Klik kanan pada area kosong di Laragon, lalu pilih “www” → cari folder “Pos-Api”.
Klik kanan folder “Pos-Api”, lalu pilih “Create virtual host for this folder”.
Laragon akan otomatis membuat URL akses seperti: http://pos-api.test
Buka browser, ketik http://pos-api.test — maka Anda akan melihat halaman welcome Laravel!

🎉 Selamat! Project Laravel Anda sudah online secara lokal.

Langkah 5: Setup Database MySQL via Laragon

Aplikasi POS pasti butuh database — mari siapkan.

Buka Laragon, klik menu “MySQL” → “Create database”.
Beri nama database, misalnya: pos_db → klik OK.
Buka file .env di dalam folder project Pos-Api (gunakan VS Code, Notepad++, atau editor favorit).
Edit bagian konfigurasi database seperti berikut:
```
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=pos_db
DB_USERNAME=root
DB_PASSWORD=
```
Catatan: Password default MySQL di Laragon adalah kosong (“”).
Simpan file .env.
Di terminal, pastikan Anda berada di folder project:
```
cd C:\laragon\www\Pos-Api
```
Jalankan perintah migrasi dasar Laravel:
```
php artisan migrate
```
Jika muncul error tentang timezone, tambahkan di file config/app.php:
```
'timezone' => 'Asia/Jakarta',
```

Langkah 6: Install & Setup Tailwind CSS (Vite Bundler)

Untuk mempercantik tampilan UI POS kita, mari integrasikan Tailwind CSS menggunakan Vite asset bundler bawaan Laravel terbaru.

Install dependensi Node.js (sudah termasuk di Laragon Full):
```
npm install
```

Install Tailwind CSS dan dependensinya:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Buka file tailwind.config.js yang baru dibuat, lalu edit menjadi:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Buka file resources/css/app.css, lalu tambahkan direktif Tailwind:
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
Compile asset dengan perintah development berikut agar fitur auto-reload aktif:
```
npm run dev
```
Buka file resources/views/welcome.blade.php, hapus semua gaya CSS bawaan di dalam tag head, lalu panggil Tailwind menggunakan direktif Vite terbaru:
```
@vite(['resources/css/app.css', 'resources/js/app.js'])
```
Refresh browser Anda di http://pos-api.test — sekarang project Anda siap menggunakan utility class dari Tailwind CSS!

Apa yang Akan Dibahas di Part Selanjutnya?

Di postingan berikutnya, kita akan mulai membangun fitur inti aplikasi POS: