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.3 Adding User Posts

Now that our Mongo database is set up, in this lesson you will learn how to add new posts to the site using a simple text input field.

4.3 Adding User Posts

Hello and welcome back. In our last lesson we created this submission event for this new form that we created in a body.html file and again the submission event is located in body.js. What I wanna do now is instead of just doing a console log saying form submitted, I want to actually save this data whenever I type into this text field. I wanna say that as a new user post in the inner collection. So let's get rid of this console log here. So the first thing I wanna do is I want to get the text that is stored in the text field that we've just entered. And our event is tied to this new-userpost form. Again, if we go to our HTML, it's the form element here that has a class of new-userpost. And we wanna look inside that form at the the input field that we typed our text into and this name that we gave our input field is gonna be very, very important for what we're about to do. Because we are going to use that name in our JavaScript. So we're gonna jump back into body.js and we can use this event variable. And if we wanna get the target of that event, which is our form, we will simply say event.target. So I'm gonna create a constant here and name it target, and we're gonna point to event.target. So what this points to is the actual form that's been submitted. Well, now I wanna look inside that form at the input field that we talked about. And I wanna get the value that has been entered into that field. So I'm gonna create another constant here called text. And we're gonna set this equal to target, which is again this constant that we created up here, which is pointing to the form itself. And then inside the form, we can point to an input with a name of text, by typing .text. Again, .text, this text, is the name of the input that we're pointing to. So when we say target.text here, it's gonna point to this input field, because it has a name of text. And then we wanna look at the values stored in that text field. So we're gonna say .value; to end our statement. So this text constant here will hold whatever value we just typed into our text field when we hit Enter. And then what we wanna do with that text is we want to insert it as a new userpost into our database. And we've already imported the Userpost's name here. So let's skip a couple of lines after we grab that text from the text field and let's insert this value. So the way we do that is we point to our collection Which again is Userposts with a capital U and then we're simply gonna do an insert, .insert. So this is gonna look just like the insert commands that we did earlier in the command prompt. So user posts.insert({}). And we'll go ahead and put a semi colon at the end of that statement. And then we're going to set our text equal to the value stored in this constant name text here. And since these two items have the same name here, we can get rid of this, we can do the short hammer, or we just say text. So then we'll do comma and we'll add our created date and we'll set that to a new date. And then while we're at it we can also set the username. And we'll just set it to Craig. Then after our text has been inserted, I want to clear out our text field. So we're gonna skip a couple of lines and we're gonna point to our target again, .text. So again .text is pointing to the input field with the name of text and we're gonna set it's value equal to an empty strings. So just an open and closing quotation mark there. So let's save our file there, our body.js file and let's see if it actually works. And we will know that it's working because we've seen before that when we add a new row to our database, that new row automatically shows up here in our list. So let's see if that works. Here is my first dynamic post. And I'll hit Enter and sure enough our new post shows up down here at the bottom. So we know that these post was inserted properly into our collection. So that's how you can leverage this submit event that we created in the last lesson in order to insert a new row entire database. But before we move on, I wanna go ahead and do one more thing, and what I wanna do is I want to swap the order of our posts. Right now it looks like we're going from oldest to newest, so our oldest post are gonna be at the top. And it would make more sense to have the newest posts at the top. So it's very, very simple. We're gonna go back into our body.js file. And when we scroll down, remember this helpers section is where we're pulling our user posts from the database. So here let me back this up a little bit and fix the indentation there, there we go. And all I'm gonna do is tweak this Userposts.find method a little bit. So we can actually put multiple things inside the parentheses for this find method. And the first item is this empty object that we've put there already. And that empty object serves as kind of a filter to choose what items you want to return or what items you want to pull from the database. Well, we sill wanna pull all the items, so I'm still going to leave this blank. But then I'm gonna type a comma and a space, and I'm gonna create another object here. And this object has our options for our query. And one of our options is the sort option. So the way we create a sort option here is we type in the word sort: space and then we are going to have an object with its own set of properties and values. And what we're gonna type in here is the name of the column that we want to sort by. Well, I wanna sort by the created date column. And I'm gonna set the value for this sort to -1, which will basically reverse the sort order. By default it's set to a value of one which lists it from oldest to newest or in ascending order. But if we set it to negative one that will change it to descending order. So let's save that and go back to our browser. And now, when our page refreshes, we can see that our most recent post is here at the top. So I'm just gonna say another new post and now it should show up at the top instead of the bottom, and it does. So thank you for watching and I'll see you in the next lesson.

Back to the top