Site php/bootstrap, base de travail

L’enjeu de ce tutoriel est de mettre en place un site utilisant quasiment toutes les technologies vues en cours : html et css bien sûr, mais aussi les fontes importées, javascript, bootstrap, et enfin php. On ajoute quelques bricoles, comme une favicon et des balises méta, et on aura un site conforme, aux standards actuels.

1/4 | Suivant

1) Préparer les fichiers de base html/css/javascript

Pour démarrer ce projet il faut importer dans le dossier de travail tous les fichiers nécessaires
- la dernière version de jquery
- un typo pour le net via Fontsquirrel
- les fichiers de base css et javascript de bootstrap
- le dossier de Fontawesome (free for web)
- les fichiers de fancybox

2) Structurer le dossier du projet

Une fois ces fichiers ramenés, on va les placer dans des dossiers aux noms sémantiques, pour facilement se repérer.
Je propose :
- un dossier css-js pour jquery, nootstrap, fancybox et nos propres scripts
- un dossier images pour les images
- un dossier includes pour les fichiers php à inclure
Les fichiers des diverses pages du site, en php, seront à la racine du site.

3) Contenu du dossier CSS-JS

Tout ce qui est javascript et css viendront dans ce dossier comme son nom l’indique. Soit :
- Le dossier de production de bootstrap, tel que téléchargé avec ses sous-dossiers css et js
- le dossier de fancybox. Attention, dans le dossier téléchargé, nous avons besoin uniquement du dossier "dist" que nous plaçons dans le dossier css-js et renommons "fancybox"
- Le dossier de fontawesome tel que téléchargé
- un dossier "font" dans lequel nous plaçons les fichiers woff, woff2 et le fichier stylesheet.css provenant du générateur de Fontsquirrel.
- le dernier fichier de jquery (ici la 3.4.1)
- un fichier "main.css" pour nos propres css
- un fichier "main.js" pour nos propres scripts

Ça donne ça :

Notre page de base : index.php

Comme évoqué, une page avec du code php DOIT avoir .php pour extension, et pas html. C’est ce qui permet au serveur de savoir qu’il va y trouver un code a exécuter.

Cette page index.php contient trois fonctions "include()", une fonction php qui comme son nom l’indique, inclus le code provenant d’un autre page.

<?php
include("includes/inc-header.php");
?>

Cette ligne de code va donc chercher dans le dossier "includes" un fichier "inc-header.php", et copie le code que le fichier contient à l’endroit même où la fonction est appelée.

La page index.php charge aussi deux autres pages, inc-pre-footer.php et inc-footer.php, suivant la même logique.

Pourquoi des fichiers inclus en php ?

Le fichier inc-header.php contient le début de la page, c’est à dire la balise head, et le début du body, jusqu’à la fin de la navigation.
Le fichier inc-footer.php contient la fin de la page : la balise footer puis la fermeture des tags body et html
Séparer ces deux parties de pages html a un but : pouvoir réemployer ces deux portions de page pour toute nouvelle page que nous allons créer dans le future ; On va ainsi écrire une seule fois ce code, et l’inclure dans chaque page.
Le but est d’économiser du temps d’écriture mais aussi et surtout, de réduire les sources d’erreur puisque que ce code est écrit une seule fois pour toutes les pages où il est inclus.

Allez, le code tout fait !

Pour ceux qui ont tout compris mais ne veulent pas faire le boulot de collecte et de codage du head, voici le dossier zippé de tout ceci :

Le dossier complet
Avec tous ses imports, et la typo Librebaskerville et Leaguespartan