Thursday, February 6, 2020

How To Create Skeleton Building Loading Effect in PHP with Ajax

      , , , , , , , ,      No comments   
How To Create Skeleton Building Loading Effect in PHP with Ajax

Currently we can see on many social networking websites, YouTube or Facebook, when the page was loaded in the browser. Before we load the data on the website, we can determine that the skeleton of loading data has been recognized. For the first time on the website and then after a few seconds, data has been uploaded to the website. In this post we will create this type of skeleton loading screen using the bootstrap library and PHP script with Ajax-JQuery and load data onto the website. In this case, we at make Skeleton Loader do not use jQeury plugins, but use simple CSS to create the skeleton loading screen.

In this tutorial we are going to make Skeleton Loader with Bootstrap. We used this gitup code for this. With this code for loading placeholders, only CSS was used to load content placeholders with animation effects. This style sheet can be used to create simple and flexible skeletons for loading content bookmarks with an animation effect. This library is very user-friendly. You should create a simple style sheet URL in the header of your website and use the CSS class of this library to create a skeleton screen on your website.

So if you're looking for a web tutorial to create a placeholder for Facebook or YouTube style content or a skeleton to load data for your website. This post will then help you to load the Facebook or YouTube style data in simple steps on the skeleton screen. Here we made the Data Load Skeleton Loader use the Placeholder Load Style Sheet Library with Bootstrap. This Skeleton Loader can be used as a loader for the website that looks like Facebook as a data loader or YouTube as a video thumbnail loader, or you can even use it as an image loader or custom content loader. After displaying the Data Skeleton Loader and loading the original data here, we used a PHP script with Ajax. Then for the source code of the loading development of the data loading skeleton screen with Bootstrap and for loading data with PHP script with Ajax jQuery. You will then find the 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>How To Create Skeleton Building Loading Effect in PHP with Ajax</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">How To Create Skeleton Building Loading Effect in PHP with Ajax</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;
}

?>

0 comments:

Post a Comment

Please don't enter any spam link in the comment box.