HOME
Servers
Socials
<?php /* * Shoutbox - shout.php (utf-8) * https://werner-zenk.de */ // Maximale Zeichen die der Benutzer eingeben darf $maxZeichenName = 25; // 25 $maxZeichenNachricht = 125; // 125 // Maximale Anzahl der Nachrichten $maxNachrichten = 25; // 25 // Nachrichten neu laden nach: $sekunden = 10; // 10 // Pfad zur Datenbank $datenbank = "db/shout.sqt"; // Datenbank-Datei erstellen if (!file_exists($datenbank)) { $db = new PDO('sqlite:' . $datenbank); $db->exec("CREATE TABLE shout( id INTEGER PRIMARY KEY, name TEXT, nachricht TEXT)"); } else { // Verbindung if (!isset($db)) { $db = new PDO('sqlite:' . $datenbank); } } // Eintragen und Lesen if ($_SERVER["REQUEST_METHOD"] == "POST" || isset($_GET["lesen"])) { if (isset($_POST["name"], $_POST["nachricht"])) { $insert = $db->prepare("INSERT INTO shout( name, nachricht) VALUES (:name, :nachricht)"); $insert->execute([":name" => strip_tags($_POST["name"]), ":nachricht" => strip_tags($_POST["nachricht"])]); } $select = $db->query("SELECT name, nachricht FROM shout ORDER BY id DESC LIMIT " . $maxNachrichten); $nachrichten = $select->fetchAll(); foreach ($nachrichten as $nachricht) { echo '<div><span class="shoutboxBenutzer">' . $nachricht["name"] . '</span>: ' . $nachricht["nachricht"] . '</div>'; } exit; } ?> <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <style> html, body { padding: 0px; margin: 0px; background-color: #F5F5FA; } /* Shoutbox */ form#shoutbox { width: 900px; margin: Auto; padding: 10px; } /* Shoutbox - ?berschrift */ div#caption { text-align: Center; font-family: Tahoma, Arial, Sans-Serif; font-weight: Bold; color: #8484C1; } /* Shoutbox - Nachrichten */ div#shoutboxNachrichten { width: 900px; height: 50px; margin-bottom: 10px; overflow: Auto; font-family: Arial, Tahoma, Sans-Serif; font-size: 0.90rem; } /* Shoutbox - Name-Feld */ input#shoutboxName { width: 140px; border: 1px solid #5353A8; transition: all 0.15s ease-in-out; } /* Shoutbox - Text-Feld */ textarea#shoutboxText { width: 190px; height: 70px; border: 1px solid #5353A8; transition: all 0.15s ease-in-out; } input#shoutboxName:focus, textarea#shoutboxText:focus { box-shadow: 0 0 3px #5353A8; } input#shout { background-color: #C9C9E4; color: #5353A8; border: 1px solid #5353A8; } /* Shoutbox - Benutzer */ span.shoutboxBenutzer { color: #5353A8; } </style> <script> "use strict"; var xhr = new XMLHttpRequest(); window.addEventListener("DOMContentLoaded", function() { document.getElementById("shout").addEventListener("click", shout); }); function shout() { if (document.getElementById("shoutboxName").value != "" && document.getElementById("shoutboxText").value != "") { var daten = new FormData(document.getElementsByName("Form")[0]); xhr.open("POST", "shout.php"); xhr.send(daten); xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE && xhr.status == 200) { document.getElementById("shoutboxName").value=""; document.getElementById("shoutboxText").value=""; document.getElementById("shoutboxNachrichten").innerHTML = xhr.responseText; } } } } function get() { xhr.open("GET", "shout.php" + "?lesen"); xhr.send(null); xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE && xhr.status == 200) { document.getElementById("shoutboxNachrichten").innerHTML = xhr.responseText; } } } get(); window.setInterval("get()", (<?=$sekunden;?>*1000)); </script> </head> <body> <form name="Form" id="shoutbox"> <div id="caption">🗪 Shoutbox</div> <div id="shoutboxNachrichten"></div> <input type="text" name="name" id="shoutboxName" maxlength="<?=$maxZeichenName;?>" placeholder="Name"> <input type="button" value="»" id="shout" title="Eintragen"><br> <textarea name="nachricht" id="shoutboxText" maxlength="<?=$maxZeichenNachricht;?>" placeholder="Nachricht"></textarea> </form> </body> </html>
© Copyright 2020
Deutsche Backstube
All Rights Reserved |
Impressum
|
CC
