Cara Membuat Upload File ke Database Dengan Laravel

Halo semuanya, kembali lagi di sahretech. Baiklah pada kesempatan yang berbahagia kali ini saya akan berbagi tutoral pemrograman yang tidak kalah seru. Yaitu, cara membuat fitur upload file ke database di laravel. Penasaran?, ayo ikuti selengkapnya berikut ini.

Sebenarnya membuat upload file di laravel dan native kurang lebih sama. Asal kalian sudah tahu logikanya, maka semua akan terasa mudah. Dan disarankan juga kalian sudah mengerti dasar-dasar laravel, dan paling tidak sudah pernah membuat project CRUD menggunakan laravel. Berikut ini tutorialnya untuk kalian:

Baca Artikel Lain ✨

📰 1. Cara Membuat Multiple User di Laravel dengan Middleware read more

📰 2. Cara Menggunakan Library Datatable Serverside di Laravel read more

📰 3. Cara Menampilkan Data di Laravel dengan Join Table, dengan Menggunakan Query Builder read more

Cara Membaut Upload File Dengan Laravel

Pada kesempatan kali ini saya akan memberikan tutorial dengan menggunakan laravel versi 7. Boleh menggunakan laravel dengan versi lebih rendah karena script dan aturan laravel versi 7 ke bawah tidak jauh berbeda dari sisi script yang akan kita gunakan.

1. Install Laravel

Hal pertama dan paling utama, adalah menginstall laravel. Jalankan perintah berikut ini untuk menginstall laravel 7 

composer create-project --prefer-dist laravel/laravel:^7.0 laravel_verifikasi_email

Note: Untuk nama project dan lokasi project bebas kalian tentukan sendiri. Tapi jika kalian ingin mengikuti saya, silahkan buat nama project laravel_upload_file

2. Membuat Database

Masuk ke dalam phpmyadmin lalu buat sebuah database baru dengan nama laravel

3. Membuat Model, Migration dan Melakukan Migrate

Buka cmd atau terminal lalu masuk ke dirktori folder project kalian. Ketik perintah berikut ini untuk membuat model dan migration bernama upload

php artisan make:model Upload -m

Buka 2021_01_16_091926_create_uploads_table.php di dalam database/migrations. Lalu tambahkan script di bawah ini ke dalam bagian Schema::create('uploads', function (Blueprint $table) { ..... }

Schema::create('uploads', function (Blueprint $table) {
    $table->increments('id');
    $table->string('file');
    $table->string('keterangan');
    $table->timestamps();
});

File 2021_01_16_091926_create_uploads_table.php berfungsi untuk membuat skema atau struktur tabel yang akan dibuat. Selanjutnya jalankan perintah di bawah ini untuk membuat tabel baru di dalam database

php artisan migrate

Jika berhasil maka tampilannya akan tampak seperti gambar di bawah ini. Tapi jika gagal kemungkinan setting database kalian berbeda dari setting laravel. Silahkan atur settingannya terlebih dahul di file .env

Tabel uploads berhasil dibuat di dalam database

4. Membuat UploadController

Jalankan perintah di bawah ini untuk membuat UploadController

php artisan make:controller UploadController

Lalu buka app/Http/Controllers/UploadController.php dan edit script di dalamnya dengan script yang ada di bawah ini

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Upload;

class UploadController extends Controller
{
    public function index(){
        //ambil data dari database
        $data = Upload::all();

        //passing data ke view
        return view('view_upload')->with('data', $data);
    }

    public function store(Request $request){

        //membuat validasi, jika tidak diisi maka akan menampilkan pesan error
        $this->validate($request, [
            'file'          => 'required',
            'keterangan'    => 'required'
        ]);

        //mengambil data file yang diupload
        $file           = $request->file('file');
        //mengambil nama file
        $nama_file      = $file->getClientOriginalName();

        //memindahkan file ke folder tujuan
        $file->move('file_upload',$file->getClientOriginalName());


        $upload = new Upload;
        $upload->file       = $nama_file;
        $upload->keterangan = $request->input('keterangan');

        //menyimpan data ke database
        $upload->save();

        //kembali ke halaman sebelumnya
        return back();
    }
}

Di dalam upload controller, terdapat 2 fungsi, dimana fungsi index digunakan untuk menampilkan data, dan fungsi store digunakan untuk menyimpan data. Untuk detail penjelasannya, bisa kalian lihat pada tanda komentar script di atas.

5. Membuat View File Upload dan Tampil Data.

Selanjuntnya kita perlu membuat tampilan halaman untuk form pengiriman data dan tampil data. Buatlah sebuah file baru di dalam folder resources/views dengan nama view_upload.blade.php lalu copy dan pastekan script di bawah ini

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>

<body>
    <br>
    <div class="container">
        <h2 class="alert alert-success text-center">
            Cara Input dan Tampil Data Tanpa Reload dengan Ajax Jquery
        </h2>
        <div class="row">
            <div class="col-5">
                <div class="card">
                    <div class="card-body">
                        {{-- jika mengirim file wajib menggunakan enctype="multipart/form-data" --}}
                        <form action="{{url('upload/proses')}}" method="post" enctype="multipart/form-data">
                            @csrf
                            <div class="form-group">
                                <label for="exampleInputEmail1">Input File</label>
                                <input type="file" class="form-control" id="nama" name="file">
                            </div>
                            {{-- pesan error  --}}
                            @error('file')
                                <div class="alert alert-danger">{{ $message }}</div>
                            @enderror

                            <div class="form-group">
                                <label for="exampleInputPassword1">Keterangan</label>
                                <textarea name="keterangan" cols="30" rows="5" class="form-control"></textarea>
                            </div>
                            {{-- pesan error  --}}
                            @error('keterangan')
                                <div class="alert alert-danger">{{ $message }}</div>
                            @enderror
                            <button type="submit" id="tombol-simpan" class="btn btn-primary">Submit</button>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-7">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">File</th>
                            <th scope="col">Keterangan</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{-- menampilkan data  --}}
                        @foreach ($data as $key=>$item)
                        <tr>
                            <td>{{$key+1}}</td>
                            <td>
                                {{-- jika ekstensi file adalah png, jpg atau jpeg maka tampilkan gambar  --}}
                                @if( in_array(pathinfo($item->file, PATHINFO_EXTENSION), ['png', 'jpg', 'JPEG']))
                                    <img src="{{asset('file_upload')}}/{{$item->file}}" style="height: 10%">
                                @else
                                    <img src="https://www.freeiconspng.com/uploads/file-txt-icon--icon-search-engine--iconfinder-14.png"
                                    style="height: 10%">
                                @endif
                            </td>
                            <td>{{$item->keterangan}}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>

</html>

Kita buat sebuah halaman tampil dan input data sederhana, dimana keduanya kita gabungkan jadi satu di dalam sebuah file. Untuk penjelasannya bisa kalian lihat pada script yang ada di atas

6. Membuat Routing

Langkah terakhir, silahkan buka routes/web.php lalu tambahkan script di bawah ini

Route::get('/upload', 'UploadController@index');
Route::post('/upload/proses', 'UploadController@store');

Saatnya testing!, jalankan perintah php artisan serve lalu buka browser dan ketik url berikut ini http://127.0.0.1:8000/upload. Jika berhasil maka tampilannya akan tampak seperti gambar gif di bawah ini

Hasil akhir input file di laravel

Sekian tutorial cara membuat upload file ke database dengan laravel. Semoga tulisan singkat ini dapat membantu, dan jika ada kendala silahkan tanyakan lewat kolom komentar di bawah ini dan mari kita diskusikan bersama. Sampai jumpa di tutorial pemrograman lainnya.