This tutorial will teach you how to make user work experience form in CV create Web with validation using Laravel. Let’s do it step by step.
Work Experience Form
Now, Let's create.
- Create work-experience.blade.php file.
- Add bootstrap.
- Add form-container.
- Add form.
- Add Table Script
- Add Form cloudflare Script
- Create a controller.
- Create a route.
- Create Work Experience view function.
- Make WorkExperience Model and Table
- Create the WorkExperiencelsTable
- Create the WorkExperience Model
- Add ForeignKey
- Migrate the tables
- Add saveWorkExperience route.
- Create saveWorkExperience function.
Form container
<section class="min-vh-100 d-flex flex-column align-items-center justify-content-center py-4">
<div class="container-fluid ">
<div class="row justify-content-md-center">
<div class="col-md-10 ">
<div class="card px-5 minHeight py-3 mt-3 shadow">
<h1 class="text-info text-center mt-2 mb-4">Work Experience</h1>
</div>
</div>
</div>
</div>
</section>
work-experience.blade.php
<form class="needs-validation" action="{{route('saveWorkExperience')}}" method="POST" novalidate>
@csrf
<div class="row">
<table class="table table-bordered" id="table">
<thead>
<tr>
<th>Designation</th>
<th>Company Name</th>
<th>Description </th>
<th>Started Date</th>
<th>End Date</th>
<th>Action</th>
</tr>
</thead>
<tbody id="tableBody">
<tr>
<td><input type="text" name="data[0][designation]" class="form-control"></td>
<td><input type="text" name="data[0][company_name]" class="form-control">
</td>
<td><textarea type="text" name="data[0][description]" class="form-control" rows="3"></textarea>
</td>
<td><input type="date" name="data[0][started_date]" class="form-control">
</td>
<td><input type="date" name="data[0][end_date]" class="form-control"></td>
<td><button type="button" name="add" id="add"
class="btn btn-success">Add Row </button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mb-2">
<div class="d-grid">
<button type="submit" class="btn btn-primary float-right">Next></button>
</div>
</div>
</form>
work-experience.blade.php
<script>
var i = 0;
$('#add').click(function() {
++i;
$('#table').append(
`<tr>
<td>
<input type="text" name="data[` + i + `][designation]" class="form-control"/>
</td>
<td>
<input type="text" name="data[` + i + `][company_name]" class="form-control"/>
</td>
<td>
<textarea type="text" name="data[` + i + `][description]" class="form-control" rows="3"></textarea>
</td>
<td>
<input type="date" name="data[` + i + `][started_date]" class="form-control"/>
</td>
<td>
<input type="date" name="data[` + i + `][end_date]" class="form-control"/>
</td>
<td>
<button type="button" class="btn btn-danger remove-table-row">Remove</button>
</td>
</tr>`);
});
$(document).on('click', '.remove-table-row', function() {
$(this).parents('tr').remove();
});
</script>
work-experience.blade.php
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
WorkExperienceController
php artisan make:controller WorkExperienceController
Web.php
uuse App\Http\Controllers\WorkExperienceController;
Route::get('/work-experience',[WorkExperienceController::class,'work_experience'])->name('work-experience');
WorkExperienceController
public function work_experience() {
return view('work-experience');
}
WorkExperience Model and WorkExperiences Table
php artisan make:model WorkExperience -m
WorkExperiencesTable
Schema::create('work_experiences', function (Blueprint $table) {
$table->id();
$table->string('designation')->nullable();
$table->string('company_name')->nullable();
$table->string('description')->nullable();
$table->string('started_date')->nullable();
$table->string('end_date')->nullable();
$table->timestamps();
});
WorkExperience Model
protected $table = 'work_experiences';
protected $primarykey = 'id';
protected $fillable = ['designation','company_name','description','started_date','end_date'];
WorkExperiences Table
$table->unsignedBigInteger('user_id');
$table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
WorkExperience Model
protected $fillable = ['user_id'];
public function users(){
return $this->belongsTo(User::class);
}
User Model
public function work_experiences()
{
return $this->hasMany(WorkExperience::class, 'user_id','id');
}
Migrate Tables
php artisan migrate
Web.php
use App\Http\Controllers\WorkExperienceController;
Route::post('/saveWorkExperience',[WorkExperienceController::class,'saveWorkExperience'])->name('saveWorkExperience');
WorkExperienceController
use App\Models\WorkExperience;
use Illuminate\Support\Facades\Validator;
public function saveWorkExperience(Request $request)
{ {
$rules = [
'data.*.designation' => 'nullable|string',
'data.*.company_name' => 'nullable|string',
'data.*.description' => 'nullable|string',
'data.*.started_date' => 'nullable|string',
'data.*.end_date' => 'nullable|string'
];
$validator = Validator::make($request->all(), $rules);
if ($validator->fails()) {
return redirect()->back()->withErrors($validator)->withInput();
}
}
if (auth()->check()) {
$userId = auth()->id();
if (!$userId) {
return 'Error: User ID is null';
}
foreach ($request->data as $key => $value) {
$work_experience = new WorkExperience();
$work_experience->user_id = $userId;
$work_experience->designation = $value['designation'];
$work_experience->company_name = $value['company_name'];
$work_experience->description = $value['description'];
$work_experience->started_date = $value['started_date'];
$work_experience->end_date = $value['end_date'];
$work_experience->save();
}
return 'success';
} else {
return redirect()->route('login');
}
}