Proje Dizini Tablo Yapısı CREATE TABLE IF NOT EXISTS `personel` (
`personel_id` int(11) NOT NULL AUTO_INCREMENT,
`adi` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
`vardiya_aktif` tinyint(1) NOT NULL DEFAULT '0',
PRIMARY KEY (`personel_id`)
) ENGINE=MyISAM AUTO_INCREMENT=21 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
REPLACE INTO `personel` (`personel_id`, `adi`, `vardiya_aktif`) VALUES
(1, 'QuarkChain', 1),
(2, 'gokhanb', 0),
(3, 'Mehmet Yılmaz', 0),
(4, 'Ali Kaya', 0),
(5, 'Ayşe Şahin', 0),
(6, 'Fatma Demir', 0),
(7, 'Mustafa Arslan', 0),
(8, 'Zeynep Çelik', 0),
(9, 'Emre Öztürk', 0),
(10, 'Gülşah Akgün', 0),
(11, 'Serdar Yıldız', 1),
(12, 'Deniz Kocaman', 0),
(13, 'Şule Taş', 1),
(14, 'Hasan Erdoğan', 0),
(15, 'Nur Gürbüz', 0),
(16, 'Oğuzhan Yavuz', 0),
(17, 'Elif Aktaş', 0);
CREATE TABLE IF NOT EXISTS `vardiya` (
`vardiya_tarihi` date NOT NULL,
`personel_id` int(11) NOT NULL,
`vardiya_turu` enum('erken','gec') COLLATE utf8_unicode_ci NOT NULL,
`vardiya_guncelleme_tarih` timestamp NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
KEY `personel_id` (`personel_id`),
KEY `vardiya_tarihi` (`vardiya_tarihi`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;index.php <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Rubik:400,500,600,700,800&subset=latin-ext">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<title>Vardiya</title>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/nprogress@0.2.0/nprogress.css">
<link rel="stylesheet" type="text/css" href="style.css?time=<?php echo time(); ?>">
</head>
<body>
<div class="kutu kutu-personel">
<div class="kutu-baslik">
<h3><i class="fa fa-users"></i> Personeller (<span data-dinamik="personel-sayisi">0</span>) <small>(Müsait)</small></h3>
</div>
<div class="liste">
<ol></ol>
</div>
<div class="ekle">
<input type="text" placeholder="Yeni Personel">
<i class="fa fa-user-plus"></i>
</div>
</div>
<div class="kutu kutu-tablo">
<table>
</table>
<div class="kutu-eylem">
<i class="fa fa-info-circle"></i> Vardiya tablosuna personel eklemek için isimlere tıklayın.
</div>
<!--
<div class="kutu-eylem">
<button class="btn-temel">Değişiklikleri Kaydet</button>
</div>
-->
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="yardimci_fnk.js"></script>
<script src="script.js?time=<?php echo time(); ?>"></script>
</body>
</html>script.js var haftalikVeri = ['bos', 'bos', 'bos', 'bos', 'bos', 'bos', 'bos'];
var vardiyaTurleri = {
bos: "Boş",
erken: "Erken",
gec: "Geç"
}
// Haftanın günlerini alalım
var simdikiZaman = new Date();
var haftaNumarasi = simdikiZaman.getWeek();
var haftaninIlkGunu = new Date(simdikiZaman);
haftaninIlkGunu.setDate(simdikiZaman.getDate() - simdikiZaman.getDay() + 1);
var haftaninSonGunu = new Date(haftaninIlkGunu);
haftaninSonGunu.setDate(haftaninIlkGunu.getDate() + 6);
var gunler = ["Pazartesi", "Salı", "Çarşamba", "Perşembe", "Cuma", "Cumartesi", "Pazar"];
// Vardiya tablosunu güncelleyen fonksiyon
function vardiya_tablosu(personelListesi) {
var table = $("<table>");
var thead = $("<thead>");
var tbody = $("<tbody>");
// Personel listesini alfabetik olarak sırala
personelListesi.sort(function(a, b) {
return a.adi.localeCompare(b.adi);
});
// Tabloyu temizle
tbody.empty();
// Tablo başlıkları
var theadRow = $("<tr>");
theadRow.append("<th>Personel</th>");
for (var i = new Date(haftaninIlkGunu), j = 0; i <= haftaninSonGunu; i.setDate(i.getDate() + 1), j++) {
theadRow.append("<th>" + gunler[j % 7] + "</th>");
}
thead.append(theadRow);
table.append(thead);
// Her bir personel için satır oluştur
for (var a = 0; a < personelListesi.length; a++) {
var personel = personelListesi[a];
var tbodyRow = $("<tr>").data("id", personel.personel_id);
tbodyRow.append("<td class=\"sutun-personel\"><i class=\"fa fa-lg fa-trash\"></i>" + personel.adi + "</td>");
for (var i = new Date(haftaninIlkGunu), j = 0; i <= haftaninSonGunu; i.setDate(i.getDate() + 1), j++) {
var vardiyaTuru = "bos";
if (typeof personel.haftalikVeri[i.formatDate("Y-m-d")] != "undefined") {
vardiyaTuru = personel.haftalikVeri[i.formatDate("Y-m-d")];
}
var slug = url_title(vardiyaTuru);
var span = $("<span>").data("tur", slug).addClass("etiket " + slug).text(vardiyaTurleri[vardiyaTuru]).click(function () {
// Span üzerine tıklandığında vardiya turunu değiştir
yeniVardiyaTuru = toggleVardiyaTuru($(this).text());
$(this).attr("class", "etiket " + url_title(yeniVardiyaTuru)).text(yeniVardiyaTuru);
saveVardiyaData();
});
tbodyRow.append($("<td>").data("tarih", i.formatDate("Y-m-d")).append(span));
}
tbody.append(tbodyRow);
}
// Eğer vardiyadakiler dizisi boşsa mesaj göster
if (personelListesi.length === 0) {
tbody.append($("<tr>").append($("<td>").attr("colspan", 9).addClass("sutun-bos").text("Bu hafta vardiya boş!")));
}
thead.append(theadRow);
table.append(thead);
table.append(tbody);
$(".kutu-tablo table").replaceWith(table);
$("[data-dinamik='personel-sayisi']").text($(".liste ol li").length - personelListesi.length);
}
$(document).ready(function () {
$(".ekle input").keyup(function(event){
if (event.keyCode == 13) {
var personelAdi = $(this).val();
$(this).val("");
$.ajax({
url: "json.php",
type: "POST",
dataType: "JSON",
data: {islem: "yeniPersonel", adi: personelAdi},
success: function() {
Swal.fire({
icon: "success",
title: "Yeni personel başarıyla eklendi.",
html: personelAdi,
confirmButtonText: "Tamam"
});
getVardiyaData();
}
});
}
});
$(document).on("click", ".liste ol li", function(){
$li = $(this);
$(this).fadeOut("fast", function(){
$.ajax({
url: "json.php",
type: "POST",
data: {islem: "vardiya_aktif", personel_id: $li.data("personel_id"), vardiya_aktif: 1},
success: function() {
getVardiyaData();
}
});
});
});
$(document).on("click", "table tbody tr td.sutun-personel", function(){
var $td = $(this);
var $tr = $td.parent();
Swal.fire({
title: "Personeli vardiyadan kaldırmak istiyor musunuz?",
html: $td.text(),
showDenyButton: true,
icon: "question",
confirmButtonText: "Evet, Kaldır!",
denyButtonText: "Vazgeç"
}).then((result) => {
if (result.isConfirmed) {
$tr.fadeOut(function(){
$.ajax({
url: "json.php",
type: "POST",
dataType: "JSON",
data: {islem: "vardiya_aktif", personel_id: $tr.data("id"), vardiya_aktif: 0},
success: function(){
Swal.fire({
icon: "success",
title: $td.text() + " başarıyla kaldırıldı",
confirmButtonText: "Tamam"
});
getVardiyaData();
}
});
});
}
});
});
getVardiyaData();
});
function getVardiyaData() {
NProgress.configure({ parent: ".kutu-eylem" });
NProgress.start();
$.ajax({
url: "json.php",
type: "GET",
dataType: "json",
data: {
ilk_gun: haftaninIlkGunu.formatDate("Y-m-d 00:00:00"),
son_gun: haftaninSonGunu.formatDate("Y-m-d 23:59:59")
},
success: function (json) {
NProgress.done();
// JSON yanıtını işleme burada
var vardiyadakiler = [];
$(".liste ol").empty();
$.each(json, function(index, personel){
if (personel.vardiya_aktif) {
vardiyadakiler.push(personel);
} else {
$(".liste ol").append($("<li>").data(personel).text(personel.adi));
}
});
$(".liste").scrollTop($(".liste")[0].scrollHeight);
vardiya_tablosu(vardiyadakiler);
},
error: function (xhr, status, error) {
// Hata durumlarını burada işleyebilirsiniz
console.error("Hata: " + error);
}
});
}
function saveVardiyaData() {
NProgress.configure({ parent: ".kutu-eylem" });
NProgress.start();
// Veritabanına eklemek için kullanılacak verileri topluyoruz
var vardiyaDizisi = [];
var vardiyaAktif = [];
// Tablodaki her bir satırı dönerek verileri topluyoruz
$("table tbody tr").each(function () {
var $tr = $(this);
$tr.find("td").each(function(){
$td = $(this);
$span = $td.find("span");
if (vardiyaAktif.indexOf($tr.data("id")) == -1) {
vardiyaAktif.push($tr.data("id"));
}
if ( $span.length && ! $span.hasClass("bos")) {
vardiyaDizisi.push({personel_id: $tr.data("id"), tarih: $td.data("tarih"), tur: url_title($span.text())});
}
});
});
$.ajax({
url: "json.php",
type: "POST",
dataType: "json",
data: {
islem: "guncelle",
ilk_gun: haftaninIlkGunu.formatDate("Y-m-d 00:00:00"),
son_gun: haftaninSonGunu.formatDate("Y-m-d 23:59:59"),
vardiyaVerileri: vardiyaDizisi,
vardiyaAktif: vardiyaAktif
},
success: function (response) {
NProgress.done();
},
error: function (xhr, status, error) {
console.error("Hata: " + error);
}
});
}
function toggleVardiyaTuru(tur) {
var yeniTur = null;
if (tur === vardiyaTurleri.bos) {
yeniTur = vardiyaTurleri.erken;
} else if (tur === vardiyaTurleri.erken) {
yeniTur = vardiyaTurleri.gec;
} else if (tur === vardiyaTurleri.gec) {
yeniTur = vardiyaTurleri.bos;
}
return yeniTur;
}style.css body {
background-color: #f0f0f0;
font-family: Rubik;
font-size: 13px;
}
*::-webkit-scrollbar-track{visibility:hidden}
*::-webkit-scrollbar{width:6px;background:#fff}
*::-webkit-scrollbar-thumb{border-radius:6px;background-color:#CCC}
.kutu {
box-sizing: border-box;
box-shadow: rgba(0, 0, 0, 0.1) 0px 6px 18px;
background-color: #fff;
border-radius: 10px;
overflow: hidden;
}
.kutu-baslik h3 {
margin: 0;
font-size: 13px;
font-weight: 500;
padding: 12px 16px;
}
.kutu-baslik h3 small {
opacity: .5;
}
.kutu-baslik {
border-bottom: 1px solid #ddd;
}
.kutu-personel {
position: fixed;
right: 35px;
bottom: 35px;
width: 260px;
}
.liste {
padding: 16px;
max-height: 360px;
overflow-y: scroll;
}
.liste ol {
margin: 0;
padding: 0;
list-style: none;
}
.liste ol li {
padding: 10px 16px;
border: 1px solid #ddd;
border-radius: 6px;
background-color: #f9f9f9;
margin-bottom: 1em;
font-weight: 500;
cursor: pointer;
}
.liste ol li:last-child {
margin-bottom: 0;
}
.kutu-personel .ekle {
border-top: 1px solid #ddd;
height: 42px;
padding: 0 16px;
display: flex;
align-items: center;
}
.kutu-personel .ekle input {
border: 0;
font: inherit;
}
.kutu-personel .ekle input::placeholder {
color: #CCC;
}
.kutu-personel .ekle input:focus {
outline: none;
}
.kutu-tablo {
position: fixed;
left: 35px;
top: 35px;
width: 960px;
}
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
table thead tr th {
color: #111827;
font-weight: 500;
text-align: left;
padding: 12px 25px;
background-color: #f9fafb;
border-bottom: 1px solid #d1d5db;
border-right: 1px solid #d1d5db;
text-align: center;
}
table thead tr th:first-child {
text-align: left;
}
table thead tr th:last-child {
border-right: 0;
}
table tbody tr td {
border-right: 1px solid #e5e7eb;
border-bottom: 1px solid #e5e7eb;
padding: 10px 25px;
}
table tbody tr td:last-child {
border-right: 0;
}
table tbody tr:last-child td {
border-bottom: 0;
}
table tbody tr td.sutun-bos {
color: #CCC;
text-align: center;
}
table tbody tr td.sutun-personel {
position: relative;
}
table tbody tr td.sutun-personel i {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 1;
display: flex;
align-items: center;
background-color: rgba(255,255,255,1);
visibility: hidden;
opacity: 0;
padding-left: 16px;
}
table tbody tr td.sutun-personel:hover i {
opacity: 1;
visibility: visible;
cursor: pointer;
}
table tbody tr td.sutun-personel i:after {
content: "Kaldır";
display: block;
font-family: Rubik;
font-size: 13px;
font-weight: 500;
margin-left: 5px;
}
.etiket {
display: block;
background-color: #eee;
border-radius: 4px;
padding: 5px 10px;
font-weight: 500;
cursor: pointer;
color: rgba(255,255,255,.9);
text-align: center;
user-select: none;
cursor: button;
}
.etiket.erken {
background-color: #27AE60;
}
.etiket.gec {
background-color: #D35400;
}
main {
display: flex;
max-width: 960px;
margin: 0 auto;
}
.fa-user-plus {
width: 30px;
height: 30px;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
background-color: #f0f0f0;
text-align: center;
flex-shrink: 0;
margin-left: auto;
}
button {
font: inherit;
font-weight: 500;
background: none;
border: 0;
padding: 0 1.5rem;
border-radius: 0.375rem;
line-height: 38px;
color: #31374a;
cursor: pointer;
transition: all .3s ease;
}
.btn-temel {
background-color: #44b5d5;
color: #fff;
}
.btn-temel:hover {
background-color: #00c0e1;
}
.kutu-eylem {
padding: 15px 25px;
color: #2980B9;
border-top: 1px solid #e5e7eb;
}
.swal2-title{font-size:15px!important}
.swal2-styled.swal2-confirm{background-color:#000!important;font-size:13px!important}
.swal2-styled.swal2-confirm:hover{background-color:#333!important}
.swal2-styled.swal2-deny{background-color:#bdc3c7!important;font-size:13px!important}
.swal2-styled.swal2-confirm:focus,.swal2-styled.swal2-deny:focus{box-shadow:none!important}
.swal2-html-container{font-size:13px!important}
.swal2-actions button{height:inherit;line-height:inherit}yardimci_fnk.js Date.prototype.getWeek = function () {
var date = new Date(this.getTime());
date.setHours(0, 0, 0, 0);
date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7);
var week1 = new Date(date.getFullYear(), 0, 4);
return 1 + Math.round(((date - week1) / 86400000 - 3 + (week1.getDay() + 6) % 7) / 7);
};
Date.prototype.formatDate = function (format) {
var date = this;
var year = date.getFullYear();
var month = ('0' + (date.getMonth() + 1)).slice(-2);
var day = ('0' + date.getDate()).slice(-2);
var hours = ('0' + date.getHours()).slice(-2);
var minutes = ('0' + date.getMinutes()).slice(-2);
var seconds = ('0' + date.getSeconds()).slice(-2);
format = format.replace('Y', year);
format = format.replace('m', month);
format = format.replace('d', day);
format = format.replace('H', hours);
format = format.replace('i', minutes);
format = format.replace('s', seconds);
return format;
};
function url_title(str, lowercase = true) {
const search = ['Ü', 'ü', 'Ğ', 'ğ', 'Ş', 'ş', 'Ö', 'ö', 'Ç', 'ç', 'İ', 'ı'];
const find = ['u', 'u', 'g', 'g', 's', 's', 'o', 'o', 'c', 'c', 'i', 'i'];
const replace = '-';
for (let i = 0; i < search.length; i++) {
var regex = new RegExp(search[i], 'g');
str = str.replace(regex, find[i]);
}
str = str.replace(/_/g, replace);
str = str.replace(/&\#\d+?;/g, '');
str = str.replace(/&\S+?;/g, '');
str = str.replace(/\s+/g, replace);
str = str.replace(/[^a-z0-9\-._]/ig, '');
str = str.replace(/-+/g, replace);
str = str.replace(/-$/g, '');
str = str.replace(/^-/g, '');
str = str.replace(/\.$/g, '');
str = str.replace(/<[^>]*>?/g, '');
if (lowercase) {
str = str.toLowerCase();
}
return str;
}
let wild = function(length) {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < length; i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}json.php <?php
// Veritabanı bağlantısı
try {
$db = new PDO('mysql:host=localhost;dbname=r10;charset=utf8', 'root', '');
} catch (PDOException $e) {
echo 'Veritabanı bağlantısı başarısız oldu: ' . $e->getMessage();
exit;
}
if (isset($_POST["islem"])) {
switch ($_POST['islem']) {
case 'yeniPersonel':
try {
$db->beginTransaction();
// POST verilerini alın
$yeniPersonelAdi = $_POST['adi'];
$eklemeSorgusu = "INSERT INTO personel (adi) VALUES (:adi)";
$stmt = $db->prepare($eklemeSorgusu);
$stmt->bindParam(':adi', $yeniPersonelAdi, PDO::PARAM_STR);
// Sorguyu çalıştır
$stmt->execute();
$db->commit();
exit(json_encode(array("success" => true, "message" => "Yeni personel başarıyla eklendi.")));
} catch (PDOException $e) {
$db->rollBack();
exit(json_encode(array("success" => false, "message" => "Personel ekleme hatası: " . $e->getMessage())));
}
break;
case 'vardiya_aktif':
try {
$db->beginTransaction();
// Güncelleme sorgusu için kullanılacak parametreler
$vardiyaAktif = $_POST['vardiya_aktif'];
$personelId = $_POST['personel_id'];
// Güncelleme sorgusu
$updateSorgusu = "UPDATE personel SET vardiya_aktif = :vardiyaAktif WHERE personel_id = :personelId";
// Sorguyu hazırla ve parametreleri bağla
$stmt = $db->prepare($updateSorgusu);
$stmt->bindParam(':vardiyaAktif', $vardiyaAktif, PDO::PARAM_INT);
$stmt->bindParam(':personelId', $personelId, PDO::PARAM_INT);
// Sorguyu çalıştır
$stmt->execute();
$db->commit();
exit(json_encode(array("success" => true, "message" => "Veriler başarıyla güncellendi.")));
} catch (PDOException $e) {
$db->rollBack();
exit(json_encode(array("success" => false, "message" => "Veri güncelleme hatası: " . $e->getMessage())));
}
break;
case 'guncelle':
try {
$db->beginTransaction();
// İlk_gun ve son_gun değerlerini al
$ilk_gun = $_POST['ilk_gun'];
$son_gun = $_POST['son_gun'];
// Eğer vardiyaVerileri dizisi boşsa, o haftadaki verileri silelim
if ( ! isset($_POST['vardiyaVerileri']) || ! $_POST['vardiyaVerileri']) {
$silmeSorgusu = "DELETE FROM vardiya WHERE vardiya_tarihi BETWEEN :ilk_gun AND :son_gun AND personel_id IN (" . join(",", $_POST['vardiyaAktif']) . ")";
$silmeStmt = $db->prepare($silmeSorgusu);
$silmeStmt->bindParam(':ilk_gun', $ilk_gun);
$silmeStmt->bindParam(':son_gun', $son_gun);
$silmeStmt->execute();
} else {
$vardiyaVerileri = $_POST['vardiyaVerileri'];
// Vardiya aktif personellerin belirtilen tarihli verilerini yeniden hazırlamak için silelim
$silmeSorgusu = "DELETE FROM vardiya WHERE vardiya_tarihi BETWEEN :ilk_gun AND :son_gun AND personel_id IN (" . join(",", $_POST['vardiyaAktif']) . ")";
$silmeStmt = $db->prepare($silmeSorgusu);
$silmeStmt->bindParam(':ilk_gun', $ilk_gun);
$silmeStmt->bindParam(':son_gun', $son_gun);
$silmeStmt->execute();
// Yeni verileri ekle
$eklemeSorgusu = "INSERT INTO vardiya (personel_id, vardiya_tarihi, vardiya_turu) VALUES (:personel_id, :tarih, :tur)";
$eklemeStmt = $db->prepare($eklemeSorgusu);
foreach ($vardiyaVerileri as $veri) {
$eklemeStmt->bindParam(':personel_id', $veri['personel_id']);
$eklemeStmt->bindParam(':tarih', $veri['tarih']);
$eklemeStmt->bindParam(':tur', $veri['tur']);
$eklemeStmt->execute();
}
}
$db->commit();
exit(json_encode(array("success" => true, "message" => "Veriler başarıyla güncellendi.")));
} catch (PDOException $e) {
$db->rollBack();
exit(json_encode(array("success" => false, "message" => "Veri güncelleme hatası: " . $e->getMessage())));
}
break;
}
}
// İlk_gun ve son_gun değerlerini al
$ilk_gun = $_GET['ilk_gun'];
$son_gun = $_GET['son_gun'];
// Kişilerin listesini al
$query = "SELECT * FROM personel";
$stmt = $db->prepare($query);
$stmt->execute();
$personelListesi = $stmt->fetchAll(PDO::FETCH_ASSOC);
// Her kişi için ilgili tarihlerdeki vardiya türlerini al
foreach ($personelListesi as &$personel) {
$query = "SELECT vardiya_turu, vardiya_tarihi FROM vardiya WHERE personel_id = :personel_id AND vardiya_tarihi BETWEEN :ilk_gun AND :son_gun";
$stmt = $db->prepare($query);
$stmt->bindParam(':personel_id', $personel['personel_id'], PDO::PARAM_INT);
$stmt->bindParam(':ilk_gun', $ilk_gun, PDO::PARAM_STR);
$stmt->bindParam(':son_gun', $son_gun, PDO::PARAM_STR);
$stmt->execute();
$vardiyaTurListesi = $stmt->fetchAll(PDO::FETCH_ASSOC);
$haftalikVeri = array();
foreach ($vardiyaTurListesi as $vardiya) {
$haftalikVeri[$vardiya['vardiya_tarihi']] = $vardiya['vardiya_turu'];
}
$personel['haftalikVeri'] = $haftalikVeri;
}
// JSON olarak verileri döndür
header('Content-Type: application/json');
echo json_encode($personelListesi, JSON_NUMERIC_CHECK);
?> 
Benim bir veritabanından vardiya türlerini seçip liste şeklinde yazdırıp kaydetmem gerekiyor.