Our application hasn't gotten very far as of yet. However, this month we are going to tie a lot of stuff together and finish the first instance of it up. Let's jump right into it, Shall we? First, let's jump over to our index.html file in the root directory. We need to create a section for data to get written out. Right before the end of the article (</article>), make a new section containing an H3 and an unordered list. Give the section and the list unique ID's and the H3 some text that defines what will be displayed. Your code should end up something like the following: <section id=“ubuntuVersionsDisplay”> <h3>Ubuntu Versions</h3> <ul id=“ubuntuVersionsDisplayList”></ul> </section>

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 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”>

 <h3>Versions d'Ubuntu</h3>

 <ul id="listeVersionsUbuntu"></ul>

</section>

That's it for the HTML. We need to jump back over to the main.js file in our js directory. Find your processForm() function, and we will start out by examining a hint. Sometimes you will run into not knowing what you can do with certain objects. If you look back at your code, you will notice that we passed the id of the form itself to the processForm function. We don't really need it for getting the information because we also gave IDs to the input text fields, which makes it much easier to manage. Using our ge function, we are going to get the object with the id's ubuVersNum and ubuVersName. We will put those into two different variables, one should be in ubuVersNumValue and the other in ubuVersNameValue accordingly. Simply throwing the objects of the text fields won't really help us though; we need to know what was written in them. We need the value. In the case of the version numbers, variable declaration should look something like this: 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.

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

The only thing new in this statement is the .value piece. .value is actually a property of the text field object. After we get values into variables, let's console log them out and make sure we have everything working. Shown above is the code block. Now you can fill out the form and submit it, and you should see whatever you put in the two form fields in the console. Although this is pretty cool at first, it isn't very productive visually to anyone other than ourselves. We are going to continually write to the console, but that is just for us, not our visitors/users. We need to display this stuff on our page. Remember that section we made a bit earlier? Now is the time to use it.

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 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.

Continuing in the processForm function… We are going to continue right after the last block of code where we made the contents of our form into variables. We are going to start out with a new if statement to make sure something got written in the number field. if (ubuVersNumValue != '') { } If the ubuVersNumVariable does not equal nothing, then we want to display the information to the screen. We need to declare some new variables, these variables are going to hold some HTML elements. We need to start out by getting the element (ge) for the UL we created in our section. Then we need to create an element for an LI. We are also going to format the text (next page, top left) we want to enter into that list.

Continuons la fonction processForm… Nous allons reprendre juste après le dernier bloc de code où nous avons placé le contenu de notre formulaire dans des variables. Nous allons commencer une nouvelle instruction if pour s'assurer que le champ du numéro a bien été rempli.

if (ubuVersNumValue != '') {

  }

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.

Notice we are using the document object model again to create an li. That line actually uses DOM to create an element. So, by giving it the argument of 'li', that line will take it and make a <li></li> and ready it for our needs. The next variable is just taking our variables and separating them via a colon. The first variable should have been no surprise by now, so we are going to move on. If you run that code, nothing will happen. Of course nothing will happen, we didn't put anything anywhere, we just made some variables. 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 « : ». 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 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).

Now, if you run this code, the screen doesn't refresh because we took away the default functionality of the form, and whatever we put in the form fields will just start displaying as a list under our heading for the Ubuntu Versions. You could also make the if statement (that checks for the ubuVersNumValue) to also check for the version name if you want to get real fancy. Maybe even an alert to tell you what you need to fill out if you get it wrong. 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 ce soit plus élégant encore. Peut-être même une alerte pour vous dire ce que vous devez remplir en cas d'erreur.

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.

By now, your git software should be done installing. In your terminal, change your directory (cd) to where you have been coding your application. You can make sure you are in the right directory by using the command: pwd It should display what directory you are currently in. Once you have confirmed you’re in the right directory, we need to set up some global stuff and initialize git for the directory. git config –global user.name “Full Name” git config –global user.email email@address.com git init git add . git commit -a -m “initial commit”

Maintenant, l'installation du logiciel git devrait être terminée. Dans votre terminal, allez dans le répertoire (cd) où se trouve le code de votre application. Vous pouvez vous assurer que vous êtes dans le bon répertoire en utilisant la commande :

pwd

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.email courriel@addresse.com

git init

git add .

git commit -a -m “commit initial”

Future initializations will need only the last three commands. The first two were for setup purposes. Now let's get all that over to github. git remote add origin git@github.com:UserName/FCM-UbuntuVers-Tut.git git push origin master

Les fois suivantes, il ne faudra que les trois dernières commandes. Les deux premières servaient à la configuration. Maintenant, nous allons envoyer tout cela vers github.

git remote add origin git@github.com:NomUtilisateur/FCM-UbuntuVers-Tut.git

git push origin master

Replace UserName with the username you used when you signed up for GitHub, and FCM-UbuntuVers-Tut should be the name you assigned to your repo. Repo is a short term for repository. You have essentially set up a repository for your code for this project. Each of your projects should get its own repository. When you push the repo to github, it is then public unless otherwise specified. So be careful about what you put up there. 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 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