In this laravel gallery managements posts, We are going to share with you how to make bootstrap laravel gallery managements with validation and fancybox in laravel 9, laravel 8, laravel 7, laravel 6 and laravel 5 web application.
laravel gallery managements – Image Gallery CRUD example from scratch
In this laravel gallery managements example i created “gallery_managements” table with main ‘title’ and ‘image’ columns. We created single controller and view file for display form and error messages, validation etc. And then complete this example you will display layout:
Step 1 : Install Laravel Application
composer create-project --prefer-dist laravel/laravel blog
Step 2: Database Configuration
.env
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=gallery_art DB_USERNAME=root DB_PASSWORD=Pakainfo_w3@#$%c60!@#$00025@$%^
Step 3: Create GalleryManagements Table and Model
php artisan make:migration create_gallery_managements_table
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateGalleryManagementsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('gallery_managements', function (Blueprint $table) {
$table->increments('id');
$table->string('title');
$table->string('image');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::drop('gallery_managements');
}
}
php artisan make:model GalleryManagements
app/GalleryManagements.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class GalleryManagements extends Model
{
protected $table = 'gallery_managements';
protected $fillable = ['title','image'];
}
Step 4: Create Route
routes/web.php
Route::get('gallery-managements', '[email protected]');
Route::post('gallery-managements', '[email protected]');
Route::delete('gallery-managements/{id}', '[email protected]');
Step 5: Create Controller
php artisan make:controller GalleryManagementsController
So, let’s copy bellow code and put on GalleryManagementsController.php file.
app/Http/Controllers/ContactUSController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\GalleryManagements;
class GalleryManagementsController extends Controller
{
/**
* Listing Of images gallery
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$images = GalleryManagements::get();
return view('gallery-managements',compact('images'));
}
/**
* Upload image function
*
* @return \Illuminate\Http\Response
*/
public function upload(Request $request)
{
$this->validate($request, [
'title' => 'required',
'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
]);
$input['image'] = time().'.'.$request->image->getClientOriginalExtension();
$request->image->move(public_path('images'), $input['image']);
$input['title'] = $request->title;
GalleryManagements::create($input);
return back()
->with('success','Image Uploaded successfully.');
}
/**
* Remove Image function
*
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
GalleryManagements::find($id)->delete();
return back()
->with('success','Image removed successfully.');
}
}
Step 6: Create View
resources/views/gallery-managements.blade.php
<!DOCTYPE html>
<html>
<head>
<title>laravel gallery managements - www.pakainfo.com</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<style type="text/css">
.gallery
{
display: inline-block;
margin-top: 20px;
}
.close-icon{
border-radius: 50%;
position: absolute;
right: 5px;
top: -10px;
padding: 5px 8px;
}
.form-image-upload{
background: #e8e8e8 none repeat scroll 0 0;
padding: 15px;
}
</style>
</head>
<body>
<div class="container">
<h3>Laravel - Image Gallery CRUD Example</h3>
<form action="{{ url('gallery-managements') }}" class="form-image-upload" method="POST" enctype="multipart/form-data">
{!! csrf_field() !!}
@if (count($errors) > 0)
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
@if ($message = Session::get('success'))
<div class="alert alert-success alert-block">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>{{ $message }}</strong>
</div>
@endif
<div class="row">
<div class="col-md-5">
<strong>Title:</strong>
<input type="text" name="title" class="form-control" placeholder="Title">
</div>
<div class="col-md-5">
<strong>Image:</strong>
<input type="file" name="image" class="form-control">
</div>
<div class="col-md-2">
<br/>
<button type="submit" class="btn btn-success">Upload</button>
</div>
</div>
</form>
<div class="row">
<div class='list-group gallery'>
@if($images->count())
@foreach($images as $image)
<div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
<a class="thumbnail fancybox" rel="ligthbox" href="/images/{{ $image->image }}">
<img class="img-responsive" alt="" src="/images/{{ $image->image }}" />
<div class='text-center'>
<small class='text-muted'>{{ $image->title }}</small>
</div> <!-- text-center / end -->
</a>
<form action="{{ url('gallery-managements',$image->id) }}" method="POST">
<input type="hidden" name="_method" value="delete">
{!! csrf_field() !!}
<button type="submit" class="close-icon btn btn-danger"><i class="glyphicon glyphicon-remove"></i></button>
</form>
</div>
@endforeach
@endif
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$(".fancybox").fancybox({
openEffect: "none",
closeEffect: "none"
});
});
</script>
</html>
Now you can open bellow URL on your browser and run laravel gallery managements:
run this Example : https://laravel.com/docs/9.x/validation#rule-image
http://localhost:8000/gallery-managements