Using Sessions to Manage Theme Preference

Welcome back! As we continue to enhance our Flask ToDo application, let's delve into the use of sessions . In web development, a session is a way to store information specific to a user across multiple requests. This is extremely useful for personalizing the user's experience, such as by keeping track of their preferred theme. In this lesson, we'll focus on how to use Flask sessions to allow users to switch between a light and dark theme in our ToDo application. By the end of this lesson, you'll know how to implement a session-based theme management system and understand the practical application of sessions in a real-world scenario.

What Are Sessions?

In web development, a session is like a conversation between your browser and a website. It helps the website remember information about you as you move from one page to another. This is essential for things like staying logged in or remembering your preferences. Key Concepts: Starting a Session : When you visit a website, a session begins. It helps the site keep track of your interactions. Session ID : The browser gets a unique session ID, usually stored as a small file called a cookie. This ID is like your personal ticket, helping the website identify you.

How Do Sessions Work?

Sessions play a key role in making a website feel seamless and personalized for individual users. When a user interacts with a website, a unique session ID is assigned to their browser, usually stored as a cookie. Here's a simplified overview of how sessions function: Data Storage : The website stores user-specific information, such as preferences or progress, securely on its server. The session ID, carried by the user's browser, acts like a key to access this stored data. Continuity and Experience : Each time the user navigates or performs an action on the website, their session ID is sent along with the request. This allows the website to recognize the user and provide a consistent experience, such as keeping them logged in or remembering their preferred theme. The importance of sessions lies in their ability to offer a personalized experience, maintain the state of ongoing activities like filling forms or shopping carts, and enhance security by keeping sensitive data on the server rather than the user's device.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Configuring Flask for Session Management

It's important to ensure Flask is properly set up for session management. One key aspect of using sessions securely is setting a secret key. This secret key is utilized by Flask to encrypt the session data, which ensures that user data is protected.

Here's how you configure Flask to handle sessions:

Python

from flask import Flask
from controllers.todo_controller import todo_controller
from controllers.theme_controller import theme_controller
from middlewares.error_handler import setup_error_handler
from models import db
from config import Config

app = Flask(__name__)

app.config.from_object(Config)

# Set a secret key for session management
app.secret_key = 'your_unique_secret_key'

db.init_app(app)

with app.app_context():
    db.create_all()

setup_error_handler(app)

app.register_blueprint(todo_controller)

# Import the new theme controller
app.register_blueprint(theme_controller)

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=3000, debug=True)

from flask import Flask
from controllers.todo_controller import todo_controller
from controllers.theme_controller import theme_controller
from middlewares.error_handler import setup_error_handler
from models import db
from config import Config

app = Flask(__name__)

app.config.from_object(Config)

# Set a secret key for session management
app.secret_key = 'your_unique_secret_key'

db.init_app(app)

with app.app_context():
    db.create_all()

setup_error_handler(app)

app.register_blueprint(todo_controller)

# Import the new theme controller
app.register_blueprint(theme_controller)

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=3000, debug=True)

In this snippet, the app.secret_key line sets up a unique secret key for our Flask application. This is crucial for enabling encrypted session management and should be a complex and secret string in a production environment. With the theme_controller registered, your application is ready to handle theme switching and session management efficiently.

Integrating Themes in ToDo Controller

Next, we need to modify our ToDo controller to fetch and apply the theme stored in the session.

Python

from flask import Blueprint, render_template, request, redirect, url_for, session
from services.todo_service import TodoService

todo_service = TodoService()

todo_controller = Blueprint('todo', __name__)

@todo_controller.route('/', methods=['GET'])
def list_todos():
    sort_by = request.args.get('sort_by')
    filter_by = request.args.get('filter_by')
    todos = todo_service.get_all(sort_by=sort_by, filter_by=filter_by)
    # Retrieve theme from session or default to 'light'
    theme = session.get('theme', 'light')
    # Pass the theme to template
    return render_template('todo_list.html', todos=todos, theme=theme)
    
@todo_controller.route('/edit/<int:todo_id>', methods=['GET'])
def edit_todo(todo_id):
    todo_item = todo_service.get_by_id(todo_id)
    if not todo_item:
        return redirect(url_for('todo.list_todos'))
    # Retrieve theme from session or default to 'light'
    theme = session.get('theme', 'light')
    # Pass the theme to template
    return render_template('todo_edit.html', todo=todo_item, theme=theme)
    
# Other routes...

from flask import Blueprint, render_template, request, redirect, url_for, session
from services.todo_service import TodoService

todo_service = TodoService()

todo_controller = Blueprint('todo', __name__)

@todo_controller.route('/', methods=['GET'])
def list_todos():
    sort_by = request.args.get('sort_by')
    filter_by = request.args.get('filter_by')
    todos = todo_service.get_all(sort_by=sort_by, filter_by=filter_by)
    # Retrieve theme from session or default to 'light'
    theme = session.get('theme', 'light')
    # Pass the theme to template
    return render_template('todo_list.html', todos=todos, theme=theme)
    
@todo_controller.route('/edit/<int:todo_id>', methods=['GET'])
def edit_todo(todo_id):
    todo_item = todo_service.get_by_id(todo_id)
    if not todo_item:
        return redirect(url_for('todo.list_todos'))
    # Retrieve theme from session or default to 'light'
    theme = session.get('theme', 'light')
    # Pass the theme to template
    return render_template('todo_edit.html', todo=todo_item, theme=theme)
    
# Other routes...

In this snippet from todo_controller.py we update the routes that render our templates:

Theme Retrieval: We retrieve the theme from the session using session.get('theme', 'light'). If no theme is set in the session, it defaults to 'light'.
Template Rendering: The theme is passed to the todo_list.html and todo_edit.html templates, which will dynamically adjust their styles based on the value of the theme.