Auto Load More Data Ketika Halaman Discroll - Menggunakan Ajax dan CodeIgniter4

Auto Load More Data Ketika Halaman Discroll - Menggunakan Ajax dan CodeIgniter4

DailyBlog.id - Pernahkah kalian berpikir ketika membuka aplikasi Instagram, Facebook, Twitter, dll. Lalu ketika tampilan sudah dipaling bawah, dan terdapat postingan baru yang di load? Dalam kasus seperti itu, maka bisa dibilang bahwa ketika user sedang membuka halaman dan halaman tersebut discroll hingga paling bawah, dan data akan diload secara otomatis. Kasus tersebut hampir sama halnya dengan load more menggunakan button, namun perbedaannya hanya dalam pemanggilan data. Dalam postingan ini, saya akan memberikan tutorial kepada kalian semua, bagaimana cara membuat data agar di load secara otomatis ketika user ngescroll halaman hingga ke bawah menggunakan Ajax dan CodeIgniter4. Untuk langkah-langkahnya kalian bisa mengikuti dibawah ini:

1. Langkah pertama yang bisa kalian lakukan yaitu, pastikan terlebih dahulu CodeIgniter4 kalian sudah terkoneksi ke database atau belum? Kalian bisa mengkonekkan ke database dengan cara ubah hostname, database, username, password pada file yang bernama env sesuai dengan database kalian nantinya. (dan jangan lupa untuk unkomen pada bagian seperti di bawah ini):

database.default.hostname = localhost
database.default.database = loadmore
database.default.username = root
database.default.password = 


Dan tidak lupa untuk ubah nama file env menjadi .env, agar kalian bisa set lebih mudah melalui file tersebut. (Dan jangan lupa, kalian juga pandai" untuk mengamankan file .env tersebut).


2. Lalu kalian bisa download dan import .sql yang saya berikan ini. (sebagai contoh data saja). https://github.com/andspdev/mysql-nama-kode-negara

3. Jika langkah-langkah diatas telah selesai, langkah selanjutnya kalian bisa membuat model load morenya terlebih dahulu, yang terletak pada folder app/Models . Kalian bisa membuat file dnegan nama LoadMoreModel.php, lalu copas script yang ada dibawah ini:

<?php
 
namespace App\Models;
 
use CodeIgniter\Model;
 
class LoadMoreModel extends Model
{

}


4. Jika sudah, kalian bisa membuat fungsi dengan nama ambilData() dalam class LoadMoreModel, lalu copas script dibawah ini;

public function ambilData($limit, $start)
{
    $builder    = $this->db->table('countries');
    $query      = $builder->select('code, name')
                    ->orderBy('name', 'ASC')
                        ->get($limit, $start)
                            ->getResult();
    return $query;
}



Maka untuk script LoadMoreModel.php nya secara lengkap, seperti ini:

<?php
 
namespace App\Models;
 
use CodeIgniter\Model;
 
class LoadMoreModel extends Model
{
    public function ambilData($limit, $start)
    {
        $builder    = $this->db->table('countries');
        $query      = $builder->select('code, name')
                        ->orderBy('name', 'ASC')
                            ->get($limit, $start)
                                ->getResult();
        return $query;
    }
}


Nah, model tersebut nantinya akan digunakan untuk pengambilan data countries pada database nantinya.

5. Jika sudah membuat model, langkah selanjutnya. Kalian bisa membuat Controller baru yang terletak pada folder app/Controllers dengan nama filenya yaitu Loadmore.php, setelah itu kalian bisa copas script di bawah ini:

<?php

namespace App\Controllers;

use App\Models\LoadMoreModel;

class Loadmore extends BaseController
{

}


6. Lalu buat fungsi index() dalam class Loadmore, dan copas script yang ada di bawah ini:

public function index()
{
        return view('load_more', ['startData' => 0, 'limitData' => 20]);
}


Fungsi tersebut nantinya akan digunakan untuk membuka permalinknya /loadmore (sebagai indexnya), dan me-return view load_more.php lalu mengirimkan startData dengan value 0 dan limitData dengan value 20 ke load_more.php nya.

7. Jika sudah, masih di file yang sama. Kalian buat fungsi data() dalam class Loadmore, dan copas script yang ada di bawah ini:

public function data()
{
    $data           = [];
    $startData      = $this->request->getPost('startData');
    $limitData      = $this->request->getPost('limitData');
    $data['err']    = 'Tidak ada data yang ditampilkan';

    if (isset($startData) && isset($limitData))
    {
        $load_data          = new LoadMoreModel();
        $data['countries']  = $load_data->ambilData($limitData, $startData);
        $data['err']        = count($data['countries']) == 0 ? $data['err'] : null;
    }

    return $this->response->setJSON($data);
}



Fungsi yang diatas ini nantinya digunakan untuk sebagai API, yang akan mengambil data-data database dari model LoadMoreModel, dan output berbentuk JSON. Data tersebut akan ditampilkan pada view load_more nantinya.

Untuk script lengkapnya class Loadmore, seperti ini:

<?php

namespace App\Controllers;

use App\Models\LoadMoreModel;

class Loadmore extends BaseController
{
    public function index()
    {
        return view('load_more', ['startData' => 0, 'limitData' => 20]);
    }

    public function data()
    {
        $data           = [];
        $startData      = $this->request->getPost('startData');
        $limitData      = $this->request->getPost('limitData');
        $data['err']    = 'Tidak ada data yang ditampilkan';

        if (isset($startData) && isset($limitData))
        {
            $load_data          = new LoadMoreModel();
            $data['countries']  = $load_data->ambilData($limitData, $startData);
            $data['err']        = count($data['countries']) == 0 ? $data['err'] : null;
        }

        return $this->response->setJSON($data);
    }
}


8. Jika telah membuat model dan controllernya, maka tahap selanjutnya kalian bisa membuat view nya pada folder app/Views dengan nama file load_more.php (sesuai dengan view yang ada pada controller). Kalian bisa copas script dibawah ini:

<!DOCTYPE html>
<html lang="id">
    <head>
        <title>Coba Auto Load More ketika Scroll</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div class="box-center">
            <div class="title"><h1>Nama negara dan kodenya</h1></div>

            <div class="hasil_load"></div>
            <div class="hasilPesan"></div>
        </div>
    </body>
</html>


Agar tampilan terlihat rapi, dan berwarna. Kalian bisa menambahkan style di dalam head. Untuk style yang sederhana, kalian bisa copas script di bawah ini:

<style type="text/css">
    body {
        background: #f9f9f9;
        padding: 10px;
        margin: 10px;
    }

    .box-center {
        margin: 3em auto;
        background: #fff;
        max-width: 500px;
        padding: 20px;
        border: 1px solid #ddd;
        box-shadow: 0 0 10px #ddd;
    }
    .box-center .title {
        margin-bottom: 20px;
        border-bottom: 1px dashed #ccc;
        padding: 20px;
        text-align: center
    }
    .box-center .title h1 {
        margin: 0;
        padding: 0;
        font-size: 25px
    }
    .box-center .hasilPesan, .box-center .loader {
        text-align: center;
    }
    .box-center .loader.bottom {
        border-top: 1px dashed #ddd;
        margin-top: 20px;
        padding-top: 20px;
    }
</style>


9. Tahap selanjutnya, agar bisa load data ketika di scroll. Kalian bisa copas script dibawah ini dan masukkan di dalam body letaknya di bawah div .box-center

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
    $(function() 
    {
        let startData     = <?=$startData?>;
        let loadMore      = true;
        const hasilLoad   = $('.hasil_load');
        const hasilPesan  = $('.hasilPesan');
        const limitData   = <?=$limitData?>;
        const imgLoader   = '<img src="<?=base_url('loader.svg')?>" alt="Loader" width="40" height="40" />';

        hasilPesan.html(`
            <div class="loader">
                ${imgLoader}
            </div>
        `);

        const LoadMore    = (limit, start) =>
        {
            $.ajax({
                url: '<?=base_url('/loadmore/data')?>',
                method: 'POST',
                data: {startData: start, limitData: limit},
                success: (data) =>
                {
                    const err       = data.err;
                    const countries = data.countries;

                    if (err !== null)
                    {
                        hasilPesan.html(`<br/>${err}`);

                        if (Array.isArray(countries) && countries.length == 0)
                            setTimeout(() => {
                                hasilPesan.html(null);
                            }, 4000);

                        loadMore = false;
                    }
                    else
                    {
                        $.each(countries, (key, val) => 
                        {
                            hasilLoad.append(`
                                <b>Negara</b>: ${val.name}<br/>
                                <b>Kode</b>: ${val.code}<br/><br/>
                            `); 
                        });

                        loadMore = true;
                        hasilPesan.html(null);
                    }
                }
            });
        }

        if (loadMore)
        {
            loadMore = false;

            setTimeout(() =>
            {
                LoadMore(limitData, startData);
            }, 800);
        }

        $(window).scroll(function()
        {
            if ($(window).scrollTop() + $(window).height() > $(".hasil_load").height() && loadMore)
            {
                loadMore = false;
                startData = startData + limitData;
                
                setTimeout(() =>
                {
                    LoadMore(limitData, startData);
                }, 800);

                
                hasilPesan.html(`
                    <div class="loader bottom">
                        ${imgLoader}
                    </div>
                `);
            }
        });
    });
</script>


Maka untuk script lengkapnya load_more.php, akan seperti ini:

<!DOCTYPE html>
<html lang="id">
    <head>
        <title>Coba Auto Load More ketika Scroll</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body {
                background: #f9f9f9;
                padding: 10px;
                margin: 10px;
            }

            .box-center {
                margin: 3em auto;
                background: #fff;
                max-width: 500px;
                padding: 20px;
                border: 1px solid #ddd;
                box-shadow: 0 0 10px #ddd;
            }
            .box-center .title {
                margin-bottom: 20px;
                border-bottom: 1px dashed #ccc;
                padding: 20px;
                text-align: center
            }
            .box-center .title h1 {
                margin: 0;
                padding: 0;
                font-size: 25px
            }
            .box-center .hasilPesan, .box-center .loader {
                text-align: center;
            }
            .box-center .loader.bottom {
                border-top: 1px dashed #ddd;
                margin-top: 20px;
                padding-top: 20px;
            }
        </style>
    </head>
    <body>

        <div class="box-center">
            <div class="title"><h1>Nama negara dan kodenya</h1></div>

            <div class="hasil_load"></div>
            <div class="hasilPesan"></div>
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() 
            {
                let startData     = <?=$startData?>;
                let loadMore      = true;
                const hasilLoad   = $('.hasil_load');
                const hasilPesan  = $('.hasilPesan');
                const limitData   = <?=$limitData?>;
                const imgLoader   = '<img src="<?=base_url('loader.svg')?>" alt="Loader" width="40" height="40" />';

                hasilPesan.html(`
                    <div class="loader">
                        ${imgLoader}
                    </div>
                `);

                const LoadMore    = (limit, start) =>
                {
                    $.ajax({
                        url: '<?=base_url('/loadmore/data')?>',
                        method: 'POST',
                        data: {startData: start, limitData: limit},
                        success: (data) =>
                        {
                            const err       = data.err;
                            const countries = data.countries;

                            if (err !== null)
                            {
                                hasilPesan.html(`<br/>${err}`);

                                if (Array.isArray(countries) && countries.length == 0)
                                    setTimeout(() => {
                                        hasilPesan.html(null);
                                    }, 4000);

                                loadMore = false;
                            }
                            else
                            {
                                $.each(countries, (key, val) => 
                                {
                                    hasilLoad.append(`
                                        <b>Negara</b>: ${val.name}<br/>
                                        <b>Kode</b>: ${val.code}<br/><br/>
                                    `); 
                                });

                                loadMore = true;
                                hasilPesan.html(null);
                            }
                        }
                    });
                }

                if (loadMore)
                {
                    loadMore = false;

                    setTimeout(() =>
                    {
                        LoadMore(limitData, startData);
                    }, 800);
                }

                $(window).scroll(function()
                {
                    if ($(window).scrollTop() + $(window).height() > $(".hasil_load").height() && loadMore)
                    {
                        loadMore = false;
                        startData = startData + limitData;
                        
                        setTimeout(() =>
                        {
                            LoadMore(limitData, startData);
                        }, 800);

                        
                        hasilPesan.html(`
                            <div class="loader bottom">
                                ${imgLoader}
                            </div>
                        `);
                    }
                });
            });
        </script>
    </body>
</html>


10. Tahap akhir, kalian bisa menjalankan CodeIgniter4 nya dengan cara:

php spark serve


Dan buka urlnya (Contoh: http://localhost:8080/loadmore). Setelah itu coba kalian scroll hingga paling bawah, dan data akan terload secara otomatis.


Maka hasilnya akan seperti ini:


Nah itu dia cara membuat auto load more data ketika halaman discroll menggunakan Ajax dan CodeIgniter4. Kalian bisa mengunduh file lengkapnya melalui github saya yang ada di bawah ini:

https://github.com/andspdev/auto-loadmore-ci4

Mungkin sampai disini saja artikel tutorial dari saya. Semoga artikel yang saya berikan ini dapat bermanfaat bagi kalian semua. Jika saya ada salah kata atau salah pengetikkan saya mohon maaf. Sekian, dan terima kasih.

Selamat Mencoba!

Previous Post Next Post