Créer un site rapidement avec l’URL-rewriting et php

Comment créer rapidement un site internet qui soit simple à modifier et entrenir en utilisant l’URL-rewriting et le php.La création d’un site internet contenant plusieurs page peut devenir compliqué si on débute ou tout simplement que l’on manque d’organisation.

Plusieurs points sont à prendre compte lorsque que l’on met un site en ligne pour que celui-ci soit diffuser largement et simple à visiter. On se rends parfois compte qu’il manque un élément sur chaque page, on se retrouve donc à devoir modifier toutes les pages de son site, cela peut être très long en fonction du nombre de page et surtout peut être source d’erreur.

Avant de poursuivre, assurez-vous d’avoir un serveur web et compris l’url-rewriting.

Architecture MVC et organisation

Nous allons commencer à parler de l’architecture de votre site (côté développeur). En général, lorsque que l’on débute (en tant que webmaster amateur), on a tendance à mettre tous les fichiers composants son site dans le dossier puis au bout de plusieurs heures de travail, on se rend compte que notre dossier est plein de fichiers aux noms plus ou moins ressemblants mais surtout qui ne sont plus assez parlant. Dans le cas d’un site dynamique nécessitant une base de données, on va rajouter dans ces fichiers, du code pour la connexion, la récupération ou modification d’une base de données.

C’est ici qu’intervient l’architecture MVC (pour modèle, vue, controleur), cette architecture va permettre de différencier nos fichiers dans trois catégories :

Architecture mvc
Architecture mvc

La vue

La vue va correspondre à ce qui doit être affiché sur l’écran de l’internaute

Le contrôleur

Le contrôleur permettra de traiter les données de l’utilisateur (volontaires ou pas).

Le modèle

Le modèle contiendra les données à afficher, surtout dans le cas d’un site dynamique avec une base de données)

Mon organisation (ce n’est qu’une organisation qui me correspond)

C’est difficile de bien différencier les 3, avec l’expérience, cet architecture vous semblera la plus logique

Pour notre site, dans notre dossier web, il y aura donc :

  • un fichier index.php (oui j’ai mis php pour plus tard)
  • un dossier vue
  • un dossier modele
  • un dossier controleur

Nous allons rajouter à ces 3 dossiers :

  • un dossier media, qui contiendra les images par exemple
  • un dossier admin, qui contiendra les éléments qui sont utile exclusivement au webmaster (pour ma part, dans ce dossier, je refais une arborescence MCV même si souvent le dossier admin/vue reste vide)

Le fichier index.php

Nous allons voir ce fichier, il s’agît du fichier par défaut de votre site, il sera souvent vu en premier par votre visiteur, il devra donc être bien réaliser et disposer des liens vers les autres pages de votre site.

Dans mon cas, il s’agira du fichier qui va contenir la trame de tout mon site, il contiendra donc toutes les choses communes au site :

  • le type de document
  • l’entête de la page
  • le pied de page
  • des zones communes pour afficher du contenu qui peut être différent

Voici un exemple d’un fichier index.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" lang="fr-fr" prefix="og: http://ogp.me/ns#">
<head>
     <title></title>
     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
     <meta name="keywords" lang="fr" content="" />
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width,minimum-scale=1">
     <link rel="icon" type="image/png" href="" />
     <!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="" /><![endif]-->
     <link rel="apple-touch-icon" href="" />
     <link rel="canonical" href="" />
     <link rel="stylesheet" type="text/css" href="" />
</head>
<body>
     <header>
     </header>

     <footer>
     </footer>
</body>
</html>

Voilà notre base, on aurait pu mettre les balises meta link dans un autre fichier, mais ces balises me paraissent les principales pour un bon référencement, notez qu’il n’y a qu’un lien pour la feuille de style, il est conseillé d’en avoir plusieurs pour avoir un site qui s’adapte facilement à l’écran de l’utilisateur.

Entre les balises header, il y aura notre menu (ou au moins la partie supérieure de notre site) et entre les balises footer, notre pied de page.

C’est bien tout ça mais comment à partir d’une page, je peux afficher plusieurs pages.

PHP et include

Pour gérer l’affichage des pages, nous allons utiliser un peu de php, principalement deux choses :

Prenons l’exemple d’un site dont l’url est : http://www.mon-domaine.fr/, si vous saisissez cette adresse dans votre navigateur, vous tomberai sur le fichier index.php. Afin de modifier la page, on va y inclure une variable page qui prendra comme valeur, le nom des différentes pages de votre site, par exemple :

  • news => http://www.mon-domaine.fr/?page=news
  • faq => http://www.mon-domaine.fr/?page=faq
  • boutique => http://www.mon-domaine.fr/?page=boutique
  • article => http://www.mon-domaine.fr/?page=article&titre= »un_titre »
  • etc …

On va créer deux fichiers, le premier menu.php et le second footer.php, les deux dans le dossier vue.

menu.php :

<nav>
     <ul>
          <li>News</li>
          <li>Boutique</li>
          <li>Article</li>
     </ul>
</nav>

footer.php :

<ul>
     <li>FAQ</li>
</ul>

Mais ce ne sont pas des liens ? patience

Maintenant, on va gérer (contrôler) la page à afficher, nous allons commencer par inclure :

<body>
     <header>
     include($_SERVER['DOCUMENT_ROOT'].'/controleur/menu.php');
     </header>
     <?php
     include($_SERVER['DOCUMENT_ROOT'].'/controleur/affichage_page.php');
     ?>
     <footer>
     include($_SERVER['DOCUMENT_ROOT'].'/controleur/footer.php');
     </footer>
</body>

$_SERVER[‘DOCUMENT_ROOT’] va permettre de donner le bon chemin à notre fichier affichage_page.php.

Puis dans le dossier controleur, créer le fichier affichage_post.php qui contiendra :

<?php
//on peut insérer ici un contrôle sur la variable page
if(isset($_GET['page']) AND preg_match("#[\w\d_-]+#",$_GET['page'])){
	switch($_GET['page']){
		case "news":
			include($_SERVER['DOCUMENT_ROOT']."/vue/news.php");
			break;
		case "faq":
			include($_SERVER['DOCUMENT_ROOT']."/vue/faq.php");
			break;
	        case "boutique":
			include($_SERVER['DOCUMENT_ROOT']."/vue/boutique.php");
			break;
                case "article":
                        include($_SERVER['DOCUMENT_ROOT']."/vue/article.php");
                        break;
		default:
			include($_SERVER['DOCUMENT_ROOT']."/vue/inconnu.php");
			break;
	}
}else{
     include($_SERVER['DOCUMENT_ROOT']."/vue/accueil.php");
}
?>

Petites explications, si il n’y a pas de variable page  dans l’url, on affiche accueil.php, si il y a une variable page et quel ne contient que des lettres, des chiffres et le ‘-‘ et ‘_’, en fonction de sa valeur on affiche la page correspondant à la variable page sinon on affiche la page inconnu.php.

Vous devez donc créer autant de fichier dans le dossier vue qu’il y a de page. Par exemple, pour le fichier faq.php :

<section id="faq">
     <div class="question">Mais pourquoi ce tuto</div>
     <div class="reponse">Tout le monde doit bien débuter</div>
</section>

Mais dans le cas où page=article et on a pas parler du dossier modele? Ben vous avez juste une variable en plus que l’on va justement utiliser grâce à un fichier qui sera dans modele

Dans le fichier vue/article.php :

<?php
include($_SERVER['DOCUMENT_ROOT']."/controleur/article.php");
?>

Créons dans le dossier controleur, un fichier article.php qui contiendra :

<?php
if(isset($_GET['titre']) AND preg_match('#[\w\d_-]+#',$_GET['titre'])){
     include($_SERVER['DOCUMENT_ROOT']."/modele/article.php");
     $article_a_afficher = affichage_article($_GET['titre']);
     if($article_a_afficher == NULL){
          header('Location: /inconnu.php');
          exit;
     }
}elseif(!isset($_GET['titre'])){
     include($_SERVER['DOCUMENT_ROOT']."/modele/article.php");
     $liste_article = lister_article();
}else{
     header('Location: /inconnu.php');
     exit;
}
?>

Si la variable titre  est présente et quel ne contient que des chiffres, des lettre, ‘-‘ et ‘_’, on inclut le fichier modele/article.php puis on execute la fonction affichage_article  en passant la variable titre , et on récupère le résultat dans la variable $article_a_afficher . Si il n’y a pas de variable titre , on récupère tous les titres d’articles (par exemple) On redirige vers la page inconnue du site si le preg_match n’est pas bon, si la variable titre n’est pas présente ou si rien n’est retourné par la fonction (titre non trouvé dans la base).

Maintenant, nous allons interagir avec la base de données qui contient les articles grâce à la fonction dans le fichier modele/article.php :

<?php
include($_SERVER['DOCUMENT_ROOT']."/admin/modele/connexion_db");
function affichage_article($titre){
     $pdo = connexion_ma_base();
     /* ma requête
     qui recupère mon article
     */
     $pdo = null;
     return $resultat;
}
function lister_article(){
     $pdo = connexion_ma_base();
     /* ma requête
     qui recupère la liste des articles
     */
     $pdo = null;
     return $resultat;
}
?>

Dans un premier, on inclut le fichier qui contient la fonction pour se connecter à la base (voir ici), puis on fait notre requête, on ferme la connexion à la base et on retourne le résultat.

Pour finir avec cet exemple, retour à notre fichier vue/article.php :

<?php
include($_SERVER['DOCUMENT_ROOT']."/controleur/article.php");
?>
<?php if(isset($_GET['titre'])){?>
<h1><?= $article_a_afficher['titre'];?></h1>
<div id="contenu">
<?= $article_a_afficher['contenu'];?>
</div>
<?php }else{
     foreach($liste_article AS $article){
?>
          <a href="/article/<?= $article['titre'];?>" title="<?= $article['titre'];?>"><?= $article['titre'];?></a>
<?php
     }
}?>

Si la variable titre est rempli, on affiche notre article qui est dans notre table sinon on affiche une liste de lien vers les articles, je suppose qu’il y a une colonne titre et une colonne contenu.

L’URL-rewriting

Tu nous a parlé d’URL-rewriting, j’en vois pas là

Maintenant, l’url-rewriting, je pars sur le principe que vous avez le mode de réécriture d’url d’activer sur votre serveur.

Actuellement, les adresses du site ne sont pas très belles, on va les modifier légèrement, http://www.mon-domaine.fr/?page=boutique va devenir http://www.mon-domaine.fr/boutique/ et http://www.mon-domaine.fr/?page=article&titre=mon_titre va devenir http://www.mon-domaine.fr/article/mon_titre

Créons, à la base de notre site (au même niveau que le fichier index.php), un fichier .htaccess (le point devant est important, il s’agit d’un fichier sans nom avec pour extension htaccess), y écrire :

RewriteEngine On
RewriteCond %{HTTP_HOST} ^mon_domaine.fr$
RewriteRule ^(.*) http://www.mon_domaine.fr/$1  [QSA,L,R=301]
RewriteRule ^(article)/([\w\d_-]+)/?$ /?page=$1&titre=$2 [L]
RewriteRule ^([a-z_-]+)/?$ /?page=$1 [L]

Petites explications, dans un premier temps, on active le mode de réécriture d’url (ligne 1), sur la ligne 2 et 3, si l’adresse commence par mon_domaine.fr, on redirige tout vers www.mon_domaine.fr (pour éviter de dupliquer du contenu pour le référencement) et enfin les dernières lignes permettent de transformer pour le serveur, l’adresse saisie par une adresse qu’il comprend. Nous jouons avec les REGEX pour bien définir les pages.

Pour finir, on retourne sur le fichier vue/menu.php :

<nav>
     <ul>
          <li><a href="/news" title="titre pour le lien">News</a></li>
          <li><a href="/boutique" title="titre pour le lien">Boutique</a></li>
          <li><a href="/article" title="titre pour le lien">Article</a></li>
     </ul>
</nav>

Voilà, faire pareil pour le footer, et voici, comment mettre rapidement en place un site dynamique. Noter que l’on peut faire la même chose pour modifier le titre, la description et les mots clés situés dans le head.

 

Des questions, des remarques ou tout simplement vous avez aimé, partagez cet article.

Laisser un commentaire