Read     Tutorial Upload Gambar / Foto dengan Laravel 5.2

Tutorial Upload Gambar / Foto dengan Laravel 5.2

Haloo, sorry sob saya baru bisa nulis tutorial lagi nih :D yang saya bahas kali ini tutorial singkat saja barangkali ada yang belum tau cara upload gambar/foto dengan Laravel ditambah dengan Preview saat kita upload. Ohya, saya masih menggunakan project sebelum nya yang pake Crud + Materializecss.

Oke, silahkan sobat buat dulu Koneksi, Crud biasa dengan Laravel nya kalo sudah baru kita langsung ke Form input crud nya, kalau ada yang masih menggunakan project sama dengan saya yang ini, silahkan langsung ke add.blade.php , tambahin form inputan file nya jadi gini keseluruhan nya :

@section('js')
<script type="text/javascript">

      function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#showgambar').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#inputgambar").change(function () {
        readURL(this);
    });

</script>

@stop

@extends('layouts.index')
@section('content')

<div class="section">
	<div class="card-panel purple darken-3 white-text">Tutorial CRUD Laravel 5.2 dengan Materializecss</div>
</div>

<div class="section">
  <form action="{{ url('store') }}" method="POST" enctype="multipart/form-data">
    {!! csrf_field() !!}
    <div class="row">
          <div class="input-field col s12">
            <input type="text" class="validate" name="judul">
            <label for="title">Judul</label>
          </div>
    </div>
     
      <div class="row">
        <div class="input-field col s12">
          <textarea id="textarea1" class="materialize-textarea" name="isi"></textarea>
          <label for="textarea1">Isi</label>
        </div>
      </div>
      <div class="row">
        <div class="col s6">
            <img src="http://placehold.it/100x100" id="showgambar" style="max-width:200px;max-height:200px;float:left;" />
        </div>
    </div>
    <div class="row">
        <div class="input-field col s6">
          <input type="file" id="inputgambar" name="gambar" class="validate"/ >
        </div>
      </div>
      <button type="submit" class="btn btn-flat pink accent-3 waves-effect waves-light white-text right">Submit <i class="material-icons right">send</i></button>
  </form>
</div>

@endsection

Ket :

  • @section('js') dan diakhiri dengan @stop, fungsi nya kita menyisipkan code javascript dan diletakkan pada base/tempat yang sudah kita siapkan untuk @section('js') ini, untuk menampilkan nya kita memerlukan script seperti ini di index.blade.php :

upload  gambar laravel

Bisa aja sih kita langsung taroh javascript kita di index.blade.php tapi tentu nya itu kurang bagus dong, kan code js kita tadi cuman diperlukan saat input form nya aja kan :D

Contoh nih saya coba CTRL + U di browser saat saya buka url yang menampilkan add.blade.php :

hasil ctrl u laravel

Tampil kan si code js kita tadi? Tapi coba kita lagi kembali ke halaman utama yang ini :

laravel image upload

Lalu saya coba CTRL + U disini, dan hasilnya :

upload gambar laravel

Yap, code Js kita tadi enggak tampil. Udah paham kan jadi nya penggunaan Section Js tadi? :D

  • Lalu pada <form> kita wajib menyisipkan code enctype="multipart/form-data" untuk upload file / gambar fungsi nya agar file yang kita upload itu dikenali, ini wajib ya jangan sampe lupa
  • Ohya, untuk code yang ada di dalam section js itu fungsi nya untuk preview gambar kita saat kita sudah browse di input type file tadi
  • <img src="http://placehold.it/100x100" id="showgambar" style="max-width:200px;max-height:200px;float:left;" /> disini nanti preview gambar nya, harus sama ya ID nya dengan yang ada di Js tadi yaitu showgambar
  • <input type="file" id="inputgambar" name="gambar" class="validate"/ > kalo ini ya buat browse gambar nya, pastikan name nya sesuai ya jangan lupa juga ID nya

Hasil nya dari add.blade.php setelah saya browse gambar :

hasil upload laravel

Setelah itu ya pastikan sobat sudah buat kolom baru/ sudah menyiapkan kolom gambar pada database di table nya

database upload gambar laravel

Setelah itu kita ke proses nya, CrudController.php isi method store nya seperti ini :

    public function store(Request $request)
    {

        $tambah = new Crud();
        $tambah->judul = $request['judul'];
        $tambah->isi = $request['isi'];

        // Disini proses mendapatkan judul dan memindahkan letak gambar ke folder image
        $file       = $request->file('gambar');
        $fileName   = $file->getClientOriginalName();
        $request->file('gambar')->move("image/", $fileName);

        $tambah->gambar = $fileName;
        $tambah->save();

        return redirect()->to('/');
    }

Ket :

  • $file = $request->file('gambar'); disini variable buat ngedapetin gambar
  • $fileName = $file->getClientOriginalName(); ngedapetin nama asli gambarnya
  • $request->file('gambar')->move("image/", $fileName); memindahkan gambar ke folder yang sudah kita siapkan di dalam folder public / image

cara singkat upload laravel

Ntar kalo udah kita proses submit, foto nya pindah masuk ke folder image

pindahkan gambar laravel

  • $tambah->gambar = $fileName; dapetin nama gambar nya buat kita kirim ke database

Setelah itu coba disubmit deh, cek ke database dan  ke folder image nya udah masuk belum?

hasil gambar laravel

Lalu saya coba tampilkan gambar nya di halaman depan, di show.blade.php pada foreach / perulangan nya saya tambahin tag img :

@extends('layouts.index')
@section('content')

<div class="section">
	<div class="card-panel purple darken-3 white-text">Tutorial Pencarian Laravel 5.2 dengan Materializecss</div>
</div>

<div class="section">
<form action="{{ url('query') }}" method="GET">
    <div class="row">
          <div class="input-field col s12">
            <input type="text" class="validate" name="q">
            <label for="title">Cari</label>
          </div>
           <button type="submit" class="btn btn-flat pink accent-3 waves-effect waves-light white-text right">Cari <i class="material-icons right">search</i></button>
    </div>
 </form>
	@foreach($datas as $data)

	<div class="row">
		<div class="col s12">
   <h5>{{ $data->judul }}</h5>

            <div class="divider"></div>
             <img src="{{ asset('image/'.$data->gambar)  }}" style="max-height:200px;max-width:200px;margin-top:10px;">
   
            <p>{!!substr($data->isi,0,200)!!}...</p>
                
            <a href="{{ url('read', $data->id) }}" class="btn btn-flat pink accent-3 waves-effect waves-light white-text">Readmore <i class="material-icons right">send</i></a>
            <a href="{{ url('edit', $data->id) }}" class="btn btn-flat purple darken-4 waves-effect waves-light white-text">Edit <i class="material-icons right">mode_edit</i></a>
            <a href="{{ url('delete', $data->id) }}" onclick="return confirm('Yakin mau hapus data ini sob?')" class="btn btn-flat red darken-4 waves-effect waves-light white-text">Delete <i class="material-icons right">delete</i></a>
		</div>
	</div>
	@endforeach

</div>

{{ $datas->render() }}

<div class="fixed-action-btn horizontal" style="bottom: 45px; right: 24px;">
    <a href="{{ url('add') }}" class="btn-floating btn-large red">
      <i class="large material-icons">add</i>
    </a>
 </div>


@endsection

Hasil :

upload with laravel 5.2

Yap, gambar nya udah tampil. Setelah tambah kita coba lagi untuk edit, ke form edit nya dulu edit.blade.php

@section('js')
<script type="text/javascript">

      function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#showgambar').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#inputgambar").change(function () {
        readURL(this);
    });

</script>

@stop

@extends('layouts.index')
@section('content')

<div class="section">
	<div class="card-panel purple darken-3 white-text">Tutorial CRUD Laravel 5.2 dengan Materializecss</div>
</div>

<div class="section">
  <form action="{{ url('update', $tampiledit->id) }}" method="POST" enctype="multipart/form-data">
    {!! csrf_field() !!}
    <div class="row">
          <div class="input-field col s12">
            <input type="text" class="validate" name="judul" value="{{ $tampiledit->judul }}">
            <label for="title">Judul</label>
          </div>
    </div>
      <div class="row">
        <div class="input-field col s12">
          <textarea id="textarea1" class="materialize-textarea" name="isi">{{ $tampiledit->isi }}</textarea>
          <label for="textarea1">Isi</label>
        </div>
      </div>
      <div class="row">
        <div class="col s6">
            <img src="{{ asset('image/'.$tampiledit->gambar) }}" id="showgambar" style="max-width:200px;max-height:200px;float:left;" />
        </div>
    </div>
    <div class="row">
        <div class="input-field col s6">
          <input type="file" id="inputgambar" name="gambar" class="validate"/ >
        </div>
      </div>
      <button type="submit" class="btn btn-flat pink accent-3 waves-effect waves-light white-text right">Submit <i class="material-icons right">send</i></button>
  </form>
</div>

@endsection

Proses edit nya lagi di CrudController method update :

    public function update(Request $request, $id)
    {
        $update = Crud::where('id', $id)->first();
        $update->judul = $request['judul'];
        $update->isi = $request['isi'];

        if($request->file('gambar') == "")
        {
            $update->gambar = $update->gambar;
        } 
        else
        {
            $file       = $request->file('gambar');
            $fileName   = $file->getClientOriginalName();
            $request->file('gambar')->move("image/", $fileName);
            $update->gambar = $fileName;
        }
        
        $update->update();
        return redirect()->to('/');
    }

Ket :

  • if($request->file('gambar') == '') { } else { } artinya jika request gambar kita tadi kosong atau kita tidak browse gambar nya maka dia akan menjalankan perintah didalam if yaitu $update->gambar = $update->gambar; gambar nya masih sama seperti sebelumnya

Jika kita ubah gambar berarti dia menjalankan perintah else yaitu dapetin nama gambar, dan mindahin gambar

Hasil nya :

cara mudah upload gambar laravel

NB : jangan lupa ini enctype="multipart/form-data" di <form> ya

Selesai tutorial upload gambar / foto kita kali ini ya sob, jika terdapat kesalahan kata / coding, mohon di koreksi saya dengan cara berkomentar dibawah ini.

Jangan lupa di share ke teman-teman nya jika bermanfaat, terimakasih sob!

Ohya, kayaknya ntar saya jarang lagi nih buat tutor baru soalnya saya lagi mikiran tampilan dan konsep baru untuk gilacoding.com :D tapi tetep dipantau terus ya sob :v

Top