Objectif
Apprendre à utiliser des variables, des conditions, ainsi que les fonctions echo et var_dump pour créer une page qui affiche des informations dynamiques en fonction d’une température définie dans le code.
Tu vas aussi apprendre à intégrer du HTML et du CSS dans une page PHP pour afficher une jauge de thermomètre.
Contexte
Tu dois concevoir une page PHP qui sert de diagnostic de température pour une application météo. Cette page doit :
- utiliser une variable contenant une température ;
- afficher un message différent selon la valeur de cette température ;
- afficher des informations techniques avec
var_dump ;
- afficher un thermomètre visuel simple.
Instructions
Créer un fichier PHP
Crée un fichier nommé :
diagnostic.php
Déclarer une variable
Déclare une variable $temperature pour simuler une température.
Exemple :
$temperature = 15;
Afficher la température actuelle
Utilise echo pour afficher un message comme :
La température actuelle est de 15°C.
Bien sûr, le nombre affiché doit venir de la variable $temperature.
Conditions sur la température
Affiche un message différent selon la valeur de $temperature :
-
Si la température est inférieure à 0°C, affiche :
Il fait très froid. Pense à bien te couvrir !
-
Si la température est comprise entre 0°C et 15°C, affiche :
Il fait frais. Une veste est recommandée.
-
Si la température est comprise entre 15°C et 25°C, affiche :
Le temps est agréable. Profite de ta journée !
-
Si la température est supérieure à 25°C, affiche :
Il fait chaud. Reste bien hydraté !
BONUS: affiche ces messages dans des couleurs différentes (utilise des classes CSS). Par exemple: bleu, cyan, vert, orange.
Utilise var_dump pour afficher le type et la valeur de la variable $temperature.
Ajouter un thermomètre visuel
Tu dois afficher sous le message un petit thermomètre vertical.
Le code HTML et CSS de base est donné ci-dessous. Pour l’instant, la hauteur de remplissage est fixe.
Exemple HTML + CSS de départ
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Diagnostic de température</title>
<style>
body {
font-family: Arial, sans-serif;
}
.thermometre {
width: 60px;
height: 220px;
border: 3px solid
border-radius: 30px;
background-color:
position: relative;
overflow: hidden;
margin-top: 20px;
}
.jauge {
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
background-color: red;
}
</style>
</head>
<body>
...
<div class="thermometer">
<div class="fill" style="height: 50%;"></div>
</div>
</body>
</html>
Rendre la jauge dynamique en PHP
Le but n’est pas de laisser la hauteur à 50%. Tu dois calculer la hauteur de la jauge en fonction de la température, puis l’afficher dans le style du div .jauge.
Par exemple, tu peux imaginer que :
-10°C correspond à 0%40°C correspond à 100%
Entre ces deux valeurs, la hauteur doit être proportionnelle.
$pourcentage = (($temperature + 10) / 50) * 100;
Cette formule transforme une température comprise entre -10 et 40 en un pourcentage entre 0 et 100.
Exemple d’intégration dans le HTML
Au lieu de ceci :
<div class="jauge" style="height: 50%;"></div>
tu devras obtenir quelque chose du genre :
<div class="jauge" style="height: <?php echo $pourcentage; ?>%;"></div>
Travail demandé
Ta page doit donc :
- déclarer une variable
$temperature ;
- afficher la température actuelle ;
- afficher le bon message avec des conditions ;
- afficher
var_dump($temperature) ;
- afficher un thermomètre simple ;
- rendre la hauteur de la jauge dynamique avec PHP.
Exemple attendu dans le navigateur
Si la variable $temperature vaut 10, on doit obtenir quelque chose comme :
La température actuelle est de 10°C.
Il fait frais. Une veste est recommandée.
Puis plus bas :
- un thermomètre rempli partiellement ;
- les détails techniques :
int(10)
Si la variable $temperature vaut -5, on doit obtenir :
La température actuelle est de -5°C.
Il fait très froid. Pense à bien te couvrir !
avec une jauge beaucoup moins remplie.
Code de départ proposé
Voici une structure possible pour commencer :
<?php
$temperature = 15;
$pourcentage = (($temperature + 10) / 50) * 100;
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Diagnostic de température</title>
<style>
body {
font-family: Arial, sans-serif;
}
.thermometre {
width: 60px;
height: 220px;
border: 3px solid #333;
border-radius: 30px;
background-color: #f1f1f1;
position: relative;
overflow: hidden;
margin-top: 20px;
}
.jauge {
position: absolute;
bottom: 0;
width: 100%;
background-color: red;
}
</style>
</head>
<body>
<?php
echo "<h1>Diagnostic météo</h1>";
echo "<p>La température actuelle est de " . $temperature . "°C.</p>";
if ($temperature < 0) {
echo "<p>Il fait très froid. Pense à bien te couvrir !</p>";
} elseif ($temperature <= 15) {
echo "<p>Il fait frais. Une veste est recommandée.</p>";
} elseif ($temperature <= 25) {
echo "<p>Le temps est agréable. Profite de ta journée !</p>";
} else {
echo "<p>Il fait chaud. Reste bien hydraté !</p>";
}
?>
<div class="thermometre">
<div class="jauge" style="height: <?php echo $pourcentage; ?>%;"></div>
</div>
<h2>Détails techniques :</h2>
<?php
var_dump($temperature);
?>
</body>
</html>
Consigne supplémentaire
Teste plusieurs valeurs pour $temperature dans ton code :
Observe à chaque fois :
- le message affiché ;
- la hauteur de la jauge ;
- le résultat de
var_dump.
Bonus
Pour aller plus loin, tu peux changer la couleur de la jauge selon la température :
- bleu si la température est basse ;
- orange si elle est modérée ;
- rouge si elle est élevée.
