[WebApp] Navigation dans le body

Version imprimable

31/07/2024, 15h11
valery.petit

[WebApp] Navigation dans le body

Bonjour,

Je suis Automaticien, rien à voir avec le web et les WebApp.
mais aujourd'hui j'ai une idée en tête et je voudrais bruler un peu les étapes de l'apprentissage :roll:

j'avance doucement et pour la navigation et la structuration des bloc de code et des pages j'aimerais faire ça proprement.

Dans l'idée ma page est séparée en trois parties "Head", "Body" et "End". Dans "Head" et "End", je vais avoir des menus de navigation et dans Body le contenu de la page.

C'est déconnant de faire deux pages HTML "Head" et "End" avec leur Css associé et de ne remplacer que le "body"?

quel serait la meilleur méthode d'après vous pour mettre ça en application?

Merci d'avance
31/07/2024, 18h33
mathieu

Citation:

Envoyé par valery.petit

remplacer que le "body"

que voulez vous dire par "remplacer" ? vous allez utiliser un langage coté serveur comme php pour générer les pages ?
31/07/2024, 19h03
valery.petit

Heu non.

j'utilise du HTML, CSS et JS.

Je suis désolé, je n'utilise pas forcément les bon termes.

L'idée serais de ne pas reproduire ce qui ne change pas d'une page à l'autre.
entre autre pour alléger le code.
31/07/2024, 19h20
mathieu

1 pièce(s) jointe(s)

ah d'accord, votre question c'est plutôt de savoir comment mettre ça en place.

au sujet de votre question de savoir si c'est déconnant de faire comme cela, c'est plutot l'inverse, c'est presque indispensable de factoriser le code pour l'alléger comme vous le disiez. cet allègement a ensuite plusieurs avantages : code plus facile à comprendre quand vous allez le relire dans quelques mois et un code plus facile à faire évoluer puisque vous n'aurez qu'un endroit à modifier dans vos fichiers.

pour la technique, il y a le code coté serveur et si vous n'avez pas encore l'habitude de cela, vous pouvez aussi le faire avec du code coté client en javascript.
regardez cet exemple en javascript, toute la présentation de la page est dans le fichier index.html et style.css. et ensuite du code javascript va personnaliser les données dans le corps de la page :
Pièce jointe 657750
01/08/2024, 06h44
valery.petit

Merci beaucoup Mathieu,

ça implique d'écrire les autres pages en Js plutôt qu'en html?

ce langage n'a pas la réputation d'alourdir les sites web?

Hello,

Bon c'est carrément fonctionnel, mais ça me perturbe.

Je recommence en partant de l'exemple dans ton lien (soit le code en dessous dans Index.html)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<html>
<head>
<!-- Définir le type de contenu et l'encodage des caractères -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title></title>
 
<!-- Lien vers le fichier CSS pour le style -->
<link rel="stylesheet" href="style.css"/>
 
</head>
<body>
 
	<!-- Inclusion des scripts JavaScript pour les différentes pages -->
<script src="pages/Cards.js"></script>
<script src="pages/Games.js"></script>
 
 
<script>
"use strict"; // Mode strict pour une meilleure gestion des erreurs
 
// Nom du site
const nom_site = "MonSite";
 
// Variables pour les éléments de titre, menu et contenu
let balise_titre, balise_menu, balise_contenu;
 
// Exécution du code après le chargement du DOM
document.addEventListener("DOMContentLoaded", () => {
        
        //console.clear();
        // Sélection des éléments du DOM     
        balise_titre = document.querySelector("title");
        balise_menu = document.getElementById("menu");
        balise_contenu = document.getElementById("contenu");
        
        //Initialisation du menu
        let pages = [];
        pages.push(new PageCards());
        pages.push(new PageGames());
 
        // Mise à jour du nom du site dans l'en-tête
        let balise_nom_site = document.querySelector("h1.nom_site");
        balise_nom_site.textContent = nom_site;
        
        
        // Affichage des liens du menu  
        pages.forEach((page, index_page) => {
                // Création d'un lien de menu
                let lien_menu = document.createElement("a");
                lien_menu.textContent = page.titre(); // Titre de la page
                lien_menu.setAttribute("href", ""); // URL vide pour empêcher le comportement par défaut
                
                // Ajout d'un écouteur d'événements pour le clic sur le lien
                lien_menu.addEventListener("click", e => {
                        
                        e.preventDefault(); // Empêcher le comportement par défaut du lien
                        
                        afficher_page(page); // Afficher la page correspondante
                        
                });
                // Ajout du lien dans un conteneur de liste
                let conteneur_lien_menu = document.createElement("li");
                conteneur_lien_menu.append(lien_menu);
                balise_menu.append(conteneur_lien_menu); // Ajout du conteneur au menu
                
        });
        
        
        // Affichage de la première page par défaut
        afficher_page(pages[0]);
        
        
});
 
// Fonction pour afficher une page
function afficher_page(page)
{
                // Mise à jour du titre de la page
        balise_titre.textContent = page.titre() + " | " + nom_site;
        // Mise à jour du contenu de la page
        balise_contenu.innerHTML = page.contenu();
        
}
 
</script>
 
<!-- Structure HTML de la page -->
<div class="entete">
	<h1 class="nom_site"></h1>
	<ul id="menu"></ul>
</div>
 
<div id="contenu"></div>
 
</body>
 
</html>

J'ai essayé d'ajouter mon code dans "Cards.js" mais une erreur m'est renvoyé.
mon pote GPT m'a dis de le mettre entre ' ' ce qui empêche VS code de colorer correctement les balises...
Les titres h1 et h2 sont correctement affiché, mais le script ne semble pas s’exécuter du tout.

Une idée? :D

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
class PageCards {
 
    // Méthode pour obtenir le titre de la page
    titre() {
        return "Accueil";
    }
 
    // Méthode pour obtenir le contenu de la page
    contenu() {
        return `
            <h2>Bienvenue sur mon site</h2>
			<h1> en dessous le script devrais s'executer</h1>
 
            <div class="body">
                <div id="root"></div>
                <script type="module" src="/src/main.jsx"></script>
            </div>
        `;
    }
}

J'avais utilisé "Vite" dans mon code d'origine, je ne pense pas que ce soit bloquant pour le moment, mais il faudra sans doute que j’essaie de le remettre.

Merci d'avance et bon weekend à tous!!!! 8-)

03/08/2024, 22h40
mathieu

Citation:

Envoyé par valery.petit

ce langage n'a pas la réputation d'alourdir les sites web?

le code javascript est exécuté dans le navigateur donc il peut être trop lourd pour certaines machines et si le site contient beaucoup de pages.
pour éviter cela il y a le code côté serveur comme par exemple php ou node.js (c'est du javascript côté serveur).

si vous voulez plus de conseils, il faudrait nous donner plus de détails sur ce que vous voulez faire. ce sont juste des essais ou c'est une application qui sera utilisée à long terme ?
quels sont seront les utilisateurs ? qui va utiliser quelles données et qui va saisir et modifier ces données ?
03/08/2024, 23h51
valery.petit

le code est relativement léger, je n'en suis qu'au début de l'application :(.

il ne fait qu'afficher des carte avec photo et texte à l’intérieur

Ta méthode est bien par ce qu'elle force à structurer le projet d'une certaine façon ce que j'ai tendance à apprécié en qualité de débutant. Par contre j'aime aussi voir mon texte se colorer et ça, c'est complétement perdu.

Concernant le script qui ne s’exécute pas, je viens de voir que c’était également le cas dans le projet d'origine, je vais donc aller m'arracher les cheveux dessus :calim2:

Je vais essayer cette méthode proposée pas GPT qui s’intègre dans déformater le code du projet.

3. Utilisation des composants Web (Web Components)

Les Web Components permettent de créer des éléments HTML réutilisables. Cette méthode est particulièrement utile pour les applications modernes utilisant des frameworks front-end comme React, Vue.js, ou Angular.
Exemple avec HTML et JavaScript :

Créer un composant web pour le menu (menu-component.js) :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 class MenuComponent extends HTMLElement { connectedCallback() { this.innerHTML = ` <link rel="stylesheet" href="menu-component.css"> <nav> <ul> <li><a href="index.html">Accueil</a></li> <li><a href="about.html">À propos</a></li> <li><a href="services.html">Services</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> `; } } customElements.define('menu-component', MenuComponent);
Utiliser ce composant dans vos pages :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Accueil< /title> <script src="menu-component.js" defer></script> </head> <body> <menu-component></menu-component> <h1>Bienvenue sur la page d'accueil</h1> <p>Contenu de la page d'accueil.</p> </body> </html>