Mission n°3

manon

Gestion des catégories

Semaine 1 : Le tableau

Aspect graphique

{{:ppe2.2:equipe3:formajout.png?300|

Aspect programmation

<html>
<body>
<p>Les catégories</p>
<?php
try
{
$connexion = new PDO('mysql:host=localhost;dbname=bdarbitre', 'root', '');
}
catch(Exception $e)
{
die('Erreur: '.$e->getMessage());
}
$resultat=$connexion->query('SELECT NUM_CATEGORIE, NOM_CATEGORIE, MONTANT_INDEMNITE FROM categorie')
?>

Connexion à la base de données et création de la requête permettant de récupérer le nom, numéro et montant de chaque catégories.

<table>
<tr>
<td>Numero categorie </td>
<td>Nom categorie </td>
<td>Montant indemnite </td>
</tr>
<?php
while($ligne=$resultat->fetch())
{
?>
<tr>
<td><?php echo $ligne['NUM_CATEGORIE'];?></td>
<td><?php echo $ligne['NOM_CATEGORIE'];?></td>
<td><?php echo $ligne['MONTANT_INDEMNITE'];?></td>
<td><a href="action/action_supprimer_cat.php?num=<?php echo $ligne['NUM_CATEGORIE'];?>">Supprimer</a></td> <!-- Lien pour la suppression d'une catégorie. -->
<td><a href="form/form_modifier_cat.php?num=<?php echo $ligne['NUM_CATEGORIE'];?>">Modifier</a></td> <!-- Lien vers le formulaire de modification d'une catégorie. -->
</tr>
<?php
}
?>
</table>
<?php
$resultat->CloseCursor();
?>
<a href="form/form_ajouter_cat.php"> Ajouter </a> <!-- Bouton de validation de l'ajout. -->
</body>
</html>

Création du tableau puis remplissage de celui ci avec les résultats de la requête précédente.

Semaine 2: Le formulaire d'ajout

Aspect graphique

Aspect programmation

<html>
<head>
<title>Ajouter une categorie</title>
</head>
<legend>Ajouter une catégorie.</legend>
<body>
<script>
function verif_input_etoile(){
var input=document.forms[0].elements; //retourne les éléments du formulaires(input, label,...)
for(var i=0;i<input.length;i++) {
var tinput=input[i].id.split("_"); //créer un tableau avec [0]="etoile" si on a name="etoile_nom"
if(tinput.length>0 && tinput[0]=="etoile"){
if (input[i].value=="") {
alert(tinput[1]+" : Champ obligatoire");
input[i].focus(); //positionne un focus sur le champ
return false; //une erreur on redonne la main au formulaire
}
}
}
document.forms[0].submit();
}
</script>

Code en JavaScript permettant de signaler a l'utilisateur si il oublie de remplir un champ obligatoire. Le programme va vérifier, pour chacun des champs ayant un id commençant par “etoile_”, si il n'est pas vide et afficher une alerte si c'est le cas.

<form method "get" action="../action/action_ajouter_cat.php">
<table>
<tr><td>Nom Categorie: </td><td><input id="etoile_nom" type="text" name="Nom" ></td></tr>
<tr><td>Montant Indemnite: </td><td><input id="etoile_montant" type="text" name="MtnInd" ></td></tr>
<tr><td><input type="button" value="AJOUTER" onclick="verif_input_etoile()" ></td></tr>
</table>
</form>
</body>
</html>

Création du formulaire et du bouton « AJOUTER ». Le formulaire de modification.

Aspect graphique

Aspect programmation

On utilise les même lignes de code de JavaScript que le formulaire d’ajout ainsi que la meme connexion à la base de données.

$resultat=$connexion->prepare('SELECT NUM_CATEGORIE, NOM_CATEGORIE, MONTANT_INDEMNITE FROM categorie WHERE NUM_CATEGORIE=:numC');
$resultat->execute(array('numC'=>$_GET['num']));
$ligne=$resultat->fetch()
?>
<form method "get" action="../action/action_modifier_cat.php">
<table>
<tr><td> </td><td><input type="hidden" name="Num" value=<?php echo $ligne['NUM_CATEGORIE']?> ></td></tr>
<tr><td>Nom categorie </td><td><input id="etoile_nom" type="text" name="Nom" value=<?php echo $ligne['NOM_CATEGORIE']?> ></td></tr>
<tr><td>Montant indemnite </td><td><input id="etoile_montant" type="text" name="Montant" value=<?php echo $ligne['MONTANT_INDEMNITE']?>></td></tr>
<tr><td><input type="button" value="MODIFIER" onclick="verif_input_etoile()"></td></tr>
</table>
</form>
</body>

La requête $resutat permet d’obtenir les informations sur la catégorie sélectionné grâce au numéro de catégorie qui est passé dans le lien « numC ». Ensuite pour remplir les champs avec les valeurs correspondante il suffit de faire value=<?php echo $ligne['nom_du_champs']?> . Puis lorsqu'on clique sur le bouton cela execute d'abord le script Java, et fait les modification si le formulaire est conforme.