How to Create Infinite Scroll with Jquery Ajax and PHP

How to Create Infinite Scroll with Jquery Ajax and PHP
Hello everyone, welcome back again at porkaone. On this occasion we will learn how to make infinite scroll using jquery ajax and php. Curious?, let's follow the discussion below.

Infinite scroll is a term to keep scrolling until the amount of data reaches the end limit in an application. We usually find this infinite scroll in various applications, such as facebook, youtube, twitter and other applications.

Infinite scroll is very effective for news applications, e-commerce that displays many products, or social media. The use of this feature is also very good, because the data is only loaded when needed. Infinite scroll can also be used instead of pagination, as a better UX implementation.

In our tutorial this time, we will create a simple post page that displays a list of posts. At first the list only contains 8 posts, when you scroll to the bottom, the ajax function will be run to retrieve 8 more posts in the database, and so on until the post data runs out.

How to Create Infinite Scroll with Jquery Ajax and PHP

1. Create a new table with the name post. Then follow the table structure as shown below. And don't forget to fill in as much data as possible so that it can be tested.

Cara Membuat Infinite Scroll
Post Table

2. Create a new folder with the name exercise_infinite_scroll in the htdocs folder. Then create a new file with the name db_config.php. Follow the script as below.
<?php $localhost = 'localhost'; $user = 'root'; $pass = ''; $db = 'latihan'; $mysqli = new mysqli($localhost, $user, $pass, $db); ?>

3. Create a new file with the name index.php. Follow the script as below

<!DOCTYPE html> <html>     <head>     <title>PHP infinite scroll pagination</title> <link rel="stylesheet" href=""     integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <style type="text/css">     .preloader {     position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; background-color: #fff; } .loading {     position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 14px arial; } </style>     </head> <body>         <!-- this loader will fadeout if page loaded for first time --> <div class="preloader">     <div class="loading">     <div class="spinner-border" role="status">     <span class="sr-only">Loading...</span> </div> </div> </div> <div class="container">     <h3 class="alert alert-success text-center">     PHP TUTORIAL INFINITE SCROLLING </h3> <!-- <h2 class="text-center">PHP infinite scroll pagination</h2> --> <br /> <div class="col-md-12" id="post-data"> <?php     require('db_config.php'); $sql = "SELECT * FROM post ORDER BY id_post DESC LIMIT 8"; $result = $mysqli->query($sql); ?> <?php include('data.php'); ?> </div> </div>         <script src=""></script> <script src=""     integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"> </script> <script>     //when file loaded for first time, fadeout this loader $(window).load(function () {     $(".preloader").fadeOut("slow"); }); </script> <script type="text/javascript">     //when page scrolled to end of page //call function loadMoreData $(window).scroll(function () {     if ($(window).scrollTop() + $(window).height() >= $(document).height()) {     var last_id = $(".post-id:last").attr("id"); loadMoreData(last_id); } }); //loadMoreData is function to load data from database with ajax method //loadMoreData will call when page scrolled to end of the page function loadMoreData(last_id) { $.ajax({ url: 'loadMoreData.php?last_id=' + last_id, type: "get", beforeSend: function () { $(".preloader").show(); } }) .done(function (data) { //show data $("#post-data").append(data); $(".preloader").fadeOut("slow"); }) .fail(function (jqXHR, ajaxOptions, thrownError) { alert('server not responding...'); }); }         </script>     </body> </html>

4. Create a new file with the name data.php. Then follow the script as below

<?php while($post = $result->fetch_assoc()){ ?>     <div class="post-id" id="<?php echo $post['id_post']; ?>">     <h3><a href=""><?php echo $post['title']; ?></a></h3> <p><?php echo $post['content']; ?></p> <div class="text-right">     <button class="btn btn-success">Read More</button> </div> <hr style="margin-top:5px;">     </div> <?php } ?>

5. Create a new file with the name loadMoreData.php. The script below will be requested using the ajax method. Please follow the script as below.

<?php require('db_config.php'); $sql = "SELECT * FROM post WHERE id_post < '".$_GET['last_id']."' ORDER BY id_post DESC LIMIT 8"; $result = $mysqli->query($sql); $json = include('data.php'); ?>

We have written all the scripts. Now it's time for us to try it out. Open a browser and run localhost/exercise_infinite_scroll. The result will look like the image below.

Cara Membuat Infinite Scroll dengan Jquery Ajax dan PHP
Infinity Scroll

Cool!, now you can create infinite scrolls to improve the UX of the applications you make. Oh yes, I have also written several other programming tutorials that you can learn separately at the following link.
Ok that's our tutorial this time about how to make infinite scroll using jquery ajax and php. Hopefully it helps, if there are problems, don't hesitate to ask in the comments column.

Post a Comment