Advertisement
  1. Code
  2. Web Development
Code

Get Started Building Your Blog With Parse.js: Router

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Building Your Blog with Parse.js.
Get Started Building Your Blog With Parse.js: Add a New Blog
Get Started Building Your Blog With Parse.js: Edit
Final product image
What You'll Be Creating

In the last session, we built an "Add a New Blog" function, and now users can post into the blog system. A natural extension would be to enable users to change and delete existing blogs. In this session, we are going to build some groundwork for those functions, making a list view of blogs in the admin page and adding a router (if you don't know what a router is, this session is for you).

1. Create and Render BlogsAdminView

Step 1: HTML Template

As usual, let's begin by adding an HTML template to admin.html. This should be fairly easy for you now—really similar to #blogs-tpl in index.html. The only difference is we are making a table this time: 

Step 2: Create BlogsAdminView Class

Similarly, create a BlogsAdminView in admin.js. If you are not familiar with these, I highly recommend you check my earlier posts.

Step 3: Render BlogsAdminView

To actually see the list, we need to render it. Let's just add it to the render() function in WelcomeView for now:

Check the admin page, and you will see a list view below the Add a New Blog button.

BlogsAdminView

2. Router

If you are following along, I hope you now feel comfortable writing to and reading from the database. You should also find it easy to create and render views to present the data you get. However, you may start to feel that there could be too many View.render() functions here and there, and they could make your code hard to read and maintain. You may also feel bad seeing admin.html in the URL. 

Thinking about the edit function we are going to build, we surely can build it by adding events and passing in the blog we want to edit as a object and then rendering it. But wouldn't it be great if we can have something like http://AnExampleDomain.net/edit/id? The idea of a router is going to help us achieve that. It's a way to map functions to URLs. 

Step 1: Add the Structure of the Router

To help you learn this concept, why don't we just go ahead and start a new router in admin.js:

As you can see, it's easy to map URL patterns to functions in a router and start it. Now if a user visits /admin, it will trigger the admin() function. 

Notice that you can even take in parameters in URLs by adding a colon before a variable name, like edit/:url in the code above.

Now, let's take a few steps to reorganize our existing code into the router.

Step 2: /login Page

The easiest one should be the /login page. Just move the rendering code into the login() function:

Step 3: /admin Page

Next, let's write a function for the /admin page. Previously, when users visited /admin.html, we sent them to the login screen by default. And if they logged in successfully, we then sent them to the welcome screen. The rendering function for welcomeView was in the success callback. That's not the best way to organize your code, and that's not convenient for your user.

So now, let's just do a check on the /admin page. If they are logged in, we show them the welcome page, and if they are not, we redirect them to /login.

As you can see in the code, we use the blogRouter.navigate() function to redirect them to the /login page. Similarly, let's change the rendering function in /login view into a blogRouter.navigate() function as well:

Remember to take out the old rendering functions in the previous code. 

Step 4: Test and Set Default Navigate as a Temporary Solution

Let's give those two functions a try. Test and... nothing! That's because we need to direct to /admin on start; admin.html by itself does not match any URL pattern we set in the router.

Let's add a default navigate to the start() function so that when the router starts, it automatically takes the user to the /admin page:

Now if you give it a try, everything should work correctly:

Router

Notice that you still can't directly visit /admin or /login yet. And if you are putting your project under a directory, you will probably notice that your URL will redirect from http://localhost/directory/admin.html to http://localhost/admin, and it seems weird. We will cover and solve those issues in future sessions. Today our main goal is to understand how the router works once it gets started, and lay some groundwork.

Step 5: /add Page

Moving on, it's time to move the rendering of the "Add a New Blog" page from WelcomeView to the router.

We can also rewrite the event in WelcomeView to just trigger a navigation:

Now check and make sure everything works.

add Page

Conclusion

In this session, we made another list view of blogs in the admin panel, and you have learned about the important concept of a router. I hope now it feels natural for you to create and render views with Parse.js. And you've started to see how a router can help us organize and reuse our code.

We didn't dig into the details of the mechanics of the router, like understanding why we have to have {trigger: true}. As I mentioned before, the purpose of this tutorial is to show you how you can make things work. But if you are interested in learning more, definitely check out the documentation. We will also cover more router knowledge when we need it later in the series.

In the next session, we are going to create an /edit page, and put the router to real use. I hope you are excited to nail it. We will soon be pulling everything together, so stay tuned!

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.