Crud operations with list items


Modern web development involves user interaction with databases. As a rule, the user needs khổng lồ perform some actions with the database. Usually, there are 4 actions: create, view, update and delete something. This is how we came to lớn name them CRUD Operations – an abbreviation for these four actions.

Bạn đang xem: Crud operations with list items

If you have ever worked with databases, then for sure you’ve worked with CRUD – even if you didn’t know it. CRUD operations are often used with SQL. Since SQL is very popular in the developer community, it is very important for developers to understand how CRUD operations work.

One good thing about the CRUD paradigm is that it helps the developer build complete applications.

Let’s see how this works with a simple abstract object in any application: we’ll use something lượt thích pseudocode khổng lồ describe this object. We will provide a system for registering students in a college. In this system there will be a “student” object that looks like this (carefully, pseudocode!):

“Student”: "id": , “First_name”: , “Last_name”: , “Course”: In order to manage this system, we must perform certain manipulations with the student object. So, let’s move on to the next section where we will describe each CRUD operation in more detail .

Most applications on the internet are actually CRUD applications. For instance, let’s take Facebook as one of the common examples – it’s just a CRUD application where users can create, delete, change information about themselves, & read information about other people. CRUD apps are used on a daily basis by various businesses và organizations to lớn maintain their day-to-day workflows.

What are CRUD and CRUD operations examples?

The CRUD concept was not originally conceived as a modern way to lớn create APIs. CRUD actually has its roots in database records. Most modern web & mobile applications contain some size of CRUD functionality. In addition, most programmers have to giảm giá with CRUD at some point. So, a CRUD application would be one that utilizes forms to retrieve & return data from a database.

A relational database consists of tables with rows and columns. In a relational database, each row in a table is called a record, & each column in the table represents a specific attribute or field. Users can điện thoại tư vấn four CRUD operations khổng lồ perform different action types on selected data in the database. This can be done through code or through GUI. Now, let’s take a look at each function separately.


CREATE – this feature will địa chỉ cửa hàng a new student to lớn the app/database by some trigger, for example, by pressing the “Add” button in the application, which will call the corresponding function. The program calling the function would supply the values ​​for “first_name”, “last_name”, và “course”. After the function is called, a new student record will appear in the database.

READ – this function allows you lớn see if there is a record about a specific student in the database. This function does not change the information about the student in any way, but only allows you lớn get information about him. You can also see a certain attribute.

UPDATE is a function that changes information about a student. Let’s write his name. After the function is applied, the corresponding record in the database table will be changed.

DELETE – of course, everything should be clear here. This function either completely removes the object or removes its selected attribute.

By definition, CRUD is more of a cycle than an architectural concept. There are several CRUD loops in any web application. For example, in an online store, a customer can CREATE an account, UPDATE tài khoản information, and DELETE items from the cart. At the same time, a store admin using the same web application can CREATE shipping records, READ them as needed, and UPDATE supply lists.

CRUD Operations in REST Context

Let’s now take a look at the concept of CRUD in the context of using our favorite website applications. Most often, REST architecture is used khổng lồ execute CRUD operations in website applications. REST is just a concept, a mix of rules. It uses HTTP protocols lượt thích GET, PUT, POST to link resources lớn actions within a client-server relationship. If we apply these rules to lớn the application, then we are already talking about RESTFul.

So, for example, each letter in CRUD can also be mapped khổng lồ an HTTP protocol method:


Thus CRUD is a cycle that can be mapped khổng lồ REST, by design. In a REST environment, CRUD often corresponds to lớn the HTTP methods POST, GET, PUT, và DELETE, respectively.

Parts of the CRUD app


The database is where your data is stored. A database management system is used to lớn manage the database. There are several types of database management systems, which are subdivided depending on how they store data: relational (SQL) & document (NoSQL). In this article, we talk about relational databases. SQL databases consist of tables. Tables consist of records. Records consist of fields. Fields consist of data.

User Interface or Front-end

The front-end, or User Interface, helps people interact with the application & database.

Back-end or APIs

Finally, the back-end informs your database of what functions lớn perform. These functions can be modeled in different ways, but they are still designed to lớn perform four basic CRUD operations.

Creating CRUD applications traditional way

In order to lớn develop a basic CRUD application from scratch, you will need a fairly good knowledge of javascript or front-end frameworks, one of the programming languages for the back-end, and knowledge of databases. You will also want to know one of the ORMs.

Xem thêm: Cách Sửa Lỗi Mysql Server Has Gone Away ” Trên Wordpress, Cách Sửa Lỗi “#2006 : Mysql Server Has Gone Away”

Let’s take a quick look at the steps you will have to go through lớn write a React + Node.js + PostgreSQL CRUD application.


Install React;Install PostgreSQL.

Front-end part

Use one of the React starter apps và learn it. For example, it may be created react app;Install all required modules (react-router, redux, etc.);Create Initial pages of your application;Create components that will help perform CRUD functions – buttons, forms, etc.;Connect the front-end part lớn back-end;Setup size validation;Develop react tables (optional);Setup fetching the data khung created database;Create entire application styles;Develop UI/UX of the application (optional);You should bởi the client part responsive;Write tests (optional).

Back-end and database part

Install Node Dependencies;Setting up PostgreSQL Database;Define Sequelize Schema;Create Routes Using ExpressJS (develop REST API).


It is one of the hardest parts.

Host the application;Set up CI/CD.

Almost all of the steps described above apply khổng lồ other technologies, be it Vue or Angular, Laravel or Python, PostgreSQL, or MySQL.

Guides on how to incorporate CRUD operations in an App

We have also selected for you some of the valuable guides on how lớn create a custom CRUD app:

Thus, in order khổng lồ build even a basic CRUD application, you will need knowledge of several technologies và will have lớn spend a lot of time studying & developing repetitive work – not to lớn mention new requests for the development of additional features.

In the next section, we will look at an alternative way to lớn develop a CRUD application that will save you a lot of time, not holding you back in the possibilities of customization and ownership of the source code.

Create CRUD phầm mềm with

In our example, we will build a small-time tracking application with several entities. The application will have a screen with users, projects, & records that will be linked khổng lồ each other. These entities can be managed using CRUD operations.


You should be able to build any CRUD application like a time tracking tiện ích after this tutorial using Generator;You should be able khổng lồ understand basic principles of CRUD concept & database architecture;You should be able to lớn create your own entities with custom relationships & parameters.

1. Planning the application

Application development with Generator consists of several stages. The first is to actually sort out what kind of application you will make. After that, plan what entities the database will consist of and what this application will be used for.

We mentioned above that we will be developing a time tracking application. Our application will consist of three entities (tables in the database):


This table will contain users of our application with different roles. Generator creates this table by default và does not prompt khổng lồ delete it.


This table will store the time spent records associated with projects & users. We will look at the more detailed contents of this table in the next steps.


This table will store data about projects. We will also consider filling this table with columns in more detail in the next steps.

2. Register tài khoản in Generator

So, for better interaction with Generator, firstly we advise you lớn create an tài khoản on the trang web before you develop an application.

To create an account on the website, simply click ‘Sign in’ in the header (see screenshot below).