Advanced laravel crud operation and image upload with examples using resource codntroller
Laravel 9 tutorial - This lesson will show you how to create advanced laravel CRUD operation and image upload with validation using resource controller.
Products Migration
public function up()
{
Schema::create('products', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->text('detail');
$table->string('image');
$table->timestamps();
});
}
Products Model
protected $fillable = [
'name',
'detail',
'image'
];
Products Controller
namespace App\Http\Controllers;
use App\Models\Products;
use Illuminate\Http\Request;
class ProductsController extends Controller
{
public function index()
{
$products = Products::all();
return view('products.index', compact('products'));
}
public function create()
{
return view('products.create');
}
public function store(Request $request)
{
$request->validate([
'name' => 'required',
'detail' => 'required',
'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
]);
$input = $request->all();
if ($image = $request->file('image')) {
$destinationPath = 'img/';
$productImage = date('YmdHis') . "." . $image->getClientOriginalExtension();
$image->move($destinationPath, $productImage);
$input['image'] = "$productImage";
}
Products::create($input);
return redirect()->route('products.index')
->with('success','Product created successfully.');
}
public function show(Products $product)
{
return view('products.show', compact('product'));
}
public function edit(Products $product)
{
return view('products.edit', compact('product'));
}
public function update(Request $request, Products $product)
{
$request->validate([
'name' => 'required',
'detail' => 'required'
]);
$input = $request->all();
if ($image = $request->file('image')) {
$destinationPath = 'img/';
$productImage = date('YmdHis') . "." . $image->getClientOriginalExtension();
$image->move($destinationPath, $productImage);
$input['image'] = "$productImage";
} else {
unset($input['image']);
}
$product->update($input);
return redirect()->route('products.index')
->with('success','Product updated successfully.');
}
public function destroy(Products $product)
{
$product->delete();
return redirect()->route('products.index')
->with('success','Product deleted successfully');
}
}
Routes
Route::resource('products', \App\Http\Controllers\ProductsController::class);
Views Producst
Index Page
@extends('templates.master')
@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin">
<div>
<h4 class="mb-3 mb-md-0">All Products</h4>
</div>
<div class="d-flex align-items-center flex-wrap text-nowrap">
<a href="{{route('products.create')}}" class="btn btn-info btn-icon-text mb-2 mb-md-0">
<i data-feather="plus"></i> Add New Product
</a>
</div>
</div>
<div class="card">
<div class="card-body">
@if ($message = session('success'))
<div class="alert alert-success">
<p>{{ $message }}</p>
</div>
@endif
<div class="table-responsive">
<table class="table table-sm table-hover mb-0">
<thead>
<tr>
<th class="pt-0">#</th>
<th class="pt-0">Product Name</th>
<th class="pt-0">Product Detail</th>
<th class="pt-0">Product Image</th>
<th class="pt-0">Created At</th>
<th class="pt-0">Actions</th>
</tr>
</thead>
<tbody>
@foreach($products as $index => $val)
<tr>
<td>{{++$index}}</td>
<td>{{$val->name}}</td>
<td>{{$val->detail}}</td>
<td><img alt="img" src="/img/{{ $val->image }}" width="100px"></td>
<td>{{ $val->created_at }}</td>
<td>
<form action="{{ route('products.destroy',$val->id) }}" method="POST">
{{ csrf_field() }}
@method('DELETE')
<a class="btn btn-sm btn-success" href="{{route('products.show', $val->id)}}"><i data-feather="eye"></i> Show</a>
<a class="btn btn-sm btn-warning" href="{{route('products.edit', $val->id)}}"><i data-feather="link"></i> Edit</a>
<button class="btn btn-sm btn-danger" type="submit"><i data-feather="trash"></i> Delete</button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
@endsection
Create Page
@extends('templates.master')
@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin">
<div>
<h4 class="mb-3 mb-md-0">Add New Product</h4>
</div>
<div class="d-flex align-items-center flex-wrap text-nowrap">
<a href="{{route('products.index')}}" class="btn btn-info btn-icon-text mb-2 mb-md-0">
All Products
</a>
</div>
</div>
<div class="card">
<div class="card-body">
@if ($errors->any())
<div class="mt-2 alert alert-danger">
<ul class="mb-0">
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{ route('products.store') }}" method="POST" enctype="multipart/form-data">
{{ csrf_field() }}
<div class="mb-3">
<label for="name" class="form-label">Product Name <span class="text-danger">*</span></label>
<input id="name" name="name" type="text" class="form-control" placeholder="Product Name">
</div>
<div class="mb-3">
<label for="detail" class="form-label">Detail Product Name <span class="text-danger">*</span></label>
<textarea class="form-control" placeholder="Detail Product Name" name="detail" id="detail" cols="12" rows="3"></textarea>
</div>
<div class="mb-3">
<label for="image" class="form-label">Product Image <span class="text-danger">*</span></label>
<input id="image" name="image" type="file" class="form-control">
</div>
<div>
<button type="submit" class="btn btn-success btn-icon-text mb-2 mb-md-0">
Save Product Data
</button>
</div>
</form>
</div>
</div>
@endsection
Edit Page
@extends('templates.master')
@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin">
<div>
<h4 class="mb-3 mb-md-0">Add New Product</h4>
</div>
<div class="d-flex align-items-center flex-wrap text-nowrap">
<a href="{{route('products.index')}}" class="btn btn-info btn-icon-text mb-2 mb-md-0">
All Products
</a>
</div>
</div>
<div class="card">
<div class="card-body">
@if ($errors->any())
<div class="mt-2 alert alert-danger">
<ul class="mb-0">
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{ route('products.update', $product->id) }}" method="POST" enctype="multipart/form-data">
{{ csrf_field() }}
@method('PUT')
<div class="mb-3">
<label for="name" class="form-label">Product Name <span class="text-danger">*</span></label>
<input value="{{$product->name}}" id="name" name="name" type="text" class="form-control" placeholder="Product Name">
</div>
<div class="mb-3">
<label for="detail" class="form-label">Detail Product Name <span class="text-danger">*</span></label>
<textarea class="form-control" placeholder="Detail Product Name" name="detail" id="detail" cols="12" rows="3">{{$product->detail}}</textarea>
</div>
<div class="mb-3">
<label for="image" class="form-label">Product Image <span class="text-danger">*</span></label>
<input id="image" name="image" type="file" class="form-control">
<img class="mt-2" src="/img/{{ $product->image }}" width="300px">
</div>
<div>
<button type="submit" class="btn btn-success btn-icon-text mb-2 mb-md-0">
Save Product Data
</button>
</div>
</form>
</div>
</div>
@endsection
Show Page
@extends('templates.master')
@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin">
<div>
<h4 class="mb-3 mb-md-0">Detail Product</h4>
</div>
<div class="d-flex align-items-center flex-wrap text-nowrap">
<a href="{{route('products.index')}}" class="btn btn-info btn-icon-text mb-2 mb-md-0">
All Products
</a>
</div>
</div>
<div class="card">
<div class="card-body">
<form action="#" method="POST">
<div class="mb-3">
<label for="name" class="form-label">Product Name</label>
<input value="{{$product->name}}" disabled id="name" name="name" type="text" class="form-control" placeholder="Product Name">
</div>
<div class="mb-3">
<label for="detail" class="form-label">Detail Product Name</label>
<textarea class="form-control" disabled placeholder="Detail Product Name" name="detail" id="detail" cols="12" rows="3">{{$product->detail}}</textarea>
</div>
<div class="mb-3">
<label for="image" class="form-label">Product Image</label>
<div>
<img class="mt-2" src="/img/{{ $product->image }}" width="300px">
</div>
</div>
<div>
<a href="{{route('products.edit',$product->id)}}" class="btn btn-success btn-icon-text mb-2 mb-md-0">
Edit Product
</a>
</div>
</form>
</div>
</div>
@endsection
Video Tutorial
Source code available on github https://github.com/kodeajaibcom/laravel-9-tutorials
COMMENTS