PHP Class Like Button Interface Starter

about.md

TODO

• Import the likes table (likes.sql) into our DB
• write the HTML for the like button interface (index.php)
• Add the CSS for the heart button (css/style.css)
• Add the count_likes function (includes/functions.php)
• add the likes interface function (includes/functions.php)
• add the JS Fetch() call when the user clicks the heart button (includes/footer.php)
• add the ajax handler PHP file to update the DB behind the scenes (ajax-handlers/like-unlike.php)

footer.php

<!-- Additions to the footer. Deferred JS scripts. Add this before </body>-->
<?php if($logged_in_user){ ?>
<script type="text/javascript">
//LIKE/UNLIKE	
document.body.addEventListener('click', function(e){
	if (e.target.className == 'heart-button'){
	   //console.log(e.target.dataset.postid)
	   likeUnlike(e.target)
	}
});

async function likeUnlike( el ){
	let postId = el.dataset.postid
	let userId = <?php echo $logged_in_user['user_id']; ?>;
	//get the container that will be updated after liking
	let container = el.closest('.likes')

	//console.log(postId, userId)
	let formData = new FormData()
	formData.append('postId', postId)
	formData.append('userId', userId)
	
	let response = await fetch("fetch-handlers/like-unlike.php", {
		method:'POST',
	    	body: formData
	})
	if (response.ok) {
		let result = await response.text()
	    	// console.log('ok')
	   	 container.innerHTML = result
	     
	 } else {
	  	console.log(response.status)
	 }
}
</script>
<?php } ?>
<!-- end script  Additions -->

functions.php

<?php 
/**
 * LIKE BUTTON ADDITIONS
 * Count the likes on any post
 */

function count_likes( $post_id ){
  global $DB;
  $result = $DB->prepare( "SELECT COUNT(*) AS total_likes
            FROM likes
            WHERE post_id = ?" );
  $result->execute( array($post_id) );
  if( $result->rowCount() >= 1 ){
    $row = $result->fetch();
    $total = $row['total_likes'];

    //display it with correct grammar (ternary operator example)
    return $total == 1 ? '1 Like' : "$total Likes" ;

  }
}
/**
 * Interface for "like" button and count
 * works on any post
 */
function like_interface( $post_id, $user_id = 0 ){
  global $DB;
  //is the viewer logged in?
    if( $user_id ){
    //does the viewer "like" this post?
     $result = $DB->prepare( "SELECT * FROM likes
              WHERE user_id = ?
              AND post_id = ?
              LIMIT 1" );
      $result->execute(array($user_id, $post_id));
   if( $result->rowCount() >= 1 ){
      //they like it
      $class = 'you-like';
    }else{
      //they don't like
      $class = 'not-liked';
    }
  } //end if logged in
  

  ?>
  <span class="like-interface">
    <span class="<?php echo $class; ?>">
      
      <?php 
      //logged in?
      if( $user_id ){ ?>
      <span class="heart-button" data-postid="<?php echo $post_id; ?>">❤</span>
      <?php 
      } //end if logged in
      ?>

      <?php echo count_likes( $post_id ); ?>
    </span>
  </span>
  <?php
}

like-interface-start.html

<!-- Starter HTML. Add this to the loop showing posts (index.php) -->
<div class="likes">
  
  <span class="like-interface">
    <span class="not-liked">      
      <span class="heart-button" data-postid="POST_ID">❤</span>
      X
    </span>
  </span>
  
</div>

like-unlike.php

<?php
/**
 * AJAX Handler File for LIKE/UN-LIKE
 * this file sits behind-the-scenes on the server.
 * it handles the like/unlike database logic and passes back the updated like_interface HTML
 * @TODO: Remove the feedback on failure 
 */

//load dependencies
require('../config.php');
require_once(FILE_ROOT . '/includes/functions.php');

//incoming data (from ajax call)
$post_id = $_REQUEST['postId'];
$user_id = $_REQUEST['userId'];

//does that user like that post or not?
$result = $DB->prepare("SELECT * FROM likes
                                WHERE user_id = ?
                                AND post_id = ?
                                LIMIT 1");
$result->execute( array( $user_id, $post_id ) );
if( $result->rowCount() >= 1 ){
	//the user previously liked this post. DELETE the like
	$query = "DELETE FROM likes
				WHERE user_id = :user_id
				AND post_id = :post_id";
}else{
	//the user didn't previously like it. ADD the like
	$query = "INSERT INTO likes
				(user_id, post_id, date)
				VALUES
				( :user_id, :post_id, now() )";
}

//run the resulting query
$result = $DB->prepare( $query );
$result->execute( array(
					'user_id' => $user_id,
					'post_id' => $post_id
				) );

//if it worked, update the like interface

if( $result->rowCount() >= 1 ){
	like_interface( $post_id, $user_id );
}else{
	//TODO: remove this after testing
	echo 'failed.';
}

likes.sql

-- phpMyAdmin SQL Dump
-- version 4.5.1
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: May 08, 2019 at 02:57 AM
-- Server version: 10.1.13-MariaDB
-- PHP Version: 5.6.21

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `melissa_image_app_0419`
--

-- --------------------------------------------------------

--
-- Table structure for table `likes`
--

CREATE TABLE `likes` (
  `like_id` int(11) NOT NULL,
  `post_id` int(11) NOT NULL,
  `user_id` int(11) NOT NULL,
  `date` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `likes`
--

INSERT INTO `likes` (`like_id`, `post_id`, `user_id`, `date`) VALUES
(2, 2, 5, '0000-00-00 00:00:00'),
(3, 2, 4, '0000-00-00 00:00:00'),
(4, 11, 2, '0000-00-00 00:00:00'),
(5, 11, 3, '0000-00-00 00:00:00');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `likes`
--
ALTER TABLE `likes`
  ADD PRIMARY KEY (`like_id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `likes`
--
ALTER TABLE `likes`
  MODIFY `like_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

style.css

/* likes - default "not-liked" gray heart */
.heart-button{
	color:white;
	text-shadow: -1px -1px 0 gray,
				  1px  1px 0 gray,
				 -1px  1px 0 gray,
				  1px -1px 0 gray;

	-webkit-text-stroke: 1px gray;
	cursor:pointer;
}
/* like: red heart */
.you-like .heart-button{
	color:red;
	text-shadow:none;
	-webkit-text-stroke: 1px red;
}