Scribd
Upload
43 views

Index Regis

This document contains code for a student registration page in Laravel. It displays the student's profile information and notes from their academic advisor. Tables are used to display available courses for each year/level that are awaiting approval. Styling is applied using CSS.

Uploaded by

Fadli Achsan
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
43 views

Index Regis

This document contains code for a student registration page in Laravel. It displays the student's profile information and notes from their academic advisor. Tables are used to display available courses for each year/level that are awaiting approval. Styling is applied using CSS.

Uploaded by

Fadli Achsan
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 13

@extends('layouts.

layout')
@section('url_back', url('pmo/master/tpp'))
@section('page_title', 'Registrasi')
@section('css_section')
<style>
.row {
margin-left: -5px;
margin-right: -5px;
}

.column {
float: left;
width: 100%;
/* padding: 5px; */
}

/* Clearfix (clear floats) */


.row::after {
content: "";
clear: both;
display: table;
}

table {
border-collapse: collapse;
width: 480px;
border-spacing: 0;
border: 1px solid #ddd;
}

th,
td {
text-align: left;
}

tr:nth-child(even) {
background-color: #f2f2f2;
}

.table> :not(caption)>*>* {
padding: 0.5rem 1rem;
}
</style>
@endsection

@section('content')
<div class="content-body">
<div class="row mb-2">
<div class="col">
<h3>Registrasi</h3>
</div>
</div>

<div class="card">
<div class="card-body my-25">
<div class="row">
<div class="col-3">
<span class="fw-bolder">Mahasiswa</span>
</div>
<div class="col-3">
: {{ $name->fullname }}
</div>
<div class="col-3">
<span class="fw-bolder">Tahun Akademik</span>
</div>
<div class="col-3">
: -
</div>
</div>

<div class="row mt-1">


<div class="col-3">
<span class="fw-bolder">Kelas/Program Studi</span>
</div>
<div class="col-3">
: {{ $name->class }} / {{ $name->study_program-
>studyprogramname }}
</div>
<div class="col-3">
<span class="fw-bolder">IP Semester (IPS)</span>
</div>
<div class="col-3">
: -
</div>
</div>

<div class="row mt-1">


<div class="col-3">
<span class="fw-bolder">Dosen Pembimbing Akademik</span>
</div>
<div class="col-3">
: -
</div>
<div class="col-3">
<span class="fw-bolder">IP Kumulatif (IPK)</span>
</div>
<div class="col-3">
: -
</div>
</div>
</div>
</div>
<div class="demo-spacing-0">
<div class="alert alert-danger" role="alert">
<div class="alert-body"><i
data-feather='alert-triangle'></i><strong>Catatan Dosen Wali : </strong> <p>Mata
Kuliah A Harus Diambil</p></div>

</div>
</div>
{{-- Tabel sebelum ACC --}}

<div class="row p-25 match-height belum-registrasi">

<div class="alert alert-warning text-center belum-acc" role="alert">


<div class="alert-body"><strong>Sedang Menunggu ACC.</strong></div>
</div>
{{-- <div class="col-xl-12 col-lg-12">
<div class="card">
<div class="card-body">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link " id="profile-tab" data-bs-
toggle="tab" href="#profile" aria-controls="profile" role="tab" aria-
selected="true">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="arsip-tab" data-bs-
toggle="tab" href="#arsip" aria-controls="arsip" role="tab" aria-
selected="false">Arsip KRS</a>
</li>
<li class="nav-item">
<a class="nav-link" id="rencana-tab" data-bs-
toggle="tab" href="#rencana" aria-controls="rencana" role="tab" aria-
selected="false">Rencana Studi Dan Nilai</a>
</li>
<li class="nav-item">
<a class="nav-link " id="kehadiran-tab" data-bs-
toggle="tab" href="#kehadiran" aria-controls="kehadiran" role="tab" aria-
selected="false">Kehadiran</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane " id="profile" aria-
labelledby="profile-tab" role="tabpanel">
<div class="card-header" style="height:71px;">
<h4 class="card-title">Ditawarkan</h4>
</div>
<div class="tab-content">
<div class="tab-pane active" id="1" aria-
labelledby="1-tab" role="tabpanel">
<div class="card-body">
<div class="table-responsive">
<table class="table text-nowrap
text-center table_matakuliah_tersedia">
<thead>
<tr>
<th
class="aksi">Aksi</th>
<th style="max-width:
70px;">Kode MK</th>
<th>Nama MK</th>
<th>SKS</th>
<th>Kelas</th>
</tr>
</thead>
<tbody class="awal" id="body1">

</tbody>
<tfoot>
<tr class="border-top-dark
border-top-1" id="coba1">
<td class="aksi"><input
type="checkbox" class="all"></td>
<td colspan="2">Total
SKS :</td>
<td
class="total_credit_tersedia">0</td>
<td></td>
</tr>
</tfoot>
</table>
</div>
<div class="col-12 text-end mr-25 mt-
2">
<button type="button" class="btn
btn-primary btn-sm move">Ambil Paket</button>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="arsip" aria-
labelledby="arsip-tab" role="tabpanel">
2
</div>
<div class="tab-pane" id="rencana" aria-
labelledby="rencana-tab" role="tabpanel">
3
</div>
<div class="tab-pane" id="kehadiran" aria-
labelledby="kehadiran-tab" role="tabpanel">
4
</div>
</div>
</div>
</div>
</div> --}}
<div class="col-xl-6 col-12 p-0">
<div class="card me-50">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="tingkat-1-tab" data-bs-
toggle="tab" href="#tingkat-1" aria-controls="tingkat-1" role="tab" aria-
selected="true">Tingkat 1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tingkat-2-tab" data-bs-
toggle="tab" href="#tingkat-2" aria-controls="tingkat-2" role="tab" aria-
selected="false">Tingkat 2</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tingkat-3-tab" data-bs-
toggle="tab" href="#tingkat-3" aria-controls="tingkat-3" role="tab" aria-
selected="false">Tingkat 3</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tingkat-4-tab" data-bs-
toggle="tab" href="#tingkat-4" aria-controls="tingkat-4" role="tab" aria-
selected="false">Tingkat 4</a>
</li>
</ul>
<div class="card-header" style="height:71px;">
<h4 class="card-title">Ditawarkan</h4>
</div>
<div class="tab-content">
<div class="tab-pane active" id="tingkat-1" aria-
labelledby="tingkat-1-tab" role="tabpanel">
<div class="card-body">
<div class="table-responsive">
<table class="table text-nowrap text-center
table_matakuliah_tersedia">
<thead>
<tr>
<th class="aksi">Aksi</th>
<th style="max-width: 70px;">Kode
MK</th>
<th>Nama MK</th>
<th>SKS</th>
<th>Kelas</th>
</tr>
</thead>
<tbody class="awal" id="body1">

</tbody>
<tfoot>
<tr class="border-top-dark border-top-
1" id="coba1">
<td class="aksi"><input
type="checkbox" class="all"></td>
<td colspan="2">Total SKS :</td>
<td
class="total_credit_tersedia">0</td>
<td></td>
</tr>
</tfoot>
</table>
</div>
<div class="col-12 text-end mr-25 mt-2">
<button type="button" class="btn btn-primary
btn-sm move">Ambil Paket</button>
</div>
</div>
</div>
<div class="tab-pane" id="tingkat-2" aria-
labelledby="tingkat-2-tab" role="tabpanel">Tingkat 2</div>
<div class="tab-pane" id="tingkat-3" aria-
labelledby="tingkat-3-tab" role="tabpanel">Tingkat 3</div>
<div class="tab-pane" id="tingkat-4" aria-
labelledby="tingkat-4-tab" role="tabpanel">Tingkat 4</div>
</div>
</div>
</div>
<div class="col-xl-6 col-12 p-0">
<div class="card ms-50">
<div class="card-header">
<h4 class="card-title">Diambil</h4>
<button class="btn btn-primary btn-sm cek-jadwal" data-bs-
toggle="modal" data-bs-target="#large">Cek
Jadwal</button>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table text-nowrap text-center
table_matakuliah_diambil">
<thead>
<tr>
<th class="aksi">Aksi</th>
<th style="max-width: 70px;">Kode MK</th>
<th>Nama MK</th>
<th>SKS</th>
<th>Kelas</th>
</tr>
</thead>
<tbody id="body2">
</tbody>
<tfoot>
<tr class="border-top-dark border-top-1"
id="coba2">
<td class="aksi"><input type="checkbox"
class="all"></td>
<td colspan="2">Total SKS :</td>
<td class="total_credit_diambil">0</td>
<td></td>
</tr>
</tfoot>
</table>
</div>
<div class="col-12 text-end mr-25 mt-2">
<button class="btn btn-primary btn-sm moveright">Hapus
Paket</button>
</div>
</div>
</div>
</div>
</div>

<!-- Modal -->


<div class=" modal fade text-start" id="large" tabindex="-1" aria-
labelledby="myModalLabel17"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel17">Large
Modal</h4>
<button type="button" class="btn-close" data-bs-
dismiss="modal" aria-label="Close"></button>
</div>

<div class="modal-body">

<!-- Calendar -->


<div class="col position-relative">
<div class="card shadow-none border-0 mb-0 rounded-0">
<div class="card-body pb-0">
<div id="calendar"></div>
</div>
</div>
</div>
<!-- /Calendar -->
</div>

<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-
dismiss="modal">Accept</button>
</div>
</div>
</div>
</div>

<!-- Tampilan Sudah ACC -->


<div class="card sudah-acc">
<div class="card-header text-black">
<b>Semester {{ $semester }}</b>
<span class="text-success fw-bolder text-krs">Anda Sudah Cetak
KRS</span>
<button class="btn create-new btn-primary cetak-krs" id="{{ $data-
>studentid }}">Cetak KRS</button>
</div>
<div class="card-body">
<table class="table datatables-acc">
<thead>
<tr>
<th>No</th>
<th>Kode Mata Kuliah</th>
<th>Nama Mata Kuliah</th>
<th>Kategori</th>
<th>SKS</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">Total SKS :</td>
<td id="total-sksacc"></td>
</tr>
</tfoot>
</table>
</div>
</div>

<div class="text-center">
<button class="btn btn-primary siap_acc">Siap ACC Wali</button>
</div>

</div>
@endsection

@section('js_section')
<script>
function reload_table(table_class, target) {
let list = $(table_class + ' tbody tr');
let total_sks = 0;
list.each(function(index, item) {

let currentRow = $(item).closest("tr");

let sks = parseInt(currentRow.find("td:eq(3)").text());


total_sks += sks;

});
$(".total_credit_" + target).text(total_sks)
}

$(document).ready(function() {
let id = "{{ $name->studentid }}";
console.log(id);
//Mata Kuliah Pindah Ke Kanan
$(document).on('click', '.move', function() {

var body = $('.table_matakuliah_diambil tbody');


$
('.table_matakuliah_tersedia .update:checked').each(function(index, item) {
var checkbox = $(item);

body.append(checkbox.closest('tr'));

$.ajax({
url: "{{ url('api/registrasi/store_mk') }} ",
success: function(result) {

},
method: 'POST',
data: "id=" + $(this).attr('id') +
'&_token=' + $('meta[name="csrf-
token"]').attr('content')
})
// checkbox.closest('td').remove();
// $('input[type=checkbox]').hide();
$('input[type=checkbox]').prop('checked', true);
$('.all').prop('checked', false);
});
reload_table(".table_matakuliah_diambil", "diambil");
reload_table(".table_matakuliah_tersedia", "tersedia");

});

// Mata Kuliah Pindah Ke Kiri


$(document).on('click', '.moveright', function() {
var body = $('.table_matakuliah_tersedia tbody');
$('.table_matakuliah_diambil .update:checked').each(function(index,
item) {
var checkbox = $(item);
body.append(checkbox.closest('tr'));

$.ajax({
url: "{{ url('api/registrasi/delete_mk') }} ",

method: 'DELETE',
data: "id=" + $(this).attr('id') +
'&_token=' + $('meta[name="csrf-
token"]').attr('content')
})
// checkbox.closest('td').remove();
$('input[type=checkbox]').prop('checked', false);
});

reload_table(".table_matakuliah_tersedia", "tersedia");
reload_table(".table_matakuliah_diambil", "diambil");
});

// Siap ACC
$(document).on('click', '.siap_acc', function() {
var body = $('.table_matakuliah_diambil tbody');
$('.table_matakuliah_diambil .update:checked').each(function(index,
item) {
var checkbox = $(item);
let id = "{{ $name->studentid }}";
console.log(id);
body.append(checkbox.closest('tr'));

$.ajax({
url: "{{ url('api/registrasi/siap_acc') }} ",
success: Swal.fire({
title: 'Anda sudah yakin?',
text: "Untuk mengambil mata kuliah ini",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Lanjutkan',
confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger mx-1',
buttonsStyling: false,
}).then(function(result) {
if (result.error) {

Swal.fire({
type: "error",
title: 'Oops...',
text: result.message,
});

} else {

Swal.fire({
icon: "success",
title: 'Data Berhasil Ditambah!',
text: result.message,
timer: 2000,
showConfirmButton: false
});
location.reload();

}),
method: 'POST',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr(
'content')
},
data: {
id: $(this).attr('id'),
studentid: id
}
})
// checkbox.closest('td').remove();
$('input[type=checkbox]').prop('checked', true);
$('.all').prop('checked', false);
});

reload_table(".table_matakuliah_diambil", "diambil");
reload_table(".table_matakuliah_tersedia", "tersedia");
});

// Select ALL Mata Kuliah


$(document).ready(function() {
$('.all').click(function() {
var checked = $(this).prop('checked');
$('.matakuliah').find('input:checkbox').prop('checked',
checked);
});
})

// Isi Table Kiri


$.ajax({
url: "{{ url('api/registrasi/list_mk') }}/" + id,
success: function(result) {
var credit = 0;
for (i = 0; i < result.data.length; i++) {

let credit = (result.data[i].credit) ?


result.data[i].credit : 0;

$('#body1').append(`<tr>
<td class="matakuliah"><input type="checkbox"
class="update" id="${result.data[i].id}"></td>
<td>${result.data[i].subjectcode}</td>
<td>${result.data[i].subjectname}</td>
<td>${credit}</td>
<td>Kelas A</td>
</tr>`)

$total_credit = result.data[i].credit;

// $('.total_ftf_tersedia').html($total_creditftf);
$('.total_credit_tersedia').html($total_credit);
}
}
})

// Isi Table Kanan


$.ajax({
url: "{{ url('api/registrasi/list_studyplan') }}/" + id,
success: function(result) {
var credit = 0;
let status = "{{ $status }}";
for (i = 0; i < result.data.length; i++) {
let credit = (result.data[i].credit) ?
result.data[i].credit : 0;

$('#body2').append(`<tr>
<td class="matakuliah" id="hilang"><input
type="checkbox" class="update" id="${result.data[i].id}"></td>
<td>${result.data[i].subjectcode}</td>
<td>${result.data[i].subjectname}</td>
<td>${credit}</td>
<td>Kelas A</td>
</tr>`)

$total_credit = result.data[i].credit;

$('.total_credit_diambil').html($total_credit);
if (status == "Siap ACC") {
$('input[type=checkbox]').hide();
} else {
$('input[type=checkbox]').show();
}
$('input[type=checkbox]').prop('checked', true);
$('.all').prop('checked', false);
}
}
})

// Isi Tabel Sudah di ACC oleh DOSWAL

$('.datatables-acc').DataTable({
ajax: {
url: "{{ url('/api/registrasi/list_matakuliah_perwalian') }}/"
+ id,
dataSrc: function(json) {
let temp = json.data;
let total = 0;
temp.forEach(element => {
total += element.credit;
});

$('#total-sksacc').html(total);
return json.data;
},
},
columns: [{
data: 'DT_RowIndex'
}, {
data: 'subjectcode'
},
{
data: 'subjectname'
},
{
data: 'kategori'
},
{
data: 'credit'
}
],

"drawCallback": function(settings) {
feather.replace();

}
})

// Tombol Cetak KRS


$(document).on('click', '.cetak-krs', function() {
$.ajax({
url: "{{ url('registrasi/pdf') }} ",
success: Swal.fire({
title: 'Anda sudah yakin?',
text: "Untuk menyetujui",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Lanjutkan',
confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger mx-1',
buttonsStyling: false,
}).then(function(result) {
if (result.error) {

Swal.fire({
type: "error",
title: 'Oops...',
text: result.message,
});

} else {

Swal.fire({
icon: "success",
title: 'Data Berhasil Ditambah!',
text: result.message,
timer: 2000,
showConfirmButton: false
});
location.reload();

}),
method: 'POST',
data: "id=" + $(this).attr('id') +
'&_token=' + $('meta[name="csrf-token"]').attr(
'content')
})
})

// Hide and Show Tampilan

let status = "{{ $status }}";


if (status == "Belum Registrasi") {
$('.belum-registrasi').show();
$('.siap_acc').show();
$('.sudah-acc').hide();
$('.belum-acc').hide();
} else if (status == "Sudah ACC") {
$('.belum-registrasi').hide();
$('.sudah-acc').show();
$('.text-krs').hide();
$('.siap_acc').hide();
} else if (status == "Sudah Cetak KRS") {
$('.belum-registrasi').hide();
$('.sudah-acc').show();
$('.text-krs').show();
$('.cetak-krs').hide();
$('.siap_acc').hide();
} else {
$('.belum-registrasi').show();
$('.sudah-acc').hide();
$('.belum-acc').show();
$('.move').hide();
$('.moveright').hide();
$('.cek-jadwal').hide();
$('.aksi').hide();
$('.siap_acc').hide();
}

})
</script>
@endsection

You might also like