====== Principes de bases pour la création de formulaires web ======
{{:logo_text.png?nolink&500|}}
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.
* [[http://prezi.com/hmqxdokj_0_u/?utm_campaign=share&utm_medium=copy&rc=ex0share|Accéder à la présentation Prezi ici. ]]
* [[http://prezi.com/hmqxdokj_0_u/present/?auth_key=dzwkigq&follow=GuillaumeLarocque&kw=present-hmqxdokj_0_u&rc=ref-19631691|Présentation simultanée.]]
**Liens utiles**
* [[http://www.codecademy.com/|Code Academy]] Site web génial pour apprendre HTML, CSS, PHP, Javascript JQuery ou autre.
* [[http://link.springer.com/book/10.1007/978-1-4302-0136-6|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 =====
[[https://bitnami.com/tag/postgresql|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
Titre du document
Le contenu du fichier est ici!
Création d'un formulaire
Le formulaire de base
[[http://www.w3schools.com/tags/att_input_type.asp|Liste des types d'entrée html]]
Entrée de texte
Menu déroulant
Check box
J'aime la poutine
J'aime les sushis
J'aime la poutine aux sushis
Bouttons radio
Je suis un(e)
Homme
Femme
Zone de texte
===== Stylisation avec le CSS =====
[[http://www.w3schools.com/cssref/|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
Et on peut y faire référence dans l'entête de style css du fichier html avec le dièse "#"
On peut aussi donner une "class" à n'importe quel élément html. Cette classe peut se répeter sur plusieurs éléments
Et on peut y faire référence dans l'entête de style css du fichier html avec le point "."
====== Partie 2 - Création de la base de données associée ======
[[https://secure.qcbs.ca/systeme/phppgadmin/|Lien vers phppgadmin]]
====== Partie 3 - Bases du langage PHP ======
Tous les fichiers doivent commencer par:
Commentaires
'valeur1',
'cle2'=>'valeur2',
'cle3'=>'valeur3',
);
echo $myarray['cle1'];
//valeur1
?>
Boucles et if/else
====== Partie 4 - Insertion dans PostgreSQL via PHP ======
[[http://php.net/manual/en/book.pgsql.php|Fonctions PostgreSQL dans PHP]]
Ce fichier PHP est celui qui est spécifié dans le champ "ACTION" du formulaire html.
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);