PDO jQuery variable php

**binco** · 05/01/2015, 01h10

Bonjour,

Je suis débutant en informatique
Ma page web charge une liste d'images en faisant appel avec PDO à une BDD contenant 20 variables:

1 type
2 numero
3 taille
4 format
5 nom_1
6 nom_2
7 ref1
8 ref2
9 ref3
10 intitule
11 themes
12 technique
13 hauteur
14 largeur
15 annee_creation
16 serie
17 epreuve_artiste
18 description
19 technique_detail
20 slide

En cliquant sur une image celle-ci s'agrandit dans une div à l'aide d'un script jQuery
Je veux inserer dans cette div, en dessous des images, toutes les informations contenues dans la BDD concernant l'image cliquée
Aussi pouvez vous me dire si il y aune écriture qui me permettrait de récupérer ces infos en jQuery du style:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<script src="jquery.js"></script>
<script>
...
var annee_creation= <?php echo $annee_creation?>;
...
</script>

Voici le code de ma page:

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
<!DOCTYPE html>
 
<html>
 
<head>
 
<meta charset="UTF-8">
 
<head>
 
<body>
 
<div id="cadre_agrandissement"></div>
 
<?php
try{
$chaine_connexion='mysql:host=localhost;dbname=images_site';
$utilisation_UFT8=array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8");	
$connexion_bdd = new PDO($chaine_connexion, 'root', '', $utilisation_UFT8);	
$connexion_bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}
catch(PDOException $e){
$msg = 'ERREUR PDO dans ' . $e->getFile() . ' L.' . $e->getLine() . ' : ' . $e->getMessage();
die($msg);
}
 
$sql = 'SELECT * FROM liste_image WHERE taille=? ORDER BY RAND()';
$requete2 = $connexion_bdd ->prepare($sql);
$requete2->bindValue(1, 'petit', PDO::PARAM_STR);
$requete2->execute();
 
foreach($requete2->fetchAll() as $donnee)
{
    echo utf8_encode('<img src="' . $donnee['type'] . '' . $donnee['numero'] . 'petit.jpg" class="petit' . $donnee['format'] . ' ' . $donnee['type'] . '"/>');
}
 
$requete2 -> closeCursor();
$requete2 = NULL;
 
?>
 
<script src="jquery.js"></script>
<script>
 
$(function(){
 
		$('.petitportrait').css('border','5px white solid');	
 
		$('.petitportrait').on( "click", function(){
			$(this).css('border','5px black solid');
			var a = $(this).attr('id');	
			var b = $(this).attr('src');
			var c = $(this).attr('title');
			var d = $(this).attr('alt');
 
			var nom_img = $(this).attr('src');
			var nom1 = nom_img.charAt(0);
			var nom2 = nom_img.charAt(1);
 
			var e = b.replace('petit.jpg','grand.jpg');
			$('#cadre_agrandissement').html('<span class="fermer"><a id="lien" href="#">Fermer</a></span> <br> <img id="' +a+ '" src="' +e+ '" class="grandportrait" title="' +c+ '" alt="' +d+ '"/> <br> Intitulé: ' +c+ ' ');
			$('#cadre_agrandissement').animate({ 'height':'970px'}, 500).animate({ 'width': '880px'}, 500)
		});
 
		$('#cadre_agrandissement').on( "click", "#lien", function(){
			$('.petitportrait').css('border','5px white solid');
			$('#cadre_agrandissement').animate({'height' : '0px', 'width' : '0px'}, 500 );
			$('#cadre_agrandissement').empty();		
 		});	
 
});  
 
</script>
 
</body>
 
</html>

Cordialement

Invité · 05/01/2015, 04h15

Bonjour,
oui, c'est possible.

1/ soit tu conserves ton code, et mets toutes les infos nécessaires dans des attributs (... data1="..." ...)
Ce qui peux s'avérer vite fastidieux.

2/ soit tu utilises AJAX, pour faire appel à la Bdd via un fichier php, et te renvoyer en retour les infos.
Par contre, je n'ai pas vu d'identifiant unique dans la table (id, auto-incrémenté). Ce serait très utile.. car le seul paramètre nécessaire et suffisant à transmettre.

**binco** · 05/01/2015, 21h37

Merci

J'ai ajouté une variable à la BDD: identifiant (variable AI)
0 identifiant
1 type
2 numero
3 taille
4 format
5 nom_1
6 nom_2
7 ref1
8 ref2
9 ref3
10 intitule
11 themes
12 technique
13 hauteur
14 largeur
15 annee_creation
16 serie
17 epreuve_artiste
18 description
19 technique_detail
20 slide

J'ai lu des tutoriels AJAX mais sans y comprendre grand chose:

1) je créer un fichier requete.php
AJAX fait appel à ce fichier qui se connecte a la BDD pour extraire les informations de l'image cliqué à l'aide de son identifiant
Comment dire dans ZONE1 que je veux l'identifiant de l'image cliqué?

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
 
<?php
try{
$chaine_connexion='mysql:host=localhost;dbname=images_site';
$utilisation_UFT8=array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8");	
$connexion_bdd = new PDO($chaine_connexion, 'root', '', $utilisation_UFT8);	
$connexion_bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}
catch(PDOException $e){
$msg = 'ERREUR PDO dans ' . $e->getFile() . ' L.' . $e->getLine() . ' : ' . $e->getMessage();
die($msg);
}
 
$sql = 'SELECT * FROM liste_image WHERE taille=? AND identifiant=? ORDER BY RAND()';
$requete3 = $connexion_bdd ->prepare($sql);
$requete3->bindValue(1, 'petit', PDO::PARAM_STR);
$requete3->bindValue(2, ZONE1, PDO::PARAM_STR);
$requete3->execute();
 
foreach($requete3->fetchAll() as $donnee)
{
$type=$donnee['identifiant'];
$type=$donnee['type'];
$numero=$donnee['numero'];
$taille=$donnee['taille'];
$format=$donnee['format'];
$nom_1=$donnee['nom_1'];
$nom_2=$donnee['nom_2'];
$ref1=$donnee['ref1'];
$ref2=$donnee['ref2'];
$ref3=$donnee['ref3'];
$intitule=$donnee['intitule'];
$themes=$donnee['themes'];
$technique=$donnee['technique'];
$hauteur=$donnee['hauteur'];
$largeur=$donnee['largeur'];
$annee_creation=$donnee['annee_creation'];
$serie=$donnee['serie'];
$epreuve_artiste=$donnee['epreuve_artiste'];
$description=$donnee['description'];
$technique_detail=$donnee['technique_detail'];
$slide=$donnee['slide'];
}
 
$requete3 -> closeCursor();
$requete3 = NULL;
?>

2) Dans ma page web il faut rajouter dans le script jQuery le code AJAX afin de faire le lien avec requete.php: la je ne vois pas comment faire

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
 
<!DOCTYPE html>
 
<html>
 
<head>
 
<meta charset="UTF-8">
 
<head>
 
<body>
 
<div id="cadre_agrandissement"></div>
 
<?php
try{
$chaine_connexion='mysql:host=localhost;dbname=images_site';
$utilisation_UFT8=array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8");	
$connexion_bdd = new PDO($chaine_connexion, 'root', '', $utilisation_UFT8);	
$connexion_bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}
catch(PDOException $e){
$msg = 'ERREUR PDO dans ' . $e->getFile() . ' L.' . $e->getLine() . ' : ' . $e->getMessage();
die($msg);
}
 
$sql = 'SELECT * FROM liste_image WHERE taille=? ORDER BY RAND()';
$requete2 = $connexion_bdd ->prepare($sql);
$requete2->bindValue(1, 'petit', PDO::PARAM_STR);
$requete2->execute();
 
foreach($requete2->fetchAll() as $donnee)
{
    echo utf8_encode('<img src="' . $donnee['type'] . '' . $donnee['numero'] . 'petit.jpg" class="petit' . $donnee['format'] . ' ' . $donnee['type'] . '"/>');
}
 
$requete2 -> closeCursor();
$requete2 = NULL;
 
?>
 
<script src="jquery.js"></script>
<script>
 
$(function(){
 
		$('.petitportrait').css('border','5px white solid');	
 
		$('.petitportrait').on( "click", function(){
			$(this).css('border','5px black solid');
			var a = $(this).attr('id');	
			var b = $(this).attr('src');
			var c = $(this).attr('title');
			var d = $(this).attr('alt');
 
			var nom_img = $(this).attr('src');
			var nom1 = nom_img.charAt(0);
			var nom2 = nom_img.charAt(1);
 
			var e = b.replace('petit.jpg','grand.jpg');
			$('#cadre_agrandissement').html('<span class="fermer"><a id="lien" href="#">Fermer</a></span> <br> <img id="' +a+ '" src="' +e+ '" class="grandportrait" title="' +c+ '" alt="' +d+ '"/> <br> Intitulé: ' +c+ ' ');
			$('#cadre_agrandissement').animate({ 'height':'970px'}, 500).animate({ 'width': '880px'}, 500)
		});
 
		$('#cadre_agrandissement').on( "click", "#lien", function(){
			$('.petitportrait').css('border','5px white solid');
			$('#cadre_agrandissement').animate({'height' : '0px', 'width' : '0px'}, 500 );
			$('#cadre_agrandissement').empty();		
 		});	
 
});  
 
 
</script>
 
</body>
 
</html>

Pouvez vous m'aider pour ma première utilisation d'AJAX?

Cordialement

Invité · 05/01/2015, 23h45

Bonjour,
voici une méthodologie :

Sur tes petites images, tu as besoin de :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

	<img src="..........." data="<?php echo $donnee['id_photo']; ?>" ......../>

où id_photo est l'index (auto-incrémenté) enregistré en Bdd

Le code jQuery/AJAX :

Code javascript :

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
<script>
$(function(){
 
	$('.petitportrait').on( "click", function(){
 
		// -----------------
		// 1/ on récupère l'id_photo
		var id_photo = $(this).attr('data');
		// -----------------
		// 2/ appel au fichier de récupération de données
		var texthtml 	= '';
		$.ajax({
		type:			'post',
		 url:			'./affiche-infos-photo.php',
		 data:			'photoId='+id_photo,
		 dataType:		'html',
		 cache:		false,
		 success:		function( texthtml ){
			texthtml 	= jQuery.trim(texthtml);
			if( texthtml!='' ){
				// -----------------
				// 3/ affichage sur la page du code html
				$('#cadre_agrandissement').html(texthtml);
				// (autres actions...)
				$('#cadre_agrandissement').animate({ 'height':'970px'}, 500).animate({ 'width': '880px'}, 500)
			}
			return false;
		 }
		});
		// -----------------
	// ........... (suite du code jQuery)...........
});

Fichier qui sera appelé via AJAX :
affiche-infos-photo.php

Code php :

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
<?php // AJAX
// -------------------------------------------------
if( !empty($_POST['photoId']) && is_numeric($_POST['photoId']) )
{
	// -----------------
	// connexion à la Bdd
	include_once('./connexion.php');
	// -----------------
	$photoId			= intval($_POST['photoId']);
	// -----------------
	// requete de récupération des données, à partir de l'id photo
	$photo_query 	= "SELECT * FROM liste_image ".
					" WHERE id_photo = :photoId;";
	//............
	// -----------------
	// Ici, on va CONSTRUIRE LE CODE HTML qui sera affiché :
?>
	<img src="........." ...... />
	<div class="text-image">
		<h6><?php echo $nom_image; ?></h6>
		<p>........</p>
	</div>
<?php
} 
?>

N.B. Au lieu de te "cogner" à chaque fois le code de connexion à la BdD,
tu as tout intérêt à le mettre dans un fichier externe, et de l'appeler par include :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

	include_once('./connexion.php');

**binco** · 06/01/2015, 16h03

Merci
Pour le moment je simplifie pour que ma div agrandissement de l'image apparaisse

ma page web:

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
<!DOCTYPE html>
 
<html>
 
<head>
 
<meta charset="UTF-8">
 
<style type="text/css">
.petitportrait { width:58px; height:77px; margin-top:1px; margin-right:1px; margin-bottom:1px; margin-left:1px; }
 
.petitpaysage { width:77px; height:58px; margin-top:1px; margin-right:1px; margin-bottom:1px; margin-left:1px; }
 
.petitcarre { width:77px; height:77px; margin-top:1px; margin-right:1px; margin-bottom:1px; margin-left:1px; }  
 
.grandportrait { width:580px; height:770px; margin-left:150px; }
 
#cadre_agrandissement {  background: white;  border-style: solid;  border-color: black;  position: absolute;  top: 50px;  left: 500px;  width: 0px;  height: 0px; }
 
.fermer a { font-family: "Arial", "Arial Narrow"; font-size: x-large; font-style: normal; font-weight: normal; color: black; text-align: left; margin-left: auto; margin-right: auto ; margin-top: auto;  margin-bottom: auto; }
 
</style>
 
<head>
 
<body>
 
<div id="cadre_agrandissement"></div>
 
<?php
 
include_once('./connexion.php');
 
$sql = 'SELECT * FROM liste_image WHERE taille=? ORDER BY RAND()';
$requete2 = $connexion_bdd ->prepare($sql);
$requete2->bindValue(1, 'petit', PDO::PARAM_STR);
$requete2->execute();
 
foreach($requete2->fetchAll() as $donnee)
{
    echo utf8_encode('<img src="' . $donnee['type'] . '' . $donnee['numero'] . 'petit.jpg" class="petit' . $donnee['format'] . ' ' . $donnee['type'] . ' data-identifiant="' . $donnee['id_photo'] . '" />');
}
 
$requete2 -> closeCursor();
$requete2 = NULL;
 
?>
 
<script src="jquery.js"></script>
<script>
$(function(){
 
	$('.petitportrait').css('border','5px white solid');	// initialement les petites images ont une bordure blanche 
 
	$('.petitportrait').on( "click", function(){
 
		// -----------------
		// 1/ on récupère l'id_photo
		var id_photo = $(this).attr('data-identifiant');
		// -----------------
		// 2/ appel au fichier de récupération de données
		var texthtml 	= '';
		$.ajax({										// la fonction $.ajax() permet d'envoyer des requetes HTTP AJAX a un serveur Web
		type:			'post',							// type de la requete, GET ou POST (GET par defaut)
		url:			'./affiche-infos-photo.php',	// adresse à laquelle la requête doit être envoyée
		data:			'photoId='+id_photo,			// données à envoyer au serveur.
		dataType:		'html',							// type des données qui doivent être retournées par le serveur
		cache:		false,
		success:		function( texthtml ){			// fonction à appeler si la requête aboutit
			texthtml 	= jQuery.trim(texthtml);		// ??????
			if( texthtml!='' ){
				// -----------------
				// 3/ affichage sur la page du code html
				$('#cadre_agrandissement').html(texthtml);
				// (autres actions...)
				$('#cadre_agrandissement').animate({ 'height':'970px'}, 500).animate({ 'width': '880px'}, 500)
			}
			return false;
		 }
		});
		// -----------------
	// ........... (suite du code jQuery)...........
 
		$(this).css('border','5px black solid'); // quand on clique sur une petite image sa bordure devient noire
	});
});
</script>
 
</body>
 
</html>

je pense que l'erreur est dan la partie AJAX que je ne maitrise pas encore. Pouvez vous m'expliquer les lignes:
var texthtml = '';
texthtml = jQuery.trim(texthtml);

affiche-infos-photo.php:

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
 
                <?php // AJAX
        // -------------------------------------------------
        if( !empty($_POST['photoId']) && is_numeric($_POST['photoId']) )
        {
        	// -----------------
        	// connexion à la Bdd
        	include_once('./connexion.php');
        	// -----------------
        	$photoId = intval($_POST['photoId']);
        	// -----------------
        	// requete de récupération des données, à partir de l'id photo
			// construction du src d une grande image = taille + numero + 'grand.jpg'
			// nous avons egalement besoin du nom de l image et de sa description
 
        	$photo_query 	= 'SELECT * FROM liste_image WHERE id_photo = :photoId';
			$requete3 = $connexion_bdd ->prepare($photo_query);
			$requete3->execute();	
 
			foreach($requete3->fetchAll() as $donnee)
			{
			$taille=$donnee['taille'];
			$numero=$donnee['numero'];
			$nom_image=$donnee['intitule'];
			$description_image=$donnee['description'];
			}
 
			/* autre ecriture possible
			$donnee = $requete3->fetch(PDO::FETCH_ASSOC);
			$taille=$donnee['taille'];
			$numero=$donnee['numero'];
			$nom_image=$donnee['intitule'];
			$description_image=$donnee['description'];
			*/	
 
			$requete3 -> closeCursor();
			$requete3 = NULL;
 
        	// -----------------
        	// Ici, on va CONSTRUIRE LE CODE HTML qui sera affiché :
 
			echo utf8_encode('<img src="' . $taille . '' . $numero . 'grand.jpg" class="grandportrait" />'); 
 
        } 
        ?>

connexion.php:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<?php
try{
$chaine_connexion='mysql:host=localhost;dbname=images_site';
$utilisation_UFT8=array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8");	
$connexion_bdd = new PDO($chaine_connexion, 'root', '', $utilisation_UFT8);	
$connexion_bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}
catch(PDOException $e){
$msg = 'ERREUR PDO dans ' . $e->getFile() . ' L.' . $e->getLine() . ' : ' . $e->getMessage();
die($msg);
}
?>

C'est bizarre quand je clic sur une petite image la div agrandissement n'apparait pas
Mais quand j'enlève le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

a la fin de affiche-infos-photo.php la div agrandissement apparait avec un parse error

De l'aide svp

Invité · 07/01/2015, 02h09

Bonjour,

1/ la question que je me pose, c'est "pourquoi tu n'utilises pas un système de galerie existant ?"
Il en existe des tas sur le web. Notamment "responsive".
Par exemple :

et bien d'autres...

2 /
var texthtml = ''; // on définit la variable (JavaScript) contenant une chaine vide ''
texthtml = jQuery.trim(texthtml); // supprime les espaces en bouts de chaine (au cas où il y en aurait)

Cela dit, tu aurais pu faire une simple recherche PERSONNELLE pour trouver...

3/

Envoyé par binco

... la div agrandissement apparait avec un parse error ...

Normal, puisque le } est nécessaire !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

    echo utf8_encode('<img src="' . $donnee['type'] . '' . $donnee['numero'] . 'petit.jpg" class="petit' . $donnee['format'] . ' ' . $donnee['type'] . ' data-identifiant="' . $donnee['id_photo'] . '" />');

il manque un " pour fermer la class

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

    echo utf8_encode('<img src="' . $donnee['type'] . '' . $donnee['numero'] . 'petit.jpg" class="petit' . $donnee['format'] . ' ' . $donnee['type'] . '" data-identifiant="' . $donnee['id_photo'] . '" />');

4/ tu as écrit <head> au lieu de </head>.

5/

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
        	$photo_query 	= 'SELECT * FROM liste_image WHERE id_photo = :photoId';
			$requete3 = $connexion_bdd ->prepare($photo_query);
			$requete3->execute();

il manque une ligne de code !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
        	$photo_query 	= 'SELECT * FROM liste_image WHERE id_photo = :photoId';
			$requete3 = $connexion_bdd ->prepare($photo_query);
			$requete3->bindValue( ':photoId', $photoId, PDO::PARAM_INT );
			$requete3->execute();

**binco** · 07/01/2015, 13h47

Merci Jureaux62

0) En fait je veux personnaliser mon site. Je me suis collé des tutoriels html css php javascript jquery... j'aime bien apprendre et c'est génial de voir ce qu'on peut faire en mélangeant ces langages

1) J'ai effectué une recherche mais je suis tombé sur $trim .... je voulais avoir une confirmation

2) Y a un truc que je comprends pas avec AJAX:
Je ne vois pas comment le contenu de affiche-infos-photo.php est retourné dans la variable var texthtml
On aurait du avoir une ligne de code supplémentaire du style var texthtml="contenu de page affiche-infos-photo.php"
Dans la fonction ajax quelle ligne de code dit var texthtml="contenu de page affiche-infos-photo.php"?

3) Sécurité: dans mon code il y a des $POST. Aussi y a t-il des risques au niveau sécurité?

Encore merci

**Guignon** · 07/01/2015, 16h05

Salut

Enfaite AJAX va envoyé les informations de ta page PHP (./affiche-infos-photo.php) dans ta balise qui à pour id : cadre_agrandissement.

Donc en faite juste après ton script JQuery qui fait que l'image s'agrandi et bien il te faut une balise, comme <div>, qui aura pour id "cadre_agrandissement" et c'est cette div qui contiendra toute les infos que tu as dans ./affiche-infos-photo.php.

Voilà j'espère que j'ai à peu près bien expliquer ^^ Sinon jreaux62 tu peux complété

Bye bonne continuation