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
