Outils pour utilisateurs

Outils du site


issue70:developpement_web_-_crud

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision
Révision précédente
issue70:developpement_web_-_crud [2013/05/23 15:37] – [12] auntieeissue70:developpement_web_-_crud [2013/05/23 15:50] (Version actuelle) – [15] auntiee
Ligne 170: Ligne 170:
 After the fields are repopulated with the information, we set the submit button to display “Edit Version” instead of “Add”, and tie a key to its object with the value of the key we are editing. That way, when they press the submit button, it is doing the same thing it normally would, only this time it will trip our submit.key exists if statement in our storeData function and be set to the value of the key object in our submit button object. Pretty cool, eh?**  After the fields are repopulated with the information, we set the submit button to display “Edit Version” instead of “Add”, and tie a key to its object with the value of the key we are editing. That way, when they press the submit button, it is doing the same thing it normally would, only this time it will trip our submit.key exists if statement in our storeData function and be set to the value of the key object in our submit button object. Pretty cool, eh?** 
  
-La fonction editItem (ci-dessous) est presque aussi simple. Comme je l'ai mentionné plus tôt à quelques reprises dans d'autres fonctions, nous avons déjà mis en place ce qu'il faut pour l'édition. Ici, nous faisons juste le travail.+La fonction editItem (ci-dessous) est presque aussi simple. Comme je l'ai dit plus tôt à quelques reprises dans d'autres fonctions, nous avons déjà mis en place ce qu'il faut pour l'édition. Ici, nous faisons juste le travail.
  
 Dans ce cas, nous récupérons les informations de localStorage à partir de la clé qui a été passée à la fonction, tout comme nous l'avons fait pour chacune des lignes dans localStorage lorsque nous les affichions. Au lieu de les afficher, cette fois-ci nous réglons la valeur pour les champs de formulaire à l'information que nous avons récupérée. Dans ce cas, nous récupérons les informations de localStorage à partir de la clé qui a été passée à la fonction, tout comme nous l'avons fait pour chacune des lignes dans localStorage lorsque nous les affichions. Au lieu de les afficher, cette fois-ci nous réglons la valeur pour les champs de formulaire à l'information que nous avons récupérée.
  
-Après que les champs soient remplis avec les informations, nous réglons le bouton submit pour afficher « Modifier la version » au lieu de « Ajouter », et attachons une clé à son objet avec la valeur de la clé que nous éditons. De cette façon, quand on appuie sur le bouton d'envoi, il fait la même chose qu'il ferait normalement, mais cette fois il déclenchera notre instruction « if exists submit.key » dans notre fonction storeData et sera réglé à la valeur de l'objet clé de notre bouton. Plutôt cool, hein ?+Après que les champs soient remplis avec les informations, nous réglons le bouton submit pour afficher « Modifier la version » au lieu de « Ajouter », et attachons une clé à son objet avec la valeur de la clé que nous éditons. De cette façon, quand on appuie sur le bouton envoi, il fait la même chose qu'il ferait normalement, mais cette fois-ci, il déclenchera notre instruction « if submit.key exists » dans notre fonction storeData et sera réglé à la valeur de l'objet clé de notre bouton. Plutôt cool, hein ?
  
 ====== 14 ====== ====== 14 ======
Ligne 183: Ligne 183:
 Notre dernière fonction est une fonction très, très facile. Cependant, elle a été élaborée et remplie avec beaucoup de lignes supplémentaires dont elle n'a pas besoin, juste pour s'assurer que l'utilisateur veut réellement le faire. C'est la fonction pour vider le stockage local : http://pastebin.com/i9shwb7z Notre dernière fonction est une fonction très, très facile. Cependant, elle a été élaborée et remplie avec beaucoup de lignes supplémentaires dont elle n'a pas besoin, juste pour s'assurer que l'utilisateur veut réellement le faire. C'est la fonction pour vider le stockage local : http://pastebin.com/i9shwb7z
  
-La seule ligne dont nous avons vraiment besoin dans cette fonction est localStorage.clear(). Toutefois, lorsqu'elle est exécutée, cela efface tout ce qu'il contientpas question d'annuler. Ceci étant dit, la première chose que vous allez vouloir faire, c'est de vous assurer qu'il n'y a rien là-dedans au départ, et d'informer l'utilisateur si c'est le cas. S'il y a des choseset qu'il va supprimer les données qu'il contient, demandez à l'utilisateur s'il/elle veut vraiment le faire. L'important ici est que localStorage peut contenir des informations de votre siteet d'autres. Ce n'est pas comme un cookie qui peut être consulté seulement par votre nom de domaine - localStorage peut être lu et manipulé par n'importe quel site, n'importe quel domaine, n'importe quelle page. S'il veut vraiment l'effacer, on le supprime et on appelle notre fonction displayData() pour ne rien afficher dans notre liste.+La seule ligne dont nous avons vraiment besoin dans cette fonction est localStorage.clear(). Toutefois, lorsqu'elle est exécutée, cela efface tout ce qu'il contient et pas question d'annuler. Celà étant dit, la première chose que vous allez vouloir faire, c'est de vous assurer qu'il y a quelque chose là-dedans au départ, et d'informer l'utilisateur si ce n'est pas le cas. S'il y a des choses et qu'il va supprimer les données qu'il contient, demandez à l'utilisateur s'il/elle veut vraiment le faire. L'important ici est que localStorage peut contenir des informations provenant de votre site et d'autres aussi. Ce n'est pas comme un cookie qui peut être consulté seulement par votre nom de domaine - localStorage peut être lu et manipulé par n'importe quel site, n'importe quel domaine, n'importe quelle page. S'il veut vraiment l'effacer, on le supprime et on appelle notre fonction displayData() pour ne rien afficher dans notre liste.
  
 ====== 15 ====== ====== 15 ======
Ligne 194: Ligne 194:
 Remember to check back next month for some more web developer awesomeness. You can also check out, follow, fork, download, view revisions of the code on github: https://github.com/aliendev/FCM-UbuntuVers.**  Remember to check back next month for some more web developer awesomeness. You can also check out, follow, fork, download, view revisions of the code on github: https://github.com/aliendev/FCM-UbuntuVers.** 
  
-Maintenant que nous avons fini avec toutes nos fonctions, il est temps de dire au navigateur que faire quand il charge notre javascript : http://pastebin.com/VqzFiDYF+Maintenant que nous avons fini avec toutes nos fonctions, le moment est venu de dire au navigateur ce qu'il doit faire quand il charge notre javascript : http://pastebin.com/VqzFiDYF
  
-La première chose est une variable pour notre formulaire. Ensuite, nous attachons la fonction processForm à notre formulaire lorsqu'un utilisateur le valide. Pour terminer notre javascript pour ce mois, nous appelons la fonction displayData() de sorte que quand un utilisateur vient sur notre page, cela affiche toutes les informations qu'il avait déjà saisies dans notre formulaire dès son chargement.+La première chose est une variable pour notre formulaire. Ensuite, nous attachons la fonction processForm à notre formulaire lorsqu'un utilisateur le valide. Pour terminer sur javascript cette fois-ci, nous appelons la fonction displayData() de sorte que quand un utilisateur vient sur notre page, cela affichera toutes les informations qu'il avait déjà saisies dans notre formulaire dès son chargement.
  
-J'espère de tout cœur que vous avez apprécié l'article de ce mois-ci. J'ai l'intention de vous montrer comment convertir votre code en JQuery, ajouter un peu de « peps » sur notre page, et déplacer notre localStorage vers une véritable base de données. J'aimerais entendre vos suggestions pour de futurs articles de développeur web que vous souhaitez lire. N'hésitez pas à envoyer vos suggestions ou tout autre commentaire via Twitter : @aliendev2.+J'espère de tout cœur que vous avez apprécié l'article de ce mois-ci. J'ai l'intention de vous montrer comment convertir votre code en JQuery, ajouter un peu de « peps » sur notre page, et déplacer notre localStorage vers une véritable base de données. J'aimerais entendre vos suggestions pour de futurs articles de développeur web que vous souhaiteriez lire. N'hésitez pas à envoyer vos suggestions ou tout autre commentaire via Twitter : @aliendev2.
  
 N'oubliez pas de revenir le mois prochain pour encore plus de lumière sur le développement web. Vous pouvez également récupérer, suivre, améliorer, télécharger, visualiser les révisions du code sur github : https://github.com/aliendev/FCM-UbuntuVers. N'oubliez pas de revenir le mois prochain pour encore plus de lumière sur le développement web. Vous pouvez également récupérer, suivre, améliorer, télécharger, visualiser les révisions du code sur github : https://github.com/aliendev/FCM-UbuntuVers.
  
issue70/developpement_web_-_crud.1369316236.txt.gz · Dernière modification : 2013/05/23 15:37 de auntiee