Membuat Modal Untuk Tampilan Data Jabatan
This commit is contained in:
adelyaou
parent
32d20e4b8e
commit
d8b8b5fc81
|
|
@ -19,5 +19,11 @@ class DashboardController extends Controller
|
|||
return view('dashboard.sections.karyawan', compact('karyawan'));
|
||||
}
|
||||
|
||||
public function jabatan()
|
||||
{
|
||||
$jabatans = Jabatan::all(); // atau [] jika tidak ada data
|
||||
return view('dashboard.sections.jabatan', compact('jabatans'));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,54 @@
|
|||
<?php
|
||||
|
||||
// app/Http/Controllers/JabatanController.php
|
||||
|
||||
namespace App\Http\Controllers;
|
||||
|
||||
use App\Models\Jabatan;
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Support\Facades\Validator;
|
||||
|
||||
class JabatanController extends Controller
|
||||
{
|
||||
// Menampilkan halaman utama Data Jabatan
|
||||
public function index()
|
||||
{
|
||||
$jabatans = Jabatan::latest()->get();
|
||||
return view('dashboard.sections.jabatan', compact('jabatans'));
|
||||
}
|
||||
|
||||
// Menyimpan data jabatan baru
|
||||
public function store(Request $request)
|
||||
{
|
||||
$validator = Validator::make($request->all(), ['jabatan' => 'required|string|max:255|unique:jabatans']);
|
||||
if ($validator->fails()) {
|
||||
return response()->json(['errors' => $validator->errors()], 422);
|
||||
}
|
||||
$jabatan = Jabatan::create($request->only('jabatan'));
|
||||
return response()->json(['success' => 'Data Jabatan berhasil ditambahkan.', 'data' => $jabatan]);
|
||||
}
|
||||
|
||||
// Mengambil data spesifik untuk form edit
|
||||
public function show(Jabatan $jabatan)
|
||||
{
|
||||
return response()->json($jabatan);
|
||||
}
|
||||
|
||||
// Memperbarui data jabatan
|
||||
public function update(Request $request, Jabatan $jabatan)
|
||||
{
|
||||
$validator = Validator::make($request->all(), ['jabatan' => 'required|string|max:255|unique:jabatans,jabatan,' . $jabatan->id]);
|
||||
if ($validator->fails()) {
|
||||
return response()->json(['errors' => $validator->errors()], 422);
|
||||
}
|
||||
$jabatan->update($request->only('jabatan'));
|
||||
return response()->json(['success' => 'Data Jabatan berhasil diperbarui.', 'data' => $jabatan]);
|
||||
}
|
||||
|
||||
// Menghapus data jabatan
|
||||
public function destroy(Jabatan $jabatan)
|
||||
{
|
||||
$jabatan->delete();
|
||||
return response()->json(['success' => 'Data Jabatan berhasil dihapus.']);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,270 @@
|
|||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Data Jabatan')
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
.container {
|
||||
width: 90%;
|
||||
max-width: 900px;
|
||||
background: #ffffff;
|
||||
padding: 20px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
color: #2c3e50;
|
||||
}
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: 14px 15px;
|
||||
margin-top: 10px;
|
||||
color: #ffffff;
|
||||
background: #4e73df;
|
||||
text-decoration: none;
|
||||
border-radius: 50px;
|
||||
font-weight: 600;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
.button:hover {
|
||||
background: #ACB6E5;
|
||||
}
|
||||
.alert {
|
||||
padding: 15px;
|
||||
background-color: #d1f2eb;
|
||||
color: #117864;
|
||||
margin-bottom: 20px;
|
||||
border-left: 6px solid #1abc9c;
|
||||
border-radius: 8px;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 15px;
|
||||
overflow: hidden;
|
||||
border-radius: 15px;
|
||||
}
|
||||
thead {
|
||||
background-color: #4e73df;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
th, td {
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
border-bottom: 1px solid #e1e1e1;
|
||||
}
|
||||
tbody tr:nth-child(even) {
|
||||
background-color: #f4f9fd;
|
||||
}
|
||||
tbody tr:hover {
|
||||
background-color: #e1e6fc;
|
||||
}
|
||||
p {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
font-size: 15px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.button-opsi {
|
||||
display: inline-block ;
|
||||
padding: 10px 15px;
|
||||
margin-top: 2px;
|
||||
color: #ffffff;
|
||||
background: #4e73df;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
font-size: 15px;
|
||||
font family: 'Poppins', sans-serif;
|
||||
font-weight: 300;
|
||||
transition: background 0.3s ease;
|
||||
margin-right: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.button-group {
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
margin-top: 20px;
|
||||
padding: 0 20px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
border-radius: 20px;
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
font-size: 15px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btn-kembali {
|
||||
background-color: #4e73df;
|
||||
}
|
||||
|
||||
.btn-tambah {
|
||||
background-color: #4e73df;
|
||||
}
|
||||
</style>
|
||||
|
||||
@section('content')
|
||||
<div class="container-fluid">
|
||||
<h1 class="h3 mb-4 text-gray-800">Data Jabatan</h1>
|
||||
|
||||
<div class="card shadow mb-4">
|
||||
<div class="card-header py-3">
|
||||
<button id="btn-tambah-jabatan" class="btn btn-primary">+ Tambah Data Jabatan</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered" id="jabatan-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>No</th>
|
||||
<th>Nama Jabatan</th>
|
||||
<th>Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($jabatans as $key => $jabatan)
|
||||
<tr id="jabatan-{{ $jabatan->id }}">
|
||||
<td>{{ $key + 1 }}</td>
|
||||
<td>{{ $jabatan->jabatan }}</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-info btn-edit" data-id="{{ $jabatan->id }}">Edit</button>
|
||||
<button class="btn btn-sm btn-danger btn-hapus" data-id="{{ $jabatan->id }}">Hapus</button>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="jabatanModal" tabindex="-1" role="dialog" aria-labelledby="jabatanModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="jabatanModalLabel">Tambah Jabatan</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<form id="jabatanForm">
|
||||
<div class="modal-body">
|
||||
@csrf
|
||||
<input type="hidden" id="jabatan_id">
|
||||
<div class="form-group">
|
||||
<label for="jabatan">Nama Jabatan</label>
|
||||
<input type="text" class="form-control" id="jabatan" name="jabatan" required>
|
||||
<div class="invalid-feedback"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
|
||||
<button type="submit" class="btn btn-primary" id="btn-simpan">Simpan</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> -->
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
const csrfToken = $('meta[name="csrf-token"]').attr('content');
|
||||
|
||||
// 1. Tampilkan Modal untuk Tambah Data
|
||||
$('#btn-tambah-jabatan').on('click', function() {
|
||||
let id = $(this).data('id');
|
||||
$('#jabatanModal').modal('show');
|
||||
$('#jabatanForm').attr('action', '/dashboard/jabatan');
|
||||
$('#jabatanForm')[0].reset();
|
||||
$('#jabatanModalLabel').text('Tambah Data Jabatan');
|
||||
$('#jabatan_id').val('');
|
||||
$('#nama_jabatan').removeClass('is-invalid');
|
||||
});
|
||||
|
||||
// 2. Tampilkan Modal untuk Edit Data
|
||||
$('#jabatan-table').on('click', '.btn-edit', function() {
|
||||
let id = $(this).data('id');
|
||||
$('#jabatanModal').modal("show")
|
||||
$.get('/dashboard/jabatan/' + id, function(data) {
|
||||
$('#jabatanModalLabel').text('Edit Data Jabatan');
|
||||
$('#jabatan_id').val(data.id);
|
||||
$('#jabatan').val(data.jabatan).removeClass('is-invalid');
|
||||
});
|
||||
});
|
||||
|
||||
// 3. Proses Simpan atau Update Data
|
||||
$('#jabatanForm').on('submit', function(e) {
|
||||
e.preventDefault();
|
||||
let id = $('#jabatan_id').val();
|
||||
let url = id ? '/dashboard/jabatan/' + id : '/dashboard/jabatan';
|
||||
let method = id ? 'PUT' : 'POST';
|
||||
|
||||
$.ajax({
|
||||
url: url,
|
||||
method: method,
|
||||
data: $(this).serialize(),
|
||||
success: function(response) {
|
||||
$('#jabatanModal').modal('hide');
|
||||
Swal.fire('Sukses!', response.success, 'success');
|
||||
setTimeout(() => location.reload(), 1500);
|
||||
},
|
||||
error: function(xhr) {
|
||||
let errors = xhr.responseJSON.errors;
|
||||
if (errors.jabatan) {
|
||||
$('#jabatan').addClass('is-invalid').next('.invalid-feedback').text(errors.jabatan[0]);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 4. Proses Hapus Data
|
||||
$('body').on('click', '.btn-hapus', function() {
|
||||
let id = $(this).data('id');
|
||||
Swal.fire({
|
||||
title: 'Anda yakin?',
|
||||
text: "Data yang dihapus tidak dapat dikembalikan!",
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#d33',
|
||||
cancelButtonColor: '#3085d6',
|
||||
confirmButtonText: 'Ya, hapus!',
|
||||
cancelButtonText: 'Batal'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
$.ajax({
|
||||
url: '/dashboard/jabatan/' + id,
|
||||
method: 'DELETE',
|
||||
data: { _token: '{{ csrf_token() }}' },
|
||||
success: function(response) {
|
||||
Swal.fire('Terhapus!', response.success, 'success');
|
||||
$('#jabatan-' + id).remove();
|
||||
// Opsional: Reload untuk update nomor urut jika perlu
|
||||
// setTimeout(() => location.reload(), 1500);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
|
|
@ -35,6 +35,10 @@
|
|||
<!-- SB Admin 2 JS -->
|
||||
<script src="{{ asset('assets/sb-admin2/vendor/jquery/jquery.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/sb-admin2/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<script src="{{ asset('assets/sb-admin2/js/sb-admin-2.min.js') }}"></script>
|
||||
|
||||
|
||||
@stack('scripts')
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -22,6 +22,12 @@
|
|||
</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a href="{{ route('dashboard.jabatan.index') }}" class="nav-link {{ request()->is('jabatan*') ? 'active' : '' }}">
|
||||
<i class="fas fa-briefcase"></i> <p>Data Jabatan</p>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
|
||||
<i class="fas fa-fw fa-sign-out-alt"></i>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ use Illuminate\App\Http\Controllers\SiswaController;
|
|||
use App\Http\Controllers\KaryawanController;
|
||||
use App\Http\Controllers\LoginController;
|
||||
use App\Http\Controllers\AuthController;
|
||||
use App\Http\Controllers\JabatanController;
|
||||
use App\Http\Controllers\DashboardController;
|
||||
|
||||
// KARYAWAN
|
||||
|
|
@ -41,7 +42,10 @@ Route::post('/logout', [AuthController::class, 'logout'])->name('logout');
|
|||
Route::get('/data-karyawan', [KaryawanController::class, 'index'])->name('karyawan.index');
|
||||
|
||||
//dashboard
|
||||
Route::middleware(['auth'])->prefix('dashboard')->group(function () {
|
||||
Route::get('/', [DashboardController::class, 'index'])->name('dashboard.index');
|
||||
Route::get('/karyawan', [DashboardController::class, 'karyawan'])->name('dashboard.karyawan');
|
||||
});
|
||||
Route::middleware(['auth'])->prefix('dashboard')->name('dashboard.')->group(function () {
|
||||
Route::get('/', [DashboardController::class, 'index'])->name('index');
|
||||
Route::get('/karyawan', [DashboardController::class, 'karyawan'])->name('karyawan');
|
||||
|
||||
Route::resource('jabatan', JabatanController::class);
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue