Post Detail

Laravel

Cara Membuat Tandatangan ( Signature Pad ) di Laravel

by Abdul Rohim
26 November 2020
5528 views

Hai Kawan,

Pada tulisan ini saya akan menjelaskan sedikit mengenai bagaimana cara membuat tandatangan (signature) di Laravel dan menyimpan nya difile storage . . ^_^

Pastikan sudah mempunyai project laravelnya terlebih dahulu..

Pertama, kita buat sebuah routes nya terlebih dahulu

routes web

Kedua, kita buat sebuah Controller nya, bisa dengan menggunakan perintah

php artisan make:controller SignaturePadController

Ketiga, kita tambahkan pada file app/Http/Controller/SignaturePadController

pada function index(), kita tambahkan seperti ini

index

Keempat, buat sebuah view, untuk namanya sendiri silahkan sesuai keinginan masing-masing pada contoh ini saya membuat file view dengan nama signaturePad.blade.php lalu kita tambahkan seperti dibawah ini

Untuk Head nya seperti ini

<head>
    <title>Laravel TTD </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>

Dan untuk Body nya seperti dibawah ini

<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>ASEPIT.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="">Silahkan membuat tandatangan sesuai 
                                 yang diinginkan :
                            </label>
                            <br/>
                            <div id="sig" ></div>
                            <br/>
                            <button id="clear" class="btn btn-danger btn-sm">Hapus 
                                 Tandatangan
                            </button>
                            <textarea id="signature64" name="signed" style="display: 
                             none">
                            </textarea>
                        </div>
                        <br/>
                        <button class="btn btn-success">Simpan</button>
                    </form>
               </div>
           </div>
       </div>
   </div>
</div>

Untuk action form diatas mengarah ke routes nya sudah kita buat di awal

post

Dan untuk javascriptnya seperti dibawah ini

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

Untuk keseluruhan view nya seperti ini

<!DOCTYPE html>
<html>
<head>
    <title>Laravel TTD </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>ASEPIT.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="">Silahkan membuat tandatangan sesuai 
                               yang diinginkan :</label>
                            <br/>
                            <div id="sig" ></div>
                            <br/>
                            <button id="clear" class="btn btn-danger btn-sm">Hapus 
                               Tandatangan</button>
                            <textarea id="signature64" name="signed" style="display: 
                               none"></textarea>
                        </div>
                        <br/>
                        <button class="btn btn-success">Simpan</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>

Kelima, pada app/Http/Controllers/SignaturePadController tambahkan seperti ini

upload-controller