Buat pagination dan cari php

Laravel Pagination adalah salah satu fitur website yang sangat berguna untuk menampilkan data dalam jumlah besar. Dengan menggunakan Pagination, pengguna halaman web akan lebih cepat mendapatkan data karena ditampilkan per bagian dan dapat lebih fokus membaca data yang ditampilkan

Pagination berguna untuk membuat penomoran halaman, misalkan kita memiliki data sebanyak 200 atau bahkan ribuan data, ketika data tersebut muncul di website atau aplikasi yang kita buat pasti akan terlalu lama down

Pagination adalah fitur web yang digunakan untuk membatasi tampilan data agar tidak terlalu panjang dan lebih rapi. Penggunaan pagination banyak digunakan untuk menampilkan data dalam jumlah besar, sehingga dapat dipisahkan/dipilih berapa data yang akan ditampilkan terlebih dahulu sesuai dengan urutan dan kriteria pencarian tertentu.

Membuat pagination seringkali merepotkan dalam web development, terutama mereka yang membangun websitenya tanpa menggunakan web development framework. Ada banyak proses manual yang harus dilakukan, dan melibatkan penggunaan HTML, CSS, PHP, dan JavaScript

Framework Laravel telah menyediakan fitur-fitur yang memungkinkan developer website yang menggunakan framework ini dengan mudah membuat pagination dalam menampilkan data di website mereka. Laravel menyediakan berbagai pilihan untuk membuat pagination, kemudian tampilan dapat dipercantik dengan menggunakan library css misalnya dengan menggunakan bootstrap

Sebelum masuk ke tutorial tentang pagination mari kita siapkan terlebih dahulu project yang akan kita gunakan. Disini saya menggunakan project yang sudah pernah digunakan sebelumnya bernama 'latihan_laravel', jika belum ada project silahkan buat project terlebih dahulu. Cara membuat project di Laravel bisa dibaca di Cara Install Laravel 8 di Windows

Membuat Paginasi Di Laravel

Disini kita akan membuat contoh dengan menampilkan data dari database, setelah itu kita akan belajar membuat pagination dengan laravel. Untuk tutorial menampilkan data dari database dengan Laravel sudah dijelaskan sebelumnya pada tutorial Laravel CRUD dengan Query Builder

Sekarang mari kita buat terlebih dahulu database dan tabel yang datanya akan kita tampilkan dengan pagination, disini saya sudah menyiapkan database dengan nama 'datasekolah' dan tabel guru lengkap dengan data guru yang cukup banyak

Jika sudah membaca tutorial laravel sebelumnya pasti sudah memiliki database 'data sekolah' dan tabel guru, karena pada tutorial sebelumnya kita sudah menggunakan database dan tabel ini. Atau silahkan impor. berikut sql biar lebih cepat jika tidak ada database 'data sekolah' dan tabel guru. Buat database dengan nama 'datasekolah' dan impor. sql berikut ke database 'datasekolah'

guru. sql

-- phpMyAdmin SQL Dump
-- version 5.0.2
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Waktu pembuatan: 25 Apr 2021 pada 17.56
-- Versi server: 10.4.13-MariaDB
-- Versi PHP: 7.4.8

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `datasekolah`
--

-- --------------------------------------------------------

--
-- Struktur dari tabel `guru`
--

CREATE TABLE `guru` (
  `id` int(10) UNSIGNED NOT NULL,
  `nip` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `nama` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `alamat` text COLLATE utf8mb4_unicode_ci NOT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
  `deleted_at` datetime DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Dumping data untuk tabel `guru`
--

INSERT INTO `guru` (`id`, `nip`, `nama`, `alamat`, `created_at`, `updated_at`, `deleted_at`) VALUES
(2034, '1', 'Tri Jail Gunarto', 'Jr. Kiaracondong No. 675, Malang 53847, Sulbar', NULL, NULL, NULL),
(2035, '2', 'Harimurti Daryani Saragih S.Farm', 'Gg. Bacang No. 938, Makassar 46195, Riau', NULL, NULL, NULL),
(2036, '2', 'Setya Iswahyudi', 'Ds. Tubagus Ismail No. 881, Pematangsiantar 14539, DIY', NULL, NULL, NULL),
(2037, '0', 'Soleh Harjo Anggriawan', 'Ds. Astana Anyar No. 320, Ternate 94375, Kaltim', NULL, NULL, NULL),
(2038, '1', 'Nabila Widiastuti', 'Ds. Yap Tjwan Bing No. 574, Kupang 80151, Jatim', NULL, NULL, NULL),
(2039, '0', 'Yahya Pradana', 'Gg. W.R. Supratman No. 685, Pematangsiantar 41877, Aceh', NULL, NULL, NULL),
(2040, '1', 'Rina Tira Fujiati S.Ked', 'Psr. Halim No. 833, Cirebon 73668, Jateng', NULL, NULL, NULL),
(2041, '7', 'Baktianto Santoso', 'Ds. Hang No. 836, Ternate 13470, Jatim', NULL, NULL, NULL),
(2042, '8', 'Oliva Olivia Wijayanti M.Kom.', 'Ds. Yoga No. 721, Sungai Penuh 45667, Kaltara', NULL, NULL, NULL),
(2043, '0', 'Ilyas Sitompul', 'Kpg. Baha No. 133, Jayapura 96086, Jatim', NULL, NULL, NULL),
(2044, '6', 'Unjani Devi Nurdiyanti M.Farm', 'Dk. Yos No. 713, Denpasar 51212, Jateng', NULL, NULL, NULL),
(2045, '8', 'Fitriani Astuti S.Pt', 'Jr. Bambu No. 517, Prabumulih 11701, Sumsel', NULL, NULL, NULL),
(2046, '3', 'Septi Maryati M.TI.', 'Jln. Dewi Sartika No. 132, Payakumbuh 83806, Jatim', NULL, NULL, NULL),
(2047, '6', 'Atmaja Habibi', 'Jr. Sumpah Pemuda No. 604, Dumai 94891, Kalsel', NULL, NULL, NULL),
(2048, '5', 'Bakti Sihombing', 'Jln. Ketandan No. 392, Bandung 38630, Sulsel', NULL, NULL, NULL),
(2049, '3', 'Dalima Widiastuti S.T.', 'Jr. Reksoninten No. 620, Singkawang 84181, Kaltara', NULL, NULL, NULL),
(2050, '3', 'Darimin Prakasa', 'Gg. Dewi Sartika No. 228, Tasikmalaya 12210, Sulut', NULL, NULL, NULL),
(2051, '0', 'Karen Hartati', 'Jr. Bagas Pati No. 674, Tanjung Pinang 89483, Aceh', NULL, NULL, NULL),
(2052, '1', 'Nugraha Opung Hutasoit S.Ked', 'Kpg. Ciumbuleuit No. 757, Pontianak 82224, Banten', NULL, NULL, NULL),
(2053, '6', 'Banawi Luwes Halim', 'Psr. Sukajadi No. 216, Bekasi 57155, Jabar', NULL, NULL, NULL);

--
-- Indexes for dumped tables
--

--
-- Indeks untuk tabel `guru`
--
ALTER TABLE `guru`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT untuk tabel yang dibuang
--

--
-- AUTO_INCREMENT untuk tabel `guru`
--
ALTER TABLE `guru`
  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2054;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Setelah database siap, kemudian buka file tersebut. env yang ada di directory di laravel project, di file ini kita akan melakukan setting koneksi database laravel

Baca Juga   Tutorial PHP. #14 Foreach di PHP

kira-kira

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=loginlaravel
DB_USERNAME=root
DB_PASSWORD=

Harap cocokkan nama database, nama pengguna, dan kata sandi mysql yang dibuat di file. lingkungan

Jika ingin input data testing dengan cepat, kita bisa menggunakan Seeding dan Faker di Laravel, silahkan baca lagi tutorial Seeding dan Faker di Laravel. Selanjutnya kita akan menampilkan data guru ini, kita buat route '/guru' pada project 'latihan_laravel'

training_laravel/routes/web. php

Route::get('/guru','GuruController@index');

Di sini kita mengatur rute '/guru' untuk mengakses metode indeks di pengontrol GuruController. Selanjutnya, buat pengontrol GuruController dan metode indeks jika ada di GuruController. php. Jika Anda belum paham tentang controller, silahkan baca kembali tutorial membuat controller dengan Laravel

training_laravel/app/Http/controllers/GuruController. php

<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Illuminate\Support\Facades\DB;

class PegawaiController extends Controller
{
    public function index()
    {
        // mengambil data dari table guru
        $gurup = DB::table('guru')->paginate(10);
        
        // mengirim data guru ke view index
        return view('index',['guru' => $guru]);
    }
}

Coba diperhatikan, karena kita akan bermain dengan database, kita harus mengaktifkannya terlebih dahulu dengan menuliskan sintaksnya

use Illuminate\Support\Facades\DB;

kemudian pada metode indeks kita mengambil data dari tabel karyawan dan meneruskannya ke tampilan indeks

public function index()
{
    // mengambil data dari table guru
    $gurup = DB::table('guru')->paginate(10);
    
    // mengirim data guru ke view index
    return view('index',['guru' => $guru]);
}

Coba perhatikan query buildernya, saat kita belajar menampilkan data dari database, urutan yang kita gunakan adalah

$guru = DB::table('guru')->get();

Fungsi ->get() bertujuan untuk mengambil semua data, sedangkan untuk membuat pagination kita cukup menggunakan fungsi ->paginate(10). Angka 10 untuk menentukan pagination yang setiap halaman akan menampilkan 10 baris data dan terakhir data tersebut kita pass ke view index

// mengirim data guru ke view index
return view('index',['guru' => $guru]);

Sekarang kita membuat tampilan, yaitu tampilan indeks. Pedang. php

Baca Juga   Membuat Aplikasi Library Berbasis Web dengan PHP dan Bootstrap

training_laravel/resources/views/index. Pedang. php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
        <title>Tutorial Membuat Pagination Pada Laravel</title>
    </head>
    
    <body>
        <div class="container">
            <div class="card mt-5">
                <div class="card-header text-center">
                    <h2><a href="https://www.agussuratna.net">www.agussuratna.net</a></h2>
                    Data Guru
                </div>

                                
                <div class="card-body">
                    <br/>
                    
                    <table class="table table-bordered table-hover table-striped">
                        <thead>
                            <tr>
                                <th>NIP</th>
                                <th>Nama</th>
                                <th>Alamat</th>
                            </tr>
                        </thead>
                        
                        <tbody>
                            @foreach($guru as $g)
                            <tr>
                                <td>{{ $g->nip }}</td>
                                <td>{{ $g->nama }}</td>
                                <td>{{ $g->alamat }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>

                    <br/>
                    Halaman : {{ $guru->currentPage() }} <br/>
                    Jumlah Data : {{ $guru->total() }} <br/>
                    Data Per Halaman : {{ $guru->perPage() }} <br/>
                    {{ $guru->links() }}
                </div>
            </div>
        </div>
    </body>
</html>

Perhatikan sintaks di atas, kita tampilkan data seperti yang sudah dibahas pada tutorial sebelumnya tentang pembuatan CRUD di Laravel

<table class="table table-bordered table-hover table-striped">
    <thead>
        <tr>
            <th>NIP</th>
            <th>Nama</th>
            <th>Alamat</th>
        </tr>
    </thead>
    
    <tbody>
        @foreach($guru as $g)
        <tr>
            <td>{{ $g->nip }}</td>
            <td>{{ $g->nama }}</td>
            <td>{{ $g->alamat }}</td>
        </tr>
        @endforeach
    </tbody>
</table>

Perbedaannya disini adalah kita menggunakan fungsi links() untuk membuat link bernomor

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=loginlaravel
DB_USERNAME=root
DB_PASSWORD=

dan kami dapat menampilkan status detail data dengan fungsi berikut

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=loginlaravel
DB_USERNAME=root
DB_PASSWORD=

Karena pada halaman index. Pedang. php di atas kita menggunakan Bootstrap, jadi kita harus menambahkan beberapa sintaks ke file di folder 'app/Providers/RouteServiceProvider'. php‘, dengan menambahkan import use Illuminate\Pagination\Paginator; . gunakanBootstrap(); . Sampai sintak lengkapnya seperti ini

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=loginlaravel
DB_USERNAME=root
DB_PASSWORD=

Coba kita lihat hasilnya, jalankan project kita dan akses route '/guru' dengan alamat 'localhost'. 8000/guru'. Pagination sudah berhasil dibuat dengan laravel, kita coba klik di halaman lain

Sampai disini tutorial Membuat Pagination di Laravel sudah selesai, intinya kita hanya menggunakan fungsi paginate() dan membuat link dengan fungsi links()

Melakukan Pencarian Di Laravel

Form pencarian yang akan kita buat adalah form pencarian data guru yang sudah kita buat pada tutorial sebelumnya. Silahkan ikuti tutorial sebelumnya agar penjelasan cara melakukan pencarian di laravel lebih mudah kita pahami

Baca Juga   Tutorial PHP. #26 Membuat Paging Dengan HTML, PHP, dan MySQL

Pada tutorial kali ini kita sudah memiliki database dengan nama 'dataschool' dan tabel dengan nama 'teacher'. Untuk mencari menggunakan Laravel, kita membutuhkan 2 rute dan 2 metode. 1 route untuk menampilkan data guru secara default (tanpa pencarian) yaitu Route. get('/teacher','GuruController@index'); . get('/teacher/search','GuruController@search');. Sampai rute di file web. php menjadi seperti ini

training_laravel/routes/web. php

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=loginlaravel
DB_USERNAME=root
DB_PASSWORD=

Perhatikan rutenya

Route::get('/guru','GuruController@index');

Kami akan menampilkan semua data guru dengan membuat formulir pencarian pada metode indeks dan pada rute

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=loginlaravel
DB_USERNAME=root
DB_PASSWORD=

Kita akan menjadikan metode pencarian sebagai metode yang menangani data pencarian yang dikirim dari formulir pencarian yang dikirim dari metode indeks

Sekarang kami membuat metode pencarian di pengontrol GuruController. php yang telah kita buat

training_laravel/app/Http/controllers/GuruController. php

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=loginlaravel
DB_USERNAME=root
DB_PASSWORD=

Pada pengontrol GuruController. php memiliki 2 metode yang akan kita gunakan yaitu metode yang akan menampilkan data guru yang belum diolah dan metode pencarian yang melakukan proses pencarian data dan menampilkan kembali data tersebut

Pada tampilan index yang telah kita buat pada latihan pagination, kita menambahkan text field dan tombol search, sehingga sintaksnya ada di index. Pedang. php menjadi sebagai berikut

training_laravel/resources/views/index. Pedang. php

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=loginlaravel
DB_USERNAME=root
DB_PASSWORD=

Dalam tampilan indeks ini kami membuat formulir untuk pencarian data

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=loginlaravel
DB_USERNAME=root
DB_PASSWORD=

Kemudian perhatikan metode pencarian pada pengontrol GuruController. php

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=loginlaravel
DB_USERNAME=root
DB_PASSWORD=

Pada metode pencarian ini, kami meng-capture data yang dikirim dari form pencarian, kemudian data yang ada di tabel guru kami cari dengan menggunakan fungsi like untuk mencari data yang mirip dengan data yang diinputkan di form pencarian, dan terakhir kami menampilkan data tersebut kembali ke indeks tampilan. Pedang. php

Sekarang kita lihat hasilnya dengan mengakses proyek kita ke alamat localhost. 8000/guru

Itulah tutorial cara membuat search form di Laravel atau searching Laravel, semoga bermanfaat