Creating a Dynamic Like Button with PHP and MySQL

In this tutorial, I’ll guide you through building a dynamic webpage with a like button that increments by +1 each time a user clicks it. The button will retrieve data from a MySQL database using PHP

in Node.JS, AWS

Skip to section:

  1. Creating a database and table for page likes using MySQL Workbench
  2. Displaying MySQL Database Values with PHP on an HTML Web Page
  3. Displaying MySQL Database Values with PHP on an HTML Web Page
  4. When HTML button is clicked. Add +1 value to database item for page likes

  1. Creating a database and table for page likes using MySQL Workbench:

    1. Create a Database:

        2. Manually:

      • Open MySQL Workbench and connect to your MySQL server.
      • In the navigator panel, right-click the "schemas" tab.
      • Select "Create Schema."
      • Provide a schema name (e.g., "csx2") and click "Apply" to create the new database.

        • Using Commands:

        


          
CREATE DATABASE csx2;
    2. Create a Table:

        3. Manually:

      • Under the appropriate database in the left navigation pane, right-click "Tables" and select "Create Table..."
      • Enter the table name (e.g., "likes").
      • Add columns: "pageName" and "count" with their respective data types and any other necessary details.
      • Click "Apply" to create the table.

        • Using Commands:

        


            
CREATE TABLE `csx2`.`likes` (
`pageName` VARCHAR(50) NULL,
`count` BIGINT NOT NULL
);

// Show value command in MySQL Workspace
USE csx2; SELECT count FROM likes WHERE pageName = 'page1';

  2. Displaying MySQL Database Values with PHP on an HTML Web Page

    To display MySQL database values on an HTML web page using PHP, follow these steps:

    1. Web Server Setup:
      • Ensure you are running a web server that supports PHP (e.g., LAMP or NginX).
    2. File Extension Change:
      • Rename your HTML file to have a .php extension instead of .html..
    3. Embed PHP Code:
      • At the top of your PHP-enabled HTML file, add the following code before your HTML content:
        • web-page.php 
        


          
<?php

$servername = "ls-40bb213iyb2ib3i2b3i21b3b123ib12i3hb21yu3b.cpxbg8uyiago.eu-west-2.rds.amazonaws.com";
$username = "dbmasteruser";
$password = "FBE&(QYFBE&YF&(DYWY))";
$database = "csx2";

          
$con = mysqli_connect($servername, $username, $password, $database);
$result = mysqli_query($con,"SELECT count FROM likes");
$data = $result->fetch_all(MYSQLI_ASSOC);

?>

  3. You’ll need to loop through each item in the database (even if there’s only one item inserted) to retrieve the data. Since we have only one page, we can simply print the loop, which will display our value for pageLikes.

    html-file.php 
    


          
<?php foreach($data as $row): ?>
  <?= htmlspecialchars($row['count']) ?>
<?php endforeach ?>
          
          
    


          
<form class="p-4 p-md-5 border rounded-3" method="POST" action="action-page.php">
  <button style="color:teal"class="btn btn-phoenix-primary w-10" type="submit"><svg class="svg-inline--fa fa-heart me-2" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="heart" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"></path></svg>
    <?php foreach($data as $row): ?>
      <?= htmlspecialchars($row['cnt']) ?>
    <?php endforeach ?>
  </button>
</form>

  4. Create an action-page.php file in the same directory as your web page. Add the code below, ensuring you replace the values with your own.

    action-page.php 
    



<?php

$servername = "ls-4ewccecw.cpxbg8uyiago.eu-west-2.rds.amazonaws.com";
$username = "dbmasteruser";
$password = ">pfDIg0Jlwcwcecwewg?XYp{n6";
$dbname = "csx2";


// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
echo "Connected successfully";



$sql = "
UPDATE likes 
SET count = count + 1 
WHERE pageName = 'page1'
";

if ($conn->query($sql) === TRUE) {
echo "New record created successfully";



} else {
echo "Error: " . $sql . "
    " . $conn->error;
}


header("Location: https://computersciencex.com/indexSuccess.html", true, 301);  

$conn->close();

?>

// Example HTML for PHP code positioning
<!DOCTYPE html>
<html lang="en-US">

  <head>
    <title>Example HTML code</title>
  </head>
  <body>
    <p>Example</p>
  </body>
</html>

Previous page: How to conifgure sending mail on NginX Amazon Web Services lightsail web server with PHP and verify the email with md5 HASH