سلام دوستان
در این آموزش من با استفاده از Select2 و Ajax در لاراول سعی می کنم مراحل ساخت یک Autocomplete را به شما آموزش بدم. این اموزش رو با یک مثال کاربردی پیش می بریم امیدوارم بتونه براتون مفید واقع بشه.

مرحله اول: نصب لاراول

برای نب Laravel ترمینال خط فرمان خود را باز کرده و دستور زیر را اجرا می کنیم:

composer create-project --prefer-dist laravel/laravel blog

مرحله دوم: Database Configuration

در این مرحله اطلاعات اتصال به پایگاه داده را در فایل .env قرار می دهیم.

.env
DB_HOST=localhost
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret

مرحله سوم: ساخت Migration

در لاراول برای ساخت استراکچر پایگاه داده از Migration بهرمند خواهیم شد، برای این منظور از خط فرمان زیر استفاده می کنیم.

php artisan make:migration create_products_table --create=products

بعد از اجرای خط فرمان بالا یک فایل در مسیر database/migrations ایجاد می گردد آن را بصورت زیر تغییر دهید، تا استراکچر جدول products در پایگاه داده شما ایجاد گردد:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

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

برای اجرا فایل مورد نظر و ایجاد جدول پایگاه داده دستور زیر را اجرا می کنیم:

php artisan migrate

بعد اجرا فرمان فوق جدول products در پایگاه داده ایجاد خواهد شد. سپس برای ایجاد model خط فرمان زیر را اجرا خواهیم نمود.

php artisan make:model Product -m

حال با اجرا خط فرمان بالا model ایجاد شده را بصورت زیر ویرایش می کنیم.

app/Product.php
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
     protected $fillable = [
        'name', 'price',
    ];
}

مرحله چهارم: ایجاد Route

فایل routes/web.php بصورت زیر ویرایش می کنیم:

routes/web.php
Route::get('select2', 'Select2AutocompleteController@index');
Route::get('/select2-autocomplete-ajax', 'Select2AutocompleteController@dataAjax');

مرحله پنجم: ایجاد Controller

برای ایجاد کنترلر Select2AutocompleteController از خط فرمان زیر استفاده می کنیم.

php artisan make:controller Select2AutocompleteController

در فایل کنترلر ایجاد شده ما تنها به دو متد زیر نیازمندیم برای راختی کار فایل نهایی را برای شما اماده و در زیر قرار می دهیم:

/app/Http/Controllers/Select2AutocompleteController.php
<?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Product;

class Select2AutocompleteController extends Controller
{
    /**
    * Show the application layout.
    *
    * @return \Illuminate\Http\Response
    */
    public function index()
    {
    	return view('select2.index');
    }
    /**
    * Show the application dataAjax.
    *
    * @return \Illuminate\Http\Response
    */
    public function dataAjax(Request $request)
    {
    	$data = [];

        if($request->has('q')){
            $search = $request->q;
            $data =Product::select("id","name")
            		->where('name','LIKE',"%$search%")
            		->get();
        }
        return response()->json($data);
    }
}

مرحله ششم: ایجاد View

در این مرحله فایل Blade مورد نظر را ایجاد می کنیم و آن را بصورت زیر در پروژه در مسیر resources/views/select2 بارگذاری می کنیم.

resources/views/select2/index.blade.php
<!DOCTYPE html>
<html>
<head>
  <title>Laravel - Dynamic autocomplete search using select2 JS Ajax-uclass.ir</title>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
<body class="bg-dark">
<div class="container mt-4">
  <div class="row">
    <div class="col-md-8 offset-md-2">
      <div class="card">
        <div class="card-header">
          <h4>Laravel - Dynamic autocomplete search using select2 JS Ajax</h4>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-12">
              <select class="itemName form-control" name="itemName"></select>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<script type="text/javascript">
$('.itemName').select2({
  placeholder: 'Select an item',
  ajax: {
    url: '/select2-autocomplete-ajax',
    dataType: 'json',
    delay: 250,
    processResults: function (data) {
      return {
        results:  $.map(data, function (item) {
              return {
                  text: item.name,
                  id: item.id
              }
          })
      };
    },
    cache: true
  }
});
</script>
</html>

بسیار خوب کار در اینجا تمام است برای اجرا پروژه دستور زیر را اجرا می کنیم:

php artisan serve

برای مشاهده پروژه از آدرس زیر استفاده می کنیم.

http://localhost:8000/select2

امیدوارم این آموزش براتون جالب بوده باشه و بتونید از اون به راحتی در پروژه ها تون استفاده کنید.

علاقه ام از سالها قبل برنامه نویسی تحت وب بوده و هست ، همیشه سعی می کنم علاقه مندی های خودم رو در ضمیه برنامه نویسی با همه به اشتراک بذارم، مطالب اینجا بتونه مشکل یه نفر رو هم برطرف کنه اون حس خوب رضایت رو در من بوجود میاره ;)

ارسال نظر