{"id":53819,"date":"2025-03-12T14:36:46","date_gmt":"2025-03-12T07:36:46","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=53819"},"modified":"2025-03-12T15:17:52","modified_gmt":"2025-03-12T08:17:52","slug":"belajar-laravel-bagian-12","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/belajar-laravel-bagian-12\/","title":{"rendered":"Belajar Laravel Bagian 12 – Cara Membuat Fitur Pencarian"},"content":{"rendered":"\n

Pada seri belajar Laravel bagian 11<\/a><\/strong>, kita telah belajar bagaimana cara membuat Pagination <\/em>di Laravel. Dalam belajar laravel bagian 12 ini, kita akan belajar cara membuat fitur pencarian di Laravel, untuk memudahkan pengunjung website anda menemukan informasi yang mereka cari secara lebih cepat.<\/p>\n\n\n\n\n\n

Dalam tutorial ini, kita akan belajar cara membuat fitur pencarian di Laravel dengan menggabungkan query builder<\/em>, model Eloquent<\/em>, dan formulir HTML untuk membuat fitur pencarian yang dinamis dan mudah diterapkan.<\/p>\n\n\n\n

Tutorial ini kami buat untuk pemula maupun developer <\/em>yang ingin menambahkan fungsi pencarian ke aplikasi Laravel secara mudah. Yuk, langsung mulai langkah-langkahnya!<\/p>\n\n\n\n

Membuat Fitur Pencarian di Laravel<\/h2>\n\n\n\n

Berikut langkah-langkah membuat fitur pencarian di Laravel yang dapat Anda ikuti.<\/p>\n\n\n\n

Step 1. Membuat Model dan Migration<\/h3>\n\n\n\n

Langkah pertama, buat model dan migration untuk entitas yang akan digunakan dalam fitur pencarian. Misalnya di sini kita akan membuat model dengan entitas Berita<\/strong>. Jalankan perintah berikut di ssh atau terminal:<\/p>\n\n\n\n

php artisan make:model Berita -m<\/code><\/pre>\n\n\n\n
Setelah perintah tersebut dijalankan, file migration akan otomatis dibuat di folder database\/migrations\/<\/strong> dengan nama seperti tanggal_pembuatan_create_beritas_table.php<\/strong>.<\/p>\n\n\n\n
Selanjutnya, buka file tersebut dan tambahkan kolom yang diperlukan. Sebagai contoh:<\/p>\n\n\n
\n
\"buat<\/a><\/figure>\n<\/div>\n\n\n
Selanjutnya, tambahkan mass assignment<\/em> di dalam model yang terletak pada file app\/Models\/Berita.php <\/em>menggunakan properti protected $fillable<\/code> untuk field <\/em>yang telah dibuat pada migration sebelumnya.<\/p>\n\n\n
\n
\"menggunakan<\/a><\/figure>\n<\/div>\n\n\n
Setelah selesai mengisi kebutuhan migration dan juga model, kemudian kita jalankan perintah php artisan migrate<\/em> untuk memasukan data kita ke database.<\/p>\n\n\n\n
\"php<\/a><\/figure>\n\n\n\n
Step 2. Membuat Factory <\/em>untuk data faker<\/em> kita<\/h3>\n\n\n\n
Factory dan Faker adalah dua fitur di Laravel yang sangat berguna untuk membuat data dummy dengan cepat dan efisien. Biasanya, fitur ini digunakan dalam beberapa kasus seperti membuat aplikasi baru dan membutuhkan data pengguna atau produk untuk keperluan pengujian. Untuk membuat factory <\/em>kita dapat menjalankan perintah berikut:<\/p>\n\n\n\n
php artisan make:factory PostFactory --model=Berita<\/code><\/pre>\n\n\n\n
Selanjutnya, buka file yang berada pada folder database\/factories\/PostFactory.php<\/em>, lalu definisikan struktur data yang sudah dibuat dengan faker<\/em>. Berikut adalah contoh  struktur data yang sudah dibuat sebelumnya.<\/p>\n\n\n\n
\"struktur<\/a><\/figure>\n\n\n\n
Step 3. Mengisi database dengan menggunakan data Faker<\/h3>\n\n\n\n
Untuk mengisi data faker ke dalam database, kita perlu membuat dahulu seeder <\/em>datanya dengan menjalankan perintah berikut:<\/p>\n\n\n\n
php artisan make:seeder PostSeeder<\/code><\/pre>\n\n\n\n
Setelah menjalankan perintah tersebut, silahkan dapat membuka filenya di path database\/seeders\/PostSeeder.php<\/em>  dan isikan seperti berikut.<\/p>\n\n\n\n
\"seeder<\/a><\/figure>\n\n\n\n
Setelah menambahkan isi pada seeder, <\/em>langkah selanjutnya kita dapat menjalankan perintah berikut untuk mengirimkan data faker ke database: <\/p>\n\n\n\n
php artisan db:seed --class=PostSeeder<\/code><\/pre>\n\n\n\n
Jika data berhasil dikirimkan, maka ada muncul seperti berikut:<\/p>\n\n\n
\n
\"seeding<\/a><\/figure>\n<\/div>\n\n\n
Step 4. Membuat controller <\/em>untuk menampilkan data berita<\/h3>\n\n\n\n
Selanjutnya, kita akan membuat controller untuk mengambil data dan menampilkannya disertai dengan fitur pencarian. Silahkan dapat menjalankan perintah berikut:<\/p>\n\n\n\n
php artisan make:controller PostController<\/code><\/pre>\n\n\n\n
Setelah menjalankan perintah tersebut kita dapat melihat filenya pada app\/Http\/Controller\/PostController<\/em>.  Di dalam controller <\/em>ini, kita akan mengambil data semua yang ada pada tabel berita dan dilengkapi dengan fitur pencarian yang akan mencari berdasarkan judul dan juga isi.<\/p>\n\n\n\n
\"Membuat<\/a><\/figure>\n\n\n\n
Step 5. Membuat Route untuk menampilkan data tersebut<\/h3>\n\n\n\n
Kita dapat menentukan route <\/em>ketika kita mengakses data contoh seperti kita ingin diakses di \/berita. Dengan mengisikan script <\/em>seperti berikut di dalam path \/routes\/web.php<\/em>.<\/p>\n\n\n\n
\"Membuat<\/a><\/figure>\n\n\n\n
Step 6. Membuat View untuk menampilkan data berita dan fitur pencarian<\/h3>\n\n\n\n
Silahkan dapat membuat file di resource\/view<\/em> dengan menambahkan folder berita kemudian menambahkan file index.blade.php<\/em> dan isikan code seperti berikut : <\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Contoh Pagination Berita<\/title>\n    <style>\n        table {\n            width: 100%;\n            border-collapse: collapse;\n        }\n\n        table, th, td {\n            border: 1px solid black;\n        }\n\n        th, td {\n            padding: 8px;\n            text-align: left;\n        }\n\n        th {\n            background-color: #f2f2f2;\n        }\n\n        .pagination {\n            margin-top: 10px;\n        }\n    <\/style>\n<\/head>\n<body>\n    <h1>Berita<\/h1>\n\n    <!-- Tabel Berita -->\n\n    <form action=\"{{ route('beritas.index') }}\" method=\"GET\" class= 'mb-5'>\n        <input type=\"text\" name=\"search\" value=\"{{ $search ?? '' }}\" placeholder=\"Cari berita...\">\n        <button type=\"submit\">Cari<\/button>\n    <\/form>\n\n        \n    <table>\n        <thead>\n            <tr>\n                <th>Judul<\/th>\n                <th>Isi<\/th>\n                <th>Tanggal Berita<\/th>\n            <\/tr>\n        <\/thead>\n        <tbody>\n            @foreach($beritas as $berita)\n                <tr>\n                    <td>{{ $berita->judul }}<\/td>\n                    <td>{{ $berita->isi }}<\/td>\n                    <td>{{ $berita->tanggal_berita }}<\/td>\n                <\/tr>\n            @endforeach\n        <\/tbody>\n    <\/table>\n\n    <!-- Pagination Links -->\n    <div>\n        {{ $beritas->withQueryString()->links() }}\n    <\/div>\n\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Pengujian<\/h2>\n\n\n\n
Setelah semua step kita buat, langkah terakhir dalam sesi belajar laravel ini adalah melakukan pengujian. Untuk menjalankan websitenya, gunakan perintah: php artisan serve<\/code> dan jika benar maka hasilnya akan sebagai berikut:<\/p>\n\n\n\n
\"contoh<\/a><\/figure>\n\n\n\n
Penutup<\/strong><\/h2>\n\n\n\n
Fitur pencarian pada website berfungsi untuk memudahkan pengguna dalam menemukan data tertentu dari sekumpulan data yang tersedia, seperti berita dalam aplikasi Laravel ini.<\/p>\n\n\n\n
Dengan adanya fitur pencarian, pengunjung website Anda dapat menghemat waktu penelusuran, serta lebih fleksible dalam menyaring data atau informasi di project <\/em>laravel Anda.<\/p>\n\n\n\n
Demikian tutorial belajar laravel bagian ke 12 ini tentang bagaimana cara membuat fitur pencarian di laravel, semoga bermanfaat.<\/p>\n","protected":false},"excerpt":{"rendered":"
Pada seri belajar Laravel bagian 11, kita telah belajar bagaimana cara membuat Pagination di Laravel. Dalam belajar laravel bagian 12 ini, kita akan belajar cara membuat fitur pencarian di Laravel, untuk memudahkan pengunjung website anda menemukan informasi yang mereka cari secara lebih cepat. Dalam tutorial ini, kita akan belajar cara membuat fitur pencarian di Laravel […]<\/p>\n","protected":false},"author":357,"featured_media":53836,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[7],"tags":[1587,796,1497],"class_list":{"0":"post-53819","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-programming","8":"tag-belajar-laravel","9":"tag-laravel","10":"tag-tutorial-laravel"},"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/03\/banner-belajar-laravel-bagian-12.png","jetpack_shortlink":"https:\/\/wp.me\/p8n3G7-e03","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/53819","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/357"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=53819"}],"version-history":[{"count":0,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/53819\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/53836"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=53819"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=53819"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=53819"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}