Aller au contenu

Exercices mathématiques...

Le travail est à faire sur ordinateur sans autre aide que ce présent site.

Appel professeur

À chaque fois que vous rencontrer l'icône , appelez le professeur pour validation.

Le but de ce travail est de réaliser un serveur mathématique à partir d'un formulaire HTML et d'un script PHP. Le résultat final ressemblera à cela:

serveur

Vous aurez l'occasion de manipuler du HTML, CSS et du PHP.

Première manipulation: Construire les fichiers

Les premiers fichiers

  1. Créer un dossier site_web.
  2. Copier les deux fichiers suivants et enregistrez-les dans le dossier précédent. Le premier s'appelle index.php et le second traitement.php
Codes PHP à recopier
🗃️ Script PHP
<!DOCTYPE html>
<html>
<body>
<div>
<h1>Serveur mathématiques</h1>
<form action="traitement.php" method="get">
<fieldset>
    <legend>Données personnelles</legend>
    <label for="fname">Nom:</label><br>
    <input type="text" id="nom" name="nom" ><br>
    <label for="lname">Prénom:</label><br>
    <input type="text" id="pnom" name="pnom" ><br>
</fieldset>
    <label for="cars">Choisir une opération</label>
    <select id="op" name="operation">
    <option value="ad">Addition</option>
    <option value="soustrac">Soustraction</option>
    <option value="multipli">Multiplication</option>
    <option value="puissance">Puissance</option>
    </select>
    <hr>
    <label for="lname">Premier nombre:</label><br>
    <input type="number" id="n1" name="n1" ><br>
    <label for="lname">Deuxième nombre:</label><br>
    <input type="number" id="n2" name="n2" ><br>

    <input type="submit" value="Envoyer">

</form> 
</div>
</body>
</html>
🗃️ Script PHP
<!DOCTYPE html>

<html>
<body>
<div>
<?php
$nom = $_GET['nom'];
$prenom = $_GET['pnom'];
$operation = $_GET['operation'];
$nb1 = .......
$nb2 = .......
?>

<h1> <?php echo $nom." ".$prenom ; ?> </h1>
<p>
<?php  
if ($operation == 'ad')
{ $somme = $nb1 + $nb2;
echo "La somme des deux nombres est :".$somme ;
}
else
{$difference = $nb1 - $nb2;
echo "La somme des deux nombres est :".$difference ;
}
?>
</p>
</div>
</body>
</html>

On veut ajouter un fichier css pour envoliver notre page.

Ajouter une feuille de style

  1. Copier le fichier css suivant et enregistrez-le sous le nom mon_style.css dans le dossier précédent.
  2. Ajouter au bon endroit les balises suivantes aux deux fichiers précédents:
    🌍 Code HTML
    <HEAD>
  <link href="mon_style.css" rel="stylesheet" type="text/css"> 
</HEAD>
Code CSS pour les formulaires
CSS
h1,h2{
color:Tomato;
}

input[type=text]{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #FF0000;
border-radius: 4px;
box-sizing: border-box;
}
input[type=number]{
width: 50%;
padding: 12px 20px;
margin: 8px 0;
display: inline-flex;
border: 1px solid #0000FF;
border-radius: 4px;
box-sizing: border-box;
}
input[type=radio]{
width: 50%;
padding: 12px 20px;
margin: 8px 0;
display: inline-flex;
border: 1px solid #0000FF;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #FF00FF;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}

input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;

}
fieldset {
padding:20px 20px 20px 20px;
margin-bottom:10px;
border:1px solid #DF3F3F;
}
legend {
color:#DF3F3F;
font-weight:bold;
}

Lancement du serveur

Lancement du serveur PHP

  1. Lancer UWAMP. L'exécutable se trouve dans le dossier Indus\Web\ présent sur le bureau.
  2. Déposer votre site contenant les trois fichiers dans le dossier www
  3. Visualiser votre travail avec le navigateur. ATTENTION: pour l'instant le php ne fonctionne pas

⚠ Appel professeur n°1:

Amélioration du css

Les balises <fieldset> et <legende> ont été utilisées pour isoler les données personnelles.

Utiliser un balisage

Utiliser ces balises pour isoler la partie numérique avec la légende Données numériques (voir l'exemple donné au début)

Le formulaire s'étend sur toute la largeur de la page. Il serait plus agréable de le centrer et de le réduire.

Utiliser une classe

  1. Tagueur la balise <div> des fichiers index.php et traitement.php avec la classe class="container"
  2. Dans le fichier css, ajouter:
    CSS
    .container{
width: 500px;
border: 1px black solid;
margin-left: auto;
margin-right: auto;
}
  3. N'oubliez pas d'enregistrez les fichiers modifiés.

⚠ Appel professeur n°2:

Modification du fichier traitement.php

Le fichier traitement.php est incomplet.

Compléter un fichier PHP

Les variables $n1$ et $n2 doivent contenir les nombres saisis dans les entrées Premier nombre et Deuxième nombre du fichier index.php. Remplacer les pointillés par les bonnes instructions.

⚠ Appel professeur n°3:

À ce stade, votre php devrait fonctionner. Cependant, vous remarquerez que le fichier traitement.php ne traite que deux opérations arithmétiques. Vous allez donc modifier ce fichier pour qu'il prenne en compte les quatre opérations prévues dans le menu Choisir une opération(la puissance en php est le même opérateur qu'en python...)

On pourra s'inspirer du code suivant qui en fonction de la valeur de $t affiche une phrase différente:

🗃️ Script PHP
if ($t < "10") {
  echo "Have a good morning!";
} elseif ($t < "20") {
  echo "Have a good day!";
} else {
  echo "Have a good night!";
}

⚠ Appel professeur n°4: