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

Skip to section:

Download the SMTP files required
PHP
MySQL Workbench intrucrions
Add users email to MySQL DB for subscriptions and then give that entry to the database a verify value

Share this page:

creating a database and table for page likes using MySQL Workbench:
1. Create a Database:
2. Create a Table:
First you will need to create a database and table for page likes

MySQL Workbench instructions

First SQL command:Create the database woth the following MySQL command changing csx2 for the database name you would like

Second SQL command:Create a table within the database csx2 called likes and giving it 2 items(pageName and count), with its datatype and value
```
  
CREATE DATABASE csx2;

CREATE TABLE `csx2`.`likes` (
  `pageName` VARCHAR(50) NULL,
  `count` BIGINT NOT NULL
);
  
```
SQL command to show value:
```
  
      
USE csx2; SELECT count FROM likes WHERE pageName = 'page1';
    
  
```

How to display MySQL database value with PHP on a HTML web page

You will need to ensure that you are running a web server that supports PHP(for example, LAMP or NginX). On the page that you would like to display MySQL data, you will need to chnage the page name extension to .php instead of .html. Once you have done that, at the top of your html code for that page add the following code before your html code(ensuring that you change the varibale values to your own):
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);

?>
  
```

Now where you would like to display you MySQL data we collected above, is where you need to put the following PHP code. So if it is in the header of the page and is dispayed on a button. insert the following code inside the tag/s where you would like the data to be displayed. We need to loop through each item in the database(even if there is only 1 item inserted) as this is what is required to retreive the data. as we only have 1 page we can just print the loop and this will print our value for pageLiikes

Upadate likes value in database when clicked and Insert display MySQL likes on HTML web page with extension *.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>

Create a action-page.php file in the same directory as your web page, and add the code bellow(ensuring you change values to you 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();
      
?>