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

Étapes principales

  1. Création d'un interface web avec le code html et CSS.
  2. Création d'une base de données pour accueillir les données du formulaire.
  3. 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.
  4. 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>

Liste des types d'entrée html

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

Guide de référence 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

Lien vers phppgadmin

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

Fonctions PostgreSQL dans 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);