• Contact Us
Wednesday, December 21, 2022
-18 °c
Teman Ngoding
  • Home
  • Tutorial
    • Laravel
    • Codeigniter
    • PHP
    • Golang
    • Java
    • Javascript
    • React JS
    • SQL
    • Problem Solution
  • Video Tutorial
    • Video Laravel
    • Video Codeigniter
    • C++
    • Video Git
  • Events
  • Berita
  • Donate
  • Indonesia
    • English
No Result
View All Result
Teman Ngoding
  • Home
  • Tutorial
    • Laravel
    • Codeigniter
    • PHP
    • Golang
    • Java
    • Javascript
    • React JS
    • SQL
    • Problem Solution
  • Video Tutorial
    • Video Laravel
    • Video Codeigniter
    • C++
    • Video Git
  • Events
  • Berita
  • Donate
  • Indonesia
    • English
No Result
View All Result
Plugin Install : Cart Icon need WooCommerce plugin to be installed.
Teman Ngoding
No Result
View All Result

Tutorial Codeigniter 4 ~ Load more menggunakan ajax

admin by admin
August 2, 2022
in Codeigniter, Problem Solution, Tutorial
0 0
0
Home Tutorial Codeigniter

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/appstarter

Create 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

Tutorial Codeigniter 4 ~ Login dan Register

Menghilangkan Public dan Index.php dari URL Codeigniter 4

Tags: codeigniter 4infinite scrollload more ajaxtutorial codeigniter 4
ShareTweetShare
admin

admin

Next Post
Tutorial Codeigniter 3 ~ Menggunakan Multiple select2 dan menyimpan dengan format json

Tutorial Codeigniter 3 ~ Menggunakan Multiple select2 dan menyimpan dengan format json

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Trending
  • Comments
  • Latest
Tutorial CodeIgniter 4 part 1 ~ RESTful API JWT Authentication

Tutorial CodeIgniter 4 part 1 ~ RESTful API JWT Authentication

June 2, 2022
Codeigniter 4 ~ Membuat Notifikasi Menggunakan SweetAlert

Codeigniter 4 ~ Membuat Notifikasi Menggunakan SweetAlert

June 8, 2022
Tutorial Codeigniter 4 ~ Login dan Register

Tutorial Codeigniter 4 ~ Login dan Register

May 30, 2022
REST API Login dan Register Node.js dengan JWT

REST API Login dan Register Node.js dengan JWT

July 28, 2022
Tutorial Codeigniter 4 ~ Login dan Register

Tutorial Codeigniter 4 ~ Login dan Register

5
Rekomendasi tempat belajar pemrograman

Rekomendasi tempat belajar pemrograman

3
Menghilangkan Public dan Index.php dari URL Codeigniter 4

Menghilangkan Public dan Index.php dari URL Codeigniter 4

2
Membuat Sitemap Otomatis Codeigniter 4

Membuat Sitemap Otomatis Codeigniter 4

1
Access MongoDB With Node.JS

Akses MongoDB Dengan Node.JS

September 26, 2022
Teorema Structured Control

Basic Programming – Structured Control Theorem

September 23, 2022
WEB CRUD LocalStorage Menggunakan JavaScript

WEB CRUD LocalStorage Menggunakan JavaScript

September 22, 2022
DOM dan GOM Javascript

Perbedaan BOM Dan DOM Pada JavaScript

September 20, 2022
Teman Ngoding

Teman Ngoding tempat berbagi tutorial pemrograman
Read more

Categories

  • Berita
  • C++
  • Codeigniter
  • Events
  • Flutter
  • Golang
  • Java
  • Javascript
  • Laravel
  • MongoDB
  • News
  • Node JS
  • Pemrograman
  • PHP
  • Problem Solution
  • React JS
  • SQL
  • Tutorial
  • TypeScript
  • TypeScript
  • Video Codeigniter
  • Video Git
  • Video Laravel
  • Video Tutorial

Tags

ajax belajar golang belajar reactjs blog browser seluler Cara mendapatkan Uang dari Blog codeigniter codeigniter 3 codeigniter 4 codeigniter4 embed html Error Handling flutter flutter vs react native golang golang dasar html infinite scroll javascript javascript tutorial laravel laravel 8 laravel9 laravel 9 load more ajax Menggunakan Multiple select2 dan menyimpan dengan format json mongodb nodejs pdf pemrograman ajax pemrograman golang pemrograman php reactjs reactjs tutorial reactjs vs react native rest api rest api codeigniter 4 tutorial codeigniter 4 tutorial golang tutorial javascript tutorial laravel tutorial laravel 8 tutorial nodejs tutorial reactjs uang dari blog

Recent News

Access MongoDB With Node.JS

Akses MongoDB Dengan Node.JS

September 26, 2022
Teorema Structured Control

Basic Programming – Structured Control Theorem

September 23, 2022

© 2022 Teman Ngoding.

No Result
View All Result
  • Home
  • Tutorial
    • Laravel
    • Codeigniter
    • PHP
    • Golang
    • Java
    • Javascript
    • React JS
    • SQL
    • Problem Solution
  • Video Tutorial
    • Video Laravel
    • Video Codeigniter
    • C++
    • Video Git
  • Events
  • Berita
  • Donate
  • Indonesia
    • English

© 2022 Teman Ngoding.

Login to your account below

Forgotten Password?

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In
  • English
  • Indonesia