├── .gitmodules
├── update-submodules.sh
├── schema.sql
├── views
    ├── regenerate.php
    └── accept.php
├── README.md
├── index.php
├── lib
    └── save-signature.php
└── documentation.md


/.gitmodules:
--------------------------------------------------------------------------------
1 | [submodule "signature-pad"]
2 | 	path = signature-pad
3 | 	url = git@github.com:thomasjbradley/signature-pad.git
4 | 


--------------------------------------------------------------------------------
/update-submodules.sh:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env bash
2 | 
3 | # Updates all the submodules
4 | git submodule foreach git pull origin master
5 | 


--------------------------------------------------------------------------------
/schema.sql:
--------------------------------------------------------------------------------
 1 | CREATE TABLE IF NOT EXISTS `signatures` (
 2 |   `id` int(11) NOT NULL AUTO_INCREMENT,
 3 |   `signator` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 4 |   `signature` text COLLATE utf8_unicode_ci NOT NULL,
 5 |   `sig_hash` varchar(128) COLLATE utf8_unicode_ci NOT NULL,
 6 |   `ip` varchar(46) COLLATE utf8_unicode_ci NOT NULL,
 7 |   `created` int(11) NOT NULL,
 8 |   PRIMARY KEY (`id`)
 9 | ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1;
10 | 


--------------------------------------------------------------------------------
/views/regenerate.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | // The basic Signature Pad regeneration HTML
 3 | //  with the addition of PHP to write out the signator's name and signing date
 4 | ?>
 5 | <div class="sigPad signed">
 6 |   <div class="sigWrapper">
 7 |   <div class="typed"><?php echo htmlentities($name, ENT_NOQUOTES, 'UTF-8'); ?></div>
 8 |     <canvas class="pad" width="198" height="55"></canvas>
 9 |   </div>
10 |   <p><?php echo htmlentities($name, ENT_NOQUOTES, 'UTF-8'); ?><br><?php echo date('F j, Y', $created); ?></p>
11 | </div>
12 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Saving Signatures Using PHP & MySQL
 2 | 
 3 | A sample application demonstrating how to save the output of Signature Pad into a MySQL database using PHP.
 4 | 
 5 | ---
 6 | 
 7 | ## Sample App Docs
 8 | 
 9 | #### [☛ Documentation](documentation.md)
10 | 
11 | ---
12 | 
13 | ## Signature Pad
14 | 
15 | - [Documentation](https://github.com/thomasjbradley/signature-pad/blob/gh-pages/documentation.md)
16 | - [Source](https://github.com/thomasjbradley/signature-pad)
17 | 
18 | ---
19 | 
20 | ## License
21 | 
22 | This sample app is licensed under The Unlicense (aka: public domain).
23 | 
24 | All dependencies: Signature Pad, jQuery, json2.js, and FlashCanvas retain their own licenses.
25 | 


--------------------------------------------------------------------------------
/views/accept.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | // The basic Signature Pad HTML template
 3 | //  with the addition of server side validation error messages
 4 | ?>
 5 | <form method="post" action="index.php" class="sigPad">
 6 |   <?php if (isset($errors['output'])) : ?>
 7 |   <p class="error">Please sign the document</p>
 8 |   <?php endif; ?>
 9 |   <?php if (isset($errors['name'])) : ?>
10 |   <p class="error">Please enter your name</p>
11 |   <?php endif; ?>
12 |   <label for="name"<?php echo (isset($errors['name'])) ? ' class="error"' : ''; ?>>Print your name</label>
13 |     <input type="text" name="name" id="name" class="name<?php echo (isset($errors['name'])) ? ' error' : ''; ?>" value="<?php echo $name; ?>">
14 |   <p class="drawItDesc">Draw your signature</p>
15 |   <ul class="sigNav">
16 |     <li class="drawIt"><a href="#draw-it" >Draw It</a></li>
17 |     <li class="clearButton"><a href="#clear">Clear</a></li>
18 |   </ul>
19 |   <div class="sig sigWrapper">
20 |     <div class="typed"></div>
21 |     <canvas class="pad" width="198" height="55"></canvas>
22 |     <input type="hidden" name="output" class="output">
23 |   </div>
24 |   <button type="submit">I accept the terms of this agreement.</button>
25 | </form>
26 | 


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | // To keep the code as clean as possible, separation of concerns and all that,
 4 | //  put the main logic for this application in a file separate from the HTML
 5 | require_once 'lib/save-signature.php';
 6 | 
 7 | ?><!DOCTYPE html>
 8 | <head>
 9 |   <meta charset="utf-8">
10 |   <title>Saving a Signature &middot; Signature Pad</title>
11 |   <link rel="stylesheet" href="signature-pad/build/jquery.signaturepad.css">
12 |   <!--[if lt IE 9]><script src="signature-pad/build/flashcanvas.js"></script><![endif]-->
13 |   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
14 | </head>
15 | <body>
16 |   <?php
17 |     // A small trigger to flip between showing the signature form and the regeneration screen
18 |     if ($show_form) {
19 |       require_once 'views/accept.php';
20 |     } else {
21 |       require_once 'views/regenerate.php';
22 |     }
23 |   ?>
24 |   <script src="signature-pad/build/jquery.signaturepad.min.js"></script>
25 |   <?php
26 |     // Another trigger to write the appropriate Javascript to the page:
27 |     //  If we are showing the form, write the initialization code
28 |     //  If we are showing the final signature, write the regeneration code
29 |     if ($show_form) :
30 |   ?>
31 |   <script>
32 |     $(document).ready(function () {
33 |       $('.sigPad').signaturePad({drawOnly : true});
34 |     });
35 |   </script>
36 |   <?php else : ?>
37 |   <script>
38 |     $(document).ready(function () {
39 | 	  // Write out the complete signature from the database to Javascript
40 |       var sig = <?php echo $output; ?>;
41 |       $('.sigPad').signaturePad({displayOnly : true}).regenerate(sig);
42 |     });
43 |   </script>
44 |   <?php endif; ?>
45 |   <script src="signature-pad/build/json2.min.js"></script>
46 | </body>
47 | 


--------------------------------------------------------------------------------
/lib/save-signature.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | /*
 4 |   The main logic of the application. There are a few steps here:
 5 |    1. Get the user input from the form
 6 |    2. Confirm the form was submitted
 7 |    3. Validate the form submission
 8 |    4. Open the database connection
 9 |    5. Insert the information into the database
10 |    6. Trigger the display of the signature regeneration
11 | */
12 | 
13 | // Tracks what fields have validation errors
14 | $errors = array();
15 | // Default to showing the form
16 | $show_form = true;
17 | 
18 | // 1. Get the input from the form
19 | //  Using the PHP filters are the most secure way of doing it
20 | $name = filter_input(INPUT_POST, 'name', FILTER_SANITIZE_STRING);
21 | $output = filter_input(INPUT_POST, 'output', FILTER_UNSAFE_RAW);
22 | 
23 | // 2. Confirm the form was submitted before doing anything else
24 | if ($_SERVER['REQUEST_METHOD'] == 'POST') {
25 | 
26 |   // 3. Validate that a name was typed in
27 |   if (empty($name)) {
28 |     $errors['name'] = true;
29 |   }
30 | 
31 |   // 3. Validate that the submitted signature is in an acceptable format
32 |   if (!json_decode($output)) {
33 |     $errors['output'] = true;
34 |   }
35 | 
36 |   // No validation errors exist, so we can start the database stuff
37 |   if (empty($errors)) {
38 |     // My database credentials are stored in environment variables for portability
39 |     $dsn = getenv('SigPad-DSN');
40 |     $user = getenv('SigPad-DB-User');
41 |     $pass = getenv('SigPad-DB-Pass');
42 | 
43 |     // 4. Open a connection to the database using PDO
44 |     $db = new PDO($dsn, $user, $pass);
45 | 	// Make sure we are talking to the database in UTF-8
46 |     $db->exec('SET NAMES utf8');
47 | 
48 |     // Create some other pieces of information about the user
49 |     //  to confirm the legitimacy of their signature
50 |     $sig_hash = sha1($output);
51 |     $created = time();
52 |     $ip = $_SERVER['REMOTE_ADDR'];
53 | 
54 |     // 5. Use PDO prepare to insert all the information into the database
55 |     $sql = $db->prepare('
56 |       INSERT INTO signatures (signator, signature, sig_hash, ip, created)
57 |       VALUES (:signator, :signature, :sig_hash, :ip, :created)
58 |     ');
59 |     $sql->bindValue(':signator', $name, PDO::PARAM_STR);
60 |     $sql->bindValue(':signature', $output, PDO::PARAM_STR);
61 |     $sql->bindValue(':sig_hash', $sig_hash, PDO::PARAM_STR);
62 |     $sql->bindValue(':ip', $ip, PDO::PARAM_STR);
63 |     $sql->bindValue(':created', $created, PDO::PARAM_INT);
64 |     $sql->execute();
65 | 
66 |     // 6. Trigger the display of the signature regeneration
67 |     $show_form = false;
68 |   }
69 | }
70 | 


--------------------------------------------------------------------------------
/documentation.md:
--------------------------------------------------------------------------------
  1 | # Saving Signatures with PHP & MySQL
  2 | 
  3 | **A small PHP tutorial on how to capture the signature from Signature Pad and store it in a MySQL database, for later retrieval.**
  4 | 
  5 | **This tutorial depends on Signature Pad. If you don’t know what that is go [check out Signature Pad, for capturing electronic signatures](https://github.com/thomasjbradley/signature-pad).**
  6 | 
  7 | ---
  8 | 
  9 | *This tutorial is just a small overview of the important pieces of information from the downloadable sample application. [Check out the sample app itself](https://github.com/thomasjbradley/saving-signatures-sample/), there are lots of comments in the code to help you out.*
 10 | 
 11 | ## Sample Application Files
 12 | 
 13 | ```
 14 | saving-signatures-sample/
 15 |  |- index.php
 16 |  |- lib/
 17 |  |   |- save-signature.php
 18 |  |- views/
 19 |  |   |- accept.php
 20 |  |   |- regenerate.php
 21 |  |- signature-pad/
 22 |  |   |- …
 23 | ```
 24 | 
 25 | - `index.php` contains the basic HTML template and a few `if-statements` to hide/show different pieces of HTML and Javascript.
 26 | - `lib/save-signature.php` is the meat and potatoes, the controller: it gets the content from the form, validates it, and saves it to the database.
 27 | - `views/accept.php` is the basic Signature Pad HTML template for [accepting a signature](https://github.com/thomasjbradley/signature-pad/blob/gh-pages/documentation.md#accepting-signatures), with the addition of some serverside validation code.
 28 | - `views/regenerate.php` is the basic Signature Pad HTML template for [regenerating a signature](https://github.com/thomasjbradley/signature-pad/blob/gh-pages/documentation.md#regenerating-signatures), with the addition of a little PHP to output the signator and date.
 29 | - `signature-pad` is just a clone of the complete Signature Pad Git repository. The sample application only uses files from the `build` sub-folder.
 30 | 
 31 | ## Getting the Signature
 32 | 
 33 | Signature Pad submits the signature, along with the rest of the form submission, inside a hidden input field.
 34 | 
 35 | *From `views/accept.php`:*
 36 | 
 37 | ```html
 38 | <form method="post" action="index.php">
 39 |   ⋮
 40 |   <input type="hidden" name="output">
 41 |   ⋮
 42 | </form>
 43 | ```
 44 | 
 45 | From this hidden field we can capture the signature and store it in the database.
 46 | 
 47 | The easiest way to get the signature using PHP is with the `$_POST` super global.
 48 | 
 49 | ```php
 50 | <?php
 51 | $sig = $_POST['output'];
 52 | ```
 53 | 
 54 | Using the `$_POST` array isn’t secure (and creates a few other problems when there are validation errors and we try to keep information in the form). In PHP, the best way to get information from a form is using [PHP’s filter functions](http://php.net/filter). They provide a more secure way to grab user input and strip out unwanted information. We also won’t get any PHP error messages if we try to access the user input and the form hasn’t been submittted.
 55 | 
 56 | *From `lib/save-signature.php`:*
 57 | 
 58 | ```php
 59 | <?php
 60 | $output = filter_input(INPUT_POST, 'output', FILTER_UNSAFE_RAW);
 61 | ```
 62 | 
 63 | We can use `FILTER_UNSAFE_RAW` for the signature itself, because we don’t actually want to strip any information from the signature. If you want to be even more specific try using `FILTER_VALIDATE_REGEX`.
 64 | 
 65 | ## Validating the Signature
 66 | 
 67 | Probably the best way to validate the signature would be to run it through `json_decode()` and see if it can be decoded.
 68 | 
 69 | *From `lib/save-signature.php`:*
 70 | 
 71 | ```php
 72 | <?php
 73 | if (!json_decode($output)) {
 74 |   $errors['output'] = true;
 75 | }
 76 | ```
 77 | 
 78 | **Don’t forget, you should also validate the name to make sure one was entered.**
 79 | 
 80 | ## Setting Up the Database
 81 | 
 82 | The database to store the signature only needs to hold a few pieces of information: the signator’s name and the signature. For legal reasons, it is best to store more information about the signature: at least a hash of the signature, the signator’s IP address, and the time the signature was written.
 83 | 
 84 | For more information about electronic signature legallity, check out your country’s regulations. [Wikipedia has a good list of electronic signature regulations](http://en.wikipedia.org/wiki/Electronic_signature).
 85 | 
 86 | ### Sample Table Setup
 87 | 
 88 | <table>
 89 |   <thead>
 90 |     <tr>
 91 |       <th scope="col">Name</th>
 92 |       <th scope="col">Data-Type</th>
 93 |       <th scope="col">Length</th>
 94 |       <th scope="col">What’s it For?</th>
 95 |     </tr>
 96 |   </thead>
 97 |   <tbody>
 98 |     <tr>
 99 |       <td>id</td>
100 |       <td>int</td>
101 |       <td>11</td>
102 |       <td>Primary key, auto increment</td>
103 |     </tr>
104 |     <tr>
105 |       <td>signator</td>
106 |       <td>varchar</td>
107 |       <td>255</td>
108 |       <td>Holds the user input for the `name` field</td>
109 |     </tr>
110 |     <tr>
111 |       <td>signature</td>
112 |       <td>text</td>
113 |       <td></td>
114 |       <td>Holds the signature in its JSON form</td>
115 |     </tr>
116 |     <tr>
117 |       <td>sig_hash</td>
118 |       <td>varchar</td>
119 |       <td>128</td>
120 |       <td>Holds a SHA1 hash of the JSON signature</td>
121 |     </tr>
122 |     <tr>
123 |       <td>ip</td>
124 |       <td>varchar</td>
125 |       <td>46</td>
126 |       <td>Holds the signator’s IP address</td>
127 |     </tr>
128 |     <tr>
129 |       <td>created</td>
130 |       <td>int</td>
131 |       <td>11</td>
132 |       <td>The UNIX timestamp of when the signature was saved</td>
133 |     </tr>
134 |   </tbody>
135 | </table>
136 | 
137 | ## Saving to the Database
138 | 
139 | After everything is validated, we can save the signature to the database. It’s easiest to just store the JSON representation of the signature in the database. If you want to create a graphic file, [check out how to convert the signature to an image](https://github.com/thomasjbradley/signature-to-image).
140 | 
141 | It’s best to use PHP’s [PDO](http://php.net/pdo) for connecting to databases. By using `PDO::prepare()`, we can help protect against SQL injection attacks.
142 | 
143 | *From `lib/save-signature.php`:*
144 | 
145 | ```php
146 | <?php
147 | // Open the database connection
148 | $db = new PDO($dsn, $user, $pass);
149 | // Make sure we are talking to the database in UTF-8
150 | $db->exec('SET NAMES utf8');
151 | 
152 | // Create some other pieces of information about the user
153 | //  to confirm the legitimacy of their signature
154 | $sig_hash = sha1($output);
155 | $created = time();
156 | $ip = $_SERVER['REMOTE_ADDR'];
157 | 
158 | // Use PDO prepare to insert all the information into the database
159 | $sql = $db->prepare('
160 |   INSERT INTO signatures (signator, signature, sig_hash, ip, created)
161 |   VALUES (:signator, :signature, :sig_hash, :ip, :created)
162 | ');
163 | $sql->bindValue(':signator', $name, PDO::PARAM_STR);
164 | $sql->bindValue(':signature', $output, PDO::PARAM_STR);
165 | $sql->bindValue(':sig_hash', $sig_hash, PDO::PARAM_STR);
166 | $sql->bindValue(':ip', $ip, PDO::PARAM_STR);
167 | $sql->bindValue(':created', $created, PDO::PARAM_INT);
168 | $sql->execute();
169 | ```
170 | 
171 | ## Regenerating the Signature
172 | 
173 | One of the easiest ways to regenerate the signature is to use PHP to write out some Javascript onto one of your pages. When the page loads it will have a native Javascript varible containing all the signature information and can use Signature Pad to regenerate the display.
174 | 
175 | ```php
176 | <script>
177 |   $(document).ready(function () {
178 |     // Write out the complete signature from the database to Javascript
179 |     var sig = <?php echo $output; ?>;
180 |     $('.sigPad').signaturePad({displayOnly : true}).regenerate(sig);
181 |   });
182 | </script>
183 | ```
184 | 
185 | ## What Else Do We Need?
186 | 
187 | Well, this application is far from complete—even though it’s fully functional. It’s a simple tutorial on how to capture the signature. Some of the missing things are:
188 | 
189 | 1. User authentication, sign-in/sign-out, or unique passkeys.
190 | 2. HTTPS—critical for capturing signatures online.
191 | 3. It might be nice to encrypt the signatures in the database.
192 | 
193 | And likely more.
194 | 


--------------------------------------------------------------------------------