Nama : Dwi Prayoga

NIM : A11.2022.14739
Kelompok : Pemerograman Sisi Klien (4721)

Tugas Pertemuan 7

Hasil Tampilan

Gambar 1 Tampilan Form Input

Gambar 2 Tampilan Hasil Submit Form

Gambar 3 Tampilan Menu Dashboard

Gambar 4 Tampilan Menu Mahasiswa
Source Code
AdminLayout.jsx

import React from 'react';

import { Outlet, Link } from 'react-router-dom';

const AdminLayout = () => {

return (
<div className="flex h-screen">
{/* Sidebar */}
<aside className="w-64 bg-gray-800 text-white p-4">
<h1 className="text-2xl font-bold mb-6">Admin Panel</h1>
<nav>
<ul>
<li className="mb-2">
<Link to="/admin/dashboard" className="hover:text-gray-300">
Dashboard
</Link>
</li>
<li>
<Link to="/admin/mahasiswa" className="hover:text-gray-300">
Mahasiswa
</Link>
</li>
</ul>
</nav>
</aside>

{/* Konten Utama */}

<main className="flex-1 p-6 bg-gray-100">
<Outlet />
</main>
</div>
);
};

export default AdminLayout;

src/admin/Dashboard.jsx

import React from "react";

import { useNavigate } from "react-router-dom";

const Dashboard = () => {

const navigate = useNavigate();

const handleLogout = () => {

// Clear the login state and remove the data from localStorage
localStorage.removeItem("isLoggedIn");
localStorage.removeItem("user"); // Optional, to clear user data
navigate("/login"); // Redirect to the login page
};

return (
<div className="h-screen bg-gray-100 p-8 relative">
{/* Logout Button in the Top Right Corner */}
<button
onClick={handleLogout}
className="absolute top-4 right-4 bg-red-500 text-white py-2 px-6 rounded hover:bg-red-600"
>
Logout
</button>

<header className="mb-4">
<h1 className="text-3xl font-bold">Dashboard Mahasiswa</h1>
</header>
<section>
<p className="text-lg mb-6">Selamat datang di dashboard mahasiswa! Berikut adalah ringkasan
informasi yang terkait dengan mahasiswa.</p>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{/* Card for Total Students */}
<div className="bg-white shadow rounded-lg p-6">
<h3 className="text-xl font-semibold">Total Mahasiswa</h3>
<p className="mt-2 text-gray-600">Jumlah mahasiswa yang terdaftar di universitas</p>
<div className="text-2xl font-bold mt-4">1200</div>
</div>

{/* Card for Active Students */}

<div className="bg-white shadow rounded-lg p-6">
<h3 className="text-xl font-semibold">Mahasiswa Aktif</h3>
<p className="mt-2 text-gray-600">Mahasiswa yang sedang aktif kuliah</p>
<div className="text-2xl font-bold mt-4">950</div>
</div>
 {/* Card for Graduated Students */}
<div className="bg-white shadow rounded-lg p-6">
<h3 className="text-xl font-semibold">Mahasiswa Lulus</h3>
<p className="mt-2 text-gray-600">Jumlah mahasiswa yang sudah lulus</p>
<div className="text-2xl font-bold mt-4">300</div>
</div>
</div>

<div className="mt-8">
<h2 className="text-2xl font-bold mb-4">Tautan Cepat</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{/* Quick Link 1 */}
<div className="bg-white shadow rounded-lg p-6">
<h4 className="text-lg font-semibold">Lihat Data Mahasiswa</h4>
<p className="mt-2 text-gray-600">Akses data mahasiswa lengkap dan detail.</p>
<button className="mt-4 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
Lihat Data
</button>
</div>

{/* Quick Link 2 */}

<div className="bg-white shadow rounded-lg p-6">
<h4 className="text-lg font-semibold">Tugas Mahasiswa</h4>
<p className="mt-2 text-gray-600">Cek status tugas dan nilai mahasiswa.</p>
<button className="mt-4 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
Cek Tugas
</button>
</div>

{/* Quick Link 3 */}

<div className="bg-white shadow rounded-lg p-6">
<h4 className="text-lg font-semibold">Buat Pengumuman</h4>
<p className="mt-2 text-gray-600">Buat dan kirim pengumuman kepada mahasiswa.</p>
<button className="mt-4 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
Buat Pengumuman
</button>
</div>
</div>
</div>
</section>
</div>
);
};
export default Dashboard;

src/admin/Mahsiswa.jsx

import { useEffect, useState } from "react";

import axios from "axios";

const Mahasiswa = () => {

const [data, setData] = useState([]);
const [error, setError] = useState(null);
const [loading, setLoading] = useState(true);

useEffect(() => {
// Fungsi untuk mengambil data
const fetchData = async () => {
try {
const response = await axios.get("https://jsonplaceholder.typicode.com/posts");
setData(response.data); // Set data dari response API
setError(null); // Pastikan error di-reset
} catch (err) {
setError("Terjadi kesalahan saat mengambil data.");
} finally {
setLoading(false); // Hentikan loading setelah selesai
}
};

fetchData();
}, []);

if (loading) return <div>Loading...</div>;

if (error) return <div className="text-red-500">{error}</div>;

return (
<div>
<h1>Halaman Mahasiswa</h1>
<div>
<table className="min-w-full table-auto">
<thead>
<tr className="bg-gray-200">
<th className="border px-4 py-2">No</th>
<th className="border px-4 py-2">Title</th>
<th className="border px-4 py-2">Body</th>
</tr>
 </thead>
<tbody>
{data.map((item, index) => (
<tr key={item.id} className={index % 2 === 0 ? 'bg-gray-100' : 'bg-gray-200'}>
<td className="border px-4 py-2">{index + 1}</td>
<td className="border px-4 py-2">{item.title}</td>
<td className="border px-4 py-2">{item.body}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
);
};

export default Mahasiswa;

src/Auth/Login.jsx

import React, { useState } from 'react';

import { useNavigate } from 'react-router-dom';

const Login = ({ setIsLoggedIn }) => {

const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const navigate = useNavigate();

const handleLogin = (e) => {

e.preventDefault();

// Simulasi pengecekan login (validasi email dan password dari localStorage)

const storedUser = JSON.parse(localStorage.getItem('user')); // Ambil data user yang terdaftar

if (storedUser && storedUser.email === email && storedUser.password === password) {

console.log('Login berhasil');
setIsLoggedIn(true);
localStorage.setItem('isLoggedIn', 'true'); // Menyimpan status login
navigate('/admin/dashboard'); // Mengarahkan ke dashboard setelah login
} else {
alert('Email atau password salah!');
}
};

const goToRegister = () => {

navigate('/register'); // Arahkan pengguna ke halaman register
};

return (
<div className="flex justify-center items-center h-screen bg-gray-100">
<form onSubmit={handleLogin} className="bg-white p-6 rounded shadow-md w-96">
<h2 className="text-2xl font-bold mb-4">Login</h2>
<div className="mb-4">
<label className="block mb-1">Email</label>
<input
type="email"
className="w-full px-4 py-2 border rounded"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
</div>
<div className="mb-4">
 <label className="block mb-1">Password</label>
<input
type="password"
className="w-full px-4 py-2 border rounded"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
</div>
<button
type="submit"
className="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600"
>
Login
</button>
<div className="mt-4 text-center">
<p className="text-sm">
Belum punya akun?{' '}
<button
onClick={goToRegister}
className="text-blue-500 hover:underline"
>
Daftar di sini
</button>
</p>
</div>
</form>
</div>
);
};

export default Login;

src/Auth/Register.jsx

import React, { useState } from 'react';

import { useNavigate } from 'react-router-dom';

const Register = () => {

const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const navigate = useNavigate();

const handleRegister = (e) => {

e.preventDefault();

if (password !== confirmPassword) {

alert('Password dan konfirmasi password tidak cocok!');
return;
}

const newUser = { email, password };

localStorage.setItem('user', JSON.stringify(newUser)); // Simpan data user ke localStorage

alert('Pendaftaran berhasil!');
navigate('/login'); // Setelah daftar, arahkan pengguna ke halaman login
};

return (
<div className="flex justify-center items-center h-screen bg-gray-100">
<form onSubmit={handleRegister} className="bg-white p-6 rounded shadow-md w-96">
<h2 className="text-2xl font-bold mb-4">Daftar Akun</h2>
<div className="mb-4">
<label className="block mb-1">Email</label>
<input
type="email"
className="w-full px-4 py-2 border rounded"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
</div>
<div className="mb-4">
<label className="block mb-1">Password</label>
<input
type="password"
className="w-full px-4 py-2 border rounded"
 value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
</div>
<div className="mb-4">
<label className="block mb-1">Konfirmasi Password</label>
<input
type="password"
className="w-full px-4 py-2 border rounded"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
required
/>
</div>
<button
type="submit"
className="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600"
>
Daftar
</button>
</form>
</div>
);
};

export default Register;

App.jsx

import React, { useState, useEffect } from 'react';

import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import Login from './Pages/Auth/Login';
import Register from './Pages/Auth/Register';
import AdminLayout from './Layout/AdminLayout';
import Dashboard from './Pages/admin/Dashboard';
import Mahasiswa from './Pages/admin/Mahasiswa';
import ProtectedRoute from './ProtectedRoute';

const App = () => {

const [isLoggedIn, setIsLoggedIn] = useState(false);

useEffect(() => {
// Cek status login dari localStorage
const user = localStorage.getItem('isLoggedIn');
if (user === 'true') {
setIsLoggedIn(true);
}
}, []);

return (
<Router>
<Routes>
{/* Rute untuk autentikasi */}
<Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} />} />
<Route path="/register" element={<Register />} />

{/* Rute untuk admin dengan layout */}

<Route
path="/admin/*"
element={
<ProtectedRoute isLoggedIn={isLoggedIn}>
<AdminLayout />
</ProtectedRoute>
}
>
<Route path="dashboard" element={<Dashboard />} />
<Route path="mahasiswa" element={<Mahasiswa />} />
</Route>

{/* Redirect dari "/" ke "/admin/dashboard" */}

<Route path="/" element={<Navigate to="/admin/dashboard" />} />
 {/* Halaman 404 untuk route yang tidak ditemukan */}
<Route path="*" element={<div>404 - Page Not Found</div>} />
</Routes>
</Router>
);
};

export default App;