In my Django project, I am experiencing an where the revers url cannot be found. Basically I passed a context variable in the template's {% url navLogoLinkName %}, I checked from the source html code generated by the page that the navLogoLinkName generates the right link. When clicking on the link however, I get a NoReverseMatch error.
In my urls.py, you can see that I have a path with name = 'hiddendimsum_nytorv'
"""website URL Configuration
The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/3.1/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: path('', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.urls import include, path
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from django.urls.conf import re_path
from index.views import indexPage, hdnytorv, hd2900, hdbynight
from takeawayWebshop.views import TakeawayWebshopMain
from webshopCart.views import AddRemoveCartItems
from django.conf import settings
from django.conf.urls.static import static
from django.views.static import serve
admin.autodiscover()
urlpatterns = [
path('admin/', admin.site.urls),
path('', indexPage.as_view()),
path('hdnytorv', hdnytorv.as_view(), name='hiddendimsum_nytorv'),
path('hd2900', hd2900.as_view(), name='hiddendimsum_2900'),
path('hd2900_takeaway_webshop', TakeawayWebshopMain.as_view(), name="hiddendimsum_takeaway_webshop"),
path('changeItemQuantityInBasket', AddRemoveCartItems.as_view()),
#path('check-address-for-deliverable', AddressCheckForDeliverability.as_view()),
#path('changeItemQuantityInBasket', ChangeItemQuantity.as_view()),
#path('getTakeawayClosingOrderTime', lastPickupDeliveryOrderTime.as_view()),
#path('isPriceAboveDeliveryLimit', totalPriceDeliveryPossible.as_view()),
path('hdbynight', hdbynight.as_view(), name='hiddendimsum_bynight'),
#path('takeawayCheckout', TakeawayCheckout.as_view()),
#path('deliveryFormCheckout', DeliveryForm.as_view()),
#path('pickupFormCheckout', PickUpForm.as_view()),
#path('local_delivery_checkout_is_address_deliverable', localDeliveryCheckoutAddressCheck.as_view()),
#path('process_pickup_or_delivery_form', deliveryPickupFormProcess.as_view()),
#path('localDeliveryPayment', Payment.as_view(), name = 'localDeliveryPayment'),
#path('getPaymentId', getPaymentId.as_view()),
#path('paymentComplete', PaymentComplete.as_view(), name = 'paymentComplete'),
#path('paymentNotification', paymentNotificationWebhook),
#path('verifyPayment', paymentVerificationStaticPage.as_view(), name = 'verifyPayment'),
#path('backendPaymentVerification', backendPaymentVerification.as_view()),
re_path(r'^media/(?P<path>.*)$', serve,{'document_root': settings.MEDIA_ROOT}),
]
#When in production medida url must always be added to urlpatterns
#if settings.DEBUG:
#urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
In my template I have href="{% url navLogoLinkName %}" where navLogoLinkName is the context variable passed from the view.
{% load static %}
<nav class="navbar navbar-expand-lg navbar-light bg-secondary" id ="navbar">
<button class="navbar-toggler m-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="#navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand navbar-left" href="{% url navLogoLinkName %}" id="navbarLogoLink">
<img src="{{ navbarLogoPath }}" alt="{{ navbarLogoAlt }}" id="navbarLogo">
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
{% for link in links %}
{% if link.0 == 'BOOK TABLE' %}
<li class="nav-item active" id="navbarListItem">
<a class="nav-link px-6" id ="mainNavlink" href="{{ link.1 }}" target="_blank"><h3 id="linkText">{{ link.0 }}</h3></a>
</li>
{% else %}
<li class="nav-item active" id="navbarListItem">
<a class="nav-link px-6" id ="mainNavlink" href="{{ link.1 }}"><h3 id="linkText">{{ link.0 }}</h3></a>
</li>
{% endif %}
{% endfor %}
</ul>
{% if controlReport %}
{% autoescape off %}
<a class="pull-right" href={{controlReport}} target="_blank">
<img src={% static 'media/kontrolRapport.gif' %} width="15%" height = auto>
</a>
{% endautoescape %}
{% endif %}
</div>
</nav>
In views.py I have context['navLogoLinkName'] = 'hiddendimsum_nytorv'. From urls.py, you can see that hiddendimsum_nytorv should point to hdnytorv in path.
from webshopCart.models import CartItem
from .models import TakeawayWebshop
from restaurant.models import Restaurant
# Create your views here.
from django.shortcuts import render
from django.views import View
from django.conf import settings
from website.Modules.webshopUtils import Session, getTotalItemsInCart
webshopName = 'Hidden Dimsum 2900'
class TakeawayWebshopMain(View):
def get(self, request, *args, **kwargs):
context = dict()
context['navbarLogoPath'] = 'static/media/hd2900coverLogo.png'
context['navLogoLinkName'] = 'hiddendimsum_nytorv'
context['links'] = list()
context['aboutUsRestaurant'] = Restaurant.objects.filter(name = webshopName)[0]
#Import the webshop object followed by the products
webshop = TakeawayWebshop.objects.filter(name = webshopName)
webshop = webshop[0]
products = webshop.getProducts()
#Check if session exists
session = Session(request = request)
isSessionValid = session.isSessionValid(webshopModelObject = webshop)
context['sessionValidity'] = isSessionValid
#Get product quantity if session exists
productToDisplay = list()
for product in products:
productDict = dict()
productDict['product'] = product
if isSessionValid:
cartItem = CartItem.objects.filter(session_id = request.session[settings.WEBSHOP_SESSION_KEY],
product = product)
if cartItem:
productDict['quantity'] = cartItem[0].quantity
else:
productDict['quantity'] = 0
else:
productDict['quantity'] = 0
productToDisplay.append(productDict)
context['products'] = productToDisplay
if isSessionValid:
context['totalCartItems'] = getTotalItemsInCart(request = request)
else:
context['totalCartitems'] = 0
print('from webshop main')
print(context)
return render(request, template_name="takeawayWebshopMain.html", context = context)
Below are the source html generated from the rendered page. You can see this snippet
<a class="navbar-brand navbar-left" href="/hdnytorv" id="navbarLogoLink">
<img src="static/media/hd2900coverLogo.png" alt="" id="navbarLogo">
</a>
which demonstrates that it is pointing to the correct link as in my urls.py.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap css-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!--social media icons-->
<link rel="stylesheet" type="text/css" href=/static/landingPage.css>
<link rel="stylesheet" type="text/css" href=/static/takeawayWebshop.css>
<title></title>
<!--SEO-->
<meta name="description" content="Hidden Dimsum 2900, Strandvejen 163, Hellerup online dimsum takeaway and local delivery webshop">
<meta name="keywords" content="Hidden Dimsum 2900, dimsum takeaway webshop, dimsum local delivery, dumplings takeaway, online ordering">
<meta name="author" content="Hidden Dimsum 2900">
<link rel="shortcut icon" type="image/png" href="/static/media/favicon_hd32x32.png"/>
<!--Font awesome-->
<script src="https://kit.fontawesome.com/efc09bd617.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<!--Google Analytics-->
<!-- Global site tag (gtag.js) - Google Analytics -->
<!--Easy table booking-->
<!--Easy table booking embedded-->
<script type="text/javascript">
(function() { var st=document.createElement('script'); st.type='text/javascript'; st.async=true; st.src='//book.easytablebooking.com/javascripts/widget/v2/book.js'; var sc=document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(st, sc); })();
</script>
<noscript>Your browser does not support JavaScript!</noscript>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-secondary" id ="navbar">
<button class="navbar-toggler m-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="#navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand navbar-left" href="/hdnytorv" id="navbarLogoLink">
<img src="static/media/hd2900coverLogo.png" alt="" id="navbarLogo">
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
</ul>
</div>
</nav>
<div class="container-fluid sticky-top" id="takeawayHeaderCartContainer">
<div class="row">
<div class="col-11" id="cartIconContent">
<a href="/takeawayCheckout">
<i class="fa" id="shoppingCartIcon"></i> <!--this code codes for the shopping cart icon-->
<span class='badge badge-warning' id='lblCartCount'>
0
</span>
</a>
</div>
</div>
</div>
<div class="container-fluid h-100">
<h1 class="contentHeader">Menu</h1>
<hr class = "titleHorisontalLine">
<div class="row row-cols-1 row-cols-md-4">
<div class="col-auto mt-5">
<div class="card h-100 text-center">
<div class="card-body">
<!--Title -->
<h5 class="card-title">Charr Siu Bao</h5>
<!--Product image with link -->
<img class="card-img embed-responsive-item" src="/media/productImages/DimsumBox.jpg" alt="">
<!--Product description-->
<p class="card-text">some descriptions here</p>
<!--Allergic note -->
<p class="card-text">allergy notes</p>
<!--Price-->
<h5 class="mt-4">100,- </h5>
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary subtractItem" type="button" id="btn_subtract_charr-siu-bao" onclick="itemQuantityChangeButton(this)">
-
</button>
</div>
<input type="text" class="form-control" id="text_charr-siu-bao" placeholder="0" aria-label="ordered amount" aria-describedby="basic-addon1" readonly>
<div class="input-group-append">
<button class="btn btn-outline-secondary addOneItem" type="button" id="btn_add_charr-siu-bao" onclick="itemQuantityChangeButton(this)">
+
</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-auto mt-5">
<div class="card h-100 text-center">
<div class="card-body">
<!--Title -->
<h5 class="card-title">Product A</h5>
<!--Product image with link -->
<img class="card-img embed-responsive-item" src="/media/productImages/duckGaozi_TAI2jqx.jpg" alt="">
<!--Product description-->
<p class="card-text">product A description</p>
<!--Allergic note -->
<!--Price-->
<h5 class="mt-4">100,- </h5>
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary subtractItem" type="button" id="btn_subtract_product-a" onclick="itemQuantityChangeButton(this)">
-
</button>
</div>
<input type="text" class="form-control" id="text_product-a" placeholder="0" aria-label="ordered amount" aria-describedby="basic-addon1" readonly>
<div class="input-group-append">
<button class="btn btn-outline-secondary addOneItem" type="button" id="btn_add_product-a" onclick="itemQuantityChangeButton(this)">
+
</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-auto mt-5">
<div class="card h-100 text-center">
<div class="card-body">
<!--Title -->
<h5 class="card-title">Product B</h5>
<!--Product image with link -->
<img class="card-img embed-responsive-item" src="/media/productImages/duckGaozi_BcevHBI.jpg" alt="">
<!--Product description-->
<p class="card-text">product B description</p>
<!--Allergic note -->
<!--Price-->
<h5 class="mt-4">200,- </h5>
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary subtractItem" type="button" id="btn_subtract_product-b" onclick="itemQuantityChangeButton(this)">
-
</button>
</div>
<input type="text" class="form-control" id="text_product-b" placeholder="0" aria-label="ordered amount" aria-describedby="basic-addon1" readonly>
<div class="input-group-append">
<button class="btn btn-outline-secondary addOneItem" type="button" id="btn_add_product-b" onclick="itemQuantityChangeButton(this)">
+
</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-auto mt-5">
<div class="card h-100 text-center">
<div class="card-body">
<!--Title -->
<h5 class="card-title">Product C</h5>
<!--Product image with link -->
<img class="card-img embed-responsive-item" src="/media/productImages/porkGaozi_min_xa7mpZQ.jpg" alt="">
<!--Product description-->
<p class="card-text">Product C description</p>
<!--Allergic note -->
<!--Price-->
<h5 class="mt-4">300,- </h5>
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary subtractItem" type="button" id="btn_subtract_product-c" onclick="itemQuantityChangeButton(this)">
-
</button>
</div>
<input type="text" class="form-control" id="text_product-c" placeholder="0" aria-label="ordered amount" aria-describedby="basic-addon1" readonly>
<div class="input-group-append">
<button class="btn btn-outline-secondary addOneItem" type="button" id="btn_add_product-c" onclick="itemQuantityChangeButton(this)">
+
</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-auto mt-5">
<div class="card h-100 text-center">
<div class="card-body">
<!--Title -->
<h5 class="card-title">pork gaozi</h5>
<!--Product image with link -->
<img class="card-img embed-responsive-item" src="/media/productImages/porkGaozi.jpg" alt="">
<!--Product description-->
<p class="card-text">here is description for pork gaozi</p>
<!--Allergic note -->
<!--Price-->
<h5 class="mt-4">50,- </h5>
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary subtractItem" type="button" id="btn_subtract_pork-gaozi" onclick="itemQuantityChangeButton(this)">
-
</button>
</div>
<input type="text" class="form-control" id="text_pork-gaozi" placeholder="0" aria-label="ordered amount" aria-describedby="basic-addon1" readonly>
<div class="input-group-append">
<button class="btn btn-outline-secondary addOneItem" type="button" id="btn_add_pork-gaozi" onclick="itemQuantityChangeButton(this)">
+
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid d-flex justify-content-end">
<div class="row">
<a href="/takeawayCheckout" role="button" id="checkoutLink">
<button type="button" class="btn btn-success btn-lg">Checkout</button>
</a>
</div>
</div>
<footer class="bg-dark text-center text-white">
<div class="container p-4 mx-auto">
<a href="https://www.facebook.com/Hiddendimsum2900" target="_blank" class="footerIcon">
<i class="fa-brands fa-facebook fa-3x"></i>
</a>
<a href="https://www.instagram.com/hiddendimsum2900" target="_blank" class="footerIcon">
<i class="fa-brands fa-instagram fa-3x"></i>
</a>
</div>
<div class="container p-2 mx-auto">
<form method="post">
<input type="hidden" name="csrfmiddlewaretoken" value="nVitBexkVreopuERtPpFqceQ7iImmDAyg6WLG8rqNj7dyZCuaZwwKsOfCf3EJSjo">
<p><label for="newLetterEmailLabel" class="bodyText" id="newLetterEmailLabel">Newsletter Subscription</label></p>
<input type="email" name="subscriptionEmail" placeholder="email#example.com">
<button type="submit" name="action" class="btn btn-primary" value="emailSubscription" id="newsLetterSubmitButton">Subscribe</button>
</form>
</div>
<div class="text-center footerText p-3" id="footerAddress">
©Hidden Dimsum 2900
<br>
Strandvejen, 163, 2900, Hellerup
<br>
CVR: 38908901
<br>
Phone : +45-40388884
</div>
</footer>
<script src="/static/scripts/product_add_subtract_btn_clicked.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>
Still when clicking on the navbar logo image, I get the below error
Internal Server Error: /hdnytorv
...
django.urls.exceptions.NoReverseMatch: Reverse for '/' not found. '/' is not a valid view function or pattern name.
[02/Apr/2022 23:46:16] "GET /hdnytorv HTTP/1.1" 500 209584
You can use "URL Namespaces". Add an "app-name" in your urls.py:
app_name = 'myAppName'
...
path('hd2900', hd2900.as_view(), name='hd2900')
...
And in your template, use {% url 'myAppName:hd2900' %}:
<a class="navbar-brand navbar-left" href="{% url 'myAppName:hd2900' %}" id="navbarLogoLink">
<img src="{{ navbarLogoPath }}" alt="{{ navbarLogoAlt }}" id="navbarLogo">
</a>
The django 'extends' template is not loading the content. In this I am trying to extend index.html to homepage.html. Both the files are under the same templates directory. The code snippets are shown below:
index.html
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Tashi eComm</title>
<!-- adding title icon -->
<link rel = "icon" href ="{% static 'images/TecommLogo.png' %}" type = "image/x-icon">
<!-- Bootstrap 5 link -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<!-- Bootstrap 5 popper and javascript link -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.3/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
<!--Bootstrap icons-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<!-- stylesheet -->
<link rel="stylesheet" type="text/css" href="{% static 'css/stylesheet.css' %}"/>
</head>
<body>
<div class="wrapper">
<div class="panel panel-default">
<div class="panel-heading">
<div class="d-flex justify-content-end ">
<div class="top-header m-2 ">
Marketplace
</div>
<div class="top-header m-2 ">|</div>
<div class="top-header m-2">
Buyer Protection
</div>
<div class="top-header m-2 ">|</div>
<div class="top-header m-2">
Track Order
</div>
<div class="top-header m-2 ">|</div>
<div class="top-header m-2">
<div class="form-group">
<select id="demo_overview_minimal" class="select-picker" data-role="select-dropdown" data-profile="minimal">
<!-- options -->
<option>BTN</option>
<option>USD</option>
<option>EUR</option>
</select>
</div>
</div>
</div>
</div>
<div class="panel-body">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand ms-5" href="#"><img src="{% static 'images/TecommLogo.png' %}" alt="Logo" height="60px" width="60px"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Shop by Category
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form class="d-flex Search col-5">
<input class="form-control me-auto col-8" type="search" placeholder="Search for anything" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
{% block content %}
{% endblock content%}
<footer>
<div class="panel panel-default">
<div class="panel-footer bg-light ">
<div class="row ms-5 me-5">
<div class="col-sm-3">
<div class="row">
<h3>Policies</h3>
</div>
<div class="row">
Privacy Policies
</div>
<div class="row">
Refund Policies
</div>
<div class="row">
Terms & Conditions
</div>
</div>
<div class="col-sm-3">
<div class="row">
<h3>Vendor</h3>
</div>
<div class="row">
Start Selling
</div>
<div class="row">
Learn to Sell
</div>
</div>
<div class="col-sm-3">
<div class="row">
<h3>Connect With Us</h3>
</div>
<div class="row">
<i class="bi bi-facebook"></i>Facebook
</div>
<div class="row">
<i class="bi bi-twitter"></i>Twiiter
</div>
<div class="row">
<i class="bi bi-instagram"></i>Instagram
</div>
</div>
<div class="col-sm-3">
<div class="row">
<h3>Help & Contact</h3>
</div>
<div class="row">
Contact
</div>
<div class="row">
About Us
</div>
<div class="row">
FAQs
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>
homepage.html
{% extends 'index.html' %}
{% block content %}
Hello! this is my block content
{% endblock content %}
urls.py
from django.conf import settings
from django.conf.urls.static import static
from django.contrib import admin
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.urls import path, include
from . import views
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.homepage, name="homepage"),
# path('accounts/', include('accounts.urls')),
]
urlpatterns += staticfiles_urlpatterns()
urlpatterns += static(settings.MEDIA_URL,
document_root=settings.MEDIA_ROOT)
views.py
from django.shortcuts import render
def homepage(request):
return render(request, 'index.html')
I have done the similar projects earlier but it was working fine. I don't know why it doesn't work in this project while i have done everything similar
I have been trying this for a whole day. Any help will be appreciated.
You want to extend index.html to homepage.html so you have to call homepage.html in your views.py file.
from django.shortcuts import render
def homepage(request):
return render(request, 'homepage.html')
I'm following a tutorial to make websites with Django. I'm currently trying to add a navigation bar using bootstrap CDN but the following appears. The code I am using is posted below.
There is no navigation bar present:
Below is the code is used.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81i\
uXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<title>{% block title %}Newspaper App{% endblock title %}</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<a class="navbar-brand" href="{% url 'home' %}">Newspaper</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarCollapse" aria-controls="navbarCollapse"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
{% if user.is_authenticated %}
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="userMenu"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
{{ user.username }}
</a>
<div class="dropdown-menu dropdown-menu-right"
aria-labelledby="userMenu">
<a class="dropdown-item"
href="{% url 'password_change'%}">Change password</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'logout' %}">
Log Out</a>
</div>
</li>
</ul>
{% else %}
<form class="form-inline ml-auto">
<a href="{% url 'login' %}" class="btn btn-outline-secondary">
Log In</a>
<a href="{% url 'signup' %}" class="btn btn-primary ml-2">
Sign up</a>
</form>
{% endif %}
</div>
</nav>
<div class="container">
{% block content %}
{% endblock content %}
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4\
YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/\
1.14.3/
umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbB\
JiSnjAK/
l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/\
js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ\
6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
</html>
The site is supposed to display a navigation bar with the users name at the top right.
to use CDN you need active internet connection, here looks like either you are developing offline or your django project does not have access to internet.
if developing offline is your requirement, then you may download those CDN files, then use them.
I am trying to implement login/logout functionality using the default auth system in Django 2.2. I have the following included in my base.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- navbar area start -->
<nav class="navbar navbar-area navbar-expand-lg absolute">
<div class="container-fluid nav-container">
<div class="logo-wrapper navbar-brand">
<a href="{% url 'home' %}" class="logo ">
<img src="/static/asset/img/logo.png" alt="logo">
</a>
</div>
<div class="collapse navbar-collapse" id="cgency">
<!-- navbar collapse start -->
<ul class="navbar-nav" id="primary-menu">
<!-- navbar- nav -->
<li class="nav-item active dropdown">
<a class="nav-link" href="{% url 'home' %}">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="{% url 'features' %}">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'pricing' %}">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'ARprogram' %}">Academic Program</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'ARcertification' %}">Certification</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="{% url 'knowledgebase' %}">Help</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'contactus' %}">Contact</a>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar btn wrapper -->
<div class="responsive-mobile-menu">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#cgency" aria-controls="cgency"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<!-- navbar collapse end -->
<div class="nav-right-content">
<ul>
<li class="nav-btn">
{% if request.user.is_authenticated %}
<!-- Hi {{ user.username }}! -->
logout
{% else %}
login
{% endif %}
</li>
<li class="nav-btn">
Download
</li>
</ul>
</div>
</div>
</nav>
<!-- navbar area end -->
{% block content %}
{% endblock %}
<!-- footer area start -->
<footer class="footer-area footer-bg">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="footer-widget widget about_widget"><!-- footer widget -->
<img src="/static/asset/img/footer-logo.png" alt="">
<ul class="social-icon text-center">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-linkedin"></i></li>
</ul>
<div class="copyright-text margin-top-30">© Copyrights 2019 EnablAR </div>
</div><!-- //. footer widget -->
</div>
<div class="col-lg-3 col-md-6">
<div class="footer-widget widget"><!-- footer widget -->
<h4 class="widget-title">Useful Links</h4>
<ul>
<li>Features</li>
<li>Pricing</li>
<li>Getting Started</li>
<li>Academic Program</li>
<li>Certification</li>
</ul>
</div><!-- //. footer widget -->
</div>
<div class="col-lg-3 col-md-6">
<div class="footer-widget widget"><!-- footer widget -->
<h4 class="widget-title">Need Help?</h4>
<ul>
<li>FAQS</li>
<li>Help</li>
<li>Contact</li>
</ul>
</div><!-- //. footer widget -->
</div>
<div class="col-lg-3 col-md-6">
<div class="footer-widget widget"><!-- footer widget -->
<h4 class="widget-title">Download</h4>
<ul>
<li>For windows</li>
</ul>
</div><!-- //. footer widget -->
</div>
</div>
</div>
</footer>
<!-- footer area end -->
</body>
</html>
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>About EnablAR</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="/static/asset/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/asset/css/fontawesome.min.css">
<link rel="stylesheet" href="/static/asset/css/flaticon.css">
<link rel="stylesheet" href="/static/asset/css/animate.css">
<link rel="stylesheet" href="/static/asset/css/slick.min.css">
<link rel="stylesheet" href="/static/asset/css/magnific-popup.css">
<link rel="stylesheet" href="/static/asset/css/style.css">
<link rel="stylesheet" href="/static/asset/css/responsive.css">
</head>
<body>
{% extends "base.html" %}
{% block content %}
<!-- breadcrumb area start-->
<div class="breadcrumb-area">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="breadcrumb-inner">
<h1 class="page-title">About</h1>
<ul class="page-list">
<li class="index.html">Home</li>
<li>About</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- breadcrumb area end-->
<!-- block feature area start -->
<div class="block-feature-area padding-top-120" id="about">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="block-feature-item">
<div class="row">
<div class="col-lg-6">
<div class="img-wrapper box-shadow-90">
<img src="/static/asset/img/softawe-1.jpg" alt="software image">
</div>
</div>
<div class="col-lg-6">
<div class="content-block-area padding-left-50">
<h4 class="title wow fadeInUp">Three step process to make your learning content AR enabled</h4>
<p>If you don’t know coding, youre covered!. Simply follow EnablAR’s 3 step process to create your own AR apps.</p>
<ul style="margin-left: -5%;">
<li>Create your 3d models</li>
<li>Use EnablAR</li>
<li>Deploy your App</li>
</ul>
<div class="btn-wrapper margin-top-20 wow fadeInDown">
Read More
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- block feature area end -->
<!-- block feature area start -->
<div class="block-feature-area padding-120">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="block-feature-item">
<div class="row reorder-xs">
<div class="col-lg-6">
<div class="content-block-area padding-right-50">
<h4 class="title wow fadeInUp">Track student usage of your apps</h4>
<p>Using enabler helps you track student engagement on the apps created by you. This is a first of its kind platform that helps teachers track how their students are learning</p>
<div class="btn-wrapper margin-top-20">
Read More
</div>
</div>
</div>
<div class="col-lg-6">
<div class="img-wrapper box-shadow-90 wow fadeInDown">
<img src="/static/asset/img/softawe-2.jpg" alt="software image">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- block feature area end -->
<div class="back-to-top base-color-2">
<i class="fas fa-rocket"></i>
</div>
<script src="/static/asset/js/jquery.js"></script>
<script src="/static/asset/js/popper.min.js"></script>
<script src="/static/asset/js/bootstrap.min.js"></script>
<script src="/static/asset/js/slick.min.js"></script>
<script src="/static/asset/js/jquery.magnific-popup.js"></script>
<script src="/static/asset/js/wow.min.js"></script>
<script src="/static/asset/js/TweenMax.js"></script>
<script src="/static/asset/js/mousemoveparallax.js"></script>
<script src="/static/asset/js/contact.js"></script>
<script src="/static/asset/js/main.js"></script>
{% endblock content %}
</body>
</html>
However, Even though I extend my index.html with base.html, it doesn't show the login/logout button correctly.
Even when the user is logged-in it always shows the login button instead of logout button. Whereas, if I include the above snippet within my index.html it works correctly. What am i missing?
I don't want to have redundant code in all my htmls.
Hello I am developing a django cms for my company but running into issues with the navbar in IE8.
using:
-Python 2.7.6
-Django (1, 7, 8, 'final', 0)
-django-cms 3.1.0
-boostrap 3.3.4
here is my template
{% load cms_tags staticfiles sekizai_tags menu_tags %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}This is my new project home page{% endblock title %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
{% render_block "css" %}
</head>
<body style="padding-top:60px">
{% cms_toolbar %}
<div class="container">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
{% show_menu 0 1 100 100 "menu.html" %}
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
{% block content %}
{% endblock content %}
</div>
<script src="{% static 'js/jquery.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
{% render_block "js" %}
</body>
</html>
The issue is the navbar is always collapsed regardless of the screen size
I have already had the navbar working in IE + Bootstrap and that template is like so:
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'core:home' %}">
{% load staticfiles %}
<img alt='Bell logo' src="{% static 'core/images/bell_logo.png' %}">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Liens</li>
<li>Tools</li>
<li>Doc</li>
<li>Wiki</li>
<li>Project</li>
<li>CAB</li>
<li>DB</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
I tried adapting my django cms template so it would look like the one I originally had, but no success. What am I doing wrong?
Had to add respond.js to page, but i thought the cms and django would take care of that