Thiết kế website giá rẻ

Question

Hello I am using Django version 4.2.3 to build my website for building my website. I have an Object called UE (upcoming_events) that I have added several fields to however, these fields don’t seem to be rendering when I call the object instead the words No Events render which only happen when the upcoming_events object is empty. In order to see why this is happening I used the Django Shell to visualize the code post processing. But in the visualization the code seems to populate the objects just fine just not when rendering the object on the website.

{% extends "webapp/header.html" %}

{% block content %}
<div class = "centerbody">
    <div class="liner">
    <!--Carousel Starts-->
    <div class = 'dive'></div>
    <div class = float_col>
      <div id="carouselExampleFade" class="carousel slide carousel-fade span" data-ride="carousel">
      <div class="carousel-inner carouselMargin1">
        <div class="carousel-item active">
          <img src="/static/images/CarouselPictures1/canyonphoto1.jpg/" class="d-block w-100 carouselImgs" alt="...">
        </div>
        <div class="carousel-item">
          <img src="/static/images/CarouselPictures1/canyonphoto2.jpg" class="d-block w-100 carouselImgs" alt="...">
        </div>
        <div class="carousel-item">
          <img src="/static/images/CarouselPictures1/canyonphoto3.jpg/" class="d-block w-100 carouselImgs" alt="...">
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
        <span class="carousel-control-next-icon next_button" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
      </div>
    </div>
  
   <div class="announcements">
      <h2>Announcements</h2>
      <div class="announcement-container">
      {% for announcement in announcements %}
          <div class="announcement-item">
              <img src="{{ announcement.image.url }}" alt="{{ announcement.title }}" class="announcement-image">
              <div class="announcement-info">
                  <h3>{{ announcement.title }}</h3>
                  <p>{{ announcement.description }}</p>
                  <span class="announcement-date">{{ announcement.event_date }}</span>
              </div>
          </div>
      {% empty %}
          <p>No announcements at this time.</p>
      {% endfor %}
      </div>
  </div>
   <!--Carousel Ends-->
  
  <!--This cell contains the table for the main content area-->
  <table cellpadding="0" cellspacing="0" width="700">
      <tbody>
        <tr>
          <td height="10" width="25">
             </td>
          <td height="160" width="126">
            <img height="120" src="https://3bac6cafdb-custmedia.vresp.com/library/1305142154/154bc2e38d/Templates/bwlogo2.gif" style="width: 110px; height: 120px;" width="110" /></td>
          <td height="10" width="36">
             </td>
          <td font="helvetica" height="110" width="513">
            <h1 style="color:whitesmoke ; font-family: Helvetica,sans-serif; font-size: 30px; margin-top: 50px; margin-bottom: 40px;">
              UPCOMING EVENTS <span style="color:wheat;">June & BEYOND</span></h1>
            <img height="9" src="https://3bac6cafdb-custmedia.vresp.com/library/1305142180/83bdb2a586/Templates/top_bar.gif" style="width: 518px; height: 15px;" width="518" /></td>
        </tr>
        <tr>
          <td colspan="4" height="28" width="700">
             </td>
        </tr>
      </tbody>
    </table>
    <td class = "upcomingEvents" valign="top" width="700">
      <table cellpadding="0" cellspacing="0" width="700">

        <!--First Event-->
        <section>
          <div class = "events">
        {% for event in upcoming_events %}
           <ul>
             <li>
               <div class = "time">

                 <h2> {{ event.UE_date }}<span> {{ event.UE_time }}</span></h2>
               </div>
               <div class = "details">
                 <!-- Event Title goes here-->
                 <h3>{{ event.UE_title }} @ {{ event.UE_location }}</h3>
                 <!-- Event Content goes here-->
                  <p>
                      {{ event.UE_content }} 
                  </p>
                  <!-- Event Content goes here-->
                   <a href="/resourcePage/">View Details</a>
               </div>
               <div style="clear: both;"></div>
            </li>
           </ul>
           {% empty %}
           <p>No Events</p>
           {% endfor %}
          </div>
        </section>
      </div>
    </div>
{% endblock %}

Writing this from django.shortcuts import render
from .models import UE

def home(request):
    upcoming_events = UE.objects.order_by('-UE_pub_date')[:5]  # Ensuring this query is correct
    context = {'upcoming_events': upcoming_events}  # Check the variable name here
    return render(request, 'webapp/home.html', context)

in the Django Shell gives the following output:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">

        <link rel="stylesheet" href="/static/css/bootstrap.min.css" type = "text/css">
        <link rel="stylesheet" href="/static/css/main.css" type = "text/css">
        <link rel="stylesheet" href="/static/js/bootstrap.min.js" type = "text/js">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css" integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Kids in the Canyon</title>
    </head>
    <body>
        <header class="kids">
          <!--Navbar Starts-->
                <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                        <a class="navbar-brand size" href="/home/">KITC</a>
                        <h1 class="logo" href="/home/"></h1>
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                          <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarNav">
                          <ul class="navbar-nav">
                            <li class="nav-item active">
                              <a class="nav-link" href="/aboutMePage/">About KITC<span class="sr-only">(current)</span></a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" href="/resourcePage/"> Reference Materials </a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" href="/mentorPage/"> Meet the Mentors</a>
                            </li>
                            <li class="nav-item">
                                    <a class="nav-link" href="/specialthanks/"> Special Thanks</a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" href="/contactusPage/">Contact Us</a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" href="/donate/"> Donate </a>
                            </li>
                          </ul>
                        </div>
                      </nav>
        <!--Navbar Ends-->
        </header>
<!--Carousel Starts-->

<div class = "centerbody">
    <div class="liner">
    <!--Carousel Starts-->
    <div class = 'dive'></div>
    <div class = float_col>
      <div id="carouselExampleFade" class="carousel slide carousel-fade span" data-ride="carousel">
      <div class="carousel-inner carouselMargin1">
        <div class="carousel-item active">
          <img src="/static/images/CarouselPictures1/canyonphoto1.jpg/" class="d-block w-100 carouselImgs" alt="...">
        </div>
        <div class="carousel-item">
          <img src="/static/images/CarouselPictures1/canyonphoto2.jpg" class="d-block w-100 carouselImgs" alt="...">
        </div>
        <div class="carousel-item">
          <img src="/static/images/CarouselPictures1/canyonphoto3.jpg/" class="d-block w-100 carouselImgs" alt="...">
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
        <span class="carousel-control-next-icon next_button" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
      </div>
    </div>

   <div class="announcements">
      <h2>Announcements</h2>
      <div class="announcement-container">

          <p>No announcements at this time.</p>

      </div>
  </div>
   <!--Carousel Ends-->

  <!--This cell contains the table for the main content area-->
  <table cellpadding="0" cellspacing="0" width="700">
      <tbody>
        <tr>
          <td height="10" width="25">
             </td>
          <td height="160" width="126">
            <img height="120" src="https://3bac6cafdb-custmedia.vresp.com/library/1305142154/154bc2e38d/Templates/bwlogo2.gif" style="width: 110px; height: 120px;" width="110" /></td>
          <td height="10" width="36">
             </td>
          <td font="helvetica" height="110" width="513">
            <h1 style="color:whitesmoke ; font-family: Helvetica,sans-serif; font-size: 30px; margin-top: 50px; margin-bottom: 40px;">
              UPCOMING EVENTS <span style="color:wheat;">June & BEYOND</span></h1>
            <img height="9" src="https://3bac6cafdb-custmedia.vresp.com/library/1305142180/83bdb2a586/Templates/top_bar.gif" style="width: 518px; height: 15px;" width="518" /></td>
        </tr>
        <tr>
          <td colspan="4" height="28" width="700">
             </td>
        </tr>
      </tbody>
    </table>
    <td class = "upcomingEvents" valign="top" width="700">
      <table cellpadding="0" cellspacing="0" width="700">

        <!--First Event-->
        <section>
          <div class = "events">

           <ul>
             <li>
               <div class = "time">

                 <h2> June 24<span> 9am</span></h2>
               </div>
               <div class = "details">
                 <!-- Event Title goes here-->
                 <h3>Saturday Hike @ Lincoln Woods</h3>
                 <!-- Event Content goes here-->
                  <p>
                      We are meeting at Lincoln Woods. This is the first Saturday hike after you have gotten your boots, DO NOT FORGET THEM! You want to break them in and make sure they feel comfortable. For anyone looking for a ride to Lincoln Woods Steven will be at Ella Risk at 8:45am.
                  </p>
                  <!-- Event Content goes here-->
                   <a href="/resourcePage/">View Details</a>
               </div>
               <div style="clear: both;"></div>
            </li>
           </ul>

           <ul>
             <li>
               <div class = "time">

                 <h2> Sep 12 2024<span> 9am</span></h2>
               </div>
               <div class = "details">
                 <!-- Event Title goes here-->
                 <h3>Hello @ Lin</h3>
                 <!-- Event Content goes here-->
                  <p>
                      dfgdfb bdfx
                  </p>
                  <!-- Event Content goes here-->
                   <a href="/resourcePage/">View Details</a>
               </div>
               <div style="clear: both;"></div>
            </li>
           </ul>

          </div>
        </section>
      </div>
    </div>



        <footer>copywrite 2019 MySite</footer>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="static/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="https://kit.fontawesome.com/5f01c6fdfb.js" crossorigin="anonymous"></script>
    </body>
</html>

As you can see the page is grabbing the UE object fields fine in the shell can someone help explain why this is not rendering the objects

Thiết kế website giá rẻ

Danh mục

Why is Django App Not Rendering HTML Page