Créer une page de recherche partageable

Créer une page de recherche partageable est un projet pratique de frontend pour les personnes ayant des bases en HTML, CSS et JavaScript. Vous créerez la page de recherche de Fieldnote, un site fictif d’événements locaux dont le lien ouvre les mêmes résultats filtrés et ordonnés, à la même page de résultats, dans un autre contexte de navigateur.

Deux laboratoires guidés commencent par une vue partagée fonctionnelle, puis développent l’état de recherche fondé sur l’URL et la navigation du navigateur. Un défi autonome applique les mêmes mécanismes à une autre édition d’événements, avec d’autres catégories et un nombre différent de résultats par page. Chaque laboratoire fournit ses propres fichiers et données de départ.

Ce que vous apprendrez

À la fin du cours, vous saurez :

• filtrer, trier et paginer un catalogue d’événements préparé en conservant le lien entre le contenu de chaque entrée et son ID stable, même lorsque des événements portent le même titre ;
• lire et normaliser q, category, sort et page avec URL et URLSearchParams, en traitant les espaces, &, le caractère littéral +, les valeurs inconnues et les pages invalides ;
• maintenir la cohérence entre les filtres soumis, les contrôles visibles, les résultats et le lien de partage, avec un état sans résultat utile et des limites de pagination claires ;
• utiliser pushState, replaceState et popstate pour restaurer les vues validées lors du rechargement et de véritables navigations Précédent/Suivant, sans ajouter d’entrées inutiles à l’historique ;
• ouvrir un véritable lien de partage dans un contexte de navigateur vierge et comparer les mêmes entrées dans le même ordre, en préservant le chemin actuel, les paramètres de requête sans rapport et le fragment.

À qui s’adresse ce cours

Ce cours s’adresse aux personnes souhaitant relier l’état du navigateur, le traitement des données en JavaScript et une interface de recherche utile.

Prérequis : Utilisation élémentaire du terminal et des chemins ; formulaires HTML ; mise en page CSS et focus visible ; objets, tableaux, fonctions, sélection et manipulation du DOM et événements JavaScript. Vous devez savoir modifier et enregistrer les fichiers du projet. Les laboratoires guidés enseignent l’encodage des URL, filter/sort/slice, la copie de tableaux, l’identité stable des entrées et l’historique du navigateur avant le défi. React et la programmation backend ne sont pas nécessaires.

Environnement d’apprentissage : LabEx fournit un environnement de programmation dans le navigateur, un site statique et des données synthétiques d’événements déjà préparés. Vous implémentez le JavaScript du navigateur ; le serveur livre uniquement les fichiers. Les libellés du site et les sorties d’exécution restent en anglais.

Questions fréquentes

Vais-je créer un backend de recherche ou enregistrer les préférences des visiteurs ?

Non. Le filtrage, le tri et la pagination s’exécutent dans le navigateur sur les données locales préparées. L’URL porte la vue validée : un autre navigateur n’a donc pas besoin du stockage enregistré par le premier.

Que deviennent les modifications que je n’ai pas encore soumises ?

Les contrôles contiennent un brouillon jusqu’à sa soumission avec Search. Recharger restaure l’état validé de l’URL. Vous vous exercerez aussi à corriger une recherche trop restrictive et à appliquer les valeurs par défaut ou les corrections de page documentées ; l’absence de correspondance est un résultat valide.

Ce cours permet-il de publier un lien permanent ?

Non. Le partage se limite au laboratoire autorisé en cours d’exécution et à sa route disponible. Un lien ne maintient pas une VM active, ne garantit pas l’accès entre des VM de laboratoires différents et ne publie pas la page sur Internet. Le déploiement en production et une certification complète d’accessibilité sortent du cadre du cours.