Formulaire PhP et SQL

Prérequis

Vous devez théoriquement savoir réaliser une page PhP (notamment car vous avez fait cela pour utiliser PDO).

Cela nécessite un serveur (local ou sur un hébergeur web), et d'enregistrer vos fichiers sources en ".php".

Hello World PhP

En programmation, le premier programme est traditionnellement un "Hello world". Voici le code source d'un fichier hello world en PhP

<html>

<head>

</head>

<body>

<?php echo '<p>Bonjour le monde</p>'; ?>

</body>

</html>

fichier à télécharger si souhaité: hello world en php.php

Hello World PhP avec nom dans une variable

Nous modifions le code pour avoir une variable $nom, qui contiendra votre nom entre guillements (ici, $nom ="Lauren"). Si vous changer la valeur entre ces guillements, la page affichera ce nouveau nom.

La ligne avec echo permet de "fabriquer" le HTML de la page web. Ici, avec $nom = "Lauren", cela donnera:

<p> Bonjour Lauren </p>

car nous collons "<p>Bonjour" avec $nom puis avec "</p>". Cela est indiqué en utilisant les virgules entre ces trois parties.

<html>

<head>

</head>

<body>

<?php

$nom = "Lauren";

echo "<p>Bonjour ", $nom, "</p>";

</body>

</html>

fichier à télécharger si souhaité: hello world avec nom variable..php

Etape 1: créer le formulaire (QUI NE FAIT RIEN A CE STADE !)

Nous allons créer la coquille d'un formulaire, qui demande le nom et le genre à l'utilisateur. Il ne s'agit que de le préparer, rien ne sera utilisé. Nous décrivons juste après les lignes présentes

<form >

<label for="nom">Votre petit nom :</label>

<input type="text" id = "nom" name = "nom" size="17" />

<br/>

<label for="genre"> Votre genre :</label>

<input type="text" id = "genre" name = "genre" size="17" />

<br/>

<p> Bouton d'envoi : <input type="submit" value="Envoyer"/> </p>

</form>

Les balises HTML <form> indique qu'il s'agit d'un formulaire entre ces balises

<form >

</form>

Les balises <p> indique un paragraphe. Ici, le bouton d'envoi est dans son paragraphe.

Bouton d'envoi est le texte affiché dans la page.

<input/> permet de créer des élément de formulaire.

<input type="submit" /> va permettre de créer en bouton d'envoi du formulaire.

<input type="submit" value="Envoyer" /> va permettre d'indiquer le texte du bouton.

Ce code donne le retour suivant :

<form >

<p> Bouton d'envoi : <input type="submit" value="Envoyer"/> </p>

</form>

On rajoute maintenant, dans notre formulaire, un champ pour écrire le nom.

Votre petit nom est le texte affiché dans la page.

<label> </label> permet définir un texte associé à un champ du formulaire.

<label for="nom"> </label> permet de dire à quel input du formulaire on se réfère (ici : on se réfère à l'input identifié avec "nom")

<input type="text" /> va permettre de créer un champ pour rentrer du texte.

<input type="text" id="nom" /> va permettre d'identifier un champ comme étant les données relatives au "nom".

<input type="text" id="nom" name="nom"/> va permettre d'identifier un champ s'appellant "nom".

<input type="text" id="nom" name="nom "size="17"/> va permettre d'indiquer la taille du champ de texte.

Ce code donne le retour suivant :

<form >

<label for="nom">Votre petit nom :</label>

<p> Bouton d'envoi : <input type="submit" value="Envoyer"/> </p>

</form>

On rajoute maintenant, dans notre formulaire, un champ pour écrire le genre.

<br/> permet de faire un retour à la ligne

nous retrouvons un <label> </label> permet définir un texte associé à un champ du formulaire, ici Votre genre : .

<label for="genre"> </label> permet de dire à quel input du formulaire on se réfère (ici : on se réfère à l'input identifié avec "genre")

<input type="text" /> va permettre de créer un champ pour rentrer du texte.

<input type="text" id="genre" /> va permettre d'identifier un champ comme étant les données relatives au "genre".

<input type="text" id="genre" name="genre"/> va permettre d'identifier un champ s'appellant "genre".

<input type="text" id="genre" name="genre "size="17"/> va permettre d'indiquer la taille du champ de texte.

Ce code donne le retour suivant :

<form >

<label for="nom">Votre petit nom :</label>

<br/>

<label for="genre"> Votre genre :</label>

<input type="text" id = "genre" name = "genre" size="17" />

<br/>

<p> Bouton d'envoi : <input type="submit" value="Envoyer"/> </p>

</form>

Etape 2: envoyer les informations du formulaire (ici, on recharge la même page)

Nous allons maintenant envoyer les valeurs de ce formulaire.

Nous allons appeler notre page formulaire.php .

Puis, dans la balise form, nous allons indiquer la méthode (method="POST" et l'action d'aller sur la page "formulaire.php". Cela veut dire que l'on recharge la page, mais on a envoyé les information du formulaire.

<label for="nom">Votre petit nom :</label>

<br/>

<label for="genre"> Votre genre :</label>

<br/>

<p> Bouton d'envoi : <input type="submit" value="Envoyer"/> </p>

</form>

Etape 3: utiliser les informations envoyées par formulaire

Nous allons maintenant récupérer les valeurs de ce formulaire après envoi.

Ces informations sont récupérer par la variable $_POST puis ce qu'il y a d'indiqué dans name ( ici, "nom" et "genre") entre crochets.

$_POST["nom"]

prendra la valeur de ce que l'utilisateur a rentré la fois précédente dans le champ "nom", et

$_POST["genre"]

prendra la valeur de ce que l'utilisateur a rentré la fois précédente dans le champ "genre".

Les deux dernières lignes affichent soit:

une erreur, si le nom et le genre n'ont pas été entrés puis envoyés en appuyant sur le bouton (image 1)
soit les réponses entrées la fois dernière (image 2)

<label for="nom">Votre petit nom :</label>

<br/>

<label for="genre"> Votre genre :</label>

<br/>

<p> Bouton d'envoi : <input type="submit" value="Envoyer"/> </p>

</form>

<?php echo "Bonjour ", $_POST["nom"] ; ?>

<?php echo "(", $_POST["genre"] , ")" ; ?>

fichier à télécharger si souhaité: formulaire.php

Pour ne pas avoir d'erreur affichée, vous pouvez vérifier si vos variables POST existent avec if(isset( XXXXX) ) :

<?php

if (isset($_POST['nom'])) {

echo "Bonjour ", $_POST["nom"] ;

}

if (isset($_POST['genre'])) {

echo "Bonjour ", $_POST["nom"] ;

echo "(", $_POST["genre"] , ")" ;

}

Vous pouvez maintenant utiliser vos variables pour utiliser avec une requête préparée

Cours associé: PDO et requêtes dans la page web

Page updated

Report abuse