Signature Pad PHP + MySQL + jQuery

Jquery signature pad save image PHP + MySQL; Through this tutorial, i will show you how to create signature pad using jQuery + PHP + MySQL. And save signature image into MySQL database.

For PHP + MySQL signature pad tutorial, i will use keith-wood jquery ui signature pad for create your signature on it. And store signature image into database and PHP project directory.

PHP + MySQL + jQuery Signature Pad

Step 1 – Create PHP Project
Step 2 – Create Database Table And Connect App to DB
Step 3 – Create Signature Pad HTML Form
Step 4 – Store Signature Image In MySQL DB

Step 1 – Create PHP Project

In step 1, Navigate to your local web server directory. And inside this directory, create one directory. And you can name this folder anything.

Here, I will “demo” the name of this folder. Then open this folder in any text editor (i will use sublime text editor).

Step 2 – Create Database Table And Connect App to DB

In step 2, you need to create database and table. So run the following sql query to create database and table:

CREATE DATABASE my_db;

CREATE TABLE `image` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(30) NOT NULL,
  PRIMARY KEY (`id`),
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Then create a php file that named mydbCon. Which is used to connect phpmyadmin mysql database to project (demo).

So, now create mydbCon file and add the below given code into your file:

<?php

    $hName='localhost'; // host name

    $uName='root';   // database user name

    $password='';   // database password

    $dbName = "my_db"; // database name

    $conn= mysqli_connect($hName,$uName,$password,"$dbName");

      if(!$conn){
          die('Could not Connect MySql Server:' .mysql_error());
      }
?>

Step 3 – Create Signature Pad HTML Form

In step 3, create a php file that named index.php. This file will display singnature pad form and send load signatures into MySQL db Now, you need to add the following simple signature pad form code into index.php file:

<!DOCTYPE html>
<html>
<head>
    <title>PHP + MySQL Signature Pad Example - Laratutorials.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="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 + MySQL Signature Pad Example - Laratutorials.com</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>

Step 4 – Store Signature Image In MySQL DB

In step 4, create one php file, which name upload.php. And add the following code into it:

<?php
    include_once 'mydbCon.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;

    $sql="INSERT INTO images(name) VALUES('$file')";

    mysqli_query($conn,$sql);
      
    file_put_contents($file, $image_base64);

    echo "Signature Uploaded Successfully.";
?>

The upload file code will store signature image into MySQL database.

Conclusion

Signature pad save image PHP + MySQL +Jquery; Through this tutorial,You have learned how to create signature pad using jQuery + PHP + MySQL and store signature pad image into database.