عنوان مقاله :

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

گردآوری و تالیف : امیررضا سیستانه ای
تاریخ انتشار : 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

منبع

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

ساخت گزارش ورود کاربران در لاراول

اینجا می خواهیم درمورد ساخت یک سیستم مدیریت گزارش ساده در لاراول بحث کنیم. من جداول سفارشی log (گزارش) و کمکی facade که بتونید گزارش کاربران رو ردیابی...

ساخت نصب کننده (Installer) برای پروژه لاراول

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

استفاده از CDN در پروژه های لاراولی

همینطور که میدونید امروزه برای افزایش سرعت بارگذاری صفحات وبسایت و همچنین بهبود تجربه کاربری از CDN ها استفاده میشه. در این مقاله می خواهیم به بررسی ا...

آموزش ساخت یک وبلاگ ساده با لاراول 5 [قسمت اول]

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

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

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

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

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

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