Maak een simple chat.
Maak een input veld voor de naam van de gebuiker en een input veld voor het bericht.
Als je op verstuur drukt, sla dan de naam en het bericht op in de database. Voeg aan ieder bericht een datum-tijd toe wanneer het bericht is opgeslagen. Laat de database dit automatisch doen.
Als de pagina geladen wordt, laat dan alle berichten zien boven de input velden. Sorteer deze op datum.
De database "chat" heeft 1 tabel: "chat" deze heeft 4 kolommen:
In SQL ziet dat er als volgt uit:
CREATE TABLE `chat` (
`chat_id` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
`chat_nickname` VARCHAR(50) NOT NULL DEFAULT '' COLLATE 'utf8mb4_general_ci',
`chat_message` VARCHAR(500) NOT NULL DEFAULT '' COLLATE 'utf8mb4_general_ci',
`chat_datetime` DATETIME NULL DEFAULT current_timestamp(),
PRIMARY KEY (`chat_id`) USING BTREE
)
COLLATE='utf8mb4_general_ci'
ENGINE=InnoDB;
De HTML met PHP ziet er als volgt uit:
<!DOCTYPE html>
<html lang="nl" dir="ltr">
<head>
<meta charset="utf-8">
<title>Chat</title>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById("message").focus();
});
</script>
</head>
<body>
<?php
$message="";
if (isset($_POST["message"])){
$message = $_POST["message"];
}
$nickname="";
if (isset($_POST["nickname"])){
$nickname = $_POST["nickname"];
}
$servername = "localhost";
$username = "root";
$password = "";
$database = "chat";
try {
$conn = new PDO("mysql:host=$servername;dbname=$database", $username, $password);
// set the PDO error mode to exception
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
if ($message!="" and $nickname!=""){
$sql="INSERT INTO chat (chat_nickname, chat_message) VALUES (:chat_nickname, :chat_message);";
$params = [
":chat_nickname"=> $nickname,
":chat_message"=> $message
];
$stmt = $conn->prepare($sql);
$stmt->execute($params);
}
$stmt = $conn->prepare("SELECT * FROM chat ORDER BY chat_datetime;");
$stmt->execute();
$result = $stmt->setFetchMode(PDO::FETCH_ASSOC);
$data = $stmt->fetchAll();
foreach ($data as $row) {
echo $row["chat_nickname"].": ";
echo $row["chat_message"]."<br>";
}
} catch(PDOException $e) {
echo "Connection failed: " . $e->getMessage();
}
?>
<form action="index.php" method="post">
<input type="text" name="nickname" value="<?php echo $nickname ?>" placeholder="nickname">
<input id="message" type="text" name="message" value="" placeholder="message">
<input type="submit" name="submit" value="Verstuur">
</form>
</body>
</html>
De javascript code zorgt ervoor dat het veld "message" na laden van de pagina de focus heeft.