Cara memasang Object Storage (S3) pada Laravel

Terakhir diupdate: 19 Maret 2025

Pengantar

Halo Sobat Jagoan!

Tahukah kamu bahwa object storage itu bisa banyak bermanfaat buat aplikasi kamu loh Sob, Salah satunya adalah sebagai tempat menyimpan gambar atau asset dari aplikasi kamu.

Manfaat lain dari memasang Object Storage selain digunakan untuk media penyimpanan adalah bisa mempercepat loading dari aplikasi yang kita jalankan nih Sob. Nah sekarang kita bahas bagaimana Caranya Memasang Object Storage (S3) Pada Laravel.

Simak tutorialnya baik-baik ya Sob!

Object Storage Itu Apa Ya?

Object Storage Adalah sebuah media penyimpanan yang khusus untuk gambar / asset yang lokasinya tidak menjadi satu dengan storage server aplikasimu. Sehingga tidak akan menambah kapasitas server / hosting aplikasimu.

Kapan Object Storage Itu Dibutuhkan?

Ketika storage pada aplikasi / server kamu semakin lama semakin mengecil, sedangkan ada banyak gambar / asset yang harus kamu simpan. Atau ketika kamu sedang menggunakan cluster server. Ingat, Object storage tidak bisa digunakan untuk menyimpan database dan file dari program aplikasi mu. Object Storage hanya bisa menyimpan file statis saja, contohnya : .png, .jpeg, .mp3 dll.

Apa Saja Manfaat dari Object Storage?

Karena file gambar / asset tidak tersimpan pada server / hosting aplikasimu, jika kamu ingin memindahkan server kemanapun, karena yang dipindah hanya aplikasi saja tanpa memindahkan assetnya.
Lebih hemat jika aplikasi kamu membutuhkan storage yang besar, namun menggunakan server / hosting yang kecil karena memang tidak membutuhkan resource yang besar.
Dengan menggunakan Object Storage, kamu bisa mengaktifkan fitur CDN yang dapat meningkatkan kecepatan website kamu.

Langkah-Langkah Pemasangan Object Storage

Nahh untuk mengetahui langkah-langkah yang lebih detail terkait cara memasang Object Storage pada Laravel, langsung aja ikutin step by step dibawah ini ya Sob!

1. Mempersiapkan Object Storage

Masuk ke member area JagoanHosting dan masuk kedalam layanan Object Storage untuk mendapatkan Access Key dan Secret Key. Selain itu kamu perlu membuat juga sebuah Bucket disini. Kamu bisa buat sebuah Bucket dengan nama sesuai yang kamu inginkan, misalnya adalah namadomain.com

Tampilan Layanan Object Storage

2. Installasi Laravel

Pastikan kamu sudah menginstall laravel ya sob. Kamu bisa ikuti panduan installasi laravel pada website resmi laravel disini : laravel.

3. Installasi Library Tambahan

Masuk ke root folder aplikasi kamu, dan jalankan perintah:

				
					composer require league/flysystem-aws-s3-v3 "^3.0"

Setelah itu, tunggu hingga prosesnya selesai ya Sob.

4. Konfigurasi File .env

Sekarang waktunya untuk melakukan konfigurasi dari object storage. Buka file .env dan ubah konfigurasi sesuai dengan panduan dibawah ini :

				
					AWS_ACCESS_KEY_ID= "{{access_key}}"
AWS_SECRET_ACCESS_KEY= "{{secret_key}}"
AWS_DEFAULT_REGION= ""
AWS_BUCKET= "{{nama_bucket_yang_kamu_buat}}"
AWS_URL="https://global.jagoanstorage.com/{{nama_bucket_yang_kamu_buat}}"
AWS_USE_PATH_STYLE_ENDPOINT= true
AWS_ENDPOINT= "https://s3.jagoanstorage.com"

Membuat Proses Upload File

Nah, untuk membuat proses upload file ada beberapa langkah tambahan nih Sob, jadi pastikan kalian benar-benar mencermati bagian yang ini ya!

1. Membuat Controller

Masuk kedalam root folder laravel dan jalan perintah dibawah ini:

				
					php artisan make:controller UploadController

Perintah diatah fungsinya adalah untuk membuat sebuah controller dengan nama Upload Controller. Kamu bisa cek hasilnya di app/Http/Controllers/UploadController.php

2. Membuat Tampilan Upload

Buka file UploadController.php, lalu sesuaikan isinya dengan script yang ada dibawah ini:

				
					<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

class UploadController extends Controller
{
// Fungsi untuk tampilan Upload
public function upload(){
    return view('upload');
    }
// Fungsi untuk proses Upload
public function proses_upload(Request $request){
    $this->validate($request, [
        'file' => 'required',
    ]);

    // menyimpan data file yang diupload ke variabel $file
    $file = $request->file('file');

    // isi dengan nama folder tempat kemana file diupload
    $tujuan_upload = 'laravel';

    // Proses Upload File ke Object Storage
    $result = Storage::disk('s3')->putFileAs($tujuan_upload, $file, $file->getClientOriginalName());
    // Proses merubah visibility file agar bisa di akses secara public
    Storage::disk('s3')->setVisibility($tujuan_upload."/".$file->getClientOriginalName(),"public");
    // Proses mengambil URL hasil upload
    echo Storage::disk('s3')->url($tujuan_upload."/".$file->getClientOriginalName());
    echo '<br>';

    print_r($result);
    die;
    }
}

Setelah itu buat view (tampilan untuk upload) dengan membuat file baru di app/resources/views/upload.blade.php. Lalu isikan dengan script dibawah ini :


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" data-pmdelayedstyle="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="row">
<div class="container">
<div class="col-lg-8 mx-auto my-5">
@if(count($errors) > 0)
<div class="alert alert-danger">
@foreach ($errors->all() as $error)
{{$error }} <br/>
@endforeach
</div>
@endif
<form action="/upload/proses" method="POST" enctype="multipart/form-data">
{{csrf_field() }}
<div class="form-group">
<b>File Gambar</b><br/>
<input type="file" name="file">
</div>
<input type="submit" value="Upload" class="btn btn-primary">
</form>
</div>
</div>
</div>
<script id="perfmatters-delayed-scripts-js">const pmDelayClick=true;const pmDelayTimer=setTimeout(pmTriggerDOMListener,10*1000);const pmUserInteractions=["keydown","mousedown","mousemove","wheel","touchmove","touchstart","touchend"],pmDelayedScripts={normal:[],defer:[],async:[]},jQueriesArray=[],pmInterceptedClicks=[];var pmDOMLoaded=!1,pmClickTarget="";function pmTriggerDOMListener(){"undefined"!=typeof pmDelayTimer&&clearTimeout(pmDelayTimer),pmUserInteractions.forEach(function(e){window.removeEventListener(e,pmTriggerDOMListener,{passive:!0})}),document.removeEventListener("visibilitychange",pmTriggerDOMListener),"loading"===document.readyState?document.addEventListener("DOMContentLoaded",pmTriggerDelayedScripts):pmTriggerDelayedScripts()}async function pmTriggerDelayedScripts(){pmDelayEventListeners(),pmDelayJQueryReady(),pmProcessDocumentWrite(),pmSortDelayedScripts(),pmPreloadDelayedScripts(),await pmLoadDelayedScripts(pmDelayedScripts.normal),await pmLoadDelayedScripts(pmDelayedScripts.defer),await pmLoadDelayedScripts(pmDelayedScripts.async),await pmTriggerEventListeners(),document.querySelectorAll("link[data-pmdelayedstyle]").forEach(function(e){e.setAttribute("href",e.getAttribute("data-pmdelayedstyle"))}),window.dispatchEvent(new Event("perfmatters-allScriptsLoaded")),pmWaitForPendingClicks().then(()=>{pmReplayClicks()})}function pmDelayEventListeners(){let e={};function t(t,n){function r(n){return e[t].delayedEvents.indexOf(n)>=0?"perfmatters-"+n:n}e[t]||(e[t]={originalFunctions:{add:t.addEventListener,remove:t.removeEventListener},delayedEvents:[]},t.addEventListener=function(){arguments[0]=r(arguments[0]),e[t].originalFunctions.add.apply(t,arguments)},t.removeEventListener=function(){arguments[0]=r(arguments[0]),e[t].originalFunctions.remove.apply(t,arguments)}),e[t].delayedEvents.push(n)}function n(e,t){let n=e[t];Object.defineProperty(e,t,{get:n||function(){},set:function(n){e["perfmatters"+t]=n}})}t(document,"DOMContentLoaded"),t(window,"DOMContentLoaded"),t(window,"load"),t(window,"pageshow"),t(document,"readystatechange"),n(document,"onreadystatechange"),n(window,"onload"),n(window,"onpageshow")}function pmDelayJQueryReady(){let e=window.jQuery;Object.defineProperty(window,"jQuery",{get:()=>e,set(t){if(t&&t.fn&&!jQueriesArray.includes(t)){t.fn.ready=t.fn.init.prototype.ready=function(e){pmDOMLoaded?e.bind(document)(t):document.addEventListener("perfmatters-DOMContentLoaded",function(){e.bind(document)(t)})};let n=t.fn.on;t.fn.on=t.fn.init.prototype.on=function(){if(this[0]===window){function e(e){return e=(e=(e=e.split(" ")).map(function(e){return"load"===e||0===e.indexOf("load.")?"perfmatters-jquery-load":e})).join(" ")}"string"==typeof arguments[0]||arguments[0]instanceof String?arguments[0]=e(arguments[0]):"object"==typeof arguments[0]&&Object.keys(arguments[0]).forEach(function(t){delete Object.assign(arguments[0],{[e(t)]:arguments[0][t]})[t]})}return n.apply(this,arguments),this},jQueriesArray.push(t)}e=t}})}function pmProcessDocumentWrite(){let e=new Map;document.write=document.writeln=function(t){var n=document.currentScript,r=document.createRange();let a=e.get(n);void 0===a&&(a=n.nextSibling,e.set(n,a));var i=document.createDocumentFragment();r.setStart(i,0),i.appendChild(r.createContextualFragment(t)),n.parentElement.insertBefore(i,a)}}function pmSortDelayedScripts(){document.querySelectorAll("script[type=pmdelayedscript]").forEach(function(e){e.hasAttribute("src")?e.hasAttribute("defer")&&!1!==e.defer?pmDelayedScripts.defer.push(e):e.hasAttribute("async")&&!1!==e.async?pmDelayedScripts.async.push(e):pmDelayedScripts.normal.push(e):pmDelayedScripts.normal.push(e)})}function pmPreloadDelayedScripts(){var e=document.createDocumentFragment();[...pmDelayedScripts.normal,...pmDelayedScripts.defer,...pmDelayedScripts.async].forEach(function(t){var n=t.getAttribute("src");if(n){var r=document.createElement("link");r.href=n,"module"==t.getAttribute("data-perfmatters-type")?r.rel="modulepreload":(r.rel="preload",r.as="script"),e.appendChild(r)}}),document.head.appendChild(e)}async function pmLoadDelayedScripts(e){var t=e.shift();return t?(await pmReplaceScript(t),pmLoadDelayedScripts(e)):Promise.resolve()}async function pmReplaceScript(e){return await pmNextFrame(),new Promise(function(t){let n=document.createElement("script");[...e.attributes].forEach(function(e){let t=e.nodeName;"type"!==t&&("data-perfmatters-type"===t&&(t="type"),n.setAttribute(t,e.nodeValue))}),e.hasAttribute("src")?(n.addEventListener("load",t),n.addEventListener("error",t)):(n.text=e.text,t()),e.parentNode.replaceChild(n,e)})}async function pmTriggerEventListeners(){pmDOMLoaded=!0,await pmNextFrame(),document.dispatchEvent(new Event("perfmatters-DOMContentLoaded")),await pmNextFrame(),window.dispatchEvent(new Event("perfmatters-DOMContentLoaded")),await pmNextFrame(),document.dispatchEvent(new Event("perfmatters-readystatechange")),await pmNextFrame(),document.perfmattersonreadystatechange&&document.perfmattersonreadystatechange(),await pmNextFrame(),window.dispatchEvent(new Event("perfmatters-load")),await pmNextFrame(),window.perfmattersonload&&window.perfmattersonload(),await pmNextFrame(),jQueriesArray.forEach(function(e){e(window).trigger("perfmatters-jquery-load")});let e=new Event("perfmatters-pageshow");e.persisted=window.pmPersisted,window.dispatchEvent(e),await pmNextFrame(),window.perfmattersonpageshow&&window.perfmattersonpageshow({persisted:window.pmPersisted})}async function pmNextFrame(){return new Promise(function(e){requestAnimationFrame(e)})}function pmReplayClicks(){window.removeEventListener("touchstart",pmTouchStartHandler,{passive:!0}),window.removeEventListener("mousedown",pmTouchStartHandler),pmInterceptedClicks.forEach(e=>{e.target.outerHTML===pmClickTarget&&e.target.dispatchEvent(new MouseEvent("click",{view:e.view,bubbles:!0,cancelable:!0}))})}function pmWaitForPendingClicks(){return new Promise(e=>{window.pmIsClickPending?pmPendingClickFinished=e:e()})}function pmPendingClickStarted(){window.pmIsClickPending=!0}function pmPendingClickFinished(){window.pmIsClickPending=!1}function pmClickHandler(e){e.target.removeEventListener("click",pmClickHandler),pmRenameDOMAttribute(e.target,"pm-onclick","onclick"),pmInterceptedClicks.push(e),e.preventDefault(),e.stopPropagation(),e.stopImmediatePropagation(),pmPendingClickFinished()}function pmTouchStartHandler(e){"HTML"!==e.target.tagName&&(pmClickTarget||(pmClickTarget=e.target.outerHTML),window.addEventListener("touchend",pmTouchEndHandler),window.addEventListener("mouseup",pmTouchEndHandler),window.addEventListener("touchmove",pmTouchMoveHandler,{passive:!0}),window.addEventListener("mousemove",pmTouchMoveHandler),e.target.addEventListener("click",pmClickHandler),pmRenameDOMAttribute(e.target,"onclick","pm-onclick"),pmPendingClickStarted())}function pmTouchMoveHandler(e){window.removeEventListener("touchend",pmTouchEndHandler),window.removeEventListener("mouseup",pmTouchEndHandler),window.removeEventListener("touchmove",pmTouchMoveHandler,{passive:!0}),window.removeEventListener("mousemove",pmTouchMoveHandler),e.target.removeEventListener("click",pmClickHandler),pmRenameDOMAttribute(e.target,"pm-onclick","onclick"),pmPendingClickFinished()}function pmTouchEndHandler(e){window.removeEventListener("touchend",pmTouchEndHandler),window.removeEventListener("mouseup",pmTouchEndHandler),window.removeEventListener("touchmove",pmTouchMoveHandler,{passive:!0}),window.removeEventListener("mousemove",pmTouchMoveHandler)}function pmRenameDOMAttribute(e,t,n){e.hasAttribute&&e.hasAttribute(t)&&(event.target.setAttribute(n,event.target.getAttribute(t)),event.target.removeAttribute(t))}window.pmIsClickPending=!1,window.addEventListener("pageshow",e=>{window.pmPersisted=e.persisted}),pmUserInteractions.forEach(function(e){window.addEventListener(e,pmTriggerDOMListener,{passive:!0})}),pmDelayClick&&(window.addEventListener("touchstart",pmTouchStartHandler,{passive:!0}),window.addEventListener("mousedown",pmTouchStartHandler)),document.addEventListener("visibilitychange",pmTriggerDOMListener);var pmeDeviceMode,pmeAnimationSettingsKeys,pmeCurrentAnimation;function pmeAnimation(){(pmeDeviceMode=document.createElement("span")).id="elementor-device-mode",pmeDeviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(pmeDeviceMode),requestAnimationFrame(pmeDetectAnimations)}function pmeDetectAnimations(){pmeAnimationSettingsKeys=pmeListAnimationSettingsKeys(getComputedStyle(pmeDeviceMode,":after").content.replace(/"/g,"")),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(a=>{let b=a.getBoundingClientRect();if(b.bottom>=0&&b.top<=window.innerHeight)try{pmeAnimateElement(a)}catch(c){}})}function pmeAnimateElement(a){let b=JSON.parse(a.dataset.settings),d=b._animation_delay||b.animation_delay||0,c=b[pmeAnimationSettingsKeys.find(a=>b[a])];if("none"===c)return void a.classList.remove("elementor-invisible");a.classList.remove(c),pmeCurrentAnimation&&a.classList.remove(pmeCurrentAnimation),pmeCurrentAnimation=c;let e=setTimeout(()=>{a.classList.remove("elementor-invisible"),a.classList.add("animated",c),pmeRemoveAnimationSettings(a,b)},d);window.addEventListener("perfmatters-startLoading",function(){clearTimeout(e)})}function pmeListAnimationSettingsKeys(b="mobile"){let a=[""];switch(b){case"mobile":a.unshift("_mobile");case"tablet":a.unshift("_tablet");case"desktop":a.unshift("_desktop")}let c=[];return["animation","_animation"].forEach(b=>{a.forEach(a=>{c.push(b+a)})}),c}function pmeRemoveAnimationSettings(a,b){pmeListAnimationSettingsKeys().forEach(a=>delete b[a]),a.dataset.settings=JSON.stringify(b)}document.addEventListener("DOMContentLoaded",pmeAnimation)</script></body>
</html>

3. Membuat Routing

Buka file routes/web.php. dan ubah menjadi seperti dibawah ini:


<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UploadController;
Route::get('/', function () {
return view('welcome');
});
Route::get('/upload', [UploadController::class, 'upload']);
Route::post('/upload/proses', [UploadController::class, 'proses_upload']);

4. Testing Upload

Setelah semua persiapan selesai, sekarang waktunya mencoba upload. Jalankan web server laravel dengan command dibawah ini :


php artisan serve

Bukan browser dan bukan URL sesuai dengan hasil perintah di atas, Pastikan muncul halaman seperti dibawah ini:

Tampilan Web Server Laravel

Setelah itu akses http://localhost:8000/ di kolom pencarian browser kamu, apabila sudah, maka akan tampil seperti ini :

Tampilan Dari http://localhost:8000/

Dan coba lakukan Upload Gambar dan klik tombol “Upload”. Maka akan muncul tampilan seperti ini :

Tampilan Setelah Mengklik Tombol Upload

Penutup

Nah, itu dia Sob tutorialnya, Simak terus Tips Hosting di halaman tutorial Jagoan Hosting Indonesia ya, jika ada bagian dari tutorial yang tidak ditemukan, kamu bisa menghubungi teman-teman di Jagoan Hosting supaya bisa dibantu lebih lanjut melalui Live Chat, Comment atau fitur Open Tiket ya!