In this video we are going to learn about Making Home Page Slider Dynamic.
So let see how can we make home page slider dynamic.
So first of all lets create a model for the slider.
For that go to the command prompt and for creating the model run the command.
Now switch to the project and lets open HomeSlider migration and add write the following code.
Now lets migrate the migration.
So go to the command prompt.
And for migrating the migration run the command.
Alright 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 run the command.
Now switch to the project and lets create the route for these three component.
So open web.php file.
Inside the admin middleware group route after this route add new route.
Now open the AdminHomeSliderComponent.php class file and write the following code.
Now open the home-slider-component.blade.php View file and inside this file write the following code.
Now lets open AdminAddHomeSliderComponent.php class file write the following code.
Now lets open admin-add-slider-component.blade.php view file and write the following code.
Now open AdminEditHomeSliderComponent.php class file and write the following code.
Now open admin-edit-home-slider-component.blade.php file and write the following code.
Now lets open the base.blade.php layout file and here inside the admin menu add the link for Home Slider.
Now its done so lets check it.
Switch to browser and from admin menu lets click on Manage Home Slider link.
Now for adding new slide click on Add New Button.
Then enter the slider details and click on Add Sllide.
Similary add 2 or 3 slides.
Now lets use thse slides on home page.
So go to the HomeComponent.php class file and inside the render method render function lets fetch the slides which status is active.
Now open the home-component.blade.php View File add the following code.
Alright 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.
Now you can add, edit and delete slide from the Manage Home Slider Page.
So in this way you can make home page slider dynamic.
So let see how can we make home page slider dynamic.
So first of all lets create a model for the slider.
For that go to the command prompt and for creating the model run the command.
php artisan make:model HomeSlider –m
Now switch to the project and lets open HomeSlider migration and add write the following code.
<?php
use Illuminate\\Database\\Migrations\\Migration;
use Illuminate\\Database\\Schema\\Blueprint;
use Illuminate\\Support\\Facades\\Schema;
class CreateHomeSlidersTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('home_sliders', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->string('subtitle');
$table->string('price');
$table->string('link');
$table->string('image');
$table->boolean('status');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('home_sliders');
}
}
Now lets migrate the migration.
So go to the command prompt.
And for migrating the migration run the command.
php artisan migrate
Alright 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 run the command.
php artisan make:livewire admin/AdminHomeSliderComponent
Php artisan make:livewire admin/AdminAddHomeSliderComponent
php artisan make:livewire admin/AdminEditHomeSliderComponent
Now switch to the project and lets create the route for these three component.
So open web.php file.
Inside the admin middleware group route after this route add new route.
Route::get('/admin/slider',AdminHomeSliderComponent::class)->name('admin.homesliders');
Route::get('/admin/slider/add',AdminAddHomeSliderComponent::class)->name('admin.homeaddslider');
Route::get('/admin/slider/edit/{slide_id}',AdminEditHomeSliderComponent::class)->name('admin.homeslideredit');
Now open the AdminHomeSliderComponent.php class file and write the following code.
<?php
namespace App\\Http\\Livewire\\Admin;
use App\\Models\\HomeSlider;
use Livewire\\Component;
class AdminHomeSliderComponent extends Component
{
public function deleteSlide($slide_id)
{
$slider = HomeSlider::find($slide_id);
$slider->delete();
session()->flash('message','Slider has been deleted successfully!');
}
public function render()
{
$sliders = HomeSlider::all();
return view('livewire.admin.admin-home-slider-component',['sliders'=>$sliders])->layout('layouts.base');
}
}
Now open the home-slider-component.blade.php View file and inside this file write the following code.
<div>
<div class=\"container\" style=\"padding: 30px 0;\">
<div class=\"row\">
<div class=\"col-md-12\">
<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.addhomeslider')}}\" class=\"btn btn-success pull-right\">Add New Slide</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>Id</th>
<th>Image</th>
<th>Title</th>
<th>Subtitle</th>
<th>Price</th>
<th>Link</th>
<th>Status</th>
<th>Date</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach ($sliders as $slider)
<tr>
<td>{{$slider->id}}</td>
<td><img src=\"{{asset('assets/images/sliders')}}/{{$slider->image}}\" width=\"120\" /></td>
<td>{{$slider->title}}</td>
<td>{{$slider->subtitle}}</td>
<td>{{$slider->price}}</td>
<td>{{$slider->link}}</td>
<td>{{$slider->status == 1 ? 'Active':'Inactive'}}</td>
<td>{{$slider->created_at}}</td>
<td>
<a href=\"{{route('admin.edithomeslider',['slide_id'=>$slider->id])}}\"><i class=\"fa fa-edit fa-2x text-info\"></i></a>
<a href=\"#\" wire:click.prevent=\"deleteSlide({{$slider->id}})\"><i class=\"fa fa-times fa-2x text-danger\"></i></a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Now lets open AdminAddHomeSliderComponent.php class file write the following code.
<?php
namespace App\\Http\\Livewire\\Admin;
use App\\Models\\HomeSlider;
use Carbon\\Carbon;
use Livewire\\Component;
use Livewire\\WithFileUploads;
class AdminAddHomeSliderComponent extends Component
{
use WithFileUploads;
public $title;
public $subtitle;
public $price;
public $link;
public $image;
public $status;
public function mount()
{
$this->status = 0;
}
public function addSlide()
{
$slider = new HomeSlider();
$slider->title = $this->title;
$slider->subtitle = $this->subtitle;
$slider->price = $this->price;
$slider->link = $this->link;
$imagename = Carbon::now()->timestamp. '.' . $this->image->extension();
$this->image->storeAs('sliders',$imagename);
$slider->image = $imagename;
$slider->status = $this->status;
$slider->save();
session()->flash('message','Slide has been created successfully!');
}
public function render()
{
return view('livewire.admin.admin-add-home-slider-component')->layout('layouts.base');
}
}
Now lets open admin-add-slider-component.blade.php view file and write the following code.
<div>
<div class=\"container\" style=\"padding: 30px 0;\">
<div class=\"row\">
<div class=\"col-md-12\">
<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.homeslider')}}\" class=\"btn btn-success 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=\"addSlide\">
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Title</label>
<div class=\"col-md-4 \">
<input type=\"text\" placeholder=\"Title\" class=\"form-control input-md\" wire:model=\"title\" />
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Subtitle</label>
<div class=\"col-md-4 \">
<input type=\"text\" placeholder=\"Subtitle\" class=\"form-control input-md\" wire:model=\"subtitle\" />
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Price</label>
<div class=\"col-md-4 \">
<input type=\"text\" placeholder=\"Price\" class=\"form-control input-md\" wire:model=\"price\" />
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Link</label>
<div class=\"col-md-4 \">
<input type=\"text\" placeholder=\"Link\" class=\"form-control input-md\" wire:model=\"link\" />
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Image</label>
<div class=\"col-md-4 \">
<input type=\"file\" class=\"input-file\" wire:model=\"image\" />
@if($image)
<img src=\"{{$image->temporaryUrl()}}\" width=\"120\" />
@endif
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Status</label>
<div class=\"col-md-4 \">
<select class=\"form-control\" wire:model=\"status\">
<option value=\"0\">Inactive</option>
<option value=\"1\">Active</option>
</select>
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\"></label>
<div class=\"col-md-4 \">
<button type=\"submit\" class=\"btn btn-primary\">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
Now open AdminEditHomeSliderComponent.php class file and write the following code.
<?php
namespace App\\Http\\Livewire\\Admin;
use App\\Models\\HomeSlider;
use Livewire\\Component;
use Livewire\\WithFileUploads;
use Carbon\\Carbon;
class AdminEditHomeSliderComponent extends Component
{
use WithFileUploads;
public $title;
public $subtitle;
public $price;
public $link;
public $image;
public $status;
public $newimage;
public $slider_id;
public function mount($slide_id)
{
$slider = HomeSlider::find($slide_id);
$this->title = $slider->title;
$this->subtitle = $slider->subtitle;
$this->price = $slider->price;
$this->link = $slider->link;
$this->image = $slider->image;
$this->status = $slider->status;
$this->slider_id = $slider->id;
}
public function updateSlide()
{
$slider = HomeSlider::find($this->slider_id);
$slider->title = $this->title;
$slider->subtitle = $this->subtitle;
$slider->price = $this->price;
$slider->link = $this->link;
if($this->newimage)
{
$imagename = Carbon::now()->timestamp. '.' . $this->newimage->extension();
$this->newimage->storeAs('sliders',$imagename);
$slider->image = $imagename;
}
$slider->status = $this->status;
$slider->save();
session()->flash('message','Slide has been updated successfully!');
}
public function render()
{
return view('livewire.admin.admin-edit-home-slider-component')->layout('layouts.base');
}
}
Now open admin-edit-home-slider-component.blade.php file and write the following code.
<div>
<div class=\"container\" style=\"padding: 30px 0;\">
<div class=\"row\">
<div class=\"col-md-12\">
<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.homeslider')}}\" class=\"btn btn-success 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\">
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Title</label>
<div class=\"col-md-4 \">
<input type=\"text\" placeholder=\"Title\" class=\"form-control input-md\" wire:model=\"title\" />
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Subtitle</label>
<div class=\"col-md-4 \">
<input type=\"text\" placeholder=\"Subtitle\" class=\"form-control input-md\" wire:model=\"subtitle\" />
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Price</label>
<div class=\"col-md-4 \">
<input type=\"text\" placeholder=\"Price\" class=\"form-control input-md\" wire:model=\"price\" />
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Link</label>
<div class=\"col-md-4 \">
<input type=\"text\" placeholder=\"Link\" class=\"form-control input-md\" wire:model=\"link\" />
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Image</label>
<div class=\"col-md-4 \">
<input type=\"file\" class=\"input-file\" wire:model=\"newimage\" />
@if($newimage)
<img src=\"{{$newimage->temporaryUrl()}}\" width=\"120\" />
@else
<img src=\"{{asset('assets/images/sliders')}}/{{$image}}\" width=\"120\" />
@endif
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Status</label>
<div class=\"col-md-4 \">
<select class=\"form-control\" wire:model=\"status\">
<option value=\"0\">Inactive</option>
<option value=\"1\">Active</option>
</select>
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\"></label>
<div class=\"col-md-4 \">
<button type=\"submit\" class=\"btn btn-primary\">Update</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
Now lets open the base.blade.php layout file and here inside the admin menu add the link for Home Slider.
<li class=\"menu-item\">
<a title=\"Manage Home Slider\" href=\"{{route('admin.homeslider')}}\">Manage Home Slider</a>
</li>
Now its done so lets check it.
Switch to browser and from admin menu lets click on Manage Home Slider link.
Now for adding new slide click on Add New Button.
Then enter the slider details and click on Add Sllide.
Similary add 2 or 3 slides.
Now lets use thse slides on home page.
So go to the HomeComponent.php class file and inside the render method render function lets fetch the slides which status is active.
$sliders = HomeSlider::where('status',1)->get();
return view('livewire.home-component',['sliders'=>$sliders])->layout('layouts.base');
Now open the home-component.blade.php View File add the following code.
<div class=\"wrap-main-slide\">
<div class=\"slide-carousel owl-carousel style-nav-1\" data-items=\"1\" data-loop=\"1\" data-nav=\"true\" data-dots=\"false\">
@foreach ($sliders as $slide)
<div class=\"item-slide\">
<img src=\"{{ asset('assets/images/sliders') }}/{{$slide->image}}\" alt=\"\" class=\"img-slide\">
<div class=\"slide-info slide-1\">
<h2 class=\"f-title\"><b>{{$slide->title}}</b></h2>
<span class=\"subtitle\">{{$slide->subtitle}}</span>
<p class=\"sale-info\">Only price: <span class=\"price\">${{$slide->price}}</span></p>
<a href=\"{{$slide->link}}\" class=\"btn-link\">Shop Now</a>
</div>
</div>
@endforeach
</div>
</div>
Alright 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.
Now you can add, edit and delete slide from the Manage Home Slider Page.
So in this way you can make home page slider dynamic.
