CakePHP

Sauvegarde automatique des formulaires

Catégorie : Portions de code
Il vous est probablement déjà arrivé de réaliser un document très bien rédigé, sur lequel vous avez passé plusieurs heures.
Et au juste moment de cliquer sur le bouton "valider", vous perdez votre connexion Internet et vous perdez tout. Ou encore, votre session a expiré et la validation ne peut se faire. Rebelote !

L'idéal pour parer à cela serait de sauvegarder automatiquement vos données à intervales réguliers.
Dans cet article, nous allons voir un système qui peut probablement être amélioré. Nous n'avons qu'une seule sauvegarde possible par article et par utilisateur, un nouvel article étant considéré comme un article avec un identifiant différent e non utilisé par un autre article (0 dans notre cas)

Tout d'abord, créez une base de données autosaves :

CREATE TABLE `autosaves` (
  `id` int(11) NOT NULL,
  `user_id` int(11) NOT NULL,
  `title` varchar(255) NOT NULL,
  `content` longtext NOT NULL,
  PRIMARY KEY  (`id`,`user_id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

Ici, nous n'avons que "title" et "content". Vous pouvez evidemment ajouter des champs.
Il vous faudra un modèle vous permettant de gérer cette base :

<?php
class Autosave extends AppModel {
    var $name = 'Autosave';
}
?>

Maintenant, vous avez de quoi sauvegarder vos données. Mettons cette possibilité en action !

Pour la suite de cet article, vous devez avoir installé script.aculo.us.
Dans un document javascript externe, vous placez la fonction suivante :

//Fonction de sauvegarde automatique
var editAutoSave = function editAutoSave() {
    freq = 2 * 1000 * 60;
   
    if (freq != 0) {
        if ($('ArticleId')) id = $('ArticleId').value;
        else id = 'new';
       
        new Ajax.Request('/articles/autosave',
            {
                asynchronous:true,
                method: 'post',
                postBody: 'id='+id+'&content='+$('ArticleContent').value+'&title='+$('ArticleTitle').value,
           
                onLoading:function(request) {
                    if ($('loading')) {
                        $('loading').style.display='block';
                    }
                },
                onSuccess:function(request) {
                    if ($('loading')) {
                        $('loading').style.display='none';
                    }
                    setTimeout("editAutoSave()", freq);
                },
               
                onFailure:function(request) {
                    if ($('loading')) {
                        $('loading').style.display='none';
                    }
                    alert('Une erreur a eu lieu. Impossible d\'effectuer la sauvegarde automatique');
                },
                asynchronus: true,
                evalScripts: false,
            }
        );
    }
};

Lorsque vous appellerez cette fonction, votre sauvegarde automatique sera effectuée. A la condition evidemment que vous ayez le formulaire suivant chargé (si vous souhaitez ajouter des champs, vous devez les ajouter dans le formulaire, mais aussi dans la fonction, au passage des variables à la page à appeller :

postBody: 'id='+id+'&content='+$('ArticleContent').value+'&title='+$('ArticleTitle').value,

Le formulaire :
<?php echo $html->formTag('/articles/edit');
echo $html->input('Article/title');
echo $html->input('Article/content');
echo $html->hidden('Article/id', $id);
echo $html->submit('Valider'); ?>
</form>

Il vous faut également un élément ayant pour identifiant "autosave" et vous permettant d'afficher une barre de chargemen pendant la sauvegarde automatique :
<div id="autosave"><?php echo $html->image('loading.gif'); ?></div>

Et bien evidemment, vous devez appeller votre fonction. Pour cela, dans le corps de votre page, placez :
<?php
$autosave = 2*1000*60;
echo $javascript->codeBlock('if (editAutoSave) { var time = setTimeout(function() { editAutoSave(); }, '.$autosave.'); }') ?>

Ici, nous avons reglé les intervales de sauvegarde à deux minutes. Si vous souhaitez modifier cet intervale, n'oubliez pas également de modifier la variable freq dans la fonction javascript définie plus haut.

Maintenant, vos données seront sauvegardées automatiquement ! Il vous faut, pour pouvoir les utiliser, les récupérer peut être !!

A ce niveau là, cela dépends beaucoup de la manière dont vous gerez vos articles. Vous pouvez, par exemple, spécifier une variable d'url qui, une fois définie, affichera non pas la version en ligne de votre article, mais la version sauvegardée automatiquement.

La seule chose à ne pas oublier étant de supprimer votre sauvegarde automatique lorsque vous validez effectivement l'article. Inutile de garder des sauvegardes inutiles :)

Ce système pourrait bien evidemment fortement être amélioré. Mais cela, je le laisse à votre imagination !
Et si vous voulez le tester en action, pourquoi ne pas rédigez des articles pour cakephp-fr ?

---

Identification

Pseudo :

Passe :

Statistiques

81 utilisateurs
30 articles
9 connectes

CakePHP-fr

• Contact
• Groupe de discussion

Actualites

PHP 4.4.6
L'équipe de développement de PHP ...
Poste le : 01/03/2007


Sortie de PHP 5.2.1
L'équipe de développement de PHP ...
Poste le : 09/02/2007


Cake 1.1.13.4450 et 1.2.0.4451alpha
PhpNut nous l'annonce aujourd'hui, les versions...
Poste le : 05/02/2007


Ouverture de Cakephp-fr
Après une beta-test qui peut vous parait...
Poste le : 01/02/2007


Beta-test
Cakephp-fr ouvre aujourd'hui en beta-test. Cett...
Poste le : 31/01/2007

Liens

• 
• Cake pour tous
• Cakebaker
• Blog référencement