Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Web Development
Code

Lancez la Création de Votre Blog Avec Parse.js : Traitement des Données

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Building Your Blog with Parse.js.
Get Started Building Your Blog with Parse.js
Get Started Building Your Blog With Parse.js: User Login

French (Français) translation by Willy Touomi (you can also view the original English article)

Final product image
What You'll Be Creating

La dernière fois, vous avez installé un serveur local (XAMPP), un serveur web (GitHub Page), et un serveur de base de données (Parse.com). Vous avez également commencer le html d'une page de blog et inclus le code Parse.js de base pour la liaison à la base de données. Lors de cette session, je vous enseignerai comment créer, récupérer et afficher votre premier objet.

Si vous pouvez supporter d'utiliser Parse.com comme votre panneau d'administration, vous pouvez aisément créer des portfolios, des blogs, des landing pages, etc. pour vous-même, après avoir lu cette leçon.

Le concept de classe et d'instance

Avant d'entrer dans le code de base pour le faire fonctionner, permettez que je me rassure que vous êtes familier des classes et des instances. Encore une fois, sentez-vous libre de sauter cette partie si vous êtes habitué à ces concepts.

D'après Wikipedia:

Une classe est "un template de programme extensible pour la création des objets, fournissant des valeurs initiales pour l'état (des variables membres) et les implémentations du comportement (fonctions membres, méthodes)"; et "lorsqu'un objet est créé par un constructeur de la classe, l'objet résultant est appelé instance de la classe".

Si ces définitions sont trop abstraites pour vous, mettons-les dans le contexte d'un blog.

Une classe de blog

Pensez aux composants communs de tous les blogs. Ils ont probablement tous un titre, un auteur, une page de contenu, une date de création, etc. Ces attributs partagés feront un template commun à tous les blogs que nous avons, d'où la Classe de Blog:

A blog class

L'instance de blog

Et lorsque nous avons la Classe de Blog, chaque blog spécifique qui correspond à ce template est une instance de la Classe de Blog:

A blog instance

Pour vous aider à savoir quand est-ce que nous faisons référence à la Classe de Blog et quand nous faisons référence à un blog spécifique, nous mettrons toujours en majuscule la première lettre d'une classe. Donc, "Blog" pour la classe de blog et "blog" pour une instance de blog. Cette règle s'applique aussi bien au tutoriel qu'au code JavaScript que nous écrirons.

Egalement, vous noterez que sur Parse.com, vous verrez beaucoup le mot "object". Dans ce contexte, nous utiliserons la règle de capitalisation; le mot "object" pour une instance et "Object" pour une classe. Vous y serez bientôt habitué.

Une table de Blog

Parce qu'une classe définit tous les attributes que possèdent ses instances, il est facile de sauvegarder toutes les instances d'une classe donnée dans une table: chaque attribut sera une colonne, et chaque instance sera une ligne:

A blog table

Et c'est exactement de cette façon que nous enregistrerons les données sur Parse.com.

Créer la Classe de Blog

Allons-y maintenant, et créons la sur Parse.com.

Etape 1: Ajouter une Classe Blog

Tout d'abord, allez dans votre tableau de bord sur Parse.com, trouvez votre projet et allez dans "Core" - "Data" (précédemment "Data Browser"). Ensuite, cliquez sur "Add Class".

Add a blog class on Parse

Comme vous pouvez le voir sur la capture d'écran, vous avez besoin de créer une classe personnalisée pour vos blogs. Nommons la Blog. Il faut toujours que les noms de vos classes soient claires comme le crystal et qu'elles expriment ce qu'elles contiennent.

Comme vous pouvez le constater, vous avez maintenant une classe personnalisée vide sur Parse.com

Newly created custom class on Parse

Chaque classe personnalisée aura quatre attributs système:

  • objectId
  • - un identifiant unique automatiquement généré par Parse quand un nouvel objet est créé. Ainsi, le programme sait toujours à quel objet vous faites référence (Comme vous le voyez, ici, objet signifie instance).
  • createdAt - un timestamp automatiquement généré par Parse lorsque vous créez un objet pour la première fois.
  • updatedAt - un timestamp automatiquement généré et mis à jour par Parse chaque fois que vous mettez à jour cet objet.
  • ACL - un objet de Liste de Contrôle d'Accès qui défini qui peut lire et écrire cet objet. S'il est défini, son niveau d'accès est celui de la classe. Nous en discuterons dans les prochaines session. Pour l'instant, vous pouvez le laisser vide.

Etape 2: Ajouter des colonnes à la classe Blog

Continuons et créons les colonnes pour les attributs qui définissent un blog. Pour le garder aussi simple que possible, définissons-en deux seulement: title et content

Cliquez sur le bouton "+ Col" pour créer une nouvelle colonne. Mettez le type à "String" et nommez le title.

Add title column on Parse

Repétez le processus, créez une colonne content et mettez aussi son type à "String".

Etape 3: Ajouter certains Blogs

Il est temps d'insérer cetains blogs. Cliquez sur le bouton "+Row" et double-cliquez sur les cellules title et content pour ajouter du contenu:

Add blog posts on Parse

Notez que vous pouvez également mettre du HTML dans la colonne content. En effet, toutes les colonnes de type String peuvent bien contenir du HTML. Cependant, souvenez-vous de ne pas en abuser. Dans ce cas, la colonne title ne devrait pas contenir de HTML.

Comme je l'ai mentionné plus tôt, à cause du fait que Parse.com vous laisse manipuler votre base de données de cette façon, vous pouvez entièrement l'utiliser comme votre panneau d'administration, si vous ne voulez pas écrire le votre. Et une fois que vous savez comment afficher ces données sur votre site web, vous pouvez aisément créer un blog dynamique ou un portfolio. Dans la prochaine partie, je vous montrerai comment le faire.

Récupérer les données du Blog

Retournons à notre fichier blog.js. Il est temps d'en finir avec le code de test et de récupérer ces données de blog depuis Parse.com vers le site web.

Tout d'abord, créons une classe JavaScript qui étend la classe Blog de Parse.com:

En pensant à la page d'accueil d'un Blog, vous voudrez certainement avoir une liste de blogs. Cette liste d'objets de la même classe est appelée collection par Parse. Définissons la aussi:

Remarquez que Blog et Blogs sont des classes. Ce sont des templates abstraites pour les blogs et les collections de blogs. Vous pouvez avoir des blogs spécifiques et des collections de blogs. Ils sont tous des instances.

Maintenant donc, pour avoir une vraie collection de tous les blogs ajoutés sur Parse.com, vous devez créer une instance de la collection Blogs (remarquez que la première lettre ne doit pas être en majuscule ici):

Si nous ne spécifions rien et que nous récupérons juste cette nouvelle collection avec les données, cela prendra par défaut toutes les lignes dans la table Blog.

Récupérons les et affichons les dans la console:

Chargez encore le site web sur votre serveur local et vérifiez votre console dans vos outils pour développeur. Vous devez être capable de voir ceci:

Blog data in console

Maintenant vous avez les données!

Afficher les données sur la page

Avant d'afficher les données du blog sur la page, nous avons besoin de préparer la template HTML pour ça.

Etape 1: Nettoyer le HTML

Effacez tout ce qui se trouve dans .blog-main et remplacez-le par un simple conteneur:

Ensuite, si vous regarder au template original du blog, vous verrez que la structure HTML d'un seul post peut être simplifiée comme suit:

Tout ce que nous voulons c'est remplacer ces espaces texte réservés avec les données de chaque blog que nous avons sur Parse.com.

Etape 2: Préparer le template du Blog

Pour y arriver, nous devons d'abord transformer le HTML en template, lequel prend un objet de données et le transforme en une chaine HTML.

Nous voulons que le template prenne un tableau de blogs:

Et l'affiche comme suit:

Je vous montrerai dans ce tutoriel comment utiliser handlebars.js pour y arriver. Mais vous pouvez aussi utiliser underscore.js, mustache, ou d'autres templates, si vous préférez.

Pour utiliser handlebars.js, ajoutons le d'abord à index.html sous parse.js:

Puis, prenons le HTML nettoyé d'un simple post de blog et mettons-le dans un tag <script> spécial pour handlebars, juste au-dessus des tags <script> pour les fichiers JavaScript. Donnons-lui aussi l'id #blogs-tpl. De cette façon, handlebars saura que c'est un template et vous aurez une façon de vous y référer:

Maintenant, pour faire savoir à handlebars où mettre les valeurs de title et de content, il faut remplacer "A title" par {{title}} et "Some content" par {{{content}}}. Handlebars.js identifie le contenu dans les "double-accolades" {{}} comme des variables.

Remarquez que pour content, nous utilisons {{{}}} au lieu juste de {{}}. C'est parce que handlebars.js échappe les valeurs HTML par défaut. Utiliser les "triple-accolades" {{{}}}préserve le HTML contenu dans content.

Le dernier changement que vous avez besoin d'effectuer sur #blogs-tpl c'est d'encapsuler le template de blog dans {{#each blog}}, afin qu'il prenne un tableau d'objets et les affiche un à un:

Etape 3: Afficher les Blogs

Maintenant que nous avons un template, retournons à blog.js et afficher ces blogs sur la page.

Pour ce faire, vous devrez créer une vue pour la collection de blog. Le concept de vue vient du patron MVC, et Parse suit ce patron. Je ne rentrerai pas dans les détails du MVC ici. Vous devez juste savoir que l'instance de vue d'une collection de blogs génère du HTML pour lui et traite tous ses événements. Et une classe View est un template abstrait de cette instance.

Cela peut prêter à confusion maintenant, mais tout s'éclaircira avec le code. Ecrivons une classe BlogsView:

Tout comme nous avons fait une extension de la classe Blog à partir de Parse.Object et la classe Blogs de Parse.Collection, vous pouvez simplement étendre une nouvelle classe View depuis Parse.View afin qu'elle ait toutes les valeurs et fonctions prédéfinies par Parse.

Ici, la variable template prend le template que nous avons préparé avant. Puis, la fonction render() récupère la valeur qui se trouve dans this.collection et les convertit en format JSON, les affiche avec le template handlebars et l'assigne à this.$el.

Maintenant, modifions la fonction de rappel success de blogs.fetch pour créer une nouvelle instance de BlogsView.

Remarquez que quand vous créez une nouvelle instance de BlogsView, vous lui passez blogs, les données de blogs récupérées depuis le serveur Parse, ces valeurs deviennent this.collection pour la fonction render(). Et lorsque vous mettez le HTML dans $('.main-container'), vous utilisez la valeur de blogsView.el qui était le contenu de this.$el, créée par la fonction render() (Ici blogsView.$el = $(blogsView.el). C'est ainsi que la classe View et l'instance view fonctionnent.

Rafraîchissons maintenant la page: http://localhost/blog/

Blogs rendered

Et ça fonctionne! Maintenant vous pouvez tout simplement tout envoyer vers GitHub Page et avoir un site dynamique fonctionnel! Si vous prenez un peu de temps pour modifier le template de code et modifier un tout petit peu le code, vous pouvez facilement créer des portfolios et d'autres sites de contenu.

Conclusion

Aujourd'hui, nous avons créé notre première classe sur Parse.com. Vous avez également appris comment ajouter du contenu dans cette classe sur Parse.com et comment l'afficher sur votre site. Il se pourrait que certains concpets soient nouveaux pour vous, mais je suis sûr que vous y habituerez bientôt.

Dans la prochaine session, nous commencerons la construction de la page d'administration de notre système ed blog. Vous créerez une seconde classe - la classe User. Vous apprendre également comment traiter les connexions utilisateur et vous créerez deux nouvelles vues: la vue login et la vue welcom. Donc, restez à l'écoute, des lots de compétences viennent à vous.

Je pense que vous pouvez beaucoup vous amuser avec ce que vous avez appris dans cette session. Faites-moi savoir si ce tutoriel vous a aidé à créer quelque chose. Et comme de coutume, regardez le code source si vous êtes coince et laissez un commentaire si vous rencontrez des difficultés.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.