Series: Building the CRUD-builder

CRUD pt 1-Read, Update, Delete

Published on May 02, 2015

 

UPDATE: There is a newer version of the CRUD series

CRUD (Create, Read, Update, and Delete) are four operations that are vital to any system that involves the manipulation of data (aka, most of them).

This screencast shows a common way of creating a simple but complete CRUD interface in Ember.


Links

Code

Transcript

This is Part One of a two part series in creating a CRUD interface in Ember.

What is CRUD?

CRUD stands for Create, Read, Update and Delete. You can add new entries. You can retrieve, search or view existing entries. You can edit existing entries. Or you can delete or deactivate an existing entry.

These four operations are so important that according to the Wikipedia page,"Without at least four operations, the software cannot be considered complete." For any sort of software where you are going to be interacting with the database, you'll need these four operations somewhere. In this series we're going to be showing a common way to create a CRUD interface using Ember and Ember Data.

First, in Ember data, we have to have a model for the resource that we want to do the CRUD operations on. Then, in our router, we're going to put in nested resources. The ‘new’ route will be helping us create. The ‘posts’ and the ‘show’ route will be helping us read. The ‘edit’ route will be helping us update. Then, there will be a ‘destroy’ action that will help us delete.

Read

We'll start with the read functionality. First, with the index and the post route and then showing the individual record in the show route.

We'll create the posts (plural) route, and in that route we'll make the model function which will return all of the posts. Then, in the post template we'll loop through each of the posts in the model and display the title. That shows up like this.

Now, we'll want to be able to click one of these and see more information about it over here. To do that we'll need to add a link and then an outlet, and then create the show route. In the post template we'll use bootstrap grids to create a column on the left that is a quarter of the page that contains our list, and then a column on the right that is three quarters of the page that contains our outlet. Our outlet can display any of the routes nested below posts, so it can display new or it can display a post and any one of the routes below that. If we don't specify one, then it will show index.

Let's go ahead and make the index template right now. In the posts index folder our file called template.hps we'll just have a header and then you can see that is indeed what's displayed when there is no other route specified.

Now let's add the link-to for each of the list items, for each of the posts. It's going to link to post.show so let's go ahead and create the template for that. To start with, let's just have a header and then the title of the post so that we can see that our things are working. Then, when we click some of these links, you can see that it's going to the posts/post/show route and showing our title. I'm going to go ahead and paste in some slightly more complete code. We can see that this is a respectable read page, so we have read under control.

Delete

Now let's try to destroy one of these entries. To do that, we'll need a button that you can press to delete the entry, and then we'll need to make a controller for the show route where we respond to that action.

First we're going to get the model. The model has been grabbed for us from the server by the generated show route. If you don't include a show route then it will automatically create one for you and get you the correct model.

We'll get that model and then we'll call destroy record on it. This will send an Ajax call that will destroy the record on the server. It will also destroy the record in the Ember Data store, so we don't want to be sticking around here very long.

It returns a promise we'll call .then and then we'll include the function and this an ES6 function so ‘this’ has been kept. So, since the scope of this is still the controller we can call this.transitionToRoute and then go to posts.

We can test this out in our browser and we hit the delete button and there's no longer the post about metaprogramming with defineProperty. Let's search for defineProperty and it is nowhere to be found. It is good and deleted. That holds even if we reload the page, because it's been deleted on the server.

That is all just with destroyRecord. That's some crazy power with Ember Data.

We've gotten the read and the destroy. Now we need to do the update function.

Update

Let's go into our post show template and put a link that goes to the post/edit route. We're feeding it the model and giving it a tagName of button. This is what it looks like. If we hit that button it will take us to the edit route and there's nothing there. Let's fill in that template.

The file is at post/edit/template.hbs. We'll put in various inputs, and then we'll go ahead and put in a button that has the action ‘save’. For that to work we'll need a controller. This controller will have a save action. In that action we get the model and then we call save on it. Then we uses promises and our ES6 function syntax and we can transition to the route of post.show.

Let's test this out in the browser. Let's change one of the variables and then save. It appears to have saved. Let's go ahead and reload and it's still there with us. We have successfully updated the record.

Coming soon: Create, DRY, and Blueprints

In this episode we've created read, update and destroy functionality for our resource. However, we still haven't done the create functionality.

Creating is a little bit trickier because you have something like the ghost of a record right when you hit the new button but before you save it. You don't want that record to show up in your list and you definitely don't want it saving to your server. So in this week's pro-episode we'll create some work-arounds to make that work. We'll also take steps to ensure that we're not repeating work between the edit and the new templates.

You may have noticed a lot of similarities between the tags and the posts in terms of their CRUD functionality. Next week I'll show you how to create blueprints. Those are the things that run when you type ember g. We'll create our own custom blueprint that will create all the apparatus for a CRUD interface. Look forward to seeing you then.

Building the CRUD-builder

Subscribe to our mailing list