Membuat Modal Data Kelas

2025-07-30 16:58:09 +07:00 · 2025-07-30 16:58:09 +07:00 · 1f54071957
parent fcaf956cab
commit 1f54071957
7 changed files with 404 additions and 14 deletions
--- a/app/Http/Controllers/SiswaController.php
+++ b/app/Http/Controllers/SiswaController.php
@ -75,4 +75,48 @@ class SiswaController extends Controller

        return redirect()->route('siswa.index')->with('success', 'Data berhasil dihapus.');
    }
+
+    public function kelasIndex()
+    {
+    $kelases = Kelas::all();
+    return view('kelas.index', compact('kelases'));
+    }
+
+    public function kelasStore(Request $request)
+    {
+    $request->validate([
+        'nama' => 'required|string|max:255',
+    ]);
+
+    Kelas::create($request->only('nama'));
+
+    return redirect()->route('kelas.index')->with('success', 'Data kelas berhasil ditambahkan!');
+    }
+
+    public function kelasEdit($id)
+    {
+    $kelas = Kelas::findOrFail($id);
+    $kelases = Kelas::all();
+    return view('kelas.index', compact('kelas', 'kelases'));
+    }
+
+    public function kelasUpdate(Request $request, $id)
+    {
+    $request->validate([
+        'nama' => 'required|string|max:255',
+    ]);
+
+    $kelas = Kelas::findOrFail($id);
+    $kelas->update(['nama' => $request->nama]);
+
+    return redirect()->route('kelas.index')->with('success', 'Data kelas berhasil diperbarui!');
+    }
+
+    public function kelasDestroy($id)
+    {
+    $kelas = Kelas::findOrFail($id);
+    $kelas->delete();
+
+    return redirect()->route('kelas.index')->with('success', 'Data kelas berhasil dihapus!');
+    }
 }
--- a/resources/views/admin/partials/footer.blade.php
+++ b/resources/views/admin/partials/footer.blade.php
@ -1,3 +1,3 @@
 <footer class="main-footer text-sm text-center">
-    <strong>&copy; {{ date('Y') }} Admin Panel</strong> All rights reserved.
+    <strong>&copy; {{ date('Y') }} Halaman Admin</strong> All rights reserved.
 </footer>
--- a/resources/views/admin/partials/sidebar.blade.php
+++ b/resources/views/admin/partials/sidebar.blade.php
@ -34,12 +34,12 @@
                    </a>
                </li>

-                <!-- Master Data Dropdown -->
+                <!-- Semua Data Dropdown -->
                <li class="nav-item has-treeview {{ request()->is('siswa*') || request()->is('guru*') || request()->is('kelas*') ? 'menu-open' : '' }}">
                    <a href="#" class="nav-link">
                        <i class="nav-icon fas fa-database"></i>
                        <p>
-                            Master Data
+                            Semua Data
                            <i class="right fas fa-angle-left"></i>
                        </p>
                    </a>
@ -50,11 +50,17 @@
                                <p>Data Siswa</p>
                            </a>
                        </li>
-                        {{-- Tambah menu lain seperti Guru/Kelas di sini --}}
+
+                    <li class="nav-item">
+                        <a href="{{ route('kelas.index') }}" class="nav-link {{ request()->is('kelas') ? 'active' : '' }}">
+                        <i class="nav-icon fas fa-chalkboard"></i>
+                        <p>Data Kelas</p>
+                        </a>
+                    </li>
                    </ul>
                </li>

-                <!-- Logout (Di luar Master Data) -->
+                <!-- Logout -->
                <li class="nav-item">
                    <a href="{{ route('logout') }}" class="nav-link"
                        onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
--- a/resources/views/dashboard.blade.php
+++ b/resources/views/dashboard.blade.php
@ -22,6 +22,20 @@
        </a>
    </div>

+<!-- Kotak Data Kelas -->
+<div class="col-md-4 col-sm-12 mb-3">
+    <a href="{{ route('kelas.index') }}" class="text-decoration-none">
+        <div class="card shadow-sm h-100" style="background-color: #3a8cf7ff; color: #ffffffff;">
+            <div class="card-body text-center d-flex flex-column justify-content-center align-items-center">
+                <i class="fas fa-school fa-4x mb-3" style="color: #ffffffff;"></i> 
+                <h5 class="card-title">4 Kelas</h5>
+                <p class="m-0">View Details</p>
+            </div>
+        </div>
+    </a>
+</div>
+
+
    <!-- Grafik Statistik Pengguna -->
    <div class="col-md-8 col-sm-12 mb-3">
        <div class="card bg-white text-dark shadow-sm h-100">
@ -51,10 +65,10 @@
    const userChart = new Chart(ctx, {
        type: 'bar',
        data: {
-            labels: ['Siswa'],
+            labels: ['Siswa', 'Kelas'],
            datasets: [{
                label: 'Jumlah Data',
-                data: [2, 1, 6],
+                data: [2, 4],
                backgroundColor: ['#007bff', '#28a745', '#dc3545'],
                borderRadius: 5
            }]
--- a/resources/views/kelas/index.blade.php
+++ b/resources/views/kelas/index.blade.php
@ -0,0 +1,290 @@
+@extends('layouts.admin')
+
+@section('title', 'Data Kelas')
+@section('content')
+
+<style>
+    .card {
+        background: #fff;
+        border-radius: 12px;
+        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+        margin-top: 20px;
+    }
+
+    .card-header {
+        background: #2563eb;
+        color: white;
+        padding: 16px 24px;
+        font-size: 20px;
+        font-weight: 600;
+        border-radius: 12px 12px 0 0;
+        display: flex;
+        align-items: center;
+    }
+
+    .card-header i {
+        margin-right: 10px;
+    }
+
+    .table th {
+        background-color: #dbeafe;
+        color: #1e3a8a;
+    }
+
+    .btn-sm {
+        font-size: 13px;
+        padding: 5px 10px;
+        border-radius: 6px;
+    }
+
+    .btn-primary {
+        background-color: #3b82f6;
+        border: none;
+    }
+
+    .btn-danger {
+        background-color: #ef4444;
+        border: none;
+    }
+
+    .btn-secondary {
+        background-color: #6b7280;
+        border: none;
+    }
+
+    .btn i {
+        margin-right: 4px;
+    }
+
+    .modal-content {
+        border-radius: 16px;
+        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
+    }
+
+    .modal-header {
+        background-color: #2563eb;
+        color: white;
+        border-top-left-radius: 16px;
+        border-top-right-radius: 16px;
+        border-bottom: none;
+    }
+
+    .modal-header.bg-danger {
+        background-color: #dc2626 !important;
+    }
+
+    .modal-title i {
+        margin-right: 6px;
+    }
+
+    .modal-footer .btn {
+        font-weight: 500;
+    }
+
+    .modal.fade .modal-dialog {
+        transform: translateY(20px);
+        transition: all 0.3s ease-out;
+        opacity: 0;
+    }
+
+    .modal.fade.show .modal-dialog {
+        transform: translateY(0);
+        opacity: 1;
+    }
+
+    .success-icon, .error-icon {
+        width: 80px;
+        height: 80px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: auto;
+    }
+
+    .success-icon {
+        background-color: #d1fae5;
+    }
+
+    .error-icon {
+        background-color: #fee2e2;
+    }
+
+    .success-icon svg,
+    .error-icon svg {
+        animation: popIn 0.4s ease-out forwards;
+        transform: scale(0.8);
+        opacity: 0;
+    }
+
+    @keyframes popIn {
+        to {
+            transform: scale(1);
+            opacity: 1;
+        }
+    }
+</style>
+
+<div class="card">
+    <div class="card-header">
+        <i class="fas fa-chalkboard"></i> Data Kelas
+    </div>
+    <div class="card-body">
+        <table class="table table-bordered text-center">
+            <thead>
+                <tr>
+                    <th>No</th>
+                    <th>Nama Kelas</th>
+                    <th>Aksi</th>
+                </tr>
+            </thead>
+            <tbody>
+                @foreach($kelases as $index => $kelas)
+                    <tr>
+                        <td>{{ $index + 1 }}</td>
+                        <td>{{ $kelas->nama }}</td>
+                        <td>
+                            <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#editModal{{ $kelas->id }}">
+                                <i class="fas fa-edit"></i> Edit
+                            </button>
+                            <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#deleteModal{{ $kelas->id }}">
+                                <i class="fas fa-trash-alt"></i> Hapus
+                            </button>
+                        </td>
+                    </tr>
+
+                    <div class="modal fade" id="editModal{{ $kelas->id }}" tabindex="-1">
+                        <div class="modal-dialog modal-dialog-centered">
+                            <form action="{{ route('kelas.update', $kelas->id) }}" method="POST">
+                                @csrf
+                                @method('PUT')
+                                <div class="modal-content">
+                                    <div class="modal-header">
+                                        <h5 class="modal-title"><i class="fas fa-edit"></i> Edit Kelas</h5>
+                                        <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
+                                    </div>
+                                    <div class="modal-body">
+                                        <div class="form-group">
+                                            <label>Nama Kelas</label>
+                                            <input type="text" name="nama" class="form-control" value="{{ $kelas->nama }}" required>
+                                        </div>
+                                    </div>
+                                    <div class="modal-footer">
+                                        <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Simpan</button>
+                                        <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fas fa-times"></i> Batal</button>
+                                    </div>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+
+                    <div class="modal fade" id="deleteModal{{ $kelas->id }}" tabindex="-1">
+                        <div class="modal-dialog modal-dialog-centered">
+                            <form action="{{ route('kelas.destroy', $kelas->id) }}" method="POST">
+                                @csrf
+                                @method('DELETE')
+                                <div class="modal-content">
+                                    <div class="modal-header bg-danger">
+                                        <h5 class="modal-title"><i class="fas fa-exclamation-circle"></i> Hapus Kelas</h5>
+                                        <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
+                                    </div>
+                                    <div class="modal-body text-center">
+                                        <p>Yakin ingin menghapus <strong>{{ $kelas->nama }}</strong>?</p>
+                                    </div>
+                                    <div class="modal-footer justify-content-center">
+                                        <button type="submit" class="btn btn-danger"><i class="fas fa-trash-alt"></i> Ya, Hapus</button>
+                                        <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fas fa-times"></i> Batal</button>
+                                    </div>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                @endforeach
+            </tbody>
+        </table>
+
+        <div class="text-center mt-4">
+            <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#tambahModal">
+                <i class="fas fa-plus-circle"></i> Tambah Kelas
+            </button>
+        </div>
+    </div>
+</div>
+
+<div class="modal fade" id="tambahModal" tabindex="-1" aria-hidden="true">
+<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
+    <form action="{{ route('kelas.store') }}" method="POST">
+      @csrf
+      <div class="modal-content animate__animated animate__fadeInDown" style="border-radius: 12px;">
+        <div class="modal-header bg-primary text-white">
+          <h5 class="modal-title">
+            <i class="fas fa-plus-circle me-1"></i> Tambah Kelas
+          </h5>
+          <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body">
+          <div class="form-group">
+            <label for="nama">Nama Kelas</label>
+            <input type="text" name="nama" id="nama" class="form-control" placeholder="Masukkan nama kelas..." required>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="submit" class="btn btn-primary">
+            <i class="fas fa-save"></i> Simpan
+          </button>
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">
+            <i class="fas fa-times"></i> Batal
+          </button>
+        </div>
+      </div>
+    </form>
+  </div>
+</div>
+
+@if (session('success'))
+<div class="modal fade show" id="successModal" tabindex="-1" aria-modal="true" role="dialog" style="display: block;">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content border-0 text-center p-4" style="border-radius: 16px; box-shadow: 0 8px 20px rgba(0,0,0,0.1);">
+      <div class="modal-body">
+        <div class="d-flex justify-content-center mb-3 success-icon">
+          <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M5 13l4 4L19 7"></path>
+          </svg>
+        </div>
+        <h5 class="text-success font-weight-bold">{{ session('success') }}</h5>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  setTimeout(() => {
+    document.getElementById("successModal").style.display = "none";
+  }, 2500);
+</script>
+@endif
+
+@if (session('error'))
+<div class="modal fade show" id="errorModal" tabindex="-1" aria-modal="true" role="dialog" style="display: block;">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content border-0 text-center p-4" style="border-radius: 16px; box-shadow: 0 8px 20px rgba(0,0,0,0.1);">
+      <div class="modal-body">
+        <div class="d-flex justify-content-center mb-3 error-icon">
+          <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M6 18L18 6M6 6l12 12"></path>
+          </svg>
+        </div>
+        <h5 class="text-danger font-weight-bold">{{ session('error') }}</h5>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  setTimeout(() => {
+    document.getElementById("errorModal").style.display = "none";
+  }, 3000);
+</script>
+@endif
+
+@endsection
--- a/resources/views/siswa/index.blade.php
+++ b/resources/views/siswa/index.blade.php
@ -14,6 +14,7 @@
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        background-color: white;
        overflow: hidden;
+        margin-bottom: 30px;
    }

    .card-header.bg-primary {
@ -93,14 +94,31 @@
        margin-top: 20px;
    }

-    .text-right {
-        margin-top: 20px;
+    .text-center.mt-4 {
+        margin-top: 30px !important;
+    }
+
+    .btn-lg {
+        padding: 10px 24px;
+        font-size: 16px;
+        border-radius: 8px;
+    }
+
+    .text-center p {
+        font-size: 16px;
+    }
+
+    .btn i {
+        margin-right: 5px;
    }
 </style>

+<!-- pastikan FontAwesome sudah dimuat -->
+<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
+
 <div class="card">
    <div class="card-header bg-primary">
-        <h3 class="card-title">📋 Data Siswa</h3>
+        <h3 class="card-title"><i class="fas fa-users mr-2"></i>Data Siswa</h3>
    </div>
    <div class="card-body">

@ -133,11 +151,15 @@
                                <td>{{ $siswa->umur }}</td>
                                <td>{{ $siswa->absen }}</td>
                                <td>
-                                    <a href="{{ route('siswa.edit', $siswa->id) }}" class="btn btn-info btn-sm">Edit</a>
+                                    <a href="{{ route('siswa.edit', $siswa->id) }}" class="btn btn-info btn-sm">
+                                        <i class="fas fa-edit"></i>Edit
+                                    </a>
                                    <form action="{{ route('siswa.destroy', $siswa->id) }}" method="POST" class="d-inline">
                                        @csrf
                                        @method('DELETE')
-                                        <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Yakin mau hapus?')">Hapus</button>
+                                        <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Yakin mau hapus?')">
+                                            <i class="fas fa-trash-alt"></i>Hapus
+                                        </button>
                                    </form>
                                </td>
                            </tr>
@ -151,8 +173,10 @@
            </div>
        @endif

-        <div class="text-right">
-            <a href="{{ route('siswa.create') }}" class="btn btn-primary">+ Tambah Data Siswa</a>
+        <div class="text-center mt-4">
+            <a href="{{ route('siswa.create') }}" class="btn btn-primary btn-lg font-weight-bold">
+                <i class="fas fa-plus-circle"></i> Tambah Data Siswa
+            </a>
        </div>

    </div>
--- a/routes/web.php
+++ b/routes/web.php
@ -35,4 +35,16 @@ Route::get('/datasiswa/{id}', [SiswaController::class, 'show'])->name('siswa.sho
 // Hapus Data Siswa
 Route::delete('/datasiswa/{id}', [SiswaController::class, 'destroy'])->name('siswa.destroy');

+// Data Kelas Siswa
+Route::get('/kelas', [SiswaController::class, 'kelasIndex'])->name('kelas.index');
+
+// Edit & Update Data Kelas Siswa
+Route::get('/kelas/{id}/edit', [SiswaController::class, 'kelasEdit'])->name('kelas.edit');
+Route::put('/kelas/{id}', [SiswaController::class, 'kelasUpdate'])->name('kelas.update');
+
+// Hapus Data Kelas Siswa
+Route::delete('/kelas/{id}', [SiswaController::class, 'kelasDestroy'])->name('kelas.destroy');
+
+Route::post('/kelas', [SiswaController::class, 'kelasStore'])->name('kelas.store');
+
 require __DIR__.'/auth.php';