Tutorial Laravel & ReactJS #6: API Laporan Mutasi Rekening dan Total Saldo Nasabah

Tutorial #6: API Laporan Mutasi Rekening dan Total Saldo Nasabah

Halo para nasabah kece! Hari ini kita akan membuat API untuk nasabah melihat saldo dan mutasi rekening mereka. Jadi setelah login, nasabah bisa ngecek berapa duit mereka dan lihat riwayat transaksi. Mirip kayak mobile banking, tapi kita yang bikin!

😂 Joke nasabah: "Kenapa nasabah suka cek saldo? Karena itu satu-satunya angka yang selalu berkurang tapi tetap bikin penasaran!" 🤔

🎯 Yang akan kita buat:

  • ✅ Controller khusus nasabah (NasabahController).
  • ✅ Endpoint /api/nasabah/saldo untuk melihat detail rekening dan saldo.
  • ✅ Endpoint /api/nasabah/mutasi untuk melihat daftar transaksi (mutasi).
  • ✅ Pastikan hanya nasabah yang bisa mengakses data miliknya sendiri.
  • ✅ Tambahkan relasi di model User dan Account agar mudah mengambil data.
  • ✅ Testing dengan Postman.

Langkah 1: Membuat NasabahController

Buka terminal di folder bank-backend, jalankan perintah:

php artisan make:controller Api/NasabahController

File akan muncul di app/Http/Controllers/Api/NasabahController.php. Kita akan isi dengan method saldo dan mutasi.

💡 Catatan: Kita asumsikan setiap user yang login dan punya role nasabah (role_id = 3) pasti memiliki satu rekening (account). Relasi sudah kita buat di tutorial #2.

Langkah 2: Method Saldo

Method ini akan mengembalikan data rekening nasabah yang sedang login, termasuk nomor rekening dan saldo.

<?php

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

class NasabahController extends Controller
{
    public function saldo(Request $request)
    {
        $user = $request->user();

        // Ambil account milik user
        $account = $user->account;

        if (!$account) {
            return response()->json(['message' => 'Anda belum memiliki rekening'], 404);
        }

        return response()->json([
            'no_rekening' => $account->account_number,
            'saldo' => $account->balance,
            'nama' => $user->name,
            'email' => $user->email,
        ]);
    }
}

Langkah 3: Method Mutasi

Method ini akan mengembalikan daftar transaksi (mutasi) untuk rekening nasabah yang sedang login. Kita urutkan dari yang terbaru.

public function mutasi(Request $request)
{
    $user = $request->user();
    $account = $user->account;

    if (!$account) {
        return response()->json(['message' => 'Anda belum memiliki rekening'], 404);
    }

    // Ambil transaksi dengan relasi petugas (optional) dan urutkan descending
    $transactions = $account->transactions()
                ->with('petugas:id,name') // ambil nama petugas saja
                ->orderBy('created_at', 'desc')
                ->get();

    // Format data biar lebih rapi
    $data = $transactions->map(function ($trx) {
        return [
            'id' => $trx->id,
            'tanggal' => $trx->created_at->format('d-m-Y H:i'),
            'jenis' => $trx->type == 'debit' ? 'Setor' : 'Tarik',
            'jumlah' => $trx->amount,
            'keterangan' => $trx->description,
            'petugas' => $trx->petugas->name ?? 'Unknown',
        ];
    });

    return response()->json([
        'no_rekening' => $account->account_number,
        'saldo_saat_ini' => $account->balance,
        'mutasi' => $data
    ]);
}
😆 "Kenapa mutasi harus urut waktu? Biar nasabah nggak bingung, kemarin jajan bakso sekarang saldo tinggal receh." 🍜

Langkah 4: Menambahkan Route untuk Nasabah

Buka routes/api.php. Di dalam group middleware auth:sanctum, tambahkan route khusus nasabah. Kita bisa menggunakan prefix /nasabah untuk membedakan.

Route::middleware('auth:sanctum')->group(function () {
    // ... route yang sudah ada (logout, user, dll)

    Route::prefix('nasabah')->group(function () {
        Route::get('/saldo', [App\Http\Controllers\Api\NasabahController::class, 'saldo']);
        Route::get('/mutasi', [App\Http\Controllers\Api\NasabahController::class, 'mutasi']);
    });
});

Perhatikan: Kita tidak menambahkan middleware isNasabah karena kita belum membuatnya. Tapi kita sudah memastikan bahwa hanya user yang punya account yang bisa mengakses (karena method mengecek $user->account). Jika admin/petugas mencoba, mereka tidak punya account, jadi akan dapat 404. Itu sudah cukup aman. Tapi jika ingin lebih strict, kita bisa buat middleware isNasabah yang mengecek role_id = 3. Silakan buat sendiri kalau mau.

Langkah 5: Uji Coba dengan Postman

Login sebagai nasabah: POST ke /api/login dengan email nasabah (misalnya budi@mail.com dari tutorial #2) dan password. Copy token.

Set Authorization: Bearer Token dengan token tadi.

Uji endpoint saldo: GET ke /api/nasabah/saldo. Harusnya muncul data rekening.

{
    "no_rekening": "REK1234567890",
    "saldo": 50000,
    "nama": "Budi",
    "email": "budi@mail.com"
}

Uji endpoint mutasi: GET ke /api/nasabah/mutasi. Harusnya muncul daftar transaksi. Jika belum ada transaksi, akan tampil array kosong.

{
    "no_rekening": "REK1234567890",
    "saldo_saat_ini": 50000,
    "mutasi": [
        {
            "id": 1,
            "tanggal": "01-03-2025 10:30",
            "jenis": "Setor",
            "jumlah": 50000,
            "keterangan": "Setor tunai dari Andi",
            "petugas": "Petugas Andi"
        }
    ]
}
🧪 Tips: Sebelum testing, pastikan ada data transaksi di database. Bisa buat via endpoint deposit yang sudah kita buat di tutorial #5.

Bonus: Middleware isNasabah (Opsional)

Jika ingin lebih strict, kita bisa buat middleware yang memastikan user memiliki role_id = 3.

Buat middleware:

php artisan make:middleware IsNasabah

Isi handle:

public function handle(Request $request, Closure $next)
{
    if ($request->user() && $request->user()->role_id == 3) {
        return $next($request);
    }
    return response()->json(['message' => 'Akses ditolak, kamu bukan nasabah'], 403);
}

Daftarkan di Kernel.php:

'isNasabah' => \App\Http\Middleware\IsNasabah::class,

Kemudian gunakan di route:

Route::middleware(['auth:sanctum', 'isNasabah'])->group(function () {
    Route::get('/nasabah/saldo', [App\Http\Controllers\Api\NasabahController::class, 'saldo']);
    Route::get('/nasabah/mutasi', [App\Http\Controllers\Api\NasabahController::class, 'mutasi']);
});

Dengan ini, petugas atau admin tidak akan bisa mengakses sama sekali (403), meskipun mereka tidak punya account.

Langkah 6: Tambahan untuk Petugas (Bonus)

Petugas mungkin perlu melihat mutasi nasabah tertentu. Kita bisa buat endpoint di TransactionController atau di PetugasController. Sebagai contoh, tambahkan method di TransactionController:

public function mutasiPetugas($account_id)
{
    $account = Account::with('user')->findOrFail($account_id);
    $transactions = $account->transactions()->with('petugas')->latest()->get();
    return response()->json([
        'nasabah' => $account->user->name,
        'no_rekening' => $account->account_number,
        'saldo' => $account->balance,
        'mutasi' => $transactions
    ]);
}

Route (di group isPetugas):

Route::middleware('isPetugas')->group(function () {
    Route::get('/mutasi/{account_id}', [App\Http\Controllers\Api\TransactionController::class, 'mutasiPetugas']);
});

Ini akan memudahkan petugas mengecek rekening nasabah.

Kesimpulan

  • ✅ Nasabah bisa lihat saldo via API.
  • ✅ Nasabah bisa lihat mutasi via API.
  • ✅ Keamanan terjamin karena hanya data milik sendiri yang dikembalikan.
  • ✅ Bonus middleware dan endpoint petugas.

Di tutorial selanjutnya (#7: Setup React Router, Bootstrap, dan SweetAlert di Frontend) kita akan mulai membangun frontend dengan React. Kita akan siapkan routing, integrasi Bootstrap, dan SweetAlert untuk notifikasi. Siap-siap jadi frontend developer handal!

Lebih baru Lebih lama

نموذج الاتصال