Membuat tanda tangan digital dengan php dan jquery

Membuat tanda tangan digital dengan php dan jquery

Dalam tutorial ini, Kita akan belajar cara menggunakan Membuat tanda tangan digital dengan php dan jquery ajax dan menyimpan gambar ke database menggunakan PHP.

 

Unduh plugin E-Signature Pad Jquery dari sini http://keith-wood.name/signature.html

 

Langkah 1:

Buat file index.php dan masukkan kode berikut:

 

<!DOCTYPE html>

<html>

<head>

<title>PHP Signature Pad Example</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="asset/jquery.signature.min.js"></script>

<link rel="stylesheet" type="text/css" href="asset/jquery.signature.css">




<style>

.kbw-signature { width: 400px; height: 200px;}

#sig canvas{

width: 100% !important;

height: auto;

}

</style>




</head>

<body>




<div class="container">




<form method="POST" action="upload.php">




<h1>PHP Signature Pad Example</h1>




<div class="col-md-12">

<label class="" for="">Signature:</label>

<br/>

<div id="sig" ></div>

<br/>

<button id="clear">Clear Signature</button>

<textarea id="signature64" name="signed" style="display: none"></textarea>

</div>




<br/>

<button class="btn btn-success">Submit</button>

</form>




</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>

 

 

Langkah 2:

Buat file  upload.php

 

<?php




$folderPath = "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 "Signature Uploaded Successfully.";

?>

 

 

Langkah 3:

Buat direktori unggah tempat mengunggah file tanda tangan kami. Ini adalah direktori tujuan.

 

Akhirnya, Sekarang Anda dapat menjalankan aplikasi Anda, silahkan dicoba semmoga bermanfaat.

 

Baca Juga  cara copy paste excel ke table html

Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Need Help? Chat with us