Tutorial Laravel & ReactJS #1: Persiapan Instalasi | Tabungan Bank

Tutorial Laravel & ReactJS #1: Persiapan dan Instalasi Lingkungan Pengembangan

Halo calon programmer bank!  Siap membuat aplikasi tabungan sendiri? Tenang, kita jalan pelan-pelan kayak semut bawa gula. Hari kita siapin dapur sebelum masak nasi goreng kode! 🍳

😂 Joke dulu biar semangat: "Kenapa programmer pakai kacamata? Soalnya kalau pakai sendok, nggak bisa baca kode!" 🤓

Apa yang akan kita lakukan di artikel ini?

• ✅ Install Laravel (backend API kita).
• ✅ Install ReactJS (frontend untuk nasabah).
• ✅ Pasang Bootstrap biar tampilannya kece.
• ✅ Pasang SweetAlert biar pesannya manis kayak permen.
• ✅ Setting database (kasih rumah buat data tabungan).

Alat-alat yang harus sudah terpasang

Sebelum mulai, pastikan komputer kamu sudah diisiin alat-alat ini ya. Kalau belum, minta bantuan Bapak/Ibu atau instal sendiri (dijamin bisa!).

• PHP (minimal versi 8.1) – bahasa induk Laravel. Cek di terminal: php -v
• Composer – tukang belanja library PHP. Cek: composer -v
• Node.js & npm – biar React bisa jalan. Cek: node -v dan npm -v
• XAMPP / Laragon – buat numpang database MySQL. Pastikan Apache & MySQL menyala.
• Code Editor (Visual Studio Code recommended) – tempat nulis kode.

💡 Catatan Buat Yang Baru Belajar: Jangan takut kalau belum paham istilah-istilah di atas. Anggap aja kita lagi main game, perlu "item" tertentu buat naik level. Nanti juga hafal sendiri.

Langkah 1: Buat Project Laravel (Backend)

Buka terminal/CMD, arahkan ke folder tempat kamu biasa nyimpen project (misal: C:\xampp\htdocs atau D:\Projects). Lalu ketik perintah sakti ini:

composer create-project laravel/laravel bank-backend

Nanti Composer akan mengunduh semua bumbu-bumbu Laravel ke dalam folder bank-backend. Tunggu sampai selesai kayak nunggu pop corn meletus. 

😁 "Kenapa Laravel suka nunggu? Soalnya dia composer, bukan rapper!" (maap ye bapak-bapak jokes)

Langkah 2: Buat Project React (Frontend)

Kita buat folder baru di tempat yang sama, namanya bank-frontend. Ketik perintah berikut:

npx create-react-app bank-frontend

Nanti React akan menyiapkan panggung buat kita. Prosesnya agak lama, bisa sambil ngemil dulu.

Struktur folder setelah ini:

Project/
├── bank-backend/   (Laravel API)
└── bank-frontend/  (React App)
    

Langkah 3: Hubungkan React dengan Bootstrap & SweetAlert

Masuk ke folder frontend, lalu install dua sahabat ini:

cd bank-frontend
npm install bootstrap sweetalert2

Setelah selesai, buka file src/index.js dan impor Bootstrap dengan menambahkan baris ini di bagian atas (setelah import React):

import 'bootstrap/dist/css/bootstrap.min.css';

Sekarang React kamu sudah pake baju Bootstrap, jadi tampilannya langsung responsif kayak anak milenial. 

Langkah 4: Setting Database di Laravel

Nyalakan XAMPP, start Apache & MySQL. Buka phpMyAdmin (http://localhost/phpmyadmin), buat database baru dengan nama bank_tabungan (bebas, asal inget).

Lalu di folder bank-backend, buka file .env. Cari bagian database, ubah jadi seperti ini:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=bank_tabungan   <-- ganti sesuai nama db kamu
DB_USERNAME=root
DB_PASSWORD=    (kosongi kalau pakai XAMPP default)
    

Simpan filenya. Kalau lupa nyimpen, nanti pas jalanin migrasi error, mirip kayak lupa bawa bekel ke sekolah. 

Langkah 5: Jalanin Laravel & React buat tes

Terminal 1 (untuk backend):

cd bank-backend
php artisan serve

Biasanya Laravel akan jalan di http://127.0.0.1:8000. Cek di browser, muncul logo Laravel? Berarti backend siap tempur! 

Terminal 2 (untuk frontend): Buka terminal baru, arahkan ke bank-frontend.

cd bank-frontend
npm start

React akan buka tab baru di http://localhost:3000. Kalau ada animasi logo React, selamat! Kamu sudah berhasil menyiapkan panggung utama. 

😆 "Kenapa React suka pindah-pindah? Karena dia Reactif, suka bereaksi terhadap perubahan!"

Bonus: Tes Koneksi API sederhana

Biar yakin backend dan frontend bisa ngobrol, kita coba ambil data dari Laravel. Buat file route khusus di Laravel. Buka bank-backend/routes/api.php, tambahkan:

<?php

use Illuminate\Support\Facades\Route;

Route::get('/hello', function () {
    return response()->json(['message' => 'Halo dari Laravel, siap ngabisin saldo?']);
});

Kemudian di React, buat komponen sederhana (nanti kita detail di artikel berikutnya). Tapi minimal kita sudah punya jalur API yang siap dipakai.

Kesimpulan

Hari ini kita sudah menyiapkan:

• ✅ Laravel backend (siap jadi teller bank).
• ✅ React frontend (siap jadi ATM nasabah).
• ✅ Bootstrap (biar cantik kayak kamu).
• ✅ SweetAlert (biar kasih notifikasi manis).
• ✅ Database (tempat nyimpen uang virtual).

Di tutorial selanjutnya (#2: Membangun Database dan Model), kita akan mulai bikin tabel-tabel: admin, petugas, nasabah, tabungan, dan transaksi. Siapkan cemilan dan semangat! ✨

✍️ Ditulis dengan rasa ngantuk tapi semangat membara. Kalau ada error, jangan marah-marah sama komputer, dia juga lagi belajar. 😘