السلام عليكم
صنعت مشروع بواسطة فيديو من اليوتيوب .. لتطوير مهارتي
عبارة عن نظام ادارة مكتبة
المشكلة هي انه عند اضافة كتاب جديد يظهر لي هذا الخطأ
وعند عمل 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>
واشكركم علي اجابتكم لسؤالي