Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:19Length:2.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.1 Collections

In this lesson, you will learn how to use MongoDB to create new Collections to manage your data and make your site more dynamic.

4.1 Collections

In previous lessons, we built out our data using this userposts helper object. And this object is a simple array that has each of our posts in it. And if we were to change any of these objects in the array, then those changes would reflect on the page. But we wanna make this a little more dynamic and a little more flexible. We want to be able to store all this data in a database so that we can retrieve at any time and so that we can update it at any time without updating it here in this array. Well Meteor shapes with a database, a no SQL database called Mongo DB. And Mongo DB makes it really easy to create database tables or what Mongo calls collections using JSON objects or JavaScript objects. And so in mango what you would usually think of as a table is called a collection and what you would usually think of as a table row is referred to as a document. So if you hear me referring to a collection or a document, that's what I'm talking about. A collection is basically a collection of documents. So let's talk about how to do this in Meteor, and we're not gonna go into a lot of information on how to use Mongo, you can find a lot of information for it in their website and their documentation. But we will show you at least how to get it up and running, how to work with Meteor and Mongo so that we can create some more dynamic data here. So all the changes from the last lesson are gonna be in the site 005 folder. And all the changes we make in this lesson will be saved in site 006. Now so far we've been working in our imports folder, mostly within the UI folder. But in this lesson we're going to start working in the API folder, as well, the API folder is gonna handle our database interactions. And we're also gonna take a look in the server folder, as well. And it's important to understand, because it's easy to get confused here if you're not paying attention. But the client folder has a file called main.js, and the server folder has its own file called main.js. So when we're talking about main.js, we need to make sure we know which one we're talking about so that we don't get confused. Because obviously our code's not gonna work if you put the wrong code in the wrong file. So let's walk through everything we need to do to get a new collection created in Mongo DB. So the first thing I wanna do is I wanna jump into the API folder in our imports folder. We're gonna right click on that and create a new file in that folder, and I'm gonna call this file userposts, plural, .js. So in this userposts.js file, this is where we're gonna be handling the creation of our database table or collection, and we need to first import Mongo in order to get that to work. So we're gonna create or we're gonna write out this import statement first. We need import { Mongo }, we're gonna import that from the name space 'meteor/mongo'; and a semicolon at the end of our statement. Now in order to create a new collection we simply call on the mongo.collection constructor. And what we're gonna do is we're gonna export a new constant called Userposts with a capital U, and we're gonna set this equal to our new Mongo collection. So the way we do that is we type new Mongo with a capital M dot Collection with a capital C, and inside parentheses and quotes, we're gonna type in the name of that collection, which we're gonna call userposts. And then a semicolon at the end of our statement. So this export statement will basically allow us to import this userposts object into other files. And we will import it using a statement similar to what we see up here, with user posts inside these curly brackets. So that's all we need for now in the userposts.js file, so we'll save that. And then the next thing we need to do is we need to go to our server main.js file. Remember, there are two main.js files. We need to open the one that's in the server folder and we see some default code in there. I'm just going to delete that default code, and we're gonna import the userposts.js file. So we're gonna create an import statement here, and the main js files and the server folder, so we need to hit dot dot to back out of the server folder. And then / and then we're gonna go to imports/API/userposts.js, ; to end your statement. And that's all we really need in the main.js file in the server folder for right now. We just need to make sure that that main.js file can see that userposts.js file so that it will know that it's there. If it doesn't know that it's there, the we won't be able to do anything with it. So let's save that, and then we're gonna go back into our body.js file, because that's where our userposts array is. And what we're gonna do is, we're gonna get rid of that array, we're no longer gonna pull this data from an array. So I'm just gonna get rid of that. And we're gonna call this userposts array, or this user post object, a different way now. Instead of treating it like an array, we're gonna treat it like a method. So we've put parentheses at the end, and then a pair of curly brackets, and then inside the curly brackets we're going to return a value. And what we want to do is we want to return all of the rows, or all of the documents, inside the userposts collection. And if you remember, if we jump back to our userposts.js file, our collection is stored now. We've created it here, we've stored it in this object called Userposts with a capital U. Now in order to be able to access this, we need to import that into our body.js file, so let's do that up here. We're gonna create another import statement inside our body.js file. And we need to import inside these curly brackets here, because it was created using an export statement. So userposts plural, so we're gonna import userposts from, and then we're simply gonna point to the location of that userposts file. Which is ../api/userpost.js, so now that we've imported that, we can reference it inside our userposts helper. So let's not get our userposts helper confused with our capital Userposts here which is going to refer to our collection. So what we're gonna do in our userposts helper, remember we are treating it like a method or a function now instead of an array. And so we're going to return a value. And what we're gonna return is all of the rows in that userposts collection. And the way we return all of the rows is we simply type user posts.find and then a set of parentheses and I'm going to create an empty set of curly brackets for now. If you wanted to specify a selector for this query or narrow down your query a little bit you would put something inside the curly brackets here. But we just wanna return all rows so I'm gonna leave that blank, put a semicolon at the end of our statement. So now if we save our file and go back to our browser, when it refreshes we're gonna see these columns, or these rows, go away, and there we go. We see that they do disappear because we're no longer pointing to that array that we had created. We're now pointing to this collection which doesn't have anything in it yet. Well now I want to jump into a new command prompt and I wanna run the Mongo prompt. And I don't want to close the Meteor server right now, I want to keep it running. So if I want to open a new command prompt, I can right click on the current down here in the task bar in Windows and click on Command Prompt. And it will open a new Command Prompt window, and now I just need to navigate to our folder again. So we're gonna do that here, cd social-, I've gotta spell it right, social-lite, there we go. And once we're inside the social-lite folder we can get into the Mongo command prompt by typing meteor mongo, and then hit Enter. And you'll notice the command prompt changes a little bit. And at any time once you're in this command prompt, you can type help. And it will give you a list of commands that you can type in, and the description of what those commands do. So one of those commands about halfway down here is show collections, and it will show all the collections that are in the database at the current time. So if I type that now we're gonna be a little bit disappointed because nothing's there. Well if we haven't added any items to that collection, then that collection really hasn't been created yet. And it's there in our code, and in our code it looks like it's being created but we first need to insert something into that collection. So to insert a new object, the way we do that is we type db dot and then the name of our collection, which again is userposts, and you'll notice it's lower case here. If we go back to Userposts js, this is gonna match the name that we pass into our new Mongo.Collection here. So it's userposts with a lowercase u, so we have db.userposts dot, and then we're gonna run the insert command. So for the insert command we're gonna type an open parenthesis and an open curly bracket here and then we can insert some data here. So we could say username and then let's say that username is gonna be Craig, and then we can have our createdat or createddate, whatever you want to call it. Createdat, what did we call it in our posts, I've already forgotten. So let's go into userposts.html, and we call it createddate, so I wanna make sure we keep that consistent. So createddate and let's just do the current date time whenever we created it, and then comma space. And you'll see that something weird goes on in my command prompt. It kind of copies one line and puts it on the next line, but it actually still works if we just keep typing what we need to type. So, sorry for the confusion there. But I do wanna add another property here to our new insert statement, and that's gonna be the text property:. And then inside quotation marks we can type in our text, so here is my first post. So we're gonna close our quotation marks for that text, and then we'll close our curly brackets, and then close our parentheses and then we'll hit Enter. And hopefully you'll see something that says an inserted colon 1, that means that one row was inserted into our collection. And if we do another show collections command, we now see that user posts collection there. And if we wanna find all of the objects in that collection, we can say db do, and then our collection is called userposts.find, not fund, find() and hit Enter. And it will show you our object. So we have a username which is set to Craig, created date is set to, and then it gives us the date, and then our text is, here is my first post. And now that we've inserted that object, if we go back to social-lite, to our browser. You can see that post automatically shows up for us, and the reason it's showing up for us. Let's go back to our code just to review, is because in our userposts.js file, we've created our new Mongo collection. And then in our body.js file we replaced that array with a new method. We're still calling it by the same name, so we can still access it in our HTML the same way by this userposts. And all we're doing is we're returning all of the rows in that userposts table or that userposts collection, and so the data is all still structured the same way as it was before. It's just in a database table now or a database collection, instead of in an array, and we see that that's working fine. So if we go back into our command prompt here and enter another insert command, I'll just hit the up arrow a couple of times until you get back to our last insert. And let's, okay, that's just doing some messy stuff. So I'm going to hit Ctrl+C a couple of times to exit out of that and clear the screen and then let's try that again, meteor mongo. And then we'll just type it out again from scratch. So db.userposts.insert, and then we need parentheses and curly brackets here. So let's do username, let's do a different user. Let's do a username of Fred, space a createdDate: new Date() and then finally our text. We'll just keep it simple and we'll say, Second post. And then we need to close our curly brackets and our parenthesis and hit Enter. And we go back to our page, we see that Second post shows up. So that's how you create a new collection in Mongo and pull the data from that collection into your page. So will talk about some more Mongo interactivity as we move forward. For now all of the changes that we've made are gonna be saved in the site 0006 folder. So thank you for watching and I'll see you in the next lesson.

Back to the top