20/01/2019, 18:09

Live search trong Laravel sử dụng Ajax

Ngày nay đối với mọi trang web dù là blog hay website thương mại, một thanh tìm kiếm luôn luôn là cần thiết. Tuy nhiên những ngày tháng của một thanh tìm kiếm theo cách đơn giản đã qua. Hiện nay một thanh tìm kiếm live, tức là có thể hiển thị kết quả tìm tiếm tức thì khiến cho quá trình sử dụng ...

Ngày nay đối với mọi trang web dù là blog hay website thương mại, một thanh tìm kiếm luôn luôn là cần thiết. Tuy nhiên những ngày tháng của một thanh tìm kiếm theo cách đơn giản đã qua. Hiện nay một thanh tìm kiếm live, tức là có thể hiển thị kết quả tìm tiếm tức thì khiến cho quá trình sử dụng của người dùng dễ dàng hơn rất nhiều. Hôm nay mình sẽ hướng dẫn các bạn tạo một thanh live search trong Laravel sử dụng Ajax.

Truy cập vào file .env trong project của bạn và thiết lập thông tin của file .env tại phần database như sau:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database.name
DB_USERNAME=database.username
DB_PASSWORD=database.password

Với database.name, database.username, database.password lần lượt là tên của cơ sở dữ liệu, tên của người dùng và mật khẩu truy cập cơ sở dữ liệu.

Giờ chúng ta cần tạo một bảng để lưu trữ dữ liệu, sử dụng câu lệnh sau để tạo một migration, ở đây mình tạo một bảng có tên là 'products'

php artisan make:migration create_products_table --create=products

Sau khi chạy xong câu lệnh migration, bạn sẽ thấy một file mới được tạo ở database/migration/<date>_create_products_table.php

Mình sẽ thêm một số trường cho bảng này, ở đây mình sẽ dùng trường 'title' để tìm kiếm.

<?php

use IlluminateSupportFacadesSchema;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateDatabaseMigrationsMigration;

class CreateProductsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->string('description');
            $table->integer('price');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('products');
    }
}

Sau khi viết xong migration, bây giờ chúng ta sẽ tạo bảng, chạy câu lệnh sau:

php artisan migrate

Sau khi chạy xong, bạn có thể kiểm tra cơ sở dữ liệu của bạn. Một bảng mới có tên là 'products' đã được thêm vào cơ sở dữ liệu của bạn với các trường đã được định nghĩa trong file migration.

Sau khi đã cơ sở dữ liệu đã sẵn sàng, bước tiếp theo chúng ta sẽ tạo controller. Chạy câu lệnh sau để tạo controller:

php artisan make:controller LiveSearchController

Giờ đi đến app/Http/controller/LiveSearchController.php và chỉnh sửa như sau:

<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;
use DB;

class LiveSearchController extends Controller
{
    public function index()
    {
        $products = DB::table('products')->get();

        return view('search.search', compact('products'));
    }

    public function search(Request $request)
    {
        if ($request->ajax()) {
            $output = ';
            $products = DB::table('products')->where('title', 'LIKE', '%' . $request->search . '%')->get();
            if ($products) {
                foreach ($products as $key => $product) {
                    $output .= '<tr>
                    <td>' . $product->id . '</td>
                    <td>' . $product->title . '</td>
                    <td>' . $product->description . '</td>
                    <td>' . $product->price . '</td>
                    </tr>';
                }
            }
            
            return Response($output);
        }
    }
}

Mình sẽ giải thích một chút về đoạn code trên. Đầu tiên mình tạo một hàm index để trả về giao diện (mình sẽ tạo giao diện này trong bước tiếp theo). Sau đó là hàm search sẽ lấy dữ liệu từ thanh tìm kiếm, truyền nó vào Ajax và thực thi câu lệnh query, câu lệnh sẽ tìm kiếm tất cả dữ liệu từ bảng products mà có title giống với giá trị trên thanh tìm kiếm. Sau đó mình sẽ tạo một đoạn code HTML để trả về kết quả.

Sau khi đã có controller, chúng ta sẽ định nghĩa một số route để sử dụng controller. Chúng ta sẽ định nghĩa 2 route tương ứng với 2 hàm chúng ta đã tạo trong controller.

Vào file routes/web.php và thêm vào hai route sau:

Route::get('/', '[email protected]');
Route::get('/search', '[email protected]');

Tạo một file search.blade.php trong project của bạn tại resources/views/search và thêm đoạn code sau:

<!DOCTYPE html>
<html>
    <head>
        <meta name="_token" content="{{ csrf_token() }}">
        <title>Live Search</title>
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    </head>
        <body>
            <div class="container">
                <div class="row">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3>Products info </h3>
                        </div>
                        <div class="panel-body">
                            <div class="form-group">
                                <input type="text" class="form-controller" id="search" name="search"></input>
                            </div>
                            <table class="table table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Product Name</th>
                                        <th>Description</th>
                                        <th>Price</th>
                                    </tr>
                                </thead>
                                <tbody>
                                @if ($products)
                                    @foreach ($products as $product)
                                        <tr>
                                            <td>{{$product->id}}</td>
                                            <td>{{$product->title}}</td>
                                            <td>{{$product->description}}</td>
                                            <td>{{$product->price}}</td>
                                        </tr>
                                    @endforeach
                                @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        <script type="text/javascript">
            $('#search').on('keyup',function(){
                $value = $(this).val();
                $.ajax({
                    type: 'get',
                    url: '{{ URL::to('search') }}',
                    data: {
                        'search': $value
                    },
                    success:function(data){
                        $('tbody').html(data);
                    }
                });
            })
            $.ajaxSetup({ headers: { 'csrftoken' : '{{ csrf_token() }}' } });
        </script>
    </body>
</html>

Trong đoạn code trên thứ chúng ta cần quan tâm là đoạn script, nơi mình cài đặt phương thức ajax để tìm kiếm. Đoạn script này thực hiện bắt sự kiện mỗi khi bạn gõ vào thanh tìm kiếm, nó sẽ lấy dữ liệu ở ô input và gửi giá trị đến /search, và như chúng ta đã định nghĩa trong route, dữ liệu sẽ được gửi vào hàm search trong controller. Và việc còn lại là của controller, nó sẽ tìm kiếm trong cơ sở dữ liệu và trả response về cho Ajax. Sau khi nhận được , dữ liệu trả về sẽ được hiển thị ra dưới hạng HTML.

Trên đây mình đã hướng dẫn các bạn sử dụng Ajax để thực hiện live search trong Laravel, đây chỉ là một trong nhiều cách để thực hiện tạo live search, ngoài ra còn nhiều cách thực hiện khác. Mọi thắc mắc liên quan đến bài viết mọi người có thể comment bên dưới nhé.

Bài liên quan

Live search trong Laravel sử dụng Ajax

Ngày nay đối với mọi trang web dù là blog hay website thương mại, một thanh tìm kiếm luôn luôn là cần thiết. Tuy nhiên những ngày tháng của một thanh tìm kiếm theo cách đơn giản đã qua. Hiện nay một thanh tìm kiếm live, tức là có thể hiển thị kết quả tìm tiếm tức thì khiến cho quá trình sử dụng ...

Trịnh Tiến Mạnh viết 18:09 ngày 20/01/2019

Sử Dụng AJAX trong Ruby on Rails

Ngày nay hầu hết các trang web đều sử dụng công nghệ AJAX để cải thiện trải nghiệm của người dùng thông qua cơ chế update từng phần dữ liệu trên trang mà không yêu cầu trình duyệt phải load lại toàn bộ trang. Trong bài viết này chúng ta sẽ cùng nhau tìm hiểu cách sử dụng AJAX trong Ruby on Rails ...

Vũ Văn Thanh viết 10:56 ngày 07/09/2018

Xây dựng ACL trong Laravel sử dụng Gate và Policy

Việc xác thực của Laravel (Authentication ) cung cấp 1 giải pháp đơn giản hóa cho việc đăng ký, đăng nhập, đăng xuất, và reset mật khẩu cũng như triển khai nó một cách nhanh chóng và dễ dàng hơn cho ứng dụng web. Tuy nhiên nếu bạn cần kiểm soát quyền truy cập vào một số phần của trang web, hoặc ...

Hoàng Hải Đăng viết 18:01 ngày 12/08/2018

Eager Loading trong laravel sử dụng with() hay load()?

Khi chúng ta sử dụng ORM trong laravel, mặc định ORM sẽ ở chế độ "lazy" khi load lên tất cả các model quan hệ (relation). Cụ thể hơn chúng ta cùng xem xét một ví dụ ở docs của laravel như sau: <?php namespace App; use IlluminateDatabaseEloquentModel; class Book extends Model { /** ...

Bùi Văn Nam viết 17:58 ngày 12/08/2018

Sử dụng ajax trong Rails có thay đổi URL cho SEO

Khi phát triển ứng dụng web bất kỳ ngôn ngữ lập trình nào, chắc ai cũng biết đến về Ajax. Ajax giúp bạn load một phần nào đó trong web mà không cần refresh lại toàn bộ trang web. Khi mình sử dụng Ajax, mình thấy rất hay, nhưng một vấn đề là khi sử dụng Ajax thì url không thay đổi khiến cho bạn ...

Trịnh Tiến Mạnh viết 17:51 ngày 12/08/2018
0