Bootstrap 5
https://getbootstrap.com/docs/5.0/getting-started/introduction/
https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css
Jquery
https://jquery.com/download/
CDN : jsDelivr CDN
https://www.jsdelivr.com/package/npm/jquery
https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js
How to install laravel 9
https://tutorial101.blogspot.com/2022/02/how-to-install-laravel-9.html
Connecting our Database
open .env file root directory.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel9
DB_USERNAME=root
DB_PASSWORD=
Creating Controller
php artisan make:controller EmployeeController
C:\xampp\htdocs\laravel9\blog>php artisan make:controller EmployeeController
change it with the following codes:
blog\app\Http\Controllers\EmployeeController.php
//blog\app\Http\Controllers\EmployeeController.php <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use DB; use App\Models\Employee; //add Employee Model class EmployeeController extends Controller { public function index(){ $employee = DB::table('employees') ->join('genders', 'genders.id', '=', 'employees.gender_id') ->join('positions', 'positions.id', '=', 'employees.position_id') ->get(); $gender = DB::table('genders') ->get(); $position = DB::table('positions') ->get(); return view('home', ['employees' => $employee , 'genders' => $gender , 'positions' => $position]); } public function save(Request $request){ $employee = new Employee; $employee->firstname = $request->input('firstname'); $employee->lastname = $request->input('lastname'); $employee->gender_id = $request->input('gender'); $employee->position_id = $request->input('position'); $employee->save(); return redirect('/'); } }Creating Model
php artisan make:model Employee -m
php artisan make:model Position -m
php artisan make:model Gender -m
C:\xampp\htdocs\laravel9\blog>php artisan make:model Employee -m
This will create our model file located : blog\app\Models\Employee.php
we put -m when we create our model.
this will automatically make the migration for our model and you will see that in yourproject/database/migrations
blog\database\migrations\create_empoyees_table.php
edit code blog\database\migrations\create_empoyees_table.php
<?php //blog\database\migrations\create_employees_table.php return new class extends Migration { public function up() { Schema::create('employees', function (Blueprint $table) { $table->increments('id'); $table->string('firstname'); $table->string('lastname'); $table->integer('gender_id'); $table->integer('position_id'); $table->timestamps(); }); } }; <?php //blog\database\migrations\create_positions_table.php return new class extends Migration { public function up() { Schema::create('positions', function (Blueprint $table) { $table->increments('id'); $table->string('title'); $table->timestamps(); }); } }; <?php //blog\database\migrations\create_genders_table.php return new class extends Migration { public function up() { Schema::create('genders', function (Blueprint $table) { $table->increments('id'); $table->string('gender'); $table->timestamps(); }); } };Database Migration
php artisan migrate
C:\xampp\htdocs\laravel9\blog>php artisan migrate
Migration table created successfully.
check database table
Creating Routes
blog\routes\web.php
//blog\routes\web.php <?php use Illuminate\Support\Facades\Route; //Route::get('/', function () { // return view('welcome'); //}); Route::get('/', 'EmployeeController@index'); Route::post('/save', 'EmployeeController@save');Creating Views
blog\resources\views\home.blade.php
//blog\resources\views\home.blade.php <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Laravel 9 Joining Tables Insert Data in Bootstrap 5 Modal - Cairocoders</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" /> <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css"> </head> <body> <div class="container"> <h1 class="page-header text-center">Laravel 9 Joining Tables Insert Data in Bootstrap 5 Modal</h1> <div class="row"> <div class="col-md-12"> <h2>Employee Table <button type="button" class="btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#addnew"> <i class="bi bi-clipboard2-plus-fill"></i> Add New Employee </button> </h2> <table class="table table-bordered table-striped"> <thead> <th>Firsttname</th> <th>Lastname</th> <th>Gender</th> <th>Position</th> </thead> <tbody> @foreach($employees as $employee) <tr> <td>{{$employee->firstname}}</td> <td>{{$employee->lastname}}</td> <td>{{$employee->gender}}</td> <td>{{$employee->title}}</td> </tr> @endforeach </tbody> </table> </div> </div> </div> @include('modal') </body> </html>blog\resources\views\modal.blade.php
//blog\resources\views\modal.blade.php <!-- Add Modal --> <div class="modal fade" id="addnew" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Add New Employee</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <form action="{{ URL::to('save') }}" method="POST"> {{ csrf_field() }} <div class="mb-3 row"> <label for="firstname" class="col-sm-2 col-form-label">Firstname</label> <div class="col-auto"> <input type="text" name="firstname" class="form-control" placeholder="Input Firstname" required> </div> </div> <div class="mb-3 row"> <label for="lastname" class="col-sm-2 col-form-label">Lastname</label> <div class="col-auto"> <input type="text" name="lastname" class="form-control" placeholder="Input Lastname" required> </div> </div> <div class="mb-3 row"> <label for="gender" class="col-sm-2 col-form-label">Gender</label> <div class="col-auto"> <select class="form-select" name="gender"> @foreach($genders as $gender) <option value="{{ $gender->id }}">{{ $gender->gender }}</option> @endforeach </select> </div> </div> <div class="mb-3 row"> <label for="position" class="col-sm-2 col-form-label">Position</label> <div class="col-auto"> <select class="form-select" name="position"> @foreach($positions as $position) <option value="{{ $position->id }}">{{ $position->title }}</option> @endforeach </select> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><i class="bi bi-x-circle-fill"></i> Close</button> <button type="submit" class="btn btn-primary"><i class="bi bi-send"></i> Save</button> </div> </div> </div> </div>Edit RouteServiceProvider.php
blog\app\Providers\RouteServiceProvider.php
uncomment protected $namespace = 'App\\Http\\Controllers';
Run C:\xampp\htdocs\laravel9\blog>php artisan serve
Starting Laravel development server: http://127.0.0.1:8000