style.
css
*).*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida
Sans', Arial, sans-serif;
font-style:italic;
text-decoration: none;
list-style: none;
}
body{
background-color:#ed9bbd;
}
.head{
background-color: #500711;
padding: 30px;
display:flex;
justify-content: space-between;
align-items: center;
}
.name{
color: #ed9bbd;
padding-left: 130px;
text-shadow: 1px 1px 20px;
font-size: x-large;
}
.list{
display: flex;
font-size: x-large;
}
.content{
cursor: pointer;
color: #f58291;
padding: 15px;
}
.mainpage{
display: flex;
justify-content: center;
margin-top: 300px;
}
.btn{
background-color: #500711;
color: #ed9bbd;
font-size: xx-large;
border-radius: 25px;
border:rgb(235, 235, 131) ;
box-shadow: 10px 10px 20px 5px rgb(143, 41, 41);
width: 300px;
height: 90px;
}
.btn:hover{
margin-top: -10px;
padding-bottom:10px;
cursor: pointer;
width: 400px;
height:130px ;
}
.get{
display: flex;
justify-content: center;
align-items: center;
margin-top: 80px;
padding: 10px;
}
.label{
margin: 10px;
}
label{
color: #500711;
display: flex;
justify-content: center;
padding: 10px;
margin: 7px;
font-size: x-large;
}
.input{
margin: 10px;
padding: 10px;
}
input{
display: flex;
justify-content: center;
font-size: larger;
padding: 25px;
margin: 5px;
width: 300px;
height: 20px;
border-radius: 20px;
}
.submit{
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
.add{
display: flex;
justify-content: center;
font-size: larger;
text-align: center;
background-color: #eb5a6d;
border-radius: 20px;
width: 200px;
height: 50px;
margin-right: 100px;
padding: 15px;
}
.table{
display: flex;
justify-content: center;
align-items: center;
margin-top: 100px;
}
table{
border-radius: 5px;
color:#500711;
background-color: #fab5eb;
}
th{
border-radius: 3px;
background-color: #500711;
color: #ed9bbd;
width: 100px;
height: 50px;
}
td{
border-radius: 3px;
color:#500711;
}
.edit{
background-color: #eb5a6d;
color: #ed9bbd;
width: 70px;
}
.delete{
background-color: rgb(74, 139, 139);
color: #ed9bbd;
}
.butt{
display: flex;
align-items: center;
justify-content: center;
margin: 100px;
}
.btn1{
width: 200px;
height: 50px;
border-radius: 10px;
border: 2px solid #b65c68 ;
font-size: x-large;
color: #e65793;
}
---------------------------------------------------------
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CRUD</title>
</head>
{% load static%}
<link rel="stylesheet" href="{% static 'style.css' %}">
<body>
<div class="head">
<div class="name">
<h1>FIND MY FRIEND</h1>
</div>
<div class="menu">
<ul class="list">
<li class="content">BloodTypes</li>
<li class="content">Hospitl</li>
<li class="content">Contact</li>
<li class="content">About</li>
</ul>
</div>
</div>
<div class="table">
<table border="1" align="center">
<thead align="center">
<th>No</th>
<th>Name</th>
<th>age</th>
<th>BloodGroup</th>
<th>Address</th>
<th>Phone</th>
<th colspan="2">Action</th>
</thead>
{% for x in mem %}
<tbody align="center">
<tr>
<td>{{x.No}}</td>
<td>{{x.Name}}</td>
<td>{{x.Age}}</td>
<td>{{x.Blood}}</td>
<td>{{x.Address}}</td>
<td>{{x.Phone}}</td>
<td class="edit">Edit</td>
<td class="delete">delete</td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="mainpage">
<a href="{% url 'input'%}"><button type="submit" class="btn">Donet
Blood</button></a>
</div>
</form>
</div>
</body>
</html>
---------------------------------------------------------
input.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CRUD</title>
<link rel="stylesheet" href="style.css">
</head>
{% load static%}
<link rel="stylesheet" href="{% static 'style.css' %}">
<body>
<div class="head">
<div class="name">
<h1>FIND MY FRIEND</h1>
</div>
<div class="menu">
<ul class="list">
<li class="content">BloodTypes</li>
<li class="content">Hospitl</li>
<li class="content">Contact</li>
<li class="content">About</li>
</ul>
</div>
</div>
<form action="{% url 'addrec'%}" method="post">
{% csrf_token %}
<div class="get">
<div class="label">
<label for="">No</label><br>
<label for="">Name</label><br>
<label for="">Age</label><br>
<label for="">BloodGroup</label><br>
<label for="">Address</label><br>
<label for="">Phone</label><br>
</div>
<div class="input"><br>
<input type="number" name="No"><br>
<input type="text" name="Name"><br>
<input type="date" name="Age"><br>
<input type="text" name="Blood"><br>
<input type="text" name="Address"><br>
<input type="number" name="Phone"><br>
</div>
</div>
</form>
<div class="submit">
<a href="{% url 'index' %}"><button type="submit"
class="add">Submit</button></a>
</div>
</body>
</html>
---------------------------------------------------------
models.py
from django.db import models
class Member(models.Model):
No=models.CharField(max_length=100)
Name=models.CharField(max_length=100)
Age=models.CharField(max_length=100)
Blood=models.CharField(max_length=100)
Address=models.CharField(max_length=100)
Phone=models.CharField(max_length=100)
# Create your models here.
---------------------------------------------------------
urls.py
from django.urls import path
from . import views
urlpatterns=[
path('',views.index, name="index"),
path('input/',views.input, name="input"),
path("addrec/",views.addrec, name="addrec"),
]
---------------------------------------------------------
views.py
from django.shortcuts import render,redirect
from . models import Member
def index(request):
mem=Member.objects.all()
return render(request,'index.html',{'mem':mem})
def input(request):
return render(request,'input.html')
def addrec(request):
no = request.POST['No']
name = request.POST['Name']
age = request.POST['Age']
blood = request.POST['Blood']
address = request.POST['Address']
phone = request.POST['Phone']
mem = Member(No=no,Name=name,Age=age,Blood=blood,Address=address,Phone=phone)
mem.save()
return redirect("/")
# Create your views here.
---------------------------------------------------------
