CRUD is the foundation of every application that works with data. This guide breaks down each operation — Create, Read, Update and Delete — across SQL databases, REST APIs, and frontend JavaScript. Understand how CRUD maps to HTTP methods, SQL statements, and real-world app features with working code examples.
Shashank ShekharJanuary 2025 · Web Development
Every application you have ever used — social media, e-commerce, banking, notes apps, to-do lists — performs the same four fundamental operations on data: Create, Read, Update and Delete. These four operations form the acronym CRUD, and they are the backbone of virtually every software system that interacts with a database or API.
Whether you are writing raw SQL queries, building a REST API, or wiring up a frontend form — you are doing CRUD. This guide covers each operation in detail, shows you how CRUD maps across databases, APIs and frontend code, and gives you real working examples you can use immediately.
Download This Article as a Cheat SheetSave a clean summary of all CRUD operations across SQL, REST APIs and JavaScript for offline reference.
PDF · 1 page · Free
What Is CRUD
CRUD stands for Create, Read, Update, Delete — the four basic operations you can perform on any piece of data. The concept was first described by James Martin in his 1983 book Managing the Database Environment. Since then, CRUD has become the universal vocabulary for describing data operations in software.
Think of CRUD like a library system:
Create — Add a new book to the catalogue
Read — Look up a book or browse the catalogue
Update — Change a book's status (e.g., mark as checked out)
Delete — Remove a book from the catalogue
Every layer of a software application implements CRUD — from the database (SQL statements), to the backend API (HTTP methods), to the frontend UI (forms, lists, buttons). Understanding how these layers connect is the key to building complete applications.
The CRUD Mapping Table
CRUD operations map cleanly to SQL statements, HTTP methods and typical UI actions. Here is the complete mapping:
CRUD
SQL
HTTP Method
REST Endpoint
UI Action
Create
INSERT
POST
POST /users
Submit form
Read
SELECT
GET
GET /users/:id
View page / list
Update
UPDATE
PUT / PATCH
PUT /users/:id
Edit form
Delete
DELETE
DELETE
DELETE /users/:id
Delete button
💡Why this mapping matters: When you understand that a "Save" button triggers a POST request that runs an INSERT query, the entire stack becomes transparent. You stop seeing layers and start seeing one continuous flow of data.
Create — Adding New Data
The Create operation adds new records to your data store. In a database this means inserting a new row. In a REST API this means sending a POST request. In a UI this means filling out a form and clicking "Submit" or "Save".
SQL — INSERT
SQL — inserting new records
-- Insert a single userINSERT INTOusers(name,email,role)VALUES('Shashank','shashank@example.com','developer');-- Insert multiple users at onceINSERT INTOusers(name,email,role)VALUES('Priya','priya@example.com','designer'),('Rahul','rahul@example.com','manager'),('Anjali','anjali@example.com','developer');-- Insert and return the new row (PostgreSQL)INSERT INTOusers(name,email)VALUES('Shashank','shashank@example.com')RETURNING*;-- returns the inserted row with its generated id
REST API — POST
JavaScript — POST request to create a new resource
// Create a new user via REST APIconstnewUser={name:'Shashank',email:'shashank@example.com',role:'developer'};constresponse=awaitfetch('https://api.example.com/users',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(newUser)});constcreated=awaitresponse.json();console.log(created);// { id: 1, name: 'Shashank', ... }// Server responds with 201 Created
Read — Fetching Data
The Read operation retrieves existing data without modifying it. This is the most common operation — every time a page loads, a list renders, or a search executes, a Read operation is happening. Read operations should never change data. They are safe and idempotent.
SQL — SELECT
SQL — querying data with SELECT
-- Get all usersSELECT*FROMusers;-- Get a specific user by idSELECT*FROMusersWHEREid=42;-- Get specific columns with filtering and sortingSELECTname,email,roleFROMusersWHERErole='developer'ORDER BYnameASCLIMIT10;-- Search with LIKESELECT*FROMusersWHEREnameLIKE'%shashank%';-- Count recordsSELECTCOUNT(*)AStotal_usersFROMusers;
REST API — GET
JavaScript — GET requests to read data
// Get all usersconstresponse=awaitfetch('https://api.example.com/users');constusers=awaitresponse.json();console.log(users);// [{ id: 1, name: 'Shashank' }, ...]// Get a single user by idconstuser=awaitfetch('https://api.example.com/users/42');constdata=awaituser.json();// Get with query parameters (filtering, pagination)constfiltered=awaitfetch('https://api.example.com/users?role=developer&page=1&limit=10');constdevs=awaitfiltered.json();
Update — Modifying Existing Data
The Update operation changes existing records. This is where you modify a user's name, update a product price, or change an order status. In REST APIs, you have two options: PUT (replace the entire resource) or PATCH (update only specific fields).
SQL — UPDATE
SQL — updating existing records
-- Update a single fieldUPDATEusersSETrole='admin'WHEREid=42;-- Update multiple fieldsUPDATEusersSETname='Shashank Shekhar',role='senior_developer',updated_at=NOW()WHEREid=42;-- Update with a condition (bulk update)UPDATEusersSETactive=falseWHERElast_login<'2024-01-01';-- ⚠️ DANGER: Without WHERE, ALL rows are updated!-- UPDATE users SET role = 'intern'; ← updates EVERY user
⚠️Always use WHERE with UPDATE and DELETE. Forgetting the WHERE clause is one of the most common and devastating mistakes in SQL. It will modify or remove every single row in the table. Always double-check before running.
REST API — PUT & PATCH
JavaScript — PUT vs PATCH for updates
// PUT — replace the ENTIRE resource (must send all fields)constputResponse=awaitfetch('https://api.example.com/users/42',{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({name:'Shashank Shekhar',email:'shashank@example.com',role:'admin'// must include ALL fields})});// PATCH — update ONLY specific fields (partial update)constpatchResponse=awaitfetch('https://api.example.com/users/42',{method:'PATCH',headers:{'Content-Type':'application/json'},body:JSON.stringify({role:'admin'// only send the field you want to change})});
Delete — Removing Data
The Delete operation removes records from your data store. In SQL this is the DELETE statement. In REST this is the DELETE HTTP method. Delete operations are idempotent — deleting the same resource twice has the same effect as deleting it once (the resource is gone).
SQL — DELETE
SQL — deleting records
-- Delete a specific userDELETE FROMusersWHEREid=42;-- Delete with a conditionDELETE FROMusersWHEREactive=falseANDlast_login<'2023-01-01';-- ⚠️ DANGER: Without WHERE, ALL rows are deleted!-- DELETE FROM users; ← deletes EVERY user-- Delete and return what was deleted (PostgreSQL)DELETE FROMusersWHEREid=42RETURNING*;
REST API — DELETE
JavaScript — DELETE request to remove a resource
// Delete a userconstresponse=awaitfetch('https://api.example.com/users/42',{method:'DELETE'});// Server responds with 204 No Content (success, empty body)if(response.status===204){console.log('User deleted successfully');}// Always confirm before deleting in your UIfunctiondeleteUser(id){if(!confirm('Are you sure you want to delete this user?'))return;returnfetch(`https://api.example.com/users/${id}`,{method:'DELETE'});}
Frontend CRUD — A Complete Example
Here is how all four CRUD operations come together in a real frontend application — a simple user management module using JavaScript and fetch:
CRUD operations should always include proper validation and error handling. Never trust client input. Validate on both the frontend (for UX) and the backend (for security).
JavaScript — CRUD with validation and error handling
// Frontend validation before CREATEfunctionvalidateUser(data){consterrors=[];if(!data.name||data.name.length<2)errors.push('Name must be at least 2 characters');if(!data.email||!data.email.includes('@'))errors.push('Valid email is required');returnerrors;}// Error handling wrapperasync functionsafeFetch(url,options){try{constres=awaitfetch(url,options);if(!res.ok){consterror=awaitres.json();throw newError(error.message||`HTTP ${res.status}`);}returnres.status===204?null:res.json();}catch(err){console.error('API Error:',err.message);throwerr;}}
Soft Delete vs Hard Delete
There are two ways to delete data. A hard delete permanently removes the row from the database. A soft delete marks the row as deleted (usually with a deleted_at timestamp) but keeps it in the database. Most production applications use soft delete because it allows recovery and audit trails.
SQL — soft delete vs hard delete
-- HARD DELETE — row is permanently goneDELETE FROMusersWHEREid=42;-- SOFT DELETE — row stays, but is marked as deletedUPDATEusersSETdeleted_at=NOW()WHEREid=42;-- When reading, exclude soft-deleted rowsSELECT*FROMusersWHEREdeleted_atIS NULL;-- Restore a soft-deleted userUPDATEusersSETdeleted_at=NULLWHEREid=42;
Aspect
Hard Delete
Soft Delete
Data recovery
Impossible
Easy
Storage
Saves space
Uses more space
Audit trail
Lost
Preserved
Query complexity
Simple
Needs WHERE filter
GDPR compliance
Fully compliant
May need extra steps
Quick Reference
Operation
SQL
HTTP
Status Code
Idempotent
Create
INSERT
POST
201 Created
No
Read
SELECT
GET
200 OK
Yes
Update
UPDATE
PUT / PATCH
200 OK
PUT: Yes / PATCH: No
Delete
DELETE
DELETE
204 No Content
Yes
⚡ Key Takeaways
CRUD stands for Create, Read, Update, Delete — the four fundamental operations you can perform on any data. Every app, every API, every database uses them.
Create maps to SQL INSERT, HTTP POST, and returns 201 Created. POST is not idempotent — sending the same request twice can create duplicates.
Read maps to SQL SELECT and HTTP GET. It is safe and idempotent — it never modifies data. Use query parameters for filtering, sorting and pagination.
Update maps to SQL UPDATE. In REST, use PUT to replace the entire resource or PATCH to update specific fields. Always include a WHERE clause in SQL.
Delete maps to SQL DELETE and HTTP DELETE. It is idempotent. Consider soft delete (marking as deleted) over hard delete (permanent removal) for production apps.
Always validate input on both frontend and backend. Never trust client data. Handle errors gracefully with try/catch and meaningful error messages.
Never forget the WHERE clause in UPDATE and DELETE statements — without it, you will modify or remove every row in the table.
📄
Save This Guide as a PDFA one-page cheat sheet covering all CRUD operations across SQL, REST APIs and JavaScript. Great for quick reference.
PDF · 1 page · Free
CRUDSQLREST APIBeginner
Shashank Shekhar
Founder & Creator — Hoopsiper.com
Full stack developer and educator. Building Hoopsiper to help developers learn faster through practical, no-fluff coding guides on JavaScript, AI/ML, Python and modern web development.
More from Dev Trends
Web Dev: HTTP Methods Explained — GET, POST, PUT, DELETE and more, with real fetch() examples.
JavaScript: Async Patterns — Callbacks, Promises and async/await explained clearly with real examples.
Frontend: Semantic HTML and Modular CSS — Write meaningful HTML and clean CSS that stays organised.