Oh, CRUD! Give it a REST(ful)
No no no, it’s nothing dreadful but actually quite useful!
If you’ve ever used a web application that required you to create a list or a certain item that you could go back and edit or delete, you’ve worked with CRUD. The logic is taken care of on the backend and all you have to do is click some buttons. But ever wonder what goes into why those buttons work? I’ll explain why.
CRUD is an acronym for “create”, “read”, “update”, and “delete” and are the actions that make up the functionality of a dynamic website, or a website that a user, like yourself, can interact with. Most of the time you’ll use buttons to complete the processes and surf between pages. But did you know that you can also type straight into the URL and change the route to redirect the page instead? It’s a nifty process that is conventional among web developers to keep the user interface simple and readable. It’s a process known as the RESTful conventions.
REST stands for REpresentational State Transfer. You’ll find that sites you know, like Amazon, Yahoo, Google (Search), Flickr, Facebook, LinkedIn, Microsoft, etc…, all adhere to RESTful conventions. So for instance, when you want to create a new item, the URL route will end in /new. When you want to edit that item, the URL route will select that one particular item and end in /edit. This is possible because of the communication between the browser, when a user makes a request and when the server responds to those requests. Below I demonstrate how each of the restful routes are used in the back end and how a user can access them on the front end. I’ll also show how they are related to CRUD.
Let’s use the example of twitter’s tweets. A user has something witty to say and wants the world to know how witty they are. There is a two step process to creating and displaying the new tweet. They first must go to the page to create a new tweet. When the user clicks the feather button for a new tweet, a new page with with a translucent heading “What’s happening?” pops up for the user to overwrite. The act of the user going to the new tweet page is what is known as a GET request. It’s how the server knows what to display on the page. This particular GET response displays the form to create a new tweet.
Now the user types the witty phrase and clicks Tweet to complete the action of setting it public for the world to see. On the back end, this is the POST request, to create the new tweet, save it to twitter’s database and show that tweet to the user. These two steps are part of the Create portion of CRUD.
Now let’s say there was a typo and the user realizes it after they create the tweet. That user can go back into that one particular tweet and make those changes. Finding the particular tweet is part of the Read portion of CRUD. Then displaying the form to make the edit is part of the Update portion of CRUD. Once the user corrects the typo and resubmits the tweet, that is a PATCH/PUT request the server processes to overwrite what was originally submitted.
Realizing that the tweet doesn’t add any value to the world, the user decides to take it down or delete it from their page. This is a simply click of the delete button that sends the DELETE request to the server which then either deletes the record of the tweet or destroys it completely from ever existing in the database. This is the Delete portion of CRUD.
Once the tweet is gone, the homepage pops up which lists a bunch of other tweets. This is also the Read portion of CRUD, each tweet is indexed and visible.
For developers, this chart shows how RESTful routes are written and how CRUD relates to each action:
