Afficher clairement des statistiques financières sur une page web peut être complexe.
Sans une structure et une présentation appropriées, les données deviennent difficiles à analyser, entraînant une mauvaise interprétation.
Cet article vous guide pour créer et styliser des boîtes HTML qui structurent efficacement vos statistiques, facilitant leur lecture et compréhension.
Réalisez votre projet web de A à Z sous PHP 8
Créer des boîtes HTML pour stats
Vous allez créer des conteneurs HTML dans lesquels vous afficherez ultérieurement les statistiques calculées. Ces boîtes peuvent inclure des statistiques telles que le nombre total de transactions, les ventes totales, les achats totaux, etc. Utilisez des éléments HTML et du CSS de base pour structurer et styliser ces boîtes.
Code HTML :
Ajoutez ce code dans le fichier bien-detail.php
<!--Affichage des statistiques -->
<div class="statistique">
<div class="boxStat">
<h4>total achat</h4>
<span class="depense">€</span>
</div>
<div class="boxStat">
<h4>total vente</h4>
<span class="rentre">€</span>
</div>
<div class="boxStat">
<h4>total loyer</h4>
<span class="rentre">€</span>
</div>
</div>
Résultat d’affichage :
En suivant ces étapes, vous obtiendrez des boîtes bien structurées où vous pourrez afficher vos statistiques. Chaque boîte présente un titre et une icône de l’euro pour représenter les montants des achats, des ventes, et des loyers, ce qui rend la présentation claire et lisible pour vous et les utilisateurs.
Styliser boîtes HTML avec CSS
Pour mettre en forme les boîtes HTML destinées à afficher les statistiques futures, vous allez créer un design attrayant et fonctionnel pour la présentation des données. Voici une approche détaillée pour formater ces boîtes, y compris le code HTML et CSS pour un rendu professionnel.
Code CSS :
/*** STATISTIQUES ***/
.statistique{
width:90%;
margin: 0 auto;
padding: 20px;
display: flex;
justify-content: center;
flex-wrap: wrap;
border-bottom: 1px dashed #ccc;
}
.boxStat{
background-color: #fff;
margin: 3px 10px;
padding: 10px;
border-radius: 5px;
border: 1px solid #e1e1e1;
text-align: center;
width: 100px;
}
.boxStat h4{
text-transform: capitalize;
border-bottom: 1px dashed #e1e1e1;
padding-bottom: 4px;
margin-top: 0;
margin-bottom: 4px;
}
/*** STATISTIQUES ***/
Résultat d’affichage :
En appliquant ce style, vous obtenez des boîtes centrées et bien espacées pour afficher les statistiques. Chaque boîte est élégamment formatée avec des bords arrondis, un fond blanc, et un texte centré. Vous remarquez que les titres des statistiques sont mis en valeur avec un style de capitalisation et une séparation visuelle par une ligne pointillée.
Affichage stats achats via SQL
Pour afficher le total des achats d’un bien, vous devez suivre plusieurs étapes : récupérer les données nécessaires de la base de données, les traiter, et les afficher sur votre page web. Voici comment vous pouvez procéder :
Étape 1 : Écrire la requête SQL
Vous devez créer une requête SQL pour calculer le total des achats d’un bien spécifique. Cette requête additionne les quantités achetées pour un bien donné.
Étape 2 : Intégrer la requête dans le code PHP
Vous allez utiliser cette requête SQL dans votre fichier PHP pour récupérer et afficher le total des achats. Voici un exemple de code PHP :
/***** TOTAL ACHAT */
$sql = 'SELECT SUM(montant) As totalAchat FROM transaction WHERE bienID =:bienID AND typeID=1';
$req =$cnx->prepare($sql);
$req->execute(
array(
':bienID' =>$data['bienID']
)
);
$d1 = $req->fetch(PDO::FETCH_ASSOC);
if($d1['totalAchat']>0){
$totalAchat = $d1['totalAchat'];
}else{
$totalAchat = 0 ;
}
?>
Résultat d’affichage :
En utilisant ce code, vous obtiendrez le total des achats pour le bien spécifié, affiché correctement sur votre page web. Si le total est supérieur à zéro, il sera affiché ; sinon, la valeur sera affichée comme zéro.
Affichage stats ventes et loyers
Pour afficher le total des ventes et des loyers d’un bien, vous devez effectuer des calculs similaires à ceux utilisés pour les achats. Voici les étapes détaillées pour chaque type de transaction.
Code source :
/***** TOTAL VENTE */
$sql = 'SELECT SUM(montant) As totalVente FROM transaction WHERE bienID =:bienID AND typeID=2';
$req =$cnx->prepare($sql);
$req->execute(
array(
':bienID' =>$data['bienID']
)
);
$d2 = $req->fetch(PDO::FETCH_ASSOC);
if($d2['totalVente']>0){
$totalVente = $d2['totalVente'];
}else{
$totalVente = 0 ;
}
/***** TOTAL LOYER */
$sql = 'SELECT SUM(montant) As totalLoyer FROM transaction WHERE bienID =:bienID AND typeID=3';
$req =$cnx->prepare($sql);
$req->execute(
array(
':bienID' =>$data['bienID']
)
);
$d3 = $req->fetch(PDO::FETCH_ASSOC);
if($d3['totalLoyer']>0){
$totalLoyer = $d3['totalLoyer'];
}else{
$totalLoyer = 0 ;
}
Résultat d’affichage :
En appliquant ces requêtes, vous obtiendrez les totaux des ventes et des loyers pour le bien spécifié, affichés de manière appropriée sur votre page web. Les valeurs affichées seront soit les totaux calculés, soit zéro si aucune transaction correspondante n’est trouvée.
Calcul prix unitaire moyen achats
Pour calculer le prix unitaire moyen des achats d’un bien, vous devez suivre les étapes suivantes :
- Écrire la requête SQL :Vous devez extraire la somme totale des montants des achats et la quantité totale achetée pour un bien spécifique. Ensuite, vous calculez le prix unitaire moyen en divisant la somme totale des montants par la quantité totale achetée.
- Intégrer la requête SQL dans le code PHP :Vous allez préparer et exécuter la requête SQL pour obtenir ces valeurs, puis calculer le prix unitaire moyen.
- Afficher le résultat :Vous allez afficher le prix unitaire moyen sur la page.
Voici code pour effectuer ce calcul :
<!--Profit par vente-->
<div class="affichage">
<h4>Profit sur les ventes :</h4>
<ul>
<li><strong>Prix unitaire moyen / Achat : </strong></li>
</ul>
</div>
<!--Affichage des calculs -->
Résultat d’affichage :
En utilisant ce code, vous obtiendrez le prix unitaire moyen des achats affiché sur votre page. Ce montant représente le coût moyen par unité pour le bien spécifique, offrant ainsi une vue d’ensemble claire de vos dépenses.
Calculer stats prix moyen achats
Le prix unitaire moyen des achats peut être calculé en faisant la moyenne des prix unitaires pour tous les achats d’un bien. Voici comment vous pouvez le faire :
- Récupérer les données nécessaires :Obtenez toutes les transactions d’achat pour le bien concerné.
- Calculer la somme totale des prix unitaires :Additionnez les prix unitaires de chaque transaction.
- Compter le nombre d’achats :Déterminez combien de transactions d’achat ont été effectuées.
- Calculer la moyenne :Divisez la somme totale des prix unitaires par le nombre d’achats.
Code PHP
Voici le code PHP pour calculer et afficher le prix unitaire moyen des achats :
<?php //Requetes SQL des calcules
/**** PU moyen pondéré par achat */
$sql = 'SELECT SUM(quantite) As qt,SUM(montant) AS montant FROM transaction WHERE bienID =:bienID AND typeID=1';
$req = $cnx->prepare($sql);
$req->execute(array(
':bienID' => $_GET['bienID']
));
$c1 = $req->fetch(PDO::FETCH_ASSOC);
if ($c1['qt'] > 0) {
$puMA = Round($c1['montant'] / $c1['qt'], 2);
$puMoyenAchat = '<span class="depense">'.$puMA.' $euro;</span>';
} else {
$puMoyenAchat = '<em> Pas encore d\'achat</em>';
}
?>
Résultat d’affichage :
En utilisant ce code, vous afficherez le prix unitaire moyen des achats directement sur votre page. Le montant affiché représente le coût moyen par unité pour le bien spécifique, offrant ainsi une vue claire des coûts d’achat. Si aucun achat n’a encore été enregistré, un message n’indiquera « pas encore d’achat ».
Calculer stats prix moyen ventes
Pour calculer le prix unitaire moyen des ventes, vous allez suivre un processus similaire à celui du calcul du prix unitaire moyen des achats. Vous devrez extraire la somme totale des montants des ventes et la quantité totale vendue pour un bien spécifique, puis diviser la somme totale des montants par la quantité totale vendue.
Code PHP
Intégrez la requête SQL dans un script PHP pour calculer et afficher le prix unitaire moyen des ventes
/*/**** PU moyen pondéré par vente*/
$sql ='SELECT SUM(quantite) As qt,SUM(montant) AS montant FROM transaction WHERE bienID =:bienID AND typeID=2';
$req = $cnx->prepare($sql);
$req->execute(array(
':bienID' => $_GET['bienID']
));
$c2 = $req->fetch(PDO::FETCH_ASSOC);
if($c2['qt']>0){
$puMV = Round($c2['montant'] / $c2['qt'],2);
$puMoyenVente = '<span class="rentre">'.$puMV.' $euro;</span>';
else{
$puMoyenVente = '<em> Pas encore de vente</em>';
}
Pour afficher le prix unitaire moyen des achats et des ventes, ainsi que le bénéfice calculé, vous pouvez intégrer le code suivant dans votre fichier PHP :
<ul>
<li><strong>Prix unitaire moyen / Achat : </strong><?=$puMoyenAchat;?></li>
<li><strong>Prix unitaire moyen / Vente: </strong><?=$puMoyenVente;?></li>
<?php
if ($c2['qt'] > 0) {
?>
<li><strong>Calcule du bénéfice de la vente : </strong><?=$c2['qt'];?>(<?=$puMV;?> - <?=$puMA;?>) = <span class="rentre"><?= round($c2['qt']($puMV - $puMA), 2)?> €</span></li>
<?php
}
?>
</ul>
Résultat d’affichage :
En appliquant ce code, vous obtiendrez le prix unitaire moyen des ventes affiché sur votre page. Vous verrez également le calcul du bénéfice total en fonction du prix unitaire moyen des ventes et des achats. Si aucune vente n’a été enregistrée, un message indiquera « Pas encore de vente ».
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment créer des boîtes HTML pour statistiques ?
Comment mettre en forme des boîtes HTML avec CSS ?
Comment afficher le total des achats d'un bien ?
Comment calculer le prix unitaire moyen des achats ?
Comment calculer le prix unitaire moyen des ventes ?
Conclusion
En appliquant ces techniques, vous pouvez améliorer la présentation de vos données financières. Quelle autre méthode pourriez-vous explorer pour optimiser l’affichage de vos statistiques ?
