Laravel Dynamic Dependent Dropdown Using Ajax-বাংলায়

laravel dynamic dependent dropdown
Spread the love

এই ব্লগ পোস্টে, আমরা শিখবো Laravel Dynamic Dependent Dropdown কীভাবে তৈরি করতে হয় Ajax এর মাধ্যমে।

যখন আমরা বিভিন্ন অ্যাপ্লিকেশনগুলির সাথে কাজ করি তখন আমাদের দেশ দেশের আন্ডার এ বিভাগ আর বিভাগ এর আন্ডারে জেলা ও উপজেলা সিলেক্ট করার প্রয়োজন হয়। তখন কোন দেশের আন্ডারে যদি অন্য দেশের সিটি চলে আসে তখন সেটা খুজে পেতে সমস্যা যাতে না হয় তার জন্যে শুধু সেই দেশের সিটি গুলো সিটি সিলেকটর এ দেখানোর জন্যে আমরা ডাইনামিকলি সেই কাজ টি করি।

সহজভাবে কোনও ব্যবহারকারী কোনও বিভাগ নির্বাচন করেন, সম্পর্কিত সাব-বিভাগের ড্রপডাউন তালিকাটি থেকে উপ-বিভাগ এবং উপ-সাব-বিভাগের মতো কাজ করবে। আমরা ধাপে ধাপে দেখবো Laravel Dynamic Dependent Dropdown Using Ajax এর সিস্টেম।

এই ব্লগ পোস্টে, আমাদের তিনটি টেবিল রয়েছে:

  • countries table
  • states table
  • cities table

প্রথমত, আমরা সকল দেশের নাম প্রথম ড্রপডাউন এ প্রদর্শন করব এবং যখন আমরা Country ড্রপডাউন তালিকা থেকে যে কোনও Country নির্বাচন করব তখন সম্পর্কিত State দ্বিতীয় ড্রপডাউন তালিকায় প্রদর্শিত হবে এবং যখন আমরা State ড্রপডাউন থেকে State টি নির্বাচন করব তখন সম্পর্কিত City টি হবে তৃতীয় ড্রপডাউন তালিকাভুক্ত।

ধাপ- ১ঃ লারাভেল ইন্সটল

আমরা লারাভেল এর ডিফল্ট লগিনসহ ইন্সটল কিভাবে করতে হই তা নিয়ে এখানে লিখেছি। যারা ইন্সটল করতে পারেন না তারা এই টিউটোরিয়াল টা দেখে নিন। যাই হোক মনে করি আপনি অলরেডি জানেন কিভাবে লারাভেল ইন্সটল করতে হই।

আশা করি আপনার PC তে লারাভেল ইন্সটল করা আছে।তাহলে আমরা পড়ের স্টেপ এ যায়

ধাপ-২ঃ Country, State এবং City Table Migrations এবং Model তৈরি

আমাদের এখন Country, State এবং City টেবিল এর Migrations এবং Model তৈরি করবো। যেই ফোল্ডারে আমাদের প্রজেক্ট আছে সেখানে টার্মিনাল ওপেন করে নিচের কমান্ড ৩টি রান করবো

php artisan make:model Country -m
php artisan make:model State -m
php artisan make:model City -m

কমান্ডগুলো সফলভাবে চালিত হলে আপনি database->migration ফোল্ডারে ৩টি নতুন ফাইল দেখতে পাবেন এবং এখন আমরা Country, State এবং City মাইগ্রেশন ফাইলগুলো ওপেন করবো এবং title আর foreign key এড করবো।

database/migrations/184654_create_countries_table.php

/**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('countries', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('title');
            $table->timestamps();
        });
    }

database/migrations/184654_create_states_table.php

/**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('states', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->integer('country_id'); 
            $table->string('title');
            $table->timestamps();
        });
    }

database/migrations/184654_create_cities_table.php

/**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('cities', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->integer('state_id'); 
            $table->string('title');
            $table->timestamps();
        });
    }

এখন Country,State,City মডেল ফাইল ওপেন করে নিচের মত মডিফাই করবো

app/Country

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Country extends Model
{
    /**
     * @var string
     */
    protected $table = 'countries';

    /**
     * @var array
     */
    protected $fillable = ['title'];

}

app/State

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class State extends Model
{
    /**
     * @var string
     */
    protected $table = 'states';

    /**
     * @var array
     */
    protected $fillable = ['country_id','title'];

}

app/City

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class City extends Model
{
    /**
     * @var string
     */
    protected $table = 'cities';

    /**
     * @var array
     */
    protected $fillable = ['state_id','title'];

}

ফাইলগুলো সেইভ করার পরে, নিচের মাইগ্রেট কমান্ডটি রান করুন টার্মিনালেঃ

php artisan migrate

এখন আমরা আমাদের ডাটাবেসে তিনটি টেবিল দেখতে পাচ্ছি , আময়াদের টেবিলের মধ্যে কিছু ডেটা যুক্ত করবো।

Countries table.

country state city drop down list in laravel

States Table

ajax country state city dropdown demo

City Table

Laravel Dynamic Dependent Dropdown

এখন Country, State এবং City তিনটি টেবিল ডেটা সহ তৈরি করা হয়েছে।

ধাপ-৩ঃ Route তৈরি

এখন routes>>wep.php ফাইল খুলুন এবং Laravel Dynamic Dependent Dropdown Using Ajax এর জন্যে Route নির্ধারণ করুন।

Route::get('dropdownlist','[email protected]');
Route::get('get-state-list','[email protected]');
Route::get('get-city-list','[email protected]');

ধাপ-৪ঃ Controller তৈরি

এখন আমরা টার্মিনালে নিচের কমান্ডটি রান করে একটি Controller তৈরি করবো।

php artisan make:controller DropdownController

এখন DropdownController ফাইল এ ৩টি ফাংশন যুক্ত করবো যা আমারা আমাদের রাউট এ লিখেছি।নিচের ফাইল টী দেখুন

app/Http/Controllers/DropdownController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Country;
use App\State;
use App\City;

class DropdownController extends Controller
{
    	public function index()
        {
            $countries = Country::all();
            
            return view('index',compact('countries'));
        }

        public function getStateList(Request $request)
        {
            $states = State::where("country_id",$request->country_id)->get();
            
            return response()->json($states);
        }

        public function getCityList(Request $request)
        {
            $cities = City::where("state_id",$request->state_id)->get();

            return response()->json($cities);
        }
}

ধাপ-৫ঃ View ফাইল তৈরি

রিসোর্স এর ভিউ ফোল্ডারে index.blade.php নামের একটি ভিঊ ফোল্ডার তৈরি করে সেখানে আমরা Ajax এর কোড দিয়ে ডাটা শো করবো

resources/views/index.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Dynamic Dependent Dropdown Using Ajax-বাংলায়</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
    <div class="panel panel-default">
      <div class="panel-heading">Laravel Dynamic Dependent Dropdown Using Ajax-বাংলায়</div>
      <div class="panel-body">
            <div class="form-group">
                <select id="country" name="category_id" class="form-control" style="width:350px" >
                <option value="" selected disabled>Select</option>
                  @foreach($countries as $item)
                  	<option value="{{$item->id}}"> {{$item->title}}</option>
                  @endforeach
                  </select>
            </div>
            <div class="form-group">
                <label for="title">Select State:</label>
                <select name="state" id="state" class="form-control" style="width:350px">
                </select>
            </div>
         
            <div class="form-group">
                <label for="title">Select City:</label>
                <select name="city" id="city" class="form-control" style="width:350px">
                </select>
            </div>
      </div>
    </div>
</div>
<script src="{{ asset('design/jquery.js') }}"></script>
<script type="text/javascript">
    $('#country').change(function(){
    var country_id = $(this).val();    
    if(country_id){
        $.ajax({
           type:"GET",
           url:"{{url('get-state-list')}}?country_id="+country_id,
           success:function(res){ 
           console.log(res);              
            if(res){
                $("#state").empty();
                $("#state").append('<option>Select</option>');
                $.each(res,function(key){
                    $("#state").append('<option value="'+res[key].id+'">'+res[key].title+'</option>');
                });
           
            }else{
               $("#state").empty();
            }
           }
        });
    }else{
        $("#state").empty();
        $("#city").empty();
    }      
   });
    $('#state').on('change',function(){
    var stateID = $(this).val();    
    if(stateID){
        $.ajax({
           type:"GET",
           url:"{{url('get-city-list')}}?state_id="+stateID,
           success:function(res){               
            if(res){
                $("#city").empty();
                $.each(res,function(key,value){
                    $("#city").append('<option value="'+res[key].id+'">'+res[key].title+'</option>');
                });
           
            }else{
               $("#city").empty();
            }
           }
        });
    }else{
        $("#city").empty();
    }
        
   });
</script>
</body>
</html>

এখন আমরা এখন অ্যাপ্লিকেশনটি চালাবো নিচের কমান্ড টি রান করে 

php artisan serve

ব্রাউজার ওপেন করে নিচের URL এ  ফলাফলটি দেখবো 

http://localhost:8000/dropdownlist

Laravel Dynamic Dependent Dropdown Using Ajax কোডটি এখানে পাবেন

SOURCE CODE

আজ এই পর্যন্তই। আপনাদের মতামত নিচের কমেন্ট বক্স এ জানাবেন। নতুন কিছু নিয়ে লিখা চাইলে সেটাও জানাতে পারেন।

আরও পড়ুন-

Leave a Reply

Your email address will not be published. Required fields are marked *