Partage

Structure des fichiers d'un site web

Comment bien structurer les fichiers de son site web

Sujet résolu

22 juillet 2017 à 18:32:58

Bonjour, je suis entrain de créer un site web et après toute les formations que j'ai suivi, je ne sait pas comment structurer les fichiers de mon site web.

Voici la structure de fichiers que je met de base:
Dans le fichier index.php je met un code qui détecte si $_GET['boutique'], si $_GET['news'], si $_GET['forum'] est définit et si non, j'affiche la page d'accueil !

en gros mon fichier index.php ressemble à ca:

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width; initial-scale=0.2;">
<?php
if(isset($_GET["page"])){

	//Boutique
	if($_GET["page"]=="boutique"){
		include("includes/pages/boutique.php");
	}

	//DevBlog
	elseif($_GET["page"]=="devblog"){
		include("includes/pages/devblog.php");
	}

	//Stream Platform
	elseif($_GET["page"]=="VineriumStream"){
		include("includes/pages/stream.php");
	}

	//Conditions d'utilisation
	elseif($_GET["page"]=="cgu"){
		include("includes/pages/cgu.php");
	}

	//Mini Jeux
	elseif($_GET["page"]=="minijeux"){
		include("includes/pages/minijeux.php");
	}

	//Staff
	elseif($_GET["page"]=="staff"){
		include("includes/pages/staff.php");
	}

	//Nous rejoindre
	elseif($_GET["page"]=="nousRejoindre"){
		include("includes/pages/nousRejoindre.php");
	}

	//Nouveautés
	elseif($_GET["page"]=="news"){
		include("includes/pages/news.php");
	}

	//Inscription
	elseif($_GET["page"]=="inscription"){
		include("includes/pages/inscription.php");
	}

	//Connexion
	elseif($_GET["page"]=="connexion"){
		include("includes/pages/connexion.php");
	}

	//Profil
	elseif($_GET["page"]=="profil"){
		include("includes/pages/profil.php");
	}

	//404 Page
	else{
		include("includes/404.php");
	}

}else{
	include("includes/pages/accueil.php");
}
?>
</html>

Mais je pense qu'il y a une bien meilleure facon de faire la structure d'une page web car mon plus gros problème est avec les styles est que je soit à chaque fois importer:

Le style.css de la barre de navigation (nav.css)
Le style.css du footer (footer.css)
Le style.css de la page (accueil.css ou news.css etc...)

Et à chaque début de code CSS je doit mettre:
body{margin:0;}

Et je DÉTESTE les répétitions de code, et je pense que un code avec TROP de répétitions est un mauvais code

En bref, je pense que ma manière d'organiser les fichiers d'un site web n'est pas du tout bonne et je recherche un développeur qui as de l'experience dans le millieu et qui pourrais me dire comment il organise les fichiers de son site web la plus part du temps.

Merci d'avance

eclairia

22 juillet 2017 à 18:49:44

Bonjour,

Premier problème dans ta structure est que ta structure html est incomplète.

Exemple de bonne structure HTML:

<!DOCTYPE html>
<html>
	<head>
		<title>Le titre de ma page</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width; initial-scale=0.2;">
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>

	<body lang="fr">
		<header>
			
		</header>

		<nav>
			
		</nav>

		<footer>
			
		</footer>
	</body>
</html>

Ensuite, si tu veux récupérer ton code php dans chaque page que tu fais, je te conseille de le mettre dans un fichier à part et de l'appeler dans ton fichier index.php grâce à un include.

Fichier verification.php:

<?php
//Boutique
if($_GET["page"]=="boutique"){
    include("includes/pages/boutique.php");
}

//DevBlog
elseif($_GET["page"]=="devblog"){
    include("includes/pages/devblog.php");
}

//Stream Platform
elseif($_GET["page"]=="VineriumStream"){
    include("includes/pages/stream.php");
}

//Conditions d'utilisation
elseif($_GET["page"]=="cgu"){
    include("includes/pages/cgu.php");
}

//Mini Jeux
elseif($_GET["page"]=="minijeux"){
    include("includes/pages/minijeux.php");
}

//Staff
elseif($_GET["page"]=="staff"){
    include("includes/pages/staff.php");
}

//Nous rejoindre
elseif($_GET["page"]=="nousRejoindre"){
    include("includes/pages/nousRejoindre.php");
}

//Nouveautés
elseif($_GET["page"]=="news"){
    include("includes/pages/news.php");
}

//Inscription
elseif($_GET["page"]=="inscription"){
    include("includes/pages/inscription.php");
}

//Connexion
elseif($_GET["page"]=="connexion"){
    include("includes/pages/connexion.php");
}

//Profil
elseif($_GET["page"]=="profil"){
    include("includes/pages/profil.php");
}

else{
	include("includes/404.php");
}

Et tu n'as plus qu'à rajouter un include pour appeler le fichier là où c'est nécessaire.

<?php include("verification.php"); ?>

Tu n'as pas besoin d'avoir plusieurs fichiers css (un pour le footer, un pour le header...), le mieux est de tout mettre dans le même fichier css qui s'appelle par convention style.css.

Si tu veux une structure plus professionnelle, regarde du côté de la structure MVC (Model View Controller).

"Ils ne savaient pas que c'était impossible, alors ils l'ont fait" Mark Twain

Eloi BERLINGER

23 juillet 2017 à 11:24:15

les balises <nav> <header> et <footer> sont dans les includes, mais es-ce que les includes augmentent le temps de chargement ?

eclairia

23 juillet 2017 à 11:40:37

Je crois que les include augmentent le temps de chargement mais cela se compte en millisecondes. Il vaut mieux avoir un code bien organisé avec des include mais avec un temps de chargement un tout petit petit petit petit petit peu ralenti par les include.

C'est tellement minime que le temps de chargement des include deviennent osef.

-
Edité par eclairia 23 juillet 2017 à 11:40:50

"Ils ne savaient pas que c'était impossible, alors ils l'ont fait" Mark Twain

EmmanuelBeziat

23 juillet 2017 à 14:04:22

Salut,

Le style.css de la barre de navigation (nav.css)
Le style.css du footer (footer.css)
Le style.css de la page (accueil.css ou news.css etc...)

Aie un seul fichier CSS pour l'ensemble du site, plutôt que de segmenter comme ça.

Ensuite, pour avoir une architecture plus propre, il te faudrait un routeur. Tourne-toi vers un Framework léger, comme Slim ou Lumen. C'est rapide à prendre en main, et ça permet d'avoir un système de templates (c'est à dire des fichiers "types" de page ; avec le code global de contenu, et des portions de code à inclure dans les différentes autres pages.

C'est comme ça qu'on fait proprement.

-
Edité par EmmanuelBeziat 23 juillet 2017 à 14:06:05

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

Eloi BERLINGER

24 juillet 2017 à 15:17:34

Je n'utilise pas de Framework/templates, je préfère faire le travail moi meme et savoir que le code m'appartient et pour le css je ne voit pas comment faire pour tout mettre dans un fichier style.css sans répéter à chaque fois le css du footer et du nav

eclairia

24 juillet 2017 à 15:20:32

Je ne comprends pas où tu bloques pour le css de ton nav et footer. Il te suffit en css d'utiliser footer{} et nav{} et tu appelles ton fichier css dans toutes les pages nécessaires, ainsi cela appliquera ton css sur ton footer et ton nav dans toutes les pages où ton fichier css est appelé.

"Ils ne savaient pas que c'était impossible, alors ils l'ont fait" Mark Twain

EmmanuelBeziat

24 juillet 2017 à 18:11:55

Je ne comprends pas bien ta démarche, là. Le fait de ne pas utiliser de Framework ne t'empêche pas de coder, ça te donne une structure de travail. Personne ne te "prend" ton code sous prétexte que tu utilises un Framework, c'est toujours le tien.

Et pour ta question sur le CSS, je ne comprend pas ce que tu ne comprends pas ? Le principe, c'est d'avoir un CSS pour tout le site, chargé sur chaque page, pas de le réécrire pour chaque page.

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

Eloi BERLINGER

25 juillet 2017 à 9:56:17

rhooManu a écrit:

Je ne comprends pas bien ta démarche, là. Le fait de ne pas utiliser de Framework ne t'empêche pas de coder, ça te donne une structure de travail. Personne ne te "prend" ton code sous prétexte que tu utilises un Framework, c'est toujours le tien.

Et pour ta question sur le CSS, je ne comprend pas ce que tu ne comprends pas ? Le principe, c'est d'avoir un CSS pour tout le site, chargé sur chaque page, pas de le réécrire pour chaque page.

Ca n'est pas ce que je veux dire, en GROS je préfère faire les choses moi même !

Quand au css si je met tout dans un fichier ce n'est pas grave si ducoup le css essaye de selectionner des elements qui sont dans une autre page e donc qui n'existent pas ?

eclairia

25 juillet 2017 à 10:02:20

Je ne comprends pas pourquoi certains de tes éléments ne sauront pas sélectionnés si tu mets tout ton code dans un seul fichier CSS? Il te suffit juste de remplacer ton lien link de ton nav par celui de ton fichier UNIQUE style.css.

Sinon, ce n'est pas grave du tout si ton fichier css sélectionne des éléments qui n'existent pas, tu n'auras pas d'erreur, juste un fichier plus lourd et donc un chargement de tes pages plus long pour rien.

"Ils ne savaient pas que c'était impossible, alors ils l'ont fait" Mark Twain

EmmanuelBeziat

25 juillet 2017 à 14:08:50

eclairia a écrit:

juste un fichier plus lourd et donc un chargement de tes pages plus long pour rien.

Ben pas pour rien : il aura chargé les éléments pour les autres pages, qui n'auront donc pas à le faire. Et il est bien plus efficace de faire une seule requête http pour un fichier de taille moyenne que plein de requêtes pour plein de petits fichiers (dont la taille totale sera toujours plus lourde que le fichier seul de toutes façons).

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

MrChampy

25 juillet 2017 à 14:10:46

+1 VDD

Darev

25 juillet 2017 à 14:57:54

EloiOfficiel a écrit:

Ca n'est pas ce que je veux dire, en GROS je préfère faire les choses moi même !

Et donc ré-inventer la roue (en mal fait) ? J'ai été comme toi au début, je voulais tout maîtriser de A à Z. Pas de CMS, pas de framework, pas de librairies Javascript... j'étais naïf !

La bonne façon c'est d'éviter de tout refaire sans cesse et de galérer à maintenir son code dans le temps. Crois-nous, tu vas gagner en productivité !

D'ailleurs, saches que quand tu commences à faire du copier coller, ou à faire du code redondant/répétitif, il faut tout de suite s'arrêter et se dire "je fais mal les choses là" ! Utiliser un framework te permet d'avoir une structure de base, une façon de faire "propre"... et si demain tu es amené à travail avec d'autres personnes, ça te permettra de faire (un peu) du travail collaboratif.

EloiOfficiel a écrit:

Quand au css si je met tout dans un fichier ce n'est pas grave si ducoup le css essaye de selectionner des elements qui sont dans une autre page e donc qui n'existent pas ?

Il vaut mieux charger un fichier CSS un peu plus gros, que plusieurs petits fichiers . Trop de requêtes c'est mal ! Sache d'ailleurs que ton navigateur garde en "cache" une fois chargé. Donc tu le charges une fois et ensuite tu gagnes en performance.

C'est aussi pour cette raison que parfois, tu dois faire CTRL+F5 pour bien forcer tes modifications CSS.

Eloi BERLINGER

25 juillet 2017 à 16:35:50

Ok merci beaucoup, j'ai eu ma réponse