TD9 - PHP/MySQL : Préparer un plus grand projet

Objectif

  • Dans ce TD, nous allons apprendre comment créer un plus grand projet de site web dynamique. Généralement, sur un site internet avec plusieurs pages web, il y a des éléments communs qui sont présents sur toutes les pages. Il s’agit notamment de la partie <head>, de l’en-tête des pages avec un logo et le nom du site, et éventuellement un menu, et d’une partie pied de page, avec des informations sur le créateur du site. Dans ce TD, nous allons découper chaque page en plusieurs parties, afin de pouvoir réutiliser les parties qui sont présents sur plusieurs pages. Ceci a l’avantage que les modifications sur les éléments communs peuvent être faites juste une fois, et se répercutent sur toutes les pages !

  • Dans un premier temps, nous allons travailler sur des pages de mise en forme assez simple, et ensuite nous allons faire les mêmes exercices en utilisant un framework CSS (tel que materialize ou bootstrap).

Préparation d’un plus grand projet

Exercice 9.1 Page modèle

  1. Créez un dossier td9. Copiez votre fichier connexion_base.php dans ce dossier td9. Créez un nouveau fichier HTML5 simpliste s’appelant page-modele.php avec les balises habituelles. Dans la partie <body>, créez
  • une balise <header>...</header> qui contient un titre h1 s’appelant “Super site” (ou un nom de votre choix), ainsi qu’une image img incluant une petite image qui figure comme logo pour votre site (hauteur inférieur à 200px).

  • une balise <nav>...</nav> qui contient une liste ul les trois éléments li suivants :

<ul>
    <li><a href="accueil.php">Accueil</a></li>
    <li><a href="profil.php">Profil</a></li>
    <li><a href="messages.php">Messages</a></li>
</ul>
  • une balise <main>...</main> qui contient un titre h2 s’appelant “Accueil”, ainsi que les 3 paragraphes de la version populaire de Lorem Ipsum.

  • Une balise <footer>...</footer> qui contient un paragraphe “Ce site a été créé par …”.

Ouvrez votre fichier page-modele.php dans votre navigateur, et vérifiez si tout se passe comme souhaité.

  1. Créez un fichier CSS qui s’appelle styles-supersite.css, dans un sous-dossier cssde votre dossier td9. Dans ce fichier CSS, mettez les règles suivants :
body {
    font-family: 'Arial', sans-serif;   
    background-color: #f4f4f4; 
}
  1. Bien évidemment, dans votre page HTML, il faut lier le fichier styles-supersite.css pour l’utiliser. Comme d’habitude, ceci est fait dans la partie <head> das votre page HTML.

  2. Pour les sélecteurs de balises header et footer, appliquez les règles suivants :

    background-color: #1b529a;
    color: #ffffff;
    text-align: center;
    padding: 10px;
  1. Appliquez les règles suivant à la balise main. Il faudra donc que vous choissez le bon sélecteurs.
    margin: 20px;
    padding: 20px;
    background-color: #ffffff; 
    border-radius: 12px; 
    box-shadow: 0 5px 9px rgba(0, 0, 0, 0.2);

Exercice 9.2 Découpage

  1. Maintenant, coupez votre fichier page-modele.php en deux : créez un fichier debut-page.inc.php, qui consiste de tout le contenu du fichier page-modele.php avant le contenu (jusqu’avant l’ouverture de la balise <main>, et un créez également un fichier fin-page.inc.php qui consiste de tout le contenu du fichier page-modele.php après le contenu (après la fermeture de votre balise </main>).
Important

Les pages debut-page.inc.php et fin-page.inc.php ne contiennent qu’une partie d’une page web : ces pages ne sont pas faites pour être affichées séparément. Vous ne pouvez donc pas les tester pour l’instant. Vous verrez dans le prochain exercice que ces pages seront inclus dans un autre fichier !

  1. Maintenant, créez un fichier nouvelle-page.php, qui consiste uniquement des lignes suivantes :
<?php
session_start();
require_once("connexion_base.php");

$donnees['menu'] = "Accueil";
$donnees['titre_page'] = "Page d'accueil";

include "debut-page.inc.php"; 
?>

<main>
    <h2>Accueil</h2>
    <p>Lorem ipsum dolor sit amet, consectetur .... </p>
    <p>Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean .... </p>
    <p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim .... </p>
</main>

<?php include "fin-page.inc.php"; ?>
  1. Ouvrez votre fichier dans votre navigateur, et vérifiez si tout se passe comme souhaité. Avec le navigateur, faites afficher le code source, et vérifiez dans le validateur W3C.
Note
  • La partie principale (main) de votre fichier nouvelle-page.php : elle contient tout ce qui n’est ni dans votre fichier debut-page.inc.php, ni dans fin-page.inc.php.

  • Le fichier nouvelle-page.php reproduit exactement la page page-modele.php, car il inclut les fichiers debut-page.inc.php et fin-page.inc.php.

  • Le fichier nouvelle-page.php est beaucoup plus court et lisible.

  • Les fichiers debut-page.inc.php et fin-page.inc.php ne peuvent pas être ouvert séparément - ce sont des fichiers qui sont destinés à être inclus dans d’autres fichiers, conjointement !

Exercice 9.3 Titre de page

  1. Modifier votre fichier debut-page.inc.php pour qu’il affiche le titre de la page dans la balise <title> tel qu’il est défini dans le tableau associatif donnees, en utilisant l’instruction echo dans un contexte PHP. Comme cette question est souvent malcompris, je vous présente la solution ici (le changement da la ligne de la balise <title> dans le fichier debut-page.inc.php) :
<title><?php echo $donnees['titre_page']; ?></title>
Note

Pour info : Par la suite, tous vos fichiers seront conçus de cette manière : ils incluront les fichiers (au début) et (à la fin).

  1. Copiez votre fichier nouvelle-page.php dans trois nouveaux fichiers, que vous appelez accueil.php, profil.php, et messages.php.

  2. Modifiez le contenu de ces trois fichiers pour qu’ils représentent une page d’accueil, une page “Profil”, et une page pour les messages. Pour simplifier, modifiez pour l’instant uniquement le titre <h2>.

  3. Changez les 2 affectations de votre tableau associatif donnees dans ces trois fichiers, pour déterminer un titre de page, et à quel item de menu la page appartient (pour préparer le prochain exercice).

  4. Testez.

Exercice 9.4 Menu : afficher les liens conditionnellement

  1. Changez le fichier debut-page.inc.php, pour qu’il mette en évidence le menu sélectionné. Pour cela, il suffit de simplement mettre des instructions if dans le fichier debut-page.inc.php pour tester $donnees['menu'], et de mettre un style différent pour le menu actuel. Ci-dessous, un exemple pour un élément de menu : vous n’affichez un lien hypertexte uniquement si vous n’êtes pas déjà sur la page sur lequel dirige le lien. Si vous êtes déjà sur la page, vous n’affichez uniquement l’entrée de menu, sans lien hypertexte, car vous y êtes déjà !
<?php 
if ($donnees['menu'] == "Accueil")
{
?>
    <li>Accueil</li>
<?php
}
else
{
?>
    <li><a href="accueil.php">Accueil</a></li>
<?php
}
?>
  1. Reproduisez le même comportement pour les autres menus, “Profil”, et “Messages”, dans le fichier debut-page.inc.php.

Exercices optionnels

Exercice 9.5 Même exercice avec Framework CSS

L’objectif de cet exercice est de refaire le même exerice, mais en utilisant un Framework CSS qui contient des règles CSS prédéfinis afin de faciliter une mise en forme agréable, et adaptative selon les écrans (responsive web design). Une fois vous aurez fait cet exercice, vous pouvez donc tester votre site sur un ordinateur, et sur votre téléphone mobile.

Il en existe une multitude de Frameworks CSS, et vous pouvez en choisir un selon vos envies. Parmi les plus populaires, on peut citer Bulma, Materialize, Bootstrap, par exemple.

  1. Dans un premier temps, identifiez un Framework CSS qui vous plaît. Pour vous inspirer, regardez p.ex.
  1. Dans un dossier td9-avec-framework-css, faites le même exercice de ce TD, avec un exemple utilisant un framework CSS de votre choix. Vous commencez donc à créer une page_modele.php que vous testez, et ensuite, une fois satisfait de votre page modèle, vous découpez en fichiers debut-page.inc.php et fin-page.inc.php, vous créez les pages accueil.php, profil.php, messages.php, etc.

Exercice 9.6 Test sur téléphone

Comme votre site est en ligne est accessible sur Internet, vous pouvez aussi l’afficher sur votre téléphone. Soit vous saisissez l’URL de votre page sur votre téléphone, soit, vous créez un QR Code de cet URL, p.ex. en utilisant l’outil ci-dessus :

https://patrick-reuter.emi.u-bordeaux.fr/qrcode/phpqrcode/index.php

Important

Comme d’habitude, les exercices sont à rendre sur moodle jusqu’à mercredi prochain, 23h59.