How to prevent this duplicate data insertion when clicking the "reload this page" in chrome in PHP

Question

This the connection using PDO

<?php 

session_start();

    include 'db_config.php';
    
    try {
        $conn = new PDO("mysql:host=localhost;dbname=$database","root","");
    // set the PDO error mode to exception
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    
    // prepare sql and bind parameters
        $stmt = $conn->prepare("INSERT INTO users (name, username, 
    password) 
    VALUES (:name, :username, :password)");
        $stmt->bindParam(':name', $name);
        $stmt->bindParam(':username', $username);
        $stmt->bindParam(':password', $password);
    
    // insert a row
        $name = $_POST["name"];
        $username = $_POST["username"];
        $password = $_POST["password"];
        $stmt->execute();
    
    $query="select * from users";
    $d = $conn->query($query);
     
    }
    catch(PDOException $e)
    {
        echo "Error: " . $e->getMessage();
    }
    $conn = null;
    ?>

This is the user registration form

<form method="post">
      <div class="modal-body">
        <div class="form-group">
         
            
              <input type="text" name="username" placeholder="Enter Username" class="form-control">
              <br>
              <br>

               <input type="text" name="name" placeholder="Enter Name" class="form-control">
               <br>
               <br>

               <input type="password" name="password" placeholder="Enter Password" class="form-control">
         
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary" name="save_user">Save changes</button>
      </div>

    </form>

This is the Table

<tbody>

        <?php foreach ($d as $data)
        {

        ?>

        <tr>
            <td><?php echo $data['users_id']?></td>
            <td><?php echo $data['username']?></td>
            <td><?php echo $data['name']?></td>
            </tbody>
        </tr>
        <?php
}
        ?>

This image is the User Registration Form

This image after clicking the Save button in my User Registration Form

This image after clicking the "reload button" in chrome

Hello Everyone, How to fix this kind of error. The Scenario is if the Admin wants to register another user so that the admin is going to click the button for the user registration form once the admin clicked the button the admin need to fill out the form then once the admin finishes the form then click the SAVE button to save the data in "IMAGE "2". Imagine the data is saved so that when the user clicked the reload page in chrome the Previous data duplicates "IMAGE 3". How to prevent this? Sorry, I'm Beginner in PHP :)

Answer 1

In your place I would not put all pdo queries in one pile like this because it is going to run every time you load the page. Add triggers to them as clearly you want these queries to run only when you click save button.

Instead separate your queries you can do something like this. I can see you already load file db_config.php so why configure db again ? Feel free to use below as an example.

db_config.php

$host = 'localhost';
$db   = '';
$user = 'root';
$pass = '';
$charset = 'utf8';

$dsn = "mysql:host=$host;dbname=$db;charset=$charset";
$opt = [
    \PDO::ATTR_ERRMODE            => \PDO::ERRMODE_EXCEPTION,
    \PDO::ATTR_DEFAULT_FETCH_MODE => \PDO::FETCH_ASSOC,
    \PDO::ATTR_EMULATE_PREPARES   => false,
];

    $conn = new \PDO($dsn, $user, $pass, $opt);

Now every time you load this file you have a connection to database. So you can do something like this.

<?php 

session_start();

include 'db_config.php';

if (isset($_POST['save_user'])) {
    $name = $_POST["name"];
    $username = $_POST["username"];
    $password = $_POST["password"];

    //Your sql query
    $sql = "INSERT INTO users (name, username, password) VALUES (:name, :username, :password)";

    // prepare sql and bind parameters
    $stmt = $conn->prepare($sql);

    //Set your parameters
    $params = ['name' => $name, 'username' => $username, 'password' => $password];

    // insert a row
    $stmt->execute($params);
}
 
function loadUsers()
{
    $query = "SELECT * FROM users";

    $d = $conn->query($query);
}

loadUsers();