Assalamu'alaikum, Warahmatullahi, Wabarokatuh..
Salam sejahtera bagi kita semua semoga kita semua senantiasa diberikan kesehatan dan panjang umur. Aamiin Ya Allah Ya Robbal Alamin.
Siang hari ini admin mau menyampaikan satu buah tutorial singkat tentang laravel 8, berkaitan dengan upload dan edit gambar.
Uplod dan edit gambar yang admin maksud adalah sebagai berikut dengan studi kasus aplikasi pegawai:
Langsung saja sahabat, bagaimana cara membuatnya?
Berikut admin rangkum caranya:
---A. Upload Gambar---
1. Buatlah route baru pada file web.php
Route::post('/pegawai/proses', [App\Http\Controllers\PegawaiController::class, 'proses_upload'])->name('pegawai.proses');
2. Buatlah sebuah method baru pada controller pegawai:
public function proses_upload(Request $request){
$file = $request->file('image');
$nama_file = time()."_".$file->getClientOriginalName();
$tujuan_upload = 'foto_pegawai';
$file->move($tujuan_upload, $nama_file);
Pegawai::create([
'image' => $nama_file,
'nama' => $request->nama,
'alamat_rumah' => $request->alamat_rumah,
'alamat_kantor' => $request->alamat_kantor,
'umur' => $request->umur,
'jabatan_id' => $request->jabatan_id
]);
return redirect()->back();
}
3. Buatlah index view pada pegawai.blade.php:
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Foto</th>
<th>Nama</th>
<th>Alamat Rumah</th>
<th>Alamat Kantor</th>
<th>Umur</th>
<th>Jabatan</th>
<th>Opsi</th>
</tr>
</thead>
<tbody>
@foreach($dataPegawai as $p)
<tr>
<td><img width="125px" src="{{ url('/foto_pegawai/'.$p->image) }}"></td>
<td>{{ $p->nama }}</td>
<td>{{ $p->alamat_rumah }}</td>
<td>{{ $p->alamat_kantor }}</td>
<td>{{ $p->umur }}</td>
<td>
{{ $p->jabatan->nama_jabatan }}
</td>
<td>
<a href="pegawai/edit/{{ $p->id }}" class="btn btn-info btn-sm"><i class="fas fa-pencil-alt">
</i> Edit</a>
<a href="/pegawai/hapus/{{ $p->id }}" onClick="return confirm('Apakah anda yakin mau menghapus data ini?')" class="btn btn-danger btn-sm"><i class="fas fa-trash-alt">
</i> Hapus</a>
</td>
</tr>
@endforeach
</tbody>
</table>
4. Buatlah form tambah.blade.php:
<form action="/pegawai/proses" method="POST" enctype="multipart/form-data">
{{ csrf_field() }}
<div class="card-body">
<div class="form-group">
<label>Foto</label>
<input class="form-control" type="file" name="image" placeholder="image">
</div>
<div class="form-group">
<label for="nama">Nama</label>
<input type="text" class="form-control" name="nama" required="required" placeholder="Enter name">
</div>
<div class="form-group">
<label for="alamat_rumah">Alamat Rumah </label>
<textarea class="form-control" name="alamat_rumah" required="required" placeholder="Enter alamat rumah"></textarea>
</div>
<div class="form-group">
<label for="alamat_kantor">Alamat Kantor </label>
<textarea class="form-control" name="alamat_kantor" required="required" placeholder="Enter alamat kantor"></textarea>
</div>
<div class="form-group">
<label for="umur">Umur</label>
<input type="number" class="form-control" name="umur" required="required" placeholder="Enter umur">
</div>
<div class="form-group">
<label for="jabatan_id">Jabatan</label>
<select name="jabatan_id" class="form-control" required="required">
<option value=""> - Pilih - </option>
@foreach ($jabatans as $item)
<option value="{{$item->id}}">{{$item->nama_jabatan}}</option>
@endforeach
</select>
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<button type="submit" class="btn btn-primary">Submit</button>
<a href="/pegawai" class="btn btn-danger">Kembali</a>
</div>
</form>
5. Selesai
Silahkan sahabat ketik perintah php artisan serve lalu ketikkan pada browser kesayangan sahabat http://127.0.0.1:8000/pegawai. Cobalah untuk upload foto.
Lalu bagaimana dengan Edit Gambar nya..?
---B. Edit Gambar---
1. Sahabat tinggal tambahkan saja code berikut pada file controller pegawai:
public function update(Request $request)
{
// update data pegawai
$file = $request->file('image');
$nama_file = time()."_".$file->getClientOriginalName();
$tujuan_upload = 'foto_pegawai';
$file->move($tujuan_upload, $nama_file);
DB::table('pegawai')->where('id',$request->id)->update([
'image' => $nama_file,
'nama' => $request->nama,
'alamat_rumah' => $request->alamat_rumah,
'alamat_kantor' => $request->alamat_kantor,
'umur' => $request->umur,
'jabatan_id' => $request->jabatan_id
]);
// alihkan halaman ke halaman pegawai
return redirect('/pegawai');
}
{
// update data pegawai
$file = $request->file('image');
$nama_file = time()."_".$file->getClientOriginalName();
$tujuan_upload = 'foto_pegawai';
$file->move($tujuan_upload, $nama_file);
DB::table('pegawai')->where('id',$request->id)->update([
'image' => $nama_file,
'nama' => $request->nama,
'alamat_rumah' => $request->alamat_rumah,
'alamat_kantor' => $request->alamat_kantor,
'umur' => $request->umur,
'jabatan_id' => $request->jabatan_id
]);
// alihkan halaman ke halaman pegawai
return redirect('/pegawai');
}
2. Tambahkan code berikut pada edit.pegawai.blade.php:
<form action="{{url('pegawai/update', $peg->id)}}" method="post" enctype="multipart/form-data">
{{ csrf_field() }}
<div class="card-body">
<div class="form-group">
<label>Ganti Foto</label>
<input class="form-control" type="file" name="image" placeholder="image"><br/>
<img width="150px" src="{{ url('/foto_pegawai/'.$peg->image) }}">
</div>
<div class="form-group">
<label for="nama">Nama</label>
<input type="text" class="form-control" id="nama" name="nama" value="{{ $peg->nama }}" required="required">
</div>
<div class="form-group">
<label for="alamat_rumah">Alamat Rumah </label>
<textarea class="form-control" name="alamat_rumah" required="required">{{ $peg->alamat_rumah }}</textarea>
</div>
<div class="form-group">
<label for="alamat_kantor">Alamat Kantor </label>
<textarea class="form-control" name="alamat_kantor" required="required">{{ $peg->alamat_kantor }}</textarea>
</div>
<div class="form-group">
<label for="umur">Umur</label>
<input type="number" class="form-control" name="umur" value="{{ $peg->umur }}" required="required">
</div>
<div class="form-group">
<label for="jabatan_id">Jabatan</label>
<select name="jabatan_id" id="jabatan_id" class="form-control" required="required">
<option value="{{ $peg->jabatan_id }}">{{$peg->jabatan->nama_jabatan}}</option>
@foreach ($jab as $item)
<option value="{{$item->id}}">{{$item->nama_jabatan}}</option>
@endforeach
</select>
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<button type="submit" class="btn btn-primary">Simpan</button>
<a href="/pegawai" class="btn btn-danger">Kembali</a>
</div>
</form>
3. Selesai sudah, sahabat tinggal coba untuk edit foto pegawai.
Demikian tutorial Upload dan Edit gambar pada laravel 8 ini admin sampaikan semoga bermanfaat.
Salam bahagia 😊
Wassalamu'alaikum, Warahmatullahi, Wabarokatuh..
0 Comments