Categorías destacadas
Artículo
|
Crear una aplicación de sugerencias utilizando PHP, MySQL y jQuery |
Vamos a ver como poder crear una aplicación donde los usuarios puedan poner sugerencias para luego poder ser votadas por todos aquellos que entren en la página a consultarla. Para ello utilizaremos PHP, MySQL para el almacenamiento de las sugerencias y los votos de cada una de estas sugerencias y jQuery para actualizar las votaciones y añadir nuevas sugerencias sin la necesidad de tener que refrescar toda la web.
Lo primero que hacemos es crear la estructura XHTML de nuestra aplicación. El código es el siguiente.
Si miramos el código, lo que tenemos son las llamadas a la hoja de estilo y a la librería jquery. También tenemos la cabecera que precederá a nuestra lista de sugerencias. La lista estará en un principio vacía y se irán añadiendo a la lista de forma dinámica.
Por último tenemos el formulario desde donde haremos el envío de estas sugerencias.
Ahora lo que vamos a ver son las tablas de bases de datos que utilizaremos en la aplicación, en concreto utilizaremos dos tablas.
En la primera tabla, a la que llamamos suggestions, la utilizaremos para almacenar las sugerencias, votos positivos, votos negativos, diferencia de votos. Su estructura es la siguiente.
Id unsigned int(10) primary key
Suggestion varchar (255)
votes_up int (6)
votes_down int (6)
rating int (6)
dt timestamp
Mientras que la segunda tabla la denominaremos suggestions_votes, y la utilizaremos para controlar los votos que ha realizado una ip, para que no pueda votar a esa sugerencia de nuevo. Su estructura es la siguiente.
suggestion_id unsigned int(10) primary key
ip int (10)
day date
vote tinyint(1)
dt timestamp
A continuación nos metemos a ver los archivos php que forman la aplicación.
El primero de ellos es el archivo suggestion.class.php. En esta clase utilizaremos dos métodos de los denominados “mágicos” en php, como son “__toString” y “__get”. Cuando se genera la primera página, el php ejecuta un select en la base de datos para obtener las sugerencias. Por cada una de ellas se genera un objeto de esta clase. Las columnas de la fila se añaden como propiedades del objeto.
El método __toString lo que hace es crear una cadena que será la que se muestre del objeto que llama a este método.
El método __get lo que hace es que cuando se pasa una propiedad que no está definida, se ejecuta. En este caso solo está definida el array, por lo que toda llamada del tipo $obj->suggestion que se haga, hará que se ejecute este método, que lo que hará será devolver el valor que tiene en el array esa propiedad.
Lo siguiente que hacemos es la creación de la lista desordenada de sugerencias.
Después de ejecutar la consulta, nosotros utilizamos la función fetch_object() del objeto resultado obtenido de la consulta. Este método crea un objeto de la clase dada por cada fila del resultado, y asigna las columnas de esa fila al objeto como propiedades públicas.
PHP también maneja las solicitudes enviadas por AJAX por medio de jQuery. Esto se hace en ajax.php. Para distinguir una de otra acción AJAX, el script realiza una acción según el parámetro $_GET['action'] , que puede tener uno de dos valores - "votar" o "Enviar".
Cuando lo que hacemos es la inserción de una nueva sugerencia, se crea un nuevo objeto Suggestion que por medio del método __toString(), se convierte en cadena para ser mostrado en la web.
Veamos ahora el código correspondiente a la utilización de jQuery. Este archivo, que llamamos script.js, lo que hace es capturar todos los eventos de los botones de votar o el botón de envío de la nueva sugerencia.
Cuando hacemos un click sobre cualquiera de los botones de votación, jQuery determina si la clase “inactive” está presente en el elemento LI. Esta clase solo está presente si se ha realizado la votación de esa sugerencia durante el último día y si es así, el evento es ignorado. Si no ha sido votado aún, se realiza la votación y se le asigna esa clase al elemento.
Con esto se concluye nuestra aplicación. Pueden ver una demostración aquí.
Vía: Tutorialzine
Lo primero que hacemos es crear la estructura XHTML de nuestra aplicación. El código es el siguiente.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Feature Suggest w/ PHP, jQuery & MySQL | Tutorialzine Demo</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <div id="page"> <div id="heading" class="rounded"> <h1>Feature Suggest<i>for Tutorialzine.com</i></h1> </div> <!-- The generated suggestion list comes here --> <form id="suggest" action="" method="post"> <p> <input type="text" id="suggestionText" class="rounded" /> <input type="submit" value="Submit" id="submitSuggestion" /> </p> </form> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="script.js"></script> </body> </html>
Si miramos el código, lo que tenemos son las llamadas a la hoja de estilo y a la librería jquery. También tenemos la cabecera que precederá a nuestra lista de sugerencias. La lista estará en un principio vacía y se irán añadiendo a la lista de forma dinámica.
Por último tenemos el formulario desde donde haremos el envío de estas sugerencias.
Ahora lo que vamos a ver son las tablas de bases de datos que utilizaremos en la aplicación, en concreto utilizaremos dos tablas.
En la primera tabla, a la que llamamos suggestions, la utilizaremos para almacenar las sugerencias, votos positivos, votos negativos, diferencia de votos. Su estructura es la siguiente.
Id unsigned int(10) primary key
Suggestion varchar (255)
votes_up int (6)
votes_down int (6)
rating int (6)
dt timestamp
Mientras que la segunda tabla la denominaremos suggestions_votes, y la utilizaremos para controlar los votos que ha realizado una ip, para que no pueda votar a esa sugerencia de nuevo. Su estructura es la siguiente.
suggestion_id unsigned int(10) primary key
ip int (10)
day date
vote tinyint(1)
dt timestamp
A continuación nos metemos a ver los archivos php que forman la aplicación.
El primero de ellos es el archivo suggestion.class.php. En esta clase utilizaremos dos métodos de los denominados “mágicos” en php, como son “__toString” y “__get”. Cuando se genera la primera página, el php ejecuta un select en la base de datos para obtener las sugerencias. Por cada una de ellas se genera un objeto de esta clase. Las columnas de la fila se añaden como propiedades del objeto.
class Suggestion
{
private $data = array();
public function __construct($arr = array())
{
if(!empty($arr)){
// The $arr array is passed only when we manually
// create an object of this class in ajax.php
$this->data = $arr;
}
}
public function __get($property){
// This is a magic method that is called if we
// access a property that does not exist.
if(array_key_exists($property,$this->data)){
return $this->data[$property];
}
return NULL;
}
public function __toString()
{
// This is a magic method which is called when
// converting the object to string:
return '
<li id="s'.$this->id.'">
<div class="vote '.($this->have_voted ? 'inactive' : 'active').'">
<span class="up"></span>
<span class="down"></span>
</div>
<div class="text">'.$this->suggestion.'</div>
<div class="rating">'.(int)$this->rating.'</div>
</li>';
}
}
El método __toString lo que hace es crear una cadena que será la que se muestre del objeto que llama a este método.
El método __get lo que hace es que cuando se pasa una propiedad que no está definida, se ejecuta. En este caso solo está definida el array, por lo que toda llamada del tipo $obj->suggestion que se haga, hará que se ejecute este método, que lo que hará será devolver el valor que tiene en el array esa propiedad.
Lo siguiente que hacemos es la creación de la lista desordenada de sugerencias.
require "connect.php";
require "suggestion.class.php";
// Converting the IP to a number. This is a more effective way
// to store it in the database:
$ip = sprintf('%u',ip2long($_SERVER['REMOTE_ADDR']));
// The following query uses a left join to select
// all the suggestions and in the same time determine
// whether the user has voted on them.
$result = $mysqli->query("
SELECT s.*, if (v.ip IS NULL,0,1) AS have_voted
FROM suggestions AS s
LEFT JOIN suggestions_votes AS v
ON(
s.id = v.suggestion_id
AND v.day = CURRENT_DATE
AND v.ip = $ip
)
ORDER BY s.rating DESC, s.id DESC
");
$str = '';
if(!$mysqli->error)
{
// Generating the UL
$str = '<ul class="suggestions">';
// Using MySQLi's fetch_object method to create a new
// object and populate it with the columns of the result query:
while($suggestion = $result->fetch_object('Suggestion')){
$str.= $suggestion; // Uses the __toString() magic method.
}
$str .='</ul>';
}
Después de ejecutar la consulta, nosotros utilizamos la función fetch_object() del objeto resultado obtenido de la consulta. Este método crea un objeto de la clase dada por cada fila del resultado, y asigna las columnas de esa fila al objeto como propiedades públicas.
PHP también maneja las solicitudes enviadas por AJAX por medio de jQuery. Esto se hace en ajax.php. Para distinguir una de otra acción AJAX, el script realiza una acción según el parámetro $_GET['action'] , que puede tener uno de dos valores - "votar" o "Enviar".
require "connect.php";
require "suggestion.class.php";
// If the request did not come from AJAX, exit:
if($_SERVER['HTTP_X_REQUESTED_WITH'] !='XMLHttpRequest'){
exit;
}
// Converting the IP to a number. This is a more effective way
// to store it in the database:
$ip = sprintf('%u',ip2long($_SERVER['REMOTE_ADDR']));
if($_GET['action'] == 'vote'){
$v = (int)$_GET['vote'];
$id = (int)$_GET['id'];
if($v != -1 && $v != 1){
exit;
}
// Checking to see whether such a suggest item id exists:
if(!$mysqli->query("SELECT 1 FROM suggestions WHERE id = $id")->num_rows){
exit;
}
// The id, ip and day fields are set as a primary key.
// The query will fail if we try to insert a duplicate key,
// which means that a visitor can vote only once per day.
$mysqli->query("
INSERT INTO suggestions_votes (suggestion_id,ip,day,vote)
VALUES (
$id,
$ip,
CURRENT_DATE,
$v
)
");
if($mysqli->affected_rows == 1)
{
$mysqli->query("
UPDATE suggestions SET
".($v == 1 ? 'votes_up = votes_up + 1' : 'votes_down = votes_down + 1').",
rating = rating + $v
WHERE id = $id
");
}
}
else if($_GET['action'] == 'submit'){
// Stripping the content
$_GET['content'] = htmlspecialchars(strip_tags($_GET['content']));
if(mb_strlen($_GET['content'],'utf-8')<3){
exit;
}
$mysqli->query("INSERT INTO suggestions SET suggestion = '".$mysqli->real_escape_string($_GET['content'])."'");
// Outputting the HTML of the newly created suggestion in a JSON format.
// We are using (string) to trigger the magic __toString() method.
echo json_encode(array(
'html' => (string)(new Suggestion(array(
'id' => $mysqli->insert_id,
'suggestion' => $_GET['content']
)))
));
}
Cuando lo que hacemos es la inserción de una nueva sugerencia, se crea un nuevo objeto Suggestion que por medio del método __toString(), se convierte en cadena para ser mostrado en la web.
Veamos ahora el código correspondiente a la utilización de jQuery. Este archivo, que llamamos script.js, lo que hace es capturar todos los eventos de los botones de votar o el botón de envío de la nueva sugerencia.
$(document).ready(function(){
var ul = $('ul.suggestions');
// Listening of a click on a UP or DOWN arrow:
$('div.vote span').live('click',function(){
var elem = $(this),
parent = elem.parent(),
li = elem.closest('li'),
ratingDiv = li.find('.rating'),
id = li.attr('id').replace('s',''),
v = 1;
// If the user's already voted:
if(parent.hasClass('inactive')){
return false;
}
parent.removeClass('active').addClass('inactive');
if(elem.hasClass('down')){
v = -1;
}
// Incrementing the counter on the right:
ratingDiv.text(v + +ratingDiv.text());
// Turning all the LI elements into an array
// and sorting it on the number of votes:
var arr = $.makeArray(ul.find('li')).sort(function(l,r){
return +$('.rating',r).text() - +$('.rating',l).text();
});
// Adding the sorted LIs to the UL
ul.html(arr);
// Sending an AJAX request
$.get('ajax.php',{action:'vote',vote:v,'id':id});
});
$('#suggest').submit(function(){
var form = $(this),
textField = $('#suggestionText');
// Preventing double submits:
if(form.hasClass('working') || textField.val().length<3){
return false;
}
form.addClass('working');
$.getJSON('ajax.php',{action:'submit',content:textField.val()},function(msg){
textField.val('');
form.removeClass('working');
if(msg.html){
// Appending the markup of the newly created LI to the page:
$(msg.html).hide().appendTo(ul).slideDown();
}
});
return false;
});
});
Cuando hacemos un click sobre cualquiera de los botones de votación, jQuery determina si la clase “inactive” está presente en el elemento LI. Esta clase solo está presente si se ha realizado la votación de esa sugerencia durante el último día y si es así, el evento es ignorado. Si no ha sido votado aún, se realiza la votación y se le asigna esa clase al elemento.
Con esto se concluye nuestra aplicación. Pueden ver una demostración aquí.
Vía: Tutorialzine
 |
Publicado por: angel carrero |
|
|
Comentarios
Últimas noticias
· factura
Últimos artículos
