297 lines
13 KiB
Plaintext
297 lines
13 KiB
Plaintext
<%-include("../partials/header.ejs") %>
|
||
<%-include("../partials/sidebar.ejs") %>
|
||
<div class="app-content">
|
||
<%-include("../partials/navbar.ejs") %>
|
||
|
||
<main>
|
||
<div class="container-fluid">
|
||
<!-- Breadcrumb start -->
|
||
<div class="row m-1">
|
||
<div class="col-12">
|
||
<h4 class="main-title">Sisteme Kayıtlı Öğrenciler</h4>
|
||
<p>
|
||
Öğrenciler ekleyebilir, düzenleyebilir ve silebilirsiniz
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="card ">
|
||
<div class="card-header ">
|
||
<div class="d-flex flex-row flex-1">
|
||
<h5 class="flex-fill">
|
||
Öğrenciler
|
||
</h5>
|
||
<div class="flex-min">
|
||
<button class="btn btn-success" data-bs-target="#add_student" data-bs-toggle="modal" type="button">
|
||
<i class="fa fa-plus"></i>
|
||
Öğrenci ekle
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body p-0">
|
||
<div class="app-datatable-default overflow-auto">
|
||
<table class="table display app-data-table default-data-table" id="studentslist"></table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
<div aria-hidden="true" class="modal fade" id="add_student" tabindex="-1">
|
||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">Yeni Öğrenci Ekle</h5>
|
||
<button aria-label="Close" class="btn-close m-0 fs-5" data-bs-dismiss="modal" type="button"></button>
|
||
</div>
|
||
<form class="modal-body" id="studentsaveform" onsubmit="saveStudent(this);return false;">
|
||
<div class="row app-form">
|
||
<div class="col-md-6 mt-3">
|
||
<label class="form-label">Adı <small class="text-danger">*</small></label>
|
||
<input type="text" class="form-control" name="name" placeholder="Öğrencinin adı" required min="3">
|
||
</div>
|
||
<div class="col-md-6 mt-3">
|
||
<label class="form-label">Soyadı</label>
|
||
<input type="text" class="form-control" name="surname" placeholder="Öğrencinin Soyadı">
|
||
</div>
|
||
<div class="col-md-6 mt-3">
|
||
<label class="form-label">Numarası</label>
|
||
<input type="text" class="form-control" name="studentno" placeholder="Öğrencinin Numarası">
|
||
</div>
|
||
<div class="col-md-6 mt-3">
|
||
<label class="form-label">E-Posta Adresi</label>
|
||
<input type="email" class="form-control" name="email" placeholder="Öğrencinin E-Posta Adresi">
|
||
</div>
|
||
<div class="col-md-6 mt-3">
|
||
<label class="form-label">Doğum Tarihi</label>
|
||
<input type="date" class="form-control" name="birthdate" placeholder="Öğrencinin E-Posta Adresi">
|
||
</div>
|
||
<div class="col-md-6 mt-3">
|
||
<label class="form-label">Cinsiyeti</label>
|
||
<select name="gender" class="form-control">
|
||
<option>Belirtilmemiş</option>
|
||
<option value="male">Erkek</option>
|
||
<option value="female">Kadın</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-12 mt-3">
|
||
<label class="form-label">Açıklama</label>
|
||
<textarea name="description" class="form-control" placeholder="Öğrenci hakkında"></textarea>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-outline-success" type="submit" form="studentsaveform">Kaydet</button>
|
||
<button class="btn btn-light-secondary" data-bs-dismiss="modal" type="button">Kapat</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div aria-hidden="true" class="modal fade" id="update_student" tabindex="-1">
|
||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">Öğrenci güncelle</h5>
|
||
<button aria-label="Close" class="btn-close m-0 fs-5" data-bs-dismiss="modal" type="button"></button>
|
||
</div>
|
||
<form class="modal-body" id="studentupdateform" onsubmit="updateStudent(this);return false;">
|
||
<input type="hidden" name="id">
|
||
<div class="row app-form">
|
||
<div class="col-md-6 mt-3">
|
||
<label class="form-label">Adı <small class="text-danger">*</small></label>
|
||
<input type="text" class="form-control" name="name" placeholder="Öğrencinin adı" required min="3">
|
||
</div>
|
||
<div class="col-md-6 mt-3">
|
||
<label class="form-label">Soyadı</label>
|
||
<input type="text" class="form-control" name="surname" placeholder="Öğrencinin Soyadı">
|
||
</div>
|
||
<div class="col-md-6 mt-3">
|
||
<label class="form-label">Numarası</label>
|
||
<input type="text" class="form-control" name="studentno" placeholder="Öğrencinin Numarası">
|
||
</div>
|
||
<div class="col-md-6 mt-3">
|
||
<label class="form-label">E-Posta Adresi</label>
|
||
<input type="email" class="form-control" name="email" placeholder="Öğrencinin E-Posta Adresi">
|
||
</div>
|
||
<div class="col-md-6 mt-3">
|
||
<label class="form-label">Doğum Tarihi</label>
|
||
<input type="date" class="form-control" name="birthdate" placeholder="Öğrencinin E-Posta Adresi">
|
||
</div>
|
||
<div class="col-md-6 mt-3">
|
||
<label class="form-label">Cinsiyeti</label>
|
||
<select name="gender" class="form-control">
|
||
<option>Belirtilmemiş</option>
|
||
<option value="male">Erkek</option>
|
||
<option value="female">Kadın</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-12 mt-3">
|
||
<label class="form-label">Açıklama</label>
|
||
<textarea name="description" class="form-control" placeholder="Öğrenci hakkında"></textarea>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-outline-success" type="submit" form="studentupdateform">Güncelle</button>
|
||
<button class="btn btn-light-secondary" data-bs-dismiss="modal" type="button">Kapat</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
let dataTable;
|
||
$(function(){
|
||
dataTable = $("#studentslist").DataTable({
|
||
serverSide: true,
|
||
processing: true,
|
||
autoWidth: false,
|
||
ajax: {
|
||
url: "/students/list",
|
||
method:"post"
|
||
},
|
||
columns: [
|
||
{
|
||
width: "1%",
|
||
title: "#",
|
||
data: null,
|
||
render: function (data, type, row, meta) {
|
||
return meta.row + 1;
|
||
}
|
||
},
|
||
{
|
||
title: "Adı Soyadı",
|
||
data: null,
|
||
name: "fullname",
|
||
render: function (data, row) {
|
||
return `${data.name} ${data.surname || ''}`;
|
||
}
|
||
},
|
||
{
|
||
title: "Öğrenci No",
|
||
data: "studentno",
|
||
name: "studentno"
|
||
},
|
||
{
|
||
title: "Cinsiyet",
|
||
data: "gender",
|
||
name: "gender",
|
||
render: function (data) {
|
||
if (data === 'male') return 'Erkek';
|
||
if (data === 'female') return 'Kadın';
|
||
return 'Belirtilmemiş';
|
||
}
|
||
},
|
||
{
|
||
title: "E-Posta",
|
||
data: "email",
|
||
name: "email"
|
||
},
|
||
{
|
||
width: "1%",
|
||
title: "İşlemler",
|
||
data: null,
|
||
orderable: false, // İşlemlere göre sıralama yapılamasın
|
||
render: function (data) {
|
||
return `
|
||
<div class="btn-group d-flex flex-row flex-nowrap" role="group">
|
||
<button class="btn btn-sm btn-outline-primary text-nowrap" onclick="updateModal(this)" title="Düzenle">
|
||
<i class="fa fa-edit"></i>
|
||
Düzenle
|
||
</button>
|
||
<button class="btn btn-sm btn-outline-danger text-nowrap" onclick="deleteStudent(${data.id})" title="Sil">
|
||
<i class="fa fa-trash"></i>
|
||
Sil
|
||
</button>
|
||
</div>`;
|
||
}
|
||
}
|
||
],
|
||
"language": {
|
||
"url": "https://cdn.datatables.net/plug-ins/1.13.6/i18n/tr.json"
|
||
}
|
||
});
|
||
});
|
||
async function saveStudent(form)
|
||
{
|
||
blockui("#add_student .modal-content");
|
||
$.ajax({
|
||
url: "/students/store",
|
||
type: "post",
|
||
data: new FormData(form),
|
||
processData: false,
|
||
contentType: false,
|
||
success: function(response) {
|
||
dataTable.ajax.reload(null, false);
|
||
ublockui();
|
||
},
|
||
error: function(err) {
|
||
ublockui();
|
||
},
|
||
});
|
||
}
|
||
async function updateStudent(form)
|
||
{
|
||
blockui("#update_student .modal-content");
|
||
$.ajax({
|
||
url: "/students/update",
|
||
type: "post",
|
||
data: new FormData(form),
|
||
processData: false,
|
||
contentType: false,
|
||
success: function(response) {
|
||
dataTable.ajax.reload(null, false);
|
||
$("#update_student").modal("hide");
|
||
ublockui();
|
||
},
|
||
error: function(err) {
|
||
ublockui();
|
||
},
|
||
});
|
||
}
|
||
|
||
async function updateModal(tr)
|
||
{
|
||
let data = dataTable.row($(tr).closest('tr')).data();
|
||
|
||
$("#update_student form").get(0).reset();
|
||
$("#update_student [name='id']").val(data.id);
|
||
|
||
$("#update_student form input,#update_student form textarea").each(function(){
|
||
let name = this.name;
|
||
$(this).val(data[name]);
|
||
});
|
||
$("#update_student form select").each(function(){
|
||
let name = this.name;
|
||
$(this).find("option:selected").removeAttr("selected");
|
||
$(this).find(`option[value="${data[name]}"]`).attr("selected","selected");
|
||
});
|
||
$("#update_student").modal("show");
|
||
}
|
||
function blockui(ui)
|
||
{
|
||
$(blockui.id = ui).block({
|
||
message: '<div class="loader-container-box"><div class="loader"></div></div>',
|
||
//timeout: 13000,
|
||
overlayCSS: {
|
||
backgroundColor: 'rgba(var(--dark), 0.8)',
|
||
opacity: 0.8,
|
||
borderRadius: 'var(--app-border-radius)',
|
||
cursor: 'wait'
|
||
},
|
||
css: {
|
||
border: 0,
|
||
padding: 0,
|
||
backgroundColor: 'transparent'
|
||
}
|
||
});
|
||
}
|
||
function ublockui()
|
||
{
|
||
$(blockui.id).unblock()
|
||
}
|
||
</script>
|
||
<%-include("../partials/footer.ejs") %> |