Pada artikel kali ini saya akan kembali membahas tentnag framework laravel yaitu dimana sekarang akan di bahas tentang Membuat Laravel Cloud Image Upload Dengan Cloudinary.
Pembuatan artikel ini di dasari oleh sebuah kebutuhan dalam pembuatan website khususnya yang mana website tersebut memiliki frekuensi upload gambar yang sangat banyak, contohnya website ecomerce dimana akan selalu ada upload produk yang mana pasti memiliki sebuah atau lebih gambar.
Di sini saya akan memanfaatkan Cloudinary untuk cloude storage nya yang mana nanti gambar akan terupload ke sana dengan bantuan laravel, baiklah kit langsung saja memulainya .
Tahap pertama anda harus mendaftarkan akun anda di cloudinary  setelah mendaftar maka akan masuk halaman dasboard :
Bisa di perhatikan bagian
bagian di atasl lah yang akan menjadi penghubung antara cloud dengan aplikasi laravel kita .
Tahap selanjutnya [embuatan aplikasinya dengan laravel :
Tambahkan sintak berikut ke compose.json :
|
1 |
"cloudinary/cloudinary_php": "dev-master", |
selanjutnya lakukan composer update pada terminal
|
1 |
composer update |
Lalu buat form nya :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<form class="contact100-form validate-form" action="/upload" method="POST" enctype="multipart/form-data" > {{ csrf_field() }} <span class="contact100-form-title"> Upload Gambar Anda </span> <div class="wrap-input100 validate-input" data-validate = "Image is required"> <input class="input100" type="text" name="image-name" placeholder="Nama gambar" > <span class="focus-input100"></span> <span class="symbol-input100"> <i class="fa fa-user" aria-hidden="true"></i> </span> </div> <div class="wrap-input100 validate-input" data-validate = "Image is required"> <input class="input100" type="file" name="image" > <span class="focus-input100"></span> <span class="symbol-input100"> <i class="fa fa-user" aria-hidden="true"></i> </span> </div> <div class="container-contact100-form-btn"> <button class="contact100-form-btn"> Upload To Cloudinary </button> </div> </form> |
Lalu buat controler nya UploadController.php :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use Illuminate\Support\Str; use Illuminate\Support\Facades\Redirect; class UploadController extends Controller { /** * Construct function of the resource. * * @return \Illuminate\Http\Response */ public function __construct() { /** * Set your APIKey Cloudinary * cloudname * api_key * api_secret */ \Cloudinary::config(array( "cloud_name" => "baylilab", "api_key" => "549619437375373", "api_secret" => "your secret key", )); } public function index() { $title = "Form upload"; return view('form_upload', compact('title')); } /** * Untuk upload ke cloudinary * */ public function upload(Request $request) { $judul_file = $request->get('image-name'); $gambar = $request->file('image'); $nama_file = Str::slug($judul_file); $upload = \Cloudinary\Uploader::upload($gambar, array("public_id" => $nama_file)); return redirect('show/'.$nama_file); } /** * Untuk memunculkan gambarnya * */ public function show($param) { $url = cl_image_tag($param); $title = "Show image"; return view('show_image', ['url' => $url, 'title' => $title]); } } |
Jangan lupa atur routenya :
|
1 2 3 4 5 |
Route::get('/', 'UploadController@index'); // route untuk menampilkan form nya Route::post('upload', 'UploadController@upload'); // route untuk uploadnya Route::get('show/{id}', 'UploadController@show'); //route untuk ke halman show |
Untuk proses upload hanya seperti ini saja , tinggal kalian sesuaikan dengan project kalian masing-masing, tutorial ini hanya menggambarkan prosesnya saja karena ini saya ambil dari project saya jadi jangan copas tetapi ambil saja yang core nya dan sesuaikan dengan projek kalian.