En este tutorial, crearemos un sistema similar / diferente al que implementa Facebook. Las publicaciones se obtienen de una base de datos MySQL y se recorren y se muestran usando PHP, cada una con un botón Me gusta y su recuento de Me gusta. Los usuarios del sistema pueden dar me gusta o no a cualquier publicación y esta información se actualizará en la base de datos. Además de PHP y MySQL, usaremos JQuery (que nos ayuda a actualizar la base de datos cuando al usuario le gusta una publicación, sin recargar toda la página) y font-awesome (que nos proporciona ese pequeño icono de pulgar).
Para hacer esto, necesitaremos tres tablas de base de datos: publicaciones, usuarios, y gustos.
publicaciones:
- id – int (11)
- texto – texto
- me gusta – int (11)
usuarios:
- id – int (11)
- nombre – varchar (255)
gustos:
- id – int (11)
- ID de usuario – int (11)
- poste – int (11)
En primer lugar, me gustaría decir que estas tablas son demasiado básicas para cualquier gran aplicación. Solo he considerado los campos muy básicos que serán suficientes para demostrar toda la dinámica similar / diferente. No dude en modificarlo para adaptarlo a sus necesidades.
Una última cosa en el publicaciones tabla en la base de datos, inserte algunos valores ficticios en la tabla de publicaciones. Solo textos básicos. Inserte tantos registros como desee. Estos registros, más adelante, serán consultados y mostrados en la página web donde se pueden agradar y desagradar.
Ahora el código.
Crea un archivo index.php en la raíz de tu aplicación. Descarga jquery y colócalo también en la raíz de tu aplicación. Coloque este código en el archivo index.php:
index.php
<?php
// connect to the database
$con = mysqli_connect('localhost', 'root', '', 'like');
if (isset($_POST['liked'])) {
$postid = $_POST['postid'];
$result = mysqli_query($con, "SELECT * FROM posts WHERE id=$postid");
$row = mysqli_fetch_array($result);
$n = $row['likes'];
mysqli_query($con, "INSERT INTO likes (userid, postid) VALUES (1, $postid)");
mysqli_query($con, "UPDATE posts SET likes=$n+1 WHERE id=$postid");
echo $n+1;
exit();
}
if (isset($_POST['unliked'])) {
$postid = $_POST['postid'];
$result = mysqli_query($con, "SELECT * FROM posts WHERE id=$postid");
$row = mysqli_fetch_array($result);
$n = $row['likes'];
mysqli_query($con, "DELETE FROM likes WHERE postid=$postid AND userid=1");
mysqli_query($con, "UPDATE posts SET likes=$n-1 WHERE id=$postid");
echo $n-1;
exit();
}
// Retrieve posts from the database
$posts = mysqli_query($con, "SELECT * FROM posts");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Like and unlike system</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- display posts gotten from the database -->
<?php while ($row = mysqli_fetch_array($posts)) { ?>
<div class="post">
<?php echo $row['text']; ?>
<div style="padding: 2px; margin-top: 5px;">
<?php
// determine if user has already liked this post
$results = mysqli_query($con, "SELECT * FROM likes WHERE userid=1 AND postid=".$row['id']."");
if (mysqli_num_rows($results) == 1 ): ?>
<!-- user already likes post -->
<span class="unlike fa fa-thumbs-up" data-id="<?php echo $row['id']; ?>"></span>
<span class="like hide fa fa-thumbs-o-up" data-id="<?php echo $row['id']; ?>"></span>
<?php else: ?>
<!-- user has not yet liked post -->
<span class="like fa fa-thumbs-o-up" data-id="<?php echo $row['id']; ?>"></span>
<span class="unlike hide fa fa-thumbs-up" data-id="<?php echo $row['id']; ?>"></span>
<?php endif ?>
<span class="likes_count"><?php echo $row['likes']; ?> likes</span>
</div>
</div>
<?php } ?>
<!-- Add Jquery to page -->
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
// when the user clicks on like
$('.like').on('click', function(){
var postid = $(this).data('id');
$post = $(this);
$.ajax({
url: 'index.php',
type: 'post',
data: {
'liked': 1,
'postid': postid
},
success: function(response){
$post.parent().find('span.likes_count').text(response + " likes");
$post.addClass('hide');
$post.siblings().removeClass('hide');
}
});
});
// when the user clicks on unlike
$('.unlike').on('click', function(){
var postid = $(this).data('id');
$post = $(this);
$.ajax({
url: 'index.php',
type: 'post',
data: {
'unliked': 1,
'postid': postid
},
success: function(response){
$post.parent().find('span.likes_count').text(response + " likes");
$post.addClass('hide');
$post.siblings().removeClass('hide');
}
});
});
});
</script>
</body>
</html>Tenga en cuenta que hemos incluido Jquery y font-awesome en esta aplicación. Para ambos, puede descargar los archivos y colocarlos en la raíz de su aplicación. O simplemente puede vincularlos a un CDN como hice con el font-awesome.
También está el archivo de estilos que no podemos dejar de lado. Cree un archivo styles.css en la raíz de su aplicación y agregue el siguiente código CSS en él:
body {
padding-top: 100px;
}
.post {
width: 30%;
margin: 10px auto;
border: 1px solid #cbcbcb;
padding: 5px 10px 0px 10px;
}
.like, .unlike, .likes_count {
color: blue;
}
.hide {
display: none;
}
.fa-thumbs-up, .fa-thumbs-o-up {
transform: rotateY(-180deg);
font-size: 1.3em;
}
Ahora hemos terminado. Inicie su aplicación en su navegador y ejecútela.
Espero que hayan disfrutado el tutorial. Si tiene alguna inquietud, déjela en el comentario para que la gente de esta plataforma pueda ayudar.
Gracias
Awa Melvine.
Relacionado: