¿Cómo construir un sistema de clasificación de 5 estrellas básico y simple?

Question

Soy muy nuevo en tecnologías web y esto es básicamente para un proyecto de término en el que mi equipo está trabajando. Estamos trabajando en un sitio de revisión de alimentos.

Por el momento, no estoy muy seguro de cómo implementar un simple sistema de clasificación de 5 estrellas. Se supone que debo usar un lenguaje del lado del servidor como PHP o uno del lado del cliente como Javascript (con JQuery). Al mirar a su alrededor parece que JQuery es más adecuado para esto? ¿O sería una combinación de ambos?

Lo que estoy buscando en lo que va funcionalidad es:

• estrellas se iluminan cuando ratón pasa
• página no tiene que ser recargada cuando se hace clic una estrella (no es realmente necesario)
• una especie de promedio que se muestra al lado de las estrellas
• calificación tiene que ser almacenado en algún lugar de una base de datos MySQL (¿Es esta una buena idea?)

Realmente me disculpo si la pregunta suena vaga y estúpida, no tengo mucha idea sobre cómo implementar esto y he intentado buscar en Google. Si tiene alguna pregunta al respecto, por favor hágamelo saber.

Muchas gracias.

Answer 1

estrellas se iluminan cuando ratón pasa
Hay un tutorial brillante en la web para el diseño de un sistema de 5 estrellas: http://rog.ie/blog/css-star-rater. Es puramente CSS así que no hay necesidad de Javascripting.

página no tiene que ser recargada cuando se hace clic en una estrella (no es realmente necesario)
Ajax es su amigo, lo que hice fue tener una <a class="one_star" href="javascript: submitRating(1, 5)"> donde <a> representado una estrella y la función submitRating() utilizado Ajax para transmitir mi calificación (1/5) al servidor, el servidor almacena la calificación (y asigna al usuario que emitió la calificación) y recalcula la nueva calificación promedio y envía los resultados nuevamente en formato JSON.

Algún tipo de promedio que se muestra junto a las estrellas
Fácil. Escriba una secuencia de comandos SQL que, en función de la identificación del producto, tome la suma de la calificación promedio (es decir, 1/5 + 2/5 + 4/5, etc.), divídala (suma) entre la cantidad total de calificaciones y lo multiplica por 100. Devuelve el valor al servidor y del servidor al cliente.

Clasificación tiene que ser almacenado en algún lugar de una base de datos MySQL (¿Es esta una buena idea?)
estoy usando MySQL para este y funciona como un encanto .... Cualquier sistema de base de datos está muy bien.

Answer 2

Estrellas iluminará al ratón pasa
simple, tener una imagen de estrella amarilla y una imagen de estrella blanca. Cuando una estrella está suspendida, todas las estrellas a la izquierda tienen su "src" s cambiado a la estrella amarilla, todas las estrellas a la derecha tienen sus srcs cambiados a la estrella blanca.

Página no se vuelve a cargar cuando la estrella se hace clic en
Mira en Ajax/XHR
http://en.wikipedia.org/wiki/Ajax_(programming)
Consejo: Tener un archivo .php llamada vote.php, y pasar en ella el ID de su comida y la calificación dada por el usuario.

Una especie de promedio que se muestra entre las estrellas
La mayoría de los sitios web sólo se muestran 0%, 50% y 100% de las estrellas ... los usuarios realmente no va a flipar si no consiguen 'precisión exacta'

Clasificación se debe almacenar en la base de datos MySQL
Cualquier sistema de base de datos está muy bien. Pero sí, es probable que desee utilizar una base de datos SQL para este

Answer 3

Sí, su enfoque suena perfecto.hay un par de piezas:

estrellas con efecto hover:

jQuery: http://www.fyneworks.com/jquery/star-rating/

prototipo: http://www.fyneworks.com/jquery/star-rating/

css: http://www.henryhoffman.com/css-star-rating-tutorial.html

onclick puede invocar una llamada AJAX con jQuery: http://api.jquery.com/jQuery.post/

luego en el lado del servidor se puede mantener en una tabla de especificaciones

theres un ejemplo más aquí:

http://webtint.net/tutorials/5-star-rating-system-in-php-mysql-and-jquery/

Answer 4

Una combinación de JS y PHP es el camino a seguir (si PHP es su elegido idioma del lado del servidor). JQuery es una buena forma de implementar fácilmente una especie de sistema protagonista. Una vez desarrollé esto para uno de mis sitios que luego eliminé. Era algo simple que tenía eventos onrollover vinculados a 5 imágenes. Al hacer clic, si era "id 4", enviaría eso como el voto del usuario que utiliza la función .post() de jQuery a un script PHP que anota al usuario y registra el voto en una base de datos MySQL si no lo hubieran hecho ya votado.

Answer 5

Para tener un buen control de estrella, sí necesitas javascript. Entonces deberías hacer jQuery.

Sí, querrá almacenar cosas en una base de datos. Podrías usar PHP y MySQL para eso.

Dado que esta es una asignación de clase, eso es mucho para implementar. Considere hacer trampa usando un CMS existente. Drupal en particular tiene una funcionalidad similar a la que pides. No tendrás que aprender mucho sobre Drupal, solo compra el libro "Usando Drupal". El Capítulo 4 le mostrará cómo:

... crear un sitio web de revisión de productos de la comunidad, con ... y módulos Fivestar que proporcionan un widget de calificación.

Drupal está basado en PHP y utiliza MySQL como su base de datos, por lo que parece coincidir con el lugar al que se dirigía. Puede tomar un poco para que Drupal se ejecute ... pero luego puede acceder al capítulo 4 en un abrir y cerrar de ojos.

Si el maestro insiste en que escriba el código, Drupal es de código abierto y es fácil agregar módulos personalizados.

Answer 6

Aquí hay una respuesta a una pregunta similar y debería ser un gran comienzo.

Turn a number into star rating display using jQuery and CSS