How to Create a CRUD Application Using DrapCode?

What is a CRUD Application?

CRUD application is a type of an app or a software whose basic functionality is to create, read, update and delete. 

Let's take a look at how to create a CRUD application using DrapCode. For your better understanding, we will show step by step how to create a CRUD application for creating a dynamic database for employee details.

Create/Read - How to add data in a collection using events?

Follow these steps to build create and read functionalities in your CRUD app:

Step 1: Create a collection

Go to the Collections tab and click the create button. You will be redirected to the create a collection page. In the example below, a CRUD application to capture employee details has been created. Therefore a collection named “Employees” is created.

After creating a collection, follow the consecutive steps of adding fields and data in it.

Step 2: Create required pages

Go to the home page, which is a blank default page. Add a navbar and a data table to display all employee related data from the database. Once done, bind the “Employees” collection by opening the settings of the data table. 

Now add a new page to add information or details of new employees. So go to the pages tab and click the create button. Type the page name like “Create Employees” and hit the create button. 

Step 3: Add a collection form

To add the functionality of adding new employees, you have to add a collection form in the “Create Employees” page. So, go to the components panel and drag-and-drop a collection form component in the page. Then, open its settings and bind the Employee collection to it, so that all the new data automatically gets submitted to the database.

Step 4: Create an event to save data

Events are the automatic workflows with different functionalities such as send, delete, update data etc. automatically. So first create an event to save data. Just go to the events tab and click the Add Event button, you will be redirected to the create event page. Here, name the event and add the Save Data event action in it.

Once done, add a Show Alert Message event action in the same event to indicate whether the form gets submitted successfully or not.

Also, add a Page Redirect event action to land users to a page after the form is successfully submitted.

Step 5: Bind the event to the collection form

Go to the “Create Employees” page that contains the collection form and bind the Save Data event to it. Save the changes and click the preview button. You will be redirected to the page showing your app in the preview mode. Fill up the form and click the submit button. If the form gets submitted successfully, a success message will get displayed and you will be redirected to the home page that contains the data table displaying all employee related data. Thus, it will showcase the newly added data as well.  

Update - How to edit data in a collection using events?

Follow these steps to add update/edit functionality in your CRUD app:

Step 1: Create a page & add a collection form

Go to the pages tab and create a page named “Edit Employee”. Then, go to the settings tab and bind the “Employee” collection to the page in order to display data dynamically. 

Once done, go to the “Edit Employee” page and drag-and-drop a collection form. This collection form will help you edit and update the data.

Step 2: Create an event to update data & bind it to the collection form

Go to the events tab and click the Add Event Button. Type the event name and add the Update Data event action. Also, add Show Alert Message and Page Redirect event action as done before. 

Once events are created, go to the “Edit Employee” page, select the collection form layer, open its settings and bind the Update Event to it.

Step 3: Link the data table with the collection form

Now link the collection form on the “Edit Employee” page to the data table on the homepage. So go to the homepage and open the settings of the edit button of the data table. Go to the page field and select the “Edit Employee” page from the list. So, now when the edit button gets clicked, the user will be redirected to the “Edit Employee” page containing the collection form to edit a data entry.

Delete - How to delete data from a collection using events?

Step 1: Create an event to delete data

Go to the events tab and click the Add Event Button. Type the event name and add the Delete Data event action. Also, add the Refresh Section event action so that the page/data table gets refreshed automatically after a data entry is deleted. 

Step 2: Bind the event to the delete button in the data table

Go to the homepage that contains the employee data table. Open the settings of the delete button and bind the Delete Data event to it. 

Once done, save the changes and open the page in the preview mode. Now when you click the delete button, the entry will get deleted and refreshed data will get displayed showing the remaining entries.