Rating con CSS, Ajax, PHP y MySQL

Bueee!! la verdad es que ando .. como que muy aplicada jajaajajajaja y el caso es que ando programando mucho xDDDD [Aunque ud. no lo crea (= ]

En fin, para empezar el año productivamente les traigo como hacer un rating para evaluar algo en su página web, si, si!! esos medidores con estrellitas que nos ayudan a evaluar una noticia, una imagen o cualquier cosa, la parte padre es que es muy simple.. y no es tan complicado.

Esta basado en CSS [se ha convertido en mi compañero fiel xDD], Ajax [Obvio =P], PHP y una mini tablita en MySQL.

Asi pues, empecemos, paso a pasito xDDD

1. Bajamos la imagen que necesitamos, alt_star.gif AQUI. Es para las estrellitas, si quieren mover el tamaño de ella, o algo asi.. necesitan checar después el archivo CSS.
2. Bajamos el arhivo de JavaScript, rating.js para el Ajax: AQUI.
3. Bajamos el archivo CSS starrating.css, para los estilos del onmouseover de cada estrella. AQUI.
   
4. Creamos la tabla que guardará los datos en MySQL, yo la llame "votos".

1  CREATE TABLE IF NOT EXISTS `votos` (
2  `total_votos` int(8) NOT NULL,
3  `valor_votos` int(8) NOT NULL,
4  `id_noticia` varchar(100) NOT NULL,
5  UNIQUE KEY `imgId` (`id_noticia`)
6  ) ENGINE=MyISAM DEFAULT CHARSET=latin1;

5. Creamos el archivo update.php que es el que actualizará los datos en la BD.
   

1 <?php
2  if(isset($_REQUEST['valor']) && isset($_REQUEST['id_noticia'])){
3  //Nos conectamos a la BD
4       include("conexion.php");
5       $link = select_db($linky,"nombre_bd");
6       $id_noticia = $_REQUEST['id_noticia'];
7  //Actualizamos contador de la noticia
8       $update = "update votos set total_votos = total_votos + 1,
9       valor_votos = valor_votos + ".$_POST['valor']." WHERE id_noticia = '".$id_noticia."'";
10       $result = mysql_query($update);
11  //Si no existe entonces, se inserta un nuevo registro, esto ayuda a que no tengamos
12  //registros vacios de noticias que no han sido votadas.
13       if(mysql_affected_rows() == 0){
14            $insert = "insert into votos (total_votos,valor_votos,id_noticia)
15            values ('1','".$_POST['valor']."','$id_noticia')";
16            $result = mysql_query($insert);
17       }
18  }
19  ?>

6. Y para probar, el código index.php:
   

1  <div id="rating">
2      <?php
3       //Noticia recibida via encabezado para ver cual se va a evaluar
4       $id_noticia= $_GET["id_noticia"];
5       //Se hace la consulta con respecto a la noticia para sabeer si ya tiene votos
6       //y mostrar el relleno en CSS
7       $sql= "select * from votos WHERE id_noticia= '".$id_noticia."' LIMIT 0, 1";
8       $result=@mysql_query($sql);
9       $rs=@mysql_fetch_array($result);
10       $rating = @round($rs['valor_votos'] / $rs['total_votos'],1); ?>
11      <ul class='star-rating'>
12      <li class='current-rating' id='current-rating' style='background:
13      url(alt_star.gif) left center!important; left: 0px!important; margin: 0px!important;
14      width:<?php $ratingpx = $rating *25; echo $ratingpx;?>px;'>
15      <!-- Currently <?php echo $rating ?>/5 Stars. --></li>
16      <span id="ratelinks">
17          <li><a href="javascript:agregavoto(1,<?php echo $id_noticia ?>)"
18               title='1 Estrella de 5' class='one-star'>1</a></li>
19          <li><a href="javascript:agregavoto(2,<?php echo $id_noticia ?>)"
20               title='2 Estrellas de 5' class='two-stars'>2</a></li>
21          <li><a href="javascript:agregavoto(3,<?php echo $id_noticia ?>)"
22               title='3 Estrellas de 5' class='three-stars'>3</a></li>
23          <li><a href="javascript:agregavoto(4,<?php echo $id_noticia ?>)"
24               title='4 Estrellas de 5' class='four-stars'>4</a></li>
25          <li><a href="javascript:agregavoto(5,<?php echo $id_noticia ?>)"
26               title='5 Estrellas de 5' class='five-stars'>5</a></li>
27      </span>
28      </ul>
29      <p style="margin-top: -15px;">
30       <?php if(isset($rs['total_votos'])) echo $rs['total_votos']; else echo "0"; ?>
31          voto(s) en total.</div>
32  </div>     

No olviden agregar los encabezados tanto de rating.js como de starrating.css. Espero que les sirva.. porque yo aprendi bastante... si tienen dudas por ahi y se las puedo resolver xDDD

saludites XDDD