195 lines
9.9 KiB
PHP
195 lines
9.9 KiB
PHP
@extends('layout.app')
|
|
@section('title', 'admin')
|
|
@section('content')
|
|
|
|
<!-- Page Heading -->
|
|
<h1 class="h3 mb-2 text-gray-800">Tabel Siswa</h1>
|
|
<p class="mb-4">Fitur ini berguna untuk menambahkan, mengedit, memperbarui dan menghapus data siswa.</p>
|
|
|
|
<!-- alert -->
|
|
@if (session('message'))
|
|
<div id="alert-session" class="alert alert-success alert-dismissible fade show mb-4" role="alert" style="border-radius: 0;" data-display="10000">
|
|
<strong>{{ session('message') }}</strong>
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<script>
|
|
setTimeout(function() {
|
|
var alert = document.getElementById('alert-session');
|
|
var time = parseInt(alert.getAttribute('data-display'));
|
|
if (alert.style.opacity > 0) {
|
|
alert.style.opacity = alert.style.opacity - 0.05;
|
|
}
|
|
setTimeout(closeAlert, 30000);
|
|
}, 10);
|
|
function closeAlert() {
|
|
var alert = document.getElementById('alert-session');
|
|
var time = parseInt(alert.getAttribute('data-display'));
|
|
if (alert.style.opacity <= 0) {
|
|
alert.style.display = "none";
|
|
} else {
|
|
alert.style.opacity = alert.style.opacity - 0.05;
|
|
setTimeout(closeAlert, 10);
|
|
}
|
|
}
|
|
</script>
|
|
@endif
|
|
|
|
<!-- DataTales Example -->
|
|
<div class="card shadow mb-4">
|
|
<div class="card-header py-3">
|
|
<a href="{{ route('admin.insert') }}" class="btn btn-outline-primary"><i class="fas fa-plus"></i> Tambah Data</a>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
|
|
<thead>
|
|
<tr class="text-center">
|
|
<th style="width: 3%;">No</th>
|
|
<th style="width: 9%;">NISN</th>
|
|
<th style="width: 15%;">Nama</th>
|
|
<th style="width: 5%;">Kelas</th>
|
|
<th style="width: 9%;">C01-Pengetahuan</th>
|
|
<th style="width: 9%;">C02-Keterampilan</th>
|
|
<th style="width: 7%;">C03-Sikap</th>
|
|
<th style="width: 9%;">C04-Kehadiran</th>
|
|
<th class="width: 14%;">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php $no = 1; ?>
|
|
@foreach ($siswa as $data)
|
|
<tr class="text-center">
|
|
<td>{{ $no++ }}</td>
|
|
<td>{{ $data->nisn }}</td>
|
|
<td>{{ $data->nama }}</td>
|
|
<td>{{ $data->kelas }}</td>
|
|
<td>{{ $data->pengetahuan }}</td>
|
|
<td>{{ $data->keterampilan }}</td>
|
|
<td>{{ $data->sikap }}</td>
|
|
<td>{{ $data->kehadiran }}</td>
|
|
<td width="10%">
|
|
<div class="d-flex">
|
|
<a href="{{ route('siswa.edit', ['id' => $data->id]) }}" class="btn btn-outline-warning me-2">Edit</a>
|
|
|
|
<form action="{{ route('siswa.delete', ['id' => $data->id]) }}" method="POST">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit" class="btn btn-outline-danger mr-2 ml-2">Hapus</button>
|
|
</form>
|
|
|
|
<button class="btn btn-outline-primary btn-detail" data-toggle="modal" data-target="#staticBackdrop"
|
|
data-nisn="{{$data->nisn}}"
|
|
data-nama="{{$data->nama}}"
|
|
data-kelas="{{$data->kelas}}"
|
|
data-alamat="{{$data->alamat}}"
|
|
data-pengetahuan="{{$data->pengetahuan}}"
|
|
data-keterampilan="{{$data->keterampilan}}"
|
|
data-sikap="{{$data->sikap}}"
|
|
data-kehadiran="{{$data->kehadiran}}"
|
|
>Detail
|
|
</button>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="staticBackdropLabel">Detail <span id="siswa-nama"></span></h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form>
|
|
<div class="form-group">
|
|
<label for="siswa-nisn">NISN</label>
|
|
<input type="text" class="form-control" id="siswa-nisn" readonly>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="siswa-nama2">Nama</label>
|
|
<input type="text" class="form-control" id="siswa-nama2" readonly>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="siswa-kelas">Kelas</label>
|
|
<input type="text" class="form-control" id="siswa-kelas" readonly>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="siswa-alamat">Alamat</label>
|
|
<textarea class="form-control" id="siswa-alamat" rows="3" readonly></textarea>
|
|
</div>
|
|
</form>
|
|
<hr>
|
|
<p class="mt-3">Pengetahuan</p>
|
|
<div class="progress" id="siswa-pengetahuan">
|
|
<div class="progress-bar bg-info" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0</div>
|
|
</div>
|
|
<p class="mt-3">Keterampilan</p>
|
|
<div class="progress" id="siswa-keterampilan">
|
|
<div class="progress-bar bg-info" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0</div>
|
|
</div>
|
|
<p class="mt-3">Sikap</p>
|
|
<div class="progress" id="siswa-sikap">
|
|
<div class="progress-bar bg-info" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0</div>
|
|
</div>
|
|
<p class="mt-3">Kehadiran</p>
|
|
<div class="progress" id="siswa-kehadiran">
|
|
<div class="progress-bar bg-info" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
$(document).ready(function() {
|
|
$('.btn-detail').click(function() {
|
|
let nisn = $(this).attr('data-nisn')
|
|
let nama = $(this).attr('data-nama')
|
|
let kelas = $(this).attr('data-kelas')
|
|
let alamat = $(this).attr('data-alamat')
|
|
let pengetahuan = $(this).attr('data-pengetahuan')
|
|
let keterampilan = $(this).attr('data-keterampilan')
|
|
let sikap = $(this).attr('data-sikap')
|
|
let kehadiran = $(this).attr('data-kehadiran')
|
|
|
|
$('#siswa-nisn').val(nisn)
|
|
$('#siswa-nama').html(nama)
|
|
$('#siswa-nama2').val(nama)
|
|
$('#siswa-kelas').val(kelas)
|
|
$('#siswa-alamat').val(alamat)
|
|
$('#siswa-pengetahuan').html(`
|
|
<div class="progress-bar bg-info" role="progressbar" style="width: ${pengetahuan}%" aria-valuenow="${pengetahuan}" aria-valuemin="0" aria-valuemax="100">${pengetahuan}</div>
|
|
`)
|
|
$('#siswa-keterampilan').html(`
|
|
<div class="progress-bar bg-info" role="progressbar" style="width: ${keterampilan}%" aria-valuenow="${keterampilan}" aria-valuemin="0" aria-valuemax="100">${keterampilan}</div>
|
|
`)
|
|
$('#siswa-sikap').html(`
|
|
<div class="progress-bar bg-info" role="progressbar" style="width: ${sikap}%" aria-valuenow="${sikap}" aria-valuemin="0" aria-valuemax="100">${sikap}</div>
|
|
`)
|
|
$('#siswa-kehadiran').html(`
|
|
<div class="progress-bar bg-info" role="progressbar" style="width: ${kehadiran}%" aria-valuenow="${kehadiran}" aria-valuemin="0" aria-valuemax="100">${kehadiran}</div>
|
|
`)
|
|
})
|
|
})
|
|
</script>
|
|
@endpush
|
|
|
|
@endsection
|