DEV Community

Cover image for CRUD with Django
Madhuban Khatri
Madhuban Khatri

Posted on

CRUD with Django

#django #python #crud

Heelloooo friends!
Welcome back to my blog page.

Today you will get the code of CRUD application in Django.

What is CRUD?

C - CREATE
R - RETRIEVE
U - UPDATE
D - DELETE

views.py 

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

#RETRIEVE
def home(request):
    #Retrieve all the persons' datas.
    get_persons = Person.objects.all()
    params = {'datas': get_persons}
    return render(request, 'home.html', params)


#CREATE
def add_person(request):
    if request.method == 'POST':
        fname = request.POST['fname']
        lname = request.POST['lname']
        age = request.POST['age']
        is_married = request.POST['bool']

        create_person = Person.objects.create(first_name=fname, last_name=lname, age=age, is_married=is_married)
        create_person.save()
        return redirect('home')
    else:
        return HttpResponse('GET request is not allowed.')


#UPDATE
def update_person(request, id):
    get_person = get_person = Person.objects.get(id=id)
    params = {'data': get_person}
    return render(request, 'update.html', params)


def update(request, id):
    get_person = get_person = Person.objects.get(id=id)
    if request.method == 'POST':
        fname = request.POST['fname']
        lname = request.POST['lname']
        age = request.POST['age']
        is_married = request.POST['bool']

        get_person.first_name = fname
        get_person.last_name = lname
        get_person.age = age
        get_person.is_married = is_married
        get_person.save()
    else:
        return HttpResponse('Error')

    return redirect('home')



#DELETE
def delete_person(request, id):
    get_person = Person.objects.get(id=id)
    get_person.delete()
    return HttpResponse("person deleted")
Enter fullscreen mode Exit fullscreen mode

url.py 

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home'),
    path('create/', views.add_person, name='add_person'),
    path('<str:id>/update_person/', views.update_person, name='update_person'),
    path('<str:id>/update/', views.update, name='update'),
    path('delete/<str:id>/', views.delete_person, name='delete_person'),
]
Enter fullscreen mode Exit fullscreen mode

models.py 

from django.db import models

# Create your models here.
class Person(models.Model):
    first_name = models.CharField(max_length=100)
    last_name = models.CharField(max_length=100)
    age = models.IntegerField()
    is_married = models.CharField(max_length=30)

    def _str_(self):
        return self.first_name
Enter fullscreen mode Exit fullscreen mode

admin.py 

from django.contrib import admin
from .models import Person

# Register your models here.

admin.site.register(Person)
Enter fullscreen mode Exit fullscreen mode

home.html 

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="container w-50">
        <h2 class="my-5">CRUD with DJANGO</h2>

        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
              <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Create</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Retreive</button>
            </li>

          </ul>
          <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                <form action="{% url 'add_person' %}" method="post">
                {% csrf_token %}
                <div class="mb-3">
                    <label for="exampleFormControlInput1" class="form-label">First Name</label>
                    <input type="text" class="form-control" name="fname" id="exampleFormControlInput1" placeholder="Madhuban">
                  </div>
                  <div class="mb-3">
                    <label for="exampleFormControlInput2" class="form-label">Last Name</label>
                    <input type="text" class="form-control" name="lname" id="exampleFormControlInput2" placeholder="Khatri">
                  </div>
                  <div class="mb-3">
                    <label for="exampleFormControlInput3" class="form-label">Age</label>
                    <input type="number" class="form-control" name="age" id="exampleFormControlInput3" placeholder="21">
                  </div>
                  <div class="mb-3">
                    <label for="exampleFormControlInput4" class="form-label">Are you Single?</label>
                    <select class="form-control" name="bool" id="exampleFormControlInput4">
                        <option>Yes</option>
                        <option>No</option>
                    </select>
                  </div>
                  <div class="mb-3">
                    <input type="submit" class="form-control btn btn-warning" value="Add">
                  </div>
                </form>
            </div>
            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                <table class="table">
                    <thead>
                      <tr>
                        <th scope="col">#</th>
                        <th scope="col">First Name</th>
                        <th scope="col">Last Name</th>
                        <th scope="col">Is Married</th>
                        <th scope="col">Action</th>
                      </tr>
                    </thead>
                    <tbody>
                        {% for data in datas %}
                            <tr>
                                <th scope="row">{{data.id}}</th>
                                <td>{{data.first_name}}</td>
                                <td>{{data.last_name}}</td>
                                <td>{{data.is_married}}</td>
                                <td>
                                    <a href="{% url 'update_person' data.id %}" class="btn btn-sm btn-primary">Update</a>    
                                    <a href="{% url 'delete_person' data.id %}" class="btn btn-sm btn-danger">Delete</a>
                                </td>
                            </tr>
                        {% endfor %}

                    </tbody>
                  </table>
            </div>

          </div>
    </div>


    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

update.html 

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="container">
        <h2 class="my-5">Update Person</h2>
        <form action="{% url 'update' data.id %}" method="post">
          {% csrf_token %}
          <div class="mb-3">
              <label for="exampleFormControlInput1" class="form-label">First Name</label>
              <input type="text" class="form-control" name="fname" id="exampleFormControlInput1" value="{{data.first_name}}">
            </div>
            <div class="mb-3">
              <label for="exampleFormControlInput2" class="form-label">Last Name</label>
              <input type="text" class="form-control" name="lname" id="exampleFormControlInput2" value="{{data.last_name}}">
            </div>
            <div class="mb-3">
              <label for="exampleFormControlInput3" class="form-label">Age</label>
              <input type="number" class="form-control" name="age" id="exampleFormControlInput3" value="{{data.age}}">
            </div>
            <div class="mb-3">
              <label for="exampleFormControlInput4" class="form-label">Are you Single?</label>
              <select class="form-control" name="bool" id="exampleFormControlInput4">
                  {% if data.is_married == 'Yes' %}
                  <option>Yes</option>
                  <option>No</option>
                  {% else %}
                  <option>No</option>
                  <option>Yes</option>
                  {% endif%}
              </select>
            </div>
            <div class="mb-3">
              <input type="submit" class="form-control btn btn-warning" value="Update">
            </div>
          </form>
    </div>



    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

garciadiazjaime profile image

Bridging Machine Learning with TensorFlow: From Python to JavaScript

Jaime -

hspedro profile image

Implementing Heap In Python

Pedro Soares -

adityabhuyan profile image

Why Django Stands Out Among Web Development Frameworks

Aditya Pratap Bhuyan -

kfir-g profile image

Understanding FastAPI Fundamentals: A Guide to FastAPI, Uvicorn, Starlette, Swagger UI, and Pydantic

Kfir -