Accentsconagua

Commencez à construire votre blog avec Parse.js Ajouter un nouveau blog

Code
Share
Ce que vous allez créer

Avez-vous déjà été enthousiasmé par votre idée de site Web, mais vous vous êtes retrouvé en train de devenir misérable en essayant de le rendre dynamique et de le faire tourner sur un serveur? 

Avec Parse.js, tous ceux qui comprennent les bases du HTML, du CSS et de JavaScript peuvent créer des sites Web dynamiques et des applications Web fonctionnelles. Ce tutoriel va vous guider étape par étape dans la création d’un système de blog avec Parse.js. Et à la fin de cette série, vous devriez pouvoir créer facilement votre propre site CMS..

Au cours des trois dernières sessions, vous avez jeté les bases du système de blogs. Vous avez créé une classe Blog et une classe User sur Parse.com, vous rendez des blogs en mode frontal et vous avez activé la connexion de l'utilisateur. À partir de cette session, nous allons créer différentes fonctions de ce panneau d'administration, en commençant par "Ajouter un nouveau blog".

1. Créer et rendre AddBlogView

Étape 1: préparer un modèle HTML

Commençons par préparer un modèle HTML pour cette page afin de pouvoir jouer. Encore une fois, vous pouvez utiliser des éléments existants de Bootstrap pour accélérer le processus:

Ajouter cela à admin.html.

Notez que nous en faisons un modèle, bien qu’il n’y ait pas de valeur dynamique à ce stade. Je le fais parce que:

  1. Je voudrais garder mon code HTML très structuré et tout est son propre bloc de modèle.
  2. Dans les sessions à venir, nous allons créer la liste déroulante des catégories. Il pourrait donc y avoir du contenu dynamique sur cette page..
  3. Le même modèle de page serait réutilisable lors de la création de la fonction "Modifier", et nous devons absolument extraire le contenu existant dans EditBlogView.

Étape 2: Créer AddBlogView

Aller de l'avant, aller à admin.js et créez une nouvelle vue: AddBlogView. Nous pouvons le garder très minime pour l'instant, car nous ne faisons que rendre le modèle:

var AddBlogView = Parse.View.extend (template: Handlebars.compile ($ ('# add-tpl'). html ()), render: function () this. $ el.html (this.template ()) ;);

Étape 3: Lien vers AddBlogView

Maintenant que nous avons AddBlogView, nous voulons y accéder depuis le panneau d'administration. Allez-y et ajoutez un bouton à la BienvenueVoir:

Et puis, vous devez lier un événement à ce clic. Habituellement, vous pouvez faire quelque chose comme ça dans votre admin.js:

$ ('. add-blog'). on ('cliquez', fonction () // fonction);

Cependant, ce n'est pas nécessaire lorsque vous utilisez Parse.js. Vous pouvez simplement ajouter un événement à un objet View et lier une fonction comme celle-ci:

WelcomeView = Parse.View.extend (template: Handlebars.compile ($ ('# welcome-tpl'). Html ()), événements: 'cliquez sur add-blog': 'ajoutez', ajoutez: fonction ( ) alert ('Cliqué!');,…),

Vous pouvez l'essayer avant de passer à autre chose:

Et maintenant, nous pouvons changer la fonction pour rendre une nouvelle instance de AddBlogView.

add: function () var addBlogView = new AddBlogView (); addBlogView.render (); $ ('. main-container'). html (addBlogView.el);

Se sent génial.

2. Ecrire dans la base de données

Maintenant, tout ce dont vous avez besoin est de lier une fonction au bouton d'envoi de cette page et d'écrire le blog dans votre base de données sur Parse.com..

Étape 1: Ajouter un événement de soumission

Ajouter un événement de soumission à votre AddBlogView-ce n'est pas très différent de l'événement click que nous venons d'ajouter.

AddBlogView = Parse.View.extend (template: Handlebars.compile ($ ('# add-tpl'). Html ()), événements: 'submit .form-add': 'submit', submit: fonction ( e) // la fonction de soumission va ici.,…);

Étape 2: Inclure le Blog Classe

Ensuite, comme nous essayons d'écrire dans la table Blog sur Parse.com, nous devons inclure la classe Blog:

var Blog = Parse.Object.extend ('Blog');

Étape 3: Ajouter un créer() Fonction à la Blog Classe

Après cela, ajoutons un créer() fonction à la classe Blog, nous pouvons donc l'appeler à partir de n'importe quel objet de vue. Il devrait prendre deux paramètres, Titre et contenu, et enregistrez-le dans la base de données.

Parse.js l'a rendu très simple. Une fois qu'une nouvelle instance de la classe Blog est créée, nous pouvons simplement définir les valeurs souhaitées et appeler le enregistrer() fonction pour l'enregistrer dans la base de données.

var Blog = Parse.Object.extend ('Blog', create: fonction (titre, contenu) this.set ('titre': titre, 'contenu': contenu, 'auteur': Parse.User.current ( )). save (null, succès: fonction (blog) alert ('Vous avez ajouté un nouveau blog:' + blog.get ('titre'));, erreur: fonction (blog, erreur) console. log (blog); console.log (erreur);););

Ou vous pouvez aussi simplement écrire les données dans le enregistrer() une fonction:

var Blog = Parse.Object.extend ('Blog', create: fonction (titre, contenu) this.save ('titre': titre, 'contenu': contenu, 'auteur': Parse.User.current ( ), success: function (blog) alert ('Vous avez ajouté un nouveau blog:' + blog.get ('title'));, error: function (blog, error) console.log (blog); console.log (erreur);););

Les deux fonctionneraient.

Notez que j'inclus aussi auteur dans la base de données avec Parse.User.current (). C'est la méthode que vous devez utiliser pour que l'utilisateur actuel soit connecté..

Étape 4: appelez blog.create () de AddBlogView

Maintenant, comme dernière étape pour le faire fonctionner, vous devez appeler blog.create () du AddBlogView nous venons de créer.

Ajoutons-le à la soumettre() une fonction:

submit: function (e) // Empêcher la soumission par défaut e.preventDefault (); // Prend le formulaire et le place dans un objet data var data = $ (e.target) .serializeArray (), // Crée une nouvelle instance de Blog blog = new Blog (); // Appelez .create () blog.create (data [0] .value, data [1] .value);

Faites un essai. On dirait que ça marche!

Et si vous le vérifiez sur Parse.com, vous verrez qu'il est stocké dans la table Blog..

Félicitations! Vous écrivez dans la base de données.

3. Mémoriser le nom de l'auteur et l'heure de la publication

Maintenant regardons à nouveau la liste des blogs:

Vous remarquerez qu'au lieu du nom d'utilisateur, nous affichons l'ID utilisateur. Et nous ne montrons pas l'heure à laquelle le blog est créé. Nous avons créé à et updatedAt valeurs dans le back-end, mais elles ne sont pas très lisibles par l'utilisateur.

Si nous voulons résoudre ce problème, il existe deux approches générales:

  • Lorsque nous lisons dans la base de données, nous obtenons le nom d'utilisateur par son ID et nous modifions le format de l'heure de publication.
  • Lorsque nous écrivons dans la base de données, nous ajoutons deux champs supplémentaires pour stocker le nom d'utilisateur et l'heure..

Si nous adoptons la première approche, nous faisons la même chose encore et encore, en utilisant le temps et les ressources du visiteur. Par conséquent, nous voulons le faire en écrivant dans la base de données. Ne vous inquiétez pas des choses comme "que se passe-t-il si l'utilisateur change de nom?" Pourtant, nous pouvons toujours faire une mise à jour du groupe lorsque cela se produit..

Étape 1: Ajoutez deux autres colonnes dans la table de blogs

Vous devriez être vraiment familiarisé avec ce processus maintenant. Définissons le nom et le type de ces deux champs comme suit:

  • nom de l'auteur (Chaîne)
  • temps (Chaîne)

Étape 2: Ajouter des champs de données au créer() une fonction

Ensuite, vous devez modifier le créer() fonction pour enregistrer ces valeurs:

this.save ('title': titre, 'content': contenu, 'author': Parse.User.current (), 'authorName': Parse.User.current (). get ('nomutilisateur'), ​​'heure ': new Date (). toDateString (),…);

Notez que je viens d'utiliser le .toDateString () fonctionner ici; vous pouvez utiliser d'autres fonctions de date pour obtenir le format d'heure souhaité.

Étape 3: Mettre à jour le modèle de blogs pour utiliser ces valeurs

Enfin, mettons à jour # blogs-tpl dans index.html tirer les nouvelles valeurs:

Maintenant, vous pouvez supprimer ces publications existantes et en ajouter d'autres à partir de la nouvelle page "Ajout d'un nouveau blog"..

Maintenant, tous les champs devraient fonctionner.

4. Bonus: éditeur WYSIWYG

Parce que nous utilisons contenu dans le modèle, vous constaterez que vous pouvez déjà mettre des balises HTML dans votre contenu