John Davidson

Message:

I programmed a Dashboard with Bootstrap to show data from MySQL

But I need show the data realtime on this div from select without refreshing brownser. So I'm looking a way to do it

<div class="col-md-4">

    <div class="card text-white bg-dark mb-3" style="max-width: 100%;">

     <div class="card-header">Total Clientess / Ano</div>

        <div class="card-body" id="sombra">

            <h5 class="card-title" style="text-align:center;font-size: 40px;">



                <?php 

                

                  ## conecta no banco

                  include "conexao.php"; 



                  #da o comando sql no banco

                  $sql = "SELECT SUM(quantidade) AS total FROM clientes";



                  #Comando de consulta

                  $consulta = mysqli_query($conexao,$sql);



                  ## nao preciso de while pq ele vai pegar somente um valor, entao eu crio esse array

                  $dados = mysqli_fetch_array($consulta);

                 

                  #imprimo na tela o valor

                  echo $dados['total'];

                  

                 ?>

                 <span style="font-size: 20px">/ clientes</span>



            </h5>

  

        </div>

        

     </div>

  </div>

---

My Answer:
You can achieve real-time updates on your Bootstrap card data by using AJAX to fetch the data from your MySQL database without refreshing the browser. Here's a basic example of how you can do this:

1. Create a PHP file that will fetch the data from your MySQL database and return it as JSON. Let's call this file `getData.php`.

php
// Connect to your MySQL database
$connection = mysqli_connect("localhost", "username", "password", "database");

// Query to fetch data from your database
$query = "SELECT * FROM your_table";
$result = mysqli_query($connection, $query);

// Fetch the data and store it in an array
$data = array();
while ($row = mysqli_fetch_assoc($result)) {
$data[] = $row;
}

// Return the data as JSON
echo json_encode($data);

// Close the connection
mysqli_close($connection);
?>


2. In your HTML file, use jQuery to make an AJAX request to `getData.php` and update the content of your Bootstrap card with the fetched data. Let's assume your card has an id of `dataCard`.

html

3. Make sure to replace `username`, `password`, `database`, `your_table`, and `column_name` with your actual database credentials and table/column names.

With this setup, your Bootstrap card will be updated with real-time data from your MySQL database every 5 seconds without the need to refresh the browser.