Création d'un vote entre deux images

[Le Mascou]

Salut à tous !

Je suis nouveau sur le fofo,alors excusez moi si je ne poste pas au bon endroit...

J'écris car je patauge un peu dans ce que j'aimerais créer : c'est à dire un vote tout simple entre deux photos apparaissant aléatoirement.

J'ai trouvé des scripts pour des votes du style Hot Or Not, avec un choix entre 0 et 10, mais moi ce que j'aimerais faire c'est tout simplement faire apparaitre deux images, pour que l'utilisateur clique sur une (en guise de vote), puis que deux nouvelles images apparaissent au hasard, etc etc. Et ensuite récupérer sur une autre page le top 10 par exemple.

Le système fonctionnerait du style : pour chaque clic sur une photo : +1 pour cette photo et automatiquement -1 pour l'autre alors, afin d'avoir un classement.

Pensez-vous que vous pouvez m'aider ?
D'avance merci

[elcoyotos]

Tu n'arrive pas a faire quoi ?
Afficher deux images aléatoires ou le vote ?
Les images proviennent d'une BBD ou d'un répertoire ?

[Le Mascou]

Ce que je n'arrive pas, c'est pour le vote. C'est à dire le processus de +1 et -1 automatique.

Mes images proviennent d'un répertoire.

[elcoyotos]

Ok,

Supposons que tu as les images A et B.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<form id="forma" name="forma" method="post" action="traitement.php">
<img src="A.jpg" width="217" height="310" /><br />
<input type="hidden" name="plus" value="A" />
<input type="hidden" name="moins" value="B" />
<input type="submit" name="Submit" value="Voter" />
</form>
 
<form id="formb" name="formb" method="post" action="traitement.php">
<img src="B.jpg" width="217" height="310" /><br />
<input type="hidden" name="moins" value="A" />
<input type="hidden" name="plus" value="B" />
<input type="submit" name="Submit" value="Voter" />
</form>

Dans le premier formulaire, tu indiques que A = +1 et B = -1
Dans le second, c'est le contraire A = -1 et B = +1

En fait, je ne comprends pas ce qui te pose problème.
Envoie ton code source pour plus d'aide ....

[Le Mascou]

Merci de ta réponse

Je pars de zéro, j'ai essayé d'adapter un code déjà existant, mais ça revient plus compliqué. Donc je ré-écris tout.

Pour le moment, j'ai mis mon script java pour avoir les images aléatoires :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<SCRIPT LANGUAGE="JavaScript">
			var extention = ".jpg" ;
			var nbimage = 4 ;
			var url;
			var rep;
			var alt;
 
			function Images_Aleatoire()
			{
 
				numimage = Math.round( Math.random() * ( nbimage - 1 ) + 1 );
 
				Page = "index.php";
 
				rep = "photos"; 
				alt = "Votez !"; 
				url = './' + rep + '/' + numimage + extention ;
				document.write ('<div align=center><a href="' + Page + '"><img src="' + url + '" alt="' + alt + '" border=0></a></div>');
			}
		</SCRIPT>

Puis j'ai adapté avec ton code :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
 <form id="forma" name="forma" method="post" action="traitement.php">
 <SCRIPT language="JavaScript">Images_Aleatoire();</SCRIPT><br />
<input type="hidden" name="plus" value="A" />
<input type="hidden" name="moins" value="B" />
<input type="submit" name="Submit" value="Voter" />
</form>
 
<form id="formb" name="formb" method="post" action="traitement.php">
<SCRIPT language="JavaScript">Images_Aleatoire();</SCRIPT><br />
<input type="hidden" name="moins" value="A" />
<input type="hidden" name="plus" value="B" />
<input type="submit" name="Submit" value="Voter" />
</form>

Deux problèmes avec ce code :
- la personne doit voter deux fois, si je ne dis pas de bêtise ?
- problème plus minime : il faut cliquer sur un bouton. Est-ce possible que le bouton soit l'image en elle-même ?

Merci beaucoup

[dourouc05]

Envoyé par Le Mascou

- la personne doit voter deux fois, si je ne dis pas de bêtise ?
- problème plus minime : il faut cliquer sur un bouton. Est-ce possible que le bouton soit l'image en elle-même ?

Je ne suis pas du tout la discussion, mais peut-être simplement mettre un lien sur l'image pour voter ? Comme ça, les deux problèmes sont résolus d'un seul coup.

Tu auras donc dans ton code HTML :

Code :

<a href="traitement.php?pour=A"><img src="img.jpg"/></a>

Que tu récupères assez normalement dans ton script PHP :

Code :

1
2
3
4
<?php 
 
if($_GET['pour'] == ...)
...

[Le Mascou]

Le problème c'est qu'avec ce système, je ne peux pas avoir deux images aléatoires à chaque rechargement de la page, si ?

[elcoyotos]

Le problème c'est qu'avec ce système, je ne peux pas avoir deux images aléatoires à chaque rechargement de la page, si ?

Pourquoi pas ? N'est ce pas déjà le cas ?

la personne doit voter deux fois, si je ne dis pas de bêtise ?

Non, pas avec ma solution.

il faut cliquer sur un bouton. Est-ce possible que le bouton soit l'image en elle-même ?

Oui

Tu peux aussi utiliser la méthode de dourouc05 qui tout à fait valable (sauf que ca ne t'indique que l'image pour et pas la contre).
Mais il s'agit de la méthode GET. Donc, on peux facilement faire monter un vote en trafiquant l'url.
La méthode que je proposais, est la méthode POST. Moins facile à trafiquer et qui indique le l'image pour et l'image contre ...

Pour ma part, si j'avais un système comme le tient à écrire je passerai par une Base de données ....

Parce que tes votes, tu les enregistrent où actuellement ?

PS Il y a une troisième solution qui est les sessions

[Le Mascou]

Pour l'instant il n'y a rien, j'attendais justement vos avis avant de me lancer. Donc il vaut mieux passer par une BDD, c'est ce que je pensais aussi.

Pour revenir à l'affichage du vote, oui en effet on n'a besoin de voter qu'une seule fois, j'avais mal regardé. Reste le fait de cliquer sur l'image pour voter et non le bouton. Une idée d'adaptation du code ?

PS: Je m'attaque à la BDD en attendant, comme je risque d'avoir quelques petits soucis

[elcoyotos]

Tout d'abord, si tu utilise une BDD oublie le Javascript.
Tu utilisera désormais PHP.

Donc il vaut mieux passer par une BDD, c'est ce que je pensais aussi.

Ba oui parce que il faut bien garder le résultat des votes quelque part

Pour le bouton image :

Code :

1
2
 
<input type="submit" class="arrondi" value="Envoyer" />

Le css :

Code :

1
2
3
4
5
6
7
8
 
.arrondi {
background:url(images/test.gif);
border:none;
width: 80px; /* largeur à spécifier */
height: 40px; /* longueur à spécifier */
cursor: pointer;
}

Pour la BDD :

Code :

1
2
3
4
5
6
7
 
CREATE TABLE `images` (
  `id_image` int(5) NOT NULL AUTO_INCREMENT,
  `nom_image` varchar(50) COLLATE latin1_general_ci NOT NULL,
  `votes` int(5) NOT NULL,
  PRIMARY KEY (`id_image`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=1 ;

A adapter selon besoin

Dans ton répertoire image : Nomme tes images avec l'id

Affichage des deux images aléatoires :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<?php
// Connexion à ta base de données
 
// Requete image 1
$sql_image1 = "SELECT * FROM images ORDER BY rand() LIMIT 1";
$result_image1 = mysql_query( $sql_image1, $conn );    
$row_image1 = mysql_fetch_assoc( $result_image1 );
 
// Requete image 2
$sql_image2 = "SELECT * FROM images WHERE id_image != '".$row_image1['id_image']."' ORDER BY rand() LIMIT 1";
$result_image2 = mysql_query( $sql_image2, $conn );    
$row_image2 = mysql_fetch_assoc( $result_image2 );
?>
<!--ICI, tu affiches tes images-->
<?php
mysql_close(); // Déconnexion BDD
?>

Pour le traitement des votes, il te suffit de faire 2 requêtes d'update ...

Voilà en simplifié

[Le Mascou]

Hello,

Alors quelques petits problèmes ().

J'ai bien créé la table, modifier le CSS, mais je n'arrive pas à afficher les images. J'ai insérer le code suivant dans mon site :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
// Connexion à ta base de données
 
// Requete image 1
$sql_image1 = "SELECT * FROM images ORDER BY rand() LIMIT 1";
$result_image1 = mysql_query( $sql_image1, $conn );    
$row_image1 = mysql_fetch_assoc( $result_image1 );
 
// Requete image 2
$sql_image2 = "SELECT * FROM images WHERE id_image != '".$row_image1['id_image']."' ORDER BY rand() LIMIT 1";
$result_image2 = mysql_query( $sql_image2, $conn );    
$row_image2 = mysql_fetch_assoc( $result_image2 );
?>
<!--ICI, tu affiches tes images-->
<?php
mysql_close(); // Déconnexion BDD
?>

Mais j'ai des messages d'erreur qui apparaissent alors à la place:

Code :

1
2
3
4
5
6
7
Warning: mysql_query() [function.mysql-query]: A link to the server could not be established in /mnt/132/sda/0/f/local/index.php on line 72
 
Warning: mysql_fetch_assoc(): supplied argument is not a valid MySQL result resource in /mnt/132/sda/0/f/local/index.php on line 73
 
Warning: mysql_query() [function.mysql-query]: A link to the server could not be established in /mnt/132/sda/0/f/local/index.php on line 77
 
Warning: mysql_fetch_assoc(): supplied argument is not a valid MySQL result resource in /mnt/132/sda/0/f/local/index.php on line 78

Une idée ? D'autre part je n'ai pas trop compris ce que je dois faire par rapport à mes images du répertoire ? Elles se trouvent dans le répertoire "/photos", nommées "1.jpg", "2.jpg", etc.

Encore merci

[elcoyotos]

Une idée ?

Oui, vous devez établir la connexion avec votre base de données

Pas le temps de vous apprendre PHP
Ici tuto pour grand débutant pressé

[Le Mascou]

Voilà, ce problème là est réglé Je suis bien connecté à ma BDD.

Maintenant pouvez-vous me ré-expliquer ce que je dois faire pour les images ? Pour l'instant elles sont donc dans "/photos" (dossier à la racine du serveur) sous le nom de "1.jpg", "2.jpg", ...

Désolé pour toutes ces questions...
Mais merci beaucoup !

[Joker-eph]

il faut commencer charger la base avec le chemin pour les images ; soit à la main soit avec un script ...

En l'occurence le script sera même très simple vu le nom des images, pas besoin de scanner le disque, il suffit de générer les noms des fichiers

[Le Mascou]

Envoyé par Joker-eph

il faut commencer par charger la base avec le chemin pour les images ; avec un script ...

Un peu d'aide pour que je commence ?
Comment dois-je procéder ?

[elcoyotos]

Pas le temps de vous apprendre PHP
Ici tuto pour grand débutant pressé

[Joker-eph]

T'as bien vu la structure de la table images non ?

Tu fais une boucle for($i=1; $i<= nbImage; $i++) et tu inserts à chaque fois dans la table un enregistrement avec pour nom_image $i.jpg et votes 0 ;-)

[Le Mascou]

Merci des réponses

Alors je galère un peu (beaucoup). Pour résumé ce que j'ai fais :
- j'ai créé un champ "url" avec : VARCHAR(100) et latin_general_ci
- puis j'ai insérer un enregistrement avec : id laissé vide (comme c'est automatique), nom_image : $i.jpg, url : photos/, vote: 0

Est-ce que jusque là c'est bon ?

[Joker-eph]

Envoyé par Le Mascou

- puis j'ai insérer un enregistrement avec : id laissé vide (comme c'est automatique), nom_image : $i.jpg, url : photos/, vote: 0

T'as vraiment mis $i.jpg comme nom ? $i est à remplacé par le numéro de l'image et il faut autant d'enregistrement que d'images.

[Le Mascou]

Ah ben oui, je fais ce que vous me dites ^^

Donc j'ai rentré pour commencé 4 lien d' images dans la BDD. Dans le nom_image, j'ai uniquement mis comme lien "/photos/1.jpg", pas le chemin complet. Est-ce que c'est bon ?

Autrement, je n'ai pas d'image qui s'affiche sur le site.
Voici mon code php pour résumer :

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
<?php
// Connexion à ta base de données
include("fonctions.php");
 
connectMaBase();
 
// Requete image 1
$sql_image1 = "SELECT * FROM images ORDER BY rand() LIMIT 1";
$result_image1 = mysql_query( $sql_image1, $conn );    
$row_image1 = mysql_fetch_assoc( $result_image1 );
 
// Requete image 2
$sql_image2 = "SELECT * FROM images WHERE id_image != '".$row_image1['id_image']."' ORDER BY rand() LIMIT 1";
$result_image2 = mysql_query( $sql_image2, $conn );    
$row_image2 = mysql_fetch_assoc( $result_image2 );
?>
<!--ICI, tu affiches tes images-->
 
<?php
for($i=1; $i<= nbImage; $i++)
 
?>
 
<input type="submit" name="submit" value="Voter" />
 
<?php
mysql_close(); // Déconnexion BDD
?>

Encore et encore merci beaucoup