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)
@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:
- Complete controller functions
- Edit and delete slides
- Show slider in front-end
- Last updated 4 years ago
Be the first to leave a comment.
You must login to leave a comment