Méthode général de conception de site PHP

Je voulais savoir si la méthode que j'utilise pour mes sites est bonne ou non étant donné que je n'ai suivi aucune formation , et que je me suis "autoformé"

Donc en gros j'ai ma page index.php contient ceci

Recupere $NomPage
Si $NomPage=GaleriePhoto Recupere$iD

si $NomPage=GaleriePhoto include $NomPage.".php?img=".$iD;
else
include $NomPage.".php";

Et donc j'ai mes pages par exemple
Acceuil.php
Admin.php
Galerie.php
etc..

Donc j'inclue la page choisie dans mon index.php et s'il y a des parametres supplémentaires ,
je les recois dans index , pour les renvoi à la page concernée...

Salut,

tout d'abord il faut comprendre le mécanisme du 'include' qui n'est pas la pour remplacer une iframe mais pour partitionner son script côté serveur pour éviter les redondance et faciliter la réutilisabilité.

Il faut s'imaginer qu'un include va tout simplement inclure comme script le texte inclus dans un autre fichier (à ceci près qu'il va falloir replacer des balises php <?php ?> à l'intérieur du fichier inclus s'il ne contient que du script par exemple...). Tout se fait côté serveur donc pas au dessus de HTTP donc ceci :

include $NomPage.".php?img=".$iD

est faux. Le passage de paramètres ne se fait pas comme ça étant donné que cela est un passage de parametre HTTP...

C'est plutot le script appelé qui va se charger de récupérer ses propres paramètres ce qui évite de gérer des cas particuliers dans le script appelant... le script appelé va pouvoir les récupérer de la même manière que le script appelant.

De plus tu ne filtre pas le paramètre $NomPage ce qui peut donner des effest de bord et failles énormes puisqu'en changeant le nom de la variable dans l'url on va pouvoir inclure n'importe quel fichier... Il faut filtrer les paramètres avant de les traiter et les utiliser brut de pomme. L'idéal étant surement un tableau de mapping clé->nom de page.

En résumé pour bien faire les choses dans ton cas, c'est à dire une architecture qui convient bien à des petits besoins, ça ressemblerait plus à cela :

mapping.php :

$arPageMapping = array(
"page1"=>"mapage1.php",
"galerie"=>"magalerie.php",
...
);

index.php (qui ne nécessite pas la connaisssance des paramètres nécéssaires):

include("mapping.php");
if(isset($_GET['cle_page']) && isset($arPageMapping[$_GET['cle_page']])){
include($arPageMapping[$_GET['cle_page']]);
} else {
echo 'page inconnue';
}

magalerie.php (qui sait de quels paramètres elle a besoin):

Recupere $ID

Bon courage

Salut sky, disons que j'ai tout simplifié , car je test tout les parametres que je recois justement pour éviter le passage de script via l'url
En fait mon site est visible sur http://nekobarbare.free.fr
il fonctionne , mais je pense que j'ai pas mal fait de redondance niveau code... et je voudrais pour mes prochains site améliorer mon architecture
Qu'en penses tu du code actuel ?

En fait, pour tout te dire, il y a plein de choses qui ne vont pas :

- Le php est un langage serveur, donc je n'y est pas accès en tant que client (et heureusement d'ailleurs).

- Tu utilises un Doctype HTML 4.01 ce qui fait passer IE en mode Quirks. Utiliser un Doctype XHTML à la place facilite grandement la mise en forme des données car cela permet de faire un maximum de chose de manière standard.

- Tu n'utilises pas de balises structurantes (exemple <h1>, <h2>, etc... pour structurer les titres).

- Tu as désactivé par une bidouille Javascript les clicks droits et séléctions de textes. Ce stratagème qui je pense à pour but d'empecher les utilisateur de faire du copier/coller sur les images et le texte, ça ne se fait plus et ça ne se fait pas. D'une part parce qu'en désactivant JS il ne fonctionne plus, d'autre part parce que le web n'est pas fait comme cela et que ça pose des soucis d'ergonomie, mais aussi parce que ça donne des effets de bord (dans ton cas on ne peut pas cliquer sur les éléments de formulaires. Tu risques pas d'avoir des messages sur ton formulaire de contacts).

- Ton design est sympa visuellement mais des erreurs de calage des éléments les uns par rapports aux autres subsistent. Tu as également des erreurs de validation HTML et CSS. Bien choisir son Doctype et valider son code est la première des étapes, ça permet d'éliminer des soucis d'affichages qui résulteraient des erreurs d'interprétations.

- La taille de tes images n'est pas du tout optimisée. Résultat les pages sont vraiment très longues à charger. Exemple, la page "travaux" (dont le titre est écrit "traveaux") contient des vignettes qui sont en fait les images originales rétrécies, donc on télécharge une image très grosse pour la voir riquiqui.

- Tu utilises des images comme éléments de textes. Je vise en particulier les titres de tes pages qui devraient être du texte dans une balise <hn>. Si tu veux y mettre une image, pense à mettre un attribut "alt" pour le contenu alternatif si l'image ne s'affiche pas (et en règle générale il faut mettre cette attribut sur toutes les balises <img>). Je viens de m'apercevoir également que cette image est la bande sur toutes la largeur. Du coup sur chaque nouvelle page on retélécharge quasiment la meme image.

- Ton hébergement chez free rend la lourdeur du chargement de la page encore pire. Il y a des hébergements très peu chers qui te permettraient d'avoir les memes fonctionalités que chez free (et surement plus d'ailleurs) avec une bande passante bien meilleure.

- Les titres de tes pages sont tous les mêmes (je parle de la balise <title> dans le <head>) et comme tu n'utilises pas de balises structurantes, les moteurs de recherche vont s'y perdre et rien indexer.

Voila, c'est a peu près ce que j'ai pu voir en cinq minutes. Ce sont des choses qui sont facilement retouchables.

Bon courage

Donc en fait c'est un site pour une amie.

Merci je vais essayer de corriger tout cela voir si le site , charge plus vite.
Sinon niveau code tu n'as pas vu du coup , faudra que je colle une partie du code (index.php)

Par contre le design n'est pas de moi , j'ai simplement réalisé le code et la mise en page CSS ( donc l'erreur sur "Traveaux" y été déja lol , bien que j'ai demandé de la corriger )

C'est vrais j'ai désactivé le click droit pour éviter qu'elle se fasse "facilement" piquer ces images , du moins pour décourager l'utilisateur de base on va dire..
Mais chez moi les formulaires fonctionnent..car je les avaient bien testé...

Donc pour charger les images en vignette ? tu me conseille de creer carément des vignette plutot que de charger l'image grande et l'afficher toute petite alors?

Pour suivre tes conseils Sky , j'ai besoin d'infos :

a écrit :
- La taille de tes images n'est pas du tout optimisée. Résultat les pages sont vraiment très longues à charger. Exemple, la page "travaux" (dont le titre est écrit "traveaux") contient des vignettes qui sont en fait les images originales rétrécies, donc on télécharge une image très grosse pour la voir riquiqui.

Pourrais tu m'expliquer une méthode pour générer des vignettes afin d'éviter de charger en miniature les img taille reel ? ou m'indiquer une piste a suivre?

a écrit :
- Les titres de tes pages sont tous les mêmes (je parle de la balise <title> dans le <head>) et comme tu n'utilises pas de balises structurantes, les moteurs de recherche vont s'y perdre et rien indexer.

Etant donné que je fait des "include" de mes pages , je ne m'odifie pas le title...jdevrais ptet faire passer en variable le titre en fct du nom de la page alors...

a écrit :

Tu utilises des images comme éléments de textes. Je vise en particulier les titres de tes pages qui devraient être du texte dans une balise <hn>. Si tu veux y mettre une image, pense à mettre un attribut "alt" pour le contenu alternatif si l'image ne s'affiche pas (et en règle générale il faut mettre cette attribut sur toutes les balises <img>). Je viens de m'apercevoir également que cette image est la bande sur toutes la largeur. Du coup sur chaque nouvelle page on retélécharge quasiment la meme image.

Effectivement avec le design que l'on m'a fourni , les titre de page étaient déja inscrit ( en plus avec des fautes ), par contre cest surtout pour la police et le style du texte que j'ai laissé l'image...Car si j'ai un équivalent en méthode texte , je prend sans PB
Mais je vais faire des recherches du coté de <hn>

rockt13 a écrit :
Pourrais tu m'expliquer une méthode pour générer des vignettes afin d'éviter de charger en miniature les img taille reel ? ou m'indiquer une piste a suivre?

Smart Image Resizer, par exemple.

OK du coup ce script , creer directement des "vignette" des images uplaodés , et aprés dans le lien on peut appeler soit la vignette , soit l'image taille reel.
Tout dépend du lien c'est bien ca ?
Et pour en revenir a ce que disais skywalker par rapport aux titres en image d'aprés qques recherche j'ai trouvé ceci:

a écrit :

Dans l'utilisation réelle d'un site, on peut penser à un titre en image. Mais ce titre étant un élément purement présentationnel, il n'est pas question de l'afficher avec la balise <img> ! Nous allons donc faire quelque chose comme ça :

<h1><span>Titre de la section</span></h1> et d'afficher l'image et de cacher le texte d'un h1 ainsi :
 h1 { 
 background:url(image.jpg);
 }
span {
 display:none;
 }

C'est ce à quoi tu faisait alusion ?
Modifié par rockt13 (16 Apr 2008 - 23:42)

a écrit :
Etant donné que je fait des "include" de mes pages , je ne m'odifie pas le title...jdevrais ptet faire passer en variable le titre en fct du nom de la page alors...

Oui, en effet... Le fait de gérer une table de mapping peut également permettre de stocker des informations sur chaque page comme par exemple le titre.

a écrit :
Tout dépend du lien c'est bien ca ?

Oui, il y a un exemple sur la page de ce script php, tu ne devrais pas avoir trop de soucis à intégrer cette solution. Les images sont en fait redimensionnées à la volée ce qui permet de ne pas avoir a faire de redimensionnement à la main + upload par ftp. Ca va utilliser des ressources serveurs (assez peu) mais beaucoup moins de bande passante, résultat ta page va charger beaucoup plus vite...

a écrit :
C'est ce à quoi tu faisait alusion ?

Oui... Je ne sais pas si c'est la meilleure solution, d'autres te le diront peut etre mieux que moi, mais dans cette problématique j'aurais tendance à faire comme ça (j'utillise en fait rarement des images à la place de textes).

@++

OK merci pour les conseils.
Par contre j'ai encore une question par rapport au

<h1><span>Titre de la section</span></h1> et d'afficher l'image et de cacher le texte d'un h1 ainsi :
 h1 { 
 background:url(image.jpg);
 }
span {
 display:none;
 }

Car si je fait comme ca , finalement , niveau chargement je ne vais pas gagner grand chose?
C'est juste niveau "propreté" non ?

Non ça ne changera rien question chargement.

Par contre en effet niveau propreté ce sera forcément mieux ne serait-ce que pour le référencement et l'accéssibilité, quoique pour ce dernier je n'en suis pas sur (je ne suis pas sur par exemple que les lecteurs d'ecrans lisent les éléments en display:none). Je vais donc emettre un doute quant à l'accessibilité et laisser quelqu'un de plus expérimenté te donner des détails.

Et pour l'utilisation du smart image resizer ; l'auteur ne fourni pas une doc cest un peut génant , bien qu'il y ai un exemple ...ceci dit les images en cash , se crees au moment de l'uplaod ? ou au moment de l'appel via l'url spécial ?
Car si cest au moment de l'uplaod , je suis bon pour supprimer et réuplaoder toutes les images
Modifié par rockt13 (17 Apr 2008 - 12:07)

Non justement... c'est au moment de l'affichage de l'image.

Le principe c'est de mettre dans l'attribut src une url vers le script PHP, en lui fournissant en paramètre le chemin vers l'image a retailler et la taille bien entendu ainsi que d'autres paramètres optionnels je suppose.

Le script, à l'aide de l'extension php GD qui permet de faire du traitement d'image en php, va retrouver l'image, la retailler et envoyer directement les données de cette image retaillée dans la sortie standard (ici dans la réponse HTTP) en déclarant le bon content-type (genre "image/png" pour du PNG, etc...). Si tu ne le sais pas encore, Php n'est pas la pour générer uniquement des fichiers HTML mais en réalité tout type de formats(html,xml,css,js,csv,txt,etc...), meme binaires (images, pdf, formats propriétaires excel, word) pour peu que le bon Content-Type soit déclaré et les données renvoyées cohérentes.
Donc aucun stockage sur le serveur n'est effectué. L'avantage est que tu n'as pas à faire par avance tes vignettes et que demain si tu désires changer la taille d'affichage de celles-ci tu as juste à changer les paramètres d'appels du script. Tout en utilisant pas plus de bande passante que nécéssaire bien entendu...

OUi je savais effectivement que php pouvais faire pas mal de chose , car j'avais déja fait de l'exportation format excel justement , et c'étais assez puissant.
Par Contre je ne m'étais jamais penché coté image , enfin du coup c'est super interessant , je vais voir si sur mon serv FREE je peux le mettre,puis changer mon script de ma galerie php
Y a til un moyen de mesurer la vitesse de cahrgement d"une page pour comparer avant et aprés?

La config php de free contient l'extension GD donc ca devrait etre bon.

Faire un test sur la vitesse n'est pas forcément intéressant puisque ça va varier en fonction des la bande passante de free au moment du test, de la tienne, de plein de chose (objets en cache ou pas)... Par contre ce qui est interressant c'est de mesurer la taille totale de la page, images, css et scripts compris...

Edit : ton image de fond fait a elle seule 405Ko... c'est énooooooorme!!!

Edit 2 : La pages "traveaux" fait plus de 5Mo et ce SANS les images insérée via CSS. Une ligne en 56K (bon ok y en a plus beaucoup mais parfois on surfe sur des réseaux très limités) mettrait dans des conditions optimales (qui ne le sont pas avec free comme hébergeur) un quart d'heure à charger... C'est pour te donner un ordre d'idée de la taille de ta page.
Modifié par skywalk3r (17 Apr 2008 - 14:42)

Voila j'ai mis en place le script sur mon site
http://nekobarbare.Free.fr
Ca à l'air de fonctionner assez bien . C'est dommage , page 3 j'ai un décalage sans doute à cause d'un débordement de ma div pourtant le bloc contenant chaque image a un width de 250px ; et moi j'ai réglé mes appercu pour avoir width=100 et height=100