Cara Membuat Infinite Scroll Otomatis PHP, MYSQL Dan JQUERY - Geturnet PHP Language
Geturnet.com - Halo Sobat Geturnet semuanya balik lagi dengan Kami disini, sudah lama sekali om bewok tidak membuatkan tutorial, karena kesibukan om bewok yang sebenernya cuman tidur dirumah aja muahhaa. kali ini om bewok bakal membuatkan tutorial mengenai "Cara Membuat Infinite Scroll otomatis menggunakan php mysql dan jquery". Mungkin kalian bertanya - tanya, infinite scroll tuh kayak apa sih om ?
Nih om bewok kasih contoh aja ya "misalkan kamu bermain facebook, lalu kamu ketika scroll ke bawah, dia akan otomatis membuat update terbaru kan, kamu ga perlu klik page 2 atau page 3 untuk membuka status teman kamu di bawahnya, nah itu disebut Infinite Scroll.
Oh iya kalau kamu masih bingung caranya atau ada yang error, kamu bisa download di akhir tutorial ini ya.
Penjelasan Geturnet 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 Geturnet 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 #geturnet
