عنوان مقاله :

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

گردآوری و تالیف : امیررضا سیستانه ای
تاریخ انتشار : 08 مرداد 1396
دسته بندی ها : لاراول

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

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

نصب یک پکیج 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

منبع

مقالات پیشنهادی

آموزش ساخت دستور سفارشی artisan در لاراول

لاراول به همراه تعدادی دستور artisan آمده که ما در بخش های مختلف پروژه ازشون استفاده می کنیم. بعضی از اونها معمول ترند مثل make:controller برای ساخت ک...

مقدمه‌ای بر استفاده از Vue.js در لاراول

در این مقاله میخوایم یک پروژه تستی بسازیم و در اون بتونیم یکسری اطلاعات رو به دیتابیس بفرستیم یا از دیتابیس حذف کنیم. این کار معمولی هست اما ما میخوای...

بهترین پکیج های لاراولی - سری دوم

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

دیباگ کردن اپلیکیشن های لاراولی با لاراول Debugbar

پکیج لاراول دیباگر توسط شخصی به نام Barry vd. Heuvel منتشر شده که به شما اجازه میده خیلی سریع و راحت اطلاعات اپلیکیشن لاراولی خودتون رو در یک رابطه گر...

دیدگاه های ارزشمند شما

برای ارسال نظر لازم است ابتدا وارد سایت شوید
پی اچ پی کار | 3 ماه پیش

پکیج خوبی بود
خیلی خوب و کامل هم توضیح داده شده
خسته نباشید

امیررضا سیستانه ای | 2 ماه پیش

خوشحالم به دردتون خورد :)