Deepak Kumar

Posted on Jun 23 • Originally published at raajaryan.tech

Exploring CRUD: What It Is and How It Works

#javascript #beginners #tutorial #100daysofcode

In the realm of technology, particularly in software development and database management, the term "CRUD" is fundamental. It stands for Create, Read, Update, and Delete. These four basic operations are essential for interacting with databases and are ubiquitous across various applications and systems. In this article, we will explore what CRUD means, its importance, and how it is implemented across different platforms and technologies.

What is CRUD?

CRUD is an acronym representing the four primary operations required to manage persistent storage. These operations are essential for the functionality of any database-driven application. Let’s break down each component:

Create: This operation involves adding new records or data to a database. For example, when a user registers on a website, their information is created and stored in the database.
Read: Also known as Retrieve, this operation involves fetching or viewing existing records from a database. For instance, when a user logs into a system and their profile information is displayed, the system reads this data from the database.
Update: This operation is about modifying existing records in the database. An example would be a user updating their profile information, such as changing their email address.
Delete: This operation involves removing records from the database. For example, if a user decides to delete their account, this operation will remove their information from the database.

These operations are crucial for maintaining the integrity and functionality of any system that relies on data storage and management.

Importance of CRUD

CRUD operations are the backbone of any database system. Here’s why they are so important:

Data Management: CRUD operations allow for efficient management of data, ensuring that information can be easily created, accessed, modified, and deleted.
User Interaction: Most user interfaces are designed around CRUD operations. For example, a blog application would allow users to create posts, read posts, update posts, and delete posts.
Data Integrity: By using CRUD operations, developers can ensure that the data in the database remains consistent and accurate. Proper implementation of these operations helps prevent data corruption and ensures that users can interact with the application as expected.
Scalability and Maintainability: Properly implemented CRUD operations make the system scalable and easier to maintain. As the application grows, developers can manage the increasing volume of data without compromising performance or integrity.

CRUD in Web Development

In web development, CRUD operations are typically associated with RESTful APIs and web services. Let's explore how CRUD is implemented in this context:

RESTful APIs

REST (Representational State Transfer) is an architectural style that uses standard HTTP methods to perform CRUD operations. Each HTTP method corresponds to a CRUD operation:

POST: Used to create a new resource. For example, sending a POST request to /users with user details in the body would create a new user.
GET: Used to read or retrieve a resource. For example, sending a GET request to /users/1 would retrieve the details of the user with ID 1.
PUT: Used to update an existing resource. For example, sending a PUT request to /users/1 with updated user details in the body would update the user with ID 1.
DELETE: Used to delete a resource. For example, sending a DELETE request to /users/1 would delete the user with ID 1.

Example with Node.js and Express

Here’s a simple example of how CRUD operations can be implemented in a Node.js application using the Express framework:

const express = require('express');
const app = express();
app.use(express.json());

let users = [];

// Create
app.post('/users', (req, res) => {
  const user = req.body;
  users.push(user);
  res.status(201).send('User created');
});

// Read
app.get('/users', (req, res) => {
  res.json(users);
});

// Update
app.put('/users/:id', (req, res) => {
  const id = parseInt(req.params.id);
  const updatedUser = req.body;
  users = users.map(user => user.id === id ? updatedUser : user);
  res.send('User updated');
});

// Delete
app.delete('/users/:id', (req, res) => {
  const id = parseInt(req.params.id);
  users = users.filter(user => user.id !== id);
  res.send('User deleted');
});

app.listen(3000, () => console.log('Server running on port 3000'));

In this example, we define routes for each CRUD operation and implement the corresponding logic to handle user data.

CRUD in Database Management

CRUD operations are not limited to web development; they are also fundamental to database management. Most relational databases use SQL (Structured Query Language) to perform CRUD operations. Here’s how each CRUD operation translates to SQL:

Create: INSERT INTO users (name, email) VALUES ('John Doe', 'john@example.com');
Read: SELECT * FROM users WHERE id = 1;
Update: UPDATE users SET email = 'john.new@example.com' WHERE id = 1;
Delete: DELETE FROM users WHERE id = 1;

Example with MySQL

Here’s how you can implement CRUD operations using MySQL:

Create:

INSERT INTO users (name, email) VALUES ('John Doe', 'john@example.com');

Read:

SELECT * FROM users WHERE id = 1;

Update:

UPDATE users SET email = 'john.new@example.com' WHERE id = 1;

Delete:

DELETE FROM users WHERE id = 1;

These operations are executed using SQL queries and are essential for managing data within a relational database.

CRUD in NoSQL Databases

While CRUD operations are straightforward in relational databases, they are also applicable to NoSQL databases, though the implementation may differ due to the schema-less nature of NoSQL databases.

Example with MongoDB

MongoDB is a popular NoSQL database that uses a document-oriented model. Here’s how CRUD operations can be implemented in MongoDB:

Create:

db.users.insertOne({ name: "John Doe", email: "john@example.com" });

Read:

db.users.findOne({ _id: ObjectId("60c72b2f9b1d8f1d4c8b4567") });

Update:

db.users.updateOne({ _id: ObjectId("60c72b2f9b1d8f1d4c8b4567") }, { $set: { email: "john.new@example.com" } });

Delete:

db.users.deleteOne({ _id: ObjectId("60c72b2f9b1d8f1d4c8b4567") });

These operations use MongoDB's query language to manage documents within a collection.

CRUD in Frontend Development

While CRUD operations are often associated with backend development, they are also relevant in frontend development. Modern frontend frameworks and libraries like React, Angular, and Vue.js often involve CRUD operations to manage application state and interact with APIs.

Example with React

Here’s a simple example of how CRUD operations can be implemented in a React application:

import React, { useState, useEffect } from 'react';

const App = () => {
  const [users, setUsers] = useState([]);
  const [newUser, setNewUser] = useState('');

  useEffect(() => {
    // Read
    fetch('/api/users')
      .then(response => response.json())
      .then(data => setUsers(data));
  }, []);

  const createUser = () => {
    // Create
    fetch('/api/users', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: newUser })
    })
    .then(() => setNewUser(''))
    .then(() => fetch('/api/users').then(response => response.json()).then(data => setUsers(data)));
  };

  const updateUser = (id, newName) => {
    // Update
    fetch(`/api/users/${id}`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: newName })
    })
    .then(() => fetch('/api/users').then(response => response.json()).then(data => setUsers(data)));
  };

  const deleteUser = id => {
    // Delete
    fetch(`/api/users/${id}`, { method: 'DELETE' })
    .then(() => fetch('/api/users').then(response => response.json()).then(data => setUsers(data)));
  };

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            {user.name}
            <button onClick={() => updateUser(user.id, prompt('New name:', user.name))}>Update</button>
            <button onClick={() => deleteUser(user.id)}>Delete</button>
          </li>
        ))}
      </ul>
      <input value={newUser} onChange={e => setNewUser(e.target.value)} />
      <button onClick={createUser}>Add User</button>
    </div>
  );
};

export default App;

In this example, CRUD operations are used to manage user data within a React application, demonstrating how these operations are fundamental across various layers of

an application.

CRUD in Mobile Development

Mobile development also heavily relies on CRUD operations, whether you're developing for Android, iOS, or using cross-platform frameworks like Flutter or React Native. Data management, synchronization with remote servers, and local storage all require CRUD operations.

Example with Android (Java)

Here’s an example of implementing CRUD operations in an Android app using SQLite:

Database Helper Class:

public class DBHelper extends SQLiteOpenHelper {

    private static final String DATABASE_NAME = "users.db";
    private static final int DATABASE_VERSION = 1;
    private static final String TABLE_NAME = "users";
    private static final String COLUMN_ID = "id";
    private static final String COLUMN_NAME = "name";
    private static final String COLUMN_EMAIL = "email";

    public DBHelper(Context context) {
        super(context, DATABASE_NAME, null, DATABASE_VERSION);
    }

    @Override
    public void onCreate(SQLiteDatabase db) {
        String createTable = "CREATE TABLE " + TABLE_NAME + " (" +
                COLUMN_ID + " INTEGER PRIMARY KEY AUTOINCREMENT, " +
                COLUMN_NAME + " TEXT, " +
                COLUMN_EMAIL + " TEXT)";
        db.execSQL(createTable);
    }

    @Override
    public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) {
        db.execSQL("DROP TABLE IF EXISTS " + TABLE_NAME);
        onCreate(db);
    }

    // Create
    public boolean insertUser(String name, String email) {
        SQLiteDatabase db = this.getWritableDatabase();
        ContentValues contentValues = new ContentValues();
        contentValues.put(COLUMN_NAME, name);
        contentValues.put(COLUMN_EMAIL, email);
        long result = db.insert(TABLE_NAME, null, contentValues);
        return result != -1;
    }

    // Read
    public Cursor getUser(int id) {
        SQLiteDatabase db = this.getReadableDatabase();
        return db.query(TABLE_NAME, null, COLUMN_ID + "=?", new String[]{String.valueOf(id)}, null, null, null);
    }

    // Update
    public boolean updateUser(int id, String name, String email) {
        SQLiteDatabase db = this.getWritableDatabase();
        ContentValues contentValues = new ContentValues();
        contentValues.put(COLUMN_NAME, name);
        contentValues.put(COLUMN_EMAIL, email);
        int result = db.update(TABLE_NAME, contentValues, COLUMN_ID + "=?", new String[]{String.valueOf(id)});
        return result > 0;
    }

    // Delete
    public boolean deleteUser(int id) {
        SQLiteDatabase db = this.getWritableDatabase();
        int result = db.delete(TABLE_NAME, COLUMN_ID + "=?", new String[]{String.valueOf(id)});
        return result > 0;
    }
}

Using the DBHelper in an Activity:

public class MainActivity extends AppCompatActivity {

    DBHelper dbHelper;
    EditText editName, editEmail;
    Button btnAdd, btnView, btnUpdate, btnDelete;
    TextView textView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        dbHelper = new DBHelper(this);
        editName = findViewById(R.id.editName);
        editEmail = findViewById(R.id.editEmail);
        btnAdd = findViewById(R.id.btnAdd);
        btnView = findViewById(R.id.btnView);
        btnUpdate = findViewById(R.id.btnUpdate);
        btnDelete = findViewById(R.id.btnDelete);
        textView = findViewById(R.id.textView);

        // Add User
        btnAdd.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String name = editName.getText().toString();
                String email = editEmail.getText().toString();
                boolean inserted = dbHelper.insertUser(name, email);
                if (inserted) {
                    Toast.makeText(MainActivity.this, "User Added", Toast.LENGTH_SHORT).show();
                } else {
                    Toast.makeText(MainActivity.this, "Insertion Failed", Toast.LENGTH_SHORT).show();
                }
            }
        });

        // View User
        btnView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                int id = Integer.parseInt(editName.getText().toString()); // For simplicity, using name input for ID
                Cursor cursor = dbHelper.getUser(id);
                if (cursor.moveToFirst()) {
                    textView.setText("ID: " + cursor.getInt(cursor.getColumnIndexOrThrow("id")) +
                            "\nName: " + cursor.getString(cursor.getColumnIndexOrThrow("name")) +
                            "\nEmail: " + cursor.getString(cursor.getColumnIndexOrThrow("email")));
                } else {
                    Toast.makeText(MainActivity.this, "User Not Found", Toast.LENGTH_SHORT).show();
                }
            }
        });

        // Update User
        btnUpdate.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                int id = Integer.parseInt(editName.getText().toString()); // For simplicity, using name input for ID
                String newName = editEmail.getText().toString();
                String newEmail = "newemail@example.com"; // Dummy new email for update
                boolean updated = dbHelper.updateUser(id, newName, newEmail);
                if (updated) {
                    Toast.makeText(MainActivity.this, "User Updated", Toast.LENGTH_SHORT).show();
                } else {
                    Toast.makeText(MainActivity.this, "Update Failed", Toast.LENGTH_SHORT).show();
                }
            }
        });

        // Delete User
        btnDelete.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                int id = Integer.parseInt(editName.getText().toString()); // For simplicity, using name input for ID
                boolean deleted = dbHelper.deleteUser(id);
                if (deleted) {
                    Toast.makeText(MainActivity.this, "User Deleted", Toast.LENGTH_SHORT).show();
                } else {
                    Toast.makeText(MainActivity.this, "Deletion Failed", Toast.LENGTH_SHORT).show();
                }
            }
        });
    }
}

Example with Flutter

Here’s an example of how CRUD operations can be implemented in a Flutter app using the sqflite package for SQLite:

Setup Database Helper:

import 'package:sqflite/sqflite.dart';
import 'package:path/path.dart';

class DatabaseHelper {
  static final _databaseName = "users.db";
  static final _databaseVersion = 1;

  static final table = 'users';

  static final columnId = 'id';
  static final columnName = 'name';
  static final columnEmail = 'email';

  DatabaseHelper._privateConstructor();
  static final DatabaseHelper instance = DatabaseHelper._privateConstructor();

  static Database? _database;

  Future<Database?> get database async {
    if (_database != null) return _database;
    _database = await _initDatabase();
    return _database;
  }

  _initDatabase() async {
    String path = join(await getDatabasesPath(), _databaseName);
    return await openDatabase(path,
        version: _databaseVersion, onCreate: _onCreate);
  }

  Future _onCreate(Database db, int version) async {
    await db.execute('''
          CREATE TABLE $table (
            $columnId INTEGER PRIMARY KEY AUTOINCREMENT,
            $columnName TEXT NOT NULL,
            $columnEmail TEXT NOT NULL
          )
          ''');
  }

  // Create
  Future<int> insert(Map<String, dynamic> row) async {
    Database? db = await instance.database;
    return await db!.insert(table, row);
  }

  // Read
  Future<List<Map<String, dynamic>>> queryAllRows() async {
    Database? db = await instance.database;
    return await db!.query(table);
  }

  // Update
  Future<int> update(Map<String, dynamic> row) async {
    Database? db = await instance.database;
    int id = row[columnId];
    return await db!.update(table, row, where: '$columnId = ?', whereArgs: [id]);
  }

  // Delete
  Future<int> delete(int id) async {
    Database? db = await instance.database;
    return await db!.delete(table, where: '$columnId = ?', whereArgs: [id]);
  }
}

Using Database Helper in Flutter Widget:

import 'package:flutter/material.dart';
import 'database_helper.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: UserPage(),
    );
  }
}

class UserPage extends StatefulWidget {
  @override
  _UserPageState createState() => _UserPageState();
}

class _UserPageState extends State<UserPage> {
  final dbHelper = DatabaseHelper.instance;

  final nameController = TextEditingController();
  final emailController = TextEditingController();

  void _insert() async {
    Map<String, dynamic> row = {
      DatabaseHelper.columnName: nameController.text,
      DatabaseHelper.columnEmail: emailController.text,
    };
    final id = await dbHelper.insert(row);
    print('Inserted row id: $id');
    _queryAll();
  }

  void _queryAll() async {
    final allRows = await dbHelper.queryAllRows();
    print('Query all rows:');
    allRows.forEach(print);


 }

  void _update() async {
    Map<String, dynamic> row = {
      DatabaseHelper.columnId: 1,
      DatabaseHelper.columnName: 'New Name',
      DatabaseHelper.columnEmail: 'newemail@example.com',
    };
    final rowsAffected = await dbHelper.update(row);
    print('Updated $rowsAffected row(s)');
    _queryAll();
  }

  void _delete() async {
    final id = await dbHelper.delete(1);
    print('Deleted $id row(s)');
    _queryAll();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('CRUD Operations'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            TextField(
              controller: nameController,
              decoration: InputDecoration(labelText: 'Name'),
            ),
            TextField(
              controller: emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            Row(
              children: <Widget>[
                ElevatedButton(
                  onPressed: _insert,
                  child: Text('Insert'),
                ),
                SizedBox(width: 8),
                ElevatedButton(
                  onPressed: _update,
                  child: Text('Update'),
                ),
                SizedBox(width: 8),
                ElevatedButton(
                  onPressed: _delete,
                  child: Text('Delete'),
                ),
              ],
            ),
            ElevatedButton(
              onPressed: _queryAll,
              child: Text('Query'),
            ),
          ],
        ),
      ),
    );
  }
}

Conclusion

CRUD operations are fundamental to the development and management of data-driven applications. Whether working on web, mobile, or desktop applications, these operations form the backbone of data interaction, ensuring that applications can effectively manage and manipulate data. From RESTful APIs in web development to SQLite in mobile apps, understanding and implementing CRUD operations is essential for developers to create robust, scalable, and maintainable software solutions.

By mastering CRUD operations, developers can ensure that their applications are capable of handling user data efficiently, maintaining data integrity, and providing a seamless user experience. As technology continues to evolve, the principles of CRUD will remain a cornerstone of data management in software development.

💰 You can help me by Donating

Top comments (12)

Julian Gaston • Jun 23

Super resourceful. Great stuff, good reference! Great examples!!

Deepak Kumar • Jun 23

Thank you! I'm glad you found the list helpful.

João Angelo • Jun 24

Top, very nice and helpful !
Thanks for sharing. ✅

Deepak Kumar • Jun 24

Thank you! I'm glad you found it helpful.
Also, please check out my recent work on GitHub: ULTIMATE JAVASCRIPT
PROJECT. If you find
it useful, don't forget to star the repository!