In this video, we will learn about adding a new service in the admin panel of our Laravel 8 project.

Let's see how we can add a new service.

First of all, let's create a new Livewire component for adding a new service.

Switch to the command prompt and type the following command:

php artisan make:livewire admin/AdminAddServiceComponent

Now, switch to the project and let's create a route for this component.

Open the web.php file and create a new route inside the admin middleware route group:

Route::get('/admin/services/add',AdminAddServiceComponent)->name('admin.add_service');

Now, let's open the AdminAddServiceComponent class file and add the following code:

<?php
namespace AppHttpLivewireAdmin;
use AppModelsService;
use AppModelsServiceCategory;
use CarbonCarbon;
use LivewireComponent;
use IlluminateSupportStr;
use LivewireWithFileUploads;
class AdminAddServiceComponent extends Component
{
    use WithFileUploads;
    public $name;
    public $slug;
    public $tagline;
    public $service_category_id;
    public $price;
    public $discount;
    public $discount_type;
    public $image;
    public $thumbnail;
    public $description;
    public $inclusion;
    public $exclusion;
    public function generateSlug()
    {
        $this->slug = Str::slug($this->name,'-');
    }
    public function updated($fields)
    {
        $this->validateOnly($fields,[
            'name'=> 'required',
            'slug'=> 'required',
            'tagline'=> 'required',
            'service_category_id'=> 'required',
            'price'=> 'required',                    
            'image'=> 'required|mimes:jpeg,png',
            'thumbnail'=> 'required|mimes:jpeg,png',
            'description'=> 'required',
            'inclusion'=> 'required',
            'exclusion'=> 'required'
        ]);
    }
    public function createService()
    {
        $this->validate([
            'name'=> 'required',
            'slug'=> 'required',
            'tagline'=> 'required',
            'service_category_id'=> 'required',
            'price'=> 'required',                    
            'image'=> 'required|mimes:jpeg,png',
            'thumbnail'=> 'required|mimes:jpeg,png',
            'description'=> 'required',
            'inclusion'=> 'required',
            'exclusion'=> 'required'
        ]);
        $service = new Service();
        $service->name = $this->name;
        $service->slug = $this->slug;
        $service->tagline = $this->tagline;
        $service->service_category_id = $this->service_category_id;
        $service->price = $this->price;
        $service->discount = $this->discount;
        $service->discount_type = $this->discount_type;       
        $service->description = $this->description;
        $service->inclusion = str_replace(`
`,'|',trim($this->inclusion));
        $service->exclusion = str_replace(`
`,'|',trim($this->exclusion));
        $imageName = Carbon::now()->timestamp . '.' . $this->thumbnail->extension();
        $this->thumbnail->storeAs('services/thumbnails',$imageName);
        $service->thumbnail = $imageName;
        $imageName2 = Carbon::now()->timestamp . '.' . $this->image->extension();
        $this->image->storeAs('services',$imageName2);
        $service->image = $imageName2;
        $service->save();
        session()->flash('message','Service has been created successfully!');
    }
    public function render()
    {
        $categories = ServiceCategory::all();
        return view('livewire.admin.admin-add-service-component',['categories'=>$categories])->layout('layouts.base');
    }
}

Next, go to the AdminAddServiceComponent 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>Add Service</h1>
                <div class=`crumbs`>
                    <ul>
                        <li><a href=`/`>Home</a></li>
                        <li>/</li>
                        <li>Add Service</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 Service
                                        </div>
                                        <div class=`col-md-6`>
                                            <a href=`{{route('admin.all_services')}}` class=`btn btn-info pull-right`>All Services</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=`createService`>
                                        @csrf
                                        <div class=`form-group`>
                                            <label for=`name` class=`control-label col-sm-3`>Name: </label>
                                            <div class=`col-sm-9`>
                                                <input type=`text` class=`form-control` name=`name` wire:model=`name` wire:keyup=`generateSlug` />
                                                @error('name') <p class=`text-danger`>{{$message}}</p> @enderror
                                            </div>
                                        </div>
                                        <div class=`form-group`>
                                            <label for=`slug` class=`control-label col-sm-3`>Slug: </label>
                                            <div class=`col-sm-9`>
                                                <input type=`text` class=`form-control` name=`slug` wire:model=`slug` />
                                                @error('slug') <p class=`text-danger`>{{$message}}</p> @enderror
                                            </div>
                                        </div>
                                        <div class=`form-group`>
                                            <label for=`slug` class=`control-label col-sm-3`>Tagline: </label>
                                            <div class=`col-sm-9`>
                                                <input type=`text` class=`form-control` name=`slug` wire:model=`tagline` />
                                                @error('tagline') <p class=`text-danger`>{{$message}}</p> @enderror
                                            </div>
                                        </div>
                                        <div class=`form-group`>
                                            <label for=`slug` class=`control-label col-sm-3`>Service Category: </label>
                                            <div class=`col-sm-9`>
                                                <select class=`form-control` wire:model=`service_category_id`>
                                                    <option value=``>Select Servie Category</option>
                                                    @foreach($categories as $category)
                                                    <option value=`{{$category->id}}`>{{$category->name}}</option>
                                                    @endforeach
                                                </select>
                                                @error('service_category_id') <p class=`text-danger`>{{$message}}</p> @enderror
                                            </div>
                                        </div>
                                        <div class=`form-group`>
                                            <label for=`slug` class=`control-label col-sm-3`>Price: </label>
                                            <div class=`col-sm-9`>
                                                <input type=`text` class=`form-control` name=`price` wire:model=`price` />
                                                @error('price') <p class=`text-danger`>{{$message}}</p> @enderror
                                            </div>
                                        </div>
                                        <div class=`form-group`>
                                            <label for=`slug` class=`control-label col-sm-3`>Discount: </label>
                                            <div class=`col-sm-9`>
                                                <input type=`text` class=`form-control` name=`discount` wire:model=`discount` />
                                                @error('discount') <p class=`text-danger`>{{$message}}</p> @enderror
                                            </div>
                                        </div>
                                        <div class=`form-group`>
                                            <label for=`slug` class=`control-label col-sm-3`>Discount Type: </label>
                                            <div class=`col-sm-9`>
                                                <select class=`form-control` wire:model=`discount_type`>
                                                    <option value=``>Select Discount Type</option>
                                                    <option value=`fixed`>Fixed</option>
                                                    <option value=`percent`>Percent</option>
                                                </select>
                                                @error('discount_type') <p class=`text-danger`>{{$message}}</p> @enderror
                                            </div>
                                        </div>
                                        <div class=`form-group`>
                                            <label for=`slug` class=`control-label col-sm-3`>Description: </label>
                                            <div class=`col-sm-9`>
                                                <textarea class=`form-control` wire:model=`description`></textarea>
                                                @error('description') <p class=`text-danger`>{{$message}}</p> @enderror
                                            </div>
                                        </div>
                                        <div class=`form-group`>
                                            <label for=`slug` class=`control-label col-sm-3`>Inclusion: </label>
                                            <div class=`col-sm-9`>
                                                <textarea class=`form-control` wire:model=`inclusion`></textarea>
                                                @error('inclusion') <p class=`text-danger`>{{$message}}</p> @enderror
                                            </div>
                                        </div>
                                        <div class=`form-group`>
                                            <label for=`slug` class=`control-label col-sm-3`>Exclusion: </label>
                                            <div class=`col-sm-9`>
                                                <textarea class=`form-control` wire:model=`exclusion`></textarea>
                                                @error('exclusion') <p class=`text-danger`>{{$message}}</p> @enderror
                                            </div>
                                        </div>
                                        <div class=`form-group`>
                                            <label for=`slug` class=`control-label col-sm-3`>Thumbnail: </label>
                                            <div class=`col-sm-9`>
                                                <input type=`file` class=`form-control-file` name=`thumbnail` wire:model=`thumbnail` />
                                                @error('thumbnail') <p class=`text-danger`>{{$message}}</p> @enderror
                                                @if($thumbnail)
                                                    <img src=`{{$thumbnail->temporaryUrl()}}` width=`60` />
                                                @endif
                                            </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>
                                        <button type=`submit` class=`btn btn-success pull-right`>Add Service</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

Now, it's done. Let's check it.

Switch to the browser and refresh the page. Enter the service details, and then click on `Add Service`.

The service has been added. Now, click here, and you can see the new service.

So, in this way, you can create a new service.