Laravel Home Services Project - Create Service Provider's Profile
In this video, we will learn about creating a service provider's profile in our Laravel project.
Let's see how we can create a service provider's profile.
First, we need to create a model.
So, switch to the command prompt and run the following command:
php artisan make:migration ServiceProvider –m
Now, switch to the project and open the migration file.
Go inside the database directory, then migration, and from here, open the create_service_providers_table migration file.
Now, add columns as follows:
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateServiceProvidersTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('service_providers', function (Blueprint $table) {
$table->id();
$table->bigInteger('user_id')->unsigned();
$table->string('image')->nullable();
$table->string('about')->nullable();
$table->string('city')->nullable();
$table->bigInteger('service_category_id')->unsigned()->nullable();
$table->string('service_locations')->nullable();
$table->timestamps();
$table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
$table->foreign('service_category_id')->references('id')->on('service_categories')->onDelete('cascade');
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('service_providers');
}
}
Next, open the ServiceProvider model and add the fillable fields and create a function for category as follows:
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class ServiceProvider extends Model
{
use HasFactory;
protected $fillable = ['user_id'];
public function category()
{
return $this->belongsTo(ServiceCategory::class,'service_category_id');
}
public function user()
{
return $this->belongsTo(User::class,'user_id');
}
}
Alright, now let's migrate the migration.
So, switch to the command prompt and run the following command:
php artisan migrate
Now, switch to the project and go inside the app/Actions/Fortify directory.
From here, open the CreateNewUser.php file and make changes in the create function as follows:
public function create(array $input)
{
Validator::make($input, [
'name' => ['required', 'string', 'max:255'],
'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
'password' => $this->passwordRules(),
'phone' => ['required'],
'terms' => Jetstream::hasTermsAndPrivacyPolicyFeature() ? ['required', 'accepted'] : '',
])->validate();
$registeras = $input['registeras'] === 'SVP' ? 'SVP':'CST';
$user = User::create([
'name' => $input['name'],
'email' => $input['email'],
'password' => Hash::make($input['password']),
'phone' => $input['phone'],
'utype'=>$registeras
]);
if($registeras === 'SVP')
{
ServiceProvider::create([
'user_id' => $user->id
]);
}
return $user;
}
Now, let's create a new Livewire component.
So, go to the command prompt and run the following command:
php artisan make:livewire Sprovider/SproviderProfileComponent
Now, run the application:
php artisan serve
Next, switch to the project and create a route for this component.
So, open the web.php file and inside the ServiceProvider middleware route group, add a new route:
Route::get('/sprovider/profile',SproviderProfileComponent::class)->name('sprovider.profile');
Now, open the SproviderProfileComponent.php class file and write the following code:
<?php
namespace App\Http\Livewire\Sprovider;
use App\Models\ServiceProvider;
use Illuminate\Support\Facades\Auth;
use Livewire\Component;
class SproviderProfileComponent extends Component
{
public function render()
{
$sprovider = ServiceProvider::where('user_id',Auth::user()->id)->first();
return view('livewire.sprovider.sprovider-profile-component',['sprovider'=>$sprovider])->layout('layouts.base');
}
}
Next, open the sprovider-profile-component.blade.php view file and write 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>Profile</h1>
<div class="crumbs">
<ul>
<li><a href="/">Home</a></li>
<li>/</li>
<li>Profile</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">
Profile
</div>
<div class="col-md-6">
</div>
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-4">
@if($sprovider->image)
<img src="{{asset('images/sproviders')}}/{{$sprovider->image}}" width="100%" />
@else
<img src="{{asset('images/sproviders/default.jpg')}}" width="100%" />
@endif
</div>
<div class="col-md-8">
<h3>Name : {{Auth::user()->name}}</h3>
<p>{{$sprovider->about}}</p>
<p><b>Email: </b>{{Auth::user()->email}}</p>
<p><b>Phone: </b>{{Auth::user()->phone}}</p>
<p><b>City : </b>{{$sprovider->city}}</p>
<p><b>Service Category : </b>
@if($sprovider->service_category_id)
{{$sprovider->category->name}}
@endif
</p>
<p><b>Service Locations :</b> {{$sprovider->service_locations}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Now, go to the project directory and then go inside the public directory.
Then, go inside the images directory and create a new folder named "sproviders".
Paste a default image for the service provider inside this directory.
You can download a dummy profile image from Google and paste it inside the sproviders directory.
Now, go to the base.blade.php layout file and add a link for the Profile inside the service providers menu:
<li><a href="{{route('sprovider.profile')}}">Profile</a></li>
Now, it's done. Let's check the result.
Switch to the browser and refresh the page.
Now, let's register a new user as a service provider.
Click on register and enter the user details.
Now, the service provider is created. Go to the service provider menu and click on profile.
Now, you can see the service provider profile.
So, in this way, you can create a service provider profile.
In the next video, we will see how to update the service provider profile.
