Layaknya file manager pada umumnya, fitur ini sangat membantu kalian dalam mengelompokan, mencari, membuat folder, menghapus atau mengunggah file seperti text, gambar, atau video dan masih banyak lagi fitur lainnya yang bisa kalian lihat di link berikut ini https://github.com/alexusmai/laravel-file-manager. Ok, di bawah ini saya tampilkan preview dari file manager yang nantinya berhasil dipasang
 |
| Laravel file manager |
1. Pertama, siapkan project laravel baru atau project laravel yang sudah ada sebelumnya. Untuk tutorial instalasinya, bisa kalian ikuti pada link berikut ini. https://www.duniailkom.com/tutorial-belajar-laravel-cara-menginstall-laravel/
2. OK, selanjuntya masuk ke project laravel kalian, lalu buka cmd atau terminal. Lalu ketik perintah di bawah ini dan jalankan.
3. Selanjuntnya jalankan perintah di bawah ini untuk mempublish konfigurasi file dari instalasi paket file manager sebelumnya.
4. Ok, setelah tahap instalasi dan konfigurasi sudah kita lakukan semuanya, sekarang buat route baru di dalam folder routes/web.php. Ikuti scriptnya seperti di bawah ini.
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\FileManagerController;
use App\Http\Controllers\UserController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return view('welcome');
});
Route::get('filemanager', [FileManagerController::class, 'index']);
5. Setelah route dibuat, selanjutnya buatlah sebuah controller baru dengan nama FileManagerController.php di dalam folder app/Http/Controllers. Copy script di bawah ini dan pastekan di dalam file yang baru dibuat.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class FileManagerController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index(Request $request)
{
return view('filemanager');
}
}
6. Ok terakhir, kita akan membuat tampilan atau viewnya. Buatlah sebuah file baru dengan nama filemanager.blade.php di dalam folder resources/views. Copy script di bawah ini dan pastekan di dalam file tersebut.
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'File Manager') }}</title>
<!-- Styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css">
<link href="{{ asset('vendor/file-manager/css/file-manager.css') }}" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
</head>
<body>
<div id="fm-main-block">
<div id="fm"></div>
</div>
<!-- File manager -->
<script src="{{ asset('vendor/file-manager/js/file-manager.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('fm-main-block').setAttribute('style', 'height:' + window.innerHeight + 'px');
fm.$store.commit('fm/setFileCallBack', function(fileUrl) {
window.opener.fmSetLink(fileUrl);
window.close();
});
});
</script>
</body>
</html>
7. Ok, semua tahapan sudah kita kerjakan, saatnya kita coba jalankan perintah php artisan serve. Lalu buka url berikut localhost:8000/filemanager. Dan tara....., hasilnya bisa kalian lihat seperti di bawah ini.
 |
| Create New File |
 |
| Upload File |
 |
| File Manager List Style |
Ok sekian tutorial kali ini tentang cara mudah membuat file manager pada laravel. Semoga bermanfaat, jika ada pertanyaan, silahkan tanyakan langsung di kolom komentar di bawah ini atau langung ajukan pertanyaan kalian ke official fanspage sahretech. Terima kasih, dan sampai jumpa di tutorial pemrograman keren lainnya. :D
Sangat bermanfaat
ReplyDeleteSangat Bermanfaat
ReplyDeletenice blog
ReplyDelete