Bagian 5: Menghubungkan Frontend dan Backend

Halo sobat ruanginformatika! 👋

Sekarang kita sudah punya frontend dan backend yang masing-masing berjalan sendiri. Saatnya kita sambungkan keduanya agar user bisa login, melihat todo miliknya, dan mengelola data lewat UI React.

🔧 Persiapan: Setup Proxy

Agar request ke server backend lebih simpel, tambahkan proxy di file client/package.json:

"proxy": "http://localhost:5000",

🧑‍💻 Membuat Form Login dan Register

Buat komponen Login.jsx dan Register.jsx di folder client/src/pages:

Contoh: Register.jsx

import { useState } from 'react';
import axios from 'axios';

function Register() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const handleRegister = async (e) => {
    e.preventDefault();
    try {
      await axios.post('/api/auth/register', { email, password });
      alert('Registrasi berhasil! Silakan login.');
    } catch (err) {
      alert(err.response.data.message || 'Registrasi gagal');
    }
  };

  return (
    <form onSubmit={handleRegister}>
      <input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="Email" />
      <input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="Password" />
      <button type="submit">Daftar</button>
    </form>
  );
}

export default Register;
  

🔐 Menyimpan dan Menggunakan Token

Saat login berhasil, simpan token ke localStorage:

const res = await axios.post('/api/auth/login', { email, password });
localStorage.setItem('token', res.data.token);
  

Buat instance axios dengan token:

const token = localStorage.getItem('token');
const api = axios.create({
  baseURL: '/',
  headers: {
    Authorization: `Bearer ${token}`
  }
});
  

📄 Menampilkan To-do dari User

Gunakan instance api untuk ambil to-do:

useEffect(() => {
  api.get('/api/todos')
    .then(res => setTodos(res.data))
    .catch(err => {
      if (err.response.status === 401) {
        alert('Silakan login terlebih dahulu');
      }
    });
}, []);
  

🌍 Routing Dasar

Gunakan react-router-dom untuk navigasi antar halaman:

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Login from './pages/Login';
import Register from './pages/Register';
import Home from './pages/Home';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />
        <Route path="/register" element={<Register />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;
  

✅ Kesimpulan

Di bagian ini, kita berhasil menghubungkan frontend dan backend dengan alur:

• User daftar dan login dari React
• Token disimpan di localStorage
• React mengambil to-do milik user dari backend

Untuk versi lanjutan, kamu bisa tambahkan fitur seperti logout, validasi form, atau bahkan refresh token.

Di Bagian 6, kita akan deploy aplikasi ini ke internet (frontend dan backend). Klik next page untuk ke Bagian 6! 🚀