Monday 27 January 2020

Building Skeleton Loading Effect in PHP with Ajax



Currently, On many social media website Youtube or Facebook, we can see when page has been load in browser, then before loading of data on web page, we can see loading data skeleton has been first seen on web page and then after some seconds of time data has been load on web page. So, in this post we are going to make this type of skeleton loading screen by using Bootstrap library and by using PHP script with Ajax jquery we will load data on web page. Here from make Skeleton Loader we will not use any jQeury plugin but we will use simple CSS for creating Skeleton loading screen.

In this tutorial, we will make Skeleton Loader with Bootstrap. For this we have use this gitup code. This placeholder loading code, there is only CSS has been used for make content placeholder loading with animation effect. By using this style sheet we can make simple and flexible content placeholder loading skeleton with animation effect. This library is very easy to use, you have to simple stylesheet url in header of your web page and you can make skeleton screen in you web page by using css class of this library.

So, If you are looking for web tutorial for building Facebook or Youtube style content placeholder or data loading skeleton for your web page. Then this post will help you to make Facebook or Youtube style data load skeleton screen in simple steps. Here we have make data load skeleton loader by using placeholder loading style sheet library with Bootstrap. This skeleton loader we can use as web page loading progress which will look like Facebook like data loader, or YouTube like video thumbnail loader, or even you can also use as custom image loader or content loader also. After displaying data skeleton loader, and for load original data here we have use PHP script with Ajax. So, For source code of developing data load skeleton screen load with Bootstrap and for load data with PHP script with Ajax jQuery. Then below you can find complete source code.




Source Code


Database



--
-- Database: `testing`
--

-- --------------------------------------------------------

--
-- Table structure for table `tbl_post`
--

CREATE TABLE `tbl_post` (
  `id` mediumint(8) UNSIGNED NOT NULL,
  `post_title` text,
  `post_description` text,
  `author` varchar(255) DEFAULT NULL,
  `datetime` datetime DEFAULT NULL,
  `post_image` varchar(150) DEFAULT NULL,
  `post_url` varchar(150) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tbl_post`
--
ALTER TABLE `tbl_post`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tbl_post`
--
ALTER TABLE `tbl_post`
  MODIFY `id` mediumint(8) UNSIGNED NOT NULL AUTO_INCREMENT;



index.php



<!DOCTYPE html>
<html>
  <head>
    <title>Make Skeleton Loader with PHP Ajax using Bootstrap</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/placeholder-loading/dist/css/placeholder-loading.min.css">
  </head>
  <body>
    <br />
    <div class="container">
      <h3 align="center">Make Skeleton Loader with PHP Ajax using Bootstrap</h3>
      <br />
      <div class="card">
        <div class="card-header">Dynamic Data</div>
        <div class="card-body" id="dynamic_content">
          
        </div>
      </div>
    </div>
  </body>
</html>
<script>
  $(document).ready(function(){

    $('#dynamic_content').html(make_skeleton());

    setTimeout(function(){
      load_content(5);
    }, 5000);

    function make_skeleton()
    {
      var output = '';
      for(var count = 0; count < 5; count++)
      {
        output += '<div class="ph-item">';
        output += '<div class="ph-col-4">';
        output += '<div class="ph-picture"></div>';
        output += '</div>';
        output += '<div>';
        output += '<div class="ph-row">';
        output += '<div class="ph-col-12 big"></div>';
        output += '<div class="ph-col-12"></div>';
        output += '<div class="ph-col-12"></div>';
        output += '<div class="ph-col-12"></div>';
        output += '<div class="ph-col-12"></div>';
        output += '</div>';
        output += '</div>';
        output += '</div>';
      }
      return output;
    }

    function load_content(limit)
    {
      $.ajax({
        url:"fetch.php",
        method:"POST",
        data:{limit:limit},
        success:function(data)
        {
          $('#dynamic_content').html(data);
        }
      })
    }

  });
</script>





fetch.php



<?php

//fetch.php;

$connect = new PDO("mysql:host=localhost; dbname=testing", "root", "");

if(isset($_POST['limit']))
{
 $query = "
 SELECT * FROM tbl_post 
 ORDER BY id DESC 
 LIMIT ".$_POST["limit"]."
 ";

 $statement = $connect->prepare($query);

 $statement->execute();

 $result = $statement->fetchAll();

 $output = '';

 foreach($result as $row)
 {
  $output .= '
  <div class="row">
   <div class="col-md-4">
    <img src="images/'.$row["post_image"].'" class="img-thumbnail" />
   </div>
   <div class="col-md-8">
    <h2><a href="'.$row["post_url"].'">'.$row["post_title"].'</a></h2>
    <br />
    <p>'.$row["post_description"].'</p>
   </div>
  </div>
  <hr />
  ';
 }

 echo $output;
}

?>



2 comments: