The countdown timer is one of the best modules for upcoming events. You can create a countdown timer using JS, PHP, and MYSQL database.
Countdown timer helps you to show the upcoming event time on the web page. 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 and MYSQL database.
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 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 a PHP script and MYSQL database. With the help of PHP and MYSQL, you will be able to create a dynamic timer. The dynamic countdown timer is the one whose timing also changes with the user interface and not from the backend code. Dynamic countdown timer runs continuously.
We can set time according to event time. The PHP update operation helps to update the MYSQL database. Users can update time according to their needs. After the MYSQL database time has been updated, it reflects on the countdown timer.
Let's create a countdown timer using PHP and JS.
1.First of all we create a MYSQL database table for countdown timer .The database table contains date , hours ,minutes , seconds . You can update contdown timer date and time according to your need.
Create a MYSQL database table
Here, we create an MYSQL database table. Through the MYSQL database table, we can update the timing of the countdown timer. We create some fields. We can change the event time only by using those fields.
Let's create a table using MYSQL query.
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
);
In the above MYSQL table, we declared-
1. id - Table rows id.
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.
Insert countdown timer date, hours, minutes, and seconds into MYSQL database table
We link the database to create a continue countdown timer. Whenever a user refreshes the website page, the time continues. By creating the database, we can easily change the event time.You can create a registration form to insert date and time in MYSQL database table. In the previous tutorial, we discussed the registration form using PHP and MySQL.
database.
Here, we insert data using the MYSQL insert query.
Let's create a query to insert date, hours, minutes and seconds
INSERT INTO `timer` (`id`, `date`, `h`, `m`, `s`) VALUES
(1, '2024-11-15', 12, 15, 45);
Make a connection file
Create a connection file with name config.php . A connection file helps in connect PHP script to MYSQL database. After connection ,we can easily select data from the MYSQL database and update.
Let's create a new connection using mysqli_connect() function in PHP.
<?php
$dbHost = 'localhost';
$dbName = 'tutorials';
$dbUsername = 'root';
$dbPassword = '';
$mysqli = mysqli_connect($dbHost, $dbUsername, $dbPassword, $dbName);
?>
1. Define your host(localhost ,127.0.0.1 or global server host) .
2. Define your database name.
3. Define your username . (Root for localhost )
4. Define your databse password.(Blank for localhost )
Fetch data from the MYSQL database table using PHP
To create a dynamic countdown timer, we store the data in the database. After which the data is fetched and used for a countdown timer. The benefit of this is that we can change the countdown event time anytime. Here, we create a PHP fetch operation. Select data from the database and set up countdown timing.
1. Include config file using include() function.Instead of include() function ,we can use require() function.
2. Use MYSQL select query. Select data from MYSQL database table.
3. Use PHP while loop. Instead of while loop,you can use if condition here.
<?php
//including the database connection file
include("config.php");
$result = mysqli_query($mysqli, "SELECT * FROM timer ORDER BY id DESC");
while($res = mysqli_fetch_array($result)) {
$date = $res['date'];
$h = $res['h'];
$m = $res['m'];
$s = $res['s'];
}
?>
Make a countdown timer using JS and PHP
Now, we create a countdown timer. Whatever data we fetched from the MySQL database, we will use it here.JS is used to create a simple countdown timer. But if you have to create a dynamic countdown timer then you have to use PHP script.
We use a PHP strtotimer() function to create a dynamic timer.
The strtotimer() function used to convert an English textual date-time description to a UNIX timestamp.
Let's create a dynamic countdown timer using JS and PHP code.
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.
Update database data for countdown dynamic time changing
We use update operation to change the countdown timer date and time.
Make an HTML form
First of all, we create a form. Inside the form, we create input boxed for the date, hours, minutes and seconds. Inside the input boxes, we display the database data. Inside the HTML form, we also create a button. After changing the date and time, click on the button to change the event timing for the countdown timer.
In this process, we use the POST method. In the previous tutorial, we discuss the POST method in PHP. Instead of the POST method, we can use the GET method.
Let's create a HTML form for updation .
Create PHP script for updating countdown timer
After creating the HTML form, we create a PHP script.
In the previous tutorial,we discussed update data using PHP and MYSQL database.
Here, we use MYSQL update query.
1. Include connection file. You can use include() function or require() function to include config file.
2. Use if condition to set data on submit button.
3. Use of MYSQL update query and where clause.
Let's implement PHP update operation to update the countdown timer.
<?php
include_once("config.php");
if(isset($_POST['update']))
{
$date=$_POST['date'];
$h= $_POST['h'];
$m= $_POST['m'];
$s= $_POST['s'];
//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,
echo "Timer updated";
}
?>
In the above update query -
1. We can update the date and time .
2. Update query for update the table data.
3. Execute the code.
Recommended Posts:-
