Sistema de valoración de opinion de usuarios para webs con PHP

¿Cómo implementar un sistema de valoración (rating) de opinion de usuarios en nuestras entradas, webs o apps?

Hoy os traigo un código para poder preguntar a vuestros usuarios por la opinión que tienen sobre cualquier parte de vuestra web o app. Dicha valoración la recogemos a través de un formulario con 5 (o 10, o las que necesitéis…) opciones mostradas como estrellas.

Creo que, como siempre, he utilizado el código más simple y entendible posible. Ya sabéis que para todo hay formas más correctas y funcionales para hacer lo mismo, pero como dice el título de este blog, yo programo a mi manera, y creo que puede ser de interés para muchos de los que como yo, empezáis en el mundo de la programación.

Pues llegados aquí, empecemos con nuestro código.

Lo he insertado todo en un sólo archivo, el famoso index.php, aunque os recomiendo separar el código en función de vuestras necesidades.

Os cuento  en qué consiste este código.

Empezamos con el formulario que mostrará las estrellas para marcar. En este código veréis que he puesto 5 inputs. Si lo necesitas, puedes añadir más  estrellas por encima respetando la numeración.

  <form action="index.php" method="POST">

    <p class="clasificacion">
      <input onclick="this.form.submit()" id="rat5"  name="rate" value="5" type="radio" class="star"
      <?php if ($media==5) echo "checked='checked'"; ?>/>
      <label class="star" for="rat5"></label>
      <input onclick="this.form.submit()" id="rat4"  name="rate" value="4" type="radio" class="star"
      <?php if ($media==4) echo "checked='checked'"; ?>/>
      <label class="star" for="rat4"></label> 
      <input onclick="this.form.submit()" id="rat3"  name="rate" value="3" type="radio" class="star"
      <?php if ($media==3) echo "checked='checked'"; ?>/>
      <label class="star" for="rat3"></label>
      <input onclick="this.form.submit()" id="rat2"  name="rate" value="2" type="radio" class="star"
      <?php if ($media==2) echo "checked='checked'"; ?>/>
      <label class="star" for="rat2"></label> 
      <input onclick="this.form.submit()" id="rat1" name="rate" value="1" type="radio" class="star"
      <?php if ($media==1) echo "checked='checked'"; ?>/>
      <label class="star" for="rat1"></label>

    </p>
  </form>

Verás que, cuando el usuario hace click en una de las estrellas (inputs), se envía el «value» a través de POST y lo recogemos en la misma pagina index.php a través del típico código PHP que recibe los datos y los muestra.

 <?php 

//añade aqui todo tu codigo para gestionar las puntuaciones//

/*este codigo recoge la valoración realizada por el usuario
en la variable $rating*/
  if(isset($_POST['rate'])){
    $rating= $_POST['rate'];
    echo 'Rating '.$rating;
  }

/*este codigo recibe la media de valoraciónes realizadas por los
 usuarios y la guarda en la variable $media*/
  if(isset($_POST['media'])){
    $media= $_POST['media'];
    echo 'Media '.$media;
  }else{
//consultamos a la base de datos para recibir la media de valoraciones
    $media= 7;
  }
  ?>

Si pruebas este código, verás cómo muestra las estrellas y te permite seleccionar cada una de ellas mostrando después la estrella pulsada, cuyo valor lo recibe la variable $rating.

Lo correcto sería guardar esta variable en la base de datos para poder sacar una media de todas las opiniones recibidas.

Por otro lado tenemos la variable $media, que es la que recibe la media de valoraciones de los usuarios. Esta información debemos recogerla tras hacer una consulta en la base de datos.

En este caso, la media de las valoraciones ha de ser un numero entero, sin decimales de 0 a 10 ( o de 0 a 5 si así lo has decidido). Recibimos ese valor y lo guardamos en la variable $media. Según el valor de esta variable, se añade el atributo checked=’checked’ al input correspondiente para que ilumine esa estrella y las anteriores (esto lo conseguimos con «:checked ~ label» de nuestro archivo CSS).

De ésta manera, tendremos iluminadas las estrellas que nos indicarán la media de las valoraciones.

Para este ejemplo, he añadido un formulario para que puedas poner manualmente ese dato, la media, para ver cómo quedaría además de fijar la variable $media a 7.

Este es el código.

<form action="" method="POST" role="form">
    <div class="form-group">
      <label for="">Media</label>
      <input type="number" name="media" class="form-control" id="" placeholder="Media">
    </div> 
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Si añades todo este codigo en un archivo index.php, podrás ver cómo funciona, a la vez que podrás adaptarlo a tus necesidades. 

Y ahora, para finalizar, sólo falta el archivo CSS, styles.css, éste si ha de estar en un archivo aparte.

body{
  text-align: center;
}
input[type=radio] {
  display: none;
}
input[type=radio] + label:before {
  font-family: "Font Awesome 5 Free";
  content: "★";
  display: inline-block;
  cursor: pointer;
  font-size: 2rem;
}

label {
  color: grey;
}
.clasificacion{
  direction: rtl;/* right to left */
  unicode-bidi: bidi-override;/* bidi de bidireccional */
}
label:hover,
label:hover ~ label {
  color: orange;
}
input[type="radio"]:checked ~ label {
  color: orange;
}

Y con esto, finalizamos esta entrada.

Puedes ver cómo funciona AQUI.   Ahora , deberás implementarla según tus necesidades.

Puedes añadir este código muy facilmente a tus webs, blogs o aplicaciones. Recibes las valoraciones y muestras la media de esas valoraciones.

Espero que os sea de utilidad. Hasta pronto !!