Pada tutorial ini kita akan membahas cara membuat Load More untuk memuat lebih banyak data dari database menggunakan AJAX dan PHP. ini merupakan satu jenis pagination. jenis pagination ini sangat umum di beberapa situs yang menggunakan fungsi muat lebih banyak data untuk melihat data dinamis.
Dengan pagination ini pengguna hanya perlu mengklik tombol Load More untuk setiap kali perlu melihat lebih banyak data. Setelah klik, data akan ditambahkan dengan item daftar yang ada.
Untuk struktur folder yang akan kita buat seperti dibawah ini
Membuat Tabel Database
Silahkan kalian buat terlebih dahulu databasenya, setelah itu kita akan membuat tabel blogs. untuk query nya silahkan copy dibawah ini.
CREATE TABLE `posts` ( `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT, `title` varchar(100) NOT NULL, `content` text NOT NULL, `link` varchar(255) NOT NULL, `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Membuat Configurasi
Silahkan membuat file config.php, kemudian copy kode dibawah ini. file ini digunakan untuk koneksi ke database.
<?php
$host = "localhost";
$user = "root";
$password = "";
$dbname = "php-load-more";
$con = mysqli_connect($host, $user, $password,$dbname);
if (!$con) {
die("Connection failed: " . mysqli_connect_error());
}Menampilkan Blog
Untuk menampilkan blog disini kita buat terlebih dahulu file index.php
<?php
include "config.php";
?>
<!doctype html>
<html>
<head>
<title>Load more data using jQuery,AJAX, and PHP</title>
<link href="assets/style.css" type="text/css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
<script src="assets/script.js"></script>
</head>
<body>
<div class="container">
<?php
$rowperpage = 3;
// jumlah data pada tabel blogs
$allcount_query = "SELECT count(*) as allcount FROM blogs";
$allcount_result = mysqli_query($con,$allcount_query);
$allcount_fetch = mysqli_fetch_array($allcount_result);
$allcount = $allcount_fetch['allcount'];
// menampilkan 3 blog awal
$query = "select * from blogs order by id asc limit 0,$rowperpage ";
$result = mysqli_query($con,$query);
while($row = mysqli_fetch_array($result)){
$id = $row['id'];
$title = $row['title'];
$status = $row['status'];
?>
<div class="post" id="post_<?php echo $id; ?>">
<h2><?php echo $title; ?></h2>
<p>
<?php echo $status; ?>
</p>
</div>
<?php
}
?>
<h2 class="load-more">Load More</h2>
<input type="hidden" id="row" value="0">
<input type="hidden" id="all" value="<?php echo $allcount; ?>">
</div>
</body>
</html>Pada line 19-22 berfungsi untuk menampilkan data blog yang ada di database, data diambil dengan fungsi mysqli_fetch_array sehingga data dimasukan ke dalam array asosiatif dan array numerik.
Membuat style CSS
silahkan kalian buat folder dengan nama assets kemudian didalam folder assets, kalian buat file dengan nama style.css setelah itu copy kode dibawah ini.
.container{
width: 55%;
margin: 0 auto;
border: 0px solid black;
padding: 10px 0px;
}
/* post */
.post{
width: 97%;
min-height: 200px;
padding: 5px;
border: 2px solid rgb(0, 253, 240);
margin-bottom: 15px;
}
.post h2{
letter-spacing: 1px;
font-weight: normal;
font-family: sans-serif;
}
.post p{
letter-spacing: 1px;
text-overflow: ellipsis;
line-height: 25px;
}
/* Load more */
.load-more{
width: 99%;
background: #15a9ce;
text-align: center;
color: white;
padding: 10px 0px;
font-family: sans-serif;
}
.load-more:hover{
cursor: pointer;
}
/* more link */
.more{
color: blue;
text-decoration: none;
letter-spacing: 1px;
font-size: 16px;
}Menampilkan Lebih Banyak Blog
silahkan kalian buat file getData.php kemudian copy kode dibawah ini
<?php
// konfigurasi
include 'config.php';
$row = $_POST['row'];
$rowperpage = 3;
// menampilkan blog
$query = 'SELECT * FROM blogs limit '.$row.','.$rowperpage;
$result = mysqli_query($con,$query);
$html = '';
while($row = mysqli_fetch_array($result)){
$id = $row['id'];
$title = $row['title'];
$status = $row['status'];
// membuat struktur html
$html .= '<div id="post_'.$id.'" class="post">';
$html .= '<h2>'.$title.'</h2>';
$html .= '<p>'.$status.'</p>';
$html .= '</div>';
}
echo $html;kode diatas untuk menampilkan blog lebih banyak. kalau kita lihat pada line 6 kita telah mengambil jumlah row yang telah dikirimkan dari ketika kita klik button load more. kemudian row tersebut akan digunakan pada line 10 untuk menampilkan blog yang sebelumnya belum tampil. sehingga jika kita klik load more maka akan menampilkan blog yang sebelumnya tidak tampil.
Langkah selanjutnya, silahkan buat file script.js didalam folder assets.
$(document).ready(function(){
// Load more data
$('.load-more').click(function(){
var row = Number($('#row').val());
var allcount = Number($('#all').val());
var rowperpage = 3;
row = row + rowperpage;
if(row <= allcount){
$("#row").val(row);
$.ajax({
url: 'getData.php',
type: 'post',
data: {row:row},
beforeSend:function(){
$(".load-more").text("Loading...");
},
success: function(response){
// membuat delay saat menampilakn konten baru
setTimeout(function() {
// menambahkan posts setelah post terakhir dengan class="post"
$(".post:last").after(response).show().fadeIn("slow");
var rowno = row + rowperpage;
// melakukan pengecekan apakah row lebih besar dari total nomor row
if(rowno > allcount){
$('.load-more').text("Hide");
$('.load-more').css("background","darkorchid");
}else{
$(".load-more").text("Load more");
}
}, 2000);
}
});
}else{
$('.load-more').text("Loading...");
// membuat delay saat menghapus konten
setTimeout(function() {
// Ketika row lebih besar dari allcount maka hapus semua elemen class='post' setelah 3 elemen
$('.post:nth-child(3)').nextAll('.post').remove();
// Reset the value of row
$("#row").val(0);
$('.load-more').text("Load more");
$('.load-more').css("background","#15a9ce");
}, 2000);
}
});
});Penjelasan kode diatas. krirm permintaan AJAX ketika <h2 class=’load-more’> diklik dan melewati indeks baris baru sebagai data di AJAX.
ketika data yang dikirim berhasil, tambahkan respons ke dalam elemen kelas .post dan kemudian hasilkan posisi indeks berikutnya, jika nilainya lebih besar dari allcount, ubah teks elemen <h2> menjadi hide.
jika nilai indeks baris baru lebih besar dari nilai allcount maka hapus semua element .post kecuali 3 element pertama dan ubah teks elemen <h2> menjadi Load More.
Penutup
Sekian tutorial Membuat Load More dengan AJAX dan PHP. Jika masih ada kesulitan ketika mengikuti tutorial diatas, kalian bisa komentar dibawah sini. Terimakasih.