Building a Simple Web Application with Flask: A Beginner’s Guide

Flask is a micro web framework for Python that is widely used for building web applications. It’s easy to set up and can scale up to complex applications. This guide will walk you through creating a simple web application using Flask.

Basic Concepts

Flask is built on Werkzeug and Jinja2. Werkzeug provides utilities for creating a WSGI application, and Jinja2 is a templating engine. Flask allows you to create web applications by defining routes and views.

Setting Up Flask

First, you need to install Flask. You can do this using pip:

pip install Flask

Creating a Simple Application

Create a new directory for your project and navigate into it. Then, create a new file named app.py. This file will contain the code for your Flask application.

app.py

from flask import Flask, render_template, request, redirect, url_for

  app = Flask(__name__)

  # In-memory storage for tasks
  tasks = []

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

  @app.route('/add', methods=['POST'])
  def add_task():
      task = request.form['task']
      if task:
          tasks.append(task)
      return redirect(url_for('index'))

  @app.route('/clear', methods=['POST'])
  def clear_tasks():
      global tasks
      tasks = []
      return redirect(url_for('index'))

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

In this code snippet, we define a simple Flask application with three routes:

/: Displays the home page with a list of tasks.
/add: Adds a new task to the list.
/clear: Clears all tasks from the list.

Creating Templates

Flask uses Jinja2 for templating. Create a folder named templates in your project directory. Inside templates, create a file named index.html.

templates/index.html

&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Simple Task Manager&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;Simple Task Manager&lt;/h1&gt;
      &lt;form action="{{ url_for('add_task') }}" method="post"&gt;
          &lt;input type="text" name="task" placeholder="Enter a task" required&gt;
          &lt;button type="submit"&gt;Add Task&lt;/button&gt;
      &lt;/form&gt;
      &lt;ul&gt;
          {% for task in tasks %}
              &lt;li&gt;{{ task }}&lt;/li&gt;
          {% else %}
              &lt;li&gt;No tasks yet!&lt;/li&gt;
          {% endfor %}
      &lt;/ul&gt;
      &lt;form action="{{ url_for('clear_tasks') }}" method="post"&gt;
          &lt;button type="submit"&gt;Clear All Tasks&lt;/button&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;

This HTML file uses Jinja2 templating syntax to render the list of tasks dynamically. It also includes forms to add and clear tasks.

Running the Application

To run your Flask application, execute the following command in your terminal:

python app.py

This will start a development server. Open your web browser and navigate to http://127.0.0.1:5000/ to see your application in action.

Conclusion

This guide provided a basic introduction to building web applications with Flask. You learned how to set up a Flask environment, define routes, and use templates to render HTML. Flask is a powerful framework that can be used to create complex web applications, and this simple task manager is just the beginning.