Thiết kế website giá rẻ

Question

I’m about to write code for a new web program with Django.
So the problem is that I want to have the data from the database (db.sqlite3) on the HTML page and that works fine but only if I add an item, otherwise the data is not shown. I would be really glad if someone can help me. Thanks!

Here is my Inventar.html:


<!DOCTYPE html>
{%load static%}
<link rel="stylesheet" href={% static "style.css"%} "type/css">
<html>
<head>
<style>
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
        position: fixed;
        top: 0;
        width: 100%;
      }
      
      li {
        float: left;
      }
      
      li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }
      
      li a:hover:not(.active) {
        background-color: #111;
      }
      
      .active {
        background-color: #04AA6D;
      }

      table, th, td {
        border:1px solid black;
      }
</style>





<ul>
    <li><a class="active" href="/index">Home</a></li>
    <li><a href="/admin">Admin</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
</ul>



<br>
<br>
<h1 style="color:rgb (85, 85, 85);text-align:center;">
    Inventar
</h1>

<a  class="Button1" onclick="addItem()">Gegenstand hinzufügen</a>

<table>
  <tr>
      <th>Name</th>
      <th>Geräte ID</th>
      <th>Seriennummer</th>
      <th>Standort</th>
      <th>Genauer Standort</th>
      <th>Lieferant</th>
      <th>Bemerkungen</th>
      <th>MAC-LAN</th>
      <th>MAC-WLAN</th>
      <th>Status</th>
      <th>Beschädigung</th>
      <th>Zubehör</th>
      <th>Anschaffungsdatum</th>
  </tr>
  {% for item in items %}
  <tr>
      <td>{{ item.name }}</td>
      <td>{{ item.geräte_id }}</td>
      <td>{{ item.seriennummer }}</td>
      <td>{{ item.standort }}</td>
      <td>{{ item.genauer_standort }}</td>
      <td>{{ item.lieferant }}</td>
      <td>{{ item.bemerkungen }}</td>
      <td>{{ item.mac_lan }}</td>
      <td>{{ item.mac_wlan }}</td>
      <td>{{ item.status }}</td>
      <td>{{ item.beschädigung }}</td>
      <td>{{ item.zubehör }}</td>
      <td>{{ item.anschaffungsdatum }}</td>
  </tr>
  {% endfor %}
</table>

<script> 

  c=sqlite3.connect("db.sqlite3")

  function addItem() {
    let Name = prompt("Wie lautet der Name des Gegenstands der angelegt wird?")
    let Geräte_ID = prompt("Wie lautet die Geräte ID?")
    let Seriennummer = prompt("Wie lautet die Seriennummer?")
    let Standort = prompt("Wie lautet der Standort?")
    let genauer_Standort = prompt("Wie lautet der genaue Standort?")
    let Lieferant = prompt("Wie lautet der Lieferant?")
    let Bemerkungen = prompt("Hast du irgendwelche Bemerkungen?")
    let MAC_LAN = prompt("Wie lautet der MAC-LAN?")
    let MAC_WLAN = prompt("Wie lautet die MAC-WLAN?")
    let Status = prompt("Wie lautet der Status?")
    let Beschädigung = prompt("Hat der Gegenstand irgendwelche Beschädigungen?")
    let Zubehör = prompt("Ist zu dem Gegenstand irgendwelches Zubehör dazu?")
    let Anschaffungsdatum = prompt("Wann wurde der Gegenstand angeschafft?")
    let token = "{{ csrf_token }}"; // Mechanismus zur Verifizierung und Echtheit der Daten
    let formData = new FormData();
    formData.append("Name", Name);
    formData.append("Geräte_ID", Geräte_ID);
    formData.append("Seriennummer", Seriennummer);
    formData.append("Standort", Standort);
    formData.append("genauer_Standort", genauer_Standort);
    formData.append("Lieferant", Lieferant);
    formData.append("Bemerkungen", Bemerkungen);
    formData.append("MAC_LAN", MAC_LAN);
    formData.append("MAC_WLAN", MAC_WLAN);
    formData.append("Status", Status);
    formData.append("Beschädigung", Beschädigung);
    formData.append("Zubehör", Zubehör);
    formData.append("Anschaffungsdatum", Anschaffungsdatum);
    formData.append("csrfmiddlewaretoken", token); // Erstellt einen Random Code der Abgeglichen wird
    
    // Fetch data from the Django view
  fetch("/views")
  .then(response => response.json())
  .then(data => {
     // Assign the fetched data to the variable "items"
     const items = data;
     // Re-render the HTML template with the new data
     document.querySelector("table").innerHTML = `
       <tr>
         <th>Name</th>
         <th>Geräte ID</th>
         <th>Seriennummer</th>
         <th>Standort</th>
         <th>Genauer Standort</th>
         <th>Lieferant</th>
         <th>Bemerkungen</th>
         <th>MAC-LAN</th>
         <th>MAC-WLAN</th>
         <th>Status</th>
         <th>Beschädigung</th>
         <th>Zubehör</th>
         <th>Anschaffungsdatum</th>
       </tr>
       ${data.map(item => `
         <tr>
           <td>${item.name}</td>
           <td>${item.geräte_id}</td>
           <td>${item.seriennummer}</td>
           <td>${item.standort}</td>
           <td>${item.genauer_standort}</td>
           <td>${item.lieferant}</td>
           <td>${item.bemerkungen}</td>
           <td>${item.mac_lan}</td>
           <td>${item.mac_wlan}</td>
           <td>${item.status}</td>
           <td>${item.beschädigung}</td>
           <td>${item.zubehör}</td>
           <td>${item.anschaffungsdatum}</td>
         </tr>
       `).join("")}
     `;
   })
  .catch(error => {
     console.error("Error:", error);
   });


    // Clear form fields
    document.getElementById("Name").value = "";
    document.getElementById("Geräte_ID").value = "";
    document.getElementById("Seriennummer").value = "";
    document.getElementById("Standort").value = "";
    document.getElementById("genauer_Standort").value = "";
    document.getElementById("Lieferant").value = "";
    document.getElementById("Bemerkungen").value = "";
    document.getElementById("MAC_LAN").value = "";
    document.getElementById("MAC_WLAN").value = "";
    document.getElementById("Status").value = "";
    document.getElementById("Beschädigung").value = "";
    document.getElementById("Zubehör").value = "";
    document.getElementById("Anschaffungsdatum").value = "";
  }
 
  
</script>

Here is my views.py:

from django.shortcuts import render
from django.http import JsonResponse
from.models import Item

# Create your views here.
def Start_UI(request):
    return render(request, 'Start_UI.html')

def Inventar(request):
    next = request.GET.get('next', '/admin')
    if request.method == 'POST':
        name = request.POST.get("Name", "")
        geräte_id = request.POST.get("Geräte_ID", "")
        seriennummer = request.POST.get("Seriennummer", "")
        standort = request.POST.get("Standort", "")
        genauer_standort = request.POST.get("genauer_Standort", "")
        lieferant = request.POST.get("Lieferant", "")
        bemerkungen = request.POST.get("Bemerkungen", "")
        mac_lan = request.POST.get("MAC_LAN", "")
        mac_wlan = request.POST.get("MAC_WLAN", "")
        status = request.POST.get("Status", "")
        beschädigung = request.POST.get("Beschädigung", "")
        zubehör = request.POST.get("Zubehör", "")
        anschaffungsdatum = request.POST.get("Anschaffungsdatum", "")
        
        # Create a dictionary with the form data
        form_data = {
        'name': name,
        'geräte_id': geräte_id,
        'seriennummer': seriennummer,
        'standort': standort,
        'genauer_standort': genauer_standort,
        'lieferant': lieferant,
        'bemerkungen': bemerkungen,
        'mac_lan': mac_lan,
        'mac_wlan': mac_wlan,
        'status': status,
        'beschädigung': beschädigung,
        'zubehör': zubehör,
        'anschaffungsdatum': anschaffungsdatum,
        }
        
            
       # Check if all required fields are filled
        if not name:
            print("Error: Name field is required.")
        elif not geräte_id:
            print("Error: Geräte_ID field is required.")
        elif not seriennummer:
            print("Error: Seriennummer field is required.")
        elif not standort:
            print("Error: Standort field is required.")
        elif not genauer_standort:
            print("Error: genauer_Standort field is required.")
        elif not lieferant:
            print("Error: Lieferant field is required.")
        elif not bemerkungen:
            print("Error: Bemerkungen field is required.")
        elif not mac_lan:
            print("Error: MAC_LAN field is required.")
        elif not mac_wlan:
            print("Error: MAC_WLAN field is required.")
        elif not status:
            print("Error: Status field is required.")
        elif not beschädigung:
            print("Error: Beschädigung field is required.")
        elif not zubehör:
            print("Error: Zubehör field is required.")
        elif not anschaffungsdatum:
            print("Error: Anschaffungsdatum field is required.")
        else:
            # Use the create() method of the Item model to save the data to the database
            Item.objects.create(**form_data)
            
            
        data = Item.objects.all()

        stu = {
            "items": data
        }


        # Render the "Inventar.html" template with the items
        return render(request, "Inventar.html", stu)

    # Render the "Inventar.html" template without any items
    return render(request, 'Inventar.html')
    
def views(request):
    if request.method == 'GET':
        items = Item.objects.all()
        data = [
            {
                'name': item.name,
                'geräte_id': item.geräte_id,
                'seriennummer': item.seriennummer,
                'standort': item.standort,
                'genauer_standort': item.genauer_standort,
                'lieferant': item.lieferant,
                'bemerkungen': item.bemerkungen,
                'mac_lan': item.mac_lan,
                'mac_wlan': item.mac_wlan,
                'status': item.status,
                'beschädigung': item.beschädigung,
                'zubehör': item.zubehör,
                'anschaffungsdatum': item.anschaffungsdatum,
            } for item in items
        ]
        return JsonResponse(data, safe=False)
 

        
    return render(request, 'Inventar.html')

Here is my models.py:

from django.db import models
from datetime import datetime

# Create your models here.
class Item(models.Model):
    name = models.CharField(max_length=255, default="")
    geräte_id = models.CharField(max_length=255, default="")
    seriennummer = models.CharField(max_length=255, default="")
    standort = models.CharField(max_length=255, default="")
    genauer_standort = models.CharField(max_length=255, default="")
    lieferant = models.CharField(max_length=255, default="")
    bemerkungen = models.TextField(default="")
    mac_lan = models.CharField(max_length=255, default="")
    mac_wlan = models.CharField(max_length=255, default="")
    status = models.CharField(max_length=255, default="")
    beschädigung = models.CharField(max_length=255, default="")
    zubehör = models.CharField(max_length=255, default="")
    anschaffungsdatum = models.DateField(default=datetime.now)
    
class Meta:
    db_table = Item

I have tried different things, for example structorizing the code new, but it didnt work but for that im to new in coding

Thiết kế website giá rẻ

Danh mục

Django show sqlite data on html site