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