~ We are changing the world with technology. ~

Matt Mullenweg

Mudahnya Membuat Pagination di Laravel

Mudahnya Membuat Pagination di Laravel

15816 Dilihat

Setelah menjalani libur panjang pasca lebaran akhirnya kembali lagi kerutinitas seperti biasanya, dan tentunya tidak boleh ketinggalan untuk berbagi cara pdkt dengan laravel biar makin cinta. *eh. Karena pada artikel sebelumnya kita sempat menyinggung perihal cara menampilkan data dari database ke view di laravel (belum baca yah ? Cek deh artikel Cara Menyimpan ke Database di Laravel 5.4), maka sekalian aja kali ini kita buatkan fitur paginationnya. Tahu kan pagination itu apa ? Itu loh, simplenya membuat page untuk data yang akan kita tampilkan dengan jumlah data sesuai dengan yang kita inginkan. Kebayang kan kalau jumlah datanya ada banyak pake banget, kemudian di load sekaligus pasti efeknya membutuhkan waktu untuk meload semua datanya.

Membuat Pagination

Langsung saja yah, saya rasa sudah paham maksud dari artikel ini. Pertama ubah method index pada PostController.php seperti ini :

public function add()
{
    $post = Post::paginate(10);
    return view('post.add', compact('post'));
}

Dapat PostController.php dari mana ? Baca artikel sebelumnya yah karena saya nulisnya bersambung ala sinetron. Baik, kita lanjutkan. Dapat anda lihat, kita hanya mengubah satu baris saja, jadi model Post Eloquent menggunakan paginate method. Paginate method sendiri sangat powerful karena dibelakang layar menangani semua meta data yang dibutuhkan untuk proses pagination, termasuk pengelompokan data yang dihasilkan, membuat current page lalu memasukkan data lainnya sesuai permintaan yang akan ditampilkan.

Kemudian pada view post/add.blade.php, juga sangat mudah karena hanya menambahkan satu baris lagi :

{{ $post->links() }}

syntax diatas ditempatkan dimana ? Sesuai keinginan anda dalam menentukan posisi pagination untuk ditampilkan. Tapi pada case kali ini, saya menginginkan berada tepat dibawah table data. Sehingga code lengkap untuk view post/add.blade.php akan tampak seperti ini :

@extends('layouts.app')

@section('content')
	<div class="container">
		<div class="row">
			<div class="col-md-6">
				<div class="panel panel-danger">
					<div class="panel-heading">
						<h3 class="panel-title">Form Input Data</h3>
					</div>
					<div class="panel-body">
						<form role="form" method="POST" action="{{ route('post.save') }}">
					    {{ csrf_field() }}
					    	<div class="form-group">
					    		<label>Title</label>
					    		<input type="text" name="title" class="form-control" required="">
					    	</div>
					    	<div class="form-group">
					    		<button type="submit" class="btn btn-danger btn-sm">Kirim</button>
					    	</div>
					    </form>
					</div>
				</div>
			</div>

			<div class="col-md-6">
				<div class="panel panel-danger">
					<div class="panel-heading">
						<h3 class="panel-title">Post Data</h3>
					</div>
					<div class="panel-body">
						<div class="table-responsive">
							<table class="table table-hover">
								<thead>
									<tr>
										<th>Title</th>
									</tr>
								</thead>
								<tbody>
									@if ($post->count() > 0)
									@foreach ($post as $posts)
									<tr>
										<td>{{ $posts->title }}</td>
									</tr>
									@endforeach
									@else
									<tr>
										<td>Tidak ada data</td>
									</tr>
									@endif
								</tbody>
							</table>
							{{ $post->links() }}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
@endsection

Tampilannya akan terlihat seperti ini (crop image berfokus ke bagian yang terdapat pagination)

Sesuai judul artikel ini, mudah bukan ? Jika anda ingin menempatkannya di sebelah kanan, cukup tambahkan div dengan class bootstrap pull-right.

FullStack Developer, Mobile Developer & Freelancer. Senang dengan teknologi baru. Laravel addict yang tidak fanatik. Merekam jejak dengan menulis

Aplikasi Booking Online Laravel 9 & Livewire #4: Dashboard Admin Page Laravel

Aplikasi Booking Online Laravel 9 & Live...

Klinik memiliki akses penuh dalam mengelola data Pasien, maka melalui artikel ini kita akan membuat 3 buah fitur, yakni: fitur Authentication menggunakan Laravel Jetstream, Kelola data Pasien dan Kelo...

Aplikasi Booking Online Laravel 9 & Livewire #3: Livewire Component & Sistem Antrian Laravel

Aplikasi Booking Online Laravel 9 & Live...

Fitur Janji Temu atau Appointment telah dibuat, berdasarkan data tersebut, kita akan mengolahnya menjadi antrian online. Data akan dikelompokkan dan diurutkan sesuai urutan pasien yang lebih dahulu me...

Aplikasi Booking Online Laravel 9 & Livewire #2: Blade Templating & Appointment Laravel

Aplikasi Booking Online Laravel 9 & Live...

Seri ke-dua dari belajar membuat Aplikasi Booking Online menggunakan Laravel 9 & Livewire adalah bagaimana memadukan Blade templating dan Livewire. Kita juga akan belajar bagaiman setup dengan Livewir...

Komentar