Ce site est optimisé pour être consulté depuis un navigateur moderne dans lequel JavaScript est activé.

Conseils En Développement Web

Zak Blayde

Bonjour,

Voilà j'essaie de créer un site web pour m'entrainer (le plus dur en fait c'est l'idée, tout existe déjà !), et je me demande comment faire pour optimiser une chose.

En partant du principe qu'on fait un site qui s'articule autour d'une architecture fixe (menus à gauche, et en haut), comment faire pour éviter de la redondance dans le code ?

Doit-on vraiment pour chaque page remettre chaque chose ? Par exemple, sur Legendra, la table d'id "menu" est-elle réécrite dans chaque page ? Ou est-ce que c'est du code PHP qui vient l'écrire automatiquement ?

Il y a tellement de stratégies à adopter que j'aurais bien besoin de conseils ^___^

Merci.

Soulhouf

En partant du principe qu'on fait un site qui s'articule autour d'une architecture fixe (menus à gauche, et en haut), comment faire pour éviter de la redondance dans le code ?

J'espère que c'est du dynamique sinon ça vaut pas le coup :ph34r:

Je ne sais pas quel language t'utilises mais je vais te donner un exemple en PHP, les autres c'est pareil.

Tu crées un fichier "header.php" et tu fais un include au début de tous ceux sur lesquels tu veux que ça apparait.

Shinji

Si tu veux faire vraiment simple tu fais des frames toute bête (sachant qu'il y aura que la frame centrale qui changera pour afficher le contenu).

Zak Blayde

Ah non pas de frame, c'est la préhistoire du html ça !

Je vais tester le header.php.

Mais dans le header je mets toutes mes lignes html en echo ?

Zak Blayde

dsl double post :

Du coup dans le header.php j'ai mis toute la première partie du code html redondant.

Ca donne ça :

edit : j'ai tout retiré j'ai l'impression que ça fait bugger la page. Injection PHP inside ?

Pas mal, non ?

Il me reste quand même à insérer les tabulations dans les echo pour l'indentation. Sinon ça fait un code moche.

Mais je trouve ça cool 😉

synbios

Pour le header, si tu n'as rien de dynamique dans ta page, tu peux juste insérer le code html sans les balises ouvrantes et fermantes et les echos et enregistrer ça en hp.

Après si tu as plusieurs pages, le dernier div fermant et la cloture de html peuvent etre mis dans un footer que tu include comme le header.

Zak Blayde

Je n'ai pas trop compris ce que tu me conseilles de faire dans ta première phrase. Tu peux expliciter par un petit exemple ?

Dans l'idéal c'est vrai que j'aurais que le centre de la page à rentrer dans chacune d'elles, donc je vais écrire un footer aussi.

synbios

Je disais que tu peux mettre tes données html directement dans le header.php

Pas besoin des <?php et ?> et des echo, s'il n y a rien de dynamique là-dedans.

Zak Blayde

Ah merde il me semblait que ça fonctionnait pas !!! Je me suis fait chier pour pas grand chose >.<

Merci beaucoup de vos conseils les gars. Je reviendrais sûrement pour d'autres interrogations ^^.

Tiens d'ailleurs j'en ai déjà une, peut-être pour Medion. Comment tu fais dans tes formulaires pour que les apostrophes et les accents soient gérés ? C'est une fonction qui les transforme ou quoi ? Je me demande bien.

Mana

En gros tu fais

header.php qui contient le beandeau et eventuellement menu du haut, footer.php qui contient les infos sur bas, menu.php qui contient les infos du menu (de gauche ou de droite, après tu le mets ou tu veux) et après quand tu veux faire une page tu includes header.php, tu includes ton menu.php, tu mets ce que tu voulais mettre, puis tu inclues footer.php

A la fin ta page ressemble à

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



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



Ma page mon texte blabla




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

avec header contenant au moins

<html>

<head>

</head>

<body>

et footer

</body>

</html>

Medion

Je dirais plutôt :

<?php 

include_once("header.php"); 

include_once("menu.php"); 

?>



Ma page mon texte blabla




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

Histoire de pas ouvrir et fermer les balises php 50 fois, et d'apprendre qu'il faut forcer l'inclusion unique de tout fichier devant être appelé une seule fois (ce qui est par exemple toujours le cas en POO, puisque les includes te servent pas à dupliquer des bouts de code). (juste pour faire l'enculeur de mouche et faire bien dès le début XD)

Zak_blayde => oui pour protéger les apostrophes et guillemets au moment de l'insertion en bdd depuis un formulaire, il y a mysql_escape_string (ou addslashes).

Et si tu veux vraiment faire propre, mysql_real_escape_string en passant la ressource de connexion pour être sur qu'il utilise le bon interclassement.

Je suppose que tu utilises Mysql, et ça donnera ' => \' (mais attention, ça ne protège que pour générer la string de la requête, ça ne met pas le \ dans la BDD, beaucoup de débutants comprennent mal ça).

Après pour chaque sgbd y a une api dédiée, et pour SQL SERVER par exemple ça donnera ' => ''

Sinon pour Legendra, ça utilise un moteur de template (smarty), et j'ai surchargé la méthode principale de la classe du moteur pour que les menus et header soit inclu automatiquement à la compilation du template, donc t'as juste de bête templates pour chaque page/module, sans te précoccuper des includes génériques.

Injection PHP inside ?

J'en doute, regarde :

<?php echo "haha"; ?>

?><?php echo "haha"; ?>

<?php echo "haha";

include_once('toto.php');

Mais si tu peux retrouver ton code, voir si y a pas vraiment un bug, qu'on le fixe.

Et bon courage, vive le dev web !

Zak Blayde

Ok merci 😉

Mais pour les accents ? Ils sont tolérés automatiquement ou t'as une conversion automatique en code genre é ?

Sinon je galère à mort avec le CSS >.< Gérer le placement des parties d'une page c'est ultra casse burnes.

Medion

Ils sont tolérés de base (é et compagnie c'est utile coté HTML quand tu sais pas trop dans quel encodage tu seras et si le site sera assez bien fait pour forcer l'encodage au navigateur, sinon c'est un peu à proscrire à mon sens).

Par contre fais bien attention aux encodages, qui doivent être les mêmes partout, pour que ça marche (des fois ça marche au petit bonheur la chance avec l'annulation des erreurs entre elles mais...) :

Encodage du champ (qui de préférence est le même que celui de la table et de la base)
Encodage de l'interconnexion à la BDD (si tu as pas la main dessus, appelle SET NAMES {encodage} avant tes query
Encodage du fichier qui affiche le tout

Basiquement, le mieux c'est UTF8 (UTF8 sans BOM pour les fichiers UTF8, le BOM fait planter certains navigateurs), qui te permet d'afficher les caractères de n'importe quelle langue.

Maintenant, fais bien attention. La limite des champs comme TEXT n'est pas en nombre de caractère (comme on le lit bien souvent), mais en nombre d'octets, tu auras donc moins de caractères possible en UTF8 (1 à 3 octets selon le caractère) qu'en latin 1, par exemple (1 octet, mais le choix est plus réduit, et dans cas nb caractères = nb octets, d'où la confusion).

Sinon je galère à mort avec le CSS >.< Gérer le placement des parties d'une page c'est ultra casse burnes.

Ouais, je te laisse imaginer quand la page est vraiment complexe et que ça doit marcher sur tous les navigateurs, qui implémentent CSS différemment T_T

(problème que tu retrouveras avec le javascript, youpie, vive MicroSoft)

Zak Blayde

OK. Il faudra que teste alors sans les codes spéciaux. Mais pour le moment je vais rester avec mes é et tout le temps du dev de la structure principale. Une fois que ce sera online je pourrais plus facilement tester sous différents OS et navigateurs.

Je serais heureux si quelqu'un pouvait m'expliquer pourquoi avec le CSS suivant, quand je mets des h1 seuls en <div id="centre">, ils se retrouvent coincés dans une petite zone à droite du navigateur. Si je complète en mettant du texte, la zone s'agrandit et mes h1 reviennent vers le centre, mais sinon, ils sont totalement acculés à droite.

Si je les mets dans et non plus dans un <div> ils reviennent vers le centre mais sont alignés de façon trop louche...

Et quand je modifie la taille de mon navigateur, je me retrouve avec des zones qui se chevauchent... Bref j'ai du m'y prendre pour un pied pour définir le placement de mes zones.

J'ai sérieusement besoin de conseils avisés.

/ZONES/

#tete

{

text-align:center;

padding-top:1%;

}

#menu

{

float: left;

padding-top: 9%;

padding-left: 9%;

}

#centre

{

float: right;

padding-right: 2em;

padding-top: 3%;

padding-left: 19%;

}

#pied

{

padding-top: 31%;

padding-left: 11%;

}[/b]

/BALISES/

body

{

font-family: serif, sans-serif;

color: #39F600;

background-color: black;

}

{

font-family: serif, sans-serif;

text-align: justify;

}

{

font-family: Georgia, "Times new Roman", Times, serif;

font-size: 24px;

text-align: center;

font-style: italic;

}

[/b]h2

{

font-family: Georgia, "Times new Roman", Times, serif;

font-size: 22px;

}

a:link

{

color: #39F600;

}

a:visited

{

color: #39F600;

}

img

{

border: 0;

}

table

{

border: 2;

}

{

valign: top;

}

{

border: 1;

}

address

{

margin-top: 2em;

border-top: thin dotted;

font-size: 12px;

}

ul.navbar

{

list-style-type: none;

padding-left: 0;

padding-top: 13em;

margin: 0;

position: absolute;

top: 2em;

left: 1em;

width: 10em;

}

li.elements

{

background: black;

margin: 0,5em 0;

padding: 0,3em;

border-left: 1em solid green;

border-right: 1em solid green;

}

ul.navbar a

{

text-decoration : none

}

li.titrenavbar

{

font-family: "Comic Sans MS", serif;

font-weight: bold;

font-size: 20px;

}

Medion

Tu peux donner le html en même temps ? (si ça te dérange pas)

Mais pour la "droite", tu as mis "float:right", donc c'est normal, ça se positionnera le plus à droite possible dans le flux, et donc plus ça sera large, plus la limite gauche reviendra vers le centre (float:right revient juste à dire que la limite droite sera tout à droite du conteneur parent).

Zak Blayde

Oh c'était le float right qui cassait tout. J'aurais du y penser !

edit : arf t'as été plus rapide que moi !

Je remets tout le code de l'index avec les includes comme ça on verra si y'a une merde php comme j'avais remarqué hier. (notamment le navigateur me proposait d'enregistrer index.php quand je cliquais sur ajouter une réponse).

index.php

<?php

include_once("header.php");

include_once("menu.php");


	

	Bienvenue sur <b>CyberPunk's NoT DeaD</b>, le site dédié à un mouvement prétendu mort mais dont la carcasse s'agite encore, prise de convulsions à chaque avancée du pouvoir des multinationales, des grandes agences de presse et en adéquation avec celles des réseaux de communication.


	Ce site a pour vocation de rassembler des articles dans tous les domaines artistiques ou ludiques sur le mouvement et ses dérivés très proches.

<?php

include("footer.php");

header.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8"/>

<title>CyberPunK's NoT DeaD !</title>

<link href="cyberpunksnotdead.css" rel="stylesheet" type="text/css" />

</head>

<body>


	[img]images/banniere.png[/img]

[/quote]

menu.php

	<ul class = "navbar">

	<li class="titrenavbar">Navigation</li>

	<li class="elements">-----------------------</li>

	<li class="elements">[url=/cyberpunksnotdead/]Accueil[/url]</li>

	<li class="elements">[url=/cyberpunksnotdead/articles.php]Articles[/url]</li>

	<li class="elements">-----------------------</li>



	<li class="titrenavbar">Liens</li>

	<li class="elements">-----------------------</li>

	<li class="elements">[url=http://cyberpunk.liber-mundi.org/]Cyberpunk 2021[/url]</li>

	<li class="elements">-----------------------</li>

	</ul>

[/quote]

footer.php

	<address>WebSite vomi par Zak Blayde</address>

</body>

</html>

Medion

Ca a l'air good

Ton code est propre, en tout cas :yes:

Zak Blayde

Et pour l'instant xhtml strict approved 😃 (avec un contenu aussi simpliste c'pas trop dur XD). Mon masochisme peut donc continuer à s'épanouir.

J'arrive pas à centrer un pov tableau par contre. Je suppose qu'il faut que j'ai un bloc avec un text-align: center; autour de mon table, mais je vois pas quoi utiliser. J'ai essayé span mais ça me centre le texte qui est dans le tableau au lieu de centrer le tableau.

Medion

<span> est un conteneur de type inline, il est donc hors de question de l'utiliser pout centrer une table ou tout autre élément (ce qui se fait via des type block (propriété display))

La table doit se trouver dans une div style="text-align:center", avoir margin:auto sur elle; et width = ta width (100% si tu veux pas préciser)

Cette margin:auto n'est pas nécessaire pour tous les browsers, mais si tu veux que ça marche partout, t'es obligé ^^

Mana

(si tu fais include_once, utilise le aussi pour ton footer hein ^^)

Page suivante »