Read     Tutorial Singkat Pencarian data dengan Laravel 5.2

Tutorial Singkat Pencarian data dengan Laravel 5.2

Halo sob! Sekarang yang akan saya bahas mengenai Pencarian pada Laravel untuk Instalasi, CRUD, dsb.. saya lewati aja sob, kita langsung ke Pencarian, dan saya masih memakai Project sebelumnya untuk kita praktekkan sekarang ini.

Okedeh, yuk pertama-tama buat dulu route nya dulu. Ga perlu saya kasih tau kan dimana buat route baru nya? Kalo belum tau silahkan di ubek – ubek dulu tutorial sebelumnya.

Route::get('query', 'CariController@search');

Lalu kita buat Controller baru dengan nama CariController, silahkan buat menggunakan artisan atau manual.

Isi dari CariController :


<?php

namespace App\Http\Controllers;


use Illuminate\Http\Request;

use App\Http\Requests;
use App\Crud;

class CariController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function search(Request $request)
    {
        $query = $request->get('q');
        $hasil = Crud::where('judul', 'LIKE', '%' . $query . '%')->paginate(10);

        return view('result', compact('hasil', 'query'));
    }
}

Ket :

  • $query = Request::get('q'); kita mau ngedapetin data dari request text field yang name nya ' q '
  • Pada variable $hasil blabla , disini proses sql pencarian di table Crud berdasarkan judul yang hasil nya mirip dengan $query kita inputkan tadi, kalo mau ditambahin pencarian nya berdasarkan isi nya juga bisa tinggal ditambahin ->orWhere(‘isi’, 'LIKE', '%' . $query . '%')
  • return view('result', compact('hasil', 'query')); hampir sama dengan kita biasa ->with('hasil', $hasil)

Selanjutnya kita buat view baru dengan nama result.blade.php, simpan di resources/views, dan isi nya :

@extends('layouts.index')
@section('content')

<div class="section">
	<div class="card-panel purple darken-3 white-text">Tutorial Pencarian Laravel 5.2 dengan Materializecss</div>
</div>

<div class="section">
@if (count($hasil))
<div class="card-panel green white-text">Hasil pencarian : <b>{{$query}}</b></div>
    @foreach($hasil as $data)
    <div class="row">
		<div class="col s12">
			<h5>{{ $data->judul }}</h5>

            <div class="divider"></div>
            <p>{!!substr($data->isi,0,200)!!}...</p>
                
            <a href="{{ url('read', $data->id) }}" class="btn btn-flat pink accent-3 waves-effect waves-light white-text">Readmore <i class="material-icons right">send</i></a>
            <a href="{{ url('edit', $data->id) }}" class="btn btn-flat purple darken-4 waves-effect waves-light white-text">Edit <i class="material-icons right">mode_edit</i></a>
            <a href="{{ url('delete', $data->id) }}" onclick="return confirm('Yakin mau hapus data ini sob?')" class="btn btn-flat red darken-4 waves-effect waves-light white-text">Delete <i class="material-icons right">delete</i></a>
		</div>
	</div>
	@endforeach

</div>

{{ $hasil->render() }}
	
@else
   <div class="card-panel red darken-3 white-text">Oops.. Data <b>{{$query}}</b> Tidak Ditemukan</div>
@endif
	



@endsection

Ket :

  • @if (count($hasil)) disini singkatnya jika data nya ditemukan maka akan muncul perintah dibawah nya menghasilkan data pencarian, @else ya berarti sebaliknya
  • {{ $hasil->render() }} ya kita mau misalkan kita melakukan pencarian dan hasil nya banyak, kita bikin paging deh

Jika sudah membuat route, CariController, result.blade.php, selanjutnya ya kita buat dulu dong form pencarian nya di show.blade.php :v

Isi dari show.blade.php kita tambahkan form pencarian seperti ini :

@extends('layouts.index')
@section('content')

<div class="section">
	<div class="card-panel purple darken-3 white-text">Tutorial Pencarian Laravel 5.2 dengan Materializecss</div>
</div>

<div class="section">
<form action="{{ url('query') }}" method="GET">
    <div class="row">
          <div class="input-field col s12">
            <input type="text" class="validate" name="q">
            <label for="title">Cari</label>
          </div>
           <button type="submit" class="btn btn-flat pink accent-3 waves-effect waves-light white-text right">Cari <i class="material-icons right">search</i></button>
    </div>
 </form>
	@foreach($datas as $data)

	<div class="row">
		<div class="col s12">
			<h5>{{ $data->judul }}</h5>

            <div class="divider"></div>
            <p>{!!substr($data->isi,0,200)!!}...</p>
                
            <a href="{{ url('read', $data->id) }}" class="btn btn-flat pink accent-3 waves-effect waves-light white-text">Readmore <i class="material-icons right">send</i></a>
            <a href="{{ url('edit', $data->id) }}" class="btn btn-flat purple darken-4 waves-effect waves-light white-text">Edit <i class="material-icons right">mode_edit</i></a>
            <a href="{{ url('delete', $data->id) }}" onclick="return confirm('Yakin mau hapus data ini sob?')" class="btn btn-flat red darken-4 waves-effect waves-light white-text">Delete <i class="material-icons right">delete</i></a>
		</div>
	</div>
	@endforeach

</div>

{{ $datas->render() }}

<div class="fixed-action-btn horizontal" style="bottom: 45px; right: 24px;">
    <a href="{{ url('add') }}" class="btn-floating btn-large red">
      <i class="large material-icons">add</i>
    </a>
 </div>


@endsection

Hasil show.blade.php :

pencarian laravel

Kan kita punya 2 data, kita coba cari data dengan judul Lorem :

Laravel dengan materializecss searching

Hasil pencarian Lorem :

hasil pencarian laravel

Yap, dia hanya menampilkan judul yang mirip dengan query kita inputkan tadi yaitu :

data pencarian laravel

Sekarang kita coba tulis pencarian sembarang yang data nya tidak ada pada database kita :

data tidak temukan laravel

Hasil :

tutorial pencarian laravel 5.2

Selesai sudah, simple saja kan sob? Iyakan? Iyadong. Okedeh nantikan tutorial singkat selanjutnya sob, mohon maaf jika terdapat kesalahan kata, coding, penjelasan, dsb.. kalo saya salah, langsung comment ya biar saya edit.

Kalau bermanfaat silahkan share ya sob. Terimakasih

Top