4elements, web design and consultancy

  1. Get Started Building Your Blog With Parse.js: Categories

    Final product image
    What You'll Be Creating

    First of all, welcome to the finale of this tutorial series!

    Last session, I showed you how to add a new function to the blog: adding comments. It’s pretty much a stand-alone feature. This session, I will show you how to add categories to your blog system. It’s a more difficult task, as its code will be more closely intertwined with the existing code.

    Category Model

    Step 1: Category Class

    You know the drill: the model always comes first. One more new class on Parse.com: the Category class. It should be very simple. We only need one custom field:

    • String name

    Let’s just create two dummy categories to make it easier for testing:

    categories

    Step 2: Category Field in the Blog Class Table

    Now, add a new column in the Blog class table on Parse.com and make it a pointer to Category.

    pointer

    Let’s also link them to several blog posts.

    posts

    Step 3: Comment Object

    Next, the Comment object in blog.js. Again, it can be very simple.

    Step 4: Comments Collection

    And the collection:

    Add a Category Dropdown in the Write a Blog Form

    Step 1: Fetch Categories

    Like in Comments, let’s fetch comments when we render WriteBlogView.

    Step 2: Find the Current Category

    Next, we need to find the current category when there’s an existing category for the blog post you are editing. We can just loop through the attribute.categories array and set selected to TRUE for the correct category.

    Step 3: Render Categories in a Dropdown Menu

    And in HTML, render categories in a <select> menu:

    Step 4: Record the Selected Category

    Now let’s record it in the submit() function in WriteBlogView:

    And then in the Blog.update() function:

    Notice that you can’t just put down the category id, but you need to create a new category instance, and set its id to the category id you get from the form.

    Give it a test, and hopefully you can see it correctly recorded in the database:

    New Post

    Category Pages

    Now let’s move on to create a sidebar that links to different categories.

    Step 1: Clean Up and Make a Template

    First, take out all the static HTML code for the sidebar:

    And then make a new template div for the template of category menu:

    Step 2: CategoriesView

    Then, make a View for this list of categories:

    Step 3: Render CategoriesView

    Because the list of categories is on every page, we can create a shared variable in BlogRouter.initialize():

    And then render it in the .start() function:

    Give it a try, and now it renders:

    sidebar

    Because we now have a shared variable, we can also use it in WriteBlogView.render():

    Step 4: Add Router

    Now we just need to make /category/{{objectId}} work.

    Let’s add this router pattern first:

    Then, write the category function. It’s fairly straightforward, just a combination of the things you’ve learnt so far:

    Now everything’s working.

    categoryPage

    Conclusion

    Wow, I can’t believe it took me this long to finish the whole series. In the past ten sessions, you’ve learnt a lot about Parse.js and web development in general. Together we’ve built a blog system with full functions: add, edit, delete, login, comments, and in this session, categories.

    I hope you find this series helpful. Please share with me your feedback, suggestions, and content you want me to cover in the future. And if you made any web projects using techniques from this tutorial, I would love to see them, too.

     

    0 Comments

    Leave a comment › Posted in: Daily

0 Comments

Got anything to add?

(Basic HTML is fine)