This post is also available in:
English
Dalam tutorial pad tanda tangan digital Laravel ini saya akan menunjukkan kepada Anda bagaimana menerapkan pad tanda tangan digital di laravel. Dalam tutorial ini Anda akan belajar mengimplementasikan pad tanda tangan digital di aplikasi laravel. Dalam panduan langkah demi langkah ini saya akan menunjukkan kepada Anda bagaimana menerapkan pad tanda tangan digital di laravel.
Kami akan menggunakan library pad tanda tangan Laravel kenth-wood jquery UI untuk mengimplementasikan pad tanda tangan digital dalam aplikasi laravel.
Laravel Signature Pad Tutorial 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
Pertama-tama kita perlu membuat proyek laravel baru, unduh dan instal Laravel menggunakan perintah di bawah ini
composer create-project –prefer-dist laravel/laravel blog
Step 2: Connect Database To App
Sekarang, mari kita buat database MySQL dan hubungkan dengan aplikasi laravel. Setelah membuat database, kita perlu mengatur kredensial database di file .env aplikasi.
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
Sekarang, pada langkah ini kita akan membuat model dan file migrasi. Silakan jalankan perintah berikut:
php artisan make:model Signature -m
Sekarang, buka direktori database/migrasi dan buka file create_signatures_table.php di editor teks. Kemudian letakkan kode berikut di file create_signatures_table.php Anda di dalam direktori public.
<?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');
}
}Sekarang, jalankan migrasi untuk membuat tabel database menggunakan perintah artisan berikut:
php artisan migrateStep 4: Add Routes For digital Signature Pad
Setelah ini, kita perlu mendefinisikan rute di file “routes/web.php”. Mari kita buka file “routes/web.php” dan tambahkan rute berikut di dalamnya.
route/web.php
Route::get('laravel-signature-pad','SignatureController@index');
Route::post('laravel-signature-pad','SignatureController@store');Step 5: Create Controller by Artisan Command
Sekarang, mari buat pengontrol bernama SignatureController menggunakan perintah yang diberikan di bawah ini –
php artisan make:controller SignatureController Kemudian, Navigasikan ke direktori app/http/controllers dan buka file SignatureController.php. Dan masukkan kode berikut ke dalam file SignatureController.php:
<?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
Sekarang, kita akan membuat satu file tampilan blade yang bernama file signature-pad.blade.php untuk pad tanda tangan digital. Kemudian masukkan kode berikut ke dalam file signature-pad.blade.php Anda:
<!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>Step 7: Make Upload Directory
Pada langkah ini, navigasikan ke direktori root proyek laravel Anda dan buka direktori publik. Di dalam direktori publik, buat satu unggahan nama direktori baru.
Step 8: Start Development Server
Sekarang kita siap untuk menjalankan contoh kita, jadi mari kita mulai server pengembangan menggunakan perintah artisan berikut –
php artisan serve
If you want to run the project diffrent port so use this below command
php artisan serve --port=8080 http://127.0.0.1:8000/laravel-signature-pad
