CODEWITHSUNDEEP
pythondjangofor-loopnavbarsocial-auth-app-django
achmad-irfan
achmad-irfan

Reputation: 3

For looping in Django not worked

Hi I am newbie in django, I have problem with for looping in django, to make a navbar/menu, this is the detail code:

base.html:

{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- My CSS -->
    {% block css_app%} {% include 'snippets/main_css.html' %} {% endblock %}
    <!-- Bootstrap CSS Icon -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" />

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet" />

<title>{% block title %}Achmad Irfan Afandi {% endblock %}</title>
</head>
<body>
  
    {% include 'snippets/contain-menu.html' %}


    <div class="contain-isi close" id="contain-isi">
      {% block contain_isi %}
      <div class="contain-isi-home">
        <div class="text-start app-title">{{title}}</div>
        <div class="sub-title">{{subtitle}}</div>
        </div>
        </div>
    </div>     
    {% endblock %}


    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="{% static "js/scripts.js"%}"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  
  </body>

</html>

And contain-menu.html:

<div class="menu">
    <a href="/">
      <div class="menu-link klik">
        <i class="bx bx-home"></i>
        <div class="contentMenu hidden">HOME</div>
      </div>
    </a> {% for key,value in menu.items %}
    <a href="{% url 'app_'|add:key|add:':'|add:key %}">
      <div class="menu-link klik">
        <i class="{{value}}"></i>
        <div class="contentMenu hidden">{{key|upper}}</div>
      </div>
    </a> endfor %}   </div>

and the views:

from django.shortcuts import render
from .forms import ProjectForm

def index(request):
    projectForm = ProjectForm()
    context = {
        'title': 'Achmad Irfan Afandi',
        'tile': 'Home',
        'subtitle': 'Data Analyst',
        'social_media':
            {'linkedin':'https://www.linkedin.com/in/achmad-irfan-afandi-9661131a6/',
             'github':'https://www.github.com/achmadirfana',
             'facebook':'https://www.facebook.com/achmad.irfan.754',
             'twitter':'https://www.facebook.com/achmad.irfan.754',
             'instagram':'https://www.facebook.com/achmad.irfan.754'},    
        'menu': 
            {'about': 'bi bi-file-earmark-person',
            'education': 'bx bxs-graduation',
            'skill': 'bx bx-wrench',
            'projects': 'bx bx-building',
            'services': 'bx bx-support',
            'contact': 'bx bxs-contact'},
        'projectForm': projectForm
    }

    return render(request, 'index.html', context)

and this is the index of app:

<!-- Extend base-->
{% extends 'base.html' %}

<!-- Load Static-->
{% load static %}
<!-- Link CSs-->

{% block css_app%}
<!-- CSS Main-->
{% include 'snippets/main_css.html' %}
<!-- CSS App-->
{% include 'about/snippets/main_app_css.html' %}
<!-- Akhir Block -->
{% endblock%}

<!--Isi Content -->
{% block contain_isi %}
<div class="contain-isi-about">
  <div class="text-start app-title">{{title}}</div>
  <hr />
  <div class="isi">
    {% for item in summary %}
    <p>{{item.isi}}</p>
    {% endfor %}
  </div>
</div>
{% endblock %}

that code above is worked in main app project, all the menus are displayed properly like picture above: enter image description here

But in another app (btw I use extends tag for all app) , the for looping is not displayed , it just show 'HOME' menu that not include in for looping like picture below: enter image description here

Do you know why? or I have to write the menu one by one not use foor looping?

When I write the the code for menu one by one, it all are displayed , but I want to use for looping to make my code simpler

Upvotes: 0

Views: 51

Answers (1)

MorrisAJ33
MorrisAJ33

Reputation: 21

I do see missing brackets and percentage in the for loop... {% for ... %} and {% endfor %}.

Otherwise extend template as shown below without block tags code will not extend.

<!DOCTYPE html>
    <html lang="en">
  <head>
    {% block title %}
      <title>Local Library</title>
    {% endblock %}
  </head>
  <body>


    {% block sidebar %}
      <!-- insert default options for every page that extends -->
</a> {% for key,value in menu.items %}
    <a href="{% url 'app_'|add:key|add:':'|add:key %}">
  <div class="menu-link klik">
    <i class="{{value}}"></i>
    <div class="contentMenu hidden">{{key|upper}}</div>
  </div>
</a> {% endfor %}   </div>
    {% endblock %}


    {% block content %}
  <!-- default content (on every page extending) -->
    {% endblock %}
   </body>
</html>

Then within other html documents.

{% extends "above_template.html" %}

{% block content %}
  <h1>...</h1>
  <p>
    ...
  </p>
{% endblock %}

Upvotes: 0

Related Questions