Web Component Development Information Technology UMY

LARAVEL CHAPTER 9
(Membuat Fitur Search)

A. Tujuan Praktikum

Materi ini bertujuan untuk mempersiapkan mahasiswa untuk dapat membuat website
dengan Fitur Create, Read, Update dan Delete (CRUD) dan Search.

B. Materi

1. Membuat fitur search

2. Running website

C. Alat dan Bahan Praktikum

1. Laptop
2. Code editor (Visual Studio Code
3. Laragon
4. phpmyadmin

D. Metode Praktikum
1. Terdapat modul yang sudah dijelaskan langkah-langkah yang bisa diikuti oleh
Mahasiswa
2. Mahasiswa dapat mengikuti Langkah-langkah tersebut
3. Setiap akhir dari sesi praktik, akan ada tugas yang harus dikerjakan oleh Mahasiswa
4. Setiap tugas, harus dikumpulkan melalui My Klass UMY
E. Penilaian
1. Penilaian tugas akan diberikan dari skala 1-100.
2. Tugas yang terlambat akan mengalami pengurangan nilai 10-50% sesuai dengan
keterlambatan hari.

F. Proses Pembuatan Search

1. Persiapkan Laragon → Start All

2. Konfigurasi code search di MahasiswaController.php
Ubah code di MahasiswaController.php seperti gambar di bawah ini :

1|Web Component Development

Web Component Development Information Technology UMY

Gambar 1.1 Konfigurasi Controller

Penjelasan:

Gambar 9.2 Parameter

Gambar diatas merupakan parameter yang dibutuhkan untuk fitur search

- nama → merupakan kolom pada tabel mahasiswa (database

praktikumlaravel)
- LIKE → pencocokan pola
- % . $request->cari .% → merupakan hasil dari nama yang akan di input nantinya

2|Web Component Development

Web Component Development Information Technology UMY

G. Membuat Tampilan

1. Tambahkan code di folder resources→view→mahasiswa→index.blade.php seperti

gambar dibawah ini

Gambar 9.3 Konfigurasi view

Penjelasan:
Terdapat beberapa perubahan di code gambar diatas ini dari code sebelumnya.
Dikarenakan menyesuaikan tampilan. Silahkan copy code dibawah ini jika
kebingungan.

<div class="col-md-7">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary my-2 my-sm-0 float-
right" data-toggle="modal" data-target="#exampleModal">
Tambah Data
</button>
<form class="form-inline my-2 my-lg-
0" method="GET" action="/mahasiswa">
<input name="cari" class="form-control w-75 mr-sm-
2" id="search" placeholder="Cari">
<button type="submit" class="btn btn-outline-secondary my-2 my-sm-
0">Cari</button>
</form>
</div>

3|Web Component Development

Web Component Development Information Technology UMY

H. Menjalankan Aplikasi

Pastikan fitur search berfungsi ketika melakukan pencarian. seperti gambar di bawah ini:

Gambar 9.4 Pencarian 1

Harap diperhatikan URL sesuai dengan nama pencarian yang dicari, contoh “Habil”,
maka url akan berubah sesuai gambar di atas

Gambar 2.5 Pencarian 2

Saya mengetik “fao” maka pencarian merujuk dengan nama yang teridentifikasi “fao”.
URL juga berubah sesuai dengan gambar yang di atas

4|Web Component Development

Web Component Development Information Technology UMY

I. Tugas

Silahkan submit Screenshot dari :

o Tampilan ketika search Minimal 3 pencarian

yang sudah dibuat dengan mengikuti langkah-langkah yang sudah diberikan di

situs https://myklass-eng.umy.ac.id/ pada Assignment Tugas 9 mata kuliah
Pengembangan Komponen Web.

Format : Tugas9_NIM_Nama.pdf

5|Web Component Development