مشكلة فى كود بايثون جانغو

السلام عليكم 

صنعت مشروع بواسطة فيديو من اليوتيوب .. لتطوير مهارتي

عبارة عن نظام ادارة مكتبة 

المشكلة هي انه عند اضافة كتاب جديد يظهر لي هذا الخطأ 

اقتباس

IntegrityError at /

NOT NULL constraint failed: page_category1.name

وعند عمل refrash لصفحة تظهر category اكثر من مرة بمعني انه يظهر مربع اخر له نفس الاسم رغم انني لم اضيفه  

فما هو الحل 

ها هو كود models

from django.db import models

# Create your models here.
class Category1(models.Model):
    name = models.CharField(max_length=50)
    def __str__(self):
        return self.name
class Book(models.Model):
    x = [
        ("avab","avab"),
        ("ren","ren"),
        ("sale","sale"),
    ]
    
    
    titile = models.CharField(max_length=50)
    author = models.CharField(max_length=50)
    photo_book = models.ImageField(upload_to="photes", null=True, blank=True,default="db.jpg")
    photo_author = models.ImageField(upload_to="photes", null=True, blank=True,default="a.jpg")
    pages = models.IntegerField(null=True, blank=True)
    price = models.DecimalField(max_digits=10,decimal_places=3, null=True, blank=True)
    ratelday = models.DecimalField(max_digits=10,decimal_places=3, null=True, blank=True)
    rateltime = models.IntegerField(null=True, blank=True)
    active = models.BooleanField(default=True)
    statue = models.CharField(max_length=50,choices=x,null=True, blank=True)
    categry = models.ForeignKey(Category1,on_delete=models.PROTECT,null=True, blank=True)
    def __str__(self):
        return self.titile

كود views

from django.shortcuts import render, redirect, get_object_or_404
from .models import *
from .forms import *

# Create your views here.


def index(request):
    
    if request.method == "POST":
        add = BookForm(request.POST, request.FILES)
        if add.is_valid():
            add.save()
        
    if request.method == "POST":
        
    
        addcate = request.POST.get("cate")
        
        addca = Category1(name=addcate)
        addca.save()
    
    context = {
        'book':Book.objects.all(),
        'cate':Category1.objects.all(),
        'form':BookForm(),
        'form1':CategoryForm(),
    }
    return render(request, "pages/conten.html",context)

def books(request):
    context = {
        'book':Book.objects.all(),
        'cate':Category1.objects.all(),
        'formcat':CategoryForm(),
    }
    return render(request, "pages/books.html",context)

def update(request, id):
    book_id = Book.objects.get(id=id)
    if request.method == "POST":
        book_save = BookForm(request.POST, request.FILES, instance=book_id)
        if book_save.is_valid():
            book_save.save()
            return redirect('/')
    else:
        book_save = BookForm(instance=book_id)
    context = {
        'form':book_save,
    }
    return render(request, "pages/update.html", context)
    
def delete(request, id):
    book_delete = get_object_or_404(Book, id=id)
    if request.method == "POST":
        book_delete.delete()
        redirect('/')
        
    return render(request, "pages/delete.html")

كود forms

from django import forms
from .models import Book, Category1

class CategoryForm(forms.Form):
    class Meta:
        model = Category1
        fields = '__all__'
        widgets = {
            'name':forms.TextInput(attrs={'class':'form-control'}),
        }
    
        
    


class BookForm(forms.ModelForm):
    class Meta:
        model = Book
        fields = '__all__'
        widgets = {
            'titile':forms.TextInput(attrs={'class':'form-control'}),
            'author':forms.TextInput(attrs={'class':'form-control'}),
            'photo_book':forms.FileInput(attrs={'class':'form-control'}),
            'photo_author':forms.FileInput(attrs={'class':'form-control'}),
            'pages':forms.NumberInput(attrs={'class':'form-control'}),
            'price':forms.NumberInput(attrs={'class':'form-control'}),
            'ratelday':forms.NumberInput(attrs={'class':'form-control'}),
            'rateltime':forms.NumberInput(attrs={'class':'form-control'}),
            'statue':forms.Select(attrs={'class':'form-control'}),
            'categry ':forms.Select(attrs={'class':'form-control'}),
        }   

كود conten.html

{% extends 'base.html'  %}

{% block content %}


<div style="direction: rtl;" class="wrapper">




    <!-- Content Wrapper. Contains page content -->
    <div   class="content-wrapper">
      <!-- Content Header (Page header) -->
  
  
      <!--الاحصائيات-->
      <div class="content">
        <div class="container-fluid">
          <div class="row">
            <div class="col-lg-6">
              <div class="card">
                <div class="card-header border-0">
                  <div class="d-flex justify-content-between">
                    <h3 class="card-title">اجمالي عدد الكتب</h3>                    
                  </div>
                </div>
                <div class="card-body">
                  <div class="d-flex">
                    <p class="d-flex flex-column">
                      <span class="text-bold text-lg">500</span>
                      <span>اجمالي عدد الكتب</span>
                    </p>  
                  </div>
                  <!-- /.d-flex -->

                  <div class="position-relative mb-4">
                    <canvas id="visitors-chart" height="200"></canvas>
                  </div>  
                </div>
              </div>
              <!-- /.card -->
            </div>
            <!-- /.col-md-6 -->
            
            <div class="col-lg-6">
              <div class="card">
                <div class="card-header border-0">
                  <div class="d-flex justify-content-between">
                    <h3 class="card-title">الارباح</h3>   
                  </div>
                </div>    
                <div class="card-body">
                  <div class="d-flex">
                    <p class="d-flex flex-column">
                      <span id="totalsalarys" class="text-bold text-lg">$250</span><br></p>
                  </div>
                  <!-- /.d-flex -->
  
                  <div class="position-relative mb-4">
                    <canvas id="sales-chart" height="160"></canvas>
                  </div>
  
                  <div class="d-flex flex-row justify-content-end">
                    <span class="mr-2">
                      <i class="fas fa-square text-primary"></i> الاربح من بيع الكتب
                      <p id="soldtotals"></p>     
                    </span>
                    <span>
                      <i class="fas fa-square text-gray"></i> الارباح من استعارة الكتب
                      <p id="rentedtotals"></p>
                    </span>
                  </div>
                </div>
              </div>
            </div>
        
            <!-- /.col-md-6 -->
          </div>
          <!-- /.row -->
  
          <!-- form add books -->
          <div class="row m-1 mb-3">   
            <a href="#bookform" class="btn btn-primary" data-toggle="collapse">+ اضافة كتاب</a>
          </div>
          
          <div id="bookform" class="card card-primary collapse">
            <div class="card-header">
              <h3 class="card-title">اضافة كتاب</h3>
            </div>
            <!-- /.card-header -->
            <!-- form start -->
            <form method="POST" enctype="multipart/form-data"  > 
              {% csrf_token %}
              <div class="card-body"> 
               {{form}}
              </div>
              <!-- /.card-body -->
              <div class="card-footer">
                <button type="submit" class="btn btn-primary">اضافة</button>
              </div>
            </form>
          </div>
  
                <!-- /.card -->
          </div>
          <!-- end form add books -->
  
  
          <!-- تصنيفات-->
  
          <div class="row justify-content-center mb-3">
            <div class="col-4 ">
              <ul class="nav">
              {% for cat in cate %}
                <li class="nav-item cat{{cat.id}}">
                  <a id="" class="nav-link bg-primary" href="#">{{cat.name}}</a>
                </li>
              {% endfor %}
              </ul>
            </div>
          </div>
          <!-- books -->

          <div class="row">


        {% for x in book %}    
          <!-- الكتب -->
              <div id="" class="col-md-4 bookhide book{{x.categry.id}} book{{x.statue}}">
                  <!-- Widget: user widget style 1 -->
                <div id="" class="card card-widget widget-user ">
                  <!-- Add the bg color to the header using any of the bg-* classes -->
                <!-- قائمة منسدلة -->
                <div style="position: absolute;" class="btn-group">   
                  <button type="button" class="btn dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="sr-only">Toggle Dropdown</span>
                  </button>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="{% url "update" x.id %}">تعديل</a>
                    <a class="dropdown-item" href="{% url "delete" x.id %}">حذف</a>
                <!-- Button trigger modal -->
                  </div>
                </div>
                {% if x.photo_book %}
                <div style="background: url({{x.photo_book.url}});background-size:cover;" class="widget-user-header bg-info">
                {% else %}
                <div  class="widget-user-header bg-info"></div>
                {% endif %}  
                <h3 class="widget-user-username">{{x.titile}}</h3>
                  <h5 class="widget-user-desc">{{x.author}}</h5>
                </div>
                
                <div class="widget-user-image">
                  {% if x.photo_author %}
                  <img style="width:100px; height: 100px;" class="img-circle elevation-2" src="{{x.photo_author.url}}" alt="User Avatar">
                  {% endif %}
                </div>
                <div class="card-footer">
                  <div class="row">
                    <div class="col-sm-4 border-right">
                      <div class="description-block">
                        <h5 class="description-header">{{x.pages}}</h5>
                        <span class="description-text">صفحة</span>
                      </div>
                      <!-- /.description-block -->
                    </div>
                        <!-- /.col -->
                    <div class="col-sm-4 border-right">
                      <div class="description-block">
                      {% if x.price %}
                        <h5 class="description-header">{{x.price}}</h5>
                        <span class="description-text">السعر</span>
                      {% elif x.ratelday %}
                        <h5 class="description-header">{{x.ratelday}}</h5>
                        <span class="description-text">في اليوم</span>
                    
                      {% endif %}
                      </div>

                      <!-- /.description-block -->
                    </div>
                        <!-- /.col -->
                    <div class="col-sm-4">
                      <div class="description-block">
                      {% if x.statue == "avab" %}
                        <h5 class="description-header text-success">{{x.statue}}</h5>
                        <span class="description-text">الحالة</span>
                      {% elif x.statue == "ren" %}
                        <h5 class="description-header text-warning">{{x.statue}}</h5>
                        <span class="description-text">الحالة</span>
                      {% else %}
                        <h5 class="description-header text-danger">{{x.statue}}</h5>
                        <span class="description-text">الحالة</span>
                    
                      {% endif %}
                      
                      </div>
                      <!-- /.description-block -->
                    </div>
                        <!-- /.col -->
                  </div>
                      <!-- /.row -->
                </div>
                </div>
                  <!-- /.widget-user -->
              </div>
          <!-- نهاية الكتاب -->
        {% endfor %}



              <div class="row">
                <div class="col text-center">
                  <!--اضف صورة هنا في حالة عدم وجود كتب-->   
                </div>
              </div>
          </div>    
      </div>
    </div>
        <!-- /.container-fluid -->
  </div>
      <!-- /.content -->
</div>
    <!-- /.content-wrapper -->
{% endblock %}

كود sidebar.html

  <!-- في المكان ده هحط سلايد بار -->

  <!-- Main Sidebar Container -->
  <aside style="position: fixed;" class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- Brand Logo -->
    <a href="{% url 'index' %}" class="brand-link">
      <span class="brand-text font-weight-light">NOUVIL</span>
    </a>

    <!-- Sidebar -->
    <div class="sidebar">
      <!-- Sidebar user panel (optional) -->
      <div class="user-panel mt-3 pb-3 mb-3 d-flex">
        <div class="image">
        </div>
        <div class="info">
          <a href="{% url 'index' %}" class="d-block">Abdelrahman Gamal</a>
        </div>
      </div>

      <!-- Sidebar Menu -->
      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">

          <li class="nav-item">
            <a href="{% url 'books' %}" class="nav-link">
              <i class="nav-icon fas fa-th"></i>
              <p>
                New Books
              </p>
            </a>
          </li>
          <li class="nav-item has-treeview">
            <a href="#" class="nav-link">
              <i class="nav-icon fas fa-copy"></i>
              <p>
                Category
                <i class="fas fa-angle-left right"></i>
                
              </p>
            </a>
            <ul class="nav nav-treeview">
              
              <li class="nav-item">
                <a id="addcat" href="#" class="nav-link">
                    <i class="fa fa-plus "></i>
                    <p  class="text-light"> Add New </p>
                </a>
              </li> 
              <form id="cat" method="POST">
             <div id="catinput">
                  {% csrf_token %} 
                  <input type="text" name="cate">
                  <br>
                  <button type="submit" class="btn btn-success">save</button>
                  <button id="backcat" class="btn btn-primary ">back</button>
                </div>
                </form>  
             {% for cat in cate %}
                  <li style="cursor: pointer;" class="nav-item cat{{cat.id}}">
                    <a id="" class="nav-link">
                      <i class="far fa-circle nav-icon"></i>
                      <p>{{cat.name}}</p>
                    </a>
                  </li>
              {% endfor %}
        

            </ul>
          </li>

          <li class="nav-header">الكتب المستعارة</li>
          
          <li style="cursor: pointer;" class="nav-item sale">
            <a id="statusSold" class="nav-link">
              <i class="nav-icon far fa-circle text-danger"></i>
              <p class="text">تم بيعه</p>
            </a>
          </li>
          <li style="cursor: pointer;" class="nav-item ren">
            <a id="" class="nav-link">
              <i class="nav-icon far fa-circle text-warning"></i>
              <p>تم استعارته</p>
            </a>
          </li>
          <li style="cursor: pointer;" class="nav-item avab">
            <a id="" class="nav-link">
              <i class="nav-icon far fa-circle text-info"></i>
              <p>متاح</p>
            </a>
          </li>
        </ul>
      </nav>
      <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
  </aside>

كود base.html

{% load static %}
<!DOCTYPE html>
<html  lang="ar">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
  
    <title>Nouvil</title>
    <link rel="stylesheet" href="{% static 'plugins/fontawesome-free/css/all.min.css' %}">

    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="{% static 'plugins/jquery_datepacker/jquery_ui.css' %}">
   
    <!-- IonIcons -->
    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="{% static 'dist/css/adminlte_ar.min.css' %}">
    <!-- Google Font: Source Sans Pro -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
  </head>
  <body dir="rtl" class="hold-transition sidebar-mini">
{% include 'parts/nav.html' %}
{% include 'parts/sidebar.html' %}
{% block content %}

{% endblock %}
{% include 'parts/footer.html' %}
  </div>
  <!-- ./wrapper -->
  
 
<!-- REQUIRED SCRIPTS -->
<script src="{% static 'plugins/jquery_datepacker/jquery_ui.js' %}"></script>

<!-- jQuery -->
<script src="{% static 'plugins/jquery/jquery.min.js' %}"></script>
<!-- Bootstrap -->
<script src="{% static 'plugins/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<!-- AdminLTE -->
<script src="{% static 'dist/js/adminlte.js' %}"></script>
<!-- OPTIONAL SCRIPTS -->

<script src="{% static 'plugins/chart.js/Chart.min.js' %}"></script>

<script src="{% static 'dist/js/demo.js' %}"></script>
<!--<script src="dist/js/pages/dashboard3.js'"></script>
-->
<script>
  $(document).ready(function(){
    $('#myModal').on('shown.bs.modal', function () {
      $('#myInput').trigger('focus')
    });
/*here i will make loop for get id category and status for contact with books */
/*حساب اجمالي الارباح و هي عبارة عن حاصل جمع سعر الكتب عند البيع بالاضافة الى سعر استعارة الكتاب*/
  });
</script>
<script>
 
  


$(function () {
  'use strict'
 
  var ticksStyle = {
    fontColor: '#495057',
    fontStyle: 'bold'
  }

  var mode      = 'index'
  var intersect = true

  var $salesChart = $('#sales-chart')

  var salesChart  = new Chart($salesChart, {

    type   : 'bar',
    
    data   : {

      labels  : [
          

        'تفاصيل الارباح',

      ],


      datasets: [
        {
          backgroundColor: '#007bff',
          borderColor    : '#007bff',
          data           : [ 
               '50',
          ]
        },
        {
          backgroundColor: '#ced4da',
          borderColor    : '#ced4da',
          data           : [ 
                '30',
          ]
        }
      ]
    },

   
   
   options: {
      maintainAspectRatio: false,
      tooltips           : {
        mode     : mode,
        intersect: intersect
      },
      hover              : {
        mode     : mode,
        intersect: intersect
      },
      legend             : {
        display: false
      },
      scales             : {
        yAxes: [{
          // display: false,
          gridLines: {
            display      : true,
            lineWidth    : '4px',
            color        : 'rgba(0, 0, 0, .2)',
            zeroLineColor: 'transparent'
          },
          ticks    : $.extend({
            beginAtZero: true,

            // Include a dollar sign in the ticks
            callback: function (value, index, values) {
              if (value >= 1000) {
                value /= 1000
                value += 'k'
              }
              return '$' + value
            }
          }, ticksStyle)
        }],
        xAxes: [{
          display  : true,
          gridLines: {
            display: false
          },
          ticks    : ticksStyle
        }]
      }
    }
  });
  
 var pieChart = document.getElementById('visitors-chart').getContext('2d')

  var myPieChart = new Chart(pieChart, {
    type: 'pie',
    data: {
      datasets: [{
        data: ['35','25','40'],
        backgroundColor :["#27c100","#f3545d","#fdaf4b"],
        borderWidth: 10,
        
      }],
      labels: ['Available', 'Sold', 'Rented'] 
    },
    options : {
      responsive: true, 
      maintainAspectRatio: false,
      legend: {
        position : 'bottom',
        labels : {
          fontColor: '#000',
          fontSize: 15,
          usePointStyle : true,
          padding:30
        }
      },
      pieceLabel: {
        render: 'percentage',
        fontColor: 'white',
        fontSize: 14,
      },


    }
  })

})


 
</script>


<script>

  {% for x in book %}

    $(".cat{{x.categry.id}}").click(function(){
      
        $(".bookhide").hide()
        $(".book{{x.categry.id}}").show()

    });

    $(".book{{x.statue}}").click(function(){
      
      $(".bookhide").hide()
      $(".book{{x.statue}}").show()

  });

  {% endfor %}

</script>



</body>
</html>

واشكركم علي اجابتكم لسؤالي