Hướng dẫn Avatar mặc định của User là tên Viết tắt trên dự án Laravel

Hướng dẫn Avatar mặc định của User là tên Viết tắt trên dự án Laravel


Các các bạn khi sử dụng Android hoặc các ứng dụng danh bạ trên điện thoại đều thấy tên của người khác được viết tắt thành avatar của họ. Trông khá chuyên nghiệp và nhìn cũng hay hay.

Hôm nay mình sẽ hướng dẫn các bạn làm như vậy với dự án trên Laravel của mình. Bạn có thể xem thành quả mà mình đã làm trên dự án của mình

Ok, bây giờ bắt tay làm nhé. Ở đây mình sẽ sử dụng package laravolt/avatar. Link của package ở đây : https://github.com/laravolt/avatar

Để cài gói này vào dự án của bạn, chạy lện sau:

composer require laravolt/avatar

Để xem rõ cách cài đặt bạn có thể lên GitHub mà mình vừa đưa ở trên để xem, ở đây mình làm trên Laravel 5.6 nên các bạn xài bản laravel cũ hơn thì xem lại Doc nha.

Tiếp theo chạy lệnh sau:

php artisan vendor:publish --provider="Laravolt\Avatar\ServiceProvider"

Một file config sẽ được tạo tại:  config/laravolt/avatar.php

OK, bạn đã cài đặt thành công, bây giờ điều quan trọng là bạn phải tạo thêm 1 cột avatar trong bảng user của bạn đã. Cái này tự xử khỏi hướng dẫn. Bạn có thể để giá trị là null, mình vì dự án lúc trước không có dùng gói này nên để giá trị là avatar.png để lấy avatar mặc định.

Bây giờ bạn vào Model User để append một thuộc tính là avatar_link

protected $appends = [
    'avatar_path'
];

Tiếp theo mình dụng  Accessors để kiểm tra giá trị của avatar có rỗng hoặc là giá trị mặc định hay không ( ví dụ giá trị của mình là avatar.png). Code như sau. Nhớ là viết ở trong model User luôn nhé. Bạn để ý tên của function mình viết nhé, đừng sửa tên, nếu sửa thì sửa luôn cái append nhé.

public function getAvatarLinkAttribute()
{
    if ($this->attributes['avatar'] == 'avatar.png') {
        return Avatar::create($this->attributes['name'])->toBase64();
    } else {
        return 'upload/user/' . $this->attributes['user'] . '/avatar/' . $this->attributes['avatar'];
    }

    return $this->attributes['avatar'];
}

Đoạn có ở trên mình viết nếu giá trị mặc định của của cột avatar là avatar.png còn nếu giá trị của bạn là rổng thì nhớ ghi là null hoặc giá trị mặc định của bạn. Đoạn $link là để gán link avatar của user khi họ đổi avatar của họ.

Ok vậy là xong rồi, bây gán vào View thôi

Bạn sẽ gán như lày, giá trị sẽ nằm trong src

<img src="{{ Auth::user()->avatar_link }}" class="user-image" alt="User Image">

Ở gói này vào file config bạn có các tùy chỉnh ở trong đó, bạn có thể vọc chỉnh sửa thử ra sao. Và có thêm một số phương thức ở trong Doc bạn có thể đọc thêm.

Đánh giá bài viết

Hướng dẫn Avatar mặc định của User là tên Viết tắt trên dự án Laravel
5/5 1 votes

Comments

Để lại bình luận:
Vui lòng đăng nhập hoặc đăng ký mới tài khoản bạn nhé:
Login Register

Nội dung

    Tags
    Laravel (29) Laravel 5.5 (9) Võ Lâm (6) Bug (5) Scripts Auto Võ Lâm (5) Võ Lâm Truyền Kỳ (4) Auto Lọc Đồ Võ Lâm (4) Laravel 5.7 (4) Blade (3) Laravel Blade (3) Php (3) Laravel Router (3) 10K Brse (2) Kokusho (2) Kanji (2) Android (2) Tự Động Từ (2) Tha Động Từ (2) Trợ Từ (2) Authentication (2) Business Email (2) Laravel 5.4 (2) View (2) Sublime Text (2) Mysql (2) ゆうちょ銀行 (2) Laravel Mail (2) Xampp (2) Laravel Mix (2) Laravel Localization (2) Tiêu Chuẩn Php (2) Hớt Tóc (1) Meros (1) Luyện Nghe Tiếng Nhật (1) Luyện Nói Tiếng Nhật (1) Shadowing (1) Shadowing Japanese (1) Katakana (1) Giáo Trình (1) Party (1) Yotsuya (1) Okonomiyaki (1) Yakisoba (1) Lol (1) Nhật Ký (1) Kanji Study (1) Đồ Dùng (1) Dưa Leo Đẹp Trai (1) Vlog (1) Động Đất (1) Sóng Thần (1) Trần Hoàng Trung Tín (1) Tokyo (1) Wakarimasen (1) Shirimasen (1) Suối Nước Nóng (1) Onsen (1) Đặc Sản Nhật Bản (1) Debugbar (1) Laravel 5.2 (1) Từ Điển (1) Tính Từ (1) Danh Từ (1) Minna No Nihongo (1) Minna No Nihongo 1 (1) Minna No Nihongo 2 (1) Tài Liệu (1) Ngọc Bổ Trợ (1) Liên Minh Huyền Thoại (1) Truyện Ngắn (1) 12 Con Giáp (1) Lễ Hội (1) Itabashi (1) Đường Lưỡi Bò (1) Weibo (1) Cách Sử Dụng Kara (1) Curriculum Vitae (1) Phân Biệt (1) Cách Sử Dụng Youni (1) Cách Sử Dụng Tameni (1) Note (1) Cách Sử Dụng Node (1) Cách Sử Dụng Te (1) Từ Láy (1) Hostinger (1) Kết Nối Mysql Từ Xa (1) Seven Eleven (1) Lawson (1) In Tiết Kiệm (1) Laravel 5.3 (1) Socialite (1) Thuật Toán Sort (1) Kính Ngữ (1) Khiêm Nhường Ngữ (1) Tag (1) Social Authentication (1) Demo (1) Html (1) Form (1) Helper Function (1) Editor (1) Tool (1) Thiết Kế Web (1) Notify (1) Notification (1) Hosting (1) Database (1) Localstorage (1) Client (1) Response (1) Google Cse (1) Blade If (1) Whoops (1) Exception (1) Router (1) Package (1) Update (1) Nhật Bản (1) Chuyển Tiền (1) Dcom (1) Request (1) Validate (1) Atm (1) Eloquent (1) Tips And Tricks (1) Office Professional 2016 (1) Vps Config (1) Laravel 5.6 (1) Laravel Sitemap (1) Postman (1) Lấy Cao Răng Ở Nhật (1) Cryptocurrency (1) Php 7.2 (1) Composer (1) Xampp Virtual Domain (1) Xampp Virtual Host (1) Cách Nạp Tiền Vào Thẻ Dcom (1) Chuyển Tiền Từ Nhật Về Việt Nam (1) Dcom Chuyển Tiền Nhật Việt (1) Gửi Tiền Từ Nhật Về Việt Nam (1) Chuyen Tien Dcom (1) Cài Đặt Laravel (1) Laravel Installation (1) Cấu Hình Laravel (1) Laravel Configuration (1) Cấu Trúc Thư Mục Của Laravel (1) Laravel Folder Structure (1) Laravel Directory Structure (1) Laravel Routing (1) Photoshop Cs6 (1) Recaptcha (1) Excel (1) Editorconfig (1) Error Message (1) Laravel Relationship (1) Many-To-Many (1) Email Verification (1) Ffmpeg (1) Code Standard (1) Code Chuẩn Laravel (1) Đa Ngôn Ngữ (1) Laravel Pagination (1) Laravel Phân Trang (1) Laravel Error (1) Yahoo Mail (1) Chuyển Tiền Việt Nhật (1) Chuyển Tiền Nhật Việt (1) Phím Tắt Sublime Text (1) Laravel 5.5 (1) Wifi Ở Nhật Bản (1) Wifi Tại Nhật Bản (1) Mạng Wifi Ở Nhật Bản (1) Sử Dụng Wifi Ở Nhật Bản (1) Đăng Kí Wifi Ở Nhật Bản (1) Lắp Wifi Ở Nhật Bản (1) Laravel Model (1) Toastr (1) Utf-8 Bom (1) Utf-8 Without Bom (1) Psr-1 (1) Laravel Avatar (1) Psr-2 (1) Thuật Ngữ Laravel (1) Faststone Capture (1) Quay Phim Màn Hình (1) Chụp Ảnh Màn Hình (1) Phần Mềm Chụp Ảnh Màn Hình (1) Best Screen Capture (1) Screen Recorder (1) Nâng Cấp Laravel (1) Upgrade Laravel Version (1) Update Laravel To 5.7 (1) Laravel Validation (1) Laravel Formrequest (1) Laravel Modify Input (1) Chung.luac (1) Cộng Đồng Võ Lâm (1) Võ Lâm Server Test Vĩnh Viễn (1) Mail (0)