Create, Read, Update, and Delete (CRUD) are the four basic functions performed by modern web and mobile applications. But how did these functions come about, and what exactly do they do?
In this article, we'll briefly describe what CRUD is and when it was introduced to programming. In this article, we will also use a JavaScript demo application for hospital management to show how to use DHTMLX widgets for create, read, update and delete operations.
DHTMLX focuses on JavaScript and HTML5 UI widgets and libraries to help developers build feature-rich, interactive web interfaces faster. Following the standards and practices of modern web development, DHTMLX provides top-of-the-line web application frameworks customized for desktop and mobile devices.
DHTMLX widget official version download
Meaning of CRUD operations
The CRUD paradigm was designed as a functional approach to improving persistent data storage, a term first popularized in the early 1980s by British information technology consultant and author James Martin. In his book "Managing Database Environments", James Martin mentions applications that create, read, update, and delete data.
In modern software engineering, CRUD is used as a method for designing web applications because it reminds developers how to create comprehensive user-friendly tools. In these applications, users interact with the database by creating new records, reading data in the UI, editing or updating data, and deleting data.
Each CRUD operation can be mapped to the corresponding HTTP protocol method:
- Create -> Post,
- Read -> Get,
- Update -> Put,
- Delete -> Delete.
For a deeper understanding of each CRUD operation, we provide an example of a DHTMLX demo application for hospital data management to aid in learning.
How CRUD Works: An Example of What You Can Build in JavaScript
The hospital data management application is based on 4 JavaScript widgets, each of which allows you to create a full range of data management options. They offer flexible configuration so you can easily integrate DHTMLX widgets into existing APIs to build powerful web applications.
Create
In CRUD, a create operation allows a user to add a new entry to the database. The entry could be a user account, personal information, a task and its description, and so on.
We use the DHTMLX Suite UI library to create a clear and convenient data grid. Here, medical staff can create a patient record by clicking the Add a patient button, and they can enter personal information, including the patient's vital signs, drug allergies, and so-called diagnosis, to select the appropriate treatment and provide adequate care.
read
Reading a resource should not modify any information.
We decided to diversify the data representation in the demo application by adding a hospital organizational chart created using the DHTMLX Diagram library.
The image below shows the interior of the hospital, with medical staff represented by cards with photos and contact details.
We've improved the user experience by adding search functionality so end users can easily find the specialist they need by typing in their name, phone number or email.
Update
An update operation involves modifying existing data with new values.
So, for example, hospital staff can work with text through a rich text editor, which has a clean and intuitive UI and supports basic text editing and formatting operations. Employees can easily enter or delete text, apply different fonts and styles, and change text or background colors.
Delete
Deleting a CRUD operation requires deleting a record from the UI and the database.
For example, hospital employees collect patient data in a table built using DHTMLX Spreadsheet , and they must delete patient records. They can then right-click on the obsolete record and select "Clear" and "Clear All" from the context menu. As a result, the patient record will be deleted from the data table.
In summary, DHTMLX JavaScript widgets help you build fully functional CRUD applications where users can create, read, update and delete data. They have feature-rich APIs that can be easily integrated into existing web applications.