Hi I have a django project named mysite.
And an app created inside named as app. My base.html is seems to be working when I run server. But another html file, should be able to load once i click a link button in my main page(base.html). I have the following view
`def view(request):
return render(request,"view.html", {})
inside my views.py and urls
url(r'^admin/', include(admin.site.urls)),
url(r'$', 'app.views.home', name='home'),
url(r'^view/', 'app.views.view', name='view'),
] + static(settings.STATIC_URL, document_root=settings.STATIC_URL)`
and my link button is
Lets take a ride.. »
Templates:
base.html
`{% load staticfiles %}
{#<img src="{% static "my_app/myexample.jpg" %}" alt="My image"/>#}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Parasol.</title>
<!-- Bootstrap core CSS -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'css/navbar-static-top.css' %}" rel="stylesheet">
<link href="{% static 'css/style.css' %}" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="navbar-static-top.css" rel="stylesheet">
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
</head>
<body>
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Parasol.</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Photos <span class="caret"></span>
<ul class="dropdown-menu">
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Timeline</li>
<li class="active">Quotes<span class="sr-only">(current)</span></li>
<li>Friends</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Blah Blah</h1>
<p>
Let's go
</p>
</div>
</div> <!-- /container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>`
View.html
`{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chameleon Guys</title>
</head>
<body>
Its just for you dudes!!
</body>
</html>`
even though the url on my webbrowser shows view.html the page is not loaded. Please help me on it.Thanks in advance.
You're using named urls, so just make use of that feature:
Let's go
See documentation for more details!
create template directory.
-proj
-app
-templates
-view.html
Try add on your settings.py the path.
TEMPLATE_DIRS = (
BASE_DIR + '/app/templates',
)
Inside the href value place the url from urls.py.
Lets take a ride.. »
Related
I'm currently developing a Django web app, however I have an issue: After login, the user clicks on any button eg. Home (which has been linked to views with the #login_required decorator) and gets logged out and redirected back to the login page. I'm using Firebase for the authentication.
My views.py:
def postsign(request):
email=request.POST.get('email')
passw=request.POST.get('pass')
try:
user=auth.sign_in_with_email_and_password(email,passw)
except:
message="Invalid credentials. Try again."
return render(request,"login.html", {"msg":message})
session_id=user['idToken']
request.session['uid']=str(session_id)
return render(request,"pick.html")
#login_required(login_url='login')
def pick(request):
return render_to_response('pick.html')
My pick.html:
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>FYP - Is Your Network Safe?</title>
<!-- Bootstrap core CSS -->
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'vendor/bootstrap/css/loader.css' %}" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="{% static 'vendor/fontawesome-free/css/all.min.css' %}" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="{% static 'css/grayscale.min.css' %}" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css" rel="stylesheet" />
</head>
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">TestPage</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="{% url 'pick' %}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="{% url 'logout' %}">Logout</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
My login.html:
{% if msg %}
<script>
alert('{{msg}}');
</script>
{%endif%}
{% if msgg %}
<script>
alert('{{msgg}}');
</script>
{%endif%}
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Spectral SC">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="{% static 'css/logincss.css' %}">
</head>
<style>
h1{
color:#edf1ff;
text-shadow: 5px 5px 10px black;
}
.headerone{
font-family: 'Spectral SC', serif;
padding: 110px 0;
text-align: center;
}
body{
background-color: black;
}
</style>
<body>
<div class="login-dark">
<form action="/post_sign/" method="post">
{% csrf_token %}
<div class="illustration"><i class="icon ion-ios-locked-outline"></i></div>
<div class="form-group">Email: <input type="email" name="email" autocomplete="off" required></div>
<div class="form-group">Code: <input type="password" name="pass" autocomplete="off" required></div>
<input class="btn btn-primary btn-block" type="submit" value="Sign In"><br>
Can't Login? Click me, i'll help.</form>
</div>
</section>
<footer class="bg-black small text-center text-white-50">
</footer>
</body>
</html>
My urls.py
from django.contrib import admin
from django.urls import path
from myapp import views as v
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.conf.urls import include
from myapp.views import postregister, logout_view
urlpatterns = [
path('pick/', v.pick, name="pick"),
path('', v.signIn, name="login"),
path('post_sign/', v.postsign),
path('accounts/logout/', logout_view, name="logout")
]
urlpatterns += staticfiles_urlpatterns()
Just to put a note that the url shows http://127.0.0.1:8000/?next=/pick/ after clicking on the 'Home' button. Is there a way I can resolve this issue or any suggestions on how do I get this to work?
Since you are using HTTP instead of HTTPS, check if the following settings are set to false;
SESSION_COOKIE_SECURE
CSRF_COOKIE_SECURE
SECURE_SSL_REDIRECT
I was making a site with Django in which I was applying CSS properties to an extended template file. The CSS file is imported in parent template and is used in child template. But it isn't showing any changes in child template. Here's my code:
.c1 a:hover {
background-color: #1D1C1C;
color: white;
}
.theta {
position: relative;
left: 100px;
}
{% load static %}
<!DOCTYPE html>
<!-- Parent File -->
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Site</title>
<link href="{% static 'css/bootstrap-4.4.1.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'css/style.css' %}" rel="stylesheet" type="text/css">
<!-- <link href="../static/css/bootstrap-4.4.1.css" rel="stylesheet" type="text/css"> -->
<!-- <link href="../static/css/style.css" rel="stylesheet" type="text/css"> -->
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="{% url 'home' %}">Site</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">A</a>
<div class="dropdown-menu c1" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">a</a>
<a class="dropdown-item" href="#">b</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">B</a>
</li>
</ul>
</div>
</nav>
{% block content %}
{% endblock %}
<script src="{% static 'js/jquery-3.4.1.min.js' %}"></script>
<script src="{% static 'js/popper.min.js' %}"></script>
<script src="{% static 'js/bootstrap-4.4.1.js' %}"></script>
<!-- <script src="../static/js/jquery-3.4.1.min.js"></script>
<script src="../static/js/popper.min.js"></script>
<script src="../static/js/bootstrap-4.4.1.js"></script>
-->
</body>
</html>
<!-- Child File -->
{% extends "index.html" %}
{% block content %}
<br>
<div class="theta">
{% for i in theta %}
{{ i }}
<br>
{% endfor %}
</div>
<br>
{% endblock %}
Is there any additional loc required to show those changes in child template?
use this for clear collect static files:
python manage.py collectstatic --no-input --clear
I'm working on a project on Django and I want to include bootstrap to it to make it a responsive website.My bootstrap CSS works perfectly fine. Each time I include it<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
but when I try to do the same thing for js in bootstrap,it doesn't seem to work,
Here's my js
<script src="https://ajax.gogglepis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script> and here's my file structure
home
{%load staticfiles%}
<!DOCTYPE html>
<html>
<head>
<title>Nexton's Web</title>
<meta name="viewport" content="width-device-width , initial-scale=1">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet"href{%static'font/glyphiconshalfingsregular.woff2'%}">
<script src="https://ajax.gogglepis.com/ajax/libs/jquery/3.2.1/jquery.min.js"</script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<style>
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbartoggle"data-toggle="collaspe" data-target="#MyNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</nav>
and in my setting my STATIC_URL ='/static/'
I have the following Django settings:
views.py
from .forms import Method1Form
def method1_input(request):
if request.method == 'POST':
method1_form = Method1Form(request.POST, request.FILES)
# Handle file upload
if method1_form.is_valid():
q = method1_form.save()
q.save()
# This is where we run code
# with the given parameters
# Do something q.run_code1()
# This will show the method1_result to be executed.
return HttpResponseRedirect(reverse('method1-result', kwargs={'id': q.id }))
else:
method1_form = Method1Form()
return render(request, 'my_app/method1.html', {'m1_form':method1_form})
urls.py
from django.conf.urls import include, url
from myapp import views
urlpatterns = [url(r'^method1/input$', views.method1_input, name='method1-input')]
Now the current template my_app/method1.html looks like this. Note that it contain navigation bar.
{% load static from staticfiles %}
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/png" href="{% static "images/favicon.png" %}"/>
<link rel="stylesheet" href="{% static "css/bootstrap.min.css" %}"/>
<script src="{% static "vendors/jquery-2.1.4.min.js" %}"></script>
<script src="{% static "vendors/bootstrap.min.js" %}"></script>
<script src="{% static "vendors/bootstrap.file-input.js" %}"></script>
<link rel="stylesheet" href="{% static "css/style.css" %}"/>
<meta charset="utf-8">
<title>Cool title</title>
</head>
<body>
<!--- BEGINNING OF NAVBAR -->
<nav class="navbar navbar-inverse" style="border-radius:0px;">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand active" href="{% url 'index' %}">ICEPOP</a>
</div>
<div>
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Help</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-cutlery"></span> API</li>
</ul>
</div>
</div>
</nav>
<!--- END OF NAVBAR -->
<h1> Content specific to METHOD1 </h1>
</body>
</html>
What I want to do is to separate the file into a base.html template which contain only the navbar and method1_only.html. So at the end of the day method1_only.html file will contain only the inherit from base.html and the text specific to it. What's the scheme to do such wrapping in Django?
Well, django advises to use base.html file to contain no only navbar but hold all common staff for all pages: block, navbar, footer, side panel is available on the site. So I think you should do it next way:
base.html
{% load static from staticfiles %}
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/png" href="{% static "images/favicon.png" %}"/>
<link rel="stylesheet" href="{% static "css/bootstrap.min.css" %}"/>
<script src="{% static "vendors/jquery-2.1.4.min.js" %}"></script>
<script src="{% static "vendors/bootstrap.min.js" %}"></script>
<script src="{% static "vendors/bootstrap.file-input.js" %}"></script>
<link rel="stylesheet" href="{% static "css/style.css" %}"/>
<meta charset="utf-8">
<title>Cool title</title>
</head>
<body>
<!--- BEGINNING OF NAVBAR -->
<nav class="navbar navbar-inverse" style="border-radius:0px;">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand active" href="{% url 'index' %}">ICEPOP</a>
</div>
<div>
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Help</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-cutlery"></span> API</li>
</ul>
</div>
</div>
</nav>
<!--- END OF NAVBAR -->
<h1>{% block method_content %}{% endblock method_content %}</h1>
</body>
</html>
And in your method1_only.html you will extend base.html and put your method content in method_content block like this
{% extends "base.html" %}
{% block method_content %}Here goes your method content{% endblock method_content %}
Hope this will help.
I have a project named 'src' and app named 'app' and i have a template folder inside my app. And inside my template folder i have another folder named pages and my html pages(base.html and view.html) are resides there. My view.py is below
from django.shortcuts import render
from django.utils import timezone
# Create your views here.
def home(request):
return render(request, "pages/base.html", {})
and urls.py
from django.conf import settings
from django.conf.urls import include, url
from django.conf.urls.static import static
from django.contrib import admin
from django.views.generic import TemplateView
urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
url(r'$', 'app.views.home', name='home'),
url(r'^view$', TemplateView.as_view(template_name ='pages/view.html'), name = 'go'),
] + static(settings.STATIC_URL, document_root=settings.STATIC_URL)
and I am calling view.html by clicking the button in my base.html.
base.html
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Parasol.</title>
<!-- Bootstrap core CSS -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'css/navbar-static-top.css' %}" rel="stylesheet">
<link href="{% static 'css/style.css' %}" rel="stylesheet">
<link href="navbar-static-top.css" rel="stylesheet">
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
</head>
<body>
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Parasol.</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Photos <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Timeline</li>
<li class="active">Quotes<span class="sr-only">(current)</span></li>
<li>Friends</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1>Just her and the revolution</h1>
<p>
<!-- Lets take a ride.. » -->
Let's go
<!-- Lets take a ride.. » -->
</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
and view.html
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chameleon Guys</title>
</head>
<body>
Its just for you dudes!!
</body>
</html>
But when I click on the button, the view.html page is not loading even though the url changed accordingly. http://0.0.0.0:8000/view. Am bit new to Django. Please help me.
Your home view is matching all URLs, because you've set it to match $, which is "any string that ends", ie all of them. Change it to:
url(r'^$', 'app.views.home', name='home'),
so that it only matches the empty string.