Laravel 5.3 tutorial : This lesson will show you how to create simple search function using Laravel Scout and Vue.Js, at the previews lessons we have learn how to build simple search using GET Method, please read Simple Search Function Using GET Method in laravel 5.3.
How to create Search Function in Laravel 5.3?
First, we will need laravel was installed on our server, if not, i assumed you to read and do step by step on this lessons How to build Blog using laravel step by step.Video tutorial How to create Search Function in Laravel 5.3
Just watch this video, and follow step by step.Routes (Web and Api)
web.php
Route::get('/','Api\SearchController@search');
api.php
Route::get('/search', 'Api\SearchController@search');Api Controller (SearchController.php)
<?php
namespace App\Http\Controllers\Api;
use App\Posts;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
class SearchController extends Controller {
// we will Installing and configuring Laravel Scout
public function search(Request $req){
// First we define the error message we are going to show if no keywords
$error = ['error'=>'No results found'];
// if the user entered the keyword
if ($req->has('q')){
// Using the Laravel Scout syntax to search the products table.
$posts = Posts::search($req->get('q'))->get();
// If there are results return them, if none, return the error message.
return $posts->count() ? $posts : $error;
} else {
// we will show all posts data from database
$posts = Posts::all();
return view('search')->withPosts($posts);
}
}
}Search.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple Vue.Js Search Function</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row" id="posts">
<div class="col-md-12">
<div class="input-group input-group-sm">
<div class="icon-addon addon-md">
<input type="text" v-model="query" placeholder="What are you looking for?" class="form-control">
</div>
<span class="input-group-btn">
<button type="button" class="btn-sm btn-danger" v-if="!loading" @click="search()">
Search <i class="fa fa-search"></i>
</button>
<button type="button" class="btn-sm btn-danger" v-if="loading" disabled="disabled">
Searching... <i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="post-preview" v-for="post in posts">
<p>
<span class="well-sm"><strong>
<a href="#">@{{ post.title }}</a>
</strong>
</span>
<span class="alert-danger">
On @{{ post.created_at }}
</span>
</p>
</div>
</div>
</div>
</div>
<!-- Show all data posts from database -->
<div class="row">
<div class="col-md-12">
<div class="post-preview">
<div class="alert alert-warning" v-if="noresult">
<h2><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
@{{ noresult }}
</h2>
<span class="well-sm" v-if="noresult">
@foreach($posts as $post)
<p>
<strong><a href="#">{{ $post->description }}</a></strong>
<span class="alert-danger">On {{ $post->created_at->format('M d,Y \a\t h:i a') }}</span>
</p>
@endforeach
</span>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.1/vue-resource.min.js"></script>
<script src="/js/search.js"></script>
</body>
</html>search.js
new Vue({
el: 'body',
data: {
posts: [],
loading: false,
noresult: 'Showing All Posts',
query: ''
},
methods: {
search: function() {
// Clear the error message.
this.noresult = '';
// Empty the posts array so we can fill it with the new posts.
this.posts = [];
// Set the loading property to true, this will display the "Searching..." button.
this.loading = true;
// Making a get request to our API and passing the query to it.
this.$http.get('/api/search?q=' + this.query).then((response) => {
// If there was an error set the error message, if not fill the posts array.
response.body.error ? this.noresult = response.body.error : this.posts = response.body;
// The request is finished, change the loading to false again.
this.loading = false;
// Clear the query.
this.query = '';
});
}
}
});More Vue.Js & Laravel Video Tutorial :
Full source code laravel app with vue.js
see you next lessons.
Không có nhận xét nào:
Đăng nhận xét