Principes de bases pour la création de formulaires web
Centre de la science de la biodiversité du Québec
Guillaume Larocque, Professionnel de recherche. (guillaume.larocque@mcgill.ca)
Université du Québec à Rimouski. 10 octobre 2014.
Liens utiles
- Code Academy Site web génial pour apprendre HTML, CSS, PHP, Javascript JQuery ou autre.
- Beginning PHP and PostgreSQL 8. Livre téléchargeable en e-book. Un peu vieux.
Étapes principales
- Création d'un interface web avec le code html et CSS.
- Création d'une base de données pour accueillir les données du formulaire.
- Création d'un code PHP qui va recevoir les données du formulaire et qui va les envoyer vers la base de données.
- Enrichissement possible du formulaire avec Javascript/JQuery
Installation de PHP, PostgreSQL, apache et PHPPGAdmin
Télécharger et installer le serveur WAPP pour Windows, ou MAPP pour Mac.
Pour linux:
sudo apt-get install postgresql-9.3 apache2 php5 phppgadmin php5-pgsql
Partie 1 - Formulaire HTML
Composantes nécessaires pour un fichier HTML
<!DOCTYPE html> <html> <head> <title>Titre du document</title> </head> <body> Le contenu du fichier est ici! </body> </html>
Création d'un formulaire
Le formulaire de base
<form method="POST" action="fichierphp.php"> <input type="text"> </form>
Entrée de texte
<input type="text" name="nom_texte">
Menu déroulant
<select name="nom_select"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>
Check box
<input type="checkbox" name="poutine" value="oui"> J'aime la poutine <input type="checkbox" name="sushis" value="oui"> J'aime les sushis <input type="checkbox" name="poutine_sushis" value="oui"> J'aime la poutine aux sushis
Bouttons radio
Je suis un(e) <input type="radio" name="nom_radio" value="h" > Homme <input type="radio" name="nom_radio" value="f"> Femme
Zone de texte
<textarea name="zone_texte"> </textarea>
Stylisation avec le CSS
On peut donner un “id” à n'importe quel élément html. Important: il ne peut y avoir qu'un id unique par élément
<input type="text" name="nom_texte" id="nom_texte">
Et on peut y faire référence dans l'entête de style css du fichier html avec le dièse “#”
<head> <style> #nom_texte { width:300px; height:30px; color:red; background-color:#ffff00; font-family:verdana,arial; font-size:14px; font-weight:bold; padding:0px 5px 0px 5px; #top right bottom left } </style> </head>
On peut aussi donner une “class” à n'importe quel élément html. Cette classe peut se répeter sur plusieurs éléments
<input type="text" name="nom_texte1" class="classe_texte"> <input type="text" name="nom_texte2" class="classe_texte"> <input type="text" name="nom_texte3" class="classe_texte">
Et on peut y faire référence dans l'entête de style css du fichier html avec le point “.”
<head> <style> .classe_texte { width:300px; height:30px; color:red; background-color:#ffff00; font-family:verdana,arial; font-size:14px; font-weight:bold; padding:0px 5px 0px 5px; #top right bottom left } </style> </head>
Partie 2 - Création de la base de données associée
Partie 3 - Bases du langage PHP
Tous les fichiers doivent commencer par:
<?php Le code PHP est ici. ?>
Commentaires
<?php // Commentaire sur une ligne /* Section de commentaires */ ?>
<?php // Création de variables $myvar=5; $myvar='ceci est du texte'; // Création d'un array $myarray=array('valeur1','valeur2','valeur3'); echo $myarray[0]; //valeur1 $myarray=[]; $myarray[0]='valeur1'; $myarray[1]='valeur2'; // Création d'un array "key-value" $myarray=array( 'cle1'=>'valeur1', 'cle2'=>'valeur2', 'cle3'=>'valeur3', ); echo $myarray['cle1']; //valeur1 ?>
Boucles et if/else
<?php if ($f==5){ //Do something }else{ //Do something else } for ($i=0;$i<10;$i++){ echo 'i='.$i; } //i=0 //i=1 //... //i=9 foreach ($myarray as $my){ //Faire quelque chose avec $my ?>
Partie 4 - Insertion dans PostgreSQL via PHP
Ce fichier PHP est celui qui est spécifié dans le champ “ACTION” du formulaire html.
<?php // Connexion et sélection de la base de données $dbconn = pg_connect("host=localhost dbname=base_donnees user=nom_usager password=mot_de_passe"); // L'array $_POST contient toutes les données du formulaire. Chaque 'clé' de cet array correspond au nom donné à chacun des type d'entrées html. $element1=$_POST['nom_element1']; $element2=$_POST['nom_element2']; $element1=pg_escape_string($element1); $element2=pg_escape_string($element2); // Insertion dans la base de données $query = "INSERT INTO ma_table (colonne1,colonne2) VALUES ($element1,$element2)"; $result = pg_query($query); // Fermer la connexion pg_close($dbconn); echo "Formulaire entré dans la base de données avec succès!"; ?>
Accéder à différents types d'éléments
//Check boxes foreach ($_POST['checkbox'] as $check){ //Faire quelque chose ici avec $check } //Convertir les valeurs en liste séparée par des virgules $check=implode(',',$_POST['checkbox']);
Retrouver des éléments dans la base de données
// Connexion et sélection de la base de données $dbconn = pg_connect("host=localhost dbname=base_donnees user=nom_usager password=mot_de_passe"); $query="SELECT * FROM nom_table"; // Insertion dans la base de données $result = pg_query($query); while ($t=pg_fetch_array($result)){ echo $t['prenom'].' '.$t['nom_famille']; } // Fermer la connexion pg_close($dbconn);