[add] TestData Done
This commit is contained in:
parent
518705c6b1
commit
7ec1dcb5c1
|
@ -83,7 +83,7 @@ public function register(Request $request)
|
|||
'email' => 'required|email|unique:users,email',
|
||||
'password' => 'required|min:6',
|
||||
'jenis_kelamin' => 'required|in:Laki-laki,Perempuan',
|
||||
'asal_daerah' => 'required|in:Jawa,luarJawa',
|
||||
'asal_daerah' => 'required|in:dalamProvinsi,luarProvinsi',
|
||||
]);
|
||||
|
||||
// Buat user baru dengan role "santri"
|
||||
|
|
|
@ -59,7 +59,7 @@ public function updateProfile(Request $request)
|
|||
$request->validate([
|
||||
'name' => 'required|string|max:255',
|
||||
'email' => 'required|email|unique:users,email,' . $user->id,
|
||||
'asal_daerah' => 'required|in:Jawa,luarJawa',
|
||||
'asal_daerah' => 'required|in:dalamProvinsi,luarProvinsi',
|
||||
'password' => 'nullable|min:6|same:password_confirmation',
|
||||
], [
|
||||
'password.same' => 'Konfirmasi password tidak cocok.',
|
||||
|
|
|
@ -0,0 +1,139 @@
|
|||
<?php
|
||||
|
||||
namespace App\Http\Controllers;
|
||||
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Support\Facades\Log;
|
||||
use App\Models\TrainData;
|
||||
use App\Models\TestData;
|
||||
use Phpml\Classification\NaiveBayes;
|
||||
|
||||
class TestDataController extends Controller
|
||||
{
|
||||
public function showTestData(Request $request)
|
||||
{
|
||||
$percentage = $request->input('percentage', 100);
|
||||
$totalTrainData = TrainData::count();
|
||||
$limit = round(($percentage / 100) * $totalTrainData);
|
||||
|
||||
// **Hapus semua data di TestData secara aman**
|
||||
TestData::query()->delete();
|
||||
|
||||
// **Ambil data latih sesuai persentase**
|
||||
$trainData = TrainData::inRandomOrder()->limit($limit)->get();
|
||||
|
||||
// **Gunakan array untuk menyimpan NIS unik**
|
||||
$existingNIS = [];
|
||||
|
||||
foreach ($trainData as $data) {
|
||||
if (!in_array($data->nis, $existingNIS)) { // Cek jika NIS belum ada
|
||||
TestData::create([
|
||||
'nama' => $data->nama,
|
||||
'jenis_kelamin' => $data->jenis_kelamin,
|
||||
'nis' => $data->nis,
|
||||
'asal_daerah' => $data->asal_daerah,
|
||||
'tahun_angkatan' => $data->tahun_angkatan,
|
||||
'alquran' => $data->alquran,
|
||||
'alhadis' => $data->alhadis,
|
||||
'status' => $data->status,
|
||||
'created_at' => now(),
|
||||
'updated_at' => now(),
|
||||
]);
|
||||
$existingNIS[] = $data->nis; // Tambahkan ke array
|
||||
}
|
||||
}
|
||||
|
||||
// **Jalankan klasifikasi otomatis setelah data dipilih**
|
||||
$this->classifyData();
|
||||
|
||||
// **Ambil kembali data uji**
|
||||
$testData = TestData::all();
|
||||
$totalTestData = $testData->count();
|
||||
|
||||
// **Hitung akurasi berdasarkan prediksi**
|
||||
$correctPredictions = TestData::whereColumn('status', 'predicted_status')->count();
|
||||
$accuracy = ($totalTestData > 0) ? ($correctPredictions / $totalTestData) * 100 : 0;
|
||||
|
||||
// **Hitung probabilitas berdasarkan 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**
|
||||
$probGender = TestData::groupBy('jenis_kelamin')
|
||||
->selectRaw("jenis_kelamin, COUNT(*) * 100 / $totalTestData as probability")
|
||||
->pluck('probability', 'jenis_kelamin')
|
||||
->toArray();
|
||||
|
||||
$probGender = [
|
||||
'Laki-laki' => $probGender['Laki-laki'] ?? 0,
|
||||
'Perempuan' => $probGender['Perempuan'] ?? 0,
|
||||
];
|
||||
|
||||
// **Hitung probabilitas berdasarkan asal daerah**
|
||||
$probRegion = TestData::groupBy('asal_daerah')
|
||||
->selectRaw("asal_daerah, COUNT(*) * 100 / $totalTestData as probability")
|
||||
->pluck('probability', 'asal_daerah')
|
||||
->toArray();
|
||||
|
||||
$probRegion = [
|
||||
'Dalam Provinsi' => $probRegion['Dalam Provinsi'] ?? 0,
|
||||
'Luar Provinsi' => $probRegion['Luar Provinsi'] ?? 0,
|
||||
];
|
||||
|
||||
return view('pages.admin.exam-data', compact(
|
||||
'testData',
|
||||
'totalTestData',
|
||||
'accuracy',
|
||||
'probStatus',
|
||||
'probGender',
|
||||
'probRegion'
|
||||
));
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
private function classifyData()
|
||||
{
|
||||
if (TestData::count() == 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Ambil data latih untuk model
|
||||
$trainSamples = TrainData::all()->map(function ($item) {
|
||||
return [$item->alquran, $item->alhadis]; // Fitur
|
||||
})->toArray();
|
||||
|
||||
$trainLabels = TrainData::pluck('status')->values()->toArray();
|
||||
|
||||
// Ambil data uji
|
||||
$testSamples = TestData::all()->map(function ($item) {
|
||||
return [$item->alquran, $item->alhadis]; // Fitur
|
||||
})->toArray();
|
||||
|
||||
if (count($trainSamples) == 0 || count($testSamples) == 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Jalankan Naive Bayes
|
||||
$classifier = new NaiveBayes();
|
||||
$classifier->train($trainSamples, $trainLabels);
|
||||
$predictedLabels = $classifier->predict($testSamples);
|
||||
|
||||
// Simpan hasil prediksi
|
||||
$testData = TestData::all();
|
||||
foreach ($testData as $index => $data) {
|
||||
$data->predicted_status = $predictedLabels[$index] ?? 'Belum Diklasifikasi';
|
||||
$data->save();
|
||||
}
|
||||
|
||||
// ✅ Tambahkan debug log untuk memastikan prediksi disimpan
|
||||
Log::info("DEBUG: Hasil Prediksi Naive Bayes", [
|
||||
"Total Test Data" => count($testSamples),
|
||||
"Predicted Labels" => $predictedLabels,
|
||||
]);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,27 @@
|
|||
<?php
|
||||
|
||||
namespace App\Models;
|
||||
|
||||
use Illuminate\Database\Eloquent\Factories\HasFactory;
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
|
||||
class TestData extends Model
|
||||
{
|
||||
use HasFactory;
|
||||
|
||||
protected $table = 'test_data';
|
||||
|
||||
protected $fillable = [
|
||||
'nama',
|
||||
'jenis_kelamin',
|
||||
'nis',
|
||||
'asal_daerah',
|
||||
'tahun_angkatan',
|
||||
'alquran',
|
||||
'alhadis',
|
||||
'status',
|
||||
'predicted_status',
|
||||
];
|
||||
|
||||
public $timestamps = true; // Pastikan timestamps diaktifkan
|
||||
}
|
|
@ -10,7 +10,8 @@
|
|||
"laravel/framework": "^10.10",
|
||||
"laravel/sanctum": "^3.3",
|
||||
"laravel/tinker": "^2.8",
|
||||
"maatwebsite/excel": "^3.1"
|
||||
"maatwebsite/excel": "^3.1",
|
||||
"php-ai/php-ml": "^0.10.0"
|
||||
},
|
||||
"require-dev": {
|
||||
"fakerphp/faker": "^1.9.1",
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
|
||||
"This file is @generated automatically"
|
||||
],
|
||||
"content-hash": "fd4872b22b5625c027fc603f79579a78",
|
||||
"content-hash": "1f8c5d8ab4e7f989941663cca94f3cfe",
|
||||
"packages": [
|
||||
{
|
||||
"name": "brick/math",
|
||||
|
@ -2871,6 +2871,59 @@
|
|||
],
|
||||
"time": "2023-02-08T01:06:31+00:00"
|
||||
},
|
||||
{
|
||||
"name": "php-ai/php-ml",
|
||||
"version": "0.10.0",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "git@gitlab.com:php-ai/php-ml.git",
|
||||
"reference": "543f11158c57bf64ef8ddecd5bab51d396d39f50"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://gitlab.com/api/v4/projects/php-ai%2Fphp-ml/repository/archive.zip?sha=543f11158c57bf64ef8ddecd5bab51d396d39f50",
|
||||
"reference": "543f11158c57bf64ef8ddecd5bab51d396d39f50",
|
||||
"shasum": ""
|
||||
},
|
||||
"require": {
|
||||
"php": "^8.0"
|
||||
},
|
||||
"require-dev": {
|
||||
"phpbench/phpbench": "^1.2",
|
||||
"phpstan/phpstan": "^0.12",
|
||||
"phpstan/phpstan-phpunit": "^0.12",
|
||||
"phpstan/phpstan-strict-rules": "^0.12",
|
||||
"phpunit/phpunit": "^8.0"
|
||||
},
|
||||
"type": "library",
|
||||
"autoload": {
|
||||
"psr-4": {
|
||||
"Phpml\\": "src/"
|
||||
}
|
||||
},
|
||||
"notification-url": "https://packagist.org/downloads/",
|
||||
"license": [
|
||||
"MIT"
|
||||
],
|
||||
"authors": [
|
||||
{
|
||||
"name": "Arkadiusz Kondas",
|
||||
"email": "arkadiusz.kondas@gmail.com"
|
||||
}
|
||||
],
|
||||
"description": "PHP-ML - Machine Learning library for PHP",
|
||||
"homepage": "https://gitlab.com/php-ai/php-ml",
|
||||
"keywords": [
|
||||
"Neural network",
|
||||
"artificial intelligence",
|
||||
"computational learning theory",
|
||||
"data science",
|
||||
"feature extraction",
|
||||
"machine learning",
|
||||
"pattern recognition"
|
||||
],
|
||||
"time": "2022-11-09T09:25:29+00:00"
|
||||
},
|
||||
{
|
||||
"name": "phpoffice/phpspreadsheet",
|
||||
"version": "1.29.10",
|
||||
|
|
|
@ -16,7 +16,7 @@ public function up(): void
|
|||
$table->string('password');
|
||||
$table->enum('role', ['admin', 'santri'])->default('santri');
|
||||
$table->enum('jenis_kelamin', ['Laki-laki', 'Perempuan'])->nullable();
|
||||
$table->enum('asal_daerah', ['Jawa', 'luarJawa'])->nullable();
|
||||
$table->enum('asal_daerah', ['dalamProvinsi', 'luarProvinsi'])->nullable();
|
||||
$table->timestamps();
|
||||
});
|
||||
}
|
||||
|
|
|
@ -0,0 +1,29 @@
|
|||
<?php
|
||||
|
||||
use Illuminate\Database\Migrations\Migration;
|
||||
use Illuminate\Database\Schema\Blueprint;
|
||||
use Illuminate\Support\Facades\Schema;
|
||||
|
||||
return new class extends Migration {
|
||||
public function up()
|
||||
{
|
||||
Schema::create('test_data', function (Blueprint $table) {
|
||||
$table->id();
|
||||
$table->string('nama');
|
||||
$table->string('jenis_kelamin');
|
||||
$table->string('nis')->unique();
|
||||
$table->string('asal_daerah');
|
||||
$table->string('tahun_angkatan');
|
||||
$table->integer('alquran');
|
||||
$table->integer('alhadis');
|
||||
$table->string('status');
|
||||
$table->string('predicted_status')->nullable();
|
||||
$table->timestamps();
|
||||
});
|
||||
}
|
||||
|
||||
public function down()
|
||||
{
|
||||
Schema::dropIfExists('test_data');
|
||||
}
|
||||
};
|
|
@ -27,7 +27,7 @@ public function run()
|
|||
'password' => Hash::make('123456'), // password: 123456
|
||||
'role' => 'santri',
|
||||
'jenis_kelamin' => 'Laki-laki',
|
||||
'asal_daerah' => 'Jawa',
|
||||
'asal_daerah' => 'dalamProvinsi',
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -0,0 +1,307 @@
|
|||
@extends('layouts.app-admin')
|
||||
<title>Data Uji | 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>
|
||||
</div>
|
||||
<nav>
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Admin</a></li>
|
||||
<li class="breadcrumb-item active">Data Uji</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- DataTables & SweetAlert -->
|
||||
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.19/dist/sweetalert2.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>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.19/dist/sweetalert2.min.js"></script>
|
||||
|
||||
@endsection
|
|
@ -182,10 +182,10 @@ class="card-icon rounded-circle d-flex align-items-center justify-content-center
|
|||
{
|
||||
new ApexCharts(document.querySelector("#asalDaerah"), {
|
||||
series: [{
|
||||
name: 'Luar Jawa',
|
||||
name: 'Dalam Provinsi',
|
||||
data: [21,22,23,24,25],
|
||||
}, {
|
||||
name: 'Jawa',
|
||||
name: 'Luar Provinsi',
|
||||
data: [11, 32, 45,32, 41]
|
||||
}],
|
||||
chart: {
|
||||
|
|
|
@ -0,0 +1,371 @@
|
|||
@extends('layouts.app-admin')
|
||||
<title>Data Uji | 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>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Admin</a></li>
|
||||
<li class="breadcrumb-item active">Data Uji</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<!-- Pilih Persentase Data Uji -->
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<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>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary"> <i class='bx bxs-mouse-alt'></i>
|
||||
Terapkan</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Kartu Statistik -->
|
||||
<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>{{ number_format($accuracy, 2) }}%</h3>
|
||||
<h6>Akurasi Model</h6>
|
||||
<p>Total data diuji: {{ $totalTestData }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card card-main">
|
||||
<i class="bx bx-data custom-icon data-icon"></i>
|
||||
<h3>{{ $totalTestData }}</h3>
|
||||
<h6>Data yang di Uji</h6>
|
||||
<p>Diambil dari {{ request('percentage', 100) }}% data latih</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<!-- Judul -->
|
||||
<div class="row justify-content-center text-center mt-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">{{ number_format($probStatus['Tepat'] ?? 0, 2) }}%</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: {{ number_format($probStatus['Tepat'] ?? 0, 2) }}%"
|
||||
aria-valuenow="{{ number_format($probStatus['Tepat'] ?? 0, 2) }}" 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">{{ number_format($probStatus['Terlambat'] ?? 0, 2) }}%</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: {{ number_format($probStatus['Terlambat'] ?? 0, 2) }}%"
|
||||
aria-valuenow="{{ number_format($probStatus['Terlambat'] ?? 0, 2) }}"
|
||||
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>
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Dalam Provinsi</td>
|
||||
<td>{{ number_format($probRegion['Dalam Provinsi'] ?? 0, 2) }}%</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Luar Provinsi</td>
|
||||
<td>{{ number_format($probRegion['Luar Provinsi'] ?? 0, 2) }}%</td>
|
||||
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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
|
||||
Kelamin
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Kategori</th>
|
||||
<th scope="col">Jumlah</th>
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Laki Laki</td>
|
||||
<td>{{ number_format($probGender['Laki-laki'] ?? 0, 2) }}%</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Perempuan</td>
|
||||
<td>{{ number_format($probGender['Perempuan'] ?? 0, 2) }}%</td>
|
||||
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hasil Klasifikasi -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Hasil Klasifikasi</h5>
|
||||
<div class="table-responsive">
|
||||
<table class="dataTable">
|
||||
<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 ($testData 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 -->
|
||||
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.19/dist/sweetalert2.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>
|
||||
<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>
|
||||
<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
|
|
@ -77,8 +77,8 @@
|
|||
<label for="asalDaerah" class="form-label">Asal Daerah</label>
|
||||
<select class="form-select" name="asal_daerah" id="asalDaerah" required>
|
||||
<option value="" selected disabled>Pilih Asal Daerah</option>
|
||||
<option value="Jawa">Jawa</option>
|
||||
<option value="luarJawa">Luar Jawa</option>
|
||||
<option value="dalamProvinsi">Dalam Provinsi</option>
|
||||
<option value="luarProvinsi">Luar Provinsi</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">Pilih Asal Daerah Anda</div>
|
||||
</div>
|
||||
|
|
|
@ -64,9 +64,11 @@
|
|||
<div class="col-md-6">
|
||||
<select id="asalDaerah" class="form-select" name="asal_daerah" required>
|
||||
<option value="" disabled>Pilih Asal Daerah...</option>
|
||||
<option value="Jawa" {{ $user->asal_daerah == 'Jawa' ? 'selected' : '' }}>Jawa</option>
|
||||
<option value="luarJawa" {{ $user->asal_daerah == 'luarJawa' ? 'selected' : '' }}>Luar
|
||||
Jawa</option>
|
||||
<option value="dalamProvinsi" {{ $user->asal_daerah == 'dalamProvinsi' ? 'selected' : ''
|
||||
}}>Dalam Provinsi</option>
|
||||
<option value="luarProvinsi" {{ $user->asal_daerah == 'luarProvinsi' ? 'selected' : ''
|
||||
}}>Luar
|
||||
Provinsi</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -46,7 +46,7 @@
|
|||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {{ Route::is('examData.show') ? '' : 'collapsed' }}" href="{{ route('examData.show') }}">
|
||||
<a class="nav-link {{ Route::is('testData.show') ? '' : 'collapsed' }}" href="{{ route('testData.show') }}">
|
||||
<i class='bx bx-test-tube'></i>
|
||||
<span>Data Uji</span>
|
||||
</a>
|
||||
|
|
|
@ -7,6 +7,8 @@
|
|||
use App\Http\Controllers\HitungController;
|
||||
use App\Http\Controllers\MunaqosahController;
|
||||
use App\Http\Controllers\ClassificationController;
|
||||
use App\Http\Controllers\TestDataController;
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Web Routes
|
||||
|
@ -83,8 +85,8 @@
|
|||
Route::post('/admin/trainData/reset', [ClassificationController::class, 'resetTrainData'])
|
||||
->name('trainData.reset');
|
||||
// Exam Data...........................
|
||||
Route::get('/admin/examData', [ClassificationController::class, 'showExamData'])
|
||||
->name('examData.show');
|
||||
Route::get('/admin/testData', [TestDataController::class, 'showTestData'])->name('testData.show');
|
||||
Route::post('/admin/testData/classify', [TestDataController::class, 'classifyData'])->name('testData.classify');
|
||||
// Classification Data...........................
|
||||
Route::get('/admin/classificationResult', [ClassificationController::class, 'classificationResult'])
|
||||
->name('classificationResult');
|
||||
|
|
Loading…
Reference in New Issue