Aller au contenu
SCRIPTS CLIENTS 25-26

Templating

Templating

Introduction

Le templating est une pratique essentielle dans le développement web, permettant de séparer la structure du contenu, de réutiliser des morceaux de code, et d'améliorer la maintenance de votre projet. En utilisant Vanilla JS et Vite, nous allons apprendre à créer des templates pour des éléments communs tels que la navigation et le footer, ainsi qu'à dynamiser des composants réutilisables comme une "card" pour afficher une liste d'utilisateurs.

Pour structurer votre application Vite avec un seul fichier HTML (index.html) et plusieurs composants JavaScript dynamiques, nous allons organiser les composants dans un dossier components et les intégrer via main.js. Voici comment procéder :

Structure de Projet

  • index.html : Le point d'entrée de votre application.
  • /components : Dossier contenant les fichiers JS pour chaque composant (nav.js, footer.js, card.js). Vous devez le créer dans votre projet.

index.html

Votre fichier index.html reste comme défini, servant de conteneur pour les composants injectés dynamiquement :

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/main.js"></script>
</body>
</html>

Composants JavaScript

export function renderNav() {
  return `
    <nav>
      <ul>
        <li><a href="/">Accueil</a></li>
        <li><a href="/about">À Propos</a></li>
      </ul>
    </nav>
  `;
}

export function renderFooter() {
  return `
    <footer>
      <p>&copy; 2024 Mon Site Web</p>
    </footer>
  `;
}

Card (components/card.js)

export function renderCard(user) {
  return `
    <div class="card">
      <img src="${user.image}" alt="${user.name}" class="card-img">
      <h3 class="card-title">${user.name}</h3>
      <p class="card-info">${user.info}</p>
    </div>
  `;
}

Intégration dans main.js

Dans main.js, importez vos composants et utilisez-les pour construire le contenu de votre application :

import { renderNav } from './components/nav.js';
import { renderFooter } from './components/footer.js';
import { renderCard } from './components/card.js';
import './style.css';
import users from './users.json';


const app = document.getElementById('app');

app.innerHTML = `
  ${renderNav()}
  <div id="cards-container"></div>
  ${renderFooter()}
`;

document.getElementById('cards-container').innerHTML = users.map(user => renderCard(user)).join('');

Style CSS (style.css)

Ajoutez vos styles CSS dans style.css pour styliser vos composants de navigation, de footer et de card comme montré précédemment.

/* Style global */
body,
html {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f5f5f5;
  color: #333;
}

a {
  color: #007bff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Navigation */
nav {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  margin: 0;
}

nav ul li {
  padding: 1rem;
}

/* Cards */
#cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 20px;
}

.card {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 300px;
  overflow: hidden;
}

.card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-title {
  margin: 10px;
  font-size: 20px;
}

.card-info {
  margin: 0 10px 10px 10px;
  font-size: 16px;
  color: #666;
}

/* Footer */
footer {
  margin-top: auto;
  background-color: #fff;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  text-align: center;
}

En suivant cette structure, vous créez une application modulaire où chaque composant est géré séparément, rendant votre code plus propre, réutilisable et facile à maintenir.

Nous devons encore créer le fichier json avec les données des utilisateurs et ajouter leurs avatars dans le dossier public. Dans le json, user.image contiendra le chemin vers l’avatar.