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=laravel
DB_USERNAME=root
DB_PASSWORD=
Create the tables php artisan make:migration create_employees_table
C:\xampp\htdocs\laravel9\blog>php artisan make:migration create_employees_table
Open new employee migrations
yourproject/database/migrations
blog\database\migrations\_create_employees_table.php
edit code blog\database\migrations\_create_employees_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('employees', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('address');
$table->string('mobile');
$table->string('photo', 300);
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('employees');
}
};
Database Migration php artisan migrate
C:\xampp\htdocs\laravel9\blog>php artisan migrate
Migration table created successfully.
check database table
Creating Controller
php artisan make:controller EmployeeController --resource
C:\xampp\htdocs\laravel9\blog>php artisan make:controller EmployeeController --resource
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 App\Models\Employee;
class EmployeeController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$employees = Employee::all();
return view ('employees.index')->with('employees', $employees);
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
return view('employees.create');
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$requestData = $request->all();
$fileName = time().$request->file('photo')->getClientOriginalName();
$path = $request->file('photo')->storeAs('images', $fileName, 'public');
$requestData["photo"] = '/storage/'.$path;
Employee::create($requestData);
return redirect('employee')->with('flash_message', 'Employee Addedd!');
}
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
//
}
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
//
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
//
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
//
}
}
Create Model Model is used to get the data from the database.
php artisan make:model Employee
C:\xampp\htdocs\laravel9\blog>php artisan make:model Employee
blog\app\Models\Employee.php
Add code
//blog\app\Models\Employee.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Employee extends Model
{
use HasFactory;
protected $table = 'employees';
protected $primaryKey = 'id';
protected $fillable = ['name', 'address', 'mobile','photo'];
}
Create Views Create a Folder inside the resources-views
inside the views folder create employee folder
Bootstrap 5 https://getbootstrap.com/docs/5.1/getting-started/download/
blog\resources\views\employee\layout.blade.php
//blog\resources\views\employee\layout.blade.php
<head>
<title>Laravel 9 Image Upload and Display in Datatable | File Storage</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="container">
@yield('content')
</div>
</body>
</html>
blog\resources\views\employee\create.blade.php
//blog\resources\views\employee\create.blade.php
@extends('employees.layout')
@section('content')
<div class="card" style="margin: 20px;">
<div class="card-header">Create New Employee</div>
<div class="card-body">
<form action="{{ url('employee') }}" method="post" enctype="multipart/form-data">
{!! csrf_field() !!}
<label>Name</label></br>
<input type="text" name="name" id="name" class="form-control"></br>
<label>Address</label></br>
<input type="text" name="address" id="address" class="form-control"></br>
<label>Mobile</label></br>
<input type="text" name="mobile" id="mobile" class="form-control"></br>
<input class="form-control" name="photo" type="file" id="photo">
<input type="submit" value="Save" class="btn btn-success"></br>
</form>
</div>
</div>
@stop
blog\resources\views\employee\index.blade.php
//blog\resources\views\employee\index.blade.php
@extends('employees.layout')
@section('content')
<div class="container">
<div class="row">
<div class="col-12" style="padding:20px;">
<div class="card">
<div class="card-header">Laravel 9 Image Upload and Display in Datatable | File Storage</div>
<div class="card-body">
<a href="{{ url('/employee/create') }}" class="btn btn-success btn-sm" title="Add New Contact">
<i class="fa fa-plus" aria-hidden="true"></i> Add New
</a>
<br/>
<br/>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Address</th>
<th>Telephone</th>
<th>Photo</th>
</thead>
</thead>
<tbody>
@foreach($employees as $item)
<tr>
<td>{{ $loop->iteration }}</td>
<td>{{ $item->name }}</td>
<td>{{ $item->address }}</td>
<td>{{ $item->mobile }}</td>
<td>
<img src="{{ asset($item->photo) }}" width= '50' height='50' class="img img-responsive" />
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
Creating Routes blog\routes\web.php
//blog\routes\web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\EmployeeController; //add the ControllerNameSpace
Route::get('/', function () {
return view('welcome');
});
Route::resource("/employee", EmployeeController::class);
Link Storage folder to public dir php artisan storage:link
PS C:\xampp\htdocs\laravel\blog> php artisan storage:link
The [C:\xampp\htdocs\laravel\blog\public\storage] link has been connected to [C:\xampp\htdocs\laravel\blog\storage\app/public].
The links have been created.
Run C:\xampp\htdocs\laravel9\blog>php artisan serve
Starting Laravel development server: http://127.0.0.1:8000
