How to add dynamic slider in laravel (part 1)

How to add dynamic slider in laravel (part 1)

Tonight we will learn how to make dynamic slider in laravel 5.X.

Requirements:

Add

"laravelcollective/html": "^5.5"

to your application composer.jason require part and run


composer update

in your terminal.

Wait for installation to complete.

Step One:

Add new model and migration


php artisan make:model Slider -m

Step Two:

Next we editing our migration file database/migrations/…_create_sliders_table.php

Note: I will just add photo and title column to our sliders table (you can add what you like depend on your needs)


Schema::create(sliders, function (Blueprint $table) {
            $table->increments('id');
            $table->string(title);
            $table->string('photo');
            $table->timestamps();
});

Step Three:

Adding fillable columns to our model, Open Slider.php in app folder and add code below


protected $fillable = [
   'title', 'photo',
];

Step Four:

Add new controller and make crud ready --resource


php artisan make:controller SliderController --resource

Step Five:

Add routes, open web.php from routes folder and add code below


Route::resource('slides', 'SliderController');

Step Six:

Now open SliderController from app/http/controllers and make changes as below


// add to the top of your controller
use App\Slider;


// index function
public function index()
    {
        $sliders = Slider::orderby('id', 'desc')->paginate(10);
        return view('sliders.index', compact('sliders'));
    }

// create function
public function create()
{
    return  view ('sliders.create');
}

// store function
public function store(Request $request)
    {
        $this->validate($request, array(
            'title'=>'required|max:225',
            'photo'=>'required|image',
          ));
          $slider = new Slider;
          $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);
  
            $slider->photo = $filename;
          }
          $slider->save();
          return redirect()->route('slides.index');
    }

// we will get back to the rest of functions later

Step Seven:

Making views, go to resources/views make new folder name it sliders in that folder make 2 files and name them index.blade.php & create.blade.php

Step Eight:

Index blade, add code below to your index.blade.php and save the file.


//Add New Slide

@foreach($sliders as $slider)
{{$slider->title}} 
@endforeach

Step Nine:

Now go and visit your sliders index page your_local_domain/slides you’ll see a link to adding new slide and nothing more. Don’t worry we will back to this file later, now is time to handle our store function view and actually adding data to our database.

Step Ten:

Creating blade, add code below to your create.blade.php and save the file.


{{ Form::open(array('route' => 'slides.store', 'files' => true)) }}

  {{ Form::label('title', 'Title') }}

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


  {{ Form::label('photo', 'Photo') }}

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


  {{ Form::submit('Add', array('class' => 'pull-right btn btn-primary')) }}

{{ Form::close() }}

Note: 'files' => 'true' will allow us to upload images by our form, without that you’ll get error when trying to upload images)

Step Eleven:

Now go ahead and click on that link in your index view, you’ll redirect to create blade where you can add new slide to your database.

Fill the title and choose an image then hit add button. If you’ve done everything right, you will redirect to index page where now you can see your slider uploaded image. Go ahead and add some more to see them all in your index.

In second part we will cover:

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

Part 2

- Last updated 1 year ago

Be the first to leave a comment.

You must login to leave a comment