This tutorial will teach you how to make user educational qualification form in CV create Web with validation using Laravel. Let’s do it step by step.
Educational Qualification Form
Now, Let's create.
- Create educational-qualification.blade.php file.
- Add bootstrap.
- Add form-container.
- Add form with validation.
- Add Table Script
- Add Form cloudflare Script
- Create a controller.
- Create a route.
- Create Educational Qualification view function.
- Make EducationalQualification Model and Table
- Create the EducationalQualificationsTable
- Create the EducationalQualification Model
- Add ForeignKey
- Migrate the tables
- Add saveEducationalQualification route.
- Create saveEducationalQualification 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 py-3 mt-3 shadow">
<h1 class="text-info text-center mt-2 mb-4">Educational Qualification</h1>
</div>
</div>
</div>
</div>
</section>
educational-qualification.blade.php
<form class="needs-validation" action="{{route('saveEducationalQualification')}}" method="POST" novalidate>
@csrf
<div class="row">
<table class="table table-bordered" id="table">
<thead>
<tr>
<th>Qualification</th>
<th>Institute Name</th>
<th>Description </th>
<th>Started Date</th>
<th>End Date</th>
<th>Action</th>
</tr>
</thead>
<tbody id="tableBody">
<!-- Table rows go here -->
<tr>
<td><input type="text" name="data[0][qualification]" class="form-control"></td>
<td><input type="text" name="data[0][institute_name]" class="form-control">
</td>
<td><textarea type="text" name="data[0][description]" class="form-control" rows="3"></textarea>
</td>
<td>
<input type="text" name="data[0][started_date]" class="form-control year-picker" placeholder="YYYY" maxlength="4" pattern="\d{4}">
</td>
<td>
<input type="text" name="data[0][end_date]" class="form-control year-picker" placeholder="YYYY" maxlength="4" pattern="\d{4}">
</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>
educational-qualification.blade.php
<script>
$(document).ready(function(){
$('.year-picker').on('input', function() {
this.value = this.value.replace(/[^0-9]/g, '');
if (this.value.length > 4) this.value = this.value.slice(0, 4);
});
var i = 0;
$('#add').click(function() {
++i;
$('#table').append(
`<tr>
<td>
<input type="text" name="data[` + i + `][qualification]" class="form-control"/>
</td>
<td>
<input type="text" name="data[` + i + `][institute_name]" class="form-control"/>
</td>
<td>
<textarea type="text" name="data[` + i + `][description]" class="form-control" rows="3"></textarea>
</td>
<td>
<input type="text" name="data[` + i + `][started_date]" class="form-control year-picker" placeholder="YYYY" maxlength="4" pattern="\d{4}"/>
</td>
<td>
<input type="text" name="data[` + i + `][end_date]" class="form-control year-picker" placeholder="YYYY" maxlength="4" pattern="\d{4}"/>
</td>
<td>
<button type="button" class="btn btn-danger remove-table-row">Remove</button>
</td>
</tr>`);
$('.year-picker').on('input', function() {
this.value = this.value.replace(/[^0-9]/g, '');
if (this.value.length > 4) this.value = this.value.slice(0, 4);
});
});
$(document).on('click', '.remove-table-row', function() {
$(this).parents('tr').remove();
});
});
</script>
educational-qualification.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>
EducationalQualificationController
php artisan make:controller EducationalQualificationController
Web.php
uuse App\Http\Controllers\EducationalQualificationController;
Route::get('/educational-qualification',[EducationalQualificationController::class,'educational_qualification'])->name('educational-qualification');
EducationalQualificationController
public function educational_qualification() {
return view('educational-qualification');
}
EducationalQualification Model and EducationalQualifications Table
php artisan make:model EducationalQualification -m
EducationalQualificationsTable
Schema::create('educational_qualifications', function (Blueprint $table) {
$table->id();
$table->string('qualification')->nullable();
$table->string('institute_name')->nullable();
$table->string('description')->nullable();
$table->string('started_date')->nullable();
$table->string('end_date')->nullable();
$table->timestamps();
});
EducationalQualification Model
protected $table = 'educational_qualifications';
protected $primarykey = 'id';
protected $fillable = ['qualification','institute_name','description','started_date','end_date'];
EducationalQualifications Table
$table->unsignedBigInteger('user_id');
$table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
EducationalQualification Model
protected $fillable = ['user_id'];
public function users(){
return $this->belongsTo(User::class);
}
User Model
public function educational_qualifications()
{
return $this->hasMany(EducationalQualification::class, 'user_id','id');
}
Migrate Tables
php artisan migrate
Web.php
use App\Http\Controllers\EducationalQualificationController;
Route::post('/saveEducationalQualification',[EducationalQualificationController::class,'saveEducationalQualification'])->name('saveEducationalQualification');
EducationalQualificationController
use App\Models\EducationalQualification;
use Illuminate\Support\Facades\Validator;
public function saveEducationalQualification(Request $request)
{ {
$rules = [
'data.*.qualification' => 'nullable|string',
'data.*.institute_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) {
$educational_qualification = new EducationalQualification();
$educational_qualification->user_id = $userId;
$educational_qualification->qualification = $value['qualification'];
$educational_qualification->institute_name = $value['institute_name'];
$educational_qualification->description = $value['description'];
$educational_qualification->started_date = $value['started_date'];
$educational_qualification->end_date = $value['end_date'];
$educational_qualification->save();
}
return 'success';
} else {
return redirect()->route('login');
}
}