As developers or database administrators, we are often tasked with creating user roles that carry different CRUD permissions.<\/p>\n\n\n\n
Goals & Outcomes: Creating a REST API CRUD App in 4 Steps<\/h3>\n\n\n\n
In this how-to guide, we go through the 4 steps of creating a REST API CRUD App. These steps are:<\/p>\n\n\n\n
- \n
- Creating a New Application With Five<\/strong><\/strong>.<\/li>\n\n\n\n
- Using The Connection Wizard<\/strong><\/li>\n\n\n\n
- Using your API as a Data Source.<\/strong><\/li>\n\n\n\n
- Assigning CRUD Permissions<\/strong>.<\/strong><\/li>\n<\/ol>\n\n\n\n
Our final result will be a responsive REST API CRUD app for end-users to interact with.<\/p>\n\n\n
Table of Contents<\/h2><\/div>
- Goals & Outcomes: Creating a REST API CRUD App in 4 Steps<\/a>
- What Are CRUD Operations in SQL?<\/a>
- Permissions in a CRUD App<\/a><\/li><\/ul>
- How to Create A REST API CRUD Application in 4 Steps<\/a>
- Step 1: Creating\u00a0a\u00a0New\u00a0Application\u00a0With\u00a0Five.<\/a>
- Step 2: Using The Connection Wizard<\/a>
- Step 3: Using API As a Data Source<\/a>
- Step 4: CRUD Permissions<\/a><\/li><\/ul>
- Conclusion<\/a><\/ul><\/div><\/div><\/div><\/div><\/div>\n\n\n
\n\n\n\nWhat Are CRUD Operations in SQL?<\/h2>\n\n\n\n
CRUD refers to Create, Read, Update, and Delete. Assigning and managing CRUD permissions is a very common task in programming.<\/p>\n\n\n\n
CRUD describes the four basic operations that a user can perform in a database. Users can<\/p>\n\n\n\n
- \n
- Create<\/em> or insert <\/em>new records into a table,<\/li>\n\n\n\n
- Read<\/em> or select<\/em> existing records from a table,<\/li>\n\n\n\n
- Update<\/em> or modify <\/em>existing records stored inside a table, or<\/li>\n\n\n\n
- Delete<\/em> or remove <\/em>existing records from a table.<\/li>\n<\/ol>\n\n\n\n
Permissions in a CRUD App<\/h3>\n\n\n\n
CRUD permissions refer to the permissions granted to anyone having access to a database to perform all or part of the four basic operations on data: Create, Read, Update, and Delete. By assigning CRUD permissions, developers control and govern access to data stored in a database.<\/p>\n\n\n\n
In SQL, CRUD permissions are often managed by granting or revoking permissions to specific users or roles. These permissions are typically set at the database level or on individual tables within the database.<\/p>\n\n\n\n
It\u2019s essential to carefully manage CRUD permissions in a web app to protect data from unauthorized access, modification, or deletion.<\/p>\n\n\n\n
By granting the appropriate permissions to trusted users or roles and denying them to others, application developers ensure that only authorized users can interact with the data in the database. This approach helps to maintain data integrity, security, and privacy.<\/p>\n\n\n\n
\n\n\n\nLet\u2019s say you are a restaurant owner and you\u2019d like to make sure your staff can enter the kitchen, but your guests can only stay in the dining room. How would you solve this problem? Easy! You have two roles: staff and guest. Each role has its own permission to enter different parts of the restaurant.<\/p>\n\n\n\n
This is what CRUD permissions do for databases: they are used to govern access. By using CRUD operations, developers can make sure that data stays safe and is only accessed as intended. CRUD permissions are a useful tool in a developer\u2019s access control toolbox!<\/p>\n\n\n\n
\n\n\n\nNow let\u2019s dive in!<\/p>\n\n\n\n
How to Create A REST API CRUD Application in 4 Steps<\/h2>\n\n\n\n
Step 1: Creating a New Application With Five.<\/h3>\n\n\n\n
Let\u2019s start by creating a new application with Five. To do so,\u00a0sign up and access Five’s cloud IDE for free<\/a>. The first screen you will see looks like this.<\/p>\n\n\n\n
![\"Five.Co](\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Landing-Page-1024x649.png\")
<\/figure>\n\n\n\n
\n\n\n\nHere\u2019s how to create a new web application using Five:<\/p>\n\n\n\n
- \n
- Start by clicking on Applications <\/strong>in the top left corner.<\/li>\n\n\n\n
- Next, click on the yellow Plus <\/strong>button.<\/li>\n\n\n\n
- Give your application a descriptive name in the Title<\/strong> field, and save it by clicking the tick mark in the top right.<\/li>\n\n\n\n
- Done: You have successfully created your first application in Five. Here\u2019s what this should look like before clicking Save.<\/li>\n<\/ol>\n\n\n\n
![\"Click](\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/image-31-1024x617.png\")
<\/figure>\n\n\n\n
\n\n\n\nYou will now see your new application in the list of all applications that you have created with Five.<\/p>\n\n\n\n
Next, click on the blue \u201cManage<\/strong>\u201d button that has appeared in the top right corner to access all of Five\u2019s development features.<\/p>\n\n\n\n
![\"Five.Co](\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/01\/Five.Co-Manage-Your-Application.png\")
<\/figure>\n\n\n\n
\n\n\n\nStep 2: Using The Connection Wizard<\/h3>\n\n\n\n
Let\u2019s dive straight into connecting our API. For this tutorial, we\u2019ll utilize the Dummy JSON API, which offers sample data for various products<\/p>\n\n\n\n
We can start by clicking on Data<\/strong> and then navigating to Connection Wizard<\/strong><\/p>\n\n\n\n
![\"\"](\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-61.png\")
<\/figure>\n\n\n\n
\n\n\n\nAfter clicking on the Wizard, you\u2019ll be presented with an interface that has some similarities to Postman. Start by selecting \u2018New\u2019 from the WebService lookup, then assign it a WebService ID and Name. For our purposes, we\u2019ll use the name \u201cDummyProducts<\/strong>.\u201d<\/p>\n\n\n\n
Next, apart from general, you\u2019ll notice several other tabs at the top:<\/p>\n\n\n\n
- \n
- Read List Mapping: <\/strong>This expects an endpoint that returns all records from the API using a GET method.<\/li>\n\n\n\n
- Read Single Mapping: <\/strong>Requires an endpoint that provides a single record.<\/li>\n\n\n\n
- Create Single: <\/strong>Here, you\u2019ll need an endpoint where you can send a POST request to add a new record.<\/li>\n\n\n\n
- Update Single: <\/strong>This is for an endpoint where you can use a PUT or PATCH method to update an existing record.<\/li>\n\n\n\n
- Delete Single: <\/strong>This tab expects an endpoint that, through a DELETE request, allows you to remove a record from the API.<\/li>\n<\/ol>\n\n\n\n
Setting up the Endpoints: <\/strong><\/h4>\n\n\n\n
For the \u201cRead List Mapping<\/strong>\u201c, we\u2019ll input the endpoint that fetches all records. Since we are Utilizing the Dummy JSON API, the relevant URL is: https:\/\/dummyjson.com\/products<\/a> (as mentioned on their official website)<\/p>\n\n\n\n
Once you\u2019ve entered the endpoint, click \u201cSend\u201d to view the returned results. <\/p>\n\n\n\n
![\"\"](\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-62.png\")
<\/figure>\n\n\n\n
\n\n\n\nIf your API mandates authorization or specific headers, you can set these up in the adjacent \u2018Authorization\u2019 and \u2018Headers\u2019 tabs.<\/p>\n\n\n\n
For \u201cRead Single Mapping<\/strong>\u201c, \u201cUpdate Single<\/strong>\u201c, and \u201cDelete Single<\/strong>\u201c, we\u2019ll utilize an endpoint that fetches a specific record. According to the Dummy JSON website, the relevant URL structure is https:\/\/dummyjson.com\/products\/{productID}, where {productID} represents the product\u2019s ID. <\/p>\n\n\n\n
Let\u2019s use this in the connection wizard now our URL should look something like this: https:\/\/dummyjson.com\/products\/:id<\/a> where \u2018id\u2019 is the variable where we will pass the product\u2019s ID<\/p>\n\n\n\n
![\"Building](\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-60.png\")
<\/figure>\n\n\n\n
\n\n\n\nFor the \u201cCreate Single Mapping<\/strong>\u201c, we\u2019ll use the endpoint https:\/\/dummyjson.com\/products\/add. This endpoint enables us to add new records to the API via a POST request.<\/p>\n\n\n\n
Finally, we can click on save to store the connection<\/p>\n\n\n\n
Step 3: Using API As a Data Source<\/h3>\n\n\n\n
Now that we\u2019ve established a connection in Five, it can be utilized as a data source. For the purpose of this tutorial, we\u2019ll construct a basic form using this connection.<\/p>\n\n\n\n
First, click on \u201cVisual\u201d followed by \u201cForm Wizard\u201d. In the primary data source lookup, choose \u201cDummyProducts\u201d (or any other name you might have given your connection).<\/p>\n\n\n\n
Five will take care of populating most of the details for you. At this stage, you\u2019re welcome to modify any settings as you see fit.<\/p>\n\n\n\n
![\"\"](\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/Frame-39-1024x548.png\")
<\/figure>\n\n\n\n
\n\n\n\nClick \u2018Save\u2019 to store the form, and then we can finally run our application. To launch your app, hit the Run \u25b6\ufe0f button in the top right. If you can’t see the run button, it means you have initiate your development environment first. To do so, follow steps 4 to 8 from this forum post<\/a>.<\/p>\n\n\n\n
![\"\"](\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/Frame-16-2-1024x190.png\")
<\/figure>\n\n\n\n
\n\n\n\nIn your end-user application, you now have a form that contains all of the products from the API. You can click on each record to view their details, even make changes, add new records, and delete them as well.<\/p>\n\n\n\n
![\"\"](\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/Frame-40-1024x548.png\")
<\/figure>\n\n\n\n
\n\n\n\nCongratulations! You\u2019ve successfully built an application on Five that uses an API as a data source in just three simple steps.<\/p>\n\n\n\n
Step 4: CRUD Permissions<\/h3>\n\n\n\n
Once we\u2019ve built our app it\u2019s now time to assign CRUD permissions as outlined in this video:<\/p>\n\n\n\n
- Read Single Mapping: <\/strong>Requires an endpoint that provides a single record.<\/li>\n\n\n\n
- Next, click on the yellow Plus <\/strong>button.<\/li>\n\n\n\n
- Read<\/em> or select<\/em> existing records from a table,<\/li>\n\n\n\n
- Step 2: Using The Connection Wizard<\/a>
- How to Create A REST API CRUD Application in 4 Steps<\/a>
- What Are CRUD Operations in SQL?<\/a>
- Using The Connection Wizard<\/strong><\/li>\n\n\n\n