Building a CRUD App
Intro to DrapCode CRUD Operations:
In the realm of web development, CRUD, an acronym for Create, Read, Update, and Delete, encapsulates the essential actions performed on data within a database. These operations form the backbone of managing information in web applications:
- C (Create): Involves the addition of new data to the database.
- R (Read): Encompasses the retrieval and display of data from the database.
- U (Update): Signifies the modification of existing data.
- D (Delete): Entails the removal of data from the database.
This tutorial exemplifies the practical application of CRUD operations within DrapCode, demonstrating each component through specific actions:
- Part 1: Utilizing a Collection - Creating Data
- Part 2: Creating a Page - Reading Data
- Part 3: Creating an Event - Updating Data
- Part 4: Creating an Event - Deleting Data
Creating Databases (Collections)
To begin you would need to create database called collection. These are databases where all the data gets stored.
Steps to create a collection:
- Go to Collection option in the meft menu
- Choose Add Collection option
- Choose the Field Type to define the type of data that the field is supposed to store
To gain further insight into creating a collection, check out: https://academy.drapcode.com/docs/app-collection/create-collection
DrapCode primarily uses MongoDB as its underlying database for managing data. MongoDB is a NoSQL database that is well-suited for web applications due to its flexibility and scalability.
In the context of DrapCode, MongoDB facilitates the storage and retrieval of data, supporting the fundamental CRUD operations (Create, Read, Update, and Delete).
Benefits of MongoDB:
- MongoDB is a NoSQL, document-oriented database, which means it doesn't require a predefined schema for the data.
- MongoDB is designed to scale horizontally, making it well-suited for handling large amounts of data and high traffic.
- MongoDB supports a rich and expressive query language, allowing developers to perform complex queries and aggregations.
Part 1: Create Data
1. Create an Event to Save Data
For this, you will have to go to Events on the left menu. Once you click it choose Add Event to begin.
Here you are creating an event to:
- save collection data
- display alert message
2. Saving Collection Data
Choose Collection--> Save Data
3. Dropping a Component
In this step you can drop a Collection Form component on the page and submit it to create new data. Here update the collection and event to create new data.
4. Displaying Alert Message
Choose Notification-->> Show Alert Message
5. Binding the Event to the Page Component
Now that the event is created you can link/bind it to the collection form and bring it to action, as shown below.
Go back to the collection form and open its Settings. In the Workflow Event choose the event you have just created to bind it to the form.
6. Add New Record
Now you can click Preview and add new record to the collection form.
7. Viewing Created Data
When you go to collection this is how it will appear.
Part 2: Read Data
1. Adding Component(s) to the Page
Now create a new page and since it is empty add a Data Table to it. You can drag-and-drop this form from Components.
2. Setting up the Page Component(s)
Now open the Settings of the form by clicking the circular icon on its top-right. Here choose the collection and filter to fetch data from.
3. Previewing the Data
Click Preview to view your data.
Part 3: Update Data
To begin, firsly, you will have to create a page and update collection in it by linking it to any of the page components.
1. Updating Collection in the Page
Next, you will have to create another page, say, edit, to update data.
Click the circular icon on the right of the page and open its Settings. Here Update Collection. This will fetch data from this collection and display dynamic values on this page. Now choose Update.
2. Updating Page Component
Then you would need a form on this page to display data and update it. Drop a collection form on the page. Choose the circular icon on the right of the form to open its Settings and choose the Collection to bring data from into this form.
1. Create an Event to Update Data
For this, you will have to go to Events on the left menu. Once you click it choose Add Event to begin. Here you will have to create an event to:
- update collection data
2. Updating Collection Data
Choose Collection--> Update Data
3. Binding the Event to the Page Component
Go back to the collection form and open the edit button Settings. In the Workflow Event choose the event you have just created to bind it to the form.
4. Binding the Page to the Link
Now you will have to bind the edit page to the edit button on an existing page. This will allow you to use the button the edit the form details. Here,
- add the Page to which to bind the link to
- mention the Path Field as ID. This will allow the records to appear pre-filled in the form as per their order.
5. Updating Data
Go to your collection and choose the Edit button.
6. Add Details
Enter details to add to your collection and click Update.
7. Refresh Collection
Reresh your collection to view the newly added record here.
Part 4: Delete Data
Similar, to the above step, here too you are creating an event to delete data, binding it to the page component and testing/previwing it.
1. Deleting Collection Data
Choose Collection--> Delete Data
2. Binding the Event to the Page Component
As before, go back to the collection form and open the delete button Settings. In the Workflow Event choose the event you have just created to bind it to the form.
3. Deleting Data
Go to your collection and choose the Delete button.
4. Add Details
It will display a pop-up message asking if you want to delete the selected record. Choose Yes or you can choose Cancel if you do not wish to delete the selected data.
5. Refresh Collection
Reresh your collection and you won't find the deleted record here.
Conclusion:
To sum it up, learning about DrapCode CRUD operations helps us understand how to work with data in web apps. DrapCode makes these tasks easier, making web development more efficient.