We have seen some introduction about Meteor in the previous article now let’s create a simple application where user can able to Creat, Read, Update and Delete contents..
mrt create meteor-crud
Lets remove the default content..
we are going to use bootstrap-flatly theme for ui and CoffeeScript to write template manager..
First we can prepare our HTML file to render the posts then we can use our template manager to make the content reactive..
we have created two handlebar templates here, one to hold the form to enter the post and another one to show the posts.
now we can break these into individual templates and start filling it with required html contents.
here we have created one input box with id content and one button to submit the post..
in posts template we have created a template helper called post to iterate through each post in the database collection and render the post template..
in post template we have created a simple state called editing where the user is editing the content of the post..
if editing is set to true we are going to display an input box to change the content, otherwise a list of posts with a delete button.
Our final posts.html file would be like this.
check the code in github
now fire up the meteor server by executing
mrt command inside
if you have done everything correctly you should see something similar to this in your browser
Let’s add a bootstrap navigation bar before our postForm template to make the app more elegant..
now our posts.html file should be like this..
Its time to make our static html template reactive using our posts.coffee template manager ..
First let’s create a MongoDB collection to hold the posts in the database..
we just created a MongoDB collection called post using the Meteor.Collection method..
Note: This line of code should be outside the
if Meteor.isClient block and we should use ‘@’ to make it global so that the post collection would be available to both client and server..
Whenever the button inside our postForm template is clicked, we are going find the element with id “content” and store its value inside the variable called data and then we are inserting the data into our posts collection using
Post.insert MongoDB command and finally we are setting the value of data to null to get the next item..
Now we can able to create posts..
The posts doesn’t show up yet in our page but we could see the post inside the mongo console by running
meteor mongo inside
Note: your meteor server should be running while opening mongo console
Now lets make the posts available in our page..
We are creating a template helper called post that will return the data from
Post.find() Mongo query will return a cursor object that has all the posts form the post collection. This post helpers is used inside the posts template to iterate through each posts..
now all the posts are available in our html template..
We have completed C and R in CRUD, now lets add Delete function in our template manager..
Whenever the button with id “delete” is clicked, we are finding the target element and storing it in post variable and then we are passing its id to remove the post from the collection using
Post.remove Mongo query..
_id is MongoDB unique id for each element in the MongoDB collection..
Update part is bit tricker than other three operations..
We can split this into three sections
Here we are getting the session variable with a key target and its value is mongodb id field..This will return either true or false based on the session value it gets..
In post template whenever the span with id “edit” is clicked we are setting the Session variable to true thereby the “editing” helper is set to true..As per our html template when editing state is enabled, input box would appear instead of span..
Here we are again finding the target element, storing it in post variable and using its id and value to update the appropriate post whenever enter key is pressed inside the input box..( keycode for enter key is 13)
MongoDB update query takes two argument 1. the id of the target element and 2. value to be updated..
$set operator is used to update the collection..
This would be our final post.coffee template manager..
Check the code in GitHub
Since we are using CoffeeScript we don’t have to write return statements and we can also ignore brackets, semicolons etc..
Now our code is pretty clean and it is ready to do CRUD operations..
Its time to deploy our app in remote server and see the code in action.. :D
As you can see when we create a post in one browser it is automatically gets updated in other browsers which are connected to the database..We didn’t write a single piece of code to make the content reactive, it is all done by meteor by default..