Python, PySpark, Cloud, Unix, SQL: 2 Flask

API's are Platform independent(Desktop, mobile, androi application, Ios Application)

Chapter 1: route , page creation

Reference: https://flask.palletsprojects.com/en/1.1.x/tutorial/

Page creation:

from flask import Flask
app = Flask(__name__)


@app.route("/")
def home():
    return "<h1>Home Page</h1>"


if __name__ == '__main__':
    app.run(port=5008, debug=True)
    # debug = True is used for reflection of changes in webpage with refresh

Make home page word as heading:

from flask import Flask
app = Flask(__name__)


@app.route("/")
def home():
    return "<h1>Home Page</h1>"
# to increase the size of Home Page in above line, add Html code (<h1>....</h1>)


if __name__ == '__main__':
    app.run(port=5009, debug=True) # default port is 5000

Route:

main.py file:

#simple Flask application

from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
    return "<h1>Hello World</h1>"  #web page with hello world
@app.route('/detail')
def detail():
    return "<h1>detail page</h1>"
if __name__ == '__main__':
    app.run(port=5009, debug=True)

adding code to move back to home page:

from flask import Flask

app = Flask(__name__)

@app.route('/')
@app.route('/home')     # for taking back to home page
def home():
    return "<h1>Welcome Page</h1>"  #web page with hello world


@app.route('/detail')
def detail():
    return "<h1>detail page</h1>"
if __name__ == '__main__':
    app.run(port=5009, debug=True)

Chapter 2:render templates

main.py file:

# Flask application including render template,
# create Static and templates folder in the project directory
# add index.html file in templates

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
@app.route('/home')     # for taking back to home page
def home():
    return render_template('index.html')  #web page with hello world


@app.route('/detail')
def detail():
    return "<h1>detail page</h1>"
if __name__ == '__main__':
    app.run(port=5009, debug=True)

index.html file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    Hello world, this is my second version of flask code
</body>
</html>

detail.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>detail</title>
</head>
<body>
 Detail page
</body>
</html>

Chapter 3: adding posts

Main.py

from flask import Flask, render_template
app = Flask(__name__)

posts =[
    {'title': '1st post',
     'details': '1st post details'

    },
    {'title': '2nd post',
     'details': '2nd post details'

     }
]

@app.route('/') # route decorator is used for moving to different pages in browser, '/' is for root page
def index():
    return render_template('index.html', posts=posts)

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

if __name__ == '__main__':
    app.run(port=5010, debug=True)

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
{% for post in posts %}   
        <h1>{{ post.title }}</h1>
            <p> {{ post.details }}</p>
{% endfor %}
</body>
</html>

Chpater 4: Adding title

main.py

from flask import Flask, render_template
app = Flask(__name__)

posts =[
    {'title': '1st post',
     'details': '1st post details'

    },
    {'title': '2nd post',
     'details': '2nd post details'

     }
]

@app.route('/')  # route decorator is used for moving to different pages in browser, '/' is for root page
@app.route('/index')     # for taking back to home page
def index():
    return render_template('index.html',title = 'home-page', posts=posts)

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

if __name__ == '__main__':
    app.run(port=5010, debug=True)

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    {% if title %}
        <title>Flask testing project-{{ title }}</title>
    {% else %}
        <title>Flask testing project</title>
    {% endif %}

</head>
<body>
{% for post in posts %}
        <h1>{{ post.title }}</h1>
            <p> {{ post.details }}</p>
{% endfor %}
</body>
</html>

Detail.html

<!DOCTYPE html>
<html lang="en">
<head>
    {% if title %}
        <title>Flask testing project-{{ title }}</title>
    {% else %}
        <title>Flask testing project</title>
    {% endif %}

{% block body %}
    <h1>details here </h1>
{% endblock %}

In above code if title is passed in main.py, then it is print otherwise goes to the ese block in detail.html

and prints the given title

Chapter 5: Template inheritance

Template inheritance: Inherits from base.html code

main.py

#simple Flask application
from flask import Flask, render_template

app = Flask(__name__)

# Add some dummy data and check
posts =[
    {'title': '1st post',
     'details': '1st post details'

    },
    {'title': '2nd post',
     'details': '2nd post details'

     }
]

@app.route('/')
@app.route('/home')     # for taking back to home page
def home():
    return render_template('home.html', title = 'home-page', posts=posts)  #web page with hello world

@app.route('/detail')
def detail():
    return render_template('detail.html', title='details')

if __name__ == '__main__':
    app.run(port=5009, debug=True)

Base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {% if title %}
        <title>Flask Testing Blog-{{ title }}</title>
    {% else %}
        <title>Flask Testing Blog</title>
    {% endif %}
</head>
<body>
<!-- comments here-->
<!-- create a block here. block is a section, where child templates can override-->
    {% block body %} {% endblock body%} <!--body is replaced with content unique to each page-->

</body>
</html>

Home.html

{% extends 'base.html' %}

{% block body %}  <!--content block (below code wrapped in this)-->

    {% for post in posts %}
        <h1>{{ post.title }}</h1>
            <p> {{ post.details }}</p>
    {% endfor %}
{% endblock body%}

detail.html:

{% extends 'base.html' %}

{% block body %}
    <h1>details here </h1>
{% endblock %}

Bootstrapping:

Adding css file to the code

https://getbootstrap.com/docs/4.4/getting-started/introduction/ --> for Template reference

Static files: create css folder in static folder.

In css folder create main.css file

Link main.css to base.html with below code in base.html

Include sub-directories in filename

Base.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
    {% block head %}{% endblock %}
</head>
<body>
    {% block body %}{% endblock %}
</body>
</html>

main.css file:

body {
margin: 0;
font-family: sans-serif;
}

Or (for base file)

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <!--comments here-->
    <!-- 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.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    {% block head %}
        {% if title %}
            <title>Flask testing project-{{ title }}</title>
        {% else %}
            <title>Flask testing project</title>
        {% endif %}
    {% endblock %}
</head>
<body>
    <div class="container"
         {% block body %}{% endblock %}
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 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.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

</body>
</html>

In above base.html div is used for more beautiful look

From above base.html we can inherit for other html files like blow

index.html

{% extends 'base.html' %}

{% block body %}
    {% for post in posts %}
        <h1>{{ post.title }}</h1>
            <p> {{ post.details }}</p>
    {% endfor %}
{% endblock %}

detail.html

{% extends 'base.html' %}

{% block body %}
<h1>details here </h1>
{% endblock %}

Python, PySpark, Cloud, Unix, SQL

Search This Blog

2 Flask

Chapter 1: route , page creation

Page creation:

Route:

adding code to move back to home page:

Chapter 2:render templates

Chapter 3: adding posts

Chpater 4: Adding title

Chapter 5: Template inheritance

No comments:

Post a Comment

Total Pageviews

Followers