This post is also available in:
English
Hallo apa kabar semuanya, semoga teman teman sehat dan sukses selalu. Kali ini kita akan membahas cara membuat load more di codeigniter 4. Mmebuat infinite scroll menggunakan ajax dan codeigniter 4. Mari kita mulai ke pembahasannya.
Saya baru saja mendapatkan pekerjaan untuk membuat load more menggunakan ajax, saya telah diberi tugas untuk menambahkan Scroll tak terbatas di aplikasi Codeigniter. Idealnya, jenis fitur ini sangat membantu dalam memuat data pada satu halaman web dalam potongan.
Anda dapat memanggil dengan banyak nama seperti paginasi pengguliran tak terbatas, paginasi pengguliran tak berujung, paginasi otomatis, paginasi pemuatan malas, paginasi pemuatan progresif; sepertinya kurang lebih sama.
Dalam tutorial memuat lebih banyak data Codeigniter 4 ini, kami akan menunjukkan kepada Anda bagaimana menggunakan jQuery AJAX untuk memuat lebih banyak data pada halaman. Kita akan membuat daftar data dan secara dinamis mengambil data pada aplikasi Codeigniter daftar data atau catatan yang akan ditampilkan atau dimuat di halaman saat pengguna mulai mengsecroll halaman web.
Dalam fitur seperti itu, pengguna tidak perlu me-refresh atau memuat ulang seluruh halaman web, dan data dimuat di halaman web, bersamaan dengan penggantian dengan elemen HTML.
Download Codeigniter Project
Untuk membuat project codeigniter 4, saya sarankan teman teman menggunakan compoer.
composer create-project codeigniter4/appstarterCreate DB Table with Data
Buatlah sebuah tabel client sebagai data simulasi kita kali ini.
CREATE TABLE clients (
id int(11) NOT NULL AUTO_INCREMENT COMMENT 'Primary Key',
client_name varchar(100) NOT NULL COMMENT 'Name',
client_email varchar(255) NOT NULL COMMENT 'Email',
created_at varchar(30) NOT NULL COMMENT 'Date',
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;
INSERT INTO clients(id, client_name, client_email, created_at) VALUES
(1, 'Hunter George', 'tyshawn1978@hotmail.com', '1949-10-6'),
(2, 'Kyle Johnson', 'brown1998@gmail.com', '1980-8-12'),
(3, 'Pat Vang', 'isom1970@hotmail.com', '1961-10-10'),
(4, 'Brad Bailey', 'elwyn1980@hotmail.com', '1992-3-31'),
(5, 'Hunter George', 'tyshawn1978@hotmail.com', '1949-10-6'),
(6, 'Kyle Johnson', 'brown1998@gmail.com', '1980-8-12'),
(7, 'Pat Vang', 'isom1970@hotmail.com', '1961-10-10'),
(8, 'Brad Bailey', 'elwyn1980@hotmail.com', '1992-3-31'),
(9, 'Hunter George', 'tyshawn1978@hotmail.com', '1949-10-6'),
(10, 'Kyle Johnson', 'brown1998@gmail.com', '1980-8-12'),
(11, 'Pat Vang', 'isom1970@hotmail.com', '1961-10-10'),
(12, 'Brad Bailey', 'elwyn1980@hotmail.com', '1992-3-31'),
(13, 'Hunter George', 'tyshawn1978@hotmail.com', '1949-10-6'),
(14, 'Kyle Johnson', 'brown1998@gmail.com', '1980-8-12'),
(15, 'Pat Vang', 'isom1970@hotmail.com', '1961-10-10'),
(16, 'Brad Bailey', 'elwyn1980@hotmail.com', '1992-3-31'),
(17, 'Hunter George', 'tyshawn1978@hotmail.com', '1949-10-6'),
(18, 'Kyle Johnson', 'brown1998@gmail.com', '1980-8-12'),
(19, 'Pat Vang', 'isom1970@hotmail.com', '1961-10-10'),
(20, 'Brad Bailey', 'elwyn1980@hotmail.com', '1992-3-31');Update Database
Setelah teman teman membuat database dan tabel yang kita inginkan, maka langkah selanjutnya kita merubahfile database yang berada di app/Config/Database.php.
public $default = [
'DSN' => '',
'hostname' => 'localhost',
'username' => 'db_username',
'password' => 'db_password',
'database' => 'db_name',
'DBDriver' => 'MySQLi',
'DBPrefix' => '',
'pConnect' => false,
'DBDebug' => (ENVIRONMENT !== 'development'),
'cacheOn' => false,
'cacheDir' => '',
'charset' => 'utf8',
'DBCollat' => 'utf8_general_ci',
'swapPre' => '',
'encrypt' => false,
'compress' => false,
'strictOn' => false,
'failover' => [],
'port' => 3306,
];Sesuaikan dengan database yang teman teman buat.
Create Model File
Buat sebuah file model untuk menghubungkan tabel dari database dengan aplikasi yang kita buat. Kita buat model app/Models/ClientModel.php.
<?php
namespace App\Models;
use CodeIgniter\Database\ConnectionInterface;
use CodeIgniter\Model;
class User extends Model
{
protected $table = 'clients';
protected $primaryKey = 'id';
protected $allowedFields = [
'client_name',
'client_email'
];
}Create Controller
Di sinilah langkah penting, di mana Anda harus membuat pengontrol dan menentukan fungsi untuk memuat data dari database menggunakan paginate dan memuat gulir halaman dalam potongan.
buat file controller di app/Controllers/ClientController.php.
<?php
namespace App\Controllers;
use CodeIgniter\Controller;
use CodeIgniter\HTTP\RequestInterface;
use App\Models\ClientModel;
class ClientController extends Controller {
public function index() {
helper(['form', 'url']);
$this->clientModel = new ClientModel();
$data = [
'clients' => $this->clientModel->paginate(4),
'pager' => $this->clientModel->pager
];
return view('index', $data);
}
public function onScrollLoadMore(){
$limit = 4;
$page = $limit * $this->request->getVar('page');
$data['clients'] = $this->loadMoreData($page);
return view('load_clients', $data);
}
function loadMoreData($limit){
$db = new ClientModel();
$builder = $db->select('*')->limit($limit)->get();
return $builder->getResult();
}
} ?>Create View
Seperti yang Anda ingat, kita kali ini akan membuat view untuk menampilkan data, Anda harus membuat file tampilan utama. File ini akan dimuat saat pengguna halaman mulai mengsecroll halaman.
Buat file view di file app/Views/index.php.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax Load More Data on Page Scroll in Codeigniter 4</title>
<style>
body {
height: 1000px;
}
</style>
</head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>
<div class="container">
<?php if($clients): ?>
<?php foreach($clients as $data): ?>
<div class="card mb-3">
<h3><?php echo $data['client_name']; ?></h3>
</div>
<?php endforeach; ?>
<?php endif; ?>
<div id="loadMoreBlock"></div>
</div>
</body>
<script>
var baseURL = "<?php echo base_url(); ?>";
var page = 1;
var triggerScrollLoader = true;
var isLoading = false;
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 555) {
if (isLoading == false) {
isLoading = true;
page++;
if (triggerScrollLoader) {
initLoadMore(page);
}
}
}
});
function initLoadMore(page) {
$.ajax({
url: baseURL+"/ClientController/onScrollLoadMore?page=" + page,
type: "GET",
dataType: "html",
}).done(function (data) {
isLoading = false;
if (data.length == 0) {
triggerScrollLoader = false;
$('#loader').hide();
return;
}
$('#loader').hide();
$('#loadMoreBlock').append(data).show('slow');
}).fail(function (jqXHR, ajaxOptions, thrownError) {
console.log('Nothing to display');
});
}
</script>
</html>Buatlah file yang lain dalam satu folder app/Views/load_clients.php.
<?php if($clients): ?>
<?php foreach($clients as $data): ?>
<div class="card mb-3">
<h3><?php echo $data->client_name; ?></h3>
</div>
<?php endforeach; ?>
<?php endif; ?>Register Route
Jangan lupa teman teman tambahkan route untuk memanggil fungsinya app/Config/Routes.php.
/*
* --------------------------------------------------------------------
* Route Definitions
* --------------------------------------------------------------------
*/
$routes->setDefaultController('ClientController');
$routes->get('/page-scroll-load-more', 'ClientController::index');Run App
Langkah terakhir ini menunjukkan kepada Anda bagaimana memulai server pengembangan Codeigniter, jalankan perintah yang disediakan.
Gunakan url yang disarankan untuk menguji pemuatan lebih banyak data pada fungsionalitas gulir halaman.
php artisan serve
http://localhost:8080/page-scroll-load-more
Demikian tutorial kali ini saya buat, semoga bermanfaat untuk teman teman semuanya. Terimakasih telah berkunjung ke website saya.
Baca juga tutorial lainnya.
Tutorial CodeIgniter 4 ~ RESTful API JWT Authentication
