افزودن عکس نمایه کاربر در لاراول ۵.۷

لاراول دارای ویژگی احراز هویت است.در این نوشته چگونه با استفاده احراز هویت لاراول عکس کاربر نمایه را بارگزاری و نمایش آن خواهیم پرداخت.

لاراول را نصب کنید:

composer create-project --prefer-dist laravel/laravel cytus

وابستگی احراز هویت Auth نصب کنید:

php artisan make:auth

در پوشه Migration پرونده پایگاه داده create_users_table پیدا کنید و خط کد زیر را اضافه کنید:

$table->string('avatar')->default('default.jpg');

نمونه کد:

Schema::create('users', function (Blueprint $table) {
     $table->increments('id');
     $table->string('name');
     $table->string('email')->unique();
     $table->string('avatar')->default('default.jpg');
     $table->timestamp('email_verified_at')->nullable();
     $table->string('password');
     $table->rememberToken();
     $table->timestamps();
  });

پایگاه داده را اجرا کنید:

php artisan migrate

در پرونده resources/views/layouts/app.blade.php خط کد زیر را اضافه کنید:

<a class="dropdown-item" href="{{ route('user', auth()->user()) }}">نمایه</a>

نمونه کد:

<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
  <a class="dropdown-item" href="{{ route('user', auth()->user()) }}">نمایه</a>
  <a class="dropdown-item" href="{{ route('logout') }}"
     onclick="event.preventDefault();
      document.getElementById('logout-form').submit();">
       {{ __('خروج') }}
  </a>

<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
  @csrf
</form>
</div>

مسیر نمایه را در پرونده app/Http/routes.php اضافه کنید:

Route::post('/user/@{user}', 'UserController@user');

و دومی مسیر بارگزاری عکس کاربر را اضافه کنید:

Route::post('/user/@{user}', 'UserController@update_avatar');

و سومی مسیر صفحه نمایه کاربر را اضافه کنید:

Route::get('/user/@{user}', 'UserController@index')->name('user');

وابستگی Image Intervention را نصب کنید:

پیوند : http://image.intervention.io/getting_started/installation

در پرونده پیش فرض کنترلر UserController.php کد زیر را اضافه کنید:

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use App\User;
use App\Cytus;
use Image;


class UserController extends Controller
{
    public function index(User $user)
    {
        $cytus = Cytus::where('user_id', $user->id) -> latest() -> get();
        return view('user.index', compact('cytus', 'user'));
    }

    public function user()
    {
      return View('user.index', array('user' => Auth::user()) );
    }

    public function update_avatar(Request $request)
    {
      if($request->hasFile('avatar')){
      $avatar = $request->file('avatar');
      $filename = time() . '.' . $avatar->getClientOriginalExtension();
      Image::make($avatar)->resize(300, 300)->save( public_path('/uploads/avatars/' . $filename ) );

      $cytus = Auth::user();
      $cytus->avatar = $filename;
      $cytus->save();
      }

      return view('user.index', array('user' => Auth::user()) );
   }
}

کد زیر را در پرونده resources/views/layouts/app.blade.php اضافه کنید:

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" style="position:relative; padding-left:50px;">
    <img src="/uploads/avatars/{{ Auth::user()->avatar }}" style="width:32px; height:32px; position:absolute; top:10px; left:10px; border-radius:50%">
    {{ Auth::user()->name }} <span class="caret"></span>
</a>

در قسمت resources/views یک پوشه به نام user و پرونده index.blade.php داخل پوشه user ایجاد کنید.

کد زیر را در پرونده index.blade.php اضافه کنید:

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <img src="/uploads/avatars/{{ $user->avatar }}" style="width:150px; height:150px; float:left; border-radius:50%; margin-right:25px;">
            <h2>{{ $user->name }}'s Profile</h2>
            <form enctype="multipart/form-data" action="/user/@{user}" method="POST">
                <label>Update Profile Image</label>
                <input type="file" name="avatar">
                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                <input type="submit" class="pull-right btn btn-sm btn-primary">
            </form>
        </div>
    </div>
</div>
@endsection

پیوند نمایش صفحه نمایش به این صورت است:

http://127.0.0.1:8000/user/@Cytus

مشکلی داشتید در نظرات اعلام کنید.

موفق باشید…

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *