Membuat Signature Pad jQuery (Tanda Tangan Digital)

Arie S01 May 20200 Comment249.6k

Pada tutorial kali ini kita akan belajar Tutorial cara Membuat Signature Pad jQuery.

Signature Pad jQuery atau tanda tangan digital yang akan kita buat adalah dengan format gambar PNG, JPEG dan SVG. Anda dapat dengan mudah menggunakan tanda tangan kemudian menyimpannya dalam bentuk gambar.

Dalam tutorial Membuat Signature Pad jQuery ini akan kita pelajari untuk penggunaan dalam bahasa pemrograman PHP, framework Laravel dan Framework CodeIgniter.

Struktur file tanda tangan digital yang akan kita buat adalah sebagai berikut:

Kemudian tampilan tanda tangan digital yang akan kita buat adalah seperti gambar berikut:

Baiklah langsung saja, berikut ini tutorial cara Membuat Signature Pad jQuery step by step:

1. Buat file baru dengan nama index.php

Isi dari file index.php adalah sebagai berikut:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Ayo Ngoding - Membuat Signature Pad jQuery</title>
        <!-- CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
        <style type="text/css">
        	.signature-pad{
        		border: 1px solid #ccc;
        		border-radius: 5px;
        		width: 100%;
        		height: 260px;
        	}
        </style>
    </head>
    <body>
        <div class="container">
			<br>
			<h2>Membuat Signature Pad jQuery - www.ayongoding.com</h2>
	    	<div class="row">
	    		<div class="col-md-6">
					<hr>
			    	<h4>Signature Pad</h4>
			    	<div class="text-right">
				    	<button type="button" class="btn btn-default btn-sm" id="undo"><i class="fa fa-undo"></i> Undo</button>
						<button type="button" class="btn btn-danger btn-sm" id="clear"><i class="fa fa-eraser"></i> Clear</button>
			    	</div>
			    	<br>
		            <form method="POST" action="upload.php">
				        <div class="wrapper">
						  <canvas id="signature-pad" class="signature-pad"></canvas>
						</div>
						<br>
						<button type="button" class="btn btn-primary btn-sm" id="save-png">Save as PNG</button>
						<button type="button" class="btn btn-info btn-sm" id="save-jpeg">Save as JPEG</button>
						<button type="button" class="btn btn-default btn-sm" id="save-svg">Save as SVG</button>
						<!-- Modal untuk tampil preview tanda tangan-->
						<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
						  <div class="modal-dialog" role="document">
						    <div class="modal-content">
						      <div class="modal-header">
						        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						        <h4 class="modal-title" id="myModalLabel">Preview Tanda Tangan</h4>
						      </div>
						      <div class="modal-body">
						      </div>
						      <div class="modal-footer">
						        <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal"><i class="fa fa-times"></i> Cancel</button>
						        <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-save"></i> Submit</button>
						      </div>
						    </div>
						  </div>
						</div>
			        </form>
	    		</div>
	    	</div>
        </div>
        <!-- Javascript -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
        <script src="signature-pad.js"></script>
    </body>
</html>

Perhatikan kode di atas, kita membuat sebuah form sederhana dengan action mengarah ke file upload.php. Kemudian ada modal untuk menampilkan preview setelah melakukan tanda tangan, kemudian tombol submit untuk upload file gambar tanda tangan.

Pada bagian kode program <script src="signature-pad.js"></script> berfugsi untuk memanggil file javaScript dengan nama file signature-pad.js

2. Selanjutnya kita buat file js-nya. Buat file baru kemudian simpan dengan nama signature-pad.js

Berikut ini isi dari file signature-pad.js:

var canvas = document.getElementById('signature-pad');

// Adjust canvas coordinate space taking into account pixel ratio,
// to make it look crisp on mobile devices.
// This also causes canvas to be cleared.
function resizeCanvas() {
    // When zoomed out to less than 100%, for some very strange reason,
    // some browsers report devicePixelRatio as less than 1
    // and only part of the canvas is cleared then.
    var ratio =  Math.max(window.devicePixelRatio || 1, 1);
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext("2d").scale(ratio, ratio);
}

window.onresize = resizeCanvas;
resizeCanvas();

var signaturePad = new SignaturePad(canvas, {
  backgroundColor: 'rgb(255, 255, 255)' // necessary for saving image as JPEG; can be removed is only saving as PNG or SVG
});

document.getElementById('save-png').addEventListener('click', function () {
  if (signaturePad.isEmpty()) {
    alert("Tanda Tangan Anda Kosong! Silahkan tanda tangan terlebih dahulu.");
  }else{
    var data = signaturePad.toDataURL('image/png');
    console.log(data);
    $('#myModal').modal('show').find('.modal-body').html('<h4>Format .PNG</h4><img src="'+data+'"><textarea id="signature64" name="signed" style="display:none">'+data+'</textarea>');
  }
});

document.getElementById('save-jpeg').addEventListener('click', function () {
  if (signaturePad.isEmpty()) {
    alert("Tanda Tangan Anda Kosong! Silahkan tanda tangan terlebih dahulu.");
  }else{
    var data = signaturePad.toDataURL('image/jpeg');
    console.log(data);
    $('#myModal').modal('show').find('.modal-body').html('<h4>Format .JPEG</h4><img src="'+data+'"><textarea id="signature64" name="signed" style="display:none">'+data+'</textarea>');
  }
});

document.getElementById('save-svg').addEventListener('click', function () {
  if (signaturePad.isEmpty()) {
    alert("Tanda Tangan Anda Kosong! Silahkan tanda tangan terlebih dahulu.");
  }else{
    var data = signaturePad.toDataURL('image/svg+xml');
    console.log(atob(data.split(',')[1]));
    $('#myModal').modal('show').find('.modal-body').text(atob(data.split(',')[1])).append('<h4><i>"Hanya copy kode di atas ke HTML Anda"</i></h4>');
  }
});

document.getElementById('clear').addEventListener('click', function () {
  signaturePad.clear();
});

document.getElementById('undo').addEventListener('click', function () {
	var data = signaturePad.toData();
  if (data) {
    data.pop(); // remove the last dot or line
    signaturePad.fromData(data);
  }
});

3. Karena action dari form kita mengarah ke file upload.php, maka kita buat file baru dengan nama upload.php untuk proses upload tanda tangan.

Isi file upload.php sebagai berkut:

<?php
  
    $folderPath = "img-upload/";
  
    $image_parts = explode(";base64,", $_POST['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);
    echo "<h3><i>Upload Tanda Tangan Berhasil..</i><h3>";
?>

Jika semua file sudah dibuat dan disimpan, sekarang coba jalankan project Anda pada web browser.

Tampilannya sebagai berikut:

Membuat Tanda Tangan Digital Laravel

Kita juga dapat mengimplementasikan tanda tangan elektronik pada project Laravel kita.

Cara Membuat Tanda Tangan Digital pada Laravel adalah sebagai berikut:

1. Siapkan project Laravel Anda. Jika projectnya belum ada gunakan perintah berikut untuk membuat project baru:

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

2. Membuat Route, pada langkah ini kita menambahkan route untuk menampilkan view dengan method get dan route untuk upload tanda tangan dengan method post. Buka file route Anda dan tambahkan route berikut:

Route::get('signaturepad', [SignaturePadController::class, 'index']);
Route::post('upload', [SignaturePadController::class, 'upload'])->name('upload');

3. Membuat Controller, kita harus membuat controller baru dengan nama SignaturePadController. Di dalam file controller kita akan menambahkan dua function yaitu index() dan upload().

Berikut isi kode ke dua function yang akan kita gunakan:

public function index()
{
   return view('signaturePad');
}

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);
   echo "<h3><i>Upload Tanda Tangan Berhasil..</i><h3>";
}

4. Membuat View, pada langkah terakhir, kita membuat file view “signaturePad.blade.php” untuk menghasilkan view signature pad.

Buat file baru simpan dengan nama signaturePad.blade.php dan isinya sebagai berikut:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Ayo Ngoding - Membuat Signature Pad jQuery</title>
        <!-- CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
        <style type="text/css">
        	.signature-pad{
        		border: 1px solid #ccc;
        		border-radius: 5px;
        		width: 100%;
        		height: 260px;
        	}
        </style>
    </head>
    <body>
        <div class="container">
			<br>
			<h2>Membuat Signature Pad jQuery - www.ayongoding.com</h2>
	    	<div class="row">
	    		<div class="col-md-6">
					<hr>
			    	<h4>Signature Pad</h4>
			    	<div class="text-right">
				    	<button type="button" class="btn btn-default btn-sm" id="undo"><i class="fa fa-undo"></i> Undo</button>
						<button type="button" class="btn btn-danger btn-sm" id="clear"><i class="fa fa-eraser"></i> Clear</button>
			    	</div>
			    	<br>
		            <form method="POST" action="{{route('upload')}}">
				        <div class="wrapper">
						  <canvas id="signature-pad" class="signature-pad"></canvas>
						</div>
						<br>
						<button type="button" class="btn btn-primary btn-sm" id="save-png">Save as PNG</button>
						<button type="button" class="btn btn-info btn-sm" id="save-jpeg">Save as JPEG</button>
						<button type="button" class="btn btn-default btn-sm" id="save-svg">Save as SVG</button>
						<!-- Modal untuk tampil preview tanda tangan-->
						<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
						  <div class="modal-dialog" role="document">
						    <div class="modal-content">
						      <div class="modal-header">
						        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						        <h4 class="modal-title" id="myModalLabel">Preview Tanda Tangan</h4>
						      </div>
						      <div class="modal-body">
						      </div>
						      <div class="modal-footer">
						        <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal"><i class="fa fa-times"></i> Cancel</button>
						        <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-save"></i> Submit</button>
						      </div>
						    </div>
						  </div>
						</div>
			        </form>
	    		</div>
	    	</div>
        </div>
        <!-- Javascript -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
        <script src="signature-pad.js"></script>
    </body>
</html>

Perhatikan kode di atas, Untuk library signature-pad.js kita gunakan kode yang sama dengan tutorial pertama di atas.

5. Jalankan project, Sekarang Anda dapat menjalankan project Laravel menggunakan perintah berikut:

php artisan serve

Uji coba tanda tangan yang kita buat dengan mengakses url berikut:

localhost:8000/signaturepad

Membuat Tanda Tangan Digital CodeIgniter

Selain untuk project Laravel, pada framework CodeIgniter kita juga dapat membuat Tanda tangan digital ini.

Berikut ini cara Membuat Tanda Tangan Digital pada CodeIgniter:

1. Siapkan project CodeIgniter Anda

2. Membuat Controller, membuat controller dan tambahkan dua function yaitu index() dan upload().

Berikut isi kode ke dua function yang akan kita gunakan:

public function index()
{
   $this->load->view('index');
}


public function upload()
{
   $folderPath = "img-upload/";
  
    $image_parts = explode(";base64,", $this->input->post('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);
    echo "<h3><i>Upload Tanda Tangan Berhasil..</i><h3>";
}

3. Membuat view, isinya sebagai berikut:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Ayo Ngoding - Membuat Signature Pad jQuery</title>
        <!-- CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
        <style type="text/css">
        	.signature-pad{
        		border: 1px solid #ccc;
        		border-radius: 5px;
        		width: 100%;
        		height: 260px;
        	}
        </style>
    </head>
    <body>
        <div class="container">
			<br>
			<h2>Membuat Signature Pad jQuery - www.ayongoding.com</h2>
	    	<div class="row">
	    		<div class="col-md-6">
					<hr>
			    	<h4>Signature Pad</h4>
			    	<div class="text-right">
				    	<button type="button" class="btn btn-default btn-sm" id="undo"><i class="fa fa-undo"></i> Undo</button>
						<button type="button" class="btn btn-danger btn-sm" id="clear"><i class="fa fa-eraser"></i> Clear</button>
			    	</div>
			    	<br>
		            <form method="POST" action="<?php echo base_url('upload') ?>">
				        <div class="wrapper">
						  <canvas id="signature-pad" class="signature-pad"></canvas>
						</div>
						<br>
						<button type="button" class="btn btn-primary btn-sm" id="save-png">Save as PNG</button>
						<button type="button" class="btn btn-info btn-sm" id="save-jpeg">Save as JPEG</button>
						<button type="button" class="btn btn-default btn-sm" id="save-svg">Save as SVG</button>
						<!-- Modal untuk tampil preview tanda tangan-->
						<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
						  <div class="modal-dialog" role="document">
						    <div class="modal-content">
						      <div class="modal-header">
						        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						        <h4 class="modal-title" id="myModalLabel">Preview Tanda Tangan</h4>
						      </div>
						      <div class="modal-body">
						      </div>
						      <div class="modal-footer">
						        <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal"><i class="fa fa-times"></i> Cancel</button>
						        <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-save"></i> Submit</button>
						      </div>
						    </div>
						  </div>
						</div>
			        </form>
	    		</div>
	    	</div>
        </div>
        <!-- Javascript -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
        <script src="signature-pad.js"></script>
    </body>
</html>

Kesimpulan

Jadi untuk Membuat Signature Pad jQuery pada php, framework Laravel, dan framework CodeIgniter yang harus di perhatikan adalah di bagian controller, karena pada controller yang ada berbeda sesuai framework yang kita gunakan.

Sedangkan pada bagian view dan library javaScript yang kita gunakan akan tetap sama.

Bagikan Tutorial

Cara Membuat Captcha di CodeIgniter Tutorial Sebelumnya

Php Artisan Tidak Berfungsi di cPanel Tutorial Selanjutnya

Arie S

Web Programmer. Flutter Developer. Content Creator. Founder Ayongoding.com. Penyuka minuman sachet. Menulis pakai tangan kanan. Masih main mobilan remot. Dan pernah kuliah Sistem Informasi sampai lulus.

Baca Tutorial Pemrograman Lainnya Lanjutan:

Pemrograman Lainnya

Tentang Kami

Membuat Signature Pad jQuery (Tanda Tangan Digital)

Membuat Tanda Tangan Digital Laravel

Membuat Tanda Tangan Digital CodeIgniter

Kesimpulan

Arie S

Leave a Reply Cancel reply

Kategori Tutorial

Popular Posts

Membuat Register User Laravel

Membuat Login dan Register pada Laravel

Membuat Form Wizard Bootstrap

Information Links