Développement du portfolio
Le développement de mon portfolio a été réalisé avec la technologie Blazor, une solution full-stack conçue par Microsoft qui permet de créer des sites web dynamiques en utilisant un unique et même environnement de développement. Blazor offre l'avantage de développer des applications web en C# plutôt qu'en JavaScript, centralisant ainsi l'ensemble du code et des processus.
L'ambition de ce projet est de concevoir un portfolio numérique de manière efficiente, minimisant la complexité liée à la gestion du serveur. Le déploiement du projet .NET 8 se fait aisément, c’est un exécutable autonome qui peut s’exécuter aussi bien sous Windows, MacOs ou Linux. Il est possible de déployer dans un container Docker <également class>
Le code source d’une application Blazor est composé d’un ensemble de fichiers répartis dans des dossiers dédiés à chaque type : Les pages web sont des fichiers .razor, un format permettant une intégration du HTML et du C# au sein d'un même document. Cette synergie entre le balisage et la logique applicative rend le développement clair et précis. Voici un aperçu de l'organisation des pages de mon projet, accessible via l'explorateur de fichiers intégré à mon environnement de développement :
Au sein de l'architecture de mon application Blazor, trois fichiers .razor à la racine du dossier principal sont particulièrement importants pour son fonctionnement global :
App.razor: Ce fichier est le cœur de l'application et définit le cadre HTML global, agissant comme le conteneur principal pour l'affichage des composants de l'application._Imports.razor: Il est utilisé pour centraliser les directives using, facilitant ainsi l'importation des namespaces nécessaires au code C# à travers toute l'application.Routes.razor: Ce fichier est essentiel pour l'architecture de navigation de l'application Blazor, configurant le système de routage et définissant comment les composants de page sont localisés et rendus
Le projet est divisé en deux segments distincts : le dossier Components et le dossier wwwroot.
Dans Components, vous trouvez les pages Blazor elles-mêmes, intégrant à la fois le HTML et la logique sous-jacente orchestrant le fonctionnement du site.
wwwroot agit en tant que répertoire racine statique, accessible depuis les pages Blazor pour l'intégration des ressources telles que les images, les feuilles de style CSS et d'autres fichiers statiques.
Par exemple, pour accéder à ma feuille de style, le chemin spécifié est "css/style.css".
Le dossier Components se subdivise en deux catégories principales :
Layoutcomprend des fichiers commeMainLayout.razoretNavMenu.razor, qui structurent l'interface utilisateur de l'application, notamment la barre de navigation utilisée pour se déplacer entre les différentes pages du portfolio.Pagescontient les pages HTML individuelles qui sont rendues et navigables à partir du menu de l'application. Ces pages représentent les différentes sections de mon portfolio, chacune accessible via le système de navigation établi.
Le composant NavMenu.razor s'occupe essentiellement de la barre de navigation latérale du site, incorporant tous les liens qui permettent de naviguer entre les pages. Chaque élément interactif du menu encapsule un lien spécifique qui, lorsqu'il est activé, commande au navigateur de charger la page correspondante.
Prenons un exemple : la page d'accueil est désignée par le chemin "/" tandis qu'une page intitulée "Tableau" serait représentée par "/tableau". Ces identifiants servent à informer le navigateur de l'adresse spécifique à charger et sont consignés dans les fichiers des pages associées pour que l'application sache exactement quelle vue présenter. Pour illustrer ce procédé, voici un extrait typique du code :
Dans le composant NavLink, la propriété href est utilisée pour définir le chemin. Au sein du fichier de la page cible, on indique cette même référence au début du fichier pour lier la page à son chemin d'accès comme suivant :
La rubrique contact comporte du code c# déclenché par l’appui du bouton « Envoyer le message »
En cliquant sur le bouton, une validation des données est effectuée.
En cas de succès la méthode HandleValidSubmit est appelée. Elle permet d’envoyer les données du formulaire par email.
