bewoksatukosong.com | Halo semuanya balik lagi dengan om bewok 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.
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.
Oke sudah ??
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
 |
| Gambar 1.1 Perhatikan nama database dan nama tablenya |
Oke sudah ??
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.
 |
| Gambar 1.2 Struktur pembuatan infinite scroll otomatis |
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>';
}
}
?>
Hasilnya bisa lihat dibawah
 |
| Gambar 1.3 |
Kalau kalian ingin download bisa klik di sini Github
Itu saja tutorial hari ini, jangan lupa share ke teman - teman kamu. Semoga bermanfaat.
:vv
ReplyDeletemantap mas, ditunggu kunjungan balik nya di blog saya yang ga guna itu
ReplyDeletedirman29.blogspot.com
gak dikasih komen code nya, jadi gak bisa buat belajar :'(
ReplyDeleteabsurdbutwell.blogspot.com
Mantap, gan. Sudah saya coba dan berhasil. Hanya saja saya masih bingung, setelah di scroll ke bawah alamat urlnya kenapa tidak ikut berubah ya, masih index.php.
ReplyDeleteHarusnya saat pindah ke judul berita ke2, urlnya juga berubah jadi index.php?artikel=2
Solusinya bagaimana ya gan
Terima kasih