niklas.ortmann/webprogrammierung
0
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Kommentarfunktion für Nutzer einschränken

Browse Source
This commit is contained in:
Caroline Schulte
2026-06-15 23:22:00 +02:00
parent 901232b683
commit e20b59b43d
4 changed files with 40 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
content/showArticle.php
+13 -41
View File
@@ -14,28 +14,17 @@ if (isset($_GET["id"])) {
foreach ($comments as $comment) {
if ($comment->isReply()) {
$parentId = $comment->getParentCommentId();
if (!isset($repliesByParent[$parentId])) {
$repliesByParent[$parentId] = [];
}
$repliesByParent[$parentId][] = $comment;
} else {
$mainComments[] = $comment;
}
}
} catch (Exception $e) {
$_SESSION["message"] = "internal_error";
}
}
?>
<!--
Seite: Anzeige für Beiträge
Funktion: Stellt einen übergebenen Beitrag dar.
-->
<main class="article-view-container">
<?php if (isset($_SESSION["message"]) && $_SESSION["message"] == "internal_error"): ?>
<p class="alert-message is-error">
@@ -43,28 +32,9 @@ if (isset($_GET["id"])) {
</p>
<?php endif; ?>
<?php if (isset($_SESSION["message"]) && $_SESSION["message"] == "missing_id"): ?>
<p class="alert-message is-error">
Es ist ein Fehler aufgetreten. Die ID konnte nicht ausgelesen werden. Bitte versuche es erneut.
</p>
<?php endif; ?>
<?php if (isset($_SESSION["message"]) && $_SESSION["message"] == "missing_parameters"): ?>
<p class="alert-message is-error">
Jeder Beitrag muss einen Titel, Kategorie und Inhalt besitzen.
</p>
<?php endif; ?>
<?php if (isset($_SESSION["message"]) && $_SESSION["message"] == "article_updated"): ?>
<p class="alert-message is-success">
Dein Beitrag wurde erfolgreich bearbeitet!
</p>
<?php endif; ?>
<?php unset($_SESSION["message"]); ?>
<div class="article-view-top-section">
<?php if (isset($category) && !empty($category)): ?>
<span class="article-view-category"><?php echo htmlspecialchars($category); ?></span>
<?php endif; ?>
@@ -80,7 +50,6 @@ if (isset($_GET["id"])) {
</span>
<?php endif; ?>
</div>
</div>
<div class="article-view-content">
@@ -107,8 +76,7 @@ if (isset($_GET["id"])) {
<span class="article-view-tag-item">
<?php echo htmlspecialchars($trimmedTag); ?>
</span>
<?php
endif;
<?php endif;
endforeach;
?>
</div>
@@ -129,12 +97,14 @@ if (isset($_GET["id"])) {
<p><?php echo nl2br(htmlspecialchars($comment->getContent())); ?></p>
<button type="button"
class="reply-button"
data-comment-id="<?php echo htmlspecialchars($comment->getId()); ?>"
data-author="<?php echo htmlspecialchars($comment->getAuthor()); ?>">
Antworten
</button>
<?php if (isset($_SESSION["user_email"])): ?>
<button type="button"
class="reply-button"
data-comment-id="<?php echo htmlspecialchars($comment->getId()); ?>"
data-author="<?php echo htmlspecialchars($comment->getAuthor()); ?>">
Antworten
</button>
<?php endif; ?>
<div class="comment-replies">
<?php if (isset($repliesByParent[$comment->getId()])): ?>
@@ -182,8 +152,10 @@ if (isset($_GET["id"])) {
</button>
</form>
<?php else: ?>
<p>Du musst angemeldet sein, um einen Kommentar zu schreiben.</p>
<div class="comment-login-hint">
<p>Melde dich an, um einen Kommentar zu schreiben.</p>
<a href="index.php?pfad=login" class="button">Jetzt anmelden</a>
</div>
<?php endif; ?>
</section>
</main>
css/showArticle.css
+12
View File
@@ -196,4 +196,16 @@
margin: 0.5rem 0;
color: #475569;
font-weight: 600;
}
.comment-login-hint {
margin-top: 2rem;
padding: 1.5rem;
background-color: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
text-align: center;
}
.comment-login-hint p {
margin-bottom: 1rem;
}
js/comments.js
+13 -60
View File
@@ -1,13 +1,10 @@
/**
* Initialisiert die Kommentarfunktion.
*
* Ermöglicht:
* - Erstellen neuer Kommentare
* - Antworten auf bestehende Kommentare
* - AJAX-Kommunikation ohne Seitenneuladen
* Kommentare werden per AJAX gespeichert,
* ohne dass die Seite neu geladen werden muss.
*/
document.addEventListener("DOMContentLoaded", function () {
const form = document.getElementById("comment-form");
const commentsList = document.getElementById("comments-list");
const commentContent = document.getElementById("comment-content");
@@ -19,65 +16,44 @@ document.addEventListener("DOMContentLoaded", function () {
}
/**
* Registriert die Antwort-Buttons.
*
* Beim Klick wird die ID des Eltern-Kommentars gespeichert,
* damit die neue Nachricht als Antwort angelegt werden kann.
* Registriert alle Antwort-Buttons.
*/
document.querySelectorAll(".reply-button").forEach(function (button) {
button.addEventListener("click", function () {
parentCommentInput.value = button.dataset.commentId;
replyInfo.textContent =
"Antwort auf " + button.dataset.author;
replyInfo.textContent = "Antwort auf " + button.dataset.author;
replyInfo.style.display = "block";
commentContent.focus();
});
});
/**
* Verarbeitet das Absenden eines Kommentars.
*
* Die Daten werden per AJAX an den Server gesendet,
* sodass die Seite nicht neu geladen werden muss.
* Sendet Kommentare per AJAX an den Server.
*/
form.addEventListener("submit", function (event) {
event.preventDefault();
const formData = new FormData(form);
const parentCommentId = parentCommentInput.value;
/*
* Sendet den Kommentar an den Server
* und speichert ihn in der Datenbank.
*/
fetch("php/ajax/add-comment.php", {
method: "POST",
body: formData
})
.then(response => response.json())
.then(data => {
if (!data.success) {
alert(data.message);
return;
}
const emptyMessage =
commentsList.querySelector(".no-comments-message");
const emptyMessage = commentsList.querySelector(".no-comments-message");
if (emptyMessage) {
emptyMessage.remove();
}
const commentElement =
document.createElement("div");
const commentElement = document.createElement("div");
commentElement.classList.add("comment-item");
if (parentCommentId) {
@@ -92,60 +68,37 @@ document.addEventListener("DOMContentLoaded", function () {
<p>${escapeHtml(data.content).replace(/\n/g, "<br>")}</p>
`;
/*
* Antworten werden unter dem
* zugehörigen Kommentar angezeigt.
*/
if (parentCommentId) {
const parentComment = document.querySelector(
const parentReplies = document.querySelector(
`.comment-item[data-comment-id="${parentCommentId}"] .comment-replies`
);
if (parentComment) {
parentComment.appendChild(commentElement);
if (parentReplies) {
parentReplies.appendChild(commentElement);
}
} else {
/*
* Normale Kommentare werden
* oben in die Liste eingefügt.
*/
commentElement.dataset.commentId = "";
commentsList.prepend(commentElement);
}
/*
* Formular zurücksetzen.
*/
commentContent.value = "";
parentCommentInput.value = "";
replyInfo.textContent = "";
replyInfo.style.display = "none";
})
.catch(() => {
alert(
"Kommentar konnte nicht gesendet werden."
);
alert("Kommentar konnte nicht gesendet werden.");
});
});
/**
* Escaped HTML-Sonderzeichen zur Vermeidung
* von XSS-Angriffen.
* Entfernt HTML-Sonderzeichen aus Nutzereingaben.
*
* @param {string} text Zu bereinigender Text
* @returns {string} HTML-sicherer Text
* @returns {string} Sicherer Text
*/
function escapeHtml(text) {
const div = document.createElement("div");
div.textContent = text;
return div.innerHTML;
}
});
php/ajax/add-comment.php
+2 -2
View File
@@ -8,7 +8,7 @@ require_once "../model/CommentManager.php";
if (!isset($_SESSION["user_email"])) {
echo json_encode([
"success" => false,
"message" => "Du musst angemeldet sein."
"message" => "Du musst angemeldet sein, um zu kommentieren."
]);
exit();
}
@@ -17,7 +17,7 @@ $articleId = $_POST["article_id"] ?? null;
$content = trim($_POST["content"] ?? "");
$parentCommentId = $_POST["parent_comment_id"] ?? null;
if ($parentCommentId === "") {
if ($parentCommentId === "" || $parentCommentId === "0") {
$parentCommentId = null;
}