[Hindi] How Websites Work - Web Development Using Flask and Python #1

[Hindi] Creating Our First Flask App - Web Development Using Flask and Python #2

[Hindi] Static and Templates folder - Web Development Using Flask and Python #3

[Hindi] Simple Bootstrap Site - Web Development Using Flask and Python #4

[Hindi] Basics of Jinja Templating - Web Development Using Flask and Python #5

[Hindi] Creating a tech blog - Web Development Using Flask and Python #6

[Hindi] Template Inheritance In Jinja2 - Web Development Using Flask and Python #7

[Hindi] Connecting to the Database - Web Development Using Flask and Python #8

[Hindi] Flask SQLAlchemy Tutorial In Hindi - Web Development Using Flask and Python #9

[Hindi] Making Parameters Configurable In Flask - Web Development Using Flask and Python #10

[Hindi] Sending Emails Using Flask - Web Development Using Flask and Python #11

[Hindi] Fetching Posts From Database - Web Development Using Flask and Python #12

[Hindi] Designing Blog's Homepage - Web Development Using Flask and Python #13

[Hindi] Creating Admin Dashboard - Web Development Using Flask and Python #14

[Hindi] Edit, Delete and File Upload - Web Development Using Flask and Python #15

[Hindi] Adding New Posts To Flask Blog - Web Development Using Flask and Python #16

[Hindi] Uploading Files In Flask - Web Development Using Flask and Python #17

[Hindi] Deleting Blog Posts In Flask - Web Development Using Flask and Python #18

[Hindi] Creating Pagination In Flask - Web Development Using Flask and Python #19

[Hindi] Uploading Flask Blog To GitHub - Web Development Using Flask and Python #20

[Hindi] Purchasing A Domain Name From Godaddy- Web Development Using Flask and Python #21

[Hindi] Hosting The Blog On A Server - Web Development Using Flask and Python #22

[Hindi] Fixing The Add Post Bug - Web Development Using Flask and Python #23

[Hindi] Hosting Flask App On Ubuntu Production Server WSGI - Web Development Using Flask & Python#24

[Hindi] Message Flashing And Other Python Flask Resources | Web Development Using Flask & Python #25

<p>In this blog we will learn how to make template for our template!</p>
<p>What do I mean by that? In our previous blog we edited one of our HTML page but when we go on some other page we face the same problem. So, will we do it again and again on every page? Answer is No!</p>
<p>We will make template for that template. As I mentioned in previous blog that we will mainly edit script and link tag. Hence, we are mainly editing header and footer, which are same in all web pages in our website. So what if we make an HTML file(say layout.html) which only has header and footer, we remove header and footer from other files and make other files take header and footer from &lsquo;layout.html&rsquo;. Well that would be great. So, let&rsquo;s do it!</p>
<p>&lt;|AD|&gt;</p>
<p>I will explain it to you by the help of this simple example:</p>
<p>Here we have a small simple HTML page</p>
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;HTML Page&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;!-- All content here --&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<p>Imagine we have ten pages like this and except body everything is same in those pages. So we can make a template for that website. It is called Template Inheritance. The advantage is that if you want to change something in header or footer of all those ten pages then you don&rsquo;t have to go and edit all those ten pages, you can just edit the template file and it&rsquo;s done for all the ten pages. Also, it keeps the code clean.</p>
<p>After Template Inheritance, code shown above will look like this but will work the same as before:</p>
<pre class="language-markup"><code>{% extends "layout.html" %}
{% block body %}
&lt;body&gt;
    &lt;!-- All content here --&gt;
&lt;/body&gt;
{% endblock %}</code></pre>
<p>In first line you give your template file name(in this case layout.html).</p>
<p>In second line we are telling from here the block starts and in the last line we are telling the ending of block. Flask will put this whole block as it is in the template and render it. Here is how template looks:</p>
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;HTML Page&lt;/title&gt;
&lt;/head&gt;
{% block body %} {% endblock %}
&lt;/html&gt;</code></pre>
<p>This is how our template looks. The place where we wrote jinja code, it simply just tells that whole block will be placed here. This is Template Inheritance!</p>
<p><strong>Tip: </strong>If your app.run() is not working then you can run it through command prompt or powershell.</p>
<p>For that:</p>
<ol>
<li>Go in the folder where your python file is</li>
<li>Open windows powershell(shift+right mouse click then select windows powershell)</li>
<li>Write &lsquo;python filename.py&rsquo; and it will run</li>
</ol>
<h4>1. main.py file as described in the video</h4>
<pre class="language-python"><code>from flask import Flask, render_template
app = Flask(__name__)


@app.route("/")
def home():
    return render_template('index.html')


@app.route("/about")
def about():
    return render_template('about.html')


@app.route("/contact")
def contact():
    return render_template('contact.html')


app.run(debug=True)

</code></pre>
<p>&lt;|AD|&gt;</p>
<h4>2. layout.html file as described in the video</h4>
<pre class="language-html"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
    &lt;meta name="description" content=""&gt;
    &lt;meta name="author" content=""&gt;

    &lt;title&gt;Clean Blog - Start Bootstrap Theme&lt;/title&gt;

    &lt;!-- Bootstrap core CSS --&gt;
    &lt;link href="{{ url_for('static', filename='vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet"&gt;

    &lt;!-- Custom fonts for this template --&gt;
    &lt;link href="{{ url_for('static', filename='vendor/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet" type="text/css"&gt;
    &lt;link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'&gt;
    &lt;link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'&gt;

    &lt;!-- Custom styles for this template --&gt;
    &lt;link href="{{ url_for('static', filename='css/clean-blog.min.css') }}" rel="stylesheet"&gt;

  &lt;/head&gt;

  &lt;body&gt;

    &lt;!-- Navigation --&gt;
    &lt;nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav"&gt;
      &lt;div class="container"&gt;
        &lt;a class="navbar-brand" href="index.html"&gt;Start Bootstrap&lt;/a&gt;
        &lt;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"&gt;
          Menu
          &lt;i class="fa fa-bars"&gt;&lt;/i&gt;
        &lt;/button&gt;
        &lt;div class="collapse navbar-collapse" id="navbarResponsive"&gt;
          &lt;ul class="navbar-nav ml-auto"&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="/"&gt;Home&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="/about"&gt;About&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="/post"&gt;Sample Post&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="/contact"&gt;Contact&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;

{% block body %} {% endblock %}

 &lt;hr&gt;

    &lt;!-- Footer --&gt;
    &lt;footer&gt;
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-lg-8 col-md-10 mx-auto"&gt;
            &lt;ul class="list-inline text-center"&gt;
              &lt;li class="list-inline-item"&gt;
                &lt;a href="#"&gt;
                  &lt;span class="fa-stack fa-lg"&gt;
                    &lt;i class="fa fa-circle fa-stack-2x"&gt;&lt;/i&gt;
                    &lt;i class="fa fa-twitter fa-stack-1x fa-inverse"&gt;&lt;/i&gt;
                  &lt;/span&gt;
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="list-inline-item"&gt;
                &lt;a href="#"&gt;
                  &lt;span class="fa-stack fa-lg"&gt;
                    &lt;i class="fa fa-circle fa-stack-2x"&gt;&lt;/i&gt;
                    &lt;i class="fa fa-facebook fa-stack-1x fa-inverse"&gt;&lt;/i&gt;
                  &lt;/span&gt;
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="list-inline-item"&gt;
                &lt;a href="#"&gt;
                  &lt;span class="fa-stack fa-lg"&gt;
                    &lt;i class="fa fa-circle fa-stack-2x"&gt;&lt;/i&gt;
                    &lt;i class="fa fa-github fa-stack-1x fa-inverse"&gt;&lt;/i&gt;
                  &lt;/span&gt;
                &lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
            &lt;p class="copyright text-muted"&gt;Copyright &copy; Your Website 2018&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/footer&gt;

    &lt;!-- Bootstrap core JavaScript --&gt;
    &lt;script src="{{ url_for('static', filename='vendor/jquery/jquery.min.js') }}"&gt;&lt;/script&gt;
    &lt;script src="{{ url_for('static', filename='vendor/bootstrap/js/bootstrap.bundle.min.js') }}"&gt;&lt;/script&gt;

    &lt;!-- Custom scripts for this template --&gt;
    &lt;script src="{{ url_for('static', filename='js/clean-blog.min.js') }}"&gt;&lt;/script&gt;

  &lt;/body&gt;

&lt;/html&gt;

</code></pre>
<p>&lt;|AD|&gt;</p>
<h4>3. index.html file as described in the video</h4>
<pre class="language-html"><code>{% extends "layout.html" %}
{% block body %}
    &lt;!-- Page Header --&gt;
    &lt;header class="masthead" style="background-image: url('{{ url_for('static', filename='img/home-bg.jpg') }}')"&gt;
      &lt;div class="overlay"&gt;&lt;/div&gt;
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-lg-8 col-md-10 mx-auto"&gt;
            &lt;div class="site-heading"&gt;
              &lt;h1&gt;Clean Blog&lt;/h1&gt;
              &lt;span class="subheading"&gt;A Blog Theme by Start Bootstrap&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/header&gt;

    &lt;!-- Main Content --&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-lg-8 col-md-10 mx-auto"&gt;
          &lt;div class="post-preview"&gt;
            &lt;a href="post.html"&gt;
              &lt;h2 class="post-title"&gt;
                Man must explore, and this is exploration at its greatest
              &lt;/h2&gt;
              &lt;h3 class="post-subtitle"&gt;
                Problems look mighty small from 150 miles up
              &lt;/h3&gt;
            &lt;/a&gt;
            &lt;p class="post-meta"&gt;Posted by
              &lt;a href="#"&gt;Start Bootstrap&lt;/a&gt;
              on September 24, 2018&lt;/p&gt;
          &lt;/div&gt;
          &lt;hr&gt;
          &lt;div class="post-preview"&gt;
            &lt;a href="post.html"&gt;
              &lt;h2 class="post-title"&gt;
                I believe every human has a finite number of heartbeats. I don't intend to waste any of mine.
              &lt;/h2&gt;
            &lt;/a&gt;
            &lt;p class="post-meta"&gt;Posted by
              &lt;a href="#"&gt;Start Bootstrap&lt;/a&gt;
              on September 18, 2018&lt;/p&gt;
          &lt;/div&gt;
          &lt;hr&gt;
          &lt;div class="post-preview"&gt;
            &lt;a href="post.html"&gt;
              &lt;h2 class="post-title"&gt;
                Science has not yet mastered prophecy
              &lt;/h2&gt;
              &lt;h3 class="post-subtitle"&gt;
                We predict too much for the next year and yet far too little for the next ten.
              &lt;/h3&gt;
            &lt;/a&gt;
            &lt;p class="post-meta"&gt;Posted by
              &lt;a href="#"&gt;Start Bootstrap&lt;/a&gt;
              on August 24, 2018&lt;/p&gt;
          &lt;/div&gt;
          &lt;hr&gt;
          &lt;div class="post-preview"&gt;
            &lt;a href="post.html"&gt;
              &lt;h2 class="post-title"&gt;
                Failure is not an option
              &lt;/h2&gt;
              &lt;h3 class="post-subtitle"&gt;
                Many say exploration is part of our destiny, but it&rsquo;s actually our duty to future generations.
              &lt;/h3&gt;
            &lt;/a&gt;
            &lt;p class="post-meta"&gt;Posted by
              &lt;a href="#"&gt;Start Bootstrap&lt;/a&gt;
              on July 8, 2018&lt;/p&gt;
          &lt;/div&gt;
          &lt;hr&gt;
          &lt;!-- Pager --&gt;
          &lt;div class="clearfix"&gt;
            &lt;a class="btn btn-primary float-right" href="#"&gt;Older Posts &rarr;&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    {% endblock %}
</code></pre>
<h4>4. about.html file as described in the video</h4>
<pre class="language-html"><code>{% extends "layout.html" %}
{% block body %}
    &lt;!-- Page Header --&gt;
    &lt;header class="masthead" style="background-image: url('{{ url_for('static', filename='img/about-bg.jpg') }}')"&gt;
      &lt;div class="overlay"&gt;&lt;/div&gt;
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-lg-8 col-md-10 mx-auto"&gt;
            &lt;div class="page-heading"&gt;
              &lt;h1&gt;About Me&lt;/h1&gt;
              &lt;span class="subheading"&gt;This is what I do.&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/header&gt;

    &lt;!-- Main Content --&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-lg-8 col-md-10 mx-auto"&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur?&lt;/p&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius praesentium recusandae illo eaque architecto error, repellendus iusto reprehenderit, doloribus, minus sunt. Numquam at quae voluptatum in officia voluptas voluptatibus, minus!&lt;/p&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut consequuntur magnam, excepturi aliquid ex itaque esse est vero natus quae optio aperiam soluta voluptatibus corporis atque iste neque sit tempora!&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

   {% endblock %}
</code></pre>
<p>&lt;|AD|&gt;</p>
<h4>5. post.html file as described in the video</h4>
<pre class="language-html"><code>{% extends "layout.html" %}
{% block body %}
    &lt;!-- Page Header --&gt;
    &lt;header class="masthead" style="background-image: url('{{ url_for('static', filename='img/about-bg.jpg') }}')"&gt;
      &lt;div class="overlay"&gt;&lt;/div&gt;
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-lg-8 col-md-10 mx-auto"&gt;
            &lt;div class="page-heading"&gt;
              &lt;h1&gt;About Me&lt;/h1&gt;
              &lt;span class="subheading"&gt;This is what I do.&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/header&gt;

    &lt;!-- Main Content --&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-lg-8 col-md-10 mx-auto"&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur?&lt;/p&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius praesentium recusandae illo eaque architecto error, repellendus iusto reprehenderit, doloribus, minus sunt. Numquam at quae voluptatum in officia voluptas voluptatibus, minus!&lt;/p&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut consequuntur magnam, excepturi aliquid ex itaque esse est vero natus quae optio aperiam soluta voluptatibus corporis atque iste neque sit tempora!&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

   {% endblock %}
</code></pre>
<h4>6. contact.html file as described in the video</h4>
<pre class="language-html"><code>{% extends "layout.html" %}
{% block body %}

    &lt;!-- Page Header --&gt;
      &lt;header class="masthead" style="background-image: url('{{ url_for('static', filename='img/contact-bg.jpg') }}')"&gt;
      &lt;div class="overlay"&gt;&lt;/div&gt;
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-lg-8 col-md-10 mx-auto"&gt;
            &lt;div class="page-heading"&gt;
              &lt;h1&gt;Contact Me&lt;/h1&gt;
              &lt;span class="subheading"&gt;Have questions? I have answers.&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/header&gt;

    &lt;!-- Main Content --&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-lg-8 col-md-10 mx-auto"&gt;
          &lt;p&gt;Want to get in touch? Fill out the form below to send me a message and I will get back to you as soon as possible!&lt;/p&gt;
          &lt;!-- Contact Form - Enter your email address on line 19 of the mail/contact_me.php file to make this form work. --&gt;
          &lt;!-- WARNING: Some web hosts do not allow emails to be sent through forms to common mail hosts like Gmail or Yahoo. It's recommended that you use a private domain email address! --&gt;
          &lt;!-- To use the contact form, your site must be on a live web host with PHP! The form will not work locally! --&gt;
          &lt;form name="sentMessage" id="contactForm" novalidate&gt;
            &lt;div class="control-group"&gt;
              &lt;div class="form-group floating-label-form-group controls"&gt;
                &lt;label&gt;Name&lt;/label&gt;
                &lt;input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name."&gt;
                &lt;p class="help-block text-danger"&gt;&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="control-group"&gt;
              &lt;div class="form-group floating-label-form-group controls"&gt;
                &lt;label&gt;Email Address&lt;/label&gt;
                &lt;input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address."&gt;
                &lt;p class="help-block text-danger"&gt;&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="control-group"&gt;
              &lt;div class="form-group col-xs-12 floating-label-form-group controls"&gt;
                &lt;label&gt;Phone Number&lt;/label&gt;
                &lt;input type="tel" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number."&gt;
                &lt;p class="help-block text-danger"&gt;&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="control-group"&gt;
              &lt;div class="form-group floating-label-form-group controls"&gt;
                &lt;label&gt;Message&lt;/label&gt;
                &lt;textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."&gt;&lt;/textarea&gt;
                &lt;p class="help-block text-danger"&gt;&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;br&gt;
            &lt;div id="success"&gt;&lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;button type="submit" class="btn btn-primary" id="sendMessageButton"&gt;Send&lt;/button&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

   {% endblock %}
</code></pre>