Introduction au développement Web

Jean-Philippe Doyle, Projet Héritage 2005-2006

Révision

Table des matières

1 - Questionnaire
2 - Mises en situations

1 - Questionnaire

Voici un petit questionnaire. Pour voir la réponse, cliquez sur la question.

CSS

1 - Quelle est l'utilité prévue au HTML?
Structurer le contenu d'une page.
2 - Quelle est l'utilité du CSS?
Appliquer une mise en forme au contenu d'une page.
3 - Est-il obligatoire d'utiliser un CSS externe et si non, quels sont les autres moyens d'appliquer des style?
Non, on peut définir des styles à l'intérieur d'une page HTML ou directement sur l'élément avec l'attribut style.
4 - Quelles sont les 3 choses qui peuvent permettre d'identifier un élément pour lui appliquer un style?
Sa balise HTML, sa classe et son id.

JavaScript

5 - Qu'est-ce qui exécute le JavaScript? Le client ou le serveur?
Le client.
6 - Quand est-il avantageux de mettre le code directement dans la page?
Lorsque le code est lourd et utilisé uniquement sur cette page.
7 - Quand est-il avantageux d'utiliser un fichier externe?
Lorsque le code est utilisé sur plusieurs pages ou lorsqu'il est utilisé sur une seule page mais qu'il est léger (car il est plus pratique de retrouver tout son code au même endroit).
8 - À quel nombre débute la numérotation d'un tableau?
À 0.
9 - Quels sont les deux type de fonctions qui existent?
Les fonctions créées par l'utilisateur et celles intégrées à JavaScript.
10 - Quand est-ce que les fonctions sont appelées?
Lors d'événements définis dans les balises HTML.
11 - Quel est le moyen le plus rapide d'obtenir des informations sur un élément HTML?
La fonction getElementById.

PHP

12 - Qu'est-ce qui exécute le PHP? Le client ou le serveur?
Le serveur.
13 - Nommez quelques utilités du php.
Créer rapidement des pages dynamiques, réagir aux demandes du client, effectuer des taches répétitives, utiliser une base de données et bien plus.
14 - À quoi sert la déclaration/fonction echo?
Imprimer du texte et/ou le contenu de variable.
15 - Qu'est-ce que contient la variable d'environnement $_SERVER?
Un tableau d'informations sur le serveur et le client.
16 - Qu'est-ce que contiennent les variables d'environnements $_POST et $_FILE?
Un tableau contenant les informations sur chacun des champs envoyés par un formulaire.
17 - Qu'est-ce que contient la variable d'environnement $_GET?
Un tableau des variables soumises via dans l'adresse de la page.
18 - Qu'est-ce que contient la variable d'environnement $_COOKIE et quand expire ce contenu?
Un tableau des cookies enregistrés sur l'ordinateur du client qui expirent dans un temps donné lors de la création du cookie.
19 - Qu'est-ce que contient la variable d'environnement $_SESSION et quand expire ce contenu?
Un tableau des variables de sessions du client qui expire lorsque le client quitte son navigateur.
20 - Si l'on inclu avec la fonction require() ou include() une page qui contient du PHP, est-ce que cette page pourra utiliser les fonctions et les variables contenues dans la page mère?
Oui si ces variables et fonctions ont été définies avant la déclaration require() ou include().

MySQL

21 - Est-ce que MySQL est un langage de programmation?
Non, c'est un serveur de bases de données.
22 - Un serveur MySQL contient des ? qui contiennent des ? qui comportent des ? de différents ?.
Un serveur MySQL contient des bases de données qui contiennent des tables qui comportent des champs de différents types.
23 - Qu'est-ce que phpMyAdmin?
C'est un programme fait en PHP distribué gratuitement qui permet de visualiser et de gérer ses bases de données.
24 - Qu'est-ce qu'un champ qui comporte l'extra auto_increment?
C'est un champ auquel sera assignée automatiquement une numérotation unique.
25 - Est-il nécessaire de spécifier des informations pour chacun des champs d'une table lorsque l'on exécute une commande insert, update ou select??
Non.
26 - Est-il possible de spécifier plusieurs restrictions avec la commande where?
Oui.

2 - Mises en situations

Attention, ces mises en situation sont faites de façon assez simple et débutante. Il ne serait pas juste de les utiliser pour de gros systèmes. Lorsque l'on entreprend de gros programmes (mise en situation qui n'est pas question ici), il est très recommandé de séparer le PHP du HTML en utilisant un système de templates.

Utiliser un cadre

Mise en situation

Vous désirez utiliser une page qui contient un cadre contenant menu pour toutes vos pages qui seront contenues dans un dossier nommé pages. Selon le lien sélectionné dans le menu, vous désirez qu'une certaine page soit affiché dans le cadre.

Résolution possible

Utiliser la fonction require() ou include() ainsi qu'une variable transmise dans l'adresse :

include('pages/'.$_GET['selection'].'.html');

Il serait aussi important pour des questions de sécurité de valider le contenu de la variable soumise par l'adresse avec la fonction preg_match(). Dans notre cas, on limitera les caractères à ceux alphanumériques (\w) et on limitera la longueur de la variable à 100 ({0,100}) puisque le nom de nos pages devrait respecter ces critères :

if(!preg_match(''/^\w{0,100}$/',$_GET['selection'])) $_GET['selection'] = 'accueil';

De plus, on ajoutera une page par défaut lorsqu'aucune variable n'est soumise dans l'adresse avec la condition suivante :

if(!isset($_GET['selection'])) $_GET['selection'] = 'accueil';

 
Code final

<html>
<body>
<a href="index.php?selection=accueil">Accueil</a><br>
<a href="index.php?selection=resultats">Résultats</a><br>
<a href="index.php?selection=contact">Contact</a>
<?
if(!isset($_GET['selection']) or !preg_match('/^\w{0,100}$/',$_GET['selection'])) $_GET['selection'] = 'accueil';
include('pages/'.$_GET['selection'].'.html');
?>
</body>
</html>

Du formulaire à la BDD et de la BDD à la page

Mise en situation

Vous désirez dans la cadre de la lecture d'un livre dans votre cour d'anglais, utiliser une base de données pour gérer le document vocabulaire que vous devez créer. Nous allons prétendre que votre professeur désire pour chaque mot : le mot, la page et la traduction en français. Il vous faudra donc pouvoir ajouter des entrées et obtenir une liste de toutes les entrées.

Résolution possible

On pourrait uniquement utiliser phpMyAdmin et ne pas écrire aucun programme PHP, mais nous cherchons ici quelque chose d'un peut plus fini. Nous allons donc créer une belle page pour ajouter les mots et une page pour obtenir une liste complète.

Structure de la table

Dans un premier temps, voici les champs que nous utiliserons dans notre base de données :

- id, auto_increment, primary key
- page, int, longueur maximum de 3
- word, varchar, longueur maximum de 255
- translation, varchar, longueur maximum de 255

Considérant qu'un élève du secondaire ne lira pas le dictionnaire, on limitera le nombre de chiffres pour les numéros de pages à 3. On limitera aussi le mot et sa traduction à 255 caractères. Voici à quoi cela ressemblera dans phpMyAdmin :

Code HTML

Il nous faut ensuite un formulaire et un tableau pour afficher notre liste. Nous utiliserons ce code ou les valeurs des champs soumises s'affichent comme valeur par défaut, nous verrons pourquoi plus tard :

<html>
<body>
<h4>Add word</h4>
<form name="form" method="post" action="">
Page
<input name="page" type="text" size="3" maxlength="3" value="<?php echo $_POST['page'] ?>">
<br>
Word
<input name="word" type="text" maxlength="255" value="<?php echo $_POST['word'] ?>">
<br>
Translation
<input name="translation" type="text" maxlength="255" value="<?php echo $_POST['translation'] ?>">
<br>
<input name="submit" type="submit" value="Add">
</form>
<h4>List</h4>
</body>
</html>

Vu le contexte de la mise en situation, on fera bien sûr notre page en anglais.

Code PHP

Il reste maitenant la partie la plus ardue, la programmation PHP. Dans un premier temps, voici le code pour se connecter à la base de données, vérifier le contenu soumis par le formulaire et ajouter une entrée s'il n'y a aucune erreur :

<?php
mysql_connect('localhost','user','password');
mysql_select_db('database');
if(isset($_POST['page'])){
  if(!preg_match('/\d{1,3}/',$_POST['page'])){
    echo '<p>Page is not valid.';
    $error = 1;
  }
  if(!preg_match('/(.){1,255}/',$_POST['word'])){
    echo '<p>Please enter word.';
    $error = 1;
  }
  if(!preg_match('/(.){1,255}/',$_POST['translation'])){
    echo '<p>Please enter traduction.';
    $error = 1;
  }
  if(!$error) {
    mysql_query('INSERT INTO `vocabulary` (`page` , `word` , `translation` )
    VALUES (\''.$_POST['page'].'\',\''.$_POST['word'].'\', \''.$_POST['translation'].'\')');
    $_POST = NULL;
  }
}
?>

On supprime le contenu de la variable $_POST lorsqu'il n'y a pas d'erreur, car on ne veut pas qu'elle s'affichent à nouveau dans le formulaire dans ce cas.

Ensuite, il faut un code pour afficher le contenu de la table :

<?php
$query = mysql_query('SELECT * FROM `vocabulary` ORDER BY `word` ASC');
while($row = mysql_fetch_row($query)){
  echo '<p><b>Word</b> : '.$row[2].' (p.'.$row[1].')<br><b>Translation</b> : '.$row[3];
}
?>

Voila tout pour le PHP, il reste à mettre le tout en commun.

Code final

<?php
mysql_connect('localhost','user','password');
mysql_select_db('database');
if(isset($_POST['page'])){
  if(!preg_match('/\d{1,3}/',$_POST['page'])){
    echo '<p>Page is not valid.';
    $error = 1;
  }
  if(!preg_match('/(.){1,255}/',$_POST['word'])){
    echo '<p>Please enter word.';
    $error = 1;
  }
  if(!preg_match('/(.){1,255}/',$_POST['translation'])){
    echo '<p>Please enter traduction.';
    $error = 1;
  }
  if(!$error) {
    mysql_query('INSERT INTO `vocabulary` (`page` , `word` , `translation` )
    VALUES (\''.$_POST['page'].'\',\''.$_POST['word'].'\', \''.$_POST['translation'].'\')');
    $_POST = NULL;
  }
}
?>
<html>
<body>
<h4>Add word</h4>
<form name="form" method="post" action="">
Page
<input name="page" type="text" size="3" maxlength="3" value="<?php echo $_POST['page'] ?>">
<br>
Word
<input name="word" type="text" maxlength="255" value="<?php echo $_POST['word'] ?>">
<br>
Translation
<input name="translation" type="text" maxlength="255" value="<?php echo $_POST['translation'] ?>">
<br>
<input name="submit" type="submit" value="Ajouter">
</form>
<h4>List</h4>
<?php
$query = mysql_query('SELECT * FROM `vocabulary` ORDER BY `word` ASC');
while($row = mysql_fetch_row($query)){
  echo '<p><b>Word</b> : '.$row[2].' (p.'.$row[1].')<br><b>Translation</b> : '.$row[3];
}
?>
</body>
</html>