Iphone - Romain Tiennot

Cet article montre comment créer une signature en PHP. Cela peut être très utile si vous voulez numéraux les accords pour des devis ou la remise d'objet par exemple. Je n'ai aucune idée ci cela a une valeur niveau juridique, mais c'est très pratique puis on fait des économies de papier

Je me suis basé sur le code de Thomas J Bradley pour créer ce mini formulaire.

Le code se découpe en deux parties :

Le formulaire avec le nom de la personne et la signature
Le résultat de la validation de la signature

Il utilise du Jquery pour effectuer la signature. L'avantage de passer par du Jquery et non du Java, c'est que l'on peut utiliser cette solution sur les tablettes ou smartphone tactile.

Voici le code du formulaire :

<!DOCTYPE html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Signature pour Laurent Vernoux</title>
  <style type="text/css">
    body { font: normal 100.01%/1.375 "Helvetica Neue",Helvetica,Arial,sans-serif; }
  </style>
  <link rel="stylesheet" href="style/style.css">
  <!--[if lt IE 9]><script src="/style/flashcanvas.js"></script><![endif]-->
  <script src="style/jquery.min.js"></script>
</head>
<body>
  <form method="post" action="result.php" class="sigPad">
    <label for="name">Veuillez saisir votre nom :</label>
    <input type="text" name="name" id="name" class="name">
    <p class="drawItDesc">Veuillez signer :</p>
    <ul class="sigNav">
      <li class="drawIt"><a href="#draw-it" >Signature</a></li>
      <li class="clearButton"><a href="#clear">Effacer</a></li>
    </ul>
    <div class="sig sigWrapper">
      <div class="typed"></div>
      <canvas class="pad" width="198" height="55"></canvas>
      <input type="hidden" name="output" class="output">
    </div>
    <button type="submit">J'accepte les conditions generale.</button>
  </form>
 
  <script src="style/jquery.signaturepad.min.js"></script>
  <script>
    $(document).ready(function() {
      $('.sigPad').signaturePad({drawOnly:true});
    });
  </script>
  <script src="style/json2.min.js"></script>
</body>

Voici le code du résultat du formulaire :

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Signature pour Laurent Vernoux</title>
  <style type="text/css">
    body { font: normal 100.01%/1.375 "Helvetica Neue",Helvetica,Arial,sans-serif; }
    p { margin: 0.515em 0 0; padding: 0 6px; }
  </style>
  <script src="style/jquery.min.js"></script>
</head>
<body>
	<?php
		$output=$_POST['output'];
		$name=$_POST['name'];
		$output = str_replace("\\", "", $output);
	?>
 
  <div class="sigPad signed">
    <div class="sigWrapper">
      <canvas class="pad" width="198" height="55"></canvas>
    </div>
		<p>
			<?
			echo $name;
			?>
		</p>
	</div>
  <script type="text/javascript" src="style/jquery.signaturepad.min.js"></script>
  <script type="text/javascript">
  		var sig =  '<?php echo $output; ?>' ; 
    $(document).ready(function() {
      $('.sigPad').signaturePad({displayOnly:true}).regenerate(sig);
    });
  </script>
</body>

Vous pouvez voir la démo sur cette page : http://tiennot.fr/signature.
À bientôt Romain

PingDom banniere J'ai voulu, par curiosité, tester la disponibilité de mon site internet malgré qu'il soit héberger chez un hébergeur ultra connu...
Je me suis donc inscrit sur le site de PingDom.com qui nous propose de tester notre site web de différente façon :

Web checks
Network checks
Email checks

Dans mon cas, j'utilise seulement le "Web checks" :

En cas d'erreur, vous avez la possibilité de recevoir une alerte par email et/ou SMS et/ou application Iphone.
Et oui, mon site a été victime de 4 crashs depuis le 4 avril (date d'inscription sur PingDom)

Pingdom propose une application sur IPhone (gratuit) et sous Android.

L'avantage de ce site est qu'il permet de sortir quelque statistique (temps de down, up, temps d'accès...). Attention, la version gratuite propose de vérifier seulement un site web/serveur sinon il existe deux forfaits à 10$ et 40$ (quand même...) pour vérifier jusqu’à 30 sites. Voici quelque graph: