| Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente |
| issue70:developpement_web_-_crud [2013/05/23 15:16] – [1] auntiee | issue70:developpement_web_-_crud [2013/05/23 15:50] (Version actuelle) – [15] auntiee |
|---|
| Il faut d’abord vérifier s'il est vide : | Il faut d’abord vérifier s'il est vide : |
| • Si c'est le cas, nous allons indiquer à l'utilisateur que rien n'est stocké. Sinon, nous allons regarder à l'intérieur. localStorage.length compte le nombre d'éléments dans le tableau ; si ça donne 0, il est vide. | • Si c'est le cas, nous allons indiquer à l'utilisateur que rien n'est stocké. Sinon, nous allons regarder à l'intérieur. localStorage.length compte le nombre d'éléments dans le tableau ; si ça donne 0, il est vide. |
| • S'il n'est pas vide, nous pouvons aller vérifier le contenu. Nous faisons d'abord une boucle sur tous les éléments. Nous aurons besoin de définir une variable pour la clé et l'objet à l'intérieur de la valeur. Ces variables sont très importantes pour l'ensemble de la fonction et du projet. La variable clé récupère simplement la clé depuis le stockage local à l'aide de l'objet clé (localStorage.key(i)). Le i en paramètre de l'objet key est l'entier qui est utilisé pour compter pendant la boucle. | • S'il n'est pas vide, nous pouvons aller vérifier le contenu. Nous faisons d'abord une boucle sur tous les éléments. Nous aurons besoin de définir une variable pour la clé et l'objet à l'intérieur de la valeur. Ces variables sont très importantes pour l'ensemble de la fonction et du projet. La variable clé récupère simplement la clé depuis le stockage local à l'aide de l'objet clé (localStorage.key(i)). Le i en paramètre de l'objet key est l'entier qui est utilisé pour compter pendant la boucle. |
| |
| La variable de valeur passe la clé à l'objet getItem, qui renvoie l'information stockée dans localStorage pour la clé donnée. La troisième variable, obj, modifie les informations « chaînifiées » pour les remettre sous forme de données JSON. JSON.parse va changer toutes les données JSON « chaînifiées » en JSON valide pour qu'on puisse y accéder à nouveau. | La variable de valeur passe la clé à l'objet getItem, qui renvoie l'information stockée dans localStorage pour la clé donnée. La troisième variable, obj, modifie les informations « chaînifiées » pour les remettre sous forme de données JSON. JSON.parse va changer toutes les données JSON « chaînifiées » en JSON valide pour qu'on puisse y accéder à nouveau. |
| If the key does start with “ubuVers”, it is one of ours, and we need to process it. The first thing we are going to do is console log the key and value out for debugging, then we are going to make a whole bunch of variables.** | If the key does start with “ubuVers”, it is one of ours, and we need to process it. The first thing we are going to do is console log the key and value out for debugging, then we are going to make a whole bunch of variables.** |
| |
| La prochaine instruction if sert à vérifier si la clé est l'une de nos clés « ubuVers ». Utiliser substring(x,y) permet d'extraire une partie d'une chaîne. x étant le caractère que vous souhaitez au début, et y le caractère que vous souhaitez à la fin. Le caractère de fin n'est pas inclus dans la chaîne extraite. Par exemple, substring(0,2) du mot chat renverra « ch ». Le caractère 0 étant c, et le 2 étant a. | La prochaine instruction if sert à vérifier si la clé est l'une de nos clés « ubuVers ». Utiliser substring(x,y) permet d'extraire une partie d'une chaîne. x étant le caractère que vous souhaitez au début et y, le caractère que vous souhaitez à la fin. Le caractère de fin n'est pas inclus dans la chaîne extraite. Par exemple, substring(0,2) du mot chat renverra « ch ». Le caractère 0 étant c, et le 2 étant a. |
| |
| Si la clé commence par « ubuVers », elle est à nous, et nous devons la traiter. La première chose que nous allons faire, c'est écrire la clé et la valeur dans la console pour le débogage, puis nous allons créer tout un tas de variables. | Si la clé commence par « ubuVers », elle est à nous et nous devons la traiter. La première chose que nous allons faire, c'est écrire la clé et la valeur dans la console pour le débogage, puis nous allons créer tout un tas de variables. |
| |
| ====== 11 ====== | ====== 11 ====== |
| Now we are going to jump into setting attributes and onClick functions for new buttons. Each button needs to be created per item so they can be attached to the item it will be editing/deleting. Each button is getting a new attribute with setAttribute. The attribute is ID, and is being set to its key. Then each button is getting an onclick command to interact with javascript when pressed. The delete button is running a function that will be calling a deleteItem() function with an ID being passed to it. The edit button is doing the same with a respective editItem() function.** | Now we are going to jump into setting attributes and onClick functions for new buttons. Each button needs to be created per item so they can be attached to the item it will be editing/deleting. Each button is getting a new attribute with setAttribute. The attribute is ID, and is being set to its key. Then each button is getting an onclick command to interact with javascript when pressed. The delete button is running a function that will be calling a deleteItem() function with an ID being passed to it. The edit button is doing the same with a respective editItem() function.** |
| |
| La première variable dans cette liste est l'élément dans lequel nous écrivons nos versions. Ensuite, nous créons un élément li pour placer notre version d'Ubuntu. Toujours rien de nouveau ici. Les troisième, quatrième et cinquième éléments de la liste de variables récupèrent les informations de version de nom et les formatent pour notre liste. obj est la variable que nous avons créée précédemment pour contenir la valeur de nos informations localStorage et à l'intérieur de laquelle se trouvent une version et son nom. obj.version et obj.release permettent de récupérer ces informations. Et enfin, mais ce n'est pas le moins important : itemDeleteButton, itemDeleteButtonText, itemEditButton et itemEditButtonText créent des éléments et des textes pour nos nouveaux boutons éditer et supprimer. | La première variable dans cette liste est l'élément dans lequel nous écrivons nos versions. Ensuite, nous créons un élément li pour placer notre version d'Ubuntu. Toujours rien de nouveau ici. Les troisième, quatrième et cinquième éléments de la liste de variables récupèrent les informations de version et de nom et les formatent pour notre liste. obj est la variable que nous avons créée précédemment pour contenir la valeur de nos informations localStorage et à l'intérieur de laquelle se trouvent une version et son nom. obj.version et obj.release permettent de récupérer ces informations. Enfin, mais ce n'est certainement pas le moins important : itemDeleteButton, itemDeleteButtonText, itemEditButton et itemEditButtonText créent des éléments et des textes pour nos nouveaux boutons éditer et supprimer. |
| |
| Maintenant, nous allons passer au réglage des attributs et aux fonctions onClick des nouveaux boutons. Chaque bouton doit être créé par élément afin qu'ils puissent être rattachés à l'élément qu'il va modifier/supprimer. Chaque bouton récupère un nouvel attribut avec setAttribute. L'attribut est ID, il est réglé à la valeur de sa clé. Ensuite, chaque bouton a une commande onclick pour interagir avec javascript lorsqu'il est pressé. Le bouton de suppression exécute une fonction appelée deleteItem() qui prend en attribut un ID. Le bouton Modifier fait pareil avec une fonction équivalente editItem(). | Maintenant, nous allons passer au réglage des attributs et aux fonctions onClick des nouveaux boutons. Chaque bouton doit être créé par élément afin qu'il puisse être rattaché à l'élément qu'il va modifier/supprimer. Chaque bouton récupère un nouvel attribut avec setAttribute. L'attribut est ID ; il est réglé à la valeur de sa clé. Ensuite, chaque bouton a une commande onclick pour interagir avec javascript lorsque l'on appuie dessus. Le bouton de suppression exécute une fonction appelée deleteItem() qui prend en attribut un ID. Le bouton Modifier fait pareil avec une fonction équivalente editItem(). |
| |
| ====== 12 ====== | ====== 12 ====== |
| The first thing we want to do is confirm that the user would like to really delete this item, so we ask them with a window.confirm() prompt. This prompt gives a cancel or ok option. If OK is pressed, it will come back into your JS as true; if cancel, it will come back as false. So if (true) { do this } else { nothing here }. If they do in fact want to delete the item, we simply pass the key that was supplied to the function into localStorage.removeItem(); and it is gone. We then let the user know it was successfully deleted and we refresh our list.** | The first thing we want to do is confirm that the user would like to really delete this item, so we ask them with a window.confirm() prompt. This prompt gives a cancel or ok option. If OK is pressed, it will come back into your JS as true; if cancel, it will come back as false. So if (true) { do this } else { nothing here }. If they do in fact want to delete the item, we simply pass the key that was supplied to the function into localStorage.removeItem(); and it is gone. We then let the user know it was successfully deleted and we refresh our list.** |
| |
| listItem.innerHTML et les boutons respectifs d'édition et de suppression mettent en place le code HTML des éléments entre les balises. Dans ce cas, c'est juste du texte, mais cela pourrait être du HTML si vous voulez. Ce qui nous amène finalement aux commandes listItem.appendChild(). Ces commandes ajoutent le bouton d'édition à la liste, puis celui de suppression et enfin ajoutent et affichent l'élément à notre liste. | listItem.innerHTML et les boutons respectifs d'édition et de suppression mettent en place le code HTML des éléments entre les balises. Dans ce cas, c'est juste du texte, mais cela pourrait être du HTML si vous le vouliez. Ce qui nous amène finalement aux commandes listItem.appendChild(). Ces commandes ajoutent le bouton d'édition à la liste, puis celui de suppression et enfin ajoutent et affichent l'élément dans notre liste. |
| |
| La fonction suivante (ci-dessus) est une fonction deleteItem que nous utilisons sur notre bouton de suppression. Cette fonction est assez simple. | La fonction suivante (ci-dessus) est une fonction deleteItem que nous utilisons sur notre bouton de suppression. Cette fonction est assez simple. |
| |
| La première chose que nous faisons est de confirmer que l'utilisateur souhaite vraiment supprimer cet article, en le lui demandant avec une invite window.confirm(). Ce message propose une option d'annulation ou OK. Si vous appuyez sur OK, il va revenir dans votre JS avec la valeur vrai ; si vous annulez, il reviendra avec faux. Donc, si (vrai) {faire ceci} sinon {ne rien faire}. Si l'utilisateur veut vraiment supprimer l'élément, nous passons simplement la clé qui a été fournie à la fonction à localStorage.removeItem(), et c'est parti. Nous confirmons alors à l'utilisateur qu'il a été supprimé avec succès et nous rafraîchissons notre liste. | La première chose que nous faisons est de confirmer que l'utilisateur souhaite vraiment supprimer cet élément, en le lui demandant avec une invite window.confirm(). Ce message propose une option d'annulation ou OK. Si vous appuyez sur OK, il va revenir dans votre JS avec la valeur vrai ; si vous annulez, il reviendra avec faux. Donc, si (vrai) {faire ceci} sinon {ne rien faire}. Si l'utilisateur veut vraiment supprimer l'élément, nous passons simplement la clé qui a été fournie à la fonction à localStorage.removeItem() et il n'existe plus. Nous confirmons alors à l'utilisateur qu'il a été supprimé avec succès et nous rafraîchissons notre liste. |
| |
| ====== 13 ====== | ====== 13 ====== |
| 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 ====== |
| 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 contient, pas 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 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 de votre site, et 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 ====== |
| 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. |
| |
