1 / 14

🗺️ Les Dictionnaires de Routes

Formation DWWM - Développement Web et Web Mobile


Comprendre et créer un plan de navigation pour vos applications web


📍 Objectif : Maîtriser la structure et l'organisation des URLs

📚 Qu'est-ce qu'un Dictionnaire de Routes ?

Un dictionnaire de routes est un document de planification qui liste toutes les URLs de votre application et leur fonction.

🎯 C'est comme :

  • Le plan d'un bâtiment → Chaque pièce a sa fonction
  • Un sommaire de livre → Chaque chapitre a son contenu
  • Un menu de restaurant → Chaque plat a sa description

Il définit AVANT le développement toute la structure de navigation de votre site.

🏗️ Structure d'un Dictionnaire de Routes

Un dictionnaire de routes contient généralement :

URL / Route
Description / Fonction
/
Page d'accueil du site
/contact
Formulaire de contact
/produits
Liste des produits

💡 Simple et efficace : Une ligne = Une page de votre application

🎮 Exemple Concret : Site de Gaming

Voici le dictionnaire de routes d'une plateforme de jeux :

/
Page d'accueil
/signup
Formulaire d'inscription
/login
Formulaire de connexion
/logout
Déconnexion, redirige vers l'accueil
/games
Recherche de jeux
/players
Recherche de joueurs

🔢 Routes avec Paramètres

Certaines routes acceptent des paramètres dynamiques :

/games/:id
Fiche d'un jeu (id = ID du jeu)
/players/:id
Profil d'un joueur (id = ID du joueur)

🎯 Exemples concrets :

  • /games/123 → Fiche du jeu n°123
  • /games/456 → Fiche du jeu n°456
  • /players/789 → Profil du joueur n°789

Le :id est un placeholder qui sera remplacé par une valeur réelle.

🔒 Routes Protégées

Certaines routes nécessitent une authentification :

/profile
Formulaire d'édition du profil du joueur connecté

🔓 Routes publiques

Accessibles à tous : /, /games, /login, /signup

🔒 Routes protégées

Nécessitent une connexion : /profile, /logout

⚠️ Important : Les routes protégées doivent rediriger vers /login si l'utilisateur n'est pas connecté.

ℹ️ Routes Informatives

Toute application a besoin de pages d'information :

/about
Présentation de l'équipe
/cgu
Détail des conditions générales d'utilisation

🎯 Autres exemples courants :

  • /privacy → Politique de confidentialité
  • /help → Page d'aide
  • /faq → Questions fréquentes
  • /legal → Mentions légales

Ces pages sont obligatoires pour la plupart des sites web professionnels.

📁 Organisation par Catégories

On peut organiser les routes par domaines fonctionnels :

🏠 Navigation générale

/, /about, /contact

👤 Authentification

/signup, /login, /logout, /profile

🎮 Fonctionnalités métier

/games, /games/:id, /players, /players/:id

📋 Pages légales

/cgu, /privacy, /legal

✅ Bonnes Pratiques

🎯 URLs claires et intuitives

  • ✅ Bon : /games, /profile
  • ❌ Mauvais : /g, /user_profile_page

🔄 Cohérence dans la nomenclature

  • ✅ Bon : /games, /players (pluriel)
  • ❌ Mauvais : /game, /players (incohérent)

📚 Documentation complète

  • Décrire clairement chaque route
  • Préciser les paramètres nécessaires
  • Indiquer les redirections

🔄 Méthodes HTTP

Le dictionnaire peut aussi préciser les méthodes HTTP :

Route
Méthode + Description
/login
GET: Affiche le formulaire
POST: Traite la connexion
/games
GET: Liste des jeux
POST: Crée un nouveau jeu
/games/:id
GET: Affiche le jeu
PUT: Modifie le jeu
DELETE: Supprime le jeu

⚠️ Gestion des Erreurs

N'oubliez pas les pages d'erreur dans votre dictionnaire :

404
Page non trouvée
403
Accès interdit
500
Erreur serveur

🎯 Stratégies de redirection :

  • Utilisateur non connecté sur route protégée → /login
  • Page supprimée → / ou page équivalente
  • Après déconnexion → /

💪 Exercice Pratique

Créez le dictionnaire de routes pour un site e-commerce :

Fonctionnalités demandées :

  • 🏠 Page d'accueil
  • 👤 Inscription, connexion, profil
  • 🛍️ Catalogue produits, fiche produit
  • 🛒 Panier, commande
  • 📞 Contact, à propos
  • 📋 CGV, mentions légales

💡 Questions à se poser :

  • Quelles routes ont besoin de paramètres ?
  • Lesquelles nécessitent une connexion ?
  • Où rediriger après certaines actions ?

🛠️ Outils et Templates

📝 Formats possibles :

  • Tableau simple (Excel, Google Sheets)
  • Document Markdown
  • Fichier de configuration (JSON, YAML)
  • Documentation projet (Notion, Confluence)
# Template Markdown simple
## Routes Publiques
- `/` - Page d'accueil
- `/about` - À propos
- `/contact` - Contact

## Routes Authentification  
- `/login` - Connexion
- `/signup` - Inscription
- `/logout` - Déconnexion

## Routes Protégées
- `/profile` - Profil utilisateur
- `/dashboard` - Tableau de bord

📝 Récapitulatif

🎯 Le dictionnaire de routes c'est :

  • Un document de planification créé avant le développement
  • La liste complète des URLs de votre application
  • Un guide pour les développeurs et les clients
  • La base pour l'architecture de votre application

🚀 Prochaines étapes :

  • Créer le dictionnaire AVANT de coder
  • Le valider avec l'équipe et le client
  • L'utiliser comme référence pendant le développement
  • Le maintenir à jour pendant le projet

🗺️ Maintenant vous savez planifier vos routes ! 🗺️

Questions ? À vous de jouer !