Django CRUD (Create Read Update Delete) Example - Bootstrap Datatable
CREATE TABLE employee (
id INTEGER PRIMARY KEY,
name STRING (100),
contact STRING (100),
email STRING (255)
);
models.py
#models.py
class Employee(models.Model):
name = models.CharField(max_length=100)
email = models.EmailField()
contact = models.CharField(max_length=15)
class Meta:
db_table = "employee"
forms.py
#forms.py
from django import forms
from myapp.models import Employee
class EmployeeForm(forms.ModelForm):
class Meta:
model = Employee
fields = ['name', 'contact', 'email'] #https://docs.djangoproject.com/en/3.0/ref/forms/widgets/
widgets = { 'name': forms.TextInput(attrs={ 'class': 'form-control' }),
'email': forms.EmailInput(attrs={ 'class': 'form-control' }),
'contact': forms.TextInput(attrs={ 'class': 'form-control' }),
}
views.py
#views.py
from django.shortcuts import render, redirect
from myapp.forms import EmployeeForm
from myapp.models import Employee
# Create your views here.
def addnew(request):
if request.method == "POST":
form = EmployeeForm(request.POST)
if form.is_valid():
try:
form.save()
return redirect('/')
except:
pass
else:
form = EmployeeForm()
return render(request,'index.html',{'form':form})
def index(request):
employees = Employee.objects.all()
return render(request,"show.html",{'employees':employees})
def edit(request, id):
employee = Employee.objects.get(id=id)
return render(request,'edit.html', {'employee':employee})
def update(request, id):
employee = Employee.objects.get(id=id)
form = EmployeeForm(request.POST, instance = employee)
if form.is_valid():
form.save()
return redirect("/")
return render(request, 'edit.html', {'employee': employee})
def destroy(request, id):
employee = Employee.objects.get(id=id)
employee.delete()
return redirect("/")
urls.py
#urls.py
from django.contrib import admin
from django.urls import path
from myapp import views
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.index),
path('addnew',views.addnew),
path('edit/<int:id>', views.edit),
path('update/<int:id>', views.update),
path('delete/<int:id>', views.destroy),
]
templates/show.html
//templates/show.html
{% extends "base.html" %}
{% block title %}Employee Records{% endblock title %}
{% block content %}
<div class="col-md-12">
<h4>Django CRUD (Create Read Update Delete) Example - Bootstrap Datatable</h4> <span><a href="/addnew" class="btn btn-primary">Add New Record</a></span>
<div class="table-responsive">
<table id="bootstrapdatatable" class="table table-striped table-bordered" width="100%">
<thead>
<th><input type="checkbox" id="checkall" /></th>
<th>ID</th>
<th>Employee Name</th>
<th>Employee Email</th>
<th>Employee Contact</th>
<th>Edit</th>
<th>Delete</th>
</thead>
<tbody>
{% for employee in employees %}
<tr>
<td><input type="checkbox" class="checkthis" /></td>
<td>{{ employee.id }}</td>
<td>{{ employee.name }}</td>
<td>{{ employee.email }}</td>
<td>{{ employee.contact }}</td>
<td><p data-placement="top" data-toggle="tooltip" title="Edit"><a href="/edit/{{ employee.id }}" class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" ><span class="glyphicon glyphicon-pencil"></span></a></p></td>
<td><p data-placement="top" data-toggle="tooltip" title="Delete"><a href="/delete/{{ employee.id }}" class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete" ><span class="glyphicon glyphicon-trash"></span></a></p></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% endblock content %}
templates/base.html
//templates/base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
{% load static %}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
{% block content %}{% endblock %}
</div>
</div>
<script>
$(document).ready(function() {
$('#bootstrapdatatable').DataTable({
"aLengthMenu": [[3, 5, 10, 25, -1], [3, 5, 10, 25, "All"]],
"iDisplayLength": 3
}
);
} );
</script>
</body>
</html>
templates/index.html
//templates/index.html
{% extends "base.html" %}
{% block title %}Add New Employee Records{% endblock title %}
{% block content %}
<div class="col-md-12">
<h4>Django CRUD (Create Read Update Delete) Example - Bootstrap Datatable</h4>
<form method="POST" class="post-form" action="/addnew">
{% csrf_token %}
<div class="container">
<br>
<div class="form-group row">
<label class="col-sm-1 col-form-label"></label>
<div class="col-sm-4">
<h3>Enter Details</h3>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Employee Name:</label>
<div class="col-sm-4">
{{ form.name }}
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Employee Email:</label>
<div class="col-sm-4">
{{ form.email }}
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Employee Contact:</label>
<div class="col-sm-4">
{{ form.contact }}
</div>
</div>
<div class="form-group row">
<label class="col-sm-1 col-form-label"></label>
<div class="col-sm-4">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</form>
</div>
{% endblock content %}
templates/edit.html
//templates/edit.html
{% extends "base.html" %}
{% block title %}Add New Employee Records{% endblock title %}
{% block content %}
<div class="col-md-12">
<h4>Django CRUD (Create Read Update Delete) Example - Bootstrap Datatable</h4>
<form method="POST" class="post-form" action="/update/{{employee.id}}">
{% csrf_token %}
<div class="container">
<br>
<div class="form-group row">
<label class="col-sm-1 col-form-label"></label>
<div class="col-sm-4">
<h3>Update Details</h3>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Employee Id:</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="id" id="id_id" required maxlength="20" value="{{ employee.id }}"/>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Employee Name:</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="name" id="id_name" required maxlength="100" value="{{ employee.name }}" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Employee Email:</label>
<div class="col-sm-4">
<input type="email" class="form-control" name="email" id="id_email" required maxlength="254" value="{{ employee.email }}" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Employee Contact:</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="contact" id="id_contact" required maxlength="15" value="{{ employee.contact }}" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-1 col-form-label"></label>
<div class="col-sm-4">
<button type="submit" class="btn btn-success btn-lg">Update</button>
</div>
</div>
</div>
</form>
{% endblock content %}
