Implement the Skills form | CV create Web | Code Abe Academy

byCODE - ABE •
0

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




Skills Form

Now, Let's create. 

  1. Create skill.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 shadow">
                    <h1 class="text-info text-center mt-2 mb-4">Skills</h1>

                </div>
            </div>
        </div>
    </div>
    </section>
  4. Add form with validation.
    5. skill.blade.php  
    <form class="needs-validation" action="{{route('saveSkills')}}" method="POST" novalidate>
                        @csrf
                        <div class="row">

                            <div class="col-md-6">
                                <table class="table table-bordered" id="table_language">
                                    <thead>
                                        <tr>
                                            <th>Language</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tableBody">
                                        <tr>
                                            <td><input type="text" name="data[0][language]" class="form-control"></td>

                                            <td><button type="button" name="add" id="add_language"
                                                    class="btn btn-success">Add Row </button>
                                            </td>

                                        </tr>
                                    </tbody>
                                </table>
                            </div>

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

                                <table class="table table-bordered" id="table_personal">
                                    <thead>
                                        <tr>
                                            <th>Personal Skills</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tableBody">
                                        <tr>
                                            <td><input type="text" name="data[0][personal_skill]" class="form-control"></td>

                                            <td><button type="button" name="add" id="add_personal"
                                                    class="btn btn-success">Add Row </button>
                                            </td>

                                        </tr>
                                    </tbody>
                                </table>
                            </div>


                        </div>


                        <div class="row">

                            <div class="col-md-6">
                                <table class="table table-bordered" id="table_tech">
                                    <thead>
                                        <tr>
                                            <th>Tech Skills</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tableBody">
                                        <tr>
                                            <td><input type="text" name="data[0][tech_skill]" class="form-control"></td>

                                            <td><button type="button" name="add" id="add_tech"
                                                    class="btn btn-success">Add Row </button>
                                            </td>

                                        </tr>
                                    </tbody>
                                </table>
                            </div>

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

                                <table class="table table-bordered" id="table_interest">
                                    <thead>
                                        <tr>
                                            <th>Interest</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tableBody">
                                        <tr>
                                            <td><input type="text" name="data[0][interest]" class="form-control"></td>

                                            <td><button type="button" name="add" id="add_interest"
                                                    class="btn btn-success">Add Row </button>
                                            </td>

                                        </tr>
                                    </tbody>
                                </table>
                            </div>


                        </div>

                        <div class="mb-2">
                            <div class="d-grid">
                                <button type="submit" class="btn btn-success float-right">Submit&gt;</button>
                            </div>
                        </div>
                    </form>
  5. Add cloudflare Script.
    6. skill.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>
  6. Add Table Script
    7. skill.blade.php 
    <script>
    var l = 0;
    $('#add_language').click(function() {
        ++l;
        $('#table_language').append(
            `<tr>
                <td>
                    <input type="text" name="data[` + l + `][language]" 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>

<script>
    var p = 0;
    $('#add_personal').click(function() {
        ++p;
        $('#table_personal').append(
            `<tr>
                <td>
                    <input type="text" name="data[` + p + `][personal_skill]" 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>

<script>
    var t = 0;
    $('#add_tech').click(function() {
        ++t;
        $('#table_tech').append(
            `<tr>
                <td>
                    <input type="text" name="data[` + t + `][tech_skill]" 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>

<script>
    var i = 0;
    $('#add_interest').click(function() {
        ++i;
        $('#table_interest').append(
            `<tr>
                <td>
                    <input type="text" name="data[` + i + `][interest]" 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>
  7. Create a controller.
    8. SkillController 
    php artisan make:controller SkillController
  8. Create a route.
    9. Web.php 
    uuse App\Http\Controllers\SkillController;

Route::get('/skill',[SkillController::class,'skill'])->name('skill');
  9. Create Skill view function.
    10. SkillController 
    public function skill()  {
        return view('skill');
    }
  10. Make Models and Tables for Skill
    11. Language Model and Languages Table 
    php artisan make:model Language -m
  11. Create the languagesTable
    12. languagesTable 
    Schema::create('languages', function (Blueprint $table) {
            $table->id();
            $table->string('language')->nullable();
            $table->timestamps();
        });
  12. Create the Language Model
    13. Language Model 
    protected $table = 'languages';
    protected $primarykey = 'id';
    protected $fillable = ['language'];
    PersonalSkill Model and PersonalSkillsTable 
    php artisan make:model PersonalSkill -m
  13. Create the PersonalSkillsTable
    14. PersonalSkillsTable 
    Schema::create('personal_skills', function (Blueprint $table) {
            $table->id();
            $table->string('personal_skill')->nullable();
            $table->timestamps();
        });
  14. Create the PersonalSkill Model
    15. PersonalSkill Model 
    protected $table = 'personal_skills';
    protected $primarykey = 'id';
    protected $fillable = ['personal_skill'];
    TechSkill Model and TechSkillsTable 
    php artisan make:model TechSkill -m
  15. Create the TechSkillsTable
    16. TechSkillsTable 
    Schema::create('tech_skills', function (Blueprint $table) {
            $table->id();
            $table->string('tech_skill')->nullable();
            $table->timestamps();
        });
  16. Create the TechSkill Model
    17. TechSkill Model 
    protected $table = 'tech_skills';
    protected $primarykey = 'id';
    protected $fillable = ['tech_skill'];
    Interest Model and InterestsTable 
    php artisan make:model Interest -m
  17. Create the InterestsTable
    18. InterestsTable 
    Schema::create('interests', function (Blueprint $table) {
            $table->id();
            $table->string('interest')->nullable();
            $table->timestamps();
        });
  18. Create the Interest Model
    19. Interest Model 
    protected $table = 'interests';
    protected $primarykey = 'id';
    protected $fillable = ['interest'];
  19. Add ForeignKey
    20. Add for all Skills Tables 
    $table->unsignedBigInteger('user_id');
            $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
    Add for all Skills Models 
    protected $fillable = ['user_id'];
      
      public function users(){
        return $this->belongsTo(User::class);
    }
    User Model 
    public function languages()
    {
        return $this->hasMany(Language::class, 'user_id','id');
    }

    public function personal_skills()
    {
        return $this->hasMany(PersonalSkill::class, 'user_id','id');
    }

    public function tech_skills()
    {
        return $this->hasMany(TechSkill::class, 'user_id','id');
    }

    public function interests()
    {
        return $this->hasMany(Interest::class, 'user_id','id');
    }
  20. Migrate the tables
    21. Migrate Tables 
    php artisan migrate
  21. Add saveSkills route.
    22. Web.php 
    use App\Http\Controllers\SkillController;

Route::post('/saveSkills',[SkillController::class,'saveSkills'])->name('saveSkills');
  22. Create saveSkills function.
    23. SkillController 
    use App\Models\Interest;
use App\Models\Language;
use App\Models\PersonalSkill;
use App\Models\TechSkill;
      use Illuminate\Support\Facades\Validator;

public function saveSkills(Request $request)
    { {
            $rules = [
                'data.*.language' => 'nullable|string',
                'data.*.personal_skill' => 'nullable|string',
                'data.*.tech_skill' => 'nullable|string',
                'data.*.interest' => '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) {
                if (isset($value['personal_skill'])) {
                    $personal_skill = new PersonalSkill();
                    $personal_skill->user_id = $userId;
                    $personal_skill->personal_skill = $value['personal_skill'];
                    $personal_skill->save();
                }
            }


            foreach ($request->data as $key => $value) {
                if (isset($value['interest'])) {
                    $interest = new Interest();
                    $interest->user_id = $userId;
                    $interest->interest = $value['interest'];
                    $interest->save();
                }
            }

            foreach ($request->data as $key => $value) {
                if (isset($value['tech_skill'])) {
                    $tech_skill = new TechSkill();
                    $tech_skill->user_id = $userId;
                    $tech_skill->tech_skill = $value['tech_skill'];
                    $tech_skill->save();
                }
            }




            foreach ($request->data as $key => $value) {
                if (isset($value['language'])) {
                    $language = new Language();
                    $language->user_id = $userId;
                    $language->language = $value['language'];
                    $language->save();
                }
            }


            return 'success';
        } else {

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

Post a Comment

Previous Post Next Post