Category Archives: Laravel

Laravel Tutorials

Laravel 9 Yajra DataTables CRUD Example Tutorial

In this Laravel 9 Yajra DataTables CRUD Example Tutorial I’ll show you how to create a simple crud application using yajra Datatables in laravel 9. In this example we will learn how to create a simple crud operation application using Datatables in laravel 9. In this laravel 9 crud application we will be using jQuery and ajax to delete data from datatable crud app and MySQL database in laravel 9.

Laravel 9 Ajax CRUD Using Datatable Tutorial

In this example we will implement ajax based CRUD (Create, Read, Update and Delete) operations using datatable js. In this tutorial, we will be using yajra datatable package for listing of records with pagination, sorting and filter (search) feature.

Laravel 9 Yajra DataTables CRUD Example Tutorial

In this step by step guide, we will be creating a simple laravel 9 application to demonstrate you how to install yajra datatable package and implement ajax based CRUD operations with datatable js.

Download Laravel 9 App
Database Configuration
Installing Yajra Datatables
Build Model & Migration
Create Routes
Generate CRUD Controller By Artisan Command
Create Blade Views File
Run Development Server

Install Laravel 9

First of all we need to create a fresh laravel project, download and install Laravel 9 using the below command

composer create-project --prefer-dist laravel/laravel larablog

1	composer create-project --prefer-dist laravel/laravel larablog

Configure Database In .env file

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=larablog
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=larablog

DB_USERNAME=root

DB_PASSWORD=

Install Yajra Datatable Package

In this step, we will install Yajra Datatables Package via the composer dependency manager. Use the following command to install Yajra Datatables Package.

composer require yajra/laravel-datatables-oracle

1	composer require yajra/laravel-datatables-oracle

After Installing Yajra Datatables package, we need to add service provider and alias in config/app.php file as following.

config/app.php

'providers' => [
      // Other service providers…
  Yajra\DataTables\DataTablesServiceProvider::class,
 ],

'aliases' => [
 // Other aliases…
 'Datatables' => Yajra\Datatables\Facades\Datatables::class,
 ],

'providers' => [

// Other service providers…

Yajra\DataTables\DataTablesServiceProvider::class,

'aliases' => [

// Other aliases…

'Datatables' => Yajra\Datatables\Facades\Datatables::class,

Now, we need to publish laravel datatables vendor package by using the following command:

php artisan vendor:publish

1	php artisan vendor:publish

Build Model & Migration

Now, in this step we will create model and migration file for form. Please run the following command:

php artisan make:model Company -m

1	php artisan make:model Company -m

Once above command is executed there will be a migration file created inside database/migrations/ directory, just open create_companies_table.php migration file and update the function up() method as following:

public function up()
{
    Schema::create('companies', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('email');
        $table->string('address');
        $table->timestamps();
    });
}

public function up()

{

Schema::create('companies', function (Blueprint $table) {

$table->id();

$table->string('name');

$table->string('email');

$table->string('address');

$table->timestamps();

});

}

Now, run the migration to create database table using following artisan command:

php artisan migrate

1	php artisan migrate

Create Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

Route::resource('companies', CompanyCRUDController::class);
Route::post('delete-company', [CompanyCRUDController::class,'destroy']);

1 2	Route::resource('companies', CompanyCRUDController::class); Route::post('delete-company', [CompanyCRUDController::class,'destroy']);

Generate CRUD Controller By Artisan Command

Next, we have to create a controller to for laravel crud operations. Lets Create a controller named CompanyCRUDController using command given below –

php artisan make:controller CompanyCRUDController

1	php artisan make:controller CompanyCRUDController

Open the CompanyCRUDController.php file and put the following code in it.

app/Http/Controllers/CompanyCRUDController.php

<?php
namespace App\Http\Controllers;
use App\Models\Company;
use Illuminate\Http\Request;
use Datatables;
class CompanyCRUDController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
if(request()->ajax()) {
return datatables()->of(Company::select('*'))
->addColumn('action', 'companies.action')
->rawColumns(['action'])
->addIndexColumn()
->make(true);
}
return view('companies.index');
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
return view('companies.create');
}
/**
* Store a newly created resource in storage.
*
* @param  \Illuminate\Http\Request  $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$request->validate([
'name' => 'required',
'email' => 'required',
'address' => 'required'
]);
$company = new Company;
$company->name = $request->name;
$company->email = $request->email;
$company->address = $request->address;
$company->save();
return redirect()->route('companies.index')
->with('success','Company has been created successfully.');
}
/**
* Display the specified resource.
*
* @param  \App\company  $company
* @return \Illuminate\Http\Response
*/
public function show(Company $company)
{
return view('companies.show',compact('company'));
} 
/**
* Show the form for editing the specified resource.
*
* @param  \App\Company  $company
* @return \Illuminate\Http\Response
*/
public function edit(Company $company)
{
return view('companies.edit',compact('company'));
}
/**
* Update the specified resource in storage.
*
* @param  \Illuminate\Http\Request  $request
* @param  \App\company  $company
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
$request->validate([
'name' => 'required',
'email' => 'required',
'address' => 'required'
]);
$company = Company::find($id);
$company->name = $request->name;
$company->email = $request->email;
$company->address = $request->address;
$company->save();
return redirect()->route('companies.index')
->with('success','Company Has Been updated successfully');
}
/**
* Remove the specified resource from storage.
*
* @param  \App\Company  $company
* @return \Illuminate\Http\Response
*/
public function destroy(Request $request)
{
$com = Company::where('id',$request->id)->delete();
return Response()->json($com);
}
}

100

101

102

103

104

105

106

107

<?php

namespace App\Http\Controllers;

use App\Models\Company;

use Illuminate\Http\Request;

use Datatables;

class CompanyCRUDController extends Controller

{

/**

* Display a listing of the resource.

* @return \Illuminate\Http\Response

public function index()

{

if(request()->ajax()) {

return datatables()->of(Company::select('*'))

->addColumn('action', 'companies.action')

->rawColumns(['action'])

->addIndexColumn()

->make(true);

}

return view('companies.index');

}

/**

* Show the form for creating a new resource.

* @return \Illuminate\Http\Response

public function create()

{

return view('companies.create');

}

/**

* Store a newly created resource in storage.

* @param \Illuminate\Http\Request $request

* @return \Illuminate\Http\Response

public function store(Request $request)

{

$request->validate([

'name' => 'required',

'email' => 'required',

'address' => 'required'

]);

$company = new Company;

$company->name = $request->name;

$company->email = $request->email;

$company->address = $request->address;

$company->save();

return redirect()->route('companies.index')

->with('success','Company has been created successfully.');

}

/**

* Display the specified resource.

* @param \App\company $company

* @return \Illuminate\Http\Response

public function show(Company $company)

{

return view('companies.show',compact('company'));

}

/**

* Show the form for editing the specified resource.

* @param \App\Company $company

* @return \Illuminate\Http\Response

public function edit(Company $company)

{

return view('companies.edit',compact('company'));

}

/**

* Update the specified resource in storage.

* @param \Illuminate\Http\Request $request

* @param \App\company $company

* @return \Illuminate\Http\Response

public function update(Request $request, $id)

{

$request->validate([

'name' => 'required',

'email' => 'required',

'address' => 'required'

]);

$company = Company::find($id);

$company->name = $request->name;

$company->email = $request->email;

$company->address = $request->address;

$company->save();

return redirect()->route('companies.index')

->with('success','Company Has Been updated successfully');

}

/**

* Remove the specified resource from storage.

* @param \App\Company $company

* @return \Illuminate\Http\Response

public function destroy(Request $request)

{

$com = Company::where('id',$request->id)->delete();

return Response()->json($com);

}

Create Blade Views File

Create the directory and create blade view file for CRUD operations as following:

Make Directory Name Companies
index.blade.php
create.blade.php
edit.blade.php
action.blade.php

Create directory name companies inside resources/views directory.

index.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Laravel 9 DataTables CRUD Tutorial</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" >
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link  href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div class="container mt-2">
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>Laravel 9 CRUD using DataTables Tutorial</h2>
</div>
<div class="pull-right mb-2">
<a class="btn btn-success" href="{{ route('companies.create') }}"> Create Company</a>
</div>
</div>
</div>
@if ($message = Session::get('success'))
<div class="alert alert-success">
<p>{{ $message }}</p>
</div>
@endif
<div class="card-body">
<table class="table table-bordered" id="datatable-crud">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Address</th>
<th>Created at</th>
<th>Action</th>
</tr>
</thead>
</table>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready( function () {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#datatable-crud').DataTable({
processing: true,
serverSide: true,
ajax: "{{ url('companies') }}",
columns: [
{ data: 'id', name: 'id' },
{ data: 'name', name: 'name' },
{ data: 'email', name: 'email' },
{ data: 'address', name: 'address' },
{ data: 'created_at', name: 'created_at' },
{data: 'action', name: 'action', orderable: false},
],
order: [[0, 'desc']]
});
$('body').on('click', '.delete', function () {
if (confirm("Delete Record?") == true) {
var id = $(this).data('id');
// ajax
$.ajax({
type:"POST",
url: "{{ url('delete-company') }}",
data: { id: id},
dataType: 'json',
success: function(res){
var oTable = $('#datatable-crud').dataTable();
oTable.fnDraw(false);
}
});
}
});
});
</script>
</html>

<!DOCTYPE html>

<head>

<title>Laravel 9 DataTables CRUD Tutorial</title>

</head>

<body>

<h2>Laravel 9 CRUD using DataTables Tutorial</h2>

</div>

<a class="btn btn-success" href="{{ route('companies.create') }}"> Create Company</a>

</div>

@if ($message = Session::get('success'))

<p>{{ $message }}</p>

</div>

@endif

<thead>

<tr>

<th>Email</th>

<th>Address</th>

<th>Created at</th>

<th>Action</th>

</tr>

</thead>

</table>

</div>

</body>

$(document).ready( function () {

$.ajaxSetup({

headers: {

'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

}

});

$('#datatable-crud').DataTable({

processing: true,

serverSide: true,

ajax: "{{ url('companies') }}",

columns: [

{ data: 'id', name: 'id' },

{ data: 'name', name: 'name' },

{ data: 'email', name: 'email' },

{ data: 'address', name: 'address' },

{ data: 'created_at', name: 'created_at' },

{data: 'action', name: 'action', orderable: false},

order: [[0, 'desc']]

});

$('body').on('click', '.delete', function () {

if (confirm("Delete Record?") == true) {

var id = $(this).data('id');

// ajax

$.ajax({

type:"POST",

url: "{{ url('delete-company') }}",

data: { id: id},

dataType: 'json',

success: function(res){

var oTable = $('#datatable-crud').dataTable();

oTable.fnDraw(false);

}

});

}

});

</script>

</html>

create.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Add Company Form - Laravel 9 Datatable CRUD</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" >
</head>
<body>
<div class="container mt-2">
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left mb-2">
<h2>Add Company</h2>
</div>
<div class="pull-right">
<a class="btn btn-primary" href="{{ route('companies.index') }}"> Back</a>
</div>
</div>
</div>
@if(session('status'))
<div class="alert alert-success mb-1 mt-1">
{{ session('status') }}
</div>
@endif
<form action="{{ route('companies.store') }}" method="POST" enctype="multipart/form-data">
@csrf
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Company Name:</strong>
<input type="text" name="name" class="form-control" placeholder="Company Name">
@error('name')
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
@enderror
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Company Email:</strong>
<input type="email" name="email" class="form-control" placeholder="Company Email">
@error('email')
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
@enderror
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Company Address:</strong>
<input type="text" name="address" class="form-control" placeholder="Company Address">
@error('address')
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
@enderror
</div>
</div>
<button type="submit" class="btn btn-primary ml-3">Submit</button>
</div>
</form>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Add Company Form - Laravel 9 Datatable CRUD</title>

</head>

<body>

<h2>Add Company</h2>

</div>

</div>

@if(session('status'))

</div>

@endif

@csrf

<strong>Company Name:</strong>

@error('name')

<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>

@enderror

</div>

<strong>Company Email:</strong>

@error('email')

<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>

@enderror

</div>

<strong>Company Address:</strong>

@error('address')

<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>

@enderror

</div>

<button type="submit" class="btn btn-primary ml-3">Submit</button>

</div>

</form>

</body>

</html>

edit.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Edit Company Form - Laravel 9 Datatable CRUD Tutorial</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" >
</head>
<body>
<div class="container mt-2">
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>Edit Company</h2>
</div>
<div class="pull-right">
<a class="btn btn-primary" href="{{ route('companies.index') }}" enctype="multipart/form-data"> Back</a>
</div>
</div>
</div>
@if(session('status'))
<div class="alert alert-success mb-1 mt-1">
{{ session('status') }}
</div>
@endif
<form action="{{ route('companies.update',$company->id) }}" method="POST" enctype="multipart/form-data">
@csrf
@method('PUT')
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Company Name:</strong>
<input type="text" name="name" value="{{ $company->name }}" class="form-control" placeholder="Company name">
@error('name')
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
@enderror
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Company Email:</strong>
<input type="email" name="email" class="form-control" placeholder="Company Email" value="{{ $company->email }}">
@error('email')
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
@enderror
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Company Address:</strong>
<input type="text" name="address" value="{{ $company->address }}" class="form-control" placeholder="Company Address">
@error('address')
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
@enderror
</div>
</div>
<button type="submit" class="btn btn-primary ml-3">Submit</button>
</div>
</form>
</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Edit Company Form - Laravel 9 Datatable CRUD Tutorial</title>

</head>

<body>

<h2>Edit Company</h2>

</div>

</div>

@if(session('status'))

</div>

@endif

<form action="{{ route('companies.update',$company->id) }}" method="POST" enctype="multipart/form-data">

@csrf

@method('PUT')

<strong>Company Name:</strong>

<input type="text" name="name" value="{{ $company->name }}" class="form-control" placeholder="Company name">

@error('name')

<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>

@enderror

</div>

<strong>Company Email:</strong>

<input type="email" name="email" class="form-control" placeholder="Company Email" value="{{ $company->email }}">

@error('email')

<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>

@enderror

</div>

<strong>Company Address:</strong>

<input type="text" name="address" value="{{ $company->address }}" class="form-control" placeholder="Company Address">

@error('address')

<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>

@enderror

</div>

<button type="submit" class="btn btn-primary ml-3">Submit</button>

</div>

</form>

</div>

</body>

</html>

action.blade.php

<a href="{{ route('companies.edit',$id) }}" data-toggle="tooltip" data-original-title="Edit" class="edit btn btn-success edit">
Edit
</a>
<a href="javascript:void(0)" data-id="{{ $id }}" data-toggle="tooltip" data-original-title="Delete" class="delete btn btn-danger">
Delete
</a>

Edit

</a>

Delete

</a>

In the above code following jQuery ajax code is used to delete from datatable and database without refresh or reload page in laravel 9:

$('body').on('click', '.delete', function () {
if (confirm("Delete Record?") == true) {
var id = $(this).data('id');
// ajax
$.ajax({
type:"POST",
url: "{{ url('delete-company') }}",
data: { id: id},
dataType: 'json',
success: function(res){
var oTable = $('#datatable-crud').dataTable();
oTable.fnDraw(false);
}
});
}
});

$('body').on('click', '.delete', function () {

if (confirm("Delete Record?") == true) {

var id = $(this).data('id');

// ajax

$.ajax({

type:"POST",

url: "{{ url('delete-company') }}",

data: { id: id},

dataType: 'json',

success: function(res){

var oTable = $('#datatable-crud').dataTable();

oTable.fnDraw(false);

}

});

}

});

Start Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://localhost:8000/companies

1	http://localhost:8000/companies

Laravel 9 Ajax Image Upload with Preview Tutorial

In this Laravel 9 Ajax Image Upload with Preview Tutorial I’ll show you how to upload image using ajax with preview in laravel 9. In this tutorial you will learn how to upload image and display preview using ajax before upload in laravel 9. I will also show you how to upload image using jQuery and ajax and display preview without reloading of page. In this laravel 9 ajax image upload with preview example we will upload image using ajax and display preview of the image and then save it into directory. Before uploading the image we will display preview of the image and then after successfully image upload into the database and folder we will display success message on the screen.

Laravel 9 Ajax Image Upload with Preview Tutorial

In this step by step ajax image upload with preview in laravel 9 tutorial you will learn to upload image with preview using jQuery and ajax in laravel 9. In this example I’ll share the process to upload image with preview using ajax in laravel 9. Please following steps given below:

Install Laravel 9
Database Configuration
Build Model & Migration
Create Routes
Generate Controller By Artisan Command
Create Ajax Image Upload Form
Create Images Directory inside Storage/app/public
Run Development Server

Install Laravel 9

First of all we need to create a fresh laravel project, download and install Laravel 9 using the below command

composer create-project --prefer-dist laravel/laravel SimpleImageUpload

1	composer create-project --prefer-dist laravel/laravel SimpleImageUpload

Configure Database In .env file

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=SimpleImageUpload
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=SimpleImageUpload

DB_USERNAME=root

DB_PASSWORD=

Create Model & Migration

Now, we have to define table schema for photos table. Open terminal and let’s run the following command to generate a migration along with model file to create photos table in our database.

php artisan make:model Photo -m

1	php artisan make:model Photo -m

Once this command is executed you will find a migration file created under “database/migrations”. lets open migration file and put following code in it –

public function up()
{
    Schema::create('photos', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('path');
        $table->timestamps();
    });
}

public function up()

{

Schema::create('photos', function (Blueprint $table) {

$table->id();

$table->string('name');

$table->string('path');

$table->timestamps();

});

}

Now, run following command to migrate database schema.

php artisan migrate

1	php artisan migrate

After, the migration executed successfully the photos table will be created in database.

Create Routes

After this, we need to add following routes in “routes/web.php” file along with a resource route. Lets open “routes/web.php” file and add following route.

routes/web.php

use App\Http\Controllers\AjaxUploadController;
 
Route::get('image-preview', [AjaxUploadController::class, 'index']);
Route::post('upload', [AjaxUploadController::class, 'store']);

use App\Http\Controllers\AjaxUploadController;

Route::get('image-preview', [AjaxUploadController::class, 'index']);

Route::post('upload', [AjaxUploadController::class, 'store']);

Create Controller By Artisan Command

Now, lets create a controller for simple image uploading. Create a controller named AjaxUploadController using command given below –

php artisan make:controller AjaxUploadController

1	php artisan make:controller AjaxUploadController

Once the above command executed, it will create a controller file AjaxUploadController.php in app/Http/Controllers/ directory. Open the AjaxUploadController.php file and put the following code in it.

app/Http/Controllers/AjaxUploadController.php

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Models\Photo;
 
class AjaxUploadController extends Controller
{
     public function index()
    {
        return view('image-upload-preview-form');
    }
 
    public function store(Request $request)
    {
         
        $validatedData = $request->validate([
         'image' => 'required|image|mimes:jpg,png,jpeg,gif,svg|max:2048',
 
        ]);
 
        $name = $request->file('image')->getClientOriginalName();
 
        $path = $request->file('image')->store('public/images');
 
 
        $save = new Photo;
 
        $save->name = $name;
        $save->path = $path;
 
        $save->save();
 
        return response()->json($path);
 
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\Photo;

class AjaxUploadController extends Controller

{

public function index()

{

return view('image-upload-preview-form');

}

public function store(Request $request)

{

$validatedData = $request->validate([

'image' => 'required|image|mimes:jpg,png,jpeg,gif,svg|max:2048',

]);

$name = $request->file('image')->getClientOriginalName();

$path = $request->file('image')->store('public/images');

$save = new Photo;

$save->name = $name;

$save->path = $path;

$save->save();

return response()->json($path);

}

Note:- Before uploading any file make sure you have created following directory in the storage/app/public folder called images.

Create Ajax Image Upload Form

In this step, we will create view/blade file to generate and display Image Upload Form. Lets create a blade file “image-upload-preview-form.blade.php” in “resources/views/” directory and put the following code in it respectively.

resources/views/image-upload-preview-form.blade.php

<!DOCTYPE html>
<html>
<head>
<title>Laravel 9 Ajax Image Upload With Preview</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<div class="container mt-4">
<h2 class="text-center">Image Upload with Preview using jQuery Ajax in Laravel 9</h2>
<form method="POST" enctype="multipart/form-data" id="image-upload" action="javascript:void(0)" >
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="file" name="image" placeholder="Choose image" id="image">
</div>
</div>
<div class="col-md-12 mb-2">
<img id="preview-image-before-upload" src="images/product_image_not_found.gif"
alt="preview image" style="max-height: 250px;">
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-primary" id="submit">Submit</button>
</div>
</div>     
</form>
</div>
<script type="text/javascript">
$(document).ready(function (e) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#image').change(function(){
let reader = new FileReader();
reader.onload = (e) => { 
$('#preview-image-before-upload').attr('src', e.target.result); 
}
reader.readAsDataURL(this.files[0]); 
});
$('#image-upload').submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
type:'POST',
url: "{{ url('upload')}}",
data: formData,
cache:false,
contentType: false,
processData: false,
success: (data) => {
this.reset();
alert('Image has been uploaded using jQuery ajax successfully');
},
error: function(data){
console.log(data);
}
});
});
});
</script>
</div>  
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Laravel 9 Ajax Image Upload With Preview</title>

</head>

<body>

<h2 class="text-center">Image Upload with Preview using jQuery Ajax in Laravel 9</h2>

</div>

<img id="preview-image-before-upload" src="images/product_image_not_found.gif"

alt="preview image" style="max-height: 250px;">

</div>

<button type="submit" class="btn btn-primary" id="submit">Submit</button>

</div>

</form>

</div>

$(document).ready(function (e) {

$.ajaxSetup({

headers: {

'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

}

});

$('#image').change(function(){

let reader = new FileReader();

reader.onload = (e) => {

$('#preview-image-before-upload').attr('src', e.target.result);

}

reader.readAsDataURL(this.files[0]);

});

$('#image-upload').submit(function(e) {

e.preventDefault();

var formData = new FormData(this);

$.ajax({

type:'POST',

url: "{{ url('upload')}}",

data: formData,

cache:false,

contentType: false,

processData: false,

success: (data) => {

this.reset();

alert('Image has been uploaded using jQuery ajax successfully');

error: function(data){

console.log(data);

}

});

</script>

</div>

</body>

</html>

Create Images Directory inside Storage/app/public

Before uploading any file make sure you have created following directory in the storage/app/public folder called images.

Start Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://localhost:8000/image-preview

1	http://localhost:8000/image-preview

Laravel 9 Image Upload with Preview Example

In this Laravel 9 Image Upload with Preview example, we will learn how to upload image along with preview before upload in laravel 9. In this laravel 9 image upload example I’ll show you how to validate upload image into folder and then save it into database. In this tutorial before saving image into database we will show preview of the images and then save it into directory. Before uploading the image we will display preview of the image. After successfully image upload into the database and folder we will display success message on the screen.

Laravel 9 Image Upload with Preview

In this step by step Laravel 9 Image Upload with Preview tutorial I’ll demonstrate how to upload image in laravel 9 with preview. I’ll also show you how to upload image in laravel 9 with preview. Please follow the steps given below:

Install Laravel 9
Setup Database with App
Create Model & Migration
Create Routes
Generate Controller By Artisan Command
Create Blade View
Implement javascript Code to Show Image Preview
Create Images Directory inside Storage/app/public
Run Development Server

Install Laravel 9

First of all we need to create a fresh laravel project, download and install Laravel 9 using the below command

composer create-project --prefer-dist laravel/laravel lara9blog

1	composer create-project --prefer-dist laravel/laravel lara9blog

Configure Database In .env file

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=lara9blog
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=lara9blog

DB_USERNAME=root

DB_PASSWORD=

Create Model & Migration

Now, we have to define table schema for photos table. Open terminal and let’s run the following command to generate a migration along with model file to create photos table in our database.

php artisan make:model Photo -m

1	php artisan make:model Photo -m

Once this command is executed you will find a migration file created under “database/migrations”. lets open migration file and put following code in it –

public function up()
{
    Schema::create('photos', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('path');
        $table->timestamps();
    });
}

public function up()

{

Schema::create('photos', function (Blueprint $table) {

$table->id();

$table->string('name');

$table->string('path');

$table->timestamps();

});

}

Now, run following command to migrate database schema.

php artisan migrate

1	php artisan migrate

After, the migration executed successfully the photos table will be created in database.

Create Routes

After this, we need to add following routes in “routes/web.php” file along with a resource route. Lets open “routes/web.php” file and add following route.

routes/web.php

use App\Http\Controllers\ImageUploadController;
 
Route::get('image-upload-preview', [ImageUploadController::class, 'index']);
Route::post('upload-image', [ImageUploadController::class, 'store']);

use App\Http\Controllers\ImageUploadController;

Route::get('image-upload-preview', [ImageUploadController::class, 'index']);

Route::post('upload-image', [ImageUploadController::class, 'store']);

Create Controller By Artisan Command

Now, lets create a controller for simple image uploading. Create a controller named ImageUploadController using command given below –

php artisan make:controller ImageUploadController

1	php artisan make:controller ImageUploadController

Once the above command executed, it will create a controller file ImageUploadController.php in app/Http/Controllers/ directory. Open the ImageUploadController.php file and put the following code in it.

app/Http/Controllers/ImageUploadController.php

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Models\Photo;
 
class ImageUploadController extends Controller
{
     public function index()
    {
        return view('image-upload');
    }
 
    public function store(Request $request)
    {
         
        $validatedData = $request->validate([
         'image' => 'required|image|mimes:jpg,png,jpeg,gif,svg|max:2048',
 
        ]);
 
        $name = $request->file('image')->getClientOriginalName();
 
        $path = $request->file('image')->store('public/images');
 
 
        $save = new Photo;
 
        $save->name = $name;
        $save->path = $path;
 
        return redirect('image-upload-preview')->with('status', 'Image uploaded successfully');
 
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\Photo;

class ImageUploadController extends Controller

{

public function index()

{

return view('image-upload');

}

public function store(Request $request)

{

$validatedData = $request->validate([

'image' => 'required|image|mimes:jpg,png,jpeg,gif,svg|max:2048',

]);

$name = $request->file('image')->getClientOriginalName();

$path = $request->file('image')->store('public/images');

$save = new Photo;

$save->name = $name;

$save->path = $path;

return redirect('image-upload-preview')->with('status', 'Image uploaded successfully');

}

Note:- Before uploading any file make sure you have created following directory in the storage/app/public folder called images.

Create Blade View

In this step, we will create view/blade file to generate and display Image Upload Form. Lets create a blade file “image-upload.blade.php” in “resources/views/” directory and put the following code in it respectively.

resources/views/image-upload.blade.php

<!DOCTYPE html>
<html>
<head>
  <title>Laravel 9 Image Upload With Preview</title>
 
  <meta name="csrf-token" content="{{ csrf_token() }}">
 
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
 
 
</head>
<body>
 
<div class="container mt-4">
 
  <h2 class="text-center">Image Upload with Preview in Laravel 9</h2>
 
      <form method="POST" enctype="multipart/form-data" id="upload-image" action="{{ url('upload-image') }}" >
                 
          <div class="row">
 
              <div class="col-md-12">
                  <div class="form-group">
                      <input type="file" name="image" placeholder="Choose image" id="image">
                        @error('image')
                        <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
                        @enderror
                  </div>
              </div>
 
              <div class="col-md-12 mb-2">
                  <img id="preview-image-before-upload" src="https://www.riobeauty.co.uk/images/product_image_not_found.gif"
                      alt="preview image" style="max-height: 250px;">
              </div>
                 
              <div class="col-md-12">
                  <button type="submit" class="btn btn-primary" id="submit">Submit</button>
              </div>
          </div>     
      </form>
</div>
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 
<script type="text/javascript">
      
$(document).ready(function (e) {
 
   
   $('#image').change(function(){
            
    let reader = new FileReader();
 
    reader.onload = (e) => { 
 
      $('#preview-image-before-upload').attr('src', e.target.result); 
    }
 
    reader.readAsDataURL(this.files[0]); 
   
   });
   
});
 
</script>
</div>  
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Laravel 9 Image Upload With Preview</title>

</head>

<body>

<h2 class="text-center">Image Upload with Preview in Laravel 9</h2>

@error('image')

<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>

@enderror

</div>

<img id="preview-image-before-upload" src="https://www.riobeauty.co.uk/images/product_image_not_found.gif"

alt="preview image" style="max-height: 250px;">

</div>

<button type="submit" class="btn btn-primary" id="submit">Submit</button>

</div>

</form>

</div>

$(document).ready(function (e) {

$('#image').change(function(){

let reader = new FileReader();

reader.onload = (e) => {

$('#preview-image-before-upload').attr('src', e.target.result);

}

reader.readAsDataURL(this.files[0]);

});

</script>

</div>

</body>

</html>

Create Images Directory inside Storage/app/public

Before uploading any file make sure you have created following directory in the storage/app/public folder called images.

$path = $request->file('image')->store('public/images');

1	$path = $request->file('image')->store('public/images');

Start Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://localhost:8000/image-upload-preview

1	http://localhost:8000/image-upload-preview

Laravel 9 Ajax Form Submit Using jQuery

In this Laravel 9 Ajax Form Submit Using jQuery tutorial I will show you how to submit form data using jquery ajax in laravel 9. In this tutorial you will learn to validate and submit form data without reloading or refreshing using jquery ajax in laravel. In this article I will share example to validate and submit laravel form using jquery ajax. In Laravel, when we want to submit form data using ajax we must have to incorporate csrf token with form data and set X-CSRF-TOKEN request header with ajax form submit request.

Laravel 9 Ajax Post Form Data With Validation

In this example we will create a contact us form and submit form data on controller using jQuery ajax. We will also validate form data before submit to controller using jQuery validation in laravel 9.

Laravel 9 Ajax Form Submit Using jQuery

In this step by step tutorial I’ll guide you through the process to submit form using jquery ajax with validation laravel 9. Please follow the steps given below:

Download Laravel 9 Application
Setup Database with App
Create Contact us Model & Migration
Create Contact us Routes
Create Contact us Controller By Artisan Command
Create Contact us form in Blade File
Run Development Server

Install Laravel 9

First of all we need to create a fresh laravel project, download and install Laravel 9 using the below command

composer create-project --prefer-dist laravel/laravel larablog

1	composer create-project --prefer-dist laravel/laravel larablog

Configure Database In .env file

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=larablog
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=larablog

DB_USERNAME=root

DB_PASSWORD=

Create Model & Migration

Now, in this step we will create model and migration file for form. Please run the following command:

php artisan make:model Contact -m

1	php artisan make:model Contact -m

Once above command is executed there will be a migration file created inside database/migrations/ directory, just open create_contacts_table.php migration file and update the function up() method as following:

public function up()
{
    Schema::create('contacts', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('email');
        $table->text('message');
        $table->timestamps();
    });
}

public function up()

{

Schema::create('contacts', function (Blueprint $table) {

$table->id();

$table->string('name');

$table->string('email');

$table->text('message');

$table->timestamps();

});

}

Now, run the migration to create database table using following artisan command:

php artisan migrate

1	php artisan migrate

Create Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

use App\Http\Controllers\AjaxContactController;
 
Route::get('ajax-form', [AjaxContactController::class, 'index']);
Route::post('store-data', [AjaxContactController::class, 'store']);

use App\Http\Controllers\AjaxContactController;

Route::get('ajax-form', [AjaxContactController::class, 'index']);

Route::post('store-data', [AjaxContactController::class, 'store']);

Create Contact us Controller

Next, we have to create a controller to display form and to handle form validation and submit operations. Lets Create a controller named AjaxContactController using command given below –

php artisan make:controller AjaxContactController

1	php artisan make:controller AjaxContactController

Open the AjaxContactController.php file and put the following code in it.

app/Http/Controllers//AjaxContactController.php

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Models\Contact;
 
 
class AjaxContactController extends Controller
{
    public function index()
    {
        return view('ajax-contact-us-form');
    }
 
    public function store(Request $request)
    {
         
        $validatedData = $request->validate([
          'name' => 'required',
          'email' => 'required|unique:employees|max:255',
          'message' => 'required'
        ]);
 
        $save = new Contact;
 
        $save->name = $request->name;
        $save->email = $request->email;
        $save->message = $request->message;
 
        $emp->save();
 
        return redirect('form')->with('status', 'Ajax Form Data Has Been validated and store into database');
 
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\Contact;

class AjaxContactController extends Controller

{

public function index()

{

return view('ajax-contact-us-form');

}

public function store(Request $request)

{

$validatedData = $request->validate([

'name' => 'required',

'email' => 'required|unique:employees|max:255',

'message' => 'required'

]);

$save = new Contact;

$save->name = $request->name;

$save->email = $request->email;

$save->message = $request->message;

$emp->save();

return redirect('form')->with('status', 'Ajax Form Data Has Been validated and store into database');

}

Create Form Blade File

Now, create form blade view file to display form and submit to database. So, Go to resources/views and create ajax-contact-us-form.blade.php and update the following code into it:

<!DOCTYPE html>
<html>
<head>
<title>Laravel 9 Ajax Form Submit using jQuery</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<style>
.error{
color: #FF0000; 
}
</style>
</head>
<body>
<div class="container mt-4">
<div class="card">
<div class="card-header text-center font-weight-bold">
<h2>Laravel 8 Ajax Post Form Data on Controller with jQuery Validation Example</h2>
</div>
<div class="card-body">
<form name="contactUsForm" id="contactUsForm" method="post" action="javascript:void(0)">
@csrf
<div class="form-group">
<label for="exampleInputEmail1">Name</label>
<input type="text" id="name" name="name" class="form-control">
</div>          
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" id="email" name="email" class="form-control">
</div>           
<div class="form-group">
<label for="exampleInputEmail1">Message</label>
<textarea name="message" id="message" class="form-control"></textarea>
</div>
<button type="submit" class="btn btn-primary" id="submit">Submit</button>
</form>
</div>
</div>
</div>    
<script>
if ($("#contactUsForm").length > 0) {
$("#contactUsForm").validate({
rules: {
name: {
required: true,
maxlength: 50
},
email: {
required: true,
maxlength: 50,
email: true,
},  
message: {
required: true,
maxlength: 300
},   
},
messages: {
name: {
required: "Please enter name",
maxlength: "Your name maxlength should be 50 characters long."
},
email: {
required: "Please enter valid email",
email: "Please enter valid email",
maxlength: "The email name should less than or equal to 50 characters",
},   
message: {
required: "Please enter message",
maxlength: "Your message name maxlength should be 300 characters long."
},
},
submitHandler: function(form) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#submit').html('Please Wait...');
$("#submit"). attr("disabled", true);
$.ajax({
url: "{{url('store-data')}}",
type: "POST",
data: $('#contactUsForm').serialize(),
success: function( response ) {
$('#submit').html('Submit');
$("#submit"). attr("disabled", false);
alert('Ajax form has been submitted successfully');
document.getElementById("contactUsForm").reset(); 
}
});
}
})
}
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Laravel 9 Ajax Form Submit using jQuery</title>

<style>

.error{

color: #FF0000;

}

</style>

</head>

<body>

<h2>Laravel 8 Ajax Post Form Data on Controller with jQuery Validation Example</h2>

</div>

@csrf

</div>

<label for="exampleInputEmail1">Email</label>

</div>

<label for="exampleInputEmail1">Message</label>

</div>

<button type="submit" class="btn btn-primary" id="submit">Submit</button>

</form>

</div>

if ($("#contactUsForm").length > 0) {

$("#contactUsForm").validate({

rules: {

required: true,

maxlength: 50

email: {

required: true,

maxlength: 50,

email: true,

message: {

required: true,

maxlength: 300

messages: {

required: "Please enter name",

maxlength: "Your name maxlength should be 50 characters long."

email: {

required: "Please enter valid email",

email: "Please enter valid email",

maxlength: "The email name should less than or equal to 50 characters",

message: {

required: "Please enter message",

maxlength: "Your message name maxlength should be 300 characters long."

submitHandler: function(form) {

$.ajaxSetup({

headers: {

'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

}

});

$('#submit').html('Please Wait...');

$("#submit"). attr("disabled", true);

$.ajax({

url: "{{url('store-data')}}",

type: "POST",

data: $('#contactUsForm').serialize(),

success: function( response ) {

$('#submit').html('Submit');

$("#submit"). attr("disabled", false);

alert('Ajax form has been submitted successfully');

document.getElementById("contactUsForm").reset();

}

});

}

})

}

</script>

</body>

</html>

Start Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://localhost:8000/ajax-form

1	http://localhost:8000/ajax-form

Laravel 9 Client Side Form Validation Using jQuery

In this Laravel 9 Client Side Form Validation Using jQuery tutorial I will show you how to apply client side form validation using jquery form validation plugin. In this tutorial you will learn to implement client side form validation using jquery form validation plugin in laravel 9

Laravel 9 Client Side Form Validation

In this article I’ll share example to implement client side validation in laravel 9 application using Jquery Form Validation plugin. In this tutorial, you will learn to validate the form data in the client side before it is submitted to server. When the form data satisfies the validation it will submitted to server for further processing.

Laravel 9 Client Side Form Validation Using jQuery

In this step by step tutorial I will demonstrate you with example how to implement client side form validation in laravel 9 application using jQuery. Please follow the instruction given below:

Install Laravel 9
Setup Database
Make Route
Create Controller & Methods
Create Blade View
Start Development Server

Install Laravel 9

First of all we need to create a fresh laravel project, download and install Laravel 9 using the below command

composer create-project --prefer-dist laravel/laravel larablog

1	composer create-project --prefer-dist laravel/laravel larablog

Database Configuration

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=larablog
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=larablog

DB_USERNAME=root

DB_PASSWORD=

Make Route

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

use App\Http\Controllers\HomeController;


Route::get('jquery-validation', [HomeController::class, 'jqueryValidation']);

use App\Http\Controllers\HomeController;

Route::get('jquery-validation', [HomeController::class, 'jqueryValidation']);

Create Controller

Now, lets create a controller named HomeController using command given below –

php artisan make:controller HomeController

1	php artisan make:controller HomeController

After successfully create controller go to app/controllers/HomeController.php and put the below code :

<?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;

class HomeController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function jqueryValidation()
    {
        return view('jqueryValidation');
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller

{

/**

* Display a listing of the resource.

* @return \Illuminate\Http\Response

public function jqueryValidation()

{

return view('jqueryValidation');

}

Create Blade view

In this step, we will create a blade file. Go to app/resources/views and create one file name jqueryValidation.blade.php.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Client Side Form Validation using jQuery in Laravel 9</title>
    <link rel="stylesheet" href="{{asset('css/app.css')}}">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">  
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
</head>
<style type="text/css">
    body{
        background: #ddd;
    }
    .container{
        background: #fff;
        margin-top:100px;
    }
    .error{
        color:red;
    }
</style>
<body>
    <div class="container">
        <h2 class="text-center">Client Side Form Validation using jQuery in Laravel 9</h2><br/>
        <form method="" action="" id="form">
            @csrf
            <div class="row">
                <div class="col-md-3"></div>
                <div class="form-group col-md-6">
                    <label for="Name">Name:</label>
                    <input type="text" class="form-control" name="name">
                </div>
            </div>
            <div class="row">
                <div class="col-md-3"></div>
                <div class="form-group col-md-6">
                    <label for="Email">Email:</label>
                    <input type="text" class="form-control" name="email">
                </div>
            </div>
            <div class="row">
                <div class="col-md-3"></div>
                <div class="form-group col-md-6">
                    <label for="Number">Phone Number:</label>
                    <input type="text" class="form-control" name="number">
                </div>
            </div>
            <div class="row">
                <div class="col-md-3"></div>
                <div class="form-group col-md-6" style="margin-top:10px">
                    <button type="submit" class="btn btn-success">Submit</button>
                </div>
            </div>
        </form>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script>
    $(document).ready(function () {
        $('#form').validate({ 
            rules: {
                name: {
                    required: true
                },
                email: {
                    required: true,
                    email: true
                },
                number: {
                    required: true,
                    digits: true
                   
                },
            },
            errorElement: 'span',
                errorPlacement: function (error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function (element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });
    });
</script>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Client Side Form Validation using jQuery in Laravel 9</title>

</head>

body{

background: #ddd;

}

.container{

background: #fff;

margin-top:100px;

}

.error{

color:red;

}

</style>

<body>

<h2 class="text-center">Client Side Form Validation using jQuery in Laravel 9</h2><br/>

@csrf

</div>

<label for="Email">Email:</label>

</div>

<label for="Number">Phone Number:</label>

</div>

<button type="submit" class="btn btn-success">Submit</button>

</div>

</form>

</div>

</body>

$(document).ready(function () {

$('#form').validate({

rules: {

required: true

email: {

required: true,

email: true

number: {

required: true,

digits: true

errorElement: 'span',

errorPlacement: function (error, element) {

error.addClass('invalid-feedback');

element.closest('.form-group').append(error);

highlight: function (element, errorClass, validClass) {

$(element).addClass('is-invalid');

unhighlight: function (element, errorClass, validClass) {

$(element).removeClass('is-invalid');

}

});

</script>

</html>

Start Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://localhost:8000/jquery-validation

1	http://localhost:8000/jquery-validation

Laravel 9 File Upload Validation Example Tutorial

In this Laravel 9 file Upload with validation example, we will learn how to upload and validate file before upload in laravel 9. In this laravel 9 file upload example, I’ll show you how to validate and upload file into folder and then save it into database. In this tutorial before saving file into database we will validate file and then save it into directory. Before uploading the files we will perform server side validation. After successfully file upload into the database and folder we will display success message on the screen.

Laravel 9 File Upload Validation Example Tutorial

Step 1 – Download Laravel 9 Application
Step 2 – Database Configuration
Step 3 – Build File Model & Migration
Step 4 – Create Routes
Step 5 – Build Upload Controller By Artisan Command
Step 6 – Create File Upload Form
Step 7 – Create Directory inside Storage/app/public
Step 8 – Run Development Server

Step 1 – Download Laravel 9 Application

First of all we need to create a fresh laravel project, download and install Laravel 9 using the below command

composer create-project --prefer-dist laravel/laravel LaravelFileUpload

1	composer create-project --prefer-dist laravel/laravel LaravelFileUpload

Step 2 – Database Configuration

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database-name
DB_USERNAME=database-user-name
DB_PASSWORD=database-password

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=database-name

DB_USERNAME=database-user-name

DB_PASSWORD=database-password

Step 3 – Build File Model & Migration

Now, in this step we will create model and migration file. Please run the following command:

php artisan make:model File -m

1	php artisan make:model File -m

After that, open create_files_table.php file inside /database/migrations/ directory. And put the following code in it:

public function up()
{
    Schema::create('files', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('path');
        $table->timestamps();
    });
}

public function up()

{

Schema::create('files', function (Blueprint $table) {

$table->id();

$table->string('name');

$table->string('path');

$table->timestamps();

});

}

Now, in this step we will create model and migration file. Please run the following command:

php artisan migrate

1	php artisan migrate

Step 4 – Create Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

use App\Http\Controllers\FileUploadController;
 
Route::get('file-upload', [FileUploadController::class, 'index']);
Route::post('store', [FileUploadController::class, 'store']);

use App\Http\Controllers\FileUploadController;

Route::get('file-upload', [FileUploadController::class, 'index']);

Route::post('store', [FileUploadController::class, 'store']);

Step 5 – Build File Upload Controller By Artisan Command

Now, lets create a controller named FileUploadController using command given below –

php artisan make:controller FileUploadController

1	php artisan make:controller FileUploadController

After that, go to app/http/controllers and open FileUploadController.php file. And put the following code into it:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Models\File;
 
class FileUploadController extends Controller
{
     public function index()
    {
        return view('file-upload');
    }
 
    public function store(Request $request)
    {
         
        $validatedData = $request->validate([
         'file' => 'required|csv,txt,xlx,xls,pdf|max:2048',
 
        ]);
 
        $name = $request->file('file')->getClientOriginalName();
 
        $path = $request->file('file')->store('public/files');
 
 
        $save = new File;
 
        $save->name = $name;
        $save->path = $path;
 
        return redirect('file-upload')->with('status', 'File Has been uploaded successfully in laravel 8');
 
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\File;

class FileUploadController extends Controller

{

public function index()

{

return view('file-upload');

}

public function store(Request $request)

{

$validatedData = $request->validate([

'file' => 'required|csv,txt,xlx,xls,pdf|max:2048',

]);

$name = $request->file('file')->getClientOriginalName();

$path = $request->file('file')->store('public/files');

$save = new File;

$save->name = $name;

$save->path = $path;

return redirect('file-upload')->with('status', 'File Has been uploaded successfully in laravel 8');

}

The following line of code will upload an file into the files directory:

1
$path = $request->file('file')->store('public/files');

1 2	1 $path = $request->file('file')->store('public/files');

Step 6 – Create File Upload Form

Go to resources/views and create file-upload.blade.php and update the following code into it:

<!DOCTYPE html>
<html>
<head>
  <title>Laravel 9 File Upload Example</title>
 
  <meta name="csrf-token" content="{{ csrf_token() }}">
 
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
 
 
</head>
<body>
 
<div class="container mt-4">
 
  <h2 class="text-center">File Upload in Laravel 8</h2>
 
      <form method="POST" enctype="multipart/form-data" id="upload-file" action="{{ url('store') }}" >
                 
          <div class="row">
 
              <div class="col-md-12">
                  <div class="form-group">
                      <input type="file" name="file" placeholder="Choose file" id="file">
                        @error('file')
                        <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
                        @enderror
                  </div>
              </div>
                 
              <div class="col-md-12">
                  <button type="submit" class="btn btn-primary" id="submit">Submit</button>
              </div>
          </div>     
      </form>
</div>
 
</div>  
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Laravel 9 File Upload Example</title>

</head>

<body>

<h2 class="text-center">File Upload in Laravel 8</h2>

@error('file')

<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>

@enderror

</div>

<button type="submit" class="btn btn-primary" id="submit">Submit</button>

</div>

</form>

</div>

</body>

</html>

The following below code will display the validation error message on the blade view file:

@error('file')
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
@enderror

@error('file')

<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>

@enderror

Step 7 – Create Directory inside Storage/app/public

Now, create directory name files inside storage/app/public directory. Because the following line of code will upload an file into the files directory, which is located inside storage/app/public/ directory:

$path = $request->file('file')->store('public/files');

1	$path = $request->file('file')->store('public/files');

Step 8 – Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://127.0.0.1:8000/file-upload

1	http://127.0.0.1:8000/file-upload

Laravel 9 Upload Image Example Tutorial

In this Laravel 9 Upload Image Example Tutorial, we will learn how to upload and save image in laravel 9. In this Laravel 9 Image Upload Example Tutorial, I’ll show you how to validate upload image into folder and then save it into database. In this tutorial before saving image into database we will validate image and then save it into directory using. Before uploading the image we will perform server side validation. You will also learn how to validate image mime type, size, dimension, etc on laravel controller by using laravel validation rules. After successfully image upload into the database and folder we will display success message on the screen.

Laravel 9 Upload Image Example Tutorial

In this step by step tutorial I’ll guide you through the process to upload image on public storage and directory in laravel 9:

Download Laravel 9 Application
Setup Database with App
Create Model & Migration
Create Routes
Create Controller By Artisan Command
Create Blade View
Create Images Directory inside Storage/app/public
Run Development Server

Install Laravel 9

First of all we need to create a fresh laravel project, download and install Laravel 9 using the below command

composer create-project --prefer-dist laravel/laravel SimpleImageUpload

1	composer create-project --prefer-dist laravel/laravel SimpleImageUpload

Configure Database In .env file

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=SimpleImageUpload
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=SimpleImageUpload

DB_USERNAME=root

DB_PASSWORD=

Create Model & Migration

Now, we have to define table schema for photos table. Open terminal and let’s run the following command to generate a migration along with model file to create photos table in our database.

php artisan make:model Photo -m

1	php artisan make:model Photo -m

Once this command is executed you will find a migration file created under “database/migrations”. lets open migration file and put following code in it –

public function up()
{
    Schema::create('photos', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('path');
        $table->timestamps();
    });
}

public function up()

{

Schema::create('photos', function (Blueprint $table) {

$table->id();

$table->string('name');

$table->string('path');

$table->timestamps();

});

}

Now, run following command to migrate database schema.

php artisan migrate

1	php artisan migrate

After, the migration executed successfully the photos table will be created in database.

Create Routes

After this, we need to add following routes in “routes/web.php” file along with a resource route. Lets open “routes/web.php” file and add following route.

routes/web.php

use App\Http\Controllers\UploadImageController;
 
Route::get('upload-image', [UploadImageController::class, 'index']);
Route::post('save', [UploadImageController::class, 'save']);

use App\Http\Controllers\UploadImageController;

Route::get('upload-image', [UploadImageController::class, 'index']);

Route::post('save', [UploadImageController::class, 'save']);

Create Controller By Artisan Command

Now, lets create a controller for simple image uploading. Create a controller named UploadImageController using command given below –

php artisan make:controller <strong>UploadImageController</strong>

1	php artisan make:controller <strong>UploadImageController</strong>

Once the above command executed, it will create a controller file UploadImageController.php in app/Http/Controllers/ directory. Open the UploadImageController.php file and put the following code in it.

app/Http/Controllers/UploadImageController.php

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Models\Image;
 
 
class UploadImageController extends Controller
{
    public function index()
    {
        return view('image');
    }
 
    public function save(Request $request)
    {
         
        $validatedData = $request->validate([
         'image' => 'required|image|mimes:jpg,png,jpeg,gif,svg|max:2048',
 
        ]);
 
        $name = $request->file('image')->getClientOriginalName();
 
        $path = $request->file('image')->store('public/images');
 
 
        $save = new Photo;
 
        $save->name = $name;
        $save->path = $path;
 
        $save->save();
 
        return redirect('upload-image')->with('status', 'Image Has been uploaded');
 
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\Image;

class UploadImageController extends Controller

{

public function index()

{

return view('image');

}

public function save(Request $request)

{

$validatedData = $request->validate([

'image' => 'required|image|mimes:jpg,png,jpeg,gif,svg|max:2048',

]);

$name = $request->file('image')->getClientOriginalName();

$path = $request->file('image')->store('public/images');

$save = new Photo;

$save->name = $name;

$save->path = $path;

$save->save();

return redirect('upload-image')->with('status', 'Image Has been uploaded');

}

Note:- Before uploading any file make sure you have created following directory in the storage/app/public folder called images.

Create Blade View

In this step, we will create view/blade file to generate and display Image Upload Form. Lets create a blade file “image.blade.php” in “resources/views/” directory and put the following code in it respectively.

resources/views/image.blade.php

<!DOCTYPE html>
<html>
<head>
  <title>Laravel 9 Uploading Image</title>
 
  <meta name="csrf-token" content="{{ csrf_token() }}">
 
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
 
</head>
<body>
 
<div class="container mt-5">
 
  @if(session('status'))
    <div class="alert alert-success">
        {{ session('status') }}
    </div>
  @endif
 
  <div class="card">
 
    <div class="card-header text-center font-weight-bold">
      <h2>Laravel 9 Upload Image Tutorial</h2>
    </div>
 
    <div class="card-body">
        <form method="POST" enctype="multipart/form-data" id="upload-image" action="{{ url('save') }}" >
                   
            <div class="row">
 
                <div class="col-md-12">
                    <div class="form-group">
                        <input type="file" name="image" placeholder="Choose image" id="image">
                    @error('image')
                        <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
                    @enderror
                    </div>
                </div>
                   
                <div class="col-md-12">
                    <button type="submit" class="btn btn-primary" id="submit">Submit</button>
                </div>
            </div>     
        </form>
 
    </div>
 
  </div>
 
</div>  
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Laravel 9 Uploading Image</title>

</head>

<body>

@if(session('status'))

</div>

@endif

<h2>Laravel 9 Upload Image Tutorial</h2>

</div>

@error('image')

<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>

@enderror

</div>

<button type="submit" class="btn btn-primary" id="submit">Submit</button>

</div>

</form>

</div>

</body>

</html>

Create Images Directory inside Storage/app/public

Before uploading any file make sure you have created following directory in the storage/app/public folder called images.

$path = $request->file('image')->store('public/images');

1	$path = $request->file('image')->store('public/images');

Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://localhost:8000/image-upload

1	http://localhost:8000/image-upload

Laravel 9 Form Validation Tutorial with Example

In this Laravel 9 form validation example tutorial I’ll show you how to validate form data in laravel 9 application. In this laravel form validation tutorial you will learn to validate laravel form with built in laravel validation available in laravel. In this Laravel 9 form validation tutorial I’ll share various validation implementation and use case.

Laravel 9 Form Validation Tutorial

Generally Form validation is performed at server side, but can be performed at both the server and client side. In this laravel form validation tutorial we will be learning about laravel server side validations. In this tutorial, I’ll show you how to define laravel validation rules, how to validate form input and to display validation errors.

Laravel 9 comes many built-in validation rules that can be easily implemented. In this example, we have used some of following validation rules –

required:- It set input field is required.
min:- Validate minimum character length.
max:- Validate maximum character length.
email: It set input must be a valid email address.
unique: It checks for unique value against a database column.
numeric: Input value must numeric.
same:- It validates two input fields value must be same.

Laravel 9 Form Validation Example

In this step by step tutorial I’ll show you how to implement validations in laravel form.

Download Laravel 9 Application
Setup Database with App
Create Model & Migration
Create Form Routes
Create Form Controller By Artisan Command
Create Form Blade File
Run Development Server

Install Laravel 9

First of all we need to create a fresh laravel project, download and install Laravel 9 using the below command

composer create-project --prefer-dist laravel/laravel larablog

1	composer create-project --prefer-dist laravel/laravel larablog

Configure Database In .env file

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=larablog
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=larablog

DB_USERNAME=root

DB_PASSWORD=

Create Model & Migration

Now, in this step we will create model and migration file for form. Please run the following command:

php artisan make:model Employee -m

1	php artisan make:model Employee -m

Once above command is executed there will be a migration file created inside database/migrations/ directory, just open create_employees_table.php migration file and update the function up() method as following:

public function up()
{
    Schema::create('employees', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('email');
        $table->string('contact_no');
        $table->string('age');
        $table->timestamps();
    });
}

public function up()

{

Schema::create('employees', function (Blueprint $table) {

$table->id();

$table->string('name');

$table->string('email');

$table->string('contact_no');

$table->string('age');

$table->timestamps();

});

}

Now, run the migration to create database table using following artisan command:

php artisan migrate

1	php artisan migrate

Create Form Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

use App\Http\Controllers\FormController;
 
Route::get('form', [FormController::class, 'index']);
Route::post('store-form', [FormController::class, 'store']);

use App\Http\Controllers\FormController;

Route::get('form', [FormController::class, 'index']);

Route::post('store-form', [FormController::class, 'store']);

Create Form Controller By Artisan Command

Next, we have to create a controller to display form and to handle form validation and submit operations. Lets Create a controller named FormController using command given below –

php artisan make:controller FormController

1	php artisan make:controller FormController

Open the FormValidationController.php file and put the following code in it.

app/Http/Controllers//FormController.php

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Models\Employee;
 
 
class FormController extends Controller
{
    public function index()
    {
        return view('form');
    }
 
    public function store(Request $request)
    {
         
        $validatedData = $request->validate([
          'name' => 'required',
          'email' => 'required|unique:employees|max:255',
          'age' => 'required',
          'contact_no' => 'required|unique:employees|max:255',
        ]);
 
        $emp = new Employee;
 
        $emp->name = $request->name;
        $emp->email = $request->email;
        $emp->age = $request->age;
        $emp->contact_no = $request->contact_no;
 
        $emp->save();
 
        return redirect('form')->with('status', 'Form Data Has Been validated and insert');
 
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\Employee;

class FormController extends Controller

{

public function index()

{

return view('form');

}

public function store(Request $request)

{

$validatedData = $request->validate([

'name' => 'required',

'email' => 'required|unique:employees|max:255',

'age' => 'required',

'contact_no' => 'required|unique:employees|max:255',

]);

$emp = new Employee;

$emp->name = $request->name;

$emp->email = $request->email;

$emp->age = $request->age;

$emp->contact_no = $request->contact_no;

$emp->save();

return redirect('form')->with('status', 'Form Data Has Been validated and insert');

}

Create Form Blade File

Now, create form blade view file to display form and submit to database. So, Go to resources/views and create form.blade.php and update the following code into it:

<!DOCTYPE html>
<html>
<head>
<title>Laravel 9 Example Form Validation</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
@if(session('status'))
<div class="alert alert-success">
{{ session('status') }}
</div>
@endif
<div class="card">
<div class="card-header text-center font-weight-bold">
<h2>Laravel 9 Form Validation Tutorial</h2>
</div>
<div class="card-body">
<form name="employee" id="employee" method="post" action="{{url('store-form')}}">
@csrf
<div class="form-group">
<label for="exampleInputEmail1">Name</label>
<input type="text" id="name" name="name" class="@error('name') is-invalid @enderror form-control">
@error('name')
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
@enderror
</div>        
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" id="email" name="email" class="@error('email') is-invalid @enderror form-control">
@error('email')
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
@enderror
</div>        
<div class="form-group">
<label for="exampleInputEmail1">Age</label>
<input type="number" id="age" name="age" class="@error('age') is-invalid @enderror form-control">
@error('age')
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
@enderror
</div>        
<div class="form-group">
<label for="exampleInputEmail1">Contact No</label>
<input type="number" id="contact_no" name="contact_no" class="@error('contact_no') is-invalid @enderror form-control">
@error('contact_no')
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
@enderror
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>  
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Laravel 9 Example Form Validation</title>

</head>

<body>

@if(session('status'))

</div>

@endif

<h2>Laravel 9 Form Validation Tutorial</h2>

</div>

@csrf

@error('name')

<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>

@enderror

</div>

<label for="exampleInputEmail1">Email</label>

@error('email')

<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>

@enderror

</div>

@error('age')

<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>

@enderror

</div>

<label for="exampleInputEmail1">Contact No</label>

@error('contact_no')

<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>

@enderror

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

</body>

</html>

The following below code will display validation error message on blade view file:

@error('name')
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
@enderror

@error('name')

<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>

@enderror

Start Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://localhost:8000/form

Create PHP Laravel 8 CRUD Web App with MySQL Database

In this Create PHP Laravel 8 CRUD Web App with MySQL Database Tutorial I’ll show you how to create a laravel 8 simple crud application with mysql database in laravel 8. In this tutorial you will learn to create simple laravel 8 crud application example with mysql database. In this article, you will learn how to create fully functional CRUD (Create, Read, Update and Delete) Application In laravel. We will be creating a student crud operation application in laravel 8.

Create PHP Laravel 8 CRUD Web App with MySQL Database

In this step by step guide, we will be creating a simple laravel 8 CRUD application to demonstrate you how to create laravel CRUD operation based application in laravel 8. Please follow the instruction given below:

Creating a Laravel 8|7 Project
Set Up MySQL Database in Laravel
Setting Up Migration and Model
Adding Controller and Creating Routes
Create Views in Laravel with Blade Templates
Create, Store & Validate User Data in MySQL Database
Show Users Data
Edit and Update Data

Install Laravel 8 with Composer on macOS, Ubuntu and Windows

In this Install Laravel 8 with Composer on macOS, Ubuntu and Windows tutorial I will show you how to install latest Laravel 8 version with Composer on your system. In this tutorial you will learn to install latest Laravel 8 with Composer on your local system. In this article I will guide you through example how to setup Laravel 8 project using Composer on your localhost system.

Install Laravel 8 with Composer on macOS, Ubuntu and Windows

In this step by step tutorial I will demonstrate you with example how to install Laravel 8 version with Composer on your system. Please follow the instruction given below:

HTTP Client
Laravel Airlock
Custom Eloquent Casts
Blade Component Tags & Improvements
Route Caching Speed Improvements, etc.

Install Composer using Homebrew

brew install composer

1	brew install composer

Run the following command to check the installed Composer version.

composer -v

1	composer -v

You will see the similar output:

Install Laravel Project

Create a fresh laravel project, download and install Laravel 8 using the below command

composer create-project --prefer-dist laravel/laravel new-laravel-project

1	composer create-project --prefer-dist laravel/laravel new-laravel-project

Once the installation proecess is completed then run the following command to get into the Laravel project folder.

Run Laravel Application

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://127.0.0.1:8000

1	http://127.0.0.1:8000

Laravel application by default starts on port 8000 however you can change it by executing followign command.

php artisan serve --port=8888

1	php artisan serve --port=8888

Now, open the following URL in browser to see the output –

http://127.0.0.1:8888

1	http://127.0.0.1:8888

Laravel 8 Multiple Images Upload with Validation Example

In this Laravel 8 Multiple Images Upload with Validation Example Tutorial, I will show you how to upload multiple image with validation in laravel 8. In this tutorial you will learn to upload multiple image in laravel with validation and save into folder and then save it into database. In this example before saving multiple image into database we will validate image and then save it into directory. Before uploading the image we will validate the image. After successfully uploading multiple images into the folder and saving it in database we will display success message on the screen.

Laravel 8 Multiple Images Upload with Validation Example

In this step by step tutorial I’ll demonstrate example of multiple image upload with Validation in laravel 8. Please follow the step given below:

Create Project
Database Configuration
Create Model and Migrations
Create Controller
Create Routes
Create Blade File

Create Laravel Project

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

composer create-project laravel/laravel --prefer-dist laravel-image-upload

1	composer create-project laravel/laravel --prefer-dist laravel-image-upload

Now switch to the project directory.

cd laravel-image-upload

1	cd laravel-image-upload

Database Configuration

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=laravel_db
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=localhost

DB_PORT=3306

DB_DATABASE=laravel_db

DB_USERNAME=root

DB_PASSWORD=

Create Model and Migrations

Now, in this step we will create model and migration file. Please run the following command:

php artisan make:model Image -m

1	php artisan make:model Image -m

Once above command is executed there will be a migration file created inside database/migrations/ directory, open migration file and update the function up() method as following:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateImagesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('images', function (Blueprint $table) {
            $table->id();
            $table->string('name')->nullable();
            $table->string('image_path')->nullable();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('images');
    }
}

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class CreateImagesTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('images', function (Blueprint $table) {

$table->id();

$table->string('name')->nullable();

$table->string('image_path')->nullable();

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('images');

}

Now put the following code inside the app/Models/Image.php file.

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Image extends Model
{
    use HasFactory;
    protected $fillable = [
        'name',
        'image_path'
    ];

}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Image extends Model

{

use HasFactory;

protected $fillable = [

'name',

'image_path'

];

}

Now, run the migration to create database table using following artisan command:

php artisan migrate

1	php artisan migrate

Create Image Uploading Controller

Now, lets create a controller named FileUpload using command given below –

php artisan make:controller FileUpload

1	php artisan make:controller FileUpload

Once the above command executed, it will create a controller file FileUpload.php in app/Http/Controllers/ directory. Open the FileUpload.php file and put the following code in it.

app/Http/Controllers/FileUpload.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Image;

class FileUpload extends Controller
{
  public function createForm(){
    return view('image-upload');
  }


  public function fileUpload(Request $req){
    $req->validate([
      'imageFile' => 'required',
      'imageFile.*' => 'mimes:jpeg,jpg,png,gif,csv,txt,pdf|max:2048'
    ]);

    if($req->hasfile('imageFile')) {
        foreach($req->file('imageFile') as $file)
        {
            $name = $file->getClientOriginalName();
            $file->move(public_path().'/uploads/', $name);  
            $imgData[] = $name;  
        }

        $fileModal = new Image();
        $fileModal->name = json_encode($imgData);
        $fileModal->image_path = json_encode($imgData);
        
       
        $fileModal->save();

       return back()->with('success', 'File has successfully uploaded!');
    }
  }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\Image;

class FileUpload extends Controller

{

public function createForm(){

return view('image-upload');

}

public function fileUpload(Request $req){

$req->validate([

'imageFile' => 'required',

'imageFile.*' => 'mimes:jpeg,jpg,png,gif,csv,txt,pdf|max:2048'

]);

if($req->hasfile('imageFile')) {

foreach($req->file('imageFile') as $file)

{

$name = $file->getClientOriginalName();

$file->move(public_path().'/uploads/', $name);

$imgData[] = $name;

}

$fileModal = new Image();

$fileModal->name = json_encode($imgData);

$fileModal->image_path = json_encode($imgData);

$fileModal->save();

return back()->with('success', 'File has successfully uploaded!');

}

The createForm() function will display image upload from in the view, and the the fileUpload() method will handle uploading, storing and validation in the image uploading controller.

Create Routes in Laravel

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\FileUpload;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/image-upload', [FileUpload::class, 'createForm']);

Route::post('/image-upload', [FileUpload::class, 'fileUpload'])->name('imageUpload');

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\FileUpload;

|--------------------------------------------------------------------------

| Web Routes

|--------------------------------------------------------------------------

| Here is where you can register web routes for your application. These

| routes are loaded by the RouteServiceProvider within a group which

| contains the "web" middleware group. Now create something great!

Route::get('/image-upload', [FileUpload::class, 'createForm']);

Route::post('/image-upload', [FileUpload::class, 'fileUpload'])->name('imageUpload');

Create Blade Template

In this step we will create blade view file for uploading multiple images. Create resources\views\image-upload.blade.php file and add the following code.

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

    <title>Laravel Image Upload</title>
    <style>
        .container {
            max-width: 500px;
        }
        dl, ol, ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .imgPreview img {
            padding: 8px;
            max-width: 100px;
        } 
    </style>
</head>

<body>

    <div class="container mt-5">
        <h3 class="text-center mb-5">Image Upload in Laravel</h3>
        <form action="{{route('imageUpload')}}" method="post" enctype="multipart/form-data">
            @csrf
            @if ($message = Session::get('success'))
                <div class="alert alert-success">
                    <strong>{{ $message }}</strong>
                </div>
            @endif

            @if (count($errors) > 0)
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="user-image mb-3 text-center">
                <div class="imgPreview"> </div>
            </div>            

            <div class="custom-file">
                <input type="file" name="imageFile[]" class="custom-file-input" id="images" multiple="multiple">
                <label class="custom-file-label" for="images">Choose image</label>
            </div>

            <button type="submit" name="submit" class="btn btn-primary btn-block mt-4">
                Upload Images
            </button>
        </form>
    </div>
  
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script>
        $(function() {
        // Multiple images preview with JavaScript
        var multiImgPreview = function(input, imgPreviewPlaceholder) {

            if (input.files) {
                var filesAmount = input.files.length;

                for (i = 0; i < filesAmount; i++) {
                    var reader = new FileReader();

                    reader.onload = function(event) {
                        $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(imgPreviewPlaceholder);
                    }

                    reader.readAsDataURL(input.files[i]);
                }
            }

        };

        $('#images').on('change', function() {
            multiImgPreview(this, 'div.imgPreview');
        });
        });    
    </script>
</body>
</html>

<!doctype html>

<head>

<title>Laravel Image Upload</title>

<style>

.container {

max-width: 500px;

}

dl, ol, ul {

margin: 0;

padding: 0;

list-style: none;

}

.imgPreview img {

padding: 8px;

max-width: 100px;

}

</style>

</head>

<body>

<h3 class="text-center mb-5">Image Upload in Laravel</h3>

@csrf

@if ($message = Session::get('success'))

<strong>{{ $message }}</strong>

</div>

@endif

@if (count($errors) > 0)

<ul>

@foreach ($errors->all() as $error)

<li>{{ $error }}</li>

@endforeach

</ul>

</div>

@endif

</div>

<label class="custom-file-label" for="images">Choose image</label>

</div>

Upload Images

</button>

</form>

</div>

$(function() {

// Multiple images preview with JavaScript

var multiImgPreview = function(input, imgPreviewPlaceholder) {

if (input.files) {

var filesAmount = input.files.length;

for (i = 0; i < filesAmount; i++) {

var reader = new FileReader();

reader.onload = function(event) {

$($.parseHTML('<img>')).attr('src', event.target.result).appendTo(imgPreviewPlaceholder);

}

reader.readAsDataURL(input.files[i]);

}

};

$('#images').on('change', function() {

multiImgPreview(this, 'div.imgPreview');

});

</script>

</body>

</html>

Start The Application

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://127.0.0.1:8000/image-upload

1	http://127.0.0.1:8000/image-upload

How to Check Laravel Version via CLI and Application File

In this How to Check Laravel Version via CLI and Application File tutorial, I will show you how to check laravel version using laravel cli or application file. In this tutorial you will learn to check laravel version using laravel cli command and in laravel application file.

How to Check Laravel Version via CLI and Application File

There are following two ways to check the version of your Laravel application.

Check Laravel Version Using the Command
Check Laravel Version in Files

Check Laravel Version using the Command

If you want to check laravel version using artisan command then switch to the project directory and run the following command to check laravel version:

php artisan --version

#or 

php artisan -v

php artisan --version

#or

php artisan -v

Laravel 9 Ajax CRUD Using Datatable Tutorial

Laravel 9 Yajra DataTables CRUD Example Tutorial

Install Laravel 9

Configure Database In .env file

Install Yajra Datatable Package

Build Model & Migration

Create Routes

Generate CRUD Controller By Artisan Command

Create Blade Views File

Start Development Server

Laravel 9 Ajax Image Upload with Preview Tutorial

Install Laravel 9

Configure Database In .env file

Create Model & Migration

Create Routes

Create Controller By Artisan Command

Create Ajax Image Upload Form

Create Images Directory inside Storage/app/public

Start Development Server

Laravel 9 Image Upload with Preview

Install Laravel 9

Configure Database In .env file

Create Model & Migration

Create Routes

Create Controller By Artisan Command

Create Blade View

Create Images Directory inside Storage/app/public

Start Development Server

Laravel 9 Ajax Post Form Data With Validation

Laravel 9 Ajax Form Submit Using jQuery

Install Laravel 9

Configure Database In .env file

Create Model & Migration

Create Routes

Create Contact us Controller

Create Form Blade File

Start Development Server

Laravel 9 Client Side Form Validation

Laravel 9 Client Side Form Validation Using jQuery

Install Laravel 9

Database Configuration

Make Route

Create Controller

Create Blade view

Start Development Server

Laravel 9 File Upload Validation Example Tutorial

Step 1 – Download Laravel 9 Application

Step 2 – Database Configuration

Step 3 – Build File Model & Migration

Step 4 – Create Routes

Step 5 – Build File Upload Controller By Artisan Command

Step 6 – Create File Upload Form

Step 7 – Create Directory inside Storage/app/public

Step 8 – Run Development Server

Laravel 9 Upload Image Example Tutorial

Install Laravel 9

Configure Database In .env file

Create Model & Migration

Create Routes

Create Controller By Artisan Command

Create Blade View

Create Images Directory inside Storage/app/public

Run Development Server

Laravel 9 Form Validation Tutorial

Laravel 9 Form Validation Example

Install Laravel 9

Configure Database In .env file

Create Model & Migration

Create Form Routes

Create Form Controller By Artisan Command

Create Form Blade File

Start Development Server

Create PHP Laravel 8 CRUD Web App with MySQL Database

Creating a Laravel Project

Set Up MySQL Database

Setting Up Migration and Model

Creating Controller and Routes

Configure Routes

Create Views in Laravel with Blade Templates

Configure Bootstrap in Laravel