Inclusion De Fichiers

Vous êtes ici : >> PHP / Inclusion De Fichiers
Temps d'étude : 1h. Niveau : Moyen.
Tags : Inclusion De Fichiers
Fichier(s) utile(s) pour ce cours : /

Les inclusions de fichiers

Php permet d'inclure un fichier dans un autre. Nous appelons cela des inclusions de fichiers et c'est très pratique dans le cadre d'un site web !

Pour tester le prochain exemple, je vous recommande de créer un fichier que l'on nommera : fichier.inc.php

Inscrivons le contenu suivant :

fichier.inc.php
	

Voici le texte du fichier qui se nomme fichier.php
Pour rappel, même si ce fichier à l'extension ".php". Nous ne sommes pas obligés d'écrire du code php à l'intérieur !


Le mot ".inc" n'est pas obligatoire mais par convention il indique que ce fichier n'est pas une page a part entière mais plutôt un fichier qui sera inclut dans une page web.

Ensuite reprenons notre fichier de cours entrainement.php.

Include

entrainement.php
	<?php
	echo 'Nous sommes dans le fichier entrainement
'; include("fichier.inc.php"); echo 'Nous sommes toujours dans le fichier entrainement
';
Nous venons d'inclure notre fichier fichier.php à l'intérieur de notre fichier principal entrainement.php

Résultat

Nous sommes dans le fichier entrainement

Voici le texte du fichier qui se nomme fichier.php
Pour rappel, même si ce fichier à l'extension ".php". Nous ne sommes pas obligés d'écrire du code php à l'intérieur !

Nous sommes toujours dans le fichier entrainement


Ce n'est pas plus compliqué, la fonction prédéfinie include attend comme argument un nom de fichier valide pour pouvoir l'inclure !

Avouez que ce n'est pas la partie la plus difficile :p

Include_once

entrainement.php
	<?php
	echo 'Nous sommes dans le fichier entrainement
'; include_once("fichier.inc.php"); echo 'Nous sommes toujours dans le fichier entrainement
';
Tout comme include, include_once permet d'inclure un fichier dans un autre.
Le "_once" permet de vérifier qu'il n'a pas déjà été inclue (il n'incluera pas 2 fois le même fichier).

Si le fichier n'a jamais été inclue, l'interpréteur l'inclue, sinon il ignore la ligne et ne l'inclue pas.

Require

entrainement.php
	<?php
	echo 'Nous sommes dans le fichier entrainement
'; require("fichier.inc.php"); echo 'Nous sommes toujours dans le fichier entrainement
';
Tout comme include, require permet d'inclure un fichier dans un autre.

Require_once

entrainement.php
	<?php
	echo 'Nous sommes dans le fichier entrainement
'; require_once("fichier.inc.php"); echo 'Nous sommes toujours dans le fichier entrainement
';
Tout comme require, require_once permet d'inclure un fichier dans un autre.
Le "_once" permet de vérifier qu'il n'a pas déjà été inclue (il n'incluera pas 2 fois le même fichier).

Différence entre Include, Include_once, Require, Require_once.

Include est plutôt traduit par "inclue moi ce fichier" et Require par "fichier requis".

La seule différence réside dans le cas d'une erreur (nom de fichier incorrect) :

  • Include fera une erreur et poursuivra l'exécution du code.

  • Require fera une erreur et stopera l'exécution du code.

  • _once est juste présent pour s'assurer que le fichier soit inclut une seule fois dans le code.

Inclusion et code Html

Voici l'affichage classique d'un site web statique html et css :

explication PHP

Voici l'aborescence classique d'un site web statique html et css :

mon_site
----- css
---------- style.css
----- js
----- img
----- index.html
----- acualites.html
----- contact.html

Voici le code classique d'une page web html et css :

index.html - actualites.html - contact.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<meta http-equiv="X-UA-Compatible" content="IE=edge">
			<title>Site Web</title>
			<meta name="viewport" content="=device-, initial-scale=1">
			<meta name="description" lang="fr" content="DESCRIPTION DU SITE">
			<meta name="author" content="AUTEUR">
			<meta name="robots" content="index, follow">

			
			<link rel="favicon-icon" href="img/favicon.png">
			<link rel="shortcut icon" href="img/favicon.ico">

			
			<link rel="stylesheet" href="css/style.css">
					
			
			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>	
		</head>
		<body>
			<header>
				<div class="container">
					<div class="header-logo">
						<h1 class="header-nom-site">Nom Du Site</h1>
					</div>
					<div class="header-slogan">
						<p>Le Slogan du Site</p>
					</div>
					<div class="header-droite">
						<span>Zone Haut Droite</span>
					</div>
					<div class="clear"></div>
				</div>
			</header>
			<nav>
				<div class="container">
					<ul>
						<li><a href="index.html">Accueil</a></li>
						<li><a href="actualites.html">Actualités</a></li>
						<li><a href="contact.html">Contact</a></li>
					</ul>
				</div>
			</nav>
			<section>
				<div class="container">
					<main>
						<h1>Accueil</h1>
						<hr>

						<!-- Titre et niveaux -->
						<h2>Titre niveau 2</h2>
						<p>Voici le texte de notre page d'accueil  Voici le texte de notre page d'accueil  Voici le texte de notre page d'accueil  Voici le texte de notre page d'accueil  Voici le texte de notre page d'accueil  Voici le texte de notre page d'accueil  Voici le texte de notre page d'accueil  Voici le texte de notre page d'accueil  Voici le texte de notre page d'accueil  Voici le texte de notre page d'accueil  Voici le texte de notre page d'accueil  Voici le texte de notre page d'accueil  Voici le texte de notre page d'accueil  Voici le texte de notre page d'accueil  Voici le texte de notre page d'accueil  </p>
						<hr>

						<!-- Image Responsive -->
						<h2>Titre 3</h2>
						<p><img class="img-responsive" src="http://placehold.it/750x250" alt="explication PHP"></p>
						<hr>
					</main>
					<aside>
						<h2>Colonne</h2>
						<p>Voici la colonne de droite pour la page d'accueil  Voici la colonne de droite pour la page d'accueil  Voici la colonne de droite pour la page d'accueil  Voici la colonne de droite pour la page d'accueil  Voici la colonne de droite pour la page d'accueil  Voici la colonne de droite pour la page d'accueil  Voici la colonne de droite pour la page d'accueil  Voici la colonne de droite pour la page d'accueil  Voici la colonne de droite pour la page d'accueil  Voici la colonne de droite pour la page d'accueil  Voici la colonne de droite pour la page d'accueil  Voici la colonne de droite pour la page d'accueil  Voici la colonne de droite pour la page d'accueil  Voici la colonne de droite pour la page d'accueil  Voici la colonne de droite pour la page d'accueil  </p>
					</aside>
					<div class="clear"></div>
				</div>
			</section>
			<footer>
				<div class="container">
					© Copyright 2016
				</div>
			</footer>
		</body>
	</html>
	

Cette structure de page peut être reprise pour composer les autres rubriques.

Vous pouvez donc copier/coller le code de la page index.html pour faire actualites.html et contact.html.
Seul le texte changera d'une page à l'autre.

Problématique : Si vous devez ajouter un logo sur votre site et que vous le faites sur la page index.html, cette modification ne sera pas repercutée sur les autres pages.
1 modification s'applique sur 1 seul fichier

Si on imagine que vous avez 20 pages html statiques, et que vous souhaitez ajouter un logo (ou toutes informations : changement du nom de la feuille de style, ajout d'un slogan, etc..) vous devrez effectuer 20 modifications (1 modification dans chaque page) ce qui risque d'être assez contraignant dans la mesure où on est au moins sur d'une chose : le header (haut de site) et le footer (bas de site) sont communs à toutes les pages. (Seul le contenu change).

Si le header et le footer sont communs à toutes les pages web, pourquoi ne pas en déclarer un seul qui sera appelé partout ?

Ceux d'entre vous qui ont déjà développé un site web statique en Html / Css comprendront aisément que l'objectif est de simplifier la maintenance et les mises à jour.

explication PHP

Inclure pour simplifier la maintenance

Voyons l'aborescence suivante :

mon_site
----- css
---------- style.css
----- js
----- img
----- inc
---------- haut.inc.php
---------- menu.inc.php
---------- bas.inc.php
----- index.php
----- actualites.php
----- contact.php

Nous venons de passer les fichiers .html en extension .php et nous avons également créé un dossier nommé "/inc/" avec plusieurs fichiers à l'intérieur qui vont nous permettre de découper notre site en différentes parties.

Les fichiers inc montrent (pour un développeur qui prendrait connaissance du projet en cours de route) qu'ils sont destinés à l'inclusion et ne sont pas des pages à part entière.

Découpons notre site web

Pour mieux le gérer, découpons notre site web :

explication PHP

La partie du haut : haut.inc.php :

haut.inc.php
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<meta http-equiv="X-UA-Compatible" content="IE=edge">
			<title>Site Web</title>
			<meta name="viewport" content="=device-, initial-scale=1">
			<meta name="description" lang="fr" content="DESCRIPTION DU SITE">
			<meta name="author" content="AUTEUR">
			<meta name="robots" content="index, follow">

			
			<link rel="favicon-icon" href="img/favicon.png">
			<link rel="shortcut icon" href="img/favicon.ico">

			
			<link rel="stylesheet" href="css/style.css">
					
			
			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>	
		</head>
		<body>
			<header>
				<div class="container">
					<div class="header-logo">
						<h1 class="header-nom-site">Nom Du Site</h1>
					</div>
					<div class="header-slogan">
						<p>Le Slogan du Site</p>
					</div>
					<div class="header-droite">
						<span>Zone Haut Droite</span>
					</div>
					<div class="clear"></div>
				</div>
			</header>

Comme vous pouvez le constater, nous gardons tout le code appartenant au haut du site.

Ce n'est pas grave si certaines balises tel que <body> <html> etc. ne sont pas fermées car nous n'avons pas terminé la découpe du site web.

La partie du menu de navigation : menu.inc.php :

menu.inc.php
		
Nous modifions le menu avec l'extension ".php" au lieu de ".html".

La partie du bas : bas.inc.php :

bas.inc.php
			
© Copyright 2016
</body> </html>
Les balises que nous avions ouvertes plus haut (comme <body> <html>) sont refermées ici dans ce fichier.

Il reste uniquement la partie du milieu (spécifique à chaque page web) pour chaque fichier :

La page d'Accueil : index.php

index.php
	<?php require_once('inc/haut.inc.php'); ?>
	<?php require_once('inc/menu.inc.php'); ?>
			<section>
				<div class="container">
					<main>
						<h1>Accueil</h1>
						<hr>

						<!-- Titre et niveaux -->
						<h2>Titre niveau 2</h2>
						<p>Voici le texte de notre page d'accueil  Voici le texte de notre page d'accueil  Voici le texte de notre page d'accueil  Voici le texte de notre page d'accueil  Voici le texte de notre page d'accueil  Voici le texte de notre page d'accueil  Voici le texte de notre page d'accueil  Voici le texte de notre page d'accueil  Voici le texte de notre page d'accueil  </p>
						<hr>

						<!-- Image Responsive -->
						<h2>Titre 3</h2>
						<p><img class="img-responsive" src="http://placehold.it/750x250" alt="explication PHP"></p>
						<hr>
					</main>
					<aside>
						<h2>Colonne</h2>
						<p>Voici la colonne de droite pour la page d'accueil  Voici la colonne de droite pour la page d'accueil  Voici la colonne de droite pour la page d'accueil  Voici la colonne de droite pour la page d'accueil  Voici la colonne de droite pour la page d'accueil  Voici la colonne de droite pour la page d'accueil  Voici la colonne de droite pour la page d'accueil  </p>
					</aside>
					<div class="clear"></div>
				</div>
			</section>
	<?php require_once('inc/bas.inc.php'); ?>	

La page d'actualités : acualites.php

actualites.php
	<?php require_once('inc/haut.inc.php'); ?>
	<?php require_once('inc/menu.inc.php'); ?>
			<section>
				<div class="container">
					<main>
						<h1>Actualités</h1>
						<hr>

						<!-- Titre et niveaux -->
						<h2>Titre niveau 2</h2>
						<p>Voici le texte de notre page d'actualités  Voici le texte de notre page d'actualités  Voici le texte de notre page d'actualités  Voici le texte de notre page d'actualités  Voici le texte de notre page d'actualités </p>
						<hr>

						<!-- Image Responsive -->
						<h2>Titre 3</h2>
						<p><img class="img-responsive" src="http://placehold.it/750x250" alt="explication PHP"></p>
						<hr>
					</main>
					<aside>
						<h2>Colonne</h2>
						<p>Voici la colonne de droite pour la page d'actualités   Voici la colonne de droite pour la page d'actualités   Voici la colonne de droite pour la page d'actualités   Voici la colonne de droite pour la page d'actualités   Voici la colonne de droite pour la page d'actualités   Voici la colonne de droite pour la page d'actualités   Voici la colonne de droite pour la page d'actualités  </p>
					</aside>
					<div class="clear"></div>
				</div>
			</section>
	<?php require_once('inc/bas.inc.php'); ?>	

La page de contact : contact.php

	<?php require_once('inc/haut.inc.php'); ?>
	<?php require_once('inc/menu.inc.php'); ?>
			<section>
				<div class="container">
					<main>
						<h1>Contact</h1>
						<hr>

						<!-- Titre et niveaux -->
						<h2>Titre niveau 2</h2>
						<p>Voici le texte pour nous contacter  Voici le texte pour nous contacter  Voici le texte pour nous contacter  Voici le texte pour nous contacter  Voici le texte pour nous contacter  Voici le texte pour nous contacter   </p>
						<hr>

						<!-- Image Responsive -->
						<h2>Titre 3</h2>
						<p><img class="img-responsive" src="http://placehold.it/750x250" alt="explication PHP"></p>
						<hr>
					</main>
					<aside>
						<h2>Colonne</h2>
						<p>Voici la colonne de droite pour la page de contact  Voici la colonne de droite pour la page de contact  Voici la colonne de droite pour la page de contact  Voici la colonne de droite pour la page de contact  Voici la colonne de droite pour la page de contact  Voici la colonne de droite pour la page de contact  Voici la colonne de droite pour la page de contact  </p>
					</aside>
					<div class="clear"></div>
				</div>
			</section>
	<?php require_once('inc/bas.inc.php'); ?>	

Dans les 3 cas il s'agit à peu près du même code (seul le texte change).

Le header (haut.inc.php), le menu (menu.inc.php) et le bas (bas.inc.php) restent les mêmes, ce qui est normal.

L'avantage avec le système d'inclusion en php, c'est que vous pourrez effectuer 1 seule modification (par exemple dans le fichier haut.inc.php pour l'ajout d'un logo) et cela sera repercuté et diffusé partout puisque ce fichier est inclut dans toutes les autres pages.

Reprenons notre problématique d'origine : si nous devions modifier le logo en haut de site, cela devait nécessiter autant de modifications que ce qu'il y avait de pages.

haut.inc.php
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<meta http-equiv="X-UA-Compatible" content="IE=edge">
			<title>Site Web</title>
			<meta name="viewport" content="=device-, initial-scale=1">
			<meta name="description" lang="fr" content="DESCRIPTION DU SITE">
			<meta name="author" content="AUTEUR">
			<meta name="robots" content="index, follow">

			
			<link rel="favicon-icon" href="img/favicon.png">
			<link rel="shortcut icon" href="img/favicon.ico">

			
			<link rel="stylesheet" href="css/style.css">
					
			
			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>	
		</head>
		<body>
			<header>
				<div class="container">
					<div class="header-logo">
						<img src="img/logo.png">
						<h1 class="header-nom-site">Nom Du Site</h1>
					</div>
					<div class="header-slogan">
						<p>Le Slogan du Site</p>
					</div>
					<div class="header-droite">
						<span>Zone Haut Droite</span>
					</div>
					<div class="clear"></div>
				</div>
			</header>

Nous pouvons nous permettre d'ajouter une seule ligne qui sera diffusée dans tous les hauts de pages.
Faites le test ! (pour ça vous aurez besoin d'une image nommée logo.png présente dans votre dossier img)

En conclusion pour un site composé de 20 fichiers sous forme de page web :

Site statique html (sans php) : 20 modifications = 20 fichiers.

Site statique html (avec php) : 1 modification = 20 fichiers.

Le chiffre 20 est pris à titre d'exemple, cela dépend du site web

Les inclusions c'est quand même pratique, ça simplifie grandement la maintenance, ça repartit mieux l'organisation et ça permet d'économiser du code ! :smiley:

De nombreux sites utilisent les fonctions include/require et grâce à ces fonctions, les systèmes de fichiers appelés « Template » ont fait leur apparition.

Les framework et cms incluent des fichiers et utilisent cette technique.