ساخت سیستم برچسب گذاری در پروژه لاراول

در سال‌های اخیر سیستم Tagging (برچسب گذاری) راه محبوبی برای دسته بندی آیتم ها شده, شما میتونید این سیستم رو در اکثر اپلیکیشن ها ببینید, از بلاگ ها گرفته تا وبسایت های پیچیده‌تر همه از برچسب‌ها استفاده می کنند.

در این مقاله می‌خواهیم درمورد بکپارچه سازی سیستم Tagging در اپلیکیشن های لاراولی بحث کنیم.

نصب یک پکیج Tagging

جامعه توسعه دهندگان لاراول تعداد زیادی پکیج برای این کار ساخته‌اند و شما باید تحقیق کنید کدامیک بیشتر به کارتون میاد. اینجا سه تا از معروف ترین این پکیج هاست :

• Cartalyst Tags
• Eloquent Taggable
• Laravel Tagging

من پکیج آخر یعنی Laravel Tagging رو انتخاب کردم. نصب اون بسیار راحته کافیه از دستور زیر استفاده کنید :

composer require rtconner/laravel-tagging "~2.0"

سپس provider زیر رو در فایل config/app.php وارد کنید :

Conner\Tagging\Providers\TaggingServiceProvider::class,

حالا فولدر vendor رو توسط دستور زیر انتشار بدید :

php artisan vendor:publish –provider="Conner\Tagging\Providers\TaggingServiceProvider"

در نهایت دیتابیس رو migrate کنید :

php artisan migrate

حالا وقتشه که اون رو به مدل اضافه کنیم. اسم مدل من Links.php هست و کلاسش به صورت زیر هست 

use Conner\Tagging\Taggable;



class Links extends Model

{

    use Taggable;



    protected $table = 'links';

این تمام کارهایی بود که برای راه اندازی و آماده کردنش برای استفاده لازم داشتیم. سیستم Tagging به کدهای جاوا اسکریپت و CSS نیاز داره تا انتخاب یا اضافه کردن Tag ها رو برای کاربران سایت راحت‌تر کنه.

نصب Jquery و Selectize

Selectize که توسط Brian Reavis ساخته شده یک پلاگین Jquery هست که یک input field رو به یک سیستم برچسب گذاری تبدیل می کنه. این پلاگین میتونه براحتی توسط npm نصب بشه و توسط Browserify و Elixir راه اندازی بشه.

در کامند خود جی کوئری و Selectize رو نصب کنیم و بصورت خودکار در package.json ذخیره کنید :

npm install jquery --save

npm install selectize –save

اگر شما فایل package.json رو باز کنید محتوای اون بشکل زیر هست :

"dependencies": {

  "laravel-elixir": "^3.0.0",

  "bootstrap-sass": "^3.0.0",

  "jquery": "^2.1.4",

  "selectize": "^0.12.1"

}

یک فایل در مسیر resources/assets/js/app,js بسازید که شامل کد زیر باشه :

window.$ = window.jQuery = require('jquery')

require('selectize');

var bootstrap = require('bootstrap-sass');



$( document ).ready(function() {

    $('#tags').selectize({

        delimiter: ',',

        persist: false,

        valueField: 'tag',

        labelField: 'tag',

        searchField: 'tag',

        options: tags,

        create: function(input) {

            return {

                tag: input

            }

        }

    });

});

قبل از کامپایل ما باید فایل gulp رو تنظیم کنیم :

elixir(function(mix) {

    mix.sass('app.scss')

        .browserify('app.js');

});

اینجا ما browserify رو صدا می‌زنیم که این کار به خطوط require اجازه میده وارد dependencies بشوند.

استایل دهی بوت استرپ

از اونجا که بوت استرپ از قبل وارد پروژه شده فایل app.scss رو باز کنید و این قسمت رو از حالت comment در بیارید :

حالا باید فایل Selectize رو اضافه کنیم :

@import "node_modules/selectize/dist/css/selectize.bootstrap3";

حالا اگر شما دستور gulp رو اجرا کنید همه چیز اونطور که میخواهیم پیش میره و کامپایل بدرستی انجام میشه.

نمایش و ذخیره Tag ها

در قالب سایتمون نیاز به دو آیتم داریم, یک فیلد برای افزودن تگ ها و یک کد جاوا اسکریپت برای آرایه ای از تگ های موجود.

در کنترلر بصورت زیر تگ ها رو درمیاریم :

$tags = Links::existingTags()->pluck('name');

return view('create', compact('tags'));

حالا در قالب template سایت :

و آیتم دوم که نیاز داشتیم :

حالا وقتی فرم ارسال شد بصورت زیر تگ ها رو اضافه کنید :

// Create the link first

$link = Links::create([...]);



// Now add tags

$link->tag(explode(',', $request->tags));

امکانات بیشتر 

برای حذف تگ ها :

$link->untag('laravel'); // remove Laravel tag

$article->untag(); // remove all tags

همگام سازی تگ ها :

$link->retag(['tutorial', 'package']); // delete current tags and save new tags

دریافت توسط تگ ها :

Link::withAnyTag(['laravel','tutorial'])->get(); // fetch with any tag listed

Link::withAllTags(['package', 'php'])->get(); // only fetch with all the tags

منبع