Afficher ma BDD en temps réel

Bonjour à tous,

Je voudrais savoir comment faire pour afficher ma BDD en temps réel sans envoyer trop de requêtes à ma BDD pour que ça ne soit pas trop lourd, je sais qu'il faut utiliser Ajax pour cela mais je ne sais pas si je m'y prends correctement car je ne suis pas très à l'aise avec ça.

Pour l'instant j'utilise JQuery avec la fonction load pour faire cela, pouvez-vous me donner votre avis et me dire comment faire si cela n'est pas la meilleure solution, merci !

Voici mon code :

Ici ma page index avec mon html/css/js (index.php) -> (d'ailleurs je n'ai plus de php sur cette page donc je devrais peut-être changer son type)

<html>
<head>
	<title>MGT Orders</title>
	<link rel="stylesheet" href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css"/>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style type="text/css">
		section {
			display: grid;
			grid-template-rows: auto auto auto;
		}


		.container {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
		}

		.container > div {
			flex: 100%;
		}

		@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
		/* IE10+ CSS styles go here */
			.container > div {
				width: 100%;
			}
		}

		@supports (-ms-accelerator:true) {
		/* IE10+ CSS styles go here */
			.container > div {
				width: 100%;
			}
		}


	</style>
</head>
<body>	
	<section>
		<marquee scrollamount="3" direction="up" height="100%" width="100%">
		<div class="container">
			<div class="tc fl f3 pv2 b">Orders Created</div>
			<div class="tc fl pv2" id="ordersCreated"></div>
		</div>

		<div class="container bt b--black">
			<div class="tc fl f3 pv2 b ">Orders To Pick</div>
			<div class="tc fl pv2 " id="ordersToPick"> </div>
		</div>


		<div class="container bt b--black">
			<div class="tc fl f3 pv2 b">Orders Invoiced</div>
			<div class="tc fl pv2 " id="ordersInvoiced"> </div>
		</div>
		</marquee>
	</section>

	<script type="text/javascript">
		setInterval('load_orders()', 500);
		function load_orders() {
			$('#ordersCreated').load('queryOrdersCreated.php');
			$('#ordersToPick').load('queryOrdersToPick.php');
			//$('#ordersToShip').load('queryOrdersToShip.php');
			$('#ordersInvoiced').load('queryOrdersInvoiced.php');
		}
	</script>
</body>
</html>

Page php pour ma connexion a la bdd : (connect_db.php)

<?php

    $db_name = 'warehouseproject';
    $db_host = 'localhost';
    $db_user = 'root';
    $db_pass = '';
   
	$conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
	if (!$conn) {
		die ('Failed to connect to MySQL: ' . mysqli_connect_error());	
	}
?>

Une de mes pages avec mes requetes (queryOrdersToPick.php) :

<?php
    //header("Refresh:1");
include('connect_db.php');

$sqlPick = 'SELECT * FROM `orders` WHERE `State`= "Open" AND `Reserved` > 0 AND `Invoice` = "" AND `Ship Date` <> date_format(CURRENT_DATE(), "%m/%d/%Y") ORDER BY `Reserved` DESC';
$sqlPickShip = 'SELECT * FROM `orders` WHERE `State`= "Open" AND `Reserved` > 0 AND `Invoice` = "" AND `Ship Date`= date_format(CURRENT_DATE(), "%m/%d/%Y") ORDER BY `Reserved` DESC';

$queryPick = mysqli_query($conn, $sqlPick);
$queryPickShip = mysqli_query($conn, $sqlPickShip);


if (!$queryPickShip || !$queryPick) {
	die ('SQL Error: ' . mysqli_error($conn));
}


$noPickShip = 1;
while ($rowPickShip = mysqli_fetch_array($queryPickShip))
{
	echo 	'<div class="pa2 bg-red ba b--white "> SO: <b>'.$rowPickShip['SO'].'</b> 
				---- <b>'.$rowPickShip['Reserved'].'/'.$rowPickShip['Items'].'</b> Items reserved 
				---- Ship date: <b>'. date('m/d/Y', strtotime($rowPickShip['Ship Date'])) 
			.'</b></div>';

	$noPickShip++;
}

$noPick = 1;
while ($rowPick = mysqli_fetch_array($queryPick))
{
	echo 	'<div class="pa2 bg-yellow ba b--white "> SO: <b>'.$rowPick['SO'].'</b> 
				---- <b>'.$rowPick['Reserved'].'/'.$rowPick['Items'].'</b> Items reserved 
				---- Ship date: <b>'. date('m/d/Y', strtotime($rowPick['Ship Date'])) 
			.'</b></div>';
	
	$noPick++;
}
?>

Une de mes pages avec une requete (queryOrdersCreated.php) :

<?php
    //header("Refresh:1");
include('connect_db.php');

$sql = 'SELECT * FROM `orders` WHERE `State`= "Open" AND `Reserved` <= 0 AND `Invoice` = "" ';

$query = mysqli_query($conn, $sql);

if (!$query) {
	die ('SQL Error: ' . mysqli_error($conn));
}

$no = 1;
while ($row = mysqli_fetch_array($query))
{
	echo 	'<div class="pa2 bg-green ba b--white "> SO: <b>'.$row['SO'].'</b> 
				---- <b>'.$row['Reserved'].'/'.$row['Items'].'</b> Items reserved 
				---- Ship date: <b>'. date('m/d/Y', strtotime($row['Ship Date'])) 
			.'</b></div>';
	$no++;
}
?>

flodias

18 octobre 2018 à 15:39:40

piero5673

18 octobre 2018 à 15:51:12

Bonjour,

Pour connaitre l'état d'une base de données, il faut faire une requête, je ne pense pas qu'il existe d'autre alternative.

Tu peux mettre en place un système du genre cloudfront qui vas éviter à ton serveur d'être spam par les requêtes des utilisateurs. Ca te permettras de faire du spam côté client sans surcharger ton serveur.

Sinon, tu peux regarder du côté des web sockets + redis.

18 octobre 2018 à 17:52:29

Bonjour piero5673,

Merci pour ta réponse, je vais essayer de m'informer pour le système cloudfront et web sockets + redis, je reviens vers toi si j'ai des questions là-dessus.

D'ailleurs si jamais tu as de bonnes ressources je suis preneur !

18 octobre 2018 à 18:01:22

Pour les sockets : https://socket.io/

Pour redis : https://redis.io/

18 octobre 2018 à 19:12:19

Merci !

AJAX / Javascript / Php

Afficher ma BDD en temps réel

Supprimer

Modérer

Signaler le message aux modérateurs