Creating a DateTime Time Ago like Social Networking Sites in PHP Tutorial

Submitted by oretnom23 on Wednesday, October 12, 2022 - 11:18.

Introduction

In this tutorial, I will teach you How to create a Time Ago Feature in PHP for your sites. This feature is like you've seen in some other famous social networking sites such as Facebook. This feature represents how old the post, blog, or article on your site is. The tutorial aims to provide IT/CS students or those who are new to PHP Language a reference or guide for learning some different methods or techniques using the said programming language. Here, snippets and sample source codes are provided for free.

What is a Time Ago Feature?

The Time Ago Feature is commonly or mostly found or used in social networking sites. It represents how old the post users or groups have created the post. It is also for some other dynamic sections of the site such as the comment sections. It is mainly added to the site feature for informing the readers of how old the post or content is.

How to create a Time Ago Feature in PHP?

To create a Time Ago Feature on your site, you must make sure that the timestamp or the date and time of creation or insertion of the data is available. Then, you will have to calculate the difference between the created timestamp and the current timestamp which can be achieved in PHP like the following snippet.

  1. <?php 
  2. // Data Created Timestamp
  3. $timestamp = strtotime($created_at);
  4.  
  5. // Current Timestamp
  6. $current_timestamp = strtotime('now');
  7.  
  8. //Calculating the difference between the 2 Timestamps
  9. $difference = $current_timestamp - $timestamp;
  10.  
  11. // The difference of the 2 timestamp will result the time difference in seconds
  12. // i.e $difference = 62314;
  13.  
  14. ?>

On the above PHP script, $differece computes the difference of the timestamp in seconds which means it still needs to convert to minutes, hours, days, weeks, months, and years. These conversions can be achieved using the following formula.

  1. <?php
  2. /**Getting the difference by minute(s) 
  3. * timestamp difference / 60
  4. */
  5. $minutes = round($difference / 60); 
  6. /**Getting the difference by hour(s) 
  7.     * timestamp difference / ( 60 * 60)
  8.     */
  9. $hours   = round($difference / 3600);
  10. /**Getting the difference by day(s) 
  11.     * timestamp difference / ( 24 * 60 * 60)
  12.     */
  13. $days    = round($difference / 86400);
  14. /**Getting the difference by week(s) 
  15. * timestamp difference / ( 7 * 24 * 60 * 60)
  16. */
  17. $weeks   = round($difference / 604800);
  18. /**Getting the difference by month(s) 
  19. * timestamp difference / ( ( ( 365 + 365 + 365 + 365 + 366 ) / 5 / 12 ) * 24 * 60 *60 )
  20. */
  21. $months  = round($difference / 2629440);
  22. /**Getting the difference by year(s) 
  23. * timestamp difference / ( ( ( 365 + 365 + 365 + 365 + 366 ) / 5 ) * 24 * 60 *60 )
  24. */
  25. $years   = round($difference / 31553280); 
  26. ?>

And using the above snippet, you can now create logic for returning the age of the data or article of your site. Your logic can be something like the following snippet.

  1. <?php
  2. if( $differece < 60 ){
  3.     if( $differece == 1)
  4.         return "Just Now";
  5.     else
  6.         return "{$differece} seconds ago";
  7. }elseif($minutes < 60){
  8.     if( $minutes == 1 )
  9.         return "A minute ago";
  10.     else
  11.         return "{$minutes} min. ago";
  12. }
  13. ?>

You can create your own PHP function or class object so you can simply call it multiple times without repeating or rewriting the codes. Here's an example reusable function.

  1. <?php
  2. function get_timeago($timestamp=""){
  3.     // Check if time stamp is valid
  4.     if(empty($timestamp) && is_numeric($timestamp) && $timestamp > 0)
  5.     return "Invalid Date and Time Value";
  6.  
  7.     // Current Timestamp
  8.     $current_time = strtotime('now');
  9.     // Getting the difference beteween Current timestamp and given timestamp
  10.     $diff = $current_time - $timestamp;
  11.     // Timeago or timestamp difference in seconds
  12.     $ta_seconds = $diff;
  13.  
  14.  
  15.     /**
  16.      * Timestamp Difference (s) Convertions
  17.      */
  18.  
  19.         /**Getting the difference by minute(s) 
  20.          * timestamp difference / 60
  21.          */
  22.         $minutes = round($ta_seconds / 60); 
  23.         /**Getting the difference by hour(s) 
  24.          * timestamp difference / ( 60 * 60)
  25.          */
  26.         $hours   = round($ta_seconds / 3600);
  27.         /**Getting the difference by day(s) 
  28.          * timestamp difference / ( 24 * 60 * 60)
  29.          */
  30.         $days    = round($ta_seconds / 86400);
  31.         /**Getting the difference by week(s) 
  32.         * timestamp difference / ( 7 * 24 * 60 * 60)
  33.         */
  34.         $weeks   = round($ta_seconds / 604800);
  35.         /**Getting the difference by month(s) 
  36.         * timestamp difference / ( ( ( 365 + 365 + 365 + 365 + 366 ) / 5 / 12 ) * 24 * 60 *60 )
  37.         */
  38.         $months  = round($ta_seconds / 2629440);
  39.         /**Getting the difference by year(s) 
  40.         * timestamp difference / ( ( ( 365 + 365 + 365 + 365 + 366 ) / 5 ) * 24 * 60 *60 )
  41.         */
  42.         $years   = round($ta_seconds / 31553280); 
  43.  
  44.  
  45.         /**
  46.          * Return Timeago
  47.          */
  48.         if( $ta_seconds < 60 ){
  49.             if( $ta_seconds == 1)
  50.                 return "Just Now";
  51.             else
  52.                 return "{$ta_seconds} sec. ago";
  53.         }elseif($minutes < 60){
  54.             if( $minutes == 1 )
  55.                 return "A minute ago";
  56.             else
  57.                 return "{$minutes} min. ago";
  58.         }elseif( $hours < 24 ){
  59.             if( $hours == 1 )
  60.                 return "An Hour ago";
  61.             else
  62.                 return "{$hours} hr. ago";
  63.         }elseif( $days < 7 ){
  64.             if( $days == 1 )
  65.                 return "A day ago";
  66.             else
  67.                 return "{$days} days ago";
  68.         }elseif( $weeks < 4 ){
  69.             if( $weeks == 1 )
  70.                 return "A week ago";
  71.             else
  72.                 return "{$weeks} weeks ago";
  73.         }elseif( $months < 12 ){
  74.             if( $months == 1 )
  75.                 return "A month ago";
  76.             else
  77.                 return "{$months} months ago";
  78.         }elseif( $years > 0 ){
  79.             if( $years == 1 )
  80.                 return "A year ago";
  81.             else
  82.                 return "{$years} years ago";
  83.         }elseif($ta_seconds <= -1){
  84.             return "Future/Scheduled";
  85.         }else{
  86.                 return "{$weeks} weeks ago";
  87.         }
  88. }
  89. ?>

Example

Here is an example program or application that demonstrates how to create a Time Ago Feature in PHP. The script below was only built for educational purposes only.

Interface

index.php

  1. <?php 
  2. require_once("time_ago_func.php");
  3. ?>
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7.     <meta charset="UTF-8">
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10.     <title>PHP Time Ago Function</title>
  11.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  12.     <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
  13.     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
  14.     <style>
  15.         html, body{
  16.             min-height:calc(100%);
  17.             width: calc(100%);
  18.         }
  19.         body{
  20.             min-height: 100vh;
  21.             width: 100vw;
  22.             display: flex;
  23.             flex-direction: column;
  24.             align-items: center;
  25.             justify-content: center;
  26.         }
  27.     </style>
  28. </head>
  29. <body class="bg-light bg-gradient">
  30.     <div class="container-fluid w-100">
  31.         <div class="col-lg-7 col-md-9 col-sm-12 mx-auto">
  32.             <h1 class="text-center fw-bolder my-4">Creating a Time Ago Function in PHP like some famous Social Networking Sites</h1>
  33.             <div class="d-flex justify-content-center">
  34.                 <hr class="col-4">
  35.             </div>
  36.         </div>
  37.         <div class="card rounded-0 shadow col-lg-5 col-md-7 col-sm-12 mx-auto">
  38.             <div class="card-body">
  39.                 <div class="container-fluid">
  40.                     <form action="" id="sample-form" method = "POST">
  41.                         <div class="mb-3" id="progress-holder">
  42.                             <div id="CurrentTime" class="h2 fw-bold text-center">
  43.                                 --:--:-- --
  44.                             </div>
  45.                             <div class="text-center h4 text-muted">Philippine Standard Time</div>
  46.                         </div>
  47.                         <div class="mb-3">
  48.                             <label for="datetime" class="form-label">Select DateTime</label>
  49.                             <input class="form-control" type="datetime-local" name="datetime"  id="datetime" value="<?= isset($_POST['datetime']) ? $_POST['datetime'] : '' ?>" required>
  50.                         </div>
  51.                         <div class="mb-3 d-grid">
  52.                             <button class="btn btn-sm rounded-pill btn-primary btn-block" type="submit">Submit</button>
  53.                         </div>
  54.                     </form>
  55.                     <div class="text-bg-dark px-2 py-3">
  56.                         <?php if($_SERVER['REQUEST_METHOD'] == "POST"): ?>
  57.                             <dl class="row">
  58.                                 <dt class="col-auto pe-2">Date and Time:</dt>
  59.                                 <dd class="col-auto flex-shrink-1 flex-grow-1"><?= date("F d, Y g:i:s A", strtotime($_POST['datetime'])) ?></dd>
  60.                             </dl>
  61.                             <dl class="row">
  62.                                 <dt class="col-auto pe-2">Conversion:</dt>
  63.                                 <dd class="col-auto flex-shrink-1 flex-grow-1"><?= get_timeago(strtotime($_POST['datetime'])) ?></dd>
  64.                             </dl>
  65.                         <?php else: ?>
  66.                             <div class="text-center">Select Date and Time First.</div>
  67.                         <?php endif; ?>
  68.                     </div>
  69.                 </div>
  70.             </div>
  71.         </div>
  72.     </div>
  73. </body>
  74.  
  75. <script src="./app.js"></script>
  76. </html>

JS Script

app.js

  1. var liveClockInvetrval;
  2. $(document).ready(function(){
  3.     // Live Clock
  4.     liveClockInvetrval = setInterval(function(){
  5.         var current_date = new Date().toLocaleString('en-US', { timeZone: 'Asia/Manila'});
  6.         var new_date = new Date(current_date)
  7.  
  8.         var h = new_date.getHours();
  9.         var m = new_date.getMinutes();
  10.         var s = new_date.getSeconds();
  11.         var am_pm = h > 12 ? "AM" : "PM";
  12.  
  13.         h = h > 12 ? h - 12 : (h == 0? 12: h);
  14.         $('#CurrentTime').text(`${h.toString().padStart(2, 0)}:${m.toString().padStart(2, 0)}:${s.toString().padStart(2, 0)} ${am_pm}`)
  15.     },500)
  16.  
  17. })

PHP Script

time_ago_func.php

  1. <?php
  2. date_default_timezone_set("Asia/Manila");
  3.  
  4. function get_timeago($timestamp=""){
  5.     // Check if time stamp is valid
  6.     if(empty($timestamp) && is_numeric($timestamp) && $timestamp > 0)
  7.     return "Invalid Date and Time Value";
  8.  
  9.     // Current Timestamp
  10.     $current_time = strtotime('now');
  11.     // Getting the difference beteween Current timestamp and given timestamp
  12.     $diff = $current_time - $timestamp;
  13.     // Timeago or timestamp difference in seconds
  14.     $ta_seconds = $diff;
  15.  
  16.  
  17.     /**
  18.      * Timestamp Difference (s) Convertions
  19.      */
  20.  
  21.         /**Getting the difference by minute(s) 
  22.          * timestamp difference / 60
  23.          */
  24.         $minutes = round($ta_seconds / 60); 
  25.         /**Getting the difference by hour(s) 
  26.          * timestamp difference / ( 60 * 60)
  27.          */
  28.         $hours   = round($ta_seconds / 3600);
  29.         /**Getting the difference by day(s) 
  30.          * timestamp difference / ( 24 * 60 * 60)
  31.          */
  32.         $days    = round($ta_seconds / 86400);
  33.         /**Getting the difference by week(s) 
  34.         * timestamp difference / ( 7 * 24 * 60 * 60)
  35.         */
  36.         $weeks   = round($ta_seconds / 604800);
  37.         /**Getting the difference by month(s) 
  38.         * timestamp difference / ( ( ( 365 + 365 + 365 + 365 + 366 ) / 5 / 12 ) * 24 * 60 *60 )
  39.         */
  40.         $months  = round($ta_seconds / 2629440);
  41.         /**Getting the difference by year(s) 
  42.         * timestamp difference / ( ( ( 365 + 365 + 365 + 365 + 366 ) / 5 ) * 24 * 60 *60 )
  43.         */
  44.         $years   = round($ta_seconds / 31553280); 
  45.  
  46.  
  47.         /**
  48.          * Return Timeago
  49.          */
  50.         if( $ta_seconds < 60 ){
  51.             if( $ta_seconds == 1)
  52.                 return "Just Now";
  53.             else
  54.                 return "{$ta_seconds} sec. ago";
  55.         }elseif($minutes < 60){
  56.             if( $minutes == 1 )
  57.                 return "A minute ago";
  58.             else
  59.                 return "{$minutes} min. ago";
  60.         }elseif( $hours < 24 ){
  61.             if( $hours == 1 )
  62.                 return "An Hour ago";
  63.             else
  64.                 return "{$hours} hr. ago";
  65.         }elseif( $days < 7 ){
  66.             if( $days == 1 )
  67.                 return "A day ago";
  68.             else
  69.                 return "{$days} days ago";
  70.         }elseif( $weeks < 4 ){
  71.             if( $weeks == 1 )
  72.                 return "A week ago";
  73.             else
  74.                 return "{$weeks} weeks ago";
  75.         }elseif( $months < 12 ){
  76.             if( $months == 1 )
  77.                 return "A month ago";
  78.             else
  79.                 return "{$months} months ago";
  80.         }elseif( $years > 0 ){
  81.             if( $years == 1 )
  82.                 return "A year ago";
  83.             else
  84.                 return "{$years} years ago";
  85.         }elseif($ta_seconds <= -1){
  86.             return "Future/Scheduled";
  87.         }else{
  88.                 return "{$weeks} weeks ago";
  89.         }
  90. }
  91.  
  92. ?>

Snapshot

Here's the snapshot of the page of the sample application using the above scripts.

PHP Time Ago Feature

DEMO VIDEO

That's it! I have also provided a zip file of the complete source code of the above sample application. You can download it by clicking the Download Button below this article.

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

Happy Coding :)

Tags

Add new comment

About text formats
  • 543 views