Exercises CSS, JavaScript et PHP

Menu déroulant en CSS.

  1. Dans un répertoire "td5", écrire un fichier "td5_js.html". Vous partirez d'une copie du fichier "td4.html" de la séance précédente.
    Vous copierez également dans "td5" le fichier "css" importé.
    Dans la partie nav de "td5_js.html" vous rajouterez dans le menu de liens hypertexte, une sous-liste "Exercices" avec les éléments "JavaScript" et "PHP". Ces sont deux des liens hypertexte vers "td5_js.html" et "td5_php.html" respectivement.
    Vous obtiendrez, en appliquant le "css" l'affichage suivant :
    Pbs image
    Validez le document et insérez le logo de validation.
  2. Vous allez maintenant modifier le fichier "css" pour que le menu de nav soit dynamique. C'est à dire les sous-menus (dans notre exemple les sous-éléments d' "Exercices") ne sont affichés que si on les survole avec la souris. L'affichage suivant vous montre le menu sans les sous-menus, la partie "Exercices" n'est pas survolée :
    Pbs image
    Remarques :
    • Pour comprendre ce menu dynamique, testez dans cette même page (dans le menu en haut à gauche) l'élément "Serveurs http" de la liste "Outils". Inspirez vous de ce code.
    • Ce dynamisme est apporté avec la pseudo-classe :hover de css.

JavaScript :

  1. Vous continuerez à travailler avec le fichier "td5_js.html".
    Vous ajouterez, dans la partie section un paragraphe comme le montre la figure suivante :
    Pbs image
    Remarques :
    • Vous devez ajouter dans le fichier CSS deux classes de style : ".fondJaune" et ".fondRouge" pour afficher avec un fond de couleur jaune et rouge respectivement.
    • Vous attribuerez au paragraphe, la classe "fondJaune".
    • Vous ajouterez au paragraphe les événements onmouseover et onmouseout, ces événements permettront de changer la valeur de la propriété className à 'fondRouge' et 'fondJaune' respectivement.
  2. Ajoutez à la suite du paragraphe précédent une image qui sera remplacée à chaque fois qu'on clique dessus :
    Pbs image
    Remarques :
    • Téléchargez ce dossier "images.zip", le décompresser pour obtenir le répertoire "images". Placez "images" dans le répertoire "td5".
    • Le répertoire "images" comporte 5 fichiers nommés "photo0.jpg", jusqu'à "photo4.jpg".
    • Dans la balise img vous aurez besoin des attributs :
      1. src dont sa valeur initiale sera "images/photo0.jpg"
      2. id pour accéder à la balise à travers document.getElementById(nomIdDeImg)
      3. alt dont sa valeur est un texte alternatif
    • L'image ainsi que le texte "Cliquer pour changer la vue" sont un lien hypertexte permettant de faire appel à la fonction javaScrip changerVue().
    • Ecrire et importer le fichier "exos.js". Dans ce fichier vous définirez la fonction changerVue().
    • En plus de changerVue() vous aurez besoin de deux variables globales : 
      // Variables globales :
var p = 0;            // numero de la photo courante
var nbPhotos = 5;     // nombre de photos dans le dossier
    • La fonction changerVue() devra :
      1. Incrémenter la valeur de p modulo nbPhotos.
      2. A travers de document.getElementById(nomIdDeImg) vous devez modifier l'attribut src pour "pointer" vers l'image suivante ("photo" + p + ".jpg" où p est le numéro de la photo courante).

PHP :

  1. Préparation. Pour exécuter du PHP et pour publier vos pages html, vous devez disposer d'un serveur http.
    Nous vous conseillons d'ouvrir, plus tard en dehors du TD, un compte dans un hébergeur tel que olympe ou webhost (il y a beaucoup d'autres héberbeurs disponibles, faites une recherche).
    Dans le cadre de ce TD procédez comme suit :
    • Si vous travaillez sur windows dans un poste de la fac, vous pouvez utiliser USBWebserver. Suivez les étapes :
      1. Récupérez dans une clé USB le fichier "USBWebserverv8.6.zip" ici.
      2. Décompressez le "zip" dans la clé USB. Vous obtiendrez un répertoire comme ceci : répertoire USBWebserver
      3. Créez dans le répertoire "root" un sous-répertoire que vous pouvez appeler "www".
        Vous placerez dans "www" des fichiers (.html et .php) ainsi que des sous-répertoires.
        Supposez par exemple qu'on place les fichiers test.html et test.php. On a donc un répertoire comme ceci : repertoire WWW.
      4. Lancez, sur la clé USB, l'application "usbwebserver.exe".
      5. Dans votre navigateur ecrivez l'adresse "localhost:8080/www". Vous obtiendrez localhost
    • Si vous avez un ordinateur personnel, vous pouvez installer un serveur local tel que Wamp ou Mamp.
  2. En fin vous êtes prêt à travailler avec PHP. Placez dans "www" (si vous utilisez USBServer) une copie du répertoire "td5" et faites une copie de "td5_js.html" sous le nom de "td5_php.html".

    Dans "td5_php.html" écrire un formulaire pour saisir un nom et l'envoyer (submit) vers "bonjour.php"
    Ecrire le fichier "bonjour.php" pour récupérer le nom et produire une page de bienvenue

    Testez ici le formulaire.
    Votre nom :

    Rappel : l'adresse dans votre navidateur pour tester votre formulaire sera : "localhost:8080/www/td5/td5_php.html".

Valid html5