Laravel Signature Pad Tutorial From Scratch

In this tutorial you will learn about the Laravel Signature Pad Tutorial From Scratch and its application with practical example.

In this Laravel digital signature pad tutorial I’ll show you how to implement a digital signature pad in laravel. In this tutorial you will learn to implement a digital signature pad in laravel application. In this step by step guide I will demonstrate you how to implement a digital signature pad in laravel.

Table Of Contents−

Laravel Signature Pad Tutorial From Scratch

We will be using Laravel kenth-wood jquery UI signature pad library to implement digital signature pad in laravel application.

Step 1: Install Laravel New App

Step 2: Connect Database To App
Step 3: Create One Model and Migration
Step 4: Add Routes For digital Signature Pad

Step 5: Create Controller by Artisan Command
Step 6: Create Blade View
Step 7: Make Upload Directory

Step 8: Start Development Server

Step 1: Install Laravel New App

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

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

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

Step 2: Connect Database To App

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=here your database name here
 DB_USERNAME=here database username here
 DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Create Model and Migration

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

php artisan make:model Signature -m

1	php artisan make:model Signature -m

Now, go to database/migrations directory and open create_signatures_table.php file in text editor. Then put the following code in your create_signatures_table.php file inside public directory.

<?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->increments('id');
            $table->string('name');
            $table->string('signature');
            $table->timestamps();
        });
    }
 
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('signatures');
    }
}

<?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->increments('id');

$table->string('name');

$table->string('signature');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('signatures');

}

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

php artisan migrate

1	php artisan migrate

Step 4: Add Routes For digital Signature Pad

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::get('laravel-signature-pad','SignatureController@index');
Route::post('laravel-signature-pad','SignatureController@store');

1 2	Route::get('laravel-signature-pad','SignatureController@index'); Route::post('laravel-signature-pad','SignatureController@store');

Step 5: Create Controller by Artisan Command

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

php artisan make:controller SignatureController

1	php artisan make:controller SignatureController

Then, Navigate to app/http/controllers directory and open SignatureController.php file. And put following code into SignatureController.php file:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Signature;
 
class SignatureController extends Controller
{
    public function index()
    {
        return view('signature-pad');
    }
 
    public function store(Request $request)
    {
        $folderPath = public_path('upload/');
       
        $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]);
 
        $signature = uniqid() . '.'.$image_type;
           
        $file = $folderPath . $signature;
 
        file_put_contents($file, $image_base64);
 
        $save = new Signature;
        $save->name = $request->name;
        $save->signature = $signature
        $save->save();
    
 
        return back()->with('success', 'Form successfully submitted with signature');
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Signature;

class SignatureController extends Controller

{

public function index()

{

return view('signature-pad');

}

public function store(Request $request)

{

$folderPath = public_path('upload/');

$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]);

$signature = uniqid() . '.'.$image_type;

$file = $folderPath . $signature;

file_put_contents($file, $image_base64);

$save = new Signature;

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

$save->signature = $signature

$save->save();

return back()->with('success', 'Form successfully submitted with signature');

}

Step 6: Create a blade view

Now, we will create one blade view file that name signature-pad.blade.php file for digital signature pad. Then put the following code into your signature-pad.blade.php file:

<!DOCTYPE html>
<html>
<head>
<title>Laravel 7 Signature Pad Tutorial From Scratch</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<link type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.css" rel="stylesheet"> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style>
.kbw-signature { width: 100%; height: 180px;}
#signaturePad canvas{
width: 100% !important;
height: auto;
}
</style>
</head>
<body class="bg-dark">
<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 7 Signature Pad Tutorial From Scratch</h5>
</div>
<div class="card-body">
@if ($message = Session::get('success'))
<div class="alert alert-success  alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>  
<strong>{{ $message }}</strong>
</div>
@endif
<form method="POST" action="{{ url('laravel-signature-pad') }}">
@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 class="" for="">Signature:</label>
<br/>
<div id="signaturePad" ></div>
<br/>
<button id="clear" class="btn btn-danger btn-sm">Clear Signature</button>
<textarea id="signature64" name="signed" style="display: none"></textarea>
</div>
<br/>
<button class="btn btn-success">Save</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://keith-wood.name/js/jquery.signature.js"></script>
<link rel="stylesheet" type="text/css" href="http://keith-wood.name/css/jquery.signature.css">
<script type="text/javascript">
var signaturePad = $('#signaturePad').signature({syncField: '#signature64', syncFormat: 'PNG'});
$('#clear').click(function(e) {
e.preventDefault();
signaturePad.signature('clear');
$("#signature64").val('');
});
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Laravel 7 Signature Pad Tutorial From Scratch</title>

<style>

.kbw-signature { width: 100%; height: 180px;}

#signaturePad canvas{

width: 100% !important;

height: auto;

}

</style>

</head>

<h5>Laravel 7 Signature Pad Tutorial From Scratch</h5>

</div>

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

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

</div>

@endif

@csrf

</div>

<label class="" for="">Signature:</label>

<br/>

<br/>

<button id="clear" class="btn btn-danger btn-sm">Clear Signature</button>

</div>

<br/>

</form>

</div>

var signaturePad = $('#signaturePad').signature({syncField: '#signature64', syncFormat: 'PNG'});

$('#clear').click(function(e) {

e.preventDefault();

signaturePad.signature('clear');

$("#signature64").val('');

});

</script>

</body>

</html>

Step 7: Make Upload Directory

In this step, navigate to your laravel project root directory and open public directory. Inside public directory, create one new directory name upload.

Step 8: Start Development Server

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

php artisan serve
If you want to run the project diffrent port so use this below command 
php artisan serve --port=8080

php artisan serve

If you want to run the project diffrent port so use this below command

php artisan serve --port=8080

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

http://127.0.0.1:8000/laravel-signature-pad

1	http://127.0.0.1:8000/laravel-signature-pad

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel Signature Pad Tutorial From Scratch