PHP chat submit refresh button

Question

I just started working with SQL and I am making a chat.

Few questions:-

1) If you come from the index.php (the site where you can put in a username only) You will come to home.php. Than in the top it says: You didnt send a message yet. and everytime if i refresh it just uploads the last message. I know there is a fix i just couldnt find it.

2) If i press on the submit button it refreshes the page and goes all the way up. So you have to scroll all the way down to enter and see your message. + i can fix this without refresching but than you dont see any messages beign send.

<?php

if (isset($_POST["afzender"])){
    $_SESSION['afzender'] = $_POST['afzender'];
}

$servername = "localhost";
$username = "*******";
$password = "******";
$dbname = "*****";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$sql = "INSERT INTO 'chatbox_berichten'
(''id', 'afzender', 'chatbox_id', 'bericht', 'tijd')
VALUES (NULL, '".$_SESSION['afzender']."', '', '".$_POST['bericht']."', CURRENT_TIMESTAMP);";
echo $sql;
if ($conn->query($sql) === TRUE) {
    echo "Succesvol Toegevoegd.";
} else {
    echo $conn->connect_error;
}
echo "<hr/>";

$sql = "SELECT * FROM chatbox_berichten";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    echo "<table border='2'>";
    // output data of each row
    while($row = $result->fetch_assoc()) {
        echo "<tr><td>" . $row["id"]. "<td>" . $row["afzender"]. "<td>" . $row["bericht"]. "  <td>" . $row["tijd"]. "</td></tr>";
    }
    echo "</table>";
} else {
    echo "0 results";
}


$conn->close();
?>
<?php echo $_SESSION['afzender']; ?>        
<form action="home.php" method="post">
Bericht: <input type="text" name="bericht"><br>
<input type="submit">
</form>

I know the code looks messy. I have no lessons whatsoever in making it looking better.

So any help would be appreciated.

Answer 1

I will help you, but I don't have the time to write all the code for you.

everytime if i refresh it just uploads the last message

If you refresh the page, your browser will repeat the last request. If you sent a message before, it will be a POST request. Therefore, the message will be sent again because the browser repeats the HTTP request.

The most common workaround is an HTTP redirect to the same URL when processing a POST request, so the last request the browser makes is a GET request (see below for remarks).

If i press on the submit button it refreshes the page and goes all the way up. So you have to scroll all the way down to enter and see your message. + i can fix this without refresching but than you dont see any messages beign send.

For a chat application, this is not really the best way to go. You could reverse the order of chat messages (newest at top), so you would not need to scroll down to see the latest messages.

The ideal approach would be asynchronous client/server communication. Go ahead and read some articles about AJAX (or websockets, if you want to make a huge step towards modern technologies). A simple script could periodically (or through notifications using websockets) check for new messages, append them to the list of old messages and scroll accordingly. If you made message sending a background task as well, your first problem would disappear, as you would not need to execute a "foreground request" to send / receive messages.

One more thing: You should really read some articles on web attacks. Your code is vulnerable to XSS and SQL injection attacks. Currently, your PHP code allows attackers to take over your database and inject arbitrary code into the page. You should use HTML and SQL escaping.