Laravel Signature Pad Tutorial From Scratch

Laravel Signature Pad Tutorial From Scratch

Laravel digital signature pad example tutorial. Here, you will learn how to implement a digital signature pad with form in laravel.

And this tutorial will use laravel form and keith-wood jquery ui signature pad library for implement digital signature pad with forms in laravel app.

This tutorial will completely guide you on how to implement digital signature pad with laravel forms. And how to store digital signatures in database and folder.

The kenth-wood jquery UI signature pad library make it easy to implement digital signature pad in PHP laravel and other frameworks.

Note that, This laravel signature pad implementation tutorial also works with laravel different version like 7.x, 6, 5, 5.5 etc.

Laravel Signature Pad Example From Scratch

Let’s follow the below steps and implement signature pad app in laravel from scratch:

  • 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, open your terminal and command prompt and run the following command to install or download new laravel setup for signature pad app:

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

Step 2: Connect Database To App

Now, navigate to your download laravel signature pad app root directory. And open .env file. Then add your database details like below:

 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

In this step, you need to create migration and model files. So run the following command to create migration and model files:

php artisan make:model Signature -m

This command will create one model name Signature.php and one migration file name create_signatures_table.php.

Now, navigate to database/migrations directory and open create_signatures_table.php file in text editor. Then add the following code into your create_signatures_table.php file:

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

Then, open your terminal again. And run the following command to create tables into your database:

php artisan migrate

Step 4: Add Routes For digital Signature Pad

In this step, Navigate to routes directory and open web.php file. Then add the following routes into your web.php file:

Route::get('laravel-signature-pad','[email protected]');
Route::post('laravel-signature-pad','[email protected]');

Step 5: Create Controller by Artisan Command

In this step, run the following php artisan command to create a controller:

php artisan make:controller SignatureController 

Then, Navigate to app/http/controllers directory and open SignatureController.php file. And add the following code into your 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');
    }
}

Step 6: Create a blade view

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:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 7 Signature Pad Tutorial From Scratch - tutsmake.com</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 - tutsmake.com</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="http://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>

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.

Note that, if you have not created the upload directory in your laravel crop image before upload app, the error will be “Laravel show ErrorException file_put_contents failed to open stream: No such file or directory“.

To avoid this error, create upload directory inside public directory.

Step 8: Start Development Server

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

 php artisan serve

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

 php artisan serve --port=8080  

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

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

Conclusion

In this laravel signature pad tutorial, you have learned how to implement signature pad app in laravel.

AuthorTuts Make

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Javascript, JQuery, Laravel, Livewire, Codeigniter, Vue JS, Angular JS, React Js, WordPress, and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *