Cara Membuat File Manager di Laravel
Halo semuanya, kembali lagi di tulisan saya. Pada kesempatan kali ini saya akan berbagi tutorial bagaimana cara membuat file manager seperti di hosting pada project laravel. Penasaran?, ayo ikuti pembahasannya berikut ini.

Pada tutorial kali ini saya akan menggunakan paket file manager dari alexusmai/laravel-file-manager dan versi laravel yang akan kita pakai adalah laravel 8. tapi kalian tetap bisa menggunakan paket laravel ini pada versi laravel yang lebih rendah yaitu di laravel 7 dan 6.

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

membuat laravel file manager
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.

composer require alexusmai/laravel-file-manager

3. Selanjuntnya jalankan perintah di bawah ini untuk mempublish konfigurasi file dari instalasi paket file manager sebelumnya.

php artisan vendor:publish --tag=fm-config


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.

Laravel File Manager Create New File
Create New File

Laravel File Manager Upload File
Upload File

Laravel File Manager List Style
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 tulisan saya. Terima kasih, dan sampai jumpa di tutorial pemrograman keren lainnya. :D

Tags

Post a Comment

Posting Komentar

Lebih baru Lebih lama