[Trainer's Recipe] I touched the flame of the Python framework.

This Entry is an article posted by a trainer / tutor of G's ACADEMY TOKYO . We will spell out small questions and questions that came up in class, new technologies that trainers are interested in, etc. without any connection.

python_flask.png

I touched the python framework flask.

I'm Kuribayashi from G's Academy staff.

Recently, python is popular in G's Academy, so I wanted to touch it myself, so I tried it with a soft touch.

This time I would like to touch a framework called Flask.

Flask is a lightweight web application framework for the programming language Python. It is said that it is called "micro framework" because it keeps the functions provided as standard to the minimum.

Referenced link http://a2c.bitbucket.org/flask/quickstart.html#id2

I was attracted to the title of the smallest application example in the above link and tried it. Since I have only tried it on my own PC, it may not work even if I follow the procedure. In that case, please refer to the linked page.

Let's challenge immediately. (I only wrote the procedure I did on Mac. I'm sorry for windows ...)

The Python version is as follows. Python 3.5.2

Let's build the environment first.

Environment

Enter the following command in the terminal. (Maybe you need sudo in your head ...)

$ easy_install virtualenv

It seems that this is also fine. .. .. (Maybe you need sudo in your head ...)

$ pip3 install virtualenv

Create an environment called env in the project folder myproject.

$ mkdir myproject
$ cd myproject
$ virtualenv env

It is said that this environment will be activated to use this environment. Enter the following command.

$ . env/bin/activate

Flask installation

Install Flask.

$ easy_install Flask

Did you install it with this? ..

Challenge hello world

I will try hello world immediately.

First, create a hello.py file.

/myproject
    /hello.py

Create a hello.py file and write the following code.

hello.py


from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello_world():
    return "Hello World!That's right"

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

After entering the above, enter the following command in the location where the hello.py file is stored in the terminal.

$ python3 hello.py
 * Running on http://127.0.0.1:5000/

It seems that the server is now up.

From the browser http://127.0.0.1:5000/ When I try to access

スクリーンショット 2016-07-29 2.53.43.png

Oh! Hello World success! It's super easy to do with just this. Great.

Returns html template

This time I want to return an html file, so I will challenge it. Flask is searched from the template templates folder, so create a templates folder and create hello.html as a template.

/myproject
    /hello.py
    /templates
        /hello.html

Write the following code in hello.html

templates/hello.html


<!doctype html>
<title>Hello from Flask</title>
{% if name %}
  <h1>{{ name }}San! Hello World from the template!</h1>
{% else %}
  <h1>Hello World from the template!</h1>
{% endif %}

Is this OK?

This time from the browser http://127.0.0.1:5000/hello When I try to access

スクリーンショット 2016-07-29 12.34.50.png

Oh! It was displayed!

This time from the browser http://127.0.0.1:5000/hello/栗林 When I try to access

スクリーンショット 2016-07-29 12.36.24.png

I was able to reflect the characters "Kuribayashi"!

Static file

I will also reflect css, javascript, and images.

css file

First from css.

You can call / static on your application just by creating a folder named static in the package or next to the module. I tried the folder structure as follows.

/myproject
    /hello.py
    /templates
        /hello.html
    /static
        /css
            /style.css

Write the following code in the style.css file.

static/css/style.css


@charset 'utf-8';

body {
    background: #0fa;
}

Let's change the background color appropriately.

Changed the hello.html file as follows to read the css file.

templates/hello.html


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/css/style.css">
    <title>G's academy Trainer's Recipe</title>
</head>
<body>
    <title>Hello from Flask</title>
    {% if name %}
      <h1>{{ name }}San! Hello World from the template!</h1>
    {% else %}
      <h1>Hello World from the template!</h1>
    {% endif %}
</body>
</html>

From the browser http://127.0.0.1:5000/hello/栗林 When I try to access

スクリーンショット 2016-07-29 12.48.51.png

Oh~! It is reflected.

Write JavaScript

Let's write javascript as well. Create a js folder in the static folder and store the main.js file.

/myproject
    /hello.py
    /templates
        /hello.html
    /static
        /css
            /style.css
        /js
            /main.js

Describe in the main.js file as follows.

static/js/main.js


(function(){
    'use strict';

    alert('It's an alert!');

})();

Added script tag for reading javascript to hello.html file.

templates/hello.html


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/css/style.css">
    <title>G's academy Trainer's Recipe</title>
</head>
<body>
    <title>Hello from Flask</title>
    {% if name %}
      <h1>{{ name }}San! Hello World from the template!</h1>
    {% else %}
      <h1>Hello World from the template!</h1>
    {% endif %}

    <!--Add the following-->
    <script src="/static/js/main.js"></script>

</body>
</html>

When I reload the browser ...

スクリーンショット 2016-07-29 12.56.35.png

Successful alert display!

Display image

I want to display the image as well, so let's try it.

Create an images folder in the static folder and store the pic01.png file of the sketch image you drew a while ago.

/myproject
    /hello.py
    /templates
        /hello.html
    /static
        /css
            /style.css
        /js
            /main.js
        /images
            /pic01.png

Modify the hello.html file as follows.

templates/hello.html


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/css/style.css">
    <title>G's academy Trainer's Recipe</title>
</head>
<body>
    <title>Hello from Flask</title>
    {% if name %}
      <h1>{{ name }}San! Hello World from the template!</h1>
    {% else %}
      <h1>Hello World from the template!</h1>
    {% endif %}

    <!--Add the following-->
    <p>
        <img src="/static/images/pic01.png " alt="pic01">
    </p>

    <script src="/static/js/main.js"></script>
</body>
</html>

When I reload the browser ...

スクリーンショット 2016-07-29 13.10.08.png

Oh~! Great!

This time, I touched Flask, a Python framework, with a soft touch. It's pretty easy, so I felt it was wonderful. I've touched Ruby on Rails for a while, but compared to Rails, it's very simple, and it's good that there are few parts that feel like a black box.

In addition to Flask, Python has various frameworks such as Django, Pyramid, Bottle, Falcon, etc., so if you are interested, please try various frameworks.

This is the Trainer's Recipe by G's ACADEMY TOKYO staff Kuribayashi.

Recommended Posts

[Trainer's Recipe] I touched the flame of the Python framework.
I touched some of the new features of Python 3.8 ①
I didn't know the basics of Python
The Python project template I think of.
I tried the Python Tornado Testing Framework
Try the free version of Progate [Python I]
the zen of Python
I compared the speed of go language web framework echo and python web framework flask
Around the installation of the Python project management framework Trac
I checked out the versions of Blender and Python
A memo that I touched the Datastore with python
I tried to summarize the string operations of Python
Towards the retirement of Python2
About the ease of Python
I touched the Qiita API
About the features of Python
I downloaded the python source
The Power of Pandas: Python
I tried to find the entropy of the image with python
I tried "gamma correction" of the image with Python + OpenCV
I tried the accuracy of three Stirling's approximations in python
I touched the latest automatic test tool "Playwright for Python"
I just changed the sample source of Python a little.
I wrote the basic grammar of Python with Jupyter Lab
I evaluated the strategy of stock system trading with Python.
[Python] I tried to visualize the follow relationship of Twitter
I want to know the features of Python and pip
[Python] I tried collecting data using the API of wikipedia
I compared the speed of Hash with Topaz, Ruby and Python
I tried scraping the ranking of Qiita Advent Calendar with Python
The story of Python and the story of NaN
I checked the distribution of the number of video views of "Flag-chan!" [Python] [Graph]
I compared the calculation time of the moving average written in Python
[Python] The stumbling block of import
First Python 3 ~ The beginning of repetition ~
[Python] I wrote the route of the typhoon on the map using folium
I investigated the mechanism of flask-login!
[Introduction to Python] I compared the naming conventions of C # and Python.
Existence from the viewpoint of Python
pyenv-change the python version of virtualenv
I want to output the beginning of the next month with Python
[Python] I thoroughly explained the theory and implementation of logistic regression
I wrote the code to write the code of Brainf * ck in python
Change the Python version of Homebrew
[Python] I thoroughly explained the theory and implementation of decision trees
[Python] Understanding the potential_field_planning of Python Robotics
I liked the tweet with python. ..
Review of the basics of Python (FizzBuzz)
[Super basics of Python] I learned the basics of the basics, so I summarized it briefly.
I wrote the queue in Python
I made a scaffolding tool for the Python web framework Bottle
I tried to improve the efficiency of daily work with Python
About the basics list of Python basics
I wrote the stack in Python
Learn the basics of Python ① Beginners
I replaced the numerical calculation of Python with Rust and compared the speed
[I touched the Raspberry Pi (1)] I summarized the basic operations of Minecraft Pi Edition (2015.5.23 pre-release)
(Python Selenium) I want to check the settings of the download destination of WebDriver
I want to batch convert the result of "string" .split () in Python
I want to explain the abstract class (ABCmeta) of Python in detail.
I tried to get the authentication code of Qiita API with Python.