Post Top Ad

Your Ad Spot

jueves, 7 de mayo de 2020

Me gusta y sistema a diferencia utilizando PHP y base de datos MySQL

En este tutorial, crearemos un sistema de me gusta / a diferencia algo similar a lo que implementa Facebook. Las publicaciones se obtienen de una base de datos MySQL y se repiten y se muestran usando PHP, cada una con un botón de me gusta y su recuento de me gusta. Los usuarios en el 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 volver a cargar toda la página) y font-awesome (que nos proporciona ese pequeño icono de pulgares).
Para hacer esto, necesitaremos tres tablas de base de datos: publicaciones, usuarios y me gusta .
publicaciones :
  • id - int (11)
  • texto - texto
  • Me gusta - int (11)
usuarios:
  • id - int (11)
  • nombre - varchar (255)
gustos:
  • id - int (11)
  • userid - int (11)
  • postid - int (11)
En primer lugar, me gustaría decir que estas tablas son demasiado básicas para cualquier aplicación grande. Solo he considerado los campos muy básicos que serán suficientes para demostrar toda la dinámica de me gusta / no me gusta. Siéntase libre de modificarlo para satisfacer sus necesidades.
Una última cosa en la tabla de publicaciones 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 se consultarán más adelante y se mostrarán en la página web donde se les puede dar me gusta o no.
Ahora el código.
Cree un archivo index.php en la raíz de su aplicación. Descargue jquery y colóquelo también en la raíz de su 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 la fuente impresionante.
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:
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 preocupación, déjela en el comentario para que las personas en esta plataforma puedan ayudar.
Gracias

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas