Flask Tutorial – Creating A Simple Micro Blogging Application

Flask Tutorial – Creating a Simple Micro Blogging Application. Do you want to develop an application using Python and Flask? Here you have the opportunity to learn through examples. In this flask tutorial for beginners, Coding compiler will create a simple microblogging application. It only supports one user who can create a plain text entry without pushing or commenting, but it still has everything you need to start. I will use Flask and SQLite from the Python framework as a database, so you don’t need anything else. Let’s start learning Python Flask.

Python Flask Tutorial – Creating a Simple Micro Blogging Application Using SQLite

Here in this flask tutorial, you will learn how to create a simple microblogging application using Python flask and SQLite.

Creating a Simple Micro Blogging Application Using Flask

Introducing Flaskr

Here we will call our blog as flskr, or we can take a lesser name than web 2.0. Basically, we want it to do the following things:

1. According to the authentication in the configuration file, the user is allowed to log in and log out. Only one user is supported.
2. When users log in, they can add new entries consisting of a plain text title and the HTML body. Because we trust the user’s HTML here is safe.
3. The page displays all entries in reverse order (new entries first), and users can add new entries here after logging in.

We will use SQLite 3 directly in this application because it is sufficient for applications of this size. Using SQLAlchemy for larger applications makes sense.

It handles database connections in a more intelligent way, allowing you to connect multiple unused relational databases at once. You can also consider popular NoSQL databases if your data is more suitable for them.

Here is a screenshot of the final application:

Initial Step: Creating folders

Before we start, let’s create the required folder for this application:

/flaskr
    /static
    /templates

The flaskr folder is not a Python package, it’s just where we put the files. In the next step we will directly put the database schema and main module in this folder. The use of the application user can access the files in the static folder via HTTP . This is where the css and javascript files are stored. Flask will look for the Jinja2

Step 1: Database Mode

First, we need to create a database schema. Only one table is sufficient for this application, and we only want to support SQLite, so it is very simple. Just put the following into a file called schema.sql , and place the file in the flasskr folder you just created :

drop table if exists entries;
create table entries (
  id integer primary key autoincrement,
  title string not null,
  text string not null
);

This pattern consists of a single table called entries, where each row contains an id, a title, and a text. Id is an auto-incremented integer and it is a primary key, and the remaining two are non-empty strings.

Flask Tutorial – Creating A Simple Micro Blogging Application

Step 2: Application of the setup code

Now that we have the database schema, we can create application modules. Let’s call it flaskr.py and place it in the flaskr folder. For beginners, we will add all the required imports as in the configuration chapter. For small applications, it is feasible to place the configuration directly in the main module, just as we do now. However, a cleaner solution is to create a .ini or .py file separately and then load or import the values.

In flaskr.py :

# all the imports 
import  sqlite3 
from  flask  import  Flask ,  request ,  session ,  g ,  redirect ,  url_for , \
      abort ,  render_template ,  flash

# configuration 
DATABASE  =  '/tmp/flaskr.db' 
DEBUG  =  True 
SECRET_KEY  =  'development key' 
USERNAME  =  'admin' 
PASSWORD  =  'default'

Next we can create a real application and then initialize with the configuration in the same file (in flaskr.py ):

# create our little application :) 
app  =  Flask ( __name__ ) 
app . config . from_object ( __name__ )

from_object()It will look for the given object (if it is a string, it will import it) and search for all uppercase variables defined inside. In our case, the configuration file is just a few lines of code that we wrote above. You can also store them separately into multiple files.

It is usually a good idea to load the configuration from a configuration file. This is from_envvar()done by replacing it with the abovefrom_object()

App . config . from_envvar ( 'FLASKR_SETTINGS' ,  silent = True )

This method we can set a name FLASKR_SETTINGSEnvironment variables to set whether a configuration file is overwritten after the default value is loaded. The silent switch tells Flask not to care if this environment variable key exists.

Secret_key is needed to keep the client’s session safe. Choosing the key wisely makes it difficult to guess and as complex as possible. The debug flag enables or disables interactive debugging. Never let debug mode start in the production system because it will allow users to execute code on the server!

We also added a method that easily connects to the specified database. This method is used to open a connection when requested, and it can also be used in interactive Python shells and scripts. This is very convenient for the future.

Def  connect_db (): 
    return  sqlite3 . connect ( app . config [ 'DATABASE' ])

Finally, if we want to run that file as a standalone application, we only need to add this line at the end of the server startup file:

If  __name__  ==  '__main__' : 
    app . run ()

So we can successfully start running this application, using the following command:

Python flaskr.py

You will see a message that informs you of the server’s starting address, which you can access.

When you access the server in the browser to get a 404 page cannot find the error, because we do not have any views. We will follow these later. First of all, we should let the database work.

Flask Tutorial – Creating A Simple Micro Blogging Application

Step 3: Create a database

As mentioned earlier, Flaskr is a database-driven application. To be precise, Flaskr is an application that uses a relational database system. Such systems need a pattern to tell them how to store information. Therefore, it is important to create the database schema before starting the server for the first time.

You can create this schema by pipelining the schema.sql as the input to the sqlite3 command. The command is as follows:

the sqlite3  / tmp / flaskr . DB  <  Schema . SQL

The disadvantage of this method is the need to install sqlite 3 commands, not every system has an installation. And you must provide the path to the database or you will get an error. Adding a function is a good idea for initializing the database.

If you want to do, first of all you must import the package from contextlib contextlib.closing()function. And add the following content in the flskr.py file:

From  contextlib  import  closing

Then we can create a function called init_db , which is used to initialize the database. For this we can use the previously defined connect_db function. Just add this function under the connect_db function:

Def  init_db (): 
    with  closing ( connect_db ())  as  db : 
        with  app . open_resource ( 'schema.sql' )  as  f : 
            db . cursor () . executescript ( f . read ()) 
        db . commit ()

closing()The helper function allows us to keep the database connection available with in the block. Application object open_resource()which also supports this function block outside thereof, and therefore can be with direct blocks. This function opens a file from the resource location (your flaskr folder) and allows you to read it. We use it here to execute a script on a database connection.

When we connect to the database we get a database connection object (named db here ) that provides us with a database pointer. There is a method on the pointer that can execute the full script. Finally, we do not explicitly submit the changes. SQLite 3 or other transactional databases will not do so.

You can now create the database in the Python shell, import and call the function just now:

>>> from  flaskr  import  init_db 
>>> init_db ()

@app.before_request 
def  before_request (): 
    g . db  =  connect_db ()

@app.teardown_request 
def  teardown_request ( exception ): 
    g . db . close ()

@app.route ( '/' ) 
def  show_entries (): 
    cur  =  g . db . execute ( 'select title, text from entries order by id desc' ) 
    entries  =  [ dict ( title = row [ 0 ],  text = row [ 1 ])  for  row  in  cur . fetchall ()] 
    return  render_template ( 'show_entries.html' ,  entries = entries)

@app.route ( '/add' ,  methods = [ 'POST' ]) 
def  add_entry (): 
    if  not  session . get ( 'logged_in' ): 
        abort ( 401 ) 
    g . db . execute ( 'insert into entries (title , text) values ​​(?, ?)' , 
                 [ request . form [ 'title' ],  request . form [ 'text' ]]) 
    g . db . commit() 
    flash ( 'New entry was successfully posted' ) 
    return  redirect ( url_for ( 'show_entries' ))

@app.route ( '/login' ,  methods = [ 'GET' ,  'POST' ]) 
def  login (): 
    error  =  None 
    if  request . method  ==  'POST' : 
        if  request . form [ 'username' ]  ! =  app . config [ 'USERNAME' ]: 
            error  =  'Invalid username' 
        elif  request . form [ 'password' ]  !=  app. Config [ 'PASSWORD' ]: 
            error  =  'Invalid password' 
        the else : 
            the session [ 'the logged_in' ]  =  True 
            Flash ( 'were logged in by You' ) 
            return  the redirect ( the url_for ( 'show_entries' )) 
    return  the render_template ( ' the login.html ' ,  error = error )

@app.route ( '/logout' ) 
def  logout (): 
    session . pop ( 'logged_in' ,  None ) 
    flash ( 'You were logged out' ) 
    return  redirect ( url_for ( 'show_entries' ))

<!doctype html>
<title>Flaskr</title>
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">
<div class=page>
  <h1>Flaskr</h1>
  <div class=metanav>
  {% if not session.logged_in %}
    <a href="{{ url_for('login') }}">log in</a>
  {% else %}
    <a href="{{ url_for('logout') }}">log out</a>
  {% endif %}
  </div>
  {% for message in get_flashed_messages() %}
    <div class=flash>{{ message }}</div>
  {% endfor %}
  {% block body %}{% endblock %}
</div>

{% extends "layout.html" %}
{% block body %}
  {% if session.logged_in %}
    <form action="{{ url_for('add_entry') }}" method=post class=add-entry>
      <dl>
        <dt>Title:
        <dd><input type=text size=30 name=title>
        <dt>Text:
        <dd><textarea name=text rows=5 cols=40></textarea>
        <dd><input type=submit value=Share>
      </dl>
    </form>
  {% endif %}
  <ul class=entries>
  {% for entry in entries %}
    <li><h2>{{ entry.title }}</h2>{{ entry.text|safe }}
  {% else %}
    <li><em>Unbelievable.  No entries here so far</em>
  {% endfor %}
  </ul>
{% endblock %}

{% extends "layout.html" %}
{% block body %}
  <h2>Login</h2>
  {% if error %}<p class=error><strong>Error:</strong> {{ error }}{% endif %}
  <form action="{{ url_for('login') }}" method=post>
    <dl>
      <dt>Username:
      <dd><input  >usernamename =texttype = 
      <dt>Password:
      <dd><input type=password name=password>
      <dd><input type=submit value=Login>
    </dl>
  </form>
{% endblock %}

body            { font-family: sans-serif; background: #eee; }
a, h1, h2       { color: #377BA8; }
h1, h2          { font-family: 'Georgia', serif; margin: 0; }
h1              { border-bottom: 2px solid #eee; }
h2              { font-size: 1.2em; }

.page           { margin: 2em auto; width: 35em; border: 5px solid #ccc;
                  padding: 0.8em; background: white; }
.entries        { list-style: none; margin: 0; padding: 0; }
.entries li     { margin: 0.8em 1.2em; }
.entries li h2  { margin-left: -1em; }
.add-entry      { font-size: 0.9em; border-bottom: 1px solid #ccc; }
.add-entry dl   { font-weight: bold; }
.metanav        { text-align: right; font-size: 0.8em; padding: 0.3em;
                  margin-bottom: 1em; background: #fafafa; }
.flash          { background: #CEE5F5; padding: 0.5em;
                  border: 1px solid #AACBE2; }
.error          { background: #F0D6D6; padding: 0.5em; }