MASIGNALPHA101

Tutorial Laravel 5.5 - Mengupload Image menggunakan CDN Gratis Cloudinary

Tutorial Laravel 5.5 - Mengupload Image menggunakan CDN Gratis Cloudinary
Saturday, August 25, 2018

Jika sebelumnya saya menjelaskan mengenai upload image menggunakan Amazon S3, pada artikel kali ini saya akan menjelaskan bagaimana cara mengupload image dengan menggunakan Cloudinary. Jika Amazon S3 adalah layanan premium maka kita bisa memanfaatkan Cloudinary ini sebagai alternatif nya karena layanan gratis yang disediakan oleh Cloudinary ini sudah cukup besar yaitu 10GB untuk storage.

Salah satu keunggulan menggunakan layanan Cloudinary ini adalah anda dapat menghemat space storage serta bandwidth dari hosting yang anda pakai. Anda dapat mengupload file seperti gambar dan video pada Cloudinary ini. Berikut ini adalah langkah-langkah yang harus anda lakukan :

#Membuat akun Cloudinary

Gunakan link berikut https://cloudinary.com/ dan lakukan registrasi. Isilah data-data yang diperlukan dan kemudian cek email anda untuk melakukan aktivasi akun. Setelah semua proses selesai anda akan melihat tampilan dashboard dari akun anda seperti gambar di bawah ini.

Dashboard Cloudinary
Pada tampilan dashboard tersebut ada 3 informasi yang perlu anda simpan karena nantinya akan digunakan pada program laravel yaitu, Cloud name, API Key, dan API Secret.


#Menginstall Package jrm2k6/cloudder

Langkah selanjutnya adalah menginstall package yang sudah disediakan untuk memanipulasi data pada Cloudinary yaitu jrm2k6/cloudder. Caranya adalah dengan menjalankan perintah composer di bawah ini pada direktori program laravel anda

composer require jrm2k6/cloudder

Setelah proses tersebut selesai silahkan tambahkan kode di bawah ini pada file config/app.php.

'providers' => array(
  'JD\Cloudder\CloudderServiceProvider'
);

'aliases' => array(
  'Cloudder' => 'JD\Cloudder\Facades\Cloudder'
);

Seperti biasanya tambahkan providers pada bagian providers dan aliases pada bagian aliases seperti anda menginstall package laravel lainnya.

Kemudian jalankan perintah artisan di bawah ini pada command prompt direktori program anda 

php artisan vendor:publish --provider="JD\Cloudder\CloudderServiceProvider"

Untuk lebih jelasnya dapat anda lihat pada gambar di bawah ini


Langkah terakhir yang perlu anda lakukan adalah menambahkan variabel pada file .env.

CLOUDINARY_API_KEY=xxxxx
CLOUDINARY_API_SECRET=yyyyy
CLOUDINARY_CLOUD_NAME=zzzzz

Isilah variabel-variabel tersebut dengan 3 informasi yang terdapat pada dashboard Cloudinary anda sebelumnya. 


#Contoh Penggunaan pada Laravel

Berikut ini adalah contoh bagaimana melakukan upload Image pada Cloudinary

    public function uploadCloudinary(Request $request){
        Cloudder::upload($request->file('fileToUpload'));
        // Cloudder::upload($request->file('fileToUpload'),null, ['folder' => 'Test/']);
        $c=Cloudder::getResult();
        dd($c);
    }

Perintah dasar yang digunakan untuk melakukan upload adalah 

        Cloudder::upload($request->file('fileToUpload'));

Untuk mendapatkan hasil upload digunakan perintah berikut

       Cloudder::getResult();

Disini saya menggunakan dd($c) untuk melihat nilai kembalian dari file yang saya upload. Berikut ini adalah hasil yang muncul


Pada gambar di atas dapat anda lihat terdapat informasi public_id, url, dan secure_url. Jika program anda menyimpan informasi gambar pada database maka data-data inilah yang menurut saya perlu anda simpan dalam database anda. 
  • public_id digunakan sebagai primary key dari image yang anda buat. Nantinya public_id yang akan digunakan jika anda ingin menghapus image tersebut atau mendapatkan informasi-informasi lainnya.
  • url digunakan sebagai url yang menampilkan image yang anda upload pada Cloudinary
  • secure_url sama dengan url hanya menggunakan https 
Pada contoh kode di atas terdapat kode yang saya comment //. Kode tersebut digunakan jika anda ingin melakukan upload image ke dalam folder tertentu pada Cloudinary. Silahkan ubah nilai pada bagian folder dan sesuaikan dengan nama folder yang anda buat.

Sedangkan jika anda ingin menghapus image pada Cloudinary gunakan perintah berikut

Cloudder::delete($publicId)

Dimana $publicId adalah public_id dari image yang ingin anda hapus. 

Perintah-perintah lengkapnya jika misalnya anda membutuhkan hal-hal lainyya dapat anda baca pada link berikut https://github.com/jrm2k6/cloudder. Pada link tersebut diberikan informasi lengkap kode-kode perintah apa saja yang dimiliki oleh package tersebut.


Demikianlah artikel Tutorial Laravel 5.5 - Mengupload Image menggunakan CDN Gratis Cloudinary. Semoga penjelasan di atas dapat dimengerti dan selamat mencoba.
Davnsial ID

Penggemar coding. Seseorang yang suka belajar sesuatu yang baru. terutama tentang pemrograman web dan desain web. senang berbagi tentang pengetahuan dan belajar dari orang lain.