What is a CRUD app?
If you're looking to build a web application, chances are you'll need to provide your users with the ability to create, read, update, and delete data – commonly known as CRUD. Whether you're building a simple blog or a complex enterprise app, CRUD is an essential part of the user experience.
In this article, we'll explore how to build a CRUD app using Jet Admin, a powerful app building platform, makes it easy to create custom applications without writing code. But first, let's define what CRUD means and why the basic CRUD functions are so important for web applications.
CRUD – create, read, update, delete – represents the four basic operations that a user can perform on data stored in a database. By providing these operations in your app, you can give users the ability to interact with your data in meaningful ways: without these four basic CRUD operations, your app would be a one-way street – users could view data, but they wouldn't be able to do anything with it.
Let’s take a look at some CRUD application examples:
- Coffee Shop Inventory – A coffee shop might use a CRUD app to keep track of what ingredients and supplies they have in stock. To do that, the app needs the four basic CRUD operations to add items, update inventory levels, or get rid of products they no longer offer.
- Online Store – An online store has to perform CRUD operations to manage the information needed for customers to purchase items, update orders, or manage their profile.
- Blogs – Websites that allow users to create, edit, and delete content such as blog posts, articles, and other types of media require the four basic CRUD functions to manage the content.
One very common use of a CRUD app is a CRM – Customer Relationship Management system. Creating this kind of database management system in Jet Admin is extremely easy.
Jet Admin app-building platform
Jet Admin is a no-code, easy-to-use app-building platform that makes it simple to build custom applications without writing any code. With its user-friendly, drag-and-drop interface, Jet Admin makes it easy to build powerful apps that can perform a wide range of tasks.
One of the things that makes Jet Admin such a great choice for building CRUD apps is its ability to integrate with a variety of data sources. Whether you're working with a SQL or relational database application yourself, or Google Sheets, Firebase, or something else, Jet Admin’s many integrations make it easy to connect to your existing data or source and start building.
Today, we’ll look at how to build a custom CRM using Jet Admin and PostgreSQL.
There are a few main steps to this process, each of which we will go through in more detail after:
- Creating the App
Log into Jet Admin and create a new project
Connect your data source
Generate an app using a layout (at this point, you have RUD functionality)
Add the possibility to create records (now you have full CRUD functionality)
- Using the App
Creating, Updating, and Deleting records
- Additional Functionality
Creating the App
Log into Jet Admin and create a new project
The first thing to do is to log into Jet Admin. Here, you’ll see any apps you have already created, as well as templates and a button to create a new app from scratch. In this example, we’ll use the Admin Panel template – click on this to create a new project.
Connect your data source
The next thing to do is to connect your data source. The template will prompt you to do this, but later I will show you how to add other data sources from within the app builder.
Choose your data source, and in the modal that pops up, enter the required information and click Add resource.
Generate an app using a layout
(after this, you will have RUD functionality)
You will now be prompted to choose a layout.
- Record Review and Record Update: These two options are similar in appearance but differ in function. The first is for viewing data: you can see a table, and then the details of each individual record can be viewed in a modal (Modal), in another section of the same page (One page), or on a new page (Multi-page). Record Update is the same, but instead of simply being able to view the record details, you can make changes to them.
- Dashboard: This layout is made for viewing a table with your record along with charts to show analytics and KPIs.
- Form: This layout is similar to the form used for updating records when you use the Record Update layout. In this case, the form would be a new page.
- Blank: This choice lets you build your page from scratch!
For this CRUD app, I’m going to choose the Record Update option and use the Modals layout.
To finish this process and apply the template, you now need to specify what data should be used and where.
First, in the Collections section, the app builder will prompt you to choose a collection from your data source. I have used a PostgreSQL database with only one collection here, but if you have more than one collection in your data source, you will need to choose which one you want to use for this page.
Next, in Choose Table fields, you need to choose what fields will be included in the table where you can read your data (the highlighted section below).
Finally, in Choose Form fields, you will choose what fields you want included in relational database consists in the form that you use to update records (highlighted below).
Having different fields in your table and form can be useful if, for example, your collection contains data that you want your users to be able to change (e.g. order information, number of items in stock) and other data that should not be changed (e.g. client name, name of item).
Now simply click Apply Template!
Great! Even without going any further, you already have the ability to read and update your existing records, and you can also delete or export them by checking the box to the left of the record, and then clicking on the Export or Delete buttons that appear. In other words, you already have RUD functionality.
All we need to do now is add the possibility to create records!
Add the possibility to create records
(after this, you’ll have a fully functioning CRUD app!)
To add the possibility to create new records, you need to add an action to your table. Select the table, and then in the menu on the right click on the tab that says Actions (shown below).
We’re going to add a Header Action. This means that the action will be accessible by clicking on the button with three dots in the upper right corner of the table. Add a Header Action by scrolling down to the bottom of the menu on the right and clicking Add Action.
Now you need to specify what the new action will do. To do this:
- Choose the action (here: Run Operation)
- Choose your resource
- Choose your collection and the action that you want (here: Create Record)
- Specify input options
There are two parts to setting up your input options.
The first is specifying the input. Because we are giving app users the ability to create a record, we want them to enter all the necessary information, so we need to choose Ask user for each field that we want included on the Create Record form. If you had different needs, you could also use the ƒx Formula button to generate an input using another element of your app.
The second is specifying whether an input will be required or optional. For example, my collection has different footwear products, so for me it might make sense to make the model field required, but leave the product type field as optional.
And that’s it! Our CRUD app is now set up and totally functional!
Using the App
To add a new record, click on the button with three dots in the upper right corner of the table, and click the create record button. Then, fill in the required and any optional fields, and then click the Execute button.
To update a record, simply click on it and a modal will appear where you can change the record’s information. Then click Update.
To delete a record, click on the box next to it to select it. Then, click on the Delete button at the top of the table. You can export data in the same way.
Other app functionality worth noting here is the ability to filter your data or search (1) your data for keywords. This layout has built-in filters at the top (here they are Model, Title, and Description, but they will change based on your data), but you can also filter other fields of your data using the button (2) shown below.
App builder Functionality
App builder functionality worth mentioning here includes display options and more customization in terms of functionality or layout.For example, the button that allows me to create a record currently says “Create Products.” If I go back to my Action menu, I can change the text – for example to “Add Sneakers.”
Regarding functionality, one example might be changing which fields should be included in the table. I can easily do that by selecting my table again and then clicking the button next to the field name in the table menu.
You might also want to add another page. For example, here I have my product data, but I might also want to include my vendor or customer information. I can add a new page by hovering over the builder symbol in the menu on the left, and then by clicking the Create new page button at the top. Then I would go through much the same process as before, choosing my layout, collection, and all the other options I want.
Another thing you might want to do is connect a second (or third, fourth, ...) data source. To do that, go to the menu on the left again and hover over the data sources symbol. Then you can click on Add Resource. Then you will choose the data source you want to use, enter the necessary details and click the Add resource button. If you're interested in what data sources you can use, take a look at our Integrations page.
The data sources menu also lets you click on a data source to view it in Jet Admin's Data Editor. That Data Editor's user interface already has all the CRUD operations built in, add you don't even have to make an app to use them:
- Edit a record: simply click on the cell you want to change and enter a new value
- Add a record: click on the New Record button in the upper right corner, then enter the new data in the form that pops up as a modal
- Delete a record(s): select the record(s) you want to delete by clicking on the box on to the left of the record, then click on the Delete button that appears at the top of the table. You can also export data in this way, just click on Export instead of Delete
If you have more than one collection in your data source, you will be able to switch between collections in the menu on the left.
Jet Admin allows you to build CRUD apps quickly and easily – you can create a fully functional CRUD app in just minutes. Jet also offers a lot of flexibility if you want to customize your app, both in terms of appearance and functionality. If you’re interested in learning more about Jet Admin, go ahead and take a look at other articles on our blog, our YouTube channel, or our documentation. Also, don’t forget that you can get started for free today!
Other blog posts
How to build business apps for your Xano backend without code
How to create Notion charts for free without coding in 5 mins
How Ekar is Using Jet Admin to Manage the Largest Car Share Fleet in the Middle East