Créé en 2018 et modifié le 01 Juil 2018

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>