Cara Membuat Infinite Scroll Otomatis PHP, MYSQL Dan JQUERY - Awdev PHP Language

 Cara Membuat Infinite Scroll Otomatis PHP, MYSQL Dan JQUERY - Awdev PHP Language

 


 Bagaimana melakukan pengguliran tak terbatas otomatis PHP, MYSQL dan JQUERY - Bahasa PHP Awdev





awdev.eu.org - Halo semuanya awdev kembali lagi, sudah lama bebek tidak melakukan tutorial, karena aktivitas bebek, sebenarnya tidur di rumah, muahhaa. kali ini bewok akan melakukan tutorial "Cara membuat Infinite Scroll secara otomatis menggunakan php mysql dan jquery". Anda mungkin bertanya-tanya seperti apa Infinite Scroll itu, om?




Disini awdev hanya memberikan contoh, “Misalnya anda bermain di Facebook, ketika anda scroll ke bawah maka otomatis akan update ke yang terbaru kan? Anda tidak perlu mengklik halaman 2 atau halaman 3 untuk membuka status halaman tersebut. teman-teman dibawah ini namanya Infinite Scroll.




Oh iya kalau masih belum tau caranya atau ada error bisa download di akhir tutorial ini. Penjelasan dari awdev tentang cara membuat gulir otomatis tanpa batas (memuat lebih banyak secara otomatis) PHP, MYSQL dan JQUERY


Sederhana dan praktis. 




Penjelasan awdev Tentang Cara Membuat Infinite Scroll Otomatis (Auto Load More) PHP, MYSQL Dan JQUERY

yang Sederhana dan bisa dipraktikkan.


Syarat - Syarat Membuat Infinite Scroll Otomatis (Auto Load More) PHP, MYSQL Dan JQUERY

- Paham Pemograman PHP

- Paham Pemograman MYSQL 

- Paham Pemograman JQUERY


"PHP is an open-source server-side scripting language that many devs use for web development. It is also a general-purpose language that you can use to make lots of projects, including Graphical User Interfaces (GUIs)."

"MySQL is a relational database management system (RDBMS) developed by Oracle that is based on structured query language (SQL). A database is a structured collection of data. It may be anything from a simple shopping list to a picture gallery or a place to hold the vast amounts of information in a corporate network."

"jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. It is free, open-source software using the permissive MIT License. As of Aug 2022, jQuery is used by 77% of the 10 million most popular websites."



Oke ya Sobat??


Untuk Memulai Pembuatan Infinite Scroll Otomatis (Auto Load More) PHP, MYSQL Dan JQUERY yang awdev Jelaskan dibawah ini:

 

Pertama kia buat terlebih dahulu database-Nya, nama databasenya adalah loadmore dengan nama table berita 

Kalau kalian masih bingung, kalian bisa lihat pada gambar ya.


Selanjutnya kita membuat 2 file yaitu index.php dan get_data.php . Oh iya ada satu lagi yaitu jquery, kalian bisa download jquery di internet.





Kita buat terlebih dahulu index.php


<!DOCTYPE html>

<html>

<head>

<title></title>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

 $(document).ready(function(){

  var flag = 0;


  $.ajax({

   type: "GET",

   url: "get_data.php",

   data: {

    'offset':0,

    'limit':3

   },

   success: function(data) {

    $('body').append(data);

    flag +=3;

   }

  });


  $(window).scroll(function(){

   if($(window).scrollTop() >= $(document).height() - $(window).height()) {

    $.ajax({

     type: "GET",

     url: "get_data.php",

     data: {

      'offset':flag,

      'limit':3

     },

     success: function(data) {

      $('body').append(data);

      flag +=3;

     }

    });

   }

  });

 });


</script>

<style type="text/css">

 .blog-post {

  border-bottom: solid  4px black;

  margin-bottom:20px;

 }


 .blog-post h1 {

  font-size: 40px;

 }


 .blog-post p {

  font-size: 30px;

 }

</style>

</head>

<body>

<div class="blog-post">

<!--   <h1>Heading</h1>

 <p>Lorem ipsum dolor sit amet, </p> -->


</div>

</body>

</html>



Lalu kita membuat get_data.php, dan ini codinganya

<?php  

if(isset($_GET['offset']) && isset($_GET['limit'])) {

 $limit = $_GET['limit'];

 $offset = $_GET['offset'];


 $connection = mysqli_connect('localhost', 'root', '', 'loadmore');


 $data = mysqli_query($connection,"SELECT * FROM berita LIMIT {$limit} OFFSET {$offset}");


 while($row=mysqli_fetch_array($data)) {

  echo '<div class="blog-post"><h1>'.$row['id_berita'].". ".$row['judul_berita'].'</h1><p>'.$row['isi'].'</p></div>';

 }

}

?> 




Jadi ketika kita scroll dia akan otomatis menampilkan data yang sudah kita masukin di database mysql dengan nama loadmore


Kalau kalian ingin download bisa klik di sini Github


Itu saja tutorial hari ini, jangan lupa share ke teman - teman kamu. Semoga bermanfaat.

Tags # jquery # pemograman # php

 

 

 

 


Post a Comment

We are

Providing Quality services for App. Business. Designing. Marketing. Portfolio.

We help business owners and startups better serve more clients through digital enabled tools and strategies that increase market reach. We specialize in serving business owners through our practical experience and passion.

Read More

Standard

  • 01 User
  • 01 Project
  • 01 Advisor Team
  • Complete Statistics
  • E-mail Support
$ 99 /Mon

Effectively Enhance Your Business following this Tutorial

We help business owners and startups better serve more clients through digital enabled tools and strategies that increase market reach. We speciliaze in serving business owners through our practical experience and passion.

Read More
Can i ask for discount?

Some content. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas, mollitia? Porro quod officia in non et aperiam ipsa ab sit nihil necessitatibus corrupti explicabo quam sapiente est culpa nostrum, nisi, optio dicta cumque eum cum a repudiandae. Aperiam, qui aliquid.

Will I get premium support?

Some content. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas, mollitia? Porro quod officia in non et aperiam ipsa ab sit nihil necessitatibus corrupti explicabo quam sapiente est culpa nostrum, nisi, optio dicta cumque eum cum a repudiandae. Aperiam, qui aliquid.

Accordion title 3

Some content. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas, mollitia? Porro quod officia in non et aperiam ipsa ab sit nihil necessitatibus corrupti explicabo quam sapiente est culpa nostrum, nisi, optio dicta cumque eum cum a repudiandae. Aperiam, qui aliquid.

Is BizTratus reliable?

Some content. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas, mollitia? Porro quod officia in non et aperiam ipsa ab sit nihil necessitatibus corrupti explicabo quam sapiente est culpa nostrum, nisi, optio dicta cumque eum cum a repudiandae. Aperiam, qui aliquid.

How to buy this Template?

Some content. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas, mollitia? Porro quod officia in non et aperiam ipsa ab sit nihil necessitatibus corrupti explicabo quam sapiente est culpa nostrum, nisi, optio dicta cumque eum cum a repudiandae. Aperiam, qui aliquid.

Accordion title 3

Some content. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas, mollitia? Porro quod officia in non et aperiam ipsa ab sit nihil necessitatibus corrupti explicabo quam sapiente est culpa nostrum, nisi, optio dicta cumque eum cum a repudiandae. Aperiam, qui aliquid.

We Offer A Variety Of Industry Specific Marketing Solutions

We help business owners and startups better serve more clients through digital enabled tools and strategies that increase market reach. We speciliaze in serving business owners through our practical experience and passion.

Try it free