-----------form.
html start--------------
{% extends "crud_app/base.html" %}
{% block title %}
form
{% endblock title %}
{% block content %}
<h1>Add Student Information<h1>
<div class="container">
<div class="row">
<div class="col-10 mx-auto alert alert-info">
<form method="POST" and enctype="multipart/form-data" action="{% url 'form'
%}">
{% if messages %}
<div id="good">
{% for message in messages %}
<div class="alert alert-{{message.tags}}">
<strong>Message:</strong>{{ message }}.
</div>
{% endfor %}
</div>
{% endif %}
{% csrf_token %}
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" name="name" class="form-control" id="name" >
</div>
<div class="mb-3">
<label for="age" class="form-label">Age</label>
<input type="number" name="age" class="form-control" id="age" >
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" name="email" class="form-control" id="email">
</div>
<div class="mb-3">
<label for="image" class="form-label">Image</label>
<input type="file" name="image" class="form-control" id="email">
</div>
<div class="mb-3">
<textarea name="message" class="form-control" placeholder=""
id="floatingTextarea2" style="height: 100px"></textarea>
<label for="floatingTextarea2">Message</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<script>
setTimeout(function(){
const abc=document.getElementById('good')
if (good){
good.style.display='none'
}
},5000)
</script>
{% endblock content %}
---------------------------------------------form.html end
here-------------------------------------
-----------------------------------------home.html starts
here-----------------------------
{% extends "crud_app/base.html" %}
{% block title %}
home
{% endblock title %}
{% block content %}
<link rel ="stylesheet" type = "text/css" href
="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/jquery.min.js"></
script>
<script src = "https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></
script>
<h1 class="text-center alert alert-success">This is the Home Page</h1>
<div class="container">
<div class="row">
<div class="col-12 mx-auto alert alert-secondary">
<h3 class="text-center">Student Data</h3>
</div>
</div>
<!-- Table Starts -->
<div class="table-responsive">
<button class="btn btn-info" >Clear Items</button>
<table class="table table-striped table-bordered table-hover table-sm" id =
"myTable">
<thead class="thead-dark">
<tr>
<th>S.N</th>
<th scope="col">ID</th>
<th scope="col">Full Name</th>
<th scope="col">Age</th>
<th scope="col">Email</th>
<th scope="col">Message</th>
<th scope="col">Action</th>
<th scope="col">Images</th>
</tr>
</thead>
<tbody>
{% for i in data %}
<tr>
<th scope="row">{{ forloop.counter}}</th>
<th scope="row">{{ i.id }}</th>
<td>{{ i.name }}</td>
<td>{{ i.age }}</td>
<td>{{ i.email }}</td>
<td>
{% if i.image %}
<img src="{{i.image.url}}" height="100px"width="100px"alt="">
{% endif %}
</td>
<td>{{ i.message }}</td>
<td>
<a href="{% url 'edit' i.id %}">
<button class="btn btn-primary">
<i class="fa-solid fa-pen-to-square"></i> Edit
</button>
</a>
<a href="{% url 'delete_data' i.id %}"><button class="btn btn-
danger"><i class="fa-solid fa-trash"></i>
Delete</button></a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% if data|length < 1 %}
<h1 class="text-center alert alert-danger">Data is not found</h1>
{% endif %}
</div>
<!-- Table Ends -->
<a href="recycle"><button class="btn btn-warning">Recycle</button></a>
</div>
<script>
let table = new DataTable('#myTable');
</script>
{% endblock content %}
---------------------------------------------home.html ends
here----------------------
-----------------edit.html starts here---------------------------
{% extends "crud_app/base.html" %}
{% block title %} form {% endblock title %}
{% block content %}
<h1>Update Student Information</h1>
<div class="container">
<div class="row">
<div class="col-10 mx-auto alert alert-info">
<form method="POST" action="{% url 'edit' data.id %}">
{% if messages %}
<div id="good">
{% for message in messages %}
<div class="alert alert-{{ message.tags }}">
<strong>Message:</strong> {{ message }}.
</div>
{% endfor %}
</div>
{% endif %}
{% csrf_token %}
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" value="{{ data.name }}" name="name" class="form-
control" id="name">
</div>
<div class="mb-3">
<label for="age" class="form-label">Age</label>
<input type="number" value="{{ data.age }}" name="age" class="form-
control" id="age">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" value="{{ data.email }}" name="email" class="form-
control" id="email">
</div>
<div class="mb-3">
<textarea name="message" class="form-control" placeholder=""
id="floatingTextarea2" style="height: 100px">{{ data.message }}</textarea>
<label for="floatingTextarea2">Message</label>
</div>
<button type="submit" class="btn btn-primary">Update</button>
</form>
</div>
</div>
</div>
<script>
setTimeout(function() {
const abc = document.getElementById('good');
if (abc) {
abc.style.display = 'none';
}
}, 5000);
</script>
{% endblock content %}
------------edit.html ends here----------------------------------
