Créer un site de coût kilométrique - Version PHP

Mini sites

Guillaume LELEU

Mis en ligne le 11-03-2022 à 09:11

Langues disponibles

1 . Introduction

2 . Mettre le HTML

3 . Inclure Bootstrap

Afin de rendre notre site plus beau nous allons inclure Bootstrap qui permet d'avoir des éléments de décoration fait avec du CSS déjà tout prêt !

Afin de l'inclure vous devez copier-coller ces codes aux endroits respectif (voir image ci-dessous) :

**Dans le `<head>` :**
```
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/c861258f66.js" crossorigin="anonymous"></script>
```

**En dessous du `<body>` :**
```
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
```

**Voici une image du rendu :**

![bootstrap coût kilometre](https://coding-school.fr/images/users/1646919275.png)

Maintenant nous allons mettre des colonnes pour rendre notre site plus présentable. Sur Bootstrap il faut inclure une class `container` suivit d'un `row`.

Bootstrap se décompose en 12 colonnes qui se répartissent sur tout l'écran, nous allons donc créer 2 colonnes en mettant `col-sm-6` 2 fois comme dans le code ci-dessous :

**Code :**
```
<div class="container">
	<div class="row">
		 <div class="col-sm-6">
	     //Première colonne (formulaire)
	   </div>
	   <div class="col-sm-6">
	      //Deuxième colonne (affichage du résultat)
	   </div>
  </div>
</div>
```

**Voici une image du rendu  :**

![grid boot](https://coding-school.fr/images/users/1646920207.png)

4 . Colonne formulaire

Sur la colonne de gauche nous allons inclure le formulaire qui permettra d'écrire les informations qui vont permettre de la calcul voulu :

Nous allons tout d'abord commencer par mettre un titre en `<h1>` : 
```
<h1><i class="fa-solid fa-circle-info"></i> Calcul de coût</h1>
```

La base d'un formulaire commence avec le mot clé `<form>`, nous allons donc l'inclure :

```
<form  method="GET">
				
</form>
```

Dans le `<form>` nous allons maintenant mettre des input qui permettront d'écrire des données demandé comme par la consommation moyenne de la voiture, les kilomètres parcourus et le prix de l'essence (au litre).

Comme nous utilisons Bootstrap nous allons utiliser la classe `mb-3` qui permet au formulaire de prendre forme.

```
<div class="mb-3">
					<label class="form-label"><i class="fa-solid fa-gas-pump"></i> Consommation de votre voiture en moyenne (Litre/100)</label>
					<input type="decimal" class="form-control" name="consoLitre100" min="0.1">
</div>
<div class="mb-3">
					<label class="form-label"><i class="fa-solid fa-arrow-down-1-9"></i> Kilomètres parcourus</label>
					<input type="decimal" class="form-control" name="kmParcourus" min="1" max="100000" >
</div>
<div class="mb-3">
					<label class="form-label"><i class="fa-solid fa-euro-sign"></i> Prix du litre</label>
					<input type="decimal" class="form-control" name="prixDuLitre" >
</div>
```

**Image :**

![input bootstr](https://coding-school.fr/images/users/1646920473.png)

Pour finir nous allons mettre un bouton afin d'envoyer les données du formulaire :
```
<button type="submit"  class="btn btn-primary btn-lg" name="calculer"><i class="fa-solid fa-arrow-up-right-from-square"></i> Envoyer</button>
```

**Image :**

![button form](https://coding-school.fr/images/users/1646920674.png)

5 . Colonne résultat

6 . Mettre le PHP

Cette section vous permettra d'afficher le résultat de votre formulaire.

**Code complet et explication ensuite :**
```
<?php 
			  if (isset ($_GET['calculer']))
			  {
			  	if (!empty($_GET['consoLitre100']) || !empty($_GET['kmParcourus']) || !empty($_GET['prixDuLitre']))
			  	{
					$total = $_GET['kmParcourus'] * ($_GET['consoLitre100']/100);
					$totalCout = $total *  $_GET['prixDuLitre'];
					echo '<ul class="list-group">';
						echo '<li class="list-group-item">Vous consommerez <b>' .round($total, 2). "</b>L au 100km.";
						echo '<li class="list-group-item">Prix total de ce trajet : <b>' .round($totalCout, 2). "</b>€";
					echo '</ul>';
				}
			  }
			?>
```

**Ou mettre le code ?**

![dfgfdgf](https://coding-school.fr/images/users/1646922048.png)

**Tout d'abord le code :**
```
if (isset ($_GET['calculer']))
{

}
```
Ce code permet de savoir si l'utilisateur a bien appuyé sur le bouton "Envoyer" dans le formulaire.

**Le code :**
```
if (!empty($_GET['consoLitre100']) || !empty($_GET['kmParcourus']) || !empty($_GET['prixDuLitre']))
{
					
}
```
Ce code permet d'éviter des erreurs dans le site et vérifie si les zones de texte ont bien été remplis par l'utilisateur.

**Le code :**
```
$total = $_GET['kmParcourus'] * ($_GET['consoLitre100']/100);
```
Ce code permet de calculer la consommation en moyenne au 100km pour le trajet prévu suivant la distance et le prix du litre.

**Le code :**
```
$totalCout = $total *  $_GET['prixDuLitre'];
```
Ce code reprend le résultat du dessus et permet de calculer le coût de notre trajet.

**Le code :**
```
echo '<ul class="list-group">';
echo '</ul>';
```
Ce code permet de créer une liste en bootstrap pour ensuite y mettre nos valeurs calculées.

**Le code :**
```
echo '<li class="list-group-item">Vous consommerez <b>' .round($total, 2). "</b>L au 100km.";
echo '<li class="list-group-item">Prix total de ce trajet : <b>' .round($totalCout, 2). "</b>€";
```
Ce code permet d'afficher nos variables calculées précédemment. A noter que nous utilisons la fonction `round()` pour ajuster les résultats à 2 chiffres après la virgule.