Dans ce tutoriel, nous verrons comment créer un site simple en PHP en utilisant require_once.
L'arborescence
Créer un dossier à la racine de votre serveur web. Nous rangerons les fichiers dans ce dossier. Pensez à vérifier que le dossier est accéssible via votre navigateur : http://localhost/dossier-cree
Dans ce dossier vous allez créer pour le moment un dossier themes/default et un dossier frags. Dans le dossier /frag, créez un fichier header.php et un fichier footer.php. Ensuite créez un fichier main.css dans le dossier themes/default, et enfin un fichier index.php à la racine du projet.
Les fichiers header.php et footer.php contiendront pour le moment du simple code HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Mon site web</title> <link type="text/css" rel="stylesheet" href="themes/default/main.css" /> <meta name="keywords" content="Mon super site web" /> <meta name="description" content="Mon premier site web avec du PHP" /> </head> <body> <div id="container"> <div id="header"> <h1>Mon site web</h1> <h2>Slogan</h2> </div> <div id="menu"> <ul> <li><a href="index.php">Accueil</a></li> </ul> </div> <div id="content">
Pour le fichier footer, vous devez simplement refermer les balises ouvertes dans le header :
</div><!-- Fin de la div "content" -->
<div id="footer">
<p>Mon super site web © 2010</p>
</div>
</div><!-- Fin de la div "container" -->
</body>
</html>
Histoire d'y voir un peu plus clair vous pouvez éditer la CSS selon vos goûts, si vous êtes pressez voilà une petite CSS pour dégrossir :
/** /themes/default/main.css **/
@CHARSET "UTF-8";
body {
background: #555;
font-size: 80%;
font-family: Helvetica, Arial, sans-serif
}
#container {
width: 1000px;
margin: 0 auto;
background: #fff;
}
#header {
height: 150px;
background: #7ba5c8;
}
#header * {
color: #fff;
}
#menu {
background: #333;
color: #fff;
}
#menu * {
margin: 0;
padding: 0;
display: inline;
color: #fff;
}
#footer {
height: 100px;
background: #333;
color: #fff;
text-align: center;
font-size: 0.8em;
}
Inclure des fichiers avec PHP
Nous allons maintenant compléter le fichier index.php, il contiendra 2 instructions PHP pour inclure le header et footer, et un peu de contenu à afficher.
<?php // On inclue l'entête HTML require 'frags/header.php'; ?> <h1>Page d'accueil</h1> <p>Bienvenu sur mon site</p> <?php // On inclue le pied de page require 'frags/footer.php'; ?>
Comme vous pouvez le voir, l'instruction pour inclure des fichiers est relativement simple à comprendre, elle se compose du nom de l'instruction require suivi par l'adresse du fichier à inclure.
Attention, Vous devez renseigner un chemin relatif au fichier PHP qui inclue, dans notre cas, le chemin à renseigné est relatif au fichier index.php qui se trouve à la racine de notre projet.
Si le principe est compris, créez 4 autres fichiers au même niveau que le fichier index.php. Nommez les compagnie.php, produits.php, galeries.php et contact.php. Reprennez le code de la page d'index en adaptant le contenu XHTML.
Puis éditez le fichier header.php en mettant à jour le menu pour intégrer les nouvelles rubriques, le code du menu devrait ressembler à ça :
<div id="menu">
<ul>
<li><a href="index.php" title="Actualités de l'entreprise">Accueil</a></li>
<li><a href="compagnie.php" title="Présentation de l'entreprise">Compagnie</a></li>
<li><a href="produits.php" title="Nos produits">Produits</a></li>
<li><a href="galerie.php" title="Notre entreprise en image">Galerie</a></li>
<li><a href="contact.php" title="Nous contacter">Contact</a></li>
</ul>
</div>
Vous avez maintenant un site fonctionnel dans lequel il est très facile d'ajouter des rubriques / pages. En centralisant l'en-tête et le pied de page, la maintenance est grandement simplifiée et les fichiers de contenu sont également beaucoup plus facile à gérer du fait qu'on y trouve que le contenu de la rubrique.
Cependant, la méthode a ces limites, pour l'instant, quand nous passons d'une rubrique à une autre, le titre de la page reste le même, nous n'avons pas moyen de charger d'autres feuilles de style en complément. Nos fichiers communs sont pratiques mais il nous faudrait un moyen pour modifier des informations dedans en fonction de la rubrique où nous sommes... Ca va être l'entrée en scène des variables !
Variables
Pour résoudre notre problème (faire varier certaines données), nous allons utiliser des variables. Une variable, c'est une information utilisé par PHP que nous pouvons modifier et afficher. Nous pouvons également tester ces variables et agir en fonction de leur valeur.
Déclarer une variable et l'afficher
La déclaration de variable est une instruction PHP (donc elle doit être située à l'interieur des tags PHP <?php ?>), Elle se compose du nom de la variable précédé du caractère $, suivit d'un opérateur d'affectation =, puis de la valeur de cette variable, et du point virgule qui clos l'instruction :
Nous allons déclarer une variable pour stoquer le titre de la page dans la page d'accueil :
<?php // Déclaration de la variable titre $titre = 'Mon super site : Accueil et actualités'; // On inclue l'entête HTML require 'frags/header.php'; ?>
La variable $titre que nous venons de déclarer contiens du texte, elle est entourée de guillemets simples. Ce type de valeur est appelé une chaine de caractère (String en anglais). Les chaines de caractères servent principalement à afficher du texte/code HTML, elle servent dans d'autres cas de figure (récupération de donnée d'un formulaire, chemin de fichier, etc...).
Nous verrons par la suite 2 autres types de valeur, les valeurs numériques (Number) qui permettent de faire des calculs, et les Booléens qui servent à faire des tests (vrai / faux). Mais revenons à notre site, et affichons notre variable $titre dans l'entête.
Afficher une variable
Editez le fichier header.php, et placer du code PHP dans la balise <title>, ce code va simplement afficher le contenu de $titre avec la fonction echo que nous avons déjà vu :
<title><?php echo $titre; ?></title>
Si vous êtes curieux, vous êtes probablement allé jeter un oeil sur les autres rubriques... Catastrophe, dans le "meilleur" des cas votre titre est vide, sinon vous devriez avoir un message d'erreur qui ressemble à ça :
Notice: Undefined variable: titre in /home/stephane/www/exemples/php/premier-site/frags/header.php on line 13
Afficher les erreurs de variables
Si vous ne voyez pas un message de ce type, c'est un problème car en tant que développeur PHP, cette information vous interesse. Cela viens d'un réglage de PHP, l'idée c'est de demander à PHP d'afficher les errors / warnings / notice. Nous reviendrons sur une gestion des erreurs plus intéligente après, pour l'instant, allez dans l'installation de votre serveur web local, trouvez le fichier de configuration PHP (php.ini), et éditer la ligne display_errors, la valeur doit être sur On. Puis chercher la ligne error_reporting, elle doit valoir E_ALL | E_STRICT (valeur par defaut en mode développement).
Ces modifications vont avoir pour effet d'afficher toutes les erreurs et de préciser d'éventuelle raison de cette erreur.
Dans notre cas, PHP nous notifie (notice) que la variables $titre n'existe pas. Pour corriger ça, éditer les fichiers de chaques rubriques en déclarant une variable $titre avant d'inclure le fichier header.php.
Modifier une variable
Nous allons maintenant "variabiliser" le chemin de notre feuille de style CSS pour nous permettre de changer de feuille de style d'une rubrique à l'autre, mais cette fois, nous partirons du principe que toute les rubriques ont la même feuille de style main.css et que seul la page d'accueil a une feuille de style différente. Pour cela nous allons devoir déclarer une variable $css par defaut avec le chemin de main, et de changer cette valeur dans la page d'accueil...
Vous allez créer un nouveau fichier PHP dans le dossier frags/, init.php. Ce fichier va nous servire à initialiser les variables avec des valeurs par defaut. Ensuite il nous suffira d'inclure ce fichier dans nos rubriques. Voici le contenu du fichier init.php :
<?php // Titre du site par defaut $titre = 'Mon super site web'; // fichier CSS par defaut $css = 'themes/default/main.css'; ?>
Aucun changement, la déclaration de variable est toujours la même. Ensuite nous devons inclure le fichier init.php dans chaque rubriques, dans la page d'accueil par exemple :
// Initialisation du site require 'frags/init.php
Cette instruction doit être la première instruction des rubriques. Nous allons maintenant éditer le fichier header.php pour passer le chemin de la CSS en variable :
<link type="text/css" rel="stylesheet" href="<?php echo $css; ?>" />
Pour l'instant aucun changement. créer un fichier CSS /themes/default/accueil.css avec ce contenu :
@CHARSET "UTF-8";
@import url('main.css');
#header {
background: #FF6600;
}
h1, h2, h3, h4, h5, h6, strong {
color: #FF6600;
}
Nous allons maintenant modifier le fichier index.php pour modifier la variable $css afin de charger la feuille de style de l'accueil. En fait, la syntaxte pour modifier une variables est exactement la même que la syntaxe pour la modifier, modifier donc la valeur de $css (après l'inclusion de init.php) et admirez le résultat.
Votre fichier index.php doit ressembler à ça :
<?php // Initialisation du site require 'frags/init.php'; // Déclaration de la variable $title $titre = 'Mon super site : Accueil et actualités'; // CSS à attacher $css = 'themes/default/accueil.css'; // On inclue l'entête HTML require 'frags/header.php'; ?> <!-- Corps de la page d'accueil --> <h1>Page d'accueil</h1> <p>Bienvenu sur mon site</p> <?php // On inclue le pied de page require 'frags/footer.php'; ?>
Si vous avez compris le principe, vous allez maintenant variabiliser le texte du bandeau ainsi que les valeurs des metas. Pensez à déclarer les variables dans le fichier init.php, puis de les modifier dans les rubriques si besoin.
Infos
Dans ce tutoriel, nous verrons comment créer un site simple en PHP
- Niveau : Débutant
- Catégorie : PHP
- Publié le : 16 novembre 2010
- Dernière Mise à jour : 28 juillet 2011
- Notions abordées :
Commentaires
par Claude
le 12 mars 2011 à 12:07:28
Bonjour,
Je suis un gros débutant en PHP. Je suis très administratif sur la simplicité de votre tuto et des résultats produits par le code lors de mon petit test en local.
Je veux créer un site web.
Pourriez-vous m'envoyer tout les 2 parties en code archive pour ma comparaison et voir si j'ai bien compris votre méthode.
par Jean
le 26 juillet 2011 à 21:31:16
Bonsoir,
J'ai suivi le tuto :
- structure du site en HTML : ok;
- CSS : ok;
- menu : ok;
- changement du titre de page : égaré!
A part <title><?php echo $titre; ?></title> pour chaque page 'rubrique', pour le reste du code, à quel endroit de la page index ou de la page rubrique il faut insérer le code? Cela ne fonctionne pas, mais je n'arrive pas à savoir si je n'ai pas mis les codes au bon endroit ou les liens sont rompus?!
Merci de donner le code complet de la page index et d'une page rubrique pour comparer...
Merci pour le tuto!
par Jacksay
site : http://studio.jacksay.com
le 07 août 2011 à 09:31:16
Pour le changement de titre, l'affichage se produit dans le fichier header.php. C'est dans ce fichier que tu va placer le code <title><?php echo $titre; ?></title>
Comme dans ce fichier tu fait un echo $titre pour afficher le titre, il faut au préalable déclarer une variable $title avant de faire le require du header.php (voir dernier exemple de code du tuto).
Cordialement
PS : Je ne sais pas si j'ai été très clair pour le coup
par mohamed
site : https://www.facebook.com/profile.php?id=100001121494383
le 23 octobre 2011 à 20:27:27
Merci bc , ça c ke je suis en train de chercher!!! je veut te consulte si je trouve des diffcultées! :)
par Jacksay
site : http://studio.jacksay.com
le 16 mars 2011 à 10:53:14
Bonjour,
Malheureusement, je n'ai pas gardé d'archive pour ce tutoriel. Si je tombe par hasard dessus sur mon ancien disque-dur j'ajouterai un lien à la fin de l'article.