IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

PHP & Base de données Discussion :

gérer des images


Sujet :

PHP & Base de données

  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Septembre 2010
    Messages
    69
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Septembre 2010
    Messages : 69
    Par défaut gérer des images
    bonjour, je voudrais savoir la meilleur façon de gérer des images :

    L'admin du site que je suis entrain de faire doit pouvoir insérer 3 photos (jusque là, pas de problème)

    ensuite, dans la fiche produit, J'aimerais qu'il y ai une grande photo et 3 petite en dessous. Quand on clic sur une petite, elle s'affiche en grand.

    quel est la meilleur façon de gérer cela ?

    que faut-il mettre dans les champ de la base de donnée ?

    bref comment feriez vous pour insérer trois photos et avoir sur la page

    3 petite et 1 grande sans que ça prenne 2min a charger ?

    merci d'avance cFranssen

  2. #2
    Membre Expert
    Avatar de gene69
    Profil pro
    Inscrit en
    Janvier 2006
    Messages
    1 769
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Janvier 2006
    Messages : 1 769
    Par défaut
    C'est impossible.

    Si c'est lent c'est que ton image est trop grosse. php ne fera rien contre ça. Après tu peux faire une belle interface distrayante pour que la personne n'ai pas trop l'impression d'attendre.

  3. #3
    Membre éclairé
    Profil pro
    Inscrit en
    Novembre 2010
    Messages
    72
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : Novembre 2010
    Messages : 72
    Par défaut
    salut,

    pour ce faire il faudra procéder de cette façon :

    1 - lors de l'ajout d'image tu fais un Upload des images grâce a PHP et tu stocke leurs noms dans une BDD.
    2 - tu prends ces photos et tu fais un redimensionnement de ces images (librairie GD ou ImageMagick(préférence perso)) pour obtenir des miniatures que tu enregistre avec par exemple : nom_image_small.jpg sachant que cette image se nomme nom_image.jpg
    3- tu utilises Javascript pour afficher tes images dans ta page avec le chargement de l'image normale en grand format et de 3 miniatures.
    4- action au passage de la souris tu fait un rechargement du conteneur de l'image grand format en fonction de la valeur de l'image miniature de l'action.

    Et voila pas de chargement lourd et une optimisation nickel.

    Si tu souhaites un niveau d'accessibilité, il suffira de faire un paramètre sur ta page avec l'id de l'image a chargé en grand format et de mettre le lien sur chaque miniature avec un return false sur la fonction js associé pour les gens qui ont javascript ne rechargent eux pas la page.

    Bonne chance

  4. #4
    Membre confirmé
    Profil pro
    Inscrit en
    Septembre 2010
    Messages
    69
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Septembre 2010
    Messages : 69
    Par défaut
    Il faut donc uploader une image, l'enregistrer en taille originale et en petite (2 fois la même image mais pas de la même taille sur mon serveur. C'est ça ?

    donc 2 champ par photos dans ma bd, un "mini" et un "originale" ?

    pour le javascript, savez vous ou je peu trouver un code ? car je n'y connais pas grand chose au javaScript.

    merci d'avance

  5. #5
    Membre éclairé
    Profil pro
    Inscrit en
    Novembre 2010
    Messages
    72
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : Novembre 2010
    Messages : 72
    Par défaut
    Pour les images c'est cela.

    Pour le JavaScript c'est assez simple il suffit de faire un script simple :

    dans le head :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <script type='text/javascript'>
      function modifie_image(param){
        document.getElementById('GDimage').src='img/'+param;
      }
     
    </script>


    dans le body : (imageGD1,imageGD3,imageGD2 = nom de l'image + extension)

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <img src='nom_imageGD1' id='GDimage'/>
    <img src='nom_imagePT1' onmouseover="javascript:modifie_image('imageGD1');" />
    <img src='nom_imagePT2' onmouseover="javascript:modifie_image('imageGD2');" />
    <img src='nom_imagePT3' onmouseover="javascript:modifie_image('imageGD3');" />


    Bon courage

  6. #6
    Membre chevronné Avatar de rikemSen
    Homme Profil pro
    Analyste Développeur Web - Fizzup.com
    Inscrit en
    Décembre 2007
    Messages
    387
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Analyste Développeur Web - Fizzup.com
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Décembre 2007
    Messages : 387
    Par défaut
    Pour les images, un champs en base de données suffit.

    champs "image" et champs "extension"

    nom_de_limage / .jpg (exemple)

    ensuite tu feras un

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    //pour l'originale
    echo '<img src="url/de/limage'.$resultat['image'].$resultat['extension'].'" />';
    //pour la miniature
    echo '<img src="url/de/limage'.$resultat['image'].'_small'.$resultat['extension'].'" />';

  7. #7
    Membre confirmé
    Profil pro
    Inscrit en
    Septembre 2010
    Messages
    69
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Septembre 2010
    Messages : 69
    Par défaut
    bonjour, radicaldreamer

    je ne voie pas ce que j'y gagne car dans les 2 cas j'ai 2 champ dans la base



    larffas68

    merci je teste de suite

  8. #8
    Membre confirmé
    Profil pro
    Inscrit en
    Septembre 2010
    Messages
    69
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Septembre 2010
    Messages : 69
    Par défaut
    re, j'ai une problème avec le javascript:

    il n'y a pas de grande image quand je passe la souris dessus.

    j'ai certainement fait une erreur

    voici mon code:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>admin bartho</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="style_admin.css" rel="stylesheet" type="text/css" media="all" />
     
     
    <script type='text/javascript'>
    function modifie_image(param){
    document.getElementById('GDimage').src='img/big/'+param;
    }
     
    </script>
     
     
     
    </head>
    <body>
     
    	<div id="menu">	
    		<ul>
    			<li><a href="ajouts.php" accesskey="1" title="ajouter">ajouter</a></li>
    			<li><a href="modifier.php" accesskey="2" title="supp">modifier</a></li>
    			<li><a href="supp.php" accesskey="2" title="supp">supprimer</a></li>
     
    			<li><a href="index.html" accesskey="2" title="site">retour au site client</a></li>
    		</ul>
     
    			</div>
    	<div id="page">
     
     
     
    <img src='DSC00633.JPG' id='GDimage'/>
    <img src='/img/mini/Efco/DSC00634.JPG' onmouseover="javascript:modifie_image('DSC00633.JPG');" />
    <img src='/img/mini/Efco/DSC00634.JPG' onmouseover="javascript:modifie_image('DSC00633.JPG');" />
    <img src='/img/mini/Efco/DSC00634.JPG' onmouseover="javascript:modifie_image('DSC00633.JPG');" />
     
     
     
    	</div>
     
    </body>
    </html>

  9. #9
    Membre confirmé
    Profil pro
    Inscrit en
    Septembre 2010
    Messages
    69
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Septembre 2010
    Messages : 69
    Par défaut
    c'est bon, ça fonctionne (j'avais oublier un "/")

    mais est-il possible d'avoir une grande image dès le chargement de la page ?

  10. #10
    Membre éclairé
    Profil pro
    Inscrit en
    Novembre 2010
    Messages
    72
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : Novembre 2010
    Messages : 72
    Par défaut
    Oui la balise image :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <img src='img/big/DSC00633.JPG' id='GDimage'/>
    est prévu pour faire apparaitre ta grande image

  11. #11
    Membre chevronné Avatar de rikemSen
    Homme Profil pro
    Analyste Développeur Web - Fizzup.com
    Inscrit en
    Décembre 2007
    Messages
    387
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Analyste Développeur Web - Fizzup.com
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Décembre 2007
    Messages : 387
    Par défaut
    Citation Envoyé par cFranssen Voir le message
    bonjour, radicaldreamer

    je ne voie pas ce que j'y gagne car dans les 2 cas j'ai 2 champ dans la base
    Pourtant c'est utile si tu as 3 miniatures de tailles différents. Ou même 2.
    Ensuite je te dis une astuce à toi de l'utiliser ou pas. Si tu ne vois pas, c'est pas grave, juste pour te dire que tu peux économiser de la place dans la base de données et des requêtes "lourdes" (plus qu'avec un seul champs en tout cas, puisque le champs extension tu peux le virer si tu convertis tout automatiquement en jpg, png ou ce que tu veux) et que Ô combien c'est important d’alléger la base de données étant l'un des premiers goulo d'étranglement des performances.

    L'avantage du système de mettre juste le nom et séparer l'extension c'est par exemple si tu veux un grande image, une miniature et une moyenne (par clique sur la moyenne tu arrives sur un zoom à la grande). Tu stockeras uniquement "nomimage" et ensuite, tu choisiras (par fonction ou en tapant directement) la taille que tu veux en faisant $result['image'].'_grande' (ou petite, ou moyenne). Suis-je plus précis?

    Cordialement, Guillaume

  12. #12
    Membre éclairé
    Profil pro
    Inscrit en
    Novembre 2010
    Messages
    72
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : Novembre 2010
    Messages : 72
    Par défaut
    re, petite précision histoire de faire du coup encore mieux vu qu'il faut bien tout formalisé, si tu veux pouvoir gérés différents formats d'images (PNG,JPG,GIF) tu peux aussi enregistrer le nom de ton fichier avec extension par exemple :

    fichier grand format : MONIMAGE.jpg
    et du coup tu enregistre la miniature en xs_MONIMAGE.jpg

    fichier grand format : MONIMAGE.gif
    et du coup tu enregistre la miniature en xs_MONIMAGE.gif

    fichier grand format : MONIMAGE.png
    et du coup tu enregistre la miniature en xs_MONIMAGE.png
    et tout travail de développement se doit d’être optimisé au mieux et avec un seul champs c'est le cas

  13. #13
    Membre confirmé
    Profil pro
    Inscrit en
    Septembre 2010
    Messages
    69
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Septembre 2010
    Messages : 69
    Par défaut
    radicaldreamer

    en effet c'est mieux, j'aimerais optimiser ce code:


    j'ai essayer de faire une boucle mais je n'arrive pas a mettre une variable dans "$_FILES['variable']".



    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    if(isset($_FILES['photo1']))
    { 
         $dossier = './img/big/'.$marque.'/';
         $fichier = basename($_FILES['photo1']['name']);
         if(move_uploaded_file($_FILES['photo1']['tmp_name'], $dossier . $fichier)) //Si la fonction renvoie TRUE, c'est que ça fonctionne
         {}
     
    }
    $img1='<img alt="" src="img/';
    $img2='"';
    $photo1=$img1.$fichier.$img2;
     
    $file='./img/mini/'.$marque.'/'.$fichier;// L'emplacement de l'image à redimensionner.
     
    copy($dossier.$fichier, $file);// copie du fichier d'origine avant de redim.
     
    $x = 100;
    $y = 100; // Taille en pixel de l'image redimensionnée
    $size = getimagesize($file);
     
    if ($size) {
     
     
    $img_big = imagecreatefromjpeg($file); // On ouvre l'image d'origine
    $img_new = imagecreate($x, $y);
     
     
    // création de la miniature
    $img_mini = imagecreatetruecolor($x, $y)
    or   $img_mini = imagecreate($x, $y);
     
    // copie de l'image, avec le redimensionnement.
    imagecopyresized($img_mini,$img_big,0,0,0,0,$x,$y,$size[0],$size[1]);
     
    imagejpeg($img_mini,$file );
     
    }
     
    //--------------------image2--------------------------------------------
     
     
    if(isset($_FILES['photo2']))
    { 
         $dossier = './img/big/'.$marque.'/';
         $fichier = basename($_FILES['photo2']['name']);
         if(move_uploaded_file($_FILES['photo2']['tmp_name'], $dossier . $fichier)) //Si la fonction renvoie TRUE, c'est que ça a fonctionné...
         {}
    }
    $img1='<img alt="" src="img/';
    $img2='"';
    $photo2=$img1.$fichier.$img2;
     
     
    $file='./img/mini/'.$marque.'/'.$fichier;// L'emplacement de l'image à redimensionner.
     
    copy($dossier.$fichier, $file);// copie du fichier d'origine avant de redim.
     
    $x = 100;
    $y = 100; // Taille en pixel de l'image redimensionnée
    $size = getimagesize($file);
     
    if ($size) {
     
     
    $img_big = imagecreatefromjpeg($file); // On ouvre l'image d'origine
    $img_new = imagecreate($x, $y);
     
     
    // création de la miniature
    $img_mini = imagecreatetruecolor($x, $y)
    or   $img_mini = imagecreate($x, $y);
     
    // copie de l'image, avec le redimensionnement.
    imagecopyresized($img_mini,$img_big,0,0,0,0,$x,$y,$size[0],$size[1]);
     
    imagejpeg($img_mini,$file );
     
    }
     
     
    //-----------------image3-----------------------------------------------
     
    if(isset($_FILES['photo3']))
    { 
         $dossier = './img/big/'.$marque.'/';
         $fichier = basename($_FILES['photo3']['name']);
         if(move_uploaded_file($_FILES['photo3']['tmp_name'], $dossier . $fichier)) //Si la fonction renvoie TRUE, c'est que ça a fonctionné...
         {}
    }
    $img1='<img alt="" src="img/';
    $img2='"';
    $photo3=$img1.$fichier.$img2;
     
     
    $img1='src="img/';
    $img2='" width="80"';
    $mini=$img1.$fichier.$img2;
     
     
     
    $file='./img/mini/'.$marque.'/'.$fichier;// L'emplacement de l'image à redimensionner.
     
    copy($dossier.$fichier, $file);// copie du fichier d'origine avant de redim.
     
    $x = 100;
    $y = 100; // Taille en pixel de l'image redimensionnée
    $size = getimagesize($file);
     
    if ($size) {
     
     
    $img_big = imagecreatefromjpeg($file); // On ouvre l'image d'origine
    $img_new = imagecreate($x, $y);
     
     
    // création de la miniature
    $img_mini = imagecreatetruecolor($x, $y)
    or   $img_mini = imagecreate($x, $y);
     
    // copie de l'image, avec le redimensionnement.
    imagecopyresized($img_mini,$img_big,0,0,0,0,$x,$y,$size[0],$size[1]);
     
    imagejpeg($img_mini,$file );
     
    }

Discussions similaires

  1. Gérer des images : BD et système fichier ?
    Par rgomes dans le forum Schéma
    Réponses: 3
    Dernier message: 26/09/2011, 17h31
  2. Gérer des images
    Par Sekigawa dans le forum ASP.NET
    Réponses: 1
    Dernier message: 16/09/2009, 15h24
  3. comment gérer des images dans la balise TD?
    Par sebac dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 20/05/2009, 11h51
  4. Réponses: 1
    Dernier message: 01/04/2008, 18h31
  5. [MySQL] conseils pour gérer des images avec mysql
    Par briiice dans le forum Administration
    Réponses: 9
    Dernier message: 04/01/2006, 09h52

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo