Laravel Pagination merupakan salah satu fitur dari situs web yang sangat berguna untuk menampilkan data yang jumlahnya sangat banyak. Dengan menggunakan Pagination maka pengguna halaman web akan mendapatkan data dengan lebih cepat karena ditampilkan per bagian dan dapat lebih fokus dalam membaca data yang ditampilkan.
Pagination berguna untuk membuat penomoran halaman, misalnya kita memiliki data sebanyak 200 bahkan ribuan data, saat data tersebut tampil pada website atau aplikasi yang kita buat pasti akan terlalu panjang ke bawah.
Pagination merupakan sebuah fitur web yang digunakan untuk membatasi tampilan data agar tidak terlalu panjang dan lebih rapi. Penggunaan pagination banyak digunakan untuk menampilkan data dalam jumlah banyak, sehingga dapat dipisah/dipilih berapa data yang akan ditampilkan terlebih dahulu sesuai dengan urutan dan kriteria pencarian tertentu.
Pembuatan pagination seringkali merepotkan dalam pengembangan web, terutama yang membangun situs webnya tanpa menggunakan framework web development. Banyak sekali proses manual yang harus dilakukan, serta melibatkan penggunaan HTML, CSS, PHP, dan JavaScript.
Framework Laravel telah menyediakan fitur yang memungkinkan pengembang situs web yang menggunakan framework ini dapat dengan mudah membuat pagination dalam menampilkan data di situs webnya. Laravel memberikan berbagai opsi untuk membuat pagination, kemudian tampilan dapat dipercantik dengan menggunakan library CSS misalnya dengan menggunakan Bootstrap.
Sebelum masuk ke tutorial tentang pagination, kita siapkan dulu project yang akan kita gunakan. Di sini saya menggunakan project yang sudah dipakai sebelumnya yang bernama ‘crudlaraveleloquent‘, jika belum ada projectnya silahkan buat dulu project tersebut. Cara membuat project di Laravel bisa dibaca di Cara Install Laravel 11 di Windows .
Membuat Pagination Pada Laravel
Di sini 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 CRUD Laravel dengan Query Builder dan CRUD Laravel Menggunakan Eloquent .
Jika sudah ada database beserta table yang dibutuhkan, gunakan saja database tersebut. Jika belum ada silahkan buat dulu dulu database dan tabel yang datanya akan kita tampilkan dengan pagination, si sini saya sudah menyiapkan sebuah database dengan nama ‘crudlaraveleloquent’ dan sebuah tabel tbl_guru lengkap dengan data guru yang lumayan banyak.
Jika sudah membaca membaca tutorial laravel sebelumnya, pasti kita sudah mempunyai database ‘crudlaraveleloquent’ dan tabel tbl_guru tersebut, karena pada tutorial-tutorial sebelumnya kita telah menggunakan database dan tabel ini. Atau silahkan bisa import .sql berikut supaya lebih cepat jika belum punya database ‘crudlaraveleloquent’ dan tabel tbl_guru tersebut. Buat database dengan nama ‘crudlaraveleloquent’ dan import .sql berikut ke database ‘crudlaraveleloquent’ atau jika sudah membuat migration pada tutorial sebelumnya, gunakan saja dengan migration.
crudlaraveleloquent.sql :
-- phpMyAdmin SQL Dump
-- version 5.2.1
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Feb 01, 2025 at 09:05 AM
-- Server version: 10.4.32-MariaDB
-- PHP Version: 8.2.12
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: `crudlaraveleloquent`
--
-- --------------------------------------------------------
--
-- Table structure for table `cache`
--
CREATE TABLE `cache` (
`key` varchar(255) NOT NULL,
`value` mediumtext NOT NULL,
`expiration` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
-- --------------------------------------------------------
--
-- Table structure for table `cache_locks`
--
CREATE TABLE `cache_locks` (
`key` varchar(255) NOT NULL,
`owner` varchar(255) NOT NULL,
`expiration` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
-- --------------------------------------------------------
--
-- Table structure for table `failed_jobs`
--
CREATE TABLE `failed_jobs` (
`id` bigint(20) UNSIGNED NOT NULL,
`uuid` varchar(255) NOT NULL,
`connection` text NOT NULL,
`queue` text NOT NULL,
`payload` longtext NOT NULL,
`exception` longtext NOT NULL,
`failed_at` timestamp NOT NULL DEFAULT current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
-- --------------------------------------------------------
--
-- Table structure for table `jobs`
--
CREATE TABLE `jobs` (
`id` bigint(20) UNSIGNED NOT NULL,
`queue` varchar(255) NOT NULL,
`payload` longtext NOT NULL,
`attempts` tinyint(3) UNSIGNED NOT NULL,
`reserved_at` int(10) UNSIGNED DEFAULT NULL,
`available_at` int(10) UNSIGNED NOT NULL,
`created_at` int(10) UNSIGNED NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
-- --------------------------------------------------------
--
-- Table structure for table `job_batches`
--
CREATE TABLE `job_batches` (
`id` varchar(255) NOT NULL,
`name` varchar(255) NOT NULL,
`total_jobs` int(11) NOT NULL,
`pending_jobs` int(11) NOT NULL,
`failed_jobs` int(11) NOT NULL,
`failed_job_ids` longtext NOT NULL,
`options` mediumtext DEFAULT NULL,
`cancelled_at` int(11) DEFAULT NULL,
`created_at` int(11) NOT NULL,
`finished_at` int(11) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
-- --------------------------------------------------------
--
-- Table structure for table `migrations`
--
CREATE TABLE `migrations` (
`id` int(10) UNSIGNED NOT NULL,
`migration` varchar(255) NOT NULL,
`batch` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
--
-- Dumping data for table `migrations`
--
INSERT INTO `migrations` (`id`, `migration`, `batch`) VALUES
(1, '0001_01_01_000000_create_users_table', 1),
(2, '0001_01_01_000001_create_cache_table', 1),
(3, '0001_01_01_000002_create_jobs_table', 1),
(4, '2025_01_29_053527_create_guru_models_table', 1);
-- --------------------------------------------------------
--
-- Table structure for table `password_reset_tokens`
--
CREATE TABLE `password_reset_tokens` (
`email` varchar(255) NOT NULL,
`token` varchar(255) NOT NULL,
`created_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
-- --------------------------------------------------------
--
-- Table structure for table `sessions`
--
CREATE TABLE `sessions` (
`id` varchar(255) NOT NULL,
`user_id` bigint(20) UNSIGNED DEFAULT NULL,
`ip_address` varchar(45) DEFAULT NULL,
`user_agent` text DEFAULT NULL,
`payload` longtext NOT NULL,
`last_activity` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
--
-- Dumping data for table `sessions`
--
INSERT INTO `sessions` (`id`, `user_id`, `ip_address`, `user_agent`, `payload`, `last_activity`) VALUES
('aOPPWxuQ6Pe6wfis7dl1OGQXqDuRRwx07OK87OKe', NULL, '127.0.0.1', 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36', 'YTozOntzOjY6Il90b2tlbiI7czo0MDoid3hPb1g4VVUxWE5FcWpZaFlQYWlnb1dBU2RodzY2U0ZFdWlvMFVpUiI7czo5OiJfcHJldmlvdXMiO2E6MTp7czozOiJ1cmwiO3M6MjY6Imh0dHA6Ly9sb2NhbGhvc3Q6ODAwMC9ndXJ1Ijt9czo2OiJfZmxhc2giO2E6Mjp7czozOiJvbGQiO2E6MDp7fXM6MzoibmV3IjthOjA6e319fQ==', 1738396789);
-- --------------------------------------------------------
--
-- Table structure for table `tbl_guru`
--
CREATE TABLE `tbl_guru` (
`idguru` int(10) UNSIGNED NOT NULL,
`nip` int(11) NOT NULL,
`nama` varchar(255) NOT NULL,
`alamat` text NOT NULL,
`created_at` timestamp NULL DEFAULT NULL,
`updated_at` timestamp NULL DEFAULT NULL,
`deleted_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
--
-- Dumping data for table `tbl_guru`
--
INSERT INTO `tbl_guru` (`idguru`, `nip`, `nama`, `alamat`, `created_at`, `updated_at`, `deleted_at`) VALUES
(1, 18, 'Prof. Kyler Walter DVM', '70138 Kohler Track Suite 828\nDallasmouth, CO 35697-8345', NULL, NULL, NULL),
(2, 18, 'Chesley Beier PhD', '2079 Carlie Trafficway Suite 599\nWolfmouth, MA 25973', NULL, NULL, NULL),
(3, 18, 'Kobe Oberbrunner', '1720 Keenan Dam Suite 160\nSouth Jana, DC 01002', NULL, NULL, NULL),
(4, 18, 'Mrs. Dariana Heathcote', '597 Rosanna Lock\nNew Danialstad, IN 05049-4449', NULL, NULL, NULL),
(5, 18, 'Daphney Koss', '685 Myrl Shores\nNew Kaelynland, AZ 67832-3612', NULL, NULL, NULL),
(6, 18, 'Dr. Lela Mann IV', '840 Reinger Pass\nCruickshankshire, TN 47783', NULL, NULL, NULL),
(14, 18, 'Kelley Orn', '9600 Virginie Burgs\nWest Griffintown, KS 28988-6398', NULL, '2025-01-31 23:39:16', NULL),
(15, 18, 'Kelsi Barrows', '88069 Price River Suite 203\nLake Alanna, AL 87390-8375', NULL, NULL, NULL),
(16, 18, 'Vita Satterfield I', '31342 Karen Street Suite 991\nNew Leslyburgh, DE 09002-5182', NULL, NULL, NULL),
(24, 9, 'Marge Kunze', '322 Strosin Lock\nKatharinaside, TX 45374-3835', NULL, NULL, NULL),
(25, 3, 'Elisha Bartoletti', '346 Schultz Meadow\nWest Katelynn, AZ 97279-8909', NULL, NULL, NULL),
(26, 1, 'Gregory Bosco', '8561 Kris Pass Apt. 576\nWest Chelsieshire, VA 35382', NULL, NULL, NULL),
(27, 5, 'Korbin Sanford', '23274 Joaquin Court\nPort Murltown, AK 60657-3013', NULL, NULL, NULL),
(28, 5, 'Maritza Streich IV', '45746 Conn Gateway\nKrisbury, ND 83008-6963', NULL, NULL, NULL),
(29, 8, 'Glennie Wisoky', '57800 Lehner Plain Suite 010\nNorth Lonzo, ID 20142', NULL, NULL, NULL),
(30, 8, 'Pierre Howell I', '343 Harvey Forges\nBeatriceberg, NE 69175-2167', NULL, NULL, NULL),
(31, 4, 'Prof. Jeffrey Schulist', '82042 Murazik Junction\nRoweberg, VT 22366', NULL, NULL, NULL),
(32, 5, 'Miss Anita McLaughlin', '834 Rebekah Flat Apt. 723\nWuckertstad, MI 96400-8721', NULL, NULL, NULL),
(33, 1, 'Prof. Hobart Yost', '673 Lebsack Trace\nNew Athena, SD 61951-1844', NULL, NULL, NULL),
(34, 1, 'Prof. Toni Pfeffer', '7321 Luettgen Key Apt. 299\nSouth Tabitha, NH 21617-5268', NULL, NULL, NULL),
(35, 2, 'Prof. Kelton O\'Connell', '671 Leannon Mountains Suite 573\nMollyton, NE 29144-6871', NULL, NULL, NULL),
(36, 6, 'Mr. Colin Cole Sr.', '89773 Dare Route Apt. 241\nSteuberville, VT 18231', NULL, NULL, NULL),
(37, 0, 'Loyce Heller', '66837 Heidenreich Landing\nSouth Adelbertfurt, NV 25226', NULL, NULL, NULL),
(38, 7, 'Carole Leannon', '33796 Royce Forks Apt. 235\nSouth Gastonbury, VA 46538-2745', NULL, NULL, NULL),
(39, 4, 'Misty Keeling MD', '243 Wava Heights\nMiraclehaven, MT 25964-6311', NULL, NULL, NULL),
(40, 6, 'Lafayette Balistreri', '3117 Funk Vista\nMrazhaven, LA 48350-7484', NULL, NULL, NULL),
(41, 2, 'Maximillia Thiel DDS', '193 Larkin Underpass Apt. 788\nKosstown, UT 43731', NULL, NULL, NULL),
(42, 0, 'Alessandra McCullough', '8490 Joseph Pine Suite 041\nMyrtisberg, ND 88046', NULL, NULL, NULL),
(43, 6, 'Alycia Franecki', '82323 Daniel Ranch Apt. 653\nHaagport, KS 02438-9196', NULL, NULL, NULL),
(44, 8, 'Prof. Cassandra Bernhard', '4247 Berge Flat\nAlyshaton, MA 23822-8927', NULL, NULL, NULL),
(45, 7, 'Ariane Spencer', '684 Sammie Villages Suite 773\nLuettgenton, NC 67945', NULL, NULL, NULL),
(46, 1, 'Marcelino Moore', '256 Rahsaan Lake\nBeckertown, DC 47015-7312', NULL, NULL, NULL),
(47, 8, 'Ms. Carlie O\'Keefe', '61900 Kerluke Valleys\nNorth Madalynton, IN 76409-8568', NULL, NULL, NULL),
(48, 3, 'Timmothy Baumbach', '64186 Karley Hollow Suite 644\nPort Hortensehaven, MA 30120', NULL, NULL, NULL),
(49, 0, 'Vito White', '99955 Rippin Estate\nEast Vernershire, NH 63082-0825', NULL, NULL, NULL),
(50, 8, 'Alfreda DuBuque', '77031 Kuvalis Circles\nHoegerville, VA 12793', NULL, NULL, NULL),
(51, 4, 'Reymundo Dibbert', '447 Thomas Oval\nNew Jedediah, DE 44121-1526', NULL, NULL, NULL),
(52, 0, 'Viola Balistreri DDS', '5715 Wisozk Lane Apt. 487\nPort Rebekah, WV 24591', NULL, NULL, NULL),
(53, 0, 'Adriel Thiel', '13207 Schmeler Forge Suite 511\nBruenshire, RI 35365', NULL, NULL, NULL),
(54, 9, 'Elta Treutel', '87827 Schmitt Terrace Apt. 470\nStreichfort, NC 64230', NULL, NULL, NULL),
(55, 1, 'Mr. Roger Boyer', '2595 Goyette Union Apt. 282\nRobertsburgh, WA 74756', NULL, NULL, NULL),
(56, 2, 'Herbert Hartmann DDS', '53598 McLaughlin Meadow\nFeltonchester, NC 10875', NULL, NULL, NULL),
(57, 5, 'Gudrun Leannon', '609 Effertz Mills\nEast Dorthyborough, LA 73072-4456', NULL, NULL, NULL),
(58, 3, 'Mandy Bogan', '240 Kemmer Well Apt. 213\nKarleybury, VA 45307-3549', NULL, NULL, NULL),
(59, 5, 'Lucio VonRueden', '797 Sipes Meadow Apt. 388\nPricefort, WV 96594-9552', NULL, NULL, NULL),
(60, 0, 'Dr. Jessie Morar', '8783 Toy Village\nSouth Earnestine, NM 90297-1785', NULL, NULL, NULL),
(61, 7, 'Miss Norene Greenfelder I', '397 Lubowitz Valley Suite 453\nPort Amayaview, MA 92230-0169', NULL, NULL, NULL),
(62, 4, 'Betsy Raynor', '97599 Miguel Way\nEast Myrtiefurt, GA 14592-9324', NULL, NULL, NULL),
(63, 6, 'Nikki Christiansen DDS', '8081 Sim Fork\nRigobertoshire, AL 35536-0645', NULL, NULL, NULL),
(64, 8, 'Mrs. Stella Cassin', '370 Heathcote Mews\nPort Alexandreshire, DC 47194-5890', NULL, NULL, NULL),
(65, 3, 'Geo Price IV', '867 Murazik Stream Apt. 654\nGottliebville, NC 20875-1031', NULL, NULL, NULL),
(66, 5, 'Nelson Walter', '2058 Mozell Rapids Apt. 380\nSouth Christybury, AZ 37921-1882', NULL, NULL, NULL),
(67, 4, 'Wendell Nicolas', '265 Peter Avenue\nMillsfort, WV 64823-7498', NULL, NULL, NULL),
(68, 7, 'Grady Gottlieb', '297 Viola Mission\nBrauliohaven, NM 16347-4184', NULL, NULL, NULL),
(69, 2, 'Tanner Waelchi', '6218 Kim Inlet\nSouth Elsamouth, WY 68752', NULL, NULL, NULL),
(70, 3, 'Denis Ledner V', '1193 Nils Mill Apt. 082\nBreannaburgh, SD 74945-9910', NULL, NULL, NULL),
(71, 5, 'Noemie Tromp', '18920 Crona Corner\nWest Nikolas, TX 91703-8982', NULL, NULL, NULL),
(72, 4, 'Zoey Berge', '6636 Roberts Dam Apt. 363\nEast Kariport, GA 92292', NULL, NULL, NULL),
(73, 4, 'Myrtie Hoppe', '7740 Hoppe Center Suite 915\nMelissaburgh, NJ 12559-9403', NULL, NULL, NULL),
(74, 3, 'Dr. Ernestina Greenholt Jr.', '41650 Emely Vista\nWest Lionelberg, MI 72870', NULL, NULL, NULL),
(75, 9, 'Vada Stokes', '829 King Forks\nKingtown, KS 18585-1847', NULL, NULL, NULL),
(76, 9, 'Curt Rath', '23590 Ruecker Cove\nMargeport, TX 72665', NULL, NULL, NULL),
(77, 9, 'Dr. Rahul Witting', '29756 Beryl Unions\nTurnerton, UT 28629', NULL, NULL, NULL),
(78, 5, 'Ray Howell', '642 Diamond Walk\nFayfort, TX 79869', NULL, NULL, NULL),
(79, 1, 'Dr. Allison Rau', '237 Olson Lock\nEvieborough, WA 46666', NULL, NULL, NULL),
(80, 1, 'Domingo Fay', '5896 Alia Park\nGerholdhaven, AK 96094', NULL, NULL, NULL),
(81, 0, 'Mrs. Mia Jenkins PhD', '3702 Kshlerin Street Apt. 997\nDickensfurt, MS 20450-2399', NULL, NULL, NULL),
(82, 6, 'Myles Fay', '9906 Bethany Cove Suite 424\nWest Charityfort, PA 27257-1907', NULL, NULL, NULL),
(83, 1, 'Magali Bradtke', '385 Zoe Keys Suite 606\nPort Garryport, ID 87441', NULL, NULL, NULL),
(84, 3, 'Gloria Davis', '395 Bernhard Islands Suite 587\nSouth Linwoodtown, MI 51366-6770', NULL, NULL, NULL),
(85, 6, 'Mozelle Langosh I', '18120 Bailey Prairie\nPort Graciebury, NM 47633', NULL, NULL, NULL),
(86, 3, 'Dr. Mossie Corkery', '71484 Hauck Causeway\nFarrellmouth, MI 50211', NULL, NULL, NULL),
(87, 3, 'Iva Thiel', '77729 Trycia Squares Apt. 407\nJenkinsberg, MD 59793', NULL, NULL, NULL),
(88, 0, 'Deon Cummerata MD', '6301 Dallin Garden Apt. 630\nSouth Johnnieview, WY 18903', NULL, NULL, NULL),
(89, 1, 'Prof. Destiney Rice', '74330 Barton Stravenue Apt. 491\nEast Jaylon, WI 31585-1524', NULL, NULL, NULL),
(90, 9, 'Ms. Pansy Kutch', '3723 Lula Meadow\nLake Willport, HI 23297', NULL, NULL, NULL),
(91, 3, 'Declan Schamberger', '77905 Caden Fall\nMohammedchester, SD 07636-8422', NULL, NULL, NULL),
(92, 8, 'Herman Barrows', '7704 Mante Square Suite 241\nLake Enosville, NM 54636', NULL, NULL, NULL),
(93, 6, 'Dr. Destin Veum Sr.', '243 Batz Spurs Suite 612\nNew Wilbert, ND 65547', NULL, NULL, NULL),
(94, 2, 'Ronny Feeney', '7777 Thiel Wells Suite 942\nNorth Amaraside, WI 01241-7986', NULL, NULL, NULL),
(95, 2, 'Dr. Mack Schmitt', '90352 Jacobson Inlet Suite 113\nKristyhaven, FL 81941', NULL, NULL, NULL),
(96, 6, 'Mrs. Elena Balistreri V', '629 Julianne Way Suite 339\nLake Jovany, MT 33856-5955', NULL, NULL, NULL),
(97, 3, 'Thelma Erdman', '25913 Hoppe Drives\nThaliafort, MT 64904-7792', NULL, NULL, NULL),
(98, 0, 'Tyra Conn', '28741 Stewart Courts Suite 236\nNew Yeseniaport, WY 92906-6980', NULL, NULL, NULL),
(99, 5, 'Dr. Sherwood Jacobson', '30844 Jamarcus Plaza Suite 594\nSouth Flossie, IL 76077-1158', NULL, NULL, NULL),
(100, 4, 'Kody Ruecker', '774 Enid Islands\nBlockburgh, NH 40307-9273', NULL, NULL, NULL),
(101, 4, 'Norbert Dibbert', '51785 Chris Canyon\nCasandrafort, MS 56716-4648', NULL, NULL, NULL),
(102, 2, 'Rollin Stoltenberg I', '4717 Bergstrom Lock\nAlexisport, MD 50346', NULL, NULL, NULL),
(103, 2, 'Prof. Kaylin Altenwerth', '2151 Leannon Views Suite 686\nAdeliaton, AK 06296-3831', NULL, NULL, NULL),
(104, 4, 'Edna Hahn', '6895 Neha Ford\nWest Daynemouth, IL 00744', NULL, NULL, NULL),
(105, 1, 'Darius Upton', '41425 Schowalter Trail Apt. 846\nNorth Vinceport, SD 53271', NULL, NULL, NULL),
(106, 7, 'Prof. Nikolas Fritsch IV', '764 Koelpin Valleys\nPaucektown, CA 50532-2142', NULL, NULL, NULL),
(107, 7, 'Prof. Marcel Gorczany', '6350 Miller Overpass Apt. 110\nHelenfurt, ME 72703-6492', NULL, NULL, NULL),
(108, 3, 'Mr. Reed Littel', '54317 Hand Square Apt. 779\nSouth Wilma, TN 71466-7427', NULL, NULL, NULL),
(109, 6, 'Prof. Coby Reichert', '24776 Rippin Pike Suite 420\nPacochamouth, PA 17696', NULL, NULL, NULL),
(110, 3, 'Taylor Fisher', '15417 Raynor Square Apt. 391\nJosefinaborough, MI 85636', NULL, NULL, NULL),
(111, 8, 'Tommie Gutmann', '631 Michaela Ford Apt. 047\nWest Mikayla, NC 21058', NULL, NULL, NULL),
(112, 2, 'Prof. Gonzalo Braun', '76048 Bernier Springs Apt. 649\nLake Maudeport, NJ 44960-8597', NULL, NULL, NULL),
(113, 7, 'Alan Fisher', '9653 Turner Villages Apt. 715\nKuhlmanstad, RI 71076-1334', NULL, NULL, NULL),
(114, 9, 'Nona Hackett', '2104 Medhurst Brook Suite 795\nGerlachfurt, ME 41157-4560', NULL, NULL, NULL),
(115, 2, 'Elaina Hoeger', '43355 Quigley Mission Suite 583\nKeeblertown, NY 19847', NULL, NULL, NULL),
(116, 4, 'Dr. Gerhard Spencer Jr.', '8031 Swaniawski Orchard\nDemarcustown, AR 31312', NULL, NULL, NULL),
(117, 8, 'Hector Marquardt', '5865 Hayden Crest Suite 140\nRohanton, TX 33200-7808', NULL, NULL, NULL),
(118, 2, 'Reese Mohr', '915 Patsy Island\nNorth Marlenshire, NH 63616-0645', NULL, NULL, NULL),
(119, 4, 'Mr. Giovanni Metz', '492 Eulalia Walks Apt. 303\nNorth Lisachester, AK 94124', NULL, NULL, NULL),
(120, 9, 'Ms. Rose Huels DVM', '7177 Javon Park Suite 650\nPort Nathaniel, GA 44347', NULL, NULL, NULL),
(121, 1, 'Dr. Malcolm Abshire', '4609 Rodriguez Ports\nTiannaport, TX 96079', NULL, NULL, NULL),
(122, 5, 'Prof. Viva Eichmann', '40524 Kasey Creek\nOsinskiburgh, WY 45158', NULL, NULL, NULL),
(123, 1, 'Keven Farrell DDS', '55369 Beahan Islands\nPort Audreanneburgh, NY 12461-5409', NULL, NULL, NULL);
-- --------------------------------------------------------
--
-- Table structure for table `users`
--
CREATE TABLE `users` (
`id` bigint(20) UNSIGNED NOT NULL,
`name` varchar(255) NOT NULL,
`email` varchar(255) NOT NULL,
`email_verified_at` timestamp NULL DEFAULT NULL,
`password` varchar(255) NOT NULL,
`remember_token` varchar(100) DEFAULT NULL,
`created_at` timestamp NULL DEFAULT NULL,
`updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
--
-- Indexes for dumped tables
--
--
-- Indexes for table `cache`
--
ALTER TABLE `cache`
ADD PRIMARY KEY (`key`);
--
-- Indexes for table `cache_locks`
--
ALTER TABLE `cache_locks`
ADD PRIMARY KEY (`key`);
--
-- Indexes for table `failed_jobs`
--
ALTER TABLE `failed_jobs`
ADD PRIMARY KEY (`id`),
ADD UNIQUE KEY `failed_jobs_uuid_unique` (`uuid`);
--
-- Indexes for table `jobs`
--
ALTER TABLE `jobs`
ADD PRIMARY KEY (`id`),
ADD KEY `jobs_queue_index` (`queue`);
--
-- Indexes for table `job_batches`
--
ALTER TABLE `job_batches`
ADD PRIMARY KEY (`id`);
--
-- Indexes for table `migrations`
--
ALTER TABLE `migrations`
ADD PRIMARY KEY (`id`);
--
-- Indexes for table `password_reset_tokens`
--
ALTER TABLE `password_reset_tokens`
ADD PRIMARY KEY (`email`);
--
-- Indexes for table `sessions`
--
ALTER TABLE `sessions`
ADD PRIMARY KEY (`id`),
ADD KEY `sessions_user_id_index` (`user_id`),
ADD KEY `sessions_last_activity_index` (`last_activity`);
--
-- Indexes for table `tbl_guru`
--
ALTER TABLE `tbl_guru`
ADD PRIMARY KEY (`idguru`);
--
-- Indexes for table `users`
--
ALTER TABLE `users`
ADD PRIMARY KEY (`id`),
ADD UNIQUE KEY `users_email_unique` (`email`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `failed_jobs`
--
ALTER TABLE `failed_jobs`
MODIFY `id` bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT;
--
-- AUTO_INCREMENT for table `jobs`
--
ALTER TABLE `jobs`
MODIFY `id` bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT;
--
-- AUTO_INCREMENT for table `migrations`
--
ALTER TABLE `migrations`
MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;
--
-- AUTO_INCREMENT for table `tbl_guru`
--
ALTER TABLE `tbl_guru`
MODIFY `idguru` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=124;
--
-- AUTO_INCREMENT for table `users`
--
ALTER TABLE `users`
MODIFY `id` bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT;
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 .env yang ada pada direktori dalam project laravelnya, pada file ini kita akan melakukan pengaturan koneksi database laravel.
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=crudlaraveleloquent DB_USERNAME=root DB_PASSWORD=
Silahkan sesuaikan dengan nama database, username dan password mysql yang dibuat pada file .env tersebut.
Jika ingin menginput data testing dengan cepat, kita bisa menggunakan Seeding dan Faker di laravel, silahkan baca kembali tentanng tutorial Seeding dan Faker pada Laravel. Selanjutnya kita akan menampilkan data guru ini, kita buat route ‘/guru‘ pada project ‘crudlaraveleloquent‘.
crudlaraveleloquent/routes/web.php :
Route::get('/guru', [GuruController::class,'index']);
Di sini kita menetapkan route ‘/guru’ untuk mengakses method index() dalam controller GuruController.php. Selanjutnya buat controller GuruController.php dan method index()-nya jika di GuruController.php . JIka belum memahami tentang controller silahkan bisa baca kembali tutorial membuat controller dengan Laravel.
crudlaraveleloquent/app/Http/controllers/GuruController.php :
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
// panggil model guru
use App\Models\GuruModel;
use Illuminate\Foundation\Validation\ValidatesRequests;
class GuruController extends Controller
{
use ValidatesRequests;
//method menampilkan data guru
public function index()
{
// mengambil data guru
// $dataguru = GuruModel::all();
$dataguru = GuruModel::paginate(10);
// mengirim data guru ke view guru
return view('guru/v_guru', ['var_guru' => $dataguru]);
}
}
Coba perhatikan, pada method index() kita ambil data dari tabel tbl_guru dan kita passing ke view v_guru yang ada dalam folder crudlaraveleloquent\resources\views\guru.
//method menampilkan data guru
public function index()
{
// mengambil data guru
$dataguru = GuruModel::paginate(10);
// mengirim data guru ke view guru
return view('guru/v_guru', ['var_guru' => $dataguru]);
}
Pada saat kita belajar menampilkan data dari database, perintah yang kita gunakan adalah :
$dataguru = GuruModel::all();
Fungsi all() bertujuan untuk mengambil semua data, sedangkan untuk membuat pagination kita cukup menggunakan fungsi paginate(10). Angka 10 untuk menentukan membuat pagination yang masing-masing halamannya akan menampilkan 10 row data dan terakhir kita passing datanya ke view v_guru.
return view('guru/v_guru', ['var_guru' => $dataguru]);
Sekarang kita buat viewnya, yaitu view v_guru.blade.php.
crudlaraveleloquent\resources\views\guru\v_guru.blade.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 Laravel : CRUD Eloquent</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>
CRUD Data Guru
</div>
<div class="card-body">
<a href="/guru/tambah" class="btn btn-primary">Input Guru Baru</a>
|
<a href="/guru/trash" class="btn btn-warning">Tempat Sampah</a>
<br/>
<br/>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>ID Guru</th>
<th>NIP</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
</thead>
<tbody>
@foreach($var_guru as $g)
<tr>
<td>{{ $g->idguru }}</td>
<td>{{ $g->nip }}</td>
<td>{{ $g->nama }}</td>
<td>{{ $g->alamat }}</td>
<td>
<a href="/guru/edit/{{ $g->idguru }}" class="btn btn-warning">Edit</a>
<a href="/guru/hapus/{{ $g->idguru }}" class="btn btn-danger" onclick="return confirm('Yakin Mau Hapus Data?')">Hapus</a>
</td>
</tr>
@endforeach
</tbody>
</table>
<br/>
Halaman : {{ $var_guru->currentPage() }} <br/>
Jumlah Data : {{ $var_guru->total() }} <br/>
Data Per Halaman : {{ $var_guru->perPage() }} <br/>
{{ $var_guru->links() }}
</div>
</div>
</div>
</body>
</html>
Perhatikan sintak di atas, kita menampilkan datanya seperti yang sudah dibahas pada tutorial sebelumnya tentang membuat CRUD pada laravel.
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>ID Guru</th>
<th>NIP</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
</thead>
<tbody>
@foreach($var_guru as $g)
<tr>
<td>{{ $g->idguru }}</td>
<td>{{ $g->nip }}</td>
<td>{{ $g->nama }}</td>
<td>{{ $g->alamat }}</td>
<td>
<a href="/guru/edit/{{ $g->idguru }}" class="btn btn-warning">Edit</a>
<a href="/guru/hapus/{{ $g->idguru }}" class="btn btn-danger" onclick="return confirm('Yakin Mau Hapus Data?')">Hapus</a>
</td>
</tr>
@endforeach
</tbody>
</table>
Bedanya di sini kita menggunakan fungsi links() untuk membuat link penomorannya.
{{ $var_guru->links() }}
dan kita bisa menampilkan status detail tentang datanya dengan fungsi-fungsi berikut ini :
Halaman : {{ $var_guru->currentPage() }} <br/>
Jumlah Data : {{ $var_guru->total() }} <br/>
Data Per Halaman : {{ $var_guru->perPage() }} <br/>
Karena pada halaman v_guru.blade.php di atas kita menggunakan Bootstrap, maka harus menambahkan beberapa sintak pada file yang ada pada folder ‘App\Providers\AppServiceProvider‘, dengan menambahkan sintak :
Paginator::useBootstrapFive();
di dalam method boot(), dan
use Illuminate\Pagination\Paginator;
Sehingga sintak lengkapnya jadi seperti ini :
<?php
namespace App\Providers;
use Illuminate\Pagination\Paginator;
use Illuminate\Support\ServiceProvider;
class AppServiceProvider extends ServiceProvider
{
/**
* Register any application services.
*/
public function register(): void
{
//
}
/**
* Bootstrap any application services.
*/
public function boot(): void
{
Paginator::useBootstrapFive();
}
}
Kita coba lihat hasilnya, jalankan project kita dan akses route ‘ /guru ‘ dengan alamat ‘localhost:8000/guru‘. Pagination telah berhasil kita buat dengan laravel, kita coba klik pada halaman lain.
Sampai di sini telah selesai tutorial Membuat Pagination Pada Laravel, intinya kita hanya menggunakan fungsi paginate() dan membuat linknya dengan fungsi links().
Membuat Pencarian Pada Laravel
Form pencarian yang akan kita buat adalah form pencarian pada data guru yang sudah kita buat pada tutorial sebelumnya. Silahkan ikuti tutorial sebelumnya agar penjelasan tentang cara membuat pencarian pada laravel ini lebih mudah kita pahami.
Pada tutorial ini kita sudah mempunyai database dengan nama ‘crudlaraveleloquent’ dan sebuah tabel dengan nama ‘tbl_guru’. Untuk membuat pencarian menggunakan laravel, kita membutuhkan 2 buah route dan 2 buah method. 1 route untuk menampilkan data guru secara default (tanpa pencarian) yaitu
Route::get('/guru', [GuruController::class,'index']);
Kita akan menampilkan semua data guru dengan cara membuat sebuah form pencarian pada method index().
Dan 1 buah route untuk mengarahkan ke method yang menangani proses pencarian, yaitu :
Route::get('/guru/cari',[GuruController::class,'gurucari']);
Kita akan menjadikan method gurucari() sebagai method yang menangani data pencarian yang dikirim dari form pencarian yang dikirim dari method index().
Sekarang kita buat method pencarian pada controller GuruController.php yang sudah kita buat pada.
crudlaraveleloquent/app/Http/controllers/GuruController.php :
public function gurucari(Request $request)
{
// menangkap data pencarian
$cari = $request->cari;
// mengambil data dari table guru sesuai pencarian data
$dataguru = GuruModel::where('nama', 'like', "%".$cari."%")->paginate(10);
// mengirim data guru ke view v_guru
return view('guru/v_guru',['var_guru' => $dataguru]);
}
Pada controller GuruController.php ada 2 buah method yang akan kita gunakan, yaitu method yang akan menampilkan data guru yang belum diproses dan method cari yang melakukan proses pencarian data dan menampilkan datanya kembali.
Pada view index() yang sudah kita buat pada latihan pagination kita tambahkan text field dan tombol pencarian dengan sintak :
<form action="/guru/cari" method="GET">
<input type="text" name="cari" placeholder="Cari Guru .." value="{{ old('cari') }}">
<input type="submit" value="CARI">
</form>
sehingga sintak pada v_guru.blade.php menjadi seperti berikut :
crudlaraveleloquent/resources/views/guru/v_guru.blade.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 Laravel : CRUD Eloquent</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
CRUD Data Guru
<form action="/guru/cari" method="GET">
<input type="text" name="cari" placeholder="Cari Guru .." value="{{ old('cari') }}">
<input type="submit" value="CARI">
</form>
</div>
<div class="card-body">
<a href="/guru/tambah" class="btn btn-primary">Input Guru Baru</a>
|
<a href="/guru/trash" class="btn btn-warning">Tempat Sampah</a>
<br/>
<br/>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>ID Guru</th>
<th>NIP</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
</thead>
<tbody>
@foreach($var_guru as $g)
<tr>
<td>{{ $g->idguru }}</td>
<td>{{ $g->nip }}</td>
<td>{{ $g->nama }}</td>
<td>{{ $g->alamat }}</td>
<td>
<a href="/guru/edit/{{ $g->idguru }}" class="btn btn-warning">Edit</a>
<a href="/guru/hapus/{{ $g->idguru }}" class="btn btn-danger" onclick="return confirm('Yakin Mau Hapus Data?')">Hapus</a>
</td>
</tr>
@endforeach
</tbody>
</table>
<br/>
Halaman : {{ $var_guru->currentPage() }} <br/>
Jumlah Data : {{ $var_guru->total() }} <br/>
Data Per Halaman : {{ $var_guru->perPage() }} <br/>
{{ $var_guru->links() }}
</div>
</div>
</div>
</body>
</html>
Pada view v_guru.blade.php ini kita membuat sebuah form untuk pencarian data
Data Guru
<form action="/guru/cari" method="GET">
<input type="text" name="cari" placeholder="Cari Guru .." value="{{ old('cari') }}">
<input type="submit" value="CARI">
</form>
Kemudian perhatikan method cari pada controller GuruController.php :
public function gurucari(Request $request)
{
// menangkap data pencarian
$cari = $request->cari;
// mengambil data dari table guru sesuai pencarian data
$dataguru = GuruModel::where('nama', 'like', "%".$cari."%")->paginate(10);
// mengirim data guru ke view v_guru
return view('guru/v_guru',['var_guru' => $dataguru]);
}
Pada method cari ini kita tangkap data yang dikirim dari form pencarian, kemudian kita cari datanya pada table guru dengan menggunakan fungsi like untuk mencari data yang mirip dengan data yang diinput pada form pencarian, dan terakhir kita tampilkan data nya kembali ke view index.blad.php .
Sekarang kita lihat hasilnya dengan cara mengakses project kita ke alamat localhost:8000/guru
Demikian tutorial tentang cara membuat form pencarian pada laravel atau searching laravel, semoga bermanfaat.
Selanjutnya kita akan mempelajari tentang Relasi Database dengan Eloquent .
Referensi :
- http://informatika.uc.ac.id/id/2019/11/laravel-crud-pagination/
- https://www.malasngoding.com/membuat-pagination-pada-laravel/
- https://www.malasngoding.com/membuat-pencarian-pada-laravel/
