Dalam contoh ini, kita akan mempelajari bagaimana menerapkan contoh infinite scroll dalam aplikasi codeigniter kita.
Infinite Scroll adalah fitur luar biasa jika Anda memiliki halaman berita terakhir, halaman posting atau halaman listing mana pun yang kami tidak perlu memuat lebih banyak catatan pada waktu dan tidak perlu memuat halaman setiap saat. kadang-kadang kita perlu menggunakan scroll tak terbatas dalam proyek atau aplikasi kita. Jadi dalam posting ini kita belajar bagaimana membuat contoh scroll yang tak terbatas dari awal.
Saya juga menyediakan demo untuk contoh scroll yang tak terbatas, sehingga Anda dapat melihatnya di sana. Dalam contoh ini kita akan membuat tabel "posting" dan Anda harus menambahkan beberapa data dummy secara manual. Setelah berhasil menjalankan contoh ini Anda dapat melihat tata letak seperti di bawah ini:
Langkah 1: Unduh Fresh Codeigniter 3
Pada langkah pertama, kami akan mengunduh versi baru Codeigniter 3, jadi jika Anda belum mengunduh, unduh dari sini: Unduh Codeigniter 3 .
Langkah 2: Buat Database dan Konfigurasi
Pada langkah ini kita akan membuat "test" database baru dan menambahkan "posting" tabel baru dalam database uji. Anda dapat menggunakan SQL Query berikut untuk membuat tabel "posting". Jadi mari kita buat menggunakan query sql di bawah ini:
tabel items:
CREATE TABLE IF NOT EXISTS `posts` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
`description` text COLLATE utf8_unicode_ci NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=16 ;Setelah berhasil membuat database dan tabel, kita harus melakukan konfigurasi database dalam aplikasi Codeigniter 3 kita, jadi buka file database.php dan tambahkan nama database, nama user, dan kata sandi Anda.
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' => 'root',
'database' => 'test',
'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 3: Tambahkan Route
Pada langkah ini Anda harus menambahkan satu route dalam file route kami. Kami akan mengelola contoh Infinite Scroll pada route tunggal menggunakan jquery, jadi mari kita letakkan route sebagai kode di bawah ini:
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['my-post'] = 'AjaxController';Langkah 4: Buat Controller
Ok, sekarang pertama kita harus membuat satu kontroler AjaxController baru dengan metode indeks. jadi buat file AjaxController.php di path application/controllers/AjaxController.php dan letakkan kode di bawah ini di file ini:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class AjaxController extends CI_Controller {
private $perPage = 5;
/**
* Get All Data from this method.
*
* @return Response
*/
public function index()
{
$this->load->database();
$count = $this->db->get('posts')->num_rows();
if(!empty($this->input->get("page"))){
$start = ceil($this->input->get("page") * $this->perPage);
$query = $this->db->limit($start, $this->perPage)->get("posts");
$data['posts'] = $query->result();
$result = $this->load->view('data', $data);
echo json_encode($result);
}else{
$query = $this->db->limit(5, $this->perPage)->get("posts");
$data['posts'] = $query->result();
$this->load->view('myPost', $data);
}
}
}Step 5: Buat View Files
Pada langkah ini, kita akan membuat dua file view seperti yang tercantum di bawah ini:
myPost.php: Dalam file ini, kami akan menampilkan tata letak dengan jquery ajax infinite.
data.php: Dalam file ini, kami mengelola data tabel entri untuk setiap laporan, jadi kami hanya perlu mengelola data posting di sini.
application/views/myPost.php
<!DOCTYPE html>
<html>
<head>
<title>Codeigniter infinite scroll pagination</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style type="text/css">
.ajax-load{
background: #e1e1e1;
padding: 10px 0px;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<h2 class="text-center">Codeigniter infinite scroll pagination</h2>
<br/>
<div class="col-md-12" id="post-data">
<?php
$this->load->view('data', $posts);
?>
</div>
</div>
<div class="ajax-load text-center" style="display:none">
<p><img src="https://i.imgur.com/kKucTiA.gifv">Loading More post</p>
</div>
<script type="text/javascript">
var page = 1;
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >= $(document).height()) {
page++;
loadMoreData(page);
}
});
function loadMoreData(page){
$.ajax(
{
url: '?page=' + page,
type: "get",
beforeSend: function()
{
$('.ajax-load').show();
}
})
.done(function(data)
{
if(data == " "){
$('.ajax-load').html("No more records found");
return;
}
$('.ajax-load').hide();
$("#post-data").append(data);
})
.fail(function(jqXHR, ajaxOptions, thrownError)
{
alert('server not responding...');
});
}
</script>
</body>
</html>application/views/data.php
<?php foreach($posts as $post){ ?>
<div>
<h3><a href=""><?php echo $post->title ?></a></h3>
<p><?php echo $post->description ?></p>
<div class="text-right">
<button class="btn btn-success">Read More</button>
</div>
<hr style="margin-top:5px;">
</div>
<?php } ?>Oke, sekarang kita siap untuk menjalankan contoh Infinite Scroll kami. Pastikan Anda memiliki beberapa dat dummy di tabel posting. Jadi mari kita jalankan perintah di bawah ini pada direktori root Anda untuk menjalankan cepat:
php -S localhost:8000Sekarang Anda dapat membuka URL di bawah ini di browser Anda:
http://localhost:8000/my-post
andriajah