CRUD Image with Cloud Storage Cloudinary

Cloudinary merupakan sebuah layanan untuk menyimpan serta mengelola media seperti image dan video secara online/cloud. Alasan mengapa menggunakan cloudianry ini adalah terdapat layanan gratis yang dapat menyimpan media sebesar 25GB. Selain itu Cloudinary support berbagai bahasa pemrograman dan juga banyak framework seperti nodejs, ruby on rail, laravel dan lain-lain.

Install project laravel 8 disini saya beri nama project saya dengan nama uploadimagecloud

composer create-project laravel/laravel uploadimagecloud

Buka project laravel uploadimagecloud dengan text editor

Arahkan kedirectory project kemudian ketikan perintah untuk menginstall package cloudinary

composer require cloudinary-labs/cloudinary-laravel

Kemudian jalankan perintah artisan:

php artisan vendor:publish --provider="CloudinaryLabsCloudinaryLaravelCloudinaryServiceProvider" --tag="cloudinary-laravel-config

Setelah itu buka config->app.php ketikkan source code

'aliases' => [

    'Cloudinary' => CloudinaryLabsCloudinaryLaravelFacadesCloudinary::class,
]

Jalankan perintah artisan: php artisan make:model Image -mcr

Untuk generate file model, migration, controller resource image, kemudian buka database->migrations cari file createimagestable ketikkan source code berikut

Schema::create('images', function (Blueprint $table) {
    $table->id();
    $table->string('image');
    $table->timestamps();
});

Jalankan perintah artisan: php artisan migrate

Berikutnya buka app->Models->Image.php ktikkan source code

class Image extends Model
{
    use HasFactory;

    protected $guarded = [];
}

Kunjungi cloudinary.com buat akun jika belum punya akun kemudian masuk pada menu Dashboard untuk melihat detail akun beserta configurasi API

Buka file .env pada akhir baris tambahkan source code

CLOUDINARYAPIKEY=yourapikey
CLOUDINARYAPISECRET=yourapisecret
CLOUDINARYURL=CLOUDINARYyourapienvirontmentvariable
CLOUDINARYUPLOADPRESET=https://api.cloudinary.com/v11/yourcloudname/image/upload
CLOUDINARYNOTIFICATIONURL=

Sesuaikan env pada menu dashboard temen-temen nah untuk CLOUDINARYURL bisa temen-temen copy dari API Environtment variable

Kemudian balik lagi ke website dashboard cloudinary menuju ke menu Media Library lalu Add folder tutorial

Buat Controller baru sebagai helper yang nanti nya File kita akan disimpan didalam cloudinary dengan mengetikkan perintah artisan: php artisan make:controller CloudinaryStorage

Buka app->Http->Controllers->CloudinaryStorage.php

class CloudinaryStorage extends Controller
{
    private const folderpath = 'tutorial';

    public static function path($path){
        return pathinfo($path, PATHINFOFILENAME);
    }

    public static function upload($image, $filename){
        $newFilename = strreplace(' ', '', $filename);
        $publicid = date('Y-m-dHis').''.$newFilename;
        $result = cloudinary()->upload($image, [
            "publicid" => self::path($publicid),
            "folder"    => self::folderpath
        ])->getSecurePath();

        return $result;
    }

    public static function replace($path, $image, $publicid){
        self::delete($path);
        return self::upload($image, $publicid);
    }

    public static function delete($path){
        $publicid = self::folderpath.'/'.self::path($path);
        return cloudinary()->destroy($publicid);
    }
}

Selanjutnya buka app->Http->Controllers->ImageController.php

//Tambahkan controller CloudinaryStorage
use AppHttpControllersCloudinaryStorage;
class ImageController extends Controller
{
    public function index()
    {
        return view('listimage', ['images' => Image::get()]);
    }

    public function create()
    {
        return view('uploadcreate');
    }

    public function store(Request $request)
    {
        $image  = $request->file('image');
        $result = CloudinaryStorage::upload($image->getRealPath(), $image->getClientOriginalName()); 
        Image::create(['image' => $result]);
        return redirect()->route('images.index')->withSuccess('berhasil upload');
    }

    public function show($id)
    {
        //
    }

    public function edit(Image $image)
    {
        return view('uploadupdate', compact('image'));
    }

    public function update(Request $request, Image $image)
    {
        $file   = $request->file('image');
        $result = CloudinaryStorage::replace($image->image, $file->getRealPath(), $file->getClientOriginalName());
        $image->update(['image' => $result]);
        return redirect()->route('images.index')->withSuccess('berhasil upload');
    }

    public function destroy(Image $image)
    {   
        CloudinaryStorage::delete($image->image);
        $image->delete();
        return redirect()->route('images.index')->withSuccess('berhasil hapus');;
    }
}

Kemudian buka routes->web.php, isikan berikut

use AppHttpControllersImageController;
Route::resource('images', ImageController::class);

Kemudian buat tampilan halaman list image dengan nama listimage.blade isikan berikut

<!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>Document</title>
</head>
<body>
    @if (session('success'))
        <div>{{ session('success') }}</div>
    @endif
    <div>
        <a href="{{route('images.create')}}">Tambah</a>
    </div>
    <table>
        <thead>
            <tr>
                <th>No.</th>
                <th>Gambar</th>
                <th>Aksi</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($images as $image)
                <tr>
                    <td>{{ $loop->iteration }}.</td>
                    <td><img src="{{ $image->image }}" width="150px"></td>
                    <td>
                        <a href="{{ route('images.edit', $image) }}">Ubah</a>
                        
                        <div style="margin-left:10px; float: right;">
                            <form action="{{ route('images.destroy', $image) }}" method="POST">
                                @csrf
                                @method('DELETE')
                                <button type="submit" >Hapus</button>
                            </form>
                        </div>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</body>
</html>

kemudian buat tampilan halaman tambah image dengan nama uploadcreate.blade isikan berikut

<!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>Document</title>
</head>
<body>
    <h2>Halaman Tambah Upload Image</h2>
    @if (session('success'))
        <div>{{ session('success') }}</div>
    @endif
    <form action="{{ route('images.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <input type="file" name="image">
        <p>
            <button type="submit">Upload</button>
        </p>
    </form>
</body>
</html>

Kemudian buat tampilan halaman ubah image dengan nama uploadupdate.blade isikan berikut

<!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>Document</title>
</head>
<body>
    <h2>Halaman Tambah Upload Image</h2>
    @if (session('success'))
        <div>{{ session('success') }}</div>
    @endif
    <form action="{{ route('images.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <input type="file" name="image">
        <p>
            <button type="submit">Upload</button>
        </p>
    </form>
</body>
</html>

Selesai, selamat mencoba coders!