PDO jQuery variable php

Version imprimable

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:

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:

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

05/01/2015, 04h15
Invité

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.

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:

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:

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

Bonjour,
voici une méthodologie :

Sur tes petites images, tu as besoin de :

Code:

<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:

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:

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:

include_once('./connexion.php');

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

ma page web:

Code:

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:

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:

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:

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

De l'aide svp

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 :

ColorBox
Galleria

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/

Citation:

Envoyé par binco

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

Normal, puisque le } est nécessaire !

Code:

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:

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:

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:

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();

07/01/2015, 13h47
binco

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
07/01/2015, 16h05
Guignon

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é :D

Bye bonne continuation
07/01/2015, 23h00
Invité

2) C'est ici que ça se passe :

Code:

success: function( texthtml ){

$.ajax() est une fonction jQuery qui répond à une syntaxe précise.

A toi aussi de te renseigner et te documenter... :recherch: :google:
08/01/2015, 15h05
binco

Merci a vous