Counting Likes in PHP/OOP Tutorial

Submitted by oretnom23 on Monday, May 9, 2022 - 18:15.

In this tutorial, I will show the simplest way to Count Likes of Posts in PHP and MySQL Database. Here, you will learn how to join a total count of rows from another table in a query. I will be providing a simple source code of a simple blog application that illustrate our main goal for this tutorial

About the Tutorial Application

The source code output a simple blog posting web application that allows the user to post content that is visible to other users. Each post contains a Thumbs Up or Like Icon that shows only an outline if the user hasn't liked the post yet while it displays the icon with filled color for the liked post. The total number of likes of each post is shown beside each like icon of the posts. Users don't need to register on the application. They can simply log in with a random user name and this feature is for demo purposes only.

Getting Started

In this tutorial, I used XAMPP v3.2.4 and Bootstrap v5 Framework on developing the source code. Kindly download the following so you can test the source code on your local machine. In my case, all CSS (Cascading Style Sheet) files are complied on a CSS directory while the JavaScript files are located at the JS directory.

You can download the Virtual Server and Library I used at:

After download installing the server and library. Open your XAMPP's Control Panel and start the Apache and the MySQL servers.

Creating the Database

Open yout preferred browser such as Chrome Browser. Next, browse localhost/phpmyadmin and create a new database naming dummy_db. Then, navigate the page at the SQL Page and copy/paste the following sql code on the given text field and click the "Go" button.

  1. CREATE TABLE `like_list` (
  2.     `id` int(30) NOT NULL,
  3.     `session_name` text NOT NULL,
  4.     `post_id` int(30) NOT NULL
  5.     ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
  6.  
  7. CREATE TABLE `post_list` (
  8. `id` int(30) NOT NULL,
  9. `title` text NOT NULL,
  10. `author` text NOT NULL,
  11. `content` text NOT NULL,
  12. `date_created` datetime NOT NULL DEFAULT current_timestamp(),
  13. `date_updated` datetime NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp()
  14. ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
  15.  
  16. ALTER TABLE `like_list`
  17.   ADD PRIMARY KEY (`id`),
  18.   ADD KEY `post_id` (`post_id`);
  19.  
  20. ALTER TABLE `post_list`
  21.   ADD PRIMARY KEY (`id`);
  22.  
  23. ALTER TABLE `like_list`
  24.   MODIFY `id` int(30) NOT NULL AUTO_INCREMENT;
  25.  
  26. ALTER TABLE `post_list`
  27.   MODIFY `id` int(30) NOT NULL AUTO_INCREMENT;
  28.  
  29. ALTER TABLE `like_list`
  30.   ADD CONSTRAINT `post_id_fk_ll` FOREIGN KEY (`post_id`) REFERENCES `post_list` (`id`) ON DELETE CASCADE ON UPDATE NO ACTION;

Creating the Database Connection

Open your preferred text editor such as notepad++ or sublime text. Create a new PHP File naming db-connect.php and save it inside your source code folder. Then, copy/paste the PHP script below and save the file.

  1. <?php 
  2.  
  3. $host = "localhost"; 
  4. $username = "root"; 
  5. $pw = ""; 
  6. $dbname = "dummy_db";
  7.  
  8. $conn = new mysqli($host, $username, $pw, $dbname);
  9. if(!$conn){
  10.     die("Database connection failed. Error: " .$conn->error);
  11. }

Creating the Login Page Interface

Create a new PHP File on your text editor naming login.php and save it also to yout source code folder. Then, copy/paste the source code below and save the file. This contains the html scripts of the application's login page elements and PHP script for login form submission.

  1. <!--
  2. This is a simple Web App. This was developed for educational purposes only. 
  3. Author: oretnom23
  4. Email: [email protected] 
  5.  --> 
  6.  <?php 
  7. session_start();
  8. if(isset($_SESSION['session_name']) && !empty($_SESSION['session_name']))
  9. header("location: index.php");
  10. // Require/Include DB Connection
  11. require_once('./db-connect.php');
  12. if($_SERVER['REQUEST_METHOD'] == 'POST'){
  13.     $_SESSION['session_name'] = $_POST['session_name'];
  14.     header("location: index.php");
  15. }
  16. ?><!DOCTYPE html>
  17. <html lang="en">
  18.  
  19. <head>
  20.     <meta charset="UTF-8">
  21.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  22.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  23.     <title>PHP Counting Likes</title>
  24.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  25.     <link rel="stylesheet" href="./css/bootstrap.min.css">
  26.     <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/all.min.js" integrity="sha512-6PM0qYu5KExuNcKt5bURAoT6KCThUmHRewN3zUFNaoI6Di7XJPTMoT6K0nsagZKk2OB4L7E3q1uQKHNHd4stIQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  27.     <script src="./js/bootstrap.min.js"></script>
  28.  
  29. </head>
  30.  <style>
  31.      html, body{
  32.          height:100%;
  33.          width:100%;
  34.      }
  35.      main{
  36.          height:calc(100%);
  37.          width:calc(100%);
  38.          display:flex;
  39.          flex-direction:column;
  40.          align-items:center;
  41.          justify-content:center
  42.      }
  43.  </style>
  44. <body class="bg-gradient bg-dark bg-opacity-50">
  45.     <script>
  46.         start_loader()
  47.     </script>
  48.     <main>
  49.         <div class="col-lg-12">
  50.             <h1 class="fw-bolder text-center" id="project-title">PHP Counting Likes</h1>
  51.         </div>
  52.         <div class="col-lg-6 col-md-8 col-sm-12 col-xs-12">
  53.             <div class="card rounded-0">
  54.                 <div class="card-header">
  55.                     <h4 class="card-title text-center">Login</h4>
  56.                 </div>
  57.                 <div class="card-body">
  58.                     <div class="container-fluid">
  59.                         <form action="login.php" method="POST">
  60.                             <div class="form-group">
  61.                                 <label for="session_name" class="control-label">Username</label>
  62.                                 <input type="text" class="form-control form-control-sm rounded-0" id="session_name" name="session_name" placeholder="jsmith" required="required">
  63.                             </div>
  64.                             <div class="form-group text-end my-3">
  65.                                 <button class="btn btn-primary btn-sm bg-gradient-primary rounded-0">Login</button>
  66.                             </div>
  67.                         </form>
  68.                     </div>
  69.                 </div>
  70.             </div>
  71.         </div>   
  72.     </main>
  73. </body>
  74. </html>

Creating the Main Interface

Create a new PHP File on your text editor naming index.php and save it also on your source code folder. Copy/Paste the script below and save the file. This file contains the Main Page HTML Elements and other PHP scripts for the for database queries and processes.

  1. <!--
  2. This is a simple Web App. This was developed for educational purposes only. 
  3. Author: oretnom23
  4. Email: [email protected] 
  5.  --> 
  6.  <?php 
  7. session_start();
  8. if(!isset($_SESSION['session_name']) || (isset($_SESSION['session_name']) && empty($_SESSION['session_name'])))
  9. header("location: login.php");
  10. // Require/Include DB Connection
  11. require_once('./db-connect.php');
  12. if(isset($_GET['logout']) && $_GET['logout'] == 'true'){
  13.     session_destroy();
  14.     header("location:login.php");
  15. }
  16. if($_SERVER['REQUEST_METHOD'] == 'POST'){
  17.    extract($_POST);
  18.    $sql = "INSERT INTO `post_list` (`title`, `author`, `content`) VALUES ('{$conn->real_escape_string($title)}','{$conn->real_escape_string($session_name)}', '{$conn->real_escape_string($content)}')";
  19.    $save= $conn->query($sql);
  20.    if($save){
  21.         echo "<script> alert('Post has been inserted successfully.'); location.replace('index.php'); </script>";
  22.     }else{
  23.         echo "<script> alert('Post has failed to insert. Error: '.$conn->error); location.replace('index.php'); </script>";
  24.     }
  25.     echo "<script> location.replace('index.php'); </script>";
  26. }
  27. if(isset($_GET['post_id'])){
  28.    extract($_GET);
  29.     $get = $conn->query("SELECT * FROM `like_list` where post_id = '{$post_id}' and session_name = '{$_SESSION['session_name']}'");
  30.     if($get->num_rows > 0){
  31.         $sql = "DELETE FROM `like_list` where post_id = '{$post_id}' and session_name = '{$_SESSION['session_name']}' ";
  32.     }else{
  33.         $sql = "INSERT INTO `like_list` set post_id = '{$post_id}', session_name = '{$_SESSION['session_name']}' ";
  34.     }
  35.     $process= $conn->query($sql);
  36.     if($process){
  37.         echo "<script> alert('Post Like has been updated.'); location.replace('index.php'); </script>";
  38.     }else{
  39.         echo "<script> alert('Post Like/Unlike has failed.'); location.replace('index.php'); </script>";
  40.     }
  41.  
  42. }
  43. if(isset($_GET['delete_post'])){
  44.    extract($_GET);
  45.     $sql = "DELETE FROM `post_list` where id = '{$delete_post}'";
  46.     $delete = $conn->query($sql);
  47.     if($delete){
  48.         echo "<script> alert('Post has been deleted successfully.'); location.replace('index.php'); </script>";
  49.     }else{
  50.         echo "<script> alert('Post has failed to delete. Error: '.$conn->error); location.replace('index.php'); </script>";
  51.     }
  52. }
  53.  
  54. ?><!DOCTYPE html>
  55. <html lang="en">
  56.  
  57. <head>
  58.     <meta charset="UTF-8">
  59.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  60.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  61.     <title>PHP Counting Likes</title>
  62.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  63.     <link rel="stylesheet" href="./css/bootstrap.min.css">
  64.     <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/all.min.js" integrity="sha512-6PM0qYu5KExuNcKt5bURAoT6KCThUmHRewN3zUFNaoI6Di7XJPTMoT6K0nsagZKk2OB4L7E3q1uQKHNHd4stIQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  65.     <script src="./js/bootstrap.min.js"></script>
  66.  
  67. </head>
  68.  <style>
  69.     html, body{
  70.         height:100%;
  71.         width:100%;
  72.     }
  73.  </style>
  74. <body class="bg-gradient bg-dark bg-opacity-50">
  75.     <script>
  76.         start_loader()
  77.     </script>
  78.     <nav class="navbar navbar-expand-sm navbar-dark bg-gradient bg-dark">
  79.         <div class="container-fluid">
  80.             <a class="navbar-brand" href="./">PHP Counting Likes</a>
  81.  
  82.             <div>
  83.                 <a href="./?logout=true" class="text-light fw-bolder text-decoration-none"><i class="fa fa-sign-out"></i> <?= $_SESSION['session_name'] ?></a>
  84.             </div>
  85.             </div>
  86.         </div>
  87.         </nav>
  88.     <main>
  89.         <div class="container w-100 mt-3">
  90.             <div class="d-flex w-100 align-items-center mb-3">
  91.                 <div class="col-auto flex-shrink-1 flex-grow-1">
  92.                     <h3 class="text-center fw-bolder text-light">Posts</h3>
  93.                 </div>
  94.                 <div class="col-auto">
  95.                     <button class="btn btn-primary btn-sm bg-gradient rounded-0" type="button"  data-bs-toggle="modal" data-bs-target="#postFormModal"><i class="fa fa-plus"></i> Add Post</button>
  96.                 </div>
  97.             </div>
  98.             <?php 
  99.             $posts = $conn->query("SELECT *,COALESCE((SELECT COUNT(id) FROM like_list where post_id = post_list.id), 0) as `likes` FROM `post_list` order by unix_timestamp(date_created) desc");
  100.             while($row = $posts->fetch_assoc()):
  101.                 $is_liked = $conn->query("SELECT * FROM `like_list` where post_id = '{$row['id']}' and session_name = '{$_SESSION['session_name']}'")->num_rows;
  102.  
  103.             ?>
  104.             <div class="card card-default rounded-0 mb-4">
  105.                 <div class="card-header py-1">
  106.                     <div class="card-title fw-light text-muted d-flex w-100">
  107.                         <div class="col-auto flex-shricnk-1 flex-grow-1"><?= $row['author'] ?></div>
  108.                         <div class="col-auto"><?= date("F d, Y h:i A", strtotime($row['date_created'])) ?></div>
  109.                     </div>
  110.                 </div>
  111.                 <div class="card-body">
  112.                     <h3 class="fw-bolder"><?= $row['title'] ?></h3>
  113.                     <div>
  114.                         <?= $row['content'] ?>
  115.                     </div>
  116.                 </div>
  117.                 <div class="card-footer py-1">
  118.                     <div class="d-flex w-100">
  119.                         <div class="col-auto flex-shrink-1 flex-grow-1">
  120.                             <?php if($is_liked > 0): ?>
  121.                             <a href="index.php?post_id=<?= $row['id'] ?>" class="text-decoration-none text-reset me-3"><i class="fa fa-thumbs-up text-primary"></i></a>
  122.                             <?php else: ?>
  123.                             <a href="index.php?post_id=<?= $row['id'] ?>" class="text-decoration-none text-reset me-3"><i class="far fa-thumbs-up"></i></a>
  124.                             <?php endif; ?>
  125.                             <span class="fw-bolder"><?= $row['likes'] ?> Like<?= $row['likes'] > 1 ? "s" : "" ?></span>
  126.                         </div>
  127.                         <div class="col-auto">
  128.                             <?php if($_SESSION['session_name'] == $row['author']): ?>
  129.                                 <a href="./?delete_post=<?= $row['id'] ?>" onclick="if(confirm('Are you sure to delete this post?') == false){ event.preventDefault() }" class="btn btn-flat btn-danger rounded-0"><i class="fa fa-trash"></i> Delete</a>
  130.                             <?php endif; ?>
  131.                         </div>
  132.                     </div>
  133.  
  134.                 </div>
  135.             </div>
  136.             <?php endwhile; ?>
  137.  
  138.         </div>
  139.         <div class="modal fade" id="postFormModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="postFormModallabel" aria-hidden="true">
  140.             <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
  141.                 <div class="modal-content rounded-0">
  142.                     <div class="modal-header">
  143.                         <h5 class="modal-title" id="postFormModallabel">New Member Form</h5>
  144.                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  145.                     </div>
  146.                     <div class="modal-body">
  147.                         <form action="index.php" method="POST" id="new_post">
  148.                             <input type="hidden" name="session_name" value="<?= $_SESSION['session_name'] ?>">
  149.                             <div class="border-top border-bottom item py-2">
  150.                                 <div class="form-group mb-3">
  151.                                     <label for="title" class="control-label">Title</label>
  152.                                     <input type="text" class="form-control form-control-sm rounded-0" id="title" name="title" required="required">
  153.                                 </div>
  154.                                 <div class="form-group mb-3">
  155.                                     <label for="content" class="control-label">Content</label>
  156.                                     <textarea rows="4" class="form-control form-control-sm rounded-0" id="content" name="content" required="required"></textarea>
  157.                                 </div>
  158.                             </div>
  159.                         </form>
  160.                     </div>
  161.                     <div class="modal-footer">
  162.                         <button type="submit" class="btn btn-primary btn-sm rounded-0" form="new_post">Save Post</button>
  163.                         <button type="button" class="btn btn-secondary btn-sm rounded-0" data-bs-dismiss="modal">Close</button>
  164.                     </div>
  165.                 </div>
  166.             </div>
  167.         </div>
  168.     </main>
  169. </body>
  170. </html>

There you go! You can now test the application on your end and see if it meets our goal for this tutorial. If there's an error occurred on your side, please review your changes with the source code I provided above. Or, you can also download the working source code I created for this tutorial. The download button for the source code zip file is located below this article.

DEMO VIDEO

That's the end of this tutorial. I hope this will help you with what you are looking for and for your future PHP Projects. Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding!!!

Tags

Add new comment

About text formats
  • 1858 views