Tutorial Laravel & ReactJS #7: Setup React Router, Bootstrap, SweetAlert

byFerdian Rahabista -
0

Tutorial #7: Setup React Router, Bootstrap, dan SweetAlert di Frontend

Halo calon frontend developer! Hari ini kita akan menyiapkan panggung utama untuk aplikasi React kita. Kita akan pasang React Router (biar bisa pindah halaman), Bootstrap (biar cantik), dan SweetAlert (biar notifikasinya manis). Anggap saja kita lagi mendekorasi rumah sebelum ditinggali!

😂 Joke biar semangat: "Kenapa React suka pindah-pindah halaman? Karena dia pake Router, bukan Jalan Kaki!" 🚶‍♂️

Yang akan kita lakukan:

  • ✅ Install React Router DOM (versi 6).
  • ✅ Setup struktur folder untuk components dan pages.
  • ✅ Membuat beberapa halaman dummy: Home, Login, Dashboard.
  • ✅ Install dan integrasikan Bootstrap (CSS dan JS).
  • ✅ Install SweetAlert2 dan buat contoh notifikasi.
  • ✅ Membuat Layout/Navbar sederhana dengan Bootstrap.

Langkah 1: Install Dependencies

Buka terminal di folder bank-frontend (project React kita). Jalankan perintah berikut:

npm install react-router-dom bootstrap sweetalert2

Ini akan menginstall tiga package sekaligus. Tunggu sampai selesai kayak nunggu bakso mateng. 

💡 Apa fungsi masing-masing?
  • react-router-dom: untuk navigasi antar halaman.
  • bootstrap: biar tampilannya kece tanpa banyak CSS manual.
  • sweetalert2: bikin popup notifikasi yang cantik.

Langkah 2: Membuat Struktur Folder

Di dalam src, buat folder components dan pages. Nanti kita akan taruh komponen kecil di components, dan halaman utuh di pages.

src/
├── components/
│   └── Navbar.js
├── pages/
│   ├── HomePage.js
│   ├── LoginPage.js
│   └── DashboardPage.js
├── App.js
├── index.js
└── ... (file lain)

Langkah 3: Integrasi Bootstrap

Buka file src/index.js. Tambahkan import Bootstrap di bagian atas (setelah import React):

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js'; // untuk komponen JS Bootstrap (dropdown, modal, dll)

Sekarang seluruh aplikasi React kita sudah memakai baju Bootstrap. Coba ganti font atau warna di komponen nanti akan terlihat.

😆 "Dengan Bootstrap, website kita jadi kayak pake baju batik – terlihat profesional meskipun codingnya amburadul!" 👔

🧭 Langkah 4: Setup React Router

Sekarang kita atur routing di src/App.js. Buka file tersebut dan ubah menjadi:

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import HomePage from './pages/HomePage';
import LoginPage from './pages/LoginPage';
import DashboardPage from './pages/DashboardPage';
import Navbar from './components/Navbar';

function App() {
  return (
    <BrowserRouter>
      <Navbar />
      <div className="container mt-4">
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/login" element={<LoginPage />} />
          <Route path="/dashboard" element={<DashboardPage />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

Penjelasan:

  • BrowserRouter membungkus seluruh aplikasi agar routing berfungsi.
  • Routes dan Route mendefinisikan halaman apa yang tampil untuk URL tertentu.
  • Navbar akan selalu tampil di atas.
  • container mt-4 adalah class Bootstrap untuk memberikan margin dan lebar konten.

Langkah 5: Membuat Komponen Navbar

Buat file src/components/Navbar.js. Isi dengan komponen navbar Bootstrap yang sudah dimodifikasi dengan Link dari React Router:

import React from 'react';
import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav className="navbar navbar-expand-lg navbar-dark bg-primary">
      <div className="container">
        <Link className="navbar-brand" to="/">Bank Tabungan</Link>
        <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarNav">
          <ul className="navbar-nav ms-auto">
            <li className="nav-item">
              <Link className="nav-link" to="/">Home</Link>
            </li>
            <li className="nav-item">
              <Link className="nav-link" to="/login">Login Nasabah</Link>
            </li>
            <li className="nav-item">
              <Link className="nav-link" to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  );
}

export default Navbar;

Perhatikan: kita pakai Link dari React Router, bukan tag <a> biasa. Ini biar nggak reload halaman.

Langkah 6: Membuat Halaman-Halaman Dummy

HomePage.js (src/pages/HomePage.js):

import React from 'react';

function HomePage() {
  return (
    <div className="jumbotron text-center">
      <h1 className="display-4">Selamat Datang di Bank Tabungan!</h1>
      <p className="lead">Aplikasi tabungan sederhana untuk anak SD yang suka nabung.</p>
      <hr className="my-4" />
      <p>Silakan login untuk melihat saldo dan mutasi.</p>
    </div>
  );
}

export default HomePage;

LoginPage.js (src/pages/LoginPage.js):

import React from 'react';

function LoginPage() {
  return (
    <div className="row justify-content-center">
      <div className="col-md-6">
        <div className="card">
          <div className="card-header bg-primary text-white">
            <h4 className="mb-0">Login Nasabah</h4>
          </div>
          <div className="card-body">
            <form>
              <div className="mb-3">
                <label className="form-label">Email</label>
                <input type="email" className="form-control" placeholder="masukkan email" />
              </div>
              <div className="mb-3">
                <label className="form-label">Password</label>
                <input type="password" className="form-control" placeholder="••••••••" />
              </div>
              <button type="submit" className="btn btn-primary w-100">Login</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
}

export default LoginPage;

DashboardPage.js (src/pages/DashboardPage.js):

import React from 'react';

function DashboardPage() {
  return (
    <div>
      <h2>Dashboard Nasabah</h2>
      <div className="card mb-4">
        <div className="card-body">
          <h5 className="card-title">Total Saldo</h5>
          <p className="card-text display-6 text-success">Rp 500.000</p>
        </div>
      </div>
      <h4>Mutasi Terbaru</h4>
      <table className="table table-striped">
        <thead>
          <tr>
            <th>Tanggal</th>
            <th>Jenis</th>
            <th>Jumlah</th>
            <th>Keterangan</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>01-03-2025</td>
            <td>Setor</td>
            <td>Rp 50.000</td>
            <td>Setor tunai</td>
          </tr>
          <tr>
            <td>28-02-2025</td>
            <td>Tarik</td>
            <td>Rp 20.000</td>
            <td>Beli jajan</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

export default DashboardPage;

Langkah 7: Demo SweetAlert

SweetAlert akan kita gunakan nanti untuk notifikasi login sukses, error, konfirmasi logout, dll. Sekarang kita coba buat contoh sederhana di DashboardPage. Tambahkan tombol dan fungsi alert.

Pertama, import SweetAlert di DashboardPage:

import Swal from 'sweetalert2';

Kemudian buat fungsi handleShowAlert dan tambahkan tombol:

const handleShowAlert = () => {
  Swal.fire({
    title: 'Selamat datang!',
    text: 'Ini adalah notifikasi manis dari SweetAlert',
    icon: 'success',
    confirmButtonText: 'OK'
  });
};

// Di dalam return, tambahkan tombol:
<button className="btn btn-warning mt-3" onClick={handleShowAlert}>
  Tes Notifikasi
</button>

Jadi DashboardPage.js akan menjadi:

import React from 'react';
import Swal from 'sweetalert2';

function DashboardPage() {
  const handleShowAlert = () => {
    Swal.fire({
      title: 'Selamat datang!',
      text: 'Ini adalah notifikasi manis dari SweetAlert',
      icon: 'success',
      confirmButtonText: 'OK'
    });
  };

  return (
    <div>
      <h2>Dashboard Nasabah</h2>
      <button className="btn btn-warning mb-3" onClick={handleShowAlert}>
        🍬 Tes Notifikasi
      </button>
      <div className="card mb-4">
        <div className="card-body">
          <h5 className="card-title">Total Saldo</h5>
          <p className="card-text display-6 text-success">Rp 500.000</p>
        </div>
      </div>
      <h4>Mutasi Terbaru</h4>
      <table className="table table-striped">
        <thead>
          <tr>
            <th>Tanggal</th>
            <th>Jenis</th>
            <th>Jumlah</th>
            <th>Keterangan</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>01-03-2025</td>
            <td>Setor</td>
            <td>Rp 50.000</td>
            <td>Setor tunai</td>
          </tr>
          <tr>
            <td>28-02-2025</td>
            <td>Tarik</td>
            <td>Rp 20.000</td>
            <td>Beli jajan</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

export default DashboardPage;
😂 "SweetAlert itu kayak asisten pribadi – selalu muncul pas kita butuh perhatian!" 🤖

Langkah 8: Jalankan Aplikasi

Di terminal, pastikan masih di folder bank-frontend, jalankan:

npm start

Buka http://localhost:3000. Coba navigasi ke halaman Home, Login, Dashboard. Klik tombol notifikasi di Dashboard, harusnya muncul popup manis. 

🧪 Uji coba: Pastikan navbar berfungsi pindah halaman tanpa reload. Kalau ada error, cek lagi import dan export komponen.

Kesimpulan

  • ✅ React Router terpasang dan berfungsi untuk navigasi.
  • ✅ Bootstrap membuat tampilan jadi rapi dan responsif.
  • ✅ SweetAlert siap digunakan untuk notifikasi.
  • ✅ Struktur folder sudah rapi untuk pengembangan selanjutnya.

Di tutorial selanjutnya (#8: Halaman Login Nasabah dan Autentikasi dengan API) kita akan menghubungkan form login ke backend Laravel, menyimpan token, dan mengarahkan ke dashboard. Siap-siap jadi fullstack developer!

✍️ Ditulis oleh programmer yang suka pindah-pindah halaman pakai router, bukan pakai jalan kaki. Kalau error, cek lagi kurung kurawal, mereka suka sembunyi! 😜

Tags

Anda mungkin menyukai postingan ini

Lebih baru Lebih lama

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