In this video we are going to learn about Add New Service
So let see how can we add new service
First of all lets create a new livewire component
For Adding new Service
So switch to command prompt
And here type the command
Now switch to the project
And lets create the route for this component
So open web.php file and inside the admin middleware route group lets create new route
Now lets open the AdminAddServiceComponent class file and add the following code
Now go to the AdminAddServiceComponent view file and add following code
Now its done so lets check it
Switch to the browser and refresh the page
Enter the service details
Now click on add service
Service added
Now click here and her you can see new service
So in this way you can create new service.
So let see how can we add new service
First of all lets create a new livewire component
For Adding new Service
So switch to command prompt
And here type the command
php artisan make:livewire admin/AdminAddServiceComponent
Now switch to the project
And lets create the route for this component
So open web.php file and inside the admin middleware route group lets create new route
Route::get(‘/admin/services/add’,AdminAddServiceComponent)->name(‘admin.add_service’);
Now lets 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');
}
}
Now go to the AdminAddServiceComponent view file and add 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 its done so lets check it
Switch to the browser and refresh the page
Enter the service details
Now click on add service
Service added
Now click here and her you can see new service
So in this way you can create new service.
