PHP et Javascript - Gestion d'avis

Tout ce qui est développement WEB.
Avatar de l’utilisateur
fabio
Gourou
Gourou
Messages : 1341
Inscription : 11 sept. 2011, 16:32

PHP et Javascript - Gestion d'avis

Message par fabio » 14 déc. 2018, 15:21

La mise ne musique des techniques vues précédemment permet de répondre au TP sur les avis (merci pour l'idée à Camélia), l'idée étant d'avoir un petit module qui récupère les avis d'utilisateurs grâce à une représentation en étoiles.

Tout d'abord la base de données qui contient les avis.
Sous Postgresql

Code : Tout sélectionner

create database avis;
create role avis_admin password 'admin' login;
grant all on database avis to avis_admin;
Ensuite sous l'utilisateur avis_admin

Code : Tout sélectionner

begin transaction;
create table avis
	(
	id_avis serial primary key,
	note integer,
	check (note>=0 and note<=10)	
	);
commit;
Puis les deux pages, une qui contient le formulaire, l'autre qui contient le traitement (accès à la base, stockage de l'avis émis). Nous avons ajouté une page connexion.php pour éviter de recopier deux fois la même chose sur les deux pages (nous aurions pu bien sûr nous contenter d'une page, mais c'est moins lisible).

page connexion.php

Code : Tout sélectionner

<?php
	$db_name = "avis";
	$db_user = "avis_admin";
	$db_mdp = "admin";
	$db_host = "127.0.0.1";
	$s_conn = 'host='.$db_host.' dbname='.$db_name.' user='.$db_user.' password='.$db_mdp;
	$conn = pg_connect($s_conn);
?>
page avis.php

Code : Tout sélectionner

<?php
		// Partie du code qui affiche le nombre d'avis et la moyenne
		include('connexion.php');
		$s_req = "select count(id_avis), avg(note)::numeric(4,2) from avis"; 	
		$req = pg_query($s_req);
		$tab = pg_fetch_row($req);
		$nb_avis = $tab[0];	
		$moyenne = $tab[1];
		echo "<br>Nombre d'avis : ".$nb_avis;
		echo "<br>Moyenne des avis : ".$moyenne;
	?>
	<hr>
	<div id="etoiles">
		<!-- On appelle la page avis_go.php avec la méthode GET quand on appuie sur le bouton -->
		<form action="avis_go.php" method="get">
			<?php	
				// Crée les étoiles à partir de l'image star_b.png
				for($i=0; $i<10; $i++)
					{
					// nous ajoutons un événement onclick à chaque étoile qui 
					// appelle une fonction JS select() 
					// qui reçoit la valeur de $i (voir le code source 
					// du code généré dans la page 
					echo '<img src="star_b.png" onclick="select('.$i.')" />';				
					}
				?>
			<input type="hidden" min="1" max="10" name="note">
			<button><img src="fleche.png" /></button>
		</form>
	</div>
page avis_go.php

Code : Tout sélectionner

<?php
	include('connexion.php');
	// Protection injection
	$val = $_GET['note']*1;
	$s_req = "insert into avis(note) values (".$val."')"; 	
	$req = pg_query($s_req);
	// instruction qui permet de revenir à la page avis.php
	header('Location: avis.php');
?>
Bien sûr, il manque quelques éléments pour finaliser
la page avis.js

Code : Tout sélectionner

function select(a)
	{
	var d=document.getElementById('etoiles');
	var stars=d.getElementsByTagName('img'); 
	for(var i=0; i<10; i++)
		{
		stars[i].setAttribute("src", "star_b.png"); 		
		}
	for(var i=0; i<=a; i++)
		{
		stars[i].setAttribute("src", "star_j.png"); 		
		}
	var val=d.getElementsByTagName('input');
	val[0].value = a+1;
	var b=d.getElementsByTagName('button');
	b[0].style.display='block';
	}

function select(a)
	{
	// On récupère un élément DIV qui contient les images d'étoiles
	var d=document.getElementById('etoiles');
	// On récupère un tableau d'éléments IMG qui vont contenir 
	// soit une étoile blanche, soit une étoile jaune  	
	var stars=d.getElementsByTagName('img'); 
	// dans un premier temps, on met dans chaque balise IMG 
	// une source qui correspond à une étoile blanche 
	for(var i=0; i<10; i++)
		{
		stars[i].setAttribute("src", "star_b.png"); 		
		}
	// Ensuite, grâce à la valeur de a, on met dans chaque
	// balise IMG une étoile jaune jusqu'à la valeur de a
	for(var i=0; i<=a; i++)
		{
		stars[i].setAttribute("src", "star_j.png"); 		
		}
	// Ici, on a choisi pour des raisons pédagogiques de 
	// renseigner un élément INPUT du formulaire qui est 
	// caché aux yeux de l'utilisateur, nous aurions 
	// pu tout faire en JS
	// Pour tester, vous pouvez retirer le type hidden
	// au profit d'un type text dans l'input 
	var val=d.getElementsByTagName('input');
	val[0].value = a+1;
	// Ici, c'est le bouton qui va déclencher 
	// l'envoi du formulaire
	// il est caché au chargement de la page et n'apparaît
	// que quand l'utilsateur a cliqué sur une étoile
	var b=d.getElementsByTagName('button');
	b[0].style.display='block';
	}
la page avis.css (à triturer à souhait :D )

Code : Tout sélectionner

img
	{
	float: left;	
	}

button 
	{
	display: none;
	margin: 0px;
	padding: 0px;
	background-color: white;
	border-color: white; 
	border-style: none; 
	padding-left: 20px;
	}


Enfin, les 3 images utilisés, à modifier à souhait aussi ...
  • fleche.png
    fleche.png (1.31 Kio) Consulté 1377 fois
  • La pièce jointe star_b.png n’est plus disponible
  • La pièce jointe fleche.png n’est plus disponible


Bien sûr, tout cela est bien sûr réalisé à vocation pédagogique, l'idée est de comprendre les mécanismes qui interviennent.

:ugeek:

Répondre