Flask Tutorials: CRUD Operations

Welcome to the Flask Tutorials on CRUD Operations! In this comprehensive guide, we'll learn how to create, read, update, and delete (CRUD) data using Flask, a popular Python web framework. Let's get started!

What are CRUD Operations? 🎯

CRUD stands for Create, Read, Update, and Delete. These are fundamental operations in web development that allow us to manipulate data in a database.

Setting Up Our Project 📝

Before diving into CRUD operations, let's set up a basic Flask project.

bash

$ python3 -m venv venv
$ source venv/bin/activate
$ pip install flask

Now, let's create our main application file:

bash

$ touch app.py

Now, open app.py in your favorite text editor and follow along.

Creating Data: The Create Operation 📝

Let's start by creating a simple route to handle form submissions.

python

from flask import Flask, request, redirect, url_for

app = Flask(__name__)

@app.route('/create', methods=['GET', 'POST'])
def create():
    if request.method == 'POST':
        # Process form data here
        pass
    return render_template('create.html')

Here, we've created a route named /create that handles both GET and POST requests. When a user visits this route, they'll be presented with a form to submit data.

Form Example 📝

Create a file named create.html in a new templates folder:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Create Data</title>
</head>
<body>
    <h1>Create Data</h1>
    <form action="/create" method="post">
        <label for="name">Name:</label>
        <input type="text" name="name" required>
        <br>
        <label for="age">Age:</label>
        <input type="number" name="age" required>
        <br>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

With this form, users can enter their name and age and submit the form to create a new record in our database.

Reading Data: The Read Operation 📝

Next, let's create a route to display all records in our database:

python

@app.route('/')
def index():
    # Fetch records from the database
    pass
    return render_template('index.html', records=records)

Now, create a file named index.html in the templates folder:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Data List</title>
</head>
<body>
    <h1>Data List</h1>
    {% for record in records %}
        <div>
            <strong>Name:</strong> {{ record.name }}
            <br>
            <strong>Age:</strong> {{ record.age }}
        </div>
    {% endfor %}
</body>
</html>

With this template, we're iterating through our records and displaying them on the page.

Updating Data: The Update Operation 📝

Next, let's create a route to handle updates:

python

@app.route('/update/<int:id>', methods=['GET', 'POST'])
def update(id):
    # Fetch the record with the given id
    pass

    if request.method == 'POST':
        # Process form data here
        pass
    return render_template('update.html', record=record)

Now, create a file named update.html in the templates folder:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Update Data</title>
</head>
<body>
    <h1>Update Data</h1>
    <form action="/update/{{ record.id }}" method="post">
        <label for="name">Name:</label>
        <input type="text" name="name" value="{{ record.name }}" required>
        <br>
        <label for="age">Age:</label>
        <input type="number" name="age" value="{{ record.age }}" required>
        <br>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

With this form, users can update the name and age of a specific record in our database.

Deleting Data: The Delete Operation 📝

Finally, let's create a route to handle deleting records:

python

@app.route('/delete/<int:id>')
def delete(id):
    # Delete the record with the given id
    pass
    return redirect(url_for('index'))

With this route, we can delete a specific record from our database.

Quiz 💡

Question: Which Flask route handles the form submission for creating new data?

A: /create B: /update C: /delete Correct: A Explanation: The /create route handles form submissions for creating new data.

Now you have a basic understanding of CRUD operations in Flask! With these concepts, you can build powerful web applications that interact with databases. As you continue learning, don't forget to practice and explore new features in Flask. Happy coding! 🚀🎓