Catatan Laravel #9 (Upload dan view gambar)

Catatan Laravel #9 (Upload dan view gambar)

Juni 09, 2019


Assalamu 'alaikum wr wb
-
pada postingan kali ini kita akan membahas tentang upload dan view gambar di framework laravel
-
pertama-tama
buat dahulu project laravelnya,

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

nama project saya abm_wm
setelah selesai setting public pada laravel seperti postingan sebelumnya - hilangkan public
kira-kira seperti ini

langsung saja tambahkan routenya

Route::get('/karyawan', 'KaryawanController@karyawan');
Route::post('/tambah/proses', 'KaryawanController@proses_tambah');

kemudian buat folder bernama karyawan pada views
lalu buat index.blade.php
-> abm_wm\abm\resources\views\karyawan\index.blade.php

<html>
<head>
 <title>Abm</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 
</head>
<body>
 <div class="row">
  <div class="container">
 <h2 class="text-center my-5">Tambah data karyawan</h2>
 
 <div class="col-lg-8 mx-auto my-5"> 
 
  @if(count($errors) > 0)
  <div class="alert alert-danger">
  @foreach ($errors->all() as $error)
  {{ $error }} <br/>
  @endforeach
  </div>
  @endif
 
 <form action="/abm_wm/tambah/proses" method="POST" enctype="multipart/form-data">
  {{ csrf_field() }}

  <div class="form-group">
  <b>Nama Karyawan</b><br/>
  <input type="text" class="form-control" name="karyawan_nama">
  </div>
 
  <div class="form-group">
  <b>Foto Karyawan</b><br/>
  <input type="file" name="karyawan_foto">
  </div>
 
  <div class="form-group">
  <b>Alamat</b>
  <textarea class="form-control" name="karyawan_alamat"></textarea>
  </div>
 
  <input type="submit" value="Upload" class="btn btn-primary">
 </form>
 </div>
 </div>
 </div>
</body>
</html>

dan jangan lupa buat Controllernya, buat controller KaryawanController

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class KaryawanController extends Controller
{
    public function karyawan(){
  return view('karyawan.index');
 }
 
 public function proses_tambah(Request $request){
  $this->validate($request, [
   'karyawan_nama' => 'required',
   'karyawan_foto' => 'required',
   'karyawan_alamat' => 'required',
  ]);
 
  // menyimpan data file yang diupload ke variabel $file
  $file = $request->file('karyawan_foto');
 
               // nama file
  echo 'File Name: '.$file->getClientOriginalName();
  echo '<br>';
 
               // ekstensi file
  echo 'File Extension: '.$file->getClientOriginalExtension();
  echo '<br>';
 
               // real path
  echo 'File Real Path: '.$file->getRealPath();
  echo '<br>';
 
               // ukuran file
  echo 'File Size: '.$file->getSize();
  echo '<br>';
 
               // tipe mime
  echo 'File Mime Type: '.$file->getMimeType();
 
               // isi dengan nama folder tempat kemana file diupload
  $tujuan_upload = 'fotokaryawan';
 
                // upload file
  $file->move($tujuan_upload,$file->getClientOriginalName());
 }
}

Coba jalankan
http://localhost/abm_wm/karyawan
akan tampil seperti ini

lalu coba jalankan


klik upload, akan jadi tampilan seperti ini


kemudian cek di project kita


setelah di klik upload akan automatis membuat path bernama fotokaryawan dimana path tersebut atau folder tersebut berfungsi untuk manaruh gambar yang kita upload/simpan.
-
sekarang kita lanjut kann..
-
Update Route

Route::get('/karyawan', 'KaryawanController@karyawan');
Route::post('/tambah/proses', 'KaryawanController@proses_tambah');
Route::get('/karyawan/data', 'KaryawanController@data');
-
buat tabel bernama karyawan berisikan field






lalu,

buat Model bernama Karyawan lewat cmd


php artisan make:model Karyawan

isikan sesuai field yang ada di tabel karyawan
app/Karyawan.php 

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Karyawan extends Model
{
    protected $table = "karyawan";
 
    protected $fillable = ['karyawan_nama','karyawan_foto','karyawan_alamat','created_at','updated_at'];
}
-
update Controller, KaryawanController.php
- 

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Karyawan;
use Illuminate\Support\Facades\DB;

class KaryawanController extends Controller
{
public function karyawan(){
  $karyawan = Karyawan::get();
  return view('karyawan.index',['karyawan' => $karyawan]); //karyawan adalah database
 }

 public function proses_tambah(Request $request){
  $this->validate($request, [
   'karyawan_nama' => 'required',
   'karyawan_foto' => 'required|file|image|mimes:jpeg,png,jpg|max:2048',
   'karyawan_alamat' => 'required',
  ]);
 
  // menyimpan data 
  $karyawan_foto = $request->file('karyawan_foto');
 
  $nama_file = time()."_".$karyawan_foto->getClientOriginalName();
 
               // isi dengan nama folder tempat kemana file diupload
  $tujuan_upload = 'fotokaryawan';
  $karyawan_foto->move($tujuan_upload,$nama_file);
 
  Karyawan::create([
   'karyawan_nama' => $request->karyawan_nama,
   'karyawan_foto' => $nama_file,
   'karyawan_alamat' => $request->karyawan_alamat,
  ]);
 
  return redirect()->back();
 }

 public function data() {
        //mengambil data dari table karyawan
        $karyawan = DB::table('karyawan')->get();

        return view('karyawan.data',['karyawan' => $karyawan]);
    }}

Update index.blade.php pada view\karyawan

<html>
<head>
 <title>pt</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 
</head>
<body>
 <div class="row">
 <div class="container">
 
  <h2 class="text-center my-5">Input data karyawan</h2>
  <div class="links">
   <label>Data karyawan -></label>
   <a href="http://localhost/abm_wm/karyawan/data">Lihat Data</a>
   <div class="col-lg-8 mx-auto my-5"> 
 
    @if(count($errors) > 0)
    <div class="alert alert-danger">
     @foreach ($errors->all() as $error)
     {{ $error }} <br/>
     @endforeach
    </div>
    @endif
 
    <form action="/abm_wm/tambah/proses" method="POST" enctype="multipart/form-data">
     {{ csrf_field() }}
 
     <div class="form-group">
     <b>Nama Karyawan</b><br/>
     <input type="text" class="form-control" name="karyawan_nama">
     </div>
    
     <div class="form-group">
     <b>Foto Karyawan</b><br/>
     <input type="file" name="karyawan_foto">
     </div>
    
     <div class="form-group">
     <b>Alamat</b>
     <textarea class="form-control" name="karyawan_alamat"></textarea>
     </div>
 
     <input type="submit" value="Upload" class="btn btn-success">
    </form>
    
   </div>
  </div>
 </div>
</body>
</html>
-
Buat data.blade.php di views\karyawan
untuk tampilan data yang sudah masuk ke database
-
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>pt</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
   
    <h3>
        Data karyawan
    </h3>
    <a href="http://localhost/abm_wm/karyawan">kembali</a><br/><br/>
    <table class="table table-bordered table-striped">
        <tr>
            <th width="15">Id</th>
            <th>Nama</th>
            <th>Foto</th>
            <th>Alamat</th>
            <th>Tanggal Masuk</th>
            <th>Aksi</th>
        </tr>
        @foreach($karyawan as $fk)
        <tr>
            <td>{{ $fk->karyawan_id }}</td>
            <td>{{ $fk->karyawan_nama }}</td>
            <td><img width="150px" src="{{ url('/fotokaryawan/'.$fk->karyawan_foto) }}"></td>
            <td>{{ $fk->karyawan_alamat }}</td>
            <td>{{ $fk->created_at }}</td>
            <td>
                <a href="#">Edit</a> |
                <a href="#">Hapus</a>
            </td>
        </tr>
        @endforeach
    </table>
</body>
</html>
-
jalankan
-
http://localhost/abm_wm/karyawan
-
Tampilan Index dan Data xixi
-
 -

-
Video demo,,
-
-
oke Sekian dari sayaaa
Assalamu 'alaikum wr wb
Next
« Prev Post
Previous
Next Post »
Thanks for your comment
Langganan: Posting Komentar (Atom)