Laravel 8 Project Home Services - Admin Add New Service

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 App\Http\Livewire\Admin;

use App\Models\Service;
use App\Models\ServiceCategory;
use Carbon\Carbon;
use Livewire\Component;
use Illuminate\Support\Str;
use Livewire\WithFileUploads;

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.