Utilisation de fichiers htaccess pour de jolies URL

Dans le prolongement de notre examen des fichiers htaccess, nous allons examiner comment utiliser mod_rewrite pour créer de jolies URL..

Avantages des URL formatées

Bien que certains prétendent que de jolies URL aident à classer les moteurs de recherche, le débat est acharné, mais nous pouvons tous convenir que de jolies URL facilitent les choses pour nos utilisateurs et ajoutent un niveau de professionnalisme et de raffinement à toute application Web. Je pourrais passer en revue toutes les raisons théoriques, mais j'aime mieux les exemples du monde réel. Qu'on le veuille ou qu'on déteste, nous devons tous admettre que Twitter est une application Web extrêmement populaire et une partie de la raison en est certainement la façon dont elle formate les URL. Je peux dire à tous ceux qui savent que mon nom d'utilisateur Twitter est noahhendrix et ils savent que mon profil est facilement accessible sur twitter.com/noahhendrix. Ce concept apparemment simple a de vastes effets sur la popularité de votre application.

Pour mettre les choses en perspective, nous pouvons regarder un autre site de réseautage social populaire, Facebook. Depuis le lancement du site en 2004, le système de profil a évolué pour mieux s’adapter aux besoins des utilisateurs, mais l’un des trous les plus évidents était l’adresse URL d’un profil. À partir du moment où je me suis enregistré avec Facebook, mon profil était à l'URL http://www.facebook.com/profile.php?id=1304880680. C'est une bouche pleine, et tout récemment, il semble que Facebook s'en soit rendu compte et ils ont lancé les URL personnalisées de Facebook. Maintenant, je peux partager mon profil Facebook en disant aux gens que mon nom d'utilisateur Facebook est "noahhendrix", ils peuvent être trouvés en allant sur facebook.com/noahhendrix. Même s'il est peu probable que nous ayons une application aussi populaire que Facebook, nous pouvons néanmoins emprunter quelques pages de leur livre..

Rapide vue d'ensemble

Un aperçu rapide avant de plonger dans le code. Dans le tutoriel d'aujourd'hui, nous allons passer en revue deux méthodes légèrement différentes pour créer de jolies URL à l'aide de HTACCESS. La différence entre les méthodes est de savoir si Apache ou PHP fait le gros effort pour séparer l'URL à des fins d'analyse. Je tiens à souligner que les didacticiels de mod_rewrite sont presque aussi vieux que l'Internet lui-même et que ce n'est pas le premier. À la fin, j’utiliserai l’une des méthodes pour créer une application simple afin de montrer l’apparence de ces solutions sur un site Web en temps réel (et non pour une qualité de production à 100%). Le service que nous allons créer est un raccourci d’URL qui peut refléter les fonctionnalités de sites tels que bit.ly, TinyURL ou su.pr. Donc, sans plus de peluches, regardons le code.

Utiliser Apache

Premièrement, nous pouvons placer tout notre code dans des fichiers Apache .htaccess. Cela pourrait ressembler à quelque chose comme ça:

 Options + FollowSymLinks RewriteEngine on RewriteCond% SCRIPT_FILENAME! -D RewriteCond% SCRIPT_FILENAME! -F RewriteRule ^ utilisateurs / (\ d +) * $ ./profil.php?id=$1 RewriteRule ^ (\ d +) * ./thread.php?id=$1 RewriteRule ^ search /(.*)$ ./search.php?query=$1

Commençons par le haut et travaillons pour mieux comprendre ce qui se passe ici. La première ligne configure l'environnement pour qu'il suive les liens symboliques à l'aide de la directive Options. Cela peut être nécessaire ou non, mais certains hôtes Web utilisent des liens symboliques (similaires à un alias dans MacOSX ou Windows à des raccourcis) pour les erreurs de requête HTTP courantes et il s’agit généralement de fichiers liés, ou du moins, c’est ainsi que je comprends le raisonnement. Ensuite, nous disons à Apache que nous allons utiliser le moteur Rewrite. Les deux lignes suivantes sont très, très importantes, car elles limitent la réécriture des URL aux seuls chemins inexistants. Cela empêche les règles ci-dessous de correspondre example.com/images/logo.png par exemple. Le premier empêche les répertoires existants avec le !-ré drapeau et le second avec !-F signifie ignorer les fichiers existants.

Les trois lignes suivantes représentent les commandes de réécriture d'URL. Chaque ligne crée une règle qui tente de faire correspondre un modèle d'expressions régulières avec l'URL entrante. Les expressions régulières, du moins pour moi, sont un ensemble de règles difficiles à retenir, mais je trouve toujours utile d’utiliser ce didacticiel de Jeffery Way de Nettut et de l’outil qu’il recommande. J'ai trouvé facile de saisir des exemples d'URL que nous voulons associer, puis d'essayer de pirater le motif.

Le premier argument est le motif, entre le signe caret et le signe dollar. Nous disons à Apache que nous voulons des URL demandant le répertoire des utilisateurs (un répertoire artificiel, qui ne doit pas exister) suivi d'un / et de toute longueur de chiffres. Les parenthèses créent un groupe de capture, vous pouvez en utiliser autant que vous voulez, elles servent de variables que nous pouvons ensuite transplanter dans notre réécriture. L'astérisque signifie que l'utilisateur peut entrer ce qu'il veut et n'affectera en rien la réécriture, il s'agit principalement de gérer une barre oblique finale. example.com/users/123 est le même que example.com/users/123/ comme on pouvait s'y attendre.

Le deuxième argument est le chemin que nous voulons réellement appeler, contrairement au premier qui doit être un fichier réel. Nous demandons à Apache de rechercher dans le répertoire en cours un fichier appelé profile.php et envoyer le paramètre id = 1 $ avec. Rappelez-vous le groupe de capture plus tôt? C'est là que nous obtenons la variable $ 1; les groupes de capture commencent par un. Cela crée une URL sur le serveur comme example.com/profile.php?id=123.

Cette méthode est idéale pour les applications Web héritées qui possèdent des structures d'URL existantes qui nous empêchent de réécrire facilement le backend pour comprendre un nouveau schéma d'URL, car l'URL du serveur est identique, mais elle est beaucoup plus agréable pour l'utilisateur..

Utiliser PHP

Cette méthode suivante est idéale pour ceux qui ne veulent pas distribuer trop de logique à Apache et se sentent plus à l'aise en PHP (ou des langages de script similaires). Le concept ici est de capturer toutes les URL que le serveur reçoit et de les transférer vers une page de contrôleur PHP. Cela vient avec l'avantage supplémentaire du contrôle, mais une plus grande complexité en même temps. Votre fichier HTACCESS pourrait ressembler à ceci:

 Options + FollowSymLinks RewriteEngine sur RewriteCond% SCRIPT_FILENAME! -D RewriteCond% SCRIPT_FILENAME! -F RewriteRule ^. * $ ./Index.php

Tout est comme ci-dessus, à l'exception de la dernière ligne, nous allons donc y aller directement. Au lieu de créer un groupe de capture, nous demandons simplement à Apache de saisir chaque URL et de la rediriger vers index.php. Cela signifie que nous pouvons effectuer toutes nos manipulations d'URL en PHP sans trop nous appuyer sur des chemins d'URL stricts dans HTACCESS. Voici ce que nous pourrions faire en haut de notre fichier index.php pour analyser l'URL:

 

La première ligne n'est pas nécessaire à moins que votre application ne réside pas dans le répertoire racine, comme dans mes démos. Je supprime la partie non sensible de l'URL dont je ne veux pas que PHP s'inquiète. $ _SERVER ['REQUEST_URI'] est une variable serveur globale fournie par PHP et stockant l'URL de la requête. Elle ressemble généralement à ceci:

 / envato / pretty / php / users / query

Comme vous pouvez le voir, il s’agit essentiellement de tout après le nom de domaine. Ensuite, nous séparons la partie restante du chemin virtuel et le divisons par le / caractère cela nous permet de saisir des variables individuelles. Dans mon exemple, je viens d’imprimer le $ params rangez-vous dans le corps, bien sûr, vous voudrez faire quelque chose d'un peu plus utile.

Une chose que vous pourriez faire est de prendre le premier élément de la $ params array et incluez un fichier du même nom et dans celui-ci, vous pouvez utiliser le deuxième élément du tableau pour exécuter du code. Cela pourrait ressembler à ceci:

 

AVERTISSEMENT: La première partie de ce code est incroyablement importante! Vous devez absolument limiter les pages qu'un utilisateur peut obtenir pour ne pas avoir la possibilité d'imprimer la page de son choix en devinant les noms de fichier, comme un fichier de configuration de base de données..

Maintenant que nous avons la tribune libre, passons à autre chose. Ensuite, nous vérifions si le fichier demandé est dans le $ safe_pages tableau, et si c'est le cas, nous inclurons sinon une page 404 non trouvée. Dans la page incluse, vous verrez que vous avez accès au $ params tableau et vous pouvez récupérer toutes les données nécessaires à votre application.

C'est parfait pour ceux qui veulent un peu plus de contrôle et de flexibilité. Cela nécessite évidemment un peu plus de code, donc probablement mieux pour les nouveaux projets qui ne nécessitent pas beaucoup de code à mettre à jour pour s'adapter aux nouveaux formats d'URL.

Un URL shortner simple

Cette dernière partie du didacticiel va nous permettre d’utiliser un peu plus le code que nous avons décrit plus haut. C’est plus ou moins un exemple "réel". Nous allons créer un service appelé shrtr, J'ai composé ce nom afin que tous les autres produits portant ce nom ne soient pas associés au code que je poste ci-dessous. Remarque: Je sais que ce n’est de loin pas un concept original, et est uniquement destiné à la démonstration de mod_rewrite. Voyons d'abord la base de données:

Comme vous pouvez le constater, ceci est très simple, nous n’avons que 4 colonnes:

  • identifiant: identifiant unique utilisé pour référencer des lignes spécifiques
  • court: chaîne de caractères unique ajoutée à la fin de notre URL pour déterminer où rediriger
  • url: l'URL vers laquelle l'URL courte redirige
  • créé à: un horodatage simple pour savoir quand cette URL a été créée

Les bases

Passons maintenant aux six fichiers que nous devons créer pour cette application:

  • .htaccess: redirige toutes les URL courtes vers serve.php
  • create.php: valide l'URL, crée un shortcode, enregistre dans une base de données
  • css / style.css: contient des informations de style de base
  • db_config.php: stocke les variables pour les connexions à la base de données
  • index.php: Le visage de notre application avec un formulaire pour entrer l'URL
  • serve.php: recherche une URL courte et redirige vers une URL réelle

C'est tout ce dont nous avons besoin pour notre exemple de base. Je ne couvrirai pas index.php ou css / style.css très en détail car ils n'ont pas de PHP et sont des fichiers statiques.

 # index.php ----     Rend les URLs Shrtr    

fourrér.moi

Tapez votre URL ici

Le seul point intéressant à noter ici est que nous soumettons le formulaire avec un champ appelé URL à create.php.

 # css / style.css ---- / * reset * / * font-family: Helvetica, sans-serif; marge: 0; rembourrage: 0;  / * site * / html, body background-color: # 008AB8;  a color: darkblue; text-decoration: none; #pagewrap margin: 0 auto; largeur: 405px;  h1 couleur: blanc; marge: 0; text-align: center; taille de police: 100px;  h1 .r color: darkblue;  .body -moz-border-radius: 10px; -webkit-border-radius: 10px; couleur de fond: blanc; text-align: center; rembourrage: 50px; hauteur: 80px; position: relative;  .body .instructions display: block; marge inférieure: 10px;  .body .back right: 15px; en haut: 10 px; position: absolue;  .body input [type = text] display: block; taille de police: 20px; marge inférieure: 5px; text-align: center; rembourrage: 5px; hauteur: 20px; largeur: 300px; 

Tout cela est très générique, mais rend notre application un peu plus présentable.

Le dernier fichier de base que nous devons examiner est notre db_config.php, J'ai créé ceci pour extraire certaines informations de connexion à la base de données.

 # db_config.php ---- 

Vous devez remplacer les valeurs par ce qui fonctionne dans votre base de données, et host est probablement localhost, mais vous devez vérifier auprès de votre fournisseur d'hébergement pour vous en assurer. Voici le dump SQL de la table, url_redirects qui contient toutes les informations que nous avons montrées ci-dessus:

 -- -- Structure de table pour la table 'url_redirects' - CREATE TABLE SI NON EXISTE 'url_redirects' ('id' int (11) NOT NULL auto_increment, 'court' varchar (10) NOT NULL, 'url' varchar (255) NOT NULL, ' created_at 'horodatage NOT NULL par défaut CURRENT_TIMESTAMP, PRIMARY KEY (' id '), KEY' court '(' court ')) ENGINE = MyISAM DEFAULT CHARSET = utf8;

Création de l'URL courte

Regardons ensuite le code nécessaire pour créer notre URL courte.

 # create.php ---- shrtr.me/".$short; else $ html = "Erreur: la base de données est introuvable"; mysql_close ($ db);?>     Rend les URLs Shrtr    

fourrér.moi



X

Maintenant, nous devenons un peu plus complexes! Nous devons d’abord inclure les variables de connexion à la base de données que nous avons créées précédemment, puis nous stockons le paramètre URL qui nous a été envoyé par le formulaire de création dans une variable appelée $ url. Nous effectuons ensuite quelques magies d’expressions régulières pour vérifier s’ils ont bien envoyé une URL, sinon nous stockons une erreur. Si l'utilisateur a entré une URL valide, nous créons une connexion à la base de données à l'aide des variables de connexion que nous incluons en haut de la page. Nous générons ensuite une chaîne aléatoire de 5 caractères à enregistrer dans la base de données, à l’aide de la fonction substr. La chaîne que nous séparons est le hash md5 de l’heure actuelle () et $ url concaténés ensemble. Ensuite, nous insérons cette valeur dans le url_redirects table avec l'URL réelle et stocke une chaîne à présenter à l'utilisateur. Si les données ne sont pas insérées, nous enregistrons une erreur. Si vous descendez dans la partie HTML de la page, nous n’imprimons que la valeur de $ html, que ce soit une erreur ou un succès. Ce n'est évidemment pas la solution la plus élégante mais ça marche!

Servir l'URL courte

Nous avons donc l'URL dans la base de données travaillons servir.php afin que nous puissions réellement traduire le code court dans une redirection.

      Rend les URLs Shrtr    

fourrér.moi



X

Celui-ci est très similaire à create.php nous incluons les informations de la base de données et stockons le code court qui nous est envoyé dans une variable appelée $ short. Nous interrogeons ensuite la base de données sur l'URL de ce code court. Si nous obtenons un résultat, nous le redirigeons vers l'URL, sinon nous affichons une erreur comme avant.

En ce qui concerne PHP, c’est tout ce que nous avons à faire, mais pour le moment, pour partager une URL courte, les utilisateurs doivent saisir ceci., http://shrtr.me/server.php?short=SHORT_CODE Ce n'est pas très joli Voyons si nous ne pouvons pas incorporer du code mod_rewrite pour rendre cela plus agréable.

Pretty-ify avec HTACCESS

Parmi les deux méthodes que j'ai décrites au début du didacticiel, nous utiliserons celle d'Apache car cette application est déjà créée sans aucune analyse d'URL. Le code ressemblera à ceci:

 Options + FollowSymLinks RewriteEngine sur RewriteCond% SCRIPT_FILENAME! -D RewriteCond% SCRIPT_FILENAME! -F RewriteRule ^ (\ w +) $ ./serve.php?short=$1

En passant à RewriteRule, nous dirigeons tout trafic ne disposant pas déjà d’un fichier ou d’un répertoire réel vers servir.php et mettre l'extension dans la variable GET courte. Pas si mal non, allez l'essayer vous-même!

Conclusion

Aujourd'hui, nous avons appris différentes manières d'utiliser mod_rewrite dans notre application afin de rendre nos URL jolies. Comme toujours, je veillerai sur les commentaires si quelqu'un a des problèmes, ou vous pouvez me contacter sur Twitter. Merci d'avoir lu!

  • Suivez-nous sur Twitter ou abonnez-vous au fil RSS NETTUTS pour plus d'articles et de sujets sur le développement Web quotidiens.