article

Saturday, April 23, 2022

Laravel 9 Joining Tables Insert Data in Bootstrap 5 Modal

Laravel 9 Joining Tables Insert Data in Bootstrap 5 Modal

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

Related Post