TechnoPHP

How to create countdown timer using JS and PHP

The countdown timer is one of the best module for an upcoming event. You can create a countdown timer using JS and PHP. Create a timer using JS. Countdown timer helps you to show the upcoming event time on the web. When the event will start or will expire . You can create a static countdown timer using JS but if you want to create a dynamic timer then you have to use PHP.

PHP helps to create the dynamic countdown timer . By the way, you can create a countdown timer using JS only, but if you refresh the page, the timer starts from the beginning. By using the PHP you can run the counter timer continuously. The timer keeps running if you refresh the page.


Dynamic Countdown Timer in PHP

You can make a static timer using JS. But if you have to create a dynamic countdown timer, you will need PHP script. With the help of PHP and MYSQL, you will be able to create a dynamic timer. The dynamic counter is the one whose timing also changes with the user interface and not from backend code. Dynamic countdown timer runs continuously.

Let's create a countdown timer using PHP and JS.

1. first of all we create a MYSQL database table for timer .The database table contains date , hours ,minutes , seconds . You can update contdown timer date and time according to your need.

Database Table.





CREATE TABLE `timer` (
  `id` int(11) NOT NULL,
  `date` date NOT NULL,
  `h` int(50) NOT NULL,
  `m` int(50) NOT NULL,
  `s` int(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;


In the above MYSQL table, we have declared-
1. id - 1.

2. date - Date for event date or any other date ( Expiry date or event date )

3. h - h represents hours.

4. m - m refers to timer minutes.

5. s- s represents to timer seconds.

You can decide the date and time.


2. Now we will create a countdown timer using PHP and JS.

I. In the countdown timer, the Update operation will help you. You will able to update the timer date and time by the Update Query.



<?php


if(isset($_POST['update']))
{	


	$date= mysqli_real_escape_string($mysqli, $_POST['date']);
	$h= mysqli_real_escape_string($mysqli, $_POST['h']);
	$m= mysqli_real_escape_string($mysqli, $_POST['m']);
	$s= mysqli_real_escape_string($mysqli, $_POST['s']);
		
	
	
	// checking empty fields
	
		//updating the table
		$result = mysqli_query($mysqli, "UPDATE timer SET date='$date' 
WHERE id=1");
		$result = mysqli_query($mysqli, "UPDATE timer SET h='$h'
 WHERE id=1");
		$result = mysqli_query($mysqli, "UPDATE timer SET m='$m'

 WHERE id=1");
		$result = mysqli_query($mysqli, "UPDATE timer SET s='$s'
 WHERE id=1");
		
		//redirectig to the display page. In our case, 
		header("Location: countdown-timer.php?msg-success");
	}

?>

In the above update query -

1. We can update the date, time at any time.

2. Update query for update the table data. (Update Countdown timer )

3. header function redirect to the same page and another page.

Create JS and PHP code for countdown timer .

Now we will create the counter timer using JS and PHP. 1.





Demo

In above JS and PHP counter timer code , we have selected the date, time from the database using select operation . . The time will work continuously. Try to refresh the page.