Apprendre
comment créer un site Web pour les débutants

Gamme cours gratuit en HTML XHTML CSS et PHP
Accueil | | Partenaires | Logiciels et antivirus | Jeux et concours | Livres | Notre Annuaire

Annuaire Webmaster

Les includes

La fonction include est très puissante. Elle est très simple d'emploi et fréquemment utilisée. Elle permet d'inclure le contenu d'une page PHP dans une autre page PHP. Ce qui est très utile.



 

 Supposons que sur votre site web ait un menu à gauche. Ce menu est affiché sur toutes les pages de votre site.
En HTML il faut  copier-coller ce menu dans toutes les pages, et pour modifier le menu il fallait modifier 
toutes les pages.
En PHP vous créez une page menu.php qui ne contient que le menu si vous voulez.
Include dit à PHP insert le contenu de la page menu.php sur chacune de vos pages. PHP va le mettre là où vous 
lui avez dit.
Et donc, si vous voulez modifier votre menu, vous modifiez juste menu.php et toutes les pages de votre site web
 seront  automatiquement mises à jour. C'est génial.

Code PHP :
<?php
include("menu.php");
?>
 Un exercice pratique :

Nous allons créer un site avec PHP.
Dans notre site nous allons avoir des pages PHP qui contiennent toutes :
-Un entête avec le titre du site.
-un menu placé à gauche.
-un corps avec le contenu de notre site pour chaque page.
-un pied de page.

En HTML tout ça se trouve entre <body> et </body>  i vous ne savez pas faire ça je vous invite
à voir le cours en html ICI
Le code est le suivant :
Code html :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<title> titre du site </title>	
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
	<link rel="stylesheet" media="screen" 	type="text/css"title="style"href="style.css"/>
</head>
<body>
	<div id="entete"> <!-- entête de la page -->
		<h1>titre du site</h1>	
	</div>
	<div id="menu"><!--menu -->
		<div class="element_menu">
			<a href="page1.html">Menu 1</a><br/>
		</div>
		<div class="element_menu">
			<a href="page2.html">Menu 2</a><br/>
		</div>
		<div class="element_menu">
			<a href="page3.html">Menu 3</a><br/>
		</div>
	</div>
	<div id="corps"> <!-- corps de la page -->
		<h2>titre de la page</h2>
		<p> contenu de la page, contenu de la page, contenu de la page,
			contenu de la page, contenu de la page, contenu de la page,
		</p>
	</div>
	<div id="bas"> <!-- pied de la page -->
		<p> contenue du pied dela page </p>	
	</div>
</body>
</html>


Le code css qui va avec :


body
{
   width:770px;
   margin:auto; /* Pour centrer notre page */
   margin-top:20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur.  */
   margin-bottom:20px;    /* aussi pour le bas du navigateur */
   background-color: #CCCCCC; /* Un fond pour éviter d'avoir un fond blanc  */
   color:#000000;
}

#entete /*entête*/
{
   width:770px;
   height:100px;
   margin-bottom: 10px;
   border: 1px solid black;
   background-color:#333399;
   color: #FFFFFF;
  
}

/* Le corps de la page */

#corps /*corps*/
{
   margin-left: 154px;
   margin-bottom: 5px;
   padding: 10px;
   margin-right: 1px;
   color: #FFFFFF;
   background-color: #524222;
   border: 1px solid #FFFFFF;
}
#menu /*menu*/
{
   width:140px; /* Il est important de donner une taille au menu */
    border: 1px solid #FFFFFF;
	margin-top: 0px;
	float:left; /* Le menu flottera à gauche vous pouvez mettre float:right   */
	padding: 5px;
}
#bas /*pied de page*/
{
   height:80px;
   padding: 5px;
   margin-bottom: 5px;
   margin-top: 5px;
   text-align: center;
   color: #B3B3B3;
   background-color: #525262;
   border: 1px solid #FFFFFF;
}
.element_menu
{
   color: #00FFFF;
   border: 2px solid black;
   margin-bottom: 5px; /* Pour éviter que les éléments du menu ne soient trop collés */
}
h1
{
text-align: center;
color: #00CCFF
}
h2
{
text-align: center;
color: #FF00FF
}


Exécutez ce code 

Maintenant nous allons reprendre ce code mais en PHP.
En effet il existe deux méthodes  pour le faire chaque une avec ses avantages et inconvénients.

La première méthode a l’avantage d’assurer une meilleur sécurité contre le hacker. Son inconvénient est 
d’être moins pro, surtout si on veut changer toute l’apparence du site, mais moi je croix qu’on utilisant 
les feuilles de style ce problème devient minime.
Dans cette méthode nous découpons le code html précédent en trois parties et donc créer trois pages PHP 
comme suit :

Code page « haut.php » :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<title> titre du site </title>	
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
	<link rel="stylesheet" media="screen" 	type="text/css"title="style"href="style.css"/>
</head>
<body>
	<div id="entete"> <!-- entête de la page -->
		<h1>titre du site</h1>	
	</div>
	<div id="menu"><!--menu -->
		<div class="element_menu">
			<a href="page1.php">Menu 1</a><br/>
		</div>
		<div class="element_menu">
			<a href="page2.phpl">Menu 2</a><br/>
		</div>
		<div class="element_menu">
			<a href="page3.php">Menu 3</a><br/>
		</div>
	</div>


Code page «pied.php » :


<div id="bas"> <!-- pied de la page -->
		<p> contenue du pied de la page </p>	
	</div>
</body>
</html>


et en fin code de la page « corps.php » :


<?php include("haut.php"); ?>

<div id="corps"> <!-- corps de la page -->
		<h2>titre de la page</h2>
		<p> 	Contenu de la page, contenu de la page, contenu de la page.
			Contenu de la page, contenu de la page, contenu de la page.
		</p>
</div>
<?php include("pied.php"); ?>


Vous pouvez nommer vos pages comme vous voulez pas nécessairement haut pied  corps.
La deuxième méthode , a comme avantage la possibilité de changer toute l’apparence du site en un coup.
 Mais elle a le grand problème de la sécurité et il faut faire très attention à votre code, si non votre 
 site sera très vulnérable au hack.
Le fonctionnement est l’inverse de la première méthode, c'est-à-dire qu’au lieu d’inclure l’entête et le 
pied de page. On crée une page qui contient tout sauf le corps et sure cette page on incluse le corps.
Le code est le suivant :
Page entière sans le corps que je nomme « page.php ».
Code PHP


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<title> titre du site </title>	
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
	<link rel="stylesheet" media="screen" 	type="text/css"title="style"href="style.css"/>
</head>
<body>
	<div id="entete"> <!-- entête de la page -->
		<h1>titre du site</h1>	
	</div>
	<div id="menu"><!--menu -->
		<div class="element_menu">
			<a href="page1.php">Menu 1</a><br/>
		</div>
		<div class="element_menu">
			<a href="page2.php">Menu 2</a><br/>
		</div>
		<div class="element_menu">
			<a href="page3.php">Menu 3</a><br/>
		</div>
	</div>

	<?php include("corps.php"); ?>


	<div id="bas"> <!-- pied de la page -->
		<p> contenue du pied dela page </p>	
	</div>
</body>
</html>


Comme vos le constatez cette page contient tout l’entête, le menu, etc. …
Et on crée la page « corps.php » comme ceci.
Code PHP :


<div id="corps"> <!-- corps de la page -->
		<h2>titre de la page</h2>
		<p> Contenu de la page, contenu de la page, contenu de la page.
			Contenu de la page, contenu de la page, contenu de la page.
		</p>
</div>


la page « corps.php » peut être tout ce que vous voulez ( un texte, un forum, un livre d’or etc… ).
 En réalité le vrai code est un peu différent.
On  va mettre une variable qui s’occupe de récupérer l’url de la page à inclure selon la demande du visiteur.
Le code est le suivant :

Code PHP


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<title> titre du site </title>	
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
	<link rel="stylesheet" media="screen" 	type="text/css"title="style"href="style.css"/>
</head>
<body>
	<div id="entete"> <!-- entête de la page -->
		<h1>titre du site</h1>	
	</div>
	<div id="menu"><!--menu -->
		<div class="element_menu">
			<a href="page1.php">Menu 1</a><br/>
		</div>
		<div class="element_menu">
			<a href="page2.php">Menu 2</a><br/>
		</div>
		<div class="element_menu">
			<a href="page3.php">Menu 3</a><br/>
		</div>
	</div>

	<?php
    $page = $_GET['page'];
    include("$page.php");
    ?> 

	<div id="bas"> <!-- pied de la page -->
		<p> contenue du pied dela page </p>	
	</div>
</body>
</html>


Si le visiteur clique sur le menu par exemple news sur votre page index alors  l’url contient
 index.php?page=news et donc on inclura la page « news.php ».
Et si un hacker change votre url il peut facilement changer le contenu de votre page et de là récupérer
 toutes les données de votre site s’il le veut.

Il existe des solutions à ce problème de sécurité voilà une.
On utilise la boucle if :

Code PHP :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<title> titre du site </title>	
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
	<link rel="stylesheet" media="screen" 	type="text/css"title="style"href="style.css"/>
</head>
<body>
	<div id="entete"> <!-- entête de la page -->
		<h1>titre du site</h1>	
	</div>
	<div id="menu"><!--menu -->
		<div class="element_menu">
			<a href="page1.php">Menu 1</a><br/>
		</div>
		<div class="element_menu">
			<a href="page2.php">Menu 2</a><br/>
		</div>
		<div class="element_menu">
			<a href="page3.php">Menu 3</a><br/>
		</div>
	</div>

	<?php
    if ($_GET['page'] == "menu1")
    {
        include("menu1.php");
    }
    
    if ($_GET['page'] == "menue2")
    {
        include("menu2.php");
    }
    
    if ($_GET['page'] == "menu3")
    {
        include("menu3.php");
    }
    
    ?>


	<div id="bas"> <!-- pied de la page -->
		<p> contenue du pied dela page </p>	
	</div>
</body>
</html>


	<div id="bas"> <!-- pied de la page -->
		<p> contenue du pied dela page </p>	
	</div>
</body>
</html>


Là si un hacker tente de changer l'url, aucun des if ne sera valable donc rien ne sera inclus.
Retourner au haut de la page..haut de page… 
Précèdent…...Précèdent...  			Vous êtes ici:les includes			Voir la suite…suivant…


Vous pouvez copier, modifier des copies de cette page, tant que cette note apparaît clairement
Vous devez citer le nom de l'auteur original et faire un lien hypertexte vers http://apprendre.uuuq.com