In this video we are going to learn about Making Slider Dynamic.
So let see how can we Make Slider Dynamic.
So first of all lets create a model for the slider.
For that switch to the command prompt and for creating the model run the following command.
Now switch to the project and lets open Slider migration and write the following code.
Now lets migrate this migration.
So switch to the command prompt and run the command.
Now lets create three livewire component
One for the list all slides second for the add new slide and third component for the edit the slide.
So for creating the livewire component type the command
Now switch to the project and lets create the route for these three component.
So open web.php file add the following code in admin middleware route group.
Inside the admin middleware group route after this route add new route
So first create route for the slidercomponent
Now open the AdminSliderComponent.class file and add the following code.
Now lets open the admin-slider-component.blade.php view file and add the following code.
Now open the base layout file and inside the admin menu.
Now go to the AdminAddSlideComponent.php Class file add the following code.
Now lets open the admin-add-slide-component.blade.php file and write the following code.
Now lets open the AdminEditSlideCompoent.php class file and write the following code.
Now go lets open admin-edit-component.blade.php view file and add the following code
Now lets check it.
So switch to the browser and refresh the page.
Now add some slider.
Now lets use thses created slides on home page.
So for that go inside the HomeComponent.php Class File
And Here inside the render function lets fetch the slides which status active.
Now return $slider to the view file.
Now open the home-component.blade.php view file and the following code.
Now its done lets check it.
So switch to browser and refresh the page now go to the home page And here you can see the slider which is now dynamic.
From manage slider page you can add, edit and delete slide.
So in this way you can make home page slider dynamic.
So let see how can we Make Slider Dynamic.
So first of all lets create a model for the slider.
For that switch to the command prompt and for creating the model run the following command.
php artisan make:model Slider –m
Now switch to the project and lets open Slider migration and write the following code.
<?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');
}
}
Now lets migrate this migration.
So switch to the command prompt and run the command.
Php artisan migrate
Now lets create three livewire component
One for the list all slides second for the add new slide and third component for the edit the slide.
So for creating the livewire component type the 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 lets create the route for these three component.
So open web.php file add the following code in admin middleware route group.
Inside the admin middleware group route after this route add new route
So first create route for the slidercomponent
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');
}
}
Now lets 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 inside the admin menu.
<li class=\"menu-item\">
<a title=\"Manage Slider\" href=\"{{route('admin.slider')}}\">Manage Slider</a>
</li>
Now go to the AdminAddSlideComponent.php Class file 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 lets 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>
Now lets open the AdminEditSlideCompoent.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 go lets open 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 lets check it.
So switch to the browser and refresh the page.
Now add some slider.
Now lets use thses created slides on home page.
So for that go inside the HomeComponent.php Class File
And Here inside the render function lets fetch the slides which status active.
$sliders = Slider::where('status',1)->get();
Now return $slider to the view file.
Now open the home-component.blade.php view file and the following code.
Now its done lets check it.
So switch to browser and refresh the page now go to the home page And here you can see the slider which is now dynamic.
From manage slider page you can add, edit and delete slide.
So in this way you can make home page slider dynamic.
