Afficher des image depuis la base de donnée php a mon album coder en javascrit

Résolu

ir_1997 Messages postés 102 Statut Membre -
ir_1997 Messages postés 102 Statut Membre - 18 mars 2021 à 22:36

bonsoir j'ai eu a faire un System d'album avec javascript
la je sais pas comment faire pour introduire mon code php afin d'avoir les images de ma base de donnée dans album

<script>
    		window.onload=function(){
    			nbr=20;
    			cont=document.getElementById("container");   			
    			images=["images/romarin.jpg","images/chat.jpg","images/zn.jpg","images/chien.jpg","images/ir.jpg"];
    			im=0;
    			ang=[];
    		    init();
    	    }
    		function init(){
    			for(i=0;i<nbr;i++){
    				try{ 
    				    cont.removeChild(document.getElementById(i));
    			    }
    			    catch(e){
    				    true;
    			    }
    			}
    			for(i=0;i<nbr;i++){
    				ang[i]=-i*10-90;
    			    div=document.createElement("div");
    			    div.style.width=(cont.clientWidth/nbr)+"px";
    			    div.style.height=cont.clientHeight+"px";
    			    div.className="maClasse";
    			    div.setAttribute("id",i);
    			    div.style.visibiliby="hidden";
    			    div.style.backgroundImage="url('"+images[im]+"')";
    			    div.style.backgroundSize=cont.clientWidth+"px auto";
    			    div.style.backgroundPosition=(i*100/(nbr-1))+"% 50%";
    			    div.style.transform="perspective(1000px) rotateY("+ang[i]+"deg)";
    			    cont.appendChild(div);
    			}
    			animer();    
    		}
    		function animer(){
    		    t=setTimeout("animer()",10);    		    
    		    for(i=0;i<nbr;i++){
    		    	ob=document.getElementById(i);
    		    	ob.style.transform="perspective(1000px) rotateY("+ang[i]+"deg)";   		    	
    		    	if(ang[i]>-90)
    		    		   ob.style.visibility="visible";
    		    	if (ang[i]<0)
    		    		 ang[i]+=2;
    		        else 
    		    		  ang[i]=0; 
    		    	if(ang[nbr-1]==0){
    		    		im+=1;
    		    		if(im>images.length-1)
    		    				im=0;
    		    			clearTimeout(t);
    		    			init();
    		        } 
    		    }	
    		} 

   	
    	</script>

 <?php  

$requete = $bdd->query( "SELECT *
 FROM articles
  join   images
where images.idarticle =  articles.id  and categories = 'immobilier' group by idarticle " );


  while($resultat =$requete->fetch())

{?>
<img src="<?php echo $resultat['image']?>" width="100" height="100">  <?php }?>

Afficher la suite

A voir également:

Afficher des image depuis la base de donnée php a mon album coder en javascrit
Code ascii de a à z - Guide
Google photos album privé - Guide
Application pour apprendre à coder - Guide
Album photo partage en ligne gratuit - Guide
Base de registre windows - Guide

8 réponses

Résumé de la discussion

Le sujet concerne l'intégration de PHP dans JavaScript pour récupérer et afficher des images issues d'une base de données dans un album, en passant par une variable JSON côté client. Des solutions tournent autour de l'encodage du tableau d'images en JSON puis de son injection côté client via images = <?php echo $json; ?>, vérifiant les chemins et le format. En parallèle, obstacles techniques apparaissent, comme des erreurs d'accès aux fichiers et l'utilisation d'anciennes fonctions MySQL avec PDO, suggérant de migrer vers des méthodes de fetch compatibles. D'autres conseils insistent sur la consolidation du chemin des images et sur le contrôle de l'affichage dynamique, afin d'éviter que les images ne s'affichent pas ou ne se chargent pas.

jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 833

Bonjour,
Tu stockes tes images dans un array PHP
Puis, dans le code js, tu fais un json_encode de la variable pour pouvoir les récupérer dans le javascript

ir_1997 Messages postés 102 Statut Membre

la jessaye de faire l'arrays mais j'ai recontre quelque soucis

Fatal error: Uncaught Error: Call to undefined function mysql_fetch_array() in C:\xampp\htdocs\immobilier.php:23 Stack trace: #0 {main} thrown in C:\xampp\htdocs\immobilier.php on line 23

<?php try{
$bdd =new PDO('mysql:host=localhost;
 dbname=espace_membre; charset=utf8', 'root', '');
// Activation des erreurs PDO
 $bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// mode de fetch par défaut : FETCH_ASSOC / FETCH_OBJ / FETCH_BOTH
 $bdd->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
} catch(PDOException $e) {
    die('Erreur : ' . $e->getMessage());
}
?>

    <?php  

$requete = $bdd->query( "SELECT *
 FROM articles
  join   images
where images.idarticle =  articles.id  and categories = 'immobilier' group by idarticle " );


  while($resultat = mysql_fetch_array($requete))

{?>
 
<?php echo $resultat['image'];
   
  ?>
 
   
  
   <?php
  }?>

jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 833 > ir_1997 Messages postés 102 Statut Membre

Vu que tu utilises pdo regarde la fonction fetchall
0

ir_1997 Messages postés 102 Statut Membre > jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention

j'ai pu faire l'array
et le json_encode<gras>
<?php $requete = $bdd->query( "SELECT * FROM articles join images where images.idarticle = articles.id group by idarticle " ); $resultat=$requete->fetchAll(PDO::FETCH_ASSOC); foreach($resultat as $row){ $images = htmlentities($row['image']);?> <Br><?php $ir = "$images"; $json= json_encode($ir); } ?></br>

<?php $ir = "$images"; $json= json_encode($ir); } ?></br>

<gras>
mais j'arrive pas a introduire dans ce code ci
dans la variable " images "

 <div id="container">
      </div>
      <script>
        window.onload=function(){
          nbr=20;
          cont=document.getElementById("container");        
          images= ['var ir'] 
  
   
          im=0;
          ang=[];
            init();
          }
        function init(){
          for(i=0;i<nbr;i++){
            try{ 
                cont.removeChild(document.getElementById(i));
              }
              catch(e){
                true;
              }
          }
          for(i=0;i<nbr;i++){
            ang[i]=-i*10-90;
              div=document.createElement("div");
              div.style.width=(cont.clientWidth/nbr)+"px";
              div.style.height=cont.clientHeight+"px";
              div.className="maClasse";
              div.setAttribute("id",i);
              div.style.visibiliby="hidden";
              div.style.backgroundImage="url('"+images[im]+"')";
              div.style.backgroundSize=cont.clientWidth+"px auto";
              div.style.backgroundPosition=(i*100/(nbr-1))+"% 50%";
              div.style.transform="perspective(1000px) rotateY("+ang[i]+"deg)";
              cont.appendChild(div);
          }
          animer();    
        }
        function animer(){
            t=setTimeout("animer()",10);            
            for(i=0;i<nbr;i++){
              ob=document.getElementById(i);
              ob.style.transform="perspective(1000px) rotateY("+ang[i]+"deg)";            
              if(ang[i]>-90)
                   ob.style.visibility="visible";
              if (ang[i]<0)
                 ang[i]+=2;
                else 
                  ang[i]=0; 
              if(ang[nbr-1]==0){
                im+=1;
                if(im>images.length-1)
                    im=0;
                  clearTimeout(t);
                  init();
                } 
            } 
        } 

    
      </script>

jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 833 > ir_1997 Messages postés 102 Statut Membre
Essaye
```
images= '<?php echo $json; ?>';
```
0
ir_1997 Messages postés 102 Statut Membre > jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention

dans le code js?
0

Réponse 2 / 8
jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 833
Tu peux retirer les quotes à la ligne
```
images= '<?php echo $json; ?>';
```
0
Réponse 3 / 8
ir_1997 Messages postés 102 Statut Membre

finalement les "%22" ont disparuent
mais le problème persiste
0
1. jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 833
  
  Peux tu nous faire un
  print_r($json);
  
  et nous montrer ce que ça te retourne ?
  
  Egalement, ajouter un console.log dans ton js
  avant ton script
  var mesimages = <?php echo $json; ?>; console.log('mesimages',mesimages);
  
  0
  1. jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 833 > jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention
    
    Typiquement... j'ai testé comme ceci
    <?php $arr = ['upload/image1.jpeg','upload/image2.jpeg','upload/image3.jpeg']; $json = json_encode($arr); ?> <script> var mesimages = <?php echo $json; ?>; console.log('mesimages',mesimages); </script>
    
    Et la variable javascript contient bien mes images au bon format ....
    Je suppose donc que tu as raté quelque chose lors de la création de ta variable $json ...
    
    0
  2. ir_1997 Messages postés 102 Statut Membre > jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention
    
    je crois bien
    
    0
  3. ir_1997 Messages postés 102 Statut Membre > jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention
    
    voila j'ai fais comme vous l'avait recommandé
    
    0
  4. jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 833 > ir_1997 Messages postés 102 Statut Membre
    
    Dis voir .. tu as utilisé quel code pour générer la variable $json ??
    Celui que je t'avais donné ??
    
    Et juste pour les tests... pourrais tu juste essayer avec les images qui marchaient à l'origine dans le script ?
    En faisant, dans ton PHP .. juste ça :
    $arr = ["images/romarin.jpg","images/chat.jpg","images/zn.jpg","images/chien.jpg","images/ir.jpg"]; $json = json_encode($arr); print_r($json);
    
    0
Réponse 4 / 8
ir_1997 Messages postés 102 Statut Membre
la c'est quand je met les chemin dans la variable $json coté php
```
 $arr= ["images/romarin.jpg","images/chat.jpg","images/zn.jpg","images/chien.jpg","images/ir.jpg"];
```
puis la c'est quand je met les chemins directement dans la variable images du javascript
```
  images= ["images/romarin.jpg","images/chat.jpg","images/zn.jpg","images/chien.jpg","images/ir.jpg"];
```
la sa fonction normalemnt
0
1. jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 833
  
  Le console.log donne bien la même chose....
  As tu bien mis la variable au bon endroit dans ton code js ?
  
  Pourrais tu nous partage ton code complet ( HTML + JS ) ?
  
  0
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question

ir_1997 Messages postés 102 Statut Membre

voila c'est le html plus js ainsi

 <!DOCTYPE html>
 <html>
 <head>
   <title></title>
  
 <style>
        #container{
          width: 1000px;
          height: 500px;
          margin: 50px auto;
          }
          .maClasse{
            display: inline-block;
            vertical-align:top;
          }
      </style>

    </head>
    <body>
      <div id="container">
      </div>
     <script>
      var mesimages = <?php echo $json; ?>;
console.log('mesimages',mesimages);


        window.onload=function(){
          nbr=20;
          cont=document.getElementById("container");        
          images= [<?=$json?>];
  
   
          im=0;
          ang=[];
            init();
          }
        function init(){
          for(i=0;i<nbr;i++){
            try{ 
                cont.removeChild(document.getElementById(i));
              }
              catch(e){
                true;
              }
          }
          for(i=0;i<nbr;i++){
            ang[i]=-i*10-90;
              div=document.createElement("div");
              div.style.width=(cont.clientWidth/nbr)+"px";
              div.style.height=cont.clientHeight+"px";
              div.className="maClasse";
              div.setAttribute("id",i);
              div.style.visibiliby="hidden";
              div.style.backgroundImage="url('"+images[im]+"')";
              div.style.backgroundSize=cont.clientWidth+"px auto";
              div.style.backgroundPosition=(i*100/(nbr-1))+"% 50%";
              div.style.transform="perspective(1000px) rotateY("+ang[i]+"deg)";
              cont.appendChild(div);
          }
          animer();    
        }
        function animer(){
            t=setTimeout("animer()",10);            
            for(i=0;i<nbr;i++){
              ob=document.getElementById(i);
              ob.style.transform="perspective(1000px) rotateY("+ang[i]+"deg)";            
              if(ang[i]>-90)
                   ob.style.visibility="visible";
              if (ang[i]<0)
                 ang[i]+=2;
                else 
                  ang[i]=0; 
              if(ang[nbr-1]==0){
                im+=1;
                if(im>images.length-1)
                    im=0;
                  clearTimeout(t);
                  init();
                } 
            } 
        } 

    
      </script>
   
  
  

</body>
</html>

jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 833
Ton code ne correspond pas à ce que je t'ai donné
```
 images= [<?=$json?>];
```
A remplacer par
```
 images = <?php echo $json; ?>;
```
0
1. ir_1997 Messages postés 102 Statut Membre > jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention
  
  c'est noter mais ya toujours le problème
  
  aussi j'ai remarquer que ya des barres inverse qui s'ajoute dans les chemins
  
  sa c'est le resultat du print_r($json);
  ["images\/romarin.jpg","images\/chat.jpg","images\/zn.jpg","images\/chien.jpg","images\/ir.jpg"]
  
  0
2. jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 833 > ir_1997 Messages postés 102 Statut Membre
  
  ça c'est normal.
  Et donc, que t'affiche la console ?
  
  0

Réponse 6 / 8
ir_1997 Messages postés 102 Statut Membre

c'est ça sa m'affiche en répétition GET http://localhost/undefined 404 (Not Found)
0

jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 833

Il faut déclarer tes variables en dehors des fonctions si tu veux qu'elles aient une portée "globale"

Code corrigé et fonctionnel

 <?php
 
 $arr = ["images/1.jpg","images/2.png","images/3.png","images/4.jpg"];
$json = json_encode($arr);
print_r($json);
 
 ?>
 
 
 <!DOCTYPE html>
 <html>
 <head>
   <title></title>
  
 <style>
        #container{
          width: 1000px;
          height: 500px;
          margin: 50px auto;
          }
          .maClasse{
            display: inline-block;
            vertical-align:top;
          }
      </style>

    </head>
    <body>
      <div id="container">
      </div>
     <script>
      var mesimages = <?php echo $json; ?>;
      console.log('mesimages',mesimages);

      var nbr=20;
      var cont=document.getElementById("container");        
      var images= mesimages;
      var im=0;
      var ang=[];
      
      window.onload=function(){
         init();
      }
        function init(){
          for(i=0;i<nbr;i++){
            try{ 
                cont.removeChild(document.getElementById(i));
              }
              catch(e){
                true;
              }
          }
          for(i=0;i<nbr;i++){
            ang[i]=-i*10-90;
            div=document.createElement("div");
            div.style.width=(cont.clientWidth/nbr)+"px";
            div.style.height=cont.clientHeight+"px";
            div.className="maClasse";
            div.setAttribute("id",i);
            div.style.visibiliby="hidden";
            div.style.backgroundImage="url('"+images[im]+"')";
            div.style.backgroundSize=cont.clientWidth+"px auto";
            div.style.backgroundPosition=(i*100/(nbr-1))+"% 50%";
            div.style.transform="perspective(1000px) rotateY("+ang[i]+"deg)";
            cont.appendChild(div);
          }
          animer();    
        }
        function animer(){
            t=setTimeout("animer()",10);            
            for(i=0;i<nbr;i++){
              ob=document.getElementById(i);
              ob.style.transform="perspective(1000px) rotateY("+ang[i]+"deg)";            
              if(ang[i]>-90)
                   ob.style.visibility="visible";
              if (ang[i]<0)
                 ang[i]+=2;
                else 
                  ang[i]=0; 
              if(ang[nbr-1]==0){
                im+=1;
                if(im>images.length-1)
                    im=0;
                  clearTimeout(t);
                  init();
                } 
            } 
        } 

    
      </script>
   
  
  

</body>
</html>

Réponse 8 / 8
ir_1997 Messages postés 102 Statut Membre

merci beaucoup tous marche maintenant
0

Afficher des image depuis la base de donnée php a mon album coder en javascrit

8 réponses

Discussions similaires

Newsletters