Calificacion por estrellas con jQuery, AJAX y PHP

Implantaremos un sistema de calificación completo. Para eso, vamos a manejar la interfaz con jQuery y CSS y administrar el backend con PHP. Para facilitar las cosas, la calificación se actualizará en tiempo real mediante AJAX y los datos se almacenarán en un archivo de texto. En este ejemplo vamos a poder calificar dos películas: Despicable Me 2 y Monster University. Para mantener el orden, todo el código jQuery va a estar en un archivo llamado script.js, mientras que todo el código CSS va a estar almacenado en un archivo llamado styles.css.

Para cada película creamos un div con clase divPelicula como contenedor. Dentro de este, hay dos divs más: uno para la portada y otro para la información de los votos. Dentro del de información, encontramos otro div que va a contener todos los datos de puntaje de la película. Cada divValoracion, debe contener un id específico para saber de qué película se trata (lo usaremos al momento de la votación). Para cada estrella creamos un div, al cual le establecemos la clase estrellasValoracion y una clase llamada estrella_X, donde X representa un número de 1 al 5. Este número nos va a permitir saber por cuál estrella se votó. Finalmente dentro del divValoración, tenemos otro div con clase votosTotales donde mostraremos el puntaje exacto de cada película.

Comenzamos a editar el documento, primero vamos por las cabeceras.

El div que contiene todos los datos de la película.

A los dos divs hijos, les indicamos el float por izquierda.

Editamos el div de la carátula

El contenedor de las estrellas y el puntaje.

Empezamos a trabajar con las estrellas. Indicamos que en principio las mismas estén vacías (imagen de una estrella vacía).

Cuando obtengamos los votos, le incluiremos esta clase.

Y cuando se ponga el mouse por encima, le agregaremos la siguiente clase, para diferenciar las estrellas que ya posee, de las que nosotros queremos otorgarle.

Para terminar, le damos estilo al div de la información de los votos.

jQuery

Nuestro código tiene que hacer varias cosas. Por lo que vamos a ir paso a paso para no perdernos. Primero y principal, vamos a indicar que el resto del código debe ejecutarse cuando la página se haya cargado correctamente.

Lo siguiente, es darle interacción a las estrellas; para que al pasar el mouse, se cambien las imágenes de acuerdo a dónde está puesto el mouse.

Necesitamos guardar el voto del usuario, al momento de hacer click sobre una de las estrellas.

Por último, nos falta cargar las estrellas con los datos obtenidos en la página PHP.

PHP Nuestro archivo PHP va a contar con dos cosas. Por un lado vamos a crear una clase que administre los puntajes, y por el otro una validación para saber si al momento de acceder a la página se quiere buscar los votos o votar. Empecemos con la clase. Va a contener 3 propiedades: el archivo de texto donde guardamos los votos, el id de la película que se necesita y un arreglo donde mantendremos los datos de la misma.

Le creamos un constructor para establecer los datos al inicio.

Hasta ahora, cada vez que se cree un objeto de esta clase, le asignaremos el id de la película y va a intentar levantar los datos desde el archivo de texto. Nos falta crear dos métodos, uno para obtener los votos de una película.

Y otro para votar…

Solo falta controlar las llamadas que vendrán por JSON desde la página. Para eso, sólo necesitamos dos líneas de código.

 

facebook Calificacion por estrellas con jQuery, AJAX y PHPtwitter Calificacion por estrellas con jQuery, AJAX y PHPgoogle Calificacion por estrellas con jQuery, AJAX y PHPdiggit Calificacion por estrellas con jQuery, AJAX y PHPpinterest Calificacion por estrellas con jQuery, AJAX y PHPlinkedin Calificacion por estrellas con jQuery, AJAX y PHPprint Calificacion por estrellas con jQuery, AJAX y PHPemail Calificacion por estrellas con jQuery, AJAX y PHPSi te gusto, comparte el articulo.

Artículos Relacionados

Agregar comentario


*

Recibe nuestro newsletter

Suscribete a nuestro newsletter y mantente informado con nuestros últimos artículos, noticias y más. Todo completamente gratis.