Creating a Home screen

# Introduction We use Flask to create an application from scratch and organize it so that you can learn the necessary technology.

-Creating a simple app with flask --Try to create a Home screen ← ★ Currently here -Try to create an authentication function -Try to handle the database -Try to create CRUD function

Creating a Home screen

What is the MTV framework?

Flask is roughly divided into three MTV frameworks: Model, Template, and View.

For example, when a user makes a request, Flask processes it as follows:

  1. The user makes a big access (request) to a certain URL
  2. Read the accessed URL and execute the predefined process associated with the URL. (View)
  3. Access the database through an object called a model as needed during the process (Model)
  4. Return a template such as HTML to be displayed to the user at the end of processing (Template)
  5. The user views the returned HTML file

In the past, the request was mostly returned as a string, but what the user actually sees in a web browser is an html file. Therefore, I will return the html file.

Rendering html files

Pass the html file to the browser

from src import app
from flask import render_template

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

Creating a Templetes file

Create a templates directory in the src directory. Create an entries directory inside the templates directory and create an index.html file.

--Designed by Bootstrap This time, I'm going to use Bootstrap, a CSS library, to improve the appearance of html files.

Bootstrap import statement. Add the following 4 lines.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<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/[email protected]/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>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" 
          href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
          crossorigin="anonymous">
    <title>Flask App</title>
</head>
<body>
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-lighy bg-light">
            <a class="navbar-brand" href="/">Flask Blog</a>
        </nav>
    </div>

    <div class="blog-body">
 There are no posts.
    </div>

    <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/[email protected]/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 you launch the app, it should look like the following. スクリーンショット 2021-01-01 12.15.11.png

Recommended Posts

Creating a Home screen
Creating a login screen with Django allauth
[Day 9] Creating a model
4. Creating a structured program
Creating a scraping tool
Creating a dataset loader
Try creating a CRUD function
Create a Django login screen
Block device RAM Disk Creating a device
Creating a web application using Flask ②
Creating a wav file split program
Step by Step for creating a Dockerfile
Creating a decision tree with scikit-learn
Creating a Flask server with Docker
Creating a voice transcription web application
Creating a simple table using prettytable
Creating a simple app with flask
Creating a web application using Flask ①
[Python] Creating a scraping tool Memo
Precautions when creating a Python generator
Creating a learning model using MNIST
Creating a web application using Flask ③
When creating a matrix in a list
Creating a web application using Flask ④
[Python] Chapter 03-01 turtle graphics (creating a turtle)
Creating a simple PowerPoint file with Python
Creating a LINE bot ~ Creating, deploying, and launching ~
Commands for creating a new django project
Build a TOP screen for Django users
[Python] [Windows] Take a screen capture in Python
Creating a python virtual environment on Windows
Memo for creating a text formatting tool
Creating a data analysis application using Streamlit
[Python] Creating a stock price drawdown chart
Creating a shell script to write a diary
Memo about Sphinx Part 1 (Creating a project)
Creating a cholera map for John Snow
Creating a virtual environment in an Anaconda environment
Creating a development environment for machine learning
python: Creating a ramen timer (pyttsx3, time)
Creating software that mirrors the Android screen to a PC 2 Real-time touch edition