Programmation pour le Web

Ce cours à pour objectif de vous familiariser avec la programmation Web. Après un bref rappel des principaux éléments du langage HTML et des feuilles de style CSS (interprétés par le client), nous verrons quelques éléments d'architecture du web afin d’apprendre à inclure à vos sites web du code exécuté par un serveur. Nous utiliserons pour cela le langage objet PHP. Vous éditerez vos fichiers grâce à l'éditeur de texte NotePad++.

Evaluation

La note finale correspondra à la moyenne pondérée de trois notes que vous aurez obtenues tout au long des 13 semaines de cours/TP :

  • 40% : devoir sur papier portant sur les langages HTML, CSS et PHP (séance 8, 25 Mars)
  • 40% : site web réalisé en binôme à partir de la séance 9, devra être rendu avant la fin de la semaine 13 (23 Avril)
  • 20% : pages web réalisées pendant les TP que vous devrez rendre à la fin de certaines séances
  • Pénalités en cas d'absences non justifiées

Séance 1 (28/01/2015)

Le support du cours est téléchargeable ici.

Cette séance est dédiées à la révision du langage HTML.

Exercice 1 : bonjour.html

Ouvrez NotePad++ et créez un fichier nommé bonjour.html. Dans ce fichier, ajoutez le code HTML du transparent 13 du cours. Ouvrez ce fichier avec Firefox.

Exercice 2 : page d'accueil

Vous allez créer le site d'un magasin fictif contenant des pages sur les articles de ce magasin et des pages sur ses concepteurs. Tous les fichiers HTML que vous allez créer devront être placés dans un dossier "Nom1_Nom2".

Créez une page html nommée index.html contenant le nom d'un magasin fictif et un tableau de deux articles en spécifiant pour chaque article, son numéro identifiant, son nom, sa quantité en stock et son prix.

Exercice 3 : pages des articles

Pour chaque article, créez une page html contenant une photo et une liste contenant une petite description. Ajoutez en bas de ces pages un lien relatif "retour" vers la page index.html. Ajoutez aussi dans le tableau de la page index.html un lien vers la page de l'article sur le nom de l'article.

Exercice 4 : pages des contacts

Ajoutez en bas de la page index.html une liste "Contacts" contenant vos deux noms. Ces deux noms devront être des hyperliens vers deux pages HTML dans lesquelles vous vous présenterez (nom, parcours académique, parcours professionnel, passe-temps, photo, adresse e-mail, etc.). Ajoutez en bas de ces pages un lien relatif "retour" vers la page index.html. Pensez à inclure des paragraphes (<p>), des titres (<h>), des listes (<ul> ou <ol>) et toutes les structures qui vous paraissent utiles. La mise en forme de ces structures sera abordée lors de la prochaine séance portant sur les feuilles de style CSS.

Exercice 5 : validation des pages

Vérifier que vos pages respectent la norme HTML 5 définie par le W3C : http://validator.w3.org/. Si ce n'est pas le cas, corrigez les erreurs.

Exercice 6 : passage de votre site sur un serveur

Placez dans le dossier c:/wamp/www/ votre répertoire Nom1_Nom2. Connectez-vous à la page http://localhost/Nom1_Nom2/index.html. Vous allez accéder à votre site hébergé sur un serveur local (voir les annexes pour plus de détails). Vérifiez que tous vos liens (entre pages, images) fonctionnent bien. Si ce n'est pas le cas, réparez les erreurs.

Vous remarquerez que le lien http://localhost/Nom1_Nom2/ renvoie aussi sur votre page index.html. En fait, la page nommée index.html (ou index.php) est la page affichée par défaut lorsque vous vous connectez à un serveur sans spécifier un nom de fichier HTML (ou PHP). Pour accéder à une autre page de votre site, il faut nécessairement taper son nom dans l'adresse : http://localhost/Nom1_Nom2/NomFichier.html.

Séance 2 (04/02/2015)

Le support du cours est téléchargeable ici.

Cette séance est dédiée à l'amélioration du site créé lors de la première séance. Avant de commencer les exercices, vérifiez bien que vous avez terminé les exercices de la semaine dernière. Si ce n'est pas le cas, reprenez-les.

Exercice 1 : Structuration de votre site

Si vous placez tous les fichiers (HTML, images, ...) de votre site dans un même répertoire, vous allez rapidement rencontrer des difficultés pour vous y retrouver, surtout si vous avez beaucoup de fichiers. C'est pourquoi vous allez dans cet exercice structurer votre site.

Pour cela, créez un dossier "Nom1_Nom2" contenant 4 répertoires : "images", "contacts", "articles" et "styles". Placez dans le dossier "images" toutes vos images, dans le dossier "contacts" vos deux pages HTML personnelles, dans le dossier "articles" les deux pages HTML concernant vos articles. Placez dans le dossier "Nom1_Nom2" (à côté des trois répertoires) votre page index.html. Modifiez les adresses relatives de votre site (liens hypertextes et images) en fonction de la nouvelle architecture. Vérifiez que tout marche bien sur le serveur local (voir Séance 1 -> Exercice 6).

Exercice 2 : Création et importation de votre fichier CSS

Dans le dossier "styles", ajoutez un fichier CSS. Ajoutez dans ce fichier les règles conseillées à la fin du cours. Importez ce fichier dans toutes vos pages. Vérifiez que le style se charge bien.

Exercice 3 : Mise en forme de votre site

Utilisez votre fichier CSS pour mettre en forme votre site. N'hésitez pas aussi à ajouter du contenu ou des éléments de structure dans vos pages HTML (mais pas de mise en forme).

Séance 3 (11/02/2015)

Le support du cours concernant est téléchargeable ici.

Cette séance sera dédiée à l'écriture de votre premier code PHP. Il permettra d'améliorer votre site afin de gérer plus efficacement les stocks de votre petite entreprise.

Tous les fichiers sur lesquels vous travaillerez aujourd'hui devront être placés dans le répertoire c:/wamp/www/. Connectez-vous ensuite à http://localhost/... pour les visualiser.

Exercice 1

Dans le répertoire c:/wamp/www/, créez un fichier Bonjour.php contenant les lignes suivantes : 

<html> 
 <head><title>Bonjour</title></head>
 <body> 
  <?php
   echo "Bonjour le monde !";
  ?>
 </body> 
</html>

Connectez-vous ensuite à l'adresse http://localhost/Bonjour.php. Affichez la source de la page. Que remarquez-vous ? Pourquoi le code PHP n'apparait-il pas ?

Exercice 2

Créez un fichier CSV (par exemple en utilisant Excel ou le tableur d'OpenOffice) contenant une ligne par article, avec son numéro identifiant, son nom, sa quantité en stock, son prix et le nom de sa page html.

Exercice 3

Renommez index.html en index.php. Écrivez dans le corps ("body") du fichier un code php permettant de lire le fichier créé dans l'exercice 1.

Exercice 4

Supprimez le tableau HTML statique (celui contenant les produits). Modifiez le code PHP de l'exercice 2 afin qu'il permette de créer de façon automatique un tableau contenant les produits présents dans le fichier CSV (identifiant, nom, quantité, prix).

Exercice 5

Modifiez le code PHP pour que les noms des produits du tableau soient des hyperliens vers les pages HTML les décrivant (dont le nom se trouve dans le fichier CSV).

Exercice 6

Créez une page HTML concernant un troisième article (cf. séance 1 exercice 3). Ajoutez une ligne correspondante dans le fichier CSV. Vérifiez qu'une ligne concernant cet article est bien automatiquement ajoutée dans votre page index.php.

Séance 4 (25/02/2014)

Cette séance et la prochaine seront dédiées à la mise en place de sessions clients. Cela nous permettra de voir dans un premier temps comment utiliser des formulaires de saisie.

Le support du cours concernant les formulaires est téléchargeable ici.

Exercice 1

  • Ajoutez à votre page "index.php" un lien hypertexte "Nouveau Client" qui renvoie vers une page "nouveau.php".
  • Créez la page "nouveau.php". Celle-ci contient un formulaire avec les champs "Nom", "Prénom", "Adresse", "Adresse e-mail", "Numéro de téléphone", "Mot de passe" et "Confirmer votre mot de passe" (leurs noms respectifs dans la balise "input" sont "n", "p", "adr", "mail", "num", "mdp1" et "mdp2"). Il appelle une page PHP nommée "enregistrement.php" avec la méthode "get" (et non "post"). Attention, pour les champs des mots de passe, le type est "password", et non "text".
  • Créez une page "enregistrement.php" qui affiche ("echo") les données saisies dans le formulaire.
  • Testez vos pages.

Exercice 2

  • Observez l'URL appelée pour la page "enregistrement.php". Les différentes variables que vous avez spécifiées dans le formulaire de la page précédente y apparaissent après un "?". Elles sont séparées par un "&". Ceci est du à l'utilisation de la méthode "get" dans le formulaire.
  • Remplacez (dans le formulaire d'envoi des données et dans le code php qui les récupère) la méthode "get" par la méthode "post".
  • Observez que maintenant, les variables n'apparaissent plus dans l'URL. Elle sont cependant bien transmises puisqu'elles s'affichent correctement.
  • Pour la suite des développements, il est fortement conseillé d'utiliser la méthode "get". Il est ainsi plus facile de repérer les erreurs. Par contre, la méthode post peut-être utilisée lorsque le nombre des variables est très grand, ou juste avant de mettre votre site en ligne (surtout si vous transmettez un mot de passe).

Exercice 3

  • Trouvez l'instruction HTML qui permet de se rediriger vers une autre page. Indication : c'est une balise de type META.
  • Supprimez le code PHP de votre page "enregistrement.php".
  • Dans la balise "head", ajoutez un code PHP :
    • si l'une des variables est vide ou si mdp1 et mdp2 sont différents, alors le code PHP écrit l'instruction HTML qui redirige vers "nouveau.php",
    • sinon le code PHP écrit l'instruction HTML qui redirige vers "index.php".
  • Vérifiez que les redirections fonctionnent correctement.

Exercice 4

  • Lorsque vous redirigez vers "nouveau.php", passez en paramètre (URL de type "nouveau.php?var1=toto&var2=tata...") les variables que vous avez récupérées, sauf mdp1 et mdp2.
  • Ajoutez ensuite ces variables dans les champs du formulaire de "nouveau.php". Ainsi, si l'utilisateur a oublié un champ, il n'a pas à re-saisir les autres (utilisez le champ "value" de la balise "input").

Séance 5 (04/03/2014)

Nous allons aujourd'hui nous intéresser à la gestion de sessions utilisateurs. Le but est de permettre à un utilisateur de s’authentifier sur votre site.

Le support du cours est téléchargeable ici.

Exercice 1

La semaine dernière, vous avez développé un code permettant à un utilisateur de saisir des données. Il va falloir maintenant enregistrer ces données sur le serveur, afin de les utiliser plus tard lors de l'ouverture d'une session utilisateur.

  • Dans votre fichier "enregistrement.php", ajoutez une fonction "enregistrer" qui prend en paramètre six chaines de caractères, correspondant au nom, prenom, adresse, adresse e-mail, numéro de téléphone et mot de passe.
  • Appelez cette fonction si l'utilisateur a correctement saisi ses données (par exemple juste après la redirection vers index.php).
  • Dans la fonction "enregistrer", ouvrez un fichier "clients.csv" en mode "ajout". Ajoutez une ligne correspondant aux valeurs prises en paramètre (nom, prénom, adresse, adresse e-mail, numéro de téléphone et mot de passe). Fermez le fichier.
  • Depuis votre navigateur, en passant par le formulaire, essayez d'ajouter plusieurs personnes à votre fichier CSV. Ouvrez ensuite ce fichier pour vérifier que tout a bien marché.

Exercice 2

Nous allons maintenant permettre à un utilisateur de se connecter si il a déjà créé son compte.

  • En dessous du lien "Nouveau client" de votre page "index.php", créez un second lien "Se connecter" qui ouvre une page "connexion.php".
  • Créez la page "connexion.php". Elle contient un lien vers la page "nouveau.php" (au cas où l'utilisateur se serait trompé) et un formulaire demandant le nom et le mot de passe de l'utilisateur. Ce formulaire envoie ces données à une page "connecter.php" ("action=...").
  • Créez la page "connecter.php".
    • Elle commence par lire le fichier "clients.csv" pour voir si une ligne correspond au client qui essaie de se connecter (nom et mot de passe passés depuis le formulaire). Si une telle ligne est trouvée, alors elle est stockée dans une variable.
    • Après la boucle de lecture des lignes du fichier, si un client a été trouvé, l'utilisateur est redirigé vers la page "index.php". Si aucun client n'a été trouvé, l'utilisateur est redirigé vers la page "connexion.php".

Exercice 3

  • Dans la page "connecter.php", ajoutez les paramètres de l'utilisateur (nom, prénom, adresse, adresse e-mail, numéro de téléphone) au renvoie vers le fichier "index.php".
  • On peut maintenant savoir si un utilisateur est connecté : la page "index.php" reçoit des paramètres si c'est le cas.
    • Dans cette page, affichez les liens "Nouveau Client" et "Se connecter" seulement si aucun paramètre n'est envoyé (fonction "isset(nomDuParametre)" retourne "False").
    • Sinon, affichez "Bonjour Nom Prenom !" (en remplaçant "Nom Prenom" par les valeurs des paramètres correspondant) et un lien hypertexte nommé "Se déconnecter" qui renvoie vers "index.php" sans passer de paramètre.

Séance 6 (11/03/2015)

Nous allons aujourd'hui permettre à un utilisateur connecté d'acheter un article. Nous verrons comment peuvent être utilisés des champs de type "hidden" dans un formulaire.

Exercice 1

Finissez les exercices de la séance précédente.

Exercice 2

  • Dans le fichier "index.php", pour chaque article, si un utilisateur est connecté et que la quantité en stock de l'article est différente de 0, ajoutez un lien "Acheter" (nouvelle colonne dans le tableau) qui ouvre une page "acheter.php".
  • Passez en paramètre de cette page le numéro de l'article, son nom, sa quantité en stock, le nom du client, son prénom, son adresse, son adresse e-mail et son numéro de téléphone.

Exercice 3

  • Créez la page "acheter.php".
  • Dans "acheter.php", affichez le texte : 
Vous êtes sur le point d'achter l'article : nomDeLArticle. Nombre d'articles disponibles : 
quantitéDeLArticle.
  • Ajoutez ensuite un formulaire avec un champ "text" permettant à l'utilisateur de saisir la quantité de l'article qu'il désire acheter. Ce formulaire ouvre une page "achat.php".
  • Ajoutez à ce formulaire des champs de type "hidden" permettant de transmettre tous les paramètres reçus de "index.php", sauf la quantité en stock (i.e. le numéro de l'article, son nom, le nom du client, son prénom, son adresse, son adresse e-mail et son numéro de téléphone).
  • Ajoutez enfin dans ce formulaire un champ "submit" avec pour valeur la chaine de caractères "Confirmer".

Exercice 4

  • Créez la page "achat.php" qui affiche le texte suivant : 
Cher Prenom Nom, 

L'article nomDeLArticle numéro numeroDeLArticle vous a bien été expédié à l'adresse adresseClient 
en quantiteArticles exemplaires.
Un e-mail de confirmation vous sera envoyé à l'adresse adresseEMailClient. 
Nous vous remerçions d'avoir choisit notre entreprise. 

Cordialement, 
L'équipe de direction.
  • Ouvrez un fichier "envoyer.csv" et ajoutez une ligne contenant le numéro de l'article, la quantité saisie par l'utilisateur, le nom, le prénom et l'adresse de l'utilisateur. Ce fichier permettra au service expédition de votre entreprise d'envoyer les colis.
  • Ajoutez un lien vers index.php de façon à ce que l'utilisateur soit toujours connecté.

Séance 7 (18/03/2015)

Nous allons aujourd'hui gérer les quantités en stock lors de l'achat d'articles. Cela nous permettra d'étudier la notion de classe en PHP. Dans un premier temps, nous allons supprimer la quantité achetée par l'utilisateur dans le fichier "articles.csv". Il va falloir :

  • récupérer les articles du fichier (exercice 1),
  • modifier la valeur de la quantité de l'article acheté (exercice 2),
  • réécrire le fichier avec les bonnes valeurs (exercice 3).

Ensuite nous verrons comment vérifier que la quantité en stock est suffisante (exercice 4).

Le support du cours est téléchargeable ici.

Exercice 1

  • Dans le fichier "achat.php", créez une classe "article" contenant les attributs (champs) "indentifiant", "nom", "quantite", "prix" et "url". Ils doivent être déclarés en "private".
  • Ajoutez un constructeur permettant d'initialiser ces attributs.
  • Ajoutez, à l'extérieur de la classe, un code permettant de lire ligne par ligne le fichier "articles.csv" (mode lecture).
  • Pour chaque ligne lue, créez une instance de la classe "article".
  • Avant de lire votre fichier, créez un tableau vide nommé "listArt".
  • Trouvez la fonction permettant d'ajouter un élément dans un tableau et utilisez-là pour placer les instances de "article" dans le tableau "listArt".

Exercice 2

  • Ajoutez une méthode "retirerArt" à votre classe "article". Elle prend en paramètre une valeur correspondant à la quantité achetée par l'utilisateur. Elle retire à l'attribut "quantite" la valeur prise en paramètre.
  • Appelez cette méthode lorsque vous lisez votre fichier quand vous rencontrez l'article acheté par l'utilisateur.

Exercice 3

  • Ajoutez une méthode "persDansTableau()" qui retourne un tableau contenant les attributs d'un article (même ordre que dans le fichier "articles.csv").
  • Après le code correspondant à la lecture du fichier "articles.csv", ajoutez un code qui ouvre ce même fichier en mode écriture.
  • En utilisant la méthode "persDansTableau()", remplissez le fichier "articles.csv" avec les articles de "listArt".

Exercice 4

  • Modifiez la méthode "retirerArt" de la classe "article" :
    • Si la quantité en stock est suffisante, alors elle retire la valeur prise en paramètre à l'attribut "quantite" et retourne ce nombre,
    • Sinon, elle retire le maximum possible (valeur de l'attribut "quantite") et retourne ce maximum.
  • Dans le programme principal, créez une variable "nbArtEnvoyes". Donnez-lui la valeur retournée par "retirerArt".
  • Modifiez le texte affiché dans la page HTML pour qu'il mette "nbArtEnvoyes" au lieu de la valeur demandée par l'utilisateur.

Séance 8 (25/03/2015)

Cette séance commence par un devoir sur papier.

Nous allons ensuite voir comment gérer les articles non envoyés en cas de rupture de stock.

Exercice 1

  • Dans le fichier "achat.php", ajoutez une méthode "getPrix" à votre classe "article" qui retourne le prix de l'article.
  • Ajoutez une variable "montant" initialisée à 0 au début de votre code principal.
  • Dans le code principal, après avoir appelé la méthode "retirerArt", attribuez à "montant" une valeur correspondant au nombre d'articles à envoyer multiplié par le prix unitaire de l'article.
  • Ajoutez une ligne dans le texte HTML affiché de façon à indiquer le montant de la commande. 
Cher Prenom Nom, 

L'article nomDeLArticle numéro numeroDeLArticle vous a bien été expédié à l'adresse adresseClient 
en quantiteArticles exemplaires.

Le montant de votre commande s'élève à montantDeLaCommande euros.

Un e-mail de confirmation vous sera envoyé à l'adresse adresseEMailClient. 

Nous vous remerçions d'avoir choisit notre entreprise. 

Cordialement, 
L'équipe de direction.

Exercice 2

  • Si le nombre d'articles envoyé est inférieur à celui demandé par le client, ajoutez une ligne à votre texte précisant que les autres articles seront envoyés ultérieurement : 
Cher Prenom Nom, 

L'article nomDeLArticle numéro numeroDeLArticle vous a bien été expédié à l'adresse adresseClient 
en quantiteArticles exemplaires. Les quantiteArticlesNonEnvoyes autres exemplaires vous seront envoyés 
ultérieurement.

Le montant de votre commande s'élève à montantDeLaCommande euros.

Un e-mail de confirmation vous sera envoyé à l'adresse adresseEMailClient. 

Nous vous remerçions d'avoir choisit notre entreprise. 

Cordialement, 
L'équipe de direction.

Exercice 3

  • Ajoutez une méthode "getQuantite" à votre classe "article" qui retourne la quantité en stock de l'article.
  • Dans le code principal, après avoir appelé la méthode "retirerArt", si la quantité de l'article est 0, ajoutez une ligne à un fichier "ruptureStock.csv" contenant l'identifiant de l'article et son nom. Ce fichier permettra à la personne qui gère les stocks de votre entreprise de savoir quels sont les articles qui sont en rupture de stock.

Exercice 4

  • Créez un fichier "article.php" contenant votre classe "article".
  • Supprimez la classe "article" de votre fichier "achat.php".
  • Trouvez la fonction qui permet d'inclure le code du fichier "article.php" dans votre fichier "achat.php".
  • Testez que tout continue à bien fonctionner.
  • Le découpage en plusieurs fichiers à deux intérêts :
    • le code de la classe article peut être inclut dans n'importe quelle page PHP qui en aurait besoin,
    • le code des pages qui l'utilisent est plus "lisible".

Avant de partir

Sauvegardez les fichiers que vous aurez créés sur une clé USB. Supprimez-les ensuite de la machine sur laquelle vous avez travaillé.

Séances 9 - 13 (1/04/2015 - 6/05/2015)

Le projet consiste à développer une interface web et un programme PHP permettant à deux joueurs de s'affronter sur le jeu puissance 4. Ce projet peut être réalisé seul ou en binôme, principalement pendant les séances de cours. Lors de la dernière séance, vous devrez me donner un dossier NOM1_NOM2 contenant l'ensemble des fichiers que vous aurez créés, ainsi que tous les autres fichiers utiles (images, CSV).

Etape 1

Dans un premier temps, vous développerez une classe puissance 4 munie des champs/méthodes suivantes :

  • une liste de listes représentant la grille, contenant 7 colonnes et 6 lignes (la valeur 0 dans une des cases signifiera qu'aucun joueur n'y a déposé de pion, 1 (resp. 2) signifiera que le premier (resp. deuxième) joueur y aura déposé un pion).
  • une méthode afficherHTML permettant de générer un code html contenant un tableau (balise "table") avec les valeurs de la grille.
  • une méthode ecrire permettant de sauvegarder la grille dans un fichier csv.
  • une méthode lire permettant de remplir la grille avec des informations récupérées à partir d'un fichier csv.
  • une méthode ajouterPion prenant en argument le numéro d'un joueur (1 ou 2) et la colonne dans laquelle le joueur veut déposer le pion, et ajoutant le numéro 1 ou 2 dans la bonne case de la grille.
  • n'oubliez pas de créer un fichier test.php pour tester toutes les méthodes de votre classe !

Etape 2

Cette étape permettra de développer une interface web de jeu :

  • Dans la méthode afficherHTML ajoutez un formulaire html contenant un numéro de joueur courant et un champ permettant au joueur de sélectionner la colonne sur laquelle il veut jouer.
  • ajoutez un constructeur qui
    • appelle la méthode lire,
    • récupère les informations du formulaire (si elles existent) pour modifier la grille (méthode ajouterPion),
    • appelle la méthode ecrire si la grille a été modifiée,
    • appelle la méthode afficherHTML.
  • Vérifiez que deux joueurs ont la possibilité de s'affronter en ligne !

Etape 3

Cette étape consistera à améliorer les conditions de jeu. Plusieurs perspectives peuvent être envisagées :

  • amélioration de l'affichage de votre grille,
  • technique permettant de calculer automatiquement si un joueur a gagné,
  • joueur virtuel,
  • ...

Annexes

Editeurs de texte

Installation d'un serveur PHP : Windows

Vous pouvez utiliser WAMP. Téléchargez-le, installez-le et lancez-le. Placez vos fichiers dans le répertoire c:/wamp/www/. Vos pages html/php seront ensuite accessibles en tapant dans votre navigateur l'url suivante : http://localhost/nomPage.php

Installation d'un serveur PHP : Mac OS

Vous pouvez utiliser MAMP. Téléchargez-le, installez-le et lancez-le. Placez vos fichiers dans le répertoire Applications/MAMP/htdocs. Vos pages html/php seront ensuite accessibles en tapant dans votre navigateur l'url suivante : http://localhost:8888/nomPage.php

Installation d'un serveur PHP : Linux

Commencez par ouvrir un terminal, puis exécutez les lignes de commande suivantes :

  • sudo apt-get install apache2
  • sudo apt-get install php5 libapache2-mod-php5
  • sudo /etc/init.d/apache2 restart

Les pages PHP que vous allez créer devront être placées dans le répertoire /var/www/. Vos pages html/php seront ensuite accessibles en tapant dans votre navigateur l'url suivante : http://localhost/nomPage.php

Retour au sommaire.