UV C-TK02
CNAM de Lyon, cycle C

 TP1 : 16/01 

Avant de commencer, merci de répondre à quelques questions afin que je puisse adapter les prochaines séances à votre profil.

• Transparents de la séance (PPT, 87 ko)
• Énoncé du TP :
  • Vous pouvez utiliser les images de ce répertoire.
  • Reproduisez en XHTML cette esquisse de choix de recettes que vous nommerez liste.html (PNG, 479 ko).
  • Reproduisez en XHTML cette esquisse de recette de cuisine que vous nommerez recette.html (PNG, 529 ko).
  • Reproduisez en XHTML cette esquisse de moteur de recherche de recettes que vous nommerez recherche.html (PNG, 511 ko).
  • Réfléchissez à l'organisation du TP2...
• Envoyez-moi par mailvos fichiers avant de partir !

 TP2 : 23/01 

A faire avant la séance : en vous inspirant de sites existants (Marmiton.org, SuperToinette.com, ...) proposez les fonctionnalités (classées en minimales et étendues) de notre site d'échange de recettes de cuisine. Réfléchissez aux différentes pages nécessaires et à ce que devrait permettre la base de données associée.

• Vos corrections du TP1 : liste.html (François Creton), recette.html (Thomas Renault), recherche.html (Jean-Michel Thoral).
• Transparents de la séance (PPT, 68 ko)
• Énoncé du TP (corrigé a posteriori) :
  Finalement nous avons passé plus de temps que je ne le pensais sur le cours et le début du JavaScript. Tant mieux, c'est la preuve de votre intérêt pour les possibilités de ce langage.
  Outre le cours et la définition des fonctionnalités de notre site projet, vous avez fait :
  • L'exercice 6 de la page de cours sur le JavaScript.
  • Certains on pu faire d'autres exercices de cette page et vous avez du les regarder chez vous pour la séance suivante (un lien vers les corrections est donné après les énoncés).
  • Un de vous a réalisé la première question du sujet de la séance suivante (inscription.html du groupe intermédiaire).

 TP3 : 30/01 

Cette semaine nous allons appliquer à notre site projet ce que nous avons vu les deux semaines précédentes : la création de formulaires en XHTML et leur traitement local en JavaScript avant de les transmettre au serveur qui les analysera en PHP (cette partie sera vue la semaine prochaine).
A partir de maintenant, nous allons régulièrement travailler directement sur le site projet (accès par FTP à l'adresse ftpperso.free.fr avec le login aurelien.barbier et le mot de passe donné en cours).

• Les corrections des exercices de JavaScript faits au TP2 et demandés pour cette semaine sont données sous les énoncés.
• Pas de cours cette semaine (éventuellement le début du cours sur PHP en fin de séance s'il reste du temps).
• Regardez la version de recette.html proposée par François Creton, quels sont ses points forts et ses (éventuels) points faibles pour nos développements futurs ? Regardez également la version de David Bain et Sylvain Raye, la version de Julien Falgon et enfin la version de Jean-Michel Thoral ; imaginez la page idéale (codage, apparence finale, ...) à partir de ces propositions en pretant attention à un détail crucial sur la version de Jean-Michel Thoral.
  Essayez de garder la même approche pour créer les pages suivantes.
• Prenez également le temps de lire et de critiquer la synthèse des propositions pour le site projet (voir toutes les propositions).
• Énoncé du TP :
  Selon vos connaissances préalables et/ou vos facilités/difficultés à effectuer les TPs 1 et 2, répartissez-vous en trois groupes de niveaux dans la salle et faites le sujet correspondant (les mêmes notions sont abordées dans les 3 sujets) :
  • groupe 1 (débutants) : 1 par machine !
    • En 2 heures maximum, réalisez les scripts suivants :
      • page login.html contenant simplement un formulaire de saisie d'un login et d'un mot de passe, ce dernier étant immédiatement crypté avec la fonction (à inclure) hex_md5 (utilisez l'attribut onchange="" et this.value).
        Une fenêtre-message d'aide expliquant succintement la modification apparente doit pouvoir apparaître en cliquant sur une image d'un point d'interrogation (trouvez comment faire).
      • Faites une fonction JavaScript permettant de vérifier qu'une adresse email est bien construite (nom@fai.extension) et ne contient pas les caractères suivants : !?*# (utilisez la fonction value.indexOf('x')).
      Finissez chez vous si vous n'avez pas pu terminer.
    • Uploadez vos fichiers dans le répertoire tmp du site projet en prenant bien garde d'ajouter un suffixe discriminant pour éviter d'écraser les fichiers des autres (désolé mais 2 connexions parallèles sont autorisées au maximum, donc patience...).
    • Modifiez le fichier recette.html du site projet afin qu'il se mette à jour automatiquement lorsque le nombre de personnes est modifié (quantité des ingrédients, kilocalories, ...) puis déposez votre version dans le répertoire tmp.
    • Répartissez vous la création des pages index.html, plan.html et liens.html (voir le cahier des charges du site). Attention à la validité !
    • S'il vous reste du temps, aidez les autres puis lisez le début du cours sur PHP et faites quelques essais (Menu démarrer, Programmes, Outils, Easy-Php pour lancer le serveur).
  • groupe 2 (intermédiaires) :
    • En 2 heures maximum, réalisez les scripts suivants :
      • page inscription.html contenant un formulaire de type post gérant le nom, prénom, login, mot de passe (en double et de 6 caractères minimum), email (valide !) et adresse de site web (enlever http://). Seuls le login et le mot de passe sont obligatoires et tous les champs doivent être mis en minuscules sauf le mot de passe (voir les détails de l'objet String).
        Lors de l'envoi du formulaire, toutes les vérifications et tous les traitements indiqués doivent être exécutés.
      • Modifiez votre formulaire pour n'envoyer qu'un seul mot de passe (la confirmation est faite en local).
      • S'il vous reste du temps, lisez l'énoncé du groupe 1 et ajoutez le cryptage du mot de passe.
      • S'il vous reste encore du temps, intéressez-vous au sujet du groupe 3.
      Finissez chez vous jusqu'au cryptage si vous n'avez pas pu arriver jusque là (vous pouvez/devez récupérer du code du groupe débutant).
    • Uploadez vos fichiers dans le répertoire tmp du site projet en prenant bien garde d'ajouter un suffixe discriminant pour éviter d'écraser les fichiers des autres (désolé mais 2 connexions parallèles sont autorisées au maximum, donc patience...).
    • Répartissez vous la création des patrons de pages top.html, suggestions.html, contacts.html et depot.html puis des scripts verif_email.js et verif_mdp.js. (voir le cahier des charges du site). Attention à la validité !
    • S'il vous reste du temps, aidez les autres puis lisez le début du cours sur PHP et faites quelques essais (Menu démarrer, Programmes, Outils, Easy-Php pour lancer le serveur).
  • groupe 3 (confirmés) :
    • En 2 heures maximum, réalisez les scripts suivants :
      • Seulement l'un d'entre vous (le plus rapide de préférence) repart de l'une des versions de recette.html et réalise en moins de dix minutes les modifications proposées puis uploade le fichier dans le répertoire recettes du site afin que chacun travaille sur le même fichier plus tard (Merci à celui ou celle qui se dévoue).
      • Faire une fonction JavaScript qui prend en entrée un tableau (vecteur) de tableaux (vecteurs) ayant le même nombre d'éléments (des nombres) et qui renvoie le code XHTML décrivant le tableau (2D) qui représente ces données.
        Ecrivez une page très simple qui permet de tester cette fonction à partir d'un tableau de tableaux entré à la main dans la partie head.
      • Ecrivez une fonction de tri d'un vecteur de vecteurs par ordre croissant d'un numéro de colonne donné en paramètre. Vous utiliserez l'algorithme du tri rapide (exemple) ou celui du tri fusion.
        Paramétrez votre page précédente pour qu'elle affiche le tableau selon un numéro de colonne fixé par une variable définie dans la partie head.
      • S'il vous reste du temps, modifiez votre page pour qu'elle permette de modifier le tri du tableau affiché en cliquant sur l'un des en-têtes de colonnes.
        Pour cela, placez votre tableau XHTML entre des balises <div> et </div> puis utilisez le champ innerHTML et la fonction findObj() tels que décrits dans le cours sur DOM et DHTML.
      • Il vous reste encore du temps !? Vous êtes vraiment très rapides ! Comme vous l'avez sans doute compris, le but est d'afficher une liste de recettes triées par ordre croissant ou décroissant de leur difficulté, prix, coût, ... ou de leur intitulé ! Adaptez votre fonction de tri pour spécifier le sens puis réfléchissez à comment rendre votre fonction générique en permettant de trier selon des nombres ou selon d'autres critères (ordre alphabétique, ...).
      Finissez chez vous si vous en avez le courage...
    • Uploadez vos fichiers dans le répertoire tmp du site projet en prenant bien garde d'ajouter un suffixe discriminant pour éviter d'écraser les fichiers des autres (désolé mais 2 connexions parallèles sont autorisées au maximum, donc patience...).
    • Réflechissez aux tables qui seront nécessaires dans notre base de données en vous rapportant au cahier des charges du site (quelles informations doivent être présentes ?). Si vous n'avez aucune connaissance en base de données, demandez moi de l'aide.
    • S'il vous reste du temps, aidez les autres ou finissez le script de tri si ce n'est déjà fait puis lisez le début du cours sur PHP et faites quelques essais (Menu démarrer, Programmes, Outils, Easy-Php pour lancer le serveur).

 TP4 : 06/02 

A faire avant la séance : prendre le temps de regarder le travail qui a été fait dans les autres groupes au TP3 (voir le répertoire tmp du site projet). Il ne s'agit pas de refaire le travail des autres mais juste de le lire et d'essayer de le comprendre car nous n'y reviendrons pas spécialement.

Tiphaine et moi sommes heureux de vous faire part de l'arrivée de notre petite Louna :-)

Cette semaine nous ne travaillerons pas par groupes de niveaux ; merci de vous mettre en binôme confirmé-débutant ou intermédiaire-débutant pour cette séance (un débutant par machine malgré tout tant que cela reste possible).
Désormais nous allons nous intéresser à ce qui se passe du côté du serveur.

• Énoncé du TP :
  • Notions de base de PHP.
  • Pour travailler en local avec des fichiers PHP, il faut lancer les serveurs Apache et MySQL à l'aide d'Easy-PHP : Menu démarrer, Programmes, Outils, Easy-Php.
  • Si vous êtes assez à l'aise, effectuez les exercices 2 et  3 de PHP. Sinon faites uniquement le début de l'exercice 3 (hello_world_auto.php) en partant de la correction de l'exercice 2 et prenez le temps de comprendre la classe proposée.
  • Ecrivez la page enregistrement.php qui reçoit les données du formulaire inscription.html et les affiche (simple vérification pour l'instant).
  • S'il vous reste du temps, finalisez l'écriture des pages login.php, inscription.php, et enregistrment.php en utilisant les outils que nous venons de voir/créer puis commencez à lire les notions de cours sur MySQL et le sujet de la semaine prochaine.
  • Si vous n'avez pas pu finir, terminez chez vous.

 TP5 : 13/02 

• Énoncé du TP :
  • Révisons JavaScript en découvrant DHTML :
    • Allez lire le cours sur le DOM et DHTML.
    • Ecrivez une page test_dhtml.html comprenant uniquement un bouton et cinq div (avec du texte quelconque) identifiés par les noms obj1 à obj5. Utilisez l'exemple donné en bas de la partie manipuler des objets du cours sur le DOM pour lancer le déplacement des objets lorsque l'on clique sur le bouton.
    • Modifiez votre fichier pour bloquer les objets lorsqu'ils vont quitter l'écran (test des attributs left et top des objets). Comment faudrait-il le modifier encore pour que les objets restent à l'écran si l'on redimensionne la fenêtre du navigateur ?
    • Modifiez votre page pour que les objets ne sortent pas d'une zone (div) de position et de taille fixée puis remplacez vos objets par des images de billes avec un fond transparent (.png) : des images.
    • Affectez une vitesse et un diamètre différents à chaque bille.
    • S'il vous reste du temps, essayez de gérer les collisions entre les billes...
  • Le 16/02 : voici une correction qui gère également les collisions entre les billes.

 Pas de séance le 20/02: projet à rendre le 27/02 (disponible depuis le 15/02 6h) 

Le projet est à rendre avant la séance du 27/02 par mail. Il peut être réalisé en binôme. Il doit être constitué d'un répertoire de nom votre nom de famille (pour un binôme, les deux noms séparés par un souligné) compressé au format zip (vous pouvez utilisez le logiciel gratuit 7zip indiqué sur la page du cours). Ce répertoire doit contenir tous les fichiers (XHTML, JS, images, ...) nécessaires à la visualisation de la page en local. La page doit naturellement être valide et utilisable sur tous les navigateurs. Vos remarques éventuelles devront être placées dans un fichier LisezMoi.txt.

Le DHTML consiste à modifier sur le poste client la page XHTML actuellement affichée en fonction des interactions avec l'internaute mais sans nouvel échange de données avec le serveur. Les interactions sont détectées à l'aide d'événements JavaScript et gérées par des fonctions JavaScript définies dans la partie head de la page.

Nous avons vu comment changer le contenu d'une balise en modifiant son attribut innerHTML et comment déplacer un bloc div en modifiant dans son attribut style les propriétés left et top (rappel: pour cela il faut avoir défini la propriété position:absolute; dans l'attribut style du bloc div). Nous avons également vu comment définir une animation à l'aide de la fonction JavaScript setTimeout('fonction()',delai); qui permet d'appeler une fonction après un délai fixé (en millisecondes).
De manière plus générale, il est possible de modifier n'importe quel attribut et propriété de style d'un objet que l'on aura retrouvé à l'aide de la fonction findObj() définie dans le fichier standards.js.

Le but du projet est de définir une page permettant de résoudre une énigme. Tout ce dont vous aurez besoin pour effectuer ce projet a été vu en cours et/ou suggéré ci-dessus. Je vous rappelle également que les corrections des exercices de la page du cours sur JavaScript et la correction du TP de la séance du 13/02 sont disponibles.
Voici ce que vous devez faire :

• créer la page XHTML correspondant à ce schéma (tout est placé au sein d'un tableau sans bordure : border="0").
• permettre à l'internaute de voir un indice en cliquant sur le lien "Afficher un indice" (par remplacement de ce texte).
• permettre à l'internaute de découvrir la solution en cliquant sur le lien "Afficher la solution" (par remplacement de ce texte).
• permettre à l'internaute de faire une proposition de réponse et modifier l'affichage en conséquence.
• afficher chaque seconde le temps écoulé depuis le chargement de la page et arrêter le chronomètre lorsque la solution est affichée.
• afficher "Bonne réflexion" tant qu'aucune proposition n'a été faite, "Faux" si la dernière proposition n'est pas totalement juste, "Bravo" si la proposition est juste et enfin "Énigme non résolue" si l'internaute a choisi d'afficher la solution.
• si vous en connaissez une sympa, proposez une vraie énigme (avec une réponse d'au moins deux données ; si ce n'est pas le cas, ajoutez un champ de réponse qui doit valoir 0).
  sinon mettez juste du bla bla et considérez que la solution est constituée des trois nombres 1, 2 et 3.

J'ai fait attention à être suffisament précis dans le sujet et le barème présenté ci-dessous pour vous faire comprendre comment créer la page XHTML (quelles balises utiliser) et quels doivent être les traitements à effectuer en JavaScript, donc (re-)lisez bien.
Si vous avez vraiment un doute, vous pouvez toujours m'envoyer un mail.

Barème : 5 points

• construction de la page XHTML + chargement des JavaScripts externes + définition des fonctions JavaScript et de leur(s) appel(s) depuis des événements : 1 point.
• remplacement du lien "Afficher un indice" par le simple texte "Indice:<saut de ligne> bla bla bla" et même traitement pour "Afficher la solution" en remplaçant également "Bonne réflexion" par "Énigme non résolue" : 1 point.
  0,5 point supplémentaire si votre approche n'utilise ni span ni div.
• affichage du chronomètre : 1 point.
  0,5 point supplémentaire s'il est réalisé avec 10 images (des chiffres 0 à 9).
• gestion de la proposition : remplacement de "Bonne réflexion" par "Bravo" avec affichage de la solution ou au contraire remplacement par "Faux" (sans affichage de la solution !) : 1 point.

Puisque nous n'avons pas encore étudié les CSS, la gestion des styles n'est pas demandée mais si vous le voulez, vous pouvez :

• centrer horizontalement et verticalement le contenu d'une cellule d'un tableau en ajoutant l'attribut style="text-align:center;vertical-align:middle" à la balise td
• justifier le texte d'un paragraphe en utilisant la propriété text-align:justify; dans l'attribut style de la balise p.
• commencer à lire le cours et les liens sur les CSS ;-p (en travaux)

Bon courage !!

Foire Aux Questions (en réponse à certains mails, mise à jour le 23/02) :

• Où se trouve la solution du dernier TP ?
  à la fin de l'énoncé mais effectivement j'avais oublié de débloquer, le lien...
• Faut-il soumettre 3 propositions de solution à l'utilisateur ?
  non, je considère juste que l'énigme possède une solution en 3 données (... Quels sont les âges de ses 3 filles ?). Le but est simplement de vous obliger à tester plusieurs valeurs :-p
• Que signifie et modifier l'affichage en conséquence ?
  la réponse est dans la suite du sujet, il faut éventuellement afficher la solution, mettre à jour le message "Bonne réflexion", ... Je vous laisse interprêter le reste du sujet.
• Peut-on utiliser des span et/ou des div ailleurs que pour l'indice ?
  oui, bien sûr : tout ce qui n'est pas interdit est autorisé !
• Lorsque j'écris alert(obj.style.left);, mon navigateur m'affiche unknown :
  vous avez sans doute le même résultat avec alert(obj.style); car certains navigateurs n'utilisent pas l'attribut style mais traitent les propriétés de style comme des attributs. Dans ce cas il faut directement utiliser obj.left. Pour faire un code générique, écrivez par exemple if (obj.style) obj.style.left = l; else obj.left = l;.
• FireFox m'indique Erreur d'analyse de la valeur pour la propriété 'left'. Déclaration abandonnée. :
  si vous écrivez obj.style.left = x;, dans une page XHTML-valide il faut en fait écrire obj.style.left = x+'px';.
• Peut-on modifier d'autres propriétés de style que left et top ?
  oui, toutes les propriétés de style sont modifiables de la méme manière. Pour connaître les possibilités, reportez-vous au cours sur les CSS.
• Sous Internet Explorer mes scripts externes semblent ne pas être chargés :
  Pour éviter ce problème, il faut utiliser l'écriture <script type="text/javascript" src="..."></script> plutôt que <script type="text/javascript" src="..." /script>
• Comment débugger mes JavaScripts ?
  Dans FireFox, menu Outils, Console JavaScript ou d'autres extensions...
  François Le Luhern vous propose aussi http://www.mozilla.org/projects/venkman/.

 TP6 : 27/02 

L'examen aura bien lieu le 13/03 de 18h30 à 20h30 dans l'amphithéatre jouxtant la salle machines dans laquelle nous faisons les séances de cours. Tous les documents papiers seront autorisés.
Toutes mes excuses pour ces changements successifs finalement sans résultat.

Cette semaine nous allons nous intéresser aux feuilles de style en cascade, autrement dit les CSS :

• Énoncé du TP :
  • • Lisez le cours et les liens sur les CSS
    • Faites cet exercice

 TP7 : 06/03 

sujet à définir... (brouillon non contractuel)

• Correction du TP sur les CSS
• Énoncé du TP :
  • Lisez les notions de cours sur MySQL.
  • Un peu de révisions : faisons le point sur le rôle des notions abordées... Pour chaque notion, dites s'il s'agit d'un langage ou d'autre chose. Si c'est un langage, précisez s'il est interprété du côté du client ou du serveur et s'il défini des données statiques ou dynamiques et de manière statique ou dynamique :
    • XHTML : ???
    • JavaScript : ???
    • PHP : ???
    • DOM : ???
    • DHTML : ???
    • CSS : ???
    • MySQL : ??? (voir la suite d'abord)
    • Cookies : ??? (voir la suite d'abord)
  • Faites cet exercice
  • Pour les plus rapides, revenez-en au site projet : écrivez la page recette.php à partir de recette.html en utilisant xhtml_css.inc.php et bdd.inc.php afin d'afficher une recette tirée de la base de données puis vérifiez que le résultat produit est bien toujours XHTML-valide et dynamique pour sa partie JavaScript (adaptation des données au nombre de personnes).

 Examen : 13/03 

L'examen final aura lieu lundi 13/03 de 18h30 à 20h30 dans l'amphithéatre jouxtant la salle machines dans laquelle nous avons fait les séances de cours. Tous les documents papiers sont autorisés. Bonnes révisions.

Vous pouvez consulter le sujet de l'année dernière pour vous rendre compte que les questions sont très proches de tout ce que l'on a vu au cours des séances. Reportez-vous à la section notation pour avoir plus de détails sur le barême potentiel (le sujet n'est pas encore fait) de cette année.