diedVIPs

html knowhow

Eintragen, sortieren, filtern, löschen einer CSV-Datenbank








Die Suche kann etwas dauern, weil intensiv gesucht wird

Eintragen, sortieren, filtern, löschen einer CSV-Datenbank

So sieht´s aus

Eintragen oder löschen

 



Quellcode der PHP-Datei
<?php
/*
* Tabellenkalender
* https://werner-zenk.de
*/

$verzeichnis = "../Extra/datei.csv";
$name = "user";
$passwort = "0000";
date_default_timezone_set("Europe/Berlin");
if (isset($_GET["aktualisieren"])) {
// Name und Passwort überprüfen
if (
$_POST["name"] == $name &&
$_POST["passwort"] == $passwort
) {
// Eintragen
if ($_POST["option"] == "eintragen") {
if (
strpos($_POST["datum"], "T") &&
!empty($_POST["ereignis"])
) {
$daten = file_get_contents($verzeichnis);
$datum = str_replace("T", " ", $_POST["datum"]);
$ereignis = strip_tags($_POST["ereignis"]);
$ereignis = str_replace(";", "", $ereignis);
$daten .= PHP_EOL . $datum . ';' . $ereignis;
file_put_contents($verzeichnis, $daten);
}
}
// Löschen
if ($_POST["option"] == "loeschen") {
$daten = file($verzeichnis, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
$index = array_search($_POST["id"], $daten);
if ($index !== false) {
array_splice($daten, $index, 1);
file_put_contents($verzeichnis, implode(PHP_EOL, $daten)); } } } }
// Auslesen
if (
isset($_GET["auslesen"]) ||
isset($_GET["aktualisieren"])
) {
$daten = file($verzeichnis, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
$tabelle = '
<table id="foobar-table">
<thead>
<tr>
<th data-type="number" title="Nach Nummer sortieren">#</th>
<th data-type="number" title="Nach Datum sortieren">Datum</th>
<th data-type="number" title="Nach Uhrzeit sortieren">Uhr</th>
<th data-type="string" title="Nach Ereignis sortieren">Ereignis</th>
<td><input type="radio" name="id" value="0" checked="checked" title="Kein Ereignis auswählen"></td>
</tr>
</thead>
<tbody>';
foreach ($daten as $nr => $data) {
list($datum, $ereignis) = explode(";", $data);
sscanf($datum, "%4s-%2s-%2s %6s", $jahr, $monat, $tag, $uhr);
$tabelle .= '<tr><td>' . ($nr + 1) . '</td><td>' . $jahr . '-' . $monat . '-' . $tag . '</td><td>' . $uhr . '</td><td>' . $ereignis .
'</td><td><input type="radio" name="id" value="' . $datum . ';' . htmlspecialchars($ereignis) . '" title="Ereignis auswählen"></td></tr>'; }
$tabelle .= '</tbody>
</table>';
exit($tabelle);}
?>

<html>
<head>

<style>
table#foobar-table {padding:2px 2px 2px 2px; font-size:0.7em; background-color:lightgray;}
/* Tabellenkopf festsetzen */
table#foobar-table thead {position: sticky; inset-block-start: 0; user-select: none;}
/* Hintergrund Tabellenkopf */
table#foobar-table>thead>tr {background-color: #FFD2A6; text-align:left}
table#foobar-table>thead>tr:hover {background-color: cyan; !important; cursor: pointer; text-align:left}
/* Die Spalten der Tabelle anpassen */
table#foobar-table, table#foobar-table>thead>tr>th, table#foobar-table>tbody>tr>td {padding: 0px 0px 0px 0px; color: #000000;}
/* Spalte in der Tabelle von der Sortierung ausschließen */
table#foobar-table>thead>tr>td {border: Solid 1px #888888; padding:0px 0px 0px 0px; color: lime; font-weight: bold; text-align: center;}
/* Den Hintergrund zeilenweise einfärben */
table#foobar-table>tbody>tr:nth-child(even) {background-color: #FFFFFF;}
table#foobar-table>tbody>tr:nth-child(odd) {background-color: #FFD2A6;}
/* Pfeil nach oben */
.upArrow::after {content: "\2191"; color: #FFFFFF; text-shadow: 1px 1px 0px #000000; position: absolute;}
/* Pfeil nach unten */
.dnArrow::after {content: "\2193"; color: #FFFFFF; text-shadow: 1px 1px 0px #000000; position: absolute;}
input[name=ereignis], input[id=filter] {width: 200px;}
label[for] {display: inline-block; width: 250px;}
input[type=radio] {accent-color: rgb(255, 130, 4); width: 15px; height: 15px;}
summary {cursor: Pointer; user-select: None; width:80%;}
summary:hover, label:hover {color: rgb(255, 174, 94);}
summary::marker {color: rgb(255, 174, 94);}
input[type=text], input[type=password], input[type=search], input[type=datetime-local], button[type=button] {border: Solid 1px #cccccc !important; padding: 2px;}
button[type=button]:hover {background-color: rgb(255, 174, 94);}
:focus-visible {outline: Solid 1px rgb(255, 174, 94);}input[type=radio] {accent-color: rgb(255, 130, 4); width: 15px; height: 15px;}
input {width: 200px; height: 15px;}
</style>

<body >
<center>
<form id="form" method="post">
<p><label for="filter">Suchen:</label><input placeholder="Geben sie einen Suchtext ein" type="search" class="filter-table" id="filter" data-for="#foobar-table"></p>
<p id="ausgabe"></p>

<details style="border:2px solid fuchsia; width:40%; text-align:left; padding:10px; font-size:1em">
<summary>Eintragen oder löschen</summary>
<p><label for="datum">Datum:</label><input type="datetime-local" name="datum" id="datum" value="<?= date("Y-m-d\TH:i"); ?>">
<label for="ereignis">Ereignis:</label><input type="text" name="ereignis" id="ereignis">
<label><input type="radio" name="option" value="eintragen" checked="checked" required="required" title="Ereignis eintragen"> Eintragen</label> &emsp;
<label><input type="radio" name="option" value="loeschen" title="Ereignis löschen"> Löschen</label>
<label for="name">Name:</label><input type="text" name="name" value="user"id="name" autocomplete="username" required="required">
<label for="passwort">Passwort:</label><input type="password" value="0000"name="passwort" id="passwort" autocomplete="current-password" required="required"></p>
<center><p><button type="button" id="button">Absenden</button></p>
</details>
</form>
<script>
// Auslesen
fetch(`${document.URL}?auslesen`, {
method: "GET", })
.then((antwort) => {
return antwort.text(); })
.then((antwort) => {
document.getElementById("ausgabe").innerHTML = antwort;
initialisieren(); });
// Aktualisieren
document.querySelector("#button").addEventListener("click", () => {
if (document.getElementById("form").reportValidity()) {
fetch(`${document.URL}?aktualisieren`, {
method: "POST",
body: new FormData(document.getElementById("form")), })
.then((antwort) => {
return antwort.text(); })
.then((antwort) => {
document.getElementById("ausgabe").innerHTML = antwort;
document.getElementById("form").reset();
initialisieren(); }); } });
function initialisieren() {
// HTML-Tabelle sortieren
const table = document.getElementById("foobar-table");
const headers = table.querySelectorAll("th");
const tableBody = table.querySelector("tbody");
const rows = tableBody.querySelectorAll("tr");
const directions = Array.from(headers).map(function(header) {
return ""; });
const transform = function(index, content) {
const type = headers[index].getAttribute("data-type");
switch (type) {
case "number":
return parseFloat(content);
case "string":
default:
return content; } };
const sortColumn = function(index, headers) {
const cls = ["upArrow", "dnArrow"];
headers.forEach((header) => {
document.getElementById(header.id).classList.remove(...cls); });
const direction = directions[index] || "asc";
const multiplier = (direction === "asc") ? 1 : -1;
const cssSort = (direction === "asc") ? cls[0] : cls[1];
document.getElementById(index).classList.add(cssSort);
const newRows = Array.from(rows);
newRows.sort((rowA, rowB) => {
const cellA = encodeURIComponent(rowA.querySelectorAll("td")[index].textContent.toLowerCase());
const cellB = encodeURIComponent(rowB.querySelectorAll("td")[index].textContent.toLowerCase());
const a = transform(index, cellA);
const b = transform(index, cellB);
switch (true) {
case a > b:
return 1 * multiplier;
case a < b:
return -1 * multiplier;
case a === b:
return 0; } });
[].forEach.call(rows, function(row) {
tableBody.removeChild(row); });
directions[index] = direction === "asc" ? "desc" : "asc";
newRows.forEach(function(newRow) {
tableBody.appendChild(newRow); }); };
[].forEach.call(headers, function(header, index) {
header.setAttribute("id", index);
header.addEventListener("click", () => {
sortColumn(index, headers); }); });
// HTML-Tabelle filtern
document.querySelectorAll('.filter-table').forEach(function(input) {
var table = document.querySelector(input.dataset.for);
var rows = table.querySelectorAll('tbody tr');
input.addEventListener('input', function(event) {
rows.forEach(function(tr) {
tr.hidden = !tr.textContent.toLowerCase().includes(input.value.toLowerCase()); }); }); }) }
</script>
</body>

</html>










Kontakt    Datenschutz    Impressum