Halo semua! Pada artikel ini, kita akan membahas tentang contoh signature pad pada laravel. Kami akan menggunakan signature pad di laravel. Jika Anda memiliki pertanyaan tentang jquery signature pad canvas image laravel maka saya akan memberikan contoh sederhana dengan solusi. Jika Anda ingin melihat contoh laravel e-signature maka Anda adalah tempat yang tepat.
Dalam posting ini saya akan memberi Anda contoh yang sangat sederhana dan langkah demi langkah mengimplementasikan signature pad di laravel sehingga Anda dapat menggunakannya di versi laravel 6, laravel 7 dan laravel 8.
Seperti yang kita ketahui bisnis saat ini berjalan dengan baik dengan portal website online. jadi setiap hal akan online, Anda tidak perlu mengirimkan dokumen apa pun secara offline. jadi tanda tangan digital kanan juga tersedia untuk tanda pengguna di mana Anda dapat mengambil tanda tangan pengguna online menggunakan papan tanda tangan jquery. itu akan menghemat waktu klien Anda.
Jadi, jika Anda perlu menambahkan pad e-signature di aplikasi laravel Anda, ikuti langkah di bawah ini dan lakukan seperti di bawah ini:
Pratinjau:
Langkah 1: Instal Laravel
pertama-tama kita perlu mendapatkan aplikasi Laravel baru menggunakan perintah di bawah, Jadi buka terminal OR command prompt Anda dan jalankan perintah di bawah ini:
composer create-project --prefer-dist laravel/laravel blogFirebaseLangkah 2: Buat Route
Pada langkah ini kita perlu menambahkan route untuk menghasilkan tampilan dan metode kirim posting. jadi buka file rute Anda dan tambahkan route berikut.
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('signaturepad', [SignaturePadController::class, 'index']);
Route::post('signaturepad', [SignaturePadController::class, 'upload'])->name('signaturepad.upload');Langkah 3: Buat Controller
Jika Anda belum memiliki HomeController maka kita harus membuat controller baru sebagai SignaturePadController di file itu kita akan menambahkan dua metode, index() dan upload(), jadi letakkan konten di bawah ini di file controller:
app/Http/Controllers/SignaturePadController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class SignaturePadController extends Controller
{
/**
* Write code on Method
*
* @return response()
*/
public function index()
{
return view('signaturePad');
}
/**
* Write code on Method
*
* @return response()
*/
public function upload(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]);
$file = $folderPath . uniqid() . '.'.$image_type;
file_put_contents($file, $image_base64);
return back()->with('success', 'success Full upload signature');
}
}Langkah 4: Buat File View
Pada langkah terakhir, kita harus membuat file view "signaturePad.blade.php" untuk menghasilkan view signature pad, jadi buat file signaturePad dan beri kode di bawah ini:
resources/view/signaturePad.blade.php
<html>
<head>
<title>Laravel Signature Pad Tutorial Example - Medikre.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="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.css" rel="stylesheet">
<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;}
#sig 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 Signature Pad Tutorial Example - Medikre.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="{{ route('signaturepad.upload') }}">
@csrf
<div class="col-md-12">
<label class="" for="">Signature:</label>
<br/>
<div id="sig" ></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">
var sig = $('#sig').signature({syncField: '#signature64', syncFormat: 'PNG'});
$('#clear').click(function(e) {
e.preventDefault();
sig.signature('clear');
$("#signature64").val('');
});
</script>
</body>
</html>
Sekarang Anda dapat menjalankan proyek menggunakan perintah berikut:
php artisan servemari kita cek dari url berikut:
localhost:8000/signaturepadSaya harap ini dapat membantu Anda ...
laravel Laravel Signature Pad Example
andriajah