This Laravel tutorial will guide you to create a custom user profile page from scratch
Create a Profile Model with table migration
php artisan make:model Profile -m
Edit the Profile migration file
public function up()
{
Schema::create('profiles', function (Blueprint $table) {
$table->id();
$table->bigInteger('user_id')->nullable();
$table->string('mobile')->nullable();
$table->text('address')->nullable();
$table->string('picture')->default('no-pic.jpg');
$table->text('company')->nullable();
$table->text('position')->nullable();
$table->timestamps();
});
}
Run the migration
php artisan migrate
Create a ‘no-pic.png’ image filler and save at public/images
Edit RegisterController and add the code below
protected function create(array $data)
{
$user = User::create([
'name' => $data['name'],
'email' => $data['email'],
'password' => Hash::make($data['password']),
]);
$getuserid = $user->id;
$createprofile = new Profile();
$createprofile->user_id = $getuserid;
$createprofile->save();
Alert::success('Success','User registered successfully');
return $user;
}
Create a Profile Controller
php artisan make:controler ProfileController
Add a User Profile link in the NavBar
<a class="dropdown-item" href="{{ route('profile.index') }}">My Profile</a>
Create a new folder “profile” in views and a new index blade file inside the folder
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10">
<div class="card">
<section style="background-color: #eee;">
<div class="container py-2">
<div class="row">
<div class="col">
<nav aria-label="breadcrumb" class="bg-light rounded-3 p-3 mb-4">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">User Profile</li>
</ol>
</nav>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="card mb-4">
<div class="card-body text-center">
<img src="{{asset('/images')}}/{{$userprofile->picture}}" alt="avatar" class="rounded-circle bg-dark img-fluid" style="width: 150px;">
<div class="row justify-content-center p-2">
<a href="javascript:void(0)" id="upload_pic" class="text-lg text-bold" data-toggle="modal" data-target="#ProfilePicModal">
<i class="fa fa-pencil-alt"></i>
</a>
</div>
<h5 class="my-3">{{$userinfo->name}}</h5>
<p class="text-muted mb-1">{{$userinfo->email}}</p>
<div class="d-flex justify-content-center mb-2"></div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="card mb-4">
<div class="card-body">
<div class="row">
<div class="col-sm-3">
<p class="mb-0">Mobile Number</p>
</div>
<div class="col-sm-9">
<p class="text-muted mb-0">{{$userprofile->mobile}}</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<p class="mb-0">Address</p>
</div>
<div class="col-sm-9">
<p class="text-muted mb-0">{{$userprofile->address}}</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<p class="mb-0">Status</p>
</div>
<div class="col-sm-9">
<p class="text-muted mb-0">{{$userprofile->status}}</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<p class="mb-0">Company Name</p>
</div>
<div class="col-sm-9">
<p class="text-muted mb-0">{{$userprofile->company}}</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<p class="mb-0">Position</p>
</div>
<div class="col-sm-9">
<p class="text-muted mb-0">{{$userprofile->position}}</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<a href="javascript:void(0)" class="btn btn-sm btn-success" data-toggle="modal" data-target="#proInfoModal"><i class="fa fa-edit"></i> Edit Profile Info</a>
</div>
<div class="col-sm-9"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
@endsection
Create route for the Profile page in web.php
Route::get('/profile/index', [ProfileController::class, 'index'])->name('profile.index');
Create a new function inside Profile Controller
public function index()
{
$current_userid = Auth()->user()->id;
$userinfo = User::where('id','=',$current_userid)->first();
$userprofile = Profile::where('user_id','=',$current_userid)->first();
return view('profile.index',compact('userprofile','userinfo'));
}