sql
This commit is contained in:
rianbtk
parent
0e231b42c4
commit
4f3aaaab66
1268
app/Http/Controllers/SQLController.php
Normal file
1268
app/Http/Controllers/SQLController.php
Normal file
File diff suppressed because it is too large
Load Diff
16
app/SqlExam.php
Normal file
16
app/SqlExam.php
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<?php
|
||||
|
||||
namespace App;
|
||||
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
|
||||
class SqlExam extends Model
|
||||
{
|
||||
protected $fillable = [
|
||||
'question',
|
||||
'answer_1',
|
||||
'answer_2',
|
||||
'answer_3',
|
||||
'answer_4',
|
||||
];
|
||||
}
|
||||
14
app/SqlExamResult.php
Normal file
14
app/SqlExamResult.php
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<?php
|
||||
|
||||
namespace App;
|
||||
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
|
||||
class SqlExamResult extends Model
|
||||
{
|
||||
protected $fillable = [
|
||||
'nilai',
|
||||
'status',
|
||||
'user_id'
|
||||
];
|
||||
}
|
||||
14
app/SqlExamUser.php
Normal file
14
app/SqlExamUser.php
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<?php
|
||||
|
||||
namespace App;
|
||||
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
|
||||
class SqlExamUser extends Model
|
||||
{
|
||||
protected $fillable = [
|
||||
'sql_exam_result_id',
|
||||
'sql_exam_id',
|
||||
'answer',
|
||||
];
|
||||
}
|
||||
16
app/SqlExercise.php
Normal file
16
app/SqlExercise.php
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<?php
|
||||
|
||||
namespace App;
|
||||
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
|
||||
class SqlExercise extends Model
|
||||
{
|
||||
protected $fillable = [
|
||||
'question',
|
||||
'answer_1',
|
||||
'answer_2',
|
||||
'answer_3',
|
||||
'answer_4',
|
||||
];
|
||||
}
|
||||
14
app/SqlExerciseResult.php
Normal file
14
app/SqlExerciseResult.php
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<?php
|
||||
|
||||
namespace App;
|
||||
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
|
||||
class SqlExerciseResult extends Model
|
||||
{
|
||||
protected $fillable = [
|
||||
'nilai',
|
||||
'status',
|
||||
'user_id'
|
||||
];
|
||||
}
|
||||
14
app/SqlExerciseUser.php
Normal file
14
app/SqlExerciseUser.php
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<?php
|
||||
|
||||
namespace App;
|
||||
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
|
||||
class SqlExerciseUser extends Model
|
||||
{
|
||||
protected $fillable = [
|
||||
'sql_exercise_result_id',
|
||||
'sql_exercise_id',
|
||||
'answer',
|
||||
];
|
||||
}
|
||||
14
app/SqlLearning.php
Normal file
14
app/SqlLearning.php
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<?php
|
||||
|
||||
namespace App;
|
||||
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
|
||||
class SqlLearning extends Model
|
||||
{
|
||||
protected $fillable = [
|
||||
'name',
|
||||
'syntax',
|
||||
'file'
|
||||
];
|
||||
}
|
||||
24
app/SqlLearningUser.php
Normal file
24
app/SqlLearningUser.php
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<?php
|
||||
|
||||
namespace App;
|
||||
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
|
||||
class SqlLearningUser extends Model
|
||||
{
|
||||
protected $fillable = [
|
||||
'status',
|
||||
'sql_learning_id',
|
||||
'user_id',
|
||||
];
|
||||
|
||||
public function input()
|
||||
{
|
||||
return $this->hasMany(SqlLearningUserLog::class);
|
||||
}
|
||||
|
||||
public function user()
|
||||
{
|
||||
return $this->belongsTo(User::class);
|
||||
}
|
||||
}
|
||||
16
app/SqlLearningUserLog.php
Normal file
16
app/SqlLearningUserLog.php
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<?php
|
||||
|
||||
namespace App;
|
||||
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
|
||||
class SqlLearningUserLog extends Model
|
||||
{
|
||||
protected $fillable = [
|
||||
'syntax',
|
||||
'rollback',
|
||||
'result',
|
||||
'status',
|
||||
'sql_learning_user_id',
|
||||
];
|
||||
}
|
||||
23
app/SqlPractice.php
Normal file
23
app/SqlPractice.php
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<?php
|
||||
|
||||
namespace App;
|
||||
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
|
||||
class SqlPractice extends Model
|
||||
{
|
||||
protected $fillable = [
|
||||
'name',
|
||||
'question'
|
||||
];
|
||||
|
||||
public function question()
|
||||
{
|
||||
return $this->hasMany(SqlPracticeQuestion::class);
|
||||
}
|
||||
|
||||
public function questions()
|
||||
{
|
||||
return $this->hasMany(SqlPracticeQuestion::class);
|
||||
}
|
||||
}
|
||||
19
app/SqlPracticeQuestion.php
Normal file
19
app/SqlPracticeQuestion.php
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<?php
|
||||
|
||||
namespace App;
|
||||
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
|
||||
class SqlPracticeQuestion extends Model
|
||||
{
|
||||
protected $fillable = [
|
||||
'question',
|
||||
'syntax',
|
||||
'sql_practice_id'
|
||||
];
|
||||
|
||||
public function practice()
|
||||
{
|
||||
return $this->belongsTo(SqlPractice::class, 'sql_practice_id', 'id');
|
||||
}
|
||||
}
|
||||
18
app/SqlPracticeUser.php
Normal file
18
app/SqlPracticeUser.php
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<?php
|
||||
|
||||
namespace App;
|
||||
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
|
||||
class SqlPracticeUser extends Model
|
||||
{
|
||||
protected $fillable = [
|
||||
'syntax',
|
||||
'result',
|
||||
'poin',
|
||||
'correct',
|
||||
'wrong',
|
||||
'sql_practice_question_id',
|
||||
'user_id'
|
||||
];
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
# Tuliskan kode program dibawah ini
|
||||
print ("oke")
|
||||
503
resources/views/admin/sql/exam.blade.php
Normal file
503
resources/views/admin/sql/exam.blade.php
Normal file
|
|
@ -0,0 +1,503 @@
|
|||
@extends('admin/admin')
|
||||
@section('css')
|
||||
<link rel="stylesheet" href="{{ asset('lte/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css') }}">
|
||||
@endsection
|
||||
@section('js')
|
||||
<script src="{{ asset('lte/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
|
||||
<script>
|
||||
const formContent = $('form .modal-body').html();
|
||||
var CM;
|
||||
|
||||
$(document).ready(function() {
|
||||
loads();
|
||||
});
|
||||
|
||||
const loads = () => {
|
||||
const data = $('#content tbody').html();
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "{{ route('admin sql exam read') }}",
|
||||
beforeSend: function() {
|
||||
$('#content tbody').html('');
|
||||
},
|
||||
error: function() {
|
||||
console.log('error');
|
||||
},
|
||||
success: function(response) {
|
||||
if (response.length == 0) {
|
||||
$('#content tbody').append('<tr><td colspan="4" class="align-middle text-center text-muted">tidak ada data</td></tr>');
|
||||
}
|
||||
|
||||
$.each(response, function(index, value) {
|
||||
$('#content tbody').append('<tr><td class="align-middle text-center">' + (index + 1) + '</td><td class="align-middle text-center">' + value.question + '</td><td class="align-middle text-center"><div class="btn-group"><button class="btn btn-sm btn-primary mx-1" data-action="detail" data-id="' + value.id + '"><i class="fa fa-eye"></i></button></div><div class="btn-group"><button class="btn btn-sm btn-success mx-1" data-action="update" data-id="' + value.id + '"><i class="fa fa-pen"></i></button></div><div class="btn-group"><button class="btn btn-sm btn-danger mx-1" data-action="delete" data-id="' + value.id + '"><i class="fa fa-trash"></i></button></div></td></tr>');
|
||||
});
|
||||
|
||||
reloads();
|
||||
creates();
|
||||
updates();
|
||||
deletes();
|
||||
details();
|
||||
|
||||
logView();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const reloads = () => {
|
||||
$('[data-action=reload]').unbind('click');
|
||||
$('[data-action=reload]').on('click', function() {
|
||||
loads();
|
||||
});
|
||||
}
|
||||
|
||||
const creates = () => {
|
||||
$('[data-action=create]').unbind('click');
|
||||
$('[data-action=create]').on('click', function() {
|
||||
$('#formModal').on('shown.bs.modal', function() {
|
||||
$('form .modal-body').html(formContent);
|
||||
|
||||
$('#formModalLabel').html('Tambah Soal Latihan');
|
||||
formElement();
|
||||
formSubmit();
|
||||
});
|
||||
|
||||
$('#formModal').modal({
|
||||
backdrop: 'static',
|
||||
keyboard: false
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
const updates = () => {
|
||||
$('[data-action=update]').unbind('click');
|
||||
$('[data-action=update]').on('click', function() {
|
||||
let id = $(this).attr('data-id');
|
||||
let url = '{{ route('admin sql exam detail', ':id') }}';
|
||||
url = url.replace(":id", id);
|
||||
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: url,
|
||||
beforeSend: function() {
|
||||
$('button[data-action]').attr('disabled', true);
|
||||
},
|
||||
complete: function() {
|
||||
$('button[data-action]').removeAttr('disabled');
|
||||
},
|
||||
error: function() {
|
||||
$('button[data-action]').removeAttr('disabled');
|
||||
|
||||
Swal.fire({
|
||||
title: 'Data Tidak Ditemukan',
|
||||
text: "data yang anda maksud tidak ada di database",
|
||||
type: 'error',
|
||||
confirmButtonText: 'Tutup',
|
||||
}).then(() => {
|
||||
loads();
|
||||
})
|
||||
},
|
||||
success: function(response) {
|
||||
$('#formModal').on('shown.bs.modal', function() {
|
||||
$('form .modal-body').html(formContent);
|
||||
$.each(response, function(index, value) {
|
||||
if ($('form [name=' + index + ']').length) {
|
||||
switch ($('form [name=' + index + ']').prop("tagName")) {
|
||||
case 'TEXTAREA':
|
||||
$('form [name=' + index + ']').html(value)
|
||||
break;
|
||||
|
||||
case 'INPUT':
|
||||
if ($('form [name=' + index + ']').prop("type") != 'file') {
|
||||
$('form [name=' + index + ']').val(value);
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
$('form button[type=submit]').attr('data-id', id);
|
||||
|
||||
$('#formModalLabel').html('Ubah Soal Latihan');
|
||||
formElement();
|
||||
formSubmit();
|
||||
});
|
||||
|
||||
$('#formModal').modal({
|
||||
backdrop: 'static',
|
||||
keyboard: false
|
||||
})
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const deletes = () => {
|
||||
$('[data-action=delete]').unbind('click');
|
||||
$('[data-action=delete]').on('click', function() {
|
||||
let id = $(this).attr('data-id');
|
||||
let url = '{{ route('admin sql exam delete', ':id') }}';
|
||||
url = url.replace(':id', id);
|
||||
|
||||
Swal.fire({
|
||||
title: 'Hapus Data',
|
||||
text: "data yang telah dihapus tidak dapat dikembalikan, harap pastikan bahwa anda benar-benar yakin!",
|
||||
type: 'warning',
|
||||
confirmButtonText: 'Saya Yakin!',
|
||||
cancelButtonText: 'Batal',
|
||||
showCancelButton: true,
|
||||
showLoaderOnConfirm: true,
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
backdrop: true,
|
||||
preConfirm: () => {
|
||||
return fetch(url)
|
||||
.then(response => {
|
||||
return response;
|
||||
})
|
||||
},
|
||||
}).then((result) => {
|
||||
if (typeof result.dismiss == 'undefined') {
|
||||
if (result.value.ok) {
|
||||
Swal.fire({
|
||||
title: 'Hapus Data',
|
||||
text: "data berhasil dihapus",
|
||||
type: 'success',
|
||||
confirmButtonText: 'Mantap!',
|
||||
}).then(() => {
|
||||
loads();
|
||||
})
|
||||
} else {
|
||||
Swal.fire({
|
||||
title: 'Hapus Data',
|
||||
text: "data gagal dihapus",
|
||||
type: 'error',
|
||||
confirmButtonText: 'Tutup',
|
||||
}).then(() => {
|
||||
loads();
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
const formElement = () => {
|
||||
$('form input[type=file]').unbind('change');
|
||||
$('form input[type=file]').on('change', function() {
|
||||
$('label.custom-file-label[for=' + $(this).prop('name') + ']').html($(this).val().replace(/.*(\/|\\)/, ''));
|
||||
});
|
||||
|
||||
$('form input,form select').unbind('click');
|
||||
$('form input,form select').on('click', function() {
|
||||
$(this).removeClass('is-invalid');
|
||||
});
|
||||
}
|
||||
|
||||
const formSubmit = () => {
|
||||
let url;
|
||||
switch ($('#formModalLabel').html()) {
|
||||
case 'Tambah Soal Latihan':
|
||||
url = '{{ route('admin sql exam create') }}'
|
||||
break;
|
||||
case 'Ubah Soal Latihan':
|
||||
let id = $('form button[type=submit]').attr('data-id');
|
||||
url = '{{ route('admin sql exam update', ':id') }}'
|
||||
url = url.replace(':id', id);
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
$('form').unbind('submit');
|
||||
$('form').on('submit', function() {
|
||||
if (url) {
|
||||
let elm = $(this);
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: url,
|
||||
data: new FormData(elm[0]),
|
||||
processData: false,
|
||||
contentType: false,
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
||||
},
|
||||
beforeSend: function() {
|
||||
elm.find('button[type=submit]').html('Tunggu sebentar');
|
||||
elm.find('button').attr('disabled', true);
|
||||
elm.find(':input').attr('disabled', true)
|
||||
},
|
||||
complete: function() {
|
||||
elm.find('button[type=submit]').html('Simpan');
|
||||
elm.find('button').removeAttr('disabled');
|
||||
elm.find(':input').removeAttr('disabled')
|
||||
},
|
||||
error: function() {
|
||||
elm.find('button[type=submit]').html('Simpan');
|
||||
elm.find('button').removeAttr('disabled');
|
||||
elm.find(':input').removeAttr('disabled')
|
||||
},
|
||||
success: function(response) {
|
||||
if (response != 'ok') {
|
||||
let html = '';
|
||||
$.each(response, function(index, value) {
|
||||
html += '<small class="badge badge-danger d-block text-left my-1"><i class="fa fa-times px-1 mr-1"></i> <span class="border-left px-2">' + value + '</span></small>';
|
||||
$('input[name=' + index + ']').addClass('is-invalid');
|
||||
});
|
||||
$('form #error-message').html(html)
|
||||
$('form #error-message').addClass('d-block');
|
||||
$('form #error-message').removeClass('d-none');
|
||||
} else {
|
||||
$('#formModal').modal('hide');
|
||||
Swal.fire({
|
||||
title: $('#formModalLabel').html().replace(' Soal Latihan', '') + ' Data Berhasil',
|
||||
text: "data berhasil di" + $('#formModalLabel').html().replace(' Soal Latihan', '').toLowerCase() + " kedalam database",
|
||||
type: 'success',
|
||||
confirmButtonText: 'Mantap!'
|
||||
}).then(() => {
|
||||
loads();
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const details = () => {
|
||||
$('button[data-action=detail]').unbind('click');
|
||||
$('button[data-action=detail]').on('click', function() {
|
||||
let id = $(this).attr('data-id');
|
||||
let url = '{{ route('admin sql exam detail', ':id') }}';
|
||||
url = url.replace(":id", id);
|
||||
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: url,
|
||||
success: function(response) {
|
||||
$('#detailModal').on('shown.bs.modal', function() {
|
||||
$.each(response, function(index, value) {
|
||||
if ($('#detailModal textarea[name=' + index + ']').length) {
|
||||
$('#detailModal textarea[name=' + index + ']').val(value)
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('#detailModal').modal({
|
||||
backdrop: 'static',
|
||||
keyboard: false
|
||||
})
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const logView = () => {
|
||||
$('button[data-action=log]').unbind('click');
|
||||
$('button[data-action=log]').on('click', function() {
|
||||
$('#logModal').unbind('shown.bs.modal');
|
||||
$('#logModal').on('shown.bs.modal', function() {
|
||||
$('#logModal tbody').html('');
|
||||
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "{{ route('admin sql exam log read') }}",
|
||||
beforeSend: function() {
|
||||
$('#logModal tbody').html('');
|
||||
},
|
||||
error: function() {
|
||||
console.log('error');
|
||||
},
|
||||
success: function(response) {
|
||||
if (response.length == 0) {
|
||||
$('#logModal tbody').append('<tr><td colspan="3" class="align-middle text-center text-muted">tidak ada data</td></tr>');
|
||||
}
|
||||
|
||||
console.log(response);
|
||||
$.each(response, function(index, value) {
|
||||
let html = '<tr><td class="text-center">' + (index + 1) + '</td><td>' + value.name + '</td><td class="text-center">';
|
||||
if (value.exam.length != 0) {
|
||||
$.each(value.exam, function(indexs, values) {
|
||||
if (values.status == 'selesai') {
|
||||
html += '<div class="d-flex justify-content-between"><span>Test ' + (indexs + 1) + '</span><span>' + values.nilai + '</span></div>';
|
||||
}
|
||||
});
|
||||
}
|
||||
html += '</td></tr>';
|
||||
$('#logModal tbody').html(html);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
$('#logModal').modal({
|
||||
backdrop: 'static',
|
||||
keyboard: false
|
||||
})
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
@section('content')
|
||||
<div class="row" id="content">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Soal Ujian Teori SQL</h3>
|
||||
<div class="card-tools">
|
||||
<button class="btn btn-tool" data-action="reload">
|
||||
<i class="fa fa-sync"></i>
|
||||
Refresh
|
||||
</button>
|
||||
<button class="btn btn-tool" data-action="create">
|
||||
<i class="fa fa-plus"></i>
|
||||
Add
|
||||
</button>
|
||||
<button class="btn btn-tool" data-action="log">
|
||||
<i class="fa fa-award"></i>
|
||||
Nilai
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<table class="table table-bordered table-hover">
|
||||
<thead>
|
||||
<tr class="text-center">
|
||||
<th>NO</th>
|
||||
<th>Soal</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{-- <tr>
|
||||
<td colspan="4" class="align-middle text-center text-muted">
|
||||
tidak ada data
|
||||
</td>
|
||||
</tr> --}}
|
||||
{{-- <tr>
|
||||
<td class="align-middle text-center">'+(index+1)+'</td>
|
||||
<td class="align-middle text-center">'+ value.question +'</td>
|
||||
<td class="align-middle text-center">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-sm btn-primary" data-action="detail" data-id="'+value.id+'"><i class="fa fa-eye"></i></button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-sm btn-success" data-action="update" data-id="'+value.id+'"><i class="fa fa-pen"></i></button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-sm btn-danger" data-action="delete" data-id="'+value.id+'"><i class="fa fa-trash"></i></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr> --}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form action="javascript:void(0)" enctype="multipart/form-data">
|
||||
<div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="formModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="formModalLabel"></h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mb-4 d-none" id="error-message"></div>
|
||||
<div class="form-group">
|
||||
<label for="question">Soal <code>*</code></label>
|
||||
<textarea name="question" id="question" class="form-control" rows="4"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="answer_1">Jawaban Benar (1) <code>*</code></label>
|
||||
<textarea name="answer_1" id="answer_1" class="form-control" rows="1"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="answer_2">Jawaban Salah (2) <code>*</code></label>
|
||||
<textarea name="answer_2" id="answer_2" class="form-control" rows="1"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="answer_3">Jawaban Salah (3) <code>*</code></label>
|
||||
<textarea name="answer_3" id="answer_3" class="form-control" rows="1"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="answer_4">Jawaban Salah (4) <code>*</code></label>
|
||||
<textarea name="answer_4" id="answer_4" class="form-control" rows="1"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="submit" class="btn btn-primary">Simpan</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="detailModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="detailModalLabel">Detail Soal</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label for="question">Soal</label>
|
||||
<textarea name="question" id="question" class="form-control" rows="4" disabled></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="answer_1">Jawaban Benar (1)</label>
|
||||
<textarea name="answer_1" id="answer_1" class="form-control" rows="1" disabled></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="answer_2">Jawaban Salah (2)</label>
|
||||
<textarea name="answer_2" id="answer_2" class="form-control" rows="1" disabled></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="answer_3">Jawaban Salah (3)</label>
|
||||
<textarea name="answer_3" id="answer_3" class="form-control" rows="1" disabled></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="answer_4">Jawaban Salah (4)</label>
|
||||
<textarea name="answer_4" id="answer_4" class="form-control" rows="1" disabled></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade" id="logModal" tabindex="-1" role="dialog" aria-labelledby="logModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="logModalLabel">Hasil Nilai</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body p-0">
|
||||
<table class="table table-bordered table-hover">
|
||||
<thead>
|
||||
<tr class="text-center">
|
||||
<th>NO</th>
|
||||
<th>Name</th>
|
||||
<th>Nilai</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
483
resources/views/admin/sql/exercise.blade.php
Normal file
483
resources/views/admin/sql/exercise.blade.php
Normal file
|
|
@ -0,0 +1,483 @@
|
|||
@extends('admin/admin')
|
||||
@section('css')
|
||||
<link rel="stylesheet" href="{{ asset('lte/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css') }}">
|
||||
@endsection
|
||||
@section('js')
|
||||
<script src="{{ asset('lte/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
|
||||
<script>
|
||||
const formContent = $('form .modal-body').html();
|
||||
var CM;
|
||||
|
||||
$(document).ready(function() {
|
||||
loads();
|
||||
});
|
||||
|
||||
const loads = () => {
|
||||
const data = $('tbody').html();
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "{{ route('admin sql exercise read') }}",
|
||||
beforeSend: function() {
|
||||
$('#content tbody').html('');
|
||||
},
|
||||
error: function() {
|
||||
console.log('error');
|
||||
},
|
||||
success: function(response) {
|
||||
if (response.length == 0) {
|
||||
$('#content tbody').append('<tr><td colspan="4" class="align-middle text-center text-muted">tidak ada data</td></tr>');
|
||||
}
|
||||
|
||||
$.each(response, function(index, value) {
|
||||
$('#content tbody').append('<tr><td class="align-middle text-center">' + (index + 1) + '</td><td class="align-middle text-center">' + value.question + '</td><td class="align-middle text-center"><div class="btn-group"><button class="btn btn-sm btn-primary mx-1" data-action="detail" data-id="' + value.id + '"><i class="fa fa-eye"></i></button></div><div class="btn-group"><button class="btn btn-sm btn-success mx-1" data-action="update" data-id="' + value.id + '"><i class="fa fa-pen"></i></button></div><div class="btn-group"><button class="btn btn-sm btn-danger mx-1" data-action="delete" data-id="' + value.id + '"><i class="fa fa-trash"></i></button></div></td></tr>');
|
||||
});
|
||||
|
||||
reloads();
|
||||
creates();
|
||||
updates();
|
||||
deletes();
|
||||
details();
|
||||
|
||||
logView();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const reloads = () => {
|
||||
$('[data-action=reload]').unbind('click');
|
||||
$('[data-action=reload]').on('click', function() {
|
||||
loads();
|
||||
});
|
||||
}
|
||||
|
||||
const creates = () => {
|
||||
$('[data-action=create]').unbind('click');
|
||||
$('[data-action=create]').on('click', function() {
|
||||
$('#formModal').on('shown.bs.modal', function() {
|
||||
$('form .modal-body').html(formContent);
|
||||
|
||||
$('#formModalLabel').html('Tambah Soal Latihan');
|
||||
formElement();
|
||||
formSubmit();
|
||||
});
|
||||
|
||||
$('#formModal').modal({
|
||||
backdrop: 'static',
|
||||
keyboard: false
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
const updates = () => {
|
||||
$('[data-action=update]').unbind('click');
|
||||
$('[data-action=update]').on('click', function() {
|
||||
let id = $(this).attr('data-id');
|
||||
let url = '{{ route('admin sql exercise detail', ':id') }}';
|
||||
url = url.replace(":id", id);
|
||||
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: url,
|
||||
beforeSend: function() {
|
||||
$('button[data-action]').attr('disabled', true);
|
||||
},
|
||||
complete: function() {
|
||||
$('button[data-action]').removeAttr('disabled');
|
||||
},
|
||||
error: function() {
|
||||
$('button[data-action]').removeAttr('disabled');
|
||||
|
||||
Swal.fire({
|
||||
title: 'Data Tidak Ditemukan',
|
||||
text: "data yang anda maksud tidak ada di database",
|
||||
type: 'error',
|
||||
confirmButtonText: 'Tutup',
|
||||
}).then(() => {
|
||||
loads();
|
||||
})
|
||||
},
|
||||
success: function(response) {
|
||||
$('#formModal').on('shown.bs.modal', function() {
|
||||
$('form .modal-body').html(formContent);
|
||||
$.each(response, function(index, value) {
|
||||
if ($('form [name=' + index + ']').length) {
|
||||
switch ($('form [name=' + index + ']').prop("tagName")) {
|
||||
case 'TEXTAREA':
|
||||
$('form [name=' + index + ']').html(value)
|
||||
break;
|
||||
|
||||
case 'INPUT':
|
||||
if ($('form [name=' + index + ']').prop("type") != 'file') {
|
||||
$('form [name=' + index + ']').val(value);
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
$('form button[type=submit]').attr('data-id', id);
|
||||
|
||||
$('#formModalLabel').html('Ubah Soal Latihan');
|
||||
formElement();
|
||||
formSubmit();
|
||||
});
|
||||
|
||||
$('#formModal').modal({
|
||||
backdrop: 'static',
|
||||
keyboard: false
|
||||
})
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const deletes = () => {
|
||||
$('[data-action=delete]').unbind('click');
|
||||
$('[data-action=delete]').on('click', function() {
|
||||
let id = $(this).attr('data-id');
|
||||
let url = '{{ route('admin sql exercise delete', ':id') }}';
|
||||
url = url.replace(':id', id);
|
||||
|
||||
Swal.fire({
|
||||
title: 'Hapus Data',
|
||||
text: "data yang telah dihapus tidak dapat dikembalikan, harap pastikan bahwa anda benar-benar yakin!",
|
||||
type: 'warning',
|
||||
confirmButtonText: 'Saya Yakin!',
|
||||
cancelButtonText: 'Batal',
|
||||
showCancelButton: true,
|
||||
showLoaderOnConfirm: true,
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
backdrop: true,
|
||||
preConfirm: () => {
|
||||
return fetch(url)
|
||||
.then(response => {
|
||||
return response;
|
||||
})
|
||||
},
|
||||
}).then((result) => {
|
||||
if (typeof result.dismiss == 'undefined') {
|
||||
if (result.value.ok) {
|
||||
Swal.fire({
|
||||
title: 'Hapus Data',
|
||||
text: "data berhasil dihapus",
|
||||
type: 'success',
|
||||
confirmButtonText: 'Mantap!',
|
||||
}).then(() => {
|
||||
loads();
|
||||
})
|
||||
} else {
|
||||
Swal.fire({
|
||||
title: 'Hapus Data',
|
||||
text: "data gagal dihapus",
|
||||
type: 'error',
|
||||
confirmButtonText: 'Tutup',
|
||||
}).then(() => {
|
||||
loads();
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
const formElement = () => {
|
||||
$('form input[type=file]').unbind('change');
|
||||
$('form input[type=file]').on('change', function() {
|
||||
$('label.custom-file-label[for=' + $(this).prop('name') + ']').html($(this).val().replace(/.*(\/|\\)/, ''));
|
||||
});
|
||||
|
||||
$('form input,form select').unbind('click');
|
||||
$('form input,form select').on('click', function() {
|
||||
$(this).removeClass('is-invalid');
|
||||
});
|
||||
}
|
||||
|
||||
const formSubmit = () => {
|
||||
let url;
|
||||
switch ($('#formModalLabel').html()) {
|
||||
case 'Tambah Soal Latihan':
|
||||
url = '{{ route('admin sql exercise create') }}'
|
||||
break;
|
||||
case 'Ubah Soal Latihan':
|
||||
let id = $('form button[type=submit]').attr('data-id');
|
||||
url = '{{ route('admin sql exercise update', ':id') }}'
|
||||
url = url.replace(':id', id);
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
$('form').unbind('submit');
|
||||
$('form').on('submit', function() {
|
||||
if (url) {
|
||||
let elm = $(this);
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: url,
|
||||
data: new FormData(elm[0]),
|
||||
processData: false,
|
||||
contentType: false,
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
||||
},
|
||||
beforeSend: function() {
|
||||
elm.find('button[type=submit]').html('Tunggu sebentar');
|
||||
elm.find('button').attr('disabled', true);
|
||||
elm.find(':input').attr('disabled', true)
|
||||
},
|
||||
complete: function() {
|
||||
elm.find('button[type=submit]').html('Simpan');
|
||||
elm.find('button').removeAttr('disabled');
|
||||
elm.find(':input').removeAttr('disabled')
|
||||
},
|
||||
error: function() {
|
||||
elm.find('button[type=submit]').html('Simpan');
|
||||
elm.find('button').removeAttr('disabled');
|
||||
elm.find(':input').removeAttr('disabled')
|
||||
},
|
||||
success: function(response) {
|
||||
if (response != 'ok') {
|
||||
let html = '';
|
||||
$.each(response, function(index, value) {
|
||||
html += '<small class="badge badge-danger d-block text-left my-1"><i class="fa fa-times px-1 mr-1"></i> <span class="border-left px-2">' + value + '</span></small>';
|
||||
$('input[name=' + index + ']').addClass('is-invalid');
|
||||
});
|
||||
$('form #error-message').html(html)
|
||||
$('form #error-message').addClass('d-block');
|
||||
$('form #error-message').removeClass('d-none');
|
||||
} else {
|
||||
$('#formModal').modal('hide');
|
||||
Swal.fire({
|
||||
title: $('#formModalLabel').html().replace(' Soal Latihan', '') + ' Data Berhasil',
|
||||
text: "data berhasil di" + $('#formModalLabel').html().replace(' Soal Latihan', '').toLowerCase() + " kedalam database",
|
||||
type: 'success',
|
||||
confirmButtonText: 'Mantap!'
|
||||
}).then(() => {
|
||||
loads();
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const details = () => {
|
||||
$('button[data-action=detail]').unbind('click');
|
||||
$('button[data-action=detail]').on('click', function() {
|
||||
let id = $(this).attr('data-id');
|
||||
let url = '{{ route('admin sql exercise detail', ':id') }}';
|
||||
url = url.replace(":id", id);
|
||||
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: url,
|
||||
success: function(response) {
|
||||
$('#detailModal').on('shown.bs.modal', function() {
|
||||
$.each(response, function(index, value) {
|
||||
if ($('#detailModal textarea[name=' + index + ']').length) {
|
||||
$('#detailModal textarea[name=' + index + ']').val(value)
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('#detailModal').modal({
|
||||
backdrop: 'static',
|
||||
keyboard: false
|
||||
})
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const logView = () => {
|
||||
$('button[data-action=log]').unbind('click');
|
||||
$('button[data-action=log]').on('click', function() {
|
||||
$('#logModal').unbind('shown.bs.modal');
|
||||
$('#logModal').on('shown.bs.modal', function() {
|
||||
$('#logModal tbody').html('');
|
||||
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "{{ route('admin sql exercise log read') }}",
|
||||
beforeSend: function() {
|
||||
$('#logModal tbody').html('');
|
||||
},
|
||||
error: function() {
|
||||
console.log('error');
|
||||
},
|
||||
success: function(response) {
|
||||
if (response.length == 0) {
|
||||
$('#logModal tbody').append('<tr><td colspan="3" class="align-middle text-center text-muted">tidak ada data</td></tr>');
|
||||
}
|
||||
|
||||
console.log(response);
|
||||
$.each(response, function(index, value) {
|
||||
let html = '<tr><td class="text-center">' + (index + 1) + '</td><td>' + value.name + '</td><td class="text-center">';
|
||||
if (value.exercise.length != 0) {
|
||||
$.each(value.exercise, function(indexs, values) {
|
||||
if (values.status == 'selesai') {
|
||||
html += '<div class="d-flex justify-content-between"><span>Test ' + (indexs + 1) + '</span><span>' + values.nilai + '</span></div>';
|
||||
}
|
||||
});
|
||||
}
|
||||
html += '</td></tr>';
|
||||
$('#logModal tbody').html(html);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
$('#logModal').modal({
|
||||
backdrop: 'static',
|
||||
keyboard: false
|
||||
})
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
@section('content')
|
||||
<div class="row" id="content">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Soal Latihan Teori SQL</h3>
|
||||
<div class="card-tools">
|
||||
<button class="btn btn-tool" data-action="reload">
|
||||
<i class="fa fa-sync"></i>
|
||||
Refresh
|
||||
</button>
|
||||
<button class="btn btn-tool" data-action="create">
|
||||
<i class="fa fa-plus"></i>
|
||||
Add
|
||||
</button>
|
||||
<button class="btn btn-tool" data-action="log">
|
||||
<i class="fa fa-award"></i>
|
||||
Nilai
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<table class="table table-bordered table-hover">
|
||||
<thead>
|
||||
<tr class="text-center">
|
||||
<th>NO</th>
|
||||
<th>Soal</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form action="javascript:void(0)" enctype="multipart/form-data">
|
||||
<div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="formModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="formModalLabel"></h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mb-4 d-none" id="error-message"></div>
|
||||
<div class="form-group">
|
||||
<label for="question">Soal <code>*</code></label>
|
||||
<textarea name="question" id="question" class="form-control" rows="4"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="answer_1">Jawaban Benar (1) <code>*</code></label>
|
||||
<textarea name="answer_1" id="answer_1" class="form-control" rows="1"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="answer_2">Jawaban Salah (2) <code>*</code></label>
|
||||
<textarea name="answer_2" id="answer_2" class="form-control" rows="1"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="answer_3">Jawaban Salah (3) <code>*</code></label>
|
||||
<textarea name="answer_3" id="answer_3" class="form-control" rows="1"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="answer_4">Jawaban Salah (4) <code>*</code></label>
|
||||
<textarea name="answer_4" id="answer_4" class="form-control" rows="1"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="submit" class="btn btn-primary">Simpan</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="detailModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="detailModalLabel">Detail Soal</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label for="question">Soal</label>
|
||||
<textarea name="question" id="question" class="form-control" rows="4" disabled></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="answer_1">Jawaban Benar (1)</label>
|
||||
<textarea name="answer_1" id="answer_1" class="form-control" rows="1" disabled></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="answer_2">Jawaban Salah (2)</label>
|
||||
<textarea name="answer_2" id="answer_2" class="form-control" rows="1" disabled></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="answer_3">Jawaban Salah (3)</label>
|
||||
<textarea name="answer_3" id="answer_3" class="form-control" rows="1" disabled></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="answer_4">Jawaban Salah (4)</label>
|
||||
<textarea name="answer_4" id="answer_4" class="form-control" rows="1" disabled></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade" id="logModal" tabindex="-1" role="dialog" aria-labelledby="logModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="logModalLabel">Hasil Nilai</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body p-0">
|
||||
<table class="table table-bordered table-hover">
|
||||
<thead>
|
||||
<tr class="text-center">
|
||||
<th>NO</th>
|
||||
<th>Name</th>
|
||||
<th>Nilai</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
639
resources/views/admin/sql/learning.blade.php
Normal file
639
resources/views/admin/sql/learning.blade.php
Normal file
|
|
@ -0,0 +1,639 @@
|
|||
@extends('admin/admin')
|
||||
@section('css')
|
||||
<link rel="stylesheet" href="{{ asset('lte/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('lte/plugins/codemirror/lib/codemirror.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('lte/plugins/codemirror/theme/dracula.css') }}">
|
||||
<link href='https://fonts.googleapis.com/css?family=Courier Prime' rel='stylesheet'>
|
||||
@endsection
|
||||
@section('js')
|
||||
<script src="{{ asset('lte/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
|
||||
<script src="{{ asset('lte/plugins/codemirror/lib/codemirror.js') }}"></script>
|
||||
<script src="{{ asset('lte/plugins/codemirror/mode/sql/sql.js') }}"></script>
|
||||
<script>
|
||||
const formContent = $('form .modal-body').html();
|
||||
var CM;
|
||||
|
||||
$(document).ready(function() {
|
||||
loads();
|
||||
});
|
||||
|
||||
const loads = () => {
|
||||
const data = $('tbody').html();
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "{{ route('admin sql learning read') }}",
|
||||
beforeSend: function() {
|
||||
$('#content tbody').html('');
|
||||
},
|
||||
error: function() {
|
||||
console.log('error');
|
||||
},
|
||||
success: function(response) {
|
||||
if (response.length == 0) {
|
||||
$('#content tbody').append('<tr><td colspan="4" class="align-middle text-center text-muted">tidak ada data</td></tr>');
|
||||
}
|
||||
|
||||
$.each(response, function(index, value) {
|
||||
$('#content tbody').append('<tr><td class="align-middle text-center">' + (index + 1) + '</td><td class="align-middle">' + value.name + '</td><td class="align-middle text-center"><div class="btn-group"><button class="btn btn-sm btn-primary" data-action="syntax" data-syntax="' + value.syntax.replaceAll('"', "'") + '"><i class="fa fa-eye mr-1"></i>Tinjau</button></div></td><td class="align-middle text-center"><div class="btn-group"><button class="btn btn-sm btn-primary" data-action="file" data-file="' + value.file + '"><i class="fa fa-eye mr-1"></i>Tinjau</button></div></td><td class="align-middle text-center"><div class="btn-group"><button class="btn btn-sm btn-success mr-1" data-action="update" data-id="' + value.id + '"><i class="fa fa-pen"></i></button></div><div class="btn-group"><button class="btn btn-sm btn-danger" data-action="delete" data-id="' + value.id + '"><i class="fa fa-trash"></i></button></div></td></tr>');
|
||||
});
|
||||
|
||||
reloads();
|
||||
creates();
|
||||
updates();
|
||||
deletes();
|
||||
|
||||
fileView();
|
||||
syntaxView();
|
||||
logView();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const reloads = () => {
|
||||
$('[data-action=reload]').unbind('click');
|
||||
$('[data-action=reload]').on('click', function() {
|
||||
loads();
|
||||
});
|
||||
}
|
||||
|
||||
const creates = () => {
|
||||
$('[data-action=create]').unbind('click');
|
||||
$('[data-action=create]').on('click', function() {
|
||||
$('#formModal').on('shown.bs.modal', function() {
|
||||
$('form .modal-body').html(formContent);
|
||||
|
||||
$('#formModalLabel').html('Tambah Modul Pembelajaran');
|
||||
formElement();
|
||||
formSubmit();
|
||||
});
|
||||
|
||||
$('#formModal').modal({
|
||||
backdrop: 'static',
|
||||
keyboard: false
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
const updates = () => {
|
||||
$('[data-action=update]').unbind('click');
|
||||
$('[data-action=update]').on('click', function() {
|
||||
let id = $(this).attr('data-id');
|
||||
let url = '{{ route('admin sql learning detail', ':id') }}';
|
||||
url = url.replace(":id", id);
|
||||
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: url,
|
||||
beforeSend: function() {
|
||||
$('button[data-action]').attr('disabled', true);
|
||||
},
|
||||
complete: function() {
|
||||
$('button[data-action]').removeAttr('disabled');
|
||||
},
|
||||
error: function() {
|
||||
$('button[data-action]').removeAttr('disabled');
|
||||
|
||||
Swal.fire({
|
||||
title: 'Data Tidak Ditemukan',
|
||||
text: "data yang anda maksud tidak ada di database",
|
||||
type: 'error',
|
||||
confirmButtonText: 'Tutup',
|
||||
}).then(() => {
|
||||
loads();
|
||||
})
|
||||
},
|
||||
success: function(response) {
|
||||
$('#formModal').unbind('shown.bs.modal');
|
||||
$('#formModal').on('shown.bs.modal', function() {
|
||||
$('form .modal-body').html(formContent);
|
||||
$('form button[type=submit]').attr('data-id', id);
|
||||
|
||||
$.each(response, function(index, value) {
|
||||
if ($('form [name=' + index + ']').length) {
|
||||
switch ($('form [name=' + index + ']').prop("tagName")) {
|
||||
case 'TEXTAREA':
|
||||
$('form [name=' + index + ']').html(value)
|
||||
break;
|
||||
|
||||
case 'INPUT':
|
||||
if ($('form [name=' + index + ']').prop("type") != 'file') {
|
||||
$('form [name=' + index + ']').val(value);
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#formModalLabel').html('Ubah Modul Pembelajaran');
|
||||
formElement();
|
||||
formSubmit();
|
||||
});
|
||||
|
||||
$('#formModal').modal({
|
||||
backdrop: 'static',
|
||||
keyboard: false
|
||||
})
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const deletes = () => {
|
||||
$('[data-action=delete]').unbind('click');
|
||||
$('[data-action=delete]').on('click', function() {
|
||||
let id = $(this).attr('data-id');
|
||||
let url = '{{ route('admin sql learning delete', ':id') }}';
|
||||
url = url.replace(':id', id);
|
||||
|
||||
Swal.fire({
|
||||
title: 'Hapus Data',
|
||||
text: "data yang telah dihapus tidak dapat dikembalikan, harap pastikan bahwa anda benar-benar yakin!",
|
||||
type: 'warning',
|
||||
confirmButtonText: 'Saya Yakin!',
|
||||
cancelButtonText: 'Batal',
|
||||
showCancelButton: true,
|
||||
showLoaderOnConfirm: true,
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
backdrop: true,
|
||||
preConfirm: () => {
|
||||
return fetch(url)
|
||||
.then(response => {
|
||||
return response;
|
||||
})
|
||||
},
|
||||
}).then((result) => {
|
||||
if (typeof result.dismiss == 'undefined') {
|
||||
if (result.value.ok) {
|
||||
Swal.fire({
|
||||
title: 'Hapus Data',
|
||||
text: "data berhasil dihapus",
|
||||
type: 'success',
|
||||
confirmButtonText: 'Mantap!',
|
||||
}).then(() => {
|
||||
loads();
|
||||
})
|
||||
} else {
|
||||
Swal.fire({
|
||||
title: 'Hapus Data',
|
||||
text: "data gagal dihapus",
|
||||
type: 'error',
|
||||
confirmButtonText: 'Tutup',
|
||||
}).then(() => {
|
||||
loads();
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
const formElement = () => {
|
||||
$('form input[type=file]').unbind('change');
|
||||
$('form input[type=file]').on('change', function() {
|
||||
$('label.custom-file-label[for=' + $(this).prop('name') + ']').html($(this).val().replace(/.*(\/|\\)/, ''));
|
||||
});
|
||||
|
||||
$('form input,form select').unbind('click');
|
||||
$('form input,form select').on('click', function() {
|
||||
$(this).removeClass('is-invalid');
|
||||
});
|
||||
|
||||
CodeMirror.fromTextArea($('form textarea')[0], {
|
||||
lineNumbers: true,
|
||||
styleActiveLine: true,
|
||||
mode: "sql",
|
||||
theme: "dracula",
|
||||
});
|
||||
}
|
||||
|
||||
const formSubmit = () => {
|
||||
let url;
|
||||
switch ($('#formModalLabel').html()) {
|
||||
case 'Tambah Modul Pembelajaran':
|
||||
url = '{{ route('admin sql learning create') }}'
|
||||
break;
|
||||
case 'Ubah Modul Pembelajaran':
|
||||
let id = $('form button[type=submit]').attr('data-id');
|
||||
url = '{{ route('admin sql learning update', ':id') }}'
|
||||
url = url.replace(':id', id);
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
$('form').unbind('submit');
|
||||
$('form').on('submit', function() {
|
||||
if (url) {
|
||||
let elm = $(this);
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: url,
|
||||
data: new FormData(elm[0]),
|
||||
processData: false,
|
||||
contentType: false,
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
||||
},
|
||||
beforeSend: function() {
|
||||
elm.find('button[type=submit]').html('Tunggu sebentar');
|
||||
elm.find('button').attr('disabled', true);
|
||||
elm.find(':input').attr('disabled', true)
|
||||
},
|
||||
complete: function() {
|
||||
elm.find('button[type=submit]').html('Simpan');
|
||||
elm.find('button').removeAttr('disabled');
|
||||
elm.find(':input').removeAttr('disabled')
|
||||
},
|
||||
error: function() {
|
||||
elm.find('button[type=submit]').html('Simpan');
|
||||
elm.find('button').removeAttr('disabled');
|
||||
elm.find(':input').removeAttr('disabled')
|
||||
},
|
||||
success: function(response) {
|
||||
if (response != 'ok') {
|
||||
let html = '';
|
||||
$.each(response, function(index, value) {
|
||||
html += '<small class="badge badge-danger d-block text-left my-1"><i class="fa fa-times px-1 mr-1"></i> <span class="border-left px-2">' + value + '</span></small>';
|
||||
$('input[name=' + index + ']').addClass('is-invalid');
|
||||
});
|
||||
$('form #error-message').html(html)
|
||||
$('form #error-message').addClass('d-block');
|
||||
$('form #error-message').removeClass('d-none');
|
||||
} else {
|
||||
$('#formModal').modal('hide');
|
||||
Swal.fire({
|
||||
title: $('#formModalLabel').html().replace(' Modul Pembelajaran', '') + ' Data Berhasil',
|
||||
text: "data berhasil di" + $('#formModalLabel').html().replace(' Modul Pembelajaran', '').toLowerCase() + " kedalam database",
|
||||
type: 'success',
|
||||
confirmButtonText: 'Mantap!'
|
||||
}).then(() => {
|
||||
loads();
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const fileView = () => {
|
||||
$('button[data-action=file]').unbind('click');
|
||||
$('button[data-action=file]').on('click', function() {
|
||||
let file = $(this).attr('data-file');
|
||||
if (file) {
|
||||
$('#fileModal embed').prop('src', '{{ asset('') }}' + file);
|
||||
$('#fileModal').modal({
|
||||
backdrop: 'static',
|
||||
keyboard: false
|
||||
})
|
||||
} else {
|
||||
Swal.fire({
|
||||
title: 'File Tidak Ditemukan',
|
||||
text: "file yang anda maksud tidak ditemukan",
|
||||
type: 'error',
|
||||
confirmButtonText: 'Tutup'
|
||||
}).then(() => {
|
||||
loads();
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const syntaxView = () => {
|
||||
$('button[data-action=syntax]').unbind('click');
|
||||
$('button[data-action=syntax]').on('click', function() {
|
||||
let syntax = $(this).attr('data-syntax');
|
||||
if (syntax) {
|
||||
$('#syntaxModal').on('shown.bs.modal', function() {
|
||||
$('#syntaxModal .modal-body').html('<textarea class="d-none"></textarea>');
|
||||
$('#syntaxModal .modal-body textarea').html(syntax);
|
||||
CodeMirror.fromTextArea($('#syntaxModal .modal-body textarea')[0], {
|
||||
lineNumbers: true,
|
||||
styleActiveLine: true,
|
||||
mode: "sql",
|
||||
theme: "dracula",
|
||||
readOnly: true,
|
||||
});
|
||||
});
|
||||
|
||||
$('#syntaxModal').on('hidden.bs.modal', function() {
|
||||
$('#syntaxModal .modal-body').html('');
|
||||
});
|
||||
|
||||
$('#syntaxModal').modal({
|
||||
backdrop: 'static',
|
||||
keyboard: false
|
||||
})
|
||||
} else {
|
||||
Swal.fire({
|
||||
title: 'Sintak Tidak Ditemukan',
|
||||
text: "syntax yang anda maksud tidak ditemukan",
|
||||
type: 'error',
|
||||
confirmButtonText: 'Tutup'
|
||||
}).then(() => {
|
||||
loads();
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const logView = () => {
|
||||
$('button[data-action=log]').unbind('click');
|
||||
$('button[data-action=log]').on('click', function() {
|
||||
$('#logModal').unbind('shown.bs.modal');
|
||||
$('#logModal').on('shown.bs.modal', function() {
|
||||
$('#logModal tbody').html('');
|
||||
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "{{ route('admin sql learning log read') }}",
|
||||
beforeSend: function() {
|
||||
$('#logModal tbody').html('');
|
||||
},
|
||||
error: function() {
|
||||
console.log('error');
|
||||
},
|
||||
success: function(response) {
|
||||
if (response.length == 0) {
|
||||
$('#logModal tbody').append('<tr><td colspan="3" class="align-middle text-center text-muted">tidak ada data</td></tr>');
|
||||
}
|
||||
|
||||
$.each(response, function(index, value) {
|
||||
$('#logModal tbody').html('<tr><td class="text-center">' + (index + 1) + '</td><td>' + value.name + '</td><td class="text-center"><button class="btn btn-sm btn-primary" data-id="' + value.id + '" data-action="download"><i class="fa fa-download mr-1"></i>Unduh</button></td></tr>');
|
||||
});
|
||||
|
||||
download();
|
||||
}
|
||||
});
|
||||
});
|
||||
$('#logModal').modal({
|
||||
backdrop: 'static',
|
||||
keyboard: false
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
const download = () => {
|
||||
$('button[data-action=download]').unbind('click');
|
||||
$('button[data-action=download]').on('click', function() {
|
||||
let id = $(this).attr('data-id');
|
||||
let url = '{{ route('admin sql learning log detail', ':id') }}';
|
||||
url = url.replace(":id", id);
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: url,
|
||||
error: function() {
|
||||
console.log('error');
|
||||
},
|
||||
success: function(response) {
|
||||
if (typeof response != 'undefined' && response.length != 0) {
|
||||
let filename = response[0].user.name.replaceAll(" ", "_") + '.txt';
|
||||
let text = '';
|
||||
$.each(response, function(index, value) {
|
||||
if (value.input.length != 0) {
|
||||
$.each(value.input, function(indexs, values) {
|
||||
text += values.syntax + '\n';
|
||||
});
|
||||
}
|
||||
});
|
||||
downloadFile(filename, text);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const downloadFile = (filename, text) => {
|
||||
var element = document.createElement('a');
|
||||
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
|
||||
element.setAttribute('download', filename);
|
||||
element.style.display = 'none';
|
||||
document.body.appendChild(element);
|
||||
element.click();
|
||||
document.body.removeChild(element);
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
@section('content')
|
||||
<div class="row" id="content">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Modul Pembelajaran SQL</h3>
|
||||
<div class="card-tools">
|
||||
<button class="btn btn-tool" data-action="reload">
|
||||
<i class="fa fa-sync"></i>
|
||||
Refresh
|
||||
</button>
|
||||
<button class="btn btn-tool" data-action="create">
|
||||
<i class="fa fa-plus"></i>
|
||||
Add
|
||||
</button>
|
||||
<button class="btn btn-tool" data-action="log">
|
||||
<i class="fa fa-sitemap"></i>
|
||||
Log
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<table class="table table-bordered table-hover">
|
||||
<thead>
|
||||
<tr class="text-center">
|
||||
<th>NO</th>
|
||||
<th>Name</th>
|
||||
<th>Sintak Tes</th>
|
||||
<th>Dokumen Penuntun</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form action="javascript:void(0)" enctype="multipart/form-data">
|
||||
<div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="formModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="formModalLabel"></h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mb-4 d-none" id="error-message"></div>
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<div class="form-group">
|
||||
<label for="name">Nama Modul <code>*</code></label>
|
||||
<input type="text" class="form-control" name="name" id="name" autocomplete="off">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="syntax">Sintak Tes <code>*</code></label>
|
||||
<textarea name="syntax" id="syntax" class="d-none"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="file">Dokumen Pendukung <code>*</code></label>
|
||||
<div class="input-group">
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" name="file" id="file" accept="application/pdf" />
|
||||
<label class="custom-file-label" for="file">Choose file</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-7" style="background-color: Black;">
|
||||
<label for="template" style="color:White;">Template</label>
|
||||
<table class="table table-bordered table-hover" style="color: White;font-family: 'Courier Prime';font-size:10px;">
|
||||
<tr style="color:White;">
|
||||
<th>Name</th>
|
||||
<th>Syntax</th>
|
||||
</tr>
|
||||
<tr style="color:White;">
|
||||
<td>Start a transaction</td>
|
||||
<td>BEGIN;</td>
|
||||
</tr>
|
||||
<tr style="color:White;">
|
||||
<td>Plan the tests and Run the tests</td>
|
||||
<td>SELECT tap.plan(1);</td>
|
||||
</tr>
|
||||
<tr style="color:White;">
|
||||
<td>Untuk mengidentifikasi database</td>
|
||||
<td>SELECT has_schema('nama_database', 'deskripsi');</td>
|
||||
</tr>
|
||||
<tr style="color:White;">
|
||||
<td>Untuk mengidentifikasi tabel</td>
|
||||
<td>SELECT has_table('nama_database', 'nama_tabel', 'deskripsi');</td>
|
||||
</tr>
|
||||
<tr style="color:White;">
|
||||
<td>Untuk mengidentifikasi kolom tabel</td>
|
||||
<td>SELECT has_column('nama_database', 'nama_tabel','nama_column','deskripsi');</td>
|
||||
</tr>
|
||||
<tr style="color:White;">
|
||||
<td>Untuk mengidentifikasi primary key</td>
|
||||
<td>SELECT col_has_primary_key('nama_database', 'nama_tabel','nama_column','deskripsi');</td>
|
||||
</tr>
|
||||
<tr style="color:White;">
|
||||
<td>Untuk mengidentifikasi constraint FK</td>
|
||||
<td>SELECT has_constraint('nama_database','nama_tabel','nama_kolom','deskripsi');</td>
|
||||
</tr>
|
||||
<tr style="color:White;">
|
||||
<td>Untuk mengidentifikasi type tabel</td>
|
||||
<td>SELECT col_has_type('nama_database', 'nama_tabel', 'nama_column', 'type_data', 'deskripsi');</td>
|
||||
</tr>
|
||||
<tr style="color:White;">
|
||||
<td>Untuk mengidentifikasi null</td>
|
||||
<td>SELECT col_is_null('nama_database', 'nama_tabel', 'nama_kolom', 'deskripsi');</td>
|
||||
</tr>
|
||||
<tr style="color:White;">
|
||||
<td>Untuk mengidentifikasi not null</td>
|
||||
<td>SELECT col_not_null('nama_database', 'nama_tabel', 'nama_kolom', 'deskripsi');</td>
|
||||
</tr>
|
||||
<tr style="color:White;">
|
||||
<td>Untuk mengidentifikasi unique</td>
|
||||
<td>SELECT col_is_unique('nama_database','nama_tabel', 'nama_kolom','deskripsi');</td>
|
||||
</tr>
|
||||
<tr style="color:White;">
|
||||
<td>Untuk mengidentifikasi constraint default</td>
|
||||
<td>SELECT col_has_default('nama_database','nama_tabel', 'nama_kolom_default','deskripsi');</td>
|
||||
</tr>
|
||||
<tr style="color:White;">
|
||||
<td>Untuk mengidentifikasi isi dari default</td>
|
||||
<td>SELECT col_default_is('nama_database', 'nama_tabel', 'nama_kolom', 'nilai_default ex:’5’', 'deskripsi');</td>
|
||||
</tr>
|
||||
<tr style="color:White;">
|
||||
<td>Finish the tests.</td>
|
||||
<td>CALL tap.finish();</td>
|
||||
</tr>
|
||||
<tr style="color:White;">
|
||||
<td>clean up.</td>
|
||||
<td>ROLLBACK;</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="submit" class="btn btn-primary">Simpan</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="modal fade" id="fileModal" tabindex="-1" role="dialog" aria-labelledby="fileModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="fileModalLabel">Pratinjau Dokumen Penuntun</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body p-0">
|
||||
<embed src="" type="application/pdf" style="width: 100%; height: 84vh;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade" id="syntaxModal" tabindex="-1" role="dialog" aria-labelledby="syntaxModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="syntaxModalLabel">Pratinjau Sintaks Testing</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body p-0">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade" id="logModal" tabindex="-1" role="dialog" aria-labelledby="logModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="logModalLabel">Log Sintaks Testing</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body p-0">
|
||||
<table class="table table-bordered table-hover">
|
||||
<thead>
|
||||
<tr class="text-center">
|
||||
<th>NO</th>
|
||||
<th>Name</th>
|
||||
<th>Unduh Sintaks</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{-- <tr>
|
||||
<td>1</td>
|
||||
<td>Kuda</td>
|
||||
<td class="text-centere">
|
||||
<button class="btn btn-sm btn-primary" data-action="download"><i class="fa fa-eye mr-1"></i>Tinjau</button>
|
||||
</td>
|
||||
</tr> --}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
687
resources/views/admin/sql/practice.blade copy.php
Normal file
687
resources/views/admin/sql/practice.blade copy.php
Normal file
|
|
@ -0,0 +1,687 @@
|
|||
@extends('admin/admin')
|
||||
@section('css')
|
||||
<link rel="stylesheet" href="{{ asset('lte/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('lte/plugins/codemirror/lib/codemirror.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('lte/plugins/codemirror/theme/dracula.css') }}">
|
||||
@endsection
|
||||
@section('js')
|
||||
<script src="{{ asset('lte/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
|
||||
<script src="{{ asset('lte/plugins/codemirror/lib/codemirror.js') }}"></script>
|
||||
<script src="{{ asset('lte/plugins/codemirror/mode/sql/sql.js') }}"></script>
|
||||
<script src="https://cdn.ckeditor.com/ckeditor5/34.2.0/super-build/ckeditor.js"></script>
|
||||
<script>
|
||||
const formContent = $('form .modal-body').html();
|
||||
var cm = [],
|
||||
ck = [],
|
||||
no = 1;
|
||||
|
||||
$(document).ready(function() {
|
||||
loads();
|
||||
});
|
||||
|
||||
const loads = () => {
|
||||
const data = $('tbody').html();
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "{{ route('admin sql practice read') }}",
|
||||
beforeSend: function() {
|
||||
$('#content tbody').html('');
|
||||
},
|
||||
error: function() {
|
||||
console.log('error');
|
||||
},
|
||||
success: function(response) {
|
||||
if (response.length == 0) {
|
||||
$('#content tbody').append('<tr><td colspan="4" class="align-middle text-center text-muted">tidak ada data</td></tr>');
|
||||
}
|
||||
|
||||
$.each(response, function(index, value) {
|
||||
$('#content tbody').append('<tr><td class="align-middle text-center">' + (index + 1) + '</td><td class="align-middle">' + value.name + '</td><td class="align-middle text-center">' + value.question + '</td><td class="align-middle text-center"><div class="btn-group"><button class="btn btn-sm btn-success mr-1" data-action="update" data-id="' + value.id + '"><i class="fa fa-pen"></i></button></div><div class="btn-group"><button class="btn btn-sm btn-danger" data-action="delete" data-id="' + value.id + '"><i class="fa fa-trash"></i></button></div></td></tr>');
|
||||
});
|
||||
|
||||
reloads();
|
||||
creates();
|
||||
updates();
|
||||
deletes();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const reloads = () => {
|
||||
$('[data-action=reload]').unbind('click');
|
||||
$('[data-action=reload]').on('click', function() {
|
||||
loads();
|
||||
});
|
||||
}
|
||||
|
||||
const creates = () => {
|
||||
$('[data-action=create]').unbind('click');
|
||||
$('[data-action=create]').on('click', function() {
|
||||
$('#formModal').on('shown.bs.modal', function() {
|
||||
$('#forms .modal-body').html(formContent);
|
||||
|
||||
$('#formModalLabel').html('Tambah Modul Praktek');
|
||||
no = 1;
|
||||
cm = [];
|
||||
ck = [];
|
||||
$('#forms #question-tab').html('');
|
||||
$('#forms #question-tabContent').html('');
|
||||
formElement();
|
||||
formSubmit();
|
||||
});
|
||||
|
||||
$('#formModal').modal({
|
||||
backdrop: 'static',
|
||||
keyboard: false
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
const updates = () => {
|
||||
$('[data-action=update]').unbind('click');
|
||||
$('[data-action=update]').on('click', function() {
|
||||
let id = $(this).attr('data-id');
|
||||
let url = '{{ route('admin sql practice detail', ':id') }}';
|
||||
url = url.replace(":id", id);
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: url,
|
||||
beforeSend: function() {
|
||||
$('button[data-action]').attr('disabled', true);
|
||||
},
|
||||
complete: function() {
|
||||
$('button[data-action]').removeAttr('disabled');
|
||||
},
|
||||
error: function() {
|
||||
$('button[data-action]').removeAttr('disabled');
|
||||
|
||||
Swal.fire({
|
||||
title: 'Data Tidak Ditemukan',
|
||||
text: "data yang anda maksud tidak ada di database",
|
||||
type: 'error',
|
||||
confirmButtonText: 'Tutup',
|
||||
}).then(() => {
|
||||
loads();
|
||||
})
|
||||
},
|
||||
success: function(response) {
|
||||
$('#formModal').unbind('shown.bs.modal');
|
||||
$('#formModal').on('shown.bs.modal', function() {
|
||||
$('#forms .modal-body').html(formContent);
|
||||
$('#forms button[type=submit]').attr('data-id', id);
|
||||
$('#forms #question-tab').html('');
|
||||
$('#forms #question-tabContent').html('');
|
||||
|
||||
$.each(response, function(index, value) {
|
||||
if ($('#forms [name=' + index + ']').length) {
|
||||
switch ($('#forms [name=' + index + ']').prop("tagName")) {
|
||||
case 'TEXTAREA':
|
||||
$('#forms [name=' + index + ']').html(value)
|
||||
break;
|
||||
|
||||
case 'INPUT':
|
||||
if ($('#forms [name=' + index + ']').prop("type") != 'file') {
|
||||
$('#forms [name=' + index + ']').val(value);
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (response.question) {
|
||||
no = 1;
|
||||
cm = [];
|
||||
ck = [];
|
||||
|
||||
$.each(response.question, function(index, value) {
|
||||
$('#forms button#question-add').attr('disabled', true);
|
||||
$('#forms #question-tab').append('<a class="nav-link" id="question-' + no + '-tab" data-toggle="pill" href="#question-' + no + '" role="tab" aria-controls="question-' + no + '" aria-selected="true">Soal ' + no + '</a>');
|
||||
$('#forms #question-tabContent').append('<div class="tab-pane fade" id="question-' + no + '" role="tabpanel" aria-labelledby="question-' + no + '-tab"><div class="form-group"><label for="question">Soal <code>*</code></label><textarea data-id="' + no + '" id="question-text-' + no + '">' + value.question + '</textarea></div><div class="form-group"><label for="question">Sintak Tes <code>*</code></label><textarea id="question-syntax-' + no + '">' + value.syntax + '</textarea></div></div>');
|
||||
|
||||
if (typeof cm[no] == 'undefined') {
|
||||
cm[no] = CodeMirror.fromTextArea($('#forms #question-tabContent textarea#question-syntax-' + no)[0], {
|
||||
lineNumbers: true,
|
||||
styleActiveLine: true,
|
||||
mode: "sql",
|
||||
theme: "dracula",
|
||||
});
|
||||
cm[no].refresh();
|
||||
}
|
||||
|
||||
if (typeof ck[no] == 'undefined') {
|
||||
CKEDITOR.ClassicEditor.create($('#forms #question-tabContent textarea#question-text-' + no)[0], {
|
||||
toolbar: {
|
||||
items: [
|
||||
'heading', '|',
|
||||
'alignment', '|',
|
||||
'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'highlight', '|',
|
||||
'bold', 'italic', 'strikethrough', 'underline', 'code', 'removeFormat', '|',
|
||||
'bulletedList', 'numberedList', 'todoList', '|',
|
||||
'outdent', 'indent', '|',
|
||||
'link', 'insertImage', 'blockQuote', 'insertTable', 'mediaEmbed', 'codeBlock', '|',
|
||||
'specialCharacters', 'horizontalLine', 'pageBreak', '|',
|
||||
'sourceEditing'
|
||||
],
|
||||
shouldNotGroupWhenFull: true
|
||||
},
|
||||
placeholder: '',
|
||||
list: {
|
||||
properties: {
|
||||
styles: true,
|
||||
startIndex: true,
|
||||
reversed: true
|
||||
}
|
||||
},
|
||||
heading: {
|
||||
options: [{
|
||||
model: 'paragraph',
|
||||
title: 'Paragraph',
|
||||
class: 'ck-heading_paragraph'
|
||||
},
|
||||
{
|
||||
model: 'heading1',
|
||||
view: 'h1',
|
||||
title: 'Heading 1',
|
||||
class: 'ck-heading_heading1'
|
||||
},
|
||||
{
|
||||
model: 'heading2',
|
||||
view: 'h2',
|
||||
title: 'Heading 2',
|
||||
class: 'ck-heading_heading2'
|
||||
},
|
||||
{
|
||||
model: 'heading3',
|
||||
view: 'h3',
|
||||
title: 'Heading 3',
|
||||
class: 'ck-heading_heading3'
|
||||
},
|
||||
{
|
||||
model: 'heading4',
|
||||
view: 'h4',
|
||||
title: 'Heading 4',
|
||||
class: 'ck-heading_heading4'
|
||||
},
|
||||
{
|
||||
model: 'heading5',
|
||||
view: 'h5',
|
||||
title: 'Heading 5',
|
||||
class: 'ck-heading_heading5'
|
||||
},
|
||||
{
|
||||
model: 'heading6',
|
||||
view: 'h6',
|
||||
title: 'Heading 6',
|
||||
class: 'ck-heading_heading6'
|
||||
}
|
||||
]
|
||||
},
|
||||
fontFamily: {
|
||||
options: [
|
||||
'default',
|
||||
'Arial, Helvetica, sans-serif',
|
||||
'Courier New, Courier, monospace',
|
||||
'Georgia, serif',
|
||||
'Lucida Sans Unicode, Lucida Grande, sans-serif',
|
||||
'Tahoma, Geneva, sans-serif',
|
||||
'Times New Roman, Times, serif',
|
||||
'Trebuchet MS, Helvetica, sans-serif',
|
||||
'Verdana, Geneva, sans-serif'
|
||||
],
|
||||
supportAllValues: true
|
||||
},
|
||||
fontSize: {
|
||||
options: [10, 12, 14, 'default', 18, 20, 22],
|
||||
supportAllValues: true
|
||||
},
|
||||
htmlSupport: {
|
||||
allow: [{
|
||||
name: /.*/,
|
||||
attributes: true,
|
||||
classes: true,
|
||||
styles: true
|
||||
}]
|
||||
},
|
||||
htmlEmbed: {
|
||||
showPreviews: true
|
||||
},
|
||||
link: {
|
||||
decorators: {
|
||||
addTargetToExternalLinks: true,
|
||||
defaultProtocol: 'https://',
|
||||
toggleDownloadable: {
|
||||
mode: 'manual',
|
||||
label: 'Downloadable',
|
||||
attributes: {
|
||||
download: 'file'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
removePlugins: [
|
||||
'CKBox',
|
||||
'CKFinder',
|
||||
'EasyImage',
|
||||
'RealTimeCollaborativeComments',
|
||||
'RealTimeCollaborativeTrackChanges',
|
||||
'RealTimeCollaborativeRevisionHistory',
|
||||
'PresenceList',
|
||||
'Comments',
|
||||
'TrackChanges',
|
||||
'TrackChangesData',
|
||||
'RevisionHistory',
|
||||
'Pagination',
|
||||
'WProofreader',
|
||||
'MathType'
|
||||
]
|
||||
}).then(e => {
|
||||
ck[$(e.sourceElement).attr('id').replace('question-text-', '')] = e;
|
||||
})
|
||||
}
|
||||
|
||||
no++;
|
||||
})
|
||||
}
|
||||
|
||||
$('#formModalLabel').html('Ubah Modul Praktek');
|
||||
formElement();
|
||||
formSubmit();
|
||||
});
|
||||
|
||||
$('#formModal').modal({
|
||||
backdrop: 'static',
|
||||
keyboard: false
|
||||
})
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const deletes = () => {
|
||||
$('[data-action=delete]').unbind('click');
|
||||
$('[data-action=delete]').on('click', function() {
|
||||
let id = $(this).attr('data-id');
|
||||
let url = '{{ route('admin sql practice delete', ':id') }}';
|
||||
url = url.replace(':id', id);
|
||||
|
||||
Swal.fire({
|
||||
title: 'Hapus Data',
|
||||
text: "data yang telah dihapus tidak dapat dikembalikan, harap pastikan bahwa anda benar-benar yakin!",
|
||||
type: 'warning',
|
||||
confirmButtonText: 'Saya Yakin!',
|
||||
cancelButtonText: 'Batal',
|
||||
showCancelButton: true,
|
||||
showLoaderOnConfirm: true,
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
backdrop: true,
|
||||
preConfirm: () => {
|
||||
return fetch(url)
|
||||
.then(response => {
|
||||
return response;
|
||||
})
|
||||
},
|
||||
}).then((result) => {
|
||||
if (typeof result.dismiss == 'undefined') {
|
||||
if (result.value.ok) {
|
||||
Swal.fire({
|
||||
title: 'Hapus Data',
|
||||
text: "data berhasil dihapus",
|
||||
type: 'success',
|
||||
confirmButtonText: 'Mantap!',
|
||||
}).then(() => {
|
||||
loads();
|
||||
})
|
||||
} else {
|
||||
Swal.fire({
|
||||
title: 'Hapus Data',
|
||||
text: "data gagal dihapus",
|
||||
type: 'error',
|
||||
confirmButtonText: 'Tutup',
|
||||
}).then(() => {
|
||||
loads();
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
const formElement = () => {
|
||||
$('#forms button#question-add').unbind('click');
|
||||
$('#forms button#question-add').on('click', function() {
|
||||
$('#forms button#question-add').attr('disabled', true);
|
||||
$('#forms #question-tab').append('<a class="nav-link" id="question-' + no + '-tab" data-toggle="pill" href="#question-' + no + '" role="tab" aria-controls="question-' + no + '" aria-selected="true">Soal ' + no + '</a>');
|
||||
$('#forms #question-tabContent').append('<div class="tab-pane fade" id="question-' + no + '" role="tabpanel" aria-labelledby="question-' + no + '-tab"><div class="form-group"><label for="question">Soal <code>*</code></label><textarea id="question-text-' + no + '"></textarea></div><div class="form-group"><label for="question">Sintak Tes <code>*</code></label><textarea id="question-syntax-' + no + '"></textarea></div></div>');
|
||||
|
||||
if (typeof cm[no] == 'undefined') {
|
||||
cm[no] = CodeMirror.fromTextArea($('#forms #question-tabContent textarea#question-syntax-' + no)[0], {
|
||||
lineNumbers: true,
|
||||
styleActiveLine: true,
|
||||
mode: "sql",
|
||||
theme: "dracula",
|
||||
});
|
||||
}
|
||||
|
||||
if (typeof ck[no] == 'undefined') {
|
||||
CKEDITOR.ClassicEditor.create($('#forms #question-tabContent textarea#question-text-' + no)[0], {
|
||||
toolbar: {
|
||||
items: [
|
||||
'heading', '|',
|
||||
'alignment', '|',
|
||||
'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'highlight', '|',
|
||||
'bold', 'italic', 'strikethrough', 'underline', 'code', 'removeFormat', '|',
|
||||
'bulletedList', 'numberedList', 'todoList', '|',
|
||||
'outdent', 'indent', '|',
|
||||
'link', 'insertImage', 'blockQuote', 'insertTable', 'mediaEmbed', 'codeBlock', '|',
|
||||
'specialCharacters', 'horizontalLine', 'pageBreak', '|',
|
||||
'sourceEditing'
|
||||
],
|
||||
shouldNotGroupWhenFull: true
|
||||
},
|
||||
placeholder: '',
|
||||
list: {
|
||||
properties: {
|
||||
styles: true,
|
||||
startIndex: true,
|
||||
reversed: true
|
||||
}
|
||||
},
|
||||
heading: {
|
||||
options: [{
|
||||
model: 'paragraph',
|
||||
title: 'Paragraph',
|
||||
class: 'ck-heading_paragraph'
|
||||
},
|
||||
{
|
||||
model: 'heading1',
|
||||
view: 'h1',
|
||||
title: 'Heading 1',
|
||||
class: 'ck-heading_heading1'
|
||||
},
|
||||
{
|
||||
model: 'heading2',
|
||||
view: 'h2',
|
||||
title: 'Heading 2',
|
||||
class: 'ck-heading_heading2'
|
||||
},
|
||||
{
|
||||
model: 'heading3',
|
||||
view: 'h3',
|
||||
title: 'Heading 3',
|
||||
class: 'ck-heading_heading3'
|
||||
},
|
||||
{
|
||||
model: 'heading4',
|
||||
view: 'h4',
|
||||
title: 'Heading 4',
|
||||
class: 'ck-heading_heading4'
|
||||
},
|
||||
{
|
||||
model: 'heading5',
|
||||
view: 'h5',
|
||||
title: 'Heading 5',
|
||||
class: 'ck-heading_heading5'
|
||||
},
|
||||
{
|
||||
model: 'heading6',
|
||||
view: 'h6',
|
||||
title: 'Heading 6',
|
||||
class: 'ck-heading_heading6'
|
||||
}
|
||||
]
|
||||
},
|
||||
fontFamily: {
|
||||
options: [
|
||||
'default',
|
||||
'Arial, Helvetica, sans-serif',
|
||||
'Courier New, Courier, monospace',
|
||||
'Georgia, serif',
|
||||
'Lucida Sans Unicode, Lucida Grande, sans-serif',
|
||||
'Tahoma, Geneva, sans-serif',
|
||||
'Times New Roman, Times, serif',
|
||||
'Trebuchet MS, Helvetica, sans-serif',
|
||||
'Verdana, Geneva, sans-serif'
|
||||
],
|
||||
supportAllValues: true
|
||||
},
|
||||
fontSize: {
|
||||
options: [10, 12, 14, 'default', 18, 20, 22],
|
||||
supportAllValues: true
|
||||
},
|
||||
htmlSupport: {
|
||||
allow: [{
|
||||
name: /.*/,
|
||||
attributes: true,
|
||||
classes: true,
|
||||
styles: true
|
||||
}]
|
||||
},
|
||||
htmlEmbed: {
|
||||
showPreviews: true
|
||||
},
|
||||
link: {
|
||||
decorators: {
|
||||
addTargetToExternalLinks: true,
|
||||
defaultProtocol: 'https://',
|
||||
toggleDownloadable: {
|
||||
mode: 'manual',
|
||||
label: 'Downloadable',
|
||||
attributes: {
|
||||
download: 'file'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
removePlugins: [
|
||||
'CKBox',
|
||||
'CKFinder',
|
||||
'EasyImage',
|
||||
'RealTimeCollaborativeComments',
|
||||
'RealTimeCollaborativeTrackChanges',
|
||||
'RealTimeCollaborativeRevisionHistory',
|
||||
'PresenceList',
|
||||
'Comments',
|
||||
'TrackChanges',
|
||||
'TrackChangesData',
|
||||
'RevisionHistory',
|
||||
'Pagination',
|
||||
'WProofreader',
|
||||
'MathType'
|
||||
]
|
||||
}).then(e => {
|
||||
ck[no] = e;
|
||||
}).then(() => {
|
||||
$('#forms button#question-add').removeAttr('disabled');
|
||||
$('#forms div.tab-pane').removeClass('active show');
|
||||
$('#forms a#question-' + no + '-tab').trigger('click');
|
||||
cm[no].refresh();
|
||||
no++;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$('#forms input,#forms select').unbind('click');
|
||||
$('#forms input,#forms select').on('click', function() {
|
||||
$(this).removeClass('is-invalid');
|
||||
});
|
||||
}
|
||||
|
||||
const formSubmit = () => {
|
||||
let url;
|
||||
switch ($('#formModalLabel').html()) {
|
||||
case 'Tambah Modul Praktek':
|
||||
url = '{{ route('admin sql practice create') }}'
|
||||
break;
|
||||
case 'Ubah Modul Praktek':
|
||||
let id = $('form button[type=submit]').attr('data-id');
|
||||
url = '{{ route('admin sql practice update', ':id') }}'
|
||||
url = url.replace(':id', id);
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
$('#forms').unbind('submit');
|
||||
$('#forms').on('submit', function() {
|
||||
let formData = new FormData($('#forms')[0]);
|
||||
for (let i = 1; i < no; i++) {
|
||||
console.log(i);
|
||||
formData.append('question[]', JSON.stringify({
|
||||
'question': ck[i].getData(),
|
||||
'syntax': cm[i].getValue()
|
||||
}));
|
||||
}
|
||||
if (url) {
|
||||
let elm = $(this);
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: url,
|
||||
data: formData,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
||||
},
|
||||
beforeSend: function() {
|
||||
elm.find('button[type=submit]').html('Tunggu sebentar');
|
||||
elm.find('button').attr('disabled', true);
|
||||
elm.find(':input').attr('disabled', true)
|
||||
},
|
||||
complete: function() {
|
||||
elm.find('button[type=submit]').html('Simpan');
|
||||
elm.find('button').removeAttr('disabled');
|
||||
elm.find(':input').removeAttr('disabled')
|
||||
},
|
||||
error: function() {
|
||||
elm.find('button[type=submit]').html('Simpan');
|
||||
elm.find('button').removeAttr('disabled');
|
||||
elm.find(':input').removeAttr('disabled')
|
||||
},
|
||||
success: function(response) {
|
||||
console.log(response);
|
||||
if (response != 'ok') {
|
||||
let html = '';
|
||||
$.each(response, function(index, value) {
|
||||
html += '<small class="badge badge-danger d-block text-left my-1"><i class="fa fa-times px-1 mr-1"></i> <span class="border-left px-2">' + value + '</span></small>';
|
||||
$('input[name=' + index + ']').addClass('is-invalid');
|
||||
});
|
||||
$('form #error-message').html(html)
|
||||
$('form #error-message').addClass('d-block');
|
||||
$('form #error-message').removeClass('d-none');
|
||||
} else {
|
||||
$('#formModal').modal('hide');
|
||||
Swal.fire({
|
||||
title: $('#formModalLabel').html().replace(' Modul Praktek', '') + ' Data Berhasil',
|
||||
text: "data berhasil di" + $('#formModalLabel').html().replace(' Modul Praktek', '').toLowerCase() + " kedalam database",
|
||||
type: 'success',
|
||||
confirmButtonText: 'Mantap!'
|
||||
}).then(() => {
|
||||
loads();
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
@section('content')
|
||||
<div class="row" id="content">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Modul Praktek SQL</h3>
|
||||
<div class="card-tools">
|
||||
<button class="btn btn-tool" data-action="reload">
|
||||
<i class="fa fa-sync"></i>
|
||||
Refresh
|
||||
</button>
|
||||
<button class="btn btn-tool" data-action="create">
|
||||
<i class="fa fa-plus"></i>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<table class="table table-bordered table-hover">
|
||||
<thead>
|
||||
<tr class="text-center">
|
||||
<th>NO</th>
|
||||
<th>Name</th>
|
||||
<th>Jumlah Soal</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form action="javascript:void(0)" enctype="multipart/form-data" id="forms">
|
||||
<div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="formModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="formModalLabel"></h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mb-4 d-none" id="error-message"></div>
|
||||
<div class="form-group">
|
||||
<label for="name">Nama Modul <code>*</code></label>
|
||||
<input type="text" class="form-control" name="name" id="name" autocomplete="off">
|
||||
</div>
|
||||
<div class="card card-primary card-outline">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Data Soal</h3>
|
||||
<div class="card-tools">
|
||||
<button type="button" id="question-add" class="btn btn-tool"><i class="fas fa-plus"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-2 col-md-3 col-lg-2">
|
||||
<div class="nav flex-column nav-tabs h-100" id="question-tab" role="tablist" aria-orientation="vertical">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-2 col-md-9 col-lg-10">
|
||||
<div class="tab-content" id="question-tabContent">
|
||||
{{-- <div class="form-group">
|
||||
<label for="question">Soal '+i+' <code>*</code></label>
|
||||
<textarea name="question-syntax['+i+']" id="question-syntax['+i+']"></textarea>
|
||||
</div> --}}
|
||||
{{-- <div class="tab-pane text-left fade show active" id="vert-tabs-home" role="tabpanel" aria-labelledby="vert-tabs-home-tab">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada lacus ullamcorper dui molestie, sit amet congue quam finibus. Etiam ultricies nunc non magna feugiat commodo. Etiam odio magna, mollis auctor felis vitae, ullamcorper ornare ligula. Proin pellentesque tincidunt nisi, vitae ullamcorper felis aliquam id. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin id orci eu lectus blandit suscipit. Phasellus porta, ante et varius ornare, sem enim sollicitudin eros, at commodo leo est vitae lacus. Etiam ut porta sem. Proin porttitor porta nisl, id tempor risus rhoncus quis. In in quam a nibh cursus pulvinar non consequat neque. Mauris lacus elit, condimentum ac condimentum at, semper vitae lectus. Cras lacinia erat eget sapien porta consectetur.
|
||||
</div>
|
||||
<div class="tab-pane fade" id="vert-tabs-profile" role="tabpanel" aria-labelledby="vert-tabs-profile-tab">
|
||||
Mauris tincidunt mi at erat gravida, eget tristique urna bibendum. Mauris pharetra purus ut ligula tempor, et vulputate metus facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas sollicitudin, nisi a luctus interdum, nisl ligula placerat mi, quis posuere purus ligula eu lectus. Donec nunc tellus, elementum sit amet ultricies at, posuere nec nunc. Nunc euismod pellentesque diam.
|
||||
</div> --}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="submit" class="btn btn-primary">Simpan</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@endsection
|
||||
845
resources/views/admin/sql/practice.blade.php
Normal file
845
resources/views/admin/sql/practice.blade.php
Normal file
|
|
@ -0,0 +1,845 @@
|
|||
@extends('admin/admin')
|
||||
@section('css')
|
||||
<link rel="stylesheet" href="{{ asset('lte/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('lte/plugins/codemirror/lib/codemirror.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('lte/plugins/codemirror/theme/dracula.css') }}">
|
||||
<link href='https://fonts.googleapis.com/css?family=Courier Prime' rel='stylesheet'>
|
||||
@endsection
|
||||
@section('js')
|
||||
<script src="{{ asset('lte/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
|
||||
<script src="{{ asset('lte/plugins/codemirror/lib/codemirror.js') }}"></script>
|
||||
<script src="{{ asset('lte/plugins/codemirror/mode/sql/sql.js') }}"></script>
|
||||
<script src="https://cdn.ckeditor.com/ckeditor5/34.2.0/super-build/ckeditor.js"></script>
|
||||
<script>
|
||||
const formContent = $('form .modal-body').html();
|
||||
var cm = [],
|
||||
ck = [],
|
||||
no = 0;
|
||||
|
||||
$(document).ready(function() {
|
||||
loads();
|
||||
});
|
||||
|
||||
const loads = () => {
|
||||
const data = $('tbody').html();
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "{{ route('admin sql practice read') }}",
|
||||
beforeSend: function() {
|
||||
$('#content tbody').html('');
|
||||
},
|
||||
error: function() {
|
||||
console.log('error');
|
||||
},
|
||||
success: function(response) {
|
||||
if (response.length == 0) {
|
||||
$('#content tbody').append('<tr><td colspan="4" class="align-middle text-center text-muted">tidak ada data</td></tr>');
|
||||
}
|
||||
|
||||
$.each(response, function(index, value) {
|
||||
$('#content tbody').append('<tr><td class="align-middle text-center">' + (index + 1) + '</td><td class="align-middle">' + value.name + '</td><td class="align-middle text-center">' + value.question + '</td><td class="align-middle text-center"><div class="btn-group"><button class="btn btn-sm btn-success mr-1" data-action="update" data-id="' + value.id + '"><i class="fa fa-pen"></i></button></div><div class="btn-group"><button class="btn btn-sm btn-danger" data-action="delete" data-id="' + value.id + '"><i class="fa fa-trash"></i></button></div></td></tr>');
|
||||
});
|
||||
|
||||
reloads();
|
||||
creates();
|
||||
updates();
|
||||
deletes();
|
||||
|
||||
logView();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const reloads = () => {
|
||||
$('[data-action=reload]').unbind('click');
|
||||
$('[data-action=reload]').on('click', function() {
|
||||
loads();
|
||||
});
|
||||
}
|
||||
|
||||
const creates = () => {
|
||||
$('[data-action=create]').unbind('click');
|
||||
$('[data-action=create]').on('click', function() {
|
||||
$('#formModal').on('shown.bs.modal', function() {
|
||||
$('#forms .modal-body').html(formContent);
|
||||
no = 0;
|
||||
cm = [];
|
||||
ck = [];
|
||||
$('#forms #question-tab').html('');
|
||||
$('#forms #question-tabContent').html('');
|
||||
|
||||
$('#formModalLabel').html('Tambah Modul Praktek');
|
||||
formElement();
|
||||
formSubmit();
|
||||
});
|
||||
|
||||
$('#formModal').modal({
|
||||
backdrop: 'static',
|
||||
keyboard: false
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
const updates = () => {
|
||||
$('[data-action=update]').unbind('click');
|
||||
$('[data-action=update]').on('click', function() {
|
||||
let id = $(this).attr('data-id');
|
||||
let url = '{{ route('admin sql practice detail', ':id') }}';
|
||||
url = url.replace(":id", id);
|
||||
no = 0;
|
||||
cm = [];
|
||||
ck = [];
|
||||
$('#forms #question-tab').html('');
|
||||
$('#forms #question-tabContent').html('');
|
||||
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: url,
|
||||
beforeSend: function() {
|
||||
$('button[data-action]').attr('disabled', true);
|
||||
},
|
||||
complete: function() {
|
||||
$('button[data-action]').removeAttr('disabled');
|
||||
},
|
||||
error: function() {
|
||||
$('button[data-action]').removeAttr('disabled');
|
||||
|
||||
Swal.fire({
|
||||
title: 'Data Tidak Ditemukan',
|
||||
text: "data yang anda maksud tidak ada di database",
|
||||
type: 'error',
|
||||
confirmButtonText: 'Tutup',
|
||||
}).then(() => {
|
||||
loads();
|
||||
})
|
||||
},
|
||||
success: function(response) {
|
||||
$('#formModal').unbind('shown.bs.modal');
|
||||
$('#formModal').on('shown.bs.modal', function() {
|
||||
$('#forms .modal-body').html(formContent);
|
||||
$('#forms button[type=submit]').attr('data-id', id);
|
||||
|
||||
$.each(response, function(index, value) {
|
||||
if ($('#forms [name=' + index + ']').length) {
|
||||
switch ($('#forms [name=' + index + ']').prop("tagName")) {
|
||||
case 'TEXTAREA':
|
||||
$('#forms [name=' + index + ']').html(value)
|
||||
break;
|
||||
|
||||
case 'INPUT':
|
||||
if ($('#forms [name=' + index + ']').prop("type") != 'file') {
|
||||
$('#forms [name=' + index + ']').val(value);
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#formModalLabel').html('Ubah Modul Praktek');
|
||||
formElement(response.question);
|
||||
formSubmit();
|
||||
});
|
||||
|
||||
$('#formModal').modal({
|
||||
backdrop: 'static',
|
||||
keyboard: false
|
||||
})
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const deletes = () => {
|
||||
$('[data-action=delete]').unbind('click');
|
||||
$('[data-action=delete]').on('click', function() {
|
||||
let id = $(this).attr('data-id');
|
||||
let url = '{{ route('admin sql practice delete', ':id') }}';
|
||||
url = url.replace(':id', id);
|
||||
|
||||
Swal.fire({
|
||||
title: 'Hapus Data',
|
||||
text: "data yang telah dihapus tidak dapat dikembalikan, harap pastikan bahwa anda benar-benar yakin!",
|
||||
type: 'warning',
|
||||
confirmButtonText: 'Saya Yakin!',
|
||||
cancelButtonText: 'Batal',
|
||||
showCancelButton: true,
|
||||
showLoaderOnConfirm: true,
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
backdrop: true,
|
||||
preConfirm: () => {
|
||||
return fetch(url)
|
||||
.then(response => {
|
||||
return response;
|
||||
})
|
||||
},
|
||||
}).then((result) => {
|
||||
if (typeof result.dismiss == 'undefined') {
|
||||
if (result.value.ok) {
|
||||
Swal.fire({
|
||||
title: 'Hapus Data',
|
||||
text: "data berhasil dihapus",
|
||||
type: 'success',
|
||||
confirmButtonText: 'Mantap!',
|
||||
}).then(() => {
|
||||
loads();
|
||||
})
|
||||
} else {
|
||||
Swal.fire({
|
||||
title: 'Hapus Data',
|
||||
text: "data gagal dihapus",
|
||||
type: 'error',
|
||||
confirmButtonText: 'Tutup',
|
||||
}).then(() => {
|
||||
loads();
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
const formElement = (data) => {
|
||||
let num = 1;
|
||||
if (typeof data != 'undefined') {
|
||||
$.each(data, function(index, value) {
|
||||
$('#forms button#question-add').attr('disabled', true);
|
||||
$('#forms #question-tab').append('<a class="nav-link" id="question-' + value.id + '-tab" data-toggle="pill" href="#question-' + value.id + '" role="tab" aria-controls="question-' + value.id + '" aria-selected="true">Soal ' + num + '</a>');
|
||||
$('#forms #question-tabContent').append('<div class="tab-pane fade" id="question-' + value.id + '" role="tabpanel" aria-labelledby="question-' + value.id + '-tab"><div class="form-group"><label for="question">Soal <code>*</code></label><textarea id="question-text-' + value.id + '">' + value.question + '</textarea></div><div class="form-group"><label for="question">Sintak Tes <code>*</code></label><textarea id="question-syntax-' + value.id + '">' + value.syntax + '</textarea></div></div>');
|
||||
|
||||
if (typeof cm[value.id] == 'undefined') {
|
||||
cm[value.id] = CodeMirror.fromTextArea($('#forms #question-tabContent textarea#question-syntax-' + value.id)[0], {
|
||||
lineNumbers: true,
|
||||
styleActiveLine: true,
|
||||
mode: "sql",
|
||||
theme: "dracula",
|
||||
});
|
||||
}
|
||||
|
||||
if (typeof ck[value.id] == 'undefined') {
|
||||
CKEDITOR.ClassicEditor.create($('#forms #question-tabContent textarea#question-text-' + value.id)[0], {
|
||||
toolbar: {
|
||||
items: [
|
||||
'heading', '|',
|
||||
'alignment', '|',
|
||||
'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'highlight', '|',
|
||||
'bold', 'italic', 'strikethrough', 'underline', 'code', 'removeFormat', '|',
|
||||
'bulletedList', 'numberedList', 'todoList', '|',
|
||||
'outdent', 'indent', '|',
|
||||
'link', 'insertImage', 'blockQuote', 'insertTable', 'mediaEmbed', 'codeBlock', '|',
|
||||
'specialCharacters', 'horizontalLine', 'pageBreak', '|',
|
||||
'sourceEditing'
|
||||
],
|
||||
shouldNotGroupWhenFull: true
|
||||
},
|
||||
placeholder: '',
|
||||
list: {
|
||||
properties: {
|
||||
styles: true,
|
||||
startIndex: true,
|
||||
reversed: true
|
||||
}
|
||||
},
|
||||
heading: {
|
||||
options: [{
|
||||
model: 'paragraph',
|
||||
title: 'Paragraph',
|
||||
class: 'ck-heading_paragraph'
|
||||
},
|
||||
{
|
||||
model: 'heading1',
|
||||
view: 'h1',
|
||||
title: 'Heading 1',
|
||||
class: 'ck-heading_heading1'
|
||||
},
|
||||
{
|
||||
model: 'heading2',
|
||||
view: 'h2',
|
||||
title: 'Heading 2',
|
||||
class: 'ck-heading_heading2'
|
||||
},
|
||||
{
|
||||
model: 'heading3',
|
||||
view: 'h3',
|
||||
title: 'Heading 3',
|
||||
class: 'ck-heading_heading3'
|
||||
},
|
||||
{
|
||||
model: 'heading4',
|
||||
view: 'h4',
|
||||
title: 'Heading 4',
|
||||
class: 'ck-heading_heading4'
|
||||
},
|
||||
{
|
||||
model: 'heading5',
|
||||
view: 'h5',
|
||||
title: 'Heading 5',
|
||||
class: 'ck-heading_heading5'
|
||||
},
|
||||
{
|
||||
model: 'heading6',
|
||||
view: 'h6',
|
||||
title: 'Heading 6',
|
||||
class: 'ck-heading_heading6'
|
||||
}
|
||||
]
|
||||
},
|
||||
fontFamily: {
|
||||
options: [
|
||||
'default',
|
||||
'Arial, Helvetica, sans-serif',
|
||||
'Courier New, Courier, monospace',
|
||||
'Georgia, serif',
|
||||
'Lucida Sans Unicode, Lucida Grande, sans-serif',
|
||||
'Tahoma, Geneva, sans-serif',
|
||||
'Times New Roman, Times, serif',
|
||||
'Trebuchet MS, Helvetica, sans-serif',
|
||||
'Verdana, Geneva, sans-serif'
|
||||
],
|
||||
supportAllValues: true
|
||||
},
|
||||
fontSize: {
|
||||
options: [10, 12, 14, 'default', 18, 20, 22],
|
||||
supportAllValues: true
|
||||
},
|
||||
htmlSupport: {
|
||||
allow: [{
|
||||
name: /.*/,
|
||||
attributes: true,
|
||||
classes: true,
|
||||
styles: true
|
||||
}]
|
||||
},
|
||||
htmlEmbed: {
|
||||
showPreviews: true
|
||||
},
|
||||
link: {
|
||||
decorators: {
|
||||
addTargetToExternalLinks: true,
|
||||
defaultProtocol: 'https://',
|
||||
toggleDownloadable: {
|
||||
mode: 'manual',
|
||||
label: 'Downloadable',
|
||||
attributes: {
|
||||
download: 'file'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
removePlugins: [
|
||||
'CKBox',
|
||||
'CKFinder',
|
||||
'EasyImage',
|
||||
'RealTimeCollaborativeComments',
|
||||
'RealTimeCollaborativeTrackChanges',
|
||||
'RealTimeCollaborativeRevisionHistory',
|
||||
'PresenceList',
|
||||
'Comments',
|
||||
'TrackChanges',
|
||||
'TrackChangesData',
|
||||
'RevisionHistory',
|
||||
'Pagination',
|
||||
'WProofreader',
|
||||
'MathType'
|
||||
]
|
||||
}).then(e => {
|
||||
let numbers = $(e.sourceElement).attr('id').replace('question-text-', '');
|
||||
ck[numbers] = e;
|
||||
$('#forms button#question-add').removeAttr('disabled');
|
||||
$('#forms div.tab-pane').removeClass('active show');
|
||||
$('#forms a#question-' + numbers + '-tab').trigger('click');
|
||||
cm[numbers].refresh();
|
||||
});
|
||||
}
|
||||
|
||||
no = value.id;
|
||||
num++;
|
||||
});
|
||||
}
|
||||
|
||||
no++;
|
||||
$('#forms button#question-add').unbind('click');
|
||||
$('#forms button#question-add').on('click', function() {
|
||||
$('#forms button#question-add').attr('disabled', true);
|
||||
$('#forms #question-tab').append('<a class="nav-link" id="question-' + no + '-tab" data-toggle="pill" href="#question-' + no + '" role="tab" aria-controls="question-' + no + '" aria-selected="true">Soal ' + num + '</a>');
|
||||
$('#forms #question-tabContent').append('<div class="tab-pane fade" id="question-' + no + '" role="tabpanel" aria-labelledby="question-' + no + '-tab"><div class="form-group"><label for="question">Soal <code>*</code></label><textarea id="question-text-' + no + '"></textarea></div><div class="form-group"><label for="question">Sintak Tes <code>*</code></label><textarea id="question-syntax-' + no + '"></textarea></div></div>');
|
||||
|
||||
if (typeof cm[no] == 'undefined') {
|
||||
cm[no] = CodeMirror.fromTextArea($('#forms #question-tabContent textarea#question-syntax-' + no)[0], {
|
||||
lineNumbers: true,
|
||||
styleActiveLine: true,
|
||||
mode: "sql",
|
||||
theme: "dracula",
|
||||
});
|
||||
}
|
||||
|
||||
if (typeof ck[no] == 'undefined') {
|
||||
CKEDITOR.ClassicEditor.create($('#forms #question-tabContent textarea#question-text-' + no)[0], {
|
||||
toolbar: {
|
||||
items: [
|
||||
'heading', '|',
|
||||
'alignment', '|',
|
||||
'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'highlight', '|',
|
||||
'bold', 'italic', 'strikethrough', 'underline', 'code', 'removeFormat', '|',
|
||||
'bulletedList', 'numberedList', 'todoList', '|',
|
||||
'outdent', 'indent', '|',
|
||||
'link', 'insertImage', 'blockQuote', 'insertTable', 'mediaEmbed', 'codeBlock', '|',
|
||||
'specialCharacters', 'horizontalLine', 'pageBreak', '|',
|
||||
'sourceEditing'
|
||||
],
|
||||
shouldNotGroupWhenFull: true
|
||||
},
|
||||
placeholder: '',
|
||||
list: {
|
||||
properties: {
|
||||
styles: true,
|
||||
startIndex: true,
|
||||
reversed: true
|
||||
}
|
||||
},
|
||||
heading: {
|
||||
options: [{
|
||||
model: 'paragraph',
|
||||
title: 'Paragraph',
|
||||
class: 'ck-heading_paragraph'
|
||||
},
|
||||
{
|
||||
model: 'heading1',
|
||||
view: 'h1',
|
||||
title: 'Heading 1',
|
||||
class: 'ck-heading_heading1'
|
||||
},
|
||||
{
|
||||
model: 'heading2',
|
||||
view: 'h2',
|
||||
title: 'Heading 2',
|
||||
class: 'ck-heading_heading2'
|
||||
},
|
||||
{
|
||||
model: 'heading3',
|
||||
view: 'h3',
|
||||
title: 'Heading 3',
|
||||
class: 'ck-heading_heading3'
|
||||
},
|
||||
{
|
||||
model: 'heading4',
|
||||
view: 'h4',
|
||||
title: 'Heading 4',
|
||||
class: 'ck-heading_heading4'
|
||||
},
|
||||
{
|
||||
model: 'heading5',
|
||||
view: 'h5',
|
||||
title: 'Heading 5',
|
||||
class: 'ck-heading_heading5'
|
||||
},
|
||||
{
|
||||
model: 'heading6',
|
||||
view: 'h6',
|
||||
title: 'Heading 6',
|
||||
class: 'ck-heading_heading6'
|
||||
}
|
||||
]
|
||||
},
|
||||
fontFamily: {
|
||||
options: [
|
||||
'default',
|
||||
'Arial, Helvetica, sans-serif',
|
||||
'Courier New, Courier, monospace',
|
||||
'Georgia, serif',
|
||||
'Lucida Sans Unicode, Lucida Grande, sans-serif',
|
||||
'Tahoma, Geneva, sans-serif',
|
||||
'Times New Roman, Times, serif',
|
||||
'Trebuchet MS, Helvetica, sans-serif',
|
||||
'Verdana, Geneva, sans-serif'
|
||||
],
|
||||
supportAllValues: true
|
||||
},
|
||||
fontSize: {
|
||||
options: [10, 12, 14, 'default', 18, 20, 22],
|
||||
supportAllValues: true
|
||||
},
|
||||
htmlSupport: {
|
||||
allow: [{
|
||||
name: /.*/,
|
||||
attributes: true,
|
||||
classes: true,
|
||||
styles: true
|
||||
}]
|
||||
},
|
||||
htmlEmbed: {
|
||||
showPreviews: true
|
||||
},
|
||||
link: {
|
||||
decorators: {
|
||||
addTargetToExternalLinks: true,
|
||||
defaultProtocol: 'https://',
|
||||
toggleDownloadable: {
|
||||
mode: 'manual',
|
||||
label: 'Downloadable',
|
||||
attributes: {
|
||||
download: 'file'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
removePlugins: [
|
||||
'CKBox',
|
||||
'CKFinder',
|
||||
'EasyImage',
|
||||
'RealTimeCollaborativeComments',
|
||||
'RealTimeCollaborativeTrackChanges',
|
||||
'RealTimeCollaborativeRevisionHistory',
|
||||
'PresenceList',
|
||||
'Comments',
|
||||
'TrackChanges',
|
||||
'TrackChangesData',
|
||||
'RevisionHistory',
|
||||
'Pagination',
|
||||
'WProofreader',
|
||||
'MathType'
|
||||
]
|
||||
}).then(e => {
|
||||
let numbers = $(e.sourceElement).attr('id').replace('question-text-', '');
|
||||
ck[numbers] = e;
|
||||
$('#forms div.tab-pane').removeClass('active show');
|
||||
$('#forms a#question-' + numbers + '-tab').trigger('click');
|
||||
cm[numbers].refresh();
|
||||
});
|
||||
}
|
||||
|
||||
$('#forms button#question-add').removeAttr('disabled');
|
||||
no++;
|
||||
num++;
|
||||
});
|
||||
|
||||
$('#forms input,#forms select').unbind('click');
|
||||
$('#forms input,#forms select').on('click', function() {
|
||||
$(this).removeClass('is-invalid');
|
||||
});
|
||||
}
|
||||
|
||||
const formSubmit = () => {
|
||||
let url;
|
||||
switch ($('#formModalLabel').html()) {
|
||||
case 'Tambah Modul Praktek':
|
||||
url = '{{ route('admin sql practice create') }}'
|
||||
|
||||
break;
|
||||
case 'Ubah Modul Praktek':
|
||||
let id = $('form button[type=submit]').attr('data-id');
|
||||
url = '{{ route('admin sql practice update', ':id') }}'
|
||||
url = url.replace(':id', id);
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
$('#forms').unbind('submit');
|
||||
$('#forms').on('submit', function() {
|
||||
let elm = $(this);
|
||||
|
||||
let formData = new FormData(elm[0]);
|
||||
$.each(ck, function(index, value) {
|
||||
if (cm[index]) {
|
||||
formData.append('question[' + index + ']', JSON.stringify({
|
||||
'question': ck[index].getData(),
|
||||
'syntax': cm[index].getValue()
|
||||
}));
|
||||
}
|
||||
});
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: url,
|
||||
data: formData,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
||||
},
|
||||
beforeSend: function() {
|
||||
elm.find('button[type=submit]').html('Tunggu sebentar');
|
||||
elm.find('button').attr('disabled', true);
|
||||
elm.find(':input').attr('disabled', true)
|
||||
},
|
||||
complete: function() {
|
||||
elm.find('button[type=submit]').html('Simpan');
|
||||
elm.find('button').removeAttr('disabled');
|
||||
elm.find(':input').removeAttr('disabled')
|
||||
},
|
||||
error: function() {
|
||||
elm.find('button[type=submit]').html('Simpan');
|
||||
elm.find('button').removeAttr('disabled');
|
||||
elm.find(':input').removeAttr('disabled')
|
||||
},
|
||||
success: function(response) {
|
||||
if (response != 'ok') {
|
||||
let html = '';
|
||||
$.each(response, function(index, value) {
|
||||
html += '<small class="badge badge-danger d-block text-left my-1"><i class="fa fa-times px-1 mr-1"></i> <span class="border-left px-2">' + value + '</span></small>';
|
||||
$('input[name=' + index + ']').addClass('is-invalid');
|
||||
});
|
||||
$('form #error-message').html(html)
|
||||
$('form #error-message').addClass('d-block');
|
||||
$('form #error-message').removeClass('d-none');
|
||||
} else {
|
||||
$('#formModal').modal('hide');
|
||||
Swal.fire({
|
||||
title: $('#formModalLabel').html().replace(' Modul Praktek', '') + ' Data Berhasil',
|
||||
text: "data berhasil di" + $('#formModalLabel').html().replace(' Modul Praktek', '').toLowerCase() + " kedalam database",
|
||||
type: 'success',
|
||||
confirmButtonText: 'Mantap!'
|
||||
}).then(() => {
|
||||
loads();
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const logView = () => {
|
||||
$('button[data-action=log]').unbind('click');
|
||||
$('button[data-action=log]').on('click', function() {
|
||||
$('#logModal').unbind('shown.bs.modal');
|
||||
$('#logModal').on('shown.bs.modal', function() {
|
||||
$('#logModal tbody').html('');
|
||||
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "{{ route('admin sql practice log read') }}",
|
||||
beforeSend: function() {
|
||||
$('#logModal tbody').html('');
|
||||
},
|
||||
error: function() {
|
||||
console.log('error');
|
||||
},
|
||||
success: function(response) {
|
||||
if (response.length == 0) {
|
||||
$('#logModal tbody').append('<tr><td colspan="3" class="align-middle text-center text-muted">tidak ada data</td></tr>');
|
||||
}
|
||||
|
||||
$.each(response, function(index, value) {
|
||||
let html = '<tr><td class="text-center">' + (index + 1) + '</td><td>' + value.name + '</td><td class="text-center">';
|
||||
if (value.practice.length != 0) {
|
||||
$.each(value.practice, function(indexs, values) {
|
||||
html += '<div class="d-flex justify-content-between"><span>' + (values.name) + '</span><span>' + values.nilai.toFixed(0) + '</span></div>';
|
||||
});
|
||||
}
|
||||
html += '</td></tr>';
|
||||
$('#logModal tbody').html(html);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
$('#logModal').modal({
|
||||
backdrop: 'static',
|
||||
keyboard: false
|
||||
})
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
@section('content')
|
||||
<div class="row" id="content">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Modul Praktek SQL</h3>
|
||||
<div class="card-tools">
|
||||
<button class="btn btn-tool" data-action="reload">
|
||||
<i class="fa fa-sync"></i>
|
||||
Refresh
|
||||
</button>
|
||||
<button class="btn btn-tool" data-action="create">
|
||||
<i class="fa fa-plus"></i>
|
||||
Add
|
||||
</button>
|
||||
<button class="btn btn-tool" data-action="log">
|
||||
<i class="fa fa-award"></i>
|
||||
Nilai
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<table class="table table-bordered table-hover">
|
||||
<thead>
|
||||
<tr class="text-center">
|
||||
<th>NO</th>
|
||||
<th>Name</th>
|
||||
<th>Jumlah Soal</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form action="javascript:void(0)" enctype="multipart/form-data" id="forms">
|
||||
<div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="formModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="formModalLabel"></h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mb-4 d-none" id="error-message"></div>
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<div class="form-group">
|
||||
<label for="name">Nama Modul <code>*</code></label>
|
||||
<input type="text" class="form-control" name="name" id="name" autocomplete="off">
|
||||
</div>
|
||||
<div class="card card-primary card-outline">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Data Soal</h3>
|
||||
<div class="card-tools">
|
||||
<button type="button" id="question-add" class="btn btn-tool"><i class="fas fa-plus"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-2 col-md-3 col-lg-2">
|
||||
<div class="nav flex-column nav-tabs h-100" id="question-tab" role="tablist" aria-orientation="vertical">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-2 col-md-9 col-lg-10">
|
||||
<div class="tab-content" id="question-tabContent">
|
||||
{{-- <div class="form-group">
|
||||
<label for="question">Soal '+i+' <code>*</code></label>
|
||||
<textarea name="question-syntax['+i+']" id="question-syntax['+i+']"></textarea>
|
||||
</div> --}}
|
||||
{{-- <div class="tab-pane text-left fade show active" id="vert-tabs-home" role="tabpanel" aria-labelledby="vert-tabs-home-tab">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada lacus ullamcorper dui molestie, sit amet congue quam finibus. Etiam ultricies nunc non magna feugiat commodo. Etiam odio magna, mollis auctor felis vitae, ullamcorper ornare ligula. Proin pellentesque tincidunt nisi, vitae ullamcorper felis aliquam id. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin id orci eu lectus blandit suscipit. Phasellus porta, ante et varius ornare, sem enim sollicitudin eros, at commodo leo est vitae lacus. Etiam ut porta sem. Proin porttitor porta nisl, id tempor risus rhoncus quis. In in quam a nibh cursus pulvinar non consequat neque. Mauris lacus elit, condimentum ac condimentum at, semper vitae lectus. Cras lacinia erat eget sapien porta consectetur.
|
||||
</div>
|
||||
<div class="tab-pane fade" id="vert-tabs-profile" role="tabpanel" aria-labelledby="vert-tabs-profile-tab">
|
||||
Mauris tincidunt mi at erat gravida, eget tristique urna bibendum. Mauris pharetra purus ut ligula tempor, et vulputate metus facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas sollicitudin, nisi a luctus interdum, nisl ligula placerat mi, quis posuere purus ligula eu lectus. Donec nunc tellus, elementum sit amet ultricies at, posuere nec nunc. Nunc euismod pellentesque diam.
|
||||
</div> --}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-7" style="background-color: Black;">
|
||||
<label for="template" style="color:White;">Template</label>
|
||||
<table class="table table-bordered table-hover" style="color: White;font-family: 'Courier Prime';font-size: 10px">
|
||||
<tr style="color:White;">
|
||||
<th>Name</th>
|
||||
<th>Syntax</th>
|
||||
</tr>
|
||||
<tr style="color:White;">
|
||||
<td>Start a transaction</td>
|
||||
<td>BEGIN;</td>
|
||||
</tr>
|
||||
<tr style="color:White;">
|
||||
<td>Plan the tests and Run the tests</td>
|
||||
<td>SELECT tap.plan(1);</td>
|
||||
</tr>
|
||||
<tr style="color:White;">
|
||||
<td>Untuk mengidentifikasi database</td>
|
||||
<td>SELECT has_schema('nama_database', 'deskripsi');</td>
|
||||
</tr>
|
||||
<tr style="color:White;">
|
||||
<td>Untuk mengidentifikasi tabel</td>
|
||||
<td>SELECT has_table('nama_database', 'nama_tabel', 'deskripsi');</td>
|
||||
</tr>
|
||||
<tr style="color:White;">
|
||||
<td>Untuk mengidentifikasi kolom tabel</td>
|
||||
<td>SELECT has_column('nama_database', 'nama_tabel','nama_column','deskripsi');</td>
|
||||
</tr>
|
||||
<tr style="color:White;">
|
||||
<td>Untuk mengidentifikasi primary key</td>
|
||||
<td>SELECT col_has_primary_key('nama_database', 'nama_tabel','nama_column','deskripsi');</td>
|
||||
</tr>
|
||||
<tr style="color:White;">
|
||||
<td>Untuk mengidentifikasi constraint FK</td>
|
||||
<td>SELECT has_constraint('nama_database','nama_tabel','nama_kolom','deskripsi');</td>
|
||||
</tr>
|
||||
<tr style="color:White;">
|
||||
<td>Untuk mengidentifikasi type tabel</td>
|
||||
<td>SELECT col_has_type('nama_database', 'nama_tabel', 'nama_column', 'type_data', 'deskripsi');</td>
|
||||
</tr>
|
||||
<tr style="color:White;">
|
||||
<td>Untuk mengidentifikasi null</td>
|
||||
<td>SELECT col_is_null('nama_database', 'nama_tabel', 'nama_kolom', 'deskripsi');</td>
|
||||
</tr>
|
||||
<tr style="color:White;">
|
||||
<td>Untuk mengidentifikasi not null</td>
|
||||
<td>SELECT col_not_null('nama_database', 'nama_tabel', 'nama_kolom', 'deskripsi');</td>
|
||||
</tr>
|
||||
<tr style="color:White;">
|
||||
<td>Untuk mengidentifikasi unique</td>
|
||||
<td>SELECT col_is_unique('nama_database','nama_tabel', 'nama_kolom','deskripsi');</td>
|
||||
</tr>
|
||||
<tr style="color:White;">
|
||||
<td>Untuk mengidentifikasi constraint default</td>
|
||||
<td>SELECT col_has_default('nama_database','nama_tabel', 'nama_kolom_default','deskripsi');</td>
|
||||
</tr>
|
||||
<tr style="color:White;">
|
||||
<td>Untuk mengidentifikasi isi dari default</td>
|
||||
<td>SELECT col_default_is('nama_database', 'nama_tabel', 'nama_kolom', 'nilai_default ex:’5’', 'deskripsi');</td>
|
||||
</tr>
|
||||
<tr style="color:White;">
|
||||
<td>Finish the tests.</td>
|
||||
<td>CALL tap.finish();</td>
|
||||
</tr>
|
||||
<tr style="color:White;">
|
||||
<td>clean up.</td>
|
||||
<td>ROLLBACK;</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="submit" class="btn btn-primary">Simpan</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="modal fade" id="logModal" tabindex="-1" role="dialog" aria-labelledby="logModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="logModalLabel">Hasil Nilai</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body p-0">
|
||||
<table class="table table-bordered table-hover">
|
||||
<thead>
|
||||
<tr class="text-center">
|
||||
<th>NO</th>
|
||||
<th>Name</th>
|
||||
<th>Nilai</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
186
resources/views/student/sql/exam.blade.php
Normal file
186
resources/views/student/sql/exam.blade.php
Normal file
|
|
@ -0,0 +1,186 @@
|
|||
@extends('student/home')
|
||||
@section('css')
|
||||
<link rel="stylesheet" href="{{ asset('lte/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css') }}">
|
||||
@endsection
|
||||
@section('js')
|
||||
<script src="{{ asset('lte/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
loads();
|
||||
});
|
||||
|
||||
const loads = () => {
|
||||
const data = $('tbody').html();
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "{{ route('student sql exam read') }}",
|
||||
beforeSend: function() {
|
||||
$('tbody').html('');
|
||||
},
|
||||
error: function() {
|
||||
console.log('error');
|
||||
},
|
||||
success: function(response) {
|
||||
if (response.length == 0) {
|
||||
$('tbody').append('<tr><td colspan="4" class="align-middle text-center text-muted">tidak ada data</td></tr>');
|
||||
}
|
||||
|
||||
$.each(response, function(index, value) {
|
||||
$('tbody').append('<tr><td class="align-middle text-center">' + (index + 1) + '</td><td class="align-middle text-center">' + value.nilai + '</td><td class="align-middle text-center"><div class="btn-group"><button class="btn btn-sm btn-primary" data-action="result" data-id="' + value.id + '"><i class="fa fa-eye"></i></button></div></td></tr>');
|
||||
});
|
||||
|
||||
reloads();
|
||||
starts();
|
||||
results();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const reloads = () => {
|
||||
$('[data-action=reload]').unbind('click');
|
||||
$('[data-action=reload]').on('click', function() {
|
||||
loads();
|
||||
});
|
||||
}
|
||||
|
||||
const starts = () => {
|
||||
$('[data-action=start]').unbind('click');
|
||||
$('[data-action=start]').on('click', function() {
|
||||
Swal.fire({
|
||||
title: 'Mulai Ujian',
|
||||
text: "harap pastikan bahwa anda benar-benar yakin!",
|
||||
type: 'info',
|
||||
confirmButtonText: 'Saya Yakin!',
|
||||
cancelButtonText: 'Batal',
|
||||
showCancelButton: true,
|
||||
showLoaderOnConfirm: true,
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
backdrop: true
|
||||
}).then((result) => {
|
||||
if (result.value) {
|
||||
window.location.replace('{{ route('student sql exam start') }}');
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
const results = () => {
|
||||
$('[data-action=result]').unbind('click');
|
||||
$('[data-action=result]').on('click', function() {
|
||||
let id = $(this).attr('data-id');
|
||||
$('#resultModal').unbind('shown.bs.modal');
|
||||
$('#resultModal').on('shown.bs.modal', function() {
|
||||
let url = '{{ route('student sql exam do detail', ':id') }}';
|
||||
url = url.replace(":id", id);
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: url,
|
||||
success: function(response) {
|
||||
$('#resultModal .modal-body').html('');
|
||||
if (response) {
|
||||
$.each(response, function(index, value) {
|
||||
let html = '';
|
||||
if (value.input) {
|
||||
if (value.input == value.correct) {
|
||||
html += '<blockquote class="quote-success m-1"><p class="mb-1">' + value.soal + '</p><div class="form-group mb-0">'
|
||||
for (let i = 1; i <= 4; i++) {
|
||||
if (value.correct == i) {
|
||||
html += '<small class="d-block text-success">' + value['jawaban_' + i] + '</small>'
|
||||
} else {
|
||||
html += '<small class="d-block">' + value['jawaban_' + i] + '</small>'
|
||||
}
|
||||
}
|
||||
html += '</div></blockquote>'
|
||||
} else {
|
||||
html += '<blockquote class="quote-danger m-1"><p class="mb-1">' + value.soal + '</p><div class="form-group mb-0">'
|
||||
for (let i = 1; i <= 4; i++) {
|
||||
if (value.input == i) {
|
||||
html += '<small class="d-block text-danger">' + value['jawaban_' + i] + '</small>'
|
||||
} else if (value.correct == i) {
|
||||
html += '<small class="d-block text-success">' + value['jawaban_' + i] + '</small>'
|
||||
} else {
|
||||
html += '<small class="d-block">' + value['jawaban_' + i] + '</small>'
|
||||
}
|
||||
}
|
||||
html += '</div></blockquote>'
|
||||
}
|
||||
} else {
|
||||
html += '<blockquote class="quote-secondary m-1"><p class="mb-1">' + value.soal + '</p><div class="form-group mb-0">'
|
||||
for (let i = 1; i <= 4; i++) {
|
||||
if (value.correct == i) {
|
||||
html += '<small class="d-block text-success">' + value['jawaban_' + i] + '</small>'
|
||||
} else {
|
||||
html += '<small class="d-block">' + value['jawaban_' + i] + '</small>'
|
||||
}
|
||||
}
|
||||
html += '</div></blockquote>'
|
||||
}
|
||||
$('#resultModal .modal-body').append(html);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('#resultModal').modal({
|
||||
backdrop: 'static',
|
||||
keyboard: false
|
||||
})
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Hasil Ujian SQL</h3>
|
||||
<div class="card-tools">
|
||||
<button class="btn btn-tool" data-action="reload">
|
||||
<i class="fa fa-sync"></i>
|
||||
Refresh
|
||||
</button>
|
||||
<button class="btn btn-tool" data-action="start">
|
||||
<i class="fa fa-award"></i>
|
||||
Mulai Ujian
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<table class="table table-bordered table-hover">
|
||||
<thead>
|
||||
<tr class="text-center">
|
||||
<th>NO</th>
|
||||
<th>Nilai</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="resultModal" tabindex="-1" role="dialog" aria-labelledby="resultModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="resultModalLabel">Pratinjau Hasil Ujian</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
168
resources/views/student/sql/exam_do.blade.php
Normal file
168
resources/views/student/sql/exam_do.blade.php
Normal file
|
|
@ -0,0 +1,168 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>APLAS - Administrator Site</title>
|
||||
<link rel="stylesheet" href="{{ asset('lte/plugins/fontawesome-free/css/all.min.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('lte/dist/css/adminlte.min.css') }}">
|
||||
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
|
||||
<style>
|
||||
.table td,
|
||||
.table th {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
background-color: transparent;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="hold-transition layout-top-nav">
|
||||
<div class="container-fluid mt-2">
|
||||
{{-- <div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Soal</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
@for ($i = 1; $i <= 18; $i++)
|
||||
<div class="col-2 my-2">
|
||||
<button type="button" class="btn btn-secondary btn-block">{{ $i }}</button>
|
||||
</div>
|
||||
@endfor
|
||||
<div class="col-2 my-2">
|
||||
<button type="button" class="btn btn-primary btn-block">19</button>
|
||||
</div>
|
||||
<div class="col-2 my-2">
|
||||
<button type="button" class="btn btn-success btn-block">20</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="row">
|
||||
<div class="col-8 align-self-center">
|
||||
<h3 class="card-title">DDL - Table Creation 1</h3>
|
||||
</div>
|
||||
<div class="col-4 text-right">
|
||||
<a href="http://maman.sql.man/student/sql/pembelajaran/kerjakan/2" class="btn btn-sm btn-outline-secondary">Sebelumnya</a>
|
||||
<a href="http://maman.sql.man/student/sql/pembelajaran/kerjakan/4" class="btn btn-sm btn-outline-primary">Selanjutnya</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>
|
||||
Siapakan nama saya?
|
||||
</p>
|
||||
<div class="form-group">
|
||||
<div class="custom-control custom-radio">
|
||||
<input class="custom-control-input" type="radio" id="customRadio1" name="customRadio">
|
||||
<label for="customRadio1" class="custom-control-label font-weight-normal">Custom Radio</label>
|
||||
</div>
|
||||
<div class="custom-control custom-radio">
|
||||
<input class="custom-control-input" type="radio" id="customRadio2" name="customRadio">
|
||||
<label for="customRadio2" class="custom-control-label font-weight-normal">Custom Radio checked</label>
|
||||
</div>
|
||||
<div class="custom-control custom-radio">
|
||||
<input class="custom-control-input" type="radio" id="customRadio3" name="customRadio">
|
||||
<label for="customRadio3" class="custom-control-label font-weight-normal">Custom Radio</label>
|
||||
</div>
|
||||
<div class="custom-control custom-radio">
|
||||
<input class="custom-control-input" type="radio" id="customRadio4" name="customRadio" checked="">
|
||||
<label for="customRadio4" class="custom-control-label font-weight-normal">Custom Radio checked</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> --}}
|
||||
|
||||
@isset($data)
|
||||
<div class="row">
|
||||
@isset($data['semua'])
|
||||
<div class="col-12 col-md-5 col-lg-4 col-xl-3">
|
||||
<div class="card card-secondary card-outline">
|
||||
<div class="card-body p-1">
|
||||
<table class="table table-borderless p-0 m-0">
|
||||
<tr>
|
||||
<td colspan="5">
|
||||
<a href="{{ route('student sql exam complete') }}" class="btn btn-warning btn-block">Selesaikan Ujian</a>
|
||||
</td>
|
||||
</tr>
|
||||
@php($i = 1)
|
||||
@foreach ($data['semua'] as $number)
|
||||
@if ($i % 5 == 1)
|
||||
<tr>
|
||||
@endif
|
||||
@if ($number == $data['sekarang'])
|
||||
<td>
|
||||
<a href="javascript:void(0)" class="btn btn-primary btn-block">{{ $i }}</a>
|
||||
</td>
|
||||
@elseif (in_array($number, $data['terjawab']))
|
||||
<td>
|
||||
<a href="{{ route('student sql exam do', $number) }}" class="btn btn-success btn-block">{{ $i }}</a>
|
||||
</td>
|
||||
@else
|
||||
<td>
|
||||
<a href="{{ route('student sql exam do', $number) }}" class="btn btn-secondary btn-block">{{ $i }}</a>
|
||||
</td>
|
||||
@endif
|
||||
@php($i++)
|
||||
@endforeach
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endisset
|
||||
@isset($data['soal'])
|
||||
<div class="col-12 col-md-7 col-lg-8 col-xl-9">
|
||||
<form method="POST">
|
||||
@csrf
|
||||
<div class="card card-secondary card-outline">
|
||||
<div class="card-body pt-3 px-3 pb-0">
|
||||
<p>
|
||||
{{ $data['soal'] }}
|
||||
</p>
|
||||
<div class="form-group">
|
||||
@isset($data['jawaban'])
|
||||
@foreach ($data['jawaban'] as $index => $key)
|
||||
@if (isset($data['input']) && $data['input'] == $index)
|
||||
<div class="custom-control custom-radio">
|
||||
<input class="custom-control-input" type="radio" id="answer_{{ $index }}" name="jawaban" value="{{ $key }}" checked>
|
||||
<label for="answer_{{ $index }}" class="custom-control-label font-weight-normal">{{ $key }}</label>
|
||||
</div>
|
||||
@else
|
||||
<div class="custom-control custom-radio">
|
||||
<input class="custom-control-input" type="radio" id="answer_{{ $index }}" name="jawaban" value="{{ $key }}">
|
||||
<label for="answer_{{ $index }}" class="custom-control-label font-weight-normal">{{ $key }}</label>
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
@endisset
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer p-3 border-top d-block">
|
||||
<button type="submit" class="btn btn-sm btn-outline-primary">Simpan Jawaban</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@endisset
|
||||
</div>
|
||||
@endisset
|
||||
</div>
|
||||
<script src="{{ asset('lte/plugins/jquery/jquery.min.js') }}"></script>
|
||||
<script src="{{ asset('lte/plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
|
||||
<script src="{{ asset('lte/dist/js/adminlte.min.js') }}"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
186
resources/views/student/sql/exercise.blade.php
Normal file
186
resources/views/student/sql/exercise.blade.php
Normal file
|
|
@ -0,0 +1,186 @@
|
|||
@extends('student/home')
|
||||
@section('css')
|
||||
<link rel="stylesheet" href="{{ asset('lte/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css') }}">
|
||||
@endsection
|
||||
@section('js')
|
||||
<script src="{{ asset('lte/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
loads();
|
||||
});
|
||||
|
||||
const loads = () => {
|
||||
const data = $('tbody').html();
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "{{ route('student sql exercise read') }}",
|
||||
beforeSend: function() {
|
||||
$('tbody').html('');
|
||||
},
|
||||
error: function() {
|
||||
console.log('error');
|
||||
},
|
||||
success: function(response) {
|
||||
if (response.length == 0) {
|
||||
$('tbody').append('<tr><td colspan="4" class="align-middle text-center text-muted">tidak ada data</td></tr>');
|
||||
}
|
||||
|
||||
$.each(response, function(index, value) {
|
||||
$('tbody').append('<tr><td class="align-middle text-center">' + (index + 1) + '</td><td class="align-middle text-center">' + value.nilai + '</td><td class="align-middle text-center"><div class="btn-group"><button class="btn btn-sm btn-primary" data-action="result" data-id="' + value.id + '"><i class="fa fa-eye"></i></button></div></td></tr>');
|
||||
});
|
||||
|
||||
reloads();
|
||||
starts();
|
||||
results();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const reloads = () => {
|
||||
$('[data-action=reload]').unbind('click');
|
||||
$('[data-action=reload]').on('click', function() {
|
||||
loads();
|
||||
});
|
||||
}
|
||||
|
||||
const starts = () => {
|
||||
$('[data-action=start]').unbind('click');
|
||||
$('[data-action=start]').on('click', function() {
|
||||
Swal.fire({
|
||||
title: 'Mulai Latihan',
|
||||
text: "harap pastikan bahwa anda benar-benar yakin!",
|
||||
type: 'info',
|
||||
confirmButtonText: 'Saya Yakin!',
|
||||
cancelButtonText: 'Batal',
|
||||
showCancelButton: true,
|
||||
showLoaderOnConfirm: true,
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
backdrop: true
|
||||
}).then((result) => {
|
||||
if (result.value) {
|
||||
window.location.replace('{{ route('student sql exercise start') }}');
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
const results = () => {
|
||||
$('[data-action=result]').unbind('click');
|
||||
$('[data-action=result]').on('click', function() {
|
||||
let id = $(this).attr('data-id');
|
||||
$('#resultModal').unbind('shown.bs.modal');
|
||||
$('#resultModal').on('shown.bs.modal', function() {
|
||||
let url = '{{ route('student sql exercise do detail', ':id') }}';
|
||||
url = url.replace(":id", id);
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: url,
|
||||
success: function(response) {
|
||||
$('#resultModal .modal-body').html('');
|
||||
if (response) {
|
||||
$.each(response, function(index, value) {
|
||||
let html = '';
|
||||
if (value.input) {
|
||||
if (value.input == value.correct) {
|
||||
html += '<blockquote class="quote-success m-1"><p class="mb-1">' + value.soal + '</p><div class="form-group mb-0">'
|
||||
for (let i = 1; i <= 4; i++) {
|
||||
if (value.correct == i) {
|
||||
html += '<small class="d-block text-success">' + value['jawaban_' + i] + '</small>'
|
||||
} else {
|
||||
html += '<small class="d-block">' + value['jawaban_' + i] + '</small>'
|
||||
}
|
||||
}
|
||||
html += '</div></blockquote>'
|
||||
} else {
|
||||
html += '<blockquote class="quote-danger m-1"><p class="mb-1">' + value.soal + '</p><div class="form-group mb-0">'
|
||||
for (let i = 1; i <= 4; i++) {
|
||||
if (value.input == i) {
|
||||
html += '<small class="d-block text-danger">' + value['jawaban_' + i] + '</small>'
|
||||
} else if (value.correct == i) {
|
||||
html += '<small class="d-block text-success">' + value['jawaban_' + i] + '</small>'
|
||||
} else {
|
||||
html += '<small class="d-block">' + value['jawaban_' + i] + '</small>'
|
||||
}
|
||||
}
|
||||
html += '</div></blockquote>'
|
||||
}
|
||||
} else {
|
||||
html += '<blockquote class="quote-secondary m-1"><p class="mb-1">' + value.soal + '</p><div class="form-group mb-0">'
|
||||
for (let i = 1; i <= 4; i++) {
|
||||
if (value.correct == i) {
|
||||
html += '<small class="d-block text-success">' + value['jawaban_' + i] + '</small>'
|
||||
} else {
|
||||
html += '<small class="d-block">' + value['jawaban_' + i] + '</small>'
|
||||
}
|
||||
}
|
||||
html += '</div></blockquote>'
|
||||
}
|
||||
$('#resultModal .modal-body').append(html);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('#resultModal').modal({
|
||||
backdrop: 'static',
|
||||
keyboard: false
|
||||
})
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Hasil Latihan SQL</h3>
|
||||
<div class="card-tools">
|
||||
<button class="btn btn-tool" data-action="reload">
|
||||
<i class="fa fa-sync"></i>
|
||||
Refresh
|
||||
</button>
|
||||
<button class="btn btn-tool" data-action="start">
|
||||
<i class="fa fa-award"></i>
|
||||
Mulai Latihan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<table class="table table-bordered table-hover">
|
||||
<thead>
|
||||
<tr class="text-center">
|
||||
<th>NO</th>
|
||||
<th>Nilai</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="resultModal" tabindex="-1" role="dialog" aria-labelledby="resultModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="resultModalLabel">Pratinjau Hasil Latihan</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
168
resources/views/student/sql/exercise_do.blade.php
Normal file
168
resources/views/student/sql/exercise_do.blade.php
Normal file
|
|
@ -0,0 +1,168 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>APLAS - Administrator Site</title>
|
||||
<link rel="stylesheet" href="{{ asset('lte/plugins/fontawesome-free/css/all.min.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('lte/dist/css/adminlte.min.css') }}">
|
||||
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
|
||||
<style>
|
||||
.table td,
|
||||
.table th {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
background-color: transparent;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="hold-transition layout-top-nav">
|
||||
<div class="container-fluid mt-2">
|
||||
{{-- <div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Soal</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
@for ($i = 1; $i <= 18; $i++)
|
||||
<div class="col-2 my-2">
|
||||
<button type="button" class="btn btn-secondary btn-block">{{ $i }}</button>
|
||||
</div>
|
||||
@endfor
|
||||
<div class="col-2 my-2">
|
||||
<button type="button" class="btn btn-primary btn-block">19</button>
|
||||
</div>
|
||||
<div class="col-2 my-2">
|
||||
<button type="button" class="btn btn-success btn-block">20</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="row">
|
||||
<div class="col-8 align-self-center">
|
||||
<h3 class="card-title">DDL - Table Creation 1</h3>
|
||||
</div>
|
||||
<div class="col-4 text-right">
|
||||
<a href="http://maman.sql.man/student/sql/pembelajaran/kerjakan/2" class="btn btn-sm btn-outline-secondary">Sebelumnya</a>
|
||||
<a href="http://maman.sql.man/student/sql/pembelajaran/kerjakan/4" class="btn btn-sm btn-outline-primary">Selanjutnya</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>
|
||||
Siapakan nama saya?
|
||||
</p>
|
||||
<div class="form-group">
|
||||
<div class="custom-control custom-radio">
|
||||
<input class="custom-control-input" type="radio" id="customRadio1" name="customRadio">
|
||||
<label for="customRadio1" class="custom-control-label font-weight-normal">Custom Radio</label>
|
||||
</div>
|
||||
<div class="custom-control custom-radio">
|
||||
<input class="custom-control-input" type="radio" id="customRadio2" name="customRadio">
|
||||
<label for="customRadio2" class="custom-control-label font-weight-normal">Custom Radio checked</label>
|
||||
</div>
|
||||
<div class="custom-control custom-radio">
|
||||
<input class="custom-control-input" type="radio" id="customRadio3" name="customRadio">
|
||||
<label for="customRadio3" class="custom-control-label font-weight-normal">Custom Radio</label>
|
||||
</div>
|
||||
<div class="custom-control custom-radio">
|
||||
<input class="custom-control-input" type="radio" id="customRadio4" name="customRadio" checked="">
|
||||
<label for="customRadio4" class="custom-control-label font-weight-normal">Custom Radio checked</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> --}}
|
||||
|
||||
@isset($data)
|
||||
<div class="row">
|
||||
@isset($data['semua'])
|
||||
<div class="col-12 col-md-5 col-lg-4 col-xl-3">
|
||||
<div class="card card-secondary card-outline">
|
||||
<div class="card-body p-1">
|
||||
<table class="table table-borderless p-0 m-0">
|
||||
<tr>
|
||||
<td colspan="5">
|
||||
<a href="{{ route('student sql exercise complete') }}" class="btn btn-warning btn-block">Selesaikan Ujian</a>
|
||||
</td>
|
||||
</tr>
|
||||
@php($i = 1)
|
||||
@foreach ($data['semua'] as $number)
|
||||
@if ($i % 5 == 1)
|
||||
<tr>
|
||||
@endif
|
||||
@if ($number == $data['sekarang'])
|
||||
<td>
|
||||
<a href="javascript:void(0)" class="btn btn-primary btn-block">{{ $i }}</a>
|
||||
</td>
|
||||
@elseif (in_array($number, $data['terjawab']))
|
||||
<td>
|
||||
<a href="{{ route('student sql exercise do', $number) }}" class="btn btn-success btn-block">{{ $i }}</a>
|
||||
</td>
|
||||
@else
|
||||
<td>
|
||||
<a href="{{ route('student sql exercise do', $number) }}" class="btn btn-secondary btn-block">{{ $i }}</a>
|
||||
</td>
|
||||
@endif
|
||||
@php($i++)
|
||||
@endforeach
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endisset
|
||||
@isset($data['soal'])
|
||||
<div class="col-12 col-md-7 col-lg-8 col-xl-9">
|
||||
<form method="POST">
|
||||
@csrf
|
||||
<div class="card card-secondary card-outline">
|
||||
<div class="card-body pt-3 px-3 pb-0">
|
||||
<p>
|
||||
{{ $data['soal'] }}
|
||||
</p>
|
||||
<div class="form-group">
|
||||
@isset($data['jawaban'])
|
||||
@foreach ($data['jawaban'] as $index => $key)
|
||||
@if (isset($data['input']) && $data['input'] == $index)
|
||||
<div class="custom-control custom-radio">
|
||||
<input class="custom-control-input" type="radio" id="answer_{{ $index }}" name="jawaban" value="{{ $key }}" checked>
|
||||
<label for="answer_{{ $index }}" class="custom-control-label font-weight-normal">{{ $key }}</label>
|
||||
</div>
|
||||
@else
|
||||
<div class="custom-control custom-radio">
|
||||
<input class="custom-control-input" type="radio" id="answer_{{ $index }}" name="jawaban" value="{{ $key }}">
|
||||
<label for="answer_{{ $index }}" class="custom-control-label font-weight-normal">{{ $key }}</label>
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
@endisset
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer p-3 border-top d-block">
|
||||
<button type="submit" class="btn btn-sm btn-outline-primary">Simpan Jawaban</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@endisset
|
||||
</div>
|
||||
@endisset
|
||||
</div>
|
||||
<script src="{{ asset('lte/plugins/jquery/jquery.min.js') }}"></script>
|
||||
<script src="{{ asset('lte/plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
|
||||
<script src="{{ asset('lte/dist/js/adminlte.min.js') }}"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
195
resources/views/student/sql/learning.blade.php
Normal file
195
resources/views/student/sql/learning.blade.php
Normal file
|
|
@ -0,0 +1,195 @@
|
|||
@extends('student/home')
|
||||
@section('css')
|
||||
<link rel="stylesheet" href="{{ asset('lte/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css') }}">
|
||||
@endsection
|
||||
@section('js')
|
||||
<script src="{{ asset('lte/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
|
||||
<script>
|
||||
const formContent = $('form .modal-body').html();
|
||||
var CM;
|
||||
|
||||
$(document).ready(function() {
|
||||
loads();
|
||||
});
|
||||
|
||||
const loads = () => {
|
||||
const data = $('tbody').html();
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "{{ route('student sql learning read') }}",
|
||||
beforeSend: function() {
|
||||
$('tbody').html('');
|
||||
},
|
||||
error: function() {
|
||||
console.log('error');
|
||||
},
|
||||
success: function(response) {
|
||||
if (response.length == 0) {
|
||||
$('tbody').append('<tr><td colspan="4" class="align-middle text-center text-muted">tidak ada data</td></tr>');
|
||||
}
|
||||
|
||||
$.each(response, function(index, value) {
|
||||
let html = '<tr><td class="align-middle text-center">' + (index + 1) + '</td><td class=align-middle>' + value.name + '</td><td class="align-middle text-center">';
|
||||
switch (value.status) {
|
||||
case 'lulus':
|
||||
html += '<span class="badge badge-success">' + value.status + '</span>'
|
||||
break;
|
||||
|
||||
case 'sedang dikerjakan':
|
||||
html += '<span class="badge badge-info">' + value.status + '</span>'
|
||||
break;
|
||||
|
||||
case 'gagal':
|
||||
html += '<span class="badge badge-danger">' + value.status + '</span>'
|
||||
break;
|
||||
|
||||
default:
|
||||
html += '<span class="badge badge-secondary">' + value.status + '</span>'
|
||||
break;
|
||||
}
|
||||
|
||||
html += '</td>';
|
||||
let url = '{{ route('student sql learning do', ':id') }}'
|
||||
url = url.replace(":id", value.id);
|
||||
html += '<td class="align-middle text-center"><div class="btn-group"><a class="btn btn-sm btn-success" href="' + url + '"><i class="fa fa fa-hand-pointer"></i></a></div></td>'
|
||||
html += '</tr>'
|
||||
$('tbody').append(html);
|
||||
});
|
||||
|
||||
reloads();
|
||||
resets();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const reloads = () => {
|
||||
$('[data-action=reload]').unbind('click');
|
||||
$('[data-action=reload]').on('click', function() {
|
||||
loads();
|
||||
});
|
||||
}
|
||||
|
||||
const resets = () => {
|
||||
$('[data-action=reset]').unbind('click');
|
||||
$('[data-action=reset]').on('click', function() {
|
||||
Swal.fire({
|
||||
title: 'Reset Pembelajaran',
|
||||
text: "pembelajaran yang telah direset tidak dapat dikembalikan, harap pastikan bahwa anda benar-benar yakin!",
|
||||
type: 'warning',
|
||||
confirmButtonText: 'Saya Yakin!',
|
||||
cancelButtonText: 'Batal',
|
||||
showCancelButton: true,
|
||||
showLoaderOnConfirm: true,
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
backdrop: true,
|
||||
preConfirm: () => {
|
||||
return fetch('{{ route('student sql learning do reset') }}')
|
||||
.then(response => {
|
||||
return response;
|
||||
})
|
||||
},
|
||||
}).then((result) => {
|
||||
if (typeof result.dismiss == 'undefined') {
|
||||
if (result.value.ok) {
|
||||
Swal.fire({
|
||||
title: 'Reset Pembelajaran',
|
||||
text: "pembelajaran berhasil direset",
|
||||
type: 'success',
|
||||
confirmButtonText: 'Mantap!',
|
||||
}).then(() => {
|
||||
loads();
|
||||
})
|
||||
} else {
|
||||
Swal.fire({
|
||||
title: 'Reset Pembelajaran',
|
||||
text: "pembelajaran gagal direset",
|
||||
type: 'error',
|
||||
confirmButtonText: 'Tutup',
|
||||
}).then(() => {
|
||||
loads();
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Modul Pembelajaran SQL</h3>
|
||||
<div class="card-tools">
|
||||
<button class="btn btn-tool" data-action="reload">
|
||||
<i class="fa fa-sync"></i>
|
||||
Refresh
|
||||
</button>
|
||||
<button class="btn btn-tool" data-action="reset">
|
||||
<i class="fa fa-bolt"></i>
|
||||
Reset Pembelajaran
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<table class="table table-bordered table-hover">
|
||||
<thead>
|
||||
<tr class="text-center">
|
||||
<th>NO</th>
|
||||
<th>Name</th>
|
||||
<th>Status</th>
|
||||
<th>Solve</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form action="javascript:void(0)" enctype="multipart/form-data">
|
||||
<div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="formModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="formModalLabel"></h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mb-4 d-none" id="error-message"></div>
|
||||
<div class="form-group">
|
||||
<label for="name">Nama Modul <code>*</code></label>
|
||||
<input type="text" class="form-control" name="name" id="name" autocomplete="off">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="syntax">Sintak Tes <code>*</code></label>
|
||||
<textarea name="syntax" id="syntax" class="d-none"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="file">Dokumen Pendukung <code>*</code></label>
|
||||
<div class="input-group">
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" name="file" id="file" accept="application/pdf" />
|
||||
<label class="custom-file-label" for="file">Choose file</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="submit" class="btn btn-primary">Simpan</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@endsection
|
||||
154
resources/views/student/sql/learning_do.blade copy.php
Normal file
154
resources/views/student/sql/learning_do.blade copy.php
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
@extends('student/home')
|
||||
@section('css')
|
||||
<link rel="stylesheet" href="{{ asset('lte/plugins/codemirror/lib/codemirror.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('lte/plugins/codemirror/theme/dracula.css') }}">
|
||||
@endsection
|
||||
@section('js')
|
||||
<script src="{{ asset('lte/plugins/codemirror/lib/codemirror.js') }}"></script>
|
||||
<script src="{{ asset('lte/plugins/codemirror/mode/sql/sql.js') }}"></script>
|
||||
<script>
|
||||
var CM;
|
||||
$(document).ready(function() {
|
||||
let id = '{{ request()->segment(count(request()->segments())) }}';
|
||||
let url = '{{ route('student sql learning do read', ':id') }}'
|
||||
url = url.replace(":id", id);
|
||||
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: url,
|
||||
success: function(response) {
|
||||
if (response.previous) {
|
||||
let url = '{{ route('student sql learning do', ':id') }}'
|
||||
url = url.replace(":id", response.previous);
|
||||
|
||||
$('a[data-action=previous]').attr('href', url)
|
||||
} else {
|
||||
$('a[data-action=previous]').addClass('d-none');
|
||||
}
|
||||
|
||||
if (response.next) {
|
||||
let url = '{{ route('student sql learning do', ':id') }}'
|
||||
url = url.replace(":id", response.next);
|
||||
|
||||
$('a[data-action=next]').attr('href', url)
|
||||
} else {
|
||||
$('a[data-action=next]').addClass('d-none');
|
||||
}
|
||||
|
||||
$('h3.card-title').html(response.name);
|
||||
$('embed#guide').attr('src', '{{ asset('') }}/' + response.file);
|
||||
formElm();
|
||||
|
||||
if (response.status == 'lulus') {
|
||||
CM.setOption("readOnly", true);
|
||||
$('button[type=reset]').attr('disabled', true);
|
||||
$('button[type=submit]').attr('disabled', true);
|
||||
}
|
||||
formSubmit();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const formElm = () => {
|
||||
CM = CodeMirror.fromTextArea($('textarea#syntax')[0], {
|
||||
lineNumbers: true,
|
||||
styleActiveLine: true,
|
||||
mode: "sql",
|
||||
theme: "dracula"
|
||||
});
|
||||
CM.on('change', function() {
|
||||
if (CM.getValue() != '') {
|
||||
$('button[type=submit]').removeAttr('disabled');
|
||||
} else {
|
||||
$('button[type=submit]').attr('disabled', true);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const formSubmit = () => {
|
||||
$('form').on('submit', function(e) {
|
||||
e.preventDefault();
|
||||
let id = '{{ request()->segment(count(request()->segments())) }}';
|
||||
let url = '{{ route('student sql learning do exec', ':id') }}'
|
||||
url = url.replace(":id", id);
|
||||
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: url,
|
||||
data: $('form').serialize(),
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
||||
},
|
||||
success: function(response) {
|
||||
$('button[type=reset]').removeAttr('disabled');
|
||||
$('button[type=submit]').attr('disabled', true);
|
||||
|
||||
let html = '';
|
||||
let gagal = 0;
|
||||
let lulus = 0;
|
||||
$.each(response, function(index, value) {
|
||||
if (typeof value.message != 'undefined' && typeof value.status != 'undefined') {
|
||||
if (value.status == 'lulus') {
|
||||
html += '<span class="my-1 badge badge-success d-block text-left">' + value.message + '</span>';
|
||||
lulus += 1;
|
||||
}
|
||||
if (value.status == 'gagal') {
|
||||
html += '<span class="my-1 badge badge-danger d-block text-left">' + value.message + '</span>';
|
||||
gagal += 1;
|
||||
}
|
||||
}
|
||||
});
|
||||
$('form div#result').html(html);
|
||||
$('form h5#result-text').html('<span class="badge badge-success align-middle">' + lulus + ' Lulus</span> <span class="badge badge-danger align-middle">' + gagal + ' Gagal</span>');
|
||||
// if (typeof response == 'object' && response.length) {
|
||||
// }
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<form method="POST" action="javascrip:void(0)" enctype="multipart/form-data">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="row">
|
||||
<div class="col-8 align-self-center">
|
||||
<h3 class="card-title">1. DDL - Database Creation</h3>
|
||||
</div>
|
||||
<div class="col-4 text-right">
|
||||
<a href="javascript:void(0)" data-action="previous" class="btn btn-outline-secondary">Sebelumnya</a>
|
||||
<a href="javascript:void(0)" data-action="next" class="btn btn-outline-primary">Selanjutnya</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<div class="form-group mb-2">
|
||||
<textarea name="syntax" id="syntax" class="d-none"></textarea>
|
||||
</div>
|
||||
<div class="form-group mb-0">
|
||||
<div class="mb-2 d-flex justify-content-between">
|
||||
<h5 class="m-0 align-self-center" id="result-text">Hasil</h5>
|
||||
<div class="d-block">
|
||||
<button type="reset" class="btn btn-xs btn-danger" disabled>Reset</button>
|
||||
<button type="submit" class="btn btn-xs btn-success" disabled>Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="result" class="border rounded bg-dark py-1 px-2"></div>
|
||||
{{-- <textarea id="result" class="form-control bg-dark" rows="15" disabled></textarea> --}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-7">
|
||||
<embed id="guide" class="w-100 h-100" src="http://maman.sql.man//upload/62c02fe9312e5.pdf" type="application/pdf">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
140
resources/views/student/sql/learning_do.blade.php
Normal file
140
resources/views/student/sql/learning_do.blade.php
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
@extends('student/home')
|
||||
@section('css')
|
||||
<link rel="stylesheet" href="{{ asset('lte/plugins/codemirror/lib/codemirror.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('lte/plugins/codemirror/theme/dracula.css') }}">
|
||||
@endsection
|
||||
@section('js')
|
||||
<script src="{{ asset('lte/plugins/codemirror/lib/codemirror.js') }}"></script>
|
||||
<script src="{{ asset('lte/plugins/codemirror/mode/sql/sql.js') }}"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
CodeMirror.fromTextArea($('textarea#syntax')[0], {
|
||||
lineNumbers: true,
|
||||
styleActiveLine: true,
|
||||
mode: "sql",
|
||||
theme: "dracula"
|
||||
});
|
||||
|
||||
$('form').on('submit', function(e) {
|
||||
e.preventDefault();
|
||||
let id = '{{ request()->segment(count(request()->segments())) }}';
|
||||
let url = '{{ route('student sql learning do exec', ':id') }}'
|
||||
url = url.replace(":id", id);
|
||||
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: url,
|
||||
data: $('form').serialize(),
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
||||
},
|
||||
success: function(response) {
|
||||
let html = '';
|
||||
let gagal = 0;
|
||||
let lulus = 0;
|
||||
$.each(response, function(index, value) {
|
||||
if (typeof value.message != 'undefined' && typeof value.status != 'undefined') {
|
||||
if (value.status == 'lulus') {
|
||||
html += '<span class="my-1 badge badge-success d-block text-left">' + value.message + '</span>';
|
||||
lulus += 1;
|
||||
}
|
||||
if (value.status == 'gagal') {
|
||||
html += '<span class="my-1 badge badge-danger d-block text-left">' + value.message + '</span>';
|
||||
gagal += 1;
|
||||
}
|
||||
}
|
||||
});
|
||||
$('form div#result').html(html);
|
||||
$('form div#result-text').html('<span class="badge badge-success align-middle">' + lulus + ' Lulus</span> <span class="badge badge-danger align-middle">' + gagal + ' Gagal</span>');
|
||||
if (response.status == 'lulus') {
|
||||
$('form button[type=submit]').remove();
|
||||
$('form div#result-action').html('<span class="badge badge-success align-middle">Lulus</span>');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@section('content')
|
||||
@isset($data)
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<form method="POST" action="javascrip:void(0)" enctype="multipart/form-data">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="row">
|
||||
<div class="col-8 align-self-center">
|
||||
<h3 class="card-title">{{ $data['name'] }}</h3>
|
||||
</div>
|
||||
<div class="col-4 text-right">
|
||||
@if ($data['previous'])
|
||||
<a href="{{ route('student sql learning do', $data['previous']) }}" class="btn btn-outline-secondary">Sebelumnya</a>
|
||||
@endif
|
||||
@if ($data['next'])
|
||||
<a href="{{ route('student sql learning do', $data['next']) }}" class="btn btn-outline-primary">Selanjutnya</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<div class="form-group mb-2">
|
||||
<textarea name="syntax" id="syntax" class="d-none">{{ isset($data['user']['input'][0]) ? str_replace('pembelajaran_mahasiswa_' . Auth::user()->id . '_', '', $data['user']['input'][0]['syntax']) : '' }}</textarea>
|
||||
</div>
|
||||
<div class="form-group mb-0">
|
||||
<div class="mb-2 d-flex justify-content-between">
|
||||
@php
|
||||
$result = isset($data['user']['input'][0]) ? json_decode($data['user']['input'][0]['result'], true) : [];
|
||||
$html = '';
|
||||
$lulus = 0;
|
||||
$gagal = 0;
|
||||
@endphp
|
||||
@foreach ($result as $key => $value)
|
||||
@if (is_array($value))
|
||||
@if ($value['status'] != 'lulus')
|
||||
@php
|
||||
$html .= '<span class="my-1 badge badge-danger d-block text-left">' . $value['message'] . '</span>';
|
||||
$gagal++;
|
||||
@endphp
|
||||
@else
|
||||
@php
|
||||
$html .= '<span class="my-1 badge badge-success d-block text-left">' . $value['message'] . '</span>';
|
||||
$lulus++;
|
||||
@endphp
|
||||
@endif
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
|
||||
<div class="d-block" id="result-text">
|
||||
@if ($html != '')
|
||||
<span class="badge badge-success align-middle">{{ $lulus }} Lulus</span>
|
||||
<span class="badge badge-danger align-middle">{{ $gagal }} Gagal</span>
|
||||
@else
|
||||
<h5 class="m-0 align-self-center">Hasil</h5>
|
||||
@endif
|
||||
</div>
|
||||
<div class="d-block" id="result-action">
|
||||
@if ($data['user']['status'] != 'lulus')
|
||||
<button type="submit" class="btn btn-xs btn-success">Submit</button>
|
||||
@else
|
||||
<span class="badge badge-success align-middle">Lulus</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div id="result" class="border rounded bg-dark py-1 px-2"> {!! $html !!} </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-7">
|
||||
<embed id="guide" class="w-100 h-100" src="{{ asset($data['file']) }}" type="application/pdf">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@endisset
|
||||
@endsection
|
||||
138
resources/views/student/sql/practice.blade.php
Normal file
138
resources/views/student/sql/practice.blade.php
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
@extends('student/home')
|
||||
@section('css')
|
||||
<link rel="stylesheet" href="{{ asset('lte/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css') }}">
|
||||
@endsection
|
||||
@section('js')
|
||||
<script src="{{ asset('lte/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
|
||||
<script>
|
||||
const formContent = $('form .modal-body').html();
|
||||
var CM;
|
||||
|
||||
$(document).ready(function() {
|
||||
loads();
|
||||
});
|
||||
|
||||
const loads = () => {
|
||||
const data = $('tbody').html();
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "{{ route('student sql practice read') }}",
|
||||
beforeSend: function() {
|
||||
$('tbody').html('');
|
||||
},
|
||||
error: function() {
|
||||
console.log('error');
|
||||
},
|
||||
success: function(response) {
|
||||
if (response.length == 0) {
|
||||
$('tbody').append('<tr><td colspan="4" class="align-middle text-center text-muted">tidak ada data</td></tr>');
|
||||
}
|
||||
|
||||
$.each(response, function(index, value) {
|
||||
let html = '<tr><td class="align-middle text-center">' + (index + 1) + '</td><td class=align-middle>' + value.name + '</td><td class="align-middle text-center">' + value.question + '</td><td class="align-middle text-center">';
|
||||
if (value.complete == value.question) {
|
||||
let nilai = value.correct / value.complete * 100;
|
||||
html += '<span class="badge badge-success">Selesai</span><span class="badge badge-secondary ml-2">Nilai : ' + nilai.toFixed(0) + '</span>'
|
||||
}
|
||||
if (value.ncomplete != 0 && value.complete != value.question) {
|
||||
html += '<span class="badge badge-info">Sedang Dikerjakan</span>'
|
||||
}
|
||||
if (value.ncomplete == 0 && value.complete == 0) {
|
||||
html += '<span class="badge badge-secondary">Belum Dikerjakan</span>'
|
||||
}
|
||||
|
||||
html += '</td>';
|
||||
let url = '{{ route('student sql practice do', ':id') }}'
|
||||
url = url.replace(":id", value.id);
|
||||
html += '<td class="align-middle text-center"><div class="btn-group"><a class="btn btn-sm btn-success" href="' + url + '"><i class="fa fa fa-hand-pointer"></i></a></div></td>'
|
||||
html += '</tr>'
|
||||
$('tbody').append(html);
|
||||
});
|
||||
|
||||
reloads();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const reloads = () => {
|
||||
$('[data-action=reload]').unbind('click');
|
||||
$('[data-action=reload]').on('click', function() {
|
||||
loads();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Modul Praktek SQL</h3>
|
||||
<div class="card-tools">
|
||||
<button class="btn btn-tool" data-action="reload">
|
||||
<i class="fa fa-sync"></i>
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<table class="table table-bordered table-hover">
|
||||
<thead>
|
||||
<tr class="text-center">
|
||||
<th>NO</th>
|
||||
<th>Name</th>
|
||||
<th>Jumlah Soal</th>
|
||||
<th>Status</th>
|
||||
<th>Solve</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form action="javascript:void(0)" enctype="multipart/form-data">
|
||||
<div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="formModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="formModalLabel"></h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mb-4 d-none" id="error-message"></div>
|
||||
<div class="form-group">
|
||||
<label for="name">Nama Modul <code>*</code></label>
|
||||
<input type="text" class="form-control" name="name" id="name" autocomplete="off">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="syntax">Sintak Tes <code>*</code></label>
|
||||
<textarea name="syntax" id="syntax" class="d-none"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="file">Dokumen Pendukung <code>*</code></label>
|
||||
<div class="input-group">
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" name="file" id="file" accept="application/pdf" />
|
||||
<label class="custom-file-label" for="file">Choose file</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="submit" class="btn btn-primary">Simpan</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@endsection
|
||||
142
resources/views/student/sql/practice_do.blade.php
Normal file
142
resources/views/student/sql/practice_do.blade.php
Normal file
|
|
@ -0,0 +1,142 @@
|
|||
@extends('student/home')
|
||||
@section('css')
|
||||
<link rel="stylesheet" href="{{ asset('lte/plugins/codemirror/lib/codemirror.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('lte/plugins/codemirror/theme/dracula.css') }}">
|
||||
@endsection
|
||||
@section('js')
|
||||
<script src="{{ asset('lte/plugins/codemirror/lib/codemirror.js') }}"></script>
|
||||
<script src="{{ asset('lte/plugins/codemirror/mode/sql/sql.js') }}"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
CodeMirror.fromTextArea($('textarea#syntax')[0], {
|
||||
lineNumbers: true,
|
||||
styleActiveLine: true,
|
||||
mode: "sql",
|
||||
theme: "dracula"
|
||||
});
|
||||
|
||||
$('form').on('submit', function(e) {
|
||||
e.preventDefault();
|
||||
let id = '{{ request()->segment(count(request()->segments())) }}';
|
||||
let url = '{{ route('student sql practice do exec', ':id') }}'
|
||||
url = url.replace(":id", id);
|
||||
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: url,
|
||||
data: $('form').serialize(),
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
||||
},
|
||||
success: function(response) {
|
||||
console.log(response);
|
||||
let html = '';
|
||||
let gagal = 0;
|
||||
let lulus = 0;
|
||||
$.each(response, function(index, value) {
|
||||
if (typeof value.message != 'undefined' && typeof value.status != 'undefined') {
|
||||
if (value.status == 'lulus') {
|
||||
html += '<span class="my-1 badge badge-success d-block text-left">' + value.message + '</span>';
|
||||
lulus += 1;
|
||||
}
|
||||
if (value.status == 'gagal') {
|
||||
html += '<span class="my-1 badge badge-danger d-block text-left">' + value.message + '</span>';
|
||||
gagal += 1;
|
||||
}
|
||||
}
|
||||
});
|
||||
$('form div#result').html(html);
|
||||
$('form div#result-text').html('<span class="badge badge-success align-middle">' + lulus + ' Lulus</span> <span class="badge badge-danger align-middle">' + gagal + ' Gagal</span>');
|
||||
if (response.status == 'lulus') {
|
||||
$('form button[type=submit]').remove();
|
||||
$('form div#result-action').html('<span class="badge badge-success align-middle">Lulus</span>');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@section('content')
|
||||
@isset($data)
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<form method="POST" action="javascrip:void(0)" enctype="multipart/form-data">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="row">
|
||||
<div class="col-8 align-self-center">
|
||||
<h3 class="card-title">{{ $data['question']['practice']['name'] . ' (Soal ' . $data['practice'] . ')' }}</h3>
|
||||
</div>
|
||||
<div class="col-4 text-right">
|
||||
@if ($data['previous'])
|
||||
<a href="{{ route('student sql practice do question', [$data['question']['sql_practice_id'], $data['previous']]) }}" class="btn btn-outline-secondary">Sebelumnya</a>
|
||||
@endif
|
||||
@if ($data['next'])
|
||||
<a href="{{ route('student sql practice do question', [$data['question']['sql_practice_id'], $data['next']]) }}" class="btn btn-outline-primary">Selanjutnya</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<div class="form-group mb-2">
|
||||
<textarea name="syntax" id="syntax" class="d-none">{{ isset($data['user']['syntax']) ? str_replace('praktek_mahasiswa_' . Auth::user()->id . '_', '', $data['user']['syntax']) : '' }}</textarea>
|
||||
</div>
|
||||
<div class="form-group mb-0">
|
||||
<div class="mb-2 d-flex justify-content-between">
|
||||
@php
|
||||
$result = isset($data['user']['result']) ? json_decode($data['user']['result'], true) : [];
|
||||
$html = '';
|
||||
$lulus = 0;
|
||||
$gagal = 0;
|
||||
@endphp
|
||||
@foreach ($result as $key => $value)
|
||||
@if (is_array($value))
|
||||
@if ($value['status'] != 'lulus')
|
||||
@php
|
||||
$html .= '<span class="my-1 badge badge-danger d-block text-left">' . $value['message'] . '</span>';
|
||||
$gagal++;
|
||||
@endphp
|
||||
@else
|
||||
@php
|
||||
$html .= '<span class="my-1 badge badge-success d-block text-left">' . $value['message'] . '</span>';
|
||||
$lulus++;
|
||||
@endphp
|
||||
@endif
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
<div class="d-block" id="result-text">
|
||||
@if ($html != '')
|
||||
<span class="badge badge-success align-middle">{{ $lulus }} Lulus</span>
|
||||
<span class="badge badge-danger align-middle">{{ $gagal }} Gagal</span>
|
||||
@else
|
||||
<h5 class="m-0 align-self-center">Hasil</h5>
|
||||
@endif
|
||||
</div>
|
||||
<div class="d-block" id="result-action">
|
||||
@if ($data['user']['correct'] == null)
|
||||
<button type="submit" class="btn btn-xs btn-success">Submit</button>
|
||||
@elseif ($data['user']['correct'] == 1)
|
||||
<span class="badge badge-success align-middle">Lulus</span>
|
||||
@else
|
||||
<button type="submit" class="btn btn-xs btn-success">Submit</button>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div id="result" class="border rounded bg-dark py-1 px-2"> {!! $html !!} </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-7">
|
||||
{!! $data['question']['question'] !!}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@endisset
|
||||
@endsection
|
||||
110
routes/web.php
110
routes/web.php
|
|
@ -75,6 +75,57 @@ Route::group(['middleware' => ['auth', 'admin']], function() {
|
|||
Route::get('/admin/python/proseshapustopik/{id_topik}', [PythonLearningTopicsController::class, 'proses_hapus']);
|
||||
Route::get('/admin/python/proseshapuspercobaan/{id_percobaan}', [PythonPercobaanController::class, 'proses_hapus']);
|
||||
|
||||
/* ----------------------------------- SQL ---------------------------------- */
|
||||
Route::group(['prefix' => 'admin/sql'], function () {
|
||||
Route::group(['prefix' => 'pembelajaran'], function () {
|
||||
Route::get('', 'SQLController@learning')->name('admin sql learning');
|
||||
Route::get('/read', 'SQLController@learningRead')->name('admin sql learning read');
|
||||
Route::get('/detail/{id}', 'SQLController@learningRead')->name('admin sql learning detail');
|
||||
Route::post('/create', 'SQLController@learningStore')->name('admin sql learning create');
|
||||
Route::post('/update/{id}', 'SQLController@learningUpdate')->name('admin sql learning update');
|
||||
Route::get('/delete/{id}', 'SQLController@learningDelete')->name('admin sql learning delete');
|
||||
|
||||
Route::group(['prefix' => 'log'], function () {
|
||||
Route::get('/read', 'SQLController@learningLogRead')->name('admin sql learning log read');
|
||||
Route::get('/detail/{id}', 'SQLController@learningLogRead')->name('admin sql learning log detail');
|
||||
});
|
||||
});
|
||||
|
||||
Route::group(['prefix' => 'praktek'], function () {
|
||||
Route::get('', 'SQLController@practice')->name('admin sql practice');
|
||||
Route::get('/read', 'SQLController@practiceRead')->name('admin sql practice read');
|
||||
Route::get('/detail/{id}', 'SQLController@practiceRead')->name('admin sql practice detail');
|
||||
Route::post('/create', 'SQLController@practiceStore')->name('admin sql practice create');
|
||||
Route::post('/update/{id}', 'SQLController@practiceUpdate')->name('admin sql practice update');
|
||||
Route::get('/delete/{id}', 'SQLController@practiceDelete')->name('admin sql practice delete');
|
||||
|
||||
Route::get('/log/read', 'SQLController@practiceLogRead')->name('admin sql practice log read');
|
||||
});
|
||||
|
||||
Route::group(['prefix' => 'latihan'], function () {
|
||||
Route::get('', 'SQLController@exercise')->name('admin sql exercise');
|
||||
Route::get('/read', 'SQLController@exerciseRead')->name('admin sql exercise read');
|
||||
Route::get('/detail/{id}', 'SQLController@exerciseRead')->name('admin sql exercise detail');
|
||||
Route::post('/create', 'SQLController@exerciseStore')->name('admin sql exercise create');
|
||||
Route::post('/update/{id}', 'SQLController@exerciseUpdate')->name('admin sql exercise update');
|
||||
Route::get('/delete/{id}', 'SQLController@exerciseDelete')->name('admin sql exercise delete');
|
||||
|
||||
Route::get('/log/read', 'SQLController@exerciseLogRead')->name('admin sql exercise log read');
|
||||
});
|
||||
|
||||
Route::group(['prefix' => 'ujian'], function () {
|
||||
Route::get('', 'SQLController@exam')->name('admin sql exam');
|
||||
Route::get('/read', 'SQLController@examRead')->name('admin sql exam read');
|
||||
Route::get('/detail/{id}', 'SQLController@examRead')->name('admin sql exam detail');
|
||||
Route::post('/create', 'SQLController@examStore')->name('admin sql exam create');
|
||||
Route::post('/update/{id}', 'SQLController@examUpdate')->name('admin sql exam update');
|
||||
Route::get('/delete/{id}', 'SQLController@examDelete')->name('admin sql exam delete');
|
||||
|
||||
Route::get('/log/read', 'SQLController@examLogRead')->name('admin sql exam log read');
|
||||
});
|
||||
});
|
||||
/* ----------------------------------- SQL ---------------------------------- */
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
|
@ -234,6 +285,65 @@ Route::middleware(['auth'])->group(function () {
|
|||
Route::get('download/jguide/{file}/{topic}', 'DownloadController@downJplasGuide')->name('file-download');
|
||||
Route::get('download/jresult/{file}/{topic}', 'DownloadController@downJplasResult')->name('file-download');
|
||||
|
||||
/* ----------------------------------- SQL ---------------------------------- */
|
||||
Route::group(['prefix' => 'student/sql'], function () {
|
||||
Route::group(['prefix' => 'pembelajaran'], function () {
|
||||
Route::get('', 'SQLController@learning')->name('student sql learning');
|
||||
Route::get('/read', 'SQLController@learningRead')->name('student sql learning read');
|
||||
Route::get('/detail/{id}', 'SQLController@learningRead')->name('student sql learning detail');
|
||||
Route::post('/create', 'SQLController@learningStore')->name('student sql learning create');
|
||||
Route::post('/update/{id}', 'SQLController@learningUpdate')->name('student sql learning update');
|
||||
Route::get('/delete/{id}', 'SQLController@learningDelete')->name('student sql learning delete');
|
||||
Route::get('/kerjakan/{id}', 'SQLController@learningDo')->name('student sql learning do');
|
||||
Route::post('/kerjakan/{id}', 'SQLController@learningDoExec')->name('student sql learning do exec');
|
||||
Route::get('/reset', 'SQLController@learningDoReset')->name('student sql learning do reset');
|
||||
});
|
||||
|
||||
Route::group(['prefix' => 'praktek'], function () {
|
||||
Route::get('', 'SQLController@practice')->name('student sql practice');
|
||||
Route::get('/read', 'SQLController@practiceRead')->name('student sql practice read');
|
||||
Route::get('/detail/{id}', 'SQLController@practiceRead')->name('student sql practice detail');
|
||||
Route::post('/create', 'SQLController@practiceStore')->name('student sql practice create');
|
||||
Route::post('/update/{id}', 'SQLController@practiceUpdate')->name('student sql practice update');
|
||||
Route::get('/delete/{id}', 'SQLController@practiceDelete')->name('student sql practice delete');
|
||||
Route::get('/kerjakan/{id}', 'SQLController@practiceDo')->name('student sql practice do');
|
||||
Route::get('/kerjakan/{id}/{question}', 'SQLController@practiceDo')->name('student sql practice do question');
|
||||
Route::post('/kerjakan/{id}', 'SQLController@practiceDoExec')->name('student sql practice do exec');
|
||||
Route::get('/reset', 'SQLController@practiceDoReset')->name('student sql practice do reset');
|
||||
});
|
||||
|
||||
Route::group(['prefix' => 'latihan'], function () {
|
||||
Route::get('', 'SQLController@exercise')->name('student sql exercise');
|
||||
Route::get('/read', 'SQLController@exerciseRead')->name('student sql exercise read');
|
||||
Route::get('/detail/{id}', 'SQLController@exerciseRead')->name('student sql exercise detail');
|
||||
Route::post('/create', 'SQLController@exerciseStore')->name('student sql exercise create');
|
||||
Route::post('/update/{id}', 'SQLController@exerciseUpdate')->name('student sql exercise update');
|
||||
Route::get('/delete/{id}', 'SQLController@exerciseDelete')->name('student sql exercise delete');
|
||||
|
||||
Route::get('/start', 'SQLController@exerciseStart')->name('student sql exercise start');
|
||||
Route::get('/kerjakan/detail/{id}', 'SQLController@exerciseDoDetail')->name('student sql exercise do detail');
|
||||
Route::get('/kerjakan/{id}', 'SQLController@exerciseDo')->name('student sql exercise do');
|
||||
Route::post('/kerjakan/{id}', 'SQLController@exerciseAnswer')->name('student sql exercise answer');
|
||||
Route::get('/complete', 'SQLController@exerciseComplete')->name('student sql exercise complete');
|
||||
});
|
||||
|
||||
Route::group(['prefix' => 'ujian'], function () {
|
||||
Route::get('', 'SQLController@exam')->name('student sql exam');
|
||||
Route::get('/read', 'SQLController@examRead')->name('student sql exam read');
|
||||
Route::get('/detail/{id}', 'SQLController@examRead')->name('student sql exam detail');
|
||||
Route::post('/create', 'SQLController@examStore')->name('student sql exam create');
|
||||
Route::post('/update/{id}', 'SQLController@examUpdate')->name('student sql exam update');
|
||||
Route::get('/delete/{id}', 'SQLController@examDelete')->name('student sql exam delete');
|
||||
|
||||
Route::get('/start', 'SQLController@examStart')->name('student sql exam start');
|
||||
Route::get('/kerjakan/detail/{id}', 'SQLController@examDoDetail')->name('student sql exam do detail');
|
||||
Route::get('/kerjakan/{id}', 'SQLController@examDo')->name('student sql exam do');
|
||||
Route::post('/kerjakan/{id}', 'SQLController@examAnswer')->name('student sql exam answer');
|
||||
Route::get('/complete', 'SQLController@examComplete')->name('student sql exam complete');
|
||||
});
|
||||
});
|
||||
/* ----------------------------------- SQL ---------------------------------- */
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user