Open in app

Sign in

Write

Sign in

Django CRUD (Create, Retrieve, Update, Delete) Codes With Pankaj

Codes With Pankaj
5 min readMar 14, 2024

--

Django is a web framework in Python that helps you make websites easily, without worrying about complicated setup or missing dependencies. It’s based on a structure called MVT (Model View Template) and focuses on four main actions: Create, Retrieve, Update, and Delete, commonly referred to as CRUD.

Here’s what each part means:

  • Create: Adding new stuff to a list or database.
  • Retrieve: Finding or reading things from the list or database, either as a whole list or individually.
  • Update: Changing or editing things that are already in the list or database.
  • Delete: Removing things from the list or database.

Step : 1 . Create Project

python manage.py startapp contact
cd contact

Step : 2 Create a app into project

django-admin startapp contact_app

Step : 3 add app name into settings.py file

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "contact_app",
]

Step : 4 Create a templates folder into app contact_app/templates

Create html file into templates folder

1. contact\contact_app\templates\dashboard.html
2. contact\contact_app\templates\edit.html
3. contact\contact_app\templates\index.html

Step : 5 contact\contact_app\models.py

from django.db import models

# Create your models here.
class Msg(models.Model):
    name = models.CharField(max_length=100)
    email = models.CharField(max_length=100)
    mobile= models.BigIntegerField()
    msg = models.TextField(
python manage.py migrate
python manage.py makemigrations

Step : 6 contact\contact_app\views.py

from django.shortcuts import render , redirect
from django.http import HttpResponse
from .models import Msg

def create (request):
    if(request.method == "GET"):
        return render(request,"index.html")
    else:
        username = request.POST["uname"]
        contact = request.POST["mobile"]
        email = request.POST["uemail"]
        msg = request.POST["msg"]

        m = Msg.objects.create(name=username,email=email,mobile=contact,msg=msg)
        m.save()

        return render(request,"index.html")

def dashboard(request):
    context = {}
    m = Msg.objects.all() # Fetch all data
    context['data'] = m 
    #print(m)

    return render(request,"dashboard.html",context)

def edit(request,sid):
    if request.method == "GET":
        m = Msg.objects.filter(id = sid)
        context = {}
        context['data'] = m
        return render(request,"edit.html",context)
    else :
        username = request.POST["uname"]
        contact = request.POST["mobile"]
        email = request.POST["uemail"]
        msg = request.POST["msg"]
        
        m = Msg.objects.filter(id = sid).update(name=username,email=email,mobile = contact , msg = msg)
        return redirect("/")
    
def delete(request,did):
    m = Msg.objects.filter(id=did)
    m.delete()
    return redirect("/")

Step : 7 contact\contact_app\templates\dashboard.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <title>Codes With Pankaj</title>
</head>
<body>

    <nav class="navbar navbar-expand-lg bg-warning">
        <div class="container-fluid">
          <a class="navbar-brand" href="https://www.codeswithpankaj.com/">Codes With Pankaj</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="btn btn-primary" aria-current="page" href="{% url 'create' %}">Add Data</a>
              </li>
         
            </ul>
          </div>
        </div>
      </nav>

      <div class="container mt-5">
            <div class="row">
                <div class="col">
                    <table class="table table-bordered border-primary">
                        <thead class="table-warning">
                            <tr>
                                <th>Sr. No.</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Mobile</th>
                                <th>Message</th>
                                <th>Edit</th>
                                <th>Delete</th>
                            </tr>
                        </thead>
                        
            
                        {% for d in data %}
                        <tr>
                            <td>{{ forloop.counter }}</td>
                            <td>{{ d.name }}</td>
                            <td>{{ d.email }}</td>
                            <td>{{ d.mobile }}</td>
                            <td>{{ d.msg }}</td>
                            <td><a href="/edit/{{d.id}}"><i class="bi bi-pencil-square"></i></a></td>
                            <td><a href="/delete/{{d.id}}"><i class="bi bi-trash"></i></a></td>
                        </tr>
                        {% endfor %}
                    </table>
                </div>
            </div>
      </div>

        

    
</body>
</html>

Step : 8 contact\contact_app\templates\edit.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Codes With Pankaj</title>
   
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    
    </head>
    <body>
    
        <nav class="navbar navbar-expand-lg bg-warning">
            <div class="container-fluid">
              <a class="navbar-brand" href="https://www.codeswithpankaj.com/">Codes With Pankaj</a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a class="btn btn-primary" aria-current="page" href="{% url 'dashboard' %}">Dashboard</a>
                  </li>
             
                </ul>
              </div>
            </div>
          </nav>
    
          <div class="container mt-5">
            <div class="row justify-content-center">
                <div class="col-sm-6 ">
                    <h1>Update Data</h1>

                    <form action="" method="POST">
                        {% csrf_token %}
                
                        <label class="form-label">Enter name</label>
                        <br>
                        <input type="text" class="form-control" name="uname" value="{{ data.0.name }}">
                        <br>
                        <label class="form-label">Email id</label>
                        <br>
                        <input type="email" class="form-control" name="uemail" value="{{ data.0.email }}">
                        <br>
                        <label class="form-label">Mobile Number </label>
                        <br>
                        <input type="number" class="form-control" name="mobile" value="{{ data.0.mobile }}">
                        <br>
                        <label class="form-label">Message</label>
                        <br>
                        <textarea name="msg" class="form-control" cols="30" rows="10" >
                            {{ data.0.msg }}
                        </textarea>
                        <br>
                        <input type="submit" value="send" class="btn btn-primary"/>
                
                    </form>

                    </div>
                    </div>
                    </div>

    
</body>
</html>

Step : 9 contact\contact_app\templates\index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <title>Codes With Pankaj</title>
</head>
<body>

    <nav class="navbar navbar-expand-lg bg-warning">
        <div class="container-fluid">
          <a class="navbar-brand" href="https://www.codeswithpankaj.com/">Codes With Pankaj</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="btn btn-primary" aria-current="page" href="{% url 'dashboard' %}">Dashboard</a>
              </li>
         
            </ul>
          </div>
        </div>
      </nav>

      <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-sm-6 ">
                <h1>Add new Data</h1>
                <form action="" method="POST">
                    {% csrf_token %}
            
                    <label class="form-label">Enter name</label>
                    <br>
                    <input type="text"  name="uname" class="form-control">
                    <br>
                    <label class="form-label">Email id</label>
                    <br>
                    <input type="email" class="form-control" name="uemail">
                    <br>
                    <label class="form-label">Mobile Number </label>
                    <br>
                    <input type="number" class="form-control" name="mobile">
                    <br>
                    <label class="form-label">Message</label>
                    <br>
                    <textarea name="msg" cols="30" rows="10" class="form-control"></textarea>
                    <br>
                    <input type="submit" value="send" class="btn btn-primary"/>
            
                </form>

                </div>
                </div>
                </div> 
    
</body>
</html>

Step : 10 contact\contact_app\urls.py

from django.urls import path
from . import views


urlpatterns=[
    path("create",views.create,name='create'),
    path("",views.dashboard,name='dashboard'),
    path("edit/<sid>",views.edit),
    path("delete/<did>",views.delete),
]

Step : 11 Add Urls into project — contact\contact\urls.py

from django.contrib import admin
from django.urls import path , include

urlpatterns = [
    path("admin/", admin.site.urls),
    path("",include("contact_app.urls")),
]

Step 12 : Open terminal and create super user

python manage.py createsuperuser

Username (leave blank to use 'cwp'): root
Email address: root@p4n.in
Password: 
Password (again):
Bypass password validation and create user anyway? [y/N]: y
Superuser created successfully.

Step 13 : Run Project

python manage.py runserver

Starting development server at http://127.0.0.1:8000/

download complete code

Python
Django Framework
Pythondjangotutorial
Codeswithpankaj
Python Web Developer

--

--

Codes With Pankaj

Written by Codes With Pankaj

40 Followers

@codeawithpankaj.com

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams