Formulaire
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DinoJboc</title>
<link rel="stylesheet" href="DinoJBoc.css">
</head>
<body>
<form method="post" id="frmConnection" action="DinoJBoc.php">
<label for="nom"> Nom du dino :</label>
<input type="text" name="nom" id="nom" required/>
<br/>
<label for="poids"> Poids du dino :</label>
<input type="number" name="poids" id="poids" required />
<br/>
<label for="couleur"> Couleur du dino :</label>
<input type="text" name="couleur" id="couleur" required />
<br/>
<label for="birthDate"> Date de naissance du dino :</label>
<input type="text" name="birthDate" id="birthDate" required />
<br/>
<label for="birthDate"> Entrez une URL de l'image du dino :</label>
<input type="text" name="image" id="image" />
<br/>
<input type="submit" name="cmd" id="cmd" value="Créer" />
</form>
Récupération
<?php session_start();
class Dinosaure {
public $nom;
public $poids;
public $couleur;
public $birthDate;
public $image;
}
if (isset($_POST['nom'])){
$dino = new Dinosaure();
$dino -> nom = $_POST['nom'];
$dino -> couleur = $_POST['couleur'];
$dino -> poids = $_POST['poids'];
$dino -> birthDate = $_POST['birthDate'];
if ($_POST['image'] == ''){
$dino -> image = 'dino.png';
} else {
$dino -> image = $_POST['image'];
}
array_push($_SESSION['Dinos'], $dino);
}
?>
Tableau
<?php if (count($_SESSION['Dinos']) >= 0){
echo '<table>';
echo '
<tr>
<td>Nom</td>
<td>Poids</td>
<td>Couleur</td>
<td>Date de naissance</td>
<tr>';
foreach ($_SESSION['Dinos'] as $dino){
echo '<tr>
<td>'.$dino->nom.'</td>
<td class="poids">'.$dino->poids.'</td>
<td>'.$dino->couleur.'</td>
<td>'.$dino->birthDate.'</td>
<td><img src="'.$dino->image.'"></td>
</tr>';
}
echo '</table>';
}
?>
CSS
table {
border: medium solid #000000;
width: 50%;
}
td, th {
border: thin solid #6495ed;
width: 50%;
}
JavaScript
<span>poids total = </span><span id = "poidsTotal"></span>
<script>
function totalPoids(){
var cells = document.getElementsByClassName("poids");
var total = 0;
Array.from(cells).forEach(function(element){
total += parseFloat(element.textContent);
})
document.getElementById("poidsTotal").textContent = total;
}
totalPoids();
</script>
Bootstrap
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.bundle.min.js" ></script>
<div class="form-group">
<form method="post" id="frmConnection" action="DinoJBoc.php">
<label for="nom" class=" col-md-8 col-lg-6 col-form-label"> Nom du dino :</label>
<div class=" col-md-8 col-lg-6">
<input type="text" class="form-control" name="nom" id="nom" required/>
</div>
<label for="poids" class=" col-md-8 col-lg-6 col-form-label"> Poids du dino :</label>
<div class=" col-md-8 col-lg-6">
<input type="text" class="form-control" name="poids" id="poids" required />
</div>
<label for="couleur" class=" col-md-8 col-lg-6 col-form-label"> Couleur du dino :</label>
<div class=" col-md-8 col-lg-6">
<input type="text" class="form-control" name="couleur" id="couleur" required />
</div>
<label for="birthDate" class=" col-md-8 col-lg-6 col-form-label"> Date de naissance du dino :</label>
<div class=" col-md-8 col-lg-6">
<input type="text" class="form-control" name="birthDate" id="birthDate" required />
</div>
<label for="birthDate" class=" col-md-8 col-lg-6 col-form-label"> Entrez une URL de l'image du dino :</label>
<div class=" col-md-8 col-lg-6">
<input type="text" class="form-control" name="image" id="image" />
</div>
<input type="submit" class="btn btn-primary" name="cmd" id="cmd" value="Créer" />
</form>
</div>