Scribd
Upload
10 views14 pages

CRUD Upload

Uploaded by

azammohamad581
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views14 pages

CRUD Upload

Uploaded by

azammohamad581
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

Membuat CRUD Upload di Laravel 10

1. Ciptakan Project Baru

composer create-project laravel/laravel:^10.* multiuser

2. Membuat file Migrasi

php artisan make:migration create_barang_table

3. Edit file migrasi tabel barang

public function up(): void


{
Schema::create('barang', function (Blueprint $table) {
$table->id();
$table->string('kode_barang',20)->unique();
$table->string('nama_barang',255);
$table->double('harga');
$table->string('photo',255);
});
}

3. Ciptakan sebuah database baru di MySQL


Update file .env

DB_DATABASE=your-database-name
DB_USERNAME=your-database-user
DB_PASSWORD=your-database-password

4. Lakukan proses Migrasi

php artisan migrate

5. Membuat Model dan Controller Barang


php artisan make:model BarangModel

php artisan make:controller BarangController

6. Edit BarangModel

<?php

namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class BarangModel extends Model
{
use HasFactory;
protected $table = 'barang';
public $timestamps = false;
protected $fillable = ['kode_barang','nama_barang','harga','photo'];
}

7. Edit BarangController

<?php

namespace App\Http\Controllers;
use App\Models\BarangModel;
use Illuminate\Http\Request;
use Illuminate\Http\RedirectResponse;
use Illuminate\View\View;
class BarangController extends Controller
{
public function index() : view
{
$data['barang'] = BarangModel::orderBy('id','desc')->paginate(5);
return view('barang.index', $data);
}

public function create() : view


{
return view('barang.create');
}

public function store(Request $request) : RedirectResponse


{
$validatedData = $request->validate([
'kode_barang' => 'required',
'nama_barang' => 'required',
'harga' => 'required',
'photo' => 'nullable|image|mimes:jpeg,png,jpg,gif|max:2048',
]);
if ($request->hasFile('photo')) {
$image = $request->file('photo');
$imageName = time().'.'.$image->getClientOriginalExtension();
$image->move(public_path('images'), $imageName);
$validatedData['photo'] = $imageName;
}
BarangModel::create($validatedData);

return redirect()->route('barang.index')
->with('success','barang has been created
successfully.');
}

public function show(BarangModel $barang) : view


{
return view('barang.show',compact('barang'));
}

public function edit(BarangModel $barang) : view


{
return view('barang.edit',compact('barang'));
}

public function update(Request $request, $id) : RedirectResponse


{
$request->validate([
'kode_barang' => 'required',
'nama_barang' => 'required',
'harga' => 'required',
'photo' => 'nullable|image|mimes:jpeg,png,jpg,gif|max:2048',
]);

$barang = BarangModel::find($id);
// Update only if a new photo is provided
if ($request->hasFile('photo')) {
$image = $request->file('photo');
$imageName = time().'.'.$image->getClientOriginalExtension();
$image->move(public_path('images'), $imageName);
$barang->photo = $imageName;
}

// Update other fields


$barang->kode_barang = $request->kode_barang;
$barang->nama_barang = $request->nama_barang;
$barang->harga = $request->harga;
$barang->save();

return redirect()->route('barang.index')
->with('success','barang Has Been updated successfully');
}

public function destroy(BarangModel $barang) : RedirectResponse


{
$barang->delete();
return redirect()->route('barang.index')
->with('success','barang has been deleted successfully');
}
}

8. Edit Route (web.php)

Route::resource('barang', BarangController::class);

9. Membuat folder images di dalam folder public


10. Membuat View: index.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daftar barang</title>
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>

<div class="container">
<div class="row justify-content-center">
<div class="col-md-10">
<div class="card">
<div class="card-header">Daftar Barang</div>

<div class="card-body">
<a href="{{ route('barang.create') }}"
class="btn btn-primary mb-3">Tambah Barang</a>

<table class="table">
<thead>
<tr>
<th>Kode Barang</th>
<th>Nama Barang</th>
<th>Harga</th>
<th>Photo</th>
</tr>
</thead>
<tbody>
@foreach($barang as $barang)
<tr>
<td>{{ $barang->kode_barang }}</td>
<td>{{ $barang->nama_barang }}</td>
<td>{{ $barang->harga }}</td>
<td>
@if($barang->photo)
<img src="{{ asset('images/'.$barang->photo)
}}" alt="{{ $barang->nama_barang }}" style="max-width: 100px;">
@else
No photo
@endif
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
</script>

</body>
</html>

11. Membuat View: create.blade.php


Dalam upload ini saya menambahkan JQuery untuk membuat proses upload ini lebih interaktif

Di bagian akhir template blade;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('#photo').change(function(){
var input = this;
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#imagePreview').attr('src', e.target.result);
$('#imagePreviewContainer').show();
}
reader.readAsDataURL(input.files[0]);
}
});
});
</script>

Full Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upload barang</title>
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>

<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Upload Foto Barang</div>

<div class="card-body">
<form action="{{ route('barang.store') }}"
method="POST" enctype="multipart/form-data">
<input type="hidden" name="_token" value="{{ csrf_token()
}}">

<div class="form-group">
<label for="nim">Kode Barang:</label>
<input type="text" class="form-control"
id="kode_barang" name="kode_barang">
</div>

<div class="form-group">
<label for="nama">Nama Barang:</label>
<input type="text" class="form-control"
id="nama_barang" name="nama_barang">
</div>

<div class="form-group">
<label for="harga">Harga:</label>
<input type="text" class="form-control"
id="harga" name="harga">
</div>

<div class="form-group">
<label for="photo">Photo:</label>
<input type="file" class="form-control-file"
id="photo" name="photo">

</div>
<div id="imagePreviewContainer" style="display:none;">
<img id="imagePreview" src="#"
alt="Image Preview" style="max-width: 200px;">
</div>

<button type="submit" class="btn btn-


primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
</script>
<script>
$(document).ready(function(){
$('#photo').change(function(){
var input = this;
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#imagePreview').attr('src', e.target.result);
$('#imagePreviewContainer').show();
}
reader.readAsDataURL(input.files[0]);
}
});
});
</script>

</body>
</html>

12. Membuat View: edit.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Edit Barang</title>
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/
bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Edit Barang</div>
<div class="card-body">
<form method="POST" action="{{ route('barang.update',
$barang->id) }}" enctype="multipart/form-data">
@csrf
@method('PUT')

<div class="form-group row">


<label for="kode_barang" class="col-md-4
col-form-label text-md-right">Kode Barang</label>
<div class="col-md-6">
<input id="kode_barang" type="text"
class="form-control" name="kode_barang"
value="{{ $barang->kode_barang }}"
required autofocus>
</div>
</div>

<div class="form-group row">


<label for="nama_barang" class="col-md-4
col-form-label text-md-right">Nama Barang</label>
<div class="col-md-6">
<input id="nama_barang" type="text"
class="form-control" name="nama_barang"
value="{{ $barang->nama_barang }}" required>
</div>
</div>

<div class="form-group row">


<label for="harga" class="col-md-4 col-form-label
text-md-right">Harga</label>
<div class="col-md-6">
<input id="harga" type="number"
class="form-control" name="harga"
value="{{ $barang->harga }}" required>
</div>
</div>

<div class="form-group row">


<label for="photo" class="col-md-4 col-form-label
text-md-right">Photo</label>
<div class="col-md-6">
<input id="photo" type="file"
class="form-control-file" name="photo">
@if($barang->photo)
<img src="{{ asset('images/'.$barang-
>photo)
}}" alt="Current Photo" style="max-width:
100px; margin-top: 10px;">
@else
<span>No photo available</span>
@endif
</div>
</div>

<div class="form-group row mb-0">


<div class="col-md-6 offset-md-4">
<button type="submit" class="btn btn-primary">
Update Barang
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>

<!-- Bootstrap JS -->


<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
</script>
</body>
</html>

13. Membuat View: show.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Edit Barang</title>
<!-- Bootstrap CSS -->
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Edit Barang</div>

<div class="card-body">
<form method="POST" action="{{ route('barang.destroy',
$barang->id) }}" enctype="multipart/form-data">
@csrf
@method('DELETE')

<div class="form-group row">


<label for="kode_barang" class="col-md-4 col-form-
label text-md-right">Kode Barang</label>
<div class="col-md-6">
<input id="kode_barang" type="text"
class="form-control" name="kode_barang" value="{{ $barang->kode_barang }}"
readonly>
</div>
</div>

<div class="form-group row">


<label for="nama_barang" class="col-md-4 col-form-
label text-md-right">Nama Barang</label>
<div class="col-md-6">
<input id="nama_barang" type="text"
class="form-control" name="nama_barang" value="{{ $barang->nama_barang }}"
readonly>
</div>
</div>

<div class="form-group row">


<label for="harga" class="col-md-4 col-form-label
text-md-right">Harga</label>
<div class="col-md-6">
<input id="harga" type="number" class="form-
control" name="harga" value="{{ $barang->harga }}" readonly >
</div>
</div>

<div class="form-group row">


<label for="photo" class="col-md-4 col-form-label
text-md-right">Photo</label>
<div class="col-md-6">
<input id="photo" type="file" class="form-
control-file" name="photo" readonly>
@if($barang->photo)
<img src="{{ asset('images/'.$barang-
>photo) }}" alt="Current Photo" style="max-width: 100px; margin-top: 10px;">
@else
<span>No photo available</span>
@endif
</div>
</div>

<div class="form-group row mb-0">


<div class="col-md-6 offset-md-4">
<button type="submit" class="btn btn-danger">
Delete Barang
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
</script>
</body>
</html>

You might also like