| Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente |
| issue68:tutoriel_-_devweb_-_crud [2013/03/17 13:45] – [9] fredphil91 | issue68:tutoriel_-_devweb_-_crud [2013/03/25 07:42] (Version actuelle) – [5] fredphil91 |
|---|
| Notre application n'a pas beaucoup avancé pour l'instant. Mais ce mois-ci nous allons regrouper beaucoup de choses ensemble et faire tourner la première version. Allez, c'est parti ! | Notre application n'a pas beaucoup avancé pour l'instant. Mais ce mois-ci nous allons regrouper beaucoup de choses ensemble et faire tourner la première version. Allez, c'est parti ! |
| |
| Tout d'abord, allons voir le fichier index.html dans le répertoire racine. Nous avons besoin de créer une section pour que les données soient écrites. Juste avant la fin de l'article (</article>), créez une nouvelle section contenant un H3 et une liste non ordonnée. Donnez à la section et à la liste des identifiants uniques et au H3 du texte qui décrit ce qui sera affiché. Votre code doit se terminer à peu près comme ceci : | Tout d'abord, allons voir le fichier index.html dans le répertoire racine. Nous avons besoin de créer une section pour que les données y soient écrites. Juste avant la fin de l'article (</article>), créez une nouvelle section contenant un H3 et une liste non ordonnée. Donnez à la section et à la liste, des identifiants uniques et, au H3, du texte qui décrit ce qui sera affiché. Votre code doit se terminer à peu près comme ceci : |
| |
| <section id="affichageVersionsUbuntu"> | <section id="affichageVersionsUbuntu"> |
| var ubuVersNumValue = ge('ubuVersNum').value** | var ubuVersNumValue = ge('ubuVersNum').value** |
| |
| C'est tout pour le HTML. Nous avons besoin de revenir sur le fichier main.js dans notre dossier js. Trouvez votre fonction processForm(), et nous allons commencer par examiner une astuce. Parfois, il vous arrivera de ne pas savoir ce que vous pouvez faire avec certains objets. Si vous regardez votre code, vous remarquerez que nous avons passé l'ID du formulaire lui-même à la fonction processForm. Nous n'en avons pas vraiment besoin pour obtenir l'information puisque nous avons également donné des ID aux champs de saisie de texte, ce qui en facilite beaucoup la gestion. | C'est tout pour le HTML. Nous avons besoin de revenir sur le fichier main.js dans notre dossier js. Trouvez votre fonction processForm() et nous allons commencer par examiner une astuce. Parfois, il vous arrivera de ne pas savoir ce que vous pouvez faire avec certains objets. Si vous regardez votre code, vous remarquerez que nous avons passé l'ID du formulaire lui-même à la fonction processForm. Nous n'en avons pas vraiment besoin pour obtenir l'information puisque nous avons également donné des ID aux champs de saisie de texte, ce qui en facilite beaucoup la gestion. |
| |
| Grâce à notre fonction ge, nous allons pouvoir obtenir l'objet à partir des ID ubuVersNum et ubuVersName. Nous mettrons ceux-ci dans deux variables, l'un dans ubuVersNumValue et l'autre dans ubuVersNameValue respectivement. Simplement placer les objets dans des champs de texte ne sera pas suffisant ; nous avons besoin de savoir ce qu'ils contiennent. Nous voulons leur valeur. Dans le cas des numéros de version, la déclaration de variable devrait ressembler à quelque chose comme ceci : | Grâce à notre fonction ge, nous allons pouvoir obtenir l'objet à partir des ID ubuVersNum et ubuVersName. Nous mettrons ceux-ci dans deux variables, l'un dans ubuVersNumValue et l'autre dans ubuVersNameValue respectivement. Placer simplement les objets dans des champs de texte ne sera pas suffisant ; nous avons besoin de savoir ce qu'ils contiennent. Nous voulons leur valeur. Dans le cas des numéros de version, la déclaration de variable devrait ressembler à quelque chose comme ceci : |
| |
| var ubuVersNumValue = ge('ubuVersNum').value | var ubuVersNumValue = ge('ubuVersNum').value |
| La seule chose nouvelle dans cette déclaration est le morceau .value. .value est en fait une propriété de l'objet champ de texte. Après avoir récupéré les valeurs dans des variables, nous allons les afficher dans la console pour s'assurer que tout fonctionne. Le bloc de code se trouve ci-dessus. | La seule chose nouvelle dans cette déclaration est le morceau .value. .value est en fait une propriété de l'objet champ de texte. Après avoir récupéré les valeurs dans des variables, nous allons les afficher dans la console pour s'assurer que tout fonctionne. Le bloc de code se trouve ci-dessus. |
| |
| Maintenant, vous pouvez remplir le formulaire et l'envoyer, et vous devriez voir dans la console ce que vous indiquez dans les deux champs de formulaire. Bien que ce soit assez cool au début, ce n'est pas très productif visuellement pour quelqu'un d'autre que nous-mêmes. Nous allons toujours écrire dans la console, mais c'est juste pour nous, pas nos visiteurs/utilisateurs. Nous avons besoin d'afficher ce genre de choses sur notre page. Vous vous souvenez de la section que nous avons écrite un peu plus tôt ? Voici venu le moment de l'utiliser. | Maintenant, vous pouvez remplir le formulaire et l'envoyer, et vous devriez voir dans la console ce que vous indiquez dans les deux champs de formulaire. Bien que ce soit assez cool au début, ce n'est pas très productif visuellement pour quelqu'un d'autre que nous-mêmes. Nous allons toujours écrire dans la console, mais c'est juste pour nous, pas pour nos visiteurs/utilisateurs. Nous avons besoin d'afficher ce genre de chose sur notre page. Vous vous souvenez de la section que nous avons créée un peu plus tôt ? Voici venu le moment de l'utiliser. |
| |
| ====== 4 ====== | ====== 4 ====== |
| } | } |
| |
| Si la variable ubuVersNumVariable ne contient rien, alors nous allons afficher un message à l'écran. Nous devons déclarer de nouvelles variables, ces variables contiendront des éléments HTML. Nous commençons par récupérer l'élément (ge) pour le UL que nous avons créé dans notre section. Ensuite, nous devons créer un élément LI. Nous allons également mettre en forme le texte (page suivante, en haut à gauche) que nous voulons afficher dans cette liste. | Si la variable ubuVersNumVariable n'est pas vide, alors nous allons afficher un message à l'écran. Nous devons déclarer de nouvelles variables, ces variables contiendront des éléments HTML. Nous commençons par récupérer l'élément (ge) pour l'UL que nous avons créée dans notre section. Ensuite, nous devons créer un élément LI. Nous allons également mettre en forme le texte (page suivante, en haut à gauche) que nous voulons afficher dans cette liste. |
| |
| ====== 5 ====== | ====== 5 ====== |
| Let's first put that text inside the listItem. The object's property for this is innerHTML. Using innerHTML will put anything inside of the </li>innerHTML</li>. The next thing we are going to need to do (shown below) is append this child element to its parent, which is the UL. So, the list variable holds the parent object, and we are going to append its child, listItem: list.appendChild(listItem).** | Let's first put that text inside the listItem. The object's property for this is innerHTML. Using innerHTML will put anything inside of the </li>innerHTML</li>. The next thing we are going to need to do (shown below) is append this child element to its parent, which is the UL. So, the list variable holds the parent object, and we are going to append its child, listItem: list.appendChild(listItem).** |
| |
| Remarquez que nous utilisons à nouveau le modèle d'objet document pour créer un li. Cette ligne utilise en fait DOM pour créer un élément. Donc, en lui donnant l'argument de « li », cette ligne le prendra et fera un <li></li> et le préparera pour nos besoins. La variable suivante prend simplement nos variables et les sépare par des virgules. La première variable ne doit plus vous surprendre maintenant, alors nous allons poursuivre. Si vous exécutez ce code, rien ne se passera. Bien sûr que rien ne se passera, nous n'avons rien mis nulle part, nous avons juste créé des variables. | Remarquez que nous utilisons à nouveau le modèle d'objet document pour créer un li. Cette ligne utilise en fait DOM pour créer un élément. Donc, en lui donnant l'argument de « li », cette ligne le prendra et fera un <li></li> et le préparera pour nos besoins. La variable suivante prend simplement nos variables et les sépare par des « : ». La première variable ne doit plus vous surprendre maintenant, alors nous allons poursuivre. Si vous exécutez ce code, rien ne se passera. Bien sûr que rien ne se passera, nous n'avons rien mis nulle part, nous avons juste créé des variables. |
| |
| Nous allons d'abord placer ce texte dans le listItem. La propriété de l'objet pour cela est innerHTML. L'utilisation de innerHTML placera des choses dans la balise <li>innerHTML</li>. La prochaine étape que nous devons francchir (ci-dessous) est d'ajouter cet élément enfant à son parent, qui est UL. Ainsi, la variable liste contient l'objet parent, et nous allons ajouter son enfant, listItem : list.appendChild(listItem). | Nous allons d'abord placer ce texte dans le listItem. La propriété de l'objet pour cela est innerHTML. L'utilisation de innerHTML placera des choses dans la balise <li>innerHTML</li>. La prochaine étape que nous devons franchir (ci-dessous) est d'ajouter cet élément enfant à son parent, qui est UL. Ainsi, la variable liste contient l'objet parent et nous allons ajouter son enfant, listItem : list.appendChild(listItem). |
| |
| ====== 6 ====== | ====== 6 ====== |
| This would be a good point to teach you a little about versioning and making sure you are utilizing the power of git. Like I said, git is versioning software that allows you to keep track of your app and where it has gone. It also allows you to use GitHub and share your code, as well as look at the history of your code easily. First open up a terminal and apt-get install git. While that is installing, go ahead and go to github.com and sign up for an account if you haven't already. After you get done signing up, create a new repository and call it FCM-UbuntuVers-Tut.** | This would be a good point to teach you a little about versioning and making sure you are utilizing the power of git. Like I said, git is versioning software that allows you to keep track of your app and where it has gone. It also allows you to use GitHub and share your code, as well as look at the history of your code easily. First open up a terminal and apt-get install git. While that is installing, go ahead and go to github.com and sign up for an account if you haven't already. After you get done signing up, create a new repository and call it FCM-UbuntuVers-Tut.** |
| |
| Maintenant, si vous exécutez ce code, l'écran ne se met pas à jour car nous avons enlevé la fonctionnalité par défaut du formulaire, et tout ce que nous mettons dans les champs du formulaire affiche sous forme de liste dans notre section pour les versions d'Ubuntu. Vous pouvez aussi modifier l'instruction if (qui vérifie ubuVersNumValue) pour vérifier aussi le nom de version si vous voulez que ça soit encore mieux. Peut-être même une alerte pour vous dire ce que vous devez remplir en cas d'erreur. | Maintenant, si vous exécutez ce code, l'écran ne se met pas à jour, car nous avons enlevé la fonctionnalité par défaut du formulaire, et tout ce que nous mettons dans les champs du formulaire affiche sous forme de liste dans notre section pour les versions d'Ubuntu. Vous pouvez aussi modifier l'instruction if (qui vérifie ubuVersNumValue) pour vérifier aussi le nom de version si vous voulez que ce soit plus élégant encore. Peut-être même une alerte pour vous dire ce que vous devez remplir en cas d'erreur. |
| |
| Ce serait un bon point pour vous en apprendre un peu plus sur la gestion des versions et pour vérifier que vous utilisez la puissance de git. Comme je l'ai dit, git est un logiciel de gestion de versions qui vous permet de suivre votre application et son évolution. Il vous permet également d'utiliser GitHub et partager votre code, et aussi de consulter facilement l'historique de votre code. D'abord, ouvrez un terminal et apt-get install git. Pendant l'installtaion, allez sur github.com et créez votre compte si vous n'en avez pas déjà un. Après vous être inscrit, créez un nouveau dépôt et appelez-le FCM-UbuntuVers-Tut. | C'est le moment ou jamais de vous en apprendre un peu plus sur la gestion des versions et pour vérifier que vous utilisez la puissance de git. Comme je l'ai dit, git est un logiciel de gestion de versions qui vous permet de suivre votre application et son évolution. Il vous permet également d'utiliser GitHub et de partager votre code, ainsi que de consulter facilement l'historique de votre code. D'abord, ouvrez un terminal et apt-get install git. Pendant l'installation, allez sur github.com et créez votre compte si vous n'en avez pas déjà un. Après vous être inscrit, créez un nouveau dépôt et appelez-le FCM-UbuntuVers-Tut. |
| |
| ====== 7 ====== | ====== 7 ====== |
| pwd | pwd |
| |
| Cela doit afficher le répertoire dans lequel vous vous trouvez. Une fois que vous êtes sûr d'être dans le bon répertoire, il faut régler des paramètres globaux et initialiser git pour ce répertoire. | Cela affichera le répertoire dans lequel vous vous trouvez. Une fois que vous êtes sûr d'être dans le bon répertoire, il faut régler des paramètres globaux et initialiser git pour ce répertoire. |
| |
| git config --global user.name "Nom complet" | git config --global user.name "Nom complet" |
| Remember to check back next month. We will be going over stuff like local storage. You can also check out all the code at github: https://github.com/aliendev/FCM-UbuntuVers** | Remember to check back next month. We will be going over stuff like local storage. You can also check out all the code at github: https://github.com/aliendev/FCM-UbuntuVers** |
| |
| Remplacez NomUtilisateur par le nom d'utilisateur que vous avez utilisé lors de votre inscription à GitHub, et FCM-UbuntuVers-Tut doit être le nom que vous avez attribué à votre dépôt. Repo est un autre nom pour un dépôt (« repository »). Vous venez en fait de mettre en place un dépôt pour votre code pour ce projet. Chacun de vos projets devra avoir son propre dépôt. Lorsque vous envoyez le repo sur github, il est public sauf indication contraire. Alors faites attention à ce que vous mettez là-bas. | Remplacez NomUtilisateur par le nom d'utilisateur que vous avez utilisé lors de votre inscription à GitHub, et FCM-UbuntuVers-Tut doit être le nom que vous avez attribué à votre dépôt. Repo est un autre nom pour un dépôt (« repository »). Vous venez en fait de mettre en place un dépôt pour votre code pour ce projet. Chacun de vos projets devra avoir son propre dépôt. Lorsque vous envoyez le repo sur github, il est public sauf indication contraire. Alors faites attention à ce que vous envoyez là-bas. |
| |
| N'oubliez pas de revenir le mois prochain. Nous irons voir des choses comme le stockage local. Vous pouvez également consulter l'ensemble du code sur github : https://github.com/aliendev/FCM-UbuntuVers | N'oubliez pas de revenir le mois prochain. Nous irons voir des choses comme le stockage local. Vous pouvez également consulter l'ensemble du code sur github : https://github.com/aliendev/FCM-UbuntuVers |
| |
