PHP Codeigniter – Muat lebih banyak data pada scroll halaman menggunakan jQuery dan Ajax

0
Dalam tutorial PHP Codeigniter ini, saya akan memberi tahu Anda cara menerapkan memuat lebih banyak fitur atau Anda dapat mengatakan gulir tak terbatas di aplikasi Codeignite.

Dalam pengembangan web, Terkadang kita perlu menampilkan nomor halaman dengan link navigasi untuk pagination untuk memuat catatan halaman dan terkadang kita perlu memuat data saat menggulir halaman tanpa menyegarkan seluruh halaman.

Infinite Scroll adalah fitur paling ramah pengguna untuk menambahkan pagination dalam daftar data.

Gulir pagination tak terbatas menggantikan UI pagination lama (pagination konvensional) karena ketika pengguna mengklik nomor halaman dan menavigasi ke halaman berikutnya maka itu memuat ulang semua elemen lagi di halaman dan ini menghabiskan bandwidth terutama ketika pengguna menjelajahi sesuatu di ponsel dengan terbatas paket data.

Saya akan berasumsi bahwa Anda telah mendownload Codeigniter 3 versi baru untuk menguji contoh ini.

Langkah 1: Konfigurasi database

Pada langkah pertama, saya akan membuat database baru untuk contoh ini yang disebut tutorial dan membuat postingan tabel baru di database tutorial ini.

CREATE TABLE `posts` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `title` varchar(255) NOT NULL,
 `description` text NOT NULL,
 `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
 `updated_at` timestamp NULL DEFAULT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1

Sekarang saya harus memodifikasi file konfigurasi database dengan detail terbaru di aplikasi Codeigniter. application/config/database.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');


$active_group = 'default';
$query_builder = TRUE;


$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => '',
	'database' => 'tutorials',
	'dbdriver' => 'mysqli',
	'dbprefix' => '',
	'pconnect' => FALSE,
	'db_debug' => (ENVIRONMENT !== 'production'),
	'cache_on' => FALSE,
	'cachedir' => '',
	'char_set' => 'utf8',
	'dbcollat' => 'utf8_general_ci',
	'swap_pre' => '',
	'encrypt' => FALSE,
	'compress' => FALSE,
	'stricton' => FALSE,
	'failover' => array(),
	'save_queries' => TRUE
);

Langkah 2: Tambahkan Route

Pada langkah ini, saya akan menambahkan satu rute di file rute untuk mengelola gulir tak terbatas pada daftar data.application/config/routes.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');


$route['default_controller'] = 'welcome';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;


$route['post'] = 'PostController';

Langkah 3: Buat Controller

Pada langkah ini, saya akan membuat sebuah controller “PostController” untuk mengatur data post dengan metode index.application/controllers/PostController.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class PostController extends CI_Controller {


  private $perPage = 10;
	
    public function index()
    {
     $this->load->database();
     $count = $this->db->get('posts')->num_rows();


     if(!empty($this->input->get("page"))){


      $start = $this->input->get("page") * $this->perPage;
      $query = $this->db->limit($start, $this->perPage)->get("posts");
      $data['posts'] = $query->result();
      $data['count']=$count;

      $result = $this->load->view('ajax_post', $data);
      echo json_encode($result);

     }else{
      $query = $this->db->limit($this->perPage,0)->get("posts");
      $data['posts'] = $query->result();
      $data['count']=$count;

	  $this->load->view('post', $data);
     }
    }


}

Langkah 4: Buat File views

Pada langkah ini, saya akan membuat dua file di sini, yang pertama untuk tampilan pemuatan halaman normal dengan kueri ajax dan satu lagi untuk tampilan pemuatan halaman ajax..application/views/post.php

<!DOCTYPE html>
<html>
<head>
	<title>PHP Codeigniter load more data on page scroll</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<div class="container">
	<h2 class="text-center">PHP Codeigniter 3 - load more data with infinite scroll pagination</h2>
	<br/>
	<div class="col-md-12" id="ajax-post-container">
		<?php
		  $this->load->view('ajax_post', $posts);
		?>
	</div>
</div>


<div class="loader" style="display:none">
	<img src="<?php print base_url('loader.gif')?>">
</div>


<script type="text/javascript">
	var page = 1;
	var total_pages = <?php print $count?>;
 
	$(window).scroll(function() {
	    if($(window).scrollTop() + $(window).height() >= $(document).height()) {
	        page++;
	        if(page < total_pages) {
	        	loadMore(page);
	        }
	    }
	});


	function loadMore(page){
	  $.ajax(
	        {
	            url: '?page=' + page,
	            type: "GET",
	            beforeSend: function()
	            {
	                $('.loader').show();
	            }
	        })
	        .done(function(data)
	        {	           
	            $('.loader').hide();
	            $("#ajax-post-container").append(data);
	        });
	}
</script>


</body>
</html>

application/views/ajax_post.php

<?php foreach($posts as $post){ ?>
<div>
	<h3><a href=""><?php echo $post->title ?></a></h3>
	<p><?php echo $post->description ?></p>	
</div>
<?php } ?>

LEAVE A REPLY

Please enter your comment!
Please enter your name here