Membuat Laravel Cloud Image Upload Dengan Cloudinary

Di artikel kali ini saya akan kembali membahas tentnag framework laravel yaitu dimana kini akan di bahas mengenai Merancang Laravel Cloud Image Upload Dengan Cloudinary.

Penyusunan artikel ini di dasari oleh sebuah keperluan pada penyusunan laman khususnya yang mana laman tersebut mempunyai frekuensi upload gambar yang benar-benar banyak, contohnya laman ecomerce dimana akan selalu ada upload produk yang mana pasti mempunyai sebuah atau lebih gambar.

Di sini saya akan memanfaatkan Cloudinary bagi cloude storage nya yang mana nanti gambar akan terupload ke sana dengan bantuan laravel, baiklah kit seketika saja memulainya .

Tahap pertama-tama sahabat mesti mendaftarkan akun sahabat di cloudinaryÂ Â setelah mendaftar karenanya akan masuk halaman dasboard :

Dapat di perhatikan bagian

Cloud name:

API Key:

API Secret:Â *****************

bagian di atasl lah yang akan menjadi penghubung antara cloud dengan program laravel kita .

Tahap berikutnya [embuatan aplikasinya dengan laravel :

Tambahkan sintak berikut ke compose.json :

“cloudinary/cloudinary_php”: “dev-master”,

1	“cloudinary/cloudinary_php”: “dev-master”,

berikutnya lakukan composer update di terminal

composer update

1	composer update

Lalu bikin form nya :

<form class=”contact100-form validate-form” action=”/upload” method=”POST” enctype=”multipart/form-data” ><br />
		{{ csrf_field() }}<br />
		<span class=”contact100-form-title”><br />
			Upload Gambar Sahabat<br />
		</span></p>
<p>		<div class=”wrap-input100 validate-input” data-validate = “Image is required”><br />
			<input class=”input100″ type=”text” name=”image-name” placeholder=”Nama gambar” ><br />
			<span class=”focus-input100″></span><br />
			<span class=”symbol-input100″><br />
				<i class=”fa fa-user” aria-hidden=”true”></i><br />
			</span><br />
		</div></p>
<p>		<div class=”wrap-input100 validate-input” data-validate = “Image is required”><br />
			<input class=”input100″ type=”file” name=”image” ><br />
			<span class=”focus-input100″></span><br />
			<span class=”symbol-input100″><br />
				<i class=”fa fa-user” aria-hidden=”true”></i><br />
			</span><br />
		</div><br />
		<div class=”container-contact100-form-btn”><br />
			<button class=”contact100-form-btn”><br />
				Upload To Cloudinary<br />
			</button><br />
		</div><br />
	</form>

Upload Gambar Sahabat

</span>

</span>

</div>

</span>

</div>

Upload To Cloudinary

</button>

</div>

</form>

Lalu bikin controler nya UploadController.php :

<?php</p>
<p>namespace AppHttpControllers;</p>
<p>use IlluminateHttpRequest;<br />
use IlluminateSupportStr;<br />
use IlluminateSupportFacadesRedirect;</p>
<p>class UploadController extends Controller<br />
{<br />
    /**<br />
	 * Construct function of the resource.<br />
	 *<br />
	 * @return IlluminateHttpResponse<br />
	 */<br />
	public function __construct() {<br />
		/**<br />
		 * Set your APIKey Cloudinary<br />
		 * cloudname<br />
		 * api_key<br />
		 * api_secret<br />
		 */<br />
		Cloudinary::config(array(<br />
			“cloud_name” => “baylilab”,<br />
			“api_key” => “549619437375373”,<br />
			“api_secret” => “your secret key”,<br />
		));<br />
	}</p>
<p>	public function index()<br />
	{<br />
		$title = “Form upload”;<br />
		return view(‘form_upload’, compact(‘title’));<br />
	}</p>
<p>    /**<br />
	 * Bagi upload ke cloudinary<br />
	 *<br />
	 */<br />
	public function upload(Request $request) {</p>
<p>		$judul_file = $request->get(‘image-name’);<br />
		$gambar = $request->file(‘image’);<br />
                $nama_file = Str::slug($judul_file);<br />
		$upload = CloudinaryUploader::upload($gambar, array(“public_id” => $nama_file));<br />
		return redirect(‘show/’.$nama_file);</p>
<p>	}</p>
<p>        /**<br />
          * Bagi memunculkan gambarnya<br />
         * */<br />
	public function show($param)<br />
	{<br />
		$url = cl_image_tag($param);<br />
		$title = “Show image”;<br />
		return view(‘show_image’, [‘url’ => $url, ‘title’ => $title]);<br />
	}<br />
}

(Visited 8 times, 1 visits today)

Leave a Reply Cancel reply