issue68:tutoriel_-_devweb_-_crud
Différences
Ci-dessous, les différences entre deux révisions de la page.
Prochaine révision | Révision précédente | ||
issue68:tutoriel_-_devweb_-_crud [2012/12/31 16:19] – créée andre_domenech | issue68:tutoriel_-_devweb_-_crud [2013/03/25 07:42] (Version actuelle) – [5] fredphil91 | ||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
- | 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? | + | ====== 1 ====== |
+ | |||
+ | **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 (</ | 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 (</ | ||
Ligne 8: | Ligne 10: | ||
< | < | ||
+ | |||
+ | </ | ||
+ | |||
+ | Notre application n'a pas beaucoup avancé pour l' | ||
+ | |||
+ | Tout d' | ||
+ | |||
+ | <section id=" | ||
+ | |||
+ | < | ||
+ | |||
+ | < | ||
</ | </ | ||
- | 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. | + | ====== 2 ====== |
+ | |||
+ | **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: | 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(' | ||
+ | |||
+ | 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' | ||
+ | |||
+ | Grâce à notre fonction ge, nous allons pouvoir obtenir l' | ||
var ubuVersNumValue = ge(' | var ubuVersNumValue = ge(' | ||
- | 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. | + | ====== 3 ====== |
- | 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/ | + | **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 |
- | 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. | + | 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/ |
+ | |||
+ | La seule chose nouvelle dans cette déclaration est le morceau .value. .value est en fait une propriété de l' | ||
+ | |||
+ | Maintenant, vous pouvez remplir le formulaire et l' | ||
+ | |||
+ | ====== 4 ====== | ||
+ | |||
+ | **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 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' | ||
if (ubuVersNumValue != '' | if (ubuVersNumValue != '' | ||
} | } | ||
- | If the ubuVersNumVariable | + | Si la variable |
- | 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 ' | + | ====== 5 ====== |
- | Let's first put that text inside | + | **Notice we are using the document |
- | 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 | + | Let's first put that text inside |
- | 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' | + | Remarquez que nous utilisons à nouveau le modèle d' |
- | 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: | + | Nous allons d' |
+ | |||
+ | ====== 6 ====== | ||
+ | |||
+ | **Now, if you run this code, the screen doesn' | ||
+ | |||
+ | 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' | ||
+ | |||
+ | Maintenant, si vous exécutez ce code, l' | ||
+ | |||
+ | 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' | ||
+ | |||
+ | ====== 7 ====== | ||
+ | |||
+ | **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 | pwd | ||
Ligne 51: | Ligne 102: | ||
git add . | git add . | ||
- | git commit -a -m " | + | git commit -a -m " |
+ | Maintenant, l' | ||
- | 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. | + | pwd |
+ | |||
+ | Cela affichera le répertoire dans lequel vous vous trouvez. Une fois que vous êtes sûr d' | ||
+ | |||
+ | git config --global user.name "Nom complet" | ||
+ | |||
+ | git config --global user.email courriel@addresse.com | ||
+ | |||
+ | git init | ||
+ | |||
+ | git add . | ||
+ | |||
+ | git commit -a -m " | ||
+ | |||
+ | ====== 8 ====== | ||
+ | |||
+ | **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: | git remote add origin git@github.com: | ||
+ | |||
+ | 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: | ||
git push origin master | 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. | + | ====== 9 ====== |
+ | |||
+ | **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:// | ||
+ | |||
+ | Remplacez NomUtilisateur par le nom d' | ||
- | 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:// | + | N' |
issue68/tutoriel_-_devweb_-_crud.1356967157.txt.gz · Dernière modification : 2012/12/31 16:19 de andre_domenech