273 lines
6.6 KiB
Markdown
273 lines
6.6 KiB
Markdown
# 💎 Aplikasi Kasir Toko Perhiasan
|
|
|
|
Aplikasi kasir modern berbasis web untuk toko perhiasan dengan sistem manajemen yang lengkap dan antarmuka yang user-friendly. Dibuat khusus sesuai kebutuhan Toko Emas Jakarta Citayam.
|
|
|
|
## 👥 Tim Development
|
|
|
|
**PT Teknologi Mulia Sejahtera Cemerlang (Abbauf Tech) - Internship Program**
|
|
|
|
- **Baghaztra Van Ril** - Backend Developer
|
|
- **Aditya Ahmad Afarison** - Frontend Developer
|
|
- **Timotius Julius Iwan** - Backend Developer
|
|
- **Dhilan Radya Irawan** - Frontend Developer
|
|
|
|
---
|
|
|
|
## 🚀 Tentang Aplikasi
|
|
|
|
Semuah sistem Point of Sale (POS) yang dirancang khusus untuk kebutuhan toko perhiasan dengan fitur manajemen yang komprehensif dan sistem role-based access control.
|
|
|
|
### ✨ Fitur Utama
|
|
|
|
#### 👑 Role Owner
|
|
|
|
- **Manajemen Produk** - CRUD produk perhiasan lengkap dengan detail
|
|
- **Manajemen Nampan** - Organisasi produk berdasarkan nampan display
|
|
- **Manajemen Brankas** - Sistem penyimpanan produk berharga
|
|
- **Manajemen Sales** - Kelola data karyawan dan sales performance
|
|
- **Kasir** - Akses penuh ke sistem transaksi
|
|
- **Laporan** - Dashboard analytics dan laporan keuangan
|
|
- **Manajemen Akun** - User management dan pengaturan sistem
|
|
|
|
#### 💼 Role Kasir
|
|
|
|
- **Lihat Produk** - View-only access ke database produk
|
|
- **Kasir** - Interface transaksi untuk penjualan
|
|
|
|
### 🛠️ Tech Stack
|
|
|
|
- **Backend**: Laravel 11.x
|
|
- **Frontend**: Vue.js 3 + Vue Router
|
|
- **Database**: MySQL
|
|
- **Styling**: Tailwind CSS
|
|
- **Build Tool**: Vite
|
|
- **Authentication**: Laravel Sanctum
|
|
- **HTTP Client**: Axios
|
|
|
|
---
|
|
|
|
## 📋 Prerequisites
|
|
|
|
### Opsi 1: Docker (Recommended) 🐳
|
|
|
|
- **Docker Desktop** (Windows/Mac) atau **Docker Engine** (Linux)
|
|
- **Docker Compose** v2.0+
|
|
- **Git**
|
|
|
|
### Opsi 2: Manual Installation
|
|
|
|
- **PHP** 8.2+
|
|
- **Composer**
|
|
- **Node.js** 18+
|
|
- **NPM**
|
|
- **MySQL** 8.0+
|
|
- **Redis** (optional)
|
|
- **Git**
|
|
|
|
---
|
|
|
|
## Installation
|
|
|
|
### 1. Clone Repository
|
|
|
|
```bash
|
|
git clone https://git.abbauf.com/Magang-2025/Kasir.git
|
|
cd Kasir
|
|
```
|
|
|
|
### 2. Install Dependencies Backend
|
|
|
|
```bash
|
|
# Install PHP dependencies
|
|
composer install
|
|
|
|
# Copy environment file
|
|
cp .env.example .env
|
|
|
|
# Generate application key
|
|
php artisan key:generate
|
|
```
|
|
|
|
### 3. Install Dependencies Frontend
|
|
|
|
```bash
|
|
# Install Node.js dependencies
|
|
npm install
|
|
```
|
|
|
|
### 4. Konfigurasi Database
|
|
|
|
Edit file `.env` sesuai dengan konfigurasi database:
|
|
|
|
```env
|
|
DB_CONNECTION=mysql
|
|
DB_HOST=127.0.0.1
|
|
DB_PORT=3306
|
|
DB_DATABASE=toko_emas
|
|
DB_USERNAME=root
|
|
DB_PASSWORD=
|
|
```
|
|
|
|
### 5. Setup Database
|
|
|
|
```bash
|
|
php artisan migrate
|
|
```
|
|
|
|
```bash
|
|
php artisan db:seed
|
|
```
|
|
|
|
### 6. Storage Link
|
|
|
|
```bash
|
|
php artisan storage:link
|
|
```
|
|
|
|
### 7. Jalankan Aplikasi
|
|
|
|
#### Development Mode
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
#### Production Mode
|
|
|
|
```bash
|
|
# Pastikan env production sudah tersedia
|
|
docker compose --env-file .env.production up -d --build
|
|
|
|
# Siapkan database
|
|
docker exec -it abbauf_kasir_app php artisan migrate --seed
|
|
|
|
# Atau import database secara manual
|
|
docker exec -i abbauf_kasir_db mysql -u kasir_user -pkasir_password kasir_db < ./toko_emas.sql
|
|
|
|
# Periksa database (opsional)
|
|
docker exec -it abbauf_kasir_db bash
|
|
mysql -u kasir_user -pkasir_password kasir_db
|
|
```
|
|
|
|
### 8. Print Label
|
|
|
|
- Install driver, ada pada folder `./driver/NiimbotPrinterDriverInstall_3.0.0.5.exe` untuk windows 64bit.
|
|
- Pilih `NIIMBOT B3S_P` pada saat install driver.
|
|
- Sambungkan printer ke komputer via USB.
|
|
- Nyalakan printer.
|
|
- Temukan kode qr yang akan diprint (misalnya pada halaman brankas)
|
|
- Klik tombol print pada halaman tersebut
|
|
- Pilih printer `NIIMBOT B3S_P` dan atur kertas ke ukuran kertas `40mm x 30mm`, margin `Default`, scale `Default`
|
|
- Klik print
|
|
|
|
### 9. Print Nota
|
|
|
|
- Pastikan printer terhubung dengan komputer via USB.
|
|
- Nyalakan printer.
|
|
- Install driver, ada pada folder `./driver/L120_x64_213UsHomeExportAsiaML.exe`.
|
|
- Lakukan transaksi penjualan pada aplikasi, atau pilih nota yang akan diprint di `Laporan > Riwayat transaksi`.
|
|
- Klik tombol print pada halaman tersebut
|
|
- Pilih ukuran kertas A4, margin `Minimum`, scale `95`
|
|
- Klik print
|
|
|
|
---
|
|
|
|
## 🌐 Akses Aplikasi
|
|
|
|
Setelah instalasi berhasil, akses aplikasi melalui:
|
|
|
|
- **URL**: http://localhost:8000
|
|
|
|
### 👤 Default Login
|
|
|
|
**Owner Account:**
|
|
|
|
- Username: `admin`
|
|
- Password: `123123`
|
|
|
|
**Kasir Account:**
|
|
|
|
- Username: `kasir`
|
|
- Password: `123123`
|
|
|
|
---
|
|
|
|
## 📁 Struktur Folder
|
|
|
|
```
|
|
kasir-toko-perhiasan/
|
|
├── app/
|
|
│ ├── Http/Controllers/ # API Controllers
|
|
│ └── Models/ # Database Models
|
|
├── database/
|
|
│ ├── migrations/ # Database Migrations
|
|
│ ├── seeders/ # Data Seeders
|
|
│ └── factories/ # Model Factories
|
|
├── public/ # Public Files
|
|
├── resources/
|
|
│ ├── css/
|
|
│ │ └── app.css # Main CSS File
|
|
│ ├── js/
|
|
│ │ ├── components/ # Reusable Vue Components
|
|
│ │ ├── pages/ # Vue Pages
|
|
│ │ ├── router/ # Vue Routes
|
|
│ │ ├── services/ # API Services
|
|
│ │ └── App.vue
|
|
│ └── views/
|
|
│ └── app.blade.php # Main SPA Template
|
|
└── routes/
|
|
└── web.php # Laravel Routes
|
|
```
|
|
|
|
---
|
|
|
|
## 📊 Fitur Database (Revisi)
|
|
|
|
### Tabel Utama
|
|
|
|
- **akun** → Data pengguna (owner, kasir)
|
|
- **produk** → Master data produk perhiasan
|
|
- **foto** → Kumpulan foto untuk tiap produk
|
|
- **nampan** → Organisasi tempat penyimpanan produk (display)
|
|
- **item** → Stok unit fisik dari produk (bisa ada banyak untuk 1 produk)
|
|
- **transaksi** → Data transaksi penjualan
|
|
- **item_transaksi** → Detail item yang dijual per transaksi
|
|
- **sales** → Data marketing/sales yang membawa pelanggan
|
|
|
|
_(catatan: “brankas” nggak perlu tabel khusus, karena sudah diwakili `item.id_nampan = null`)_
|
|
|
|
### Relationships
|
|
|
|
```php
|
|
// Produk bisa punya banyak foto
|
|
Produk -> hasMany -> Foto
|
|
|
|
// Produk bisa punya banyak item fisik
|
|
Produk -> hasMany -> Item
|
|
|
|
// Item bisa ada di satu nampan, atau null (brankas)
|
|
Item -> belongsTo -> Nampan
|
|
|
|
// Transaksi dicatat oleh satu kasir
|
|
Transaksi -> belongsTo -> Akun (kasir)
|
|
|
|
// Transaksi bisa melibatkan 0/1 sales
|
|
Transaksi -> belongsTo -> Sales
|
|
|
|
// Transaksi punya banyak item_transaksi
|
|
Transaksi -> hasMany -> ItemTransaksi
|
|
|
|
// Item_transaksi menghubungkan 1 transaksi dengan 1 item
|
|
ItemTransaksi -> belongsTo -> Item
|
|
```
|
|
|
|
---
|
|
|
|
## 📄 License
|
|
|
|
Lisensi dan kepemilikan atascource code adalah milik PT Teknologi Mulia Sejahtera Cemerlang.
|
|
|
|
---
|
|
|
|
_Tim Internship TMSC 2025_
|