Construire une page web dynamiqe avec JavaScript - HTML et CSS

Bonjour, après des années de sommeil sur la partie informatique ( initialement plus spécialisé sur du VB.net et autres activités de dev, je me remets de façon très sérieuse et assidue à la formation et aux études. Bouquin de python en main, d'UML etc ... Pour pouvoir appréhender un peu le développement web, et plus particulièrement le niveau visé, développeur full stack.
J'ai donc de petites notions en CSS / HTML et JS. Mais je ne suis pas encore suffisamment "mur" pour ne serait ce que savoir si je post au bon endroit, donc par avance mes excuses si je me suis trompé. Voici donc mon projet expliqué avec mes mots, sans code pour le moment je mettrai à disposition si besoin:

J'ai donc un code HTML incluant entre autre une nav bar un footer ainsi que plusieurs div dans le body avec une div en panneau latérale contenant 4 div ( panneau latéral gauche ) ainsi qu'une main div qui se situe au début du body et qui fini à la fin du body en partie centrale

Je souhaiterais savoir quels sont les méthodes qui permettent d'avoir cette div qui se remplirait de manière automatique et don le contenu serait dynamique, en sachant que bien évidemment les utilisateurs auront probablement à interagir sur des fonctions d'upload d'images ou de fichiers d'avatar etc ....

J'ai vue que la fonction innerhtml de JS me permettrait de tels choses mais j'ai aussi compris qu'il fallait probablement supprimer l'ancien contenu pour en rajouter du nouveau etc.

Donc plusieurs choses auxquelles j'ai pensé:

des pages html annexes si c'est possible ( mais zero php, ça c'est ma contrainte )

le innerhtml

ou d'autres choses que je ne connais pas sans doute.

Si vous avez de bonnes pratiques des solutions que je n'aurais pas évoquée etc ... je suis preneur et vous remercie par avance pour votre aide.

Mon projet est un gros projet pour un noob, réunissant une base mysql ou mongodb je ne sais pas encore, gérant à la fois de la data et des photos , de l'authentification etc .... merci pour votre aide, je ferai régulièrement, en échange, des post sur l'avancée de mon projet et ce, de manière plus détaillée.

Tu ne veux pas de PHP, ok. Mais il va bien te falloir un script côté serveur qui fabrique du code HTML (ou quelque chose que JS va pouvoir transformer en éléments HTML) à partir de ta BDD
innerHTML n'est pas une méthode mais un attribut d'élément. Comment comptes-tu le remplacer ? Via un appel fetch ?

Merci pour ce retour.

c'est là en fait où j'ai du mal à comprendre.

Pour l'instant de ce que j'ai appris c'est l'insertion d'un index.js ainsi qu'un style.css dans le corps du html
j'ai également compris que, pour "attaquer" une bdd il y avait plusieurs options possible dont nodejs
j'ai un peu regarder du côté de nodejs mais, sauf avis contraire, je préfère pour l'instant me concentrer sur la présentation générale du site pour avoir un "Template" complet ( ou plus ou moins complet en fonction des limites que je risque de rencontrer)

Alors je suis sûrement dans l'erreur, peut être devrais je d'abord me concentrer sur la partie back end avant la partie front end.

je rebondis sur ta phrase du coup " Mais il va bien te falloir un script côté serveur qui fabrique du code HTML" Est ce à dire qu'il n'est vraiment pas adapté de faire cette construction via innerhtml dans un script tout bête ?

Si c'est bien ce que j'ai compris ( et je ne cherche pas de solution toutes faites et rapide nécessairement) , vers où dois je orienter mes recherches ?

Je débute vraiment et mes questions doivent sembler bien bête, mais j'apprends vite ^^ ( et bien sûr si cela peut se faire avec fetch j'en déduis que je vais devoir me mettre à nodejs plus tôt que prévue)

et effectivement innerHtml n'est pas une fonction désolé pour cet abus de langage

merci en tout cas pour ta réponse

Citation:

---

Envoyé par scanloob

Est ce à dire qu'il n'est vraiment pas adapté de faire cette construction via innerhtml dans un script tout bête ?

---

Si, lorsque tu parles de contenu d'une div "dynamique" tu entends qui se remplit en fonction des demandes du client, alors oui, un script côté serveur est indispensable. C'est lui qui va retourner soit du code HTML, soit un objet JSON qui, exploités par JS l'intègreront dans ta div. JS, côté client, ne peut pas à lui tout seul "inventer" des informations qui sont dans une base de données. Il ne peut que demander au serveur d'utiliser ses ressources.
Je ne sais quelle aversion tu as pour PHP, mais le couple PHP - Mysql n'est pas si populaire (80% des sites) par hasard ; leur qualité première étant la facilité d'apprentissage / mise en œuvre et la communauté pour aider. Maintenant, Node.js, pourquoi pas ? Pour débuter, et pour un site qui n'a pas besoin de performances époustouflantes côté serveur, je ne suis pas certain que ce soit le bon choix.
Il va te falloir de toute façon interagir avec le serveur si tu veux du dynamique... Et pour uploader des images, créer une interface d'authentification, etc.

Pour répondre à la question sur innerHTML, le code présent dans la chaine de caractères fournie remplace ceui existant.
Si tu écris...

Code:

---

madiv.innerHTML = '<p>du <b>code</b> HTML</p>'

---

... alors le contenu de la div sera un paragraphe avec un mot en gras, quel que soit ce qu'il y avait avant.

si tu es vraiment debutant, il faut que tu apprennes a faire une page HTML (basique, sans rien)
quand tu es familier avec les balises HTML, tu rajoute du style avec le CSS
quand tu arrives a faire de jolis choses, tu dynamise le site avec du PHP
et quand t'as un site dynamique, tu le rend interactif avec du JS

Bonsoir, je répond tardivement et vous remercie tous pour vos réponses.
J'aurai di commencer par être plus précis dans mes propos. mais vous avez répondu à plusieurs questions que je me posais

Commençons par le plus simple:

@domi65 je sais que le couple ph/mysql représente 80% des sites web mais l'objectif est d'apprendre js de manière intensive . De plus il y a derrière mon projet assez ambitieux une reconversion professionnelle ( en tout cas c'est ce que je vise). Donc je souhaite m'astreindre à certaines règles

@Doksuri Coté HTML / CSS / SASS, sans être un dieu je commence à me défendre , bien que seul la pratique régulière et organisée me soit nécessaire pour faire des choses qu'un dev front end fait en quelques minutes. Il faut que je continue à travailler dur et proprement

Donc pour l'instant j'oublie php et pour mysql c'est comme le vélo même si je n'en n'ai pas fait depuis longtemps ça revient vite.

Et donc j'en déduit que me taper node js est un pré requis pour ce que je veux faire. Au passage je dispose d'un serveur dédié qui me permettra de gérer de manière totale cette partie sans trop de contraintes.

Merci en tout cas pour ces éclaircissements, ce n'est certes pas du debug mais ça me donne une sacrée orientation pour la suite. ( et je prends tous les conseils )

Content de voir que developpez.com est toujours fidèle à sa réputation de conseils et de bienveillance.

Je passerai le post en résolu demain, s'il n'y a pas d'autres remarques! encore un grand merci!

Eh bien bon apprentissage.
Je n'ai aucune source particulière à te conseiller pour apprendre node.js. En ce qui concerne JS et son implémentation dans le navigateur, tu as, si tu ne connais pas déjà, cette excellente ressource.

Cordialement.

d'autres sources : MDN (qui, meme aujourd'hui est toujours ma bible)
t'as du MDN pour le HTML, CSS et JS

https://developer.mozilla.org/fr/docs/Web/HTML

https://developer.mozilla.org/fr/docs/Web/CSS

https://developer.mozilla.org/fr/docs/Web/JavaScript

=> tout en haut a droite, t'as une loupe pour rechercher quelque chose

apres, un tres bon site que j'ai decouvers l'annee derniere est tres bien fait pour "les etapes a suivre" https://roadmap.sh/
avec une section fullstack https://roadmap.sh/full-stack
mais t'as aussi le JS et nodejs https://roadmap.sh/javascript & https://roadmap.sh/nodejs

voila... t'as de la lecture ;) :ccool:

ps : ton apprentissage ne sera pas lineaire... ne te decourage pas a la premiere difficulte !

Merci à vous !!! oui je vais m'accrocher je clos ce fil ! o/