Laravel Home Services Project - Making Slider Dynamic
In this video, we will learn about making the slider dynamic in our Laravel project.
Let's see how we can make the slider dynamic.
First, we need to create a model for the slider.
To do this, switch to the command prompt and run the following command to create the model:
php artisan make:model Slider –m
Now, switch to the project and open the Slider migration file.
Write the following code in the migration file:
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateSlidersTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('sliders', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->string('image');
$table->boolean('status')->default(false);
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('sliders');
}
}
Next, migrate the migration by running the following command:
Php artisan migrate
Now, let's create three Livewire components: one for listing all slides, one for adding new slides, and one for editing slides.
To create the Livewire components, run the following command:
php artisan make:livewire admin/AdminSliderComponent
php artisan make:livewire admin/AdminAddSlideComponent
php artisan make:livewire admin/AdminEditSlideComponent
Now, switch to the project and create routes for these three components.
Open the web.php file and add the following code in the admin middleware route group:
Route::get('/admin/slider',AdminSliderComponent::class)->name('admin.slider');
Route::get('/admin/slide/add',AdminAddSlideComponent::class)->name('admin.add_slide');
Route::get('/admin/slide/edit/{slide_id}',AdminEditSlideComponent::class)->name('admin.edit_slide');
Now, open the AdminSliderComponent.class file and add the following code:
<?php
namespace App\Http\Livewire\Admin;
use App\Models\Slider;
use Livewire\Component;
use Livewire\WithPagination;
class AdminSliderComponent extends Component
{
use WithPagination;
public function deleteSlide($slide_id)
{
$slide = Slider::find($slide_id);
unlink('images/slider/'.$slide->image);
$slide->delete();
session()->flash('message','Slide has been deleted Successfully!');
}
public function render()
{
$slides = Slider::paginate(10);
return view('livewire.admin.admin-slider-component',['slides'=>$slides])->layout('layouts.base');
}
}
Next, open the admin-slider-component.blade.php view file and add the following code:
<div>
<style>
nav svg{
height: 20px;
}
nav .hidden{
display: block !important;
}
</style>
<div class="section-title-01 honmob">
<div class="bg_parallax image_02_parallax"></div>
<div class="opacy_bg_02">
<div class="container">
<h1>All Slides</h1>
<div class="crumbs">
<ul>
<li><a href="/">Home</a></li>
<li>/</li>
<li>All Slides</li>
</ul>
</div>
</div>
</div>
</div>
<section class="content-central">
<div class="content_info">
<div class="paddings-mini">
<div class="container">
<div class="row portfolioContainer">
<div class="col-md-12 profile1">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-md-6">
All Slides
</div>
<div class="col-md-6">
<a href="{{route('admin.add_slide')}}" class="btn btn-info pull-right">Add New</a>
</div>
</div>
</div>
<div class="panel-body">
@if(Session::has('message'))
<div class="alert alert-success" role="alert">{{Session::get('message')}}</div>
@endif
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Image</th>
<th>Title</th>
<th>Status</th>
<th>Created At</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach($slides as $slide)
<tr>
<td>{{$slide->id}}</td>
<td><img src="{{asset('images/slider')}}/{{$slide->image}}" height="60" /> </td>
<td>{{$slide->title}}</td>
<td>
@if($slide->status)
Active
@else
Inactive
@endif
</td>
<td>{{$slide->created_at}}</td>
<td>
<a href="{{route('admin.edit_slide',['slide_id'=>$slide->id])}}"><i class="fa fa-edit fa-2x text-info"></i></a>
<a href="#" onclick="confirm('Are you sure, you want to delete this slide?') || event.stopImmediatePropagation()" wire:click.prevent="deleteSlide({{$slide->id}})" style="margin-left:10px;"><i class="fa fa-times fa-2x text-danger"></i></a>
</td>
</tr>
@endforeach
</tbody>
</table>
{{$slides->links()}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Now, open the base layout file and add the following code inside the admin menu:
<li class="menu-item">
<a title="Manage Slider" href="{{route('admin.slider')}}">Manage Slider</a>
</li>
Next, go to the AdminAddSlideComponent.php Class file and add the following code:
<?php
namespace App\Http\Livewire\Admin;
use App\Models\Slider;
use Carbon\Carbon;
use Livewire\Component;
use Livewire\WithFileUploads;
class AdminAddSlideComponent extends Component
{
use WithFileUploads;
public $title;
public $image;
public $status=0;
public function updated($fields)
{
$this->validateOnly($fields,[
'title' => 'required',
'image' => 'required|mimes:jpeg,png'
]);
}
public function addNewSlide()
{
$this->validate([
'title' => 'required',
'image' => 'required|mimes:jpeg,png'
]);
$slide = new Slider();
$slide->title = $this->title;
$imageName = Carbon::now()->timestamp . '.' . $this->image->extension();
$this->image->storeAs('slider',$imageName);
$slide->image = $imageName;
$slide->status = $this->status;
$slide->save();
session()->flash('message','Slide has been created successfully!');
}
public function render()
{
return view('livewire.admin.admin-add-slide-component')->layout('layouts.base');
}
}
Now, open the admin-add-slide-component.blade.php file and write the following code:
<div>
<div class="section-title-01 honmob">
<div class="bg_parallax image_02_parallax"></div>
<div class="opacy_bg_02">
<div class="container">
<h1>Add Slide</h1>
<div class="crumbs">
<ul>
<li><a href="/">Home</a></li>
<li>/</li>
<li>Add Slide</li>
</ul>
</div>
</div>
</div>
</div>
<section class="content-central">
<div class="content_info">
<div class="paddings-mini">
<div class="container">
<div class="row portfolioContainer">
<div class="col-md-8 col-md-offset-2 profile1">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-md-6">
Add New Slide
</div>
<div class="col-md-6">
<a href="{{route('admin.slider')}}" class="btn btn-info pull-right">All Slides</a>
</div>
</div>
</div>
<div class="panel-body">
@if(Session::has('message'))
<div class="alert alert-success" role="alert">{{Session::get('message')}}</div>
@endif
<form class="form-horizontal" wire:submit.prevent="addNewSlide">
@csrf
<div class="form-group">
<label for="title" class="control-label col-sm-3">Title: </label>
<div class="col-sm-9">
<input type="text" class="form-control" name="title" wire:model="title" />
@error('title') <p class="text-danger">{{$message}}</p> @enderror
</div>
</div>
<div class="form-group">
<label for="slug" class="control-label col-sm-3">Image: </label>
<div class="col-sm-9">
<input type="file" class="form-control-file" name="image" wire:model="image" />
@error('image') <p class="text-danger">{{$message}}</p> @enderror
@if($image)
<img src="{{$image->temporaryUrl()}}" width="60" />
@endif
</div>
</div>
<div class="form-group">
<label for="status" class="control-label col-sm-3">Status: </label>
<div class="col-sm-9">
<select class="form-control" name="status" wire:model="status">
<option value="1">Active</option>
<option value="0">Inactive</option>
</select>
@error('status') <p class="text-danger">{{$message}}</p> @enderror
</div>
</div>
<button type="submit" class="btn btn-success pull-right">Add Slide</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Next, open the AdminEditSlideComponent.php class file and write the following code:
<?php
namespace App\Http\Livewire\Admin;
use App\Models\Slider;
use Carbon\Carbon;
use Livewire\Component;
use Livewire\WithFileUploads;
class AdminEditSlideComponent extends Component
{
use WithFileUploads;
public $slide_id;
public $title;
public $image;
public $status;
public $newimage;
public function mount($slide_id)
{
$slide = Slider::find($slide_id);
$this->slide_id = $slide->id;
$this->title = $slide->title;
$this->image = $slide->image;
$this->status = $slide->status;
}
public function updated($fields)
{
$this->validateOnly($fields,[
'title' => 'required'
]);
if($this->newimage)
{
$this->validateOnly($fields,[
'newimage' => 'required|mimes:jpeg,png'
]);
}
}
public function updateSlide()
{
$this->validate([
'title' => 'required'
]);
if($this->newimage)
{
$this->validate([
'newimage' => 'required|mimes:jpeg,png'
]);
}
$slide = Slider::find($this->slide_id);
$slide->title = $this->title;
if($this->newimage)
{
unlink('images/slider/'.$slide->image);
$imageName = Carbon::now()->timestamp . '.' . $this->newimage->extension();
$this->newimage->storeAs('slider',$imageName);
$slide->image = $imageName;
}
$slide->status = $this->status;
$slide->save();
session()->flash('message','Slide has been updated successfully!');
}
public function render()
{
return view('livewire.admin.admin-edit-slide-component')->layout('layouts.base');
}
}
Now, open the admin-edit-component.blade.php view file and add the following code:
<div>
<div class="section-title-01 honmob">
<div class="bg_parallax image_02_parallax"></div>
<div class="opacy_bg_02">
<div class="container">
<h1>Edit Slide</h1>
<div class="crumbs">
<ul>
<li><a href="/">Home</a></li>
<li>/</li>
<li>Edit Slide</li>
</ul>
</div>
</div>
</div>
</div>
<section class="content-central">
<div class="content_info">
<div class="paddings-mini">
<div class="container">
<div class="row portfolioContainer">
<div class="col-md-8 col-md-offset-2 profile1">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-md-6">
Edit Slide
</div>
<div class="col-md-6">
<a href="{{route('admin.slider')}}" class="btn btn-info pull-right">All Slides</a>
</div>
</div>
</div>
<div class="panel-body">
@if(Session::has('message'))
<div class="alert alert-success" role="alert">{{Session::get('message')}}</div>
@endif
<form class="form-horizontal" wire:submit.prevent="updateSlide">
@csrf
<div class="form-group">
<label for="title" class="control-label col-sm-3">Title: </label>
<div class="col-sm-9">
<input type="text" class="form-control" name="title" wire:model="title" />
@error('title') <p class="text-danger">{{$message}}</p> @enderror
</div>
</div>
<div class="form-group">
<label for="slug" class="control-label col-sm-3">Image: </label>
<div class="col-sm-9">
<input type="file" class="form-control-file" name="newimage" wire:model="newimage" />
@error('newimage') <p class="text-danger">{{$message}}</p> @enderror
@if($newimage)
<img src="{{$newimage->temporaryUrl()}}" width="60" />
@else
<img src="{{asset('images/slider')}}/{{$image}}" width="60" />
@endif
</div>
</div>
<div class="form-group">
<label for="status" class="control-label col-sm-3">Status: </label>
<div class="col-sm-9">
<select class="form-control" name="status" wire:model="status">
<option value="1">Active</option>
<option value="0">Inactive</option>
</select>
@error('status') <p class="text-danger">{{$message}}</p> @enderror
</div>
</div>
<button type="submit" class="btn btn-success pull-right">Update Slide</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Now, let's check the result.
Switch to the browser and refresh the page.
Add some sliders and then let's use the created slides on the home page.
To do this, go to the HomeComponent.php Class File and inside the render function, fetch the slides with an active status.
$sliders = Slider::where('status',1)->get();
Return the $slider variable to the view file.
Now, open the home-component.blade.php view file and add the following code:
Now, it's done. Let's check the result.
Switch to the browser and refresh the page.
Go to the home page and you will see the slider, which is now dynamic.
From the manage slider page, you can add, edit, and delete slides.
So, in this way, you can make the home page slider dynamic.
