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
- Créez un dossier
td9
. Copiez votre fichierconnexion_base.php
dans ce dossiertd9
. Créez un nouveau fichier HTML5 simpliste s’appelantpage-modele.php
avec les balises habituelles. Dans la partie<body>
, créez
une balise
<header>...</header>
qui contient un titreh1
s’appelant “Super site” (ou un nom de votre choix), ainsi qu’une imageimg
incluant une petite image qui figure comme logo pour votre site (hauteur inférieur à 200px).une balise
<nav>...</nav>
qui contient une listeul
les trois élémentsli
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 titreh2
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é.
- Créez un fichier CSS qui s’appelle
styles-supersite.css
, dans un sous-dossiercss
de votre dossiertd9
. Dans ce fichier CSS, mettez les règles suivants :
body {font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
}
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.Pour les sélecteurs de balises
header
etfooter
, appliquez les règles suivants :
: #1b529a;
background-color: #ffffff;
color: center;
text-align: 10px; padding
- Appliquez les règles suivant à la balise
main
. Il faudra donc que vous choissez le bon sélecteurs.
: 20px;
margin: 20px;
padding: #ffffff;
background-color: 12px;
border-radius: 0 5px 9px rgba(0, 0, 0, 0.2); box-shadow
Exercice 9.2 Découpage
- Maintenant, coupez votre fichier
page-modele.php
en deux : créez un fichierdebut-page.inc.php
, qui consiste de tout le contenu du fichierpage-modele.php
avant le contenu (jusqu’avant l’ouverture de la balise<main>
, et un créez également un fichierfin-page.inc.php
qui consiste de tout le contenu du fichierpage-modele.php
après le contenu (après la fermeture de votre balise</main>
).
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 !
- 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"; ?>
- 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.
La partie principale (
main
) de votre fichiernouvelle-page.php
: elle contient tout ce qui n’est ni dans votre fichierdebut-page.inc.php
, ni dansfin-page.inc.php
.Le fichier
nouvelle-page.php
reproduit exactement la pagepage-modele.php
, car il inclut les fichiersdebut-page.inc.php
etfin-page.inc.php
.Le fichier
nouvelle-page.php
est beaucoup plus court et lisible.Les fichiers
debut-page.inc.php
etfin-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
- 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 associatifdonnees
, en utilisant l’instructionecho
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 fichierdebut-page.inc.php
) :
<title><?php echo $donnees['titre_page']; ?></title>
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).
Copiez votre fichier
nouvelle-page.php
dans trois nouveaux fichiers, que vous appelezaccueil.php
,profil.php
, etmessages.php
.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>
.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).Testez.
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.
- Dans un premier temps, identifiez un Framework CSS qui vous plaît. Pour vous inspirer, regardez p.ex.
Le Starter Template de Bulma, https://bulma.io/documentation/start/overview/, que vouz pourriez enrichir avec des header, footer, navbar, etc.
La section Templates du Framework CSS
Materialize
: https://materializecss.com/getting-started.html#templatesLes divers exemples bootstrap.
- 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 unepage_modele.php
que vous testez, et ensuite, une fois satisfait de votre page modèle, vous découpez en fichiersdebut-page.inc.php
etfin-page.inc.php
, vous créez les pagesaccueil.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
Comme d’habitude, les exercices sont à rendre sur moodle jusqu’à mercredi prochain, 23h59.