0 Reaksi

0 Komentar

Membuat Fitur Upload Menggunakan Ajax di Laravel

8 November 2017

Membuat Fitur Upload Menggunakan Ajax di Laravel

Pada kesempatan kali ini kita akan membuat sebuah fitur upload gambar / file menggunakan ajax method pada Laravel. Sebagaimana yang anda ketahui, PHP atau Laravel telah memiliki fitur dasar yang berfungsi untuk menghandle upload file / gambar. Fitur upload ini sangat menarik sebab kebanyakan user menginginkan sebuah fitur menyimpan gambar untuk profil, produk, dll. Laravel telah menyediakan cara mudah untuk menyimpan gambar kedalam server, Laravel juga menyediakan fitur validasi untuk ukuran file, image, mime type, dll. Sehingga apabila dipadukan dengan ajax akan menciptakan sebuah fitur yang cukup elegan dari sisi UI. Dalam membuat fitur ini kita juga akan belajar hal lain seperti membuat Laravel project, migration, mode, route, blade file, dll. Jadi setiap level keilmuan dapat ikut belajar bersama.

#### Install Framework Laravel

Kita akan memulainya dari awal, jadi kita harus menginstall Laravel fresh install menggunakan command line, buka terminal anda dan jalankan command berikut:

composer create-project --prefer-dist laravel/laravel ajax

Konfigurasi Database

Setelah instalasi Laravel berhasil, lakukan konfigurasi database dengan mengedit file .env lalu pada bagian dibawah ini, sesuaikan informasi database anda:

DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret

Membuat Migration & Model

Pada bagian ini, kita akan membuat migration yang berfungsi untuk membuat table dan model untuk menangani table tersebut. Untuk membuat migration sekaligus model nya, jalankan command berikut:

php artisan make:model Upload_file -m

Selanjutnya kita akan memasukkan beberapa field untuk menampung judul dan nama gambar yang akan di upload. Buka file CreateUploadFilesTable di direktori database/migration, dan masukkan kode berikut:

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateUploadFilesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('upload_files', function (Blueprint $table) {
            $table->increments('id');
            $table->string('judul');
            $table->string('gambar');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('upload_files');
    }
}

Kemudian jalankan command berikut:

php artisan migrate

Jangan lupa untuk mengedit file model app/Upload_file.php:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Upload_file extends Model
{
    protected $fillable = ['judul', 'gambar'];
}

Membuat Controller

Pada langkah ini kita akan membuat sebuah controller dengan nama UploadFileController, controller ini akan mengatur layout yang akan digunakan dan validasi file yang akan di upload. Jalankan command berikut:

php artisan make:controller UploadFileController

Kemudian buka file app/Http/Controllers/UploadFileController.php kemudian tambahkan code dibawah ini:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Validator;
use App\Upload_file;

class UploadFileController extends Controller
{
    public function uploadFile()
    {
    	return view('uploadfile');
    }

    public function StoreUploadFile(Request $request)
    {
      $validator = Validator::make($request->all(), [
        'judul' => 'required',
        'gambar' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
      ]);

      if ($validator->passes()) {
        $input = $request->all();
        $input['gambar'] = time().'.'.$request->gambar->getClientOriginalExtension();
        $request->gambar->move(public_path('gambar'), $input['gambar']);

        Upload_file::create($input);
        return response()->json(['success'=>'Berhasil']);
      }

      return response()->json(['error'=>$validator->errors()->all()]);
    }
}

Membuat Route

Karena controller telah selesai, selanjutnya kita akan membuat route untuk mengatur jalannya aplikasi dengan menggunakan method yang telah kita buat pada controller. Buka file routes/web.php kemudian tambahkan code:

Route::get('/', 'UploadFileController@uploadFile');
Route::post('upload', 'UploadFileController@StoreUploadFile');

#### Membuat View

Langkah terakhir adalah membuat view untuk layout sekaligus menggunakan method ajax untuk menangani form upload yang akan kita buat. Buat file uploadfile.blade.php dan tempatkan pada direktori resources/views, kemudian tambahkan code berikut:

<!DOCTYPE html>
<html>
<head>
  <title>Membuat Fitur Upload Menggunakan Ajax di Laravel</title>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<div class="container">
  <h1>Membuat Fitur Upload Menggunakan Ajax di Laravel</h1>
  <form action="{{ url('upload') }}" enctype="multipart/form-data" method="POST">
  	<div class="alert alert-danger print-error-msg" style="display:none">
      <ul></ul>
    </div>

    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <div class="form-group">
      <label>Judul:</label>
      <input type="text" name="judul" class="form-control" placeholder="Masukkan Judul">
    </div>

	  <div class="form-group">
      <label>Gambar:</label>
      <input type="file" name="gambar" class="form-control">
    </div>

    <div class="form-group">
      <button class="btn btn-success upload-image" type="submit">Kirim</button>
    </div>
  </form>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript">
  $("body").on("click",".upload-image",function(e){
    $(this).parents("form").ajaxForm(options);
  });

  var options = { 
    complete: function(response) 
    {
    	if($.isEmptyObject(response.responseJSON.error)){
    		$("input[name='judul']").val('');
    		alert('Upload gambar berhasil.');
    	}else{
    		printErrorMsg(response.responseJSON.error);
    	}
    }
  };

  function printErrorMsg (msg) {
	$(".print-error-msg").find("ul").html('');
	$(".print-error-msg").css('display','block');
	$.each( msg, function( key, value ) {
		$(".print-error-msg").find("ul").append('<li>'+value+'</li>');
	});
  }
</script>

</body>
</html>

Persiapan telah selesai, langkah terakhir jalankan:

php artisan serve

Sampai disini fitur upload telah berhasil kita buat, adapun untuk menampilkan hasil yang telah kita upload bisa dilakukan dengan dua cara:

Menampilkan single file setelah berhasil di upload
Menampilkan semua file yang telah di upload

Mari kita coba satu persatu, untuk menampilkan hasil setelah berasil diupload cukup tambahkan potongan code berikut:

<div class="tampil" style="display:none">
  <img src="" style="height:300px;width:500px">
</div>

Pada bagian ajax, silahkan tambahkan potongan code berikut:

$(".tampil").css('display','block');
$(".tampil").find('img').attr('src','/gambar/'+response.responseJSON.gambar);

Sehingga code lengkap pada resources/views/uploadfile.blade.php akan menjadi seperti ini:

<!DOCTYPE html>
<html>
<head>
  <title>Membuat Fitur Upload Menggunakan Ajax di Laravel</title>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<div class="container">
  <h1>Membuat Fitur Upload Menggunakan Ajax di Laravel</h1>
  <form action="{{ url('upload') }}" enctype="multipart/form-data" method="POST">
  	<div class="alert alert-danger print-error-msg" style="display:none">
      <ul></ul>
    </div>

    <div class="print-img" style="display:none">
      <img src="" style="height:300px;width:500px">
    </div>

    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <div class="form-group">
      <label>Judul:</label>
      <input type="text" name="judul" class="form-control" placeholder="Masukkan Judul">
    </div>

	  <div class="form-group">
      <label>Gambar:</label>
      <input type="file" name="gambar" class="form-control">
    </div>

    <div class="form-group">
      <button class="btn btn-success upload-image" type="submit">Kirim</button>
    </div>
  </form>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript">
  $("body").on("click",".upload-image",function(e){
    $(this).parents("form").ajaxForm(options);
  });

  var options = { 
    complete: function(response) 
    {
    	if($.isEmptyObject(response.responseJSON.error)){
    		$("input[name='judul']").val('');
        $(".print-img").css('display','block');
        $(".print-img").find('img').attr('src','/gambar/'+response.responseJSON.gambar);
    		alert('Upload gambar berhasil.');
    	}else{
    		printErrorMsg(response.responseJSON.error);
    	}
    }
  };

  function printErrorMsg (msg) {
	$(".print-error-msg").find("ul").html('');
	$(".print-error-msg").css('display','block');
	$.each( msg, function( key, value ) {
		$(".print-error-msg").find("ul").append('<li>'+value+'</li>');
	});
  }
</script>

</body>
</html>

Cara lain bisa dengan menampilkan nya dalam bentuk list table, ubah method uploadFile di app/Http/Controllers/UploadFileController.php menjadi:

public function uploadFile()
{
   $uploadFile = Upload_file::get();
   return view('uploadfile', compact('uploadFile'));
}

Lalu pada file uploadfile.blade.php tambahkan code berikut:

<hr>
  <div class="row">
      <div class="col-md-4">
      <table class="table table-hover">
        <tr>
          <th>#</th>
          <th>Judul</th>
          <th>Gambar</th>
        </tr>
        @if (count($uploadFile) > 0)
        @foreach ($uploadFile as $uploadFiles)
        <tr>
          <td></td>
          <td>{{ $uploadFiles->judul }}</td>
          <td><img src="{{ asset('gambar/' . $uploadFiles->gambar) }}" width="50px" height="50px"></td>
        </tr>
        @endforeach
        @else
        <tr>
          <td colspan="3" class="text-center">Tidak ada data</td>
        </tr>
        @endif
      </table>
    </div>
  </div>

Sehingga file uploadfile.blade.php akan menjadi:

<!DOCTYPE html>
<html>
<head>
  <title>Membuat Fitur Upload Menggunakan Ajax di Laravel</title>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<div class="container">
  <h1>Membuat Fitur Upload Menggunakan Ajax di Laravel</h1>
  <form action="{{ url('upload') }}" enctype="multipart/form-data" method="POST">
  	<div class="alert alert-danger print-error-msg" style="display:none">
      <ul></ul>
    </div>

    <div class="tampil" style="display:none">
      <img src="" style="height:300px;width:500px">
    </div>

    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <div class="form-group">
      <label>Judul:</label>
      <input type="text" name="judul" class="form-control" placeholder="Masukkan Judul">
    </div>

	  <div class="form-group">
      <label>Gambar:</label>
      <input type="file" name="gambar" class="form-control">
    </div>

    <div class="form-group">
      <button class="btn btn-success upload-image" type="submit">Kirim</button>
    </div>
  </form>

  <hr>
  <div class="row">
      <div class="col-md-4">
      <table class="table table-hover">
        <tr>
          <th>#</th>
          <th>Judul</th>
          <th>Gambar</th>
        </tr>
        @if (count($uploadFile) > 0)
        @foreach ($uploadFile as $uploadFiles)
        <tr>
          <td></td>
          <td>{{ $uploadFiles->judul }}</td>
          <td><img src="{{ asset('gambar/' . $uploadFiles->gambar) }}" width="50px" height="50px"></td>
        </tr>
        @endforeach
        @else
        <tr>
          <td colspan="3" class="text-center">Tidak ada data</td>
        </tr>
        @endif
      </table>
    </div>
  </div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript">
  $("body").on("click",".upload-image",function(e){
    $(this).parents("form").ajaxForm(options);
  });

  var options = { 
    complete: function(response) 
    {
    	if($.isEmptyObject(response.responseJSON.error)){
    		$("input[name='judul']").val('');
        $(".tampil").css('display','block');
        $(".tampil").find('img').attr('src','/gambar/'+response.responseJSON.gambar);
    		alert('Upload gambar berhasil.');
    	}else{
    		printErrorMsg(response.responseJSON.error);
    	}
    }
  };

  function printErrorMsg (msg) {
	$(".print-error-msg").find("ul").html('');
	$(".print-error-msg").css('display','block');
	$.each( msg, function( key, value ) {
		$(".print-error-msg").find("ul").append('<li>'+value+'</li>');
	});
  }
</script>

</body>
</html>

Web Development

Mobile Development

Studi Kasus

Fundamental

Pemula

Menengah

Framework

Front End

Back End

Laravel

PHP

Kotlin

Android

Javascript

Wordpress

Database

Java

Go-Lang

Kelas Terbaru

Kelas Gratis

Populer

Roadmap

PlaygroundNEW

Membuat Fitur Upload Menggunakan Ajax di Laravel

Konfigurasi Database

Membuat Migration & Model

Membuat Controller

Membuat Route