Les formulaires & base de données
Formulaire: explications du php et du html
Bonjour tout le monde,
Il m'a semblé indispensable de rappeler quelques notions du php qui sont en rapport avec les formulaires, les variables et la base de données!
Voici un exemple expliqué du début à la fin d'un formulaire qui enregistre les données dans une base de données et un exemple également de la récupération des données.
Résultat final
Formulaire:
http://desopilo.olympe-network.com/tutomsg.php
Récupération des données:
http://desopilo.olympe-network.com/tutomsg2.php
Niveau requis: Intermédiaire
Temps requis: 20min.
Utilité: Vous utiliserez ca toute votre vie :)
Commencons dès maintenant
Le champ:
Voici comment faire un champ en HTML. J'ai utilisé deux exemples, qui pourraient vous êtres utiles, c'est à dire le pseudo et le mot de passe.
Le pseudo est un champ de type "text" et que vous nommez (name) "pseudo" pour la facilité.
Le champ du mot de passe est de type password, (pour avoir des petites étoiles) et vous le nommez motdepasse.
- Code: Tout sélectionner
<input type="text" name="pseudo"/>
Mot de passe:
<input type="password" name="motdepasse" />
Niveau php:
Récupérer la valeur d'un champ en php est simple. Pour nos deux exemples nous aurions:
- Code: Tout sélectionner
<?
$pseudo = $_POST['pseudo'];
$motdepasse = $_POST['motdepasse'];
?>
Nous verrons plus tard comment enregistrer dans la base de données.
La zone de texte (textarea):
Dans mon exemple, le textarea devra récupérer le commentaire du visiteur. Je vais donc appeler le textarea "commentaire" et le HTML ressemblera à ceci:
- Code: Tout sélectionner
<textarea name="commentaire" id="textarea" cols="45" rows="5"></textarea>
cols et rows sont la largeur de le nombre de lignes du textarea]
Pour récupérer la valeur d'un textarea, voici ce que nous devons faire avec le php:
- Code: Tout sélectionner
<?
$commentaire = $_POST['commentaire'];
?>
Les cases à cocher (checkbox) :
Les checkbox sont très utiles pour les choix multiples où il y a la possibilité de cocher plusieurs cases. Regardez comment les construire en HTML (imaginons que la question est: A qui MonSiteGratuit est-il destiné?) :
- Code: Tout sélectionner
<input type="checkbox" name="pourlesnuls" value="Pour les nuls" > Pour les nuls<br>
<input type="checkbox" name="pourlespros" value="Pour les pros" > Pour les pros<br>
<input type="checkbox" name="pourleswebmasters" value="Pour les webmasters" > Pour les webmasters<br>
Alors ici ca se complique. Lorsque un input est coché, il est égal a son value. Donc, dans le cas de notre exemple:
- Code: Tout sélectionner
<?
$pourlesnuls = $_POST['pourlesnuls']; //si c'est coché, ca affichera le value, soit 'Pour les nuls', sinon, ca n'affichera rien
$pourlespros = $_POST['pourlespros'];//idem sauf que cest 'Pour les pros'
$pourleswebmasters = $_POST['pourleswebmasters']; //meme chose
/*et le total de ce qui est coché sera enrégistré sous une variable, ainsi: */
$publicdemsg = $pourlesnuls .'; '.$pourlespros.'; '. $pourleswebmasters.'.'; ?>
Les radios:
Les radios sont très pratiques, ils ne donnent le droit qu'à un seul choix.
Pour qu'il n'y ait qu'un seul choix possible, il faut que les inputs aient tous le même nom!
En HTML cela donne, pour un choix de couleur:
- Code: Tout sélectionner
<input name="couleur" type="radio" value="Bleu" />Bleu<br />
<input name="couleur" type="radio" value="Blanc" />Blanc<br />
<input name="couleur" type="radio" value="Rouge" />Rouge
Donc le name est pareil partout, il s'appelle 'couleur'. Le value, lui est différent, vous mettez le nom des choix de couleur, dans l'exemple: Bleu, Blanc et Rouge.
Donc en php, le choix coché par le visiteur serait enrégistré dans une variable comme cela:
- Code: Tout sélectionner
<?
$couleur = $_POST['couleur'];
?>
Facile n'est-ce pas?
Pour les radios, je vous conseille qu'un des choix possible soit sélectionné d'office, pour cela, modifiez par exemple:
- Code: Tout sélectionner
<input name="couleur" type="radio" value="Bleu" />Bleu<br />
par:
- Code: Tout sélectionner
<input name="couleur" type="radio" value="Bleu" checked="checked" />Bleu<br />
Il suffisait d'ajouter l'attribut "checked"
Les lites déroulantes:
Les listes déroulantes sont bien pour demander une tranche d'age par exemple, même si vous pouvez aussi vous servir des radios pour ca... Voici comment faire en HTML les listes déroulantes:
- Code: Tout sélectionner
<select name="age">
<option value=''>- Select -</option>
<option value="Moins de 18 ans" > Moins de 18 ans
<option value="18-30" > 18-30
<option value="30-60" > 30-60
<option value="60+" > >60+
</select>
Dans ce cas-ci je demande dans quelle tranche d'âge se trouve la personne interrogée.
Remarquez le "name", l'attribut de "select". Je l'ai nommé "age" c'est important pour la suite:
En php, pour récupérer la réponse dans une variable, je vais m'y prendre comme ca:µ$
- Code: Tout sélectionner
$age = $_POST['age'];
et la variable sera égale au value de l'option sélectionnée dans la liste :)
Si vous souhaitez qu'un choix soit sélectionné dès le départ, ajoutez l'attribut selected="selected" ainsi:
option value="Moins de 18 ans" selected="selected" > Moins de 18 ans
Le bouton "Envoyer":
- Code: Tout sélectionner
<label>
<input type="submit" name="button" id="button" value="Envoyer" />
</label>
Formulaire entier + variables
HTML
Tout d'abord, un formulaire commence toujours avec la balise <form> et se termine par la balise </form>
Dans la première balise"<form>", vous devez mettre les attributs suivants: (method: post et action: lapagesurlaquellesetrouvelescommandesPHP)
- Code: Tout sélectionner
<form method="post" action="tutomsg.php">
Donc mon formulaire ressemble à ça:
- Code: Tout sélectionner
<form id="form1" name="form1" method="post" action="">
<p>Les champs simples:</p>
<p>Pseudo:<br />
</p>
<label>
<input type="text" name="pseudo" />
</label>
<br />
<br />
Mot de passe:<br />
<label>
<input type="password" name="pseudo" />
<br />
<br />
Less textareas:<br />
Commentaire:<br />
<textarea name="commentaire" id="textarea" cols="45" rows="5"></textarea>
<br />
<br />
<br />
Les checkbox:<br />
Mon
</label>
SiteGratuit est un site destiné:<br />
<label>
<input type="checkbox" name="pourlesnuls" value="Pour les nuls"/>
</label>
Pour les nuls<br />
<label>
<input type="checkbox" name="pourlespros" value="Pour les pros" />
</label>
Pour les pros<br />
<label>
<input type="checkbox" name="pourleswebmasters" value="Pour les webmasters" />
</label>
<p>Pour les webmasters
<br />
<br />
Les radios:<br />
<input name="couleur" type="radio" value="Bleu" />
Bleu<br />
<input name="couleur" type="radio" value="Blanc" />
Blanc<br />
<input name="couleur" type="radio" value="Rouge" />
Rouge<br />
Exemple d'un radio sélectionné d'office:<br />
<input name="couleurselected" type="radio" value="Bleu" />
Bleu<br />
<br />
Les listes déroulantes:<br />
MSG est destiné aux gens d'un age de:<br />
<select name="age">
<option value=''>- Select -</option>
<option value="Moins de 18 ans" > Moins de 18 ans
<option value="18-30" > 18-30
<option value="30-60" > 30-60
<option value="60+" > >60+
</select>
</p>
<p>
<label>
<input type="submit" name="button" id="button" value="Envoyer" />
</label>
<br /></p></form>
Ceci est bien évidemment la partie Html, voici maintenant la partie php où on enregistre les variables:
PHP:
- Code: Tout sélectionner
//champs:
$pseudo = $_POST['pseudo'];
$motdepasse = $_POST['motdepasse'];
//textarea:
$commentaire = $_POST['commentaire'];
//Checkbox:
$pourlesnuls = $_POST['pourlesnuls']; //si c'est coché, ca affichera le value, soit 'Pour les nuls', sinon, ca n'affichera rien
$pourlespros = $_POST['pourlespros'];//idem sauf que cest 'Pour les pros'
$pourleswebmasters = $_POST['pourleswebmasters']; //meme chose
/*et le total de ce qui est coché sera enrégistré sous une variable, ainsi: */
$publicdemsg = $pourlesnuls .'; '.$pourlespros.'; '. $pourleswebmasters.'.';
//radios:
$couleur = $_POST['couleur'];
//Liste déroulante:
$age = $_POST['age'];
Ajout des données dans la base de données:
Prologue:
Créez une table 'tutomsg', avec un champ id int(10) auto_increment, un champ pseudo text, motdepasse text, commentaire text, publicdemsg text, couleur text et age text.
1) se connecter à la base de données:
- Code: Tout sélectionner
mysql_connect("localhost","nomduser","motdepasse");
mysql_select_db("nomdelabasededonnees");
2) Ajouter les données dans la base de données
Vous devez utiliser la commende mysql_query. Utilisez-là comme ca:
- Code: Tout sélectionner
mysql_query("INSERT INTO `tutomsg` VALUES('','$pseudo','$motdepasse','$commentaire','$publicdemsg','$couleur','$age')");
Fermeture de la base de données:
- Code: Tout sélectionner
mysql_close();
Récapitulons le code php avec les derniers ajouts:
- Code: Tout sélectionner
<?
if(($_POST['pseudo'] != ''){ //si quelqu'un a entré un pseudo:
//champs:
$pseudo = $_POST['pseudo'];
$motdepasse = $_POST['motdepasse'];
//textarea:
$commentaire = $_POST['commentaire'];
//Checkbox:
$pourlesnuls = $_POST['pourlesnuls']; //si c'est coché, ca affichera le value, soit 'Pour les nuls', sinon, ca n'affichera rien
$pourlespros = $_POST['pourlespros'];//idem sauf que cest 'Pour les pros'
$pourleswebmasters = $_POST['pourleswebmasters']; //meme chose
/*et le total de ce qui est coché sera enrégistré sous une variable, ainsi: */
$publicdemsg = $pourlesnuls .'; '.$pourlespros.'; '. $pourleswebmasters.'.';
//radios:
$couleur = $_POST['couleur'];
//Liste déroulante:
$age = $_POST['age'];
mysql_connect("localhost","nomdelutilisateur","motdepasse");
mysql_select_db("desopilo");
mysql_query("INSERT INTO `tutomsg` VALUES('','$pseudo','$motdepasse','$commentaire','$publicdemsg','$couleur','$age')");
mysql_close();}
else { echo 'Vous n\'avez pas rempli le champ Pseudo...';} //si personne n'a rempli le champ pseudo)) ?>
Récupération des données
Bon alors créez une nouvelle page, toujours à l'extension .php et cette page vous affichera ce dont vous avez besoin.
Créez tout d'abord un tableau, car les infos seront classées dedans.
Voici le tableau de départ en HTML:
- Code: Tout sélectionner
<table width="100%" border="1">
<tr>
<td>ID</td>
<td>Pseudo</td>
<td>Mot de passe</td>
<td>Commentaire</td>
<td>Public de msg</td>
<td>Couleur</td>
<td>Age</td>
</tr>
</table>
Maintenant nous allons faire en sorte que php crée une ligne à chaque réponse entrée. Pour cela, nous allons modifier notre tableau en insérant du php. On va devoir d'abord se connecter à la base de données, puis prendre les informations, les écrire où il faut, puis se déconnecter de la base de données.
1 Connexion à la BDD:
- Code: Tout sélectionner
mysql_connect("localhost","nomdutilisateur","motdepasse");
mysql_select_db("nomdelabdd");
Récupération des données de la base:
- Code: Tout sélectionner
$donnees = mysql_query("SELECT * FROM `tutomsg` ORDER BY id");
Ecrire les données sur la page
Bon, maintenant, tout ce qui est dans la base de données, tous les id, pseudos, couleurs, etc. sont enrégistrés sous "$donnees"! Il va falloir trier tout ca ainsi:
- Code: Tout sélectionner
while($aecrire = mysql_fetch_array($donnees)){
}
et chaque donnée après sera écrite ainsi: $aecrire['id'] écrira le premier "id", $aecrire['pseudo'] ecrira le premier pseudo etc. Donc créons notre tableau entre les accolades du while.
Notre tableau final ressemble donc à :
- Code: Tout sélectionner
<table width="100%" border="1">
<tr>
<td>ID</td>
<td>Pseudo</td>
<td>Mot de passe</td>
<td>Commentaire</td>
<td>Public de msg</td>
<td>Couleur</td>
<td>Age</td>
</tr>
<? mysql_connect("localhost","nomdelutilisateur","motdepasse");
mysql_select_db("desopilo");
$donnees = mysql_query("SELECT * FROM `tutomsg` ORDER BY id");
while($aecrire = mysql_fetch_array($donnees)){ ?>
<tr>
<td><? echo $aecrire['id'];?></td>
<td><? echo $aecrire['pseudo'];?></td>
<td><? echo $aecrire['motdepasse'];?></td>
<td><? echo $aecrire['commentaire'];?></td>
<td><? echo $aecrire['publicdemsg'];?></td>
<td><? echo $aecrire['couleur'];?></td>
<td><? echo $aecrire['age'];?></td>
</tr>
<? }
mysql_close();?>
</table>
Voilà vous en savez maintenant plus sur les formulaires (html), les variables (php) et la base de données!
A bientot
Boulledogue
P.S.: A la moindre erreur de ma part, faites le moi savoir!
J'ai pas pu attendre les vacances!
