Signature Pad in Laravel 9 Example Tutorial

Laravel Signature Pad Example; In this tutorial we will show you how to create Digital Signature pad with form in laravel application. Now a days add and show client or user signature in a pad and store to database is a common feature.

We all know now a days all are going to online website portal and submitting any documents is online is prerequest. The below example to adding jquery signature pad in laravel with clear option and store database in base_64encode functinality.

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.

Laravel Signature Pad Example Step by Step

follow the following the below steps and implement signature pad app in laravel apps:

  • Step 1: Install Laravel 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
  • Step 6: Create Blade View
  • Step 7: Start Development Server

Install Laravel App

On the console, screen type the following command and hit enter to generate a new laravel project. You can ignore this step if the app is already installed:

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

Go into the app:

cd laravel-signeture

Connect Database to App

After successfully install laravel new application, Go to project root directory and open .env file. Then set up database credential in .env file as follow:

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

Generate Model & Migration

Next step, we need to execute the following command on terminal to generate Signature Model and signatures table:

php artisan make:model Signature -m

Place the below code in app/Models/Signature.php file:

<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Signature extends Model
{
    use HasFactory;
    protected $guarded = [];
}

Add code in database/migrations/create_signatures_table.php:

<?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 sliders table values, run migration to add them into the database:

php artisan migrate

Add Routes for Signature Pad

Next step, go to routes folder and open web.php file and add the following routes into file:

routes\web.php

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

Create Controller

Now you need to create a new controller for running the following command, You can use in existing controller.

php artisan make:controller SignaturePadController

Now 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');
    }
}

Create Blade File

Now, you need to create one blade view file that name signature-pad.blade.php file for digital signature pad.

Then add the following code into your signature-pad.blade.php file:

<html>
<head>
    <title>Laravel Signature Pad Example - MyNotePaper.com</title>
    <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 - codingdriver.com</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>

Start Development Server

Finally, run php artisan serve command to start your laravel signature pad app locally:

 php artisan serve

Now you are ready to run this example. So open your browser and hit the following URL:

http://localhost:8000/signature-pad 
//or
http://127.0.0.1:8000/signature-pad

You can see generating signature pade just like below:

Laravel-Signature-Pad-Example-Tutorial

Finally, laravel signature pad tutorial is completed now, you have learned how to implement signature pad app in laravel application.

Leave a Comment