Python S2E1 : Flask – Install, Hello world

Python S2E1 : Flask – Install, Hello world



Language :
Rating : 5/5 (1)




Introduction

Flask is a web framework developed by Amin Ronacher. It allows us easily build web apps in python programming language. Flask is based on Werkzeug WSGI toolkit and Jinja2 template engine. Werkzeug implements requests, response objects and other utility functions. It's a WSGI toolkit. WSGI stands for Web Server Gateway Interface. It's a specification for universal interface bewteen web server and the web applications. Application frameworks are typically important as they allow us write web applications in general programming language without having to worry about low level apis and protocols.
In this simple tutorial, we see a hello world app by flask and how to pass data via url and show in our user interface.

Install Flask using the following commands:
$ pip install Flask

You can find detailed installation guide of Flask here.

Tools Used

Language : Python, HTML
Platform : Backend and Fronted Web
Backend: Flask
Fontend: Materializecss
IDE : PyCharm
Topics : Object Oriented Python, Flask install,Flask hello world, Flask URL Data Passing

Questions this Project answers.

  • How to install Flask.
  • Flask web development example
  • Flask Data passing via url example

Libraries Used

These are the third party CSS and JS used in this project.

  • Flask - Is the web framework we use.
  • Materializecss - Is the material design frontend framework we use.

Screenshot

  • Here's the screenshot of the project.
Python Flask Hello World

Python Flask Hello World

Project Structure

  • Here's the structure of the project.

Source Code

Lets have a look at the source code.

index.htmlHello.pyVideo TutorialDownload
  • Our template.
  • Contains both jinja expressions and html code
  • Data passed from backend will be rendered here.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ site_title }}</title>
    <!-- CSS  -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="{{ url_for('static',filename='css/materialize.min.css') }}" type="text/css" rel="stylesheet" media="screen,projection"/>
    <link href="{{ url_for('static',filename='css/style.css') }}" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
<!--NAVIGATION BAR-->
<nav class="light-blue lighten-1" role="navigation">
    <div class="nav-wrapper container"><a id="logo-container" href="" class="brand-logo">{{ site_title }}</a>
        <ul class="right hide-on-med-and-down">
            <li><a href="">Home</a></li>
            <li><a href="">About</a></li>
        </ul>
        <a href="" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
    </div>
</nav>
<!--CONTAINER-->
<div class="container">
    <h1 class="header center orange-text">{{ header }}</h1>
    <h4 class="center light-blue-text">{{ sub_header }}</h4>
<h5 class="center">{{ description }}</h5>
</div>
<br>
<br>
<br>
<br>
<br>
<!--FOOTER-->
<footer class="page-footer orange">
    <div class="container">
        <div class="row">
            <div class="col l6 s12">
                <h5 class="white-text">Company Bio</h5>
                <p class="grey-text text-lighten-4">We are a team of college students working on this project like it's
                    our full time job.</p>
            </div>
            <div class="col l3 s12">
                <h5 class="white-text">Languages</h5>
                <ul>
                    <li><a class="white-text" href="#!">Javascript</a></li>
                    <li><a class="white-text" href="#!">PHP</a></li>
                    <li><a class="white-text" href="#!">Java</a></li>
                    <li><a class="white-text" href="#!">C#</a></li>
                </ul>
            </div>
            <div class="col l3 s12">
                <h5 class="white-text">Connect</h5>
                <ul>
                    <li><a class="white-text" href="#!">Facebook</a></li>
                    <li><a class="white-text" href="#!">Twitter</a></li>
                    <li><a class="white-text" href="#!">Google Plus</a></li>
                    <li><a class="white-text" href="#!">LinkedIn</a></li>
                </ul>
            </div>
        </div>
    </div>
</footer>
</body>
</html>

 

  • Our python file.
  • Import flask and render_template
  • Initialize flask
  • Decorate index function with our route
# import flask
from flask import Flask, render_template
# initialize flask
app = Flask(__name__)
# homepage
@app.route('/')
def index():
    return render_template('index.html',site_title="Camposha.info",header="Hello World",sub_header="First Flask app",
                           description="Camposha.info is a programming examples portal. We produce easy to understand programming"
                                       "examples in many dufferent languages. Our examples are practical and beginner friendly.")
# run flask
if __name__ == '__main__':
    app.run(debug=True)

 

  • We have a youtube channel with over 600 video tutorials as of now. We add videos almost on a daily basis and we explain everything in details.We take a practical approach instead of so much theory. So please subscribe to stay tuned.
  • Otherwise below is the detailed video version of this tutorial.

Python S2E1 : Flask - Install, Hello World

  • Download the Project below:
Download

Conclusion

So that's it guys. Please remember to subscribe to our YouTube channel we are adding tutorial regularly.

How to Download and Run.

  1. Download the project above.
  2. You'll get a zipped file,extract it.
  3. Extract and import into your IDE and run.

More

  • Visit our channel for more examples like these.
  • Lets share tips and ideas in our Facebook Page.

Oclemy,Cheers.



Rating :

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    eleven + twelve =

    COMMENTS