docPages XHTML, feuilles de styles CSS et PHP
download 
Plainte Transcription
Pages XHTML, feuilles de styles CSS et PHP
Pages XHTML, feuilles de styles CSS et PHP [email protected] 1 Organisation du site web 1.1 Répertoires Créez un répertoire TP2 dans votre répertoire public_html. Apache (le serveur web) est configuré pour accéder à ce répertoire. Vous pouvez accéder à votre site web personnel à l’adresse http://193.52.243.6/~login où login est votre identifiant de connexion. Dans le répertoire TP2 créez plusieurs répertoires : – css pour les feuilles de style, – img pour les images, – php pour les scripts PHP. Copiez les pages crées lors du TP1 dans le répertoire TP2 ainsi que les éléments liés (images et feuilles de style). Modifiez les fichiers en fonction des répertoires crées. 1.2 Menu de navigation Les menus de navigation sont souvent crées à partir d’une liste d’éléments non ordonnée (<ul>). Votre site va contenir trois pages : une page d’accueil (pour l’instant votre fiche recette), une page de recherche de recette et une page d’ajout de recette. Créez une liste contenant ces trois éléments sous la forme de lien vers les pages concernées. Placez cette liste dans les trois pages concernées au début du bloc <body>. La figure 1 présente le résultat voulue pour la page de recette. F IG . 1 – Le menu de navigation dans la fiche recette 1 2 Site dynamique 2.1 Remarques générales La fonction print_r permet d’afficher le contenu d’une variable (y compris un tableau), cette fonction peut être utilisée pour rechercher des erreurs (bugs) dans un script. Dans le cadre de ces TPs nous avons modifié la configuration de PHP pour que les erreurs soient affichées. En production, les erreurs ne doivent pas être affichées car elles peuvent être utilisées pour attaquer le site. Sous un environnement LAMP, le fichier /etc/php.ini permet de modifier le comportement de PHP. Une aide en ligne de PHP est disponible sur : http://www.php.net/manual/fr/ 2.2 Inclusion de fichiers Dans l’exercice précédent vous avez copié trois fois le même extrait de code pour le menu de navigation. Copiez ce bloc de code dans un fichier Menu.php. Changez l’extension de vos trois pages web en .php et utilisez une fonction d’inclusion pour placer automatiquement le menu de navigation. 2.3 Formulaire de connexion De la même manière, créez un fichier Connexion.php qui permet d’afficher un formulaire de connexion dans toutes les pages de votre site. La figure 2 présente la page de recette avec ce formulaire de connexion. F IG . 2 – Le formulaire de connexion dans la fiche recette 2.4 Inclusion dynamique de fichiers Créez un fichier index.php qui contient les entêtes HTTP, le menu de navigation et le formulaire de connexion. La page à afficher va être choisie en utilisant une variable (page) passée par la méthode GET. Les variables passées par 2 la méthode GET sont ajoutées à l’adresse de la page demandée (par exemple : http://193.52.243.6/~login/tp2/index.php?page=recherche. Dans le menu de navigation, modifiez les liens pour qu’ils pointent vers : – index.php pour la page principale (pour l’instant votre recette), – index.php ?page=recherche pour la page de recherche d’une recette, – index.php ?page=ajout pour la page d’ajout d’une recette. Supprimez la partie d’entête de vos pages "recherche" et "ajout d’une nouvelle recherche". La page index.php doit inclure la page choisie en fonction de la variable page. Par exemple pour index.php ?page=recherche la page de recherche d’une recette (recette.php) doit être incluse dans la page principale. 2.5 Ajout d’un accès restreint On souhaite que seuls les utilisateurs enregistrés puissent ajouter une recette et noter les recettes. Le menu de navigation "Ajout d"une recette" ne doit apparaître que pour les utilisateurs enregistrés tout comme le formulaire de notation pour les recettes. Le formulaire de connexion doit envoyer ses variables par la méthode POST au script index.php. Pour l’instant le nom d’utilisateur est login et le mot de passe pass. Si l’utilisateur se connecte, un cookie ayant une durée de vie de 5 minutes est ajouté pour faciliter la navigation. Le cookie porte le nom GTRcuisine et à la valeur Utilisateur. Sous Firefox, il est possible de manipuler les cookies. Dans le menu "Edition">"Préférences"->"Vie privée", l’élément "Cookies" permet d’afficher et de supprimer les cookies. Retrouvez le cookie de votre site. Vérifiez qu’il stocke bien les valeurs voulues, lors du développement des cette partie, vous pouvez utiliser ce menu pour supprimer le cookie. 3 Mise en page 3.1 Propriétés CSS supplémentaires La propriété display permet de modifier le comportement des balises. La valeur inline permet de transformer une balise bloc en balise en ligne. A l’inverse la balise block convertit une balise en ligne en balise bloc. Utilisez cette propriété ainsi que les propriétés présentées dans le TP1 pour mettre en page la barre de menu. Les feuilles de style permettent un positionnement des différents éléments. Les propriétés width et height sont utilisées pour imposer une largeur et une hauteur à un élément. La propriété float est utilisée pour entourer un élément par d’autres éléments. Pour la valeur none, aucun élément ne peut entourer l’élément considéré. La valeur left place l’élément à gauche et complète l’espace libre avec les élément suivants l’élément considéré. La valeur right provoque le même comportement en plaçant l’élément considéré à droite. En utilisant ces balises ainsi que les valeurs de padding et margin proposez une mise en page composée d’une entête avec la barre de menu, une colonne à 3 gauche pour le formulaire de connexion et une colonne à droite qui affiche la page en cours. Un exemple de mise en page est proposée en figure 3 et 4. Les liens proposés dans le TP1 peuvent être utilisés comme ressource bibliographique. F IG . 3 – La fiche de recherche d’une recette pour un utilisateur non connecté 4 F IG . 4 – La fiche de recherche d’une recette pour un utilisateur connecté 5
