در حال بارگزاری ...

آپلود تصویر کاربران با کتابخانه رسانه Spatie در لاراول

توسط مریم مهربان
آخرین به روز رسانی جمعه 16 خرداد 1399

در دنیای مجازی و به ویژه در شبکه‌های اجتماعی، تصویر پروفایل شما می‌تواند نشان دهنده هویت شما باشد و باعث شود، افراد راحت‌تر  شما را پیدا کنند و بیشتر به شما اعتماد کنند. بنابراین د

در دنیای مجازی و به ویژه در شبکه‌های اجتماعی، تصویر پروفایل شما می‌تواند نشان دهنده هویت شما باشد و باعث شود، افراد راحت‌تر  شما را پیدا کنند و بیشتر به شما اعتماد کنند. بنابراین در طراحی سایت‌ها، لازم است امکانی وجود داشته باشد که با کمک آن، کاربر تصویری را به پروفایل خود اضافه کند.


فرم ثبت نام

به صورت پیش‌فرض، فرم ثبت نام در لاراول تنها شامل نام، آدرس ایمیل و پسورد است. اما اضافه کردن امکانی برای آن که کاربر عکس خود یا یک تصویر دلخواه را وارد کند، می‌تواند مفید باشد. در این آموزش، قصد داریم این کار را با استفاده از کتابخانه رسانه Spatie انجام دهیم.

قدم اول: فرم ثبت نام کاربر را تغییر دهید.

یک فیلد آپلود فایل به نام Avatar به فرم پیش‌فرض ثبت نام در لاراول اضافه کنید:

<!-- resources/views/auth/register.blade.php -->

<div class="form-group row">
    <label for="avatar" class="col-md-4 col-form-label text-md-right">{{ __('Avatar (optional)') }}</label>

    <div class="col-md-6">
        <input id="avatar" type="file" class="form-control" name="avatar">
    </div>
</div>

قدم دوم: کتابخانه رسانه را آپلود و ذخیره کنید.

به صورت پیش‌فرض، ثبت نام لاراول در فایل app/Http/Controllers/Auth/RegisterController.php و در تابع create() مدیریت می‌شود:

/**
 * Create a new user instance after a valid registration.
 *
 * @param  array  $data
 * @return \App\User
 */
protected function create(array $data)
{
    return User::create([
        'name' => $data['name'],
        'email' => $data['email'],
        'password' => Hash::make($data['password']),
    ]);
}

برای اینکه در زمان ثبت نام، تصویر کاربر را به همراه اطلاعات دیگر دریافت کنیم، لازم است که منطق خود برای اضافه کردن تصویر و نگهداری آن در پایگاه داده را پیاده سازی کنیم. در اینجا ما از کتابخانه رسانه Spatie استفاده کردیم. ابتدا این بسته را با کمک composer، نصب کنیم:

composer require spatie/laravel-medialibrary:^7.0.0

پس از نصب، می‌توانیم migration را با دستور زیر ایجاد کنید: (migration در واقع شبیه کنترل نسخه برای پایگاه داده است و با استفاده از آن، می‌توانید به آسانی شمای پایگاه داده خود را تغییر دهید و آن را به اشتراک بگذارید)

php artisan vendor:publish --provider="Spatie\MediaLibrary\MediaLibraryServiceProvider" --tag="migrations"

پس از اینکه migration ایجاد شد، می‌توانیم با استفاده از آن یک جدول برای رسانه، در پایگاه داده ایجاد کنیم: 

php artisan migrate

کارهایی که تا الان انجام دادیم، منجر به ایجاد یک جدول در پایگاه داده به نام media می‌شود که از روابط چندریختی برای نگهداری داده استفاده می‌کند. در مثال  ما، فایل‌های رسانه به مدل app\User ضمیمه می‌شوند.

در این مرحله، باید مدل app\User.php را برای کار کردن با کتابخانه رسانه آماده کنیم. به این منظور، باید دو عبارت use در خارج از کلاس، کلاس implement HsaMedia و یک عبارت use در داخل کلاس اضافه کنیم.

// These two come from Media Library
use Spatie\MediaLibrary\HasMedia\HasMediaTrait;
use Spatie\MediaLibrary\HasMedia\HasMedia;

class User extends Authenticatable implements HasMedia
{
    // ...
    use HasMediaTrait;
}

سپس به فایل RegisterController برمی‌گردیم و تکه کدی را به تابع create() اضافه می‌کنیم. در تکه کد اضافه شده، بررسی می‌کنیم که آیا تصویری برای کاربر وجود دارد، سپس تصویر را از درخواست می‌گیریم و با کمک کتابخانه رسانه، آن را آپلود می‌کنیم و در نهایت، آن را به مجموعه رسانه‌های موجود در پایگاه داده اضافه می‌کنیم.

protected function create(array $data)
{
    $user = User::create([
        'name' => $data['name'],
        'email' => $data['email'],
        'password' => Hash::make($data['password']),
    ]);

    if (isset($data['avatar'])) {
        $user->addMediaFromRequest('avatar')->toMediaCollection('avatars');
    }

    return $user;
}

نکته: به صورت پیش‌فرض، لاراول تمام فایل‌ها را در /app/public ذخیره می‌کند، فراموش نکنید که دستور زیر را اجرا کنید و تنظیمات فولدر را در فایل پیکربندی config/filesystems.php  تغییر دهید.

php artisan storage:link

قدم سوم: تصویر کاربر را در منوی بالا نشان دهید.

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

ابتدا، اگر فایل بزرگ باشد، چه کار باید بکنیم؟ چطور می‌توانیم اندازه تصویر را مثلاً به ۵۰*۵۰ تغییر دهیم؟ در این موارد، باز هم می‌توانیم از کتابخانه رسانه استفاده کنیم. تمام کاری که باید انجام دهیم، تعریف قوانین تغییر اندازه در همان مدل app\User است:

use Spatie\MediaLibrary\Models\Media;
class User extends Authenticatable implements HasMedia
{
    // ... all other code

    public function registerMediaConversions(Media $media = null)
    {
        $this->addMediaConversion('thumb')
            ->width(50)
            ->height(50);
    }
}

به این منظور، ما قانونی را تعریف می‌کنیم که thumb نام دارد و می‌توانیم از آن برای نشان دادن تصویر استفاده کنیم. زمانی که تصویر آپلود شد، این تصویر به صورت خودکار در زیرفولدرهای آن آیتم نگهداری می‌شود. 

در آخر، تصویر کاربر را به صورت زیر نشان خواهیم داد:

<!-- resources/views/layouts/app.blade.php -->

<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
    <img src="{{ Auth::user()->getMedia('avatars')->first()->getUrl('thumb') }}">
    {{ Auth::user()->name }} <span class="caret"></span>
</a>

در تکه کد بالا، مهم‌ترین کاری که انجام می‌شود، در خط زیر خلاصه شده است:

Auth::user()->getMedia('avatars')->first()->getUrl('thumb')

در این مرحله عملیات اضافه کردن تصویر کاربر با کمک کتابخانه رسانه Spatie تمام می‌شود.

فرا بگیرید:

آموزش پایه لاراول ۵,۵

آموزش CSS

آموزش HTML مقدماتی

البته روش‌های پیشرفته‌تری هم برای اضافه کردن تصویر به پروفایل کاربر وجود دارد. برای مثال، می‌توان تصویر اصلی را در یک صفحه به کاربر نشان داد و با استفاده از کتابخانه‌های جاوا اسکریپت این امکان را ایجاد کرد که کاربر بتواند تصویر را برش دهد و بخش موردعلاقه خود را برای تصویر پروفایل انتخاب کند. اما، ما در این آموزش، به همین روش ساده بسنده می‌کنیم و از شما دعوت می‌کنیم برای یادگیری آموزش‌های دیگر در زمینه‌های متفاوت طراحی سایت، با ما در کتابخانه آنلاین لیداوب همراه باشید.

دیدگاه ها

دیدگاه ها : 2


متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

رایگان

اشتراک گذاری در
سورس خرید و فروش ارزهای دیجیتال
ثبت امتیاز
1.4 (5 رای)

   لطفا صبر کنید ...