Retasya_Salsabila
/
MIF_E31230356
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dashboard guru update

This commit is contained in:
RetasyaSalsabila 2026-02-16 10:46:51 +07:00
parent b1add7f3e3
commit 854b28aa45
5 changed files with 321 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/icon/main/hi.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 590 B

2
public/index.php
View File

@ -11,7 +11,7 @@
if (file_exists($maintenance = __DIR__.'/../storage/framework/maintenance.php')) {
require $maintenance;
}
// Register the Composer autoloader...
require __DIR__.'/../vendor/autoload.php';

152
resources/views/auth/login-guru.blade.php
View File

@ -1,62 +1,92 @@
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Guru - E-Learning</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.login-card {
background: white;
border-radius: 20px;
padding: 40px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
max-width: 450px;
width: 100%;
}
</style>
</head>
<body>
<div class="login-card">
<h2 class="text-center mb-4">👨‍🏫 Login Guru</h2>
@if($errors->any())
<div class="alert alert-danger">
{{ $errors->first() }}
</div>
@endif
<form action="{{ route('guru.login.submit') }}" method="POST">
@csrf
<div class="mb-3">
<label class="form-label">NIP</label>
<input type="text" name="nip" class="form-control"
value="{{ old('nip') }}" required autofocus>
</div>
<div class="mb-3">
<label class="form-label">Password</label>
<input type="password" name="password" class="form-control" required>
</div>
<button type="submit" class="btn btn-primary w-100">
LOGIN
</button>
</form>
<div class="text-center mt-3">
<a href="{{ route('landing-page') }}" class="text-muted">
← Kembali ke Halaman Utama
</a>
@extends('layouts.auth')
@section('title', 'Login Guru')
@section('content')
<link rel="stylesheet" href="{{ asset('css/login-admin.css') }}">
<section id="signin" class="signin-section">
<div class="signin-container">
<h1 class="signin-title">SIGN IN GURU</h1>
{{-- Toast Notifikasi Error --}}
@if ($errors->any())
<div id="toast-error" class="toast-error">
{{ $errors->first() }}
</div>
@endif
<form method="POST" action="{{ route('guru.login.submit') }}">
@csrf
<div class="form-card">
{{-- NIP --}}
<div class="input-group">
<img src="{{ asset('icons/username.svg') }}" class="input-icon">
<input type="text" name="nip"
class="form-input"
placeholder="NIP"
value="{{ old('nip') }}"
required>
</div>
</div>
</body>
</html>
{{-- Password --}}
<div class="input-group password-wrapper">
<img src="{{ asset('icons/password.svg') }}" class="input-icon">
<input type="password"
name="password"
class="form-input password-input"
placeholder="Password"
required>
<button type="button" class="toggle-password">
<img src="{{ asset('icons/show.svg') }}" class="eye-icon">
</button>
</div>
{{-- Remember --}}
<div class="remember-wrapper">
<label class="remember-label">
<input type="checkbox" name="remember">
<span>Remember me</span>
</label>
</div>
</div>
<button type="submit" class="submit-btn">
SIGN IN
</button>
</form>
<a href="{{ route('landing-page') }}" class="back-link">
← Kembali ke Landing Page
</a>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function () {
const toggleBtn = document.querySelector('.toggle-password');
const passwordInput = document.querySelector('.password-input');
const eyeIcon = toggleBtn.querySelector('img');
toggleBtn.addEventListener('click', () => {
const isVisible = passwordInput.type === 'text';
passwordInput.type = isVisible ? 'password' : 'text';
eyeIcon.src = isVisible
? "{{ asset('icons/show.svg') }}"
: "{{ asset('icons/hide.svg') }}";
});
const toast = document.getElementById('toast-error');
if (toast) {
setTimeout(() => toast.remove(), 4000);
}
});
</script>
@endsection

95
resources/views/guru/dashboard.blade.php
View File

@ -3,71 +3,46 @@
@section('title', 'Dashboard Guru')
@section('content')
<div class="container mt-5">
<style>
.page-title {
font-size: 30px;
font-weight: 800;
margin-bottom: 20px;
}
<h1 class="mb-4 fw-bold text-primary">Dashboard Guru</h1>
.stats-card {
background: white;
border-radius: 20px;
padding: 25px;
border: 2px solid #e0f2fe;
text-align: center;
}
<div class="row">
.stats-number {
font-size: 48px;
font-weight: 700;
color: #0284c7;
}
<div class="col-md-4 mb-3">
<div class="card text-center shadow-sm">
<div class="card-body">
<h5>Total Kelas Diampu</h5>
<p class="fs-3 fw-bold text-success">
{{ $totalKelas }}
</p>
</div>
</div>
</div>
.stats-label {
font-size: 16px;
color: #64748b;
margin-top: 10px;
}
<div class="col-md-4 mb-3">
<div class="card text-center shadow-sm">
<div class="card-body">
<h5>Total Mata Pelajaran</h5>
<p class="fs-3 fw-bold text-primary">
{{ $totalMapel }}
</p>
</div>
</div>
</div>
.welcome-card {
background: white;
border-radius: 20px;
padding: 30px;
border: 2px solid #e0f2fe;
margin-bottom: 30px;
}
</style>
<div class="col-md-4 mb-3">
<div class="card text-center shadow-sm">
<div class="card-body">
<h5>Total Siswa Diajar</h5>
<p class="fs-3 fw-bold text-warning">
{{ $totalSiswa }}
</p>
</div>
</div>
</div>
<h3 class="page-title">DASHBOARD GURU</h3>
</div>
<div class="welcome-card">
<h4>Selamat Datang, {{ Auth::guard('guru')->user()->nama }}! 👨‍🏫</h4>
<p class="text-muted mb-0">NIP: {{ Auth::guard('guru')->user()->nip }}</p>
</div>
<div class="row">
<div class="col-md-4 mb-3">
<div class="stats-card">
<div class="stats-number">{{ $totalKelas }}</div>
<div class="stats-label">Total Kelas Diampu</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="stats-card">
<div class="stats-number">{{ $totalMapel }}</div>
<div class="stats-label">Total Mata Pelajaran</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="stats-card">
<div class="stats-number">{{ $totalSiswa }}</div>
<div class="stats-label">Total Siswa Diajar</div>
</div>
</div>
</div>
@endsection
@endsection

247
resources/views/guru/layouts/app.blade.php
View File

@ -3,72 +3,213 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title', 'E-Learning Guru')</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<title>@yield('title', 'Panel Guru')</title>
<!-- Fonts & Bootstrap -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
font-family: 'Poppins', sans-serif;
background-color: #f8f9fa;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
}
.sidebar {
.wrapper {
display: flex;
min-height: 100vh;
background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
color: white;
}
.content-area {
padding: 30px;
/* SIDEBAR */
.sidebar {
width: 260px;
background: #ffffff;
border-right: 2px solid #e6f0ff;
padding: 30px 20px;
display: flex;
flex-direction: column;
}
.sidebar-logo {
text-align: center;
margin-bottom: 40px;
}
.sidebar-logo img {
width: 90px;
}
.sidebar-link {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 18px;
margin-bottom: 12px;
border-radius: 12px;
color: #64748b;
text-decoration: none;
font-weight: 500;
transition: all 0.2s ease;
}
.sidebar-link:hover {
background: #e6f0ff;
color: #1d4ed8;
}
.sidebar-link.active {
background: #e6f0ff;
color: #1d4ed8;
}
.sidebar-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.sidebar-logout {
margin-top: auto;
}
/* MAIN */
.main {
flex: 1;
background: #f5f9ff;
display: flex;
flex-direction: column;
}
/* TOPBAR */
.topbar {
background: #2b8ef3;
margin: 20px;
padding: 16px 24px;
border-radius: 16px;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
}
.topbar-left {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
font-size: 16px;
}
.topbar-waving {
width: 26px;
height: 26px;
}
.topbar-right {
display: flex;
align-items: center;
gap: 16px;
}
.topbar-icon {
width: 24px;
height: 24px;
cursor: pointer;
}
/* CONTENT */
.content {
padding: 20px 30px;
flex: 1;
}
</style>
@stack('styles')
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- SIDEBAR -->
<div class="col-md-2 sidebar p-0">
<div class="p-4">
<h4 class="mb-4">📚 E-Learning</h4>
<nav class="nav flex-column">
<a href="{{ route('guru.dashboard') }}" class="nav-link text-white">
🏠 Dashboard
</a>
<a href="{{ route('guru.guru.index') }}" class="nav-link text-white">
👨‍🏫 Daftar Guru
</a>
<a href="{{ route('guru.kelas.index') }}" class="nav-link text-white">
🏫 Daftar Kelas
</a>
<a href="{{ route('guru.siswa.index') }}" class="nav-link text-white">
👨‍🎓 Daftar Siswa
</a>
<a href="{{ route('guru.profil.show') }}" class="nav-link text-white">
👤 Profil
</a>
<hr class="bg-white">
<form action="{{ route('guru.logout') }}" method="POST">
@csrf
<button type="submit" class="btn btn-danger w-100">
🚪 Logout
</button>
</form>
</nav>
</div>
<div class="wrapper">
<!-- SIDEBAR -->
<aside class="sidebar">
<div class="sidebar-logo">
<img src="{{ asset('images/logo/logosmk.png') }}" alt="Logo">
</div>
<a href="{{ route('guru.dashboard') }}"
class="sidebar-link {{ request()->routeIs('guru.dashboard') ? 'active' : '' }}">
<img src="{{ asset('images/icon/sidebar/home.png') }}" class="sidebar-icon">
<span>Dashboard</span>
</a>
<a href="{{ route('guru.guru.index') }}"
class="sidebar-link {{ request()->routeIs('guru.guru.*') ? 'active' : '' }}">
<img src="{{ asset('images/icon/sidebar/guru.png') }}" class="sidebar-icon">
<span>Daftar Guru</span>
</a>
<a href="{{ route('guru.kelas.index') }}"
class="sidebar-link {{ request()->routeIs('guru.kelas.*') ? 'active' : '' }}">
<img src="{{ asset('images/icon/sidebar/kelas.png') }}" class="sidebar-icon">
<span>Daftar Kelas</span>
</a>
<a href="{{ route('guru.siswa.index') }}"
class="sidebar-link {{ request()->routeIs('guru.siswa.*') ? 'active' : '' }}">
<img src="{{ asset('images/icon/sidebar/siswa.png') }}" class="sidebar-icon">
<span>Daftar Siswa</span>
</a>
<a href="{{ route('guru.profil.show') }}"
class="sidebar-link {{ request()->routeIs('guru.profil.*') ? 'active' : '' }}">
<img src="{{ asset('images/icon/sidebar/profil.png') }}" class="sidebar-icon">
<span>Profil</span>
</a>
<form action="{{ route('guru.logout') }}" method="POST" class="sidebar-logout">
@csrf
<button type="submit" class="btn btn-danger w-100">
Logout
</button>
</form>
</aside>
<!-- MAIN -->
<div class="main">
<!-- TOPBAR -->
<header class="topbar">
<div class="topbar-left">
<img src="{{ asset('images/icon/main/hi.png') }}"
class="topbar-waving"
alt="Waving">
Hai, {{ Auth::guard('guru')->user()->nama ?? 'Guru' }}
</div>
<!-- MAIN CONTENT -->
<div class="col-md-10 content-area">
@yield('content')
<div class="topbar-right">
<img src="{{ asset('images/icon/sidebar/notif.png') }}"
class="topbar-icon"
alt="Notification">
<img src="{{ asset('images/icon/sidebar/profil.png') }}"
class="topbar-icon"
alt="Profile">
</div>
</div>
</header>
<!-- CONTENT -->
<main class="content">
@yield('content')
</main>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
@stack('scripts')
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
</html>