This question already has answers here:
Link to Flask static files with url_for
(2 answers)
Closed 6 years ago.
Views.py
#app.errorhandler(404, strict_slashes=False)
def page_not_found(e):
return render_template('404.html', e=e)
404.html
{% extends 'layouts/layout1.html' %}
{% block title %}404 Page Not Found
{% endblock title %}
{% block content %}
<div class="container" >
<h3>Page you are looking for does not exist: {{ e }}</h3>
</div>
{% endblock %}
layout1.html
<!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="">
<title>{% block title %}
{% endblock %}</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/small-business.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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="#">
<img src="http://placehold.it/150x50&text=Logo" alt="">
</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>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- this is the data with the instruments, I applied on the top of hte website. -->
<div class="container" >
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home">
<ul>
<li>register</li>
<li>admin</li>
<li>Categories</li>
<li>much more crap here</li>
</ul>
</div>
<div role="tabpanel" class="tab-pane fade" id="profile">
TAB2
</div>
<div role="tabpanel" class="tab-pane fade" id="messages">
Tab 3
</div>
</div>
</div>
{% block content %}
{% endblock %}
<div class="container">
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-8">
<p>Copyright</p>
</div>
</div>
</footer>
</div>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
When I go to
http://127.0.0.1:5000/any_url_not_routed , like below,
it returns a 404 error as expected, but when I put a slash at the end,
http://127.0.0.1:5000/any_url_not_routed/ , like below,
it renders the same page but with no css and js.
Similar thing happens with other pages like /register, /login, etc. Also, browsers put automatic slash at the end.
Please tell me what is happening? I can link more code here.
Your "css/bootstrap.min.css" results in "/css/bootstrap.min.css" when the trailing slash is missing and "/any_url_not_routed/css/bootstrap.min.css" when the trailing slash is present.
You should use the absolute path "/css/bootstrap.min.css" for referencing resources, just as you already do for actions like "/register".
You can check the truth of this by looking at your server's request logs.
Related
the python script can rewrite all content of specify .html (in this case is "simple_website.html"), and showing the data extract from mysql
.py
import mysql.connector
import webbrowser
import time
mydb = mysql.connector.connect(
host="196.100.100.141",
user="root",
password="password456",
database="database_db",
auth_plugin='mysql_native_password'
)
mycursor = mydb.cursor()
mycursor.execute("SELECT row_01 FROM first_db")
myresult = mycursor.fetchall()
list_01 = []
for row in myresult:
temp_val = row[0]
list_01.append(temp_val)
print(list_01[5]) # get specific data from MySQL
html_content = f"<html><h1>this is the data extract from mysql:{list_01[5]} </h1></html>"
with open("simple_website.html","w") as html_file:
html_file.write(html_content) # show specific data on website
time.sleep(2)
webbrowser.open_new_tab("simple_website.html")
the output website pic with this logic
Q: if I just want to insert/replace "extract data (from mysql)" to certain area, how can I do so?
such as I just want to change the title , or part of the content in website, with "extract data"
original .html file (works fine)
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Rayson Technology - Your best OEM/ODM partner for Bluetooth solution</title>
<meta name="description" content=" content, we are the best company">
<meta name="keywords" content="content, where thestory begin" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicon -->
<link rel="icon" href="../images/favicon.png">
<!-- CSS ============================================ -->
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../assets/css/vendor/bootstrap.min.css">
<!-- Font Family CSS -->
<link rel="stylesheet" href="../assets/css/vendor/cerebrisans.css">
<!-- FontAwesome CSS -->
<link rel="stylesheet" href="../assets/css/vendor/fontawesome-all.min.css">
<link rel="stylesheet" href="../assets/css/vendor/linea-icons.css">
<!-- Swiper slider CSS -->
<link rel="stylesheet" href="../assets/css/plugins/swiper.min.css">
<!-- animate-text CSS -->
<link rel="stylesheet" href="../assets/css/plugins/animate-text.css">
<!-- Animate CSS -->
<link rel="stylesheet" href="../assets/css/plugins/animate.min.css">
<!-- Light gallery CSS -->
<link rel="stylesheet" href="../assets/css/plugins/lightgallery.min.css">
<!-- Main Style CSS -->
<link rel="stylesheet" href="../assets/css/Custom.css">
<link rel="stylesheet" href="../assets/css/style.css">
</head>
<body>
<div class="preloader-activate preloader-active open_tm_preloader">
<div class="preloader-area-wrap">
<div class="spinner d-flex justify-content-center align-items-center h-100">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
</div>
<!-- Header Bottom Wrap Start -->
<div class="header-bottom-wrap header-sticky">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="header default-menu-style position-relative">
<!-- brand logo -->
<div class="header__logo">
<a href="index.html">
<img src="../images/logo.png" width="160" height="48" class="img-fluid" alt="">
</a>
</div>
<!-- header midle box -->
<div class="header-midle-box">
<div class="header-bottom-wrap d-md-block d-none">
<div class="header-bottom-inner">
<div class="header-bottom-left-wrap">
<!-- navigation menu -->
<div class="header__navigation d-none d-xl-block">
<nav class="navigation-menu primary--menu">
<ul>
<li class="has-children has-children--multilevel-submenu">
<span>Products</span>
<ul class="submenu">
<li><span>Nordic</span></li>
<li><span>product_02</span></li> <!-- # the line I want to change with mysql data -->
<li><span>product_03</span></li>
</ul>
</li>
<li>
<span>Software Support</span>
</li>
<li>
<span>Customization</span>
</li>
<li>
<span>Success Stories</span>
</li>
<li>
<span>Contact</span>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
<!-- header right box -->
<div class="header-right-box">
<div class="header-right-inner" id="hidden-icon-wrapper">
<!-- language-menu -->
<div class="language-menu">
<ul>
<li>
<a href="#" class="">
<span class="wpml-ls-native">English</span>
</a>
<ul class="ls-sub-menu">
<li class="">
<a href="../chinese/" class="">
<span class="wpml-ls-native">繁體中文</span>
</a>
</li>
<li class="">
<a href="../schinese/" class="">
<span class="wpml-ls-native">簡體中文</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- header-search-form -->
<div class="header-search-form default-search">
<form action="search.html" class="search-form-top">
<input class="search-field" type="text" placeholder="Search…">
<button class="search-submit">
<i class="search-btn-icon fa fa-search"></i>
</button>
</form>
</div>
</div>
<div class="footer-copyright-area section-space--ptb_15">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-md-6 text-center text-md-start">
<!-- breadcrumb-list start -->
<ul class="breadcrumb-list">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item">Products</li>
<li class="breadcrumb-item active">Nordic</li>
</ul>
<!-- breadcrumb-list end -->
</div>
<div class="col-md-6 text-center text-md-end">
<span class="copyright-text">© 2022 sam_JR Technology co.,Ltd. All Rights Reserved.</span>
</div>
</div>
</div>
</div>
</div>
<!--==================== End of footer area ====================-->
</body>
</html>
idea: that I put the original html code with html_content = f" , and the old content will replace with {list_01[5]} , it should works fine, as the above logic showing, what do I need to change for code
I did
put original website html into .py script in html_content = f"
replace the old content with extract mysql data {list_01[5]} , in line 109
tried in .py script
import mysql.connector
import webbrowser
import time
mydb = mysql.connector.connect(
host="196.100.100.141",
user="root",
password="password456",
database="database_db",
auth_plugin='mysql_native_password'
)
mycursor = mydb.cursor()
mycursor.execute("SELECT row_01 FROM first_db")
myresult = mycursor.fetchall()
list_01 = []
for row in myresult:
temp_val = row[0]
list_01.append(temp_val)
print(list_01[5]) # get specific data from MySQL
html_content = f"<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Rayson Technology - Your best OEM/ODM partner for Bluetooth solution</title>
<meta name="description" content=" content, we are the best company">
<meta name="keywords" content="content, where thestory begin" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicon -->
<link rel="icon" href="../images/favicon.png">
<!-- CSS ============================================ -->
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../assets/css/vendor/bootstrap.min.css">
<!-- Font Family CSS -->
<link rel="stylesheet" href="../assets/css/vendor/cerebrisans.css">
<!-- FontAwesome CSS -->
<link rel="stylesheet" href="../assets/css/vendor/fontawesome-all.min.css">
<link rel="stylesheet" href="../assets/css/vendor/linea-icons.css">
<!-- Swiper slider CSS -->
<link rel="stylesheet" href="../assets/css/plugins/swiper.min.css">
<!-- animate-text CSS -->
<link rel="stylesheet" href="../assets/css/plugins/animate-text.css">
<!-- Animate CSS -->
<link rel="stylesheet" href="../assets/css/plugins/animate.min.css">
<!-- Light gallery CSS -->
<link rel="stylesheet" href="../assets/css/plugins/lightgallery.min.css">
<!-- Main Style CSS -->
<link rel="stylesheet" href="../assets/css/Custom.css">
<link rel="stylesheet" href="../assets/css/style.css">
</head>
<body>
<div class="preloader-activate preloader-active open_tm_preloader">
<div class="preloader-area-wrap">
<div class="spinner d-flex justify-content-center align-items-center h-100">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
</div>
<!-- Header Bottom Wrap Start -->
<div class="header-bottom-wrap header-sticky">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="header default-menu-style position-relative">
<!-- brand logo -->
<div class="header__logo">
<a href="index.html">
<img src="../images/logo.png" width="160" height="48" class="img-fluid" alt="">
</a>
</div>
<!-- header midle box -->
<div class="header-midle-box">
<div class="header-bottom-wrap d-md-block d-none">
<div class="header-bottom-inner">
<div class="header-bottom-left-wrap">
<!-- navigation menu -->
<div class="header__navigation d-none d-xl-block">
<nav class="navigation-menu primary--menu">
<ul>
<li class="has-children has-children--multilevel-submenu">
<span>Products</span>
<ul class="submenu">
<li><span>Nordic</span></li>
<li><span>{list_01[5]}</span></li> <!-- # the line I want to change with mysql data -->
<li><span>product_03</span></li>
</ul>
</li>
<li>
<span>Software Support</span>
</li>
<li>
<span>Customization</span>
</li>
<li>
<span>Success Stories</span>
</li>
<li>
<span>Contact</span>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
<!-- header right box -->
<div class="header-right-box">
<div class="header-right-inner" id="hidden-icon-wrapper">
<!-- language-menu -->
<div class="language-menu">
<ul>
<li>
<a href="#" class="">
<span class="wpml-ls-native">English</span>
</a>
<ul class="ls-sub-menu">
<li class="">
<a href="../chinese/" class="">
<span class="wpml-ls-native">繁體中文</span>
</a>
</li>
<li class="">
<a href="../schinese/" class="">
<span class="wpml-ls-native">簡體中文</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- header-search-form -->
<div class="header-search-form default-search">
<form action="search.html" class="search-form-top">
<input class="search-field" type="text" placeholder="Search…">
<button class="search-submit">
<i class="search-btn-icon fa fa-search"></i>
</button>
</form>
</div>
</div>
<div class="footer-copyright-area section-space--ptb_15">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-md-6 text-center text-md-start">
<!-- breadcrumb-list start -->
<ul class="breadcrumb-list">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item">Products</li>
<li class="breadcrumb-item active">Nordic</li>
</ul>
<!-- breadcrumb-list end -->
</div>
<div class="col-md-6 text-center text-md-end">
<span class="copyright-text">© 2022 sam_JR Technology co.,Ltd. All Rights Reserved.</span>
</div>
</div>
</div>
</div>
</div>
<!--==================== End of footer area ====================-->
</body>
</html>"
with open("simple_website.html","w") as html_file:
html_file.write(html_content) # show specific data on website
time.sleep(2)
webbrowser.open_new_tab("simple_website.html"
should be the same logic, just need to improve layout/format of try .py code
I'm using Django 3.0.8 on visual studio code IDE. Here is a blog template(in template root) contained files base.html and home.html.
Here is my full base.html code:
{% 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, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> {% if title %}
<link rel="stylesheet" type="text/css" href="{% static 'blog/main.css' %}">
<title>Django blog-{{title}}</title>
{% else %}
<title>Django blog</title>
{% endif %}
</head>
<body>
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
<div class="container">
<a class="navbar-brand mr-4" href="/">Django Blog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="/">Home</a>
<a class="nav-item nav-link" href="/about">About</a>
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">Login</a>
<a class="nav-item nav-link" href="#">Register</a>
</div>
</div>
</div>
</nav>
</header>
<main role="main" class="container">
<div class="row">
<div class="col-md-8">
{% block content %}{% endblock %}
</div>
<div class="col-md-4">
<div class="content-section">
<h3>Our Sidebar</h3>
<p class='text-muted'>You can put any information here you'd like.
<ul class="list-group">
<li class="list-group-item list-group-item-light">Latest Posts</li>
<li class="list-group-item list-group-item-light">Announcements</li>
<li class="list-group-item list-group-item-light">Calendars</li>
<li class="list-group-item list-group-item-light">etc</li>
</ul>
</p>
</div>
</div>
</div>
</main>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
When i extend base.html into home.html, i'm facing some identation problem and getting wrong output.
This is how home.html looks like after extending base.html:
{% extends "blog/base.html" %} {% block content %} {% for post in posts %}
<article class="media content-section">
<div class="media-body">
<div class="article-metadata">
<a class="mr-2" href="#">{{ post.author }}</a>
<small class="text-muted">{{ post.date_posted }}</small>
</div>
<h2><a class="article-title" href="#">{{ post.title }}</a></h2>
<p class="article-content">{{ post.content }}</p>
</div>
</article>
{% endfor %} {% endblock content %}
Why i'm getting this.Is there any auto identation feature in visual studio code?
I believe you must match the amount of indentation exactly the same where the blocks are occupied. Say that your blocks are situated on the fourth tab indent, the new code must also be situated starting from the fourth indent.
Although the truth is, HTML indents don't matter -- as long as you have matching tags, you might as well as to put everything in one line and the HTML will still function. Having used python myself, it's hard to believe that indentation doesn't matter, but once you touched languages like c++ or java, you'll see that the indentation rule isn't global.
Answering your other question, I believe you can use some auto-indention as described here, but I don't see that necessary in HTML as very few people will see your web source code.
Also as a quick tip, it's a better practice to use two-space indents rather than four in HTML. In your first code block, it's obvious that most of the code in the middle is outside the frame, and that's caused by the numerous levels before it.
I have developed my first web app in python Django framework, deployed in pythonanywhere.com web server.
I have already used the latest bootstrap in this app, but it is not responsive properly on a smartphone screen. responsive in laptop and tablet but not in a smartphone.
You can also check it in your phone "http://sandeepbhatt.pythonanywhere.com/".
please look into my base.html and index.html code, where is the problem, also please let me know if there are any details required to figure out this problem which is not mention in this post.
My base.html code:
<!DOCTYPE html>
{% load static %}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<title>PIV</title>
<!-- <link rel="stylesheet" href="{% static "css/index.css" %}"> -->
</head>
<body>
<!-- <style>
body{ background: url("{% static "images/background.jpg" %}"); background-size: cover; background-repeat: no-repeat;}
</style> -->
<!-- Navbar start from here -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- <a class="navbar-brand" href="">Navbar</a> -->
<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="{% url 'index' %}">
<img src="{% static " images/logo.jpg" %}" width="70" height="50" alt="">
</a>
</nav>
<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">
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'logout' %}">Logout</a>
</li>
{% else %}
<!-- <li class="nav-item">
<a class="nav-link" href="{% url 'survey_app:user_login'%}">Login</a>
</li> -->
{% endif %}
<li class="nav-item">
<a class="nav-link" href="{% url 'survey_app:analysis' %}">Analysis</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'survey_app:tracking' %}">Tracking</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'admin:index' %}">Admin</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'survey_app:register' %}">Register</a>
</li>
</ul>
</div>
</nav>
</body>
<div class="container">
{% block contant %}
{% endblock %}
</div>
<!-- footer -->
<div class="card text-center">
<div class="card-footer text-muted">
Powered By <small>Political India Venture</small>
©2019
</div>
</div>
</html>
My index.html code:
<!DOCTYPE html>
{% extends 'survey_app/base.html' %}
{% load static %}
{% block contant %}
<head>
<link rel="stylesheet" href="{% static " css/login_form.css" %}">
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> -->
</head>
<!-- <style>
body{ background: url("{% static "images/background.jpg" %}"); background-size: cover; background-repeat: no-repeat;}
</style> -->
<div class="row">
<div class="col">
<h2>Welcome to Political India Venture </h2>
<h2>Survey App!</h2>
<h5 class="font-italic<div class=" row">
<h5>Get the answers you need</h5>
<div class="wrapper">
<form method="POST" class="form-signin" action="{% url " survey_app:user_login" %}">
{% csrf_token %}
{# A more "HTML" way of creating the login form#}
<h2 class="form-signin-heading">Please login</h2>
<input type="text" class="form-control" name="username" placeholder="User Name" required="" autofocus="" />
<input type="password" class="form-control" name="password" placeholder="Password" required="" />
<label class="checkbox">
<input type="checkbox" value="remember-me" id="rememberMe" name="rememberMe"> Remember me
</label>
<button class="btn btn-lg btn-primary btn-block" type="submit">Login</button>
</form>
</div>
</div>
</div>
{% endblock %}
I found the solution after number of testing in my app and found there was only one bootstrap tag missing.
I just add this in my base.html file:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
and now it is proper responsive on every device.
Your template is broken, look at <h5> class-"font-italic there is no closure (in index.html)
I working on a Django project and there is a navbar for the site. So when one user gets logged in I want to change the navbar. So how can I stop the navbar getting inherited from the base template?
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<title>Blog</title>
<title>Eapp</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<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" aria-expanded="false">
<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="#">Eapp</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 navbar-right">
<li>Register</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
{% block content %}
{% endblock content%}
</div>
</body>
</html>
This is my base.html looks like and , please give me an idea about how the new template look like? Thank You
you can user django template tags e.g this is template tags which display that if user is authenticated then it will show logout button else login. same way you can do it for your navigation bar in base.html.
{% if request.user.is_authenticated %}
<li>Log Out</li>
{% else %}
<li>Log In</li>
{% endif %}
This is my base.html file:
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{% static 'css/css/bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'css/css/bootstrap-theme.css' %}">
</head>
</html>
<body>
<nav class="navbar navbar-default"></nav>
<nav class="navbar navbar-inverse navbar-fixed-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>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Fitbit</li>
{% if user.is_anonymous %}
{% else %}
<li>Log Out</li>
{% endif %}
</div><!--/.navbar-collapse -->
</div>
</nav>
<center>
{% block content %}{% endblock %}
</center>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="css/js/jquery.min.js"> <\/script>')</script>
<script src="/static/css/js/bootstrap.min.js"></script>
<script src="/static/css/js/bootstrap.js"></script>
</body>
</html>
<footer>
<p>© 2016 Hanze Hogeschool Groningen</p>
</footer>
As you can see I'm doing a check if the user is anonymous if he is not anonymous it should show the log out button. But at the moment when I return to the homepage it still shows the Log Out button.
My question is, how do I make it so that the log out will not show on the homepage. According to my own thinking I think django still thinks I'm not anonymous on the homepage.
And this is the image for the problem:
homepage
You should be using is_authenticated instead:
{% if user.is_authenticated %}
<li>Log Out</li>
{% endif %}
And, you are not passing the request context from your view to a template, use render():
return render(request, 'index.html')