What is a CRUD? CRUD is an acronym for Create, Remove, Update, and Display: the main basic premise for any app. Remember, a program is just a way to create, edit, and display data. It really doesn’t matter if it is an office app, or even a game, all it is doing is taking data inputed, and either creating, removing, or updating the current sets of data. To start off we need an idea. We could go with the usual suspects: to-do lists, recipes, and shopping lists. I was thinking of something a little more specific to Ubuntu, an app that tells us versions of Ubuntu. This is an idea that has plenty of possibilities to grow with, so let’s get started. Side note: if you are having troubles choosing a good text editor to code with, I would like to suggest my favorite. Sublime Text 2 is a very feature-packed and stable editor and I tend to have a lot of fun with it. I also rely on it a lot. Here is a URL to a quick review I did a while back, if you are interested in reading more about it: http://www.aliendev.com/programming/review-sublime-text-2
Qu'est-ce qu'un CRUD ? CRUD est un acronyme pour Create [Créer], Remove [Supprimer], Update [Modifier], Display [Afficher]: le principal postulat de base de toute application.
Rappelez-vous, un programme n'est qu'une façon de créer, modifier et afficher des données. Ça n'a pas vraiment d'importance qu'il s'agisse d'une application de bureau, ou même d'un jeu, tout ce qu'il fait est de prendre des données en entrée et crée, détruit ou met à jour les ensembles de données actuels.
Pour commencer nous avons besoin d'une idée. Nous pourrions choisir les suspects habituels : des listes de tâches, des recettes et des listes de courses. Je pensais à quelque chose d'un peu plus spécifique à Ubuntu, une application qui nous dit les versions d'Ubuntu. C'est une idée qui a beaucoup de possibilités d'élargissement ; commençons donc avec elle.
NB: si vous n'arrivez pas à choisir un bon éditeur de texte pour coder, je voudrais proposer mon préféré. Sublime Text 2 est un éditeur stable qui est très riche en fonctionnalités et, le plus souvent, je m'amuse beaucoup avec lui. Je lui fais aussi très confiance. Voici une adresse vers une critique rapide que j'ai faite il y a peu de temps, si vous voulez en savoir plus: http://www.aliendev.com/programming/review-sublime-text-2
First we need to think about the information that we need to keep. The version number and names are good enough to start off with. Now that we know what we are going to do, we need to get set up… Create your working folder; I’m going to call mine FCM-UbuntuVers. Inside of that, create your css, images, js, and js/libs folders. Now create some blank files: index.html in the root, style.css in css, and main.js in the js folder. Below is a screenshot of the directory map to give you the big picture. Now, we can get to some coding. I like to start out with my standard HTML5 template. The template is pretty straightforward assuming you have even a little experience with HTML5. First there is the doctype, with the value of just html telling the document object that it is, you guessed it, HTML5. There is a UTF-8 declaration, title tag, some meta data, stylesheet call, the body of the HTML, our header, article, and footer tags, and of course the main js call.
D'abord, nous devons réfléchir aux informations dont nous avons besoin. Le numéro de version et les noms sont de bons candidats pour démarrer le projet. Maintenant que nous savons ce que nous allons faire, nous devons le mettre en place… Créez votre dossier de travail ; je vais appeler le mien FCM-UbuntuVers. À l'intérieur de celui-ci, créez vos dossiers css, images, js et js/libs. Maintenant, créez quelques fichiers vides : index.html à la racine, style.css dans css, et main.js dans le dossier js. Ci-dessous une capture d'écran de l'arborescence pour vous donner une vue d'ensemble.
Maintenant, nous pouvons faire du codage. Je voudrais commencer avec mon modèle standard HTML5. Le modèle est assez simple, en supposant que vous ayez quand même un peu d'expérience avec HTML5. Il y a d'abord le doctype, avec la valeur unique html pour dire à l'objet document qu'il est, vous l'aurez deviné, en HTML5. Il y a une déclaration UTF-8, une balise de titre, quelques méta-données, un appel à la feuille de style, le corps du HTML, nos balises d'en-tête, d'article et de pied de page et, bien sûr, l'appel au js principal.
Next we are going to add a basic form, making sure to include id’s, placeholders, value, and name attributes. We also want to include labels for good practice. The full HTML example is at: http://pastebin.com/TtReQAWb. Now that we have our HTML, we need to make sure we add something to test the CSS and JS files that we are including within the HTML. This task is easy enough, just include a line per file like so: main.js alert(‘JS included’); style.css footer { color: #ccc; } Now, it is time to view the setup in your web browser. Notice the popup alert telling you the JS was included. For the CSS test, direct your attention to the footer. The color of the text should be a light gray. Now that we are all set, prepare yourself. Next month, we will go over the code more closely. Cheers!
Ensuite, nous allons ajouter une forme de base, en veillant à inclure les attributs de son id, ses zones, sa valeur et son nom. Nous voulons aussi inclure des étiquettes selon les bonnes pratiques. L'exemple HTML complet est ici : http://pastebin.com/TtReQAWb.
Maintenant que nous avons notre HTML, nous devons nous assurer que nous ajoutons quelque chose pour tester les fichiers CSS et JS que nous incluons dans le code HTML. Cette tâche est assez facile, il suffit d'inclure une ligne par fichier comme ceci:
main.js
alert(‘JS included’);
style.css
footer { color: #ccc; }
Maintenant, il est temps de voir la configuration de votre navigateur. Remarquez l'alerte signalant que le JS a été inclus. Pour le test de CSS, portez votre attention sur le pied de page. La couleur du texte devrait être gris clair.
Maintenant que nous avons tout préparé, le mois prochain, nous allons analyser le code de plus près. Salut!