In previous post we started to make dynamic slider in laravel and we learnt how to make our model, controller, routes, we also added views and some slides to our database and retrieved them in our slider index page.

In this article we will continue our progress

1. Completing our controller functions
2. Edit and delete slides
3. Show slider in front-end

Let's begin:

Completing our controller functions

Go and open your controller app/http/controllers/SliderController we have already took care of index,create and store function now it's time for edit,update and destroy functions.

Edit function change as code below:

public function edit($id)
{
  $slider = Slider::findOrFail($id);
  return view('sliders.edit', compact('slider'));
}

PHP

Update function change as code below:

public function update(Request $request, $id)
    {
      $slider = Slider::find($id);
       $this->validate($request, array(
         'title'=>'required|max:225',
         'photo'=>'required|image'
      ));

       $slider = Slider::where('id',$id)->first();

       $slider->title = $request->input('title');

       if ($request->hasFile('photo')) {
        $photo = $request->file('photo');
        $filename = 'slide' . '-' . time() . '.' . $photo->getClientOriginalExtension();
        $location = public_path('images/');
        $request->file('photo')->move($location, $filename);

        $oldFilename = $slider->photo;
        $slider->photo= $filename;
        if(!empty($slider->photo)){
          Storage::delete($oldFilename);
        }
      }

      $slider->save();

      return redirect()->route('slides.index',
          $slider->id)->with('success',
          'Slider, '. $slider->title.' updated');
    }

PHP

destroy function change as code below:

public function destroy($id)
{
  $slider = Slider::findOrFail($id);
  Storage::delete($slider->photo);
  $slider->delete();

  return redirect()->route('slides.index')
          ->with('success',
           'Slide successfully deleted');
}

PHP

Edit and delete slides

Go and open your index blade in resources/views/sliders/index.blade.php edit your loop like code below:

<a href="{{route('slides.create')}}">Add New Slide</a>


<div style="margin-top:30px;">

@foreach($sliders as $slider)

    <img src="{{url('images')}}/{{$slider->photo}}" alt="{{$slider->title}}" width="250" height="150">

<a href="{{ route('slides.edit', $slider->id) }}" class="btn btn-block btn-info">Edit</a>


{!! Form::open(['method' => 'DELETE', 'route' => ['slides.destroy', $slider->id] ]) !!}
  <button class="btn btn-block btn-danger" type="submit">Delete</button>
{!! Form::close() !!}

<br>

@endforeach
</div>

HTML

 Now refresh your page and there should be 2 new buttons Edit and Delete. Your delete button should work immediately but for edit button we need one more step and that's creating a view for it.

Create Edit view:

Add new file to sliders folder name it edit.blade.php and copy code below into it and save that file.

{{ Form::model($slider, array('route' => array('slides.update', $slider->id), 'method' => 'PUT', 'files' => true)) }}

{{Form::label('title', 'Title')}}
{{Form::text('title', null, array('class' => 'form-control'))}}
<br>

{{Form::label('photo', 'Photo')}}
{{Form::file('photo', array('class' => 'form-control'))}}

<br>
<img src="{{url('images')}}/{{$slider->photo}}" alt="image">

<br><br><br>

{{ Form::submit('Update Slide', array('class' => 'btn btn-success')) }}

{{Form::close()}}

PHP

 Now you should be able to use your Edit button, go ahead and test it.

Show slider in front-end

Now that we have taking care of back-end process it's time for the part that cause problem for many developers Front-End.

Pick the view that you want to show your slider (usually is index page which is known by name of welcome.blade.php) but in entirely up to you where you want to show your slider.

Note1: I am using bootstrap slider. Note2: I might have some extra class than default bootstrap slider you can ignore(remove) those.

<div class="group-home-slideshow">
  <div class="home-slideshow-inner col-sm-12">
    <div class="home-slideshow">
      <div id="home_main-slider" class="carousel slide">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            @foreach($sliders as $photo)
                <li data-target="#home_main-slider" data-slide-to="{{ $loop->index }}" class="{{ $loop->first ? 'active' : '' }}"></li>
            @endforeach
        </ol>
        <div class="carousel-inner">
          @foreach($sliders as $slider)
          <div class="item image {{ $loop->first ? ' active' : '' }}">
            <img src="{{url('images')}}/{{$slider->photo}}" alt="slider" title="Image Slideshow">
            <div class="slideshow-caption position-right">
              <div class="slide-caption">
                <div class="group-caption">
                  <div class="content">
                    @if(!empty($slider->title))
                    <span class="title">
                      {{$slider->title}}
                    </span>
                    @endif
                  </div>
                </div>
              </div>
            </div>
          </div>
          @endforeach
        </div>
        <a class="left carousel-control" href="#home_main-slider" data-slide="prev">
          <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#home_main-slider" data-slide="next">
          <span class="icon-next"></span>
        </a>
      </div>
    </div>
  </div>
</div>

PHP

 Let's dig in:

Indicators

First of all we will loop our slides in orther to let our slider know when should show which slide.

<ol class="carousel-indicators">
  @foreach($sliders as $photo)
    <li data-target="#home_main-slider" data-slide-to="{{ $loop->index }}" class="{{ $loop->first ? 'active' : '' }}"></li>
  @endforeach
</ol>

PHP

 Next we are actually loading our slide data including image and title (to make the code clear i removed html tags)

@foreach($sliders as $slider)

//load image depend of indicator
<div class="item image {{ $loop->first ? ' active' : '' }}">
  
  //show the image
  <img src="{{url('images')}}/{{$slider->photo}}" alt="slider" title="Image Slideshow">

  //get the title
  @if(!empty($slider->title))
    <span class="title">{{$slider->title}}</span>
  @endif

</div>
@endforeach

PHP

 Important:

You might face errors (beginners) here I think I must share some points with you:

You need to define your sliders table in your view whether by controller or by AppServiceProvider

1- By controller

// Go to your view (the blade you want to show controller) controller and add this code

use App\Slider;

public function index()
{
  $sliders = Slider::all();
  return view('welcome', compact('sliders'));
}

PHP

 2- By AppServiceProvider

Open AppServiceProvider in app/Providers and add code below

use App\Slider;


public function boot()
{
  $sliders = Slider::all();
  View::share('sliders', $sliders);
}

PHP

 

Remember AppServiceProvider will allow you to use $sliders in all your views but controller way will just add $sliders to specific view.