Dans l’article du jour nous allons voir comment mettre en place un squelette pour le backoffice du blog qui permettra au propriétaire du blog de gérer les articles et les images.
La page backoffice.html va afficher les différents composants du backoffice
<body>
<div data-include="./components/header.html"></div>
<main class="backoffice">
<article>
<!-- Chargement dynamique des différentes sections -->
<div class="backofficeDefault" id="defaultBackoffice" data-include="./components/defaultBackoffice.html"></div>
<div class="backofficeComponent" id="createPost" data-include="./components/createPost.html"></div>
<div class="backofficeComponent" id="images" data-include="./components/images.html"></div>
</article>
<!-- Menu latéral pour naviguer dans le backoffice -->
<aside>
<figure>
<!-- Lien pour retourner à la page d'accueil du backoffice -->
<figcaption>Home</figcaption>
<ul>
<li><a href="#" id="loadDefaultBackoffice">Accueil</a></li>
</ul>
</figure>
<figure>
<!-- Menu pour gérer les articles -->
<figcaption>Articles</figcaption>
<ul>
<li><a href="#" id="loadCreatePost">Créer un nouvel article</a></li>
</ul>
</figure>
<figure>
<!-- Menu pour accéder à la bibliothèque d'images -->
<figcaption>Images</figcaption>
<ul>
<li><a href="#" id="loadImages">Bibliothèque d'Images</a></li>
</ul>
</figure>
</aside>
</main>
<div data-include="./components/footer.html"></div>
<!-- Scripts utilisés par la page -->
<script src="./scripts/conf.js"></script>
<script src="./scripts/include.js"></script>
<script src="./scripts/isAuthenticated.js"></script>
<script src="./scripts/loggedIn.js"></script>
<script src="./scripts/loadBackOfficeComponents.js"></script>
</body>
Au niveau du fichier css les composants ayant la class backofficeComponent sont cachés par défaut. Le composant ayant la class backofficeDefault est quand à lui affiché par défaut.
.backofficeComponent {
display: none;
}Enfin le script loadBackOfficeComponents.js permet de gérer dynamiquement l’affichage des différents composants en fonction de celui qui est sélectionné.
// Fonction pour afficher un élément spécifique du backoffice
function showElement(elementId) {
const allBackofficeContainers = document.querySelectorAll(".backofficeComponent");
const defaultBackofficeContainer = document.querySelector(".backofficeDefault");
// Cache tous les conteneurs du backoffice ayant la class backofficeComponent
allBackofficeContainers.forEach(container => {
container.style.display = "none";
});
// Cache le conteneur par défaut
defaultBackofficeContainer.style.display = "none";
// Affiche seulement l'élément ayant l'ID passé en paramètre
const selectedElement = document.getElementById(elementId);
selectedElement.style.display = "block";
}
// Fonction pour ajouter un événement au clic sur l'option désirée
function addClickListener(buttonId, elementId) {
document.getElementById(buttonId).addEventListener("click", function(event) {
event.preventDefault();
// Appelle la fonction showElement pour afficher l'élément souhaité
showElement(elementId);
});
}
// Ajout des écouteurs de clic pour chaque bouton du menu
addClickListener("loadDefaultBackoffice", "defaultBackoffice");
addClickListener("loadCreatePost", "createPost");
addClickListener("loadImages", "images");Dans un prochain article nous allons voir la création des différents composants du backoffice qu sont l’éditeur d’articles et la banque d’images.
Retrouvez les premiers articles du projet ici ⬇️
– Simple Blog From Scratch Part1
– Simple Blog From Scratch Part2
– Simple Blog From Scratch Part3
– Simple Blog From Scratch Part4
– Simple Blog From Scratch Part5
– Simple Blog From Scratch Part6
– Simple Blog From Scratch Part7
– Simple Blog From Scratch Part8
Consultante spécialisée dans les technologies Microsoft, je justifie de plus de 14 ans d’expérience dans le secteur IT.
Mon parcours professionnel, riche et varié, m’a permis de développer de solides compétences, tant techniques qu’humaines. Je suis reconnue pour ma capacité à analyser rapidement les enjeux techniques et à concevoir des solutions pertinentes, y compris sur des problématiques complexes.
Mon approche proactive, alliée à mes compétences en développement, me permet de proposer des évolutions efficaces, toujours en cohérence avec les objectifs métiers.
En parallèle de mon activité professionnelle, je prends plaisir à approfondir mes compétences techniques en réalisant des projets personnels. Je développe notamment des jeux web basés sur React et PHP, ainsi que des applications orientées métier avec SPFx.