طراحی breadcrumb در laravel

با سلام

دوستان عزیز  می خام برید کرامب (breadcrumb) یا مسیری که کاربر رفته رو به صورت داینامیک پیاده سازی کنم در لاراول کسی تجربه پیاده سازی این موضوع رو داشته؟

درود، بنده یک روش کامل را برای پیاده سازی breadcrumb در لاراول (Laravel) ارائه می دهم. امیدوارم مورد استفاده قرار بگیرد:

استفاده و میزان ضرورت breadcrumb امروزه در تمام وب سایت ها مشهود است. بنابراین اگر UI و UX‌ یا همان تجربه کاربری برای وب سایت و کسب و کار شما اهمیت دارد، باید طراحی breadcrumb را جدی بگیرید.

پکیج ها یکی از اجزای جداناپذیر در دنیای برنامه نویسی هستند و فرآیند اجرای یک پروژه را ساده می کنند. در لاراول تعداد بسیار زیادی از پکیج ها وجود دارند که علاوه بر سهولت در کدنویسی، از امنیت و بروزرسانی بالایی برخوردار هستند.

برای کار با breadcrumb در لاراول ابتدا شما باید پکیج فوق العاده محبوب https://github.com/davejamesmiller/laravel-breadcrumbs را نصب کنید.

بنابراین با دستور زیر پکیج را با استفاده از composer اجرا و نصب نمایید:درود، بنده یک روش کامل را برای پیاده سازی breadcrumb در لاراول (Laravel) ارائه می دهم. امیدوارم مورد استفاده قرار بگیرد:
استفاده و میزان ضرورت breadcrumb امروزه در تمام وب سایت ها مشهود است. بنابراین اگر UI و UX‌ یا همان تجربه کاربری برای وب سایت و کسب و کار شما اهمیت دارد، باید طراحی breadcrumb را جدی بگیرید.
پکیج ها یکی از اجزای جداناپذیر در دنیای برنامه نویسی هستند و فرآیند اجرای یک پروژه را ساده می کنند. در لاراول تعداد بسیار زیادی از پکیج ها وجود دارند که علاوه بر سهولت در کدنویسی، از امنیت و بروزرسانی بالایی برخوردار هستند.
برای کار با breadcrumb در لاراول ابتدا شما باید پکیج فوق العاده محبوب Laravel BreadCrumbs را نصب کنید.
بنابراین با دستور زیر پکیج را با استفاده از composer اجرا و نصب نمایید:

composer require davejamesmiller/laravel-breadcrumbs

سپس باید مسیردهی های مورد نیاز را در route لاراول برای درخواست های HTTP کدنویسی کنید. پس وارد مسیر routes/web.php شده و کدهای زیر را درون آن قرار دهید:

Route::get('/',  ['as' => 'home', 'uses' => 'MainController@home']);

Route::get('/continent/{name}',  ['as' => 'continent', 'uses' => 'MainController@continent']);

Route::get('/country/{name}',  ['as' => 'country', 'uses' => 'MainController@country']);

Route::get('/city/{name}',  ['as' => 'city', 'uses' => 'MainController@city']);

برای درک این پکیج، سه مدل به نام های continent, country و city ایجاد می کنیم. دقت داشته باشید که یک continent (قاره) دارای چندین countries (کشور) بوده و هر countries (کشور) دارای چندین cities (شهر) می باشد. بنابراین روابط مدل های لاراول بدین صورت بوده که هر قاره hasMany کشور و هر کشور hasMany شهر دارد.
برای ایجاد کردن این مدل ها از دستورهای زیر استفاده می کنیم:

php artisan make:model Continent
php artisan make:model Country
php artisan make:model City

همچنین جداول این مدلها به صورت زیر است:

php artisan make:migration continents
php artisan make:migration countries
php artisan make:migration cities

از طرفی باید مدلها به صورت زیر تعریف شوند:

مدل app/Continent.php:

namespace App;
use App\Country;

use Illuminate\Database\Eloquent\Model;

class Continent extends Model
{
    public function country(){
        return $this->hasMany(Country::class);
    }
}

مدل app/Country.php:

namespace App;

use App\City;
use App\Continent;

use Illuminate\Database\Eloquent\Model;

class Country extends Model
{

    protected $guarded = [];
    public function city(){
        return $this->hasMany(City::class);
    }

    public function continent(){
        return $this->belongsTo(Continent::class);
    }
}

مدل app/City.php:

namespace App;


use App\Country;

use Illuminate\Database\Eloquent\Model;

class City extends Model
{

    protected $guarded = [];
    public function country(){
        return $this->belongsTo(Country::class);
    }
}

دقت داشته باشید که مقدار guarded فعلا به صورت empty یا خالی درنظر گرفته شده است زیرا برای seeding یا داده فیک در دیتابیس باید از خطای mass assignment‌ پیشگیری کنیم.

حالا باید به سراغ کنترلرها برویم تا درخواست های HTTP را مدیریت کنیم.

در کنترلر اصلی MainController.php خواهیم داشت:

namespace App\Http\Controllers;
use App\Continent;
use App\Country;
use App\City;
use Illuminate\Http\Request;

class MainController extends Controller
{
    public function home(){
        return view('home');
    }

     public function continent($name){
           $continent = Continent::where('name', $name)->first();
        return view('continent', compact('continent'));
    }

     public function country($name){
           $country = Country::where('name', $name)->first();
        return view('country', compact('country'));
    }

     public function city($name){
           $city = City::where('name', $name)->first();
        return view('city', compact('city'));
    }
}

توجه داشته باشید که ارتباط بین مدلها را قبلا ایجاد کرده ایم و حال می توانیم از امکانات پکیج Laravel Breadcrumbs استفاده کنیم.

برای درک بهتر این موضوع اجازه دهید تا View‌های مربوطه را ایجاد کنیم. بنابراین به پوشه resources/views رفته و سپس صفحات زیر را ایجاد کنید:

home.blade.php
continent.blade.php
country.blade.php
city.blade.php

حالا صفحه ویو home.blade.php را باز کرده و کدهای زیر را درون آن قرار دهید:

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

 </head>
 <body>

{{ Breadcrumbs::render('home') }}

</body>
</html>

در صفحه continent.blade.php نیز به همینصورت کدهای زیر را قرار دهید:

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

 </head>
 <body>

{{ Breadcrumbs::render('continent', $continent) }}

</body>
</html>

در فایل country.blade.php را با کدهای زیر جایگزین کنید:

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

 </head>
 <body>

{{ Breadcrumbs::render('country', $country->continent, $country) }}

</body>
</html>

همچنین در city.blade.php به صورت زیر عمل کنید:

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

 </head>
 <body>

{{ Breadcrumbs::render('city', $city->country->continent, $city->country, $city) }}

</body>
</html>

جداول مربوط به قاره، کشور و شهرها به صورت می باشد:

جدول continents:

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

class Continents extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('continents', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        //
    }
}

جدول countries:

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

class Countries extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('countries', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('continent_id');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        //
    }
}

جدول cities:

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

class Cities extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('cities', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('country_id');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        //
    }
}

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

php artisan migrate

حال باید یک فایل برای ایجاد breadcrumbs بنویسیم. برای اینکار وارد مسیر routes شده و سپس فایل breadcrumbs.php را ایجاد کنید. در این فایل عبارت home نوشته شده است که به معنی بازدید از صفحه اصلی است. یعنی وقتی کاربر از صفحه اصلی به یکی از صفحات داخلی مراجعه کرد همواره صفحه اصلی یا Home به صورت ویزیت شده باقی می ماند.

پس فایل breadcrumbs.php را به صورت زیر ویرایش می کنیم:

Breadcrumbs::register('home', function ($breadcrumbs) {
     $breadcrumbs->push('Home', route('home'));
});

در کد فوق کلاس Breadcrumbs، یک متد استاتیک به نام register را فراخوانی کرده است. این متد یک breadcrumb جدید به نام home را صدا می زند و سپس در یک closure از پارامتر $breadcrumbs استفاده کرده و با استفاده از دستور push، برید کرامب جدید را به همراه لینک آن اضافه می کند.

توجه داشته باشید که عبارت Home در واقع آن مقداری است که در صفحه اصلی شما نمایش داده می شود. مثلا شما می توانید آن را با عبارت «خانه» جایگزین کنید.

از طرفی عبارت route(‘home’)‌ هم لینک صفحه اصلی مربوط به route را به این لینک اضافه می کند.

در نهایت در فایل view مربوط به home، کد زیر فعال می شود:

{{ Breadcrumbs::render('home') }}

متد render در این کلاس نام breadcrumb را که قبلا تعریف کرده اید فراخوانی می کند. در اینجا ما نام ‘home’ را تعیین کرده ایم.

حال برای فراخوانی breadcrumb های داینامیک یا پویا چه کاری باید انجام دهیم؟

فراخوانی breadcrumb داینامیک در لاراول

برای اینکار باید از مدل های لاراول به صورت مستقیم بهره ببریم. یعنی مثلا اگر بخواهیم به یک breadcrumb یک قاره دسترسی داشته باشیم باید کدهای موجود در فایل breadcrumbs.php را به صورت زیر ویرایش کنیم:

Breadcrumbs::register('continent', function ($breadcrumbs, $continent) {
    $breadcrumbs->parent('home');
    $breadcrumbs->push($continent->name, route('continent', ['name' => $continent->name]));
});

حال باید در صفحه ویو مربوط به continent.blade.php دستور زیر را اضافه کنیم که قبلا این کار را انجام داده ایم:

{{ Breadcrumbs::render('continent', $continent) }}

حال اگر به مسیر http://localhost/continent/africa بروید با breadcrumb زیر روبه رو خواهید شد:

Home / Africa

حال برای Breadcrumb های تو در تو باید به صورت زیر عمل کنید:

فایل routes/breadcrumbs.php را باز کرده و دستورهای زیر را جایگزین دستورهای قبلی کنید:

Breadcrumbs::register('home', function ($breadcrumbs) {
     $breadcrumbs->push('Home', route('home'));
});

Breadcrumbs::register('continent', function ($breadcrumbs, $continent) {
    $breadcrumbs->parent('home');
    $breadcrumbs->push($continent->name, route('continent', ['name' => $continent->name]));
});

Breadcrumbs::register('country', function ($breadcrumbs, $continent, $country) {
    $breadcrumbs->parent('continent', $continent);
    $breadcrumbs->push($country->name, route('country', ['name' => $country->name]));
});

Breadcrumbs::register('city', function ($breadcrumbs, $continent, $country, $city) {
    $breadcrumbs->parent('country', $continent, $country);
    $breadcrumbs->push($city->name, route('city', ['name' => $city->name]));
});

و اگر هر تعداد مدل داشتید باید مجددا به این فایل اضافه کنید.

و اگر خواستید تو در تو بودن این breadcrumb‌ را به فایل view‌ داخلی اضافی کنید باید کد آن به صورت زیر باشد:

   {{ Breadcrumbs::render('city', $city->country->continent, $city->country, $city) }}

یعنی به ازای هر تو رفتگی باید این فایل را ویرایش کنید.

امیدوارم این توضیحات برای شما مفید واقع شده باشه و بتونید یک breadcrumb حرفه ای ایجاد کنید.