Après avoir réalisé le Back-End du projet « Simple Blog From Scratch » nous allons maintenant réaliser le Front-End avec Javascript.
Tout d’abord nous allons voir la page d’accueil qui affichera directement tous les articles et la page d’un article unique.
Page accessible lorsque l’on clique sur un article de la page d’accueil.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/svg+xml" href="./assets/icons/Cat.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Blog</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- Le script include.js va permettre de charger un header et un footer commun à toutes les pages -->
<div data-include="./components/header.html"></div>
<!-- Corps de de la page d'accueil. -->
<main class="general">
<!-- Un contenu sommaire des articles sera affiché grâce au script "fecthPosts.js" -->
<section id="allPosts">
<template id="templatePosts">
<!-- Les articles sont cliquables et le clic sur un article renvoit vers ce dernier -->
<a id="postLink" href="#">
<h1 id="postTitle"></h1>
<p id="postContent"></p>
</a>
</template>
</section>
</main>
<!-- Footer -->
<div data-include="./components/footer.html"></div>
<!-- Appel des scripts Javascript utiles à la page -->
<script src="./scripts/conf.js"></script>
<script src="./scripts/include.js"></script>
<script src="./scripts/fetchPosts.js"></script>
</body>
</html>Ci-dessous les détails des fichiers include.js et fetchPosts.js
// Fonction permettant d'inclure dynamiquement du contenu HTML dans des éléments ayant l'attribut "data-include"
function includeHTML() {
const elements = document.querySelectorAll('[data-include]');
elements.forEach(element => {
// Récupère la valeur de l'attribut "data-include" de l'élément, qui contient le chemin du fichier à inclure
const file = element.getAttribute('data-include');
fetch(file)
.then(response => {
if (response.ok) {
return response.text();
}
throw new Error('Erreur de chargement de fichier : ' + file);
})
// Une fois que le contenu du fichier est récupéré, il est inséré dans l'élément. On remplace le contenu HTML de l'élément par celui du fichier récupéré
.then(content => {
element.innerHTML = content;
})
.catch(error => {
console.error(error);
});
});
}
/* Ajoute un écouteur d'événement qui attend que tout le contenu de la page soit chargé (DOM entièrement prêt).
Exécute ensuite la fonction `includeHTML` pour inclure les fichiers externes HTML dans les éléments concernés */
document.addEventListener('DOMContentLoaded', includeHTML);
// Fonction asynchrone qui va récupérer et afficher les articles
async function showPosts() {
// Requête GET afin de récupérer les articles. l'API est ici celle construite dans les articles précédents traitant du Back-End
try {
const response = await fetch(`${urlApi}/posts/all`, {
method: 'GET',
})
if(response.status === 200) {
const data = await response.json();
// On extrait tous les posts de l'objet 'data'.
const allPosts = data.allPosts;
for (let post in allPosts) {
// Récupère le post courant dans la boucle.
post = allPosts[post];
// Sélection du template HTML (modèle) pour afficher chaque post.
const templatePosts = document.getElementById('templatePosts');
/* Création d'une copie du contenu du template pour l'insérer dans la page.
Le second argument 'true' signifie que toute la structure du nœud (y compris les enfants) est copiée */
const seePost = document.importNode(templatePosts.content, true);
seePost.getElementById('postTitle').textContent = post.title;
seePost.getElementById('postContent').textContent = (post.content.length > 120 ? post.content.slice(0, 120) + '...' : post.content);
seePost.getElementById('postLink').href = `post.html?id=${post.id}`;
// Ajout de la copie du template (qui contient l'article) à l'élément ayant l'ID 'allPosts' dans le DOM
document.getElementById('allPosts').appendChild(seePost);
}
} else {
console.log(response);
}
} catch (error) {
console.log(error);
}
}
// Appel de la fonction 'showPosts' pour qu'elle soit exécutée immédiatement après le chargement du script
showPosts();
Lorsque l’on clique sur un article on est redirigé vers la page de l’article en question.
Elle est construite sur le même principe que la page d’accueil.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/svg+xml" href="./assets/icons/Cat.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>This Post</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div data-include="./components/header.html"></div>
<!-- Le corps de page est différent par rapport à la page d'accueil -->
<main class="general">
<section id="thisPost">
<template id="templateThisPost">
<h1 id="thisPostTitle"></h1>
<p id="thisPostContent"></p>
</template>
</section>
</main>
<div data-include="./components/footer.html"></div>
<script src="./scripts/conf.js"></script>
<script src="./scripts/include.js"></script>
<!-- Le script fetchPost.js permet de récupérer les informtions de l'article sur lequel on a cliqué -->
<script src="./scripts/fetchPost.js"></script>
</body>
</html>Voici le code de fetchPost.js
// On récupère l'ID de l'article grâce à l'url et URLSearchParams
const myPostIdEquals = window.location.search;
const myPostIdOnly = new URLSearchParams(myPostIdEquals);
const myPostId = myPostIdOnly.get("id");
// Fonction asynchrone qui va récupérer et afficher l'article dont on a récupérer l'ID dans la variable myPostId
async function fetchPost() {
try {
const response = await fetch(`${urlApi}/posts/${myPostId}`, {
method: 'GET',
})
if(response.status === 200) {
const data = await response.json();
const templateMyPost = document.getElementById('templateThisPost')
const seePost = document.importNode(templateMyPost.content, true)
seePost.getElementById('thisPostTitle').textContent = data.title
seePost.getElementById('thisPostContent').textContent = data.content
document.getElementById('thisPost').appendChild(seePost)
} else {
console.log(response)
}
}catch(error) {
console.log(error)
}
}
fetchPost();Et voilà nous avons vu comment afficher tous les articles et un article sélectionné dans notre Front-End !
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
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.