~ We are changing the world with technology. ~

Matt Mullenweg

Upload & Resize Image di Laravel 5.7

Upload & Resize Image di Laravel 5.7

8319 Dilihat

Pendahuluan

Fitur upload gambar merupakan fitur yang kerap kali ada dalam sebuah aplikasi, misalnya saja e-commerce yang menghimpun banyak gambar produk untuk ditampilkan. Jika kebutuhan kita akan gambar yang diterima adalah sesuai dengan dimensi yang dikirimkan oleh user, maka artikel Upload file di Laravel 5 sudah cukup untuk mengatasi solusi tersebut.

Namun, akan berbeda hal nya jika kita ingin memanipulasi gambar yang diterima menjadi berbagai ukuran. Masalah yang sering kali ditemui adalah ketika dimensi dari gambar tersebut berubah maka tampilan gambar juga kadang berubah, misalnya saja terlihat gepeng.

Baca Juga: Membuat Fitur Bulk Import Data CSV Laravel 5.6

Persiapan Form Upload Image

Sebenarnya pendekatan ini tidak terbatas pada Laravel 5.7 saja, hanya saja saat artikel ini dituliskan, Laravel berada pada versi tersebut. So, kita memulainya dengan Laravel fresh install:

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

Sedangkan library yang akan digunakan untuk memudahkan dalam memanipulasi image adalah package Image intervention. Install package tersebut dengan command:

composer require intervention/image

Buat table untuk menampung image yang telah di-upload:

php artisan make:model Image_uploaded -m

Modifikasi migration dari Image_uploaded menjadi:

Schema::create('image_uploadeds', function (Blueprint $table) {
    $table->increments('id');
    $table->string('name');
    $table->string('dimensions');
    $table->string('path');
    $table->timestamps();
});

Jangan lupa untuk menjalankan command php artisan migrate, kemudian buka file model Image_uploaded.php kemudian tambahkan code berikut:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Image_uploaded extends Model
{
    protected $guarded = []; //tambahkan baris ini
}

Sedangkan untuk form upload image-nya, kita modifikasi file welcome.blade.php, sederhana saja karena yang akan dicapai dalam artikel ini adalah bagaimana meng-upload image sekaligus memanipulasi menjadi beberapa dimensi.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Daengweb - Upload image</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <div class="row mt-4">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <form action="{{ route('upload.image') }}" method="post" enctype="multipart/form-data">
                            @csrf

                            @if (session('success'))
                                <div class="alert alert-success">
                                    {{ session('success') }}
                                </div>
                            @endif

                            <div class="form-group">
                                <label for="">Pilih gambar</label>
                                <input type="file" name="image">
                                <p class="text-danger">{{ $errors->first('image') }}</p>
                            </div>
                            <div class="form-group">
                                <button class="btn btn-danger btn-sm">Upload</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Upload Image Laravel

Request yang dikirimkan oleh user akan di-handle dicontroller, so buat controller dengan command:

php artisan make:controller UploadImageController

Buka file UploadImageController.php kemudian tambahkan code berikut:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Image_uploaded;
use Carbon\Carbon;
use Image;
use File;

class UploadImageController extends Controller
{
    public $path;
    public $dimensions;

    public function __construct()
    {
        //DEFINISIKAN PATH
        $this->path = storage_path('app/public/images');
        //DEFINISIKAN DIMENSI
        $this->dimensions = ['245', '300', '500'];
    }

    public function upload(Request $request)
    {
        $this->validate($request, [
            'image' => 'required|image|mimes:jpg,png,jpeg'
        ]);
		
        //JIKA FOLDERNYA BELUM ADA
        if (!File::isDirectory($this->path)) {
            //MAKA FOLDER TERSEBUT AKAN DIBUAT
            File::makeDirectory($this->path);
        }
		
        //MENGAMBIL FILE IMAGE DARI FORM
        $file = $request->file('image');
        //MEMBUAT NAME FILE DARI GABUNGAN TIMESTAMP DAN UNIQID()
        $fileName = Carbon::now()->timestamp . '_' . uniqid() . '.' . $file->getClientOriginalExtension();
        //UPLOAD ORIGINAN FILE (BELUM DIUBAH DIMENSINYA)
        Image::make($file)->save($this->path . '/' . $fileName);
		
        //LOOPING ARRAY DIMENSI YANG DI-INGINKAN
        //YANG TELAH DIDEFINISIKAN PADA CONSTRUCTOR
        foreach ($this->dimensions as $row) {
            //MEMBUAT CANVAS IMAGE SEBESAR DIMENSI YANG ADA DI DALAM ARRAY 
            $canvas = Image::canvas($row, $row);
            //RESIZE IMAGE SESUAI DIMENSI YANG ADA DIDALAM ARRAY 
            //DENGAN MEMPERTAHANKAN RATIO
            $resizeImage  = Image::make($file)->resize($row, $row, function($constraint) {
                $constraint->aspectRatio();
            });
			
            //CEK JIKA FOLDERNYA BELUM ADA
            if (!File::isDirectory($this->path . '/' . $row)) {
                //MAKA BUAT FOLDER DENGAN NAMA DIMENSI
                File::makeDirectory($this->path . '/' . $row);
            }
        	
            //MEMASUKAN IMAGE YANG TELAH DIRESIZE KE DALAM CANVAS
            $canvas->insert($resizeImage, 'center');
            //SIMPAN IMAGE KE DALAM MASING-MASING FOLDER (DIMENSI)
            $canvas->save($this->path . '/' . $row . '/' . $fileName);
        }
        
        //SIMPAN DATA IMAGE YANG TELAH DI-UPLOAD
        Image_uploaded::create([
            'name' => $fileName,
            'dimensions' => implode('|', $this->dimensions),
            'path' => $this->path
        ]);
        return redirect()->back()->with(['success' => 'Gambar Telah Di-upload']);
    }
}

Terakhir buka file routes/web.php kemudian tambahkan code berikut untuk meng-handle route uploading:

Route::post('/', '[email protected]')->name('upload.image');

Adapun hasil yang akan diperoleh ketika file telah di-upload akan tampak seperti berikut

resizing image uploaded laravel

Sedangkan file yang telah di-upload akan disimpan kedalam folder storage/app/public/image dan masing-masing image yang telah di-resize sesuai dimensi yang di-inginkan akan ditempatkan kedalam folder sesuai dengan dimensinya.

cara resize image upladed laravel

Baca Juga: Tips Menggunakan Eloquent Laravel

Kesimpulan

Resizing image menjadi penting agar supaya ketika ditampilkan pada halaman web, dimensi yang di-develiery adalah dimensi originalnya tanpa perlu lagi diatur ukurannya menggunakan property width dan height pada HTML / CSS. Hal ini tentu saja berpengaruh pada SEO karena user tidak perlu lagi me-load image yang besar, sedangkan yang ditampilkan justru berbeda, tentu saja juga akan mengurangi load time.

Ohya untuk dokumentasi code-nya dapat kamu lihat di Github.

Backend Developer iTechShark, salah satu perusahaan asal Amerika. Senang dengan teknologi baru. Laravel addict yang tidak fanatik. Merekam jejak dengan menulis

Aplikasi Laundry (Laravel 5.8 - Vue.js - SPA) #6: Role & User Permissions Laravel VueJS

Aplikasi Laundry (Laravel 5.8 - Vue.js -...

Sambil menikmati secangkir kopi ini, kutuliskan serial lanjutan membuat Aplikasi Laundry menggunakan Laravel 5.8 & Vue.js dengan metode SPA (Single Page Application) yang telah memasuki serial ke-6 ny...

Aplikasi Laundry (Laravel 5.8 - Vue.js - SPA) #5: Manage Laundry Products Laravel VueJS

Aplikasi Laundry (Laravel 5.8 - Vue.js -...

Usaha laundry tak hanya mencakup satu bagian saja yakni laundry kiloan, akan tetapi telah memiliki banyak variant diantaranya, laundry jaket, selimut dan berbagai macam yang bersifat satu. Tidak cukup...

Tips Optimasi Meningkatkan Performance Laravel Laravel News

Tips Optimasi Meningkatkan Performance L...

Performance menjadi sebuah titik perhatian yang cukup menarik bagi para pemilik aplikasi, bagaimana tidak, selain kaya akan fitur dan sesuai dengan yang diinginkannya, ada hal yang tidak kalah penting...

Komentar