[lock] v1 SR Klasifikasi Done
This commit is contained in:
Zhaqian Rouf Alfauzi
parent
7ec1dcb5c1
commit
31ff5f870c
|
|
@ -7,6 +7,7 @@
|
|||
use App\Imports\SantrisImport;
|
||||
use App\Exports\SantrisExport;
|
||||
use App\Models\Riwayat;
|
||||
use App\Models\TestData;
|
||||
use App\Models\TrainData;
|
||||
use Maatwebsite\Excel\Facades\Excel;
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,64 @@
|
|||
<?php
|
||||
|
||||
namespace App\Http\Controllers;
|
||||
|
||||
use App\Models\User;
|
||||
use App\Models\TestData;
|
||||
use App\Models\TrainData;
|
||||
|
||||
use Illuminate\Routing\Controller as BaseController;
|
||||
|
||||
class DashboardController extends Controller
|
||||
{
|
||||
|
||||
public function showDashboard()
|
||||
{
|
||||
// Jumlah total santri
|
||||
$totalSantri = TrainData::count();
|
||||
|
||||
// Jumlah santri tepat waktu berdasarkan data klasifikasi
|
||||
$totalTepatWaktu = TestData::where('predicted_status', 'Tercapai')->count();
|
||||
|
||||
// Ambil data berdasarkan tahun angkatan
|
||||
$tahunAngkatan = TestData::select('tahun_angkatan')
|
||||
->distinct()
|
||||
->orderBy('tahun_angkatan', 'asc')
|
||||
->pluck('tahun_angkatan')
|
||||
->toArray();
|
||||
|
||||
|
||||
$tahunAngkatanTable = TestData::selectRaw('tahun_angkatan,
|
||||
COUNT(*) as total,
|
||||
COALESCE(SUM(CASE WHEN predicted_status = "Tercapai" THEN 1 ELSE 0 END), 0) as tepat')
|
||||
->groupBy('tahun_angkatan')
|
||||
->orderBy('tahun_angkatan', 'asc')
|
||||
->get();
|
||||
|
||||
|
||||
|
||||
// Data untuk grafik jenis kelamin berdasarkan tahun angkatan
|
||||
$genderData = TestData::selectRaw('tahun_angkatan,
|
||||
SUM(CASE WHEN jenis_kelamin = "Laki-laki" THEN 1 ELSE 0 END) as laki,
|
||||
SUM(CASE WHEN jenis_kelamin = "Perempuan" THEN 1 ELSE 0 END) as perempuan')
|
||||
->groupBy('tahun_angkatan')
|
||||
->orderBy('tahun_angkatan', 'asc')
|
||||
->get();
|
||||
|
||||
// Data untuk grafik asal daerah berdasarkan tahun angkatan
|
||||
$regionData = TestData::selectRaw('tahun_angkatan,
|
||||
SUM(CASE WHEN asal_daerah = "Dalam Provinsi" THEN 1 ELSE 0 END) as dalam,
|
||||
SUM(CASE WHEN asal_daerah = "Luar Provinsi" THEN 1 ELSE 0 END) as luar')
|
||||
->groupBy('tahun_angkatan')
|
||||
->orderBy('tahun_angkatan', 'asc')
|
||||
->get();
|
||||
|
||||
return view('pages.admin.dashboard', compact(
|
||||
'totalSantri',
|
||||
'totalTepatWaktu',
|
||||
'tahunAngkatan',
|
||||
'tahunAngkatanTable',
|
||||
'genderData',
|
||||
'regionData'
|
||||
));
|
||||
}
|
||||
}
|
||||
|
|
@ -16,17 +16,17 @@ public function showTestData(Request $request)
|
|||
$totalTrainData = TrainData::count();
|
||||
$limit = round(($percentage / 100) * $totalTrainData);
|
||||
|
||||
// **Hapus semua data di TestData secara aman**
|
||||
// **Hapus semua data uji sebelum insert baru**
|
||||
TestData::query()->delete();
|
||||
|
||||
// **Ambil data latih sesuai persentase**
|
||||
// **Ambil data latih acak sesuai persentase**
|
||||
$trainData = TrainData::inRandomOrder()->limit($limit)->get();
|
||||
|
||||
// **Gunakan array untuk menyimpan NIS unik**
|
||||
// **Gunakan array untuk memastikan NIS unik**
|
||||
$existingNIS = [];
|
||||
|
||||
foreach ($trainData as $data) {
|
||||
if (!in_array($data->nis, $existingNIS)) { // Cek jika NIS belum ada
|
||||
if (!in_array($data->nis, $existingNIS)) {
|
||||
TestData::create([
|
||||
'nama' => $data->nama,
|
||||
'jenis_kelamin' => $data->jenis_kelamin,
|
||||
|
|
@ -39,11 +39,11 @@ public function showTestData(Request $request)
|
|||
'created_at' => now(),
|
||||
'updated_at' => now(),
|
||||
]);
|
||||
$existingNIS[] = $data->nis; // Tambahkan ke array
|
||||
$existingNIS[] = $data->nis;
|
||||
}
|
||||
}
|
||||
|
||||
// **Jalankan klasifikasi otomatis setelah data dipilih**
|
||||
// **Jalankan klasifikasi otomatis**
|
||||
$this->classifyData();
|
||||
|
||||
// **Ambil kembali data uji**
|
||||
|
|
@ -52,15 +52,15 @@ public function showTestData(Request $request)
|
|||
|
||||
// **Hitung akurasi berdasarkan prediksi**
|
||||
$correctPredictions = TestData::whereColumn('status', 'predicted_status')->count();
|
||||
$accuracy = ($totalTestData > 0) ? ($correctPredictions / $totalTestData) * 100 : 0;
|
||||
$accuracy = ($totalTestData > 0) ? ($correctPredictions / max(1, $totalTestData)) * 100 : 0;
|
||||
|
||||
// **Hitung probabilitas berdasarkan status prediksi**
|
||||
// **Hitung probabilitas status prediksi**
|
||||
$probStatus = [
|
||||
'Tepat' => TestData::where('predicted_status', 'Tercapai')->count() * 100 / max(1, $totalTestData),
|
||||
'Terlambat' => TestData::where('predicted_status', 'Tidak Tercapai')->count() * 100 / max(1, $totalTestData),
|
||||
];
|
||||
|
||||
// **Hitung probabilitas berdasarkan jenis kelamin**
|
||||
// **Probabilitas berdasarkan jenis kelamin**
|
||||
$probGender = TestData::groupBy('jenis_kelamin')
|
||||
->selectRaw("jenis_kelamin, COUNT(*) * 100 / $totalTestData as probability")
|
||||
->pluck('probability', 'jenis_kelamin')
|
||||
|
|
@ -71,7 +71,7 @@ public function showTestData(Request $request)
|
|||
'Perempuan' => $probGender['Perempuan'] ?? 0,
|
||||
];
|
||||
|
||||
// **Hitung probabilitas berdasarkan asal daerah**
|
||||
// **Probabilitas berdasarkan asal daerah**
|
||||
$probRegion = TestData::groupBy('asal_daerah')
|
||||
->selectRaw("asal_daerah, COUNT(*) * 100 / $totalTestData as probability")
|
||||
->pluck('probability', 'asal_daerah')
|
||||
|
|
@ -82,19 +82,35 @@ public function showTestData(Request $request)
|
|||
'Luar Provinsi' => $probRegion['Luar Provinsi'] ?? 0,
|
||||
];
|
||||
|
||||
// **Hitung peluang tepat waktu berdasarkan kategori**
|
||||
$peluangGender = TestData::groupBy('jenis_kelamin')
|
||||
->selectRaw("jenis_kelamin, SUM(CASE WHEN predicted_status = 'Tercapai' THEN 1 ELSE 0 END) * 100 / COUNT(*) as peluang")
|
||||
->pluck('peluang', 'jenis_kelamin')
|
||||
->toArray();
|
||||
|
||||
$peluangRegion = TestData::groupBy('asal_daerah')
|
||||
->selectRaw("asal_daerah, SUM(CASE WHEN predicted_status = 'Tercapai' THEN 1 ELSE 0 END) * 100 / COUNT(*) as peluang")
|
||||
->pluck('peluang', 'asal_daerah')
|
||||
->toArray();
|
||||
|
||||
return view('pages.admin.exam-data', compact(
|
||||
'testData',
|
||||
'totalTestData',
|
||||
'accuracy',
|
||||
'probStatus',
|
||||
'probGender',
|
||||
'probRegion'
|
||||
'probRegion',
|
||||
'peluangGender',
|
||||
'peluangRegion'
|
||||
));
|
||||
}
|
||||
|
||||
public function showClassify()
|
||||
{
|
||||
$classifiedData = TestData::whereNotNull('predicted_status')->get();
|
||||
|
||||
|
||||
|
||||
return view('pages.admin.class-result', compact('classifiedData'));
|
||||
}
|
||||
|
||||
private function classifyData()
|
||||
{
|
||||
|
|
@ -136,4 +152,10 @@ private function classifyData()
|
|||
"Predicted Labels" => $predictedLabels,
|
||||
]);
|
||||
}
|
||||
|
||||
public function resetData()
|
||||
{
|
||||
TestData::query()->delete();
|
||||
return back()->with('success', 'Data uji telah direset.');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,292 @@
|
|||
@extends('layouts.app-admin')
|
||||
<title>Dashboard Admin | SR Klasifikasi</title>
|
||||
@section('content')
|
||||
<main id="main" class="main">
|
||||
<div class="row">
|
||||
<div class="pagetitle">
|
||||
<h1>Halo <b>{{ ucwords($user->role) }}</b> 👋</h1>
|
||||
<nav>
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Admin</a></li>
|
||||
<li class="breadcrumb-item active">Dashboard</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div><!-- End Page Title -->
|
||||
|
||||
|
||||
<div class="col-12 dashboard">
|
||||
<div class="row">
|
||||
@if(session('success'))
|
||||
<div class="alert alert-success">
|
||||
{{ session('success') }}
|
||||
</div>
|
||||
@endif
|
||||
<div class="col-12">
|
||||
<div class="row">
|
||||
<div class="col-xxl-6 col-md-6">
|
||||
<div class="card info-card sales-card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Santri <span>| Jumlah</span></h5>
|
||||
<div class="d-flex align-items-center">
|
||||
<div
|
||||
class="card-icon rounded-circle d-flex align-items-center justify-content-center">
|
||||
<i class='bx bx-universal-access'></i>
|
||||
</div>
|
||||
<div class="ps-3">
|
||||
<h6>400</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xxl-6 col-md-6 mb-3">
|
||||
<div class="card info-card revenue-card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Tepat Waktu <span>| Jumlah</span></h5>
|
||||
<div class="d-flex align-items-center">
|
||||
<div
|
||||
class="card-icon rounded-circle d-flex align-items-center justify-content-center">
|
||||
<i class='bx bx-child'></i>
|
||||
</div>
|
||||
<div class="ps-3">
|
||||
<h6>400</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body pb-0">
|
||||
<h5 class="card-title">Klasifikasi</h5>
|
||||
|
||||
<div id="trafficChart" style="min-height: 400px;" class="echart"></div>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
echarts.init(document.querySelector("#trafficChart")).setOption({
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
top: '5%',
|
||||
left: 'center'
|
||||
},
|
||||
series: [{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '18',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [{
|
||||
value: 1048,
|
||||
name: 'Tepat Waktu'
|
||||
},
|
||||
{
|
||||
value: 735,
|
||||
name: 'Terlambat'
|
||||
},
|
||||
]
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div><!-- End Website Traffic -->
|
||||
</div>
|
||||
|
||||
<div class="col-xxl-6 col-md-6 mb-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title justify-content-center d-flex">Jenis Kelamin</h5>
|
||||
<div id="jenisKelamin"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
new ApexCharts(document.querySelector("#jenisKelamin"), {
|
||||
series: [{
|
||||
name: 'Laki Laki',
|
||||
data: [21,22,23,24,25],
|
||||
}, {
|
||||
name: 'Perempuan',
|
||||
data: [11, 32, 45,32, 41]
|
||||
}],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'area',
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
markers: {
|
||||
size: 4
|
||||
},
|
||||
colors: ['#4154f1', '#2eca6a'],
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
shadeIntensity: 1,
|
||||
opacityFrom: 0.3,
|
||||
opacityTo: 0.4,
|
||||
stops: [0, 90, 100]
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2
|
||||
},
|
||||
xaxis: {
|
||||
type: 'year',
|
||||
categories: ["2021","2022", "2023", "2024", "2025"
|
||||
]
|
||||
},
|
||||
tooltip: {
|
||||
x: {
|
||||
format: 'dd/MM/yy HH:mm'
|
||||
},
|
||||
}
|
||||
}).render();
|
||||
});
|
||||
</script>
|
||||
<!-- End Line Chart -->
|
||||
|
||||
</div>
|
||||
<div class="col-xxl-6 col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title justify-content-center d-flex">Asal Daerah</h5>
|
||||
<div id="asalDaerah"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () =>
|
||||
{
|
||||
new ApexCharts(document.querySelector("#asalDaerah"), {
|
||||
series: [{
|
||||
name: 'Dalam Provinsi',
|
||||
data: [21,22,23,24,25],
|
||||
}, {
|
||||
name: 'Luar Provinsi',
|
||||
data: [11, 32, 45,32, 41]
|
||||
}],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'area',
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
markers: {
|
||||
size: 4
|
||||
},
|
||||
colors: ['#F14141FF', '#C72ECAFF'],
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
shadeIntensity: 1,
|
||||
opacityFrom: 0.3,
|
||||
opacityTo: 0.4,
|
||||
stops: [0, 90, 100]
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2
|
||||
},
|
||||
xaxis: {
|
||||
type: 'year',
|
||||
categories: ["2021","2022", "2023", "2024", "2025"
|
||||
]
|
||||
},
|
||||
tooltip: {
|
||||
x: {
|
||||
format: 'dd/MM/yy HH:mm'
|
||||
},
|
||||
}
|
||||
}).render();
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xxl-12 col-md-12">
|
||||
<div class="row">
|
||||
<!-- Card Tanggal -->
|
||||
<div class="col-md-6">
|
||||
<div class="card info-card date-card shadow-lg"
|
||||
style="background-color: #f8f9fa; border-left: 5px solid #007bff;">
|
||||
<div class="card-body text-center">
|
||||
<h5 class="card-title text-primary fw-bold">Tanggal Hari Ini</h5>
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<div
|
||||
class="card-icon rounded-circle bg-primary text-white d-flex align-items-center justify-content-center p-3">
|
||||
<i class='bx bx-calendar text-white' style="font-size: 1.5rem;"></i>
|
||||
</div>
|
||||
<div class="ps-3">
|
||||
<h6 id="current-date" class="fw-semibold " style="color: #012970">Loading...
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Waktu -->
|
||||
<div class="col-md-6">
|
||||
<div class="card info-card time-card shadow-lg"
|
||||
style="background-color: #f8f9fa; border-left: 5px solid #28a745;">
|
||||
<div class="card-body text-center">
|
||||
<h5 class="card-title text-success fw-bold">Waktu Saat Ini</h5>
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<div
|
||||
class="card-icon rounded-circle bg-success text-white d-flex align-items-center justify-content-center p-3">
|
||||
<i class='bx bx-time text-white' style="font-size: 1.5rem;"></i>
|
||||
</div>
|
||||
<div class="ps-3">
|
||||
<h6 id="current-time" class="fw-semibold " style="color: #012970">Loading...
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function updateTime() {
|
||||
const now = new Date();
|
||||
document.getElementById('current-date').innerText = now.toLocaleDateString('id-ID', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
|
||||
document.getElementById('current-time').innerText = now.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
|
||||
}
|
||||
setInterval(updateTime, 1000);
|
||||
updateTime();
|
||||
</script>
|
||||
@endsection
|
||||
|
|
@ -6,7 +6,8 @@
|
|||
<div class="row">
|
||||
<div class="pagetitle d-flex justify-content-between align-items-center">
|
||||
<h1>Tambah Admin</h1>
|
||||
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#tambahAdminModal">Tambah
|
||||
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#tambahAdminModal"> <i
|
||||
class='bx bx-user-plus'></i> Tambah
|
||||
Admin</button>
|
||||
</div>
|
||||
<nav>
|
||||
|
|
|
|||
|
|
@ -1,300 +1,61 @@
|
|||
@extends('layouts.app-admin')
|
||||
<title>Data Uji | SR Klasifikasi</title>
|
||||
<title>Data Klasifikasi | SR Klasifikasi</title>
|
||||
|
||||
@section('content')
|
||||
<style>
|
||||
.card-main {
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
transition: 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.card-main:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.custom-icon {
|
||||
font-size: 40px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.accuracy-icon {
|
||||
color: #007bff;
|
||||
/* Biru */
|
||||
}
|
||||
|
||||
.data-icon {
|
||||
color: #28a745;
|
||||
/* Hijau */
|
||||
}
|
||||
|
||||
.card-main h3 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 5px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.card-main h6 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #555;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.card-main p {
|
||||
font-size: 14px;
|
||||
color: #777;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.status-title {
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.status-card:hover {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
.status-card .card-body {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.status-card .icon {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.status-card .number {
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.status-card .status-label {
|
||||
font-size: 1.2rem;
|
||||
margin-top: -0.3rem;
|
||||
}
|
||||
|
||||
/* Progress bar dengan track berwarna semi-transparan */
|
||||
.status-card .progress {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 10px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.status-card .progress-bar {
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
<main id="main" class="main">
|
||||
<div class="row">
|
||||
<div class="pagetitle d-flex justify-content-between align-items-center">
|
||||
<h1>Data Uji</h1>
|
||||
<h1>Data Klasifikasi</h1>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Admin</a></li>
|
||||
<li class="breadcrumb-item active">Data Uji</li>
|
||||
<li class="breadcrumb-item active">Hasil Klasifikasi</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="col-12 dashboard">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Jumlah Data</h5>
|
||||
|
||||
<form class="col-12 justify-content-between g-3 d-flex">
|
||||
<div class="col-md-4">
|
||||
<select class="form-select">
|
||||
<option value="100%">100%</option>
|
||||
<option value="75">75%</option>
|
||||
<option value="50">50%</option>
|
||||
<option value="25">25%%</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<button type="submit" class="btn btn-primary"><i class='bx bx-mouse-alt'></i>
|
||||
Terapkan</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="card card-main">
|
||||
<i class="bx bx-bar-chart-alt-2 custom-icon accuracy-icon"></i>
|
||||
<h3>94%</h3>
|
||||
<h6>Akurasi Data</h6>
|
||||
<p>Total data yang di Uji: 31</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card card-main">
|
||||
<i class="bx bx-data custom-icon data-icon"></i>
|
||||
<h3>32</h3>
|
||||
<h6>Data yang di Uji</h6>
|
||||
<p>Diambil dari 10% data</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 dashboard">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Hasil Klasifikasi</h5>
|
||||
<div class="container">
|
||||
<!-- Judul -->
|
||||
<div class="row justify-content-center text-center mb-4">
|
||||
<div class="col-12">
|
||||
<h2 class="status-title">Probabilitas Status</h2>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Kartu Status -->
|
||||
<div class="row justify-content-center">
|
||||
<!-- Kartu Tepat -->
|
||||
<div class="col-md-5">
|
||||
<div class="card status-card bg-success text-white shadow-lg">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center justify-content-center mb-3">
|
||||
<i class="bx bx-check-circle icon me-3"></i>
|
||||
<div class="text-start">
|
||||
<div class="number">70%</div>
|
||||
<div class="status-label">Tepat</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress mx-auto" style="width: 80%;">
|
||||
<div class="progress-bar" role="progressbar" style="width: 70%"
|
||||
aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Kartu Terlambat -->
|
||||
<div class="col-md-5">
|
||||
<div class="card status-card bg-danger text-white shadow-lg">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center justify-content-center mb-3">
|
||||
<i class="bx bx-x-circle icon me-3"></i>
|
||||
<div class="text-start">
|
||||
<div class="number">70%</div>
|
||||
<div class="status-label">Terlambat</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress mx-auto" style="width: 80%;">
|
||||
<div class="progress-bar" role="progressbar" style="width: 70%"
|
||||
aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container my-5">
|
||||
<div class="row">
|
||||
<!-- Card Tepat Waktu -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header bg-info text-white">
|
||||
<h5 class="align-items-center d-flex fw-bold"
|
||||
style="margin-bottom: 0rem"><i class="bx bx-map-pin me-2"
|
||||
style="font-size: 30px"></i> Asal
|
||||
Daerah
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Kategori</th>
|
||||
<th scope="col">Jumlah</th>
|
||||
<th scope="col">Peluang</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Dalam Provinsi</td>
|
||||
<td>xx</td>
|
||||
<td>xx</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Luar Provinsi</td>
|
||||
<td>xx</td>
|
||||
<td>xx</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Terlambat -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header bg-secondary text-white">
|
||||
<h5 class="align-items-center d-flex fw-bold"
|
||||
style="margin-bottom: 0rem"><i class="bx bxs-user-badgeme-2"
|
||||
style="font-size: 30px"></i> Jenis
|
||||
Kelamin
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Kategori</th>
|
||||
<th scope="col">Jumlah</th>
|
||||
<th scope="col">Peluang</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Laki Laki</td>
|
||||
<td>xx</td>
|
||||
<td>xx</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Perempuan</td>
|
||||
<td>xx</td>
|
||||
<td>xx</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Hasil Klasifikasi</h5>
|
||||
<div class="table-responsive">
|
||||
<table id="dataTable" class="table table-striped table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nama</th>
|
||||
<th>Jenis Kelamin</th>
|
||||
<th>NIS</th>
|
||||
<th>Asal Daerah</th>
|
||||
<th>Tahun Angkatan</th>
|
||||
<th>Capaian Hadis</th>
|
||||
<th>Capaian Al Qur'an</th>
|
||||
<th>Status Aktual</th>
|
||||
<th>Status Prediksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach ($classifiedData as $item)
|
||||
<tr>
|
||||
<td>{{ $item->nama }}</td>
|
||||
<td>{{ $item->jenis_kelamin }}</td>
|
||||
<td>{{ $item->nis }}</td>
|
||||
<td>{{ $item->asal_daerah }}</td>
|
||||
<td>{{ $item->tahun_angkatan }}</td>
|
||||
<td>{{ $item->alhadis }}</td>
|
||||
<td>{{ $item->alquran }}</td>
|
||||
<td>{{ $item->status }}</td>
|
||||
<td>{{ $item->predicted_status ?? 'Belum Diklasifikasi' }}</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- DataTables & SweetAlert -->
|
||||
|
|
@ -304,4 +65,20 @@
|
|||
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.19/dist/sweetalert2.min.js"></script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('#dataTable').DataTable({
|
||||
responsive: true,
|
||||
scrollX: true,
|
||||
autoWidth: false,
|
||||
"language": {
|
||||
"search": "Cari:",
|
||||
"lengthMenu": "Tampilkan _MENU_ data",
|
||||
"info": "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
|
||||
"infoEmpty": "Tidak ada data tersedia",
|
||||
"infoFiltered": "(disaring dari _MAX_ total data)"
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
|
|
@ -1,237 +1,141 @@
|
|||
@extends('layouts.app-admin')
|
||||
<title>Dashboard Admin | SR Klasifikasi</title>
|
||||
@section('content')
|
||||
<style>
|
||||
#dataTable thead th {
|
||||
color: #012970 !important;
|
||||
}
|
||||
|
||||
#dataTable tbody tr td {
|
||||
color: #16356BFF;
|
||||
}
|
||||
</style>
|
||||
<main id="main" class="main">
|
||||
<div class="row">
|
||||
<div class="pagetitle">
|
||||
<h1>Halo <b>{{ ucwords($user->role) }}</b> 👋</h1>
|
||||
<h1>Halo <b>{{ ucwords(auth()->user()->role) }}</b> 👋</h1>
|
||||
<nav>
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Admin</a></li>
|
||||
<li class="breadcrumb-item active">Dashboard</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div><!-- End Page Title -->
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Statistik Jumlah Santri dan Tepat Waktu -->
|
||||
<div class="col-12 dashboard">
|
||||
<div class="row">
|
||||
@if(session('success'))
|
||||
<div class="alert alert-success">
|
||||
{{ session('success') }}
|
||||
</div>
|
||||
@endif
|
||||
<div class="col-12">
|
||||
<div class="row">
|
||||
<div class="col-xxl-6 col-md-6">
|
||||
<div class="card info-card sales-card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Santri <span>| Jumlah</span></h5>
|
||||
<div class="d-flex align-items-center">
|
||||
<div
|
||||
class="card-icon rounded-circle d-flex align-items-center justify-content-center">
|
||||
<i class='bx bx-universal-access'></i>
|
||||
</div>
|
||||
<div class="ps-3">
|
||||
<h6>400</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xxl-6 col-md-6">
|
||||
<div class="card info-card sales-card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Santri <span>| Jumlah</span></h5>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
|
||||
<i class='bx bx-universal-access'></i>
|
||||
</div>
|
||||
<div class="ps-3">
|
||||
<h6>{{ $totalSantri }}</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xxl-6 col-md-6 mb-3">
|
||||
<div class="card info-card revenue-card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Tepat Waktu <span>| Jumlah</span></h5>
|
||||
<div class="d-flex align-items-center">
|
||||
<div
|
||||
class="card-icon rounded-circle d-flex align-items-center justify-content-center">
|
||||
<i class='bx bx-child'></i>
|
||||
</div>
|
||||
<div class="ps-3">
|
||||
<h6>400</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body pb-0">
|
||||
<h5 class="card-title">Klasifikasi</h5>
|
||||
|
||||
<div id="trafficChart" style="min-height: 400px;" class="echart"></div>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
echarts.init(document.querySelector("#trafficChart")).setOption({
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
top: '5%',
|
||||
left: 'center'
|
||||
},
|
||||
series: [{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '18',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [{
|
||||
value: 1048,
|
||||
name: 'Tepat Waktu'
|
||||
},
|
||||
{
|
||||
value: 735,
|
||||
name: 'Terlambat'
|
||||
},
|
||||
]
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div><!-- End Website Traffic -->
|
||||
</div>
|
||||
|
||||
<div class="col-xxl-6 col-md-6 mb-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title justify-content-center d-flex">Jenis Kelamin</h5>
|
||||
<div id="jenisKelamin"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
new ApexCharts(document.querySelector("#jenisKelamin"), {
|
||||
series: [{
|
||||
name: 'Laki Laki',
|
||||
data: [21,22,23,24,25],
|
||||
}, {
|
||||
name: 'Perempuan',
|
||||
data: [11, 32, 45,32, 41]
|
||||
}],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'area',
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
markers: {
|
||||
size: 4
|
||||
},
|
||||
colors: ['#4154f1', '#2eca6a'],
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
shadeIntensity: 1,
|
||||
opacityFrom: 0.3,
|
||||
opacityTo: 0.4,
|
||||
stops: [0, 90, 100]
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2
|
||||
},
|
||||
xaxis: {
|
||||
type: 'year',
|
||||
categories: ["2021","2022", "2023", "2024", "2025"
|
||||
]
|
||||
},
|
||||
tooltip: {
|
||||
x: {
|
||||
format: 'dd/MM/yy HH:mm'
|
||||
},
|
||||
}
|
||||
}).render();
|
||||
});
|
||||
</script>
|
||||
<!-- End Line Chart -->
|
||||
|
||||
</div>
|
||||
<div class="col-xxl-6 col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title justify-content-center d-flex">Asal Daerah</h5>
|
||||
<div id="asalDaerah"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () =>
|
||||
{
|
||||
new ApexCharts(document.querySelector("#asalDaerah"), {
|
||||
series: [{
|
||||
name: 'Dalam Provinsi',
|
||||
data: [21,22,23,24,25],
|
||||
}, {
|
||||
name: 'Luar Provinsi',
|
||||
data: [11, 32, 45,32, 41]
|
||||
}],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'area',
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
markers: {
|
||||
size: 4
|
||||
},
|
||||
colors: ['#F14141FF', '#C72ECAFF'],
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
shadeIntensity: 1,
|
||||
opacityFrom: 0.3,
|
||||
opacityTo: 0.4,
|
||||
stops: [0, 90, 100]
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2
|
||||
},
|
||||
xaxis: {
|
||||
type: 'year',
|
||||
categories: ["2021","2022", "2023", "2024", "2025"
|
||||
]
|
||||
},
|
||||
tooltip: {
|
||||
x: {
|
||||
format: 'dd/MM/yy HH:mm'
|
||||
},
|
||||
}
|
||||
}).render();
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xxl-6 col-md-6 mb-3">
|
||||
<div class="card info-card revenue-card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Tepat Waktu <span>| Jumlah</span></h5>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
|
||||
<i class='bx bx-child'></i>
|
||||
</div>
|
||||
<div class="ps-3">
|
||||
<h6>{{ $totalTepatWaktu }}</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Grafik Klasifikasi Berdasarkan Tahun Angkatan -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body pb-0">
|
||||
<h5 class="card-title">Klasifikasi Total</h5>
|
||||
<div id="trafficChart" style="min-height: 400px;" class="echart"></div>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
echarts.init(document.querySelector("#trafficChart")).setOption({
|
||||
tooltip: { trigger: 'item' },
|
||||
legend: { top: '5%', left: 'center' },
|
||||
series: [{
|
||||
name: 'Klasifikasi',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
data: [
|
||||
{ value: {{ $totalTepatWaktu }}, name: 'Tepat Waktu' },
|
||||
{ value: {{ $totalSantri - $totalTepatWaktu }}, name: 'Terlambat' },
|
||||
]
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabel Statistik Klasifikasi Berdasarkan Tahun Angkatan -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-center">Klasifikasi Tahun Angkatan</h5>
|
||||
<div class="table-responsive">
|
||||
<table id="dataTable" class="table table-striped">
|
||||
<thead class="custom-thead">
|
||||
<tr>
|
||||
<th>Tahun Angkatan</th>
|
||||
<th>Jumlah Santri</th>
|
||||
<th>Tepat Waktu</th>
|
||||
<th>Terlambat</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach ($tahunAngkatanTable as $tahun)
|
||||
<tr>
|
||||
<td>{{ $tahun->tahun_angkatan }}</td>
|
||||
<td>{{ $tahun->total }}</td>
|
||||
<td>{{ $tahun->tepat }}</td>
|
||||
<td>{{ $tahun->total - $tahun->tepat }}</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Grafik Jenis Kelamin -->
|
||||
<div class="col-xxl-6 col-md-6 mb-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-center">Jenis Kelamin</h5>
|
||||
<div id="jenisKelamin"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Grafik Asal Daerah -->
|
||||
<div class="col-xxl-6 col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-center">Asal Daerah</h5>
|
||||
<div id="asalDaerah"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-xxl-12 col-md-12">
|
||||
<div class="row">
|
||||
<!-- Card Tanggal -->
|
||||
|
|
@ -279,7 +183,6 @@ class="card-icon rounded-circle bg-success text-white d-flex align-items-center
|
|||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function updateTime() {
|
||||
const now = new Date();
|
||||
|
|
@ -289,4 +192,71 @@ function updateTime() {
|
|||
setInterval(updateTime, 1000);
|
||||
updateTime();
|
||||
</script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
let tahunAngkatan = {!! json_encode($tahunAngkatan) !!};
|
||||
|
||||
// Grafik Jenis Kelamin
|
||||
new ApexCharts(document.querySelector("#jenisKelamin"), {
|
||||
series: [
|
||||
{ name: 'Laki-laki', data: {!! json_encode($genderData->pluck('laki')->toArray()) !!} },
|
||||
{ name: 'Perempuan', data: {!! json_encode($genderData->pluck('perempuan')->toArray()) !!} }
|
||||
],
|
||||
chart: { height: 350, type: 'area', toolbar: { show: false } },
|
||||
colors: ['#007bff', '#28a745'],
|
||||
xaxis: {
|
||||
categories: tahunAngkatan,
|
||||
labels: {
|
||||
|
||||
rotate: -45,
|
||||
},
|
||||
axisBorder: { show: true, color: '#000' }
|
||||
}
|
||||
}).render();
|
||||
|
||||
// Grafik Asal Daerah
|
||||
new ApexCharts(document.querySelector("#asalDaerah"), {
|
||||
series: [
|
||||
{ name: 'Dalam Provinsi', data: {!! json_encode($regionData->pluck('dalam')->toArray()) !!} },
|
||||
{ name: 'Luar Provinsi', data: {!! json_encode($regionData->pluck('luar')->toArray()) !!} }
|
||||
],
|
||||
chart: { height: 350, type: 'area', toolbar: { show: false } },
|
||||
colors: ['#dc3545', '#6f42c1'],
|
||||
xaxis: {
|
||||
categories: tahunAngkatan,
|
||||
labels: {
|
||||
|
||||
rotate: -45,
|
||||
},
|
||||
axisBorder: { show: true, color: '#000' }
|
||||
}
|
||||
}).render();
|
||||
});
|
||||
</script>
|
||||
<!-- DataTables CSS & JS -->
|
||||
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
|
||||
<!-- Tambahkan CSS Responsive -->
|
||||
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.4.1/css/responsive.dataTables.min.css">
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
|
||||
<!-- Tambahkan JS Responsive -->
|
||||
<script src="https://cdn.datatables.net/responsive/2.4.1/js/dataTables.responsive.min.js">
|
||||
</script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('#dataTable').DataTable({
|
||||
responsive: true, // Aktifkan fitur responsif
|
||||
"language": {
|
||||
"search": "Cari:",
|
||||
"lengthMenu": "Tampilkan _MENU_ data",
|
||||
"zeroRecords": "Tidak ada data yang cocok",
|
||||
"info": "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
|
||||
"infoEmpty": "Tidak ada data tersedia",
|
||||
"infoFiltered": "(disaring dari _MAX_ total data)"
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
|
|
@ -115,21 +115,32 @@
|
|||
|
||||
<!-- Pilih Persentase Data Uji -->
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card shadow-sm border-0">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Jumlah Data</h5>
|
||||
<form action="{{ route('testData.show') }}" method="GET" class="d-flex justify-content-between">
|
||||
<div class="col-md-4">
|
||||
<select name="percentage" class="form-select">
|
||||
<option value="100" {{ request('percentage')==100 ? 'selected' : '' }}>100%</option>
|
||||
<option value="75" {{ request('percentage')==75 ? 'selected' : '' }}>75%</option>
|
||||
<option value="50" {{ request('percentage')==50 ? 'selected' : '' }}>50%</option>
|
||||
<option value="25" {{ request('percentage')==25 ? 'selected' : '' }}>25%</option>
|
||||
</select>
|
||||
<h5 class="card-title mb-3">Jumlah Data</h5>
|
||||
<div class="row g-2">
|
||||
<div class="col-md-10">
|
||||
<form action="{{ route('testData.show') }}" method="GET" class="d-flex gap-2">
|
||||
<select name="percentage" class="form-select">
|
||||
<option value="100" {{ request('percentage')==100 ? 'selected' : '' }}>100%</option>
|
||||
<option value="75" {{ request('percentage')==75 ? 'selected' : '' }}>75%</option>
|
||||
<option value="50" {{ request('percentage')==50 ? 'selected' : '' }}>50%</option>
|
||||
<option value="25" {{ request('percentage')==25 ? 'selected' : '' }}>25%</option>
|
||||
</select>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="bx bxs-mouse-alt me-1"></i> Terapkan
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary"> <i class='bx bxs-mouse-alt'></i>
|
||||
Terapkan</button>
|
||||
</form>
|
||||
<div class="col-md-2">
|
||||
<form action="{{ route('testData.reset') }}" method="POST">
|
||||
@csrf
|
||||
<button type="submit" class="btn btn-danger w-100">
|
||||
<i class="bx bx-reset me-1"></i> <br> Reset Data
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -214,34 +225,32 @@
|
|||
|
||||
<div class="container my-5">
|
||||
<div class="row">
|
||||
<!-- Card Tepat Waktu -->
|
||||
<!-- Probabilitas Berdasarkan Asal Daerah -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header bg-info text-white">
|
||||
<h5 class="align-items-center d-flex fw-bold" style="margin-bottom: 0rem"><i
|
||||
class="bx bx-map-pin me-2" style="font-size: 30px"></i> Asal
|
||||
Daerah
|
||||
<h5 class="align-items-center d-flex fw-bold"><i class="bx bx-map-pin me-2"></i> Asal Daerah
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Kategori</th>
|
||||
<th scope="col">Jumlah</th>
|
||||
|
||||
<th>Kategori</th>
|
||||
<th>Jumlah</th>
|
||||
<th>Peluang Tepat Waktu</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Dalam Provinsi</td>
|
||||
<td>{{ number_format($probRegion['Dalam Provinsi'] ?? 0, 2) }}%</td>
|
||||
|
||||
<td>{{ number_format($peluangRegion['Dalam Provinsi'] ?? 0, 2) }}%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Luar Provinsi</td>
|
||||
<td>{{ number_format($probRegion['Luar Provinsi'] ?? 0, 2) }}%</td>
|
||||
|
||||
<td>{{ number_format($peluangRegion['Luar Provinsi'] ?? 0, 2) }}%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -249,11 +258,11 @@ class="bx bx-map-pin me-2" style="font-size: 30px"></i> Asal
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Probabilitas Berdasarkan Jenis Kelamin -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header bg-secondary text-white">
|
||||
<h5 class="align-items-center d-flex fw-bold" style="margin-bottom: 0rem"><i
|
||||
class="bx bxs-user-badge me-2" style="font-size: 30px"></i> Jenis
|
||||
<h5 class="align-items-center d-flex fw-bold"><i class="bx bxs-user-badge me-2"></i> Jenis
|
||||
Kelamin
|
||||
</h5>
|
||||
</div>
|
||||
|
|
@ -261,21 +270,21 @@ class="bx bxs-user-badge me-2" style="font-size: 30px"></i> Jenis
|
|||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Kategori</th>
|
||||
<th scope="col">Jumlah</th>
|
||||
|
||||
<th>Kategori</th>
|
||||
<th>Jumlah</th>
|
||||
<th>Peluang Tepat Waktu</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Laki Laki</td>
|
||||
<td>{{ number_format($probGender['Laki-laki'] ?? 0, 2) }}%</td>
|
||||
|
||||
<td>{{ number_format($peluangGender['Laki-laki'] ?? 0, 2) }}%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Perempuan</td>
|
||||
<td>{{ number_format($probGender['Perempuan'] ?? 0, 2) }}%</td>
|
||||
|
||||
<td>{{ number_format($peluangGender['Perempuan'] ?? 0, 2) }}%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -289,7 +298,7 @@ class="bx bxs-user-badge me-2" style="font-size: 30px"></i> Jenis
|
|||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Hasil Klasifikasi</h5>
|
||||
<h5 class="card-title">Hasil Uji</h5>
|
||||
<div class="table-responsive">
|
||||
<table class="dataTable">
|
||||
<thead>
|
||||
|
|
@ -351,21 +360,4 @@ class="bx bxs-user-badge me-2" style="font-size: 30px"></i> Jenis
|
|||
});
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
let testData = @json($testData);
|
||||
let totalTestData = "{{ $totalTestData }}";
|
||||
let accuracy = "{{ number_format($accuracy, 2) }}";
|
||||
let probStatus = @json($probStatus);
|
||||
let probGender = @json($probGender);
|
||||
let probRegion = @json($probRegion);
|
||||
|
||||
alert("DEBUG DATA: \n" +
|
||||
"Total Test Data: " + totalTestData + "\n" +
|
||||
"Accuracy: " + accuracy + "%\n" +
|
||||
"Prob Status: " + JSON.stringify(probStatus) + "\n" +
|
||||
"Prob Gender: " + JSON.stringify(probGender) + "\n" +
|
||||
"Prob Region: " + JSON.stringify(probRegion) + "\n");
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
|
|
@ -15,30 +15,37 @@
|
|||
</nav>
|
||||
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card shadow-sm border-0">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Tindakan</h5>
|
||||
<div class="d-flex gap-2 align-items-center">
|
||||
<form action="{{ route('trainData.import') }}" method="POST" enctype="multipart/form-data"
|
||||
class="d-flex gap-2 flex-grow-1">
|
||||
@csrf
|
||||
<div class="input-group">
|
||||
<input type="file" name="file" class="form-control" required>
|
||||
<button type="submit" class="btn btn-primary d-flex gap-1">
|
||||
<i class="bx bxs-file-import"></i> Import
|
||||
<h5 class="card-title mb-3">Tindakan</h5>
|
||||
<div class="row g-2">
|
||||
<div class="col-md-6">
|
||||
<form action="{{ route('trainData.import') }}" method="POST" enctype="multipart/form-data"
|
||||
class="d-flex gap-2">
|
||||
@csrf
|
||||
<div class="input-group">
|
||||
<input type="file" name="file" class="form-control" required>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="bx bxs-file-import"></i> Import
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<a href="{{ route('trainData.export') }}"
|
||||
class="btn btn-success w-100 d-flex align-items-center justify-content-center gap-1">
|
||||
<i class="bx bxs-file-export"></i> Export
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<form action="{{ route('trainData.reset') }}" method="POST" class="reset-form">
|
||||
@csrf
|
||||
<button type="button"
|
||||
class="btn btn-warning w-100 d-flex align-items-center justify-content-center gap-1 btn-reset">
|
||||
<i class="bx bx-reset"></i> Reset Data
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<a href="{{ route('trainData.export') }}" class="btn btn-success d-flex gap-1"
|
||||
style="margin-block-end: 1em">
|
||||
<i class="bx bxs-file-export"></i> Export
|
||||
</a>
|
||||
<form action="{{ route('trainData.reset') }}" method="POST" class="d-inline reset-form">
|
||||
@csrf
|
||||
<button type="button" class="btn btn-warning d-flex gap-1 btn-reset">
|
||||
<i class="bx bx-reset"></i> Reset Data
|
||||
</button>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@
|
|||
<li class="nav-heading">Menu</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {{ Route::is('dashboardAdmin') ? '' : 'collapsed' }}"
|
||||
href="{{ route('dashboardAdmin') }}">
|
||||
<a class="nav-link {{ Route::is(patterns: 'admin.dashboard') ? '' : 'collapsed' }}"
|
||||
href="{{ route('admin.dashboard') }}">
|
||||
<i class="bi bi-grid"></i>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
use App\Http\Controllers\HitungController;
|
||||
use App\Http\Controllers\MunaqosahController;
|
||||
use App\Http\Controllers\ClassificationController;
|
||||
use App\Http\Controllers\DashboardController;
|
||||
use App\Http\Controllers\TestDataController;
|
||||
|
||||
/*
|
||||
|
|
@ -61,14 +62,13 @@
|
|||
->name('changePassword.post');
|
||||
Route::get('/admin/dataMunqosah', [MunaqosahController::class, 'showMunaqosah'])
|
||||
->name('dataMunaqosah');
|
||||
Route::get('/admin/dashboardAdmin', [AdminController::class, 'dashboard'])
|
||||
->name('dashboardAdmin');
|
||||
Route::post('/admin/munaqosah/{id}/verify', [MunaqosahController::class, 'verify'])
|
||||
->name('munaqosah.verify');
|
||||
Route::post('/admin/munaqosah/{id}/reject', [MunaqosahController::class, 'reject'])
|
||||
->name('munaqosah.reject');
|
||||
Route::delete('/admin/munaqosah/{id}', [MunaqosahController::class, 'destroy'])
|
||||
->name('munaqosah.destroy');
|
||||
Route::get('/admin/dashboard', [DashboardController::class, 'showDashboard'])->name('admin.dashboard');
|
||||
|
||||
// Train Data...........................
|
||||
Route::post('/admin/trainData/import', [ClassificationController::class, 'importExcel'])->name('trainData.import');
|
||||
|
|
@ -87,7 +87,9 @@
|
|||
// Exam Data...........................
|
||||
Route::get('/admin/testData', [TestDataController::class, 'showTestData'])->name('testData.show');
|
||||
Route::post('/admin/testData/classify', [TestDataController::class, 'classifyData'])->name('testData.classify');
|
||||
Route::post('/admin/testData/deleteAll', [TestDataController::class, 'deleteAllTestData'])->name('testData.deleteAll');
|
||||
Route::post('/admin/testData/reset', [TestDataController::class, 'resetData'])->name('testData.reset');
|
||||
// Classification Data...........................
|
||||
Route::get('/admin/classificationResult', [ClassificationController::class, 'classificationResult'])
|
||||
Route::get('/admin/classificationResult', [TestDataController::class, 'showClassify'])
|
||||
->name('classificationResult');
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue