issue70:developpement_web_-_crud
Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente | ||
issue70:developpement_web_-_crud [2013/05/21 21:50] – [10] fredphil91 | issue70:developpement_web_-_crud [2013/05/23 15:50] (Version actuelle) – [15] auntiee | ||
---|---|---|---|
Ligne 6: | Ligne 6: | ||
Check out your own localStorage, | Check out your own localStorage, | ||
- | Ce mois-ci, nous allons parler de localStorage. localStorage est intégré dans les navigateurs pour que vous puissiez y stocker des informations que vous pourrez récupérer plus tard. Ceci dit, des sites web peuvent également l' | + | Ce mois-ci, nous allons parler de localStorage. localStorage est intégré dans les navigateurs pour que vous puissiez y stocker des informations que vous pourrez récupérer plus tard. Celà dit, des sites web peuvent également l' |
- | localStorage est un outil très puissant si vous apprenez à l' | + | localStorage est un outil très puissant si vous apprenez à l' |
- | Découvrez votre propre localStorage, | + | Découvrez votre propre localStorage, |
====== 2 ====== | ====== 2 ====== | ||
Ligne 42: | Ligne 42: | ||
Ce bouton est assez simple. La fonction onClick, comme attribut, indique à JavaScript d' | Ce bouton est assez simple. La fonction onClick, comme attribut, indique à JavaScript d' | ||
- | Maintenant que nous avons un bouton « Vider stockage local », amusons-nous avec JavaScript. En partant du début, nous avons un message console pour nous dire que notre fichier js est connecté. Si les fonctions ne contiennent rien de nouveau, je les mentionnerai juste avec leur code. | + | Maintenant que nous avons un bouton « Vider stockage local », amusons-nous avec JavaScript. En partant du début, nous avons un message console pour nous dire que notre fichier js est connecté. Si les fonctions ne contiennent rien de nouveau, je ne ferai que les mentionner |
console.log(' | console.log(' | ||
Ligne 80: | Ligne 80: | ||
D' | D' | ||
- | La partie suivante de la fonction sert à vérifier que nos champs de formulaire ne sont pas vides, et à avertir l' | + | La partie suivante de la fonction sert à vérifier que nos champs de formulaire ne sont pas vides et à avertir l' |
- | Lorsque | + | Quand nous avons fini de travailler avec les données, nous allons effacer les champs à l'aide de ge(' |
====== 6 ====== | ====== 6 ====== | ||
Ligne 94: | Ligne 94: | ||
La première chose que nous allons faire est de créer une clé. L' | La première chose que nous allons faire est de créer une clé. L' | ||
- | • si ce n'est pas le cas, elle va créer un ID, qui commencera toujours par ubuVers. En effet, nous pouvons ainsi nous assurer que les données que nous sommes sur le point de récupérer et d' | + | • si ce n'est pas le cas, elle va créer un ID, qui commencera toujours par ubuVers. En effet, nous pouvons ainsi nous assurer que les données que nous sommes sur le point de récupérer et d' |
- | • sinon, elle va définir l'ID égal à cette clé. Nous sommes alors prêts à éditer les versions dans notre liste, si nous avons besoin. Nous verrons cette action un peu plus tard. | + | • sinon, elle va définir l'ID égal à cette clé-là. Nous sommes alors prêts à éditer les versions dans notre liste, si nous en avons besoin. Nous verrons cette action un peu plus tard. |
====== 7 ====== | ====== 7 ====== | ||
Ligne 102: | Ligne 102: | ||
The second bit of information getting passed to setItem() is the data we put the version and release into. The data type for that is known as many things, but, in JavaScript’s case, it is called json. Using the JSON object, we are going to “stringify” the information going into the localStorage. This means that it is creating a string out of the json object. This is important if you want to be able to access that data later, otherwise it will go in as [object Object].** | The second bit of information getting passed to setItem() is the data we put the version and release into. The data type for that is known as many things, but, in JavaScript’s case, it is called json. Using the JSON object, we are going to “stringify” the information going into the localStorage. This means that it is creating a string out of the json object. This is important if you want to be able to access that data later, otherwise it will go in as [object Object].** | ||
- | La suite de cette fonction donne des noms de variables aux éléments de formulaire, et ajoute leurs valeurs dans un dictionnaire, rien de bien spécial. Après avoir écrit ces valeurs dans la console pour être sûrs que nous faisons ce que nous pensons que nous faisons, nous avons une ligne de code très particulière. « localStorage.setItem(id, | + | La suite de cette fonction donne des noms de variables aux éléments de formulaire et ajoute leurs valeurs dans un dictionnaire |
- | La seconde information passée à setItem() représente les données dans lesquelles | + | La seconde information passée à setItem() représente les données dans lesquelles nous mettons le numéro de version et son nom. Le type de données utilisé pour cela peut porter plusieurs noms, mais en JavaScript on l' |
====== 8 ====== | ====== 8 ====== | ||
Ligne 128: | Ligne 128: | ||
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' | • Si c'est le cas, nous allons indiquer à l' | ||
- | • S'il n'est pas vide, nous pouvons aller vérifier le contenu. Nous faisons d' | + | • S'il n'est pas vide, nous pouvons aller vérifier le contenu. Nous faisons d' |
La variable de valeur passe la clé à l' | La variable de valeur passe la clé à l' | ||
Ligne 137: | Ligne 137: | ||
If the key does start with “ubuVers”, | If the key does start with “ubuVers”, | ||
- | La prochaine instruction if sert à vérifier si la clé est l'une de nos clés « ubuVers ». Utiliser substring(x, | + | La prochaine instruction if sert à vérifier si la clé est l'une de nos clés « ubuVers ». Utiliser substring(x, |
- | 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 ====== | ||
- | The first variable in this list is the list element that we have been writing our versions to. Next we are creating an li element to hold our ubuntu version. Still nothing new here. The third, fourth, and fifth items on the variable list are grabbing our version and release information and formatting it for our list. obj was the variable we made earlier to hold the value from our localStorage information and inside of that was was a release and a version. obj.version and obj.release is how we get that information back out. And last but certainly not least: itemDeleteButton, | + | **The first variable in this list is the list element that we have been writing our versions to. Next we are creating an li element to hold our ubuntu version. Still nothing new here. The third, fourth, and fifth items on the variable list are grabbing our version and release information and formatting it for our list. obj was the variable we made earlier to hold the value from our localStorage information and inside of that was was a release and a version. obj.version and obj.release is how we get that information back out. And last but certainly not least: itemDeleteButton, |
- | 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/ | + | 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/ |
+ | |||
+ | La première variable dans cette liste est l' | ||
+ | |||
+ | 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' | ||
====== 12 ====== | ====== 12 ====== | ||
- | listItem.innerHTML and the respective edit and delete buttons are setting up the elements’ HTML between the tags. In this case it is just text, but could be full out HTML if you wanted it to be. Which finally brings us to listItem.appendChild() commands. These commands are adding the edit button to the list item, then delete, and finally adding and displaying the list item in our list. | + | **listItem.innerHTML and the respective edit and delete buttons are setting up the elements’ HTML between the tags. In this case it is just text, but could be full out HTML if you wanted it to be. Which finally brings us to listItem.appendChild() commands. These commands are adding the edit button to the list item, then delete, and finally adding and displaying the list item in our list. |
The next function we have now (shown above) is a deleteItem function that we used on our delete button. This function is fairly straightforward. | The next function we have now (shown above) is a deleteItem function that we used on our delete button. This function is fairly straightforward. | ||
- | 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(); | + | 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(); |
+ | |||
+ | listItem.innerHTML et les boutons respectifs d' | ||
+ | |||
+ | 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' | ||
====== 13 ====== | ====== 13 ====== | ||
- | The editItem function (shown below) | + | **The editItem function (shown below) |
In this case, we are grabbing the information from localStorage based on the key that was passed to the function, just like we did for each of the rows in localStorage when we were displaying them. Instead of displaying them, though, we are setting the value for the form fields to the information we get back. | In this case, we are grabbing the information from localStorage based on the key that was passed to the function, just like we did for each of the rows in localStorage when we were displaying them. Instead of displaying them, though, we are setting the value for the form fields to the information we get back. | ||
- | After the fields are repopulated with the information, | + | After the fields are repopulated with the information, |
+ | |||
+ | La fonction editItem (ci-dessous) est presque aussi simple. Comme je l'ai dit plus tôt à quelques reprises dans d' | ||
+ | |||
+ | 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' | ||
+ | |||
+ | Après que les champs soient remplis avec les informations, | ||
====== 14 ====== | ====== 14 ====== | ||
- | Our last function is a very, very easy function. However, it has been elaborated and filled up with a lot of extra lines it doesn’t need, just to make sure the user actually wants to do it. It is the clear local storage button function: http:// | + | **Our last function is a very, very easy function. However, it has been elaborated and filled up with a lot of extra lines it doesn’t need, just to make sure the user actually wants to do it. It is the clear local storage button function: http:// |
- | The only line we really need in this whole function is localStorage.clear(). However, when this is run, it will clear everything in it, no going back. With that said, the first thing you are going to want to do, is make sure that there is anything in there in the first place and let the user know if there isn’t. If there is, and it will be removing data from it, ask the user if he/she really wants to do this. The importance here is that localStorage can contain information from your site, and from others. It isn’t like a cookie that can be accessed only by your domain name – localStorage can be read and manipulated by any site, any domain, any page. If they do indeed want to delete, remove it and call our displayData() function to display nothing in our list. | + | The only line we really need in this whole function is localStorage.clear(). However, when this is run, it will clear everything in it, no going back. With that said, the first thing you are going to want to do, is make sure that there is anything in there in the first place and let the user know if there isn’t. If there is, and it will be removing data from it, ask the user if he/she really wants to do this. The importance here is that localStorage can contain information from your site, and from others. It isn’t like a cookie that can be accessed only by your domain name – localStorage can be read and manipulated by any site, any domain, any page. If they do indeed want to delete, remove it and call our displayData() function to display nothing in our list.** |
+ | |||
+ | 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' | ||
+ | |||
+ | La seule ligne dont nous avons vraiment besoin dans cette fonction est localStorage.clear(). Toutefois, lorsqu' | ||
====== 15 ====== | ====== 15 ====== | ||
- | Now that we are done with all of our functions, it is time to tell the browser what to do when it loads our javascript: http:// | + | **Now that we are done with all of our functions, it is time to tell the browser what to do when it loads our javascript: http:// |
The first thing is a variable for our form. Next, we are attaching the processForm function to our form when a user submits it. To end our javascript goodness for the month, we are calling the displayData() function so that when a user comes to our page, it will pull up any information he previously entered into our form when it loads. | The first thing is a variable for our form. Next, we are attaching the processForm function to our form when a user submits it. To end our javascript goodness for the month, we are calling the displayData() function so that when a user comes to our page, it will pull up any information he previously entered into our form when it loads. | ||
Ligne 172: | Ligne 192: | ||
I very much hope you enjoyed this month’s article. I am planning on showing you how to convert your code to JQuery, add a little bit of “zaz” to our page, and moving our localStorage to a real database. I would love to hear your suggestions for any future web developer articles you would like to see. Feel free to shoot over your suggestions or any other comments via twitter: @aliendev2. | I very much hope you enjoyed this month’s article. I am planning on showing you how to convert your code to JQuery, add a little bit of “zaz” to our page, and moving our localStorage to a real database. I would love to hear your suggestions for any future web developer articles you would like to see. Feel free to shoot over your suggestions or any other comments via twitter: @aliendev2. | ||
- | 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:// | + | 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:// |
+ | |||
+ | 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:// | ||
+ | |||
+ | La première chose est une variable pour notre formulaire. Ensuite, nous attachons la fonction processForm à notre formulaire lorsqu' | ||
+ | |||
+ | J' | ||
+ | |||
+ | N' | ||
issue70/developpement_web_-_crud.1369165850.txt.gz · Dernière modification : 2013/05/21 21:50 de fredphil91