More than time we need to sign the user in the signature pad. If you need to add the signature pad in Laravel 11 application then you land a perfect place. Here in this article, we are going to share how to create a Digital Signature pad with form in laravel application.
Basically, the Signature Pad is a JavaScript library for drawing smooth signatures. It’s HTML5 canvas based and uses variable width Bézier curve interpolation based on Smoother Signatures post by Square. It works in all modern desktop and mobile browsers and doesn’t depend on any external libraries.
How to Add Signature Pad in Laravel 11
Using the Laravel Signature Pad tutorial we are going to share how to add the signature pad in laravel using the jQuery library with a clear option and store the database in base_64encode functionality.
#1 Download Laravel App
First of all, just download a fresh laravel application using the following command:
composer create-project --prefer-dist laravel/laravel laravel-signetureNext, go to your app:
cd laravel-signeture#2 Setup your Database
In laravel if you do not know how to connect the database with a fresh laravel application. So, let’s open the .env file which is in root directory. If it’s not exists then .env.example file rename with .env and add your database credentials such as database name, username, and password just like below.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db
DB_USERNAME=root
DB_PASSWORD=#3 Make Model and Migration
Now its time to create database tables. For database tables we need to generate a model and migration file in laravel app using the following command:
php artisan make:model Signature -mYou can see two new files generated in your application one is created in app/Models and another is database/migrations directory.
First, open the app/Models/Signature.php file and place the below code on it:
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Signature extends Model
{
use HasFactory;
protected $guarded = [];
}Next, open the database/migrations/create_signatures_table.php file and update the following code on it.
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateSignaturesTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('signatures', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('name')->nullable();
$table->string('signature')->nullable();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('sliders');
}
}
After defining signature table values, run the migration to add them to the database:
php artisan migrate#4 Make Routes
Now it the time to create routes for implementing the signature pad sign functionality in laravel, So, for this your just need to open routes\web.php file and add the following routes to the file:
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\SignaturePadController;
/*
|--------------------------------------------------------------------------
| 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('signature-pad', [SignaturePadController::class, 'index']);
Route::post('signature-pad', [SignaturePadController::class, 'save'])->name('signpad.save');#5 Create a Controller and update Logic
Next, you need to create a new controller for running the following command;
php artisan make:controller SignaturePadControllerNow open the app\Http\Controllers\SignaturePadController.php file and put the below code on it:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Signature;
class SignaturePadController extends Controller
{
public function index()
{
return view('signature-pad');
}
public function save(Request $request)
{
$folderPath = public_path('signatures/'); // create signatures folder in public directory
$image_parts = explode(";base64,", $request->signed);
$image_type_aux = explode("image/", $image_parts[0]);
$image_type = $image_type_aux[1];
$image_base64 = base64_decode($image_parts[1]);
$file = $folderPath . uniqid() . '.' . $image_type;
file_put_contents($file, $image_base64);
// Save in your data in database here.
Signature::([
'name' => $request->name,
'signature' => uniqid() . '.' . $image_type
]);
return back()->with('success', 'Successfully saved the signature');
}
}#6 Create Blade File
In this step, you need to create one blade view file that name signature-pad.blade.php file for the digital signature pad.
Then add the following code to your signature-pad.blade.php file:
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://keith-wood.name/js/jquery.signature.js"></script>
<link rel="stylesheet" type="text/css" href="http://keith-wood.name/css/jquery.signature.css">
<style>
.kbw-signature {
width: 100%;
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3 mt-5">
<div class="card">
<div class="card-header">
<h5>Laravel Signature Pad Example</h5>
</div>
<div class="card-body">
@if (session('success'))
<div class="alert alert-success">
<span>{{ session('success') }}</span>
</div>
@endif
<form method="POST" action="{{ route('signpad.save') }}">
@csrf
<div class="col-md-12">
<label class="" for="">Name:</label>
<input type="text" name="name" class="form-group" value="">
</div>
<div class="col-md-12">
<label>Signature:</label>
<br/>
<div id="sig"></div>
<br/><br/>
<button id="clear" class="btn btn-danger btn-sm">Clear</button>
<textarea id="signature" name="signed" style="display: none"></textarea>
</div>
<br/>
<button class="btn btn-primary">Save</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var sig = $('#sig').signature({syncField: '#signature', syncFormat: 'PNG'});
$('#clear').click(function (e) {
e.preventDefault();
sig.signature('clear');
$("#signature64").val('');
});
</script>
</body>
</html>#7 Run Your App
Finally, run php artisan serve command to start your app locally:
php artisan serveNow open the URL in your browser
http://localhost:8000/signature-pad
//or
http://127.0.0.1:8000/signature-padHurray! The laravel signature pad Example tutorial is completed now, you can test it.