Implement the Pesonal Details form | CV create Web | Code Abe Academy

byCODE - ABE •
0

This tutorial will teach you how to make user personal details form in CV create Web with validation using Laravel. Let’s do it step by step.





Personal Details Form

Now, Let's create. 

  1. Create index.blade.php file.
  2. Add bootstrap.
  3. Add form-container.
    4. 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 minHeight shadow">
                        <h1 class="text-info text-center mt-2 mb-4">Personal Details</h1>

                </div>
            </div>
        </div>
    </div>
    </section>
  4. Add form with validation.
    5. index.blade.php  
    <form class="needs-validation" action="{{ route('savePersonalDetails') }}" method="POST"
                        enctype="multipart/form-data" novalidate>
                        @csrf
                        <div class="row">
                            <div class="col-md-6">
                                <div>
                                    <div class="mb-3 mt-3">
                                        <label class="form-label">Name</label>
                                        <input type="text" class="form-control" name="name"
                                            placeholder="Your Name" required>
                                        <div class="invalid-feedback">
                                            Please Enter Your Name.
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <label for="formFile" class="form-label">
                                        Upload your picture
                                    </label>
                                    <input class="form-control" type="file" name="cv_img" id="formFile" required>
                                    <div class="invalid-feedback">
                                        Please Add Your picture.
                                    </div>
                                </div>
                                <div>
                                    <div class="mb-3 mt-3">
                                        <label class="form-label">Address</label>
                                        <input type="text" class="form-control" name="address"
                                            placeholder="Your address" required>
                                        <div class="invalid-feedback">
                                            Please Enter Your address.
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label for="inputEmail3" class="col-sm-4 col-form-label">Marital status</label>
                                    <div class="col-sm-8">
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="marital_status"
                                                id="marital_statusSingle" value="Single" required>
                                            <label class="form-check-label" for="marital_statusSingle">Single</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="marital_status"
                                                id="marital_statusMarried" value="Married" required>
                                            <label class="form-check-label" for="marital_statusMarried">Married</label>
                                        </div>

                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label for="inputEmail3" class="col-sm-2 col-form-label">Gender</label>
                                    <div class="col-sm-10">
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="gender"
                                                id="genderMale" value="Male" required>
                                            <label class="form-check-label" for="genderMale">Male</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="gender"
                                                id="genderFemale" value="Female" required>
                                            <label class="form-check-label" for="genderFemale">Female</label>
                                        </div>

                                    </div>
                                </div>

                            </div>
                            <div class="col-md-6">

                                <div class="mb-3 mt-3">
                                    <label class="form-label">Designation</label>
                                    <input type="text" class="form-control" name="designation"
                                        placeholder="Your Current Designation" required>
                                    <div class="invalid-feedback">
                                        Please Enter Your Current Designation.
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Email</label>
                                    <input type="email" class="form-control" name="email" placeholder="Your email"
                                        required>
                                    <div class="invalid-feedback">
                                        Please Enter Your Email.
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Mobile Number</label>
                                    <input type="text" class="form-control" name="mobile_no"
                                        placeholder="Your Mobile Number" pattern="^(070|071|072|074|075|076|077|078)\d{7}$" maxlength="10" required>
                                    <div class="invalid-feedback">
                                        Please Enter Your Mobile Number.
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Birth Day</label>
                                    <input type="date" class="form-control" name="birthday"
                                        placeholder="Your Birthday" required>
                                    <div class="invalid-feedback">
                                        Please Enter Your Birthday.
                                    </div>
                                </div>

                            </div>
                        </div>
                        
                        <div class="row">
                            <h1 class="text-info text-center mt-2 mb-4">About You</h1>
                            <div class="col">
                                <div class="mb-3">
                                    <textarea type="text" class="form-control" name="about_you"
                                        placeholder="Type About You" rows="5" required> </textarea>
                                    <div class="invalid-feedback">
                                        Please Type About You.
                                    </div>
                                </div>
                            </div>
                        </div>



                        <div class="mb-2">
                            <div class="d-grid">
                                <button type="submit" class="btn btn-primary float-right">Next&gt;</button>
                            </div>
                        </div>

                    </form>
  5. Add Custom CSS.
    6. custom.css 
    body {
    background-size: cover;
    background-repeat: no-repeat;
    font-family: "Open Sans", sans-serif;
    background: #f6f9ff;
    color: #444444;
}
  6. Create a controller.
    7. PersonalDetailController 
    php artisan make:controller PersonalDetailController
  7. Create a route.
    8. Web.php 
    use App\Http\Controllers\PersonalDetailController;

Route::get('/index',[PersonalDetailController::class,'index'])->name('index');
  8. Create Index view function.
    9. PersonalDetailController 
    public function index() {
        return view('index');
    }
  9. Add Form Validation Script.
    10. index.blade.php 
    <script>
    (function() {
        'use strict'

        var forms = document.querySelectorAll('.needs-validation')

        Array.prototype.slice.call(forms)
            .forEach(function(form) {
                form.addEventListener('submit', function(event) {
                    if (!form.checkValidity()) {
                        event.preventDefault()
                        event.stopPropagation()
                    }

                    form.classList.add('was-validated')
                }, false)
            })
    })()
</script>
  10. Make PersonalDetail Model and Table
    11. PersonalDetail Model and PersonalDetails Table 
    php artisan make:model PersonalDetail -m
  11. Create the PersonalDetailsTable
    12. PersonalDetailsTable 
    Schema::create('personal_details', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('designation');
            $table->string('cv_img');
            $table->string('address');
            $table->string('marital_status');
            $table->string('gender');
            $table->string('email');
            $table->string('mobile_no');
            $table->string('birthday');
            $table->timestamps();
        });
  12. Create the PersonalDetail Model
    13. PersonalDetail Model 
    protected $table = 'personal_details';
protected $primarykey = 'id';
protected $fillable = ['user_id','name','designation','cv_img','address','marital_status','gender','email','mobile_no','birthday'];
  13. Make AboutYou Model and Table
    14. AboutYou Model and AboutYou Table 
    php artisan make:model AboutYou -m
  14. Create the AboutYouTable
    15. AboutYousTable 
    Schema::create('about_yous', function (Blueprint $table) {
            $table->id();
            $table->text('about_you');
            $table->timestamps();
        });
  15. Create the AboutYou Model
    16. AboutYou Model 
    protected $table = 'about_yous';
protected $primarykey = 'id';
protected $fillable = ['about_you'];
  16. Add ForeignKey to both PersonalDetails and AboutYou
    17. PersonalDetails Table and AboutYou Table 
    $table->unsignedBigInteger('user_id');
$table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
    PersonalDetail Model and AboutYou Model 
    protected $fillable = ['user_id'];
      
      public function users(){
        return $this->belongsTo(User::class);
    }
    User Model 
    public function personal_details()
    {
        return $this->hasOne(PersonalDetail::class, 'user_id','id');
    }
    
    public function about_yous()
    {
        return $this->hasOne(AboutYou::class, 'user_id','id');
    }
  17. Migrate the tables
    18. Migrate Tables 
    php artisan migrate
  18. Add savePersonalDetails route.
    19. Web.php 
    use App\Http\Controllers\PersonalDetailController;

Route::post('/savePersonalDetails',[PersonalDetailController::class,'savePersonalDetails'])->name('savePersonalDetails');
  19. Create savePersonalDetails function.
    20. PersonalDetailController 
    use App\Models\PersonalDetail;
      use App\Models\AboutYou;
      use Illuminate\Support\Facades\Validator;

public function savePersonalDetails(Request $request)
    {
        $validator = Validator::make($request->all(), [
            'name' => 'required|string',
            'designation' => 'required|string',
            'cv_img' => 'required|mimes:jpeg,png,pdf|max:2048',
            'address' => 'required|string',
            'marital_status' => 'required|string',
            'gender' => 'required|string',
            'email' => 'required|string',
            'mobile_no' => 'required|string',
            'birthday' => 'required|string',
            'about_you' => 'required|string',
        ]);

        if ($validator->fails()) {
            return redirect()->back()->withErrors($validator)->withInput();
        }


       
        if (auth()->check()) {
           
            $userId = auth()->id(); 
            if (!$userId) {
                
                return 'Error: User ID is null';
            }

            $personal = new PersonalDetail([
                'user_id' => $userId,
                'name' => $request->input('name'),
                'designation' => $request->input('designation'),
                'address' => $request->input('address'),
                'marital_status' => $request->input('marital_status'),
                'gender' => $request->input('gender'),
                'email' => $request->input('email'),
                'mobile_no' => $request->input('mobile_no'),
                'birthday' => $request->input('birthday'),
            ]);


            if ($request->hasFile('cv_img')) {
                $file = $request->file('cv_img');
                $extension = $file->getClientOriginalExtension();
                $filename = $userId . '_' . time() . '.' . $extension;
                $file->move('uploads/cv_img/' ,$filename);
                $personal->cv_img = $filename;
            }

            $personal->save();
            
            $about_you = new AboutYou([
                'user_id' => $userId,
                'about_you' => $request->input('about_you'),
            ]);

            $about_you->save();

            return 'success';

        } else {
            return redirect()->route('login'); 
        }
    }
Tags:

Post a Comment

Previous Post Next Post