Skip to main content

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





Nicliving - Halo semuanya Nicliving 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

 

 

 

 


Labels:

Comments

Post a Comment

Popular posts from this blog

How to create a game from scratch for beginners

 How to create a game from scratch for beginners image Who doesn't love to play games? Almost most people definitely like to play games, this is because the game has advantages and strong appeal so that users will have a sense of curiosity and challenged to try it. Making games is not as difficult as we imagine, even we can make our own games. well, here will be explained various ways to create games for beginners that start from scratch. how to make a game Learning how to make simple games starting from scratch is a fun process that can bring useful benefits as well. The growing popularity of games that can be played on smartphone devices, makes many people start learning how to create games with their own game types and sell them. Therefore, currently, there are many games with very diverse game types in the application store that can be downloaded for free or paid. Basically, the games are made in different ways but still have the same concept. create a game Before learning abou...
Post a Comment
Read more

Algorithms are: Definition, types, and examples

 Algorithms are: Definition, types, and examples the algorithm is In the world of computing, there are different types of terms, for example, machine learning, AI, cloud, among others. One of the things I've been hearing a lot lately is algorithms.  Basically, an algorithm is a series of instructions aimed at a computer to turn a series of facts into useful information where the algorithm comes from the word algorism and rhythmic which was first introduced by Abu Jafar Muhammad in 825 ad. Maybe you've heard the term algorithm in everyday life. For example, when you watch YouTube there is an algorithm so that you watch some videos that have been recommended. The recommendations are already based on your experience watching previous videos. Contents hide  1 What Is An Algorithm? 2 Types Of Algorithms 2.1 1. Recursion 2.2 2. Divide and Conquer 2.3 3. Dynamic Programming 2.4 4. Greedy 2.5 5. Brute Force 2.6 6. Backtracking 3 Examples Of Algorithms 3.1 1. Narrative Algorithm 3...
Post a Comment
Read more

DevOps: definition, objectives, tasks and skills

 DevOps: definition, objectives, tasks and skills DevOps definition, goals, tasks and skills The term DevOps may still be quite unfamiliar to some people, in contrast to those who work in the IT field. Yes, devops is a principle or mindset used in the IT world, including in the process of making a software (software). Contents hide  1 Definition Of DevOps 2 Responsibilities Of A DevOps Engineer 3 DevOps Goals 3.1 1. Accelerate the development process 3.2 2. Increase team productivity 3.3 3. Minimize human error failure 4 skills to master 4.1 1. Understand the concept of DevOps 4.2 2. Mastery of various tools 4.3 4. Menguasai Microsoft Office Understanding DevOps Broadly speaking, DevOps is indeed a thought that is applied in making software. This idea has even been used by various large companies around the world and is used as a sustainable principle. DevOps itself comes from two terms, development and operations. As the name implies, this part plays a role in the development...
Post a Comment
Read more