Easiest Way To Create Realtime Live Notification Count Like Facebook | PHP | AJAX | JAVASCRIPT

Code:-

notification.php

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<table width="100%" style="background-color: #0066ff;color: white;">

 <tr width="75%">

  <td>

   <h2>Welcome to facebook</h2>

  </td>

  <td width="15%">

   <i class="fa fa-bell" aria-hidden="true" id="noti_number"></i>

  </td>

 </tr>

</table>

<script type="text/javascript">

 function loadDoc() {

  

  setInterval(function(){

   var xhttp = new XMLHttpRequest();

   xhttp.onreadystatechange = function() {

    if (this.readyState == 4 && this.status == 200) {

     document.getElementById("noti_number").innerHTML = this.responseText;

    }

   };

   xhttp.open("GET", "data.php", true);

   xhttp.send();

  },1000);

 }

 loadDoc();

</script>

data.php

<?php

$servername = "localhost";

$username = "root";

$password = "";

$dbname = "test";

// Create connection

$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection

if ($conn->connect_error) {

    die("Connection failed: " . $conn->connect_error);

} 

$sql = "SELECT * FROM notification_data";

$result = $conn->query($sql);

echo $result->num_rows;

/*

if ($result->num_rows > 0) {

    // output data of each row

    while($row = $result->fetch_assoc()) {

        echo "id: " . $row["id"]. " - Notification: " . $row["description"];

    }

} else {

    echo "0 results";

}

*/

$conn->close();

?>

Hello guys, this is unpossible pog here.

Today, I shall show you the easitest way to display live notification count without refreshing the page like facebook.

As soon as we insert data, the notification count changes which means we no longer have to refresh the page.

I am using the combination of php, javascript and basic ajax.

Let say, if someone likes your photo on facebook, it get stored in database. So in short we have to fetch count of data from database table.

Lets get started.

Here I created one sample page which shows static number of notification so we have to make it dynamic and live.

I created one table in database which represents your notification.

I created one file called “DATA.PHP ” which displays the notification.

But we only want the count so echo the count only.

Now the next task is to access that file in our design page using ajax.

So, create one javascript function and go to google.

Search for ajax code. Go inside w3school site

Copy paste the ajax code.

After the function end, type the function name with rounded brackets and semicolan.

Give an ID to division or any tag that you want.

And copy that same ID in ajax code.

Type the page name here which is connected to database.

Let refresh. And you will see that it is showing the notification count.

Now you have to add function called “SET INTERVAL”, to constantly refresh that ID afer 1 second. Create a function and cut-paste the code inside the curly brackets.

After that we no longer have to refresh page to change notification count.

Lets add some data in table.

Keep looking at notification count.

As soon as we insert data, the notification count changes.

You can give href to that icon to redirect to notification page if you want to.

Thats all for now.

The code is in the description.

Thank you for watching, dont forget to like share and subscribe.